@signal9/era-ui 3.0.1 → 3.2.0

package/dist/styles/index.css

@@ -169,10 +169,70 @@
 	}
 }
 
-/* Register color tokens as Tailwind theme values for autocomplete and bare utility usage */
+/* ------------------------------------------------------------------ */
+/* THE PUBLIC CLASS API                                               */
+/*                                                                    */
+/* Era's consumer-facing styling surface is NAMED utilities — a user  */
+/* of the library writes `h-md rounded-md px-md shadow`, never        */
+/* `h-(--era-h-md)`-style var classes. Where Tailwind already has a   */
+/* name for the concept (rounded-md, shadow, ease) era OVERLOADS it   */
+/* so stock-looking markup renders on-design; where it doesn't, era   */
+/* registers its own (h-md, px-md, gap-gutter, p-card).               */
+/*                                                                    */
+/* The --era-* custom properties remain the internal contract (and    */
+/* the escape hatch for anything without a name — e.g. min-w-* tier   */
+/* names are NOT registered because Tailwind's container scale        */
+/* already owns min-w-md/lg; use min-w-(--era-h-md) there).           */
+/*                                                                    */
+/* Everything here is a thin name over a token, so the full axis      */
+/* system — density, surface, corners, motion — flows through         */
+/* untouched. @theme inline is load-bearing: it inlines the var()     */
+/* reference instead of snapshotting a value, so each USE re-resolves */
+/* against the element's own inherited axes.                         */
+/* ------------------------------------------------------------------ */
 @theme inline {
 	/* Density-derived body size: `text-body` replaces text-[length:var(--era-text)] */
 	--text-body: var(--era-text);
+	/* Radius ladder — Tailwind's own rounded-* names now walk era's concentric
+	 * ladder (rd-T = rd-xs + (h-T − h-xs)/2), ride the corners toggle, and
+	 * collapse to 0 on square. rounded-item is the menu-row radius
+	 * (rd-md − panel-inset) that keeps rows concentric inside a rounded-md
+	 * panel on every surface. */
+	--radius-xs: var(--era-rd-xs);
+	--radius-xxs: var(--era-rd-xxs);
+	--radius-sm: var(--era-rd-sm);
+	--radius-md: var(--era-rd-md);
+	--radius-lg: var(--era-rd-lg);
+	--radius-item: var(--era-item-rd);
+	/* Surface chrome — bare `shadow` is the resting control edge, shadow-lg the
+	 * floating panel, shadow-well the recessed container, shadow-pressed the
+	 * active/latched face, shadow-highlight the material half of hover feedback.
+	 * Flat renders them as none, bevel as chisels, glass as frosted rims — the
+	 * class stays the same. */
+	--shadow: var(--era-shadow);
+	/* v4 marks bare `shadow` a deprecated spelling of shadow-sm, and lints
+	 * auto-fix one to the other — alias both to the control edge so either
+	 * spelling renders era chrome. */
+	--shadow-sm: var(--era-shadow);
+	--shadow-lg: var(--era-shadow-lg);
+	--shadow-well: var(--era-shadow-well);
+	--shadow-pressed: var(--era-shadow-pressed);
+	--shadow-highlight: var(--era-highlight-shadow);
+	/* Surface fills — bg-well is the surface's own resting fill (pairs with
+	 * shadow-well for recessed chrome), bg-elevated the raised tier (pairs with
+	 * shadow-lg + glass-blur for floating chrome), bg-highlight the transient
+	 * hover/focus/keyboard wash (pairs with shadow-highlight; latched states
+	 * stay on opaque bg-hover), bg-overlay the modal scrim. */
+	--color-well: var(--era-surface-bg);
+	--color-elevated: var(--era-surface-bg-elevated);
+	--color-highlight: var(--era-highlight);
+	--color-overlay: var(--era-overlay-bg);
+	/* 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. */
+	--default-transition-duration: var(--era-duration);
+	--default-transition-timing-function: var(--era-ease);
+	--ease-base: var(--era-ease);
 	/* Surface divider colors: border-divider, bg-divider-faded, … */
 	--color-divider: var(--era-divider-color);
 	--color-divider-faded: var(--era-divider-faded);
@@ -206,3 +266,176 @@
 	--color-warning: var(--color-warning);
 	--color-warning-fg: var(--color-warning-fg);
 }
+
+/* ------------------------------------------------------------------ */
+/* 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-md and h-md 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.                                          */
+/* ------------------------------------------------------------------ */
+
+/* @use 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-*). */
+@utility h-xs {
+	height: var(--era-h-xs);
+}
+@utility h-xxs {
+	height: var(--era-h-xxs);
+}
+@utility h-sm {
+	height: var(--era-h-sm);
+}
+@utility h-md {
+	height: var(--era-h-md);
+}
+@utility h-lg {
+	height: var(--era-h-lg);
+}
+
+/* @use minimum tier height for containers that may grow — a bar that is at
+ * least lg-tier but can wrap (min-h-lg). */
+@utility min-h-xs {
+	min-height: var(--era-h-xs);
+}
+@utility min-h-xxs {
+	min-height: var(--era-h-xxs);
+}
+@utility min-h-sm {
+	min-height: var(--era-h-sm);
+}
+@utility min-h-md {
+	min-height: var(--era-h-md);
+}
+@utility min-h-lg {
+	min-height: var(--era-h-lg);
+}
+
+/* @use a tier-sized square — size-xs is THE icon size (a Lucide glyph beside
+ * body text), size-md a square control face. */
+@utility size-xs {
+	width: var(--era-h-xs);
+	height: var(--era-h-xs);
+}
+@utility size-xxs {
+	width: var(--era-h-xxs);
+	height: var(--era-h-xxs);
+}
+@utility size-sm {
+	width: var(--era-h-sm);
+	height: var(--era-h-sm);
+}
+@utility size-md {
+	width: var(--era-h-md);
+	height: var(--era-h-md);
+}
+@utility size-lg {
+	width: var(--era-h-lg);
+	height: var(--era-h-lg);
+}
+
+/* @use 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-*). */
+@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);
+}
+
+/* @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-md is a text button's
+ * side padding, p-inset-md a code block's. */
+@utility p-inset-xxs {
+	padding: var(--era-inset-xxs);
+}
+@utility p-inset-sm {
+	padding: var(--era-inset-sm);
+}
+@utility p-inset-md {
+	padding: var(--era-inset-md);
+}
+@utility px-inset-xxs {
+	padding-inline: var(--era-inset-xxs);
+}
+@utility px-inset-sm {
+	padding-inline: var(--era-inset-sm);
+}
+@utility px-inset-md {
+	padding-inline: var(--era-inset-md);
+}
+@utility py-inset-xxs {
+	padding-block: var(--era-inset-xxs);
+}
+@utility py-inset-sm {
+	padding-block: var(--era-inset-sm);
+}
+@utility py-inset-md {
+	padding-block: var(--era-inset-md);
+}
+
+/* @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-xxs {
+	padding-inline: var(--era-pill-xxs);
+}
+@utility px-pill-sm {
+	padding-inline: var(--era-pill-sm);
+}
+
+/* @use text-field side padding — where typed text starts in an md-tier input;
+ * the named form of px-(--era-field-px). */
+@utility px-field {
+	padding-inline: var(--era-field-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-sm);
+}
+@utility p-card {
+	padding: var(--era-pad-md);
+}
+@utility p-content {
+	padding: var(--era-content-p);
+}
+
+/* @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-item on the rows. */
+@utility p-menu {
+	padding: var(--era-panel-inset);
+}
+
+/* @use 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". */
+@utility duration-base {
+	transition-duration: var(--era-duration);
+}

package/dist/ui/pane/pane-root.svelte.d.ts

@@ -29,6 +29,6 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     onDragEnd?: (data: DragEventData) => void;
     children?: Snippet;
 };
-declare const PaneRoot: import("svelte").Component<$$ComponentProps, {}, "position" | "size" | "ref">;
+declare const PaneRoot: import("svelte").Component<$$ComponentProps, {}, "size" | "position" | "ref">;
 type PaneRoot = ReturnType<typeof PaneRoot>;
 export default PaneRoot;

package/dist/ui/pane/pane.svelte.d.ts

@@ -35,6 +35,6 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     header?: Snippet;
     children?: Snippet;
 };
-declare const Pane: Component<$$ComponentProps, {}, "position" | "size" | "ref">;
+declare const Pane: Component<$$ComponentProps, {}, "size" | "position" | "ref">;
 type Pane = ReturnType<typeof Pane>;
 export default Pane;

package/dist/ui/toggle/toggle.svelte.d.ts

@@ -4,6 +4,6 @@ import { type ButtonVariants } from '../button';
 type $$ComponentProps = WithoutChildrenOrChild<Toggle.RootProps> & Omit<ButtonVariants, 'active'> & {
     children?: Snippet;
 };
-declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "ref" | "pressed">;
+declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "pressed" | "ref">;
 type Toggle = ReturnType<typeof Toggle>;
 export default Toggle;

package/dist/utils/index.js

@@ -4,11 +4,31 @@ import { createTV } from 'tailwind-variants';
 // glass-blur is a custom @utility (styles/surfaces/glass.css) that sets backdrop-filter,
 // so it must conflict-resolve against the backdrop-blur group. text-body is
 // a registered font-size token — without this it would be misread as a color.
+// The rest teaches tailwind-merge era's named class API (styles/index.css):
+// values it can't know about (h-md, px-inset-md, gap-gutter, shadow-well, …)
+// must land in their real class groups, or a consumer's `class="h-lg"` would
+// fail to replace a component's h-(--era-h-md) and both would apply.
+// Colors (bg-elevated, bg-highlight, …) need no entry — the bg group already
+// accepts any name. rounded-xs/sm/md/lg and bare shadow/shadow-lg are stock
+// names tailwind-merge knows; only era's additions to those scales are listed.
+const TIERS = ['xs', 'xxs', 'sm', 'md', 'lg'];
+const INSETS = ['inset-xxs', 'inset-sm', 'inset-md'];
 const twMergeConfig = {
     extend: {
         classGroups: {
             'backdrop-blur': ['glass-blur'],
-            'font-size': [{ text: ['body'] }]
+            'font-size': [{ text: ['body'] }],
+            h: [{ h: TIERS }],
+            'min-h': [{ 'min-h': TIERS }],
+            size: [{ size: TIERS }],
+            p: [{ p: ['gutter', 'panel', 'card', 'content', 'menu', ...INSETS] }],
+            px: [{ px: ['sm', 'md', 'lg', 'gutter', 'field', 'pill-xxs', 'pill-sm', ...INSETS] }],
+            py: [{ py: ['gutter', ...INSETS] }],
+            gap: [{ gap: ['gutter'] }],
+            rounded: [{ rounded: ['xxs', 'item'] }],
+            shadow: [{ shadow: ['well', 'pressed', 'highlight'] }],
+            ease: [{ ease: ['base'] }],
+            duration: [{ duration: ['base'] }]
         }
     }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "3.0.1",
+	"version": "3.2.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",

package/skill/SKILL.md

@@ -4,20 +4,31 @@ description: |
   Design-system methodology for building UIs with @sig-nine/era-ui (Svelte 5 +
   Tailwind v4). Use when: writing or reviewing any component, layout, or page
   in a project that uses era-ui — sizing controls, spacing/padding, radii,
-  surfaces, motion, or composing library components. Covers: the sp-derived
-  tier ladder, the even-gap and concentricity laws, geometric vs optical
-  padding, surface/shadow rules, motion tokens, and the mistakes agents make.
-version: 1.0.0
+  surfaces, motion, or composing library components. Covers: the named class
+  API, the sp-derived tier ladder, the even-gap and concentricity laws,
+  geometric vs optical padding, surface/shadow rules, motion, and the
+  mistakes agents make.
+version: 1.1.0
 ---
 
 # Building with era-ui
 
 Every size, gap, and radius derives from ONE number per density mode: `sp`
 (8/10/12/16 for dense/balanced/spacious/touch). Never write a hardcoded px,
-rem, radius, duration, or color — there is a token for everything, and the
+rem, radius, duration, or color — there is a class for everything, and the
 whole system re-derives per element, so any `data-*` axis override on any
 subtree just works.
 
+**Write named classes, not var classes.** Era's public styling API is pure
+Tailwind-looking utilities: `h-md rounded-md px-md shadow`, never
+`h-(--era-h-md)`-style var spellings. Where Tailwind already names the concept
+era overloads it (`rounded-md` walks era's ladder, bare `shadow` is the
+surface chrome, `transition-colors` rides the motion axis); where it doesn't,
+era registers its own (`h-md`, `gap-gutter`, `p-card`). The `--era-*` custom
+properties remain public as the escape hatch for the few things without a
+name — noted inline below — but reaching for one when a named class exists is
+a review finding.
+
 ## The five axes (data attributes, all orthogonal)
 
 | Axis    | Attribute      | Values                                |
@@ -34,72 +45,80 @@ to ~13px, silently shrinking every rem-derived token).
 
 ## The tier ladder
 
-| Tier  | Height token  | Radius token   | Use for                                         |
-| ----- | ------------- | -------------- | ----------------------------------------------- |
-| `xs`  | `--era-h-xs`  | `--era-rd-xs`  | icons (THE icon size), switch thumbs            |
-| `xxs` | `--era-h-xxs` | `--era-rd-xxs` | pills nested inside md (badge/chip in a button) |
-| `sm`  | `--era-h-sm`  | `--era-rd-sm`  | standalone pills, switch tracks, KV             |
-| `md`  | `--era-h-md`  | `--era-rd-md`  | buttons, inputs, selects, triggers              |
-| `lg`  | `--era-h-lg`  | `--era-rd-lg`  | bars, containers, dialog headers                |
+| Tier  | Height  | Square     | Radius        | Use for                                         |
+| ----- | ------- | ---------- | ------------- | ----------------------------------------------- |
+| `xs`  | `h-xs`  | `size-xs`  | `rounded-xs`  | icons (THE icon size), switch thumbs            |
+| `xxs` | `h-xxs` | `size-xxs` | `rounded-xxs` | pills nested inside md (badge/chip in a button) |
+| `sm`  | `h-sm`  | `size-sm`  | `rounded-sm`  | standalone pills, switch tracks, KV             |
+| `md`  | `h-md`  | `size-md`  | `rounded-md`  | buttons, inputs, selects, triggers              |
+| `lg`  | `h-lg`  | `size-lg`  | `rounded-lg`  | bars, containers, dialog headers                |
 
-Usage: `h-(--era-h-md)`, `rounded-(--era-rd-md)`, icons `size-(--era-h-xs)`.
-Always the paren shorthand — never `h-[var(--era-h-md)]`.
+`min-h-*` exists for containers that may grow. One escape hatch: the
+single-glyph square floor is `min-w-(--era-h-md)` — `min-w-md` is Tailwind's
+container scale (28rem), so era does not shadow it.
 
 ## The two laws
 
 1. **Even gaps** — the padding between a container's edge and its children
-   must equal the gap between the children, on every side. `--era-gap`
-   (= sp/2) is the universal inter-element gap.
+   must equal the gap between the children, on every side. `gap-gutter`
+   (= sp/2) is the universal inter-element gap, and `p-gutter` (+ `px-`/`py-`)
+   is the matching gutter a scrollable list or rail owes its rows.
 2. **Concentricity** — `rd-T − rd-U = (h-T − h-U)/2` for every tier pair. So:
    give EVERY element the radius of its OWN height tier, center children with
-   the matching concentric-inset token, and nested corners share a center of
-   curvature automatically. The inset tokens ARE those gaps:
-   `--era-xs-inset-sm` (xs inside sm, = sp/2), `--era-xxs-inset-md`,
+   the matching concentric inset, and nested corners share a center of
+   curvature automatically. The concentric insets are advanced enough to stay
+   token-form: `--era-xs-inset-sm` (xs inside sm, = sp/2), `--era-xxs-inset-md`,
    `--era-xs-inset-md`, `--era-xs-inset-lg`, `--era-sm-inset-lg`.
 
 **The trap**: a container's radius follows its corner REGION's tier, never its
 overall bulk. A large panel whose corners are formed by an sm-tier handle bar
-is `rd-sm`, however big the panel. Choosing radius by visual importance is the
-#1 way concentricity breaks.
+is `rounded-sm`, however big the panel. Choosing radius by visual importance
+is the #1 way concentricity breaks.
 
 ## Padding: geometric vs optical
 
 - **Bounded (tier-height) containers** — bars, triggers, pills: geometric.
-  Side padding `--era-px-*` (sp/2); text-symmetric vertical centering
-  `--era-inset-{xxs,sm,md}` = (h-T − text)/2; pill side breathing
-  `--era-pill-{xxs,sm}` = (h-T − 0.6·text)/2 (text wants ~2× more horizontal
-  than vertical padding).
-- **Unbounded containers** — cards, dialogs, popover bodies, content panels:
-  optical. `--era-pad-sm` / `--era-pad-md` / `--era-pad-lg` (super-linear
+  Side padding `px-sm`/`px-md`/`px-lg` (sp/2); text-symmetric vertical
+  centering `p`/`px`/`py-inset-{xxs,sm,md}` = (h-T − text)/2; pill side
+  breathing `px-pill-{xxs,sm}` = (h-T − 0.6·text)/2 (text wants ~2× more
+  horizontal than vertical padding); text-field side padding `px-field`.
+- **Unbounded containers** — optical: `p-panel` (compact shells), `p-card`
+  (cards, dialogs, popovers), `p-content` (full content panels). Super-linear
   across modes so whitespace keeps pace with growing controls while text
-  stays 14px). Never pad a card with `px-*` or ad-hoc `calc`.
+  stays 14px. Never pad a card with `px-*` or ad-hoc `calc`.
 
 ## Surfaces and shadows
 
-- Depth is **shadow, not border**: raised chrome takes `shadow-(--era-shadow)`;
-  recessed content containers (inputs, tracks, wells) take
-  `shadow-(--era-shadow-well)`; pressed/latched faces take
-  `shadow-(--era-shadow-pressed)`; on press, bevel sinks the CONTENT via `--era-press-sink-x`/`-y` while the box holds still.
+- Depth is **shadow, not border**: raised chrome takes bare `shadow`;
+  floating panels take `shadow-lg`; recessed content containers (inputs,
+  tracks, wells) take `shadow-well`; pressed/latched faces take
+  `shadow-pressed`. On press, bevel sinks the CONTENT via
+  `--era-press-sink-x`/`-y` while the box holds still.
 - **Transient vs latched fills**: hover/focus/highlighted feedback uses
-  `bg-(--era-highlight)` (surface-owned; translucent on glass). Held state
-  (toggle on, current tab, active button) uses opaque `bg-hover`. Never swap.
-- Panels: background `bg-(--era-surface-bg)` / elevated
-  `bg-(--era-surface-bg-elevated)`, plus `glass-blur` on floating panels.
+  `bg-highlight` + `shadow-highlight` (surface-owned; translucent on glass).
+  Held state (toggle on, current tab, active button) uses opaque `bg-hover`.
+  Never swap.
+- Panels: resting fill `bg-well` (pairs with `shadow-well`), raised fill
+  `bg-elevated` (pairs with `shadow-lg` + `glass-blur` on floating panels),
+  modal scrim `bg-overlay`. Menu panels pad with `p-menu` and their rows take
+  `rounded-item` so the row highlight stays concentric inside the frame.
 
 ## Motion
 
-Only `duration-(--era-duration)` and `ease-(--era-ease)` — never `duration-150`
-or a literal bezier. `instant` collapses everything to 0s (also forced by
-reduced-motion); `extra` adds a gentle overshoot. Deriving compound timings
-(shimmer loops, cursor pulses) as multiples of `--era-duration` makes them
-motion-axis-aware for free.
+The bare `transition-*` utilities default to the motion axis — `transition-colors`
+alone is on-design: 0s at `instant` (also forced by reduced-motion), longer at
+`extra` with a gentle overshoot. Name the axis explicitly with `ease-base` /
+`duration-base` when overriding; never `duration-150` or a literal bezier.
+Deriving compound timings (shimmer loops, cursor pulses) as multiples of
+`--era-duration` makes them motion-axis-aware for free.
 
 ## Text
 
 - `text-body` for control/body text (density-aware size); `text-fg` default,
   `text-bright` emphasis, `text-muted` secondary.
-- Single-glyph elements carry `min-w` equal to their tier height (a lone
-  character renders square, never a skinny pill).
+- Single-glyph elements carry a min-width equal to their tier height (a lone
+  character renders square, never a skinny pill) — `min-w-(--era-h-md)`, see
+  the ladder note.
 - Single-line control text next to icons carries `era-text-trim`
   (`line-height: 1` + `text-box: trim-both ex alphabetic`) — flexbox centers
   the line box, not the ink; the utility centers the x-height band and holds
@@ -119,8 +138,9 @@ motion-axis-aware for free.
 
 Not everything era exposes is a component — these ride along with the stylesheet
 and need no import. Reach for one before hand-rolling the same styling or bending
-a component into the role. Full reference: `/utilities.md`; machine-readable list:
-`/utilities.json` (or `@sig-nine/era-ui/utilities.json`).
+a component into the role. Full reference (including every named scale above):
+`/utilities.md`; machine-readable list: `/utilities.json` (or
+`@sig-nine/era-ui/utilities.json`).
 
 | Class                | Use it for                                                                                                             |
 | -------------------- | ---------------------------------------------------------------------------------------------------------------------- |
@@ -142,7 +162,9 @@ a component into the role. Full reference: `/utilities.md`; machine-readable lis
 ```
 
 - `ui` primitives are minimal bits-ui wrappers — all bits props/snippets pass
-  through; style via `class` (merged with tailwind-merge, consumer wins).
+  through; style via `class` (merged with tailwind-merge, consumer wins — the
+  named classes conflict-resolve against internals, so `class="h-lg"` on an
+  md control just works).
 - `OS` (or `@sig-nine/era-ui/os`): WindowManager + workspaces, Desktop,
   Window, Taskbar (built-in command bar). `AI` (or `/ai`): Conversation,
   Message, Response, PromptInput, Tool/Reasoning/Task over the Step primitive.
@@ -151,10 +173,12 @@ a component into the role. Full reference: `/utilities.md`; machine-readable lis
 
 ## Review checklist (the mistakes to catch)
 
-1. Hardcoded px/rem/radius/duration/color → replace with a token.
+1. Hardcoded px/rem/radius/duration/color → replace with the named class.
 2. Radius chosen by bulk instead of corner region.
 3. Unequal edge padding vs inner gap at any nesting level.
-4. `px-*`/geometric padding on an unbounded container (or `pad-*` on a pill).
-5. `bg-hover` used for hover feedback, or `--era-highlight` for latched state.
-6. Icon not `size-(--era-h-xs)`; single glyph without the min-w square floor.
-7. Arbitrary-value form `x-[var(--era-y)]` instead of `x-(--era-y)`.
+4. `px-*`/geometric padding on an unbounded container (or `p-card` on a pill).
+5. `bg-hover` used for hover feedback, or `bg-highlight` for latched state.
+6. Icon not `size-xs`; single glyph without the min-w square floor.
+7. A `-(--era-*)` var class where a named class exists (`h-(--era-h-md)` →
+   `h-md`); if the var form is genuinely needed, always the paren shorthand —
+   never `x-[var(--era-y)]`.