@signal9/era-ui 32.0.0 → 33.0.0

package/dist/generated-docs/utilities.json

@@ -1,11 +1,73 @@
 {
   "utilities": [
+    {
+      "name": "tier-icon",
+      "names": [
+        "tier-icon",
+        "tier-pill",
+        "tier-chip",
+        "tier-control",
+        "tier-bar"
+      ],
+      "file": "utilities/geometry.css",
+      "description": "BOUNDED GEOMETRY — height and radius are one decision.\n\nA tier is a geometric type, not two classes a caller must remember to keep in\nsync. `tier-control` establishes h-control AND rd-control; the radius ladder\nthen guarantees rd_outer − rd_inner = (h_outer − h_inner)/2 for every pair.\nWidth remains the component's decision: a row stretches, a button adds\nmin-w-control, and a square control adds w-control.",
+      "css": "@utility tier-icon {\n\theight: var(--era-h-icon);\n\tborder-radius: var(--era-rd-icon);\n}\n\n@utility tier-pill {\n\theight: var(--era-h-pill);\n\tborder-radius: var(--era-rd-pill);\n}\n\n@utility tier-chip {\n\theight: var(--era-h-chip);\n\tborder-radius: var(--era-rd-chip);\n}\n\n@utility tier-control {\n\theight: var(--era-h-control);\n\tborder-radius: var(--era-rd-control);\n}\n\n@utility tier-bar {\n\theight: var(--era-h-bar);\n\tborder-radius: var(--era-rd-bar);\n}"
+    },
+    {
+      "name": "h-line",
+      "names": [
+        "h-line"
+      ],
+      "file": "utilities/geometry.css",
+      "useCase": "the height of one line of the element's own text — a skeleton standing in for a line, a spacer that must match a line box.",
+      "description": "One LINE BOX tall — the height of the text this stands in for.\n\nSkeleton's `line` used h-(--era-text), which is the body FONT SIZE: never the\nheight of a rendered line (that is font-size x leading), and wrong again by\nthe ladder's ratio for any rung other than body. `1lh` resolves against the\nelement's OWN computed line-height, so putting a text-* class on the skeleton\nmakes it match that tier exactly, at every density, and it follows a leading\nchange for free.",
+      "css": "@utility h-line {\n\theight: 1lh;\n}"
+    },
+    {
+      "name": "era-track-well",
+      "names": [
+        "era-track-well"
+      ],
+      "file": "utilities/geometry.css",
+      "useCase": "instead of `shadow-well` on a track whose value is painted by a child that covers the box — a progress/meter/slider track, a custom gauge. For a well holding ordinary content, `shadow-well` is still right.",
+      "description": "A WELL THAT SURVIVES BEING FILLED.\n\n`shadow-well` is an INSET shadow, and an inset shadow belongs to the\nelement's background layer — it paints under the element's own descendants.\nThat is invisible on a well holding text (a checkbox, a code block: the\nchrome runs around the content) and wrong the moment something paints the\nwhole box. Meter, Progress and the Slider track all do exactly that: an\nopaque child, `translateX`-ed to the value. So the well survived only where\nthe track was EMPTY — a half-full meter on bevel had a chisel to the right\nof the value and none to the left, which reads as a hole with a sticker\nover it rather than a level inside a well.\n\nThe fix is painting order, not geometry: the same `--era-shadow-well` on a\npseudo-element that is the element's LAST child, so it lands above the fill.\nThe fill still spans the full box — nothing is inset, no radius is\nre-derived, and 0% and 100% keep their exact ends. The `position: relative`\nis load-bearing (the overlay resolves against this box) and `inherit` on the\nradius keeps it honest under `data-corners=\"square\"`.\n\nSurface-agnostic on purpose. It reads the same token every well reads, so\nglass's hairline rim is restored by the same line that restores bevel's\nchisel, and flat — where the token is `none` — renders exactly as before.\nReported against bevel by a consumer; it was never a bevel bug.",
+      "css": "@utility era-track-well {\n\tposition: relative;\n\t&::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder-radius: inherit;\n\t\tbox-shadow: var(--era-shadow-well);\n\t\tpointer-events: none;\n\t}\n}"
+    },
+    {
+      "name": "era-skeleton-pulse",
+      "names": [
+        "era-skeleton-pulse"
+      ],
+      "file": "utilities/geometry.css",
+      "description": "Skeleton's pulse, on the MOTION AXIS.\n\nIt used to be a literal `2s ease-in-out` on the component, so it neither died\nat data-motion=\"instant\" nor honoured prefers-reduced-motion — on the one\ncomponent most likely to be on screen in bulk, and animating. That is an\naccessibility defect rather than a preference: a page of pulsing blocks is\nexactly what someone with a vestibular disorder turns motion off to avoid.\n\nSame derivation as era-shimmer: 10x the axis duration, so it is a slow pulse\nat normal, slower at extra, and at instant the duration resolves to 0s and it\nfreezes on its base frame — full opacity, a plain filled block.",
+      "css": "@utility era-skeleton-pulse {\n\tanimation: era-skeleton-pulse calc(var(--era-duration) * 10) var(--era-ease) infinite;\n}"
+    },
+    {
+      "name": "era-shimmer",
+      "names": [
+        "era-shimmer"
+      ],
+      "file": "utilities/geometry.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": "era-collapse",
+      "names": [
+        "era-collapse"
+      ],
+      "file": "utilities/geometry.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. 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}"
+    },
     {
       "name": "era-interactive",
       "names": [
         "era-interactive"
       ],
-      "file": "index.css",
+      "file": "utilities/interaction.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`.",
       "css": "@utility era-interactive {\n\t&:focus {\n\t\toutline: none;\n\t}\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}"
@@ -15,7 +77,7 @@
       "names": [
         "era-link"
       ],
-      "file": "index.css",
+      "file": "utilities/interaction.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 * 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}"
@@ -25,7 +87,7 @@
       "names": [
         "scrollbar-none"
       ],
-      "file": "index.css",
+      "file": "utilities/interaction.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).",
       "css": "@utility scrollbar-none {\n\tscrollbar-width: none;\n\t&::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n}"
@@ -35,7 +97,7 @@
       "names": [
         "era-text-trim"
       ],
-      "file": "index.css",
+      "file": "utilities/interaction.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: 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}"
@@ -45,7 +107,7 @@
       "names": [
         "truncate"
       ],
-      "file": "index.css",
+      "file": "utilities/interaction.css",
       "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}"
@@ -55,7 +117,7 @@
       "names": [
         "era-text-trim-caps"
       ],
-      "file": "index.css",
+      "file": "utilities/interaction.css",
       "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}"
@@ -65,7 +127,7 @@
       "names": [
         "era-ink-center"
       ],
-      "file": "index.css",
+      "file": "utilities/interaction.css",
       "useCase": "on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim.",
       "description": "The EDITABLE counterpart of era-text-trim — for native <input>s, which the\ntrim is forbidden on (it collapses the UA's inner editor box and slices the\nglyphs; see typography/collapsed-text-trim).\n\nWithout help, a tier-height input centres its text by FONT BOX, and the ui\nstacks' font box is deeply asymmetric: ascent ≈1.07em against descent\n≈0.29em. Centring that box parks the visible band (caps, x-height) ~0.115em\nLOW — so a field's text sat visibly below the trimmed label beside it.\n\nThe value is OPTICAL, not the derivation's: pure x-band centring computes\nto ~0.23em of padding, but pixel-measured against real Title-Case text it\nover-lifts — the eye weighs the cap-to-baseline mass, which x-band\ncentring parks ~2px high (caps 2.75px off the top against 5.7px of air\nunder the baseline, measured at dense; the general form of that offset,\nand why era-label-ink's note about \"System\" is not a contradiction of it,\nis derived at era-label-ink below). 0.08em splits the difference\nbetween the x-band ideal and the cap-band ideal, landing caps ~3.7px in an\n18px field with ~4.7px under the baseline — the reading where neither\nband's partisans win and neither complains.\n\nThe lift is padding, not a translateY: an icon-less Input paints the field\nchrome itself, and a transform would drag the field along with the ink.\npadding-bottom shrinks the content box from below, and a single-line input\nre-centres its line box in what remains — the ink rises by exactly half the\npadding, the chrome doesn't move, and the caret and selection follow the\ntext. In em on purpose: the correction is a fraction of the type, so it\nholds across every density and text size with one value.\n\nWHEN SOMEONE REPORTS A CORRECTLY-CENTRED FIELD AS \"TOO HIGH\", check the\nSTRING before the geometry. A placeholder like \"Filter…\" has no descender and\nno cap, so its ink occupies only the x-height band — and a box that centres\nthat band exactly still reads high, because the eye centres on the mass it\ncan see and expects the space a descender would have filled. Measured at the\npill tier on the shipped mono stack, \"Filter…\" sits within half a pixel of\ncentre while looking a little high; the pill suite documents the same effect\nfrom the other side (see OFF_BAND_LOW in ink-centering.spec.ts, where \"soon\"\ncannot be symmetric and is bounded by sign instead of magnitude).\n\nThat is not a licence to ignore the report — era-ink-center IS wrong by\n1.5–2px on the sans and serif stacks (pinned in FIELD_KNOWN_SKEW) — only a\nreason to measure the ink before touching the constant.",
       "css": "@utility era-ink-center {\n\tpadding-bottom: 0.08em;\n}"
@@ -75,7 +137,7 @@
       "names": [
         "era-token-ink"
       ],
-      "file": "index.css",
+      "file": "utilities/interaction.css",
       "useCase": "the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box, CENTRED horizontally and with no icon sibling. For a left-aligned sentence-case label use era-label-ink; when an icon really must sit beside the text, see the note there.",
       "description": "TOKEN INK — the ink centring for a pill whose content is a TOKEN: an id, a\ncount, a status, a tag. Font-independent, unlike everything it replaces.\n\nTHE BUG IT FIXES, which had been shipping library-wide and invisibly:\n`text-box-trim` DOES NOTHING ON A FLEX CONTAINER. Era's controls are all\nflex, and a flex container's bare text becomes an ANONYMOUS flex item — a box\nno selector can reach and no non-inherited property can touch. So\n`era-text-trim` on a Badge, a Chip, a Button or a Bar contributed exactly one\nthing: `line-height: 1`. The ink was then centred by `align-items: center`\non the LINE BOX, which is precisely the font-metric-dependent centring the\ntrim exists to eliminate. Measured on the shipped mono stack: a badge reading\n\"AC-2.1\" sat 2px high in an 18px pill, and no amount of tuning the trim's\nBAND changed it, because the trim was never running.\n\nThe mechanism here restores it: a BLOCK box (where text-box-trim does apply)\nwhose trimmed line box is then centred by `align-content` — block-container\nalignment, so no flex formatting context and no anonymous item. The browser\ncomputes the band from the font's own metrics, which is what makes it hold\nacross ui-monospace, system-ui and ui-serif instead of needing a constant\nper stack.\n\nCAP band, not the x-height band the general trim uses, because the content\nclass is different: a token is caps and digits (both cap-height), and\ncentring the x-band parks them high by (cap − x)/2. Measured on the shipped\nstacks, cap-band centring takes an id/count/status from −2.0px to 0.0.\nProse and sentence-case labels keep era-text-trim; this is for tokens.",
       "css": "@utility era-token-ink {\n\tdisplay: block;\n\talign-content: center;\n\ttext-align: center;\n\tline-height: 1;\n\ttext-box: trim-both cap alphabetic;\n}"
@@ -85,7 +147,7 @@
       "names": [
         "era-label-ink"
       ],
-      "file": "index.css",
+      "file": "utilities/interaction.css",
       "useCase": "the ink centring for a fixed-height control holding ONE line of sentence-case text and no icon — a menu item, a nav trigger, a button label. Never alongside `truncate` (the trimmed box becomes the clip).",
       "description": "LABEL INK — era-token-ink's mixed-case sibling, and the general answer to\n\"this fixed-height control holds one line of text\".\n\nSame mechanism, same reason: `text-box-trim` needs a BLOCK box, so the row\nbecomes one and `align-content` (block-container alignment) does the\ncentring. What differs is the band and the alignment, because the content\nclass differs — a label is sentence case, so the x-height band is the visual\nmass to centre (cap-band reads low on \"System\"), and it is laid out against\nthe row's padding rather than centred in it.\n\nTHAT PARENTHESIS AND era-ink-center's \"x-band centring parks ~2px high\" READ\nAS A CONTRADICTION AND ARE NOT. Both are true, of their own example string,\nand each was generalised one step too far. Under an ex band the ink offset is\n\n    (xh − ascent + descent) / 2\n\nwhich predicts a controlled A/B — one real button, one class set, only the\nSTRING changing — within 0.3px:\n\n    Save  asc 9 desc 0   1.28px high     SAVE  asc 9 desc 0   1.28px high\n    Savg  asc 9 desc 3   0.22px low      savg  asc 7 desc 3   1.22px low\n\n\"System\" has a descender and reads low under the cap band; \"Save\" has none\nand reads high under the ex band. Case is not the variable — \"Save\" and\n\"SAVE\" are identical to the hundredth of a pixel. No fixed band centres both\na descender-less and a descender-bearing label, because they differ by ~1.5px\nin the same box.\n\nWHICH IS WHY THE BAND IS FIXED ANYWAY, and this is the part that decides it.\nA band gives every label the SAME baseline whatever it spells — measured\nspread across Save/Savg/save/savg/SAVE/PDF/Cancel/\"Copy page\" is 0.00px —\nwhile ink-extent centring would move each label independently and leave a bar\nof buttons visibly ragged. A uniform offset the eye cannot see beats a local\nmisalignment it can. So the offset is accepted, not corrected, and the only\nescape is per-label and opt-in (Button's `caps`), which buys optical centring\nfor a lone label at the cost of ~1.06px against its neighbours.\n\nAND THE GUARANTEE SPANS BOTH INK PATHS. This utility and era-text-trim are\ntwo mechanisms — block+align-content here, a blockified flex item there — and\nevery measurement above was taken on the trim path. Measured since: the\ntext-only path holds the same 0.00px spread AND lands on the same baseline,\n15.22px from the button top at control tier. So an icon button and a text\nbutton put their labels on one line, and `not-has-[svg]` costs nothing but\nwhich element carries the trim.\n\nMeasured by signalnine.org and reproduced here; see label-band.spec.ts, which\npins the 0.00px spread, the cost of breaking it, and the agreement between\nthe two paths.\n\nWHY IT EXISTS AT ALL: era's controls are flex, and a flex container's bare\ntext is an ANONYMOUS flex item — a box no selector reaches and no\nnon-inherited property touches. So `era-text-trim` on a flex row is inert,\ncontributing only its `line-height: 1`, and the ink falls back to line-box\ncentring by font metrics. era-token-ink already fixed that for centred\ntokens; this fixes it for everything else.\n\nTHE ICON CASE IS NOT SOLVED, and cannot be from CSS: an icon beside the text\nneeds the box to stay flex, which re-creates the anonymous item. A component\nwhose children are an opaque slot therefore guards it —\n`not-has-[svg]:era-label-ink` — and ink-centres the text-only case while\nleaving the icon case on line-box centring. Splitting icon and label into\nseparate slots is what would close it; typography/inert-trim reports every\nsite still on the fallback.",
       "css": "@utility era-label-ink {\n\tdisplay: block;\n\talign-content: center;\n\tline-height: 1;\n\ttext-box: trim-both ex alphabetic;\n}"
@@ -95,7 +157,7 @@
       "names": [
         "surface-backdrop"
       ],
-      "file": "index.css",
+      "file": "utilities/materials.css",
       "useCase": "the surface-aware backdrop treatment without choosing a fill or relief. Prefer material-popover/material-panel when the element is a complete surface.",
       "description": "",
       "css": "@utility surface-backdrop {\n\tbackdrop-filter: var(--era-backdrop-filter);\n\t-webkit-backdrop-filter: var(--era-backdrop-filter);\n}"
@@ -105,7 +167,7 @@
       "names": [
         "material-popover"
       ],
-      "file": "index.css",
+      "file": "utilities/materials.css",
       "useCase": "a floating transient surface: menus, popovers, tooltips, pickers, toasts. Binds its raised fill, floating relief, and backdrop treatment atomically.",
       "description": "",
       "css": "@utility material-popover {\n\tbackground-color: var(--era-surface-bg-elevated);\n\tbox-shadow: var(--era-shadow-lg);\n\tbackdrop-filter: var(--era-backdrop-filter);\n\t-webkit-backdrop-filter: var(--era-backdrop-filter);\n}"
@@ -115,7 +177,7 @@
       "names": [
         "material-panel"
       ],
-      "file": "index.css",
+      "file": "utilities/materials.css",
       "useCase": "a floating persistent surface: dialogs, sheets, panes, inspectors. Binds its resting fill, floating relief, and backdrop treatment atomically.",
       "description": "",
       "css": "@utility material-panel {\n\tbackground-color: var(--era-surface-bg);\n\tbox-shadow: var(--era-shadow-lg);\n\tbackdrop-filter: var(--era-backdrop-filter);\n\t-webkit-backdrop-filter: var(--era-backdrop-filter);\n}"
@@ -125,73 +187,11 @@
       "names": [
         "pressable"
       ],
-      "file": "index.css",
-      "useCase": "the physical press contract on a control whose direct content plane is marked data-era-press-content. The surface owns relief/travel; the component may scale travel with --era-press-scale.",
+      "file": "utilities/materials.css",
+      "useCase": "the physical press contract on a control whose direct content plane is marked data-era-press-content. The surface owns relief/travel; compact components select the compact travel primitives as their effective values.",
       "description": "",
       "css": "@utility pressable {\n\t&:active {\n\t\tbox-shadow: var(--era-shadow-pressed);\n\t}\n\n\t&:active > [data-era-press-content] {\n\t\ttranslate: var(--era-press-effective-x, var(--era-press-sink-x))\n\t\t\tvar(--era-press-effective-y, var(--era-press-sink-y));\n\t}\n}"
     },
-    {
-      "name": "tier-icon",
-      "names": [
-        "tier-icon",
-        "tier-pill",
-        "tier-chip",
-        "tier-control",
-        "tier-bar"
-      ],
-      "file": "index.css",
-      "description": "BOUNDED GEOMETRY — height and radius are one decision.\n\nA tier is a geometric type, not two classes a caller must remember to keep in\nsync. `tier-control` establishes h-control AND rd-control; the radius ladder\nthen guarantees rd_outer − rd_inner = (h_outer − h_inner)/2 for every pair.\nWidth remains the component's decision: a row stretches, a button adds\nmin-w-control, and a square control adds w-control.",
-      "css": "@utility tier-icon {\n\theight: var(--era-h-icon);\n\tborder-radius: var(--era-rd-icon);\n}\n\n@utility tier-pill {\n\theight: var(--era-h-pill);\n\tborder-radius: var(--era-rd-pill);\n}\n\n@utility tier-chip {\n\theight: var(--era-h-chip);\n\tborder-radius: var(--era-rd-chip);\n}\n\n@utility tier-control {\n\theight: var(--era-h-control);\n\tborder-radius: var(--era-rd-control);\n}\n\n@utility tier-bar {\n\theight: var(--era-h-bar);\n\tborder-radius: var(--era-rd-bar);\n}"
-    },
-    {
-      "name": "h-line",
-      "names": [
-        "h-line"
-      ],
-      "file": "index.css",
-      "useCase": "the height of one line of the element's own text — a skeleton standing in for a line, a spacer that must match a line box.",
-      "description": "One LINE BOX tall — the height of the text this stands in for.\n\nSkeleton's `line` used h-(--era-text), which is the body FONT SIZE: never the\nheight of a rendered line (that is font-size x leading), and wrong again by\nthe ladder's ratio for any rung other than body. `1lh` resolves against the\nelement's OWN computed line-height, so putting a text-* class on the skeleton\nmakes it match that tier exactly, at every density, and it follows a leading\nchange for free.",
-      "css": "@utility h-line {\n\theight: 1lh;\n}"
-    },
-    {
-      "name": "era-track-well",
-      "names": [
-        "era-track-well"
-      ],
-      "file": "index.css",
-      "useCase": "instead of `shadow-well` on a track whose value is painted by a child that covers the box — a progress/meter/slider track, a custom gauge. For a well holding ordinary content, `shadow-well` is still right.",
-      "description": "A WELL THAT SURVIVES BEING FILLED.\n\n`shadow-well` is an INSET shadow, and an inset shadow belongs to the\nelement's background layer — it paints under the element's own descendants.\nThat is invisible on a well holding text (a checkbox, a code block: the\nchrome runs around the content) and wrong the moment something paints the\nwhole box. Meter, Progress and the Slider track all do exactly that: an\nopaque child, `translateX`-ed to the value. So the well survived only where\nthe track was EMPTY — a half-full meter on bevel had a chisel to the right\nof the value and none to the left, which reads as a hole with a sticker\nover it rather than a level inside a well.\n\nThe fix is painting order, not geometry: the same `--era-shadow-well` on a\npseudo-element that is the element's LAST child, so it lands above the fill.\nThe fill still spans the full box — nothing is inset, no radius is\nre-derived, and 0% and 100% keep their exact ends. The `position: relative`\nis load-bearing (the overlay resolves against this box) and `inherit` on the\nradius keeps it honest under `data-corners=\"square\"`.\n\nSurface-agnostic on purpose. It reads the same token every well reads, so\nglass's hairline rim is restored by the same line that restores bevel's\nchisel, and flat — where the token is `none` — renders exactly as before.\nReported against bevel by a consumer; it was never a bevel bug.",
-      "css": "@utility era-track-well {\n\tposition: relative;\n\t&::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder-radius: inherit;\n\t\tbox-shadow: var(--era-shadow-well);\n\t\tpointer-events: none;\n\t}\n}"
-    },
-    {
-      "name": "era-skeleton-pulse",
-      "names": [
-        "era-skeleton-pulse"
-      ],
-      "file": "index.css",
-      "description": "Skeleton's pulse, on the MOTION AXIS.\n\nIt used to be a literal `2s ease-in-out` on the component, so it neither died\nat data-motion=\"instant\" nor honoured prefers-reduced-motion — on the one\ncomponent most likely to be on screen in bulk, and animating. That is an\naccessibility defect rather than a preference: a page of pulsing blocks is\nexactly what someone with a vestibular disorder turns motion off to avoid.\n\nSame derivation as era-shimmer: 10x the axis duration, so it is a slow pulse\nat normal, slower at extra, and at instant the duration resolves to 0s and it\nfreezes on its base frame — full opacity, a plain filled block.",
-      "css": "@utility era-skeleton-pulse {\n\tanimation: era-skeleton-pulse calc(var(--era-duration) * 10) var(--era-ease) infinite;\n}"
-    },
-    {
-      "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": "era-collapse",
-      "names": [
-        "era-collapse"
-      ],
-      "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. 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}"
-    },
     {
       "name": "h-icon",
       "names": [
@@ -201,7 +201,7 @@
         "h-control",
         "h-bar"
       ],
-      "file": "index.css",
+      "file": "utilities/public.css",
       "useCase": "the tier-height ladder — h-icon (icon) · h-pill (nested pill) · h-chip (standalone pill) · h-control (control) · h-bar (bar); the named form of h-(--era-h-*).",
       "description": "",
       "css": "@utility h-icon {\n\theight: var(--era-h-icon);\n}\n@utility h-pill {\n\theight: var(--era-h-pill);\n}\n@utility h-chip {\n\theight: var(--era-h-chip);\n}\n@utility h-control {\n\theight: var(--era-h-control);\n}\n@utility h-bar {\n\theight: var(--era-h-bar);\n}"
@@ -215,7 +215,7 @@
         "min-h-control",
         "min-h-bar"
       ],
-      "file": "index.css",
+      "file": "utilities/public.css",
       "useCase": "minimum tier height for containers that may grow — a bar that is at least lg-tier but can wrap (min-h-bar).",
       "description": "",
       "css": "@utility min-h-icon {\n\tmin-height: var(--era-h-icon);\n}\n@utility min-h-pill {\n\tmin-height: var(--era-h-pill);\n}\n@utility min-h-chip {\n\tmin-height: var(--era-h-chip);\n}\n@utility min-h-control {\n\tmin-height: var(--era-h-control);\n}\n@utility min-h-bar {\n\tmin-height: var(--era-h-bar);\n}"
@@ -229,7 +229,7 @@
         "w-control",
         "w-bar"
       ],
-      "file": "index.css",
+      "file": "utilities/public.css",
       "useCase": "a tier-sized WIDTH — the horizontal twin of the h-* ladder, for a rail or a column measured in tiers rather than in content.",
       "description": "",
       "css": "@utility w-icon {\n\twidth: var(--era-h-icon);\n}\n@utility w-pill {\n\twidth: var(--era-h-pill);\n}\n@utility w-chip {\n\twidth: var(--era-h-chip);\n}\n@utility w-control {\n\twidth: var(--era-h-control);\n}\n@utility w-bar {\n\twidth: var(--era-h-bar);\n}"
@@ -243,7 +243,7 @@
         "min-w-control",
         "min-w-bar"
       ],
-      "file": "index.css",
+      "file": "utilities/public.css",
       "useCase": "a minimum tier WIDTH — the floor that makes a single-glyph control render as a square rather than a skinny pill (min-w-control on an icon button, min-w-pill on a badge). These could not exist before the ladder was renamed: the old rungs were sm/md/lg, and Tailwind's container scale already owns min-w-md and min-w-lg, so the names collided and every call site had to write min-w-(--era-h-control) by hand. icon/pill/chip/control/bar collide with nothing.",
       "description": "",
       "css": "@utility min-w-icon {\n\tmin-width: var(--era-h-icon);\n}\n@utility min-w-pill {\n\tmin-width: var(--era-h-pill);\n}\n@utility min-w-chip {\n\tmin-width: var(--era-h-chip);\n}\n@utility min-w-control {\n\tmin-width: var(--era-h-control);\n}\n@utility min-w-bar {\n\tmin-width: var(--era-h-bar);\n}"
@@ -257,7 +257,7 @@
         "size-control",
         "size-bar"
       ],
-      "file": "index.css",
+      "file": "utilities/public.css",
       "useCase": "a tier-sized square — size-icon is THE icon size (a Lucide glyph beside body text), size-control a square control face.",
       "description": "",
       "css": "@utility size-icon {\n\twidth: var(--era-h-icon);\n\theight: var(--era-h-icon);\n}\n@utility size-pill {\n\twidth: var(--era-h-pill);\n\theight: var(--era-h-pill);\n}\n@utility size-chip {\n\twidth: var(--era-h-chip);\n\theight: var(--era-h-chip);\n}\n@utility size-control {\n\twidth: var(--era-h-control);\n\theight: var(--era-h-control);\n}\n@utility size-bar {\n\twidth: var(--era-h-bar);\n\theight: var(--era-h-bar);\n}"
@@ -272,7 +272,7 @@
         "pl-chip",
         "pr-chip"
       ],
-      "file": "index.css",
+      "file": "utilities/public.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 {\n\tpadding-inline: var(--era-pill-px);\n}\n@utility px-chip {\n\tpadding-inline: var(--era-chip-px);\n}\n@utility pl-pill {\n\tpadding-left: var(--era-pill-px);\n}\n@utility pr-pill {\n\tpadding-right: var(--era-pill-px);\n}\n@utility pl-chip {\n\tpadding-left: var(--era-chip-px);\n}\n@utility pr-chip {\n\tpadding-right: var(--era-chip-px);\n}"
@@ -282,7 +282,7 @@
       "names": [
         "p-section"
       ],
-      "file": "index.css",
+      "file": "utilities/public.css",
       "useCase": "padding for a content panel that sits UNDER a section header row — the even-padding exception, and the reason it is not called p-section: it deliberately under-pays the block start. For an evenly padded content panel use p-section, which is the plain token.",
       "description": "A content panel always follows a section header ROW, and that row already\ncontributes its own slack: the heading's text sits in an h-bar bar, so there\nis (h-bar − text)/2 of empty bar under its glyphs before the panel even\nstarts. Padding the panel evenly on top of that spends the space twice — the\nheader ends up floating between the section above and the paragraph it\nintroduces rather than binding to it.\n\nSo the block-start pays only the REMAINDER. The target is the indent: the\nspace under a heading should measure the same as the space beside the text,\nwhich is --era-pad-content. The header row already supplies (h-bar − text)/2 of\nit, so the panel adds what's left, and heading-to-paragraph reads equal to\nthe paragraph's own inset. Subtracting one --era-gap (the previous rule) left\nthe header's slack unaccounted for and the heading still detached.\n\nBoth terms are density-derived, so the equality holds at every mode; the\nmax() is the floor for a hypothetical mode where the row's slack would\nexceed the inset outright.",
       "css": "@utility p-section {\n\tpadding: var(--era-pad-content);\n\tpadding-top: max(0px, calc(var(--era-pad-content) - (var(--era-h-bar) - var(--era-text)) / 2));\n}"
@@ -292,7 +292,7 @@
       "names": [
         "duration-base"
       ],
-      "file": "index.css",
+      "file": "utilities/public.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}"
@@ -306,7 +306,7 @@
         "text-title",
         "text-display"
       ],
-      "file": "index.css",
+      "file": "utilities/public.css",
       "useCase": "the type ladder — micro (eyebrow/legend) < body (controls) < lede (the paragraph under a title) < heading < title < display. Derived from --era-text, so the ratio between any two rungs holds at every density; leading and tracking ride with the size, so a rung is one class.",
       "description": "THE TYPE LADDER — the one axis that was not on the density system.\n\nera had exactly one size, `text-body`, so a heading had nowhere to go and\nconsumers reached for Tailwind's fixed `text-2xl` or a bare <h1>. Both are\nrem-fixed while `--era-text` re-tiers, so heading prominence DEGRADED as\ndensity increased: measured in a consumer app, an <h1> against body text\nwas 1.33x at dense and 1.14x at touch. The page title gets quieter the\ntighter you set the page, which is backwards, and it is the only place in\nera where a size relationship does not hold across the axis.\n\nNamed by ROLE, like the tier ladder and for the same reason: size names\ninvert (this library already shipped an `xxs` bigger than its `xs`), and a\nrole tells you where the rung belongs. Ratios are simple fractions of the\natom rather than a geometric scale — again like the tier ladder, whose\nrungs are sp+6, 2sp+6, 3sp, 4sp rather than a constant multiplier. They\nland on whole pixels at dense and hold their ratio at every mode.\n\n  micro    5/6   10 / 11.7 / 11.7 / 11.7   an eyebrow, a legend, a tag\n  body      1    12 / 14 / 14 / 14         control and UI text\n  lede     5/4   15 / 17.5                 the paragraph under a title\n  heading  3/2   18 / 21                   a section heading\n  title     2    24 / 28                   a page or card title\n  display   3    36 / 42                   a hero\n\n`micro` is not invented: the library hand-writes text-[0.625rem] ten times\nfor exactly this role, and 5/6 of dense's 12px is that value.\n\nLeading and tracking ride with the size, so a rung is one class. Both\ntighten as the rung grows, which is ordinary optical setting and matters\nmore here than usual — era's default stack is monospace, whose display\nsizes read loose without it.\n\n\nbody and micro deliberately carry NO line-height: `text-body` is worn by\nevery control in the library, where leading is owned by era-text-trim and\nleading-none. Giving it a default would re-space every control in era.\nUse `leading-body` for running text, as before.",
       "css": "@theme inline {\n\t--text-micro: calc(var(--era-text) * 5 / 6);\n\t--text-micro--letter-spacing: 0.04em;\n\t--text-lede: calc(var(--era-text) * 5 / 4);\n\t--text-lede--line-height: 1.5;\n\t--text-heading: calc(var(--era-text) * 3 / 2);\n\t--text-heading--line-height: 1.3;\n\t--text-heading--letter-spacing: -0.01em;\n\t--text-title: calc(var(--era-text) * 2);\n\t--text-title--line-height: 1.15;\n\t--text-title--letter-spacing: -0.02em;\n\t--text-display: calc(var(--era-text) * 3);\n\t--text-display--line-height: 1.05;\n\t--text-display--letter-spacing: -0.03em;\n}"
@@ -316,7 +316,7 @@
       "names": [
         "text-body"
       ],
-      "file": "index.css",
+      "file": "utilities/public.css",
       "description": "Density-derived body size: `text-body` replaces text-[length:var(--era-text)]",
       "css": "@theme inline {\n\t--text-body: var(--era-text);\n}"
     },
@@ -325,7 +325,7 @@
       "names": [
         "leading-body"
       ],
-      "file": "index.css",
+      "file": "utilities/public.css",
       "description": "Prose leading — `leading-body` is the pair to `text-body`, and every piece\nof text in the library that can wrap to a second line carries it. Enforced\nat runtime by typography/prose-leading.",
       "css": "@theme inline {\n\t--leading-body: var(--era-leading);\n}"
     },
@@ -339,7 +339,7 @@
         "rounded-bar",
         "rounded-menu-item"
       ],
-      "file": "index.css",
+      "file": "utilities/public.css",
       "description": "Radius ladder — Tailwind's own rounded-* names now walk era's concentric\nladder (rd-T = rd-xs + (h-T − h-icon)/2), ride the corners toggle, and\ncollapse to 0 on square. rounded-menu-item is the menu-row radius\n(rd-md − panel-inset) that keeps rows concentric inside a rounded-control\npanel on every surface.",
       "css": "@theme inline {\n\t--radius-icon: var(--era-rd-icon);\n\t--radius-pill: var(--era-rd-pill);\n\t--radius-chip: var(--era-rd-chip);\n\t--radius-control: var(--era-rd-control);\n\t--radius-bar: var(--era-rd-bar);\n\t--radius-menu-item: var(--era-item-rd);\n}"
     },
@@ -348,7 +348,7 @@
       "names": [
         "shadow"
       ],
-      "file": "index.css",
+      "file": "utilities/public.css",
       "description": "Surface chrome — bare `shadow` is the resting control edge, shadow-lg the\nfloating panel, shadow-well the recessed container, shadow-pressed the\nactive/latched face, shadow-highlight the material half of hover feedback.\nFlat renders them as none, bevel as chisels, glass as frosted rims — the\nclass stays the same.",
       "css": "@theme inline {\n\t--shadow: var(--era-shadow);\n}"
     },
@@ -361,7 +361,7 @@
         "shadow-pressed",
         "shadow-highlight"
       ],
-      "file": "index.css",
+      "file": "utilities/public.css",
       "description": "v4 marks bare `shadow` a deprecated spelling of shadow-sm, and lints\nauto-fix one to the other — alias both to the control edge so either\nspelling renders era chrome.",
       "css": "@theme inline {\n\t--shadow-sm: var(--era-shadow);\n\t--shadow-lg: var(--era-shadow-lg);\n\t--shadow-well: var(--era-shadow-well);\n\t--shadow-pressed: var(--era-shadow-pressed);\n\t--shadow-highlight: var(--era-highlight-shadow);\n}"
     },
@@ -381,7 +381,7 @@
         "text-overlay",
         "border-overlay"
       ],
-      "file": "index.css",
+      "file": "utilities/public.css",
       "description": "Surface fills — bg-well is the surface's own resting fill (pairs with\nshadow-well for recessed chrome), bg-elevated the raised tier,\nbg-highlight the transient\nhover/focus/keyboard wash (pairs with shadow-highlight; latched states\nstay on opaque bg-hover), bg-overlay the modal scrim.",
       "css": "@theme inline {\n\t--color-well: var(--era-surface-bg);\n\t--color-elevated: var(--era-surface-bg-elevated);\n\t--color-highlight: var(--era-highlight);\n\t--color-overlay: var(--era-overlay-bg);\n}"
     },
@@ -413,7 +413,7 @@
         "py-field",
         "gap-field"
       ],
-      "file": "index.css",
+      "file": "utilities/public.css",
       "description": "THE SPACING SCALE — one entry per token, from which Tailwind derives the\nWHOLE directional family: p/px/py/pt/pr/pb/pl/ps/pe, every margin, gap and\ngap-x/y, inset/top/right/bottom/left, translate, and the sizing prefixes.\n\nThese were hand-written `@utility` blocks, which could only ever cover the\nspellings someone remembered to write: `px-gutter` existed and `mt-gutter`\ndid not, `p-inset-control` existed and `pl-inset-control` did not, so the\nlibrary fell back to `mt-(--era-gap)` in exactly the places the named API\nwas supposed to cover. One line here replaces twenty blocks and leaves no\nspelling missing.\n\nONLY genuine spacing belongs here. The namespace is shared across\nh/w/p/m/gap, so a name registered here means the same length in ALL of\nthem — true of a gap or an inset, false of a TIER HEIGHT. Tiers stay\nhand-written per prefix below, and the two vocabularies deliberately share\nno word: icon/pill/chip/control/bar are heights; gutter, card, panel,\ncontent, menu, field and the inset-* names are spacing. Registering a tier\nname here would silently make `px-control` mean 24px of side padding.",
       "css": "@theme inline {\n\t--spacing-gutter: var(--era-gap);\n\t--spacing-panel: var(--era-pad-panel);\n\t--spacing-card: var(--era-pad-card);\n\t--spacing-content: var(--era-pad-content);\n\t--spacing-menu: var(--era-panel-inset);\n\t--spacing-field: var(--era-field-px);\n}"
     },
@@ -433,7 +433,7 @@
         "py-inset-control",
         "gap-inset-control"
       ],
-      "file": "index.css",
+      "file": "utilities/public.css",
       "useCase": "text-symmetric content padding — (tier − text)/2, the inset that vertically centres body text in its tier; px-inset-control is a text button's side padding, p-inset-control a code block's.",
       "description": "",
       "css": "@theme inline {\n\t--spacing-inset-pill: var(--era-inset-pill);\n\t--spacing-inset-chip: var(--era-inset-chip);\n\t--spacing-inset-control: var(--era-inset-control);\n}"
@@ -482,7 +482,7 @@
         "py-control-inset-bar",
         "gap-control-inset-bar"
       ],
-      "file": "index.css",
+      "file": "utilities/public.css",
       "useCase": "the concentric inset for a nested pair — (h-container − h-child)/2, the gap that makes a child control sit evenly inside its container, and the radius step that keeps their corners concentric. Named for the pair it joins: gap-icon-inset-control seats an icon in a control.",
       "description": "",
       "css": "@theme inline {\n\t--spacing-icon-inset-pill: var(--era-icon-inset-pill);\n\t--spacing-icon-inset-chip: var(--era-icon-inset-chip);\n\t--spacing-icon-inset-control: var(--era-icon-inset-control);\n\t--spacing-icon-inset-bar: var(--era-icon-inset-bar);\n\t--spacing-pill-inset-chip: var(--era-pill-inset-chip);\n\t--spacing-pill-inset-control: var(--era-pill-inset-control);\n\t--spacing-pill-inset-bar: var(--era-pill-inset-bar);\n\t--spacing-chip-inset-control: var(--era-chip-inset-control);\n\t--spacing-chip-inset-bar: var(--era-chip-inset-bar);\n\t--spacing-control-inset-bar: var(--era-control-inset-bar);\n}"
@@ -499,7 +499,7 @@
         "py-glyph-pill",
         "gap-glyph-pill"
       ],
-      "file": "index.css",
+      "file": "utilities/public.css",
       "useCase": "the glyph size for a tier — the INK inside the box, not the box (size-glyph-pill is the dismiss × in a pill, size-pill is the pill).",
       "description": "",
       "css": "@theme inline {\n\t--spacing-glyph-icon: var(--era-glyph-icon);\n\t--spacing-glyph-pill: var(--era-glyph-pill);\n}"
@@ -514,7 +514,7 @@
         "text-field-highlight",
         "border-field-highlight"
       ],
-      "file": "index.css",
+      "file": "utilities/public.css",
       "useCase": "the recessed field fill — bg-field is a text input's resting well, bg-field-highlight its focused/hovered face.",
       "description": "",
       "css": "@theme inline {\n\t--color-field: var(--era-field-bg);\n\t--color-field-highlight: var(--era-field-highlight);\n}"
@@ -524,7 +524,7 @@
       "names": [
         "ease-base"
       ],
-      "file": "index.css",
+      "file": "utilities/public.css",
       "description": "Motion — bare transition utilities default to the motion axis, so\n`transition-colors` alone is on-design (0s at instant, longer at extra).\nease-base/duration-base name the axis explicitly for overrides.",
       "css": "@theme inline {\n\t--default-transition-duration: var(--era-duration);\n\t--default-transition-timing-function: var(--era-ease);\n\t--ease-base: var(--era-ease);\n}"
     },
@@ -598,7 +598,7 @@
         "text-muted",
         "border-muted"
       ],
-      "file": "index.css",
+      "file": "utilities/public.css",
       "description": "Surface divider colors: border-divider, bg-divider-faded, …",
       "css": "@theme inline {\n\t--color-divider: var(--era-divider-color);\n\t--color-divider-faded: var(--era-divider-faded);\n\t--color-background: var(--color-1);\n\t--color-foreground: var(--color-fg);\n\t--color-1: var(--color-1);\n\t--color-2: var(--color-2);\n\t--color-3: var(--color-3);\n\t--color-4: var(--color-4);\n\t--color-5: var(--color-5);\n\t--color-6: var(--color-6);\n\t--color-7: var(--color-7);\n\t--color-8: var(--color-8);\n\t--color-9: var(--color-9);\n\t--color-10: var(--color-10);\n\t--color-11: var(--color-11);\n\t--color-12: var(--color-12);\n\t--color-border: var(--color-border);\n\t--color-surface: var(--color-surface);\n\t--color-hover: var(--color-hover);\n\t--color-fg: var(--color-fg);\n\t--color-bright: var(--color-bright);\n\t--color-muted: var(--color-muted);\n}"
     },
@@ -645,7 +645,7 @@
         "text-info-fg",
         "border-info-fg"
       ],
-      "file": "index.css",
+      "file": "utilities/public.css",
       "description": "The standing pill fill — --era-fill, the latched counterpart of the\ntransient highlight. Surface-owned: a composing wash on flat/bevel, the\nopaque swatch on glass.",
       "css": "@theme inline {\n\t--color-fill: var(--era-fill);\n\t--color-link: var(--color-link);\n\t--color-primary: var(--color-primary);\n\t--color-primary-fg: var(--color-primary-fg);\n\t--color-primary-hover: var(--color-primary-hover);\n\t--color-destructive: var(--color-destructive);\n\t--color-destructive-fg: var(--color-destructive-fg);\n\t--color-success: var(--color-success);\n\t--color-success-fg: var(--color-success-fg);\n\t--color-warning: var(--color-warning);\n\t--color-warning-fg: var(--color-warning-fg);\n\t--color-info: var(--color-info);\n\t--color-info-fg: var(--color-info-fg);\n}"
     }

package/dist/os/pane.svelte

@@ -163,23 +163,13 @@
 			     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. -->
-			<!-- size="pill" is the handle's content tier (see Pane.Handle), and the glyph
-			     matches Pane.Close exactly — sp+5, off the sub-tier ladder for the
-			     reason documented there. The two close affordances have to read as one
-			     weight, so whatever that one is, both take it.
-
-			     The maximize bracket stays a step down: its silhouette fills its whole
-			     box, so beside the × and − strokes it reads bulkier at the same nominal
-			     size. icon-xxs is 1px under sp+5 and stays a named token, which is
-			     right for a glyph that has axis-aligned strokes — those DO gain from
-			     landing on whole pixels, where the ×'s diagonals do not. It has to be
-			     written as [&_svg]: because that is the selector the variant uses; a
-			     plain size-* on the <svg> loses to it. -->
+			<!-- size="pill" is the handle's content tier (see Pane.Handle). Button's
+			     matching glyph tier leaves exactly 3px around the ×, −, or maximize
+			     mark, so every preview state occupies the same optical box. -->
 			<Button
 				icon
 				size="pill"
 				tone={armed === 'minimize' ? 'warning' : armed === 'maximize' ? 'success' : 'destructive'}
-				class={armed === 'maximize' ? '[&_svg]:size-glyph-pill' : '[&_svg]:size-icon'}
 				aria-label="Close (right-click minimizes, middle-click maximizes)"
 				onclick={() => pm.close(pane.id)}
 				oncontextmenu={(e: MouseEvent) => e.preventDefault()}