@signal9/era-ui 10.0.0 → 11.0.0

package/dist/os/notification-center.svelte

@@ -13,7 +13,7 @@
 	const pm = getPaneManager();
 
 	const accent: Record<AppNotification['tone'], string> = {
-		default: 'bg-(--era-highlight)',
+		default: 'bg-highlight',
 		accent: 'bg-primary',
 		success: 'bg-success',
 		destructive: 'bg-destructive'
@@ -48,38 +48,32 @@
 			transition:eraFly={{ x: 320, duration: 200 }}
 			style:top="{pm.insets.top}px"
 			style:bottom="{pm.insets.bottom}px"
-			class="absolute right-0 flex w-80 flex-col border-l border-divider-faded bg-(--era-surface-bg) shadow-(--era-shadow-lg) glass-blur"
+			class="absolute right-0 flex w-80 flex-col border-l border-divider-faded bg-well shadow-lg glass-blur"
 		>
 			<header
-				class="flex shrink-0 items-center gap-(--era-gap) border-b border-divider-faded px-(--era-pad-card) py-(--era-inset-chip)"
+				class="flex shrink-0 items-center gap-gutter border-b border-divider-faded px-card py-inset-chip"
 			>
 				<span class="text-body text-bright">Notifications</span>
-				<label
-					class="ml-auto flex cursor-pointer items-center gap-(--era-gap) text-body text-muted"
-				>
-					<BellOff class="size-(--era-h-icon)" />
+				<label class="ml-auto flex cursor-pointer items-center gap-gutter text-body text-muted">
+					<BellOff class="size-icon" />
 					<Switch bind:checked={notif.dnd} aria-label="Do not disturb" />
 				</label>
 			</header>
 
 			<div
-				class="scrollbar-none flex min-h-0 flex-1 flex-col gap-(--era-inset-chip) overflow-y-auto overscroll-contain p-(--era-pad-card)"
+				class="scrollbar-none flex min-h-0 flex-1 flex-col gap-inset-chip overflow-y-auto overscroll-contain p-card"
 			>
 				{#each notif.items as n (n.id)}
 					<div
-						class="relative flex gap-(--era-inset-chip) overflow-hidden rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) p-(--era-inset-control)"
+						class="relative flex gap-inset-chip overflow-hidden rounded-control bg-elevated p-inset-control"
 					>
-						<span
-							class={cn(
-								'absolute inset-y-(--era-panel-inset) left-(--era-panel-inset) w-1 rounded-full',
-								accent[n.tone]
-							)}
+						<span class={cn('absolute inset-y-menu left-menu w-1 rounded-full', accent[n.tone])}
 						></span>
 						{#if n.icon}{@const Icon = n.icon}<Icon
-								class="mt-0.5 size-(--era-h-icon) shrink-0 text-muted"
+								class="mt-0.5 size-icon shrink-0 text-muted"
 							/>{/if}
 						<div class="min-w-0 flex-1">
-							<div class="flex items-baseline gap-(--era-gap)">
+							<div class="flex items-baseline gap-gutter">
 								<p class="min-w-0 flex-1 truncate text-body text-bright">{n.title}</p>
 								<span class="shrink-0 text-body text-muted tabular-nums">{ago(n.createdAt)}</span>
 							</div>
@@ -94,7 +88,7 @@
 			</div>
 
 			{#if notif.items.length}
-				<footer class="shrink-0 border-t border-divider-faded p-(--era-inset-chip)">
+				<footer class="shrink-0 border-t border-divider-faded p-inset-chip">
 					<Button variant="link" size="chip" class="w-full" onclick={() => notif.clear()}>
 						Clear all
 					</Button>

package/dist/os/pane-manager.svelte.d.ts

@@ -135,7 +135,7 @@ export interface AppDefinition {
      *  × gesture won't arm it and taskbar tabs only focus — minimize() and
      *  toggleMinimize() become focus-only no-ops. */
     minimizable?: boolean;
-    /** Extra classes for the pane body (Pane.Content) — e.g. `p-(--era-gap)`
+    /** Extra classes for the pane body (Pane.Content) — e.g. `p-gutter`
      *  for a body of controls, or `p-0` for a full-bleed app. */
     bodyClass?: string;
     /**

package/dist/os/pane.svelte

@@ -82,7 +82,7 @@
 		// outline-(--color-7) rather than `outline-7`, which Tailwind reads as a 7px
 		// outline WIDTH — the numeric colour scale collides with the width scale on
 		// border-* and outline-*, so those two always take the paren-var form here.
-		focused ? 'outline -outline-offset-1 outline-(--color-7)' : 'opacity-95 shadow-(--era-shadow)',
+		focused ? 'outline -outline-offset-1 outline-(--color-7)' : 'opacity-95 shadow-sm',
 		pane.state === 'minimized' && 'hidden'
 	)}
 >
@@ -94,7 +94,7 @@
 	     from the edge against 5px above and below it — read as crowded because it
 	     was. --era-inset-control is (h-control − text)/2, so the label now starts the same
 	     distance in from the edge as it sits from the top. -->
-	<Pane.Handle class="gap-(--era-gap) pl-(--era-inset-control)" center={pane.center}>
+	<Pane.Handle class="gap-gutter pl-inset-control" center={pane.center}>
 		{#if pane.lead}
 			<!-- The app replaced the whole icon+title cluster. Its content lives in
 			     the drag zone like the default one; anything interactive in it
@@ -103,7 +103,7 @@
 		{:else}
 			{#if pane.icon}
 				{@const Icon = pane.icon}
-				<Icon class="size-(--era-h-icon) shrink-0 text-muted" />
+				<Icon class="size-icon shrink-0 text-muted" />
 			{/if}
 			<span class={cn('truncate text-body', focused ? 'text-bright' : 'text-muted')}
 				>{pane.title}</span
@@ -140,9 +140,7 @@
 				icon
 				size="pill"
 				tone={armed === 'minimize' ? 'warning' : armed === 'maximize' ? 'success' : 'destructive'}
-				class={armed === 'maximize'
-					? '[&_svg]:size-(--era-glyph-pill)'
-					: '[&_svg]:size-(--era-h-icon)'}
+				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()}

package/dist/os/taskbar.svelte

@@ -202,17 +202,12 @@
 	bind:this={ref}
 	bind:clientHeight={barHeight}
 	class={cn(
-		'absolute flex h-(--era-h-bar) items-center gap-(--era-gap) bg-(--era-surface-bg-elevated) px-(--era-inset-chip) shadow-(--era-shadow-lg) glass-blur',
+		'absolute flex h-bar items-center gap-gutter bg-elevated px-inset-chip shadow-lg glass-blur',
 		floating
-			? cn(
-					'inset-x-(--era-gap) rounded-(--era-rd-bar)',
-					position === 'top' ? 'top-(--era-gap)' : 'bottom-(--era-gap)'
-				)
+			? cn('inset-x-gutter rounded-bar', position === 'top' ? 'top-gutter' : 'bottom-gutter')
 			: cn(
 					'inset-x-0 border-divider-faded',
-					position === 'top'
-						? 'top-0 rounded-b-(--era-rd-bar) border-b'
-						: 'bottom-0 rounded-t-(--era-rd-bar) border-t'
+					position === 'top' ? 'top-0 rounded-b-bar border-b' : 'bottom-0 rounded-t-bar border-t'
 				),
 		LAYER.taskbar,
 		className
@@ -232,10 +227,10 @@
 	/>
 
 	{#if pinned.length}
-		<div class="flex shrink-0 items-center gap-(--era-gap)">
+		<div class="flex shrink-0 items-center gap-gutter">
 			{#each pinned as p (p.appId)}
 				<Button icon size="control" aria-label={p.title} onclick={() => pm.open(p.appId)}>
-					{#if p.icon}{@const Icon = p.icon}<Icon class="size-(--era-h-icon)" />{/if}
+					{#if p.icon}{@const Icon = p.icon}<Icon class="size-icon" />{/if}
 				</Button>
 			{/each}
 		</div>
@@ -250,7 +245,7 @@
 	     gap between the bar's other groups. -->
 	{#if tabPanes.length > 0}
 		<div
-			class="scrollbar-none flex max-w-[40%] min-w-0 shrink-0 items-center gap-(--era-gap) overflow-x-auto"
+			class="scrollbar-none flex max-w-[40%] min-w-0 shrink-0 items-center gap-gutter overflow-x-auto"
 		>
 			{#each tabPanes as win (win.id)}
 				<Button
@@ -273,7 +268,7 @@
 						win.state === 'minimized' && showWindows !== 'minimized' && 'opacity-60'
 					)}
 				>
-					{#if win.icon}{@const Icon = win.icon}<Icon class="size-(--era-h-icon) shrink-0" />{/if}
+					{#if win.icon}{@const Icon = win.icon}<Icon class="size-icon shrink-0" />{/if}
 					<span class="truncate">{win.title}</span>
 				</Button>
 			{/each}
@@ -284,7 +279,7 @@
 	     once there's something to switch between (and only when the bar exposes
 	     workspaces at all). -->
 	{#if showWorkspaces && pm.workspaces.length > 1}
-		<div class="flex shrink-0 items-center gap-(--era-gap)">
+		<div class="flex shrink-0 items-center gap-gutter">
 			{#each pm.workspaces as ws, i (ws.id)}
 				<Button
 					icon
@@ -301,7 +296,7 @@
 	{/if}
 
 	<!-- System tray -->
-	<div class="flex shrink-0 items-center gap-(--era-gap)">
+	<div class="flex shrink-0 items-center gap-gutter">
 		{@render end?.()}
 		<!-- The bell only exists while there's something unread — silent means
 		     no dead chrome (the center stays reachable via onNotifications
@@ -309,7 +304,7 @@
 		{#if notif.unread > 0}
 			<div class="relative">
 				<Button icon size="control" aria-label="Notifications" onclick={onNotifications}>
-					<Bell class="size-(--era-h-icon)" />
+					<Bell class="size-icon" />
 				</Button>
 				<span
 					class="absolute -top-0.5 -right-0.5 flex min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[0.65rem] leading-4 text-primary-fg"
@@ -336,7 +331,7 @@
 	<div
 		data-mode="touch"
 		class={cn(
-			'absolute right-(--era-gap) bottom-[max(var(--era-gap),env(safe-area-inset-bottom))] sm:hidden',
+			'absolute right-gutter bottom-[max(var(--era-gap),env(safe-area-inset-bottom))] sm:hidden',
 			LAYER.taskbar
 		)}
 	>
@@ -350,10 +345,10 @@
 			size="control"
 			tone="accent"
 			aria-label="Open command bar"
-			class="shadow-(--era-shadow-lg)"
+			class="shadow-lg"
 			onclick={() => commandBar?.focusInput()}
 		>
-			<Terminal class="size-(--era-h-icon)" />
+			<Terminal class="size-icon" />
 		</Button>
 	</div>
 {/if}

package/dist/os/toast.svelte

@@ -8,7 +8,7 @@
 	const notif = getNotifications();
 
 	const accent: Record<AppNotification['tone'], string> = {
-		default: 'bg-(--era-highlight)',
+		default: 'bg-highlight',
 		accent: 'bg-primary',
 		success: 'bg-success',
 		destructive: 'bg-destructive'
@@ -16,20 +16,15 @@
 </script>
 
 <div
-	class="pointer-events-auto relative flex w-80 gap-(--era-inset-chip) overflow-hidden rounded-(--era-rd-bar) bg-(--era-surface-bg-elevated) p-(--era-pad-card) shadow-(--era-shadow-lg) glass-blur"
+	class="pointer-events-auto relative flex w-80 gap-inset-chip overflow-hidden rounded-bar bg-elevated p-card shadow-lg glass-blur"
 >
-	<span
-		class={cn(
-			'absolute inset-y-(--era-panel-inset) left-(--era-panel-inset) w-1 rounded-full',
-			accent[n.tone]
-		)}
-	></span>
+	<span class={cn('absolute inset-y-menu left-menu w-1 rounded-full', accent[n.tone])}></span>
 	{#if n.icon}
 		{@const Icon = n.icon}
-		<Icon class="mt-0.5 size-(--era-h-chip) shrink-0 text-muted" />
+		<Icon class="mt-0.5 size-chip shrink-0 text-muted" />
 	{/if}
 	<div class="min-w-0 flex-1">
-		<div class="flex items-start gap-(--era-gap)">
+		<div class="flex items-start gap-gutter">
 			<p class="min-w-0 flex-1 truncate text-body text-bright">{n.title}</p>
 			<!-- The dismiss family's ×: xxs tier, whose default glyph is the 12px
 			     dismiss ink (the size class that sat on the <X> lost to the Button
@@ -46,7 +41,7 @@
 		</div>
 		{#if n.body}<p class="mt-0.5 text-body leading-body break-words text-muted">{n.body}</p>{/if}
 		{#if n.actions.length}
-			<div class="mt-(--era-inset-chip) flex flex-wrap gap-(--era-gap)">
+			<div class="mt-inset-chip flex flex-wrap gap-gutter">
 				{#each n.actions as action (action.label)}
 					<Button
 						size="icon"

package/dist/os/toaster.svelte

@@ -16,7 +16,7 @@
      desktop; each toast re-enables its own. -->
 <div
 	class={cn(
-		'pointer-events-none absolute right-(--era-pad-card) bottom-(--era-h-bar) flex flex-col-reverse gap-(--era-inset-chip)',
+		'pointer-events-none absolute right-card bottom-(--era-h-bar) flex flex-col-reverse gap-inset-chip',
 		LAYER.toast,
 		className
 	)}

package/dist/styles/density.css

@@ -74,7 +74,6 @@
  *   --era-pad-content   2·so    16 / 22.5 / 30 / 48  — full content panels (docs sections)
  *
  * Whitespace share rises with mode: pad-md / h-control = 0.33 dense → 0.50 touch.
- * --era-content-p is kept as an alias of --era-pad-content.
  *
  * IDENTITY USED AT NESTING SITES
  * ==============================
@@ -312,7 +311,6 @@
 	--era-pad-content: calc(var(--era-so) * 2); /* 16/22.5/30/48 */
 
 	/* Content padding — alias of pad-lg (formerly 4·sp − 16 ≈ the same curve) */
-	--era-content-p: var(--era-pad-content);
 }
 
 /* -------------------------------------------------- */

package/dist/styles/index.css

@@ -227,7 +227,9 @@
  * the pair so the runtime audit can point at it). It exists so the failure mode
  * is a no-op instead of unreadable text. */
 .era-text-trim.truncate,
-.era-text-trim-caps.truncate {
+.era-text-trim-caps.truncate,
+.era-label-ink.truncate,
+.era-token-ink.truncate {
 	line-height: normal;
 	text-box: normal;
 }
@@ -271,6 +273,10 @@
  *
  * @use on a native single-line <input> (or the text layer that must mirror
  * one) inside a fixed-height field — never alongside era-text-trim. */
+@utility era-ink-center {
+	padding-bottom: 0.08em;
+}
+
 /* 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.
  *
@@ -299,8 +305,9 @@
  * Prose and sentence-case labels keep era-text-trim; this is for tokens.
  *
  * @use 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). */
+ * 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. */
 @utility era-token-ink {
 	display: block;
 	align-content: center;
@@ -309,8 +316,39 @@
 	text-box: trim-both cap alphabetic;
 }
 
-@utility era-ink-center {
-	padding-bottom: 0.08em;
+/* 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.
+ *
+ * @use 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). */
+@utility era-label-ink {
+	display: block;
+	align-content: center;
+	line-height: 1;
+	text-box: trim-both ex alphabetic;
 }
 
 /* In-progress text shimmer — a bright sweep through muted text (the standard
@@ -453,6 +491,56 @@
 	--color-elevated: var(--era-surface-bg-elevated);
 	--color-highlight: var(--era-highlight);
 	--color-overlay: var(--era-overlay-bg);
+	/* THE SPACING SCALE — one entry per token, from which Tailwind derives the
+	 * WHOLE directional family: p/px/py/pt/pr/pb/pl/ps/pe, every margin, gap and
+	 * gap-x/y, inset/top/right/bottom/left, translate, and the sizing prefixes.
+	 *
+	 * These were hand-written `@utility` blocks, which could only ever cover the
+	 * spellings someone remembered to write: `px-gutter` existed and `mt-gutter`
+	 * did not, `p-inset-control` existed and `pl-inset-control` did not, so the
+	 * library fell back to `mt-(--era-gap)` in exactly the places the named API
+	 * was supposed to cover. One line here replaces twenty blocks and leaves no
+	 * spelling missing.
+	 *
+	 * ONLY genuine spacing belongs here. The namespace is shared across
+	 * h/w/p/m/gap, so a name registered here means the same length in ALL of
+	 * them — true of a gap or an inset, false of a TIER HEIGHT. Tiers stay
+	 * hand-written per prefix below, and the two vocabularies deliberately share
+	 * no word: icon/pill/chip/control/bar are heights; gutter, card, panel,
+	 * content, menu, field and the inset-* names are spacing. Registering a tier
+	 * name here would silently make `px-control` mean 24px of side padding. */
+	--spacing-gutter: var(--era-gap);
+	--spacing-panel: var(--era-pad-panel);
+	--spacing-card: var(--era-pad-card);
+	--spacing-content: var(--era-pad-content);
+	--spacing-menu: var(--era-panel-inset);
+	--spacing-field: var(--era-field-px);
+	/* @use 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. */
+	--spacing-inset-pill: var(--era-inset-pill);
+	--spacing-inset-chip: var(--era-inset-chip);
+	--spacing-inset-control: var(--era-inset-control);
+	/* @use 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. */
+	--spacing-icon-inset-pill: var(--era-icon-inset-pill);
+	--spacing-icon-inset-chip: var(--era-icon-inset-chip);
+	--spacing-icon-inset-control: var(--era-icon-inset-control);
+	--spacing-icon-inset-bar: var(--era-icon-inset-bar);
+	--spacing-pill-inset-chip: var(--era-pill-inset-chip);
+	--spacing-pill-inset-control: var(--era-pill-inset-control);
+	--spacing-chip-inset-control: var(--era-chip-inset-control);
+	--spacing-chip-inset-bar: var(--era-chip-inset-bar);
+	/* @use 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). */
+	--spacing-glyph-icon: var(--era-glyph-icon);
+	--spacing-glyph-pill: var(--era-glyph-pill);
+	/* @use the recessed field fill — bg-field is a text input's resting well,
+	 * bg-field-highlight its focused/hovered face. */
+	--color-field: var(--era-field-bg);
+	--color-field-highlight: var(--era-field-highlight);
 	/* Motion — bare transition utilities default to the motion axis, so
 	 * `transition-colors` alone is on-design (0s at instant, longer at extra).
 	 * ease-base/duration-base name the axis explicitly for overrides. */
@@ -501,12 +589,13 @@
 /* ------------------------------------------------------------------ */
 /* Named tier + spacing utilities                                     */
 /*                                                                    */
-/* Static utilities (not @theme) because Tailwind's spacing namespace */
-/* is shared across h/w/p/m/gap — registering `md` there would give   */
-/* px-gutter and h-control the SAME value, and era's tiers and insets are      */
-/* different token families. Each name below maps to exactly one      */
-/* token. Kept terse; the ladder itself is documented in density.css  */
-/* and on the /spacing page.                                          */
+/* What is left here is what the SPACING SCALE above cannot express: */
+/* a tier is a HEIGHT, and the spacing namespace is shared across     */
+/* h/w/p/m/gap, so registering `control` there would silently make    */
+/* px-control mean 24px of side padding. Tier names therefore get one */
+/* hand-written block per prefix that needs them, and the two         */
+/* vocabularies share no word. Kept terse; the ladder itself is       */
+/* documented in density.css and on the /spacing page.                */
 /* ------------------------------------------------------------------ */
 
 /* @use the tier-height ladder — h-icon (icon) · h-pill (nested pill) · h-chip
@@ -546,6 +635,46 @@
 	min-height: var(--era-h-bar);
 }
 
+/* @use a tier-sized WIDTH — the horizontal twin of the h-* ladder, for a rail or
+ * a column measured in tiers rather than in content. */
+@utility w-icon {
+	width: var(--era-h-icon);
+}
+@utility w-pill {
+	width: var(--era-h-pill);
+}
+@utility w-chip {
+	width: var(--era-h-chip);
+}
+@utility w-control {
+	width: var(--era-h-control);
+}
+@utility w-bar {
+	width: var(--era-h-bar);
+}
+
+/* @use 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. */
+@utility min-w-icon {
+	min-width: var(--era-h-icon);
+}
+@utility min-w-pill {
+	min-width: var(--era-h-pill);
+}
+@utility min-w-chip {
+	min-width: var(--era-h-chip);
+}
+@utility min-w-control {
+	min-width: var(--era-h-control);
+}
+@utility min-w-bar {
+	min-width: var(--era-h-bar);
+}
+
 /* @use a tier-sized square — size-icon is THE icon size (a Lucide glyph beside
  * body text), size-control a square control face. */
 @utility size-icon {
@@ -569,53 +698,6 @@
 	height: var(--era-h-bar);
 }
 
-/* @use the inter-element gap (sp/2) — flex/grid gap between sibling controls,
- * and the matching gutter padding a scrollable list or rail owes its rows on
- * all four sides (p-gutter on the rail = gap-gutter between its rows). */
-@utility gap-gutter {
-	gap: var(--era-gap);
-}
-@utility p-gutter {
-	padding: var(--era-gap);
-}
-@utility px-gutter {
-	padding-inline: var(--era-gap);
-}
-@utility py-gutter {
-	padding-block: var(--era-gap);
-}
-
-/* @use text-symmetric content padding — (tier − text)/2, the inset that
- * vertically centers body text in its tier; px-inset-control is a text button's
- * side padding, p-inset-control a code block's. */
-@utility p-inset-pill {
-	padding: var(--era-inset-pill);
-}
-@utility p-inset-chip {
-	padding: var(--era-inset-chip);
-}
-@utility p-inset-control {
-	padding: var(--era-inset-control);
-}
-@utility px-inset-pill {
-	padding-inline: var(--era-inset-pill);
-}
-@utility px-inset-chip {
-	padding-inline: var(--era-inset-chip);
-}
-@utility px-inset-control {
-	padding-inline: var(--era-inset-control);
-}
-@utility py-inset-pill {
-	padding-block: var(--era-inset-pill);
-}
-@utility py-inset-chip {
-	padding-block: var(--era-inset-chip);
-}
-@utility py-inset-control {
-	padding-block: var(--era-inset-control);
-}
-
 /* @use pill side padding — the wider-than-vertical horizontal breathing room
  * badge/chip text wants (glyph-advance derived, ~2× the vertical inset). */
 @utility px-pill {
@@ -624,24 +706,25 @@
 @utility px-chip {
 	padding-inline: var(--era-chip-px);
 }
-
-/* @use text-field side padding — where typed text starts in a control-tier input;
- * the named form of px-(--era-field-px). */
-@utility px-field {
-	padding-inline: var(--era-field-px);
+@utility pl-pill {
+	padding-left: var(--era-pill-px);
 }
-
-/* @use optical padding for unbounded containers — p-panel for compact shells
- * and menu-adjacent chrome, p-card for cards/dialogs/popovers, p-content for
- * full content panels. Grows super-linearly with density so whitespace holds
- * its perceived share as controls loosen. */
-@utility p-panel {
-	padding: var(--era-pad-panel);
+@utility pr-pill {
+	padding-right: var(--era-pill-px);
+}
+@utility pl-chip {
+	padding-left: var(--era-chip-px);
 }
-@utility p-card {
-	padding: var(--era-pad-card);
+@utility pr-chip {
+	padding-right: var(--era-chip-px);
 }
-/* A content panel always follows a section header ROW, and that row already
+
+/* @use 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.
+ *
+ * A content panel always follows a section header ROW, and that row already
  * contributes its own slack: the heading's text sits in an h-bar bar, so there
  * is (h-bar − text)/2 of empty bar under its glyphs before the panel even
  * starts. Padding the panel evenly on top of that spends the space twice — the
@@ -650,7 +733,7 @@
  *
  * So the block-start pays only the REMAINDER. The target is the indent: the
  * space under a heading should measure the same as the space beside the text,
- * which is --era-content-p. The header row already supplies (h-bar − text)/2 of
+ * which is --era-pad-content. The header row already supplies (h-bar − text)/2 of
  * it, so the panel adds what's left, and heading-to-paragraph reads equal to
  * the paragraph's own inset. Subtracting one --era-gap (the previous rule) left
  * the header's slack unaccounted for and the heading still detached.
@@ -658,16 +741,9 @@
  * Both terms are density-derived, so the equality holds at every mode; the
  * max() is the floor for a hypothetical mode where the row's slack would
  * exceed the inset outright. */
-@utility p-content {
-	padding: var(--era-content-p);
-	padding-top: max(0px, calc(var(--era-content-p) - (var(--era-h-bar) - var(--era-text)) / 2));
-}
-
-/* @use menu-panel padding — the surface-owned inset (0 on flat, 2px on
- * glass/bevel) that keeps row highlights inside a floating panel's frame;
- * pairs with rounded-menu-item on the rows. */
-@utility p-menu {
-	padding: var(--era-panel-inset);
+@utility p-section {
+	padding: var(--era-pad-content);
+	padding-top: max(0px, calc(var(--era-pad-content) - (var(--era-h-bar) - var(--era-text)) / 2));
 }
 
 /* @use the motion axis as an explicit transition-duration — for the rare case

package/dist/ui/accordion/accordion-content.svelte

@@ -8,7 +8,7 @@
 <Accordion.Content
 	bind:ref
 	class={cn(
-		'overflow-hidden border-t border-divider-faded p-(--era-content-p) text-body leading-body text-muted',
+		'overflow-hidden border-t border-divider-faded p-content text-body leading-body text-muted',
 		className
 	)}
 	{...restProps}

package/dist/ui/accordion/accordion-trigger.svelte

@@ -14,11 +14,11 @@
 <Accordion.Trigger
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-control) w-full items-center justify-between gap-(--era-icon-inset-chip) rounded-(--era-rd-control) px-(--era-inset-control) text-body text-fg hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow) focus:outline-none disabled:opacity-50',
+		'flex h-control w-full items-center justify-between gap-icon-inset-chip rounded-control px-inset-control text-body text-fg hover:bg-highlight hover:shadow-highlight focus:outline-none disabled:opacity-50',
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronDown class="size-(--era-h-icon) text-muted" />
+	<ChevronDown class="size-icon text-muted" />
 </Accordion.Trigger>

package/dist/ui/alert-dialog/alert-dialog-content.svelte

@@ -11,11 +11,11 @@
 </script>
 
 <AlertDialog.Portal>
-	<AlertDialog.Overlay class="fixed inset-0 z-50 bg-(--era-overlay-bg)" />
+	<AlertDialog.Overlay class="fixed inset-0 z-50 bg-overlay" />
 	<AlertDialog.Content
 		bind:ref
 		class={cn(
-			'fixed top-1/2 left-1/2 z-50 flex w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-(--era-gap) rounded-(--era-rd-bar) border border-divider bg-(--era-surface-bg) p-(--era-pad-card) shadow-(--era-shadow-lg) glass-blur',
+			'fixed top-1/2 left-1/2 z-50 flex w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-gutter rounded-bar border border-divider bg-well p-card shadow-lg glass-blur',
 			className
 		)}
 		{...restProps}

package/dist/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -11,6 +11,6 @@
 
 <AlertDialog.Overlay
 	bind:ref
-	class={cn('fixed inset-0 z-50 bg-(--era-overlay-bg)', className)}
+	class={cn('fixed inset-0 z-50 bg-overlay', className)}
 	{...restProps}
 />