@signal9/era-ui 4.16.6 → 4.16.8

package/dist/generated-docs/llms-full.txt

@@ -36,9 +36,9 @@ Classes, not components — they need no import beyond the stylesheet. Reach for
 - `era-interactive` — the focus/disabled recipe every era control carries — put it on a custom interactive element instead of hand-writing focus/disabled variants.
 - `era-link` — understated, motion-aware inline text link — the canonical style for a link in body copy or prose; prefer it over a hand-rolled underline or `Button variant="link"` (which is a control, not running text).
 - `scrollbar-none` — hide the scrollbar on an overflowing strip or rail while keeping it scrollable — for a scroll region that should show its bar, use ScrollArea.
-- `era-text-trim` — vertically center single-line control text (a label beside an icon, a button's own text) without a translateY nudge — fixed-height, non-editable elements only; see era-text-trim-caps for ALL-CAPS strings.
-- `truncate` — single-line horizontal truncation with an ellipsis — safe inside a trimmed or leading-none row; it will not clip ascenders or descenders.
-- `era-text-trim-caps` — the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never use it for mixed-case text.
+- `era-text-trim` — vertically center single-line control text (a label beside an icon, a button's own text) without a translateY nudge. Fixed-height, non-editable elements ONLY: never on an <input>/<textarea>, and never on the same element as `truncate` or any overflow clip — put it on the fixed-height ROW and let the truncating child centre inside it. See era-text-trim-caps for ALL-CAPS.
+- `truncate` — single-line horizontal truncation with an ellipsis — put it on the truncating CHILD inside a trimmed or leading-none row, never on the same element as era-text-trim; it will not clip ascenders or descenders.
+- `era-text-trim-caps` — the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never for mixed-case text (a label like "System" reads high; use era-text-trim), and never on the same element as `truncate`.
 - `era-ink-center` — on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim.
 - `era-shimmer` — the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text.
 - `era-collapse` — the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden).
@@ -145,9 +145,9 @@ enough to stay var-form — `min-w-(--era-h-md)` etc. remain the escape hatch.
 | `era-interactive` | the focus/disabled recipe every era control carries — put it on a custom interactive element instead of hand-writing focus/disabled variants. |
 | `era-link` | understated, motion-aware inline text link — the canonical style for a link in body copy or prose; prefer it over a hand-rolled underline or `Button variant="link"` (which is a control, not running text). |
 | `scrollbar-none` | hide the scrollbar on an overflowing strip or rail while keeping it scrollable — for a scroll region that should show its bar, use ScrollArea. |
-| `era-text-trim` | vertically center single-line control text (a label beside an icon, a button's own text) without a translateY nudge — fixed-height, non-editable elements only; see era-text-trim-caps for ALL-CAPS strings. |
-| `truncate` | single-line horizontal truncation with an ellipsis — safe inside a trimmed or leading-none row; it will not clip ascenders or descenders. |
-| `era-text-trim-caps` | the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never use it for mixed-case text. |
+| `era-text-trim` | vertically center single-line control text (a label beside an icon, a button's own text) without a translateY nudge. Fixed-height, non-editable elements ONLY: never on an <input>/<textarea>, and never on the same element as `truncate` or any overflow clip — put it on the fixed-height ROW and let the truncating child centre inside it. See era-text-trim-caps for ALL-CAPS. |
+| `truncate` | single-line horizontal truncation with an ellipsis — put it on the truncating CHILD inside a trimmed or leading-none row, never on the same element as era-text-trim; it will not clip ascenders or descenders. |
+| `era-text-trim-caps` | the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never for mixed-case text (a label like "System" reads high; use era-text-trim), and never on the same element as `truncate`. |
 | `era-ink-center` | on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim. |
 | `era-shimmer` | the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text. |
 | `era-collapse` | the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden). |
@@ -205,16 +205,23 @@ Declared in `index.css`.
 @utility era-link {
 	/* The text is bright at rest and never changes — the link reads as a link
 	 * before you touch it. Only the UNDERLINE reacts: a faint hint at rest —
-	 * muted knocked back to 30% so it barely whispers — that resolves to the full
-	 * text colour on hover. */
+	 * the link's own ink knocked back to 30% so it barely whispers — that
+	 * resolves to the full ink on hover.
+	 *
+	 * currentColor, not --color-muted/--color-fg: the underline belongs to the
+	 * TEXT it underlines. On themes whose link ink is a colour (signalnine's
+	 * navy, an accent-tinted bright), the neutral tokens drew a whitish line
+	 * under coloured text — a second hue where there should be one. Derived
+	 * from currentColor, the underline tracks whatever the link resolves to,
+	 * in every theme, including a caller overriding `color` locally. */
 	color: var(--color-link);
 	text-decoration-line: underline;
-	text-decoration-color: color-mix(in oklch, var(--color-muted) 30%, transparent);
+	text-decoration-color: color-mix(in oklch, currentColor 30%, transparent);
 	text-underline-offset: 0.2em;
 	transition: text-decoration-color var(--era-duration) var(--era-ease);
 	&:hover,
 	&:focus-visible {
-		text-decoration-color: var(--color-fg);
+		text-decoration-color: currentColor;
 	}
 }
 ```
@@ -239,7 +246,7 @@ Declared in `index.css`.
 
 ## era-text-trim
 
-**Use it for:** vertically center single-line control text (a label beside an icon, a button's own text) without a translateY nudge — fixed-height, non-editable elements only; see era-text-trim-caps for ALL-CAPS strings.
+**Use it for:** vertically center single-line control text (a label beside an icon, a button's own text) without a translateY nudge. Fixed-height, non-editable elements ONLY: never on an <input>/<textarea>, and never on the same element as `truncate` or any overflow clip — put it on the fixed-height ROW and let the truncating child centre inside it. See era-text-trim-caps for ALL-CAPS.
 
 Font-agnostic vertical ink-centering for single-line control text.
 Measured verdict (4 fonts x 2 dpr, ink from device-pixel screenshots):
@@ -286,7 +293,7 @@ Declared in `index.css`.
 
 ## truncate
 
-**Use it for:** single-line horizontal truncation with an ellipsis — safe inside a trimmed or leading-none row; it will not clip ascenders or descenders.
+**Use it for:** single-line horizontal truncation with an ellipsis — put it on the truncating CHILD inside a trimmed or leading-none row, never on the same element as era-text-trim; it will not clip ascenders or descenders.
 
 Tailwind's `truncate`, with the vertical clip fixed at the source.
 
@@ -319,7 +326,7 @@ Declared in `index.css`.
 
 ## era-text-trim-caps
 
-**Use it for:** the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never use it for mixed-case text.
+**Use it for:** the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never for mixed-case text (a label like "System" reads high; use era-text-trim), and never on the same element as `truncate`.
 
 ALL-CAPS single-line text (kbd hints, acronym badges): the x-height band
 misjudges caps-only strings — cap/alphabetic edges are the right box.
@@ -1062,8 +1069,9 @@ assign to move the pane programmatically (e.g. reset to 0,0). |
 | `title?` | `string` | — | Text shown in the handle bar. For richer chrome use `header`. |
 | `icon?` | `Component<IconProps> \| null` | `AppPane` | Lucide icon rendered left of the title. Pass `null` to omit. |
 | `disabled?` | `boolean` | `false` | Disables dragging (reactive). |
-| `plugins?` | `(Plugin \| Compartment)[] \| (() => (Plugin \| Compartment)[])` | `[]` | Extra neodrag plugins (axis, bounds, grid, threshold, …) appended
-after the pane's own. Pass Compartments for reactive plugin sets. |
+| `plugins?` | `DragPlugin[] \| (() => DragPlugin[])` | `[]` | Tier-2 neodrag plugins (`use`) appended to the drag. Tier-1 concerns
+(axis/bounds/grid/threshold) are Pane.Root props — spread through
+restProps or use Root directly for those. |
 | `onDragStart?` | `(data: DragEventData) => void` | — | — |
 | `onDrag?` | `(data: DragEventData) => void` | — | — |
 | `onDragEnd?` | `(data: DragEventData) => void` | — | — |

package/dist/generated-docs/llms.txt

@@ -2,6 +2,36 @@
 
 > A Svelte 5 + Bits UI component library. Every surface — heights, paddings, radii, gaps — derives from a single spacing atom, so density is a one-attribute override at any scope.
 
+## Sizing philosophy — read this before writing markup
+
+Every measurement in era derives from one atom (`--era-sp`) through a fixed ladder. You never pick a number; you pick a TIER, and the number follows from the density axis. Markup that hardcodes `h-[34px]`, `text-[13px]`, `p-2` or `gap-1.5` is wrong even when it looks right at the default density — it stops tracking the axis the moment a subtree re-tiers.
+
+**1. Height comes from the tier ladder, never from a pixel value.**
+`h-xs` (icon, 14px @dense) · `h-xxs` (nested pill, 18) · `h-sm` (standalone pill, 22) · `h-md` (control/row, 24) · `h-lg` (bar/header, 32). A square is `size-*` on the same ladder; `size-xs` IS the icon size beside body text.
+
+**2. Padding is geometric or optical — the container tells you which.**
+A container with a BOUNDED tier height (bar, row, trigger, pill) takes geometric padding: `px-inset-md` / `px-sm` / `px-pill-sm`, all derived from `(tier − text)/2`. A container with UNBOUNDED height (card, dialog, panel, page section) takes optical padding: `p-panel` · `p-card` · `p-content`, which grow super-linearly so whitespace keeps pace as controls loosen. Never pad a card with a tier inset, and never pad a row with `p-card`.
+
+**3. The even-gap law.** Inside any container, `(container_height − child_height) / 2` must equal the gap on ALL four sides. A `h-xxs` control in a `h-md` bar sits on a 3px wall at dense — so the bar's padding AND the gap between its children are that same value. `gap-gutter` / `p-gutter` is the standard inter-element gap (sp/2); the concentric insets (`p-inset-*`) are the text-symmetric ones.
+
+**4. Radius follows the corner REGION's tier, not the box's size.**
+`rounded-xs · xxs · sm · md · lg` walk the same ladder as the heights, and the ladder is built so that `rd_outer − rd_inner` equals the concentric gap — nested corners then share a centre of curvature automatically. A big panel whose corner is formed by an `h-md` bar takes `rounded-md`, not `rounded-lg`. Never hardcode a radius: `data-corners="square"` collapses the tokens to 0 and a literal value would survive it.
+
+**5. Single-line control text carries `era-text-trim`; wrapping text carries `leading-body`.**
+Flexbox centres the LINE BOX, not the ink, and misses by up to ~2px. `era-text-trim` fixes it — on FIXED-HEIGHT, NON-EDITABLE elements only. Two hard prohibitions, both of which produce silently chopped or mis-centred glyphs:
+- NEVER on an `<input>`/`<textarea>`/`<select>` (the UA clips to the trimmed inner editor box, so typed text loses its ascenders — a "d" renders as an "o"). A tier-height field centres its own text; if you need the optical lift, that is `era-ink-center`.
+- NEVER on the same element as `truncate` or any overflow clip. Put the trim on the fixed-height ROW and let the truncating CHILD centre inside it via `items-center`. (era guards this pairing so it degrades to a no-op instead of chopped text, but the row/child split is the correct authoring.)
+
+Text that WRAPS is the opposite regime: it needs leading, so it carries `leading-body` (never a trim). `era-text-trim-caps` is for ALL-CAPS strings only — on mixed case it reads high.
+
+**6. Type size is `text-body`.** It is the density-derived body/control size (12px at dense, 14px above). Reach for a Tailwind type step (`text-sm`, `text-xs`) only for genuine display type, never for control or body text.
+
+**7. Colour comes from semantic tokens, not the ramp.** `text-fg` (controls/labels) · `text-bright` (emphasis, headings) · `text-muted` (body copy) · `text-destructive` / `-success` / `-warning`. Fills: `bg-hover` for a latched ROW, `bg-fill` for a standing pill, `bg-highlight` for transient hover. These compose across themes; a raw scale step does not.
+
+**Verifying your own output.** era ships a runtime audit that measures these laws against rendered DOM — tier conformance, even gaps, concentric radii, chopped glyphs, wrapping text at control leading. If you are generating markup, render it and run the audit rather than eyeballing: it is the same instrument the library's own test suite asserts against.
+
+Full derivations: `{{ORIGIN}}/spacing.md` (the ladder and every token), `{{ORIGIN}}/text.md` (type and trim), `{{ORIGIN}}/utilities.md` (every class, what it emits, when to use it).
+
 ## Using the library
 
 ```ts
@@ -40,9 +70,9 @@ Classes, not components — they need no import beyond the stylesheet. Reach for
 - `era-interactive` — the focus/disabled recipe every era control carries — put it on a custom interactive element instead of hand-writing focus/disabled variants.
 - `era-link` — understated, motion-aware inline text link — the canonical style for a link in body copy or prose; prefer it over a hand-rolled underline or `Button variant="link"` (which is a control, not running text).
 - `scrollbar-none` — hide the scrollbar on an overflowing strip or rail while keeping it scrollable — for a scroll region that should show its bar, use ScrollArea.
-- `era-text-trim` — vertically center single-line control text (a label beside an icon, a button's own text) without a translateY nudge — fixed-height, non-editable elements only; see era-text-trim-caps for ALL-CAPS strings.
-- `truncate` — single-line horizontal truncation with an ellipsis — safe inside a trimmed or leading-none row; it will not clip ascenders or descenders.
-- `era-text-trim-caps` — the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never use it for mixed-case text.
+- `era-text-trim` — vertically center single-line control text (a label beside an icon, a button's own text) without a translateY nudge. Fixed-height, non-editable elements ONLY: never on an <input>/<textarea>, and never on the same element as `truncate` or any overflow clip — put it on the fixed-height ROW and let the truncating child centre inside it. See era-text-trim-caps for ALL-CAPS.
+- `truncate` — single-line horizontal truncation with an ellipsis — put it on the truncating CHILD inside a trimmed or leading-none row, never on the same element as era-text-trim; it will not clip ascenders or descenders.
+- `era-text-trim-caps` — the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never for mixed-case text (a label like "System" reads high; use era-text-trim), and never on the same element as `truncate`.
 - `era-ink-center` — on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim.
 - `era-shimmer` — the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text.
 - `era-collapse` — the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden).

package/dist/generated-docs/manifest.json

@@ -44,7 +44,7 @@
       "slug": "utilities",
       "title": "Utilities",
       "summary": "The CSS classes era ships alongside the components — links, ink-centred text, shimmer, hidden scrollbars.",
-      "tokenEstimate": 5821,
+      "tokenEstimate": 6097,
       "sections": [
         "Overview",
         "era-interactive",
@@ -195,7 +195,7 @@
       "slug": "pane",
       "title": "Pane",
       "summary": "A draggable floating window with a handle bar.",
-      "tokenEstimate": 441,
+      "tokenEstimate": 446,
       "sections": [
         "Import",
         "Props"
@@ -980,7 +980,7 @@
       "file": "index.css",
       "useCase": "understated, motion-aware inline text link — the canonical style for a link in body copy or prose; prefer it over a hand-rolled underline or `Button variant=\"link\"` (which is a control, not running text).",
       "description": "Inline text link. An understated, permanent underline that darkens from\nmuted to the text colour on hover — no layout shift, no appearing/vanishing\nunderline. The colour fade rides the MOTION axis (--era-duration/-ease), so\nit snaps at data-motion=\"instant\", eases at \"normal\", and sweeps longer at\n\"extra\" — matching every other era transition. Font-agnostic: it styles\ndecoration + colour only, so it reads correctly in mono, sans, or serif, and\nthe 0.2em offset scales with the type size. Keyboard focus mirrors hover so\nthe affordance is reachable without a pointer.",
-      "css": "@utility era-link {\n\t/* The text is bright at rest and never changes — the link reads as a link\n\t * before you touch it. Only the UNDERLINE reacts: a faint hint at rest —\n\t * muted knocked back to 30% so it barely whispers — that resolves to the full\n\t * text colour on hover. */\n\tcolor: var(--color-link);\n\ttext-decoration-line: underline;\n\ttext-decoration-color: color-mix(in oklch, var(--color-muted) 30%, transparent);\n\ttext-underline-offset: 0.2em;\n\ttransition: text-decoration-color var(--era-duration) var(--era-ease);\n\t&:hover,\n\t&:focus-visible {\n\t\ttext-decoration-color: var(--color-fg);\n\t}\n}"
+      "css": "@utility era-link {\n\t/* The text is bright at rest and never changes — the link reads as a link\n\t * before you touch it. Only the UNDERLINE reacts: a faint hint at rest —\n\t * the link's own ink knocked back to 30% so it barely whispers — that\n\t * resolves to the full ink on hover.\n\t *\n\t * currentColor, not --color-muted/--color-fg: the underline belongs to the\n\t * TEXT it underlines. On themes whose link ink is a colour (signalnine's\n\t * navy, an accent-tinted bright), the neutral tokens drew a whitish line\n\t * under coloured text — a second hue where there should be one. Derived\n\t * from currentColor, the underline tracks whatever the link resolves to,\n\t * in every theme, including a caller overriding `color` locally. */\n\tcolor: var(--color-link);\n\ttext-decoration-line: underline;\n\ttext-decoration-color: color-mix(in oklch, currentColor 30%, transparent);\n\ttext-underline-offset: 0.2em;\n\ttransition: text-decoration-color var(--era-duration) var(--era-ease);\n\t&:hover,\n\t&:focus-visible {\n\t\ttext-decoration-color: currentColor;\n\t}\n}"
     },
     {
       "name": "scrollbar-none",
@@ -998,7 +998,7 @@
         "era-text-trim"
       ],
       "file": "index.css",
-      "useCase": "vertically center single-line control text (a label beside an icon, a button's own text) without a translateY nudge — fixed-height, non-editable elements only; see era-text-trim-caps for ALL-CAPS strings.",
+      "useCase": "vertically center single-line control text (a label beside an icon, a button's own text) without a translateY nudge. Fixed-height, non-editable elements ONLY: never on an <input>/<textarea>, and never on the same element as `truncate` or any overflow clip — put it on the fixed-height ROW and let the truncating child centre inside it. See era-text-trim-caps for ALL-CAPS.",
       "description": "Font-agnostic vertical ink-centering for single-line control text.\nMeasured verdict (4 fonts x 2 dpr, ink from device-pixel screenshots):\nthe offset has TWO causes — a fractional line box (14px x 1.5lh = 21px in\na 24px row places ink on a half pixel, ~1px error) and font ascent/descent\nasymmetry (+-1px, sign flips per font). line-height: 1 fixes the first and\nis the Firefox fallback; text-box ex/alphabetic fixes the second by\ncentering the x-height band — the visual mass of MIXED-CASE text (caps and\ndescenders cancel above/below). cap alphabetic is the spec-example recipe\nbut is descender-blind (reads high; CSSWG #9148) — measured 4x worse here.\nWhere text-box is supported it fully determines the box, so the two\ndeclarations never fight. Worst-case residual: 0.44px (measured at 14px; the\nmechanism is font-relative, so dense's 12px inherits the same guarantee with\na proportionally smaller residual).\n\nThe hard rules concern overflow clipping, and there are TWO of them.\n\n1. NEVER on a NATIVE EDITABLE — <input>, <textarea>, <select>. These clip to\n   a UA-owned inner editor box that IS the trimmed line box, so a fixed\n   height does NOT hold it open: whatever you type gets its ascenders and\n   descenders sliced off (a \"d\" renders as an \"o\"). This rule used to read\n   the other way round — it claimed a fixed-height <input> was the trim's\n   intended home — and the Input component shipped chopped text as a result.\n   A tier-height input centres its own text; it needs no trim.\n\n2. NEVER on an AUTO-height element that clips — a `truncate` child, an\n   auto-height box with overflow-hidden. With no height to hold it open the\n   box collapses to the x-height band (~7.5px at 14px) and the clip chops the\n   glyphs into a middle stripe. Put the trim on the fixed-height ROW instead\n   and let the child centre via the row's items-center.\n\nA fixed-height NON-editable element is the safe home: the ink overflows the\ntrimmed LINE box but stays inside the padding box, which is what actually\nclips. Both rules are enforced at runtime by typography/collapsed-text-trim.",
       "css": "@utility era-text-trim {\n\tline-height: 1;\n\ttext-box: trim-both ex alphabetic;\n}"
     },
@@ -1008,7 +1008,7 @@
         "truncate"
       ],
       "file": "index.css",
-      "useCase": "single-line horizontal truncation with an ellipsis — safe inside a trimmed or leading-none row; it will not clip ascenders or descenders.",
+      "useCase": "single-line horizontal truncation with an ellipsis — put it on the truncating CHILD inside a trimmed or leading-none row, never on the same element as era-text-trim; it will not clip ascenders or descenders.",
       "description": "Tailwind's `truncate`, with the vertical clip fixed at the source.\n\ntruncate is overflow:hidden, and overflow clips in BOTH axes — so whatever\nline box the element ends up with is also its ink clip. Era rows put\nera-text-trim on the fixed-height row (a Bar, a list row), and its\n`line-height: 1` INHERITS into the truncating child, which then has no fixed\nheight of its own: the child's box collapses to 1em while the font's real ink\nextent is ~1.15-1.2em, and the descenders (the \"g\" hook, the \"y\" tail) get\nsliced off at the box edge. Same bug on any `leading-none` + `truncate` pair.\n\nThe fix belongs here rather than at each call site: a horizontally-truncating\nelement must never be the thing that clips vertically. `line-height: normal`\nrestores the font's own ascent+descent box — exactly the ink extent — and\n`text-box: normal` cancels a trim if one is set alongside. Rows stay the same\nheight (they are tier-fixed and centre the child), and the child now has room\nfor its own glyphs.",
       "css": "@utility truncate {\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\tline-height: normal;\n\ttext-box: normal;\n}"
     },
@@ -1018,7 +1018,7 @@
         "era-text-trim-caps"
       ],
       "file": "index.css",
-      "useCase": "the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never use it for mixed-case text.",
+      "useCase": "the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never for mixed-case text (a label like \"System\" reads high; use era-text-trim), and never on the same element as `truncate`.",
       "description": "ALL-CAPS single-line text (kbd hints, acronym badges): the x-height band\nmisjudges caps-only strings — cap/alphabetic edges are the right box.",
       "css": "@utility era-text-trim-caps {\n\tline-height: 1;\n\ttext-box: trim-both cap alphabetic;\n}"
     },

package/dist/generated-docs/pane.md

@@ -22,8 +22,9 @@ assign to move the pane programmatically (e.g. reset to 0,0). |
 | `title?` | `string` | — | Text shown in the handle bar. For richer chrome use `header`. |
 | `icon?` | `Component<IconProps> \| null` | `AppPane` | Lucide icon rendered left of the title. Pass `null` to omit. |
 | `disabled?` | `boolean` | `false` | Disables dragging (reactive). |
-| `plugins?` | `(Plugin \| Compartment)[] \| (() => (Plugin \| Compartment)[])` | `[]` | Extra neodrag plugins (axis, bounds, grid, threshold, …) appended
-after the pane's own. Pass Compartments for reactive plugin sets. |
+| `plugins?` | `DragPlugin[] \| (() => DragPlugin[])` | `[]` | Tier-2 neodrag plugins (`use`) appended to the drag. Tier-1 concerns
+(axis/bounds/grid/threshold) are Pane.Root props — spread through
+restProps or use Root directly for those. |
 | `onDragStart?` | `(data: DragEventData) => void` | — | — |
 | `onDrag?` | `(data: DragEventData) => void` | — | — |
 | `onDragEnd?` | `(data: DragEventData) => void` | — | — |

package/dist/generated-docs/utilities.json

@@ -18,7 +18,7 @@
       "file": "index.css",
       "useCase": "understated, motion-aware inline text link — the canonical style for a link in body copy or prose; prefer it over a hand-rolled underline or `Button variant=\"link\"` (which is a control, not running text).",
       "description": "Inline text link. An understated, permanent underline that darkens from\nmuted to the text colour on hover — no layout shift, no appearing/vanishing\nunderline. The colour fade rides the MOTION axis (--era-duration/-ease), so\nit snaps at data-motion=\"instant\", eases at \"normal\", and sweeps longer at\n\"extra\" — matching every other era transition. Font-agnostic: it styles\ndecoration + colour only, so it reads correctly in mono, sans, or serif, and\nthe 0.2em offset scales with the type size. Keyboard focus mirrors hover so\nthe affordance is reachable without a pointer.",
-      "css": "@utility era-link {\n\t/* The text is bright at rest and never changes — the link reads as a link\n\t * before you touch it. Only the UNDERLINE reacts: a faint hint at rest —\n\t * muted knocked back to 30% so it barely whispers — that resolves to the full\n\t * text colour on hover. */\n\tcolor: var(--color-link);\n\ttext-decoration-line: underline;\n\ttext-decoration-color: color-mix(in oklch, var(--color-muted) 30%, transparent);\n\ttext-underline-offset: 0.2em;\n\ttransition: text-decoration-color var(--era-duration) var(--era-ease);\n\t&:hover,\n\t&:focus-visible {\n\t\ttext-decoration-color: var(--color-fg);\n\t}\n}"
+      "css": "@utility era-link {\n\t/* The text is bright at rest and never changes — the link reads as a link\n\t * before you touch it. Only the UNDERLINE reacts: a faint hint at rest —\n\t * the link's own ink knocked back to 30% so it barely whispers — that\n\t * resolves to the full ink on hover.\n\t *\n\t * currentColor, not --color-muted/--color-fg: the underline belongs to the\n\t * TEXT it underlines. On themes whose link ink is a colour (signalnine's\n\t * navy, an accent-tinted bright), the neutral tokens drew a whitish line\n\t * under coloured text — a second hue where there should be one. Derived\n\t * from currentColor, the underline tracks whatever the link resolves to,\n\t * in every theme, including a caller overriding `color` locally. */\n\tcolor: var(--color-link);\n\ttext-decoration-line: underline;\n\ttext-decoration-color: color-mix(in oklch, currentColor 30%, transparent);\n\ttext-underline-offset: 0.2em;\n\ttransition: text-decoration-color var(--era-duration) var(--era-ease);\n\t&:hover,\n\t&:focus-visible {\n\t\ttext-decoration-color: currentColor;\n\t}\n}"
     },
     {
       "name": "scrollbar-none",
@@ -36,7 +36,7 @@
         "era-text-trim"
       ],
       "file": "index.css",
-      "useCase": "vertically center single-line control text (a label beside an icon, a button's own text) without a translateY nudge — fixed-height, non-editable elements only; see era-text-trim-caps for ALL-CAPS strings.",
+      "useCase": "vertically center single-line control text (a label beside an icon, a button's own text) without a translateY nudge. Fixed-height, non-editable elements ONLY: never on an <input>/<textarea>, and never on the same element as `truncate` or any overflow clip — put it on the fixed-height ROW and let the truncating child centre inside it. See era-text-trim-caps for ALL-CAPS.",
       "description": "Font-agnostic vertical ink-centering for single-line control text.\nMeasured verdict (4 fonts x 2 dpr, ink from device-pixel screenshots):\nthe offset has TWO causes — a fractional line box (14px x 1.5lh = 21px in\na 24px row places ink on a half pixel, ~1px error) and font ascent/descent\nasymmetry (+-1px, sign flips per font). line-height: 1 fixes the first and\nis the Firefox fallback; text-box ex/alphabetic fixes the second by\ncentering the x-height band — the visual mass of MIXED-CASE text (caps and\ndescenders cancel above/below). cap alphabetic is the spec-example recipe\nbut is descender-blind (reads high; CSSWG #9148) — measured 4x worse here.\nWhere text-box is supported it fully determines the box, so the two\ndeclarations never fight. Worst-case residual: 0.44px (measured at 14px; the\nmechanism is font-relative, so dense's 12px inherits the same guarantee with\na proportionally smaller residual).\n\nThe hard rules concern overflow clipping, and there are TWO of them.\n\n1. NEVER on a NATIVE EDITABLE — <input>, <textarea>, <select>. These clip to\n   a UA-owned inner editor box that IS the trimmed line box, so a fixed\n   height does NOT hold it open: whatever you type gets its ascenders and\n   descenders sliced off (a \"d\" renders as an \"o\"). This rule used to read\n   the other way round — it claimed a fixed-height <input> was the trim's\n   intended home — and the Input component shipped chopped text as a result.\n   A tier-height input centres its own text; it needs no trim.\n\n2. NEVER on an AUTO-height element that clips — a `truncate` child, an\n   auto-height box with overflow-hidden. With no height to hold it open the\n   box collapses to the x-height band (~7.5px at 14px) and the clip chops the\n   glyphs into a middle stripe. Put the trim on the fixed-height ROW instead\n   and let the child centre via the row's items-center.\n\nA fixed-height NON-editable element is the safe home: the ink overflows the\ntrimmed LINE box but stays inside the padding box, which is what actually\nclips. Both rules are enforced at runtime by typography/collapsed-text-trim.",
       "css": "@utility era-text-trim {\n\tline-height: 1;\n\ttext-box: trim-both ex alphabetic;\n}"
     },
@@ -46,7 +46,7 @@
         "truncate"
       ],
       "file": "index.css",
-      "useCase": "single-line horizontal truncation with an ellipsis — safe inside a trimmed or leading-none row; it will not clip ascenders or descenders.",
+      "useCase": "single-line horizontal truncation with an ellipsis — put it on the truncating CHILD inside a trimmed or leading-none row, never on the same element as era-text-trim; it will not clip ascenders or descenders.",
       "description": "Tailwind's `truncate`, with the vertical clip fixed at the source.\n\ntruncate is overflow:hidden, and overflow clips in BOTH axes — so whatever\nline box the element ends up with is also its ink clip. Era rows put\nera-text-trim on the fixed-height row (a Bar, a list row), and its\n`line-height: 1` INHERITS into the truncating child, which then has no fixed\nheight of its own: the child's box collapses to 1em while the font's real ink\nextent is ~1.15-1.2em, and the descenders (the \"g\" hook, the \"y\" tail) get\nsliced off at the box edge. Same bug on any `leading-none` + `truncate` pair.\n\nThe fix belongs here rather than at each call site: a horizontally-truncating\nelement must never be the thing that clips vertically. `line-height: normal`\nrestores the font's own ascent+descent box — exactly the ink extent — and\n`text-box: normal` cancels a trim if one is set alongside. Rows stay the same\nheight (they are tier-fixed and centre the child), and the child now has room\nfor its own glyphs.",
       "css": "@utility truncate {\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\tline-height: normal;\n\ttext-box: normal;\n}"
     },
@@ -56,7 +56,7 @@
         "era-text-trim-caps"
       ],
       "file": "index.css",
-      "useCase": "the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never use it for mixed-case text.",
+      "useCase": "the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never for mixed-case text (a label like \"System\" reads high; use era-text-trim), and never on the same element as `truncate`.",
       "description": "ALL-CAPS single-line text (kbd hints, acronym badges): the x-height band\nmisjudges caps-only strings — cap/alphabetic edges are the right box.",
       "css": "@utility era-text-trim-caps {\n\tline-height: 1;\n\ttext-box: trim-both cap alphabetic;\n}"
     },

package/dist/generated-docs/utilities.md

@@ -41,9 +41,9 @@ enough to stay var-form — `min-w-(--era-h-md)` etc. remain the escape hatch.
 | `era-interactive` | the focus/disabled recipe every era control carries — put it on a custom interactive element instead of hand-writing focus/disabled variants. |
 | `era-link` | understated, motion-aware inline text link — the canonical style for a link in body copy or prose; prefer it over a hand-rolled underline or `Button variant="link"` (which is a control, not running text). |
 | `scrollbar-none` | hide the scrollbar on an overflowing strip or rail while keeping it scrollable — for a scroll region that should show its bar, use ScrollArea. |
-| `era-text-trim` | vertically center single-line control text (a label beside an icon, a button's own text) without a translateY nudge — fixed-height, non-editable elements only; see era-text-trim-caps for ALL-CAPS strings. |
-| `truncate` | single-line horizontal truncation with an ellipsis — safe inside a trimmed or leading-none row; it will not clip ascenders or descenders. |
-| `era-text-trim-caps` | the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never use it for mixed-case text. |
+| `era-text-trim` | vertically center single-line control text (a label beside an icon, a button's own text) without a translateY nudge. Fixed-height, non-editable elements ONLY: never on an <input>/<textarea>, and never on the same element as `truncate` or any overflow clip — put it on the fixed-height ROW and let the truncating child centre inside it. See era-text-trim-caps for ALL-CAPS. |
+| `truncate` | single-line horizontal truncation with an ellipsis — put it on the truncating CHILD inside a trimmed or leading-none row, never on the same element as era-text-trim; it will not clip ascenders or descenders. |
+| `era-text-trim-caps` | the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never for mixed-case text (a label like "System" reads high; use era-text-trim), and never on the same element as `truncate`. |
 | `era-ink-center` | on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim. |
 | `era-shimmer` | the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text. |
 | `era-collapse` | the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden). |
@@ -101,16 +101,23 @@ Declared in `index.css`.
 @utility era-link {
 	/* The text is bright at rest and never changes — the link reads as a link
 	 * before you touch it. Only the UNDERLINE reacts: a faint hint at rest —
-	 * muted knocked back to 30% so it barely whispers — that resolves to the full
-	 * text colour on hover. */
+	 * the link's own ink knocked back to 30% so it barely whispers — that
+	 * resolves to the full ink on hover.
+	 *
+	 * currentColor, not --color-muted/--color-fg: the underline belongs to the
+	 * TEXT it underlines. On themes whose link ink is a colour (signalnine's
+	 * navy, an accent-tinted bright), the neutral tokens drew a whitish line
+	 * under coloured text — a second hue where there should be one. Derived
+	 * from currentColor, the underline tracks whatever the link resolves to,
+	 * in every theme, including a caller overriding `color` locally. */
 	color: var(--color-link);
 	text-decoration-line: underline;
-	text-decoration-color: color-mix(in oklch, var(--color-muted) 30%, transparent);
+	text-decoration-color: color-mix(in oklch, currentColor 30%, transparent);
 	text-underline-offset: 0.2em;
 	transition: text-decoration-color var(--era-duration) var(--era-ease);
 	&:hover,
 	&:focus-visible {
-		text-decoration-color: var(--color-fg);
+		text-decoration-color: currentColor;
 	}
 }
 ```
@@ -135,7 +142,7 @@ Declared in `index.css`.
 
 ## era-text-trim
 
-**Use it for:** vertically center single-line control text (a label beside an icon, a button's own text) without a translateY nudge — fixed-height, non-editable elements only; see era-text-trim-caps for ALL-CAPS strings.
+**Use it for:** vertically center single-line control text (a label beside an icon, a button's own text) without a translateY nudge. Fixed-height, non-editable elements ONLY: never on an <input>/<textarea>, and never on the same element as `truncate` or any overflow clip — put it on the fixed-height ROW and let the truncating child centre inside it. See era-text-trim-caps for ALL-CAPS.
 
 Font-agnostic vertical ink-centering for single-line control text.
 Measured verdict (4 fonts x 2 dpr, ink from device-pixel screenshots):
@@ -182,7 +189,7 @@ Declared in `index.css`.
 
 ## truncate
 
-**Use it for:** single-line horizontal truncation with an ellipsis — safe inside a trimmed or leading-none row; it will not clip ascenders or descenders.
+**Use it for:** single-line horizontal truncation with an ellipsis — put it on the truncating CHILD inside a trimmed or leading-none row, never on the same element as era-text-trim; it will not clip ascenders or descenders.
 
 Tailwind's `truncate`, with the vertical clip fixed at the source.
 
@@ -215,7 +222,7 @@ Declared in `index.css`.
 
 ## era-text-trim-caps
 
-**Use it for:** the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never use it for mixed-case text.
+**Use it for:** the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never for mixed-case text (a label like "System" reads high; use era-text-trim), and never on the same element as `truncate`.
 
 ALL-CAPS single-line text (kbd hints, acronym badges): the x-height band
 misjudges caps-only strings — cap/alphabetic edges are the right box.

package/dist/os/pane.svelte

@@ -4,7 +4,7 @@
 	import Minus from '@lucide/svelte/icons/minus';
 	import Maximize from '@lucide/svelte/icons/maximize';
 	import X from '@lucide/svelte/icons/x';
-	import type { Plugin } from '@neodrag/svelte';
+	import type { DragPlugin } from '@neodrag/svelte';
 	import { cn } from '../utils/index.js';
 	import { getPaneManager, type AppPane } from './pane-manager.svelte.js';
 
@@ -17,24 +17,26 @@
 	// not leave the TOP of the work area at all (y ≥ workArea.y), and on every
 	// other side at least pm.dragKeep px of the pane must stay inside the
 	// work area (which excludes chrome — a strip hidden behind the taskbar
-	// would be just as lost). Clamped mid-drag the way neodrag's own bounds
-	// plugin does it: offset + proposed delta → clamp → re-propose the delta,
-	// so the cursor simply stops pulling at the fence instead of
-	// rubber-banding on release. Only a `drag` hook (width read live), and a
-	// STABLE plugin list — an inline array would change identity every render
-	// and make neodrag reconcile mid-session.
-	const shellClamp: Plugin = {
+	// would be just as lost). next.10's tier-2 seam hands `onMove` the PROPOSED
+	// absolute offset (constraints already applied); returning a point replaces
+	// it — so the clamp is a pure function of the proposal, the cursor simply
+	// stops pulling at the fence, and nothing rubber-bands on release. Width is
+	// read live off the node each move (a resize mid-session must re-fence).
+	// A STABLE plugin list — an inline array would change identity every render
+	// and push a needless options update through the drag.
+	const shellClamp: DragPlugin = {
 		name: 'era:shell-clamp',
-		drag(ctx) {
+		onMove(ctx) {
 			const area = pm.workArea;
 			if (!area.width || !area.height) return;
 			const keep = pm.dragKeep;
-			const width = (ctx.rootNode as HTMLElement).offsetWidth;
-			const px = ctx.offset.x + (ctx.proposed.x ?? 0);
-			const py = ctx.offset.y + (ctx.proposed.y ?? 0);
-			const cx = Math.min(Math.max(px, area.x + keep - width), area.x + area.width - keep);
-			const cy = Math.min(Math.max(py, area.y), area.y + area.height - keep);
-			ctx.propose(cx - ctx.offset.x, cy - ctx.offset.y);
+			const width = (ctx.node as HTMLElement).offsetWidth;
+			const cx = Math.min(
+				Math.max(ctx.offset.x, area.x + keep - width),
+				area.x + area.width - keep
+			);
+			const cy = Math.min(Math.max(ctx.offset.y, area.y), area.y + area.height - keep);
+			if (cx !== ctx.offset.x || cy !== ctx.offset.y) return { x: cx, y: cy };
 		}
 	};
 	const panePlugins = [shellClamp];

package/dist/styles/index.css

@@ -91,16 +91,23 @@
 @utility era-link {
 	/* The text is bright at rest and never changes — the link reads as a link
 	 * before you touch it. Only the UNDERLINE reacts: a faint hint at rest —
-	 * muted knocked back to 30% so it barely whispers — that resolves to the full
-	 * text colour on hover. */
+	 * the link's own ink knocked back to 30% so it barely whispers — that
+	 * resolves to the full ink on hover.
+	 *
+	 * currentColor, not --color-muted/--color-fg: the underline belongs to the
+	 * TEXT it underlines. On themes whose link ink is a colour (signalnine's
+	 * navy, an accent-tinted bright), the neutral tokens drew a whitish line
+	 * under coloured text — a second hue where there should be one. Derived
+	 * from currentColor, the underline tracks whatever the link resolves to,
+	 * in every theme, including a caller overriding `color` locally. */
 	color: var(--color-link);
 	text-decoration-line: underline;
-	text-decoration-color: color-mix(in oklch, var(--color-muted) 30%, transparent);
+	text-decoration-color: color-mix(in oklch, currentColor 30%, transparent);
 	text-underline-offset: 0.2em;
 	transition: text-decoration-color var(--era-duration) var(--era-ease);
 	&:hover,
 	&:focus-visible {
-		text-decoration-color: var(--color-fg);
+		text-decoration-color: currentColor;
 	}
 }
 
@@ -151,8 +158,10 @@
  * clips. Both rules are enforced at runtime by typography/collapsed-text-trim.
  *
  * @use vertically center single-line control text (a label beside an icon, a
- * button's own text) without a translateY nudge — fixed-height, non-editable
- * elements only; see era-text-trim-caps for ALL-CAPS strings.
+ * button's own text) without a translateY nudge. Fixed-height, non-editable
+ * elements ONLY: never on an <input>/<textarea>, and never on the same element
+ * as `truncate` or any overflow clip — put it on the fixed-height ROW and let
+ * the truncating child centre inside it. See era-text-trim-caps for ALL-CAPS.
  */
 @utility era-text-trim {
 	line-height: 1;
@@ -176,8 +185,9 @@
  * height (they are tier-fixed and centre the child), and the child now has room
  * for its own glyphs.
  *
- * @use single-line horizontal truncation with an ellipsis — safe inside a
- * trimmed or leading-none row; it will not clip ascenders or descenders. */
+ * @use single-line horizontal truncation with an ellipsis — put it on the
+ * truncating CHILD inside a trimmed or leading-none row, never on the same
+ * element as era-text-trim; it will not clip ascenders or descenders. */
 @utility truncate {
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -186,11 +196,38 @@
 	text-box: normal;
 }
 
+/* THE COLLISION GUARD — `truncate` and `era-text-trim` on the SAME element.
+ *
+ * Two utilities, same specificity, opposite intents: the trim collapses the box
+ * to the x-height band, and truncate clips to whatever box it lands on. Class
+ * ORDER in the attribute cannot break the tie — CSS resolves same-specificity
+ * conflicts by stylesheet order, and Tailwind emits era-text-trim last, so the
+ * trim silently won and the clip chopped the glyphs into a middle stripe
+ * (measured: an 8.58px box holding 16px of ink). Writing the classes the other
+ * way round changed nothing, which is what made it so hard to see.
+ *
+ * A real consumer hit exactly this. So the pairing is now DEFINED rather than
+ * accidental, with a compound selector that outranks both single-class
+ * utilities: truncate wins the vertical, the glyphs stay whole, and the
+ * element centres the way the docs say it should anyway — via its
+ * fixed-height parent's items-center.
+ *
+ * This is a safety net, not a blessing: the correct authoring is still trim on
+ * the ROW, truncate on the CHILD (typography/collapsed-text-trim still reports
+ * the pair so the runtime audit can point at it). It exists so the failure mode
+ * is a no-op instead of unreadable text. */
+.era-text-trim.truncate,
+.era-text-trim-caps.truncate {
+	line-height: normal;
+	text-box: normal;
+}
+
 /* ALL-CAPS single-line text (kbd hints, acronym badges): the x-height band
  * misjudges caps-only strings — cap/alphabetic edges are the right box.
  *
  * @use the era-text-trim variant for ALL-CAPS single-line strings (kbd hints,
- * acronym badges) — never use it for mixed-case text. */
+ * acronym badges) — never for mixed-case text (a label like "System" reads
+ * high; use era-text-trim), and never on the same element as `truncate`. */
 @utility era-text-trim-caps {
 	line-height: 1;
 	text-box: trim-both cap alphabetic;