feat: pretty type extractions

content/src/content/docs/docs/ai/getting-started.mdx

@@ -166,7 +166,7 @@ This allows Effect to track which services should be added to the requirements o
 
 ### Creating an `AiModel`
 
-To create an `AiModel`, you can use the model-specific factory from one of Effect's provider integration packages. 
+To create an `AiModel`, you can use the model-specific factory from one of Effect's provider integration packages.
 
 **Example** (Defining an `AiModel` to Interact with OpenAi)
 
@@ -185,7 +185,7 @@ This creates an `AiModel` that:
 
 ### Providing an `AiModel`
 
-Once you've created an `AiModel`, you can directly `Effect.provide` it to your Effect programs just like any other service: 
+Once you've created an `AiModel`, you can directly `Effect.provide` it to your Effect programs just like any other service:
 
 ```ts
 import { OpenAiLanguageModel } from "@effect/ai-openai"
@@ -238,7 +238,7 @@ const main = Effect.gen(function*() {
 
 **Flexibility**
 
-If we know that one model or provider performs better at a given task than another, we can freely mix and match models and providers together. 
+If we know that one model or provider performs better at a given task than another, we can freely mix and match models and providers together.
 
 For example, if we know Anthropic's Claude generates some really great dad jokes, we can mix it into our existing program with just a few lines of code:
 
@@ -292,7 +292,7 @@ const Claude37 = AnthropicLanguageModel.model("claude-3-7-sonnet-latest")
 class DadJokes extends Effect.Service<DadJokes>()("app/DadJokes", {
   effect: Effect.gen(function*() {
     // Yielding the model will return a layer with no requirements
-    // 
+    //
     //     ┌─── Layer<AiLanguageModel>
     //     ▼
     const gpt = yield* Gpt4o
@@ -313,7 +313,7 @@ class DadJokes extends Effect.Service<DadJokes>()("app/DadJokes", {
   })
 }) {}
 
-// Programs which utilize the `DadJokes` service have no knowledge of 
+// Programs which utilize the `DadJokes` service have no knowledge of
 // any AI requirements
 //
 //     ┌─── Effect<void, AiError, DadJokes>
@@ -333,7 +333,7 @@ DadJokes.Default
 
 ## Create a Provider Client
 
-To make our code executable, we must finish satisfying our program's requirements. 
+To make our code executable, we must finish satisfying our program's requirements.
 
 Let's take another look at our program from earlier:
 
@@ -359,7 +359,7 @@ const main = generateDadJoke.pipe(
 )
 ```
 
-We can see that our `main` program still requires us to provide an `OpenAiClient`. 
+We can see that our `main` program still requires us to provide an `OpenAiClient`.
 
 Each of our provider integration packages exports a client module that can be used to construct a client for that provider.
 
@@ -400,7 +400,7 @@ The provider clients also have a dependency on an `HttpClient` implementation to
 
 For example, if we know we are going to run this code in NodeJS, we can utilize the `NodeHttpClient` module from `@effect/platform-node` to provide an `HttpClient` implementation:
 
-```ts twoslash /{ (NodeHttpClient) }|, (HttpClient)>|, (never)>/ {35} collapse={6-18} 
+```ts twoslash /{ (NodeHttpClient) }|, (HttpClient)>|, (never)>/ {35} collapse={6-18}
 import { OpenAiClient, OpenAiLanguageModel } from "@effect/ai-openai"
 import { AiLanguageModel } from "@effect/ai"
 import { NodeHttpClient } from "@effect/platform-node"
@@ -429,7 +429,7 @@ const OpenAi = OpenAiClient.layerConfig({
   apiKey: Config.redacted("OPENAI_API_KEY")
 })
 
-// Provide a platform-specific implementation of `HttpClient` to our 
+// Provide a platform-specific implementation of `HttpClient` to our
 // OpenAi layer
 //
 //        ┌─── Layer<OpenAiClient, ConfigError, never>
@@ -439,7 +439,7 @@ const OpenAiWithHttp = Layer.provide(OpenAi, NodeHttpClient.layerUndici)
 
 ## Running the Program
 
-Now that we have a `Layer` which provides us with an `OpenAiClient`, we're ready to make our `main` program runnable. 
+Now that we have a `Layer` which provides us with an `OpenAiClient`, we're ready to make our `main` program runnable.
 
 Our final program looks like the following:
 

content/src/content/docs/docs/behaviour/order.mdx

@@ -97,10 +97,8 @@ interface Person {
 }
 
 // Create a custom order to sort Person objects by name in ascending order
-//
-//      ┌─── Order<Person>
-//      ▼
 const byName = Order.mapInput(
+//    ^?
   Order.string,
   (person: Person) => person.name
 )

content/src/content/docs/docs/code-style/pattern-matching.mdx

@@ -21,9 +21,8 @@ import { Match } from "effect"
 // Simulated dynamic input that can be a string or a number
 const input: string | number = "some input"
 
-//      ┌─── string
-//      ▼
 const result = Match.value(input).pipe(
+//    ^?
   // Match if the value is a number
   Match.when(Match.number, (n) => `number: ${n}`),
   // Match if the value is a string
@@ -66,10 +65,8 @@ The `Match.type` constructor defines a `Matcher` that operates on a specific typ
 import { Match } from "effect"
 
 // Create a matcher for values that are either strings or numbers
-//
-//      ┌─── (u: string | number) => string
-//      ▼
 const match = Match.type<string | number>().pipe(
+//    ^?
   // Match when the value is a number
   Match.when(Match.number, (n) => `number: ${n}`),
   // Match when the value is a string

content/src/content/docs/docs/concurrency/deferred.mdx

@@ -33,9 +33,8 @@ A deferred can be created using the `Deferred.make` constructor. This returns an
 ```ts twoslash
 import { Deferred } from "effect"
 
-//      ┌─── Effect<Deferred<string, Error>>
-//      ▼
 const deferred = Deferred.make<string, Error>()
+//    ^?
 ```
 
 ## Awaiting
@@ -45,13 +44,11 @@ To retrieve a value from a deferred, you can use `Deferred.await`. This operatio
 ```ts twoslash
 import { Effect, Deferred } from "effect"
 
-//      ┌─── Effect<Deferred<string, Error>, never, never>
-//      ▼
 const deferred = Deferred.make<string, Error>()
+//    ^?
 
-//      ┌─── Effect<string, Error, never>
-//      ▼
 const value = deferred.pipe(Effect.andThen(Deferred.await))
+//    ^?
 ```
 
 ## Completing

content/src/content/docs/docs/concurrency/fibers.mdx

@@ -71,9 +71,8 @@ const fib = (n: number): Effect.Effect<number> =>
     ? Effect.succeed(n)
     : Effect.zipWith(fib(n - 1), fib(n - 2), (a, b) => a + b)
 
-//      ┌─── Effect<RuntimeFiber<number, never>, never, never>
-//      ▼
 const fib10Fiber = Effect.fork(fib(10))
+//    ^?
 ```
 
 ## Joining Fibers
@@ -90,9 +89,8 @@ const fib = (n: number): Effect.Effect<number> =>
     ? Effect.succeed(n)
     : Effect.zipWith(fib(n - 1), fib(n - 2), (a, b) => a + b)
 
-//      ┌─── Effect<RuntimeFiber<number, never>, never, never>
-//      ▼
 const fib10Fiber = Effect.fork(fib(10))
+//    ^?
 
 const program = Effect.gen(function* () {
   // Retrieve the fiber
@@ -119,9 +117,8 @@ const fib = (n: number): Effect.Effect<number> =>
     ? Effect.succeed(n)
     : Effect.zipWith(fib(n - 1), fib(n - 2), (a, b) => a + b)
 
-//      ┌─── Effect<RuntimeFiber<number, never>, never, never>
-//      ▼
 const fib10Fiber = Effect.fork(fib(10))
+//    ^?
 
 const program = Effect.gen(function* () {
   // Retrieve the fiber
@@ -483,9 +480,8 @@ const child = Effect.repeat(
   Schedule.fixed("1 second")
 )
 
-//      ┌─── Effect<void, never, Scope>
-//      ▼
 const parent = Effect.gen(function* () {
+//    ^?
   console.log("parent: started!")
   // Child fiber attached to local scope
   yield* Effect.forkScoped(child)

content/src/content/docs/docs/configuration.mdx

@@ -159,9 +159,8 @@ When you log a `Redacted` value using `console.log`, the actual content remains
 import { Effect, Config, Redacted } from "effect"
 
 const program = Effect.gen(function* () {
-  //      ┌─── Redacted<string>
-  //      ▼
   const redacted = yield* Config.redacted("API_KEY")
+  //    ^?
 
   // Log the redacted value, which won't reveal the actual secret
   console.log(`Console output: ${redacted}`)
@@ -199,10 +198,8 @@ import { Effect, Config, Redacted } from "effect"
 
 const program = Effect.gen(function* () {
   // Wrap the validated number configuration with redaction
-  //
-  //      ┌─── Redacted<number>
-  //      ▼
   const redacted = yield* Config.redacted(Config.number("SECRET"))
+  //    ^?
 
   console.log(`Console output: ${redacted}`)
   console.log(`Actual value: ${Redacted.value(redacted)}`)

content/src/content/docs/docs/data-types/cause.mdx

@@ -27,16 +27,12 @@ You can intentionally create an effect with a specific cause using `Effect.failC
 import { Effect, Cause } from "effect"
 
 // Define an effect that dies with an unexpected error
-//
-//      ┌─── Effect<never, never, never>
-//      ▼
 const die = Effect.failCause(Cause.die("Boom!"))
+//    ^?
 
 // Define an effect that fails with an expected error
-//
-//      ┌─── Effect<never, string, never>
-//      ▼
 const fail = Effect.failCause(Cause.fail("Oh no!"))
+//    ^?
 ```
 
 Some causes do not influence the error type of the effect, leading to `never` in the error channel:

content/src/content/docs/docs/data-types/chunk.mdx

@@ -33,9 +33,8 @@ Create an empty `Chunk` with `Chunk.empty`.
 ```ts twoslash
 import { Chunk } from "effect"
 
-//      ┌─── Chunk<number>
-//      ▼
 const chunk = Chunk.empty<number>()
+//    ^?
 ```
 
 ### make
@@ -47,9 +46,8 @@ To create a `Chunk` with specific values, use `Chunk.make(...values)`. Note that
 ```ts twoslash
 import { Chunk } from "effect"
 
-//      ┌─── NonEmptyChunk<number>
-//      ▼
 const chunk = Chunk.make(1, 2, 3)
+//    ^?
 ```
 
 ### fromIterable
@@ -100,10 +98,8 @@ To combine two `Chunk` instances into one, use `Chunk.appendAll`.
 import { Chunk } from "effect"
 
 // Concatenate two chunks with different types of elements
-//
-//      ┌─── NonEmptyChunk<string | number>
-//      ▼
 const chunk = Chunk.appendAll(Chunk.make(1, 2), Chunk.make("a", "b"))
+//    ^?
 
 console.log(chunk)
 /*
@@ -156,17 +152,14 @@ Convert a `Chunk` to a `ReadonlyArray` using `Chunk.toReadonlyArray`. The result
 ```ts twoslash
 import { Chunk } from "effect"
 
-//      ┌─── readonly [number, ...number[]]
-//      ▼
 const nonEmptyArray = Chunk.toReadonlyArray(Chunk.make(1, 2, 3))
+//    ^?
 
-//      ┌─── readonly never[]
-//      ▼
 const emptyArray = Chunk.toReadonlyArray(Chunk.empty())
+//    ^?
 
 declare const chunk: Chunk.Chunk<number>
 
-//      ┌─── readonly number[]
-//      ▼
 const array = Chunk.toReadonlyArray(chunk)
+//    ^?
 ```

content/src/content/docs/docs/data-types/data.mdx

@@ -36,9 +36,8 @@ However, the `Data.struct` constructor allows you to compare values based on the
 ```ts twoslash
 import { Data, Equal } from "effect"
 
-//      ┌─── { readonly name: string; readonly age: number; }
-//      ▼
 const alice = Data.struct({ name: "Alice", age: 30 })
+//    ^?
 
 // Check if Alice is equal to a new object
 // with the same structure and values
@@ -104,9 +103,8 @@ To represent your data using tuples, you can use the `Data.tuple` constructor. T
 ```ts twoslash
 import { Data, Equal } from "effect"
 
-//      ┌─── readonly [string, number]
-//      ▼
 const alice = Data.tuple("Alice", 30)
+//    ^?
 
 // Check if Alice is equal to a new tuple
 // with the same structure and values
@@ -133,9 +131,8 @@ You can use `Data.array` to create an array-like data structure that supports st
 ```ts twoslash
 import { Data, Equal } from "effect"
 
-//      ┌─── readonly number[]
-//      ▼
 const numbers = Data.array([1, 2, 3, 4, 5])
+//    ^?
 
 // Check if the array is equal to a new array
 // with the same values
@@ -179,10 +176,8 @@ interface Person {
 }
 
 // Create a constructor for `Person`
-//
-//      ┌─── (args: { readonly name: string; }) => Person
-//      ▼
 const make = Data.case<Person>()
+//    ^?
 
 const alice = make({ name: "Alice" })