@signal9/era-ui 10.0.0 → 11.0.0

package/dist/ai/tool/tool-exec.svelte

@@ -19,9 +19,9 @@
 	const failed = $derived(exitCode !== undefined && exitCode !== 0);
 </script>
 
-<div class="flex min-w-0 flex-col gap-(--era-pad-panel)">
+<div class="flex min-w-0 flex-col gap-panel">
 	{#if command || failed}
-		<div class="flex min-w-0 items-center gap-(--era-gap)">
+		<div class="flex min-w-0 items-center gap-gutter">
 			{#if command}
 				<code class="min-w-0 flex-1 truncate font-mono text-body text-muted">{command}</code>
 			{/if}
@@ -39,14 +39,14 @@
 	{#if stdout}
 		<Step.Section label="stdout">
 			<pre
-				class="min-w-0 overflow-x-auto rounded-(--era-rd-control) bg-(--era-field-bg) p-(--era-pad-panel) font-mono text-body whitespace-pre-wrap text-muted shadow-(--era-shadow-well)">{stdout}</pre>
+				class="min-w-0 overflow-x-auto rounded-control bg-field p-panel font-mono text-body whitespace-pre-wrap text-muted shadow-well">{stdout}</pre>
 		</Step.Section>
 	{/if}
 
 	{#if stderr}
 		<Step.Section label="stderr">
 			<pre
-				class="min-w-0 overflow-x-auto rounded-(--era-rd-control) bg-(--era-field-bg) p-(--era-pad-panel) font-mono text-body whitespace-pre-wrap text-destructive shadow-(--era-shadow-well)">{stderr}</pre>
+				class="min-w-0 overflow-x-auto rounded-control bg-field p-panel font-mono text-body whitespace-pre-wrap text-destructive shadow-well">{stderr}</pre>
 		</Step.Section>
 	{/if}
 </div>

package/dist/ai/tool/tool-header.svelte

@@ -14,7 +14,7 @@
 </script>
 
 <Step.Summary>
-	<Wrench class="size-(--era-h-icon) shrink-0" aria-hidden="true" />
+	<Wrench class="size-icon shrink-0" aria-hidden="true" />
 	<span class="truncate text-fg">{type}</span>
 	{@render children?.()}
 </Step.Summary>

package/dist/ai/web-preview/web-preview.svelte

@@ -15,19 +15,14 @@
 	let nonce = $state(0);
 </script>
 
-<div
-	class={cn(
-		'flex min-h-0 flex-col overflow-hidden rounded-(--era-rd-bar) bg-(--era-surface-bg) shadow-(--era-shadow-lg)',
-		className
-	)}
->
-	<Bar size="control" class="shrink-0 gap-(--era-gap) rounded-none">
+<div class={cn('flex min-h-0 flex-col overflow-hidden rounded-bar bg-well shadow-lg', className)}>
+	<Bar size="control" class="shrink-0 gap-gutter rounded-none">
 		<Button icon size="chip" aria-label="Reload" onclick={() => (nonce += 1)}>
-			<RotateCw class="size-(--era-h-icon)" />
+			<RotateCw class="size-icon" />
 		</Button>
 		<Input
 			bind:value={draft}
-			class="h-(--era-h-chip) flex-1"
+			class="h-chip flex-1"
 			placeholder="https://…"
 			onkeydown={(e: KeyboardEvent) => {
 				if (e.key === 'Enter') {

package/dist/ai/workflow/canvas.svelte

@@ -12,7 +12,7 @@
 
 <!-- Thin era skin over Svelte Flow — the graph engine is xyflow's. This file
      lives on its own subpath so the dependency stays opt-in. -->
-<SvelteFlow bind:nodes bind:edges fitView class="rounded-(--era-rd-bar) shadow-(--era-shadow)">
+<SvelteFlow bind:nodes bind:edges fitView class="rounded-bar shadow-sm">
 	<Background bgColor="var(--color-1)" />
 	<Controls />
 	{@render children?.()}

package/dist/ai/workflow/node.svelte

@@ -12,18 +12,18 @@
 
 <div
 	class={cn(
-		'flex w-56 flex-col overflow-hidden rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) text-body shadow-(--era-shadow-lg)',
+		'flex w-56 flex-col overflow-hidden rounded-control bg-elevated text-body shadow-lg',
 		className
 	)}
 >
 	<Handle type="target" position={Position.Left} />
 	{#if title}
 		<div
-			class="flex h-(--era-h-control) items-center border-b border-divider-faded px-(--era-inset-control) font-medium text-bright"
+			class="flex h-control items-center border-b border-divider-faded px-inset-control font-medium text-bright"
 		>
 			{title}
 		</div>
 	{/if}
-	<div class="p-(--era-inset-control) text-fg">{@render children?.()}</div>
+	<div class="p-inset-control text-fg">{@render children?.()}</div>
 	<Handle type="source" position={Position.Right} />
 </div>

package/dist/apps/index.d.ts

@@ -7,11 +7,11 @@
  * makes product decisions a primitive never would, which is exactly why these
  * live behind their own subpath instead of the root barrel.
  *
- * Apps are NOT re-exported from `@sig-nine/era-ui`. Each carries heavy,
+ * Apps are NOT re-exported from `@signal9/era-ui`. Each carries heavy,
  * app-specific dependencies (Notes brings TipTap), and the same reasoning that
  * isolates `ai/workflow` on its own subpath applies here: a consumer who never
- * imports an app never pays for it. Import from `@sig-nine/era-ui/apps` (or a
- * single app, e.g. `@sig-nine/era-ui/apps/notes`) and install that app's peers.
+ * imports an app never pays for it. Import from `@signal9/era-ui/apps` (or a
+ * single app, e.g. `@signal9/era-ui/apps/notes`) and install that app's peers.
  *
  * Exports are flat and prefixed by app (`Notes`, `NotesStore`, `NoteEditor`) so
  * a second app can land without a namespace churn.

package/dist/apps/index.js

@@ -7,11 +7,11 @@
  * makes product decisions a primitive never would, which is exactly why these
  * live behind their own subpath instead of the root barrel.
  *
- * Apps are NOT re-exported from `@sig-nine/era-ui`. Each carries heavy,
+ * Apps are NOT re-exported from `@signal9/era-ui`. Each carries heavy,
  * app-specific dependencies (Notes brings TipTap), and the same reasoning that
  * isolates `ai/workflow` on its own subpath applies here: a consumer who never
- * imports an app never pays for it. Import from `@sig-nine/era-ui/apps` (or a
- * single app, e.g. `@sig-nine/era-ui/apps/notes`) and install that app's peers.
+ * imports an app never pays for it. Import from `@signal9/era-ui/apps` (or a
+ * single app, e.g. `@signal9/era-ui/apps/notes`) and install that app's peers.
  *
  * Exports are flat and prefixed by app (`Notes`, `NotesStore`, `NoteEditor`) so
  * a second app can land without a namespace churn.

package/dist/apps/llm-shell/llm-shell.svelte

@@ -143,7 +143,7 @@
 	<!-- Thread -->
 	<div class="flex min-w-0 flex-1 flex-col">
 		{#if runStatus !== 'idle'}
-			<div class="shrink-0 border-b border-divider px-(--era-pad-card) py-gutter">
+			<div class="shrink-0 border-b border-divider px-card py-gutter">
 				<AI.RunStatus.Root
 					status={runStatus}
 					tools={{
@@ -187,9 +187,9 @@
 			<AI.Conversation.ScrollButton />
 		</AI.Conversation.Root>
 
-		<div class="mx-auto w-full max-w-2xl shrink-0 p-(--era-pad-card) pt-0">
+		<div class="mx-auto w-full max-w-2xl shrink-0 p-card pt-0">
 			{#if active && active.messages.length === 0 && suggestions.length > 0}
-				<div class="pb-(--era-gap)">
+				<div class="pb-gutter">
 					<AI.Suggestions.Root>
 						{#each suggestions as s (s)}
 							<AI.Suggestions.Suggestion suggestion={s} onSelect={(t) => onSend?.(t)} />
@@ -265,7 +265,7 @@
 			{#snippet expanded()}
 				{@const tool = block.tools.find((t) => t.id === openChip)}
 				{#if tool}
-					<Card tone="well" class="flex min-w-0 flex-col gap-(--era-pad-panel) p-(--era-pad-panel)">
+					<Card tone="well" class="flex min-w-0 flex-col gap-panel p-panel">
 						<AI.Tool.Input input={tool.input} />
 						<AI.Tool.Output output={tool.output} />
 					</Card>

package/dist/apps/notes/editor/slash-menu.svelte

@@ -53,9 +53,7 @@
 	class="scrollbar-none flex max-h-[calc(var(--era-h-control)*8)] w-max min-w-48 flex-col overflow-y-auto rounded-control bg-elevated p-menu shadow-lg glass-blur"
 >
 	{#if items.length === 0}
-		<div
-			class="flex h-control shrink-0 items-center px-inset-control text-body era-text-trim text-muted"
-		>
+		<div class="era-label-ink h-control shrink-0 px-inset-control text-body text-muted">
 			No commands
 		</div>
 	{:else}
@@ -63,7 +61,7 @@
 			{@const Icon = item.icon}
 			<button
 				type="button"
-				class="flex h-control w-full shrink-0 cursor-pointer items-center gap-gutter rounded-menu-item px-inset-control text-left text-body era-text-trim text-fg {i ===
+				class="flex h-control w-full shrink-0 cursor-pointer items-center gap-gutter rounded-menu-item px-inset-control text-left text-body leading-none text-fg {i ===
 				selected
 					? 'bg-highlight shadow-highlight'
 					: ''}"

package/dist/apps/notes/notes.svelte

@@ -239,13 +239,13 @@
 
 {#snippet paneHeader()}
 	{#if selected}
-		<div class="relative flex min-w-0 items-center gap-(--era-gap)" data-pane-control>
+		<div class="relative flex min-w-0 items-center gap-gutter" data-pane-control>
 			{@render iconPicker(selected)}
 			{@render titleField(selected, 'field-sizing-content max-w-56 min-w-0 text-center')}
 			<!-- Absolutely positioned, so the badge appearing never nudges the
 			     centred title; empty when the status is quiet, which costs
 			     nothing off-flow. -->
-			<span class="absolute top-1/2 left-full ml-(--era-gap) -translate-y-1/2">
+			<span class="absolute top-1/2 left-full ml-gutter -translate-y-1/2">
 				{@render statusBadge()}
 			</span>
 		</div>
@@ -303,7 +303,7 @@
 			     one, and the bar's + is always within reach. Two competing CTAs for
 			     an empty list reads as indecision. -->
 			<div
-				class="flex flex-1 flex-col items-center justify-center gap-gutter p-content text-center"
+				class="flex flex-1 flex-col items-center justify-center gap-gutter p-section text-center"
 			>
 				<p class="text-muted">{query ? 'No matches' : 'No notes yet'}</p>
 			</div>
@@ -331,8 +331,8 @@
 									{#snippet child({ props })}
 										<div
 											{...props}
-											class="group/row flex h-control cursor-pointer items-center gap-(--era-pill-inset-control) rounded-control px-(--era-pill-inset-control) era-text-trim {current
-												? 'bg-hover text-bright shadow-(--era-shadow-pressed)'
+											class="group/row flex h-control cursor-pointer items-center gap-pill-inset-control rounded-control px-pill-inset-control leading-none {current
+												? 'bg-hover text-bright shadow-pressed'
 												: 'hover:bg-highlight hover:shadow-highlight'}"
 											role="option"
 											aria-selected={current}
@@ -351,7 +351,7 @@
 												{#if note.icon}
 													{note.icon}
 												{:else}
-													<FileText class="size-(--era-glyph-pill) text-muted" />
+													<FileText class="size-glyph-pill text-muted" />
 												{/if}
 											</span>
 
@@ -370,7 +370,7 @@
 												{formatAge(note.updatedAt)}
 											</span>
 											<span
-												class="hidden shrink-0 items-center gap-(--era-pill-inset-control) group-hover/row:flex"
+												class="hidden shrink-0 items-center gap-pill-inset-control group-hover/row:flex"
 											>
 												<Button
 													icon
@@ -467,7 +467,7 @@
 				{/key}
 			</div>
 		{:else}
-			<div class="flex flex-1 flex-col items-center justify-center gap-gutter p-content">
+			<div class="flex flex-1 flex-col items-center justify-center gap-gutter p-section">
 				<p class="text-muted">
 					{store.notes.length === 0 ? 'Create a note to get started' : 'Select a note'}
 				</p>

package/dist/dev/audit/audits/anonymous-text.d.ts

@@ -0,0 +1,2 @@
+import type { Audit } from '../types.js';
+export declare const anonymousText: Audit;

package/dist/dev/audit/audits/anonymous-text.js

@@ -0,0 +1,73 @@
+/*
+ * A flex row that centres its OWN bare text — the one place ink centring
+ * cannot be applied, and so the one place it silently isn't.
+ *
+ * `text-box-trim` is era's mechanism for centring INK rather than the font box:
+ * it collapses the line box to a typographic band so what you see is centred
+ * rather than what the metrics measure. It applies to a BLOCK box. It cannot
+ * apply to bare text inside a flex container, because that text is wrapped in
+ * an ANONYMOUS flex item — a box no selector reaches and no non-inherited
+ * property touches. `text-box-trim` is not inherited, so it never arrives.
+ *
+ * Proven rather than reasoned: the same pill rendered `flex + trim` and `flex,
+ * no trim` produces IDENTICAL ink, to the device pixel. Centring then falls
+ * back to `align-items` on the LINE BOX — precisely the font-metric-dependent
+ * centring the trim exists to eliminate. On the shipped mono stack that put a
+ * badge's caps 2px high in an 18px pill.
+ *
+ * This audit deliberately does NOT look for the `era-text-trim` class. That was
+ * the first version, and it was the wrong instrument: deleting an inert class
+ * silences it while leaving the text exactly as mis-centred as before. What
+ * matters is the SHAPE — a centring flex row with a text node of its own — so
+ * that is what it measures. It stays true after the cleanup.
+ *
+ * Two kinds of hit, and only one of them is the author's to fix:
+ *
+ *   FIXABLE — the row holds nothing but text. It has no reason to be flex; as a
+ *   block with `era-label-ink` (or `era-token-ink` for a centred token) the trim
+ *   works and the centring stops depending on the font.
+ *
+ *   STRUCTURAL — the row holds an icon AND text. The box must stay flex to lay
+ *   the two out, which re-creates the anonymous item, and no CSS reaches it.
+ *   Components take the `not-has-[svg]:era-label-ink` guard so the text-only
+ *   case is centred properly and only the icon case falls back. Closing it for
+ *   good means the label arriving in its own slot instead of inside an opaque
+ *   `children` snippet — an API change, tracked in KNOWN_ISSUES.
+ */
+/** Cheap pre-filter: only a row that CENTRES is relying on ink centring. */
+const CENTRING = new Set(['center', 'safe center', 'anchor-center']);
+export const anonymousText = {
+    id: 'typography/anonymous-text',
+    name: 'A flex row centres its own bare text',
+    description: 'Bare text in a flex container is an anonymous flex item, which text-box-trim cannot reach — the ink is centred by font metrics instead. Make a text-only row a block with era-label-ink; an icon+text row needs the label in its own element.',
+    category: 'typography',
+    severity: 'warn',
+    // Every flex box is a candidate; the checks below are the real gate and are
+    // far cheaper than reading styles for the whole tree.
+    selector: 'div,span,button,a,label,li,header,footer,summary',
+    check(el) {
+        const s = getComputedStyle(el);
+        if (s.display !== 'flex' && s.display !== 'inline-flex')
+            return null;
+        if (!CENTRING.has(s.alignItems))
+            return null;
+        // The anonymous item itself: a text node directly under the flex box.
+        const ownText = [...el.childNodes].some((n) => n.nodeType === Node.TEXT_NODE && n.textContent?.trim());
+        if (!ownText)
+            return null;
+        // Multi-line text is not centred by ink in the first place — this law is
+        // about single-line control chrome, which is what `nowrap` marks.
+        if (s.whiteSpace !== 'nowrap' && s.flexWrap !== 'nowrap')
+            return null;
+        const hasElementChild = el.children.length > 0;
+        const issue = {
+            auditId: 'typography/anonymous-text',
+            element: el,
+            message: hasElementChild
+                ? 'flex row holding an icon AND its own bare text — the text is an anonymous flex item, so its ink is centred by font metrics. The label needs its own element (or its own slot) before a trim can reach it.'
+                : 'flex row holding nothing but text — it has no reason to be flex. Make it a block with era-label-ink (or era-token-ink for a centred token) and the trim applies.',
+            details: { display: s.display, hasElementChild }
+        };
+        return issue;
+    }
+};

package/dist/dev/audit/audits/even-container-padding.js

@@ -16,7 +16,7 @@
  * its copy button — so flagging it would be noise. Nothing has a reason to sit
  * closer to its top edge than its bottom.
  *
- * `p-content` is the one earned exception and is exempt by construction rather
+ * `p-section` is the one earned exception and is exempt by construction rather
  * than by name: it subtracts the heading ROW's own slack from its top padding,
  * so it only ever appears on a full-bleed section with no radius, and this
  * audit looks only at rounded boxes — the ones that read as a container.
@@ -34,7 +34,7 @@ export const evenContainerPadding = {
         const s = getComputedStyle(el);
         // Rounded boxes only: a radius is what makes a box read as a container
         // with edges, and it also excludes the full-bleed page sections whose
-        // top padding is legitimately reduced (see p-content).
+        // top padding is legitimately reduced (see p-section).
         if (parseFloat(s.borderTopLeftRadius) <= 0)
             return null;
         const top = parseFloat(s.paddingTop) || 0;

package/dist/dev/audit/audits/index.d.ts

@@ -4,6 +4,7 @@ import { concentricInset } from './concentric-inset.js';
 import { cornersAxis } from './corners-axis.js';
 import { evenContainerPadding } from './even-container-padding.js';
 import { flatChrome } from './flat-chrome.js';
+import { anonymousText } from './anonymous-text.js';
 import { iconFlush } from './icon-flush.js';
 import { offAxisMotion } from './off-axis-motion.js';
 import { offTierHeight } from './off-tier-height.js';
@@ -14,4 +15,4 @@ import { restingGap } from './resting-gap.js';
 import { singleGlyphSquare } from './single-glyph-square.js';
 import { uniformSiblingGaps } from './uniform-sibling-gaps.js';
 import { wallMatchesGap } from './wall-matches-gap.js';
-export { clippedGlyphs, collapsedTextTrim, concentricInset, cornersAxis, evenContainerPadding, flatChrome, iconFlush, offAxisMotion, offTierHeight, pillHoldsItsInk, proseLeading, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };
+export { clippedGlyphs, collapsedTextTrim, concentricInset, cornersAxis, evenContainerPadding, flatChrome, iconFlush, anonymousText, offAxisMotion, offTierHeight, pillHoldsItsInk, proseLeading, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };

package/dist/dev/audit/audits/index.js

@@ -5,6 +5,7 @@ import { concentricInset } from './concentric-inset.js';
 import { cornersAxis } from './corners-axis.js';
 import { evenContainerPadding } from './even-container-padding.js';
 import { flatChrome } from './flat-chrome.js';
+import { anonymousText } from './anonymous-text.js';
 import { iconFlush } from './icon-flush.js';
 import { offAxisMotion } from './off-axis-motion.js';
 import { offTierHeight } from './off-tier-height.js';
@@ -15,7 +16,7 @@ import { restingGap } from './resting-gap.js';
 import { singleGlyphSquare } from './single-glyph-square.js';
 import { uniformSiblingGaps } from './uniform-sibling-gaps.js';
 import { wallMatchesGap } from './wall-matches-gap.js';
-export { clippedGlyphs, collapsedTextTrim, concentricInset, cornersAxis, evenContainerPadding, flatChrome, iconFlush, offAxisMotion, offTierHeight, pillHoldsItsInk, proseLeading, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };
+export { clippedGlyphs, collapsedTextTrim, concentricInset, cornersAxis, evenContainerPadding, flatChrome, iconFlush, anonymousText, offAxisMotion, offTierHeight, pillHoldsItsInk, proseLeading, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };
 // Auto-register built-ins. Consumers can still unregister or add their own.
 //
 // Two of these only tell the truth on a particular axis setting, because the bug
@@ -31,6 +32,7 @@ registry.register(cornersAxis);
 registry.register(evenContainerPadding);
 registry.register(flatChrome);
 registry.register(iconFlush);
+registry.register(anonymousText);
 registry.register(offAxisMotion);
 registry.register(offTierHeight);
 registry.register(pillHoldsItsInk);

package/dist/dev/audit/audits/single-glyph-square.js

@@ -5,8 +5,8 @@ import { BOUNDED_TIER_MAX } from '../../measure.js';
  *
  * Rule 5: every element that can hold a single glyph carries a min-width equal to
  * its tier height, so one character renders as a perfect square (or circle, once
- * rounded) instead of a skinny vertical pill. Icon buttons take min-w-(--era-h-control);
- * Badge, Chip and the KV value cell take min-w-(--era-h-pill).
+ * rounded) instead of a skinny vertical pill. Icon buttons take min-w-control;
+ * Badge, Chip and the KV value cell take min-w-pill.
  *
  * Drop the min-width and nothing looks wrong until content happens to BE one
  * character — a badge showing "1", a count that ticks from 10 down to 9 — and the

package/dist/dev/audit/types.d.ts

@@ -1,5 +1,5 @@
 export type AuditSeverity = 'info' | 'warn' | 'error';
-export type AuditCategory = 'layout' | 'tokens' | 'a11y' | 'semantics';
+export type AuditCategory = 'layout' | 'tokens' | 'typography' | 'a11y' | 'semantics';
 export interface Issue {
     readonly auditId: string;
     readonly element: HTMLElement;

package/dist/dev/audit-overlay.svelte

@@ -59,10 +59,10 @@
 
 {#if dev && open}
 	<div
-		class="fixed right-4 bottom-4 z-50 flex max-h-[70vh] w-96 flex-col overflow-hidden rounded-(--era-rd-control) bg-surface font-mono text-body shadow-[inset_0_0_0_0.5px_var(--color-border),var(--era-shadow)]"
+		class="fixed right-4 bottom-4 z-50 flex max-h-[70vh] w-96 flex-col overflow-hidden rounded-control bg-surface font-mono text-body shadow-[inset_0_0_0_0.5px_var(--color-border),var(--era-shadow)]"
 	>
 		<header
-			class="flex items-center gap-(--era-icon-inset-chip) px-(--era-inset-chip) py-(--era-gap) shadow-[inset_0_-0.5px_0_0_var(--color-border)]"
+			class="flex items-center gap-icon-inset-chip px-inset-chip py-gutter shadow-[inset_0_-0.5px_0_0_var(--color-border)]"
 		>
 			<strong class="text-bright">audits</strong>
 			<span class="text-muted">
@@ -81,7 +81,7 @@
 				{@const enabled = registry.isEnabled(r.audit.id)}
 				<details open={r.issues.length > 0}>
 					<summary
-						class="flex cursor-pointer items-center gap-(--era-icon-inset-chip) px-(--era-inset-chip) py-(--era-gap) hover:bg-(--era-highlight)"
+						class="flex cursor-pointer items-center gap-icon-inset-chip px-inset-chip py-gutter hover:bg-highlight"
 					>
 						<input
 							type="checkbox"
@@ -95,13 +95,13 @@
 						</span>
 					</summary>
 					{#if r.issues.length === 0}
-						<p class="px-(--era-inset-chip) py-(--era-gap) text-muted">
+						<p class="px-inset-chip py-gutter text-muted">
 							{r.audit.description}
 						</p>
 					{:else}
 						{#each r.issues as issue, i (i)}
 							<button
-								class="flex w-full items-start gap-(--era-icon-inset-chip) px-(--era-inset-chip) py-(--era-gap) text-left hover:bg-(--era-highlight)"
+								class="flex w-full items-start gap-icon-inset-chip px-inset-chip py-gutter text-left hover:bg-highlight"
 								onclick={() => highlight(issue.element)}
 							>
 								<span class="text-destructive">●</span>
@@ -114,9 +114,9 @@
 		</div>
 
 		<footer
-			class="flex items-center gap-(--era-gap) px-(--era-inset-chip) py-(--era-gap) text-muted shadow-[inset_0_0.5px_0_0_var(--color-border)]"
+			class="flex items-center gap-gutter px-inset-chip py-gutter text-muted shadow-[inset_0_0.5px_0_0_var(--color-border)]"
 		>
-			<kbd class="rounded-(--era-rd-icon) bg-hover px-(--era-inset-chip) text-fg">
+			<kbd class="rounded-icon bg-hover px-inset-chip text-fg">
 				{isMac ? '⌘' : 'ctrl'}⇧{key.toUpperCase()}
 			</kbd>
 			<span>toggle</span>

package/dist/docs/css-utilities.d.ts

@@ -16,6 +16,37 @@ export interface CssUtility {
     /** The `@utility` block verbatim, as authored. */
     css: string;
 }
+/**
+ * `@theme` namespace → the utility prefixes it generates.
+ *
+ * Half of era's public class API is registered this way rather than as
+ * `@utility` blocks — `rounded-control` from `--radius-control`, `shadow-lg`,
+ * `bg-highlight`, `text-body`, and the whole spacing scale. They are classes a
+ * consumer writes exactly like the others, and until this table existed the
+ * doc pipeline could not see any of them: `@utility` was the only thing it
+ * parsed, so era's most-used names were also its least-documented.
+ *
+ * The list per namespace is the SPELLINGS WORTH DOCUMENTING, not everything
+ * Tailwind derives — a spacing token really does generate `mt-`, `gap-x-`,
+ * `inset-`, `translate-` and a dozen more, and printing all of them per name
+ * would bury the point. The prose says the rest.
+ */
+export declare const THEME_CLASS_PREFIXES: Record<string, string[]>;
+/** Every prefix a namespace really generates — the map the codemod needs. */
+export declare const THEME_ALL_PREFIXES: Record<string, string[]>;
+/**
+ * The classes one `@theme` key generates, each with the utility PREFIX that
+ * generated it — `--spacing-inset-control` → `{ prefix: 'px', name:
+ * 'px-inset-control' }`. The prefix cannot be recovered from the name (both
+ * `px` and `px-inset` are hyphen-splits of `px-inset-control`), and the codemod
+ * matches on it, so it is returned rather than re-derived.
+ */
+export declare function themeKeyClassEntries(themeKey: string, prefixes?: Record<string, string[]>): {
+    prefix: string;
+    name: string;
+}[];
+/** The class names one `@theme` key generates, e.g. `--radius-control` → `rounded-control`. */
+export declare function themeKeyClasses(themeKey: string, prefixes?: Record<string, string[]>): string[];
 /**
  * @param sources stylesheet text keyed by path relative to src/lib/styles
  *   (e.g. `index.css`, `surfaces/glass.css`).