@solidrt/core 0.0.53 → 0.0.55

package/AGENTS.md

@@ -111,7 +111,12 @@ tsconfig.json - the two load-bearing lines are jsx + jsxImportSource:
 ```
 
 Peer deps @solidjs/signals and @solidjs/universal must match (currently
-2.0.0-rc.3); bun resolves them from peerDependencies.
+2.0.0-rc.4); bun resolves them from peerDependencies. On a version bump,
+`bun install` only warns ("incorrect peer dependency") and keeps the old
+ones, and `bun update solid-js @solidjs/signals @solidjs/universal` does
+not read the pin either: it adds all three to package.json at registry
+latest (solid-js 1.x, off Solid 2.0 entirely). The recipe that works is
+`rm -rf bun.lock node_modules/solid-js node_modules/@solidjs && bun install`.
 
 ## Element model (the parts that are easy to get wrong)
 
@@ -174,6 +179,22 @@ Peer deps @solidjs/signals and @solidjs/universal must match (currently
   Avoid pct()/keyword origins on a d-view - they resolve against the box
   inherited from the nearest laid-out ancestor.
 
+- Transforms live on views only. A draw primitive (`d-rect`, `d-text`,
+  `d-path`, ...) paints in its parent's space and has no `rotate`, `scale`
+  or origin of its own; to spin or scale one in place, wrap it in a `d-view`
+  carrying the transform, with the origin set in pixels as above. So a
+  rotating glyph is two nodes, the view at the pivot and the text placed
+  around it - `<d-view x={cx} y={cy} rotate={r}><d-text anchor="middle"
+  y={-h / 2}>{ch}</d-text></d-view>`.
+
+- A `d-text` label is anchored, not boxed: `anchor="start" | "middle" |
+  "end"` makes `x` a point on the line (SVG's text-anchor), the text shapes
+  at its natural width (no wrap) and its lines align to the anchor's side.
+  Without `anchor` a d-text is a paragraph box wrapping at `w` or at the
+  inherited box, and `textAlign` aligns inside that width - so
+  `textAlign="right"` on a `w`-less d-text aligns to the ancestor's right
+  edge, not to `x`. Reach for `anchor` on chart, axis and diagram labels.
+
 - Layout-affecting vs not (this matters for per-frame work). Props fall in three
   buckets, split by where they take effect:
   - `LayoutProps` - width/height, min/max sizes, margin, padding, `position` and
@@ -213,6 +234,23 @@ Peer deps @solidjs/signals and @solidjs/universal must match (currently
   inline atom flowing with the words as one unbreakable box on the baseline;
   give it margins for spacing, since JSX trims the whitespace around it.
 
+- App-side line breaking, for text a `<text>` box cannot express: text
+  poured into a shape, parting around an obstacle that is not in the flow,
+  continued across columns, fitted to a box by size, or placed glyph by
+  glyph. `prepareText(text, font)` shapes the words once (through the
+  shared word cache) into `units` carrying advance, ink width, ascent and
+  descent; `layoutNextLine(prepared, cursor, width)` is the greedy breaker,
+  returning one line and the `cursor` for the next, at whatever width you
+  hand it per call (a chord of a circle, a slot beside an obstacle, the next
+  column). Draw each line as a `<d-text>` of exactly its text with the same
+  font. Re-breaking every frame is arithmetic plus cache hits, so a moving
+  or breathing shape re-flows at frame rate; only the first shaping cost
+  anything. `carets: true` adds each unit's per-grapheme x positions - the
+  ONLY kerned per-glyph source; per-character `measureText` drops kerning
+  and visibly drifts on pairs like AV/TA. Styled runs come from `runs` (draw
+  such a line with a `<span>` per run). See examples/text-flow.tsx and
+  examples/text-glyphs.tsx.
+
 - Events: there is NO `onClick`/`onPress`. A "button" is a `<view>`/`<rect>`
   with `onPointerDown`. Handlers: onPointerDown/Up/Move/Enter/Leave, onWheel,
   onKeyDown/Up, onTextInput, onFocus/onBlur. Text entry: focus a node with an
@@ -281,9 +319,20 @@ Peer deps @solidjs/signals and @solidjs/universal must match (currently
   session in seconds) and it is what keeps per-frame work cheap.
 - Animation is target-shaped first: declare `transition` on the element and
   write targets, and the runtime animates natively with no per-frame JS.
+  Enter and exit are per-property entries on that same spec: `from` is the
+  value the property animates in from at first attach, `exit` the value it
+  animates to on removal (the node stays painted until it settles, then
+  frees - no AnimatePresence equivalent needed). `stagger` (ms) goes on an
+  ANCESTOR, never on the animating elements: it delays each descendant's
+  enter/exit by `index * stagger`, and cascades nothing unless the
+  descendants declare `from`/`exit`. An enter plays once per mount; to
+  replay it, remount the subtree (`<Show when={epoch()} keyed>` around it,
+  then bump `epoch`). See examples/stagger.tsx.
   Reach for per-frame work only for genuinely procedural motion:
-  `onFrame((tick, frame) => {})` is the native hook (runtime-paced, returns a
-  cleanup, auto-cleaned inside a reactive scope); `requestAnimationFrame`
+  `onFrame((tick, frame, rate) => {})` is the native hook (runtime-paced,
+  returns a cleanup, auto-cleaned inside a reactive scope); `rate` is the
+  display's nominal refresh rate in Hz, which a fixed-timestep loop needs
+  (see @solidrt/cli agents/debugging.md on stepping); `requestAnimationFrame`
   exists as a web-standard one-shot but is not the preferred driver. A JS
   tween loop or an animation library pushing interpolated values through
   signals is the single most expensive mistake available here - read
@@ -306,10 +355,13 @@ Peer deps @solidjs/signals and @solidjs/universal must match (currently
 
 - Device/GPU access via subpath imports: @solidrt/core/camera, /microphone,
   /speech, /gpu. Image flow: `decodeImage(bytes)` ->
-  `createTexture(data,w,h)` -> `<texture src={id} />`. Pixels are
-  premultiplied alpha from decode onward (the GPU contract); `decodeImage(bytes,
-  { alpha: "straight" })` keeps the file's color under transparent pixels for
-  CPU work, and `encodeImage` converts back to straight for the file.
+  `createTexture(data,w,h)` -> `<texture src={id} />`. Sampling (`filter`,
+  `wrap`, `mipmap`) is fixed at creation on every create* helper and follows
+  the id everywhere; agents/performance.md rule 2 says when to set which.
+  Pixels are premultiplied alpha from decode onward (the GPU contract);
+  `decodeImage(bytes, { alpha: "straight" })` keeps the file's color under
+  transparent pixels for CPU work, and `encodeImage` converts back to
+  straight for the file.
 
 ## Minimal app, core primitives only (verified to render)
 

package/agents/painting.md

@@ -38,6 +38,13 @@ no matter how complex the effect, which is why the performance model
 
 ## Web reflexes and what replaces them
 
+- `color-mix()`, `oklch()`, `lab()` -> not in the color grammar (hex,
+  `rgb()`, `hsl()`, `hwb()`, named colors only; the prop throws `Invalid
+  color` otherwise). Mix in JS with `mixColors(a, b, t)` from @solidrt/core
+  (oklab, so a ramp between two colors stays perceptually even) and pass
+  the result; `withAlpha(color, a)` gives any color at an opacity (do not
+  rebuild `rgba()` strings by hand from a hex); `brightness(color)` picks
+  readable text over any fill.
 - gradient background -> a gradient `color` on a `d-rect` (gradients are
   paint values, usable anywhere a color is)
 - `filter: blur/grayscale/hue-rotate`, and any "make this look processed" ->

package/agents/performance.md

@@ -60,9 +60,21 @@ Rules, in order of leverage:
    the flip into its projection) or it draws upside down. Sampling is a
    create-time option on every texture: `{ filter: "nearest" }` for
    hard-pixel upscaling (render a small target, display it big - the
-   retro/pixel-art path) and `{ wrap: "repeat" }` to tile outside 0..1 in
-   shaders; the defaults are linear and clamp, and the choice applies both
-   on screen and to shaders sampling the texture.
+   retro/pixel-art path), `{ wrap: "repeat" }` to tile outside 0..1 in
+   shaders, and `{ mipmap: true }` wherever a shader samples the texture
+   smaller than it is (a 3d surface receding into the distance, a target
+   read at a fraction of its size): without a mip chain minification skips
+   texels and aliases. The chain is regenerated by the runtime after every
+   upload and every target render, nothing to schedule, but it is one GPU
+   pass each time, so a per-frame texture pays it per frame. Add
+   `anisotropy: 8` (any level; the device clamps) beside `mipmap: true` on a
+   tiled surface seen at a grazing angle - a road or floor receding to the
+   horizon - where trilinear alone smears the far half into the mip its
+   long axis chose; it does nothing without the chain. The defaults
+   are linear, clamp, no mips and anisotropy 1; the choice is fixed at creation (a change
+   means a new id) and applies both on screen and to shaders sampling the
+   texture, except that the `<texture>` display draw samples the full-size
+   level only, so mips never help a texture merely shown smaller.
 3. Reduce setProperty calls wherever possible: one path string rebuilt per
    frame beats N elements with N animated positions; a shader beats the path
    string. get_stats' setPropsPerFrame is the counter to watch. Compiled JSX
@@ -140,6 +152,13 @@ Rules, in order of leverage:
    platform the app targets. Use it when the app must call a native
    library that already exists and already ships for those targets; for
    speed, everything above comes first.
+10. Text costs shaping, once per word per style, through a shared word cache;
+   line breaking is arithmetic over the shaped words. So re-breaking text
+   every frame with prepareText + layoutNextLine (a shape that breathes, an
+   obstacle that moves, an editor on every keystroke) is cheap - the lines'
+   d-texts hit the same cache - while changing a text's font, size or
+   weight re-shapes it. Animate text with transforms and paint (rule 5), or
+   by re-breaking; not by resizing it per frame.
 
 ## Isolates: heavy work off the JS thread
 

package/docs/reference/detached.md

@@ -49,7 +49,10 @@ to detach from.
 
 ## Geometry
 
-Detached geometry is paint-space pixels and never affects layout.
+Detached geometry is paint-space pixels and never affects layout. The
+reverse holds too: a laid-out tile holding only detached geometry must not
+be allowed to flex-shrink (wrap the row, or give it `flexShrink={0}`),
+since the box shrinks and the geometry does not.
 
 {{ decl packages/core/src/types.d.ts PositionProps }}
 
@@ -62,15 +65,19 @@ ancestor, so a `d-rect` with only `x`/`y` still has something to draw:
 
 {{ decl packages/core/src/types.d.ts OvalGeometryProps }}
 
-For `d-text`, width is the shaping width and height is reported bounds only,
-since a paragraph's height always falls out of the text itself:
+`d-text` is boxed or anchored. Boxed, it wraps at `w` or at the inherited
+box, and `textAlign` aligns lines inside that width. Anchored, `x` is a point
+on the line (SVG's `text-anchor`) and the text does not wrap unless given a
+`w`; that is the form for labels. Its reported bounds are the laid-out
+paragraph, with `w`/`h` overriding a side each:
 
 {{ decl packages/core/src/types.d.ts TextGeometryProps }}
 
 `d-path` takes only a position, since its size is whatever its `d` string
 draws. `d-line` has no width and height either: its geometry is its two
-endpoints (or, as a polyline, its `points`), which is what makes it the
-primitive to reach for when the geometry moves. Both report their bounds
+endpoints (or, as a polyline, its `points`), offset as a whole by `x`/`y`,
+which is what makes it the primitive to reach for when the geometry moves.
+Both report their bounds
 (getBoundingBox, the tree, a capture) as that geometry plus the stroke, not
 the inherited box:
 

package/docs/reference/drawing.md

@@ -27,12 +27,13 @@ stroke rather than a box.
 
 ## Dashing
 
-A stroke's dash pattern, on `line` and `path`:
+A stroke's dash pattern, on every stroked primitive:
 
 {{ decl packages/core/src/types.d.ts DashProps }}
 
 The pattern is walked along the geometry itself: through a polyline's
-vertices and along a path's curves, restarting at each subpath of a path.
+vertices, along a path's curves (restarting at each subpath), and around a
+rect's or oval's inset outline (inside the box, like the solid stroke).
 `dashOffset` slides it - write it every frame for marching ants, or
 transition it for a one-shot slide. A dashed stroke keeps its caps on every
 dash, and a stroke-and-fill path dashes only the stroke.
@@ -47,10 +48,16 @@ the length).
 
 {{ decl packages/core/src/types.d.ts RectProps }}
 
+A dashed rect (a selection marquee, a drop zone) is the dash props on the
+rect itself; see Dashing above. The pattern starts on the top edge after
+the top-left corner and runs clockwise.
+
 ## oval
 
 {{ decl packages/core/src/types.d.ts OvalProps }}
 
+Dashes like a rect; the pattern starts at 3 o'clock and runs clockwise.
+
 ## line
 
 {{ decl packages/core/src/types.d.ts LineProps }}

package/docs/reference/text.md

@@ -44,3 +44,37 @@ Inline only: its children are text and other spans, and it has no layout box,
 which is why it is the one element with no detached form. Pointer handlers on
 a span fire for the boxes its text occupies on each line it spans, and bubble
 to the enclosing spans and the text.
+
+## Line breaking in app code
+
+A `<text>` wraps in a box. For anything else - text poured into a shape,
+parting around an obstacle that is not in the flow, continued across columns,
+fitted to a box by size, or placed glyph by glyph - the app does the breaking
+itself over words the engine shaped once:
+
+```tsx
+let prepared = prepareText(article, { fontSize: 16, lineHeight: 1.4 })
+let cursor = 0
+for (let band of bands) {                        // any widths, in any order
+  let line = layoutNextLine(prepared, cursor, band.w)
+  if (!line) break
+  lines.push({ ...band, w: line.width, text: prepared.text.slice(line.start, line.end) })
+  cursor = line.cursor                            // the next box continues here
+}
+```
+
+`prepareText` returns the paragraph's wrap units (a word and its trailing
+whitespace) with their advance, ink width, ascent and descent. `layoutNextLine`
+is a greedy breaker over those numbers: it fills one line to the width you hand
+it and returns the cursor for the next, so a circle is a stack of chords, a
+column is the same loop with a new box, and a headline that must fit is a loop
+over sizes. Each line is drawn as a `<d-text>` of exactly its own text in the
+same font.
+
+The split is what makes it usable: shaping happened once, through the shared
+word cache the drawn lines hit again, so re-breaking three paragraphs every
+frame as a shape moves costs arithmetic, not layout. `carets: true` adds each
+unit's per-grapheme x positions from that same shaping - the kerned source for
+per-glyph placement and animation, which measuring characters one at a time
+cannot give. `runs` restyles ranges, with a unit crossing a run boundary coming
+back as glued pieces that always land on one line.

package/examples/README.md

@@ -13,9 +13,14 @@ for the element/prop model see `@solidrt/core/AGENTS.md`.
 - `detached-positioning.tsx` - the `d-` prefix: x/y placement, no reflow, detached-only children.
 - `text-paint-styling.tsx` - the uniform `color` prop; `drawStyle="stroke"` vs fill.
 
+## Text
+- `text-flow.tsx` - app-side line breaking: `prepareText` shapes a paragraph's words once, `layoutNextLine` breaks one line per call at any width. Poured band by band into a circle (each band the chord at its height), then the cursor continues in a column beside it; every line is a `d-text` of its own text. Re-breaks fully on resize for arithmetic plus word-cache hits.
+- `text-glyphs.tsx` - per-glyph positions: `prepareText(text, { carets: true })` reports each unit's kerned grapheme x positions from the shaping that is drawn. One `d-text` per glyph placed from carets sits exactly on the whole headline; the same glyphs placed by per-character `measureText` drift on every kerning pair.
+
 ## Frame and lifecycle
 - `frame-animation.tsx` - `onFrame` driving a transform animation each frame.
 - `on-layout-connect.tsx` - `onLayout` + `getBoundingBox` connecting laid-out boxes with a `d-path`.
+- `stagger.tsx` - enter/exit/stagger with no per-frame JS: `from` and `exit` per property on each row's own `transition`, `stagger` on the ANCESTOR cascading them in occurrence order, and the replay idiom - a keyed `<Show>` remounts the subtree when its `when` value changes, so bumping an epoch replays the whole cascade. Exiting rows stay painted until they settle.
 
 ## Pointer input
 - `pointer-local-coords.tsx` - the three pointer coordinate frames (`clientX` window, `localX` the handling node's own frame, `parentX` its path-parent's frame - where the node's x/y live) and the transform-proof drag idiom: grab offset from `localX` at down, place with `parentX - offset` on moves. Exact inside rotated/scaled ancestors and when the pointer leaves the node mid-drag.

package/examples/line-points.tsx

@@ -19,6 +19,9 @@
 //    knowing its length.
 // 5. A laid-out <line points>: the points are content (like a path's `d`), so
 //    the box measures from their extent and takes part in the row.
+// 6. Dashed boxes: the same props on d-rect and d-oval dash the inset
+//    outline the solid stroke draws, so a marquee or a drop zone is one
+//    element and its dashes never leave the box.
 // The two-endpoint form (x1..y2, on d-line only) is unchanged; while `points`
 // is set it takes precedence over the endpoints.
 import { render, onFrame, createSignal } from "@solidrt/core"
@@ -115,6 +118,24 @@ function App() {
         </view>
       </view>
 
+      <text fontSize={16} color="#8b949e">
+        dashed boxes: a rounded marquee, a stroke-and-fill rect, an oval drawing on
+      </text>
+      <view flexDirection="row" flexWrap="wrap" gap={20}>
+        <view width={140} height={120}>
+          <d-rect radius={8} color="#151b28" />
+          <d-rect x={20} y={20} w={100} h={80} radius={12} drawStyle="stroke" onLength={8} offLength={6} dashOffset={-ants()} color="#e3b341" strokeWidth={3} />
+        </view>
+        <view width={140} height={120}>
+          <d-rect radius={8} color="#151b28" />
+          <d-rect x={20} y={20} w={100} h={80} drawStyle="stroke-and-fill" onLength={10} offLength={6} color="#f8514966" strokeWidth={6} strokeCap="round" />
+        </view>
+        <view width={140} height={120}>
+          <d-rect radius={8} color="#151b28" />
+          <d-oval x={20} y={20} w={100} h={80} drawStyle="stroke" pathLength={1} onLength={drawn()} offLength={1} color="#3fb950" strokeWidth={4} strokeCap="round" />
+        </view>
+      </view>
+
       <text fontSize={16} color="#8b949e">
         partial draw: pathLength=1 makes the pattern fractional, 77% of the curve and a triangle drawing on
       </text>

package/examples/stagger.tsx

@@ -0,0 +1,45 @@
+// Enter, exit and stagger are declared on elements; the runtime plays them
+// with no per-frame JS. `from` is the value a property animates in from at
+// first attach, `exit` the value it animates to on removal - the node stays
+// painted until that settles, then frees. Both are per-property entries on
+// the element's own transition spec. `stagger` (ms) goes on an ANCESTOR,
+// never on the animating elements: every descendant enter or exit that
+// begins in the same frame gets index * stagger of extra delay, in
+// occurrence order. It cascades nothing on its own - the descendants must
+// declare from/exit.
+//
+// An enter plays once per mount. To replay it, remount the subtree: a keyed
+// <Show> re-creates its child whenever `when` changes value, so bumping an
+// epoch replays the whole cascade. Tap anywhere: odd taps unmount the list
+// (staggered exits), even taps mount a fresh one (staggered enters).
+import { render, createSignal, Show } from "@solidrt/core"
+import type { Transition } from "@solidrt/core"
+
+const ROWS = ["Signals", "Effects", "Memos", "Stores", "Boundaries"]
+// Extra delay per row before its enter or exit starts.
+const STAGGER_MS = 70
+// Slide in from the left, out to the right; fade both ways.
+const SLIDE = { duration: 500, bounce: 0.2, from: -80, exit: 80 } satisfies Transition
+const FADE = { duration: 350, curve: "ease-out", from: 0, exit: 0 } satisfies Transition
+
+function App() {
+  let [epoch, setEpoch] = createSignal(1)
+
+  return (
+    <window padding={40} gap={12} onPointerDown={() => setEpoch((e) => e + 1)} transition={{ stagger: STAGGER_MS }}>
+      <text color="#8899aa" fontSize={14}>Tap to replay</text>
+      <Show when={epoch() % 2 === 1 ? epoch() : 0} keyed>
+        {(_epoch) =>
+          ROWS.map((label) => (
+            <view x={0} opacity={1} transition={{ x: SLIDE, opacity: FADE }} height={48} justifyContent="center" paddingLeft={16}>
+              <d-rect color="#2a3a55" radius={10} />
+              <text color="#e8eef6" fontSize={18}>{label}</text>
+            </view>
+          ))
+        }
+      </Show>
+    </window>
+  )
+}
+
+render(() => <App />)

package/examples/text-flow.tsx

@@ -0,0 +1,90 @@
+// App-side line breaking. prepareText shapes a paragraph's words once (through
+// the shared word cache) into units carrying advance, ink width, ascent and
+// descent; layoutNextLine then breaks one line out of them per call, at
+// whatever width it is handed, and returns the cursor the next call continues
+// from. The engine never sees a "shape" or a "column": here the paragraph is
+// poured band by band into a circle (each band's width is the chord at that
+// height, its line centered on it) and, when the circle is full, the same
+// cursor continues in a column beside it. Every line is a d-text of exactly its
+// own text, so the whole break redoes on every resize for arithmetic plus
+// word-cache hits; nothing is shaped twice.
+import { For, createMemo, layoutNextLine, prepareText, render, windowSize } from "@solidrt/core"
+
+const FONT = { fontSize: 16, lineHeight: 1.4 }
+const PAD = 32
+// Gap between the circle and the column that continues its text.
+const GAP = 32
+// A chord shorter than this holds no word: skip the band at the circle's poles.
+const MIN_BAND = 90
+// Breathing room between the ring and the line ends.
+const INSET = 10
+
+const TEXT =
+  "A word is shaped once and keeps its width. From there a line is a loop: add words while the pen stays " +
+  "inside the width you were given, stop, and hand the cursor to whoever wants the next line. Give each " +
+  "call the chord of a circle and the paragraph fills the circle; give the next call a column and it " +
+  "continues there, because a column is only the same loop in a new box. The engine shaped the words " +
+  "before the first frame and never hears about circles or columns at all. Resize the window: the circle " +
+  "grows, every band changes width, and the text re-breaks into it while the words stay as they were. " +
+  "That is the whole trick, and it is the oldest one in typesetting: a compositor with a case of type " +
+  "never reshaped a letter when the column narrowed. The letters kept their width and only the breaks " +
+  "moved. Text engines lost that when a paragraph became one opaque object laid out at one width, and " +
+  "every layout question turned into a re-shape. Prepared text gives the idea back, and this page is that " +
+  "loop and nothing else."
+
+type Placed = { x: number, y: number, w: number, text: string }
+
+function App() {
+  let prepared = prepareText(TEXT, FONT)
+  let lines = createMemo<Placed[]>(() => {
+    let { width, height } = windowSize()
+    let r = Math.min(width * 0.24, (height - 2 * PAD) / 2)
+    let cx = PAD + r
+    let cy = height / 2
+    let units = prepared.units
+    // Single style: every line is as tall as its first unit.
+    let lineH = units[0]!.ascent + units[0]!.descent
+    let out: Placed[] = []
+    let cursor = 0
+    // The circle, top to bottom: each band's width is the chord at its middle.
+    for (let y = cy - r; y + lineH <= cy + r && cursor < units.length; y += lineH) {
+      let dy = y + lineH / 2 - cy
+      let half = Math.sqrt(Math.max(0, (r - INSET) * (r - INSET) - dy * dy))
+      if (2 * half < MIN_BAND) continue
+      let line = layoutNextLine(prepared, cursor, 2 * half)
+      if (!line) break
+      out.push({ x: cx - line.width / 2, y, w: line.width, text: prepared.text.slice(line.start, line.end) })
+      cursor = line.cursor
+    }
+    // The column beside it continues from the same cursor.
+    let colX = cx + r + GAP
+    let colW = width - colX - PAD
+    for (let y = PAD; y + lineH <= height - PAD && cursor < units.length; y += lineH) {
+      let line = layoutNextLine(prepared, cursor, colW)
+      if (!line) break
+      out.push({ x: colX, y, w: line.width, text: prepared.text.slice(line.start, line.end) })
+      cursor = line.cursor
+    }
+    return out
+  })
+  let circle = createMemo(() => {
+    let { width, height } = windowSize()
+    let r = Math.min(width * 0.24, (height - 2 * PAD) / 2)
+    return { x: PAD, y: height / 2 - r, d: 2 * r }
+  })
+  return (
+    <window>
+      <d-rect color="#f4efe6" />
+      <d-oval x={circle().x} y={circle().y} w={circle().d} h={circle().d} drawStyle="stroke" strokeWidth={1} color="#d8b26a" />
+      <For each={lines()} keyed={false}>
+        {line => (
+          <d-text x={line().x} y={line().y} w={line().w + 1} {...FONT} color="#2b2620">
+            {line().text}
+          </d-text>
+        )}
+      </For>
+    </window>
+  )
+}
+
+render(() => <App />)

package/examples/text-glyphs.tsx

@@ -0,0 +1,73 @@
+// Per-glyph positions. prepareText with `carets: true` reports, per wrap unit,
+// the x of every grapheme boundary from the shaping the engine draws - kerning
+// included - so one d-text per glyph placed from them sits exactly on the whole
+// headline. Measuring characters one at a time with measureText cannot know a
+// glyph's neighbors, so pairs like AV and TA come out loose and the row drifts
+// right. Three rows of the same headline: drawn whole, per glyph from carets,
+// per glyph from measureText. Per-glyph d-texts are what a per-character effect
+// (a wave, a color cycle, a stagger) animates.
+import { measureText, prepareText, render } from "@solidrt/core"
+
+const FONT = { fontSize: 48, fontWeight: 800 } as const
+const HEADLINE = "AVATAR Two Ya"
+const LEFT = 32
+const TOP = 40
+const ROW = 96
+// A single glyph never wraps at this width; it only bounds the d-text.
+const GLYPH_W = FONT.fontSize * 2
+const LABEL = { fontSize: 13, color: "#8a8378" }
+
+type Glyph = { x: number, text: string }
+
+// Kerned: each unit's pen position plus its caret offsets.
+function fromCarets(): Glyph[] {
+  let prepared = prepareText(HEADLINE, { ...FONT, carets: true })
+  let out: Glyph[] = []
+  let pen = 0
+  for (let unit of prepared.units) {
+    let carets = unit.carets!
+    for (let i = 0; i + 1 < carets.length; i++) {
+      out.push({ x: pen + carets[i]!.x, text: prepared.text.slice(carets[i]!.offset, carets[i + 1]!.offset) })
+    }
+    pen += unit.advance
+  }
+  return out
+}
+
+// Unkerned: each character measured alone, advanced by its own width.
+function fromMeasure(): Glyph[] {
+  let out: Glyph[] = []
+  let x = 0
+  for (let ch of HEADLINE) {
+    out.push({ x, text: ch })
+    x += measureText(ch, FONT).width
+  }
+  return out
+}
+
+function Row(props: { y: number, label: string, glyphs: Glyph[], color: string }) {
+  return (
+    <d-view x={LEFT} y={props.y}>
+      <d-text y={-20} {...LABEL}>{props.label}</d-text>
+      {props.glyphs.map(g => (
+        <d-text x={g.x} w={GLYPH_W} {...FONT} color={props.color}>{g.text}</d-text>
+      ))}
+    </d-view>
+  )
+}
+
+function App() {
+  return (
+    <window>
+      <d-rect color="#f4efe6" />
+      <d-view x={LEFT} y={TOP}>
+        <d-text y={-20} {...LABEL}>whole headline</d-text>
+        <d-text {...FONT} color="#2b2620">{HEADLINE}</d-text>
+      </d-view>
+      <Row y={TOP + ROW} label="per glyph from carets: true (kerned)" glyphs={fromCarets()} color="#2b2620" />
+      <Row y={TOP + 2 * ROW} label="per glyph from measureText per character (drifts)" glyphs={fromMeasure()} color="#b3452b" />
+    </window>
+  )
+}
+
+render(() => <App />)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/core",
-  "version": "0.0.53",
+  "version": "0.0.55",
   "license": "MIT",
   "funding": "https://github.com/sponsors/wellawaretech",
   "author": "Antoine van Wel",
@@ -29,11 +29,11 @@
     "AGENTS.md"
   ],
   "devDependencies": {
-    "@solidrt/flux-types": "0.0.53"
+    "@solidrt/flux-types": "0.0.55"
   },
   "peerDependencies": {
-    "@solidjs/signals": "2.0.0-rc.3",
-    "@solidjs/universal": "2.0.0-rc.3",
-    "solid-js": "2.0.0-rc.3"
+    "@solidjs/signals": "2.0.0-rc.4",
+    "@solidjs/universal": "2.0.0-rc.4",
+    "solid-js": "2.0.0-rc.4"
   }
 }

package/src/color.ts

@@ -26,6 +26,23 @@ export function mixColors(a: string, b: string, t: number): string {
   return tree.mixColors(a, b, t)
 }
 
+// Alpha byte range of the packed 0xRRGGBBAA color.
+const ALPHA_MAX = 255
+
+/**
+ * The same CSS color at opacity `alpha` (0 = transparent, 1 = opaque),
+ * replacing whatever alpha the input carried. Returns `#rrggbbaa`. Accepts
+ * any color `parseColor` does, so a named color or an `rgb()` is fine. For a
+ * transparent variant of a theme color prefer this over an `rgba()` literal
+ * rebuilt by hand; for a tone that must not depend on what is drawn beneath,
+ * `mixColors` against the backdrop.
+ */
+export function withAlpha(color: string, alpha: number): string {
+  let rgb = parseColor(color) >>> 8
+  let a = Math.round(Math.min(1, Math.max(0, alpha)) * ALPHA_MAX)
+  return "#" + rgb.toString(16).padStart(6, "0") + a.toString(16).padStart(2, "0")
+}
+
 /**
  * Perceived brightness of a CSS color, 0 (black) to 1 (white), YIQ-weighted.
  * Compare a text color against its backdrop to decide rendering polarity,

package/src/core.ts

@@ -352,11 +352,19 @@ export function measureText(text: string, options?: tree.MeasureTextOptions): {
 }
 
 /**
- * Segments `text` into wrap units (words with their trailing whitespace) and
- * shapes each in the given font, once, for laying lines out in app code with
- * layoutNextLine or arithmetic of your own over `units`. For the non-standard
- * case (text into a shape, around a moving obstacle, handed between columns,
- * fitted by size); regular text of any length is a <text>.
+ * App-side line breaking. Segments `text` into wrap units (words with their
+ * trailing whitespace) and shapes each in the given font, once, through the
+ * shared word cache; laying lines out is then arithmetic over `units`, with
+ * layoutNextLine or a loop of your own. This is how text goes into a shape,
+ * parts around an obstacle that is not in the flow, pours across columns
+ * (layoutNextLine's `cursor` continues a paragraph in the next box), fits a
+ * box by trying sizes, and gets per-glyph positions (`carets: true`; the
+ * only kerned source, see TextUnit.carets). Draw each line as a d-text of
+ * exactly its own text. Re-breaking every frame is cheap - the words are
+ * shaped already and the lines' d-texts hit the same cache - so a shape
+ * that moves or breathes can re-flow at frame rate. A paragraph that just
+ * wraps in a box is a <text>, which also does floats, balancing and
+ * ellipsis.
  */
 export function prepareText(text: string, options?: tree.MeasureTextOptions): tree.PreparedText {
   return tree.prepareText(text, options)

package/src/gpu.ts

@@ -11,8 +11,9 @@
 // `flux:gpu` module.
 //
 // Sampling is a per-texture property declared at creation: `filter`
-// ("linear" default | "nearest"), `wrap` ("clamp" default | "repeat") and
-// `mipmap` (default false) on every create* helper. One state for every
+// ("linear" default | "nearest"), `wrap` ("clamp" default | "repeat"),
+// `mipmap` (default false) and `anisotropy` (default 1 = off; pair it with
+// mipmap) on every create* helper. One state for every
 // consumer - `<texture>` display and shader sampling both follow it - so a
 // nearest texture upscales with hard pixels everywhere (the retro/pixel-art
 // path: render small, display big). `mipmap: true` keeps a mip chain the
@@ -68,7 +69,7 @@ export type CreateOptions = { autoFree?: boolean; label?: string }
 
 // Sampling options every texture-producing create* helper accepts, applied at
 // creation as a property of the texture id (there is no set-sampler-later).
-export type SamplerOptions = { filter?: gpu.FilterMode; wrap?: gpu.WrapMode; mipmap?: boolean }
+export type SamplerOptions = { filter?: gpu.FilterMode; wrap?: gpu.WrapMode; mipmap?: boolean; anisotropy?: number }
 export type { FilterMode, WrapMode, TextureBinding, TextureBindings } from "flux:gpu"
 
 // Pixel format option for the pixel-upload creates (createTexture,
@@ -293,6 +294,10 @@ export function createMutableTexture(
  * `in vec2 vUV;` yourself to read it. One naming trap: GLSL ES reserves
  * `packed` as a keyword, so `vec4 packed = texture(...)` fails with a syntax
  * error that does not name the identifier - pick another name.
+ *
+ * A bad source is a runtime failure, not one `srt check` catches: the compile
+ * throws at this call, so a shader created in a component body takes the app
+ * to the error window unless an `<Errored>` closer in the tree claims it.
  */
 export function createShaderTexture(
   fragmentSrc: string,

package/src/index.ts

@@ -1,7 +1,7 @@
 export * from "./renderer"
 export { setFocus, focusedNode, startTextInput, textInputActive, getFocusables, measureText, prepareText, layoutNextLine, unitInk, getBoundingBox, getBoundingBoxViewport, snapshotTexture, onPointerMove } from "./core"
 export type { BoundingBox, GlobalPointerEvent, TextLine } from "./core"
-export { parseColor, mixColors, brightness, createLinearGradient, createRadialGradient } from "./color"
+export { parseColor, mixColors, withAlpha, brightness, createLinearGradient, createRadialGradient } from "./color"
 export type { Gradient, GradientStop } from "./color"
 export { onFrame, onLayout, onResize, onWindowFocus, onWindowBlur, onBack, exit } from "./window"
 export type { BackEvent } from "./window"
@@ -43,6 +43,10 @@ export type {
   TextEvent,
   TextInputHints,
   PaintProps,
+  BlendMode,
+  DrawStyle,
+  StrokeCap,
+  StrokeJoin,
   WindowProps,
   WindowShaderProps,
   ViewProps,
@@ -51,11 +55,17 @@ export type {
   LineProps,
   PathProps,
   TextProps,
+  FontFamily,
+  FontStyle,
+  FontWeight,
+  TextDecoration,
+  TextAlign,
+  TextOverflow,
   TextureProps,
   Color,
   Pct,
 } from "./types"
-export type { MeasureTextOptions, PreparedText, TextUnit } from "flux:rendertree"
+export type { MeasureTextOptions, PreparedText, TextRunRange, TextUnit } from "flux:rendertree"
 
 // A percentage value for dimensional props (e.g. transformOrigin): `pct(50)` is
 // half the element box. Keeps percentages a first-class branded value rather

package/src/renderer.ts

@@ -125,16 +125,18 @@ export function scanForOrphans(now: number): void {
     counts.set(node.elementType, (counts.get(node.elementType) ?? 0) + 1)
   }
   if (total === 0) return
+  // Warn only when a new element type joins the orphans, but list every type
+  // with its count so the breakdown always adds up to the total.
   let fresh = [...counts].filter(([type]) => !warnedLeakTypes.has(type))
   if (fresh.length === 0) return
   for (let [type] of fresh) warnedLeakTypes.add(type)
-  let list = fresh.map(([type, n]) => `<${type}> x${n}`).join(", ")
+  let list = [...counts].map(([type, n]) => `<${type}> x${n}`).join(", ")
   console.warn(
     `Leak sentinel: ${total} nodes are unreachable and will never be freed: ${list}. ` +
       `The usual cause is reading an element-valued prop more than once (every read ` +
       `builds a new subtree); read it once where it mounts, or resolve it with ` +
       `children(). If these nodes are intentionally kept for later mounting, ignore ` +
-      `this. Element types already reported are not reported again.`,
+      `this. The next warning comes when a new element type joins the list.`,
   )
 }
 
@@ -261,6 +263,18 @@ let renderer = createRenderer<ProxyNode>({
   insertNode: (parent: ProxyNode, node: ProxyNode, anchor?: ProxyNode): void => {
     if (!node) return
 
+    // A value without an id is not a node: a signal accessor (<For>, <Repeat>,
+    // a memo) that reached the renderer unresolved. Without this check it
+    // surfaces as an FFI type error on node.id, which names nothing. Known
+    // cause: okf/upstream/signals-flatten-array-clobbers-needs-unwrap.md.
+    if (typeof node !== "object" || node.id === undefined) {
+      let what = typeof node === "function" ? "a signal accessor" : `a ${typeof node}`
+      throw new Error(
+        `insertNode received ${what} instead of an element under <${parent?.elementType ?? "?"}>; ` +
+          `resolve the children with children() or return one root element from the component.`,
+      )
+    }
+
     // A re-inserted node is being moved, not destroyed: cancel its pending
     // destroy so the end-of-tick sweep leaves it (and its subtree) alone.
     pendingDestroy.delete(node.id)

package/src/svg.ts

@@ -6,6 +6,7 @@
 
 import { parseSvg as fluxParseSvg } from "flux:svg"
 import { parseColor, type Gradient } from "./color"
+import type { StrokeCap, StrokeJoin } from "./types"
 
 /**
  * Tags an inline SVG source, returning it unchanged. Documents small enough to
@@ -27,8 +28,8 @@ export type SvgDraw = {
   drawStyle: "fill" | "stroke"
   fillRule?: "nonzero" | "evenodd"
   strokeWidth?: number
-  strokeCap?: "butt" | "round" | "square"
-  strokeJoin?: "miter" | "round" | "bevel"
+  strokeCap?: StrokeCap
+  strokeJoin?: StrokeJoin
 }
 
 /** A parsed document: intrinsic size (viewBox/width-height) plus the flat draw list. */

package/src/types.d.ts

@@ -148,17 +148,29 @@ export interface LayoutProps extends FlexboxProps, GridProps {
   clear?: "left" | "right" | "both"
 }
 
-/** Colors are CSS color strings, parsed to a packed u32 by `parseColor`. */
+/**
+ * A CSS color string: hex (`#rgb`, `#rrggbb`, `#rrggbbaa`), `rgb()`/`rgba()`,
+ * `hsl()`/`hsla()`, `hwb()`, or a named color. The CSS Color 4 functions -
+ * `color-mix()`, `oklch()`, `lab()`, `color()` - are not parsed and throw
+ * `Invalid color`. To mix two colors, `mixColors(a, b, t)` (oklab, returns
+ * hex); for a color at a given opacity, `withAlpha(color, a)` (returns
+ * `#rrggbbaa`); `parseColor` gives the packed u32 the prop also accepts.
+ */
 export type Color = string
 
+export type BlendMode = "clear" | "source" | "destination" | "source-over" | "destination-over" | "source-in" | "destination-in" | "source-out" | "destination-out" | "source-atop" | "destination-atop" | "xor" | "plus" | "modulate" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "multiply" | "hue" | "saturation" | "color" | "luminosity"
+export type DrawStyle = "fill" | "stroke" | "stroke-and-fill"
+export type StrokeCap = "butt" | "round" | "square"
+export type StrokeJoin = "miter" | "round" | "bevel"
+
 export interface PaintProps {
   // A solid color, or a gradient from createLinearGradient/createRadialGradient.
   color?: Color | Gradient
-  blendMode?: "clear" | "source" | "destination" | "source-over" | "destination-over" | "source-in" | "destination-in" | "source-out" | "destination-out" | "source-atop" | "destination-atop" | "xor" | "plus" | "modulate" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "multiply" | "hue" | "saturation" | "color" | "luminosity"
+  blendMode?: BlendMode
   /** Default "fill"; "stroke" on line, whose segment has no interior (see LineProps). */
-  drawStyle?: "fill" | "stroke" | "stroke-and-fill"
-  strokeCap?: "butt" | "round" | "square"
-  strokeJoin?: "miter" | "round" | "bevel"
+  drawStyle?: DrawStyle
+  strokeCap?: StrokeCap
+  strokeJoin?: StrokeJoin
   strokeMiter?: number
   strokeWidth?: number
 }
@@ -357,22 +369,41 @@ export interface OvalGeometryProps extends PositionProps {
   h?: number
 }
 
-/** See {@link PositionProps}: detached-only, never affects layout. */
+/**
+ * See {@link PositionProps}: detached-only, never affects layout. A d-text
+ * is boxed or anchored. Boxed (no `anchor`): it wraps at `w`, or at the box
+ * inherited from the nearest laid-out ancestor, and `textAlign` aligns
+ * lines inside that width - so a right-aligned label needs a `w`. Anchored:
+ * `x` is a point on the line (SVG's text-anchor), which is what a label on a
+ * chart, an axis or a diagram wants. Either way the reported bounds
+ * (getBoundingBox, the tree) are the laid-out paragraph - widest line by
+ * line stack - unless `w`/`h` override a side.
+ */
 export interface TextGeometryProps extends PositionProps {
-  // Shaping (wrap) width. Detached text wraps at the inherited ancestor size
-  // by default; set w for an unwrapped natural line or an explicit wrap width.
+  /**
+   * Where `x` sits on each line: its start, middle or end. With `w` unset
+   * the text shapes at its natural width (no wrap; `\n` still breaks), and
+   * `textAlign` defaults to the anchor's side. With `w` set, the `w`-wide
+   * box is what gets anchored at `x`.
+   */
+  anchor?: "start" | "middle" | "end"
+  // Shaping (wrap) width; unset, boxed text wraps at the inherited box and
+  // anchored text does not wrap.
   w?: number
-  // Reported-bounds height only; paragraph height always falls out of the text.
+  // Reported-bounds height override only; paragraph height always falls out
+  // of the text.
   h?: number
 }
 
 /**
- * See {@link PositionProps}: detached-only, never affects layout. A line's
- * reported bounds (getBoundingBox, the tree, a detached capture) are its
- * painted box: the geometry's extent plus the stroke's reach, not the
+ * See {@link PositionProps}: detached-only, never affects layout. The
+ * endpoints (or `points`) are the line's own geometry; `x`/`y` offset all of
+ * it, the way a `d-path`'s offset its `d`, so one write moves a polyline. A
+ * line's reported bounds (getBoundingBox, the tree, a detached capture) are
+ * its painted box: the geometry's extent plus the stroke's reach, not the
  * inherited box.
  */
-export interface LineGeometryProps {
+export interface LineGeometryProps extends PositionProps {
   /** Endpoints default to spanning the box: (0,0) to (box width, box height). */
   x1?: number
   y1?: number
@@ -520,7 +551,9 @@ export interface TransitionProps {
    * its transform); the initial value never animates unless the entry sets
    * `from` (an enter animation), and a non-numeric write (e.g. null)
    * cancels the running animation and snaps. `null` clears the
-   * declaration; already-running animations finish.
+   * declaration; already-running animations finish. A spec built in a
+   * conditional widens `curve` to `string` for TypeScript; write
+   * `satisfies Transition` on the branch.
    */
   transition?:
     | ({
@@ -543,7 +576,7 @@ export interface TransitionProps {
 
 // Primitives
 
-export interface WindowProps extends LayoutProps, PointerProps {
+export interface WindowProps extends LayoutProps, PointerProps, TransitionProps {
   children?: Children
   title?: string
   fullscreen?: boolean
@@ -563,10 +596,11 @@ export interface WindowProps extends LayoutProps, PointerProps {
  * `uniform sampler2D uSource` (top-left origin, like every sampled texture -
  * so a vertex stage mapping it onto the window flips the v coordinate) and
  * is drawn attributeless as triangles, `vertexCount` vertices fetched via
- * gl_VertexID. `iResolution`, filled by name, is the window size in physical
- * pixels (the pass covers exactly that). The window is cleared to opaque
- * black first, so geometry that does not cover it still presents a defined
- * frame.
+ * gl_VertexID. `iResolution`, the window size in physical pixels (the pass
+ * covers exactly that), is filled by name into a uniform the program declares
+ * itself or gets from compileShader's `header` option. The window is cleared
+ * to opaque black first, so geometry that does not cover it still presents a
+ * defined frame.
  */
 export interface WindowShaderProps {
   /** Linked program handle from linkProgram. */
@@ -673,8 +707,9 @@ export interface ViewOwnProps extends TransformProps, PointerProps {
  * A boundary shader declaration. The program contract matches shader targets,
  * not the window pass: the subtree's rasterization binds as
  * `uniform sampler2D uSource` (top-left origin, like every sampled texture)
- * and the pass draws the covering triangle attributeless. `iResolution`,
- * filled by name, is the boundary in physical pixels.
+ * and the pass draws the covering triangle attributeless. `iResolution`, the
+ * boundary in physical pixels, is filled by name into a uniform the program
+ * declares itself or gets from compileShader's `header` option.
  */
 export interface ViewShaderProps {
   /** Linked program handle from linkProgram. */
@@ -719,8 +754,9 @@ export interface ViewProps extends ViewOwnProps, LayoutProps {}
 // A stroked rect paints inside its box, like a CSS border: the stroke's outer
 // edge sits on the box edge rather than straddling it, so nothing bleeds past
 // the box for a clip to cut. `path` and `line` strokes stay centered on their
-// geometry - there the geometry is the stroke, not a box.
-export interface RectProps extends PaintProps, PointerProps {
+// geometry - there the geometry is the stroke, not a box. A dashed stroke
+// dashes that same inset outline (see DashProps).
+export interface RectProps extends PaintProps, PointerProps, DashProps {
   // Corner radius, measured on the box (the stroke's outer edge). A single
   // number applies to all four corners; an array is [top-left, top-right,
   // bottom-right, bottom-left] (CSS border-radius order).
@@ -728,11 +764,15 @@ export interface RectProps extends PaintProps, PointerProps {
 }
 
 // Strokes paint inside the box, same as `RectProps`.
-export interface OvalProps extends PaintProps, PointerProps {}
+export interface OvalProps extends PaintProps, PointerProps, DashProps {}
 
 /**
- * A stroke's dash pattern, on `line` and `path`. Both lengths must be set
- * to dash; with either unset, or a gap of 0, the stroke is solid.
+ * A stroke's dash pattern, on every stroked primitive (`rect`, `oval`,
+ * `line`, `path`). Both lengths must be set to dash; with either unset, or
+ * a gap of 0, the stroke is solid. A box primitive dashes its inset
+ * outline, the pattern starting where SVG's does (a rect on the top edge
+ * after the top-left corner, an oval at 3 o'clock) and running clockwise;
+ * its dashes stay inside the box like the solid stroke.
  */
 export interface DashProps {
   /**
@@ -809,13 +849,20 @@ export interface PathProps extends PaintProps, PointerProps, DashProps {
   fillRule?: "nonzero" | "evenodd"
 }
 
+export type FontFamily = "sans" | "serif" | "mono" | (string & {})
+export type FontStyle = "normal" | "italic"
+export type FontWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
+export type TextDecoration = "none" | "underline"
+export type TextAlign = "left" | "right" | "center" | "justify"
+export type TextOverflow = "clip" | "ellipsis" | (string & {})
+
 /**
  * Per-run text style: the paragraph default on <text>, an override on <span>.
  * The cascade is intra-paragraph only: a span inherits from its enclosing
  * span, then from the <text>; nothing inherits across the tree.
  */
 export interface TextRunProps {
-  fontFamily?: "sans" | "serif" | "mono" | (string & {})
+  fontFamily?: FontFamily
   fontSize?: number
   /**
    * Line height as a MULTIPLIER of fontSize, not pixels (the theme uses
@@ -823,15 +870,15 @@ export interface TextRunProps {
    * font size, rendering the text as blank space.
    */
   lineHeight?: number
-  fontStyle?: "normal" | "italic"
-  fontWeight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
+  fontStyle?: FontStyle
+  fontWeight?: FontWeight
   /**
    * Underline in the run's own color, drawn straight through descenders
    * (no skip-ink). Position and thickness come from the font's own metrics
    * unless overridden; a font Impeller resolves through the system fallback
    * gets the shipped Noto values.
    */
-  textDecoration?: "none" | "underline"
+  textDecoration?: TextDecoration
   /** Pixels from the baseline to the top of the underline. */
   textUnderlineOffset?: number
   /** Underline thickness in pixels. */
@@ -851,14 +898,14 @@ export interface SpanProps extends TextRunProps, PointerProps {
 
 export interface TextProps extends PaintProps, PointerProps, TextRunProps {
   children?: Children
-  textAlign?: "left" | "right" | "center" | "justify"
+  textAlign?: TextAlign
   maxLines?: number
   /**
    * What happens to text cut off by maxLines: "clip" (default), "ellipsis"
    * (a U+2026 at the end of the last line), or any other string to use as
    * the ellipsis. Drawn in the paragraph's default style.
    */
-  textOverflow?: "clip" | "ellipsis" | (string & {})
+  textOverflow?: TextOverflow
   /**
    * A word (wrap unit) wider than the line: "anywhere" (default) splits it
    * at grapheme boundaries so it stays inside the box, "normal" keeps it