@boost33/ui 0.5.1 → 0.7.0

package/dist/components/NotificationCenter/icons.js

@@ -0,0 +1,45 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import t from "./NotificationCenter.module.css.js";
+function i() {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      className: t.emptyGlyph,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.2",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ r("path", { d: "M8 2.5C6 2.5 4.6 4 4.6 6V8.3C4.6 8.9 4.4 9.4 4 9.8L3.3 10.6C3 10.9 3.2 11.5 3.7 11.5H12.3C12.8 11.5 13 10.9 12.7 10.6L12 9.8C11.6 9.4 11.4 8.9 11.4 8.3V6C11.4 4 10 2.5 8 2.5Z" }),
+        /* @__PURE__ */ r("path", { d: "M6.5 13C6.8 13.5 7.4 13.8 8 13.8C8.6 13.8 9.2 13.5 9.5 13", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+function a({ size: o }) {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      className: t.sourceMark,
+      width: o,
+      height: o,
+      viewBox: "0 0 40 40",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ r("rect", { className: t.sourceMarkGround, width: "40", height: "40" }),
+        /* @__PURE__ */ e("g", { transform: "translate(10 10) scale(1.25)", fill: "none", stroke: "currentColor", strokeWidth: "1.3", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ r("path", { d: "M8 2.5C6 2.5 4.6 4 4.6 6V8.3C4.6 8.9 4.4 9.4 4 9.8L3.3 10.6C3 10.9 3.2 11.5 3.7 11.5H12.3C12.8 11.5 13 10.9 12.7 10.6L12 9.8C11.6 9.4 11.4 8.9 11.4 8.3V6C11.4 4 10 2.5 8 2.5Z" }),
+          /* @__PURE__ */ r("path", { d: "M6.5 13C6.8 13.5 7.4 13.8 8 13.8C8.6 13.8 9.2 13.5 9.5 13", strokeLinecap: "round" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  i as EmptyBell,
+  a as SourceBellMark
+};
+//# sourceMappingURL=icons.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sources":["../../../src/components/NotificationCenter/icons.tsx"],"sourcesContent":["// The notification centre's own glyphs. Both are bells, and they are two\n// drawings rather than one because they are drawn at two sizes on two grounds:\n// one is white ink inside a 22px dark tile, the other is a 28px outline standing\n// alone on the panel's surface. Everything else the panel draws is either\n// ProductMark's or plain text.\n\nimport styles from './NotificationCenter.module.css'\n\n/**\n * The bell on the empty state, standing alone above \"You're all caught up\".\n *\n * Decorative: the two lines beneath it say the same thing in words, so a screen\n * reader that announced it as well would say the state twice. It is sized in CSS\n * (`--spacing-7`) rather than by width/height attributes, which is why it takes\n * no size prop.\n */\nexport function EmptyBell() {\n  return (\n    <svg\n      className={styles.emptyGlyph}\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.2\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M8 2.5C6 2.5 4.6 4 4.6 6V8.3C4.6 8.9 4.4 9.4 4 9.8L3.3 10.6C3 10.9 3.2 11.5 3.7 11.5H12.3C12.8 11.5 13 10.9 12.7 10.6L12 9.8C11.6 9.4 11.4 8.9 11.4 8.3V6C11.4 4 10 2.5 8 2.5Z\" />\n      <path d=\"M6.5 13C6.8 13.5 7.4 13.8 8 13.8C8.6 13.8 9.2 13.5 9.5 13\" strokeLinecap=\"round\" />\n    </svg>\n  )\n}\n\n/**\n * The tile a row draws when its notification names no product -- an account or\n * security event, which is what the drawing's fifth row is.\n *\n * **Why this is not a `ProductMark` with an unknown slug.** It would draw the\n * right thing by accident: ADR-0003's safe degrade gives an unrecognised slug\n * the bare tile with no glyph, which is a product whose artwork has not landed.\n * A notification with no product is not that. It is a row that correctly has no\n * product, and drawing it as a gap says the mark failed to load. So the fallback\n * is a bell -- the panel's own symbol, which is what the drawing puts there.\n *\n * It is still drawn ProductMark's way rather than as a styled `div`: a `rect` on\n * a 40-unit grid, its corner taken from `--radius-product-tile`, so the two\n * kinds of tile in the same column share one corner at every size instead of\n * agreeing to a px value that only matches at 22px. The glyph is on the same\n * 16-unit grid as `EmptyBell` above and the group transform insets it into the\n * middle 20 of the 40, which is the inset ProductMark gives its four -- so the\n * bell's ink lands at the weight the product glyphs do (1.3 on the 16 grid,\n * scaled 1.25, is 0.89px of stroke at 22px, which is what Paper draws).\n *\n * Decorative like ProductMark is here: the row's text names the source.\n */\nexport function SourceBellMark({ size }: { size: number }) {\n  return (\n    <svg\n      className={styles.sourceMark}\n      width={size}\n      height={size}\n      viewBox=\"0 0 40 40\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      <rect className={styles.sourceMarkGround} width=\"40\" height=\"40\" />\n      <g transform=\"translate(10 10) scale(1.25)\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.3\" strokeLinejoin=\"round\">\n        <path d=\"M8 2.5C6 2.5 4.6 4 4.6 6V8.3C4.6 8.9 4.4 9.4 4 9.8L3.3 10.6C3 10.9 3.2 11.5 3.7 11.5H12.3C12.8 11.5 13 10.9 12.7 10.6L12 9.8C11.6 9.4 11.4 8.9 11.4 8.3V6C11.4 4 10 2.5 8 2.5Z\" />\n        <path d=\"M6.5 13C6.8 13.5 7.4 13.8 8 13.8C8.6 13.8 9.2 13.5 9.5 13\" strokeLinecap=\"round\" />\n      </g>\n    </svg>\n  )\n}\n"],"names":["EmptyBell","jsxs","styles","jsx","SourceBellMark","size"],"mappings":";;AAgBO,SAASA,IAAY;AAC1B,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAO;AAAA,MAClB,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,gBAAe;AAAA,MACf,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,iLAAA,CAAiL;AAAA,QACzL,gBAAAA,EAAC,QAAA,EAAK,GAAE,6DAA4D,eAAc,QAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhG;AAwBO,SAASC,EAAe,EAAE,MAAAC,KAA0B;AACzD,SACE,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAO;AAAA,MAClB,OAAOG;AAAA,MACP,QAAQA;AAAA,MACR,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAF,EAAC,UAAK,WAAWD,EAAO,kBAAkB,OAAM,MAAK,QAAO,MAAK;AAAA,QACjE,gBAAAD,EAAC,KAAA,EAAE,WAAU,gCAA+B,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,gBAAe,SAC7G,UAAA;AAAA,UAAA,gBAAAE,EAAC,QAAA,EAAK,GAAE,iLAAA,CAAiL;AAAA,UACzL,gBAAAA,EAAC,QAAA,EAAK,GAAE,6DAA4D,eAAc,QAAA,CAAQ;AAAA,QAAA,EAAA,CAC5F;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/NotificationCenter/labels.js

@@ -0,0 +1,26 @@
+import { fillTemplate as r } from "../../fill-template.js";
+const l = Object.freeze({
+  title: "Notifications",
+  markAllAsRead: "Mark all as read",
+  all: "All",
+  unread: "Unread",
+  unreadItem: "Unread",
+  meta: "%source% · %time%",
+  viewAll: "View all notifications",
+  emptyTitle: "You're all caught up",
+  emptyBody: "Nothing from any product needs your attention."
+});
+function s(a) {
+  const i = Object.fromEntries(
+    Object.entries(a ?? {}).filter(([, e]) => e !== void 0)
+  ), t = { ...l, ...i };
+  return {
+    ...t,
+    meta: (e, o) => r(t.meta, { source: e, time: o })
+  };
+}
+export {
+  l as defaultNotificationCenterLabels,
+  s as resolveNotificationCenterLabels
+};
+//# sourceMappingURL=labels.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"labels.js","sources":["../../../src/components/NotificationCenter/labels.ts"],"sourcesContent":["// The notification centre's own user-facing words, each a field with an English\n// default. Every string a person can read or a screen reader can announce that\n// is not row data lives here, so the first two consumers -- both French-default\n// -- translate the panel without this package taking an i18n dependency\n// (CLAUDE.md; B33-849). The notifications themselves are not here: their title,\n// their source and their time are the host's data, supplied per row on `items`,\n// because the host is the only side that knows what happened (B33-494's data\n// decision, 2026-10-06).\n//\n// ── Which label contract this follows, and why it is not a fourth one ────────\n//\n// This is `WalletChipLabels`'s contract, in all four of its parts, and the\n// choice is deliberate. B33-1007 found `AppSwitcherLabels` claiming parity with\n// the chip while diverging from it three ways; two were closed by B33-919 and\n// the third -- the freeze -- is still open. Picking the chip means the third\n// labels module in this package lands on the shape the other two are converging\n// *to*, so B33-1007 closes by making the switcher match this file rather than by\n// this file becoming a fourth thing to reconcile. The four parts:\n//\n//   1. `labels` is a `Partial`, so a consumer translates the strings it wants\n//      and inherits the rest -- and so adding a field here later is not a\n//      compile error in four apps on a patch bump.\n//   2. A `resolve*` step filters explicitly-`undefined` fields before merging,\n//      because a next-intl `t('...')` returns `undefined` on a missed key and a\n//      plain spread copies that `undefined` across (B33-873).\n//   3. The defaults are `Object.freeze({ … } satisfies …)` with NO type\n//      annotation. That is the spelling B33-916 settled for the chip: the\n//      annotation widens `Readonly<T>` straight back to the mutable interface,\n//      so a consumer writing to the frozen export gets no compile error and an\n//      uncaught TypeError in production instead.\n//   4. The one string that carries values is a `%placeholder%` template -- never\n//      fragments concatenated in the render, because word order is not a property\n//      of English. The delimiter is `%name%` and not `{name}` because a brace is\n//      ICU argument syntax and a consumer keeps these strings in an ICU catalogue\n//      (B33-1277); the reasoning is in `src/fill-template.ts`.\n//\n// A template, and *only* a template. `meta` took a function of the same values\n// until B33-1278, which is the shape B33-880 had already recorded as unpassable:\n// React's Flight serializer throws on any function it finds in a Client\n// Component's props, so a labels object holding one cannot be passed from a\n// Server Component page -- which is what a host page is by default. The union was\n// type-legal and fatal in production, and nothing in the type said so. A meta line\n// needing logic a template cannot express is computed in the host's own catalogue\n// and passed here finished.\n\nimport { fillTemplate } from '../../fill-template'\n\n/** Every user-facing string the notification centre renders that is not row data. */\nexport interface NotificationCenterLabels {\n  /**\n   * The panel's heading, and through it the panel's accessible name. Default\n   * \"Notifications\".\n   *\n   * It is drawn as a real heading and the panel is pointed at it with\n   * `aria-labelledby`, rather than carrying a second copy of the same word in an\n   * `aria-label`. ADR-0010 says a disclosure panel carries no widget role and\n   * takes a name without one; it does not say the name has to be invisible, and\n   * a name that is already on the screen is one fewer string to translate and\n   * one fewer place for the two to disagree.\n   */\n  title: string\n  /**\n   * The header's action, which clears every unread marker. Default\n   * \"Mark all as read\".\n   *\n   * Stage A renders the control and wires nothing to it -- the handler is Stage\n   * B's, with the rest of the interaction (CLAUDE.md, \"Presentational-first\").\n   */\n  markAllAsRead: string\n  /** The first filter tab, showing every notification. Default \"All\". */\n  all: string\n  /**\n   * The second filter tab, showing only the unread ones. Default \"Unread\".\n   *\n   * The count beside it is not a label: it is `items` counted, so it needs no\n   * translation and cannot disagree with the list under it.\n   */\n  unread: string\n  /**\n   * The marker on an unread row, announced rather than drawn. Default \"Unread\".\n   *\n   * The drawing carries unread as a 6px orange dot and nothing else, which is a\n   * colour-only distinction and reaches nobody using a screen reader. This is\n   * the same state in words, in the row, visually hidden (CLAUDE.md,\n   * \"Accessibility is part of done\"). It repeats `unread` by default because it\n   * is the same English word, and it is a separate field because a locale is\n   * entitled to tag a row differently from how it names a filter.\n   */\n  unreadItem: string\n  /**\n   * The second line of a row, around the host's source and time. Supplied whole\n   * so the consumer owns word order and the separator.\n   *\n   * Placeholders: `%source%`, `%time%`. Default (en) `%source% · %time%`.\n   *\n   * Both values are the host's, preformatted -- see `NotificationCenterItem`\n   * for why the time arrives as a string this package never computes.\n   */\n  meta: string\n  /** The footer link out to the full list. Default \"View all notifications\". */\n  viewAll: string\n  /** The empty state's headline. Default \"You're all caught up\". */\n  emptyTitle: string\n  /**\n   * The line under the empty state's headline. Default\n   * \"Nothing from any product needs your attention.\"\n   *\n   * **The empty state is not an edge case.** A host that has not wired a feed\n   * yet renders it, which makes it the state most consumers see first (B33-494's\n   * data decision). A locale that leaves it untranslated is a blank panel.\n   */\n  emptyBody: string\n}\n\n/**\n * The English defaults. A consumer that passes nothing renders the panel in\n * English, which is what the specimen route shows and what a human will be\n * looking at when they approve this component at its fidelity gate.\n *\n * Frozen, and frozen without a type annotation. It is a public export reaching\n * four products on a version bump: `const` protects the binding and not the\n * contents, so a consumer aliasing it -- `const mine = defaultNotificationCenterLabels;\n * mine.title = 'Notifications'` -- would silently rename every panel in the\n * process (B33-877), and an annotation here would widen the `Readonly` back off\n * the emitted `.d.ts` and turn that into a runtime TypeError rather than a\n * compile error (B33-916).\n *\n * The freeze is shallow. No field here is an object and none should become one\n * without re-reading B33-916's note: a nested label defeats the guard silently.\n */\nexport const defaultNotificationCenterLabels = Object.freeze({\n  title: 'Notifications',\n  markAllAsRead: 'Mark all as read',\n  all: 'All',\n  unread: 'Unread',\n  unreadItem: 'Unread',\n  meta: '%source% · %time%',\n  viewAll: 'View all notifications',\n  emptyTitle: \"You're all caught up\",\n  emptyBody: 'Nothing from any product needs your attention.',\n} satisfies NotificationCenterLabels)\n\n/**\n * The labels as the render consumes them: `meta` presented as a function of its\n * two values, so the component writes `t.meta(…)` and never handles a template\n * itself. Internal, and the interpolation has to happen somewhere.\n */\nexport interface ResolvedNotificationCenterLabels extends Omit<NotificationCenterLabels, 'meta'> {\n  meta: (source: string, time: string) => string\n}\n\n/**\n * Merge a consumer's partial `labels` onto the English defaults, treating an\n * explicitly-`undefined` field as unsupplied, and present `meta` as a function of\n * its two values.\n *\n * `{ title: undefined }` is what one missing next-intl key looks like at the\n * call site. It must fall back to English rather than blank the heading -- which\n * here would also unname the panel, since the heading is what names it\n * (B33-873).\n */\nexport function resolveNotificationCenterLabels(\n  labels?: Partial<NotificationCenterLabels>,\n): ResolvedNotificationCenterLabels {\n  const supplied = Object.fromEntries(\n    Object.entries(labels ?? {}).filter(([, value]) => value !== undefined),\n  ) as Partial<NotificationCenterLabels>\n  const merged = { ...defaultNotificationCenterLabels, ...supplied }\n  return {\n    ...merged,\n    meta: (source, time) => fillTemplate(merged.meta, { source, time }),\n  }\n}\n"],"names":["defaultNotificationCenterLabels","resolveNotificationCenterLabels","labels","supplied","value","merged","source","time","fillTemplate"],"mappings":";AAkIO,MAAMA,IAAkC,OAAO,OAAO;AAAA,EAC3D,OAAO;AAAA,EACP,eAAe;AAAA,EACf,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,WAAW;AACb,CAAoC;AAqB7B,SAASC,EACdC,GACkC;AAClC,QAAMC,IAAW,OAAO;AAAA,IACtB,OAAO,QAAQD,KAAU,EAAE,EAAE,OAAO,CAAC,CAAA,EAAGE,CAAK,MAAMA,MAAU,MAAS;AAAA,EAAA,GAElEC,IAAS,EAAE,GAAGL,GAAiC,GAAGG,EAAA;AACxD,SAAO;AAAA,IACL,GAAGE;AAAA,IACH,MAAM,CAACC,GAAQC,MAASC,EAAaH,EAAO,MAAM,EAAE,QAAAC,GAAQ,MAAAC,EAAA,CAAM;AAAA,EAAA;AAEtE;"}

package/dist/components/ProductMark/ProductMark.d.ts

@@ -6,95 +6,76 @@
  *
  * **Module-internal since B33-1269, and it has to stay that way.** `src/index.ts`
  * publishes `hasProductMark` below and neither this list nor `ProductSlug`. A
- * `const` assertion over four strings made an artwork inventory part of the
+ * `const` assertion over these strings made an artwork inventory part of the
  * published type contract: a consumer could write `Record<ProductSlug, ...>` or
- * switch exhaustively over it, and then artwork landing for a fifth product --
+ * switch exhaustively over it, and then artwork landing for another product --
  * the thing this package exists to ship -- would be a breaking change for them.
  * Nothing published is typed `ProductSlug` anyway; every slug prop is `string` on
  * purpose, so Identity's registry may run ahead of a mark release (ADR-0003, and
  * `slug` below). So the union's only real job was answering "which slugs have
  * artwork", and `hasProductMark` answers that without freezing the list.
+ * B33-1670 widening this from four slugs to ten is the proof: it adds drawings
+ * and flips six `hasProductMark` answers to true, and breaks nothing a consumer
+ * could have typed.
  *
  * The tests and the specimen read both names by deep import, which is how
  * everything in this repo reaches into `src/`. A consumer cannot: `package.json`
  * exports `.`, `./style.css` and `./theme.css`, and nothing else.
  *
- * **It is no longer the whole of Identity's registry, and the difference is
- * deliberate.** Identity serves five slugs: these four plus `brokers` (B33-1158,
- * "Boost Brokers"). This package has no `brokers` glyph, so that row draws the
- * bare tile through the safe degrade below -- see "The fifth slug" underneath.
- *
- * **Transcribed from `boost33-identity/src/lib/productRegistry.ts`** -- its
- * `REGISTRY_SLUGS`, which is `PRODUCTS` from `src/config/products.ts` plus
- * `WALLET_SLUG`. That file is the source of truth and this is a copy of it in
- * another repository, which is a thing that drifts. It already did: until
- * B33-1043 this list read `wallet | score | voice | outbound` while this comment
- * asserted it was Identity's, so three of the four rows of a switcher fed
- * straight from `GET /api/v1/products` drew the bare tile (see `slug` below) and
- * nothing anywhere failed.
+ * **It is the whole of Identity's registry: all ten slugs, every one with a
+ * mark.** Transcribed from `boost33-identity/src/lib/productRegistry.ts` -- its
+ * `REGISTRY_SLUGS`, which is `PRODUCTS` from `src/config/products.ts`
+ * (boostscore, boostvoice, boostoutbound, brokers, boosttrade, boostfunding)
+ * plus `RESULTS_SLUG`, `PASSPORT_SLUG`, `PIPE_SLUG` and `WALLET_SLUG`. That file
+ * is the source of truth and this is a copy of it in another repository, which
+ * is a thing that drifts. It already did: until B33-1043 this list read
+ * `wallet | score | voice | outbound` while its comment asserted it was
+ * Identity's, so three of the four rows of a switcher fed straight from
+ * `GET /api/v1/products` drew the bare tile (see `slug` below) and nothing
+ * anywhere failed.
  *
  * Identity is not the side that renames. ADR-0003 records the shorter slugs as
  * considered and rejected: these match the `?app=` keys live campaign URLs
  * already carry, so renaming them means those links grant nothing on sign-up.
+ * The same holds for `boostvoice`, whose mark is already the Content pencil:
+ * the product is being renamed Boost Content, and the display name moves on
+ * Identity's side (B33-1672) while the slug stays.
  *
  * `tests/product-mark.test.tsx` pins this list against a second transcription of
  * the same source, so the two repositories cannot part company in silence again.
- * That pin is what the old comment's assertion was standing in for, and it now
- * pins the gap as well as the overlap: it names `brokers` as the one served slug
- * with no glyph here, so a *sixth* product, or artwork landing for this one,
- * fails rather than passing quietly.
+ * The pin also keeps a list of served slugs this package deliberately draws
+ * nothing for. That list is empty since B33-1670, and it stays in the test so an
+ * eleventh product Identity serves before its mark lands is a recorded decision
+ * rather than a quiet pass.
  *
  * The *order* is this package's own and not Identity's -- `REGISTRY_SLUGS` ends
- * with `wallet` where this begins with it. Nothing reads a render order off this
- * list: a switcher draws the order its consumer was served (`AppSwitcher`), and
- * the only thing this order sets is the left-to-right run of frames in the
- * ProductMark specimen.
- *
- * ── The fifth slug ───────────────────────────────────────────────────────────
- *
- * **`brokers` is absent because no Brokers artwork exists to lift, not because
- * nobody got to it.** The four glyphs below were taken verbatim out of
- * `boostledger/src/ui/primitives/icons.tsx`, whose own `GLYPHS` is typed
- * `Record<ProductName, ReactNode>` over exactly four display names. There is no
- * Brokers mark in that file, none in `boost33-brand-hub`, and none in this
- * repository. The hub renders the product as a text quick-link and no mark at
- * all.
- *
- * So drawing one here would not be transcribing a mark, it would be inventing
- * one -- and the comment on GLYPHS below records what that costs: PR #4 redrew
- * all four from a written description, got all four wrong, and reintroduced the
- * retired one-orange-element construction. An invented fifth mark is worse than
- * that was, because it has nothing to be caught against. A human captures the
- * first baseline at the fidelity gate, which would make the invention the
- * referent, and it looks equally settled either way afterwards (CLAUDE.md, "an
- * agent that picks one and builds it has invented a referent").
- *
- * The degrade is also the mildest it will ever be. Identity serves `brokers` as
- * `live: false` -- the space is still being built -- so the switcher row carries
- * the "Soon" tag beside the bare tile, which reads as a product that has not
- * arrived rather than as a drawing that failed to load. That stops being true
- * the day Brokers ships.
- *
- * **To close it:** get the mark drawn where the other four live
- * (`boostledger/src/ui/primitives/icons.tsx`), lift it here verbatim, add
- * `brokers` to this list, and let a human approve `productmark-brokers.png` at a
- * gate. Not in that order optional: this list is what GLYPHS is typed against,
- * so adding the slug without the artwork stops the build, which is the one part
- * of this that cannot go wrong quietly.
- *
- * **And since B33-1269 that is an ordinary addition rather than a breaking
- * change.** This list is not published, so widening it widens nothing a consumer
- * has typed against: a fifth entry adds a drawing where there was a bare tile and
- * flips `hasProductMark('brokers')` from false to true. Until then it was a
- * major-bump-shaped change to ship a picture, which is the wrong price for the
- * thing this package is for.
+ * with `wallet` where this begins with it, then follows Identity's order for the
+ * other nine. Nothing reads a render order off this list: a switcher draws the
+ * order its consumer was served (`AppSwitcher`), and the only thing this order
+ * sets is the left-to-right run of frames in the ProductMark specimen, where the
+ * four slugs that have carried a mark since 0.1 keep the first four places.
+ *
+ * ── Brokers, and the six that arrived with it ────────────────────────────────
+ *
+ * From 0.4.0 to 0.6.0 Identity served `brokers` and this package drew it as the
+ * bare tile, deliberately: no Brokers artwork existed in any repository to lift,
+ * and drawing one here would have been inventing a referent rather than
+ * transcribing a mark (PR #4 redrew the first four from a written description
+ * and got all four wrong). Identity then grew `boosttrade`, `boostfunding`,
+ * `boostresults`, `passport` and `pipe`, all served with no mark here either.
+ *
+ * B33-1669 closed it the way the old comment said it had to be closed: the
+ * marks were drawn where the others live (`boostledger/src/ui/primitives/icons.tsx`),
+ * for all ten products at once, and B33-1670 lifted them here verbatim. The
+ * part a commit cannot do is still outstanding when this lands -- a human
+ * approves `productmark-<slug>.png` for each of the ten at the fidelity gate
+ * (tests/baselines/README.md).
  */
-export declare const PRODUCT_SLUGS: readonly ["wallet", "boostscore", "boostvoice", "boostoutbound"];
+export declare const PRODUCT_SLUGS: readonly ["wallet", "boostscore", "boostvoice", "boostoutbound", "brokers", "boosttrade", "boostfunding", "boostresults", "passport", "pipe"];
 /**
- * One of the slugs this package draws a mark for. Not every slug Identity serves
- * -- see above -- and not published either, for the reason recorded there. What
- * this type is for is typing GLYPHS, so the list and the artwork cannot part
- * company.
+ * One of the slugs this package draws a mark for. Not published, for the reason
+ * recorded above. What this type is for is typing GLYPHS, so the list and the
+ * artwork cannot part company.
  */
 export type ProductSlug = (typeof PRODUCT_SLUGS)[number];
 /**
@@ -104,9 +85,9 @@ export type ProductSlug = (typeof PRODUCT_SLUGS)[number];
  * **Ask this rather than matching a slug against a union of known slugs.** The
  * set of slugs with artwork is this package's inventory, not a vocabulary:
  * Identity owns which products exist (ADR-0003) and this list grows whenever a
- * drawing lands. `brokers` is the one slug Identity serves today that there is no
- * glyph here for -- see "The fifth slug" above. A caller that pattern-matches a
- * union is pinned to whichever inventory it compiled against; a caller that asks
+ * drawing lands. Since B33-1670 every slug Identity serves has a mark, and the
+ * next product Identity adds will be served before its mark ships here. A
+ * caller that pattern-matches a union is pinned to whichever inventory it compiled against; a caller that asks
  * this gets the installed version's answer, and keeps working when the next mark
  * ships.
  *
@@ -135,9 +116,15 @@ export interface ProductMarkProps {
     size?: number;
     /**
      * Dims the tile for a product the account is not entitled to -- the switcher's
-     * unowned rows need it. It swaps the **ground only**, to --color-neutral-300;
-     * the glyph stays white. Fading the glyph too would cost the shape the one
-     * thing telling the four marks apart, and it is a prop rather than a wrapper
+     * unowned and unbuilt rows need it. The tile ground greys to
+     * --color-neutral-300, and the cut-outs painted in the tile colour grey with
+     * it. The glyph stays white, and **the orange accent turns white too** (Jamal,
+     * 29 Oct 2026, B33-1669): a product the account does not own spends no
+     * orange. Two marks take the drawing from Paper's "Option: no orange" row to
+     * stay legible without the accent -- Outbound gains a fold line in the tile
+     * colour between its two wings, and Passport's globe flips to the tile colour
+     * with white lines. Fading the glyph instead would cost the shape the one
+     * thing telling the marks apart, and it is a prop rather than a wrapper
      * `opacity-40 grayscale` filter because that lands on a mid-grey visibly
      * darker than the grey Paper draws.
      *
@@ -151,6 +138,8 @@ export interface ProductMarkProps {
      * of those and makes the ratio bite. That combination is out of contract; no
      * call site in this package uses it. See ADR-0012, which also records why the
      * ground is not darkened and what to reach for if this is ever revisited.
+     * Since the accent turned white on a muted tile, every ink on that tile is the
+     * same white ADR-0012 measured, so its 1.41:1 is still the only ratio there is.
      */
     muted?: boolean;
     /**
@@ -170,8 +159,9 @@ export interface ProductMarkProps {
 }
 /**
  * The tile-and-glyph mark for one Boost33 product -- a rounded --color-neutral-950
- * square with the product's glyph in --color-primary-foreground. The four marks
- * share one palette and are told apart by shape alone; there is zero brand
- * orange in any of them.
+ * square with the product's glyph in --color-primary-foreground and one accent
+ * in --color-primary. The ten marks share one palette and are told apart by
+ * shape; the accent is the same orange in every one of them, so it identifies
+ * nothing.
  */
 export declare function ProductMark({ slug, size, muted, title, className }: ProductMarkProps): import("react").JSX.Element;

package/dist/components/ProductMark/ProductMark.js

@@ -1,77 +1,231 @@
-import { jsxs as t, jsx as r, Fragment as n } from "react/jsx-runtime";
-import { useId as k } from "react";
-import i from "./ProductMark.module.css.js";
-const x = 20, f = ["wallet", "boostscore", "boostvoice", "boostoutbound"], y = {
-  // A credit card with its magnetic stripe: an outline card (fill none, so the
-  // tile shows through) plus a filled stripe across it.
-  wallet: /* @__PURE__ */ t(n, { children: [
-    /* @__PURE__ */ r("rect", { x: "5", y: "10", width: "30", height: "20", rx: "4", fill: "none", stroke: "currentColor", strokeWidth: "3" }),
-    /* @__PURE__ */ r("rect", { x: "5", y: "16", width: "30", height: "5", fill: "currentColor" })
-  ] }),
-  // A gauge with the needle swung high: an arc, the needle, and the hub it
-  // pivots on. Arc and needle stroke at width 4 with round caps.
-  boostscore: /* @__PURE__ */ t(n, { children: [
-    /* @__PURE__ */ r("path", { d: "M6 26 A14 14 0 0 1 34 26", fill: "none", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round" }),
-    /* @__PURE__ */ r("line", { x1: "20", y1: "26", x2: "28", y2: "14", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round" }),
-    /* @__PURE__ */ r("circle", { cx: "20", cy: "26", r: "3", fill: "currentColor" })
-  ] }),
-  // A soundwave, tall in the middle: three pill bars, all centred on y=20.
-  boostvoice: /* @__PURE__ */ t(n, { children: [
-    /* @__PURE__ */ r("rect", { x: "6", y: "14", width: "7", height: "12", rx: "3.5", fill: "currentColor" }),
-    /* @__PURE__ */ r("rect", { x: "16.5", y: "4", width: "7", height: "32", rx: "3.5", fill: "currentColor" }),
-    /* @__PURE__ */ r("rect", { x: "27", y: "14", width: "7", height: "12", rx: "3.5", fill: "currentColor" })
-  ] }),
-  // An arrow leaving through the top-right: the shaft and the elbow of its head,
-  // both stroke width 4 with round caps and joins.
-  boostoutbound: /* @__PURE__ */ t(n, { children: [
-    /* @__PURE__ */ r("line", { x1: "8", y1: "32", x2: "32", y2: "8", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" }),
-    /* @__PURE__ */ r("path", { d: "M16 8 H32 V24", fill: "none", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" })
-  ] })
+import { jsxs as l, jsx as r, Fragment as e } from "react/jsx-runtime";
+import { useId as L } from "react";
+import a from "./ProductMark.module.css.js";
+const w = 20, g = [
+  "wallet",
+  "boostscore",
+  "boostvoice",
+  "boostoutbound",
+  "brokers",
+  "boosttrade",
+  "boostfunding",
+  "boostresults",
+  "passport",
+  "pipe"
+], o = "var(--color-primary-foreground)", b = "var(--color-primary)", M = "var(--color-neutral-950)", m = "var(--color-neutral-300)", d = 40, v = 0.62, W = 24, E = {
+  // wallet (upstream "Wallet"). A wallet with a card tucked behind its flap and
+  // an orange clasp.
+  wallet: {
+    optical: 0.94,
+    draw: ({ tile: t, accent: i }) => /* @__PURE__ */ l(e, { children: [
+      /* @__PURE__ */ r(
+        "path",
+        {
+          d: "M5 7 L15.4 3.1 A1.2 1.2 0 0 1 17 4 L17.6 7 Z",
+          fill: o,
+          stroke: o,
+          strokeWidth: "1",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ r("rect", { x: "2.5", y: "6.5", width: "19", height: "15", rx: "3", fill: o }),
+      /* @__PURE__ */ r("rect", { x: "14.5", y: "10.75", width: "9", height: "6.5", rx: "2.5", fill: t }),
+      /* @__PURE__ */ r("circle", { cx: "17.75", cy: "14", r: "1.5", fill: i })
+    ] })
+  },
+  // boostscore (upstream "Boost Score"). A target: a white ring around an orange
+  // bull's-eye.
+  boostscore: {
+    optical: 1,
+    draw: ({ tile: t, accent: i }) => /* @__PURE__ */ l(e, { children: [
+      /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "10", fill: o }),
+      /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "7", fill: t }),
+      /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "4", fill: i })
+    ] })
+  },
+  // boostvoice (upstream "Boost Voice"). The CONTENT pencil: the product is being
+  // renamed Boost Content and the mark is already drawn for the new name. The
+  // slug stays `boostvoice`; the display rename is Identity's (B33-1672).
+  boostvoice: {
+    optical: 1,
+    draw: ({ tile: t, accent: i }) => /* @__PURE__ */ l(e, { children: [
+      /* @__PURE__ */ r(
+        "path",
+        {
+          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",
+          fill: o,
+          stroke: o,
+          strokeWidth: "1",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ r("path", { d: "M13.4 6 L18 10.6", stroke: t, strokeWidth: "1.6", strokeLinecap: "round" }),
+      /* @__PURE__ */ r("rect", { x: "13", y: "18.25", width: "8.5", height: "2.75", rx: "1.375", fill: i })
+    ] })
+  },
+  // boostoutbound (upstream "Boost Outbound"). A paper plane, its near wing orange.
+  boostoutbound: {
+    optical: 1,
+    draw: ({ tile: t, accent: i }) => /* @__PURE__ */ l(e, { children: [
+      /* @__PURE__ */ r(
+        "path",
+        {
+          d: "M21 3 L3 10.4 L10.2 13.8 Z",
+          fill: o,
+          stroke: o,
+          strokeWidth: "1.5",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ r(
+        "path",
+        {
+          d: "M21 3 L10.2 13.8 L13.6 21 Z",
+          fill: i,
+          stroke: i,
+          strokeWidth: "1.5",
+          strokeLinejoin: "round"
+        }
+      ),
+      i === o && /* @__PURE__ */ r("path", { d: "M20 4 L10.2 13.8", stroke: t, strokeWidth: "1.4", strokeLinecap: "round" })
+    ] })
+  },
+  // brokers (upstream "Boost Brokers"). Two people, the one behind in orange; a
+  // tile-coloured outline separates the white figure in front from it.
+  brokers: {
+    optical: 1,
+    draw: ({ tile: t, accent: i }) => /* @__PURE__ */ l(e, { children: [
+      /* @__PURE__ */ r("circle", { cx: "16.5", cy: "7.5", r: "3.25", fill: i }),
+      /* @__PURE__ */ r("path", { d: "M11 20 A5.5 5.5 0 0 1 22 20 Z", fill: i }),
+      /* @__PURE__ */ r("circle", { cx: "9", cy: "7.5", r: "3.75", fill: o, stroke: t, strokeWidth: "1.5" }),
+      /* @__PURE__ */ r(
+        "path",
+        {
+          d: "M2 20.5 A7 7 0 0 1 16 20.5 Z",
+          fill: o,
+          stroke: t,
+          strokeWidth: "1.5",
+          strokeLinejoin: "round"
+        }
+      )
+    ] })
+  },
+  // boosttrade (upstream "Boost Off Market"). A key -- something not on the open
+  // market -- with an orange bow.
+  boosttrade: {
+    optical: 1,
+    draw: ({ tile: t, accent: i }) => /* @__PURE__ */ l(e, { children: [
+      /* @__PURE__ */ r("rect", { x: "11", y: "10.6", width: "11", height: "2.8", rx: "1.4", fill: o }),
+      /* @__PURE__ */ r("rect", { x: "15.6", y: "11", width: "2.8", height: "5", rx: "1.2", fill: o }),
+      /* @__PURE__ */ r("rect", { x: "19.2", y: "11", width: "2.8", height: "3.8", rx: "1.2", fill: o }),
+      /* @__PURE__ */ r("circle", { cx: "7.5", cy: "12", r: "5.5", fill: o }),
+      /* @__PURE__ */ r("circle", { cx: "7.5", cy: "12", r: "2.6", fill: t }),
+      /* @__PURE__ */ r("circle", { cx: "7.5", cy: "12", r: "1.6", fill: i })
+    ] })
+  },
+  // boostfunding (upstream "Boost Financing"). A banknote with its coin, an
+  // orange note stacked behind it.
+  boostfunding: {
+    optical: 1,
+    draw: ({ tile: t, accent: i }) => /* @__PURE__ */ l(e, { children: [
+      /* @__PURE__ */ r("rect", { x: "4.75", y: "4.5", width: "17", height: "11", rx: "2.5", fill: i }),
+      /* @__PURE__ */ r("rect", { x: "1", y: "8.25", width: "18.75", height: "12.5", rx: "3.25", fill: t }),
+      /* @__PURE__ */ r("rect", { x: "2.25", y: "9.5", width: "16.25", height: "10", rx: "2", fill: o }),
+      /* @__PURE__ */ r("circle", { cx: "10.375", cy: "14.5", r: "2.75", fill: t })
+    ] })
+  },
+  // boostresults (upstream "Boost Activity"). A pulse line running into an
+  // orange dot -- activity, now.
+  boostresults: {
+    optical: 1,
+    draw: ({ accent: t }) => /* @__PURE__ */ l(e, { children: [
+      /* @__PURE__ */ r(
+        "path",
+        {
+          d: "M2.5 12.5 H6 L9 5 L14 19 L16.6 12.5 H17",
+          fill: "none",
+          stroke: o,
+          strokeWidth: "2.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ r("circle", { cx: "20", cy: "12.5", r: "2.5", fill: t })
+    ] })
+  },
+  // passport (upstream "Boost Passport"). A passport booklet with an orange globe
+  // and a name bar. The globe's meridian and equator are dropped below 24px (see
+  // the constant above).
+  passport: {
+    optical: 0.94,
+    draw: ({ tile: t, accent: i, size: c }) => /* @__PURE__ */ l(e, { children: [
+      /* @__PURE__ */ r("rect", { x: "4.5", y: "2", width: "15", height: "20", rx: "2.5", fill: o }),
+      /* @__PURE__ */ r("circle", { cx: "12", cy: "10", r: "5.75", fill: i === o ? t : i }),
+      c >= W && /* @__PURE__ */ l(e, { children: [
+        /* @__PURE__ */ r(
+          "ellipse",
+          {
+            cx: "12",
+            cy: "10",
+            rx: "2.5",
+            ry: "5.1",
+            fill: "none",
+            stroke: i === o ? o : t,
+            strokeWidth: "1.3"
+          }
+        ),
+        /* @__PURE__ */ r("path", { d: "M6.25 10 H17.75", stroke: i === o ? o : t, strokeWidth: "1.3" })
+      ] }),
+      /* @__PURE__ */ r("rect", { x: "8.5", y: "17.75", width: "7", height: "1.8", rx: "0.9", fill: t })
+    ] })
+  },
+  // pipe (upstream "Boost Pipe"). A pipeline narrowing in three stages, the last
+  // -- the deal -- orange.
+  pipe: {
+    optical: 0.96,
+    draw: ({ accent: t }) => /* @__PURE__ */ l(e, { children: [
+      /* @__PURE__ */ r("rect", { x: "2.5", y: "4", width: "19", height: "4", rx: "2", fill: o }),
+      /* @__PURE__ */ r("rect", { x: "6", y: "10", width: "12", height: "4", rx: "2", fill: o }),
+      /* @__PURE__ */ r("rect", { x: "9.5", y: "16", width: "5", height: "4", rx: "2", fill: t })
+    ] })
+  }
 };
-function h(o) {
-  return f.includes(o);
+function k(t) {
+  return g.includes(t);
 }
-function v(o) {
-  return h(o);
+function _(t) {
+  return k(t);
 }
-function C({ slug: o, size: l = x, muted: a, title: c, className: d }) {
-  const s = k(), e = c == null, u = h(o) ? y[o] : null;
-  return /* @__PURE__ */ t(
+function j({ slug: t, size: i = w, muted: c, title: n, className: f }) {
+  const x = L(), s = n == null, h = k(t) ? E[t] : null, p = c ? m : M, y = c ? o : b;
+  return /* @__PURE__ */ l(
     "svg",
     {
-      className: d != null ? `${i.mark} ${d}` : i.mark,
-      width: l,
-      height: l,
-      viewBox: "0 0 40 40",
-      role: e ? void 0 : "img",
-      "aria-hidden": e ? "true" : void 0,
-      "aria-labelledby": e ? void 0 : s,
+      className: f != null ? `${a.mark} ${f}` : a.mark,
+      width: i,
+      height: i,
+      viewBox: `0 0 ${d} ${d}`,
+      role: s ? void 0 : "img",
+      "aria-hidden": s ? "true" : void 0,
+      "aria-labelledby": s ? void 0 : x,
       children: [
-        !e && /* @__PURE__ */ r("title", { id: s, children: c }),
-        /* @__PURE__ */ r(
-          "rect",
-          {
-            className: i.ground,
-            width: "40",
-            height: "40",
-            style: { fill: a ? "var(--color-neutral-300)" : "var(--color-neutral-950)" }
-          }
-        ),
-        u && /* @__PURE__ */ r(
-          "g",
-          {
-            transform: "translate(10 10) scale(0.5)",
-            style: { color: "var(--color-primary-foreground)" },
-            children: u
-          }
-        )
+        !s && /* @__PURE__ */ r("title", { id: x, children: n }),
+        /* @__PURE__ */ r("rect", { className: a.ground, width: d, height: d, style: { fill: p } }),
+        h && /* @__PURE__ */ r("g", { transform: I(h.optical), children: h.draw({ tile: p, accent: y, size: i }) })
       ]
     }
   );
 }
+function I(t) {
+  const i = d * v * t, c = u((d - i) / 2), n = u(i / 24);
+  return `translate(${c} ${c}) scale(${n})`;
+}
+function u(t) {
+  return Math.round(t * 1e4) / 1e4;
+}
 export {
-  f as PRODUCT_SLUGS,
-  C as ProductMark,
-  v as hasProductMark
+  g as PRODUCT_SLUGS,
+  j as ProductMark,
+  _ as hasProductMark
 };
 //# sourceMappingURL=ProductMark.js.map