@godxjp/ui 18.3.0 → 18.5.0

package/dist/tokens/components/shell.css

@@ -7,6 +7,7 @@
   --sidebar-product-tenant-font-size: var(--font-size-2xs);
   --sidebar-badge-font-size: var(--font-size-2xs);
   --sidebar-user-role-font-size: var(--font-size-2xs);
+  --org-switcher-meta-foreground: var(--muted-foreground);
   --sidebar-nav-sub-font-size: var(--font-size-xs);
   --sidebar-flyout-title-font-size: var(--font-size-xs);
   --topbar-chip-icon-font-size: var(--font-size-2xs);
@@ -20,6 +21,64 @@
   --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: 3rem;
+  /* Inline inset and slot gap of the AppShell top bar. `-compact` applies below the shell
+   * breakpoint (the docked sidebar is gone, so the bar tightens against the viewport edge). */
+  --app-shell-bar-inset: var(--space-4);
+  --app-shell-bar-inset-compact: var(--space-3);
+  --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);
+  --sidebar-brand-mark-size: 1.375rem;
+  --sidebar-nav-item-height: 2rem;
+  --sidebar-nav-item-font-size: 0.8125rem;
+  --sidebar-nav-icon-size: 1rem;
+  --sidebar-nav-item-gap: 0.625rem;
+  --sidebar-nav-item-padding-x: 0.625rem;
+  --sidebar-nav-gap: 2px;
+  --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);
+  --topbar-search-max-width: 26.25rem;
+  /* 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);
+  --org-switcher-trigger-height: 2.75rem;
+  --org-switcher-trigger-padding-x: var(--space-2);
+  --org-switcher-avatar-size: 1.75rem;
+  --org-switcher-menu-width: 16rem;
+  --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.
@@ -43,14 +102,103 @@
   --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: 2.25rem;
+  --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-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. */
+
+  /* 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;
+
+  /* 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;
+
+  /* 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;
+
+  /* Labelled auth divider geometry. */
+  --auth-shell-divider-gap: 0.625rem;
+  --auth-shell-divider-label-font-size: 0.6875rem;
+  --auth-shell-divider-rule-color: var(--border);
+  --auth-shell-divider-label-color: var(--muted-foreground);
+  --auth-identity-gap: 0.375rem;
+  --auth-requester-gap: 0.375rem;
+  --auth-requester-icon-size: 1rem;
+  --auth-requester-glyph-size: 0.625rem;
+  --auth-footer-content-gap: 0.375rem;
+  --auth-footer-text-font-size: 0.6875rem;
+  --auth-stack-gap: var(--space-3);
+  --auth-shell-field-label-gap: var(--space-1);
+  --auth-shell-field-label-font-size: var(--font-size-xs);
+  --auth-shell-field-label-line-height: 1.25;
+
   /* 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: 3.25rem;
+  --centered-shell-bar-height: var(--app-shell-bar-height);
   --centered-shell-bar-padding-x: var(--space-4);
   --centered-shell-main-padding: var(--space-6);
   --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-column-offset-block: 0;
   --centered-shell-width-sm: 32rem;
   --centered-shell-width-md: 46rem;
   --centered-shell-width-lg: 64rem;

package/dist/tokens/components/sidebar.css

@@ -0,0 +1,33 @@
+/* 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;
+}

package/dist/tokens/foundation.css

@@ -161,8 +161,11 @@
    *        --font-sans-zh-hans  (lang="zh" | "zh-Hans" | "zh-CN")
    *        --font-sans-zh-hant  (lang="zh-Hant" | "zh-TW")
    *      e.g. `--font-sans-ja: "Noto Sans JP", var(--font-sans-base);`
-   * The opt-in bundle `@godxjp/ui/styles/fonts` fills these slots for its bundled
-   * Noto Sans JP + Montserrat faces, so the all-in-one entry is zero-config. */
+   * The opt-in bundle `@godxjp/ui/styles/fonts` overwrites `--font-sans-base`
+   * (and `--font-sans-vi`) with the DXS bundle — "M PLUS 2" primary, "Noto Sans JP"
+   * as the CJK fallback — so the all-in-one entry is zero-config. That fill also
+   * lands on `:root` at THIS specificity, so `styles/fonts` MUST be imported AFTER
+   * `styles/base`, or the system stack below silently wins (issue #210). */
   --font-sans-base:
     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui,
     sans-serif;

package/dist/tokens/semantic/layout.css

@@ -18,6 +18,30 @@
   --space-inline-md: var(--space-3); /* 12px */
   --space-inline-lg: var(--space-4); /* 16px */
 
+  /* Master-detail geometry. Consumers choose a semantic rail preset; they never author grid tracks. */
+  --master-detail-rail-compact: 18.75rem; /* 300px */
+  --master-detail-rail-standard: 20rem; /* 320px */
+  --master-detail-gap: var(--space-stack-md);
+  /* The collapse threshold: MasterDetail keeps its two-track split while the composition's OWN
+   * inline size is at least this wide, and stacks (master then detail) below it. A service theme
+   * retunes it once globally; the `collapseBelow` prop overrides it per instance (rule #45).
+   * This is a real knob — the layout reads it through the flex-basis threshold, NOT a media
+   * query, precisely so a `var()` can drive it (see src/styles/layout.css · .ui-master-detail). */
+  --master-detail-collapse-below: 40rem; /* 640px — the `sm` step */
+
+  /* Bounded master viewport (gh#231). OPT-IN, chosen by the semantic `masterViewport` prop —
+   * `auto` (the default) applies NO bound, so every existing composition is unchanged. A real
+   * collection can be thousands of pixels tall; when the layout stacks, that pushes the detail
+   * far below the fold. The presets cap the collection's BLOCK size and scroll it inside the
+   * region instead. Sized as a whole number of nominal collection rows (2.5rem ≈ a compact list
+   * row) so a service theme retunes them in the same semantic unit the design grid uses. */
+  --master-detail-master-viewport-compact: 20rem; /* 320px — about 8 nominal rows */
+  --master-detail-master-viewport-standard: 28rem; /* 448px — about 11 nominal rows */
+  /* Focus-ring room INSIDE the bounded region: an overflow container clips both axes, so without
+   * an inset the ring of a row at the edge would be cut off (WCAG 2.4.11/2.4.13). Doubles as the
+   * scroll-padding so a row scrolled into view never sits flush against the clip edge. */
+  --master-detail-master-viewport-inset: var(--space-1); /* 4px */
+
   --space-page-active-x: var(--space-page-x);
   --space-page-active-y: var(--space-page-y);
   --space-section-active: var(--space-section);
@@ -26,8 +50,18 @@
   --space-section-compact: var(--space-4);
 
   /* Modal scrim — the single backdrop colour shared by EVERY overlay (Dialog, AlertDialog, Sheet,
-   * Drawer). Themeable (rule #44) so a service tints the wash to its brand once, e.g. a navy
-   * `--overlay-background: rgb(12 26 49 / .55)`, instead of forking each overlay. */
+   * Drawer, AppShell mobile nav). Themeable (rule #44) so a service tints the wash to its brand
+   * once, e.g. a navy `--overlay-background: rgb(12 26 49 / .55)`, instead of forking each overlay.
+   *
+   * HOW IT REACHES AN OVERLAY (gh#215 — it previously reached NOTHING): each surface declares its
+   * own knob `initial` and resolves a SHARE of this colour at the call site,
+   * `var(--dialog-overlay-background, color-mix(in srgb, var(--overlay-background)
+   * var(--dialog-overlay-alpha), transparent))`. That keeps the calibrated per-surface depth — a
+   * slide-in Sheet washes the page more lightly (40%) than a modal Dialog (60%) — while ONE
+   * override here retints every backdrop. Per docs/TOKENS.md the knobs must stay `initial`: a
+   * `:root` binding would freeze and a scoped `[data-tenant]`/`.dark` override of this token would
+   * never reach the overlay. Overlays are portaled, so a tenant scope must also sit on the portal
+   * container (see docs/CUSTOMER-THEMING.md). */
   --overlay-background: rgb(0 0 0 / 0.5);
 
   /* Full-bleed rule under the PageContainer header. OFF by default — the title/body
@@ -41,6 +75,14 @@
    * old fixed 16px pad that left 24 above vs 32 below. */
   --page-header-pad-bottom: calc(var(--space-page-active-y) - var(--space-section-active));
 
+  /* Inline measure of the header `extra` region while the page header is in `responsive-inline`
+   * arrangement (gh#231). Below the 640px step the default arrangement drops `extra` onto its own
+   * full-width line under the subtitle; `headerLayout="responsive-inline"` keeps it beside the
+   * title band at this measure instead, so a single compact control (a search field, one primary
+   * action) stays on the title row at 390px. Unused by the default arrangement, so no existing
+   * page moves. 11rem = 176px, i.e. the control ends flush with the compact page gutter. */
+  --page-header-extra-measure: 11rem; /* 176px */
+
   /* Responsive page typography is independent from density. Density changes information spacing;
    * these tokens change only page chrome so mobile keeps readable body text and touch targets. */
   --page-title-font-size: var(--heading-h1);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "18.3.0",
-  "godxUiMcp": "18.3.0",
+  "version": "18.5.0",
+  "godxUiMcp": "18.5.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "pnpm": {
@@ -32,6 +32,7 @@
     },
     "./styles": "./dist/styles/index.css",
     "./styles/*": "./dist/styles/*.css",
+    "./theme/*": "./dist/theme/*",
     "./tokens": "./dist/tokens/base.css",
     "./admin": {
       "types": "./dist/components/admin/index.d.ts",
@@ -109,6 +110,10 @@
       "types": "./dist/i18n/index.d.ts",
       "import": "./dist/i18n/index.js"
     },
+    "./email": {
+      "types": "./dist/email/index.d.ts",
+      "import": "./dist/email/index.js"
+    },
     "./lib/utils": {
       "types": "./dist/lib/utils.d.ts",
       "import": "./dist/lib/utils.js"
@@ -290,6 +295,8 @@
     "test:coverage": "vitest run --coverage",
     "check:example-imports": "node scripts/check-example-imports.mjs",
     "check:frame-coverage": "node scripts/frame-coverage.mjs",
+    "gen:frame-coverage-ledger": "node scripts/gen-frame-coverage-ledger.mjs",
+    "check:frame-coverage-ledger": "node scripts/gen-frame-coverage-ledger.mjs --check && node scripts/check-frame-coverage-ledger.mjs",
     "check:screen-reader-evidence": "node scripts/check-screen-reader-evidence.mjs",
     "check:voiceover-capture": "node scripts/check-voiceover-capture.mjs",
     "check:data-entry-frame-runtime": "node scripts/check-data-entry-frame-runtime.mjs",
@@ -301,14 +308,16 @@
     "check:display-runtime-evidence": "node scripts/check-display-runtime-evidence.mjs",
     "check:data-table-pagination-wrap": "node scripts/check-data-table-pagination-wrap.mjs",
     "check:button-icon-xs": "node scripts/check-button-icon-xs.mjs",
-    "check:frame-contracts": "pnpm check:component-api-manifest && pnpm audit:component-cases && pnpm check:frame-coverage && pnpm check:screen-reader-evidence && pnpm check:data-entry-owner-source && pnpm check:display-runtime-evidence",
+    "check:frame-contracts": "pnpm check:component-api-manifest && pnpm audit:component-cases && pnpm check:frame-coverage && pnpm check:frame-coverage-ledger && pnpm check:screen-reader-evidence && pnpm check:data-entry-owner-source && pnpm check:display-runtime-evidence",
     "check:final-touch-rtl": "node scripts/check-final-touch-rtl.mjs",
     "check:frame-runtime": "pnpm check:data-entry-frame-runtime && pnpm check:data-entry-touch-aria && pnpm check:layout-nav-frames && pnpm check:provider-feedback-query-runtime && pnpm check:layout-nav-closure && pnpm check:final-touch-rtl && pnpm check:data-table-pagination-wrap && pnpm check:button-icon-xs",
     "pretest": "pnpm check:frame-coverage",
-    "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:frame-coverage && pnpm test",
-    "verify:static": "pnpm build && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm test",
+    "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:frame-coverage && pnpm test",
+    "verify:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm test",
     "verify:release": "pnpm verify:static && pnpm check:frame-contracts && pnpm check:frame-coverage && pnpm check:frame-axe",
     "check:mcp-lockstep": "node scripts/check-release-lockstep.mjs",
+    "check:release-plan": "node scripts/check-release-command-plan.mjs",
+    "check:packed-public-contract": "node scripts/check-packed-public-contract.mjs",
     "check:mcp-pattern-imports": "node scripts/check-mcp-pattern-imports.mjs",
     "check:mcp-sync": "node scripts/check-mcp-sync.mjs",
     "check:mcp-orphans": "node scripts/check-mcp-orphans.mjs",
@@ -323,6 +332,8 @@
     "check:typography": "node scripts/check-typography.mjs",
     "gen:component-tokens": "node scripts/gen-component-tokens.mjs",
     "check:mcp-token-sync": "node scripts/gen-component-tokens.mjs --check",
+    "gen:email-tokens": "node scripts/gen-email-tokens.mjs",
+    "check:email-token-sync": "node scripts/gen-email-tokens.mjs --check",
     "check:core-isolation": "node scripts/check-core-isolation.mjs",
     "check:no-consumer-coupling": "node scripts/check-no-consumer-coupling.mjs",
     "release": "node scripts/release.mjs",
@@ -374,7 +385,7 @@
   },
   "dependencies": {
     "@date-fns/tz": "^1.5.0",
-    "@fontsource/montserrat": "^5.2.8",
+    "@fontsource/m-plus-2": "^5.2.9",
     "@fontsource/noto-sans-jp": "^5.2.9",
     "@radix-ui/react-accordion": "^1.2.16",
     "@radix-ui/react-alert-dialog": "^1.1.19",