@signal9/era-ui 4.8.0 → 4.9.1

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

@@ -15,7 +15,7 @@ Named exports wrap a single primitive (`Button`, `Badge`, `Chip`, `Input`, …).
 
 Five orthogonal axes are exposed as HTML attributes on any ancestor. The entire subtree re-tiers through CSS inheritance — no JS, no context provider.
 
-- `data-mode`: **dense** (default) · balanced · spacious · touch — adjusts the spacing atom (`--era-sp`).
+- `data-mode`: **dense** (default) · balanced · spacious · touch — adjusts the spacing atom (`--era-sp`) and the type size (`--era-text`: 12px at dense, 14px above).
 - `data-surface`: **flat** (default) · glass · bevel — swaps the background treatment.
 - `data-corners`: **rounded** (default) · square — scales all radii toward 0.
 - `data-font`: **mono** (default) · sans · serif — switches the font stack.
@@ -249,7 +249,9 @@ centering the x-height band — the visual mass of MIXED-CASE text (caps and
 descenders cancel above/below). cap alphabetic is the spec-example recipe
 but is descender-blind (reads high; CSSWG #9148) — measured 4x worse here.
 Where text-box is supported it fully determines the box, so the two
-declarations never fight. Worst-case residual: 0.44px.
+declarations never fight. Worst-case residual: 0.44px (measured at 14px; the
+mechanism is font-relative, so dense's 12px inherits the same guarantee with
+a proportionally smaller residual).
 
 The hard rules concern overflow clipping, and there are TWO of them.
 
@@ -371,9 +373,11 @@ The class also owns `overflow: hidden` — animating height without it just
 spills the content out of the shrinking box.
 
 Timing rides the motion axis, so `instant` collapses it to a cut (0s) and
-`extra` stretches it, for free. Three components had a byte-identical copy of
-these keyframes under three different names before this existed; the panel
-that needs different motion should override `animation`, not re-declare it.
+`extra` stretches it, for free. Two components carried a byte-identical copy of
+these keyframes under two different names before this existed (a Step's body
+and the error panel's detail), and the swarm tree would have made a third; the
+panel that needs different motion should override `animation`, not re-declare
+it.
 
 Declared in `index.css`.
 
@@ -908,6 +912,9 @@ Inherits all props from `HTMLAttributes<HTMLDivElement>`.
 |------|------|---------|-------|
 | `ref?` | `HTMLDivElement \| null` | `null` | bindable |
 | `size?` | `'sm' \| 'md' \| 'lg'` | `'lg'` | Height tier (scales with density). Default `lg` — a full toolbar. |
+| `content?` | `'tier' \| 'xxs'` | `'tier'` | Tier of the controls inside — drives the bar's padding and gap so they
+stay concentric to them. `tier` (default) is one tier smaller; `xxs` is
+the compact pairing (xxs pills/fields in an sm or md bar). |
 | `children?` | `Snippet` | — | — |
 
 <!-- end: bar -->

package/dist/generated-docs/llms.txt

@@ -15,7 +15,7 @@ Named exports wrap a single primitive (`Button`, `Badge`, `Chip`, `Input`, …).
 
 Five orthogonal axes are exposed as HTML attributes on any ancestor. The entire subtree re-tiers through CSS inheritance — no JS, no context provider.
 
-- `data-mode`: **dense** (default) · balanced · spacious · touch — adjusts the spacing atom (`--era-sp`).
+- `data-mode`: **dense** (default) · balanced · spacious · touch — adjusts the spacing atom (`--era-sp`) and the type size (`--era-text`: 12px at dense, 14px above).
 - `data-surface`: **flat** (default) · glass · bevel — swaps the background treatment.
 - `data-corners`: **rounded** (default) · square — scales all radii toward 0.
 - `data-font`: **mono** (default) · sans · serif — switches the font stack.

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": 5277,
+      "tokenEstimate": 5333,
       "sections": [
         "Overview",
         "era-interactive",
@@ -159,7 +159,7 @@
       "slug": "bar",
       "title": "Bar",
       "summary": "A flex container for toolbars and headers, in three heights.",
-      "tokenEstimate": 118,
+      "tokenEstimate": 181,
       "sections": [
         "Import",
         "Props"
@@ -997,7 +997,7 @@
       ],
       "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.",
-      "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.\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.",
+      "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}"
     },
     {
@@ -1037,7 +1037,7 @@
       ],
       "file": "index.css",
       "useCase": "the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden).",
-      "description": "The open/close animation for a bits-ui Collapsible.Content — the height\nsweep every disclosure in the library uses (a Step's body, an error panel's\ndetail, a swarm node's children).\n\nIt has to be a keyframe animation rather than a transition because the\nnatural height is only knowable at open time: bits measures the content and\npublishes `--bits-collapsible-content-height`, which the `to` frame reads.\nThe class also owns `overflow: hidden` — animating height without it just\nspills the content out of the shrinking box.\n\nTiming rides the motion axis, so `instant` collapses it to a cut (0s) and\n`extra` stretches it, for free. Three components had a byte-identical copy of\nthese keyframes under three different names before this existed; the panel\nthat needs different motion should override `animation`, not re-declare it.",
+      "description": "The open/close animation for a bits-ui Collapsible.Content — the height\nsweep every disclosure in the library uses (a Step's body, an error panel's\ndetail, a swarm node's children).\n\nIt has to be a keyframe animation rather than a transition because the\nnatural height is only knowable at open time: bits measures the content and\npublishes `--bits-collapsible-content-height`, which the `to` frame reads.\nThe class also owns `overflow: hidden` — animating height without it just\nspills the content out of the shrinking box.\n\nTiming rides the motion axis, so `instant` collapses it to a cut (0s) and\n`extra` stretches it, for free. Two components carried a byte-identical copy of\nthese keyframes under two different names before this existed (a Step's body\nand the error panel's detail), and the swarm tree would have made a third; the\npanel that needs different motion should override `animation`, not re-declare\nit.",
       "css": "@utility era-collapse {\n\toverflow: hidden;\n\t&[data-state='open'] {\n\t\tanimation: era-collapse-open var(--era-duration) var(--era-ease);\n\t}\n\t&[data-state='closed'] {\n\t\tanimation: era-collapse-close var(--era-duration) var(--era-ease);\n\t}\n}"
     },
     {

package/dist/generated-docs/utilities.json

@@ -37,7 +37,7 @@
       ],
       "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.",
-      "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.\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.",
+      "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}"
     },
     {
@@ -77,7 +77,7 @@
       ],
       "file": "index.css",
       "useCase": "the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden).",
-      "description": "The open/close animation for a bits-ui Collapsible.Content — the height\nsweep every disclosure in the library uses (a Step's body, an error panel's\ndetail, a swarm node's children).\n\nIt has to be a keyframe animation rather than a transition because the\nnatural height is only knowable at open time: bits measures the content and\npublishes `--bits-collapsible-content-height`, which the `to` frame reads.\nThe class also owns `overflow: hidden` — animating height without it just\nspills the content out of the shrinking box.\n\nTiming rides the motion axis, so `instant` collapses it to a cut (0s) and\n`extra` stretches it, for free. Three components had a byte-identical copy of\nthese keyframes under three different names before this existed; the panel\nthat needs different motion should override `animation`, not re-declare it.",
+      "description": "The open/close animation for a bits-ui Collapsible.Content — the height\nsweep every disclosure in the library uses (a Step's body, an error panel's\ndetail, a swarm node's children).\n\nIt has to be a keyframe animation rather than a transition because the\nnatural height is only knowable at open time: bits measures the content and\npublishes `--bits-collapsible-content-height`, which the `to` frame reads.\nThe class also owns `overflow: hidden` — animating height without it just\nspills the content out of the shrinking box.\n\nTiming rides the motion axis, so `instant` collapses it to a cut (0s) and\n`extra` stretches it, for free. Two components carried a byte-identical copy of\nthese keyframes under two different names before this existed (a Step's body\nand the error panel's detail), and the swarm tree would have made a third; the\npanel that needs different motion should override `animation`, not re-declare\nit.",
       "css": "@utility era-collapse {\n\toverflow: hidden;\n\t&[data-state='open'] {\n\t\tanimation: era-collapse-open var(--era-duration) var(--era-ease);\n\t}\n\t&[data-state='closed'] {\n\t\tanimation: era-collapse-close var(--era-duration) var(--era-ease);\n\t}\n}"
     },
     {

package/dist/generated-docs/utilities.md

@@ -146,7 +146,9 @@ centering the x-height band — the visual mass of MIXED-CASE text (caps and
 descenders cancel above/below). cap alphabetic is the spec-example recipe
 but is descender-blind (reads high; CSSWG #9148) — measured 4x worse here.
 Where text-box is supported it fully determines the box, so the two
-declarations never fight. Worst-case residual: 0.44px.
+declarations never fight. Worst-case residual: 0.44px (measured at 14px; the
+mechanism is font-relative, so dense's 12px inherits the same guarantee with
+a proportionally smaller residual).
 
 The hard rules concern overflow clipping, and there are TWO of them.
 
@@ -268,9 +270,11 @@ The class also owns `overflow: hidden` — animating height without it just
 spills the content out of the shrinking box.
 
 Timing rides the motion axis, so `instant` collapses it to a cut (0s) and
-`extra` stretches it, for free. Three components had a byte-identical copy of
-these keyframes under three different names before this existed; the panel
-that needs different motion should override `animation`, not re-declare it.
+`extra` stretches it, for free. Two components carried a byte-identical copy of
+these keyframes under two different names before this existed (a Step's body
+and the error panel's detail), and the swarm tree would have made a third; the
+panel that needs different motion should override `animation`, not re-declare
+it.
 
 Declared in `index.css`.
 

package/dist/os/pane.svelte

@@ -95,27 +95,22 @@
 			     held preview recolours to the action it will commit — yellow for
 			     minimize, green for maximize — so the tone and glyph agree on what
 			     the release does. -->
-			<!-- Glyph sizing lives on the BUTTON, not on the icons, and has to be a
-			     [&_svg]: variant: Button's `icon` variant sets the glyph size with
-			     exactly that selector, and a plain size-* on the <svg> loses to it on
-			     specificity. The classes that used to sit on these three icons were
-			     inert — they read "h-xs" (14px) while every one rendered at icon-xs
-			     (10px), including a documented -2px optical tweak on the maximize
-			     bracket that never applied.
+			<!-- size="xxs" is the handle's content tier (see Pane.Handle), and it also
+			     sets the glyph: the xxs button draws icon-xxs, which is what this
+			     button used to force with a hand-written [&_svg] class. Same size as
+			     Pane.Close, so the two close affordances match.
 
-			     Matches Pane.Close at icon-xxs so the two close affordances are the
-			     same size, EXCEPT the maximize bracket, which stays a sub-tier down:
-			     its silhouette fills its whole box, so beside the x and - strokes it
-			     reads bulkier at the same nominal size. icon-xs is exactly 2px under
-			     icon-xxs at every density, which is the adjustment that comment
-			     always wanted. -->
+			     The ONE exception stays a sub-tier down: the maximize bracket's
+			     silhouette fills its whole box, so beside the x and − strokes it reads
+			     bulkier at the same nominal size. icon-xs is exactly 2px under
+			     icon-xxs at every density. It has to be written as [&_svg]: because
+			     that is the selector the variant uses — a plain size-* on the <svg>
+			     loses to it. -->
 			<Button
 				icon
-				size="icon"
+				size="xxs"
 				tone={armed === 'minimize' ? 'warning' : armed === 'maximize' ? 'success' : 'destructive'}
-				class={cn(
-					armed === 'maximize' ? '[&_svg]:size-(--era-icon-xs)' : '[&_svg]:size-(--era-icon-xxs)'
-				)}
+				class={armed === 'maximize' ? '[&_svg]:size-(--era-icon-xs)' : undefined}
 				aria-label="Close (right-click minimizes, middle-click maximizes)"
 				onclick={() => pm.close(pane.id)}
 				oncontextmenu={(e: MouseEvent) => e.preventDefault()}

package/dist/styles/density.css

@@ -13,7 +13,7 @@
  *   lg  = 4·sp        (bars, containers)
  *
  * xs carries a +6 floor so icons stay legible (≥14px) at every sp. xxs sits
- * 4px above xs so 14px text has just enough pill around it while fitting
+ * 4px above xs so body text has just enough pill around it while fitting
  * inside an md container with a visible concentric gap (≥3px at dense). sm
  * keeps the generous 2·sp + 6 that gives switch thumbs their sp/2 slot and
  * KV rows their padded feel. md and lg are pure sp multiples so button and
@@ -43,6 +43,7 @@
  *   --era-px-{sm,md,lg}       sp/2                   — tier-to-tier nesting padding
  *   --era-gap                 sp/2                   — inter-element gap
  *   --era-inset-{xxs,sm,md}   (T − text)/2           — text-symmetric content padding
+ *                                                     (text is 12px at dense, 14 above)
  *   --era-xs-inset-sm         (sm − xs)/2 = sp/2     — centering an xs element inside sm
  *
  * OPTICAL PADDING (unbounded content containers)
@@ -52,7 +53,8 @@
  * height C inside a container of height T is (T − C)/2, linear in sp. But
  * cards, dialogs, and content panels have no bounding tier — their padding
  * is optical, and linear-in-sp padding falls behind as modes loosen: controls
- * grow linearly while text stays 14px, so whitespace must grow SUPER-linearly
+ * grow linearly while text barely moves (12px at dense, 14 above), so
+ * whitespace must grow SUPER-linearly
  * to hold the same perceived balance. (The tokens that already feel right
  * across modes — inset-md 5→17, content-p 16→48 — are exactly the convex
  * ones; the cramped ones — card's old sp/2 = 4→8 — are the linear ones.)
@@ -154,9 +156,9 @@
 
 	/* Content insets — text-symmetric padding (vertical centering, reused as
 	   horizontal only where the content is a single square glyph). */
-	--era-inset-xxs: max(0px, calc((var(--era-h-xxs) - var(--era-text)) / 2)); /* 2/3/4 */
-	--era-inset-sm: max(0px, calc((var(--era-h-sm) - var(--era-text)) / 2)); /* 4/6/8 */
-	--era-inset-md: max(0px, calc((var(--era-h-md) - var(--era-text)) / 2)); /* 5/8/11 */
+	--era-inset-xxs: max(0px, calc((var(--era-h-xxs) - var(--era-text)) / 2)); /* 3/3/4/6 */
+	--era-inset-sm: max(0px, calc((var(--era-h-sm) - var(--era-text)) / 2)); /* 5/6/8/12 */
+	--era-inset-md: max(0px, calc((var(--era-h-md) - var(--era-text)) / 2)); /* 6/8/11/17 */
 
 	/* Pill side padding — horizontal breathing room for badge/chip text.
 	   Text wants MORE horizontal than vertical padding: line-height adds
@@ -167,8 +169,8 @@
 	   is narrower than the line, this comes out ~2× the vertical inset on its
 	   own — and a lone glyph still measures exactly the tier width, so the
 	   "single glyph = square" floor (min-w = h) is preserved, not broken. */
-	--era-pill-xxs: max(0px, calc((var(--era-h-xxs) - 0.6 * var(--era-text)) / 2)); /* 4.8/5.8/6.8 */
-	--era-pill-sm: max(0px, calc((var(--era-h-sm) - 0.6 * var(--era-text)) / 2)); /* 6.8/8.8/10.8 */
+	--era-pill-xxs: max(0px, calc((var(--era-h-xxs) - 0.6 * var(--era-text)) / 2)); /* 5.4/5.8/6.8 */
+	--era-pill-sm: max(0px, calc((var(--era-h-sm) - 0.6 * var(--era-text)) / 2)); /* 7.4/8.8/10.8 */
 
 	/* Text-field side padding — the horizontal room where typed text starts in an
 	   md-tier input (Input, Textarea, combobox/command inputs, date/time fields).
@@ -261,7 +263,8 @@
 }
 
 /* -------------------------------------------------- */
-/* Mode inputs — just --era-sp (and static --era-text).   */
+/* Mode inputs — --era-sp, and --era-text (12 at dense,  */
+/* 14 above; see the dense block).                       */
 /* The derivation above re-runs per element wherever  */
 /* --era-sp is overridden. Animation timing is NOT here */
 /* — it's the motion axis (motion.css), orthogonal to */
@@ -286,7 +289,37 @@
 [data-mode='dense'] {
 	--era-sp: 0.5rem; /* 8px */
 	--era-density: 1; /* d = sp / 8px */
-	--era-text: 0.875rem; /* 14px — static across modes */
+	/* 12px at dense, 14px from balanced up (set in the block below).
+	 *
+	 * Type is the SECOND density input, and for a long time it was not one: the
+	 * token read "14px — static across modes", so dense and balanced differed in
+	 * their boxes and not in their type. That is what made dense feel like
+	 * balanced-with-tighter-gaps rather than a genuinely dense mode — the chrome
+	 * shrank while the thing inside it did not.
+	 *
+	 * 12px is the size the reference terminal app is built at, and it makes the
+	 * whole ladder line up with it: --era-inset-xxs becomes (18−12)/2 = 3px,
+	 * which is exactly the 3px that app hardcodes for the wall and gap of an
+	 * 18px control in a 24px bar. Same numbers, derived instead of typed.
+	 *
+	 * Everything text-derived follows: inset-xxs 2→3, inset-sm 4→5, inset-md
+	 * 5→6, pill-xxs 4.8→5.4. Heights do NOT — they are sp-derived, so the tier
+	 * ladder (14/18/22/24/32) is unchanged and dense stays dimensionally the
+	 * same mode it was.
+	 *
+	 * Only dense moves. Balanced/spacious/touch keep 14px: they exist for
+	 * reading comfort and pointer size, and shrinking their type would undo the
+	 * thing they are for. */
+	--era-text: 0.75rem; /* 12px */
+}
+
+/* Balanced and up: 14px, the comfortable reading size. Declared once here and
+ * inherited by spacious/touch so there is a single place the non-dense size
+ * lives. */
+[data-mode='balanced'],
+[data-mode='spacious'],
+[data-mode='touch'] {
+	--era-text: 0.875rem; /* 14px */
 }
 
 [data-mode='balanced'] {

package/dist/styles/index.css

@@ -126,7 +126,9 @@
  * descenders cancel above/below). cap alphabetic is the spec-example recipe
  * but is descender-blind (reads high; CSSWG #9148) — measured 4x worse here.
  * Where text-box is supported it fully determines the box, so the two
- * declarations never fight. Worst-case residual: 0.44px.
+ * declarations never fight. Worst-case residual: 0.44px (measured at 14px; the
+ * mechanism is font-relative, so dense's 12px inherits the same guarantee with
+ * a proportionally smaller residual).
  *
  * The hard rules concern overflow clipping, and there are TWO of them.
  *
@@ -234,9 +236,11 @@
  * spills the content out of the shrinking box.
  *
  * Timing rides the motion axis, so `instant` collapses it to a cut (0s) and
- * `extra` stretches it, for free. Three components had a byte-identical copy of
- * these keyframes under three different names before this existed; the panel
- * that needs different motion should override `animation`, not re-declare it.
+ * `extra` stretches it, for free. Two components carried a byte-identical copy of
+ * these keyframes under two different names before this existed (a Step's body
+ * and the error panel's detail), and the swarm tree would have made a third; the
+ * panel that needs different motion should override `animation`, not re-declare
+ * it.
  *
  * @use the height sweep for a bits-ui Collapsible.Content — put it on the
  * Content element itself (it carries its own overflow: hidden). */

package/dist/ui/bar/bar.svelte

@@ -10,15 +10,42 @@
 	// Radius stays concentric to the height; gap/px are sp/2 (xs-inset-sm),
 	// the even gap for one-tier-smaller content at every size.
 	export const barVariants = tv({
-		base: 'flex items-center gap-(--era-xs-inset-sm) px-(--era-xs-inset-sm) era-text-trim',
+		base: 'flex items-center era-text-trim',
 		variants: {
 			size: {
 				sm: 'h-(--era-h-sm) rounded-(--era-rd-sm)',
 				md: 'h-(--era-h-md) rounded-(--era-rd-md)',
 				lg: 'h-(--era-h-lg) rounded-(--era-rd-lg)'
+			},
+			/**
+			 * The tier of the CONTROLS inside, because that is what the bar's own
+			 * padding and gap have to be concentric to — (bar − content)/2 on every
+			 * side. It is a variant rather than a caller's class because the ladder
+			 * math belongs next to the heights it is derived from: three call sites
+			 * had each restated the two-tier value by hand, and the geometry spec had
+			 * been rewritten twice chasing which token they were restating.
+			 *
+			 * - `tier` (default) — one tier smaller, the pairing above. sm⊃xs, md⊃sm
+			 *   and lg⊃md all equal sp/2, which is why one token covers every size.
+			 * - `xxs` — the compact pairing: xxs pills and fields (a filter beside an
+			 *   xxs icon button, a title bar). Two tiers down, so the inset differs
+			 *   per size and comes from the compounds below.
+			 */
+			content: {
+				tier: 'gap-(--era-xs-inset-sm) px-(--era-xs-inset-sm)',
+				xxs: ''
 			}
 		},
-		defaultVariants: { size: 'lg' }
+		compoundVariants: [
+			// md ⊃ xxs = (3sp − sp − 10)/2 — the named token.
+			{ size: 'md', content: 'xxs', class: 'gap-(--era-xxs-inset-md) px-(--era-xxs-inset-md)' },
+			// sm ⊃ xxs = (2sp + 6 − sp − 10)/2 = (sp − 4)/2, which is ALSO (h-xxs − text)/2
+			// at 14px text — the same number --era-inset-xxs already carries, so the
+			// identity is reused rather than a fifth token invented. (lg ⊃ xxs has no
+			// token because nothing pairs a page header with pill-tier controls.)
+			{ size: 'sm', content: 'xxs', class: 'gap-(--era-inset-xxs) px-(--era-inset-xxs)' }
+		],
+		defaultVariants: { size: 'lg', content: 'tier' }
 	});
 </script>
 
@@ -29,6 +56,7 @@
 	let {
 		ref = $bindable(null),
 		size = 'lg',
+		content = 'tier',
 		children,
 		class: className,
 		...restProps
@@ -36,10 +64,16 @@
 		ref?: HTMLDivElement | null;
 		/** Height tier (scales with density). Default `lg` — a full toolbar. */
 		size?: 'sm' | 'md' | 'lg';
+		/**
+		 * Tier of the controls inside — drives the bar's padding and gap so they
+		 * stay concentric to them. `tier` (default) is one tier smaller; `xxs` is
+		 * the compact pairing (xxs pills/fields in an sm or md bar).
+		 */
+		content?: 'tier' | 'xxs';
 		children?: Snippet;
 	} = $props();
 </script>
 
-<div bind:this={ref} class={cn(barVariants({ size }), className)} {...restProps}>
+<div bind:this={ref} class={cn(barVariants({ size, content }), className)} {...restProps}>
 	{@render children?.()}
 </div>

package/dist/ui/bar/bar.svelte.d.ts

@@ -4,18 +4,72 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
         md: "h-(--era-h-md) rounded-(--era-rd-md)";
         lg: "h-(--era-h-lg) rounded-(--era-rd-lg)";
     };
-}, undefined, "flex items-center gap-(--era-xs-inset-sm) px-(--era-xs-inset-sm) era-text-trim", {
+    /**
+     * The tier of the CONTROLS inside, because that is what the bar's own
+     * padding and gap have to be concentric to — (bar − content)/2 on every
+     * side. It is a variant rather than a caller's class because the ladder
+     * math belongs next to the heights it is derived from: three call sites
+     * had each restated the two-tier value by hand, and the geometry spec had
+     * been rewritten twice chasing which token they were restating.
+     *
+     * - `tier` (default) — one tier smaller, the pairing above. sm⊃xs, md⊃sm
+     *   and lg⊃md all equal sp/2, which is why one token covers every size.
+     * - `xxs` — the compact pairing: xxs pills and fields (a filter beside an
+     *   xxs icon button, a title bar). Two tiers down, so the inset differs
+     *   per size and comes from the compounds below.
+     */
+    content: {
+        tier: "gap-(--era-xs-inset-sm) px-(--era-xs-inset-sm)";
+        xxs: "";
+    };
+}, undefined, "flex items-center era-text-trim", {
     size: {
         sm: "h-(--era-h-sm) rounded-(--era-rd-sm)";
         md: "h-(--era-h-md) rounded-(--era-rd-md)";
         lg: "h-(--era-h-lg) rounded-(--era-rd-lg)";
     };
+    /**
+     * The tier of the CONTROLS inside, because that is what the bar's own
+     * padding and gap have to be concentric to — (bar − content)/2 on every
+     * side. It is a variant rather than a caller's class because the ladder
+     * math belongs next to the heights it is derived from: three call sites
+     * had each restated the two-tier value by hand, and the geometry spec had
+     * been rewritten twice chasing which token they were restating.
+     *
+     * - `tier` (default) — one tier smaller, the pairing above. sm⊃xs, md⊃sm
+     *   and lg⊃md all equal sp/2, which is why one token covers every size.
+     * - `xxs` — the compact pairing: xxs pills and fields (a filter beside an
+     *   xxs icon button, a title bar). Two tiers down, so the inset differs
+     *   per size and comes from the compounds below.
+     */
+    content: {
+        tier: "gap-(--era-xs-inset-sm) px-(--era-xs-inset-sm)";
+        xxs: "";
+    };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
         sm: "h-(--era-h-sm) rounded-(--era-rd-sm)";
         md: "h-(--era-h-md) rounded-(--era-rd-md)";
         lg: "h-(--era-h-lg) rounded-(--era-rd-lg)";
     };
+    /**
+     * The tier of the CONTROLS inside, because that is what the bar's own
+     * padding and gap have to be concentric to — (bar − content)/2 on every
+     * side. It is a variant rather than a caller's class because the ladder
+     * math belongs next to the heights it is derived from: three call sites
+     * had each restated the two-tier value by hand, and the geometry spec had
+     * been rewritten twice chasing which token they were restating.
+     *
+     * - `tier` (default) — one tier smaller, the pairing above. sm⊃xs, md⊃sm
+     *   and lg⊃md all equal sp/2, which is why one token covers every size.
+     * - `xxs` — the compact pairing: xxs pills and fields (a filter beside an
+     *   xxs icon button, a title bar). Two tiers down, so the inset differs
+     *   per size and comes from the compounds below.
+     */
+    content: {
+        tier: "gap-(--era-xs-inset-sm) px-(--era-xs-inset-sm)";
+        xxs: "";
+    };
 }, undefined>>;
 import type { HTMLAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
@@ -23,6 +77,12 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     ref?: HTMLDivElement | null;
     /** Height tier (scales with density). Default `lg` — a full toolbar. */
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Tier of the controls inside — drives the bar's padding and gap so they
+     * stay concentric to them. `tier` (default) is one tier smaller; `xxs` is
+     * the compact pairing (xxs pills/fields in an sm or md bar).
+     */
+    content?: 'tier' | 'xxs';
     children?: Snippet;
 };
 declare const Bar: import("svelte").Component<$$ComponentProps, {}, "ref">;

package/dist/ui/pane/pane-close.svelte

@@ -2,7 +2,6 @@
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 	import { Button } from '../button';
 	import X from '@lucide/svelte/icons/x';
-	import { cn } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,31 +12,27 @@
 	} = $props();
 </script>
 
-<!-- A raw icon Button (size="icon" = h-xs, rd-xs), a tight SQUARE. No
+<!-- A raw icon Button (size="xxs" = h-xxs, rd-xxs), a tight SQUARE. No
      data-pane-control: it stays in the drag zone, so a press-and-drag moves the
      pane while a clean click still closes (neodrag starts a drag only on
      movement and suppresses the trailing click after a real drag). Its natural
-     rd-xs is what the PANE's corner radius conforms to (rd-sm — see Pane.Root),
+     rd-xxs is what the PANE's corner radius conforms to (rd-md — see Pane.Root),
      not the other way round.
 
-     The glyph steps UP one sub-tier, icon-xs -> icon-xxs (10 -> 12px at dense).
-     Button's `icon` variant drops the glyph below the icon tier at the tight
-     sizes so it does not fill its box, which is right in general — but a close
-     button is the one control in the chrome you must be able to hit and read at
-     a glance, and half of a Lucide glyph's box is padding inside its own
-     viewBox, so 10px rendered only about 5px of actual ink. 12px still leaves
-     1px inset per side, so the button is not flush.
-
-     Written as [&_svg]: because that is what the variant uses — a bare
-     `size-*` on the <X> loses to the variant's descendant selector, which is
-     why the class that used to sit there had no effect at all. -->
+     xxs rather than the tighter `icon` size, which is what the handle's tier
+     asks for — and it also gets the glyph right for free. A close button is the
+     one control in the chrome you must be able to hit and read at a glance, and
+     half of a Lucide glyph's box is padding inside its own viewBox, so `icon`'s
+     10px rendered about 5px of actual ink; this tier draws icon-xxs (12px at
+     dense), which is what the old hand-written [&_svg] override existed to
+     force. One tier declaration now says both things. -->
 <Button
 	bind:ref
 	icon
-	size="icon"
+	size="xxs"
 	tone="destructive"
 	aria-label="Close"
-	class={cn('[&_svg]:size-(--era-icon-xxs)', className)}
+	class={className}
 	{...restProps}
 >
 	<X />

package/dist/ui/pane/pane-handle.svelte

@@ -15,19 +15,26 @@
 	} = $props();
 </script>
 
-<!-- The drag zone. A flush title bar (Bar size="sm") spanning the pane edge to
-     edge, so the WHOLE top — up to the very top pixel — is draggable.
-     data-pane-handle marks it as the neodrag allow-zone. Transparent over the
-     pane's rounded surface: the TOP corners defer to the pane radius, while the
-     BOTTOM corners round to --era-rd-sm — so the inset divider curves up at the
-     ends and the bar reads as a long pill. The corners axis collapses rd-sm to
-     0 in square mode, so it's flat there and pill-shaped only when rounded. -->
+<!-- The drag zone. A flush title bar spanning the pane edge to edge, so the
+     WHOLE top — up to the very top pixel — is draggable. data-pane-handle marks
+     it as the neodrag allow-zone. Transparent over the pane's rounded surface:
+     the TOP corners defer to the pane radius, while the BOTTOM corners round to
+     --era-rd-md — so the inset divider curves up at the ends and the bar reads
+     as a long pill. The corners axis collapses the radius to 0 in square mode,
+     so it's flat there and pill-shaped only when rounded.
+
+     md ⊃ xxs, not sm ⊃ xs: a title bar is the densest chrome in the library and
+     was a tier too short for it — 22px at dense against the 24 the reference
+     terminal app uses, with 14px controls where it uses 18. The pairing is what
+     carries that: content="xxs" puts the walls on --era-xxs-inset-md (3/5/7/11),
+     which is the 3px that app hardcodes for exactly this bar. -->
 <Bar
 	bind:ref
 	data-pane-handle
-	size="sm"
+	size="md"
+	content="xxs"
 	class={cn(
-		'shrink-0 rounded-t-none rounded-b-(--era-rd-sm) [box-shadow:inset_0_-1px_0_var(--color-divider-faded)] select-none',
+		'shrink-0 rounded-t-none rounded-b-(--era-rd-md) [box-shadow:inset_0_-1px_0_var(--color-divider-faded)] select-none',
 		className
 	)}
 	{...restProps}

package/dist/ui/pane/pane-root.svelte

@@ -298,12 +298,14 @@
 		// negative z sits below the content but above this background (bar clear of
 		// the rails, without lifting the rails above neighbouring UI).
 		//
-		// rd-sm, NOT rd-lg: a container's radius follows its corner REGION's tier,
-		// not its overall size. The pane's corners are formed by the h-sm grab bar,
-		// whose h-xs controls (the ×) sit xs-inset-sm (sp/2) from the corner — and
-		// the ladder guarantees rd-sm = rd-xs + sp/2 at every density, so the ×'s
-		// natural rd-xs is concentric inside rd-sm by construction.
-		'group/pane absolute isolate flex flex-col rounded-(--era-rd-sm) bg-(--era-surface-bg-elevated) shadow-(--era-shadow-lg) glass-blur',
+		// rd-md, NOT rd-lg: a container's radius follows its corner REGION's tier,
+		// not its overall size. The pane's corners are formed by the grab bar, which
+		// is h-md holding h-xxs controls (the ×) — and the radius ladder is
+		// rd-T = R + (h-T − h-xs)/2, so rd-md − rd-xxs is exactly (h-md − h-xxs)/2 =
+		// --era-xxs-inset-md, the gap the × already sits at from the corner. The ×'s
+		// natural rd-xxs is therefore concentric inside rd-md by construction, the
+		// same way rd-xs was inside rd-sm before the handle moved up a tier.
+		'group/pane absolute isolate flex flex-col rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) shadow-(--era-shadow-lg) glass-blur',
 		// Auto-size to content until an explicit size is set (by the grip or a preset).
 		size ? '' : 'w-max',
 		// While Ctrl is held the whole pane is grabbable: a grab cursor hints it, and

package/dist/ui/pane/pane-tab-list.svelte

@@ -36,12 +36,13 @@
      overflow-x-auto forces overflow-y to clip, so descenders (the logs g, the
      history y) are at risk at the clip edge. The real fix is on the tab itself —
      PaneTab cancels Tabs.Trigger's era-text-trim, which had pulled the box up to
-     the baseline and fed the clip its descenders. py-0.5 stays as a safety margin
-     for the natural line box. -->
+     the baseline and fed the clip its descenders. The py-0.5 that used to back
+     that up is gone with it: the tab is now h-xxs, so its own box holds the line
+     box with room to spare and the clip edge sits a wall away. -->
 <Tabs.List
 	bind:ref
 	class={cn(
-		'scrollbar-none flex min-w-0 touch-pan-x items-center gap-(--era-xs-inset-sm) overflow-x-auto py-0.5',
+		'scrollbar-none flex min-w-0 touch-pan-x items-center gap-(--era-gap) overflow-x-auto',
 		className
 	)}
 	{...restProps}