@signal9/era-ui 9.0.0 → 10.1.0

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

@@ -4,18 +4,20 @@
 
 ## Using the library
 
+This package is published to two registries under two names: `@signal9/era-ui` on npm (used throughout these docs) and `@sig-nine/era-ui` on GitHub Packages, where the scope must match the repo owner. Same code, same versions — pick the one your registry serves and keep the scope consistent.
+
 **One entry point per component.** There is no barrel that re-exports everything — importing a component can never drag in another one, or another one's dependencies.
 
 ```ts
-import { Button } from "@sig-nine/era-ui/button";
-import * as Select from "@sig-nine/era-ui/select";
-import * as Table from "@sig-nine/era-ui/table";
+import { Button } from "@signal9/era-ui/button";
+import * as Select from "@signal9/era-ui/select";
+import * as Table from "@signal9/era-ui/table";
 
 // The root is the SYSTEM layer only: cn/tv, keybindings, the axis
 // registry, and Mode. It imports no component.
-import { cn, ModeProvider } from "@sig-nine/era-ui";
+import { cn, ModeProvider } from "@signal9/era-ui";
 
-import "@sig-nine/era-ui/styles";  // source CSS, scanned by your Tailwind
+import "@signal9/era-ui/styles";  // source CSS, scanned by your Tailwind
 ```
 
 The path is always the component's own kebab-case name — `/button`, `/dropdown-menu`, `/date-range-picker` — and the other layers are namespaced: `/ai` and `/ai/<part>`, `/apps/<app>`, `/os`, `/audit`.
@@ -24,7 +26,7 @@ Named exports wrap a single primitive (`Button`, `Badge`, `Chip`, `Input`, …).
 
 ### Stylesheets
 
-`@sig-nine/era-ui/styles` is the source CSS — import it once and your own Tailwind build scans era's components and emits only the utilities they use. `@sig-nine/era-ui/css` is the prebuilt alternative for a project without Tailwind. Three more are opt-in, each single-purpose: `/styles/video-player` (vidstack's vendor CSS, needed only with `VideoPlayer`), `/styles/prose` (document typography for a TipTap editor — put `era-notes-prose` on your editor element; `NoteEditor` imports it already), and `/styles/themes` (the raw theme tokens).
+`@signal9/era-ui/styles` is the source CSS — import it once and your own Tailwind build scans era's components and emits only the utilities they use. `@signal9/era-ui/css` is the prebuilt alternative for a project without Tailwind. Three more are opt-in, each single-purpose: `/styles/video-player` (vidstack's vendor CSS, needed only with `VideoPlayer`), `/styles/prose` (document typography for a TipTap editor — put `era-notes-prose` on your editor element; `NoteEditor` imports it already), and `/styles/themes` (the raw theme tokens).
 
 ### Optional peers
 
@@ -58,7 +60,9 @@ 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: never on an <input>/<textarea>, and never on the same element as `truncate` or any overflow clip — put it on the fixed-height ROW and let the truncating child centre inside it. See era-text-trim-caps for ALL-CAPS.
 - `truncate` — single-line horizontal truncation with an ellipsis — put it on the truncating CHILD inside a trimmed or leading-none row, never on the same element as era-text-trim; it will not clip ascenders or descenders.
 - `era-text-trim-caps` — the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never for mixed-case text (a label like "System" reads high; use era-text-trim), and never on the same element as `truncate`.
-- `era-token-ink · era-ink-center` — the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box; it needs no icon sibling (with one the box must stay flex, and the general trim applies).
+- `era-ink-center` — on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim.
+- `era-token-ink` — 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.
+- `era-label-ink` — 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).
 - `era-shimmer` — the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text.
 - `era-collapse` — the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden).
 - `h-icon · h-pill · h-chip · h-control · h-bar` — 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-*).
@@ -131,7 +135,7 @@ never the `h-(--era-h-control)` var-class spelling. Everything below rides along
 with the stylesheet and needs no import:
 
 ```ts
-import "@sig-nine/era-ui/css";
+import "@signal9/era-ui/css";
 ```
 
 ```svelte
@@ -166,7 +170,9 @@ enough to stay var-form — `min-w-(--era-h-control)` etc. remain the escape hat
 | `era-text-trim` | vertically center single-line control text (a label beside an icon, a button's own text) without a translateY nudge. Fixed-height, non-editable elements ONLY: never on an <input>/<textarea>, and never on the same element as `truncate` or any overflow clip — put it on the fixed-height ROW and let the truncating child centre inside it. See era-text-trim-caps for ALL-CAPS. |
 | `truncate` | single-line horizontal truncation with an ellipsis — put it on the truncating CHILD inside a trimmed or leading-none row, never on the same element as era-text-trim; it will not clip ascenders or descenders. |
 | `era-text-trim-caps` | the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never for mixed-case text (a label like "System" reads high; use era-text-trim), and never on the same element as `truncate`. |
-| `era-token-ink` `era-ink-center` | the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box; it needs no icon sibling (with one the box must stay flex, and the general trim applies). |
+| `era-ink-center` | on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim. |
+| `era-token-ink` | 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. |
+| `era-label-ink` | 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). |
 | `era-shimmer` | the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text. |
 | `era-collapse` | the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden). |
 | `h-icon` `h-pill` `h-chip` `h-control` `h-bar` | 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-*). |
@@ -357,9 +363,47 @@ Declared in `index.css`.
 }
 ```
 
-## era-token-ink · era-ink-center
+## era-ink-center
+
+**Use it for:** on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim.
+
+The EDITABLE counterpart of era-text-trim — for native <input>s, which the
+trim is forbidden on (it collapses the UA's inner editor box and slices the
+glyphs; see typography/collapsed-text-trim).
+
+Without help, a tier-height input centres its text by FONT BOX, and the ui
+stacks' font box is deeply asymmetric: ascent ≈1.07em against descent
+≈0.29em. Centring that box parks the visible band (caps, x-height) ~0.115em
+LOW — so a field's text sat visibly below the trimmed label beside it.
+
+The value is OPTICAL, not the derivation's: pure x-band centring computes
+to ~0.23em of padding, but pixel-measured against real Title-Case text it
+over-lifts — the eye weighs the cap-to-baseline mass, which x-band
+centring parks ~2px high (caps 2.75px off the top against 5.7px of air
+under the baseline, measured at dense). 0.08em splits the difference
+between the x-band ideal and the cap-band ideal, landing caps ~3.7px in an
+18px field with ~4.7px under the baseline — the reading where neither
+band's partisans win and neither complains.
+
+The lift is padding, not a translateY: an icon-less Input paints the field
+chrome itself, and a transform would drag the field along with the ink.
+padding-bottom shrinks the content box from below, and a single-line input
+re-centres its line box in what remains — the ink rises by exactly half the
+padding, the chrome doesn't move, and the caret and selection follow the
+text. In em on purpose: the correction is a fraction of the type, so it
+holds across every density and text size with one value.
+
+Declared in `index.css`.
+
+```css
+@utility era-ink-center {
+	padding-bottom: 0.08em;
+}
+```
+
+## era-token-ink
 
-**Use it for:** the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box; it needs no icon sibling (with one the box must stay flex, and the general trim applies).
+**Use it for:** 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.
 
 TOKEN INK — the ink centring for a pill whose content is a TOKEN: an id, a
 count, a status, a tag. Font-independent, unlike everything it replaces.
@@ -398,9 +442,45 @@ Declared in `index.css`.
 	line-height: 1;
 	text-box: trim-both cap alphabetic;
 }
+```
 
-@utility era-ink-center {
-	padding-bottom: 0.08em;
+## era-label-ink
+
+**Use it for:** 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).
+
+LABEL INK — era-token-ink's mixed-case sibling, and the general answer to
+"this fixed-height control holds one line of text".
+
+Same mechanism, same reason: `text-box-trim` needs a BLOCK box, so the row
+becomes one and `align-content` (block-container alignment) does the
+centring. What differs is the band and the alignment, because the content
+class differs — a label is sentence case, so the x-height band is the visual
+mass to centre (cap-band reads low on "System"), and it is laid out against
+the row's padding rather than centred in it.
+
+WHY IT EXISTS AT ALL: era's controls are flex, and a flex container's bare
+text is an ANONYMOUS flex item — a box no selector reaches and no
+non-inherited property touches. So `era-text-trim` on a flex row is inert,
+contributing only its `line-height: 1`, and the ink falls back to line-box
+centring by font metrics. era-token-ink already fixed that for centred
+tokens; this fixes it for everything else.
+
+THE ICON CASE IS NOT SOLVED, and cannot be from CSS: an icon beside the text
+needs the box to stay flex, which re-creates the anonymous item. A component
+whose children are an opaque slot therefore guards it —
+`not-has-[svg]:era-label-ink` — and ink-centres the text-only case while
+leaving the icon case on line-box centring. Splitting icon and label into
+separate slots is what would close it; typography/inert-trim reports every
+site still on the fallback.
+
+Declared in `index.css`.
+
+```css
+@utility era-label-ink {
+	display: block;
+	align-content: center;
+	line-height: 1;
+	text-box: trim-both ex alphabetic;
 }
 ```
 
@@ -755,13 +835,13 @@ A complete notes app — rich-text editor, slash commands, local persistence.
 
 ## Usage
 
-Apps ship on their own subpath and are **not** re-exported from `@sig-nine/era-ui`.
+Apps ship on their own subpath and are **not** re-exported from `@signal9/era-ui`.
 Notes carries TipTap, and a consumer who never imports an app should never pay
 for it.
 
 ```svelte
 <script>
-	import { Notes } from '@sig-nine/era-ui/apps';
+	import { Notes } from '@signal9/era-ui/apps';
 </script>
 
 <Notes />
@@ -801,7 +881,7 @@ Persistence is one small interface, so server-backed hosting is a drop-in swap
 `load`/`save` may be sync or async:
 
 ```ts
-import { Notes, NotesStore } from '@sig-nine/era-ui/apps';
+import { Notes, NotesStore } from '@signal9/era-ui/apps';
 
 const store = new NotesStore({
 	adapter: {
@@ -966,8 +1046,8 @@ Inherits all props from `HTMLAttributes<HTMLDivElement>`.
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `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
+| `size?` | `'chip' \| 'control' \| 'bar'` | `'bar'` | Height tier (scales with density). Default `lg` — a full toolbar. |
+| `content?` | `'tier' \| 'pill'` | `'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; `pill` is
 the compact pairing (pills/fields in an sm or md bar). |
 | `divider?` | `boolean` | `false` | The flush cap-a-panel chrome: outset divider below, bottom rd-md. |
@@ -994,7 +1074,7 @@ Inherits all props from `Button.RootProps`.
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `tone?` | `'default' \| 'accent' \| 'destructive' \| 'success' \| 'warning'` | `'default'` | — |
-| `size?` | `'default' \| 'sm' \| 'xxs' \| 'xs' \| 'icon'` | `'default'` | — |
+| `size?` | `'control' \| 'chip' \| 'pill' \| 'icon'` | `'control'` | — |
 | `variant?` | `'filled' \| 'link'` | `'filled'` | — |
 | `active?` | `boolean` | `false` | — |
 | `icon?` | `boolean` | `false` | — |
@@ -1142,7 +1222,7 @@ Inherits all props from `HTMLAttributes<HTMLDivElement>`.
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `ref?` | `HTMLDivElement \| null` | `null` | bindable |
-| `size?` | `'sm' \| 'xxs'` | `'sm'` | `sm` (default) is the standalone free chip; `pill` is the smaller pill
+| `size?` | `'chip' \| 'pill'` | `'chip'` | `sm` (default) is the standalone free chip; `pill` is the smaller pill
 that nests inside an md container (a select trigger, a button). |
 | `ondismiss?` | `() => void` | — | — |
 | `children?` | `Snippet` | — | — |
@@ -2933,7 +3013,7 @@ Inherits all props from `Omit<HTMLInputAttributes, 'size'>`.
 |------|------|---------|-------|
 | `ref?` | `HTMLInputElement \| null` | `null` | bindable |
 | `icon?` | `Component<IconProps> \| null` | `null` | Lucide glyph rendered inside the field, left of the text. |
-| `size?` | `'md' \| 'xxs'` | `'md'` | Field tier. `pill` is badge height — for compact chrome where the field
+| `size?` | `'control' \| 'pill'` | `'control'` | Field tier. `pill` is badge height — for compact chrome where the field
 sits level with xxs buttons. See inputVariants. |
 | `bare?` | `boolean` | `false` | Drop the field chrome — for an input inside a container that is already the field. |
 | `reveal?` | `boolean` | `false` | Hold the field chrome back until hover — for a title or label that IS the content. |

package/dist/generated-docs/llms.txt

@@ -38,18 +38,20 @@ Full derivations: `{{ORIGIN}}/spacing.md` (the ladder and every token), `{{ORIGI
 
 ## Using the library
 
+This package is published to two registries under two names: `@signal9/era-ui` on npm (used throughout these docs) and `@sig-nine/era-ui` on GitHub Packages, where the scope must match the repo owner. Same code, same versions — pick the one your registry serves and keep the scope consistent.
+
 **One entry point per component.** There is no barrel that re-exports everything — importing a component can never drag in another one, or another one's dependencies.
 
 ```ts
-import { Button } from "@sig-nine/era-ui/button";
-import * as Select from "@sig-nine/era-ui/select";
-import * as Table from "@sig-nine/era-ui/table";
+import { Button } from "@signal9/era-ui/button";
+import * as Select from "@signal9/era-ui/select";
+import * as Table from "@signal9/era-ui/table";
 
 // The root is the SYSTEM layer only: cn/tv, keybindings, the axis
 // registry, and Mode. It imports no component.
-import { cn, ModeProvider } from "@sig-nine/era-ui";
+import { cn, ModeProvider } from "@signal9/era-ui";
 
-import "@sig-nine/era-ui/styles";  // source CSS, scanned by your Tailwind
+import "@signal9/era-ui/styles";  // source CSS, scanned by your Tailwind
 ```
 
 The path is always the component's own kebab-case name — `/button`, `/dropdown-menu`, `/date-range-picker` — and the other layers are namespaced: `/ai` and `/ai/<part>`, `/apps/<app>`, `/os`, `/audit`.
@@ -58,7 +60,7 @@ Named exports wrap a single primitive (`Button`, `Badge`, `Chip`, `Input`, …).
 
 ### Stylesheets
 
-`@sig-nine/era-ui/styles` is the source CSS — import it once and your own Tailwind build scans era's components and emits only the utilities they use. `@sig-nine/era-ui/css` is the prebuilt alternative for a project without Tailwind. Three more are opt-in, each single-purpose: `/styles/video-player` (vidstack's vendor CSS, needed only with `VideoPlayer`), `/styles/prose` (document typography for a TipTap editor — put `era-notes-prose` on your editor element; `NoteEditor` imports it already), and `/styles/themes` (the raw theme tokens).
+`@signal9/era-ui/styles` is the source CSS — import it once and your own Tailwind build scans era's components and emits only the utilities they use. `@signal9/era-ui/css` is the prebuilt alternative for a project without Tailwind. Three more are opt-in, each single-purpose: `/styles/video-player` (vidstack's vendor CSS, needed only with `VideoPlayer`), `/styles/prose` (document typography for a TipTap editor — put `era-notes-prose` on your editor element; `NoteEditor` imports it already), and `/styles/themes` (the raw theme tokens).
 
 ### Optional peers
 
@@ -96,7 +98,9 @@ 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: never on an <input>/<textarea>, and never on the same element as `truncate` or any overflow clip — put it on the fixed-height ROW and let the truncating child centre inside it. See era-text-trim-caps for ALL-CAPS.
 - `truncate` — single-line horizontal truncation with an ellipsis — put it on the truncating CHILD inside a trimmed or leading-none row, never on the same element as era-text-trim; it will not clip ascenders or descenders.
 - `era-text-trim-caps` — the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never for mixed-case text (a label like "System" reads high; use era-text-trim), and never on the same element as `truncate`.
-- `era-token-ink · era-ink-center` — the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box; it needs no icon sibling (with one the box must stay flex, and the general trim applies).
+- `era-ink-center` — on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim.
+- `era-token-ink` — 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.
+- `era-label-ink` — 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).
 - `era-shimmer` — the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text.
 - `era-collapse` — the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden).
 - `h-icon · h-pill · h-chip · h-control · h-bar` — 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-*).

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": 6147,
+      "tokenEstimate": 7162,
       "sections": [
         "Overview",
         "era-interactive",
@@ -53,7 +53,9 @@
         "era-text-trim",
         "truncate",
         "era-text-trim-caps",
-        "era-token-ink · era-ink-center",
+        "era-ink-center",
+        "era-token-ink",
+        "era-label-ink",
         "era-shimmer",
         "era-collapse",
         "h-icon · h-pill · h-chip · h-control · h-bar",
@@ -107,7 +109,7 @@
       "slug": "notes",
       "title": "Notes",
       "summary": "A complete notes app — rich-text editor, slash commands, local persistence.",
-      "tokenEstimate": 885,
+      "tokenEstimate": 884,
       "sections": [
         "Usage",
         "Peer dependencies",
@@ -159,7 +161,7 @@
       "slug": "bar",
       "title": "Bar",
       "summary": "A flex container for toolbars and headers, in three heights.",
-      "tokenEstimate": 206,
+      "tokenEstimate": 209,
       "sections": [
         "Import",
         "Props"
@@ -170,7 +172,7 @@
       "slug": "button",
       "title": "Button",
       "summary": "A flexible button or link element.",
-      "tokenEstimate": 453,
+      "tokenEstimate": 451,
       "sections": [
         "Import",
         "Props",
@@ -216,7 +218,7 @@
       "slug": "chip",
       "title": "Chip",
       "summary": "An interactive, optionally dismissible token.",
-      "tokenEstimate": 270,
+      "tokenEstimate": 272,
       "sections": [
         "Import",
         "Props",
@@ -635,7 +637,7 @@
       "slug": "input",
       "title": "Input",
       "summary": "A text input field, with textarea variant.",
-      "tokenEstimate": 219,
+      "tokenEstimate": 222,
       "sections": [
         "Import",
         "Props"
@@ -1022,15 +1024,34 @@
       "css": "@utility era-text-trim-caps {\n\tline-height: 1;\n\ttext-box: trim-both cap alphabetic;\n}"
     },
     {
-      "name": "era-token-ink",
+      "name": "era-ink-center",
       "names": [
-        "era-token-ink",
         "era-ink-center"
       ],
       "file": "index.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; it needs no icon sibling (with one the box must stay flex, and the general trim applies).",
+      "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). 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.",
+      "css": "@utility era-ink-center {\n\tpadding-bottom: 0.08em;\n}"
+    },
+    {
+      "name": "era-token-ink",
+      "names": [
+        "era-token-ink"
+      ],
+      "file": "index.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}\n\n@utility era-ink-center {\n\tpadding-bottom: 0.08em;\n}"
+      "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}"
+    },
+    {
+      "name": "era-label-ink",
+      "names": [
+        "era-label-ink"
+      ],
+      "file": "index.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\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}"
     },
     {
       "name": "era-shimmer",

package/dist/generated-docs/notes.md

@@ -4,13 +4,13 @@ A complete notes app — rich-text editor, slash commands, local persistence.
 
 ## Usage
 
-Apps ship on their own subpath and are **not** re-exported from `@sig-nine/era-ui`.
+Apps ship on their own subpath and are **not** re-exported from `@signal9/era-ui`.
 Notes carries TipTap, and a consumer who never imports an app should never pay
 for it.
 
 ```svelte
 <script>
-	import { Notes } from '@sig-nine/era-ui/apps';
+	import { Notes } from '@signal9/era-ui/apps';
 </script>
 
 <Notes />
@@ -50,7 +50,7 @@ Persistence is one small interface, so server-backed hosting is a drop-in swap
 `load`/`save` may be sync or async:
 
 ```ts
-import { Notes, NotesStore } from '@sig-nine/era-ui/apps';
+import { Notes, NotesStore } from '@signal9/era-ui/apps';
 
 const store = new NotesStore({
 	adapter: {

package/dist/generated-docs/utilities.json

@@ -61,15 +61,34 @@
       "css": "@utility era-text-trim-caps {\n\tline-height: 1;\n\ttext-box: trim-both cap alphabetic;\n}"
     },
     {
-      "name": "era-token-ink",
+      "name": "era-ink-center",
       "names": [
-        "era-token-ink",
         "era-ink-center"
       ],
       "file": "index.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; it needs no icon sibling (with one the box must stay flex, and the general trim applies).",
+      "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). 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.",
+      "css": "@utility era-ink-center {\n\tpadding-bottom: 0.08em;\n}"
+    },
+    {
+      "name": "era-token-ink",
+      "names": [
+        "era-token-ink"
+      ],
+      "file": "index.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}\n\n@utility era-ink-center {\n\tpadding-bottom: 0.08em;\n}"
+      "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}"
+    },
+    {
+      "name": "era-label-ink",
+      "names": [
+        "era-label-ink"
+      ],
+      "file": "index.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\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}"
     },
     {
       "name": "era-shimmer",

package/dist/generated-docs/utilities.md

@@ -9,7 +9,7 @@ never the `h-(--era-h-control)` var-class spelling. Everything below rides along
 with the stylesheet and needs no import:
 
 ```ts
-import "@sig-nine/era-ui/css";
+import "@signal9/era-ui/css";
 ```
 
 ```svelte
@@ -44,7 +44,9 @@ enough to stay var-form — `min-w-(--era-h-control)` etc. remain the escape hat
 | `era-text-trim` | vertically center single-line control text (a label beside an icon, a button's own text) without a translateY nudge. Fixed-height, non-editable elements ONLY: never on an <input>/<textarea>, and never on the same element as `truncate` or any overflow clip — put it on the fixed-height ROW and let the truncating child centre inside it. See era-text-trim-caps for ALL-CAPS. |
 | `truncate` | single-line horizontal truncation with an ellipsis — put it on the truncating CHILD inside a trimmed or leading-none row, never on the same element as era-text-trim; it will not clip ascenders or descenders. |
 | `era-text-trim-caps` | the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never for mixed-case text (a label like "System" reads high; use era-text-trim), and never on the same element as `truncate`. |
-| `era-token-ink` `era-ink-center` | the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box; it needs no icon sibling (with one the box must stay flex, and the general trim applies). |
+| `era-ink-center` | on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim. |
+| `era-token-ink` | 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. |
+| `era-label-ink` | 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). |
 | `era-shimmer` | the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text. |
 | `era-collapse` | the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden). |
 | `h-icon` `h-pill` `h-chip` `h-control` `h-bar` | 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-*). |
@@ -235,9 +237,47 @@ Declared in `index.css`.
 }
 ```
 
-## era-token-ink · era-ink-center
+## era-ink-center
 
-**Use it for:** the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box; it needs no icon sibling (with one the box must stay flex, and the general trim applies).
+**Use it for:** on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim.
+
+The EDITABLE counterpart of era-text-trim — for native <input>s, which the
+trim is forbidden on (it collapses the UA's inner editor box and slices the
+glyphs; see typography/collapsed-text-trim).
+
+Without help, a tier-height input centres its text by FONT BOX, and the ui
+stacks' font box is deeply asymmetric: ascent ≈1.07em against descent
+≈0.29em. Centring that box parks the visible band (caps, x-height) ~0.115em
+LOW — so a field's text sat visibly below the trimmed label beside it.
+
+The value is OPTICAL, not the derivation's: pure x-band centring computes
+to ~0.23em of padding, but pixel-measured against real Title-Case text it
+over-lifts — the eye weighs the cap-to-baseline mass, which x-band
+centring parks ~2px high (caps 2.75px off the top against 5.7px of air
+under the baseline, measured at dense). 0.08em splits the difference
+between the x-band ideal and the cap-band ideal, landing caps ~3.7px in an
+18px field with ~4.7px under the baseline — the reading where neither
+band's partisans win and neither complains.
+
+The lift is padding, not a translateY: an icon-less Input paints the field
+chrome itself, and a transform would drag the field along with the ink.
+padding-bottom shrinks the content box from below, and a single-line input
+re-centres its line box in what remains — the ink rises by exactly half the
+padding, the chrome doesn't move, and the caret and selection follow the
+text. In em on purpose: the correction is a fraction of the type, so it
+holds across every density and text size with one value.
+
+Declared in `index.css`.
+
+```css
+@utility era-ink-center {
+	padding-bottom: 0.08em;
+}
+```
+
+## era-token-ink
+
+**Use it for:** 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.
 
 TOKEN INK — the ink centring for a pill whose content is a TOKEN: an id, a
 count, a status, a tag. Font-independent, unlike everything it replaces.
@@ -276,9 +316,45 @@ Declared in `index.css`.
 	line-height: 1;
 	text-box: trim-both cap alphabetic;
 }
+```
 
-@utility era-ink-center {
-	padding-bottom: 0.08em;
+## era-label-ink
+
+**Use it for:** 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).
+
+LABEL INK — era-token-ink's mixed-case sibling, and the general answer to
+"this fixed-height control holds one line of text".
+
+Same mechanism, same reason: `text-box-trim` needs a BLOCK box, so the row
+becomes one and `align-content` (block-container alignment) does the
+centring. What differs is the band and the alignment, because the content
+class differs — a label is sentence case, so the x-height band is the visual
+mass to centre (cap-band reads low on "System"), and it is laid out against
+the row's padding rather than centred in it.
+
+WHY IT EXISTS AT ALL: era's controls are flex, and a flex container's bare
+text is an ANONYMOUS flex item — a box no selector reaches and no
+non-inherited property touches. So `era-text-trim` on a flex row is inert,
+contributing only its `line-height: 1`, and the ink falls back to line-box
+centring by font metrics. era-token-ink already fixed that for centred
+tokens; this fixes it for everything else.
+
+THE ICON CASE IS NOT SOLVED, and cannot be from CSS: an icon beside the text
+needs the box to stay flex, which re-creates the anonymous item. A component
+whose children are an opaque slot therefore guards it —
+`not-has-[svg]:era-label-ink` — and ink-centres the text-only case while
+leaving the icon case on line-box centring. Splitting icon and label into
+separate slots is what would close it; typography/inert-trim reports every
+site still on the fallback.
+
+Declared in `index.css`.
+
+```css
+@utility era-label-ink {
+	display: block;
+	align-content: center;
+	line-height: 1;
+	text-box: trim-both ex alphabetic;
 }
 ```
 

package/dist/os/notification-center.svelte

@@ -95,7 +95,7 @@
 
 			{#if notif.items.length}
 				<footer class="shrink-0 border-t border-divider-faded p-(--era-inset-chip)">
-					<Button variant="link" size="sm" class="w-full" onclick={() => notif.clear()}>
+					<Button variant="link" size="chip" class="w-full" onclick={() => notif.clear()}>
 						Clear all
 					</Button>
 				</footer>

package/dist/os/pane.svelte

@@ -124,7 +124,7 @@
 			     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="xxs" is the handle's content tier (see Pane.Handle), and the glyph
+			<!-- 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.
@@ -138,7 +138,7 @@
 			     plain size-* on the <svg> loses to it. -->
 			<Button
 				icon
-				size="xxs"
+				size="pill"
 				tone={armed === 'minimize' ? 'warning' : armed === 'maximize' ? 'success' : 'destructive'}
 				class={armed === 'maximize'
 					? '[&_svg]:size-(--era-glyph-pill)'