@boost33/ui 0.1.0 → 0.3.0

package/dist/nav-height-budget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-height-budget.js","sources":["../src/nav-height-budget.ts"],"sourcesContent":["// A sidebar's nav has to fit above the wallet chip and footer without\n// scrolling. Boost Outbound's admin role has already blown past that once, so\n// this is a real check, not a hypothetical.\n//\n// Sidebar calls checkNavHeightBudget and measureNavHeight itself now, and warns\n// outside a production build when a nav does not fit the column it was given\n// (B33-500, ADR-0005). These stay exported for the other half of the job:\n// checking a nav's shape from its data, before it is ever rendered.\n//\n// ===========================================================================\n// WHAT THIS IS A MODEL OF (B33-762)\n// ===========================================================================\n//\n// Every number below was read off a real render. That much was settled in\n// B33-752. What B33-762 found is that the module never said *which* render --\n// which shell's furniture it measured, which nav state its row costs describe,\n// or whose font metrics those costs came from. Three silent assumptions, and a\n// consumer importing the constants could not see any of them.\n//\n// So they are named here, each with the measurement behind it and each with the\n// direction its error runs. A budget that is wrong and documented is\n// recoverable. A budget that is right and undocumented is what produced this\n// ticket.\n//\n// All three measurements were taken on the built specimen in Chromium at\n// 1440x900, deviceScaleFactor 2, reduced motion -- the screenshot harness's own\n// conditions -- and re-taken on 23 Sep 2026 for this pass.\n//\n// ---------------------------------------------------------------------------\n// Assumption 1: the column is the stress specimen's, and part of it is not ours\n// ---------------------------------------------------------------------------\n//\n// NAV_SHELL_FIXED_PX is not one number this package can be correct about. Most\n// of the column is the package's own furniture, but the switcher, the wallet\n// chip and the footer are *slots* -- the consumer's markup, whose height the\n// package neither sets nor knows. Measured across the two routes that render\n// the whole shell:\n//\n//                                   stress (820px)   Wallet (900px)\n//   wordmark block                        56               56\n//   switcher wrapper padding              16               16\n//   .foot padding-block-start + gap       32               32\n//   nav's negative gutter margin          -8               -8\n//   WalletChip, expanded                  89               89\n//   -- package subtotal                  185              185\n//   switcher slot contents                42               42\n//   footer slot contents                  44               32\n//   -- consumer subtotal                  86               74\n//   == fixed furniture                   271              259\n//\n// The package half is identical on both routes, which is the point: 185px is a\n// number this package owns and can defend. The 12px of difference is entirely\n// the footer slot -- the stress route's avatar row is 8+28+8, the Wallet\n// route's link row is 12+16+4.\n//\n// The default therefore stays pinned to the stress route's 271, unchanged from\n// B33-752. Re-pinning it to the Wallet, as this ticket was originally filed to\n// do, would move a published constant 12px toward the false-\"fits\" direction on\n// the strength of one consumer's footer -- and a consumer with a taller footer\n// than either route would then be handed a budget that over-counts their\n// column, which is exactly the B33-752 defect returning by another door.\n//\n// A consumer whose slots differ passes their own measured total as the second\n// argument to navBudgetForViewport. That is the honest interface: the package\n// states what it owns, and the caller states what they own.\n//\n// ---------------------------------------------------------------------------\n// Assumption 2: the row costs describe the expanded nav, not the rail\n// ---------------------------------------------------------------------------\n//\n// NAV_ITEM_PX and NAV_SECTION_HEADER_PX are expanded-nav costs, and the rail is\n// deliberately out of this model's scope. On the rail the label goes out of\n// flow (position: absolute, clipped), so the 16px icon is the tallest in-flow\n// child and a row measures 8+16+8 = 32px, not 33; and AppShell passes\n// `label={collapsed ? undefined : section.label}`, so NavSection renders no\n// header element at all and a headed section costs 0, not 30.\n//\n// Modelling that would mean a NAV_RAIL_ITEM_PX and a `collapsed` flag on\n// NavSectionShape -- a public API change to a module four products import, to\n// describe a state that cannot overflow. The measurement says it cannot. Same\n// specimen, same 13-item shape, same 820px stage:\n//\n//                          expanded        rail\n//   nav scrollHeight          575          472\n//   column left for the nav   549          587\n//   verdict                 scrolls        fits, 115px spare\n//\n// The rail is shorter on both sides at once: its rows lose the label's line\n// box, and its furniture shrinks too (the wallet chip collapses 89 -> 75, the\n// switcher 42 -> 34, the footer 44 -> 28). So checking a rail nav against the\n// expanded model over-counts its content by 103px and under-counts its column\n// by 38px -- 141px of slack, both errors in the safe direction. The expanded\n// model is a conservative bound on the rail, and scripts/nav-height-budget-\n// check.mts now drives the rail stage and asserts exactly that, so the claim\n// fails CI if it ever stops being true.\n//\n// The runtime half was never affected: Sidebar measures the real DOM, so its\n// dev warning is correct in either state.\n//\n// ---------------------------------------------------------------------------\n// Assumption 3: the row costs are Inter's line boxes, and the package ships no\n// font\n// ---------------------------------------------------------------------------\n//\n// Neither NavItem's row and label nor NavSection's header sets a line-height;\n// the computed value is `normal`, so half of each row cost is token-derived\n// padding and the rest is whatever line box the consumer's font draws. This\n// package ships no font -- there is no @font-face anywhere in src/, `files` is\n// [\"dist\"], and a guard test forbids src/ from reaching the specimen's font\n// file. The faces are the consumer's; the tokens carry only a fallback stack.\n//\n// Swapping --font-sans on the built specimen, same stage, same 13-item shape:\n//\n//   family                    row   header   nav scrollHeight\n//   Inter (the tokens' head)   33      30          575\n//   system-ui                  33      29          572\n//   Helvetica                  32      29          559\n//   Arial                      32      28          556\n//   Georgia                    32      28          556\n//\n// Every face reachable on macOS renders shorter than Inter, so the model\n// over-counts -- the safe direction. The constants therefore stay as they are\n// and this dependency is recorded rather than removed.\n//\n// Removing it would mean setting an explicit line-height from the --leading-*\n// tokens, the way PageHeader already does (its title state measures a flat\n// 156px across every face). That is the better model, and it is not done here\n// on purpose: --leading-tight at --text-2xs gives a 29px section header against\n// today's 30, which moves the sidebar-*, navsection-* and appshell-* renders by\n// a pixel. A baseline change is a human approving a design change (CLAUDE.md),\n// and the pixel-ratio diff would wave a 1px header through in silence anyway\n// (B33-548, B33-772). It wants its own ticket with a human at the fidelity gate.\n//\n// >>> THE MEASUREMENT THIS MODEL IS STILL MISSING <<<\n//\n// 'Segoe UI' sits in the fallback stack and is reported to carry a ~1.33 normal\n// line-height factor, which at 14px would give a ~19px line box and a 35px row\n// -- an UNDER-count, the one direction B33-752 exists to forbid. It is NOT\n// recorded above because it could not be measured: this pass ran on macOS,\n// where Segoe UI is not installed. Requesting it resolves to the fallback --\n// canvas measureText at 14px gives 'Segoe UI' 241.097px for the same string as\n// a deliberately nonsense family name, against 249.737px for Helvetica and\n// 268.837px for Inter -- so the 32/29 a naive swap reports is Helvetica wearing\n// Segoe UI's name, not Segoe UI.\n//\n// A human on Windows has to take it, and nothing here should be tuned to a\n// guessed number in the meantime. Until then the honest statement of this\n// module's scope is: these costs hold for a --font-sans whose `normal` line box\n// at 14px is 17px or less, which is every face measured. A Windows consumer is\n// outside that and is protected only by Sidebar's runtime warning, which\n// measures the real DOM and is right whatever the font does.\n//\n// The browser check cannot close this either -- the specimen bundles Inter, so\n// it can only ever confirm Inter's numbers.\n//\n// ===========================================================================\n//\n// NOTE for a human: boostledger/src/ui/shell/nav.ts carries the same constants\n// and the same navHeight arithmetic, inherited from the architecture doc's\n// §4.1, and has the same under-count/over-count. It is in another repo and\n// another GitHub org, so it is not corrected here; it wants the same fix\n// (B33-752).\n\n// The part of the fixed furniture this package draws itself, and is therefore\n// the only part it can be correct about: the wordmark block (56), the switcher\n// wrapper's padding (16), `.foot`'s padding-block-start and gap (32) and the\n// expanded WalletChip (89), less the 8px the nav takes back as negative margin\n// for its focus gutter. Measured identical on both shell routes -- see\n// \"Assumption 1\" above. The nav's own scroll gutter is NOT part of this: it\n// sits inside the nav's client box, so it lives in the budget (and in\n// navContentHeight), not in the furniture -- counting it here as well would\n// double it.\nexport const NAV_SHELL_PACKAGE_FIXED_PX = 185\n\n// The slots the consumer fills, as the stress specimen fills them: a 42px\n// switcher button and a 44px account footer. This is an ALLOWANCE, not a\n// package fact -- the Wallet route's own slots total 74px, and a consumer with\n// a taller footer than either exceeds it. A consumer who knows their own slot\n// heights passes the total to navBudgetForViewport instead of taking this.\nexport const NAV_SHELL_CONSUMER_SLOTS_PX = 86\n\n// The sidebar's fixed furniture above and below the nav, as the stress\n// specimen renders it: the package's own 185 plus that route's 86 of slots.\n// Equal to the column height less the nav's own client box (820 - 549), which\n// is how B33-752 measured it and why the value is unchanged from it.\nexport const NAV_SHELL_FIXED_PX = NAV_SHELL_PACKAGE_FIXED_PX + NAV_SHELL_CONSUMER_SLOTS_PX\n\n// The per-row costs of the EXPANDED nav, each the padding the CSS sets plus the\n// line box the text draws into. A nav item is --spacing-2 top and bottom (16px)\n// around a 14px label's 17px line box; a section header is the same 16px around\n// an 11px label's 14px line box. Measured in the specimen render, not derived\n// from Paper (see NavItem.module.css `.row` and NavSection.module.css\n// `.header`).\n//\n// Two things these numbers do not cover, both argued in full above. They are\n// the rail's costs only by accident -- a rail row is 32px and a rail section\n// header is nothing at all (assumption 2) -- and their line-box half belongs to\n// the consumer's font, not to this package (assumption 3). Both errors run in\n// the over-counting direction for every face that could be measured; the\n// Windows case is unmeasured and is the one candidate for the other direction.\nexport const NAV_ITEM_PX = 33\nexport const NAV_SECTION_HEADER_PX = 30\n\n// The gap the nav sets between its sections (--spacing-4, AppShell.module.css\n// `.nav`), counted once between each adjacent pair.\nexport const NAV_SECTION_GAP_PX = 16\n\n// The nav's own scroll gutter: --spacing-1 of padding top and bottom, the 4px\n// each way that keeps NavItem's focus ring off the scrollport edge (ADR-0005).\n// It is part of the nav's box, so it counts toward the height the nav takes.\nexport const NAV_FOCUS_GUTTER_PX = 8\n\n// The nav budget at the reference 900px viewport: what the column leaves once\n// the fixed furniture is taken. Derived from NAV_SHELL_FIXED_PX so the two\n// cannot disagree; used as the default budget and named in the dev warning.\nexport const NAV_HEIGHT_BUDGET_PX = navBudgetForViewport(900)\n\n/** One section of a nav, described by its shape rather than its rendered rows. */\nexport interface NavSectionShape {\n  /** Whether the section carries a header label (its NAV_SECTION_HEADER_PX cost). */\n  hasHeader: boolean\n  /** How many nav items the section holds (NAV_ITEM_PX each). */\n  itemCount: number\n}\n\n/**\n * The per-row costs to charge, for a consumer who has measured their own.\n *\n * The defaults are Inter's, and are right for every face this package could\n * measure. A consumer rendering in a font whose `normal` line box at 14px is\n * taller than 17px -- `Segoe UI` is the known candidate, unmeasured -- gets a\n * model that under-counts, and can correct it here rather than forking the\n * check. Measure a rendered row's `offsetHeight`, do not estimate it.\n */\nexport interface NavRowCosts {\n  /** What one nav row costs. Defaults to NAV_ITEM_PX, the expanded row in Inter. */\n  itemPx?: number\n  /** What one section header costs. Defaults to NAV_SECTION_HEADER_PX. */\n  sectionHeaderPx?: number\n}\n\n/**\n * The vertical space an EXPANDED nav takes, summed from its sections' shapes --\n * the rows and headers, the gaps the nav sets between sections, and the nav's\n * own scroll gutter. This is the whole box the nav occupies (its rendered\n * scrollHeight), so the budget can be checked from the nav's data alone, before\n * it is rendered into a sidebar that might not fit it -- Boost Outbound's admin\n * role has overflowed this once already.\n *\n * The rail is out of scope and needs no separate model: a collapsed nav is\n * shorter than the same nav expanded, in a column that is taller, so this is a\n * conservative bound on it (B33-762, and the check that pins it).\n *\n * Pass `costs` only if you have measured a rendered row in your own font; the\n * defaults are the package's, measured in Inter.\n */\nexport function navContentHeight(sections: NavSectionShape[], costs: NavRowCosts = {}): number {\n  if (sections.length === 0) return 0\n  const itemPx = costs.itemPx ?? NAV_ITEM_PX\n  const sectionHeaderPx = costs.sectionHeaderPx ?? NAV_SECTION_HEADER_PX\n  const rows = sections.reduce(\n    (used, section) => used + (section.hasHeader ? sectionHeaderPx : 0) + section.itemCount * itemPx,\n    0,\n  )\n  const gaps = NAV_SECTION_GAP_PX * (sections.length - 1)\n  return rows + gaps + NAV_FOCUS_GUTTER_PX\n}\n\n/**\n * The nav's budget at a given viewport: what is left once the fixed shell parts\n * are taken.\n *\n * `consumerSlotsPx` is the total height of the three slots this package does\n * not own -- the switcher, the wallet chip's neighbours and the sidebar footer\n * as the consumer renders them. It defaults to the stress specimen's 86px\n * allowance, which is what NAV_SHELL_FIXED_PX assumes. A consumer whose footer\n * or switcher is taller than that MUST pass their own measured total, or this\n * will over-count their column and can report a fit that scrolls.\n */\nexport function navBudgetForViewport(\n  viewportPx: number,\n  consumerSlotsPx: number = NAV_SHELL_CONSUMER_SLOTS_PX,\n): number {\n  return viewportPx - NAV_SHELL_PACKAGE_FIXED_PX - consumerSlotsPx\n}\n\nexport interface NavHeightBudget {\n  usedPx: number\n  budgetPx: number\n  fits: boolean\n  overBy: number\n}\n\nexport function checkNavHeightBudget(usedPx: number, budgetPx: number = NAV_HEIGHT_BUDGET_PX): NavHeightBudget {\n  return {\n    usedPx,\n    budgetPx,\n    fits: usedPx <= budgetPx,\n    overBy: Math.max(0, usedPx - budgetPx),\n  }\n}\n\nexport function measureNavHeight(nav: HTMLElement): number {\n  return nav.scrollHeight\n}\n"],"names":["NAV_SHELL_PACKAGE_FIXED_PX","NAV_SHELL_CONSUMER_SLOTS_PX","NAV_SHELL_FIXED_PX","NAV_ITEM_PX","NAV_SECTION_HEADER_PX","NAV_SECTION_GAP_PX","NAV_FOCUS_GUTTER_PX","NAV_HEIGHT_BUDGET_PX","navBudgetForViewport","navContentHeight","sections","costs","itemPx","sectionHeaderPx","rows","used","section","gaps","viewportPx","consumerSlotsPx","checkNavHeightBudget","usedPx","budgetPx","measureNavHeight","nav"],"mappings":"AA4KO,MAAMA,IAA6B,KAO7BC,IAA8B,IAM9BC,IAAqB,KAerBC,IAAc,IACdC,IAAwB,IAIxBC,IAAqB,IAKrBC,IAAsB,GAKtBC,IAAuBC,EAAqB,GAAG;AAyCrD,SAASC,EAAiBC,GAA6BC,IAAqB,IAAY;AAC7F,MAAID,EAAS,WAAW,EAAG,QAAO;AAClC,QAAME,IAASD,EAAM,UAAU,IACzBE,IAAkBF,EAAM,mBAAmB,IAC3CG,IAAOJ,EAAS;AAAA,IACpB,CAACK,GAAMC,MAAYD,KAAQC,EAAQ,YAAYH,IAAkB,KAAKG,EAAQ,YAAYJ;AAAA,IAC1F;AAAA,EAAA,GAEIK,IAAO,MAAsBP,EAAS,SAAS;AACrD,SAAOI,IAAOG,IAAO;AACvB;AAaO,SAAST,EACdU,GACAC,IAA0B,IAClB;AACR,SAAOD,IAAa,MAA6BC;AACnD;AASO,SAASC,EAAqBC,GAAgBC,IAAmBf,GAAuC;AAC7G,SAAO;AAAA,IACL,QAAAc;AAAA,IACA,UAAAC;AAAA,IACA,MAAMD,KAAUC;AAAA,IAChB,QAAQ,KAAK,IAAI,GAAGD,IAASC,CAAQ;AAAA,EAAA;AAEzC;AAEO,SAASC,EAAiBC,GAA0B;AACzD,SAAOA,EAAI;AACb;"}

package/dist/style.css

@@ -1 +1 @@
-:root{--color-neutral-0: #FFFFFF;--color-neutral-50: #F7F7F8;--color-neutral-100: #EFEFF1;--color-neutral-200: #E5E5EA;--color-neutral-300: #D9D9D9;--color-neutral-400: #C1C1C2;--color-neutral-500: #8E8E93;--color-neutral-600: #737373;--color-neutral-700: #525252;--color-neutral-800: #3A3A3C;--color-neutral-900: #292929;--color-neutral-950: #1D1D1B;--color-neutral-1000: #000000;--color-orange-50: #FDF3EE;--color-orange-100: #FBE2D5;--color-orange-200: #F7C3A8;--color-orange-300: #F0A173;--color-orange-400: #EB7147;--color-orange-500: #E9521E;--color-orange-600: #C2410C;--color-orange-700: #9A3412;--color-sand-100: #FBF3E4;--color-sand-300: #F3D6AC;--color-sand-600: #8A6510;--color-green-100: #DDF0E4;--color-green-600: #157F3D;--color-crimson-100: #F7DEE1;--color-crimson-600: #A3182B;--color-blue-100: #DEE6FA;--color-blue-600: #2A5BD7;--color-background: var(--color-neutral-50);--color-surface: var(--color-neutral-0);--color-surface-muted: var(--color-neutral-100);--color-border: var(--color-neutral-200);--color-border-strong: var(--color-neutral-300);--color-foreground: var(--color-neutral-950);--color-foreground-secondary: var(--color-neutral-700);--color-foreground-muted: var(--color-neutral-600);--color-foreground-disabled: var(--color-neutral-400);--color-primary: var(--color-orange-500);--color-primary-hover: var(--color-orange-600);--color-primary-foreground: var(--color-neutral-0);--color-primary-subtle: var(--color-orange-50);--color-primary-border: var(--color-orange-200);--color-success: var(--color-green-600);--color-success-subtle: var(--color-green-100);--color-warning: var(--color-sand-600);--color-warning-subtle: var(--color-sand-300);--color-danger: var(--color-crimson-600);--color-danger-subtle: var(--color-crimson-100);--color-info: var(--color-blue-600);--color-info-subtle: var(--color-blue-100);--color-grant: var(--color-sand-600);--color-purchased: var(--color-neutral-950);--font-display: Outfit;--font-sans: Inter;--font-mono: Geist Mono;--text-2xs: 11px;--text-xs: 12px;--text-sm: 13px;--text-base: 15px;--text-md: 16px;--text-lg: 18px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 30px;--text-4xl: 36px;--text-5xl: 46px;--text-6xl: 60px;--text-7xl: 78px;--text-nav-label: 14px;--font-weight-light: 300;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--tracking-tighter: -.03em;--tracking-tight: -.02em;--tracking-normal: 0em;--tracking-wide: .04em;--tracking-wider: .09em;--leading-none: 100%;--leading-tight: 120%;--leading-snug: 135%;--leading-normal: 150%;--leading-relaxed: 170%;--breakpoint-mobile: 390px;--breakpoint-desktop: 1440px;--container-sidebar: 264px;--container-content: 1440px;--spacing-1: 4px;--spacing-2: 8px;--spacing-3: 12px;--spacing-4: 16px;--spacing-5: 20px;--spacing-6: 24px;--spacing-8: 32px;--spacing-10: 40px;--spacing-12: 48px;--spacing-16: 64px;--spacing-20: 80px;--spacing-2_5: 10px;--spacing-5_5: 22px;--radius-none: 0px;--radius-xs: 2px;--radius-sm: 3px;--radius-md: 4px;--radius-lg: 6px;--radius-xl: 8px;--radius-2xl: 12px;--radius-full: 9999px}:root{--duration-fast: .12s;--easing-standard: cubic-bezier(.2, 0, 0, 1)}._row_5f12t_4{display:flex;align-items:center;width:100%;gap:var(--spacing-2_5);padding:var(--spacing-2) var(--spacing-2_5);border:none;border-radius:var(--radius-lg);background:transparent;font-family:var(--font-sans);text-align:left;text-decoration:none;cursor:pointer;transition:background-color var(--duration-fast) var(--easing-standard)}._row_5f12t_4:hover{background:var(--color-surface-muted)}._row_5f12t_4[data-active=true]{background:var(--color-surface)}._row_5f12t_4:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}._label_5f12t_36{flex:1 1 auto;min-width:0;overflow:hidden;color:var(--color-foreground-secondary);font-size:var(--text-nav-label);font-weight:var(--font-weight-regular);text-overflow:ellipsis;white-space:nowrap}._row_5f12t_4[data-active=true] ._label_5f12t_36{color:var(--color-foreground);font-weight:var(--font-weight-semibold)}._row_5f12t_4[data-collapsed=true] ._label_5f12t_36{position:absolute;overflow:hidden;clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}._trailingSlot_5f12t_62{display:flex;flex:0 0 var(--spacing-5_5);align-items:center;justify-content:center;width:var(--spacing-5_5);font-family:var(--font-sans);font-size:var(--text-nav-label)}._row_5f12t_4[data-collapsed=true] ._trailingSlot_5f12t_62{display:none}._count_5f12t_76{color:var(--color-foreground-muted)}._countUrgent_5f12t_80{color:var(--color-primary)}@media(prefers-reduced-motion:reduce){._row_5f12t_4{transition:none}}
+._sidebar_17kel_7{display:flex;flex-direction:column;box-sizing:border-box;width:var(--container-sidebar);height:100%;padding-inline:var(--spacing-3);border-right:1px solid var(--color-border);background:var(--color-background);font-family:var(--font-sans)}._sidebar_17kel_7[data-collapsed=true]{width:var(--container-sidebar-rail)}._sidebar_17kel_7>nav{flex-shrink:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:calc(-1 * var(--spacing-1));padding:var(--spacing-1);scroll-padding:var(--spacing-1)}@media(prefers-reduced-motion:reduce){._sidebar_17kel_7>nav{scroll-behavior:auto}}._section_3sxsg_5{display:flex;flex-direction:column}._header_3sxsg_13{margin:0;padding:var(--spacing-2) var(--spacing-2_5);color:var(--color-foreground-muted);font-family:var(--font-sans);font-size:var(--text-2xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--tracking-caps);text-transform:uppercase}._wordmark_1k88r_4{display:flex;align-items:center;gap:var(--spacing-2_5);font-family:var(--font-display)}._mark_1k88r_17{display:inline-flex;flex:0 0 var(--spacing-6);align-items:center;justify-content:center;width:var(--spacing-6);height:var(--spacing-6)}._mark_1k88r_17 svg{width:100%;height:100%}._name_1k88r_35{color:var(--color-foreground);font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--font-weight-semibold);letter-spacing:var(--tracking-tight)}._wordmark_1k88r_4[data-collapsed=true] ._name_1k88r_35{position:absolute;overflow:hidden;clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}._wordmark_1k88r_4[data-collapsed=true]{justify-content:center}._tile_5vhrh_12{fill:var(--color-neutral-950)}._ring_5vhrh_16{fill:var(--color-primary)}._mark_5vhrh_24{display:block}._mark_1jt5g_6{display:block}._ground_1jt5g_17{rx:var(--radius-product-tile)}._row_16hr7_4{display:flex;align-items:center;width:100%;gap:var(--spacing-2_5);padding:var(--spacing-2) var(--spacing-2_5);border:none;border-radius:var(--radius-lg);background:transparent;font-family:var(--font-sans);text-align:left;text-decoration:none;cursor:pointer;transition:background-color var(--duration-fast) var(--easing-standard)}._row_16hr7_4:hover{background:var(--color-surface-muted)}._row_16hr7_4[data-active=true]{background:var(--color-surface)}._row_16hr7_4:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}._icon_16hr7_41{display:inline-flex;flex:0 0 var(--spacing-4);align-items:center;justify-content:center;width:var(--spacing-4);height:var(--spacing-4);color:var(--color-foreground-secondary)}._icon_16hr7_41 svg{width:100%;height:100%}._row_16hr7_4[data-active=true] ._icon_16hr7_41{color:var(--color-foreground)}._row_16hr7_4[data-collapsed=true]{justify-content:center}._label_16hr7_66{flex:1 1 auto;min-width:0;overflow:hidden;color:var(--color-foreground-secondary);font-size:var(--text-nav-label);font-weight:var(--font-weight-regular);text-overflow:ellipsis;white-space:nowrap}._row_16hr7_4[data-active=true] ._label_16hr7_66{color:var(--color-foreground);font-weight:var(--font-weight-semibold)}._row_16hr7_4[data-collapsed=true] ._label_16hr7_66{position:absolute;overflow:hidden;clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}._trailingSlot_16hr7_92{display:flex;flex:0 0 var(--spacing-5_5);align-items:center;justify-content:center;width:var(--spacing-5_5);font-family:var(--font-sans);font-size:var(--text-nav-label)}._row_16hr7_4[data-collapsed=true] ._trailingSlot_16hr7_92{display:none}._count_16hr7_106{color:var(--color-foreground-muted)}._countUrgent_16hr7_110{color:var(--color-primary)}@media(prefers-reduced-motion:reduce){._row_16hr7_4{transition:none}}._chip_xyt7t_37{--chip-lift: 0px;position:relative;box-sizing:border-box;width:100%;padding:calc(var(--spacing-3) + var(--chip-lift));border:1px solid var(--color-border);border-radius:var(--radius-2xl);background:transparent;font-family:var(--font-sans)}._chip_xyt7t_37:not([data-unknown]):hover,._chip_xyt7t_37:not([data-unknown]):focus-within,._chip_xyt7t_37[data-threshold]{--chip-lift: var(--spacing-0_5);box-shadow:var(--shadow-overlay)}._chip_xyt7t_37:not([data-threshold]):not([data-unknown]):hover,._chip_xyt7t_37:not([data-threshold]):not([data-unknown]):focus-within{background:var(--color-surface)}._chip_xyt7t_37:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}._header_xyt7t_74{display:flex;align-items:center;gap:var(--spacing-2)}._chip_xyt7t_37:not([data-threshold]):not([data-unknown]) ._header_xyt7t_74{padding-right:var(--spacing-topup-reserve)}._name_xyt7t_83{min-width:0;overflow:hidden;color:var(--color-foreground-muted);font-size:var(--text-xs);font-weight:var(--font-weight-medium);line-height:var(--leading-tight);text-overflow:ellipsis;white-space:nowrap}._pill_xyt7t_162{padding:var(--spacing-0_5) var(--spacing-2);border-radius:var(--radius-full);background:var(--color-warning-subtle);color:var(--color-warning);font-size:var(--text-2xs);font-weight:var(--font-weight-semibold)}._figure_xyt7t_171{display:flex;align-items:baseline;gap:var(--spacing-1_5);margin-top:calc(var(--spacing-2_5) + var(--chip-lift))}._amount_xyt7t_186{color:var(--color-foreground);font-family:var(--font-mono);font-size:var(--text-2xl);font-weight:var(--font-weight-bold);letter-spacing:var(--tracking-tight);line-height:var(--leading-none)}._unit_xyt7t_195{color:var(--color-foreground-muted);font-size:var(--text-xs)}._retry_xyt7t_200{width:var(--spacing-3);height:var(--spacing-3);color:var(--color-foreground-muted)}._bar_xyt7t_209{display:flex;overflow:hidden;width:100%;height:calc(var(--spacing-1_25) + var(--chip-lift));margin-top:calc(var(--spacing-2_5) + var(--chip-lift));border-radius:var(--radius-full)}._bar_xyt7t_209[data-tone=rest]{background:var(--color-surface-muted)}._bar_xyt7t_209[data-tone=threshold]{background:var(--color-warning-subtle)}._bar_xyt7t_209[data-tone=unknown]{background:var(--color-surface-muted)}._segmentGranted_xyt7t_230,._segmentPurchased_xyt7t_231{height:100%;transition:width var(--duration-fast) var(--easing-standard)}._segmentGranted_xyt7t_230{background:var(--color-grant)}._segmentPurchased_xyt7t_231{background:var(--color-purchased)}._details_xyt7t_251{display:none}._chip_xyt7t_37:hover ._details_xyt7t_251,._chip_xyt7t_37:focus-within ._details_xyt7t_251{display:block}._split_xyt7t_260{display:flex;flex-direction:column;gap:var(--spacing-1);margin:var(--spacing-2_5) 0 0}._splitRow_xyt7t_267{display:flex;align-items:center;justify-content:space-between}._splitLabel_xyt7t_273{display:flex;align-items:center;gap:var(--spacing-1_5);color:var(--color-foreground);font-size:var(--text-xs)}._splitAmount_xyt7t_281{margin:0;color:var(--color-foreground);font-family:var(--font-mono);font-size:var(--text-xs);font-variant-numeric:tabular-nums}._dotGranted_xyt7t_289,._dotPurchased_xyt7t_290{width:var(--spacing-1_5);height:var(--spacing-1_5);border-radius:var(--radius-full)}._dotGranted_xyt7t_289{background:var(--color-grant)}._dotPurchased_xyt7t_290{background:var(--color-purchased)}._footer_xyt7t_304{margin:var(--spacing-3) 0 0;padding-top:var(--spacing-1);border-top:1px solid var(--color-border);color:var(--color-foreground-muted);font-size:var(--text-2xs)}._burnNote_xyt7t_312{margin:var(--spacing-2_5) 0 0;color:var(--color-foreground-secondary);font-size:var(--text-2xs);line-height:var(--leading-snug)}._topUp_xyt7t_87{position:absolute;top:calc(var(--spacing-3) + var(--chip-lift));right:calc(var(--spacing-3) + var(--chip-lift));padding:0;border:none;background:transparent;color:var(--color-primary);font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);opacity:0;cursor:pointer;transition:opacity var(--duration-fast) var(--easing-standard)}._chip_xyt7t_37:hover ._topUp_xyt7t_87,._chip_xyt7t_37:focus-within ._topUp_xyt7t_87,._topUp_xyt7t_87:focus-visible{opacity:1}._topUp_xyt7t_87:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}._topUp_xyt7t_87[data-grown=true]{position:static;width:100%;margin-top:var(--spacing-2_5);padding:var(--spacing-2);border-radius:var(--radius-lg);background:var(--color-primary);color:var(--color-primary-foreground);font-size:var(--text-sm);opacity:1}._topUp_xyt7t_87[data-grown=true]:hover{background:var(--color-primary-hover)}._rail_xyt7t_378{--chip-lift: 0px;position:relative;display:flex;box-sizing:border-box;width:100%;flex-direction:column;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2);font-family:var(--font-sans)}._railIcon_xyt7t_392{width:var(--spacing-6);height:var(--spacing-6);color:var(--color-foreground-secondary)}._railFigure_xyt7t_398{color:var(--color-foreground);font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums}._rail_xyt7t_378 ._bar_xyt7t_209{height:var(--spacing-0_5);margin-top:0}._srOnly_xyt7t_411{position:absolute;overflow:hidden;clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}@media(prefers-reduced-motion:reduce){._segmentGranted_xyt7t_230,._segmentPurchased_xyt7t_231,._topUp_xyt7t_87{transition:none}}._bar_r1jjn_6{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-4);box-sizing:border-box;height:var(--spacing-12);padding:0 var(--spacing-8);border-bottom:1px solid var(--color-border);background:var(--color-surface);font-family:var(--font-sans)}._breadcrumb_r1jjn_19{display:flex;min-width:0;align-items:center;gap:var(--spacing-2);overflow:hidden;color:var(--color-foreground);font-size:var(--text-sm);font-weight:var(--font-weight-medium);text-overflow:ellipsis;white-space:nowrap}._actions_r1jjn_32{display:flex;flex:0 0 auto;align-items:center;gap:var(--spacing-2)}._header_i17td_42{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-8);padding:var(--spacing-4_5) var(--spacing-8) var(--spacing-4);background:var(--color-surface);font-family:var(--font-sans)}._headings_i17td_52{display:flex;min-width:0;flex-direction:column;gap:var(--spacing-1)}._title_i17td_33{margin:0;color:var(--color-foreground);font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--font-weight-semibold);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight)}._subtitle_i17td_74{margin:0;color:var(--color-foreground-secondary);font-size:var(--text-base);font-weight:var(--font-weight-regular);line-height:var(--leading-snug)}._actions_i17td_82{display:flex;flex:0 0 auto;align-items:center;gap:var(--spacing-2)}._shell_19o9q_10{display:flex;height:100%;background:var(--color-surface);font-family:var(--font-sans)}._wordmark_19o9q_20{padding:var(--spacing-3) var(--spacing-2_5) var(--spacing-5)}._switcher_19o9q_26{padding-bottom:var(--spacing-4)}._foot_19o9q_33{display:flex;flex-direction:column;gap:var(--spacing-4);margin-block-start:auto;padding-block-start:var(--spacing-4)}._nav_19o9q_45{display:flex;flex-direction:column;gap:var(--spacing-4)}._main_19o9q_54{display:flex;min-width:0;flex:1;flex-direction:column}._content_19o9q_65{flex:1;min-height:0;overflow-y:auto;background:var(--color-surface)}:root{--color-neutral-0: #FFFFFF;--color-neutral-50: #F7F7F8;--color-neutral-100: #EFEFF1;--color-neutral-200: #E5E5EA;--color-neutral-300: #D9D9D9;--color-neutral-400: #C1C1C2;--color-neutral-500: #8E8E93;--color-neutral-600: #6B6B6B;--color-neutral-700: #525252;--color-neutral-800: #3A3A3C;--color-neutral-900: #292929;--color-neutral-950: #1D1D1B;--color-neutral-1000: #000000;--color-orange-50: #FDF3EE;--color-orange-100: #FBE2D5;--color-orange-200: #F7C3A8;--color-orange-300: #F0A173;--color-orange-400: #EB7147;--color-orange-500: #E9521E;--color-orange-600: #C2410C;--color-orange-700: #9A3412;--color-sand-100: #FBF3E4;--color-sand-300: #F3D6AC;--color-sand-600: #8A6510;--color-green-100: #DDF0E4;--color-green-600: #157F3D;--color-crimson-100: #F7DEE1;--color-crimson-600: #A3182B;--color-blue-100: #DEE6FA;--color-blue-600: #2A5BD7;--color-background: var(--color-neutral-50);--color-surface: var(--color-neutral-0);--color-surface-muted: var(--color-neutral-100);--color-border: var(--color-neutral-200);--color-border-strong: var(--color-neutral-300);--color-foreground: var(--color-neutral-950);--color-foreground-secondary: var(--color-neutral-700);--color-foreground-muted: var(--color-neutral-600);--color-foreground-disabled: var(--color-neutral-400);--color-primary: var(--color-orange-500);--color-primary-hover: var(--color-orange-600);--color-primary-foreground: var(--color-neutral-0);--color-primary-subtle: var(--color-orange-50);--color-primary-border: var(--color-orange-200);--color-success: var(--color-green-600);--color-success-subtle: var(--color-green-100);--color-warning: var(--color-sand-600);--color-warning-subtle: var(--color-sand-300);--color-danger: var(--color-crimson-600);--color-danger-subtle: var(--color-crimson-100);--color-info: var(--color-blue-600);--color-info-subtle: var(--color-blue-100);--color-grant: var(--color-sand-600);--color-purchased: var(--color-neutral-950);--shadow-overlay-color: rgb(29 29 27 / 20%);--font-display: var(--boost33-font-display, Outfit), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-sans: var(--boost33-font-sans, Inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono: var(--boost33-font-mono, "Geist Mono"), ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--text-2xs: 11px;--text-xs: 12px;--text-sm: 13px;--text-base: 15px;--text-md: 16px;--text-lg: 18px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 30px;--text-4xl: 36px;--text-5xl: 46px;--text-6xl: 60px;--text-7xl: 78px;--text-nav-label: 14px;--font-weight-light: 300;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--tracking-tighter: -.03em;--tracking-tight: -.02em;--tracking-normal: 0em;--tracking-wide: .04em;--tracking-wider: .09em;--tracking-caps: .05em;--leading-none: 100%;--leading-tight: 120%;--leading-snug: 135%;--leading-normal: 150%;--leading-relaxed: 170%;--breakpoint-mobile: 390px;--breakpoint-desktop: 1440px;--container-sidebar: 264px;--container-sidebar-rail: 56px;--container-content: 1440px;--spacing-1: 4px;--spacing-2: 8px;--spacing-3: 12px;--spacing-4: 16px;--spacing-4_5: 18px;--spacing-5: 20px;--spacing-6: 24px;--spacing-7: 28px;--spacing-8: 32px;--spacing-10: 40px;--spacing-12: 48px;--spacing-16: 64px;--spacing-20: 80px;--spacing-2_5: 10px;--spacing-5_5: 22px;--spacing-1_5: 6px;--spacing-1_25: 5px;--spacing-0_5: 2px;--spacing-2_25: 9px;--spacing-topup-reserve: 68px;--radius-none: 0px;--radius-xs: 2px;--radius-sm: 3px;--radius-md: 4px;--radius-lg: 6px;--radius-xl: 8px;--radius-2xl: 12px;--radius-full: 9999px;--radius-product-tile: 25%}:root{--duration-fast: .12s;--easing-standard: cubic-bezier(.2, 0, 0, 1)}:root{--shadow-overlay: 0px 16px 40px -10px var(--shadow-overlay-color)}._root_qm5nw_8{position:relative;font-family:var(--font-sans)}._trigger_qm5nw_17{display:flex;box-sizing:border-box;width:100%;align-items:center;gap:var(--spacing-2_5);padding:var(--spacing-2_25) var(--spacing-2);border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);background:transparent;font-family:var(--font-sans);cursor:pointer}._trigger_qm5nw_17[aria-expanded=true]{background:var(--color-surface-muted)}._trigger_qm5nw_17:focus-visible,._railTrigger_qm5nw_43:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}._triggerName_qm5nw_53{overflow:hidden;flex:1;color:var(--color-foreground);font-size:var(--text-nav-label);font-weight:var(--font-weight-bold);text-align:left;text-overflow:ellipsis;white-space:nowrap}._chevron_qm5nw_64{width:var(--spacing-4);height:var(--spacing-4);flex-shrink:0;color:var(--color-foreground-muted);transition:transform var(--duration-fast) var(--easing-standard)}._trigger_qm5nw_17[aria-expanded=true] ._chevron_qm5nw_64{transform:rotate(180deg)}._railTrigger_qm5nw_43{display:flex;box-sizing:border-box;width:100%;align-items:center;justify-content:center;padding:var(--spacing-2);border:none;background:transparent;cursor:pointer}._panel_qm5nw_93{position:absolute;z-index:1;top:100%;right:0;left:0;box-sizing:border-box;margin-top:var(--spacing-0_5);padding:var(--spacing-2);border:1px solid var(--color-border);border-radius:var(--radius-2xl);background:var(--color-surface);box-shadow:var(--shadow-overlay)}._hubRow_qm5nw_113,._productRow_qm5nw_114,._accountRow_qm5nw_115{display:flex;box-sizing:border-box;width:100%;align-items:center;gap:var(--spacing-3);padding:var(--spacing-2_5) var(--spacing-3);border:none;border-radius:var(--radius-lg);background:transparent;color:var(--color-foreground);font-family:var(--font-sans);text-align:left;text-decoration:none;cursor:pointer}._hubRow_qm5nw_113:hover,._productRow_qm5nw_114:hover,._accountRow_qm5nw_115:hover{background:var(--color-surface-muted)}._hubRow_qm5nw_113:focus-visible,._productRow_qm5nw_114:focus-visible,._accountRow_qm5nw_115:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}._products_qm5nw_146{margin:0;padding:0;list-style:none}._productRow_qm5nw_114[data-current=true]{background:var(--color-surface-muted)}._productRow_qm5nw_114[data-entitled=false] ._rowName_qm5nw_160{color:var(--color-foreground-muted)}._rowText_qm5nw_164{display:flex;min-width:0;flex-direction:column}._rowName_qm5nw_160{overflow:hidden;color:var(--color-foreground);font-size:var(--text-nav-label);font-weight:var(--font-weight-bold);text-overflow:ellipsis;white-space:nowrap}._productRow_qm5nw_114 ._rowName_qm5nw_160{flex:1}._rowSub_qm5nw_184{overflow:hidden;color:var(--color-foreground-muted);font-size:var(--text-sm);text-overflow:ellipsis;white-space:nowrap}._hubMark_qm5nw_192{width:var(--spacing-7);height:var(--spacing-7);flex-shrink:0;color:var(--color-foreground)}._tag_qm5nw_201{flex-shrink:0;margin-left:auto;padding:var(--spacing-0_5) var(--spacing-2);border-radius:var(--radius-full);background:var(--color-surface-muted);color:var(--color-foreground-muted);font-size:var(--text-xs);font-weight:var(--font-weight-medium)}._check_qm5nw_212{width:var(--spacing-5);height:var(--spacing-5);flex-shrink:0;margin-left:auto;color:var(--color-foreground)}._avatar_qm5nw_222{display:grid;width:var(--spacing-7);height:var(--spacing-7);flex-shrink:0;border-radius:var(--radius-lg);background:var(--color-surface-muted);color:var(--color-foreground-secondary);font-size:var(--text-xs);font-weight:var(--font-weight-semibold);place-items:center}._chevronRight_qm5nw_235{width:var(--spacing-4);height:var(--spacing-4);flex-shrink:0;margin-left:auto;color:var(--color-foreground-muted)}._divider_qm5nw_244{margin:var(--spacing-2) 0;border:none;border-top:1px solid var(--color-border)}@media(prefers-reduced-motion:reduce){._chevron_qm5nw_64{transition:none}}

package/dist/theme.css

@@ -0,0 +1,189 @@
+/*
+ * GENERATED by `npm run tokens` from data/paper-tokens.json
+ * (Paper file "Boost Products", captured 2026-09-09T14:16:00Z). Do not hand-edit --
+ * rerun the generator after recapturing the dump.
+ *
+ * The Tailwind v4 entry point (ADR-0012, B33-871). Optional, and additive: a
+ * consumer that imports only `@boost33/ui/style.css` never sees this file.
+ * A consumer on Tailwind v4 adds it under Tailwind itself --
+ *
+ *   @import "tailwindcss";
+ *   @import "@boost33/ui/style.css";
+ *   @import "@boost33/ui/theme.css";
+ *
+ * -- and then holds zero token names and zero token values of its own, which
+ * is what ADR-0011 asks of a consumer and what no amount of restating names
+ * in its own @theme block can give it. `bg-orange-500`, `rounded-xl` and
+ * `text-sm` mean this package's values in that app, and keep meaning them
+ * across a version bump.
+ *
+ * This is the SAME token set as tokens.css, from the same dump, written by
+ * the same generator run and the same code path -- only the prelude differs
+ * (`@theme static` here, `:root` there). Tailwind emits an @theme block onto
+ * `:root` inside `@layer theme`, so a consumer importing both files declares
+ * every name twice; that is harmless for exactly as long as the two agree,
+ * and tests/theme-drift.test.ts is what keeps them agreeing. Hand-editing
+ * this file is how that stops being true.
+ *
+ * `static` rather than plain `@theme` on purpose: plain `@theme` emits only
+ * the variables a generated utility happens to reference, so a token nothing
+ * in the consumer's markup names would resolve to nothing if it were read
+ * through a hand-written var(). See the note beside THEME_HEADER.
+ *
+ * Motion and elevation are NOT here, for the same reason they are not in
+ * tokens.css: they are not Paper token types and are hand-maintained in
+ * motion-tokens.css and elevation-tokens.css. Copying a hand-maintained
+ * value into a generated file is the drift this whole shape exists to stop.
+ * They still reach a Tailwind consumer on `:root` through style.css; what
+ * they do not get is a minted `shadow-overlay` utility.
+ *
+ * The font hook survives verbatim (ADR-0011). Tailwind carries
+ * `var(--boost33-font-sans, Inter)` through into the theme layer unchanged,
+ * measured on tailwindcss@4.3.3 -- so a consumer still names its own face by
+ * declaring --boost33-font-sans and nothing else.
+ */
+
+@theme static {
+  /* color */
+  --color-neutral-0: #FFFFFF; /* Surface white. Charte: 30% of the palette. */
+  --color-neutral-50: #F7F7F8;
+  --color-neutral-100: #EFEFF1;
+  --color-neutral-200: #E5E5EA; /* Hairline rules and borders. */
+  --color-neutral-300: #D9D9D9; /* Charte secondary. */
+  --color-neutral-400: #C1C1C2; /* Charte secondary. */
+  --color-neutral-500: #8E8E93;
+  --color-neutral-600: #6B6B6B; /* Charte secondary. Muted text. Darkened from #737373 on 16 Sep 2026 — B33-535, recorded in @boost33/ui ADR 0007. #737373 cleared WCAG AA only on white, so 11–14px muted text failed at rest on --color-background (4.43:1) and on --color-surface-muted (4.13:1); every use of this token is under the 18.66px cut-off where AA would relax to 3:1. #6B6B6B clears all three grounds: 5.33:1 on white, 4.98:1 on --color-background, 4.64:1 on --color-surface-muted. Do not lighten it without re-checking 4.5:1 at 11px against every ground muted text lands on. */
+  --color-neutral-700: #525252;
+  --color-neutral-800: #3A3A3C;
+  --color-neutral-900: #292929; /* Charte secondary. */
+  --color-neutral-950: #1D1D1B; /* Brand black, taken from the logo artwork. Primary ink. */
+  --color-neutral-1000: #000000; /* Charte primary black. Reserved for the logo and dark ground. */
+  --color-orange-50: #FDF3EE;
+  --color-orange-100: #FBE2D5;
+  --color-orange-200: #F7C3A8;
+  --color-orange-300: #F0A173;
+  --color-orange-400: #EB7147; /* Charte secondary. */
+  --color-orange-500: #E9521E; /* BRAND ORANGE. Charte: 10% of the palette. One moment per screen. */
+  --color-orange-600: #C2410C;
+  --color-orange-700: #9A3412;
+  --color-sand-100: #FBF3E4;
+  --color-sand-300: #F3D6AC; /* Charte secondary. Warning tint. */
+  --color-sand-600: #8A6510; /* Deep ochre. Warning ink — yellow enough to never be mistaken for brand orange. */
+  --color-green-100: #DDF0E4;
+  --color-green-600: #157F3D;
+  --color-crimson-100: #F7DEE1;
+  --color-crimson-600: #A3182B; /* Deep cool red. Danger — pushed away from orange so the two never blur. */
+  --color-blue-100: #DEE6FA;
+  --color-blue-600: #2A5BD7;
+  --color-background: var(--color-neutral-50);
+  --color-surface: var(--color-neutral-0);
+  --color-surface-muted: var(--color-neutral-100);
+  --color-border: var(--color-neutral-200); /* Hairline. The main structural device — rules, not cards. */
+  --color-border-strong: var(--color-neutral-300);
+  --color-foreground: var(--color-neutral-950);
+  --color-foreground-secondary: var(--color-neutral-700);
+  --color-foreground-muted: var(--color-neutral-600);
+  --color-foreground-disabled: var(--color-neutral-400);
+  --color-primary: var(--color-orange-500); /* One moment per screen: the primary action OR the threshold marker, never both. */
+  --color-primary-hover: var(--color-orange-600);
+  --color-primary-foreground: var(--color-neutral-0);
+  --color-primary-subtle: var(--color-orange-50);
+  --color-primary-border: var(--color-orange-200);
+  --color-success: var(--color-green-600);
+  --color-success-subtle: var(--color-green-100);
+  --color-warning: var(--color-sand-600);
+  --color-warning-subtle: var(--color-sand-300);
+  --color-danger: var(--color-crimson-600);
+  --color-danger-subtle: var(--color-crimson-100);
+  --color-info: var(--color-blue-600);
+  --color-info-subtle: var(--color-blue-100);
+  --color-grant: var(--color-sand-600); /* Grant tokens — they expire. */
+  --color-purchased: var(--color-neutral-950); /* Purchased tokens — they never expire. Ink, because it is permanent. */
+  --shadow-overlay-color: rgb(29 29 27 / 20%); /* The one colour every shadow in the system is drawn in: --color-neutral-950, the brand black, at 20%. Added by hand on B33-530 rather than by recapture -- Paper carries it, this dump predates it -- and the value is the Wallet's, copied from its own elevation.css. The offsets it is composed into are not a Paper token type; see elevation-tokens.css. */
+
+  /* fontFamily */
+  --font-display: var(--boost33-font-display, Outfit), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Brand face. Headings, the balance figure, the wordmark. */
+  --font-sans: var(--boost33-font-sans, Inter), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Dense UI text. Documented extension of the charte for legibility below 16px. */
+  --font-mono: var(--boost33-font-mono, 'Geist Mono'), ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* Every token amount. Tabular, so money aligns in columns. */
+
+  /* fontSize */
+  --text-2xs: 11px;
+  --text-xs: 12px;
+  --text-sm: 13px;
+  --text-base: 15px;
+  --text-md: 16px;
+  --text-lg: 18px;
+  --text-xl: 20px;
+  --text-2xl: 24px;
+  --text-3xl: 30px;
+  --text-4xl: 36px;
+  --text-5xl: 46px;
+  --text-6xl: 60px;
+  --text-7xl: 78px; /* The balance figure. One per screen. */
+  --text-nav-label: 14px; /* Nav item label size, settled in the fidelity baseline. Sits between --text-sm (13px) and --text-base (15px) without sharing either slot -- reused by other nav-adjacent labels, not just NavItem. */
+
+  /* fontWeight */
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* letterSpacing */
+  --tracking-tighter: -0.03em;
+  --tracking-tight: -0.02em;
+  --tracking-normal: 0em;
+  --tracking-wide: 0.04em;
+  --tracking-wider: 0.09em; /* Small caps labels. */
+  --tracking-caps: 0.05em; /* NavSection header tracking, settled in the spec (The shared app shell) at 0.05em. Added when NavSection needed it, the way --spacing-2_5 was. NOTE for a human: the spec's 0.05em disagrees with --tracking-wider (0.09em, 'Small caps labels'), which was pre-created for this same uppercase label but never used -- reconcile which one the wordmark-era Wallet actually renders and retire the other. */
+
+  /* lineHeight */
+  --leading-none: 100%;
+  --leading-tight: 120%;
+  --leading-snug: 135%;
+  --leading-normal: 150%;
+  --leading-relaxed: 170%;
+
+  /* breakpoint */
+  --breakpoint-mobile: 390px;
+  --breakpoint-desktop: 1440px;
+
+  /* container */
+  --container-sidebar: 264px; /* Shell sidebar. Matches BoostScore so the products feel like one system. */
+  --container-sidebar-rail: 56px; /* Shell sidebar collapsed to the rail. Added when Sidebar needed it; 56px is the settled rail width the WalletChip and NavItem rail specimens were already shot at (see CONTEXT.md, 'Rail'). */
+  --container-content: 1440px;
+
+  /* spacing */
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-4_5: 18px; /* PageHeader's top padding. Off the x4 scale on purpose, same reasoning as --spacing-2_5: the Boost Outbound screens set the page header 18px from the top and 16px from the bottom, so it is not a symmetric --spacing-4 block -- the extra 2px at the top optically centres a cap-height that sits low in its line box. */
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 28px; /* On the x4 scale but absent from the captured dump. Added when PageHeader wanted a 28px top padding; the compact header (B33-768) moved to --spacing-4_5 and nothing in this package uses 28px now. Kept rather than dropped because tokens.css ships in style.css and a consumer may be holding it. */
+  --spacing-8: 32px;
+  --spacing-10: 40px;
+  --spacing-12: 48px;
+  --spacing-16: 64px;
+  --spacing-20: 80px;
+  --spacing-2_5: 10px; /* NavItem's settled inline padding and label/trailing-slot gap. Off the x4 scale on purpose — the fidelity baseline measured 10px, not 8 or 12. */
+  --spacing-5_5: 22px; /* NavItem's fixed trailing slot width, settled in the fidelity baseline. Off the x4 scale on purpose, same reasoning as --spacing-2_5. */
+  --spacing-1_5: 6px; /* WalletChip's figure gap, split dot and split label gap, settled in the fidelity baseline. Off the x4 scale on purpose, same reasoning as --spacing-2_5. (It was introduced as the balance bar height; B33-527 re-measured the approved baseline and found the bar is --spacing-1_25 at rest.) */
+  --spacing-1_25: 5px; /* WalletChip's resting balance bar height, measured off the approved fidelity baselines in B33-527 (walletchip-resting and walletchip-unknown both render it at exactly 5px; the lifted states add --spacing-0_5). Off the x4 scale on purpose, same reasoning as --spacing-2_5. */
+  --spacing-0_5: 2px; /* WalletChip's rail bar height -- the split turned thin at 56px, settled in the fidelity baseline. Also the amount the chip opens up by when it lifts (B33-527) and the balance pill's vertical padding. Off the x4 scale on purpose, same reasoning as --spacing-2_5. */
+  --spacing-2_25: 9px; /* The AppSwitcher trigger's block padding, settled in the spec's 9 September recapture ("9px block / 8px inline padding"). Off the x4 scale on purpose, same reasoning as --spacing-2_5. */
+  --spacing-topup-reserve: 68px; /* WalletChip's top-up reserve: the width of the strip the Top up button floats over in the chip header, kept clear of the wallet name. Not a Paper token and not a step on the x4 scale -- added by hand the way --spacing-2_5 and --radius-product-tile were, and named for what it reserves rather than for where it sits on a scale, because the number is a measurement of one button. Derived in B33-913 from the real rendering at the fidelity baselines' 240px chip width. `.topUp` is absolutely positioned, so it reserves no width of its own; at --text-xs / --font-weight-semibold in Inter it measures 39.6px for the English "Top up" and 59.9px for the French "Recharger" the first two consumers ship. 68px is the wider of those rounded up to 60px, plus the header's own --spacing-2 of clearance, so a truncated name's ellipsis stops short of the button instead of touching it. Deliberately no larger: the chip's header content box is 210px, so this still leaves 142px for the name and keeps "Portefeuille electronique" (140.3px) whole, and every px added here truncates an ordinary translated name earlier. A consumer whose top-up label is a phrase rather than a word ("Crediter le compte", 107px) overruns it again -- the only fix that holds for any label is the button in normal flow, which restructures an approved view and needs a human. See B33-913. */
+
+  /* radius */
+  --radius-none: 0px;
+  --radius-xs: 2px;
+  --radius-sm: 3px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+  --radius-xl: 8px;
+  --radius-2xl: 12px;
+  --radius-full: 9999px;
+  --radius-product-tile: 25%; /* The corner on the ProductMark tile -- the rounded square the four product glyphs sit on. Not a Paper token: the marks are copied from boostledger's icons.tsx, whose tile is a 40-unit `rect` with `rx=10`, i.e. a quarter of the side. Added by hand (the way --spacing-2_5 was) so this package's no-ad-hoc-radius rule is met with a token rather than a literal. Kept as a proportion, not a px value, on purpose: unlike every other radius here it is applied to a `rect` inside a `viewBox=0 0 40 40` and must scale with the mark -- 25% resolves to rx=10 on that grid at every size, which is what lets one drawing render correctly from Paper's 96px down to 20px. A fixed px radius cannot do that. */
+
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boost33/ui",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "The app shell every Boost33 product renders inside.",
   "license": "UNLICENSED",
   "type": "module",
@@ -24,19 +24,27 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./style.css": "./dist/style.css"
+    "./style.css": "./dist/style.css",
+    "./theme.css": "./dist/theme.css"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "lint": "eslint .",
     "build": "vite build",
+    "prepublishOnly": "npm run typecheck && npm run test && npm run lint && npm run build",
     "tokens": "npx tsx scripts/generate-tokens.mts",
     "specimen:dev": "vite --config vite.specimen.config.mts",
     "specimen:build": "vite build --config vite.specimen.config.mts",
     "specimen:preview": "vite preview --config vite.specimen.config.mts",
     "screenshot-diff": "npm run specimen:build && npx tsx scripts/screenshot-diff.mts",
-    "afk": "npx tsx .sandcastle/main.mts"
+    "sidebar-overflow-check": "npm run specimen:build && npx tsx scripts/sidebar-overflow-check.mts",
+    "wallet-name-overflow-check": "npm run specimen:build && npx tsx scripts/wallet-name-overflow-check.mts",
+    "nav-height-budget-check": "npm run specimen:build && npx tsx scripts/nav-height-budget-check.mts",
+    "token-order-check": "npx tsx scripts/token-order-check.mts",
+    "afk": "npx tsx .sandcastle/main.mts",
+    "hooks:install": "git config core.hooksPath .githooks",
+    "prepare": "git config core.hooksPath .githooks || true"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -45,7 +53,11 @@
   "devDependencies": {
     "@ai-hero/sandcastle": "^0.12.0",
     "@eslint/js": "^10.0.1",
+    "@fontsource-variable/geist-mono": "^5.3.0",
+    "@fontsource-variable/inter": "^5.3.0",
+    "@fontsource-variable/outfit": "^5.3.0",
     "@playwright/test": "^1.63.0",
+    "@tabler/icons-react": "^3.46.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
@@ -65,7 +77,8 @@
     "typescript-eslint": "^8.68.0",
     "vite": "^6.0.7",
     "vite-plugin-dts": "^4.4.0",
-    "vitest": "^4.1.10"
+    "vitest": "^4.1.10",
+    "yaml": "^2.9.1"
   },
   "allowScripts": {
     "esbuild@0.28.2": true,