@boost33/ui 0.2.0 → 0.3.1

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/nav-height-budget.ts","../src/components/Sidebar/Sidebar.tsx","../src/components/NavSection/NavSection.tsx","../src/components/Wordmark/Wordmark.tsx","../src/components/Boost33Mark/Boost33Mark.tsx","../src/components/ProductMark/ProductMark.tsx","../src/components/NavItem/NavItem.tsx","../src/components/WalletChip/format.ts","../src/components/WalletChip/icons.tsx","../src/components/WalletChip/WalletChip.tsx","../src/components/TopBar/TopBar.tsx","../src/components/PageHeader/PageHeader.tsx","../src/components/AppShell/AppShell.tsx"],"sourcesContent":["// The spec's rough budget: a sidebar's nav has to fit above the wallet chip\n// and footer without scrolling. Boost Outbound's admin role has already blown\n// past it once, so 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.\nexport const NAV_HEIGHT_BUDGET_PX = 700\n\n// The spec's per-row costs. A section header (the small uppercase label) takes\n// 40px of vertical run; a nav item takes 32px. Kept as named constants so a\n// nav's height can be computed from its data -- how many sections, how many\n// items -- before anything renders.\nexport const NAV_SECTION_HEADER_PX = 40\nexport const NAV_ITEM_PX = 32\n\n// The sidebar's fixed furniture above and below the nav -- the wordmark, the\n// app switcher, the wallet chip, the footer -- takes about 198px, so a 900px\n// viewport leaves roughly the 700px budget for the nav itself.\nexport const NAV_SHELL_FIXED_PX = 198\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 40px cost). */\n  hasHeader: boolean\n  /** How many nav items the section holds (32px each). */\n  itemCount: number\n}\n\n/**\n * The vertical space a nav takes, summed from its sections' shapes. Lets the\n * budget be checked from the nav's data alone, before it is rendered into a\n * sidebar that might not fit it -- Boost Outbound's admin role has overflowed\n * this once already.\n */\nexport function navContentHeight(sections: NavSectionShape[]): number {\n  return sections.reduce(\n    (used, section) => used + (section.hasHeader ? NAV_SECTION_HEADER_PX : 0) + section.itemCount * NAV_ITEM_PX,\n    0,\n  )\n}\n\n/** The nav's budget at a given viewport: what is left once the fixed shell parts are taken. */\nexport function navBudgetForViewport(viewportPx: number): number {\n  return viewportPx - NAV_SHELL_FIXED_PX\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","import { useEffect, useRef, type ReactNode, type RefObject } from 'react'\nimport { NAV_HEIGHT_BUDGET_PX, checkNavHeightBudget, measureNavHeight } from '../../nav-height-budget'\nimport styles from './Sidebar.module.css'\n\nexport interface SidebarProps {\n  /** Names the sidebar landmark, so it stays distinct from other regions on the page. */\n  label: string\n  /** Sidebar-on-the-rail state. Narrows to the 56px rail; the pieces inside collapse themselves. */\n  collapsed?: boolean\n  /**\n   * What the sidebar holds -- wordmark, switcher, nav sections, wallet chip, footer. Passed in, never hardcoded.\n   *\n   * **Put the nav in a `<nav>` element that is a direct child of the sidebar.**\n   * That element is the sidebar's scroll region: a nav longer than the column\n   * scrolls inside itself, and everything above and below it -- the wordmark,\n   * the switcher, the wallet chip, the footer -- stays pinned. A nav nested\n   * inside another element does not get that, and says so in development. See\n   * ADR-0005.\n   */\n  children: ReactNode\n}\n\n// The sidebar frame: a 264px column with a hairline down its right edge,\n// collapsing to a 56px rail. It is only the container -- what stacks inside it\n// is data the consumer passes, so a product never hardcodes its own rows here.\nexport function Sidebar({ label, collapsed = false, children }: SidebarProps) {\n  const column = useRef<HTMLElement>(null)\n  useNavHeightBudgetWarning(column, label, children)\n\n  return (\n    <aside ref={column} className={styles.sidebar} aria-label={label} data-collapsed={collapsed ? 'true' : undefined}>\n      {children}\n    </aside>\n  )\n}\n\n/*\n * The development-mode half of the nav budget.\n *\n * Sidebar.module.css stops an over-long nav from painting past the column, but\n * silently: the consumer sees a scrollbar and never learns their nav is too\n * long. The budget helpers in nav-height-budget.ts were written for exactly\n * that -- Boost Outbound's admin role has exceeded the budget once already --\n * and until this hook nothing in the shipped components ever called them, so a\n * consumer was protected only if they remembered to check by hand.\n *\n * `process.env.NODE_ENV` rather than an `import.meta` flag because every\n * bundler a consumer might use replaces that exact expression at build time\n * and drops the branch, which is how React itself ships its own dev warnings.\n *\n * Best effort by design: it measures once per render of the children, after\n * paint. A nav that only overflows after a font swap or a window resize is not\n * caught, and does not need to be -- the case this exists for is a nav that is\n * too long for the column the moment it is rendered.\n */\nfunction useNavHeightBudgetWarning(column: RefObject<HTMLElement | null>, label: string, children: ReactNode): void {\n  useEffect(() => {\n    if (process.env.NODE_ENV === 'production') return\n\n    const element = column.current\n    if (!element) return\n\n    const nav = element.querySelector(':scope > nav')\n    if (!(nav instanceof HTMLElement)) {\n      // Only worth saying when there is a nav and it is in the wrong place.\n      // A sidebar that holds no nav at all is an ordinary thing to render.\n      if (element.querySelector('nav')) {\n        console.warn(\n          `@boost33/ui Sidebar (\"${label}\"): the nav is nested inside another element, so it is not the sidebar's scroll ` +\n            `region. Make the <nav> a direct child of the Sidebar, or a nav longer than the column will paint past its ` +\n            `bottom edge instead of scrolling. See ADR-0005.`,\n        )\n      }\n      return\n    }\n\n    const budget = checkNavHeightBudget(measureNavHeight(nav), nav.clientHeight)\n    if (budget.fits) return\n\n    console.warn(\n      `@boost33/ui Sidebar (\"${label}\"): the nav needs ${budget.usedPx}px and the column has ${budget.budgetPx}px for it, ` +\n        `so it is ${budget.overBy}px over and scrolling. Nothing is lost -- the wallet chip and footer stay pinned -- but ` +\n        `the shell's nav budget is about ${NAV_HEIGHT_BUDGET_PX}px at a 900px viewport, and a nav past it is a nav worth ` +\n        `cutting. navContentHeight() and checkNavHeightBudget(), exported from this package, check a nav's shape before ` +\n        `it renders.`,\n    )\n  }, [column, label, children])\n}\n","import { useId, type ReactNode } from 'react'\nimport styles from './NavSection.module.css'\n\nexport interface NavSectionProps {\n  /**\n   * The section header -- the small uppercase label above the rows. Omit for a\n   * section with no header (the sidebar's first section has none). Passed in\n   * its natural case; the uppercasing is presentational.\n   */\n  label?: string\n  /** The section's rows -- NavItems, passed in as data, never hardcoded here. */\n  children: ReactNode\n}\n\n// A group of nav rows under an optional header. A labelled section is an\n// accessible group named by its header, so the rows announce with their\n// section; a headerless section is just the run of rows.\nexport function NavSection({ label, children }: NavSectionProps) {\n  const headerId = useId()\n\n  if (label == null) {\n    return <div className={styles.section}>{children}</div>\n  }\n\n  return (\n    <div className={styles.section} role=\"group\" aria-labelledby={headerId}>\n      <p id={headerId} className={styles.header}>\n        {label}\n      </p>\n      {children}\n    </div>\n  )\n}\n","import type { ReactNode } from 'react'\nimport styles from './Wordmark.module.css'\n\nexport interface WordmarkProps {\n  /**\n   * The Boost33 mark -- the logo artwork, owned by its own ticket. Passed in\n   * rather than hardcoded here so the wordmark does not carry a second copy of\n   * the mark. On the rail it is all that shows.\n   */\n  mark?: ReactNode\n  /** Sidebar-on-the-rail state. Hides the \"Boost33\" name; the mark stays. */\n  collapsed?: boolean\n}\n\n// The lockup at the top of the sidebar: the Boost33 mark and the \"Boost33\"\n// name beside it. On the rail the name drops to the accessibility tree and the\n// mark stands alone.\nexport function Wordmark({ mark, collapsed = false }: WordmarkProps) {\n  return (\n    <div className={styles.wordmark} data-collapsed={collapsed ? 'true' : undefined}>\n      {mark != null && (\n        <span className={styles.mark} aria-hidden=\"true\">\n          {mark}\n        </span>\n      )}\n      <span className={styles.name}>Boost33</span>\n    </div>\n  )\n}\n","import { useId } from 'react'\nimport styles from './Boost33Mark.module.css'\n\n/**\n * The size the mark renders at unless a caller says otherwise. 24px is the\n * Wallet's own default at both of its call sites, and it is the size\n * tests/baselines/mark-boost33.png, wordmark.png and wordmark-rail.png were\n * captured at.\n */\nconst DEFAULT_SIZE = 24\n\n/**\n * The smallest size the artwork survives, in px. Recorded, not enforced — the\n * charte's brand guide warns the monogram stops working below about 20px: the\n * bowls of the B and the hole in the o close up and the whole thing reads as a\n * dark blob. Anything smaller needs a simplified variant from the parent, not\n * this scaled down. Nothing in this package ships below it.\n *\n * This floor is the **monogram's alone**. The product marks have the opposite\n * requirement — they are drawn on a grid chosen so one path renders correctly\n * from 96px down to 20px — so do not generalise this number into a shared rule\n * when the second mark lands.\n */\nexport const BOOST33_MARK_MIN_LEGIBLE_PX = 20\n\nexport interface Boost33MarkProps {\n  /**\n   * Rendered width and height in px. Read BOOST33_MARK_MIN_LEGIBLE_PX before\n   * going small.\n   */\n  size?: number\n  /**\n   * An accessible name. Omit it — the default — and the mark is decorative:\n   * `aria-hidden`, contributing nothing to the accessibility tree. That is the\n   * right answer in the lockup, where the word \"Boost33\" sits beside it and a\n   * name here would only make a screen reader say it twice. Pass one only where\n   * the mark stands alone as the sole carrier of meaning.\n   */\n  title?: string\n  /** Escape hatch for a consumer that needs to position the mark. */\n  className?: string\n}\n\n/**\n * The Boost33 mark — the \"Bo\" squircle monogram.\n *\n * **This artwork is not ours.** The monogram and the wordmark are set by the\n * Boost33 charte graphique and a product cannot change them; the parent's brand\n * documentation lists the monogram as \"black tile, orange letterform\" under what\n * it owns. The paths below are lifted verbatim out of the official lockup at\n * `docs/brand/logo-of-noir-orange.svg` in the Wallet repo (`boostledger`), by way\n * of its `src/ui/primitives/icons.tsx` — reproduced, not redrawn. If the mark\n * ever changes, it changes in that SVG first and this is re-extracted from it.\n * Nobody here gets to nudge a curve.\n *\n * What stood in for it in this package until B33-556 was a Stage A placeholder in\n * the specimen: an orange tile with a `<text>B</text>` typed on top. The Wallet\n * carried the same mistake — tile and letterform the wrong way round — until\n * 9 Sep 2026, which is why the original fidelity baselines showed it too. It had\n * been wrong against the charte the whole time, not just against Paper.\n *\n * How it is built, since the fills are not obvious from the path list: the first\n * path is the black squircle with the B, the o and the underscore knocked out of\n * it as counter-wound subpaths, so those three show through as white. The orange\n * ring is then drawn into the o, and the last three paths fill the B's two bowls\n * and the o's centre back to black. **Order matters between the ring and the\n * centre** — swap them and the o fills solid orange. Nothing else overlaps.\n *\n * The two `fill: none` paths in the source SVG are omitted. They are export\n * artefacts that render nothing, and dropping them does not affect the winding of\n * the path above them.\n *\n * The viewBox is the monogram's own bounding box **inside the lockup**, which is\n * why it is an offset rectangle rather than starting at the origin. Do not \"tidy\"\n * it to `0 0 …` without re-deriving the paths; they carry absolute coordinates\n * and translating one without the other silently crops the mark.\n */\nexport function Boost33Mark({ size = DEFAULT_SIZE, title, className }: Boost33MarkProps) {\n  const titleId = useId()\n  const decorative = title == null\n\n  return (\n    <svg\n      className={className != null ? `${styles.mark} ${className}` : styles.mark}\n      width={size}\n      height={size}\n      viewBox=\"402.17 34.21 234.9 235\"\n      role={decorative ? undefined : 'img'}\n      aria-hidden={decorative ? 'true' : undefined}\n      aria-labelledby={decorative ? undefined : titleId}\n    >\n      {!decorative && <title id={titleId}>{title}</title>}\n      {/* Tile, with the B / o / underscore knocked out of it. */}\n      <path\n        className={styles.tile}\n        d=\"M404.19,97c3.79-36.53,38.18-62.45,74.88-62.79q40-.37,80,0c43.66.4,77.69,34.58,78,78.28q.27,38.63,0,77.27c-.35,45.47-34.21,79.19-79.71,79.45q-38.62.23-77.24,0c-43.46-.34-77.66-34.79-77.95-78.34-.09-13,0-26.07,0-39.1m42.93-56V207c23.4,0,46.31.89,69.1-.33,14.41-.77,25.11-13.75,26.36-28.3,1.37-16-6.92-26.34-20.61-33.54,1.15-2.88,2.34-5.37,3.16-8C529,118.35,517,97.73,497.72,96,480.55,94.49,463.15,95.7,445.11,95.7Zm127.65,63.44a31.89,31.89,0,1,0-31.21-32.47A31.87,31.87,0,0,0,572.76,159.14ZM597.12,183V168.11H550.05V183Z\"\n      />\n      {/* The o, and the only orange in the mark. */}\n      <path\n        className={styles.ring}\n        d=\"M572.76,159.14a31.89,31.89,0,1,1,32.47-31.31A31.62,31.62,0,0,1,572.76,159.14Zm.56-47.42a15.53,15.53,0,1,0,15.61,16A15.44,15.44,0,0,0,573.32,111.72Z\"\n      />\n      {/* The B's two bowls and the o's centre, returned to the tile's black. */}\n      <path\n        className={styles.tile}\n        d=\"M460.7,190.94V160.11c17.05,0,33.68-.53,50.25.23,8.11.37,13.22,7.7,13,15.5s-5.75,14.69-13.73,14.94C493.9,191.3,477.58,190.94,460.7,190.94Z\"\n      />\n      <path\n        className={styles.tile}\n        d=\"M460.65,142.62V112.36c12.1,0,24.4-.89,36.5.33,7.46.76,11.4,7.3,11.05,15-.37,8.1-5,14-12.95,14.64C484,143.3,472.52,142.62,460.65,142.62Z\"\n      />\n      <path\n        className={styles.tile}\n        d=\"M573.32,111.72a15.53,15.53,0,1,1,0,31.06,15.53,15.53,0,1,1,0-31.06Z\"\n      />\n    </svg>\n  )\n}\n","import { useId, type ReactNode } from 'react'\nimport styles from './ProductMark.module.css'\n\n/**\n * The size the mark renders at unless a caller says otherwise. 20px is the\n * Wallet's own default at its call sites, and the size the four\n * tests/baselines/productmark-*.png were captured at: a 20px tile in the 24px\n * gutter the specimen crop uses either side -> 68px CSS -> 136 device px at\n * deviceScaleFactor 2. Changing it moves four apps.\n *\n * There is deliberately no minimum-legible floor here, unlike Boost33Mark. That\n * floor is the monogram's alone -- the bowls of the B close up below ~20px. The\n * product marks have the opposite property: each is one path on a 40-unit grid\n * with a quarter-side corner, chosen so it renders correctly from Paper's 96px\n * down to 20px. Do not generalise Boost33Mark's floor into a shared rule.\n */\nconst DEFAULT_SIZE = 20\n\n/**\n * The four products Identity serves, as one list. Everything else keys off it:\n * ProductSlug is derived from it, and GLYPHS is typed against it so adding a\n * slug without artwork is a compile error rather than a mark that silently\n * draws nothing. These are Identity's *slugs*, not display names -- the Wallet\n * keys its own record on `'Boost Score' | ... | 'Wallet'`, which a rename\n * breaks, and that is the exact trap this ordering avoids.\n */\nexport const PRODUCT_SLUGS = ['wallet', 'score', 'voice', 'outbound'] as const\n\n/** One of Identity's four product slugs. */\nexport type ProductSlug = (typeof PRODUCT_SLUGS)[number]\n\n/**\n * The four product glyphs, lifted verbatim from `boostledger`'s\n * `src/ui/primitives/icons.tsx` (the `GLYPHS` record, as of `837d85d`) rather\n * than redrawn from any written description. Redrawing them from\n * `docs/mintlify/system/product-marks.mdx` is how PR #4 got all four wrong and\n * reintroduced the retired one-orange-element construction; if any document\n * disagrees with that file, that file wins. See B33-562.\n *\n * Each glyph is drawn on its own full 40-unit grid and inset into the middle 20\n * of the tile by the `translate(10 10) scale(0.5)` group below. The stroke\n * widths are right on that grid -- do not \"correct\" them to compensate for the\n * scale, the scale is what puts the stroke at the weight Paper draws. Every\n * element paints in `currentColor` (the tile's white glyph ink) or `none`;\n * there is no colour of any kind in here, which is what tells the four marks\n * apart by shape and never by hue.\n *\n * Typing this `Record<ProductSlug, ReactNode>` is load-bearing: a fifth slug\n * added to PRODUCT_SLUGS without a glyph here stops the build.\n */\nconst GLYPHS: Record<ProductSlug, ReactNode> = {\n  // A credit card with its magnetic stripe: an outline card (fill none, so the\n  // tile shows through) plus a filled stripe across it.\n  wallet: (\n    <>\n      <rect x=\"5\" y=\"10\" width=\"30\" height=\"20\" rx=\"4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" />\n      <rect x=\"5\" y=\"16\" width=\"30\" height=\"5\" fill=\"currentColor\" />\n    </>\n  ),\n  // A gauge with the needle swung high: an arc, the needle, and the hub it\n  // pivots on. Arc and needle stroke at width 4 with round caps.\n  score: (\n    <>\n      <path d=\"M6 26 A14 14 0 0 1 34 26\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"4\" strokeLinecap=\"round\" />\n      <line x1=\"20\" y1=\"26\" x2=\"28\" y2=\"14\" stroke=\"currentColor\" strokeWidth=\"4\" strokeLinecap=\"round\" />\n      <circle cx=\"20\" cy=\"26\" r=\"3\" fill=\"currentColor\" />\n    </>\n  ),\n  // A soundwave, tall in the middle: three pill bars, all centred on y=20.\n  voice: (\n    <>\n      <rect x=\"6\" y=\"14\" width=\"7\" height=\"12\" rx=\"3.5\" fill=\"currentColor\" />\n      <rect x=\"16.5\" y=\"4\" width=\"7\" height=\"32\" rx=\"3.5\" fill=\"currentColor\" />\n      <rect x=\"27\" y=\"14\" width=\"7\" height=\"12\" rx=\"3.5\" fill=\"currentColor\" />\n    </>\n  ),\n  // An arrow leaving through the top-right: the shaft and the elbow of its head,\n  // both stroke width 4 with round caps and joins.\n  outbound: (\n    <>\n      <line x1=\"8\" y1=\"32\" x2=\"32\" y2=\"8\" stroke=\"currentColor\" strokeWidth=\"4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      <path d=\"M16 8 H32 V24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </>\n  ),\n}\n\nfunction isProductSlug(slug: string): slug is ProductSlug {\n  return (PRODUCT_SLUGS as readonly string[]).includes(slug)\n}\n\nexport interface ProductMarkProps {\n  /**\n   * Identity's product slug. An unknown one -- a product the served registry\n   * carries but this package has no artwork for yet -- draws the bare tile\n   * rather than throwing (ADR-0003's safe degrade), so the registry can run\n   * ahead of a mark release.\n   */\n  slug: string\n  /** Rendered width and height in px. Defaults to 20, the Wallet's own default. */\n  size?: number\n  /**\n   * Dims the tile for a product the account is not entitled to -- the switcher's\n   * unowned rows need it. It swaps the **ground only**, to --color-neutral-300;\n   * the glyph stays white. Fading the glyph too would cost the shape the one\n   * thing telling the four marks apart, and it is a prop rather than a wrapper\n   * `opacity-40 grayscale` filter because that lands on a mid-grey visibly\n   * darker than the grey Paper draws.\n   */\n  muted?: boolean\n  /**\n   * An accessible name. Omit it -- the default -- and the mark is decorative:\n   * `aria-hidden`, contributing nothing to the accessibility tree. That is the\n   * right answer in the switcher, where the product's name sits beside it and a\n   * name here would only make a screen reader say it twice. Pass one only where\n   * the mark stands alone as the sole carrier of meaning.\n   */\n  title?: string\n  /** Escape hatch for a consumer that needs to position the mark. */\n  className?: string\n}\n\n/**\n * The tile-and-glyph mark for one Boost33 product -- a rounded --color-neutral-950\n * square with the product's glyph in --color-primary-foreground. The four marks\n * share one palette and are told apart by shape alone; there is zero brand\n * orange in any of them.\n */\nexport function ProductMark({ slug, size = DEFAULT_SIZE, muted, title, className }: ProductMarkProps) {\n  const titleId = useId()\n  const decorative = title == null\n  const glyph = isProductSlug(slug) ? GLYPHS[slug] : null\n\n  return (\n    <svg\n      className={className != null ? `${styles.mark} ${className}` : styles.mark}\n      width={size}\n      height={size}\n      viewBox=\"0 0 40 40\"\n      role={decorative ? undefined : 'img'}\n      aria-hidden={decorative ? 'true' : undefined}\n      aria-labelledby={decorative ? undefined : titleId}\n    >\n      {!decorative && <title id={titleId}>{title}</title>}\n      {/* The tile. Fill set inline, next to the muted decision that chooses it;\n          the corner radius comes from the class (see ProductMark.module.css). */}\n      <rect\n        className={styles.ground}\n        width=\"40\"\n        height=\"40\"\n        style={{ fill: muted ? 'var(--color-neutral-300)' : 'var(--color-neutral-950)' }}\n      />\n      {glyph && (\n        <g\n          transform=\"translate(10 10) scale(0.5)\"\n          style={{ color: 'var(--color-primary-foreground)' }}\n        >\n          {glyph}\n        </g>\n      )}\n    </svg>\n  )\n}\n","import type { ReactNode } from 'react'\nimport styles from './NavItem.module.css'\n\nexport interface NavItemProps {\n  /** The nav label. Truncates with an ellipsis rather than wrapping. */\n  children: ReactNode\n  /**\n   * The leading icon. Decorative -- the label carries the name, so pass an\n   * `aria-hidden` glyph. On the rail it is the only thing that shows, the\n   * label having collapsed to the accessibility tree.\n   */\n  icon?: ReactNode\n  /** Marks this row as the current page. Sets `aria-current=\"page\"`. */\n  active?: boolean\n  /** Sidebar-on-the-rail state. Hides the label and trailing slot visually; the label stays in the accessibility tree. */\n  collapsed?: boolean\n  /** Trailing slot content. Omit to leave the slot empty -- it still reserves its width so counts line up across rows. */\n  count?: number\n  /** Renders `count` in the primary color instead of muted. */\n  countUrgent?: boolean\n  href?: string\n  onClick?: () => void\n}\n\nexport function NavItem({ children, icon, active = false, collapsed = false, count, countUrgent = false, href, onClick }: NavItemProps) {\n  const dataProps = {\n    'data-active': active ? ('true' as const) : undefined,\n    'data-collapsed': collapsed ? ('true' as const) : undefined,\n    'aria-current': active ? ('page' as const) : undefined,\n  }\n\n  const content = (\n    <>\n      {icon != null && (\n        <span className={styles.icon} aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      <span className={styles.label}>{children}</span>\n      <span className={styles.trailingSlot}>\n        {count != null && <span className={countUrgent ? styles.countUrgent : styles.count}>{count}</span>}\n      </span>\n    </>\n  )\n\n  if (href) {\n    return (\n      <a className={styles.row} href={href} onClick={onClick} {...dataProps}>\n        {content}\n      </a>\n    )\n  }\n\n  return (\n    <button type=\"button\" className={styles.row} onClick={onClick} {...dataProps}>\n      {content}\n    </button>\n  )\n}\n","// The two numbers the chip says out loud. Kept separate from the component so\n// the rounding and the separator -- the parts that carry meaning rather than\n// look -- are unit-tested without a render.\n\n/** The full balance, thousands grouped: 4600 -> \"4,600\". */\nexport function formatTokens(value: number): string {\n  return value.toLocaleString('en-US')\n}\n\n/**\n * The rail's short form: one decimal thousand, always. At 56px there is no\n * room for four digits and a separator, and \"4.6k\" still answers \"am I fine?\".\n */\nexport function abbreviateThousands(value: number): string {\n  return `${(value / 1000).toFixed(1)}k`\n}\n","// Small monochrome glyphs the chip draws in `currentColor` -- no fill token, so\n// the surrounding text colour carries them and the no-hardcoded-hex guard stays\n// satisfied. Decorative: the balance text is what carries meaning, so both are\n// aria-hidden.\n\n/** The card mark shown on the rail, where there is no room for the word \"Wallet\". */\nexport function WalletMark({ className }: { className?: string }) {\n  return (\n    <svg className={className} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n      <rect x=\"3\" y=\"6\" width=\"18\" height=\"12\" rx=\"2\" />\n      <path d=\"M3 10h18\" />\n    </svg>\n  )\n}\n\n/** The retry affordance shown when the balance could not be confirmed. */\nexport function RetryMark({ className }: { className?: string }) {\n  return (\n    <svg className={className} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n      <path d=\"M21 12a9 9 0 1 1-2.64-6.36\" />\n      <path d=\"M21 3v4h-4\" />\n    </svg>\n  )\n}\n","import styles from './WalletChip.module.css'\nimport { abbreviateThousands, formatTokens } from './format'\nimport { RetryMark, WalletMark } from './icons'\n\n// Past this fraction of the cycle's grant burned, the chip stops resting. The\n// spec's threshold, in one place so the derivation and the styling agree.\nconst THRESHOLD_BURN = 0.8\n\nexport interface WalletChipProps {\n  /** Remaining granted tokens. Granted burns first and expires. */\n  granted: number\n  /** Remaining purchased tokens. Purchased never expires. */\n  purchased: number\n  /**\n   * The grant issued for this cycle. The denominator for \"how much has burned\",\n   * and so for the threshold; drawn as the bar's full width alongside purchased\n   * so the filled portion shortens as the month runs.\n   */\n  grantCycle: number\n  /** When the current grant expires, preformatted for display, e.g. \"30 Sep\". */\n  grantExpires?: string\n  /**\n   * The threshold state's runway line, preformatted, e.g. \"About four days left\n   * at your current burn.\" Passed in rather than derived: the burn estimate is\n   * the product's to make, not the chip's -- the chip renders what it is given.\n   */\n  burnNote?: string\n  /** The balance could not be confirmed. Renders as unknown, never as zero. */\n  unknown?: boolean\n  /** The 56px rail. Abbreviates the balance and turns the split on its side. */\n  collapsed?: boolean\n  /** Top up. Wiring for the one button the sidebar is allowed to have. */\n  onTopUp?: () => void\n}\n\n/** The granted/purchased bar. Granted is drawn first, because granted burns first. */\nfunction Bar({ granted, purchased, cycleTotal, tone }: { granted: number; purchased: number; cycleTotal: number; tone: 'rest' | 'threshold' }) {\n  const width = (n: number) => `${(n / cycleTotal) * 100}%`\n  const remaining = granted + purchased\n  const label = `${formatTokens(granted)} granted and ${formatTokens(purchased)} purchased of ${formatTokens(remaining)} remaining`\n  return (\n    <div className={styles.bar} data-tone={tone} role=\"img\" aria-label={label}>\n      <span className={styles.segmentGranted} data-testid=\"segment-granted\" style={{ width: width(granted) }} />\n      <span className={styles.segmentPurchased} data-testid=\"segment-purchased\" style={{ width: width(purchased) }} />\n    </div>\n  )\n}\n\nexport function WalletChip({ granted, purchased, grantCycle, grantExpires, burnNote, unknown = false, collapsed = false, onTopUp }: WalletChipProps) {\n  const balance = granted + purchased\n  // Everything the cycle started with: the grant plus the purchased balance\n  // sitting alongside it. Measuring against this is what makes the bar shorten\n  // as tokens burn instead of only re-proportioning to a full width.\n  const cycleTotal = grantCycle + purchased\n  const burned = grantCycle > 0 ? (grantCycle - granted) / grantCycle : 0\n  const isThreshold = !unknown && burned >= THRESHOLD_BURN\n\n  if (collapsed) {\n    return (\n      <div className={styles.rail} role=\"group\" aria-label={unknown ? 'Wallet balance unknown' : `Wallet balance ${abbreviateThousands(balance)}`} tabIndex={0}>\n        <WalletMark className={styles.railIcon} />\n        <span className={styles.railFigure}>{unknown ? '—' : abbreviateThousands(balance)}</span>\n        {unknown ? <span className={styles.srOnly}>unknown</span> : <Bar granted={granted} purchased={purchased} cycleTotal={cycleTotal} tone={isThreshold ? 'threshold' : 'rest'} />}\n      </div>\n    )\n  }\n\n  return (\n    <div className={styles.chip} role=\"group\" aria-label=\"Wallet balance\" tabIndex={0} data-threshold={isThreshold ? 'true' : undefined} data-unknown={unknown ? 'true' : undefined}>\n      <div className={styles.header}>\n        <span className={styles.name}>Wallet</span>\n        {isThreshold && <span className={styles.pill}>{Math.round(burned * 100)}%</span>}\n      </div>\n\n      {unknown ? (\n        <div className={styles.figure}>\n          <span className={styles.amount} aria-hidden=\"true\">\n            {'—'}\n          </span>\n          <RetryMark className={styles.retry} />\n          <span className={styles.srOnly}>Balance unknown</span>\n        </div>\n      ) : (\n        <div className={styles.figure}>\n          <span className={styles.amount}>{formatTokens(balance)}</span>\n          <span className={styles.unit}>tokens</span>\n        </div>\n      )}\n\n      {unknown ? (\n        <div className={styles.bar} data-tone=\"unknown\" aria-hidden=\"true\" />\n      ) : (\n        <Bar granted={granted} purchased={purchased} cycleTotal={cycleTotal} tone={isThreshold ? 'threshold' : 'rest'} />\n      )}\n\n      {!unknown && !isThreshold && (\n        <div className={styles.details}>\n          <dl className={styles.split}>\n            <div className={styles.splitRow}>\n              <dt className={styles.splitLabel}>\n                <span className={styles.dotGranted} aria-hidden=\"true\" />\n                Granted\n              </dt>\n              <dd className={styles.splitAmount}>{formatTokens(granted)}</dd>\n            </div>\n            <div className={styles.splitRow}>\n              <dt className={styles.splitLabel}>\n                <span className={styles.dotPurchased} aria-hidden=\"true\" />\n                Purchased\n              </dt>\n              <dd className={styles.splitAmount}>{formatTokens(purchased)}</dd>\n            </div>\n          </dl>\n          {grantExpires && <p className={styles.footer}>Granted expires {grantExpires} &middot; burns first</p>}\n        </div>\n      )}\n\n      {isThreshold && burnNote && <p className={styles.burnNote}>{burnNote}</p>}\n\n      {!unknown && (\n        <button type=\"button\" className={styles.topUp} data-grown={isThreshold ? 'true' : undefined} onClick={onTopUp}>\n          Top up\n        </button>\n      )}\n    </div>\n  )\n}\n","import type { ReactNode } from 'react'\nimport styles from './TopBar.module.css'\n\nexport interface TopBarProps {\n  /** The breadcrumb naming the current location, on the left of the bar. */\n  breadcrumb: ReactNode\n  /** Shell actions on the right -- search, notifications, the account. Omit to leave the right empty. */\n  actions?: ReactNode\n}\n\nexport function TopBar({ breadcrumb, actions }: TopBarProps) {\n  return (\n    <div className={styles.bar}>\n      <div className={styles.breadcrumb}>{breadcrumb}</div>\n      {actions != null && <div className={styles.actions}>{actions}</div>}\n    </div>\n  )\n}\n","import type { ReactNode } from 'react'\nimport styles from './PageHeader.module.css'\n\nexport interface PageHeaderProps {\n  /** The page's name. Renders as the page heading. */\n  title: ReactNode\n  /** A line under the title. Omit for a title-only header. */\n  subtitle?: ReactNode\n  /** Trailing controls, aligned to the right edge. Omit to leave the row empty. */\n  actions?: ReactNode\n}\n\nexport function PageHeader({ title, subtitle, actions }: PageHeaderProps) {\n  return (\n    <header className={styles.header}>\n      <div className={styles.headings}>\n        <h1 className={styles.title}>{title}</h1>\n        {subtitle != null && <p className={styles.subtitle}>{subtitle}</p>}\n      </div>\n      {actions != null && <div className={styles.actions}>{actions}</div>}\n    </header>\n  )\n}\n","import type { ReactNode } from 'react'\nimport { Sidebar } from '../Sidebar/Sidebar'\nimport { NavSection } from '../NavSection/NavSection'\nimport { NavItem } from '../NavItem/NavItem'\nimport { TopBar, type TopBarProps } from '../TopBar/TopBar'\nimport { PageHeader, type PageHeaderProps } from '../PageHeader/PageHeader'\nimport { Wordmark } from '../Wordmark/Wordmark'\nimport styles from './AppShell.module.css'\n\n/** One nav row, described as data. The consumer never hands the shell markup. */\nexport interface AppShellNavItem {\n  /** The row's name. Truncates rather than wrapping; on the rail it collapses to the accessibility tree. */\n  label: string\n  /** The leading icon. Decorative -- the label carries the name. On the rail it is all that shows. */\n  icon?: ReactNode\n  /** Marks this row as the current page. Sets `aria-current=\"page\"`. */\n  active?: boolean\n  /** Trailing-slot count. Omit to leave the slot empty; it still reserves its width so counts line up. */\n  count?: number\n  /** Renders `count` in the primary color instead of muted. */\n  countUrgent?: boolean\n  /** Where the row goes. A nav row's destination is data; the shell renders it as a link. */\n  href?: string\n}\n\n/** One nav section: an optional header over a run of rows. */\nexport interface AppShellNavSection {\n  /** The section header. Omit for a headerless section (the nav's first section has none). On the rail every header drops. */\n  label?: string\n  /** The section's rows, as data. */\n  items: AppShellNavItem[]\n}\n\nexport interface AppShellProps {\n  /**\n   * The product this shell renders for. The consumer names it once, here, and\n   * the shell carries it down -- it labels the sidebar and its navigation, and\n   * nothing above the nav (the Boost33 wordmark and brand) changes between\n   * products. This one prop is the whole of the shell's product-awareness.\n   */\n  product: string\n  /** The navigation, as data. No product hardcodes rows; the shell composes them. */\n  nav: AppShellNavSection[]\n  /** The top bar's content -- the breadcrumb and the shell actions on its right. */\n  topBar: TopBarProps\n  /** The page header's content -- the page title, its optional subtitle and trailing controls. */\n  pageHeader: PageHeaderProps\n  /** The Boost33 mark for the wordmark lockup. Passed in, the way Wordmark takes it; on the rail it is all that shows. */\n  mark?: ReactNode\n  /**\n   * The product switcher, sitting under the wordmark. A slot: the registry it\n   * draws is served by Identity (ADR-0003), not owned here. Render its own\n   * collapsed form for the rail.\n   */\n  switcher?: ReactNode\n  /**\n   * The wallet chip, pinned above the footer. A slot: the balance comes from\n   * `@boost33/ledger-client`, never read here. Render its own collapsed form\n   * for the rail.\n   */\n  wallet?: ReactNode\n  /** The sidebar footer, below the wallet chip. A slot -- the product's own. */\n  footer?: ReactNode\n  /**\n   * The sidebar collapsed to the 56px rail. A state of the shell: the sidebar\n   * narrows and every piece it owns collapses off this one flag. The slots\n   * (switcher, wallet, footer) render their own collapsed form.\n   */\n  collapsed?: boolean\n  /** The page body. Sits on white, below the header. */\n  children: ReactNode\n}\n\n// The shell every authenticated Boost33 screen renders inside. It composes the\n// pieces built in the earlier tickets -- sidebar, wordmark, switcher, nav,\n// wallet chip, top bar, page header -- into one thing a product imports instead\n// of building a sidebar. Product-aware only through `product`; everything below\n// that is the product's own data, and nothing above it changes.\nexport function AppShell({\n  product,\n  nav,\n  topBar,\n  pageHeader,\n  mark,\n  switcher,\n  wallet,\n  footer,\n  collapsed = false,\n  children,\n}: AppShellProps) {\n  return (\n    <div className={styles.shell}>\n      <Sidebar label={product} collapsed={collapsed}>\n        <div className={styles.wordmark}>\n          <Wordmark mark={mark} collapsed={collapsed} />\n        </div>\n        {switcher != null && <div className={styles.switcher}>{switcher}</div>}\n        <nav aria-label={product} className={styles.nav}>\n          {nav.map((section, sectionIndex) => (\n            // No room for a header at 56px, so on the rail every section renders\n            // headerless -- its rows collapse to their icons and line up.\n            <NavSection key={sectionIndex} label={collapsed ? undefined : section.label}>\n              {section.items.map((item, itemIndex) => (\n                <NavItem\n                  key={itemIndex}\n                  icon={item.icon}\n                  active={item.active}\n                  collapsed={collapsed}\n                  count={item.count}\n                  countUrgent={item.countUrgent}\n                  href={item.href}\n                >\n                  {item.label}\n                </NavItem>\n              ))}\n            </NavSection>\n          ))}\n        </nav>\n        {(wallet != null || footer != null) && (\n          <div className={styles.foot}>\n            {wallet}\n            {footer}\n          </div>\n        )}\n      </Sidebar>\n      <div className={styles.main}>\n        <TopBar {...topBar} />\n        <PageHeader {...pageHeader} />\n        <div className={styles.content}>{children}</div>\n      </div>\n    </div>\n  )\n}\n"],"names":["NAV_HEIGHT_BUDGET_PX","NAV_SECTION_HEADER_PX","NAV_ITEM_PX","NAV_SHELL_FIXED_PX","navContentHeight","sections","used","section","navBudgetForViewport","viewportPx","checkNavHeightBudget","usedPx","budgetPx","measureNavHeight","nav","Sidebar","label","collapsed","children","column","useRef","useNavHeightBudgetWarning","jsx","styles","useEffect","element","budget","NavSection","headerId","useId","jsxs","Wordmark","mark","DEFAULT_SIZE","BOOST33_MARK_MIN_LEGIBLE_PX","Boost33Mark","size","title","className","titleId","decorative","PRODUCT_SLUGS","GLYPHS","Fragment","isProductSlug","slug","ProductMark","muted","glyph","NavItem","icon","active","count","countUrgent","href","onClick","dataProps","content","formatTokens","value","abbreviateThousands","WalletMark","RetryMark","THRESHOLD_BURN","Bar","granted","purchased","cycleTotal","tone","width","n","remaining","WalletChip","grantCycle","grantExpires","burnNote","unknown","onTopUp","balance","burned","isThreshold","TopBar","breadcrumb","actions","PageHeader","subtitle","AppShell","product","topBar","pageHeader","switcher","wallet","footer","sectionIndex","item","itemIndex"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/nav-height-budget.d.ts

@@ -1,23 +1,61 @@
-export declare const NAV_HEIGHT_BUDGET_PX = 700;
-export declare const NAV_SECTION_HEADER_PX = 40;
-export declare const NAV_ITEM_PX = 32;
-export declare const NAV_SHELL_FIXED_PX = 198;
+export declare const NAV_SHELL_PACKAGE_FIXED_PX = 185;
+export declare const NAV_SHELL_CONSUMER_SLOTS_PX = 86;
+export declare const NAV_SHELL_FIXED_PX: number;
+export declare const NAV_ITEM_PX = 33;
+export declare const NAV_SECTION_HEADER_PX = 30;
+export declare const NAV_SECTION_GAP_PX = 16;
+export declare const NAV_FOCUS_GUTTER_PX = 8;
+export declare const NAV_HEIGHT_BUDGET_PX: number;
 /** One section of a nav, described by its shape rather than its rendered rows. */
 export interface NavSectionShape {
-    /** Whether the section carries a header label (its 40px cost). */
+    /** Whether the section carries a header label (its NAV_SECTION_HEADER_PX cost). */
     hasHeader: boolean;
-    /** How many nav items the section holds (32px each). */
+    /** How many nav items the section holds (NAV_ITEM_PX each). */
     itemCount: number;
 }
 /**
- * The vertical space a nav takes, summed from its sections' shapes. Lets the
- * budget be checked from the nav's data alone, before it is rendered into a
- * sidebar that might not fit it -- Boost Outbound's admin role has overflowed
- * this once already.
+ * The per-row costs to charge, for a consumer who has measured their own.
+ *
+ * The defaults are Inter's, and are right for every face this package could
+ * measure. A consumer rendering in a font whose `normal` line box at 14px is
+ * taller than 17px -- `Segoe UI` is the known candidate, unmeasured -- gets a
+ * model that under-counts, and can correct it here rather than forking the
+ * check. Measure a rendered row's `offsetHeight`, do not estimate it.
  */
-export declare function navContentHeight(sections: NavSectionShape[]): number;
-/** The nav's budget at a given viewport: what is left once the fixed shell parts are taken. */
-export declare function navBudgetForViewport(viewportPx: number): number;
+export interface NavRowCosts {
+    /** What one nav row costs. Defaults to NAV_ITEM_PX, the expanded row in Inter. */
+    itemPx?: number;
+    /** What one section header costs. Defaults to NAV_SECTION_HEADER_PX. */
+    sectionHeaderPx?: number;
+}
+/**
+ * The vertical space an EXPANDED nav takes, summed from its sections' shapes --
+ * the rows and headers, the gaps the nav sets between sections, and the nav's
+ * own scroll gutter. This is the whole box the nav occupies (its rendered
+ * scrollHeight), so the budget can be checked from the nav's data alone, before
+ * it is rendered into a sidebar that might not fit it -- Boost Outbound's admin
+ * role has overflowed this once already.
+ *
+ * The rail is out of scope and needs no separate model: a collapsed nav is
+ * shorter than the same nav expanded, in a column that is taller, so this is a
+ * conservative bound on it (B33-762, and the check that pins it).
+ *
+ * Pass `costs` only if you have measured a rendered row in your own font; the
+ * defaults are the package's, measured in Inter.
+ */
+export declare function navContentHeight(sections: NavSectionShape[], costs?: NavRowCosts): number;
+/**
+ * The nav's budget at a given viewport: what is left once the fixed shell parts
+ * are taken.
+ *
+ * `consumerSlotsPx` is the total height of the three slots this package does
+ * not own -- the switcher, the wallet chip's neighbours and the sidebar footer
+ * as the consumer renders them. It defaults to the stress specimen's 86px
+ * allowance, which is what NAV_SHELL_FIXED_PX assumes. A consumer whose footer
+ * or switcher is taller than that MUST pass their own measured total, or this
+ * will over-count their column and can report a fit that scrolls.
+ */
+export declare function navBudgetForViewport(viewportPx: number, consumerSlotsPx?: number): number;
 export interface NavHeightBudget {
     usedPx: number;
     budgetPx: number;

package/dist/nav-height-budget.js

@@ -0,0 +1,38 @@
+const P = 185, X = 86, c = 271, H = 33, L = 30, V = 16, T = 8, S = r(900);
+function C(_, t = {}) {
+  if (_.length === 0) return 0;
+  const E = t.itemPx ?? 33, e = t.sectionHeaderPx ?? 30, A = _.reduce(
+    (o, n) => o + (n.hasHeader ? e : 0) + n.itemCount * E,
+    0
+  ), N = 16 * (_.length - 1);
+  return A + N + 8;
+}
+function r(_, t = 86) {
+  return _ - 185 - t;
+}
+function i(_, t = S) {
+  return {
+    usedPx: _,
+    budgetPx: t,
+    fits: _ <= t,
+    overBy: Math.max(0, _ - t)
+  };
+}
+function a(_) {
+  return _.scrollHeight;
+}
+export {
+  T as NAV_FOCUS_GUTTER_PX,
+  S as NAV_HEIGHT_BUDGET_PX,
+  H as NAV_ITEM_PX,
+  V as NAV_SECTION_GAP_PX,
+  L as NAV_SECTION_HEADER_PX,
+  X as NAV_SHELL_CONSUMER_SLOTS_PX,
+  c as NAV_SHELL_FIXED_PX,
+  P as NAV_SHELL_PACKAGE_FIXED_PX,
+  i as checkNavHeightBudget,
+  a as measureNavHeight,
+  r as navBudgetForViewport,
+  C as navContentHeight
+};
+//# sourceMappingURL=nav-height-budget.js.map

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 @@
-._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}}:root{--duration-fast: .12s;--easing-standard: cubic-bezier(.2, 0, 0, 1)}:root{--shadow-overlay: 0px 16px 40px -10px var(--shadow-overlay-color)}._chip_676ll_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_676ll_37:not([data-unknown]):hover,._chip_676ll_37:not([data-unknown]):focus-within,._chip_676ll_37[data-threshold]{--chip-lift: var(--spacing-0_5);box-shadow:var(--shadow-overlay)}._chip_676ll_37:not([data-threshold]):not([data-unknown]):hover,._chip_676ll_37:not([data-threshold]):not([data-unknown]):focus-within{background:var(--color-surface)}._chip_676ll_37:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}._header_676ll_74{display:flex;align-items:center;gap:var(--spacing-2)}._name_676ll_83{color:var(--color-foreground-muted);font-size:var(--text-xs);font-weight:var(--font-weight-medium);line-height:var(--leading-tight)}._pill_676ll_94{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_676ll_103{display:flex;align-items:baseline;gap:var(--spacing-1_5);margin-top:calc(var(--spacing-2_5) + var(--chip-lift))}._amount_676ll_118{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_676ll_127{color:var(--color-foreground-muted);font-size:var(--text-xs)}._retry_676ll_132{width:var(--spacing-3);height:var(--spacing-3);color:var(--color-foreground-muted)}._bar_676ll_141{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_676ll_141[data-tone=rest]{background:var(--color-surface-muted)}._bar_676ll_141[data-tone=threshold]{background:var(--color-warning-subtle)}._bar_676ll_141[data-tone=unknown]{background:var(--color-surface-muted)}._segmentGranted_676ll_162,._segmentPurchased_676ll_163{height:100%;transition:width var(--duration-fast) var(--easing-standard)}._segmentGranted_676ll_162{background:var(--color-grant)}._segmentPurchased_676ll_163{background:var(--color-purchased)}._details_676ll_183{display:none}._chip_676ll_37:hover ._details_676ll_183,._chip_676ll_37:focus-within ._details_676ll_183{display:block}._split_676ll_192{display:flex;flex-direction:column;gap:var(--spacing-1);margin:var(--spacing-2_5) 0 0}._splitRow_676ll_199{display:flex;align-items:center;justify-content:space-between}._splitLabel_676ll_205{display:flex;align-items:center;gap:var(--spacing-1_5);color:var(--color-foreground);font-size:var(--text-xs)}._splitAmount_676ll_213{margin:0;color:var(--color-foreground);font-family:var(--font-mono);font-size:var(--text-xs);font-variant-numeric:tabular-nums}._dotGranted_676ll_221,._dotPurchased_676ll_222{width:var(--spacing-1_5);height:var(--spacing-1_5);border-radius:var(--radius-full)}._dotGranted_676ll_221{background:var(--color-grant)}._dotPurchased_676ll_222{background:var(--color-purchased)}._footer_676ll_236{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_676ll_244{margin:var(--spacing-2_5) 0 0;color:var(--color-foreground-secondary);font-size:var(--text-2xs);line-height:var(--leading-snug)}._topUp_676ll_256{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_676ll_37:hover ._topUp_676ll_256,._chip_676ll_37:focus-within ._topUp_676ll_256,._topUp_676ll_256:focus-visible{opacity:1}._topUp_676ll_256:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}._topUp_676ll_256[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_676ll_256[data-grown=true]:hover{background:var(--color-primary-hover)}._rail_676ll_310{--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_676ll_324{width:var(--spacing-6);height:var(--spacing-6);color:var(--color-foreground-secondary)}._railFigure_676ll_330{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_676ll_310 ._bar_676ll_141{height:var(--spacing-0_5);margin-top:0}._srOnly_676ll_343{position:absolute;overflow:hidden;clip-path:inset(50%);width:1px;height:1px;white-space:nowrap}@media(prefers-reduced-motion:reduce){._segmentGranted_676ll_162,._segmentPurchased_676ll_163,._topUp_676ll_256{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_18p6i_13{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-8);padding:var(--spacing-7) var(--spacing-8) var(--spacing-6);background:var(--color-surface);font-family:var(--font-sans)}._headings_18p6i_23{display:flex;min-width:0;flex-direction:column;gap:var(--spacing-1)}._title_18p6i_30{margin:0;color:var(--color-foreground);font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--font-weight-bold);line-height:var(--leading-tight)}._subtitle_18p6i_39{margin:0;color:var(--color-foreground-secondary);font-size:var(--text-base);font-weight:var(--font-weight-regular);line-height:var(--leading-snug)}._actions_18p6i_47{display:flex;flex:0 0 auto;align-items:center;gap:var(--spacing-2)}: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: Outfit, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--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-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;--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%}._shell_1xurb_10{display:flex;height:100%;background:var(--color-surface);font-family:var(--font-sans)}._wordmark_1xurb_20{padding:var(--spacing-3) var(--spacing-2_5) var(--spacing-5)}._switcher_1xurb_26{padding-bottom:var(--spacing-4)}._foot_1xurb_33{display:flex;flex-direction:column;gap:var(--spacing-4);margin-block-start:auto;padding-block-start:var(--spacing-4)}._nav_1xurb_45{display:flex;flex-direction:column;gap:var(--spacing-4)}._main_1xurb_54{display:flex;min-width:0;flex:1;flex-direction:column}._content_1xurb_64{flex:1;min-height:0;overflow-y:auto;background:var(--color-surface)}
+._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-3xs: 9px;--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_chh8a_8{position:relative;font-family:var(--font-sans)}._trigger_chh8a_17{display:flex;box-sizing:border-box;width:100%;align-items:center;gap:var(--spacing-2);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_chh8a_17[aria-expanded=true]{background:var(--color-surface-muted)}._trigger_chh8a_17:focus-visible,._railTrigger_chh8a_46:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}._triggerName_chh8a_56{overflow:hidden;flex:1;color:var(--color-foreground);font-size:var(--text-nav-label);font-weight:var(--font-weight-semibold);text-align:left;text-overflow:ellipsis;white-space:nowrap}._chevron_chh8a_67{width:var(--spacing-3);height:var(--spacing-3);flex-shrink:0;color:var(--color-foreground-muted);transition:transform var(--duration-fast) var(--easing-standard)}._trigger_chh8a_17[aria-expanded=true] ._chevron_chh8a_67{transform:rotate(180deg)}._railTrigger_chh8a_46{display:flex;box-sizing:border-box;width:100%;min-height:var(--spacing-6);align-items:flex-start;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer}._panel_chh8a_109{position:absolute;z-index:1;top:100%;left:0;width:var(--container-sidebar);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_chh8a_135,._productRow_chh8a_136,._accountRow_chh8a_137{display:flex;box-sizing:border-box;width:100%;align-items:center;gap:var(--spacing-2_5);padding:var(--spacing-2);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_chh8a_135:hover,._productRow_chh8a_136:hover,._accountRow_chh8a_137:hover{background:var(--color-surface-muted)}._hubRow_chh8a_135:focus-visible,._productRow_chh8a_136:focus-visible,._accountRow_chh8a_137:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}._products_chh8a_144{display:flex;flex-direction:column;gap:var(--spacing-0_5);margin:0;padding:0;list-style:none}._productRow_chh8a_136[data-current=true]{background:var(--color-surface-muted)}._productRow_chh8a_136[data-entitled=false] ._rowName_chh8a_193{color:var(--color-foreground-muted)}._accountRow_chh8a_137{padding-inline:var(--spacing-3)}._accountRow_chh8a_137 ._rowName_chh8a_193{font-size:var(--text-sm)}._accountRow_chh8a_137 ._rowSub_chh8a_213{font-size:var(--text-2xs)}._rowText_chh8a_217{display:flex;min-width:0;flex-direction:column}._hubRow_chh8a_135 ._rowText_chh8a_217{gap:var(--spacing-0_5)}._rowName_chh8a_193{overflow:hidden;color:var(--color-foreground);font-size:var(--text-nav-label);font-weight:var(--font-weight-regular);text-overflow:ellipsis;white-space:nowrap}._productRow_chh8a_136 ._rowName_chh8a_193{flex:1}._rowSub_chh8a_213{overflow:hidden;color:var(--color-foreground-muted);font-size:var(--text-xs);text-overflow:ellipsis;white-space:nowrap}._hubMark_chh8a_260{width:var(--spacing-5);height:var(--spacing-5);flex-shrink:0;color:var(--color-foreground)}._tag_chh8a_269{flex-shrink:0;margin-left:auto;padding:var(--spacing-0_5) var(--spacing-1_5);border-radius:var(--radius-full);background:var(--color-surface-muted);color:var(--color-foreground-muted);font-size:var(--text-2xs);font-weight:var(--font-weight-medium)}._check_chh8a_280{width:var(--spacing-4);height:var(--spacing-4);flex-shrink:0;margin-left:auto;color:var(--color-foreground)}._avatar_chh8a_293{display:grid;width:var(--spacing-6);height:var(--spacing-6);flex-shrink:0;border-radius:var(--radius-lg);background:var(--color-surface-muted);color:var(--color-foreground-secondary);font-size:var(--text-3xs);font-weight:var(--font-weight-semibold);place-items:center}._chevronRight_chh8a_306{width:var(--spacing-4);height:var(--spacing-4);flex-shrink:0;margin-left:auto;color:var(--color-foreground-muted)}._divider_chh8a_327{margin:var(--spacing-2_25) 0 var(--spacing-2);border:none;border-top:1px solid var(--color-border)}._products_chh8a_144+._divider_chh8a_327{margin:var(--spacing-1_5) 0 var(--spacing-1)}@media(prefers-reduced-motion:reduce){._chevron_chh8a_67{transition:none}}

package/dist/theme.css

@@ -0,0 +1,190 @@
+/*
+ * 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-3xs: 9px; /* The AppSwitcher account avatar's initials, and nothing else today. Not a Paper token: added by hand the way --text-nav-label was, from the approved appswitcher-open baseline, where "AC" inks 12.5px in the 24px avatar tile -- Inter's advance for that pair is 12.2px at 9px/600 and 16.3px at 12px/600, which is what this package drew before B33-910. A step below --text-2xs and below anything a person is asked to read: the initials are aria-hidden decoration on a row whose name is beside them, so the contrast and size floors that govern body copy do not apply. Do not reach for it for text. */
+  --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. */
+
+}