@signal9/era-ui 7.0.0 → 9.0.0

package/dist/generated-docs/utilities.md

@@ -4,8 +4,8 @@ The CSS classes era ships alongside the components — links, ink-centred text,
 
 ## Overview
 
-era's styling API is pure class names — write `h-md rounded-md px-md shadow`,
-never the `h-(--era-h-md)` var-class spelling. Everything below rides along
+era's styling API is pure class names — write `h-control rounded-control px-gutter shadow`,
+never the `h-(--era-h-control)` var-class spelling. Everything below rides along
 with the stylesheet and needs no import:
 
 ```ts
@@ -13,7 +13,7 @@ import "@sig-nine/era-ui/css";
 ```
 
 ```svelte
-<button class="h-md rounded-md px-inset-md shadow text-body">era styled</button>
+<button class="h-control rounded-control px-inset-control shadow text-body">era styled</button>
 ```
 
 Alongside the `@utility` classes referenced below, era registers named theme
@@ -23,8 +23,8 @@ motion):
 
 | Stock-looking class | What it resolves to |
 |---|---|
-| `rounded-xs/xxs/sm/md/lg` | the concentric radius ladder (collapses on `data-corners="square"`) |
-| `rounded-item` | menu-row radius, concentric inside a `rounded-md` panel |
+| `rounded-icon/xxs/sm/md/lg` | the concentric radius ladder (collapses on `data-corners="square"`) |
+| `rounded-menu-item` | menu-row radius, concentric inside a `rounded-control` panel |
 | `shadow` / `shadow-lg` | resting control edge / floating panel chrome, per surface |
 | `shadow-well` / `shadow-pressed` / `shadow-highlight` | recessed, pressed/latched, hover-material chrome |
 | `bg-well` / `bg-elevated` / `bg-highlight` / `bg-overlay` | surface fills: resting, raised, transient feedback, modal scrim |
@@ -34,7 +34,7 @@ motion):
 
 Deliberate gaps: `w-*`/`min-w-*` tier names would shadow Tailwind's container
 scale (`min-w-md` stays 28rem), and the concentric-inset tokens are advanced
-enough to stay var-form — `min-w-(--era-h-md)` etc. remain the escape hatch.
+enough to stay var-form — `min-w-(--era-h-control)` etc. remain the escape hatch.
 
 | Utility | Use it for |
 |---|---|
@@ -47,17 +47,16 @@ enough to stay var-form — `min-w-(--era-h-md)` etc. remain the escape hatch.
 | `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-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-xs` `h-xxs` `h-sm` `h-md` `h-lg` | the tier-height ladder — h-xs (icon) · h-xxs (nested pill) · h-sm (standalone pill) · h-md (control) · h-lg (bar); the named form of h-(--era-h-*). |
-| `min-h-xs` `min-h-xxs` `min-h-sm` `min-h-md` `min-h-lg` | minimum tier height for containers that may grow — a bar that is at least lg-tier but can wrap (min-h-lg). |
-| `size-xs` `size-xxs` `size-sm` `size-md` `size-lg` | a tier-sized square — size-xs is THE icon size (a Lucide glyph beside body text), size-md a square control face. |
-| `px-sm` `px-md` `px-lg` | tier-to-tier nesting padding (sp/2) — the horizontal padding of a bar or row that holds tiered controls; the named form of px-(--era-px-*). |
+| `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-*). |
+| `min-h-icon` `min-h-pill` `min-h-chip` `min-h-control` `min-h-bar` | minimum tier height for containers that may grow — a bar that is at least lg-tier but can wrap (min-h-bar). |
+| `size-icon` `size-pill` `size-chip` `size-control` `size-bar` | a tier-sized square — size-icon is THE icon size (a Lucide glyph beside body text), size-control a square control face. |
 | `gap-gutter` `p-gutter` `px-gutter` `py-gutter` | the inter-element gap (sp/2) — flex/grid gap between sibling controls, and the matching gutter padding a scrollable list or rail owes its rows on all four sides (p-gutter on the rail = gap-gutter between its rows). |
-| `p-inset-xxs` `p-inset-sm` `p-inset-md` `px-inset-xxs` `px-inset-sm` `px-inset-md` `py-inset-xxs` `py-inset-sm` `py-inset-md` | text-symmetric content padding — (tier − text)/2, the inset that vertically centers body text in its tier; px-inset-md is a text button's side padding, p-inset-md a code block's. |
-| `px-pill-xxs` `px-pill-sm` | pill side padding — the wider-than-vertical horizontal breathing room badge/chip text wants (glyph-advance derived, ~2× the vertical inset). |
-| `px-field` | text-field side padding — where typed text starts in an md-tier input; the named form of px-(--era-field-px). |
+| `p-inset-pill` `p-inset-chip` `p-inset-control` `px-inset-pill` `px-inset-chip` `px-inset-control` `py-inset-pill` `py-inset-chip` `py-inset-control` | 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. |
+| `px-pill` `px-chip` | pill side padding — the wider-than-vertical horizontal breathing room badge/chip text wants (glyph-advance derived, ~2× the vertical inset). |
+| `px-field` | text-field side padding — where typed text starts in a control-tier input; the named form of px-(--era-field-px). |
 | `p-panel` `p-card` | optical padding for unbounded containers — p-panel for compact shells and menu-adjacent chrome, p-card for cards/dialogs/popovers, p-content for full content panels. Grows super-linearly with density so whitespace holds its perceived share as controls loosen. |
 | `p-content` | — |
-| `p-menu` | menu-panel padding — the surface-owned inset (0 on flat, 2px on glass/bevel) that keeps row highlights inside a floating panel's frame; pairs with rounded-item on the rows. |
+| `p-menu` | menu-panel padding — the surface-owned inset (0 on flat, 2px on glass/bevel) that keeps row highlights inside a floating panel's frame; pairs with rounded-menu-item on the rows. |
 | `duration-base` | the motion axis as an explicit transition-duration — for the rare case a utility (not the transition-* default) needs to name it; 0s at data-motion="instant", longer at "extra". |
 | `glass-blur` | the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface="glass" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface. |
 
@@ -345,98 +344,80 @@ Declared in `index.css`.
 }
 ```
 
-## h-xs · h-xxs · h-sm · h-md · h-lg
+## h-icon · h-pill · h-chip · h-control · h-bar
 
-**Use it for:** the tier-height ladder — h-xs (icon) · h-xxs (nested pill) · h-sm (standalone pill) · h-md (control) · h-lg (bar); the named form of h-(--era-h-*).
+**Use it for:** 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-*).
 
 Declared in `index.css`.
 
 ```css
-@utility h-xs {
-	height: var(--era-h-xs);
+@utility h-icon {
+	height: var(--era-h-icon);
 }
-@utility h-xxs {
-	height: var(--era-h-xxs);
+@utility h-pill {
+	height: var(--era-h-pill);
 }
-@utility h-sm {
-	height: var(--era-h-sm);
+@utility h-chip {
+	height: var(--era-h-chip);
 }
-@utility h-md {
-	height: var(--era-h-md);
+@utility h-control {
+	height: var(--era-h-control);
 }
-@utility h-lg {
-	height: var(--era-h-lg);
+@utility h-bar {
+	height: var(--era-h-bar);
 }
 ```
 
-## min-h-xs · min-h-xxs · min-h-sm · min-h-md · min-h-lg
+## min-h-icon · min-h-pill · min-h-chip · min-h-control · min-h-bar
 
-**Use it for:** minimum tier height for containers that may grow — a bar that is at least lg-tier but can wrap (min-h-lg).
+**Use it for:** minimum tier height for containers that may grow — a bar that is at least lg-tier but can wrap (min-h-bar).
 
 Declared in `index.css`.
 
 ```css
-@utility min-h-xs {
-	min-height: var(--era-h-xs);
+@utility min-h-icon {
+	min-height: var(--era-h-icon);
 }
-@utility min-h-xxs {
-	min-height: var(--era-h-xxs);
+@utility min-h-pill {
+	min-height: var(--era-h-pill);
 }
-@utility min-h-sm {
-	min-height: var(--era-h-sm);
+@utility min-h-chip {
+	min-height: var(--era-h-chip);
 }
-@utility min-h-md {
-	min-height: var(--era-h-md);
+@utility min-h-control {
+	min-height: var(--era-h-control);
 }
-@utility min-h-lg {
-	min-height: var(--era-h-lg);
+@utility min-h-bar {
+	min-height: var(--era-h-bar);
 }
 ```
 
-## size-xs · size-xxs · size-sm · size-md · size-lg
+## size-icon · size-pill · size-chip · size-control · size-bar
 
-**Use it for:** a tier-sized square — size-xs is THE icon size (a Lucide glyph beside body text), size-md a square control face.
+**Use it for:** a tier-sized square — size-icon is THE icon size (a Lucide glyph beside body text), size-control a square control face.
 
 Declared in `index.css`.
 
 ```css
-@utility size-xs {
-	width: var(--era-h-xs);
-	height: var(--era-h-xs);
+@utility size-icon {
+	width: var(--era-h-icon);
+	height: var(--era-h-icon);
 }
-@utility size-xxs {
-	width: var(--era-h-xxs);
-	height: var(--era-h-xxs);
+@utility size-pill {
+	width: var(--era-h-pill);
+	height: var(--era-h-pill);
 }
-@utility size-sm {
-	width: var(--era-h-sm);
-	height: var(--era-h-sm);
+@utility size-chip {
+	width: var(--era-h-chip);
+	height: var(--era-h-chip);
 }
-@utility size-md {
-	width: var(--era-h-md);
-	height: var(--era-h-md);
+@utility size-control {
+	width: var(--era-h-control);
+	height: var(--era-h-control);
 }
-@utility size-lg {
-	width: var(--era-h-lg);
-	height: var(--era-h-lg);
-}
-```
-
-## px-sm · px-md · px-lg
-
-**Use it for:** tier-to-tier nesting padding (sp/2) — the horizontal padding of a bar or row that holds tiered controls; the named form of px-(--era-px-*).
-
-Declared in `index.css`.
-
-```css
-@utility px-sm {
-	padding-inline: var(--era-px-sm);
-}
-@utility px-md {
-	padding-inline: var(--era-px-md);
-}
-@utility px-lg {
-	padding-inline: var(--era-px-lg);
+@utility size-bar {
+	width: var(--era-h-bar);
+	height: var(--era-h-bar);
 }
 ```
 
@@ -461,60 +442,60 @@ Declared in `index.css`.
 }
 ```
 
-## p-inset-xxs · p-inset-sm · p-inset-md · px-inset-xxs · px-inset-sm · px-inset-md · py-inset-xxs · py-inset-sm · py-inset-md
+## p-inset-pill · p-inset-chip · p-inset-control · px-inset-pill · px-inset-chip · px-inset-control · py-inset-pill · py-inset-chip · py-inset-control
 
-**Use it for:** text-symmetric content padding — (tier − text)/2, the inset that vertically centers body text in its tier; px-inset-md is a text button's side padding, p-inset-md a code block's.
+**Use it for:** 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.
 
 Declared in `index.css`.
 
 ```css
-@utility p-inset-xxs {
-	padding: var(--era-inset-xxs);
+@utility p-inset-pill {
+	padding: var(--era-inset-pill);
 }
-@utility p-inset-sm {
-	padding: var(--era-inset-sm);
+@utility p-inset-chip {
+	padding: var(--era-inset-chip);
 }
-@utility p-inset-md {
-	padding: var(--era-inset-md);
+@utility p-inset-control {
+	padding: var(--era-inset-control);
 }
-@utility px-inset-xxs {
-	padding-inline: var(--era-inset-xxs);
+@utility px-inset-pill {
+	padding-inline: var(--era-inset-pill);
 }
-@utility px-inset-sm {
-	padding-inline: var(--era-inset-sm);
+@utility px-inset-chip {
+	padding-inline: var(--era-inset-chip);
 }
-@utility px-inset-md {
-	padding-inline: var(--era-inset-md);
+@utility px-inset-control {
+	padding-inline: var(--era-inset-control);
 }
-@utility py-inset-xxs {
-	padding-block: var(--era-inset-xxs);
+@utility py-inset-pill {
+	padding-block: var(--era-inset-pill);
 }
-@utility py-inset-sm {
-	padding-block: var(--era-inset-sm);
+@utility py-inset-chip {
+	padding-block: var(--era-inset-chip);
 }
-@utility py-inset-md {
-	padding-block: var(--era-inset-md);
+@utility py-inset-control {
+	padding-block: var(--era-inset-control);
 }
 ```
 
-## px-pill-xxs · px-pill-sm
+## px-pill · px-chip
 
 **Use it for:** pill side padding — the wider-than-vertical horizontal breathing room badge/chip text wants (glyph-advance derived, ~2× the vertical inset).
 
 Declared in `index.css`.
 
 ```css
-@utility px-pill-xxs {
-	padding-inline: var(--era-pill-xxs);
+@utility px-pill {
+	padding-inline: var(--era-pill-px);
 }
-@utility px-pill-sm {
-	padding-inline: var(--era-pill-sm);
+@utility px-chip {
+	padding-inline: var(--era-chip-px);
 }
 ```
 
 ## px-field
 
-**Use it for:** text-field side padding — where typed text starts in an md-tier input; the named form of px-(--era-field-px).
+**Use it for:** text-field side padding — where typed text starts in a control-tier input; the named form of px-(--era-field-px).
 
 Declared in `index.css`.
 
@@ -532,25 +513,25 @@ Declared in `index.css`.
 
 ```css
 @utility p-panel {
-	padding: var(--era-pad-sm);
+	padding: var(--era-pad-panel);
 }
 @utility p-card {
-	padding: var(--era-pad-md);
+	padding: var(--era-pad-card);
 }
 ```
 
 ## p-content
 
 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-lg bar, so there
-is (h-lg − text)/2 of empty bar under its glyphs before the panel even
+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
 header ends up floating between the section above and the paragraph it
 introduces rather than binding to it.
 
 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-lg − text)/2 of
+which is --era-content-p. 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.
@@ -564,13 +545,13 @@ Declared in `index.css`.
 ```css
 @utility p-content {
 	padding: var(--era-content-p);
-	padding-top: max(0px, calc(var(--era-content-p) - (var(--era-h-lg) - var(--era-text)) / 2));
+	padding-top: max(0px, calc(var(--era-content-p) - (var(--era-h-bar) - var(--era-text)) / 2));
 }
 ```
 
 ## p-menu
 
-**Use it for:** menu-panel padding — the surface-owned inset (0 on flat, 2px on glass/bevel) that keeps row highlights inside a floating panel's frame; pairs with rounded-item on the rows.
+**Use it for:** menu-panel padding — the surface-owned inset (0 on flat, 2px on glass/bevel) that keeps row highlights inside a floating panel's frame; pairs with rounded-menu-item on the rows.
 
 Declared in `index.css`.
 

package/dist/os/notification-center.svelte

@@ -51,23 +51,23 @@
 			class="absolute right-0 flex w-80 flex-col border-l border-divider-faded bg-(--era-surface-bg) shadow-(--era-shadow-lg) glass-blur"
 		>
 			<header
-				class="flex shrink-0 items-center gap-(--era-gap) border-b border-divider-faded px-(--era-pad-md) py-(--era-inset-sm)"
+				class="flex shrink-0 items-center gap-(--era-gap) border-b border-divider-faded px-(--era-pad-card) py-(--era-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-xs)" />
+					<BellOff class="size-(--era-h-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-sm) overflow-y-auto overscroll-contain p-(--era-pad-md)"
+				class="scrollbar-none flex min-h-0 flex-1 flex-col gap-(--era-inset-chip) overflow-y-auto overscroll-contain p-(--era-pad-card)"
 			>
 				{#each notif.items as n (n.id)}
 					<div
-						class="relative flex gap-(--era-inset-sm) overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-(--era-inset-md)"
+						class="relative flex gap-(--era-inset-chip) overflow-hidden rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) p-(--era-inset-control)"
 					>
 						<span
 							class={cn(
@@ -76,7 +76,7 @@
 							)}
 						></span>
 						{#if n.icon}{@const Icon = n.icon}<Icon
-								class="mt-0.5 size-(--era-h-xs) shrink-0 text-muted"
+								class="mt-0.5 size-(--era-h-icon) shrink-0 text-muted"
 							/>{/if}
 						<div class="min-w-0 flex-1">
 							<div class="flex items-baseline gap-(--era-gap)">
@@ -94,7 +94,7 @@
 			</div>
 
 			{#if notif.items.length}
-				<footer class="shrink-0 border-t border-divider-faded p-(--era-inset-sm)">
+				<footer class="shrink-0 border-t border-divider-faded p-(--era-inset-chip)">
 					<Button variant="link" size="sm" class="w-full" onclick={() => notif.clear()}>
 						Clear all
 					</Button>

package/dist/os/pane.svelte

@@ -88,13 +88,13 @@
 >
 	<!-- Asymmetric on purpose, the same way a Conversations row is: the TRAILING
 	     side holds xxs buttons, so it keeps the handle's own concentric wall
-	     (--era-xxs-inset-md, 3/5/7/11) and their corners nest in the pane's; the
+	     (--era-pill-inset-control, 3/5/7/11) and their corners nest in the pane's; the
 	     LEADING side holds a bare glyph and a label, which have no corner to nest,
 	     so they sit at the text inset instead. At the wall the glyph's ink was 3px
 	     from the edge against 5px above and below it — read as crowded because it
-	     was. --era-inset-md is (h-md − text)/2, so the label now starts the same
+	     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-md)" center={pane.center}>
+	<Pane.Handle class="gap-(--era-gap) pl-(--era-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-xs) shrink-0 text-muted" />
+				<Icon class="size-(--era-h-icon) shrink-0 text-muted" />
 			{/if}
 			<span class={cn('truncate text-body', focused ? 'text-bright' : 'text-muted')}
 				>{pane.title}</span
@@ -140,7 +140,9 @@
 				icon
 				size="xxs"
 				tone={armed === 'minimize' ? 'warning' : armed === 'maximize' ? 'success' : 'destructive'}
-				class={armed === 'maximize' ? '[&_svg]:size-(--era-icon-xxs)' : '[&_svg]:size-(--era-h-xs)'}
+				class={armed === 'maximize'
+					? '[&_svg]:size-(--era-glyph-pill)'
+					: '[&_svg]:size-(--era-h-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

@@ -194,7 +194,7 @@
 </script>
 
 <!-- Flush: three edges touch the shell; the exposed OUTER corners are the two
-     facing the desktop, rounded at the bar's own tier (h-lg → rd-lg), with a
+     facing the desktop, rounded at the bar's own tier (h-bar → rd-lg), with a
      divider on the open edge. Floating: a free-standing Bar tile — gutter all
      around, fully rounded, no border. The corners axis gates the radius for
      free: data-corners="square" zeroes --era-roundness-scale and with it rd-lg. -->
@@ -202,17 +202,17 @@
 	bind:this={ref}
 	bind:clientHeight={barHeight}
 	class={cn(
-		'absolute flex h-(--era-h-lg) items-center gap-(--era-gap) bg-(--era-surface-bg-elevated) px-(--era-inset-sm) shadow-(--era-shadow-lg) glass-blur',
+		'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',
 		floating
 			? cn(
-					'inset-x-(--era-gap) rounded-(--era-rd-lg)',
+					'inset-x-(--era-gap) rounded-(--era-rd-bar)',
 					position === 'top' ? 'top-(--era-gap)' : 'bottom-(--era-gap)'
 				)
 			: cn(
 					'inset-x-0 border-divider-faded',
 					position === 'top'
-						? 'top-0 rounded-b-(--era-rd-lg) border-b'
-						: 'bottom-0 rounded-t-(--era-rd-lg) border-t'
+						? 'top-0 rounded-b-(--era-rd-bar) border-b'
+						: 'bottom-0 rounded-t-(--era-rd-bar) border-t'
 				),
 		LAYER.taskbar,
 		className
@@ -235,7 +235,7 @@
 		<div class="flex shrink-0 items-center gap-(--era-gap)">
 			{#each pinned as p (p.appId)}
 				<Button icon size="default" aria-label={p.title} onclick={() => pm.open(p.appId)}>
-					{#if p.icon}{@const Icon = p.icon}<Icon class="size-(--era-h-xs)" />{/if}
+					{#if p.icon}{@const Icon = p.icon}<Icon class="size-(--era-h-icon)" />{/if}
 				</Button>
 			{/each}
 		</div>
@@ -273,7 +273,7 @@
 						win.state === 'minimized' && showWindows !== 'minimized' && 'opacity-60'
 					)}
 				>
-					{#if win.icon}{@const Icon = win.icon}<Icon class="size-(--era-h-xs) shrink-0" />{/if}
+					{#if win.icon}{@const Icon = win.icon}<Icon class="size-(--era-h-icon) shrink-0" />{/if}
 					<span class="truncate">{win.title}</span>
 				</Button>
 			{/each}
@@ -309,7 +309,7 @@
 		{#if notif.unread > 0}
 			<div class="relative">
 				<Button icon size="default" aria-label="Notifications" onclick={onNotifications}>
-					<Bell class="size-(--era-h-xs)" />
+					<Bell class="size-(--era-h-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"
@@ -329,7 +329,7 @@
      already puts the prompt in reach.
 
      data-mode="touch" scopes the DENSITY axis to just this control, so it and
-     its icon re-tier to the touch scale (h-md 48px, icon 22px) however dense the
+     its icon re-tier to the touch scale (h-control 48px, icon 22px) however dense the
      shell around it is — a proper thumb target for the one action a phone user
      can't otherwise reach, without hardcoding a size. -->
 {#if mobileLauncher && position === 'top'}
@@ -353,7 +353,7 @@
 			class="shadow-(--era-shadow-lg)"
 			onclick={() => commandBar?.focusInput()}
 		>
-			<Terminal class="size-(--era-h-xs)" />
+			<Terminal class="size-(--era-h-icon)" />
 		</Button>
 	</div>
 {/if}

package/dist/os/toast.svelte

@@ -16,7 +16,7 @@
 </script>
 
 <div
-	class="pointer-events-auto relative flex w-80 gap-(--era-inset-sm) overflow-hidden rounded-(--era-rd-lg) bg-(--era-surface-bg-elevated) p-(--era-pad-md) shadow-(--era-shadow-lg) glass-blur"
+	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"
 >
 	<span
 		class={cn(
@@ -26,7 +26,7 @@
 	></span>
 	{#if n.icon}
 		{@const Icon = n.icon}
-		<Icon class="mt-0.5 size-(--era-h-sm) shrink-0 text-muted" />
+		<Icon class="mt-0.5 size-(--era-h-chip) shrink-0 text-muted" />
 	{/if}
 	<div class="min-w-0 flex-1">
 		<div class="flex items-start gap-(--era-gap)">
@@ -46,7 +46,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-sm) flex flex-wrap gap-(--era-gap)">
+			<div class="mt-(--era-inset-chip) flex flex-wrap gap-(--era-gap)">
 				{#each n.actions as action (action.label)}
 					<Button
 						size="xs"

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-md) bottom-(--era-h-lg) flex flex-col-reverse gap-(--era-inset-sm)',
+		'pointer-events-none absolute right-(--era-pad-card) bottom-(--era-h-bar) flex flex-col-reverse gap-(--era-inset-chip)',
 		LAYER.toast,
 		className
 	)}