@boost33/ui 0.5.1 → 0.7.0

package/dist/components/ProductMark/ProductMark.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductMark.js","sources":["../../../src/components/ProductMark/ProductMark.tsx"],"sourcesContent":["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 slugs this package draws a product mark for, as one list. Everything else\n * keys off it: ProductSlug is derived from it, and GLYPHS is typed against it so\n * adding a slug without artwork is a compile error rather than a mark that\n * silently draws nothing.\n *\n * **Module-internal since B33-1269, and it has to stay that way.** `src/index.ts`\n * publishes `hasProductMark` below and neither this list nor `ProductSlug`. A\n * `const` assertion over four strings made an artwork inventory part of the\n * published type contract: a consumer could write `Record<ProductSlug, ...>` or\n * switch exhaustively over it, and then artwork landing for a fifth product --\n * the thing this package exists to ship -- would be a breaking change for them.\n * Nothing published is typed `ProductSlug` anyway; every slug prop is `string` on\n * purpose, so Identity's registry may run ahead of a mark release (ADR-0003, and\n * `slug` below). So the union's only real job was answering \"which slugs have\n * artwork\", and `hasProductMark` answers that without freezing the list.\n *\n * The tests and the specimen read both names by deep import, which is how\n * everything in this repo reaches into `src/`. A consumer cannot: `package.json`\n * exports `.`, `./style.css` and `./theme.css`, and nothing else.\n *\n * **It is no longer the whole of Identity's registry, and the difference is\n * deliberate.** Identity serves five slugs: these four plus `brokers` (B33-1158,\n * \"Boost Brokers\"). This package has no `brokers` glyph, so that row draws the\n * bare tile through the safe degrade below -- see \"The fifth slug\" underneath.\n *\n * **Transcribed from `boost33-identity/src/lib/productRegistry.ts`** -- its\n * `REGISTRY_SLUGS`, which is `PRODUCTS` from `src/config/products.ts` plus\n * `WALLET_SLUG`. That file is the source of truth and this is a copy of it in\n * another repository, which is a thing that drifts. It already did: until\n * B33-1043 this list read `wallet | score | voice | outbound` while this comment\n * asserted it was Identity's, so three of the four rows of a switcher fed\n * straight from `GET /api/v1/products` drew the bare tile (see `slug` below) and\n * nothing anywhere failed.\n *\n * Identity is not the side that renames. ADR-0003 records the shorter slugs as\n * considered and rejected: these match the `?app=` keys live campaign URLs\n * already carry, so renaming them means those links grant nothing on sign-up.\n *\n * `tests/product-mark.test.tsx` pins this list against a second transcription of\n * the same source, so the two repositories cannot part company in silence again.\n * That pin is what the old comment's assertion was standing in for, and it now\n * pins the gap as well as the overlap: it names `brokers` as the one served slug\n * with no glyph here, so a *sixth* product, or artwork landing for this one,\n * fails rather than passing quietly.\n *\n * The *order* is this package's own and not Identity's -- `REGISTRY_SLUGS` ends\n * with `wallet` where this begins with it. Nothing reads a render order off this\n * list: a switcher draws the order its consumer was served (`AppSwitcher`), and\n * the only thing this order sets is the left-to-right run of frames in the\n * ProductMark specimen.\n *\n * ── The fifth slug ───────────────────────────────────────────────────────────\n *\n * **`brokers` is absent because no Brokers artwork exists to lift, not because\n * nobody got to it.** The four glyphs below were taken verbatim out of\n * `boostledger/src/ui/primitives/icons.tsx`, whose own `GLYPHS` is typed\n * `Record<ProductName, ReactNode>` over exactly four display names. There is no\n * Brokers mark in that file, none in `boost33-brand-hub`, and none in this\n * repository. The hub renders the product as a text quick-link and no mark at\n * all.\n *\n * So drawing one here would not be transcribing a mark, it would be inventing\n * one -- and the comment on GLYPHS below records what that costs: PR #4 redrew\n * all four from a written description, got all four wrong, and reintroduced the\n * retired one-orange-element construction. An invented fifth mark is worse than\n * that was, because it has nothing to be caught against. A human captures the\n * first baseline at the fidelity gate, which would make the invention the\n * referent, and it looks equally settled either way afterwards (CLAUDE.md, \"an\n * agent that picks one and builds it has invented a referent\").\n *\n * The degrade is also the mildest it will ever be. Identity serves `brokers` as\n * `live: false` -- the space is still being built -- so the switcher row carries\n * the \"Soon\" tag beside the bare tile, which reads as a product that has not\n * arrived rather than as a drawing that failed to load. That stops being true\n * the day Brokers ships.\n *\n * **To close it:** get the mark drawn where the other four live\n * (`boostledger/src/ui/primitives/icons.tsx`), lift it here verbatim, add\n * `brokers` to this list, and let a human approve `productmark-brokers.png` at a\n * gate. Not in that order optional: this list is what GLYPHS is typed against,\n * so adding the slug without the artwork stops the build, which is the one part\n * of this that cannot go wrong quietly.\n *\n * **And since B33-1269 that is an ordinary addition rather than a breaking\n * change.** This list is not published, so widening it widens nothing a consumer\n * has typed against: a fifth entry adds a drawing where there was a bare tile and\n * flips `hasProductMark('brokers')` from false to true. Until then it was a\n * major-bump-shaped change to ship a picture, which is the wrong price for the\n * thing this package is for.\n */\nexport const PRODUCT_SLUGS = ['wallet', 'boostscore', 'boostvoice', 'boostoutbound'] as const\n\n/**\n * One of the slugs this package draws a mark for. Not every slug Identity serves\n * -- see above -- and not published either, for the reason recorded there. What\n * this type is for is typing GLYPHS, so the list and the artwork cannot part\n * company.\n */\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. That is why the\n * list stays a `const` assertion with a union derived from it even though\n * B33-1269 stopped publishing both -- the union moved off the package surface,\n * it did not stop existing, and `tsc --noEmit` is the check that a slug and its\n * drawing arrive together.\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  boostscore: (\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  boostvoice: (\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  boostoutbound: (\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\n/*\n * The narrowing half of the same question, deliberately separate from the\n * published `hasProductMark` below. A type predicate -- `slug is ProductSlug` --\n * is what lets `GLYPHS[slug]` index safely, and it is also a signature that\n * names `ProductSlug` in the emitted `.d.ts`. Publishing this one would put the\n * union back on the package surface through the back door, which is exactly what\n * B33-1269 took off it.\n */\nfunction isProductSlug(slug: string): slug is ProductSlug {\n  return (PRODUCT_SLUGS as readonly string[]).includes(slug)\n}\n\n/**\n * Does this package draw a mark for `slug`? The supported way to ask, and the\n * only thing about the artwork inventory the package publishes (B33-1269).\n *\n * **Ask this rather than matching a slug against a union of known slugs.** The\n * set of slugs with artwork is this package's inventory, not a vocabulary:\n * Identity owns which products exist (ADR-0003) and this list grows whenever a\n * drawing lands. `brokers` is the one slug Identity serves today that there is no\n * glyph here for -- see \"The fifth slug\" above. A caller that pattern-matches a\n * union is pinned to whichever inventory it compiled against; a caller that asks\n * this gets the installed version's answer, and keeps working when the next mark\n * ships.\n *\n * **A `false` is not an error and needs no guard around it.** `ProductMark`\n * renders a slug it has no glyph for as the bare tile rather than throwing\n * (ADR-0003's safe degrade), and in a switcher that row is still named, still\n * linked and still clickable -- only the glyph is missing. So do not use this to\n * filter a served registry, to hide a product's row, or to decide to substitute a\n * drawing of your own: every one of those turns a missing glyph into a missing\n * product, and the registry running ahead of the artwork is the supported state.\n *\n * It is here for a caller that needs to *know* rather than to branch on\n * rendering -- a consumer test asserting its own hardcoded fixtures still draw\n * something, or a report of which served slugs have artwork yet.\n */\nexport function hasProductMark(slug: string): boolean {\n  return isProductSlug(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   * **Only use this where the mark is decorative.** White on --color-neutral-300\n   * is 1.41:1, well under WCAG 1.4.11's 3:1, and the reason that is not a defect\n   * is that the criterion covers graphics *required to understand the content* --\n   * which this is not, while the mark is `aria-hidden`, the product's name sits\n   * beside it as text, and entitlement is additionally stated in words (the\n   * switcher's \"Not on plan\" tag). Combining `muted` with `title`, so the mark\n   * stands alone as the sole carrier of a product's identity, removes every one\n   * of those and makes the ratio bite. That combination is out of contract; no\n   * call site in this package uses it. See ADR-0012, which also records why the\n   * ground is not darkened and what to reach for if this is ever revisited.\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   * Passing this is what takes the mark out of `muted`'s contract -- see the\n   * note there. A mark that carries meaning on its own has to be legible on its\n   * own, and the muted ground is not.\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"],"names":["DEFAULT_SIZE","PRODUCT_SLUGS","GLYPHS","jsxs","Fragment","jsx","isProductSlug","slug","hasProductMark","ProductMark","size","muted","title","className","titleId","useId","decorative","glyph","styles"],"mappings":"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"}
+{"version":3,"file":"ProductMark.js","sources":["../../../src/components/ProductMark/ProductMark.tsx"],"sourcesContent":["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 every\n * tests/baselines/productmark-*.png is 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 are drawn to hold from Paper's 96px down to 20px, and the one\n * glyph with detail that does not survive the small end handles it itself:\n * Passport drops its globe lines below 24px (PASSPORT_GLOBE_LINES_MIN_SIZE), as\n * Paper's \"Small sizes\" row draws it. Do not generalise Boost33Mark's floor into\n * a shared rule.\n */\nconst DEFAULT_SIZE = 20\n\n/**\n * The slugs this package draws a product mark for, as one list. Everything else\n * keys off it: ProductSlug is derived from it, and GLYPHS is typed against it so\n * adding a slug without artwork is a compile error rather than a mark that\n * silently draws nothing.\n *\n * **Module-internal since B33-1269, and it has to stay that way.** `src/index.ts`\n * publishes `hasProductMark` below and neither this list nor `ProductSlug`. A\n * `const` assertion over these strings made an artwork inventory part of the\n * published type contract: a consumer could write `Record<ProductSlug, ...>` or\n * switch exhaustively over it, and then artwork landing for another product --\n * the thing this package exists to ship -- would be a breaking change for them.\n * Nothing published is typed `ProductSlug` anyway; every slug prop is `string` on\n * purpose, so Identity's registry may run ahead of a mark release (ADR-0003, and\n * `slug` below). So the union's only real job was answering \"which slugs have\n * artwork\", and `hasProductMark` answers that without freezing the list.\n * B33-1670 widening this from four slugs to ten is the proof: it adds drawings\n * and flips six `hasProductMark` answers to true, and breaks nothing a consumer\n * could have typed.\n *\n * The tests and the specimen read both names by deep import, which is how\n * everything in this repo reaches into `src/`. A consumer cannot: `package.json`\n * exports `.`, `./style.css` and `./theme.css`, and nothing else.\n *\n * **It is the whole of Identity's registry: all ten slugs, every one with a\n * mark.** Transcribed from `boost33-identity/src/lib/productRegistry.ts` -- its\n * `REGISTRY_SLUGS`, which is `PRODUCTS` from `src/config/products.ts`\n * (boostscore, boostvoice, boostoutbound, brokers, boosttrade, boostfunding)\n * plus `RESULTS_SLUG`, `PASSPORT_SLUG`, `PIPE_SLUG` and `WALLET_SLUG`. That file\n * is the source of truth and this is a copy of it in another repository, which\n * is a thing that drifts. It already did: until B33-1043 this list read\n * `wallet | score | voice | outbound` while its comment asserted it was\n * Identity's, so three of the four rows of a switcher fed straight from\n * `GET /api/v1/products` drew the bare tile (see `slug` below) and nothing\n * anywhere failed.\n *\n * Identity is not the side that renames. ADR-0003 records the shorter slugs as\n * considered and rejected: these match the `?app=` keys live campaign URLs\n * already carry, so renaming them means those links grant nothing on sign-up.\n * The same holds for `boostvoice`, whose mark is already the Content pencil:\n * the product is being renamed Boost Content, and the display name moves on\n * Identity's side (B33-1672) while the slug stays.\n *\n * `tests/product-mark.test.tsx` pins this list against a second transcription of\n * the same source, so the two repositories cannot part company in silence again.\n * The pin also keeps a list of served slugs this package deliberately draws\n * nothing for. That list is empty since B33-1670, and it stays in the test so an\n * eleventh product Identity serves before its mark lands is a recorded decision\n * rather than a quiet pass.\n *\n * The *order* is this package's own and not Identity's -- `REGISTRY_SLUGS` ends\n * with `wallet` where this begins with it, then follows Identity's order for the\n * other nine. Nothing reads a render order off this list: a switcher draws the\n * order its consumer was served (`AppSwitcher`), and the only thing this order\n * sets is the left-to-right run of frames in the ProductMark specimen, where the\n * four slugs that have carried a mark since 0.1 keep the first four places.\n *\n * ── Brokers, and the six that arrived with it ────────────────────────────────\n *\n * From 0.4.0 to 0.6.0 Identity served `brokers` and this package drew it as the\n * bare tile, deliberately: no Brokers artwork existed in any repository to lift,\n * and drawing one here would have been inventing a referent rather than\n * transcribing a mark (PR #4 redrew the first four from a written description\n * and got all four wrong). Identity then grew `boosttrade`, `boostfunding`,\n * `boostresults`, `passport` and `pipe`, all served with no mark here either.\n *\n * B33-1669 closed it the way the old comment said it had to be closed: the\n * marks were drawn where the others live (`boostledger/src/ui/primitives/icons.tsx`),\n * for all ten products at once, and B33-1670 lifted them here verbatim. The\n * part a commit cannot do is still outstanding when this lands -- a human\n * approves `productmark-<slug>.png` for each of the ten at the fidelity gate\n * (tests/baselines/README.md).\n */\nexport const PRODUCT_SLUGS = [\n  'wallet',\n  'boostscore',\n  'boostvoice',\n  'boostoutbound',\n  'brokers',\n  'boosttrade',\n  'boostfunding',\n  'boostresults',\n  'passport',\n  'pipe',\n] as const\n\n/**\n * One of the slugs this package draws a mark for. Not published, for the reason\n * recorded above. What this type is for is typing GLYPHS, so the list and the\n * artwork cannot part company.\n */\nexport type ProductSlug = (typeof PRODUCT_SLUGS)[number]\n\n/*\n * The three paints a mark uses, all tokens. Named once so a glyph below cannot\n * reach for a literal. The tile ground is chosen per render (it greys when\n * muted) and handed to each glyph as `tile`; these two are fixed.\n */\nconst GLYPH = 'var(--color-primary-foreground)'\nconst ACCENT = 'var(--color-primary)'\nconst TILE = 'var(--color-neutral-950)'\nconst MUTED_TILE = 'var(--color-neutral-300)'\n\n/** The tile's own grid: a 40-unit square, cornered by --radius-product-tile. */\nconst TILE_GRID = 40\n\n/** The glyph box as a share of the tile side, before the optical factor. */\nconst GLYPH_BOX = 0.62\n\n/**\n * Below this rendered size Passport drops its two globe lines (the meridian\n * ellipse and the equator): at 20px they are under a pixel apart and fill the\n * globe in, which is what Paper's \"Small sizes\" row draws. A rendered size in\n * px compared against a number, not a px value painted into the mark, so it is\n * not a token. It is upstream's constant under upstream's name.\n */\nconst PASSPORT_GLOBE_LINES_MIN_SIZE = 24\n\ntype Glyph = {\n  /** Optical size factor applied to the 62% glyph box. */\n  optical: number\n  /** The glyph on its 24-unit grid. `tile` is the ground colour in use, for cut-outs. */\n  draw: (p: { tile: string; accent: string; size: number }) => ReactNode\n}\n\n/**\n * The ten product glyphs, lifted verbatim from `boostledger`'s\n * `src/ui/primitives/icons.tsx` (the `GLYPHS` record, as of the B33-1669 merge\n * `ad4146f31666db0cbab1f7ba3dcb248215cc8697`, which replaced the four lifted\n * from `837d85d`) rather than redrawn from any written description. Redrawing\n * from `docs/mintlify/system/product-marks.mdx` is how PR #4 got all four of the\n * first set wrong; if any document disagrees with that file, that file wins. See\n * B33-562. Upstream keys the record by display name; this one keys it by\n * Identity's slug, noted against each entry, and every path, number and paint\n * is upstream's unchanged.\n *\n * **Every mark carries exactly ONE orange accent, and that is a reversal.**\n * Decided by Jamal on 29 Oct 2026 (B33-1669; this package's half is B33-1670,\n * and ADR-0015 records it). From 9 Sep 2026 to 29 Oct 2026 the rule here was the\n * opposite: every element painted in `currentColor` or `none`, \"no colour of any\n * kind\", and a test failed any mark that reached for `--color-primary`. That\n * zero-orange rule is retired. If you find it quoted -- in an older copy of this\n * file, a cached doc, a consumer's fork -- it is the old construction.\n *\n * What survives the reversal, and is the rule the set exists to hold: **products\n * are told apart by SHAPE, never by hue.** The accent is the same\n * `--color-primary` in all ten, on one element of the drawing, so it cannot\n * identify anything; it ties the family back to the parent's orange letterform.\n * A mark that is only recognisable by where its orange sits is the wrong shape.\n * Brokers' accent is one element drawn as two shapes, a head and a body.\n *\n * **The accent is identity, not emphasis.** It does not count against a\n * screen's one orange moment (the `--color-primary` rule in tokens.css: the\n * primary action or the threshold marker, never both), any more than the\n * Boost33 monogram's orange letterform does. A switcher showing ten marks has\n * spent none of the screen's orange. Jamal, 29 Oct 2026.\n *\n * Construction. Each glyph is drawn on a 24-unit grid and sits in a box 62% of\n * the tile side, centred, times an optical factor: Passport and Wallet sit at\n * 0.94 and Pipe at 0.96 because their solid masses read larger than the open\n * shapes beside them. Scaling thins the strokes with it; do not \"fix\" the stroke\n * widths to compensate -- they are correct on their own grid.\n *\n * Three paints, all tokens:\n *   - the tile:   `--color-neutral-950`, or `--color-neutral-300` when muted;\n *   - the glyph:  `--color-primary-foreground`;\n *   - the accent: `--color-primary`, or `--color-primary-foreground` (white)\n *                 when muted -- a product the account does not own spends no\n *                 orange.\n * Some glyphs are cut by shapes painted in the TILE colour (Score's ring gap,\n * the pencil's groove, Brokers' outline between the two people, Off Market's key\n * bow, Financing's note edge and coin, Passport's globe lines and name bar,\n * Wallet's clasp pocket). Those are cut-outs, so they take the tile colour\n * actually in use -- muted included -- or a muted mark would show black slivers\n * on its grey ground.\n *\n * Typing this `Record<ProductSlug, Glyph>` is load-bearing: a slug added to\n * PRODUCT_SLUGS without a glyph here stops the build. That is why the list stays\n * a `const` assertion with a union derived from it even though B33-1269 stopped\n * publishing both -- `tsc --noEmit` is the check that a slug and its drawing\n * arrive together.\n */\nconst GLYPHS: Record<ProductSlug, Glyph> = {\n  // wallet (upstream \"Wallet\"). A wallet with a card tucked behind its flap and\n  // an orange clasp.\n  wallet: {\n    optical: 0.94,\n    draw: ({ tile, accent }) => (\n      <>\n        <path\n          d=\"M5 7 L15.4 3.1 A1.2 1.2 0 0 1 17 4 L17.6 7 Z\"\n          fill={GLYPH}\n          stroke={GLYPH}\n          strokeWidth=\"1\"\n          strokeLinejoin=\"round\"\n        />\n        <rect x=\"2.5\" y=\"6.5\" width=\"19\" height=\"15\" rx=\"3\" fill={GLYPH} />\n        <rect x=\"14.5\" y=\"10.75\" width=\"9\" height=\"6.5\" rx=\"2.5\" fill={tile} />\n        <circle cx=\"17.75\" cy=\"14\" r=\"1.5\" fill={accent} />\n      </>\n    ),\n  },\n  // boostscore (upstream \"Boost Score\"). A target: a white ring around an orange\n  // bull's-eye.\n  boostscore: {\n    optical: 1,\n    draw: ({ tile, accent }) => (\n      <>\n        <circle cx=\"12\" cy=\"12\" r=\"10\" fill={GLYPH} />\n        <circle cx=\"12\" cy=\"12\" r=\"7\" fill={tile} />\n        <circle cx=\"12\" cy=\"12\" r=\"4\" fill={accent} />\n      </>\n    ),\n  },\n  // boostvoice (upstream \"Boost Voice\"). The CONTENT pencil: the product is being\n  // renamed Boost Content and the mark is already drawn for the new name. The\n  // slug stays `boostvoice`; the display rename is Identity's (B33-1672).\n  boostvoice: {\n    optical: 1,\n    draw: ({ tile, accent }) => (\n      <>\n        <path\n          d=\"M15.8 3.6 A2 2 0 0 1 18.6 3.6 L20.4 5.4 A2 2 0 0 1 20.4 8.2 L9 19.6 L4 20.5 L4.4 15 Z\"\n          fill={GLYPH}\n          stroke={GLYPH}\n          strokeWidth=\"1\"\n          strokeLinejoin=\"round\"\n        />\n        <path d=\"M13.4 6 L18 10.6\" stroke={tile} strokeWidth=\"1.6\" strokeLinecap=\"round\" />\n        <rect x=\"13\" y=\"18.25\" width=\"8.5\" height=\"2.75\" rx=\"1.375\" fill={accent} />\n      </>\n    ),\n  },\n  // boostoutbound (upstream \"Boost Outbound\"). A paper plane, its near wing orange.\n  boostoutbound: {\n    optical: 1,\n    draw: ({ tile, accent }) => (\n      <>\n        <path\n          d=\"M21 3 L3 10.4 L10.2 13.8 Z\"\n          fill={GLYPH}\n          stroke={GLYPH}\n          strokeWidth=\"1.5\"\n          strokeLinejoin=\"round\"\n        />\n        <path\n          d=\"M21 3 L10.2 13.8 L13.6 21 Z\"\n          fill={accent}\n          stroke={accent}\n          strokeWidth=\"1.5\"\n          strokeLinejoin=\"round\"\n        />\n        {/* Muted, both wings are white and would merge into one triangle; a fold\n            line in the tile colour keeps the plane. */}\n        {accent === GLYPH && (\n          <path d=\"M20 4 L10.2 13.8\" stroke={tile} strokeWidth=\"1.4\" strokeLinecap=\"round\" />\n        )}\n      </>\n    ),\n  },\n  // brokers (upstream \"Boost Brokers\"). Two people, the one behind in orange; a\n  // tile-coloured outline separates the white figure in front from it.\n  brokers: {\n    optical: 1,\n    draw: ({ tile, accent }) => (\n      <>\n        <circle cx=\"16.5\" cy=\"7.5\" r=\"3.25\" fill={accent} />\n        <path d=\"M11 20 A5.5 5.5 0 0 1 22 20 Z\" fill={accent} />\n        <circle cx=\"9\" cy=\"7.5\" r=\"3.75\" fill={GLYPH} stroke={tile} strokeWidth=\"1.5\" />\n        <path\n          d=\"M2 20.5 A7 7 0 0 1 16 20.5 Z\"\n          fill={GLYPH}\n          stroke={tile}\n          strokeWidth=\"1.5\"\n          strokeLinejoin=\"round\"\n        />\n      </>\n    ),\n  },\n  // boosttrade (upstream \"Boost Off Market\"). A key -- something not on the open\n  // market -- with an orange bow.\n  boosttrade: {\n    optical: 1,\n    draw: ({ tile, accent }) => (\n      <>\n        <rect x=\"11\" y=\"10.6\" width=\"11\" height=\"2.8\" rx=\"1.4\" fill={GLYPH} />\n        <rect x=\"15.6\" y=\"11\" width=\"2.8\" height=\"5\" rx=\"1.2\" fill={GLYPH} />\n        <rect x=\"19.2\" y=\"11\" width=\"2.8\" height=\"3.8\" rx=\"1.2\" fill={GLYPH} />\n        <circle cx=\"7.5\" cy=\"12\" r=\"5.5\" fill={GLYPH} />\n        <circle cx=\"7.5\" cy=\"12\" r=\"2.6\" fill={tile} />\n        <circle cx=\"7.5\" cy=\"12\" r=\"1.6\" fill={accent} />\n      </>\n    ),\n  },\n  // boostfunding (upstream \"Boost Financing\"). A banknote with its coin, an\n  // orange note stacked behind it.\n  boostfunding: {\n    optical: 1,\n    draw: ({ tile, accent }) => (\n      <>\n        <rect x=\"4.75\" y=\"4.5\" width=\"17\" height=\"11\" rx=\"2.5\" fill={accent} />\n        <rect x=\"1\" y=\"8.25\" width=\"18.75\" height=\"12.5\" rx=\"3.25\" fill={tile} />\n        <rect x=\"2.25\" y=\"9.5\" width=\"16.25\" height=\"10\" rx=\"2\" fill={GLYPH} />\n        <circle cx=\"10.375\" cy=\"14.5\" r=\"2.75\" fill={tile} />\n      </>\n    ),\n  },\n  // boostresults (upstream \"Boost Activity\"). A pulse line running into an\n  // orange dot -- activity, now.\n  boostresults: {\n    optical: 1,\n    draw: ({ accent }) => (\n      <>\n        <path\n          d=\"M2.5 12.5 H6 L9 5 L14 19 L16.6 12.5 H17\"\n          fill=\"none\"\n          stroke={GLYPH}\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n        <circle cx=\"20\" cy=\"12.5\" r=\"2.5\" fill={accent} />\n      </>\n    ),\n  },\n  // passport (upstream \"Boost Passport\"). A passport booklet with an orange globe\n  // and a name bar. The globe's meridian and equator are dropped below 24px (see\n  // the constant above).\n  passport: {\n    optical: 0.94,\n    draw: ({ tile, accent, size }) => (\n      <>\n        <rect x=\"4.5\" y=\"2\" width=\"15\" height=\"20\" rx=\"2.5\" fill={GLYPH} />\n        {/* Muted, a white globe would vanish into the white book, so it flips to\n            the tile colour and its lines to white, as Paper's no-orange row draws. */}\n        <circle cx=\"12\" cy=\"10\" r=\"5.75\" fill={accent === GLYPH ? tile : accent} />\n        {size >= PASSPORT_GLOBE_LINES_MIN_SIZE && (\n          <>\n            <ellipse\n              cx=\"12\"\n              cy=\"10\"\n              rx=\"2.5\"\n              ry=\"5.1\"\n              fill=\"none\"\n              stroke={accent === GLYPH ? GLYPH : tile}\n              strokeWidth=\"1.3\"\n            />\n            <path d=\"M6.25 10 H17.75\" stroke={accent === GLYPH ? GLYPH : tile} strokeWidth=\"1.3\" />\n          </>\n        )}\n        <rect x=\"8.5\" y=\"17.75\" width=\"7\" height=\"1.8\" rx=\"0.9\" fill={tile} />\n      </>\n    ),\n  },\n  // pipe (upstream \"Boost Pipe\"). A pipeline narrowing in three stages, the last\n  // -- the deal -- orange.\n  pipe: {\n    optical: 0.96,\n    draw: ({ accent }) => (\n      <>\n        <rect x=\"2.5\" y=\"4\" width=\"19\" height=\"4\" rx=\"2\" fill={GLYPH} />\n        <rect x=\"6\" y=\"10\" width=\"12\" height=\"4\" rx=\"2\" fill={GLYPH} />\n        <rect x=\"9.5\" y=\"16\" width=\"5\" height=\"4\" rx=\"2\" fill={accent} />\n      </>\n    ),\n  },\n}\n\n/*\n * The narrowing half of the same question, deliberately separate from the\n * published `hasProductMark` below. A type predicate -- `slug is ProductSlug` --\n * is what lets `GLYPHS[slug]` index safely, and it is also a signature that\n * names `ProductSlug` in the emitted `.d.ts`. Publishing this one would put the\n * union back on the package surface through the back door, which is exactly what\n * B33-1269 took off it.\n */\nfunction isProductSlug(slug: string): slug is ProductSlug {\n  return (PRODUCT_SLUGS as readonly string[]).includes(slug)\n}\n\n/**\n * Does this package draw a mark for `slug`? The supported way to ask, and the\n * only thing about the artwork inventory the package publishes (B33-1269).\n *\n * **Ask this rather than matching a slug against a union of known slugs.** The\n * set of slugs with artwork is this package's inventory, not a vocabulary:\n * Identity owns which products exist (ADR-0003) and this list grows whenever a\n * drawing lands. Since B33-1670 every slug Identity serves has a mark, and the\n * next product Identity adds will be served before its mark ships here. A\n * caller that pattern-matches a union is pinned to whichever inventory it compiled against; a caller that asks\n * this gets the installed version's answer, and keeps working when the next mark\n * ships.\n *\n * **A `false` is not an error and needs no guard around it.** `ProductMark`\n * renders a slug it has no glyph for as the bare tile rather than throwing\n * (ADR-0003's safe degrade), and in a switcher that row is still named, still\n * linked and still clickable -- only the glyph is missing. So do not use this to\n * filter a served registry, to hide a product's row, or to decide to substitute a\n * drawing of your own: every one of those turns a missing glyph into a missing\n * product, and the registry running ahead of the artwork is the supported state.\n *\n * It is here for a caller that needs to *know* rather than to branch on\n * rendering -- a consumer test asserting its own hardcoded fixtures still draw\n * something, or a report of which served slugs have artwork yet.\n */\nexport function hasProductMark(slug: string): boolean {\n  return isProductSlug(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 and unbuilt rows need it. The tile ground greys to\n   * --color-neutral-300, and the cut-outs painted in the tile colour grey with\n   * it. The glyph stays white, and **the orange accent turns white too** (Jamal,\n   * 29 Oct 2026, B33-1669): a product the account does not own spends no\n   * orange. Two marks take the drawing from Paper's \"Option: no orange\" row to\n   * stay legible without the accent -- Outbound gains a fold line in the tile\n   * colour between its two wings, and Passport's globe flips to the tile colour\n   * with white lines. Fading the glyph instead would cost the shape the one\n   * thing telling the 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   * **Only use this where the mark is decorative.** White on --color-neutral-300\n   * is 1.41:1, well under WCAG 1.4.11's 3:1, and the reason that is not a defect\n   * is that the criterion covers graphics *required to understand the content* --\n   * which this is not, while the mark is `aria-hidden`, the product's name sits\n   * beside it as text, and entitlement is additionally stated in words (the\n   * switcher's \"Not on plan\" tag). Combining `muted` with `title`, so the mark\n   * stands alone as the sole carrier of a product's identity, removes every one\n   * of those and makes the ratio bite. That combination is out of contract; no\n   * call site in this package uses it. See ADR-0012, which also records why the\n   * ground is not darkened and what to reach for if this is ever revisited.\n   * Since the accent turned white on a muted tile, every ink on that tile is the\n   * same white ADR-0012 measured, so its 1.41:1 is still the only ratio there is.\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   * Passing this is what takes the mark out of `muted`'s contract -- see the\n   * note there. A mark that carries meaning on its own has to be legible on its\n   * own, and the muted ground is not.\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 and one accent\n * in --color-primary. The ten marks share one palette and are told apart by\n * shape; the accent is the same orange in every one of them, so it identifies\n * nothing.\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  const tile = muted ? MUTED_TILE : TILE\n  const accent = muted ? GLYPH : ACCENT\n\n  return (\n    <svg\n      className={className != null ? `${styles.mark} ${className}` : styles.mark}\n      width={size}\n      height={size}\n      viewBox={`0 0 ${TILE_GRID} ${TILE_GRID}`}\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 className={styles.ground} width={TILE_GRID} height={TILE_GRID} style={{ fill: tile }} />\n      {glyph && <g transform={glyphTransform(glyph.optical)}>{glyph.draw({ tile, accent, size })}</g>}\n    </svg>\n  )\n}\n\n/**\n * The 24-unit glyph scaled into a box 62% of the tile side times its optical\n * factor, and centred -- upstream's arithmetic, so the transform strings match\n * boostledger's to the digit (`translate(7.6 7.6) scale(1.0333)` for a factor\n * of 1). This replaced the `translate(10 10) scale(0.5)` the 40-unit glyphs\n * before B33-1670 were inset with.\n */\nfunction glyphTransform(optical: number): string {\n  const box = TILE_GRID * GLYPH_BOX * optical\n  const offset = round((TILE_GRID - box) / 2)\n  const scale = round(box / 24)\n  return `translate(${offset} ${offset}) scale(${scale})`\n}\n\n/** Four decimals: enough for sub-pixel accuracy at any size, short in the DOM. */\nfunction round(n: number): number {\n  return Math.round(n * 10000) / 10000\n}\n"],"names":["DEFAULT_SIZE","PRODUCT_SLUGS","GLYPH","ACCENT","TILE","MUTED_TILE","TILE_GRID","GLYPH_BOX","PASSPORT_GLOBE_LINES_MIN_SIZE","GLYPHS","tile","accent","jsxs","Fragment","jsx","size","isProductSlug","slug","hasProductMark","ProductMark","muted","title","className","titleId","useId","decorative","glyph","styles","glyphTransform","optical","box","offset","round","scale","n"],"mappings":";;;AAkBA,MAAMA,IAAe,IA2ERC,IAAgB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAcMC,IAAQ,mCACRC,IAAS,wBACTC,IAAO,4BACPC,IAAa,4BAGbC,IAAY,IAGZC,IAAY,MASZC,IAAgC,IAkEhCC,IAAqC;AAAA;AAAA;AAAA,EAGzC,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,MAAM,CAAC,EAAE,MAAAC,GAAM,QAAAC,EAAA,MACb,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAMZ;AAAA,UACN,QAAQA;AAAA,UACR,aAAY;AAAA,UACZ,gBAAe;AAAA,QAAA;AAAA,MAAA;AAAA,MAEjB,gBAAAY,EAAC,QAAA,EAAK,GAAE,OAAM,GAAE,OAAM,OAAM,MAAK,QAAO,MAAK,IAAG,KAAI,MAAMZ,GAAO;AAAA,MACjE,gBAAAY,EAAC,QAAA,EAAK,GAAE,QAAO,GAAE,SAAQ,OAAM,KAAI,QAAO,OAAM,IAAG,OAAM,MAAMJ,GAAM;AAAA,MACrE,gBAAAI,EAAC,YAAO,IAAG,SAAQ,IAAG,MAAK,GAAE,OAAM,MAAMH,EAAA,CAAQ;AAAA,IAAA,EAAA,CACnD;AAAA,EAAA;AAAA;AAAA;AAAA,EAKJ,YAAY;AAAA,IACV,SAAS;AAAA,IACT,MAAM,CAAC,EAAE,MAAAD,GAAM,QAAAC,EAAA,MACb,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC,EAAC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAMZ,EAAA,CAAO;AAAA,MAC5C,gBAAAY,EAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAMJ,EAAA,CAAM;AAAA,MAC1C,gBAAAI,EAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAMH,EAAA,CAAQ;AAAA,IAAA,EAAA,CAC9C;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAMJ,YAAY;AAAA,IACV,SAAS;AAAA,IACT,MAAM,CAAC,EAAE,MAAAD,GAAM,QAAAC,EAAA,MACb,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAMZ;AAAA,UACN,QAAQA;AAAA,UACR,aAAY;AAAA,UACZ,gBAAe;AAAA,QAAA;AAAA,MAAA;AAAA,MAEjB,gBAAAY,EAAC,UAAK,GAAE,oBAAmB,QAAQJ,GAAM,aAAY,OAAM,eAAc,QAAA,CAAQ;AAAA,MACjF,gBAAAI,EAAC,QAAA,EAAK,GAAE,MAAK,GAAE,SAAQ,OAAM,OAAM,QAAO,QAAO,IAAG,SAAQ,MAAMH,EAAA,CAAQ;AAAA,IAAA,EAAA,CAC5E;AAAA,EAAA;AAAA;AAAA,EAIJ,eAAe;AAAA,IACb,SAAS;AAAA,IACT,MAAM,CAAC,EAAE,MAAAD,GAAM,QAAAC,EAAA,MACb,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAMZ;AAAA,UACN,QAAQA;AAAA,UACR,aAAY;AAAA,UACZ,gBAAe;AAAA,QAAA;AAAA,MAAA;AAAA,MAEjB,gBAAAY;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAMH;AAAA,UACN,QAAQA;AAAA,UACR,aAAY;AAAA,UACZ,gBAAe;AAAA,QAAA;AAAA,MAAA;AAAA,MAIhBA,MAAWT,KACV,gBAAAY,EAAC,QAAA,EAAK,GAAE,oBAAmB,QAAQJ,GAAM,aAAY,OAAM,eAAc,QAAA,CAAQ;AAAA,IAAA,EAAA,CAErF;AAAA,EAAA;AAAA;AAAA;AAAA,EAKJ,SAAS;AAAA,IACP,SAAS;AAAA,IACT,MAAM,CAAC,EAAE,MAAAA,GAAM,QAAAC,EAAA,MACb,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC,EAAC,UAAA,EAAO,IAAG,QAAO,IAAG,OAAM,GAAE,QAAO,MAAMH,EAAA,CAAQ;AAAA,MAClD,gBAAAG,EAAC,QAAA,EAAK,GAAE,iCAAgC,MAAMH,GAAQ;AAAA,MACtD,gBAAAG,EAAC,UAAA,EAAO,IAAG,KAAI,IAAG,OAAM,GAAE,QAAO,MAAMZ,GAAO,QAAQQ,GAAM,aAAY,OAAM;AAAA,MAC9E,gBAAAI;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAMZ;AAAA,UACN,QAAQQ;AAAA,UACR,aAAY;AAAA,UACZ,gBAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IACjB,EAAA,CACF;AAAA,EAAA;AAAA;AAAA;AAAA,EAKJ,YAAY;AAAA,IACV,SAAS;AAAA,IACT,MAAM,CAAC,EAAE,MAAAA,GAAM,QAAAC,EAAA,MACb,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,MAAK,GAAE,QAAO,OAAM,MAAK,QAAO,OAAM,IAAG,OAAM,MAAMZ,GAAO;AAAA,MACpE,gBAAAY,EAAC,QAAA,EAAK,GAAE,QAAO,GAAE,MAAK,OAAM,OAAM,QAAO,KAAI,IAAG,OAAM,MAAMZ,GAAO;AAAA,MACnE,gBAAAY,EAAC,QAAA,EAAK,GAAE,QAAO,GAAE,MAAK,OAAM,OAAM,QAAO,OAAM,IAAG,OAAM,MAAMZ,GAAO;AAAA,MACrE,gBAAAY,EAAC,YAAO,IAAG,OAAM,IAAG,MAAK,GAAE,OAAM,MAAMZ,EAAA,CAAO;AAAA,MAC9C,gBAAAY,EAAC,YAAO,IAAG,OAAM,IAAG,MAAK,GAAE,OAAM,MAAMJ,EAAA,CAAM;AAAA,MAC7C,gBAAAI,EAAC,YAAO,IAAG,OAAM,IAAG,MAAK,GAAE,OAAM,MAAMH,EAAA,CAAQ;AAAA,IAAA,EAAA,CACjD;AAAA,EAAA;AAAA;AAAA;AAAA,EAKJ,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,MAAM,CAAC,EAAE,MAAAD,GAAM,QAAAC,EAAA,MACb,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,QAAO,GAAE,OAAM,OAAM,MAAK,QAAO,MAAK,IAAG,OAAM,MAAMH,GAAQ;AAAA,MACrE,gBAAAG,EAAC,QAAA,EAAK,GAAE,KAAI,GAAE,QAAO,OAAM,SAAQ,QAAO,QAAO,IAAG,QAAO,MAAMJ,GAAM;AAAA,MACvE,gBAAAI,EAAC,QAAA,EAAK,GAAE,QAAO,GAAE,OAAM,OAAM,SAAQ,QAAO,MAAK,IAAG,KAAI,MAAMZ,GAAO;AAAA,MACrE,gBAAAY,EAAC,YAAO,IAAG,UAAS,IAAG,QAAO,GAAE,QAAO,MAAMJ,EAAA,CAAM;AAAA,IAAA,EAAA,CACrD;AAAA,EAAA;AAAA;AAAA;AAAA,EAKJ,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,MAAM,CAAC,EAAE,QAAAC,EAAA,MACP,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA,UACL,QAAQZ;AAAA,UACR,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MAAA;AAAA,MAEjB,gBAAAY,EAAC,YAAO,IAAG,MAAK,IAAG,QAAO,GAAE,OAAM,MAAMH,EAAA,CAAQ;AAAA,IAAA,EAAA,CAClD;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAMJ,UAAU;AAAA,IACR,SAAS;AAAA,IACT,MAAM,CAAC,EAAE,MAAAD,GAAM,QAAAC,GAAQ,MAAAI,EAAA,MACrB,gBAAAH,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,OAAM,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,IAAG,OAAM,MAAMZ,GAAO;AAAA,MAGjE,gBAAAY,EAAC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,QAAO,MAAMH,MAAWT,IAAQQ,IAAOC,EAAA,CAAQ;AAAA,MACxEI,KAAQP,KACP,gBAAAI,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,IAAG;AAAA,YACH,IAAG;AAAA,YACH,MAAK;AAAA,YACL,QAAQH,MAAWT,IAAQA,IAAQQ;AAAA,YACnC,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEd,gBAAAI,EAAC,QAAA,EAAK,GAAE,mBAAkB,QAAQH,MAAWT,IAAQA,IAAQQ,GAAM,aAAY,MAAA,CAAM;AAAA,MAAA,GACvF;AAAA,MAEF,gBAAAI,EAAC,QAAA,EAAK,GAAE,OAAM,GAAE,SAAQ,OAAM,KAAI,QAAO,OAAM,IAAG,OAAM,MAAMJ,EAAA,CAAM;AAAA,IAAA,EAAA,CACtE;AAAA,EAAA;AAAA;AAAA;AAAA,EAKJ,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,MAAM,CAAC,EAAE,QAAAC,EAAA,MACP,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,OAAM,GAAE,KAAI,OAAM,MAAK,QAAO,KAAI,IAAG,KAAI,MAAMZ,GAAO;AAAA,MAC9D,gBAAAY,EAAC,QAAA,EAAK,GAAE,KAAI,GAAE,MAAK,OAAM,MAAK,QAAO,KAAI,IAAG,KAAI,MAAMZ,GAAO;AAAA,MAC7D,gBAAAY,EAAC,QAAA,EAAK,GAAE,OAAM,GAAE,MAAK,OAAM,KAAI,QAAO,KAAI,IAAG,KAAI,MAAMH,EAAA,CAAQ;AAAA,IAAA,EAAA,CACjE;AAAA,EAAA;AAGN;AAUA,SAASK,EAAcC,GAAmC;AACxD,SAAQhB,EAAoC,SAASgB,CAAI;AAC3D;AA2BO,SAASC,EAAeD,GAAuB;AACpD,SAAOD,EAAcC,CAAI;AAC3B;AA+DO,SAASE,EAAY,EAAE,MAAAF,GAAM,MAAAF,IAAOf,GAAc,OAAAoB,GAAO,OAAAC,GAAO,WAAAC,KAA+B;AACpG,QAAMC,IAAUC,EAAA,GACVC,IAAaJ,KAAS,MACtBK,IAAQV,EAAcC,CAAI,IAAIR,EAAOQ,CAAI,IAAI,MAC7CP,IAAOU,IAAQf,IAAaD,GAC5BO,IAASS,IAAQlB,IAAQC;AAE/B,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWU,KAAa,OAAO,GAAGK,EAAO,IAAI,IAAIL,CAAS,KAAKK,EAAO;AAAA,MACtE,OAAOZ;AAAA,MACP,QAAQA;AAAA,MACR,SAAS,OAAOT,CAAS,IAAIA,CAAS;AAAA,MACtC,MAAMmB,IAAa,SAAY;AAAA,MAC/B,eAAaA,IAAa,SAAS;AAAA,MACnC,mBAAiBA,IAAa,SAAYF;AAAA,MAEzC,UAAA;AAAA,QAAA,CAACE,KAAc,gBAAAX,EAAC,SAAA,EAAM,IAAIS,GAAU,UAAAF,GAAM;AAAA,QAG3C,gBAAAP,EAAC,QAAA,EAAK,WAAWa,EAAO,QAAQ,OAAOrB,GAAW,QAAQA,GAAW,OAAO,EAAE,MAAMI,IAAK,CAAG;AAAA,QAC3FgB,KAAS,gBAAAZ,EAAC,KAAA,EAAE,WAAWc,EAAeF,EAAM,OAAO,GAAI,UAAAA,EAAM,KAAK,EAAE,MAAAhB,GAAM,QAAAC,GAAQ,MAAAI,EAAA,CAAM,EAAA,CAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGjG;AASA,SAASa,EAAeC,GAAyB;AAC/C,QAAMC,IAAMxB,IAAYC,IAAYsB,GAC9BE,IAASC,GAAO1B,IAAYwB,KAAO,CAAC,GACpCG,IAAQD,EAAMF,IAAM,EAAE;AAC5B,SAAO,aAAaC,CAAM,IAAIA,CAAM,WAAWE,CAAK;AACtD;AAGA,SAASD,EAAME,GAAmB;AAChC,SAAO,KAAK,MAAMA,IAAI,GAAK,IAAI;AACjC;"}

package/dist/components/SettingsFrame/SettingsFrame.d.ts

@@ -0,0 +1,91 @@
+import { ElementType, ReactNode } from 'react';
+import { SettingsFrameLabels } from './labels';
+/** One entry in a sidebar group: a settings page, here or on another origin. */
+export interface SettingsFrameItem {
+    /** A stable key for the row, unique within its group. */
+    id: string;
+    /** The row's visible name. */
+    label: string;
+    /**
+     * Where the row goes. A path renders through `linkComponent`; an absolute URL
+     * renders as a plain `<a>` and loads the page in full -- which is what a
+     * product's page on its own origin needs.
+     */
+    href: string;
+    /**
+     * The row's glyph: a 16px square slot, inked in `currentColor`. The frame
+     * sets the colour (muted at rest, foreground when active), so draw the glyph
+     * with `stroke="currentColor"` or `fill="currentColor"` and it follows.
+     * Decorative -- give it `aria-hidden`; the label is the row's name.
+     */
+    icon?: ReactNode;
+    /** The page being shown. Marks the row `aria-current="page"`. */
+    active?: boolean;
+}
+/** A titled run of items: "You", the account's name, or a product's name. */
+export interface SettingsFrameGroup {
+    /** A stable key for the group. */
+    id: string;
+    /** The small uppercase heading over the group. Hidden below 768px. */
+    label: string;
+    items: SettingsFrameItem[];
+}
+/**
+ * An account other than the one being acted in. Switching is Identity's job,
+ * so `href` is normally Identity's account chooser on Identity's origin.
+ */
+export interface SettingsFrameAccount {
+    id: string;
+    label: string;
+    href: string;
+}
+/** A plain labelled link: the back link, or a help link in the header. */
+export interface SettingsFrameLink {
+    label: string;
+    href: string;
+}
+/** One step of the breadcrumb. The last one is the page being shown. */
+export interface SettingsFrameCrumb {
+    label: string;
+    /** Optional. A crumb with no href is text, which is how the hub draws both. */
+    href?: string;
+}
+/** The page's heading block, across the top of the content column. */
+export interface SettingsFrameHeading {
+    title: string;
+    description?: string;
+    /** The page's primary action, level with the title rather than below it. */
+    action?: ReactNode;
+}
+export interface SettingsFrameProps {
+    /** The link out of settings, at the head of the sidebar. */
+    back: SettingsFrameLink;
+    /** The sidebar's groups, in order. The frame renders exactly these. */
+    groups: SettingsFrameGroup[];
+    /** Accounts other than the acting one. The list is omitted when empty. */
+    otherAccounts?: SettingsFrameAccount[];
+    /**
+     * Where "Sign out" goes. Sign-out belongs to Identity, which owns the
+     * session; a host that dropped its own cookie would have revoked nothing. So
+     * this is a link to Identity, never a handler.
+     */
+    signOutHref: string;
+    /** The header's help links (the hub's "Feedback" and "Docs"). Hidden below 768px. */
+    helpLinks?: SettingsFrameLink[];
+    /** The header's trail, ending at the page being shown. */
+    breadcrumb: SettingsFrameCrumb[];
+    /** The page heading, drawn above `children`. Omit it and the content starts at the top. */
+    heading?: SettingsFrameHeading;
+    /** The header's trailing slot: the host's account menu. */
+    accountMenu?: ReactNode;
+    /** The page itself. */
+    children?: ReactNode;
+    /** The frame's own words. Partial; missing fields fall back to English. */
+    labels?: Partial<SettingsFrameLabels>;
+    /**
+     * The element a same-origin link renders as (ADR-0011). Defaults to `'a'`.
+     * Only consulted for paths: an absolute URL is always a plain `<a>`.
+     */
+    linkComponent?: ElementType;
+}
+export declare function SettingsFrame({ back, groups, otherAccounts, signOutHref, helpLinks, breadcrumb, heading, accountMenu, children, labels, linkComponent, }: SettingsFrameProps): import("react").JSX.Element;

package/dist/components/SettingsFrame/SettingsFrame.js

@@ -0,0 +1,109 @@
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+import e from "./SettingsFrame.module.css.js";
+import { ArrowLeftGlyph as L, SignOutGlyph as y, PanelGlyph as x } from "./icons.js";
+import { resolveSettingsFrameLabels as S } from "./labels.js";
+const T = /^(?:[a-z][a-z\d+.-]*:|\/\/)/i;
+function i({
+  href: n,
+  linkComponent: N,
+  className: t,
+  current: o,
+  children: m
+}) {
+  const p = T.test(n) ? "a" : N;
+  return /* @__PURE__ */ a(p, { href: n, className: t, "aria-current": o ? "page" : void 0, children: m });
+}
+function H({
+  back: n,
+  groups: N,
+  otherAccounts: t = [],
+  signOutHref: o,
+  helpLinks: m = [],
+  breadcrumb: p,
+  heading: d,
+  accountMenu: v,
+  children: u,
+  labels: g,
+  linkComponent: c = "a"
+}) {
+  const h = S(g);
+  return /* @__PURE__ */ a("div", { className: e.root, children: /* @__PURE__ */ s("div", { className: e.frame, children: [
+    /* @__PURE__ */ s("nav", { "aria-label": h.navigation, className: e.sidebar, children: [
+      /* @__PURE__ */ s(i, { href: n.href, linkComponent: c, className: e.back, children: [
+        /* @__PURE__ */ a(L, { className: e.glyph }),
+        /* @__PURE__ */ a("span", { className: e.backLabel, children: n.label })
+      ] }),
+      /* @__PURE__ */ a("div", { className: e.title, children: /* @__PURE__ */ a("span", { className: e.titleText, children: h.title }) }),
+      N.map((l) => /* @__PURE__ */ s("div", { className: e.group, children: [
+        /* @__PURE__ */ a("div", { className: e.groupLabel, children: /* @__PURE__ */ a("span", { className: e.groupLabelText, children: l.label }) }),
+        l.items.map((r) => /* @__PURE__ */ s(
+          i,
+          {
+            href: r.href,
+            linkComponent: c,
+            className: e.item,
+            current: r.active,
+            children: [
+              /* @__PURE__ */ a("span", { className: e.icon, children: r.icon }),
+              /* @__PURE__ */ a("span", { className: e.label, children: r.label })
+            ]
+          },
+          r.id
+        ))
+      ] }, l.id)),
+      t.length > 0 && /* @__PURE__ */ s("div", { className: e.group, children: [
+        /* @__PURE__ */ a("div", { className: e.groupLabel, children: /* @__PURE__ */ a("span", { className: e.groupLabelText, children: h.otherAccounts }) }),
+        t.map((l) => /* @__PURE__ */ s(i, { href: l.href, linkComponent: c, className: e.item, children: [
+          /* @__PURE__ */ a("span", { className: e.swatch, "aria-hidden": "true" }),
+          /* @__PURE__ */ a("span", { className: e.label, children: l.label })
+        ] }, l.id))
+      ] }),
+      /* @__PURE__ */ a("div", { className: e.spacer }),
+      /* @__PURE__ */ s(i, { href: o, linkComponent: c, className: `${e.item} ${e.signOut}`, children: [
+        /* @__PURE__ */ a(y, { className: e.glyph }),
+        /* @__PURE__ */ a("span", { className: e.label, children: h.signOut })
+      ] })
+    ] }),
+    /* @__PURE__ */ s("div", { className: e.column, children: [
+      /* @__PURE__ */ s("header", { className: e.header, children: [
+        /* @__PURE__ */ s("div", { className: e.headerStart, children: [
+          /* @__PURE__ */ a("span", { className: e.panelMark, children: /* @__PURE__ */ a(x, { className: e.glyph }) }),
+          /* @__PURE__ */ a("nav", { "aria-label": h.breadcrumb, children: /* @__PURE__ */ a("ol", { className: e.crumbs, children: p.map((l, r) => {
+            const b = r === p.length - 1, f = b ? e.crumbCurrent : e.crumb;
+            return /* @__PURE__ */ s("li", { className: e.crumbStep, children: [
+              r > 0 && /* @__PURE__ */ a("span", { className: e.crumbSeparator, "aria-hidden": "true", children: "›" }),
+              l.href ? /* @__PURE__ */ a(
+                i,
+                {
+                  href: l.href,
+                  linkComponent: c,
+                  className: f,
+                  current: b,
+                  children: l.label
+                }
+              ) : /* @__PURE__ */ a("span", { className: f, "aria-current": b ? "page" : void 0, children: l.label })
+            ] }, `${r}-${l.label}`);
+          }) }) })
+        ] }),
+        /* @__PURE__ */ s("div", { className: e.headerEnd, children: [
+          m.length > 0 && /* @__PURE__ */ a("span", { className: e.helpLinks, children: m.map((l) => /* @__PURE__ */ a(i, { href: l.href, linkComponent: c, className: e.helpLink, children: l.label }, l.href)) }),
+          v
+        ] })
+      ] }),
+      /* @__PURE__ */ s("main", { className: e.content, children: [
+        d && /* @__PURE__ */ s("div", { className: e.pageHead, children: [
+          /* @__PURE__ */ s("div", { className: e.pageHeadText, children: [
+            /* @__PURE__ */ a("h1", { className: e.pageTitle, children: d.title }),
+            d.description && /* @__PURE__ */ a("p", { className: e.pageDescription, children: d.description })
+          ] }),
+          d.action
+        ] }),
+        u
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  H as SettingsFrame
+};
+//# sourceMappingURL=SettingsFrame.js.map

package/dist/components/SettingsFrame/SettingsFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsFrame.js","sources":["../../../src/components/SettingsFrame/SettingsFrame.tsx"],"sourcesContent":["import type { ElementType, ReactNode } from 'react'\nimport styles from './SettingsFrame.module.css'\nimport { ArrowLeftGlyph, PanelGlyph, SignOutGlyph } from './icons'\nimport { resolveSettingsFrameLabels, type SettingsFrameLabels } from './labels'\n\n/*\n * The settings frame (B33-1529): the full-page takeover the hub and every\n * product draw their settings pages in, so somebody moving from the hub's\n * settings to a product's sees one settings area rather than two apps.\n *\n * Estate decision, 22 Oct 2026: settings live in the hub's menu and each product\n * hosts its own settings pages (boost33-voice ADR-0008). The hub's sidebar\n * carries a group per product the account has; that group's entries are pages\n * the product serves on its own origin, drawn in this same frame. So the frame\n * is rendered by several apps on several origins, and two things follow.\n *\n * ── It takes its groups as data and knows no product ────────────────────────\n *\n * Which groups exist, what they are called and where their entries go is the\n * host's decision, made from what Identity says the account has. Nothing here\n * names a product, a section or a role, and no item is active because of\n * anything the frame worked out: the host says `active`.\n *\n * ── A link to another origin is a plain full-page link ──────────────────────\n *\n * The rule is read off the href, not off a flag: an href with a scheme\n * (`https:`, `mailto:`) or protocol-relative (`//`) is rendered as a plain\n * `<a>`, and a path is rendered through `linkComponent` (ADR-0011). A product's\n * pages are not on the hub's origin, so the hub passes them as absolute URLs and\n * a router's client-side `Link` never sees them; a host's own pages are paths\n * and keep client navigation. A host that writes one of its own pages as an\n * absolute URL gets a full page load, which is slower and still correct --\n * the safe direction to be wrong in.\n *\n * ── The referent is the hub's settings chrome, not Paper ────────────────────\n *\n * The ticket's last criterion is that the hub's settings render through this\n * frame with no visible change. So the measurements are the hub's, copied from\n * boost33-hub `src/app/settings/chrome.tsx`, `ui.tsx` (`PageHead`) and the\n * `.settings-*` rules in its `globals.css`, and the comments in\n * SettingsFrame.module.css name each one. Paper page 104 is where the hub got\n * them; where the two might disagree, the hub's rendering is what this frame\n * reproduces, and the frame's fidelity gate is where a person decides otherwise.\n *\n * APPROVED at its fidelity gate on 26 Oct 2026: Jamal judged it on the\n * specimen route, captured its three designed baselines (settingsframe-hub,\n * -voice, -phone) and approved its measurements into the spec (\"SettingsFrame,\n * recorded at its gate\"). Those now bind. Static markup with no state and no\n * handlers, and no Stage B is planned: a frame of links has nothing to wire.\n */\n\n/** One entry in a sidebar group: a settings page, here or on another origin. */\nexport interface SettingsFrameItem {\n  /** A stable key for the row, unique within its group. */\n  id: string\n  /** The row's visible name. */\n  label: string\n  /**\n   * Where the row goes. A path renders through `linkComponent`; an absolute URL\n   * renders as a plain `<a>` and loads the page in full -- which is what a\n   * product's page on its own origin needs.\n   */\n  href: string\n  /**\n   * The row's glyph: a 16px square slot, inked in `currentColor`. The frame\n   * sets the colour (muted at rest, foreground when active), so draw the glyph\n   * with `stroke=\"currentColor\"` or `fill=\"currentColor\"` and it follows.\n   * Decorative -- give it `aria-hidden`; the label is the row's name.\n   */\n  icon?: ReactNode\n  /** The page being shown. Marks the row `aria-current=\"page\"`. */\n  active?: boolean\n}\n\n/** A titled run of items: \"You\", the account's name, or a product's name. */\nexport interface SettingsFrameGroup {\n  /** A stable key for the group. */\n  id: string\n  /** The small uppercase heading over the group. Hidden below 768px. */\n  label: string\n  items: SettingsFrameItem[]\n}\n\n/**\n * An account other than the one being acted in. Switching is Identity's job,\n * so `href` is normally Identity's account chooser on Identity's origin.\n */\nexport interface SettingsFrameAccount {\n  id: string\n  label: string\n  href: string\n}\n\n/** A plain labelled link: the back link, or a help link in the header. */\nexport interface SettingsFrameLink {\n  label: string\n  href: string\n}\n\n/** One step of the breadcrumb. The last one is the page being shown. */\nexport interface SettingsFrameCrumb {\n  label: string\n  /** Optional. A crumb with no href is text, which is how the hub draws both. */\n  href?: string\n}\n\n/** The page's heading block, across the top of the content column. */\nexport interface SettingsFrameHeading {\n  title: string\n  description?: string\n  /** The page's primary action, level with the title rather than below it. */\n  action?: ReactNode\n}\n\nexport interface SettingsFrameProps {\n  /** The link out of settings, at the head of the sidebar. */\n  back: SettingsFrameLink\n  /** The sidebar's groups, in order. The frame renders exactly these. */\n  groups: SettingsFrameGroup[]\n  /** Accounts other than the acting one. The list is omitted when empty. */\n  otherAccounts?: SettingsFrameAccount[]\n  /**\n   * Where \"Sign out\" goes. Sign-out belongs to Identity, which owns the\n   * session; a host that dropped its own cookie would have revoked nothing. So\n   * this is a link to Identity, never a handler.\n   */\n  signOutHref: string\n  /** The header's help links (the hub's \"Feedback\" and \"Docs\"). Hidden below 768px. */\n  helpLinks?: SettingsFrameLink[]\n  /** The header's trail, ending at the page being shown. */\n  breadcrumb: SettingsFrameCrumb[]\n  /** The page heading, drawn above `children`. Omit it and the content starts at the top. */\n  heading?: SettingsFrameHeading\n  /** The header's trailing slot: the host's account menu. */\n  accountMenu?: ReactNode\n  /** The page itself. */\n  children?: ReactNode\n  /** The frame's own words. Partial; missing fields fall back to English. */\n  labels?: Partial<SettingsFrameLabels>\n  /**\n   * The element a same-origin link renders as (ADR-0011). Defaults to `'a'`.\n   * Only consulted for paths: an absolute URL is always a plain `<a>`.\n   */\n  linkComponent?: ElementType\n}\n\n// A scheme (`https:`, `mailto:`) or protocol-relative `//`. Anything else is a\n// path on the host's own origin.\nconst OTHER_ORIGIN = /^(?:[a-z][a-z\\d+.-]*:|\\/\\/)/i\n\nfunction FrameLink({\n  href,\n  linkComponent,\n  className,\n  current,\n  children,\n}: {\n  href: string\n  linkComponent: ElementType\n  className?: string\n  current?: boolean\n  children: ReactNode\n}) {\n  const Link: ElementType = OTHER_ORIGIN.test(href) ? 'a' : linkComponent\n  return (\n    <Link href={href} className={className} aria-current={current ? 'page' : undefined}>\n      {children}\n    </Link>\n  )\n}\n\nexport function SettingsFrame({\n  back,\n  groups,\n  otherAccounts = [],\n  signOutHref,\n  helpLinks = [],\n  breadcrumb,\n  heading,\n  accountMenu,\n  children,\n  labels,\n  linkComponent = 'a',\n}: SettingsFrameProps) {\n  const text = resolveSettingsFrameLabels(labels)\n\n  return (\n    <div className={styles.root}>\n      <div className={styles.frame}>\n        <nav aria-label={text.navigation} className={styles.sidebar}>\n          <FrameLink href={back.href} linkComponent={linkComponent} className={styles.back}>\n            <ArrowLeftGlyph className={styles.glyph} />\n            <span className={styles.backLabel}>{back.label}</span>\n          </FrameLink>\n\n          <div className={styles.title}>\n            <span className={styles.titleText}>{text.title}</span>\n          </div>\n\n          {groups.map((group) => (\n            <div key={group.id} className={styles.group}>\n              <div className={styles.groupLabel}>\n                <span className={styles.groupLabelText}>{group.label}</span>\n              </div>\n              {group.items.map((item) => (\n                <FrameLink\n                  key={item.id}\n                  href={item.href}\n                  linkComponent={linkComponent}\n                  className={styles.item}\n                  current={item.active}\n                >\n                  <span className={styles.icon}>{item.icon}</span>\n                  <span className={styles.label}>{item.label}</span>\n                </FrameLink>\n              ))}\n            </div>\n          ))}\n\n          {otherAccounts.length > 0 && (\n            <div className={styles.group}>\n              <div className={styles.groupLabel}>\n                <span className={styles.groupLabelText}>{text.otherAccounts}</span>\n              </div>\n              {otherAccounts.map((account) => (\n                <FrameLink key={account.id} href={account.href} linkComponent={linkComponent} className={styles.item}>\n                  <span className={styles.swatch} aria-hidden=\"true\" />\n                  <span className={styles.label}>{account.label}</span>\n                </FrameLink>\n              ))}\n            </div>\n          )}\n\n          <div className={styles.spacer} />\n\n          <FrameLink href={signOutHref} linkComponent={linkComponent} className={`${styles.item} ${styles.signOut}`}>\n            <SignOutGlyph className={styles.glyph} />\n            <span className={styles.label}>{text.signOut}</span>\n          </FrameLink>\n        </nav>\n\n        <div className={styles.column}>\n          <header className={styles.header}>\n            <div className={styles.headerStart}>\n              <span className={styles.panelMark}>\n                <PanelGlyph className={styles.glyph} />\n              </span>\n              <nav aria-label={text.breadcrumb}>\n                <ol className={styles.crumbs}>\n                  {breadcrumb.map((crumb, index) => {\n                    const last = index === breadcrumb.length - 1\n                    const className = last ? styles.crumbCurrent : styles.crumb\n                    return (\n                      <li key={`${index}-${crumb.label}`} className={styles.crumbStep}>\n                        {index > 0 && (\n                          <span className={styles.crumbSeparator} aria-hidden=\"true\">\n                            ›\n                          </span>\n                        )}\n                        {crumb.href ? (\n                          <FrameLink\n                            href={crumb.href}\n                            linkComponent={linkComponent}\n                            className={className}\n                            current={last}\n                          >\n                            {crumb.label}\n                          </FrameLink>\n                        ) : (\n                          <span className={className} aria-current={last ? 'page' : undefined}>\n                            {crumb.label}\n                          </span>\n                        )}\n                      </li>\n                    )\n                  })}\n                </ol>\n              </nav>\n            </div>\n\n            <div className={styles.headerEnd}>\n              {helpLinks.length > 0 && (\n                <span className={styles.helpLinks}>\n                  {helpLinks.map((link) => (\n                    <FrameLink key={link.href} href={link.href} linkComponent={linkComponent} className={styles.helpLink}>\n                      {link.label}\n                    </FrameLink>\n                  ))}\n                </span>\n              )}\n              {accountMenu}\n            </div>\n          </header>\n\n          <main className={styles.content}>\n            {heading && (\n              <div className={styles.pageHead}>\n                <div className={styles.pageHeadText}>\n                  <h1 className={styles.pageTitle}>{heading.title}</h1>\n                  {heading.description && <p className={styles.pageDescription}>{heading.description}</p>}\n                </div>\n                {heading.action}\n              </div>\n            )}\n            {children}\n          </main>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["OTHER_ORIGIN","FrameLink","href","linkComponent","className","current","children","Link","jsx","SettingsFrame","back","groups","otherAccounts","signOutHref","helpLinks","breadcrumb","heading","accountMenu","labels","text","resolveSettingsFrameLabels","styles","jsxs","ArrowLeftGlyph","group","item","account","SignOutGlyph","PanelGlyph","crumb","index","last","link"],"mappings":"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"}

package/dist/components/SettingsFrame/SettingsFrame.module.css.js

@@ -0,0 +1,74 @@
+const a = "_root_1y1aa_41", e = "_frame_1y1aa_47", _ = "_sidebar_1y1aa_59", t = "_back_1y1aa_76", c = "_backLabel_1y1aa_84", n = "_glyph_1y1aa_91", r = "_title_1y1aa_99", o = "_titleText_1y1aa_103", s = "_group_1y1aa_112", p = "_groupLabel_1y1aa_124", l = "_groupLabelText_1y1aa_128", y = "_item_1y1aa_140", b = "_icon_1y1aa_157", u = "_label_1y1aa_171", i = "_swatch_1y1aa_186", g = "_spacer_1y1aa_195", m = "_signOut_1y1aa_201", d = "_column_1y1aa_207", h = "_header_1y1aa_216", k = "_headerStart_1y1aa_227", L = "_panelMark_1y1aa_237", T = "_crumbs_1y1aa_244", x = "_crumbStep_1y1aa_255", S = "_crumb_1y1aa_244", H = "_crumbSeparator_1y1aa_266", f = "_crumbCurrent_1y1aa_270", w = "_headerEnd_1y1aa_276", C = "_helpLinks_1y1aa_282", D = "_helpLink_1y1aa_282", E = "_content_1y1aa_298", M = "_pageHead_1y1aa_307", O = "_pageHeadText_1y1aa_318", j = "_pageTitle_1y1aa_325", q = "_pageDescription_1y1aa_335", v = {
+  root: a,
+  frame: e,
+  sidebar: _,
+  back: t,
+  backLabel: c,
+  glyph: n,
+  title: r,
+  titleText: o,
+  group: s,
+  groupLabel: p,
+  groupLabelText: l,
+  item: y,
+  icon: b,
+  label: u,
+  swatch: i,
+  spacer: g,
+  signOut: m,
+  column: d,
+  header: h,
+  headerStart: k,
+  panelMark: L,
+  crumbs: T,
+  crumbStep: x,
+  crumb: S,
+  crumbSeparator: H,
+  crumbCurrent: f,
+  headerEnd: w,
+  helpLinks: C,
+  helpLink: D,
+  content: E,
+  pageHead: M,
+  pageHeadText: O,
+  pageTitle: j,
+  pageDescription: q
+};
+export {
+  t as back,
+  c as backLabel,
+  d as column,
+  E as content,
+  S as crumb,
+  f as crumbCurrent,
+  H as crumbSeparator,
+  x as crumbStep,
+  T as crumbs,
+  v as default,
+  e as frame,
+  n as glyph,
+  s as group,
+  p as groupLabel,
+  l as groupLabelText,
+  h as header,
+  w as headerEnd,
+  k as headerStart,
+  D as helpLink,
+  C as helpLinks,
+  b as icon,
+  y as item,
+  u as label,
+  q as pageDescription,
+  M as pageHead,
+  O as pageHeadText,
+  j as pageTitle,
+  L as panelMark,
+  a as root,
+  _ as sidebar,
+  m as signOut,
+  g as spacer,
+  i as swatch,
+  r as title,
+  o as titleText
+};
+//# sourceMappingURL=SettingsFrame.module.css.js.map

package/dist/components/SettingsFrame/SettingsFrame.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsFrame.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/SettingsFrame/icons.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+export declare function ArrowLeftGlyph({ className }: {
+    className?: string;
+}): ReactElement;
+export declare function SignOutGlyph({ className }: {
+    className?: string;
+}): ReactElement;
+export declare function PanelGlyph({ className }: {
+    className?: string;
+}): ReactElement;

package/dist/components/SettingsFrame/icons.js

@@ -0,0 +1,37 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+const h = {
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": !0
+};
+function e({ className: r }) {
+  return /* @__PURE__ */ n("svg", { className: r, ...h, children: [
+    /* @__PURE__ */ t("path", { d: "M5 12l14 0" }),
+    /* @__PURE__ */ t("path", { d: "M5 12l6 6" }),
+    /* @__PURE__ */ t("path", { d: "M5 12l6 -6" })
+  ] });
+}
+function o({ className: r }) {
+  return /* @__PURE__ */ n("svg", { className: r, ...h, children: [
+    /* @__PURE__ */ t("path", { d: "M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" }),
+    /* @__PURE__ */ t("path", { d: "M9 12h12l-3 -3" }),
+    /* @__PURE__ */ t("path", { d: "M18 15l3 -3" })
+  ] });
+}
+function d({ className: r }) {
+  return /* @__PURE__ */ n("svg", { className: r, ...h, children: [
+    /* @__PURE__ */ t("path", { d: "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" }),
+    /* @__PURE__ */ t("path", { d: "M9 4v16" }),
+    /* @__PURE__ */ t("path", { d: "M15 10l-2 2l2 2" })
+  ] });
+}
+export {
+  e as ArrowLeftGlyph,
+  d as PanelGlyph,
+  o as SignOutGlyph
+};
+//# sourceMappingURL=icons.js.map

package/dist/components/SettingsFrame/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sources":["../../../src/components/SettingsFrame/icons.tsx"],"sourcesContent":["// The settings frame's own three glyphs: the back arrow, the sign-out door and\n// the header's panel mark. Drawn in `currentColor` so the element around each\n// one carries its ink -- the same arrangement as AccountMenu/icons.tsx and\n// AppSwitcher/icons.tsx, and what keeps the no-hardcoded-hex guard satisfied.\n//\n// All three are decorative. The back link and the sign-out link each carry a\n// visible name beside the glyph, and the panel mark has no behaviour at all (see\n// `.panelMark` in SettingsFrame.module.css). Hence `aria-hidden` on each.\n//\n// The path data is copied verbatim from the hub's `src/lib/icons.tsx`\n// (`arrowLeft`, `signOut`, `panel`), which copied it from Paper pages 103 and\n// 104. The hub's settings chrome is this frame's referent, so the hub's paths\n// are the ones reproduced -- not a lookalike from Tabler's current release.\n//\n// A host's sidebar glyphs are NOT here. Which picture labels \"Billing\" or\n// \"Call routing\" is the host's knowledge, and a frame that held a glyph per\n// settings page would have to learn what every product's pages are. Items take\n// `icon` as a ReactNode instead -- see `SettingsFrameItem`.\n\nimport type { ReactElement } from 'react'\n\nconst COMMON = {\n  viewBox: '0 0 24 24',\n  fill: 'none',\n  stroke: 'currentColor',\n  strokeWidth: '2',\n  strokeLinecap: 'round',\n  strokeLinejoin: 'round',\n  'aria-hidden': true,\n} as const\n\nexport function ArrowLeftGlyph({ className }: { className?: string }): ReactElement {\n  return (\n    <svg className={className} {...COMMON}>\n      <path d=\"M5 12l14 0\" />\n      <path d=\"M5 12l6 6\" />\n      <path d=\"M5 12l6 -6\" />\n    </svg>\n  )\n}\n\nexport function SignOutGlyph({ className }: { className?: string }): ReactElement {\n  return (\n    <svg className={className} {...COMMON}>\n      <path d=\"M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2\" />\n      <path d=\"M9 12h12l-3 -3\" />\n      <path d=\"M18 15l3 -3\" />\n    </svg>\n  )\n}\n\nexport function PanelGlyph({ className }: { className?: string }): ReactElement {\n  return (\n    <svg className={className} {...COMMON}>\n      <path d=\"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\" />\n      <path d=\"M9 4v16\" />\n      <path d=\"M15 10l-2 2l2 2\" />\n    </svg>\n  )\n}\n"],"names":["COMMON","ArrowLeftGlyph","className","jsxs","jsx","SignOutGlyph","PanelGlyph"],"mappings":";AAqBA,MAAMA,IAAS;AAAA,EACb,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,eAAe;AACjB;AAEO,SAASC,EAAe,EAAE,WAAAC,KAAmD;AAClF,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAAD,GAAuB,GAAGF,GAC7B,UAAA;AAAA,IAAA,gBAAAI,EAAC,QAAA,EAAK,GAAE,aAAA,CAAa;AAAA,IACrB,gBAAAA,EAAC,QAAA,EAAK,GAAE,YAAA,CAAY;AAAA,IACpB,gBAAAA,EAAC,QAAA,EAAK,GAAE,aAAA,CAAa;AAAA,EAAA,GACvB;AAEJ;AAEO,SAASC,EAAa,EAAE,WAAAH,KAAmD;AAChF,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAAD,GAAuB,GAAGF,GAC7B,UAAA;AAAA,IAAA,gBAAAI,EAAC,QAAA,EAAK,GAAE,kFAAA,CAAkF;AAAA,IAC1F,gBAAAA,EAAC,QAAA,EAAK,GAAE,iBAAA,CAAiB;AAAA,IACzB,gBAAAA,EAAC,QAAA,EAAK,GAAE,cAAA,CAAc;AAAA,EAAA,GACxB;AAEJ;AAEO,SAASE,EAAW,EAAE,WAAAJ,KAAmD;AAC9E,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAAD,GAAuB,GAAGF,GAC7B,UAAA;AAAA,IAAA,gBAAAI,EAAC,QAAA,EAAK,GAAE,kFAAA,CAAkF;AAAA,IAC1F,gBAAAA,EAAC,QAAA,EAAK,GAAE,UAAA,CAAU;AAAA,IAClB,gBAAAA,EAAC,QAAA,EAAK,GAAE,kBAAA,CAAkB;AAAA,EAAA,GAC5B;AAEJ;"}

package/dist/components/SettingsFrame/labels.d.ts

@@ -0,0 +1,36 @@
+/** Every user-facing string the settings frame renders that is not host data. */
+export interface SettingsFrameLabels {
+    /** The visible title at the head of the sidebar. Default "Settings". */
+    title: string;
+    /**
+     * The sidebar's landmark name. A `<nav>` is announced by its name, and a page
+     * with two navs (this one and the breadcrumb) needs both named or a screen
+     * reader lists "navigation" twice. Default "Settings", matching the hub.
+     */
+    navigation: string;
+    /** The heading over the other-accounts list. Default "Other accounts". */
+    otherAccounts: string;
+    /** The sign-out link. Default "Sign out". */
+    signOut: string;
+    /** The breadcrumb's landmark name. Default "Breadcrumb". */
+    breadcrumb: string;
+}
+/**
+ * The English defaults. A consumer that passes nothing renders English.
+ *
+ * Frozen because it is a public export reaching four products on a version bump;
+ * see AccountMenu/labels.ts for why the freeze carries no type annotation.
+ */
+export declare const defaultSettingsFrameLabels: Readonly<{
+    title: string;
+    navigation: string;
+    otherAccounts: string;
+    signOut: string;
+    breadcrumb: string;
+}>;
+/**
+ * Merge a consumer's partial `labels` onto the English defaults, treating an
+ * explicitly-`undefined` field as unsupplied -- the resolution every other
+ * labels module here performs (B33-873).
+ */
+export declare function resolveSettingsFrameLabels(labels?: Partial<SettingsFrameLabels>): SettingsFrameLabels;

package/dist/components/SettingsFrame/labels.js

@@ -0,0 +1,18 @@
+const r = Object.freeze({
+  title: "Settings",
+  navigation: "Settings",
+  otherAccounts: "Other accounts",
+  signOut: "Sign out",
+  breadcrumb: "Breadcrumb"
+});
+function i(e) {
+  const t = Object.fromEntries(
+    Object.entries(e ?? {}).filter(([, n]) => n !== void 0)
+  );
+  return { ...r, ...t };
+}
+export {
+  r as defaultSettingsFrameLabels,
+  i as resolveSettingsFrameLabels
+};
+//# sourceMappingURL=labels.js.map

package/dist/components/SettingsFrame/labels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"labels.js","sources":["../../../src/components/SettingsFrame/labels.ts"],"sourcesContent":["// The settings frame's own user-facing words.\n//\n// Everything else a person reads in the frame is data the host supplies and so\n// translates by construction: the back link's label, every group's label, every\n// item's label, the other accounts' names, the help links, the breadcrumb and\n// the page heading. Those are the host's because they differ per host -- the hub\n// says \"Back to the hub\" and a product says something else, and which groups\n// exist is the whole point of taking groups as data (B33-1529). What is left is\n// what is the same in every host: the sidebar's title and landmark name, the\n// heading over the other accounts, the sign-out link and the breadcrumb's\n// landmark name.\n//\n// It takes the label contract AccountMenu, NotificationCenter and the chip use,\n// in full, on day one:\n//\n//   * `labels` is `Partial<SettingsFrameLabels>`, so a later field costs no\n//     consumer a typecheck (CLAUDE.md, \"Versioning\");\n//   * `resolveSettingsFrameLabels` filters explicitly-`undefined` fields before\n//     merging, so a missed next-intl key falls back to English instead of\n//     unnaming a landmark (B33-873);\n//   * `defaultSettingsFrameLabels` is `Object.freeze({ ... } satisfies ...)`\n//     with no type annotation, so the freeze survives into the emitted `.d.ts`\n//     (B33-877, B33-916).\n//\n// No label carries a value, so none of the chip's `%placeholder%` machinery is\n// reproduced. If one arrives, it arrives delimited `%name%`, never `{name}`\n// (B33-1277; the reasoning is in `src/fill-template.ts`).\n\n/** Every user-facing string the settings frame renders that is not host data. */\nexport interface SettingsFrameLabels {\n  /** The visible title at the head of the sidebar. Default \"Settings\". */\n  title: string\n  /**\n   * The sidebar's landmark name. A `<nav>` is announced by its name, and a page\n   * with two navs (this one and the breadcrumb) needs both named or a screen\n   * reader lists \"navigation\" twice. Default \"Settings\", matching the hub.\n   */\n  navigation: string\n  /** The heading over the other-accounts list. Default \"Other accounts\". */\n  otherAccounts: string\n  /** The sign-out link. Default \"Sign out\". */\n  signOut: string\n  /** The breadcrumb's landmark name. Default \"Breadcrumb\". */\n  breadcrumb: string\n}\n\n/**\n * The English defaults. A consumer that passes nothing renders English.\n *\n * Frozen because it is a public export reaching four products on a version bump;\n * see AccountMenu/labels.ts for why the freeze carries no type annotation.\n */\nexport const defaultSettingsFrameLabels = Object.freeze({\n  title: 'Settings',\n  navigation: 'Settings',\n  otherAccounts: 'Other accounts',\n  signOut: 'Sign out',\n  breadcrumb: 'Breadcrumb',\n} satisfies SettingsFrameLabels)\n\n/**\n * Merge a consumer's partial `labels` onto the English defaults, treating an\n * explicitly-`undefined` field as unsupplied -- the resolution every other\n * labels module here performs (B33-873).\n */\nexport function resolveSettingsFrameLabels(labels?: Partial<SettingsFrameLabels>): SettingsFrameLabels {\n  const supplied = Object.fromEntries(\n    Object.entries(labels ?? {}).filter(([, value]) => value !== undefined),\n  ) as Partial<SettingsFrameLabels>\n  return { ...defaultSettingsFrameLabels, ...supplied }\n}\n"],"names":["defaultSettingsFrameLabels","resolveSettingsFrameLabels","labels","supplied","value"],"mappings":"AAoDO,MAAMA,IAA6B,OAAO,OAAO;AAAA,EACtD,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,SAAS;AAAA,EACT,YAAY;AACd,CAA+B;AAOxB,SAASC,EAA2BC,GAA4D;AACrG,QAAMC,IAAW,OAAO;AAAA,IACtB,OAAO,QAAQD,KAAU,EAAE,EAAE,OAAO,CAAC,CAAA,EAAGE,CAAK,MAAMA,MAAU,MAAS;AAAA,EAAA;AAExE,SAAO,EAAE,GAAGJ,GAA4B,GAAGG,EAAA;AAC7C;"}

package/dist/index.d.ts

@@ -24,11 +24,28 @@ export { AppSwitcher } from './components/AppSwitcher/AppSwitcher';
 export type { AppSwitcherProps, AppSwitcherProduct, AppSwitcherHub, AppSwitcherAccount, } from './components/AppSwitcher/AppSwitcher';
 export { defaultAppSwitcherLabels } from './components/AppSwitcher/labels';
 export type { AppSwitcherLabels } from './components/AppSwitcher/labels';
+export { NotificationCenter } from './components/NotificationCenter/NotificationCenter';
+export type { NotificationCenterProps, NotificationCenterItem, } from './components/NotificationCenter/NotificationCenter';
+export { defaultNotificationCenterLabels } from './components/NotificationCenter/labels';
+export type { NotificationCenterLabels } from './components/NotificationCenter/labels';
+export { AccountMenu } from './components/AccountMenu/AccountMenu';
+export type { AccountMenuProps, AccountMenuPerson, AccountMenuOrg, AccountMenuGroup, AccountMenuItem, } from './components/AccountMenu/AccountMenu';
+export { defaultAccountMenuLabels } from './components/AccountMenu/labels';
+export type { AccountMenuLabels } from './components/AccountMenu/labels';
+export type { AccountMenuIcon } from './components/AccountMenu/icons';
+export { CommandPalette } from './components/CommandPalette/CommandPalette';
+export type { CommandPaletteProps, CommandPaletteGroup, CommandPaletteResult, } from './components/CommandPalette/CommandPalette';
+export { defaultCommandPaletteLabels } from './components/CommandPalette/labels';
+export type { CommandPaletteLabels } from './components/CommandPalette/labels';
 export { DotMatrixLoader } from './components/DotMatrixLoader/DotMatrixLoader';
 export type { DotMatrixLoaderProps } from './components/DotMatrixLoader/DotMatrixLoader';
 export { LaunchLoader } from './components/LaunchLoader/LaunchLoader';
 export type { LaunchLoaderProps } from './components/LaunchLoader/LaunchLoader';
 export { launchBackdropCss } from './launch-gradient';
 export type { LaunchGradientStops } from './launch-gradient';
+export { SettingsFrame } from './components/SettingsFrame/SettingsFrame';
+export type { SettingsFrameProps, SettingsFrameGroup, SettingsFrameItem, SettingsFrameAccount, SettingsFrameLink, SettingsFrameCrumb, SettingsFrameHeading, } from './components/SettingsFrame/SettingsFrame';
+export { defaultSettingsFrameLabels } from './components/SettingsFrame/labels';
+export type { SettingsFrameLabels } from './components/SettingsFrame/labels';
 export { checkNavHeightBudget, navContentHeight, navBudgetForViewport } from './nav-height-budget';
 export type { NavHeightBudget, NavRowCosts, NavSectionShape } from './nav-height-budget';