@godxjp/ui 19.1.0 → 19.2.0

package/dist/tokens/components/shell.css

@@ -1,42 +1,23 @@
-/* Shell (sidebar / topbar / kbd) component tokens — small-by-design text
- * knobs (rule #45/#46). A service re-tunes chrome text without moving the
- * global scale. */
+
 
 :root {
   --sidebar-section-label-font-size: var(--font-size-2xs);
   --sidebar-product-tenant-font-size: var(--font-size-2xs);
   --sidebar-badge-font-size: var(--font-size-2xs);
-  /* Sidebar nav count pill colours — the pill had a font-size knob and NO colour knob, so a rail
-   * that needed to tell "unread" from "mentions you" had to nest a <Badge> inside `badge` and got
-   * two pills, one inside the other. `initial` so the role defaults re-resolve at the call site
-   * under a scoped theme (a :root binding to a role var freezes at :root).
-   * Defaults = hsl(var(--secondary)) fill · hsl(var(--muted-foreground)) text. */
+
   --sidebar-badge-background: initial;
   --sidebar-badge-foreground: initial;
-  /* The EMPHASIS pair, read only by `SidebarItemProp.badgeTone="destructive"` (rule #44 — a
-   * neutral row never resolves them). Defaults = hsl(var(--destructive)) fill ·
-   * hsl(var(--destructive-foreground)) text, the canonical AA-checked pair. */
+
   --sidebar-badge-destructive-background: initial;
   --sidebar-badge-destructive-foreground: initial;
-  /* Softened focus ring on the tinted shell grounds: at full alpha the ring
-   * reads as a SELECTED item rather than a focused one (styles/focus-ring.css). */
+
   --sidebar-user-focus-ring-alpha: 0.45;
-  /* Topbar glyphs. Three separate sizes, all previously baked as literals in shell-layout.css.
-   *
-   * --topbar-chip-icon-size is off the SCALE but on the pixel GRID, and those are different
-   * findings. Read the rule it styles: `display: grid; place-items: center; font-weight: 700` —
-   * it is a letter MEDALLION, not a glyph, so the half-pixel-stroke argument that made the
-   * NavigationMenu chevron snap from 14.4px to 14px does not apply here. 18px is a whole pixel
-   * sitting between --icon-size-md (16) and -lg (20); snapping it would be a visible 2px box
-   * change bought for nothing. Declared, not silently tolerated.
-   * scale-exempt: 18px letter medallion, a whole pixel between two icon steps, not a glyph */
+
   --topbar-chip-icon-size: 1.125rem;
-  /* Sidebar product-switcher caret — a real glyph, previously a bare 0.875rem. */
+
   --sidebar-product-caret-icon-size: var(--icon-size-sm);
   --topbar-icon-size: var(--icon-size-md);
-  /* The caret is the eighth literal-sized icon rule in this file. The ratchet missed it because
-   * its selector says `caret` while the pattern looked for `icon|glyph` — the guard has been
-   * taught the wider vocabulary. */
+
   --topbar-caret-icon-size: var(--icon-size-xs);
 
   --topbar-icon-focus-ring-alpha: 0.45;
@@ -51,160 +32,60 @@
   --sidebar-avatar-font-size: var(--font-size-2xs);
   --sidebar-user-name-font-size: var(--font-size-xs);
 
-  /* Brand-chrome gradient hooks — opt-in, invisible by default. A service paints
-   * the sidebar/topbar surface by setting these to a gradient (no-op = none). */
   --sidebar-gradient: none;
   --topbar-gradient: none;
 
-  /* DXS application-shell geometry. These defaults mirror the checked-in
-   * Admin/Console hi-fi source while remaining themeable by consumers. */
   --app-shell-bar-height: var(--band-height-2xl);
-  /* (the coarse-pointer override lives at the end of this file — Rule #24 grows
-   * controls to 44px, and a 48px bar cannot hold a 44px control plus its 3px
-   * focus ring at the very top of the viewport, where overflow cannot help.) */
-  /* Inline inset and slot gap of the AppShell top bar.
-   *
-   * ONE OWNER FOR THE HORIZONTAL PAGE-INSET AXIS (gh#330). The bar sits in the SAME grid track as
-   * `.app-main`, directly above the page, so its first control and the page title are on one
-   * vertical edge — or they are supposed to be. These two knobs used to name their own values
-   * (--space-4 / --space-3) while the page named --space-page-x / --space-page-compact-x, and
-   * nothing reconciled them: measured in Chromium on /isolate/layout-app-shell the topbar's
-   * content started at x=80 while the page header's started at x=88 (1512px), and because the two
-   * sides also stepped at DIFFERENT breakpoints (shell 900px, page 720px) the error was not even
-   * constant — 8px at 1512, 12px between 720 and 900, 4px below 720. A consumer cannot correct a
-   * drift that changes with the viewport.
-   *
-   * The page gutter WINS the axis, for three reasons: it is read by seven regions (page header,
-   * toolbar, body, footer, PageContainer.Inset, the DataTable full-bleed compensation, Banner)
-   * against this knob's one element; the bar is the region that must line up with the page, not
-   * the other way round (the rail is a different track with its own inset); and moving the bar
-   * moves exactly one element in one composition, while moving --space-page-x would move every
-   * page in every consumer app.
-   *
-   * The NAMES stay — a theme that already sets `--app-shell-bar-inset` keeps working, and a bar
-   * that genuinely wants to sit tighter than its page still has its own knob. Only the DEFAULTS
-   * now point at the owner. `-compact` applies below the PAGE's 720px step (not the shell's 900px
-   * restructure), so both sides tighten on the same line — see styles/shell-layout.css. */
+
   --app-shell-bar-inset: var(--space-page-x);
   --app-shell-bar-inset-compact: var(--space-page-compact-x);
   --app-shell-bar-gap: var(--space-3);
-  /* Docked navigation rail widths — the SINGLE most-retuned shell constant (rule #45). A service
-   * that designs on a different grid sets `--app-shell-sidebar-width: 15.9375rem` (255px) once
-   * instead of forking `.app-root`. `-rail-` is the icon-only width used at
-   * `<AppShell sidebarCollapsed>`. */
+
   --app-shell-sidebar-width: 16rem;
   --app-shell-rail-width: 4rem;
   --app-shell-page-max-width: 80rem;
   --app-shell-main-background: hsl(var(--muted) / 0.4);
   --app-shell-mobile-nav-width: 22.5rem;
-  /* Mobile-drawer scrim — `initial` so the shared --overlay-background default re-resolves at the
-   * CALL SITE under a scoped [data-tenant]/.dark theme (a :root binding freezes at :root). Default =
-   * var(--app-shell-mobile-nav-alpha) of the global scrim, i.e. rgb(0 0 0 / 0.2) out of the box. */
+
   --app-shell-mobile-nav-background: initial;
-  /* Share of the global --overlay-background this drawer's scrim uses. A slide-in drawer washes the
-   * page more lightly than a modal dialog; keeping it a RATIO means a service retints the whole
-   * system with one --overlay-background and every overlay keeps its calibrated depth. */
+
   --app-shell-mobile-nav-alpha: 40%;
-  /* Inline inset of the mobile drawer's scrollable nav body. Near-zero by design: the drawer nav
-   * (the <Sidebar> node by default) owns its own inset via --sidebar-nav-scroll-padding, so the
-   * generic sheet chrome inset must NOT stack on top of it (gh#211). Set it to var(--space-6) for
-   * a custom mobileNav node that wants the full sheet chrome inset. */
+
   --app-shell-mobile-nav-inset: var(--space-1);
-  /* Hamburger glyph in the drawer trigger. Bigger ON PURPOSE than the trigger Button's own
-   * `size="sm"` icon step (--control-icon-size-sm, 0.875rem) — it is the ONLY navigation
-   * affordance on a phone, so it reads at the 1.25rem step. A flat rem, not a density-scaled
-   * alias: it must not move with the density axis, or the one tap target that opens navigation
-   * shrinks on a compact page. Consumed as a `size-[var(...)]` utility so it outranks
-   * `.ui-button--sm svg` (see the comment at the call site in app-shell.tsx). */
+
   --app-shell-mobile-nav-icon-size: var(--icon-size-lg);
 
-  /* ServiceRolePanel (gh#319). `.ui-service-role-panel` shipped as a bare hook — the class was on
-   * the root but no rule existed anywhere, so the role rail's rhythm lived entirely as Tailwind
-   * literals inside the component and no theme could reach it (#45). The panel is a thin
-   * composition over MasterDetail, which still owns ALL the two-track geometry; these knobs cover
-   * only the role LIST inside the master rail.
-   *
-   * Flat rems, not `--space-*`: the literals they replace read Tailwind's own `--spacing` grid,
-   * which this package never remaps and which does not follow the density axis. Aliasing them
-   * would start scaling the rail inside a `.ui-density-*` subtree — a visual change, not a
-   * refactor. */
-  --service-role-panel-list-gap: 0.25rem; /* between role rows (was `gap-1`) */
-  --service-role-panel-row-gap: 0.25rem; /* select button ↔ delete button (was `gap-1`) */
-  --service-role-panel-item-title-gap: 0.375rem; /* role name ↔ lock Badge (was `gap-1.5`) */
-  /* The role row is a MULTI-LINE button (name over a description/member-count line), so it opts
-   * out of the control height grid (`h-auto`) and sets its own block padding — that is what the
-   * `py-2` literal was doing. It needs the raised `.ui-service-role-panel` ancestor specificity
-   * (0,2,0) to beat `.ui-button--md { padding-block: var(--button-space-block) }` (0,1,0):
-   * layout.css is imported BEFORE control.css and both are `@layer components`, so an equal
-   * (0,1,0) rule here would silently lose. */
+  --service-role-panel-list-gap: 0.25rem;
+  --service-role-panel-row-gap: 0.25rem;
+  --service-role-panel-item-title-gap: 0.375rem;
+
   --service-role-panel-item-padding-block: 0.5rem;
   --sidebar-brand-mark-size: 1.375rem;
   --sidebar-nav-item-height: var(--band-height-md);
-  /* ON the type scale (gh#329). This was `0.8125rem` — 13px, which is not a step: the golden scale
-   * runs …/ratio² ≈ 11.1 · /ratio ≈ 12.5 · base 14…, so 13 sat BETWEEN two steps and every nav row
-   * in the rail read off the system's type rhythm. It had no mechanical anchor either — unlike the
-   * auth field label below, which is pinned to an artboard y-coordinate and keeps its literal with
-   * a declared `scale-exempt` — only the checked-in hi-fi source's number.
-   *
-   * GEOMETRY MOVES, by 0.53px: 13px → --font-size-xs (≈12.47px), the step the sub-row
-   * (--sidebar-nav-sub-font-size) and the flyout title already take. Nothing reflows — the row is a
-   * fixed 2rem with `align-items: center`, and 1.5 × 12.47 = 18.7px sits inside it with the same
-   * headroom 19.5px had. What is gained is that a service overriding --font-size-base now moves the
-   * rail's labels with the rest of its type, instead of leaving one constant behind. */
+
   --sidebar-nav-item-font-size: var(--font-size-xs);
-  /* Line box of the nav LABEL, not the row (gh#254): `.sb-label` clips, so its line box is its clip
-   * box, and the row's `line-height: 1` shears descenders and Vietnamese tone marks. Keep >= 1.2. */
+
   --sidebar-nav-item-line-height: 1.5;
-  /* Same gh#254 trap, two more clipping boxes. `.ui-auth-account-email` and the truncating last
-   * child of `.ui-topbar-start` both clip (`overflow: hidden`/`clip` + `text-overflow: ellipsis`),
-   * so their line box IS their clip box — inheriting a tight value shears descenders and Vietnamese
-   * tone marks exactly as the sidebar label did. Keep >= 1.2. */
+
   --auth-account-summary-email-line-height: 1.5;
   --topbar-start-truncate-line-height: 1.5;
   --sidebar-nav-icon-size: var(--icon-size-md);
   --sidebar-nav-item-gap: 0.625rem;
   --sidebar-nav-item-padding-x: 0.625rem;
   --sidebar-nav-gap: 2px;
-  /* Corner radius of a nav row. Defaults to the global rail radius, which is what an inset pill
-   * wants — but a rail that sets --sidebar-nav-scroll-padding and --sidebar-nav-gap to 0 makes its
-   * rows full-bleed bands flush with both edges, and a band wants square corners. Every other
-   * geometry property of `.sb-nav-item` was already a knob; this one was pinned to a constant, so
-   * the only way to square a band was a consumer selector against a DS internal class — the exact
-   * coupling rule #45 exists to prevent. Set `0` for full-bleed bands. */
+
   --sidebar-nav-item-radius: calc(var(--radius) - 1px);
   --sidebar-nav-scroll-padding: var(--space-3) var(--space-2);
   --sidebar-section-gap: var(--space-4);
   --sidebar-section-label-padding-x: var(--space-2);
   --sidebar-section-label-padding-bottom: var(--space-1);
-  /* Default `none` (gh#296): the search trigger fills its whole `Topbar` center slot — flush to
-   * whatever sits in `end` (a locale picker, notification bell, account menu) — rather than
-   * floating as a fixed ~420px box with dead space on either side at normal desktop widths. A
-   * consumer that wants a capped, centered search box (the previous look) sets this explicitly. */
+
   --topbar-search-max-width: none;
-  /* Standalone <Topbar> geometry (rule #45). Topbar is a pure slot bar, so its box is intentionally
-   * QUIET by default: `auto` height and no inline inset, i.e. exactly what it did before these knobs
-   * existed — inside AppShell the `.app-topbar` grid row still owns the height. A service that
-   * places Topbar directly on a page sets `--topbar-height: 3.5rem` / `--topbar-inset: var(--space-4)`
-   * once instead of writing an app-local class. `--topbar-gap` is the gap BETWEEN the start/center/end
-   * clusters and INSIDE each of them, so one knob re-rhythms the whole bar. */
+
   --topbar-height: auto;
   --topbar-inset: 0px;
   --topbar-gap: var(--space-2);
-  /* ⚠ THIS KNOB DELETES CONTENT AT 1100px AND BELOW — read before you ship a center slot.
-   * At compact desktop/tablet widths the docked sidebar leaves too little inline room for three
-   * intrinsically-sized clusters, so the package hides the optional center slot before it can
-   * cover the breadcrumb/title or end utilities (gh#244). The default is `none`, which means a
-   * global search trigger placed in `center` is INVISIBLE from 1100px down — including on every
-   * phone — unless the consumer opts back in. That default arrived in 18.6.0 and removed the slot
-   * for consumers who never changed a line of their own code (gh#12); it stays because the
-   * overlap it prevents is a real defect and flipping a shipped default twice is worse than
-   * documenting it once, but it is a DECISION, not an accident:
-   *
-   *   :root { --topbar-center-compact-display: flex; }   ← restore the slot at every width
-   *
-   * Opt back in only once the center content has a compact presentation of its own (an icon-only
-   * search trigger, a collapsing field). A page-local media query is the anti-pattern this knob
-   * replaces. */
+
   --topbar-center-compact-display: none;
   --org-switcher-trigger-height: var(--band-height-xl);
   --org-switcher-trigger-padding-x: var(--space-2);
@@ -213,22 +94,12 @@
   --org-switcher-sheet-max-height: 75dvh;
   --org-switcher-state-min-height: 8rem;
 
-  /* Sidebar active-item tint/marker — `initial` so the role defaults re-resolve at the call site
-   * under a scoped theme (a :root binding to a role var freezes at :root; a scoped role override
-   * never reaches it). A service re-tunes the active sub-item accent without forking CSS.
-   * Defaults = hsl(var(--primary)) marker/tint. */
   --sidebar-item-active-color: initial;
   --sidebar-item-active-tint: initial;
-  /* Main nav-item active row — defaults mirror the hover state (accent bg, foreground text); a
-   * service overrides these to brand the selected row (e.g. a gold tint + gold text on a navy
-   * sidebar). `initial` so the defaults re-resolve under a scoped theme.
-   * Defaults = hsl(var(--accent)) fill · hsl(var(--foreground)) text. */
+
   --sidebar-item-active-background: initial;
   --sidebar-item-active-foreground: initial;
 
-  /* AuthShell — centred auth/login page shell. Comfortable control density (44px, WCAG touch floor)
-   * + a larger auth heading, scoped to the shell; a service re-tunes the auth card width, insets
-   * and heading size without forking. */
   --auth-shell-control-height: var(--control-height-comfortable);
   --auth-shell-heading-size: var(--font-size-2xl);
   --auth-shell-card-max-width: 24rem;
@@ -236,54 +107,24 @@
   --auth-shell-main-padding: var(--space-6);
   --auth-shell-footer-padding: var(--space-3) var(--space-6) var(--space-4);
 
-  /* Canonical DXS auth preset. These are public theme knobs: consumers select the preset once on
-   * AuthShell and may retune the product theme here rather than overriding individual fields. */
   --auth-shell-canonical-control-height: var(--band-height-lg);
   --auth-shell-canonical-card-max-width: 22.5rem;
   --auth-shell-canonical-heading-size: var(--font-size-base);
   --auth-shell-canonical-main-padding: 1rem;
   --auth-shell-canonical-main-padding-mobile: 0.9375rem;
-  /* INLINE (start/end) inset of the compact auth card — the column the title, fields and actions
-   * align to. Independent of the block axis below (gh#232). */
+
   --auth-shell-compact-card-inset: var(--space-6);
-  /* BLOCK (top/bottom) padding of the compact auth card — the knob that tunes canonical Login card
-   * HEIGHT without narrowing the column. Bound to the card's --card-space-shell-y, so it really
-   * reaches CardContent's block edges (before gh#232 it was wired only to --card-space-body-y and
-   * the rendered body kept the inset on both block edges — the documented token did nothing).
-   * Declared `initial` so the default mirrors the LIVE --auth-shell-compact-card-inset resolved at
-   * the CALL SITE: the canonical card renders exactly as before (24px block = 24px inline), and a
-   * service that re-tunes the inset inside a scoped `[data-tenant]` still drags the block default
-   * with it (a :root binding would freeze at the :root inset — docs/TOKENS.md). */
-  --auth-shell-card-padding-block-compact: initial; /* default = var(--auth-shell-compact-card-inset) */
-  /* Header↔body gap inside the compact auth card (the breathing room under the title before the
-   * first field). Its own knob since gh#232 — it used to ride on
-   * --auth-shell-card-padding-block-compact, which conflated the section gap with the card's block
-   * padding and made the block knob un-tunable. Default is the pre-gh#232 12px rhythm. */
+
+  --auth-shell-card-padding-block-compact: initial;
+
   --auth-shell-card-body-gap-compact: var(--space-3);
-  /* IN-SLOT stack gap of the compact auth card (title ↕ description inside the header). */
-  --auth-shell-card-gap-compact: var(--space-3);
 
-  /* Named AUTH FLOW PRESETS (gh#217 / gh#220). A preset owns the whole page measure for one
-   * canonical hosted-identity flow — card max-width plus the desktop and mobile page gutters — so a
-   * consumer selects `preset` once instead of hand-overriding --auth-shell-card-max-width. Presets
-   * are orthogonal to `variant` (which owns control density / heading size) and are applied AFTER
-   * it, so `variant="canonical" preset="device-authorization"` keeps the canonical chrome and only
-   * re-measures the page. Literal lengths (not --space-*) because the canonical artboards specify
-   * exact device pixels that must not drift with --scaling. */
+  --auth-shell-card-gap-compact: var(--space-3);
 
-  /* Main-axis alignment of the auth column. Default `center` = today's vertically-centred card;
-   * a flow whose intro + card + footnote stack is tall opts into `start` via this knob. */
   --auth-shell-main-align: center;
-  /* Gap between the direct sections of the auth column (intro · card · remember row). Default 0
-   * (quiet, rule #44) so an existing single-card consumer is untouched; presets opt in. */
+
   --auth-shell-card-stack-gap: 0px;
 
-  /* Login preset (gh#237) — canonical SCR-001 anchors at 1440x900, 1024x900 and 390x844.
-   * The 112px identity slot is deliberately taller than a two-line real requester. Identity
-   * content aligns to the slot end, so missing/one-line/two-line requester data changes only the
-   * empty space above it, never the card or footer position. The flow starts at y=231 desktop and
-   * y=221 mobile: 231/221 + 112 + 20 gap = card y=363/353. Literal artboard lengths belong here,
-   * not in a consumer selector, and do not drift with --scaling. */
   --auth-shell-login-card-max-width: 22.5rem;
   --auth-shell-login-flow-offset-block: 14.4375rem;
   --auth-shell-login-flow-offset-block-mobile: 13.8125rem;
@@ -292,98 +133,38 @@
   --auth-shell-login-main-padding-block-end: 1rem;
   --auth-shell-login-identity-slot-block-size: 7rem;
   --auth-shell-login-card-stack-gap: 1.25rem;
-  /* Canonical SCR-001 block inset is a FLAT 24px — the same measure as the inline inset. The card
-   * draws its own 1px border and a border-box rect already contains it, so the former
-   * `+ 2 x --control-border-width` double-counted the border and pushed the passkey CTA to y=390
-   * instead of the canonical y=388 (gh#263). */
+
   --auth-shell-login-card-padding-block-compact: var(--auth-shell-compact-card-inset);
 
-  /* Device-authorization preset — 380px card measure, 15px block · 5px inline mobile gutter
-   * (at a 390px viewport the card is x=5px, width=380px). */
   --auth-shell-device-card-max-width: 23.75rem;
   --auth-shell-device-main-padding: 1rem;
   --auth-shell-device-main-padding-mobile: 0.9375rem 0.3125rem;
-  /* CODE FIELD measure — the preset owns it (gh#12). A device grant is the one canonical flow whose
-   * PRIMARY control is the code field, so leaving it on the generic square --otp-slot-size made the
-   * preset own the page but not its own subject: two 4-slot `appearance="grouped"` boxes rendered
-   * 146x38 (4 x the canonical 36px control tier + the 1px group border) against a 112x54 artboard.
-   * These are the per-slot boxes that ADD UP to that artboard group:
-   *   inline  27.5px x 4 + 2 x 1px group border = 112px
-   *   block   52px       + 2 x 1px group border =  54px
-   * Literal artboard lengths, like every other preset measure here — they must not drift with
-   * --scaling. A service that groups its code differently overrides --otp-slot-inline-size /
-   * --otp-slot-block-size on its own field; the generic square knob is untouched everywhere else. */
+
   --auth-shell-device-otp-slot-inline-size: 1.71875rem;
   --auth-shell-device-otp-slot-block-size: 3.25rem;
 
-  /* Context-selection preset — 25rem card measure on desktop/tablet, edge-to-edge on mobile
-   * (0 inline gutter) with a 16px rhythm between the intro, the card and the remember row. */
   --auth-shell-context-card-max-width: 25rem;
   --auth-shell-context-main-padding: var(--space-6);
   --auth-shell-context-main-padding-mobile: var(--space-6) 0;
   --auth-shell-context-card-stack-gap: 1rem;
 
-  /* Account-recovery preset (gh#233) — the SCR-008 measure shared by the password-recovery panel
-   * (request · sent · new-password · expired) and the sign-in MFA challenge panel (OTP ·
-   * recovery-code · passkey-failure). Both canonical desktop panels measure w=432 at 1440, so ONE
-   * preset owns them; the 360px canonical Login measure is untouched.
-   * The mobile gutter is a DECIDED contract, not a traced artboard: the supplied 390 reference is a
-   * desktop 2x2 composite that crops horizontally and cannot be measured. 15px inline at 390 ⇒ the
-   * panel is x=15, width=360 — the same page rhythm as the canonical Login flow, so a user moving
-   * from Login to Recovery on a phone never sees the surface jump. */
   --auth-shell-recovery-card-max-width: 27rem;
   --auth-shell-recovery-main-padding: 1rem;
   --auth-shell-recovery-main-padding-mobile: 0.9375rem;
 
-  /* Registration preset (gh#256) — the canonical sign-up measure. Two things make it structurally
-   * different from every preset above, and both are the reason it could not be expressed by
-   * re-using `login`:
-   *
-   *  1. LONG-FORM SCROLLING. A registration card is the tallest surface in the hosted-identity set
-   *     (name · email · password · confirm · strength meter · consent · submit · provider row), and
-   *     a vertically CENTRED tall card clips its own top on a short viewport — the top overflows
-   *     above the scroll origin and becomes unreachable. So the column is start-aligned and the
-   *     block-start inset becomes ordinary page padding the user can scroll past.
-   *  2. FOOTER CLEARANCE. The legal/consent footer must never be flush against the submit button
-   *     at the end of a long scroll, so the block-end inset is a knob of its own rather than
-   *     mirroring the block-start one.
-   *
-   * The 360px form measure and the 15px mobile inline gutter match the canonical Login flow exactly
-   * (22.5rem card, x=15 at 390 ⇒ width=360), so a user moving sign-in → sign-up on a phone never
-   * sees the surface jump. */
   --auth-shell-registration-card-max-width: 22.5rem;
-  /* Block-start offsets are DERIVED from the canonical SCR-002 artboard, not chosen: the card
-   * anchors at y=284 (1440x900) and y=274 (390x844), and the column is
-   *   card y = padding-block-start + identity slot + stack gap
-   * so 284 - 112 - 20 = 152px (9.5rem) and 274 - 112 - 20 = 142px (8.875rem). Like every canonical
-   * screen in this family the page passes NO brand bar (the mark lives INSIDE the column as
-   * AuthIdentity), so `main` starts at the viewport top and the offset is the whole anchor. */
+
   --auth-shell-registration-main-padding-block-start: 9.5rem;
   --auth-shell-registration-main-padding-block-start-mobile: 8.875rem;
   --auth-shell-registration-main-padding-inline: 1rem;
   --auth-shell-registration-main-padding-inline-mobile: 0.9375rem;
-  /* Footer clearance — the gap the legal footer keeps below the end of a long form. */
+
   --auth-shell-registration-main-padding-block-end: 3rem;
   --auth-shell-registration-main-padding-block-end-mobile: 2rem;
   --auth-shell-registration-card-stack-gap: 1.25rem;
-  /* Fixed identity track, the same 112px `login` proved (gh#237). Without it the card anchor moves
-   * with the title/requester line count, so the canonical y above would hold for exactly one copy
-   * length and drift for every other. The slot absorbs absent / one-line / two-line identity
-   * content instead. */
+
   --auth-shell-registration-identity-slot-block-size: 7rem;
 
-  /* Labelled auth divider geometry. The canonical SCR-001 divider row is 19px tall at an 11px
-   * label (the artboard label inherits the page's line-height instead of collapsing to a 1.0 line
-   * box). 19/11 is that RATIO, not a pin: it holds the row proportional when the label's step
-   * moves, which is exactly what gh#329 did to it. The previous hardcoded `line-height: 1`
-   * rendered an 11px row, sitting the whole lower half of the Login card 8px high (gh#263).
-   *
-   * ON the type scale (gh#329): the label was the literal `0.6875rem` (11px) and is now
-   * --font-size-2xs, the scale's ratio⁻² step ≈ 11.107px — the same step the sidebar section
-   * label, the kbd cap and the chrome page subtitle already take. GEOMETRY MOVES by 0.11px on the
-   * label and 0.19px on the row (19 → 19.19px), i.e. a fifth of a pixel, and in exchange the auth
-   * micro-scale finally rides the service's --font-size-base like everything else. 11 was never a
-   * step; it was 2xs rounded to the nearest whole pixel and then written down as if it were. */
   --auth-shell-divider-gap: 0.625rem;
   --auth-shell-divider-label-font-size: var(--font-size-2xs);
   --auth-shell-divider-label-line-height: calc(19 / 11);
@@ -401,82 +182,47 @@
   --auth-account-summary-avatar-glyph-size: var(--control-icon-size-sm);
   --auth-account-summary-email-font-size: var(--font-size-sm);
   --auth-footer-content-gap: 0.375rem;
-  /* The same 11px → 2xs snap as the divider label above (gh#329); this one carried no artboard
-   * anchor at all, only the literal. GEOMETRY MOVES by 0.11px. */
+
   --auth-footer-text-font-size: var(--font-size-2xs);
   --auth-stack-gap: var(--space-3);
   --auth-shell-field-label-gap: var(--space-1);
-  /* Canonical SCR-001 field label: a LITERAL 12px (the golden-ratio --font-size-xs ≈ 12.47px would
-   * drift the 18px line box to 18.7px and push the email input off its y=489 anchor) with a 1.5
-   * line box = 18px. The former var(--font-size-xs)/1.25 pair rendered a 14px box, sitting the
-   * email input 4px high (gh#263).
-   *
-   * gh#329 asked whether this is merely a long way of writing --font-size-xs. It is NOT: the xs
-   * step is base/ratio ≈ 12.47px, not 12. This is the system's TIER 2 — a value that is off every
-   * step because it is anchored to something outside the system (an artboard coordinate), which is
-   * a real need and must have a sanctioned route rather than becoming a fork or an !important. The
-   * route is the marker below, which the scale-bypass guard honours and PRINTS, so the exception is
-   * declared once and stays visible instead of hiding in prose. */
-  /* scale-exempt: SCR-001 pins the email input at y=489; --font-size-xs (12.47px) drifts the 18px label box to 18.7px (gh#263) */
+
   --auth-shell-field-label-font-size: 0.75rem;
   --auth-shell-field-label-line-height: 1.5;
 
-  /* CenteredShell — authenticated, no-sidebar, centred-column page shell (hosted-ID "My Page",
-   * account, standalone settings). The bar mirrors AppShell's `.app-topbar` chrome (fixed height +
-   * inline padding); the column max-width has three tiers, all wider than the 24rem auth card. A
-   * service retunes the bar inset, block padding and each width tier without forking CSS. */
   --centered-shell-bar-height: var(--app-shell-bar-height);
-  --centered-shell-bar-padding-x: var(--space-4);
+  --centered-shell-bar-padding-x: var(--space-page-x);
+  --centered-shell-bar-padding-x-compact: var(--space-page-compact-x);
   --centered-shell-main-padding: var(--space-6);
+
+  --centered-shell-main-padding-inline-compact: var(--space-page-compact-x);
   --centered-shell-footer-padding: var(--space-3) var(--space-6) var(--space-4);
-  /* Block offset of the centred column inside the 100dvh shell. `0` (default, the quietest state —
-   * rule #44) keeps the top-aligned flowing page; `auto` centres the column in the viewport, which
-   * is what CenteredShell `align="center"` sets for a SYSTEM-level standalone surface (500/503
-   * error page, maintenance notice). Auto block offsets collapse to 0 when the content is taller
-   * than the viewport, so a long localized message scrolls from the top instead of clipping. */
+  --centered-shell-footer-padding-inline-compact: var(--space-page-compact-x);
+
   --centered-shell-column-offset-block: 0;
   --centered-shell-width-sm: 32rem;
   --centered-shell-width-md: 46rem;
   --centered-shell-width-lg: 64rem;
 }
 
-/* CenteredShell · public-landing preset (gh#252) — the token-owned geometry of a PUBLIC marketing
- * / product landing page: one content measure shared by header, main column and footer, the
- * section rhythm between page sections, the flat (chrome-quiet) card presentation and the hero
- * heading tier. Every value is a service-themeable knob (rule #45): a landing composition is a
- * COMPOSITION of real primitives (docs/COMPOSITION-VS-COMPONENT.md — Hero/Navbar/Footer FAIL the
- * Framework-Component Test), so the consumer must never own geometry or a media query. These
- * knobs are read ONLY under `.ui-centered-shell[data-preset="public-landing"]`, so the default
- * shell — which emits no `data-preset` at all — is byte-identical to before. */
 :root {
-  --centered-shell-landing-max-width: 67.5rem; /* 1080px — header/main/footer share ONE measure */
-  --centered-shell-landing-inset-inline: var(--space-6); /* 24px page gutter ≥ 40rem */
-  --centered-shell-landing-inset-inline-compact: var(--space-4); /* 16px page gutter < 40rem */
-  --centered-shell-landing-main-padding-block: var(--space-10); /* 40px */
-  --centered-shell-landing-main-padding-block-compact: var(--space-6); /* 24px */
-  --centered-shell-landing-section-gap: var(--space-10); /* rhythm BETWEEN page sections */
+  --centered-shell-landing-max-width: 67.5rem;
+  --centered-shell-landing-inset-inline: var(--space-6);
+  --centered-shell-landing-inset-inline-compact: var(--space-4);
+  --centered-shell-landing-main-padding-block: var(--space-10);
+  --centered-shell-landing-main-padding-block-compact: var(--space-6);
+  --centered-shell-landing-section-gap: var(--space-10);
   --centered-shell-landing-section-gap-compact: var(--space-6);
   --centered-shell-landing-footer-padding-block: var(--space-8);
-  /* Chrome is a token, default quiet (rule #44): a landing surface is FLAT — no card elevation —
-   * so a service opts back IN with `--centered-shell-landing-card-shadow: var(--card-shadow)`. */
+
   --centered-shell-landing-card-shadow: none;
-  /* Hero heading tier. The preset re-points `--heading-h1` (same mechanism as
-   * `.ui-auth-shell` → `--auth-shell-heading-size`), so a hero title is a real `Heading level={1}`
-   * and never a consumer font-size. */
+
   --centered-shell-landing-heading-size: var(--font-size-display);
   --centered-shell-landing-heading-size-compact: var(--font-size-3xl);
-  /* Role-mirror knob — MUST stay `initial`, with the role default at the CALL SITE
-   * (`var(--centered-shell-landing-background, var(--background))`), so a scoped
-   * `[data-tenant]` / `.dark` override of `--background` still reaches it (docs/TOKENS.md ·
-   * "Role-mirror knobs MUST be `initial`"). Documented default = hsl(var(--background)) — a public
-   * page is the plain page canvas, not the app's `--muted` chrome. */
+
   --centered-shell-landing-background: initial;
 }
 
-/* Rule #24 companion (gh#291): on coarse pointers --control-height grows to 2.75rem
- * (44px tap floor), and the shell bar sits flush with the viewport top — a 3rem bar
- * leaves the control's 3px focus ring painting ABOVE y=0, off-screen, which no
- * overflow setting can recover. 3.5rem gives 6px of breathing per side. */
 @media (pointer: coarse) {
   :root {
     --app-shell-bar-height: var(--band-height-3xl);

package/dist/tokens/components/sidebar.css

@@ -1,32 +1,15 @@
-/* Sidebar nav-row COLOUR knobs (gh#228). The row/label and its icon are separately themeable:
- * before this, `.sb-nav-item` painted one `--muted-foreground` that the Lucide SVG inherited, so a
- * service could only darken its 16px nav icons by writing page-local CSS or by re-tinting every
- * muted text globally. Geometry knobs (--sidebar-nav-icon-size, --sidebar-nav-item-height/-gap/
- * -padding-x) live in components/shell.css and are untouched by these.
- *
- * ROLE-MIRROR KNOBS — declared `initial` here with the role default at the CALL SITE
- * (`var(--knob, hsl(var(--role)))`), so a scoped `[data-tenant]` / `.dark` role override
- * re-resolves live instead of freezing at :root (docs/TOKENS.md · "Role-mirror knobs MUST be
- * `initial`"). Every default is byte-identical to the pre-gh#228 rendering.
- *
- * The ACTIVE row's own background/foreground keep their existing knobs
- * (--sidebar-item-active-background / --sidebar-item-active-foreground, components/shell.css);
- * only the active ICON gets a new one. */
+
 
 :root {
-  /* Resting nav row + label (also the resting sub-row). Default = hsl(var(--muted-foreground)). */
+
   --sidebar-nav-item-foreground: initial;
-  /* Hovered nav row + label. Default = hsl(var(--foreground)). */
+
   --sidebar-nav-item-hover-foreground: initial;
-  /* `aria-disabled` nav row + label. Default = the resting row colour. */
+
   --sidebar-nav-item-disabled-foreground: initial;
 
-  /* Nav ICON (`.sb-icon`, incl. the collapsed rail and group triggers). Default = currentColor,
-   * i.e. the row colour — the pre-gh#228 look. Set this alone to get canonical dark icons next to
-   * muted labels. */
   --sidebar-nav-icon-foreground: initial;
-  /* Icon on a hovered / active / disabled row. Each falls back to --sidebar-nav-icon-foreground,
-   * then to currentColor, so setting the base icon knob alone themes every state. */
+
   --sidebar-nav-icon-hover-foreground: initial;
   --sidebar-nav-icon-active-foreground: initial;
   --sidebar-nav-icon-disabled-foreground: initial;