@signal9/era-ui 3.0.1 → 3.2.0

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

@@ -39,6 +39,17 @@ Classes, not components — they need no import beyond the stylesheet. Reach for
 - `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.
 - `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-shimmer` — the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text.
+- `h-xs · h-xxs · h-sm · h-md · h-lg` — the tier-height ladder — h-xs (icon) · h-xxs (nested pill) · h-sm (standalone pill) · h-md (control) · h-lg (bar); the named form of h-(--era-h-*).
+- `min-h-xs · min-h-xxs · min-h-sm · min-h-md · min-h-lg` — minimum tier height for containers that may grow — a bar that is at least lg-tier but can wrap (min-h-lg).
+- `size-xs · size-xxs · size-sm · size-md · size-lg` — a tier-sized square — size-xs is THE icon size (a Lucide glyph beside body text), size-md a square control face.
+- `px-sm · px-md · px-lg` — tier-to-tier nesting padding (sp/2) — the horizontal padding of a bar or row that holds tiered controls; the named form of px-(--era-px-*).
+- `gap-gutter · p-gutter · px-gutter · py-gutter` — the inter-element gap (sp/2) — flex/grid gap between sibling controls, and the matching gutter padding a scrollable list or rail owes its rows on all four sides (p-gutter on the rail = gap-gutter between its rows).
+- `p-inset-xxs · p-inset-sm · p-inset-md · px-inset-xxs · px-inset-sm · px-inset-md · py-inset-xxs · py-inset-sm · py-inset-md` — text-symmetric content padding — (tier − text)/2, the inset that vertically centers body text in its tier; px-inset-md is a text button's side padding, p-inset-md a code block's.
+- `px-pill-xxs · px-pill-sm` — pill side padding — the wider-than-vertical horizontal breathing room badge/chip text wants (glyph-advance derived, ~2× the vertical inset).
+- `px-field` — text-field side padding — where typed text starts in an md-tier input; the named form of px-(--era-field-px).
+- `p-panel · p-card · p-content` — optical padding for unbounded containers — p-panel for compact shells and menu-adjacent chrome, p-card for cards/dialogs/popovers, p-content for full content panels. Grows super-linearly with density so whitespace holds its perceived share as controls loosen.
+- `p-menu` — menu-panel padding — the surface-owned inset (0 on flat, 2px on glass/bevel) that keeps row highlights inside a floating panel's frame; pairs with rounded-item on the rows.
+- `duration-base` — the motion axis as an explicit transition-duration — for the rare case a utility (not the transition-* default) needs to name it; 0s at data-motion="instant", longer at "extra".
 - `glass-blur` — the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface="glass" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface.
 
 Full reference (what each emits, when to use it): `/utilities.md`. Machine-readable list: `/utilities.json`.
@@ -93,18 +104,38 @@ The CSS classes era ships alongside the components — links, ink-centred text,
 
 ## Overview
 
-era ships a handful of Tailwind v4 `@utility` classes for the patterns that are
-styling, not components — an inline link, ink-centred control text, a hidden
-scrollbar. They need no import: they ride along with the stylesheet.
+era's styling API is pure class names — write `h-md rounded-md px-md shadow`,
+never the `h-(--era-h-md)` var-class spelling. Everything below rides along
+with the stylesheet and needs no import:
 
 ```ts
 import "@sig-nine/era-ui/css";
 ```
 
 ```svelte
-<a class="era-link" href="/spacing">the spacing ladder</a>
+<button class="h-md rounded-md px-inset-md shadow text-body">era styled</button>
 ```
 
+Alongside the `@utility` classes referenced below, era registers named theme
+scales that OVERLOAD the stock Tailwind names, so ordinary-looking markup
+renders on-design and responds to every axis (density, surface, corners,
+motion):
+
+| Stock-looking class | What it resolves to |
+|---|---|
+| `rounded-xs/xxs/sm/md/lg` | the concentric radius ladder (collapses on `data-corners="square"`) |
+| `rounded-item` | menu-row radius, concentric inside a `rounded-md` panel |
+| `shadow` / `shadow-lg` | resting control edge / floating panel chrome, per surface |
+| `shadow-well` / `shadow-pressed` / `shadow-highlight` | recessed, pressed/latched, hover-material chrome |
+| `bg-well` / `bg-elevated` / `bg-highlight` / `bg-overlay` | surface fills: resting, raised, transient feedback, modal scrim |
+| `transition-*` (bare) | duration + easing default to the motion axis |
+| `ease-base` / `duration-base` | the motion axis, named explicitly |
+| `text-body` | density-derived body/control text size |
+
+Deliberate gaps: `w-*`/`min-w-*` tier names would shadow Tailwind's container
+scale (`min-w-md` stays 28rem), and the concentric-inset tokens are advanced
+enough to stay var-form — `min-w-(--era-h-md)` etc. remain the escape hatch.
+
 | Utility | Use it 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. |
@@ -113,6 +144,17 @@ import "@sig-nine/era-ui/css";
 | `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. |
 | `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-shimmer` | the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text. |
+| `h-xs` `h-xxs` `h-sm` `h-md` `h-lg` | the tier-height ladder — h-xs (icon) · h-xxs (nested pill) · h-sm (standalone pill) · h-md (control) · h-lg (bar); the named form of h-(--era-h-*). |
+| `min-h-xs` `min-h-xxs` `min-h-sm` `min-h-md` `min-h-lg` | minimum tier height for containers that may grow — a bar that is at least lg-tier but can wrap (min-h-lg). |
+| `size-xs` `size-xxs` `size-sm` `size-md` `size-lg` | a tier-sized square — size-xs is THE icon size (a Lucide glyph beside body text), size-md a square control face. |
+| `px-sm` `px-md` `px-lg` | tier-to-tier nesting padding (sp/2) — the horizontal padding of a bar or row that holds tiered controls; the named form of px-(--era-px-*). |
+| `gap-gutter` `p-gutter` `px-gutter` `py-gutter` | the inter-element gap (sp/2) — flex/grid gap between sibling controls, and the matching gutter padding a scrollable list or rail owes its rows on all four sides (p-gutter on the rail = gap-gutter between its rows). |
+| `p-inset-xxs` `p-inset-sm` `p-inset-md` `px-inset-xxs` `px-inset-sm` `px-inset-md` `py-inset-xxs` `py-inset-sm` `py-inset-md` | text-symmetric content padding — (tier − text)/2, the inset that vertically centers body text in its tier; px-inset-md is a text button's side padding, p-inset-md a code block's. |
+| `px-pill-xxs` `px-pill-sm` | pill side padding — the wider-than-vertical horizontal breathing room badge/chip text wants (glyph-advance derived, ~2× the vertical inset). |
+| `px-field` | text-field side padding — where typed text starts in an md-tier input; the named form of px-(--era-field-px). |
+| `p-panel` `p-card` `p-content` | optical padding for unbounded containers — p-panel for compact shells and menu-adjacent chrome, p-card for cards/dialogs/popovers, p-content for full content panels. Grows super-linearly with density so whitespace holds its perceived share as controls loosen. |
+| `p-menu` | menu-panel padding — the surface-owned inset (0 on flat, 2px on glass/bevel) that keeps row highlights inside a floating panel's frame; pairs with rounded-item on the rows. |
+| `duration-base` | the motion axis as an explicit transition-duration — for the rare case a utility (not the transition-* default) needs to name it; 0s at data-motion="instant", longer at "extra". |
 | `glass-blur` | the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface="glass" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface. |
 
 ## era-interactive
@@ -275,6 +317,227 @@ Declared in `index.css`.
 }
 ```
 
+## h-xs · h-xxs · h-sm · h-md · h-lg
+
+**Use it for:** the tier-height ladder — h-xs (icon) · h-xxs (nested pill) · h-sm (standalone pill) · h-md (control) · h-lg (bar); the named form of h-(--era-h-*).
+
+Declared in `index.css`.
+
+```css
+@utility h-xs {
+	height: var(--era-h-xs);
+}
+@utility h-xxs {
+	height: var(--era-h-xxs);
+}
+@utility h-sm {
+	height: var(--era-h-sm);
+}
+@utility h-md {
+	height: var(--era-h-md);
+}
+@utility h-lg {
+	height: var(--era-h-lg);
+}
+```
+
+## min-h-xs · min-h-xxs · min-h-sm · min-h-md · min-h-lg
+
+**Use it for:** minimum tier height for containers that may grow — a bar that is at least lg-tier but can wrap (min-h-lg).
+
+Declared in `index.css`.
+
+```css
+@utility min-h-xs {
+	min-height: var(--era-h-xs);
+}
+@utility min-h-xxs {
+	min-height: var(--era-h-xxs);
+}
+@utility min-h-sm {
+	min-height: var(--era-h-sm);
+}
+@utility min-h-md {
+	min-height: var(--era-h-md);
+}
+@utility min-h-lg {
+	min-height: var(--era-h-lg);
+}
+```
+
+## size-xs · size-xxs · size-sm · size-md · size-lg
+
+**Use it for:** a tier-sized square — size-xs is THE icon size (a Lucide glyph beside body text), size-md a square control face.
+
+Declared in `index.css`.
+
+```css
+@utility size-xs {
+	width: var(--era-h-xs);
+	height: var(--era-h-xs);
+}
+@utility size-xxs {
+	width: var(--era-h-xxs);
+	height: var(--era-h-xxs);
+}
+@utility size-sm {
+	width: var(--era-h-sm);
+	height: var(--era-h-sm);
+}
+@utility size-md {
+	width: var(--era-h-md);
+	height: var(--era-h-md);
+}
+@utility size-lg {
+	width: var(--era-h-lg);
+	height: var(--era-h-lg);
+}
+```
+
+## px-sm · px-md · px-lg
+
+**Use it for:** tier-to-tier nesting padding (sp/2) — the horizontal padding of a bar or row that holds tiered controls; the named form of px-(--era-px-*).
+
+Declared in `index.css`.
+
+```css
+@utility px-sm {
+	padding-inline: var(--era-px-sm);
+}
+@utility px-md {
+	padding-inline: var(--era-px-md);
+}
+@utility px-lg {
+	padding-inline: var(--era-px-lg);
+}
+```
+
+## gap-gutter · p-gutter · px-gutter · py-gutter
+
+**Use it for:** the inter-element gap (sp/2) — flex/grid gap between sibling controls, and the matching gutter padding a scrollable list or rail owes its rows on all four sides (p-gutter on the rail = gap-gutter between its rows).
+
+Declared in `index.css`.
+
+```css
+@utility gap-gutter {
+	gap: var(--era-gap);
+}
+@utility p-gutter {
+	padding: var(--era-gap);
+}
+@utility px-gutter {
+	padding-inline: var(--era-gap);
+}
+@utility py-gutter {
+	padding-block: var(--era-gap);
+}
+```
+
+## p-inset-xxs · p-inset-sm · p-inset-md · px-inset-xxs · px-inset-sm · px-inset-md · py-inset-xxs · py-inset-sm · py-inset-md
+
+**Use it for:** text-symmetric content padding — (tier − text)/2, the inset that vertically centers body text in its tier; px-inset-md is a text button's side padding, p-inset-md a code block's.
+
+Declared in `index.css`.
+
+```css
+@utility p-inset-xxs {
+	padding: var(--era-inset-xxs);
+}
+@utility p-inset-sm {
+	padding: var(--era-inset-sm);
+}
+@utility p-inset-md {
+	padding: var(--era-inset-md);
+}
+@utility px-inset-xxs {
+	padding-inline: var(--era-inset-xxs);
+}
+@utility px-inset-sm {
+	padding-inline: var(--era-inset-sm);
+}
+@utility px-inset-md {
+	padding-inline: var(--era-inset-md);
+}
+@utility py-inset-xxs {
+	padding-block: var(--era-inset-xxs);
+}
+@utility py-inset-sm {
+	padding-block: var(--era-inset-sm);
+}
+@utility py-inset-md {
+	padding-block: var(--era-inset-md);
+}
+```
+
+## px-pill-xxs · px-pill-sm
+
+**Use it for:** pill side padding — the wider-than-vertical horizontal breathing room badge/chip text wants (glyph-advance derived, ~2× the vertical inset).
+
+Declared in `index.css`.
+
+```css
+@utility px-pill-xxs {
+	padding-inline: var(--era-pill-xxs);
+}
+@utility px-pill-sm {
+	padding-inline: var(--era-pill-sm);
+}
+```
+
+## px-field
+
+**Use it for:** text-field side padding — where typed text starts in an md-tier input; the named form of px-(--era-field-px).
+
+Declared in `index.css`.
+
+```css
+@utility px-field {
+	padding-inline: var(--era-field-px);
+}
+```
+
+## p-panel · p-card · p-content
+
+**Use it for:** optical padding for unbounded containers — p-panel for compact shells and menu-adjacent chrome, p-card for cards/dialogs/popovers, p-content for full content panels. Grows super-linearly with density so whitespace holds its perceived share as controls loosen.
+
+Declared in `index.css`.
+
+```css
+@utility p-panel {
+	padding: var(--era-pad-sm);
+}
+@utility p-card {
+	padding: var(--era-pad-md);
+}
+@utility p-content {
+	padding: var(--era-content-p);
+}
+```
+
+## p-menu
+
+**Use it for:** menu-panel padding — the surface-owned inset (0 on flat, 2px on glass/bevel) that keeps row highlights inside a floating panel's frame; pairs with rounded-item on the rows.
+
+Declared in `index.css`.
+
+```css
+@utility p-menu {
+	padding: var(--era-panel-inset);
+}
+```
+
+## duration-base
+
+**Use it for:** the motion axis as an explicit transition-duration — for the rare case a utility (not the transition-* default) needs to name it; 0s at data-motion="instant", longer at "extra".
+
+Declared in `index.css`.
+
+```css
+@utility duration-base {
+	transition-duration: var(--era-duration);
+}
+```
+
 ## glass-blur
 
 **Use it for:** the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface="glass" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface.

package/dist/generated-docs/llms.txt

@@ -43,6 +43,17 @@ Classes, not components — they need no import beyond the stylesheet. Reach for
 - `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.
 - `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-shimmer` — the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text.
+- `h-xs · h-xxs · h-sm · h-md · h-lg` — the tier-height ladder — h-xs (icon) · h-xxs (nested pill) · h-sm (standalone pill) · h-md (control) · h-lg (bar); the named form of h-(--era-h-*).
+- `min-h-xs · min-h-xxs · min-h-sm · min-h-md · min-h-lg` — minimum tier height for containers that may grow — a bar that is at least lg-tier but can wrap (min-h-lg).
+- `size-xs · size-xxs · size-sm · size-md · size-lg` — a tier-sized square — size-xs is THE icon size (a Lucide glyph beside body text), size-md a square control face.
+- `px-sm · px-md · px-lg` — tier-to-tier nesting padding (sp/2) — the horizontal padding of a bar or row that holds tiered controls; the named form of px-(--era-px-*).
+- `gap-gutter · p-gutter · px-gutter · py-gutter` — the inter-element gap (sp/2) — flex/grid gap between sibling controls, and the matching gutter padding a scrollable list or rail owes its rows on all four sides (p-gutter on the rail = gap-gutter between its rows).
+- `p-inset-xxs · p-inset-sm · p-inset-md · px-inset-xxs · px-inset-sm · px-inset-md · py-inset-xxs · py-inset-sm · py-inset-md` — text-symmetric content padding — (tier − text)/2, the inset that vertically centers body text in its tier; px-inset-md is a text button's side padding, p-inset-md a code block's.
+- `px-pill-xxs · px-pill-sm` — pill side padding — the wider-than-vertical horizontal breathing room badge/chip text wants (glyph-advance derived, ~2× the vertical inset).
+- `px-field` — text-field side padding — where typed text starts in an md-tier input; the named form of px-(--era-field-px).
+- `p-panel · p-card · p-content` — optical padding for unbounded containers — p-panel for compact shells and menu-adjacent chrome, p-card for cards/dialogs/popovers, p-content for full content panels. Grows super-linearly with density so whitespace holds its perceived share as controls loosen.
+- `p-menu` — menu-panel padding — the surface-owned inset (0 on flat, 2px on glass/bevel) that keeps row highlights inside a floating panel's frame; pairs with rounded-item on the rows.
+- `duration-base` — the motion axis as an explicit transition-duration — for the rare case a utility (not the transition-* default) needs to name it; 0s at data-motion="instant", longer at "extra".
 - `glass-blur` — the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface="glass" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface.
 
 Full reference (what each emits, when to use it): `{{ORIGIN}}/utilities.md`. Machine-readable list: `{{ORIGIN}}/utilities.json`.

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": 2127,
+      "tokenEstimate": 4259,
       "sections": [
         "Overview",
         "era-interactive",
@@ -53,6 +53,17 @@
         "era-text-trim",
         "era-text-trim-caps",
         "era-shimmer",
+        "h-xs · h-xxs · h-sm · h-md · h-lg",
+        "min-h-xs · min-h-xxs · min-h-sm · min-h-md · min-h-lg",
+        "size-xs · size-xxs · size-sm · size-md · size-lg",
+        "px-sm · px-md · px-lg",
+        "gap-gutter · p-gutter · px-gutter · py-gutter",
+        "p-inset-xxs · p-inset-sm · p-inset-md · px-inset-xxs · px-inset-sm · px-inset-md · py-inset-xxs · py-inset-sm · py-inset-md",
+        "px-pill-xxs · px-pill-sm",
+        "px-field",
+        "p-panel · p-card · p-content",
+        "p-menu",
+        "duration-base",
         "glass-blur"
       ],
       "file": "utilities.md"
@@ -922,6 +933,9 @@
   "utilities": [
     {
       "name": "era-interactive",
+      "names": [
+        "era-interactive"
+      ],
       "file": "index.css",
       "useCase": "the focus/disabled recipe every era control carries — put it on a custom interactive element instead of hand-writing focus/disabled variants.",
       "description": "Shared interactive-state recipe: quiet focus, disabled affordance.\nEquivalent to `focus:outline-none disabled:cursor-not-allowed disabled:opacity-50`.",
@@ -929,6 +943,9 @@
     },
     {
       "name": "era-link",
+      "names": [
+        "era-link"
+      ],
       "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.",
@@ -936,6 +953,9 @@
     },
     {
       "name": "scrollbar-none",
+      "names": [
+        "scrollbar-none"
+      ],
       "file": "index.css",
       "useCase": "hide the scrollbar on an overflowing strip or rail while keeping it scrollable — for a scroll region that should show its bar, use ScrollArea.",
       "description": "Scrollable but chromeless — hides the scrollbar while keeping wheel / touch /\ndrag scrolling (e.g. an overflowing tab strip in a small pane handle).",
@@ -943,6 +963,9 @@
     },
     {
       "name": "era-text-trim",
+      "names": [
+        "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.",
       "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.",
@@ -950,6 +973,9 @@
     },
     {
       "name": "era-text-trim-caps",
+      "names": [
+        "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.",
       "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.",
@@ -957,13 +983,157 @@
     },
     {
       "name": "era-shimmer",
+      "names": [
+        "era-shimmer"
+      ],
       "file": "index.css",
       "useCase": "the in-progress text treatment — put it on a \"working…\" / \"thinking…\" label while a task streams, instead of a spinner beside the text.",
       "description": "In-progress text shimmer — a bright sweep through muted text (the standard\n\"working…\" label treatment in streaming UIs). Timing derives from the motion\naxis (10× --era-duration ≈ 1.5s at normal, 2.6s at extra); at instant the\nduration is 0s and the sweep freezes on its base frame — plain muted text —\nso reduced-motion and data-motion=\"instant\" both kill it for free.",
       "css": "@utility era-shimmer {\n\tbackground: linear-gradient(\n\t\t110deg,\n\t\tvar(--color-muted) 0% 43%,\n\t\tvar(--color-bright) 50%,\n\t\tvar(--color-muted) 57% 100%\n\t);\n\tbackground-size: 200% 100%;\n\tbackground-clip: text;\n\t-webkit-text-fill-color: transparent;\n\tanimation: era-shimmer calc(var(--era-duration) * 10) cubic-bezier(0.7, 0, 1, 0.4) infinite;\n}"
     },
+    {
+      "name": "h-xs",
+      "names": [
+        "h-xs",
+        "h-xxs",
+        "h-sm",
+        "h-md",
+        "h-lg"
+      ],
+      "file": "index.css",
+      "useCase": "the tier-height ladder — h-xs (icon) · h-xxs (nested pill) · h-sm (standalone pill) · h-md (control) · h-lg (bar); the named form of h-(--era-h-*).",
+      "description": "",
+      "css": "@utility h-xs {\n\theight: var(--era-h-xs);\n}\n@utility h-xxs {\n\theight: var(--era-h-xxs);\n}\n@utility h-sm {\n\theight: var(--era-h-sm);\n}\n@utility h-md {\n\theight: var(--era-h-md);\n}\n@utility h-lg {\n\theight: var(--era-h-lg);\n}"
+    },
+    {
+      "name": "min-h-xs",
+      "names": [
+        "min-h-xs",
+        "min-h-xxs",
+        "min-h-sm",
+        "min-h-md",
+        "min-h-lg"
+      ],
+      "file": "index.css",
+      "useCase": "minimum tier height for containers that may grow — a bar that is at least lg-tier but can wrap (min-h-lg).",
+      "description": "",
+      "css": "@utility min-h-xs {\n\tmin-height: var(--era-h-xs);\n}\n@utility min-h-xxs {\n\tmin-height: var(--era-h-xxs);\n}\n@utility min-h-sm {\n\tmin-height: var(--era-h-sm);\n}\n@utility min-h-md {\n\tmin-height: var(--era-h-md);\n}\n@utility min-h-lg {\n\tmin-height: var(--era-h-lg);\n}"
+    },
+    {
+      "name": "size-xs",
+      "names": [
+        "size-xs",
+        "size-xxs",
+        "size-sm",
+        "size-md",
+        "size-lg"
+      ],
+      "file": "index.css",
+      "useCase": "a tier-sized square — size-xs is THE icon size (a Lucide glyph beside body text), size-md a square control face.",
+      "description": "",
+      "css": "@utility size-xs {\n\twidth: var(--era-h-xs);\n\theight: var(--era-h-xs);\n}\n@utility size-xxs {\n\twidth: var(--era-h-xxs);\n\theight: var(--era-h-xxs);\n}\n@utility size-sm {\n\twidth: var(--era-h-sm);\n\theight: var(--era-h-sm);\n}\n@utility size-md {\n\twidth: var(--era-h-md);\n\theight: var(--era-h-md);\n}\n@utility size-lg {\n\twidth: var(--era-h-lg);\n\theight: var(--era-h-lg);\n}"
+    },
+    {
+      "name": "px-sm",
+      "names": [
+        "px-sm",
+        "px-md",
+        "px-lg"
+      ],
+      "file": "index.css",
+      "useCase": "tier-to-tier nesting padding (sp/2) — the horizontal padding of a bar or row that holds tiered controls; the named form of px-(--era-px-*).",
+      "description": "",
+      "css": "@utility px-sm {\n\tpadding-inline: var(--era-px-sm);\n}\n@utility px-md {\n\tpadding-inline: var(--era-px-md);\n}\n@utility px-lg {\n\tpadding-inline: var(--era-px-lg);\n}"
+    },
+    {
+      "name": "gap-gutter",
+      "names": [
+        "gap-gutter",
+        "p-gutter",
+        "px-gutter",
+        "py-gutter"
+      ],
+      "file": "index.css",
+      "useCase": "the inter-element gap (sp/2) — flex/grid gap between sibling controls, and the matching gutter padding a scrollable list or rail owes its rows on all four sides (p-gutter on the rail = gap-gutter between its rows).",
+      "description": "",
+      "css": "@utility gap-gutter {\n\tgap: var(--era-gap);\n}\n@utility p-gutter {\n\tpadding: var(--era-gap);\n}\n@utility px-gutter {\n\tpadding-inline: var(--era-gap);\n}\n@utility py-gutter {\n\tpadding-block: var(--era-gap);\n}"
+    },
+    {
+      "name": "p-inset-xxs",
+      "names": [
+        "p-inset-xxs",
+        "p-inset-sm",
+        "p-inset-md",
+        "px-inset-xxs",
+        "px-inset-sm",
+        "px-inset-md",
+        "py-inset-xxs",
+        "py-inset-sm",
+        "py-inset-md"
+      ],
+      "file": "index.css",
+      "useCase": "text-symmetric content padding — (tier − text)/2, the inset that vertically centers body text in its tier; px-inset-md is a text button's side padding, p-inset-md a code block's.",
+      "description": "",
+      "css": "@utility p-inset-xxs {\n\tpadding: var(--era-inset-xxs);\n}\n@utility p-inset-sm {\n\tpadding: var(--era-inset-sm);\n}\n@utility p-inset-md {\n\tpadding: var(--era-inset-md);\n}\n@utility px-inset-xxs {\n\tpadding-inline: var(--era-inset-xxs);\n}\n@utility px-inset-sm {\n\tpadding-inline: var(--era-inset-sm);\n}\n@utility px-inset-md {\n\tpadding-inline: var(--era-inset-md);\n}\n@utility py-inset-xxs {\n\tpadding-block: var(--era-inset-xxs);\n}\n@utility py-inset-sm {\n\tpadding-block: var(--era-inset-sm);\n}\n@utility py-inset-md {\n\tpadding-block: var(--era-inset-md);\n}"
+    },
+    {
+      "name": "px-pill-xxs",
+      "names": [
+        "px-pill-xxs",
+        "px-pill-sm"
+      ],
+      "file": "index.css",
+      "useCase": "pill side padding — the wider-than-vertical horizontal breathing room badge/chip text wants (glyph-advance derived, ~2× the vertical inset).",
+      "description": "",
+      "css": "@utility px-pill-xxs {\n\tpadding-inline: var(--era-pill-xxs);\n}\n@utility px-pill-sm {\n\tpadding-inline: var(--era-pill-sm);\n}"
+    },
+    {
+      "name": "px-field",
+      "names": [
+        "px-field"
+      ],
+      "file": "index.css",
+      "useCase": "text-field side padding — where typed text starts in an md-tier input; the named form of px-(--era-field-px).",
+      "description": "",
+      "css": "@utility px-field {\n\tpadding-inline: var(--era-field-px);\n}"
+    },
+    {
+      "name": "p-panel",
+      "names": [
+        "p-panel",
+        "p-card",
+        "p-content"
+      ],
+      "file": "index.css",
+      "useCase": "optical padding for unbounded containers — p-panel for compact shells and menu-adjacent chrome, p-card for cards/dialogs/popovers, p-content for full content panels. Grows super-linearly with density so whitespace holds its perceived share as controls loosen.",
+      "description": "",
+      "css": "@utility p-panel {\n\tpadding: var(--era-pad-sm);\n}\n@utility p-card {\n\tpadding: var(--era-pad-md);\n}\n@utility p-content {\n\tpadding: var(--era-content-p);\n}"
+    },
+    {
+      "name": "p-menu",
+      "names": [
+        "p-menu"
+      ],
+      "file": "index.css",
+      "useCase": "menu-panel padding — the surface-owned inset (0 on flat, 2px on glass/bevel) that keeps row highlights inside a floating panel's frame; pairs with rounded-item on the rows.",
+      "description": "",
+      "css": "@utility p-menu {\n\tpadding: var(--era-panel-inset);\n}"
+    },
+    {
+      "name": "duration-base",
+      "names": [
+        "duration-base"
+      ],
+      "file": "index.css",
+      "useCase": "the motion axis as an explicit transition-duration — for the rare case a utility (not the transition-* default) needs to name it; 0s at data-motion=\"instant\", longer at \"extra\".",
+      "description": "",
+      "css": "@utility duration-base {\n\ttransition-duration: var(--era-duration);\n}"
+    },
     {
       "name": "glass-blur",
+      "names": [
+        "glass-blur"
+      ],
       "file": "surfaces/glass.css",
       "useCase": "the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface=\"glass\" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface.",
       "description": "Tailwind v4 cannot resolve var() inside backdrop-blur-[], so the filter\nis a registered utility, gated to glass subtrees.",