@boost33/ui 0.4.0 → 0.5.0

package/dist/components/LaunchLoader/LaunchLoader.d.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+import { LaunchGradientStops } from '../../launch-gradient';
+export interface LaunchLoaderProps {
+    /**
+     * What is happening, in words -- "Opening Boost Score". It may be one line for
+     * the whole launch, which is what the first consumers pass, or rewritten as
+     * real milestones land, in which case each rewrite is announced. It is the
+     * only text on the screen and the progress bar's name.
+     *
+     * Taken whole rather than assembled from a destination name, because where a
+     * product's name sits in the sentence is the language's to decide, not this
+     * package's -- the same reason WalletChip's labels take whole templates.
+     */
+    caption: string;
+    /** The destination's four gradient stops, darkest first. See LaunchGradientStops. */
+    stops: LaunchGradientStops;
+    /**
+     * 0-100, or `null`/omitted while the page has no honest number. Indeterminate
+     * omits `aria-valuenow` entirely: passing 0 to mean "unknown" announces 0%.
+     * Values outside 0-100 are clamped.
+     */
+    progress?: number | null;
+    /**
+     * The colour the dots and the bar are drawn in, before blending. Defaults to
+     * white, the caption's colour (decided 14 Oct 2026). Both are drawn with
+     * `soft-light` at 75% opacity, which a colour passes through too.
+     */
+    dotColor?: string;
+    /**
+     * Whether the content behind this screen is still loading. Sets `aria-busy`
+     * on the root; set it to false the moment the real content lands.
+     */
+    busy?: boolean;
+    /**
+     * An optional layer painted over the mesh and under the content --
+     * where an animated backdrop goes. Never required: the screen is complete
+     * without it, and dropped entirely under `prefers-contrast`.
+     */
+    backdrop?: ReactNode;
+    className?: string;
+}
+/**
+ * The launch screen every product shows while another product opens (B33-1389).
+ * Presentational: it knows no product, fetches nothing and owns no timing. The
+ * page drives the caption and the progress; this draws them.
+ *
+ * No "use client" and no client-only hook: useId is in React's server build, so
+ * this renders -- and its dots animate -- straight from server HTML.
+ */
+export declare function LaunchLoader({ caption, stops, progress, dotColor, busy, backdrop, className, }: LaunchLoaderProps): import("react").JSX.Element;

package/dist/components/LaunchLoader/LaunchLoader.js

@@ -0,0 +1,70 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useId as m } from "react";
+import { DotMatrixLoader as y } from "../DotMatrixLoader/DotMatrixLoader.js";
+import { launchRamp as f, launchSolid as x, launchGround as M, LAUNCH_MESH as S, launchShapeStyle as L } from "../../launch-gradient.js";
+import a from "./LaunchLoader.module.css.js";
+function I(r) {
+  return Math.min(100, Math.max(0, r));
+}
+function A({
+  caption: r,
+  stops: i,
+  progress: n = null,
+  dotColor: c,
+  busy: h = !0,
+  backdrop: o,
+  className: d
+}) {
+  const s = m(), u = m(), l = typeof n == "number" && Number.isFinite(n) ? Math.round(I(n)) : null, p = f(i), v = {
+    "--launch-ground": M(i),
+    "--launch-solid": x(i),
+    ...c ? { "--launch-accent-input": c } : {}
+  };
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: d ? `${a.root} ${d}` : a.root,
+      style: v,
+      "aria-busy": h,
+      "aria-describedby": s,
+      "data-launch-loader": "",
+      children: [
+        /* @__PURE__ */ e("div", { className: a.mesh, "aria-hidden": "true", children: S.map((b, N) => /* @__PURE__ */ e(
+          "div",
+          {
+            className: a.shape,
+            style: L(b, p)
+          },
+          N
+        )) }),
+        o ? /* @__PURE__ */ e("div", { className: a.backdrop, children: o }) : null,
+        /* @__PURE__ */ t("div", { className: a.content, children: [
+          /* @__PURE__ */ e(y, { label: null, className: a.dots }),
+          /* @__PURE__ */ t(
+            "div",
+            {
+              id: s,
+              className: a.bar,
+              role: "progressbar",
+              "aria-labelledby": u,
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              "aria-valuenow": l ?? void 0,
+              "data-indeterminate": l === null,
+              style: l === null ? void 0 : { "--launch-progress": l },
+              children: [
+                /* @__PURE__ */ e("div", { className: a.track }),
+                /* @__PURE__ */ e("div", { className: a.fill })
+              ]
+            }
+          ),
+          /* @__PURE__ */ e("p", { id: u, className: a.caption, "aria-live": "polite", children: r })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  A as LaunchLoader
+};
+//# sourceMappingURL=LaunchLoader.js.map

package/dist/components/LaunchLoader/LaunchLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LaunchLoader.js","sources":["../../../src/components/LaunchLoader/LaunchLoader.tsx"],"sourcesContent":["import { useId, type CSSProperties, type ReactNode } from 'react'\nimport { DotMatrixLoader } from '../DotMatrixLoader/DotMatrixLoader'\nimport {\n  LAUNCH_MESH,\n  launchGround,\n  launchRamp,\n  launchShapeStyle,\n  launchSolid,\n  type LaunchGradientStops,\n} from '../../launch-gradient'\nimport styles from './LaunchLoader.module.css'\n\nexport interface LaunchLoaderProps {\n  /**\n   * What is happening, in words -- \"Opening Boost Score\". It may be one line for\n   * the whole launch, which is what the first consumers pass, or rewritten as\n   * real milestones land, in which case each rewrite is announced. It is the\n   * only text on the screen and the progress bar's name.\n   *\n   * Taken whole rather than assembled from a destination name, because where a\n   * product's name sits in the sentence is the language's to decide, not this\n   * package's -- the same reason WalletChip's labels take whole templates.\n   */\n  caption: string\n  /** The destination's four gradient stops, darkest first. See LaunchGradientStops. */\n  stops: LaunchGradientStops\n  /**\n   * 0-100, or `null`/omitted while the page has no honest number. Indeterminate\n   * omits `aria-valuenow` entirely: passing 0 to mean \"unknown\" announces 0%.\n   * Values outside 0-100 are clamped.\n   */\n  progress?: number | null\n  /**\n   * The colour the dots and the bar are drawn in, before blending. Defaults to\n   * white, the caption's colour (decided 14 Oct 2026). Both are drawn with\n   * `soft-light` at 75% opacity, which a colour passes through too.\n   */\n  dotColor?: string\n  /**\n   * Whether the content behind this screen is still loading. Sets `aria-busy`\n   * on the root; set it to false the moment the real content lands.\n   */\n  busy?: boolean\n  /**\n   * An optional layer painted over the mesh and under the content --\n   * where an animated backdrop goes. Never required: the screen is complete\n   * without it, and dropped entirely under `prefers-contrast`.\n   */\n  backdrop?: ReactNode\n  className?: string\n}\n\nfunction clampProgress(value: number): number {\n  return Math.min(100, Math.max(0, value))\n}\n\n/**\n * The launch screen every product shows while another product opens (B33-1389).\n * Presentational: it knows no product, fetches nothing and owns no timing. The\n * page drives the caption and the progress; this draws them.\n *\n * No \"use client\" and no client-only hook: useId is in React's server build, so\n * this renders -- and its dots animate -- straight from server HTML.\n */\nexport function LaunchLoader({\n  caption,\n  stops,\n  progress = null,\n  dotColor,\n  busy = true,\n  backdrop,\n  className,\n}: LaunchLoaderProps) {\n  const barId = useId()\n  const captionId = useId()\n  const determinate = typeof progress === 'number' && Number.isFinite(progress)\n  const value = determinate ? Math.round(clampProgress(progress)) : null\n\n  const ramp = launchRamp(stops)\n  const rootStyle = {\n    '--launch-ground': launchGround(stops),\n    '--launch-solid': launchSolid(stops),\n    ...(dotColor ? { '--launch-accent-input': dotColor } : {}),\n  } as CSSProperties\n\n  return (\n    <div\n      className={className ? `${styles.root} ${className}` : styles.root}\n      style={rootStyle}\n      aria-busy={busy}\n      aria-describedby={barId}\n      data-launch-loader=\"\"\n    >\n      {/* The mesh: solid shapes melted by one blur on their container. Every\n          shape is styled inline, so the composition paints from the HTML\n          alone, in the same chunk as the rest of the component -- on both\n          sides of a hop, from the same props. It drifts once and settles back\n          on this exact frame (see the module's .mesh rule). */}\n      <div className={styles.mesh} aria-hidden=\"true\">\n        {LAUNCH_MESH.map((shape, i) => (\n          <div\n            key={i}\n            className={styles.shape}\n            style={launchShapeStyle(shape, ramp)}\n          />\n        ))}\n      </div>\n\n      {backdrop ? <div className={styles.backdrop}>{backdrop}</div> : null}\n\n      <div className={styles.content}>\n        {/* Decorative: the caption already says everything the dots do. */}\n        {/* Coloured by the .dots class, not DotMatrixLoader's `color` prop: an\n            inline colour would outrank the prefers-contrast branch. */}\n        <DotMatrixLoader label={null} className={styles.dots} />\n\n        {/* Outside the live region on purpose. The caption's region is atomic,\n            so a bar inside it would re-announce everything on every tick. */}\n        <div\n          id={barId}\n          className={styles.bar}\n          role=\"progressbar\"\n          aria-labelledby={captionId}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuenow={value ?? undefined}\n          data-indeterminate={value === null}\n          style={value === null ? undefined : ({ '--launch-progress': value } as CSSProperties)}\n        >\n          {/* Separate layers on purpose: the track blends into the mesh, the\n              fill does not. A fill inside the track's blend group would blend\n              with it and lose the 3:1 it needs against it. */}\n          <div className={styles.track} />\n          <div className={styles.fill} />\n        </div>\n\n        {/* The single source of the words: the bar's name and the live region\n            in one node, so nothing is read twice.\n\n            aria-live stays even though the first consumers pass one static\n            line (\"Opening Boost Score\", decided 14 Oct 2026 -- a prerendered\n            arrival gives no honest signal for a middle phase). It is inert\n            while the text does not change, and it is what makes a changing\n            caption announce if a consumer passes one: `caption` is a prop, and\n            phased captions are the case this markup was designed for. */}\n        <p id={captionId} className={styles.caption} aria-live=\"polite\">\n          {caption}\n        </p>\n      </div>\n    </div>\n  )\n}\n"],"names":["clampProgress","value","LaunchLoader","caption","stops","progress","dotColor","busy","backdrop","className","barId","useId","captionId","ramp","launchRamp","rootStyle","launchGround","launchSolid","jsxs","styles","jsx","LAUNCH_MESH","shape","i","launchShapeStyle","DotMatrixLoader"],"mappings":";;;;;AAoDA,SAASA,EAAcC,GAAuB;AAC5C,SAAO,KAAK,IAAI,KAAK,KAAK,IAAI,GAAGA,CAAK,CAAC;AACzC;AAUO,SAASC,EAAa;AAAA,EAC3B,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,WAAAC;AACF,GAAsB;AACpB,QAAMC,IAAQC,EAAA,GACRC,IAAYD,EAAA,GAEZV,IADc,OAAOI,KAAa,YAAY,OAAO,SAASA,CAAQ,IAChD,KAAK,MAAML,EAAcK,CAAQ,CAAC,IAAI,MAE5DQ,IAAOC,EAAWV,CAAK,GACvBW,IAAY;AAAA,IAChB,mBAAmBC,EAAaZ,CAAK;AAAA,IACrC,kBAAkBa,EAAYb,CAAK;AAAA,IACnC,GAAIE,IAAW,EAAE,yBAAyBA,MAAa,CAAA;AAAA,EAAC;AAG1D,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWT,IAAY,GAAGU,EAAO,IAAI,IAAIV,CAAS,KAAKU,EAAO;AAAA,MAC9D,OAAOJ;AAAA,MACP,aAAWR;AAAA,MACX,oBAAkBG;AAAA,MAClB,sBAAmB;AAAA,MAOnB,UAAA;AAAA,QAAA,gBAAAU,EAAC,OAAA,EAAI,WAAWD,EAAO,MAAM,eAAY,QACtC,UAAAE,EAAY,IAAI,CAACC,GAAOC,MACvB,gBAAAH;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAWD,EAAO;AAAA,YAClB,OAAOK,EAAiBF,GAAOT,CAAI;AAAA,UAAA;AAAA,UAF9BU;AAAA,QAAA,CAIR,GACH;AAAA,QAECf,IAAW,gBAAAY,EAAC,OAAA,EAAI,WAAWD,EAAO,UAAW,aAAS,IAAS;AAAA,QAEhE,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,SAIrB,UAAA;AAAA,UAAA,gBAAAC,EAACK,GAAA,EAAgB,OAAO,MAAM,WAAWN,EAAO,MAAM;AAAA,UAItD,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAIR;AAAA,cACJ,WAAWS,EAAO;AAAA,cAClB,MAAK;AAAA,cACL,mBAAiBP;AAAA,cACjB,iBAAe;AAAA,cACf,iBAAe;AAAA,cACf,iBAAeX,KAAS;AAAA,cACxB,sBAAoBA,MAAU;AAAA,cAC9B,OAAOA,MAAU,OAAO,SAAa,EAAE,qBAAqBA,EAAA;AAAA,cAK5D,UAAA;AAAA,gBAAA,gBAAAmB,EAAC,OAAA,EAAI,WAAWD,EAAO,MAAA,CAAO;AAAA,gBAC9B,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,KAAA,CAAM;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAY/B,gBAAAC,EAAC,OAAE,IAAIR,GAAW,WAAWO,EAAO,SAAS,aAAU,UACpD,UAAAhB,EAAA,CACH;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,26 @@
+const t = "_root_1xhf4_6", o = "_mesh_1xhf4_8", _ = "_shape_1xhf4_81", c = "_backdrop_1xhf4_90", s = "_content_1xhf4_13", n = "_dots_1xhf4_127", a = "_bar_1xhf4_160", h = "_track_1xhf4_168", f = "_fill_1xhf4_176", r = "_caption_1xhf4_202", e = {
+  root: t,
+  mesh: o,
+  shape: _,
+  backdrop: c,
+  content: s,
+  dots: n,
+  bar: a,
+  track: h,
+  fill: f,
+  caption: r
+};
+export {
+  c as backdrop,
+  a as bar,
+  r as caption,
+  s as content,
+  e as default,
+  n as dots,
+  f as fill,
+  o as mesh,
+  t as root,
+  _ as shape,
+  h as track
+};
+//# sourceMappingURL=LaunchLoader.module.css.js.map

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

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

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

@@ -1,15 +1,15 @@
-const t = "_row_16hr7_4", o = "_icon_16hr7_41", n = "_label_16hr7_66", _ = "_trailingSlot_16hr7_92", c = "_count_16hr7_106", r = "_countUrgent_16hr7_110", l = {
+const t = "_row_w21mf_4", o = "_icon_w21mf_41", n = "_label_w21mf_66", _ = "_trailingSlot_w21mf_92", c = "_count_w21mf_106", l = "_countUrgent_w21mf_110", r = {
   row: t,
   icon: o,
   label: n,
   trailingSlot: _,
   count: c,
-  countUrgent: r
+  countUrgent: l
 };
 export {
   c as count,
-  r as countUrgent,
-  l as default,
+  l as countUrgent,
+  r as default,
   o as icon,
   n as label,
   t as row,

package/dist/components/NotificationCenter/NotificationCenter.d.ts

@@ -0,0 +1,162 @@
+import { ElementType } from 'react';
+import { NotificationCenterLabels } from './labels';
+/**
+ * One notification, as the host supplies it. **This package invents no backend
+ * and fetches nothing** -- the array is the host's, and so is every value in a
+ * row (B33-494's data decision, 2026-10-06; CLAUDE.md, "it renders what it is
+ * given").
+ *
+ * The shape is deliberately generic. Nothing in it names a lead, a campaign or a
+ * prospect, and nothing in it should: a field that carried product meaning is
+ * how a shared component turns back into four private ones (CLAUDE.md). A
+ * notification here is a title, where it came from, when, whether it has been
+ * read, and optionally somewhere to go.
+ */
+export interface NotificationCenterItem {
+    /** Stable identity for the row, the host's. Used as the React key, never rendered. */
+    id: string;
+    /** What happened, in the host's words. The row's first line. */
+    title: string;
+    /**
+     * Where it came from, in the host's words -- a product's display name, or
+     * something that is not a product at all ("Account"). The first half of the
+     * row's second line.
+     *
+     * A display string and not an identifier: `slug` below is what selects the
+     * artwork, and the two are separate for the same reason `AppSwitcherProduct`
+     * keeps `slug` and `name` apart. Identity owns names, and this package does
+     * not translate them.
+     */
+    source: string;
+    /**
+     * When it happened, **already formatted by the host** -- "12 minutes ago",
+     * "Yesterday", "3 Oct". The second half of the row's second line.
+     *
+     * **This package does not format it, and the choice is deliberate.** The chip
+     * formats its figures from a `locale` prop (B33-876), so the obvious move is
+     * to do the same here and take a `Date`. Three things separate the two.
+     *
+     * A number is a pure function of its value and a locale; a *relative* time is
+     * not. It needs a `now`, so the component would have to read a clock, and then
+     * re-read it on a timer or go stale on screen -- which is state, in a
+     * component whose whole contract is that it has none.
+     *
+     * It would also make this component's own fidelity gate unreproducible. The
+     * baseline for an unbuilt component is captured from the specimen route by the
+     * person approving it (CLAUDE.md, tests/baselines/README.md "Designed
+     * baselines"), and a panel that renders "12 minutes ago" from `Date.now()`
+     * renders a different string an hour later, so the diff would fail for reasons
+     * no change caused. `4,600` is `4,600` forever; "12 minutes ago" is not.
+     *
+     * And the hard part is editorial rather than linguistic. Where a product cuts
+     * over from "12 minutes ago" to "Yesterday" to a date is a policy each product
+     * is entitled to differ on, and `Intl.RelativeTimeFormat` does not decide it
+     * -- a caller has to pick the value and the unit before it can be called. The
+     * host already holds the raw timestamp under B33-494's decision; it is the
+     * side that can answer.
+     *
+     * `dateTime` below is how the machine-readable value still reaches the page.
+     */
+    time: string;
+    /**
+     * The machine-readable timestamp for the `<time>` element's `datetime`
+     * attribute -- an ISO 8601 string. Optional: supply it and the row's time is a
+     * `<time dateTime>`; omit it and the same text renders in a plain `<span>`.
+     *
+     * This is what `time` being preformatted costs and how the cost is paid back.
+     * A relative phrase on its own tells assistive technology and anything else
+     * reading the DOM nothing about *when*; the attribute carries the instant
+     * without this package deciding how to say it.
+     */
+    dateTime?: string;
+    /**
+     * Identity's product slug, selecting the ProductMark artwork for the row's
+     * tile. Optional, because a notification need not come from a product -- an
+     * account or security event does not, and the drawing's own fifth row is one.
+     * Omit it and the row draws the panel's bell instead (see `SourceBellMark`).
+     *
+     * A slug this package has no artwork for degrades to the bare tile rather than
+     * throwing, exactly as it does in the switcher (ADR-0003).
+     */
+    slug?: string;
+    /**
+     * Where selecting this notification goes. Optional: a row with no `href` is
+     * not a link and is drawn as plain content, which is the honest rendering for
+     * something there is nothing to open for.
+     *
+     * A row that does navigate renders through `linkComponent` (ADR-0011).
+     */
+    href?: string;
+    /**
+     * Whether this notification is still unread. Defaults to `false`.
+     *
+     * **The flag is spelled `unread` and defaults to not-lit on purpose**, which
+     * is the same decision the TopBar's bell already carries and for the same
+     * reason B33-494 records: a permanently lit marker on a panel nobody has
+     * cleared trains people to ignore it, and that attention does not come back.
+     * A host that does not track read state passes nothing and gets a quiet panel;
+     * a host that does says so row by row.
+     */
+    unread?: boolean;
+}
+export interface NotificationCenterProps {
+    /**
+     * The notifications, in the order the host wants them read. Rendered whole --
+     * this component does not sort, filter, page or truncate, because every one of
+     * those is a decision about data it does not own.
+     *
+     * An empty array is not an error state. It is the empty rendering, and it is
+     * the state most consumers see first: a host with no feed wired yet has
+     * nothing to pass (B33-494).
+     */
+    items: NotificationCenterItem[];
+    /**
+     * Where the footer's "View all notifications" link goes. Omit it and the
+     * footer is not rendered -- a link to a page the host does not have is worse
+     * than no link.
+     *
+     * The empty rendering never draws the footer, whether this is supplied or not:
+     * there is nothing to see more of.
+     */
+    viewAllHref?: string;
+    /**
+     * Every user-facing string that is not row data. Each field defaults to
+     * English, and a field left out -- or supplied as `undefined`, which is what a
+     * missed next-intl key looks like -- keeps its default (B33-873).
+     */
+    labels?: Partial<NotificationCenterLabels>;
+    /**
+     * The element a row with an `href` renders through, and the footer link with
+     * it. Defaults to a plain `a`; a router-owning consumer passes its own so the
+     * rows route client-side with the locale prefix intact (ADR-0011, B33-847).
+     */
+    linkComponent?: ElementType;
+}
+/**
+ * The panel behind the top bar's bell: everything the four products did, in one
+ * list, with the unread ones marked (B33-494).
+ *
+ * **It is presentational and it owns no feed.** The notifications arrive as a
+ * prop and this package neither fetches, stores nor subscribes to anything --
+ * there is no cross-product event source in any repo, and a component that
+ * implied one would make the shared shell the place four services integrate,
+ * which is the opposite of the dependency direction every other component here
+ * has. That was decided on the ticket on 2026-10-06; the feed is separate work,
+ * outside 1.0.
+ *
+ * **This is Stage A: static.** The panel renders, the tabs and the header action
+ * draw, and nothing responds to anything (CLAUDE.md, "Presentational-first").
+ * There is no open state here because there is no trigger here either: the bell
+ * is the TopBar's, and connecting the two -- `useAnchoredOverlay` for the shared
+ * dismissal contract (ADR-0009), the bell's `aria-haspopup`/`aria-expanded`, the
+ * filter the tabs select, the mark-all handler -- is Stage B, after a human has
+ * approved what this draws.
+ *
+ * **A disclosure, not a menu** (ADR-0010): the panel carries no widget role, the
+ * tabs are not an ARIA `tablist`, the rows are the real links they already are,
+ * and Tab is the document's own order, so the header button, both filters, every
+ * row and the footer link are each their own tab stop. An ARIA tab set or a
+ * `menu` would promise a composite widget with one tab stop and arrow-key
+ * traversal, which is the promise ADR-0010 took the switcher out of.
+ */
+export declare function NotificationCenter({ items, viewAllHref, labels, linkComponent, }: NotificationCenterProps): import("react").JSX.Element;

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

@@ -0,0 +1,34 @@
+/**
+ * The bell on the empty state, standing alone above "You're all caught up".
+ *
+ * Decorative: the two lines beneath it say the same thing in words, so a screen
+ * reader that announced it as well would say the state twice. It is sized in CSS
+ * (`--spacing-7`) rather than by width/height attributes, which is why it takes
+ * no size prop.
+ */
+export declare function EmptyBell(): import("react").JSX.Element;
+/**
+ * The tile a row draws when its notification names no product -- an account or
+ * security event, which is what the drawing's fifth row is.
+ *
+ * **Why this is not a `ProductMark` with an unknown slug.** It would draw the
+ * right thing by accident: ADR-0003's safe degrade gives an unrecognised slug
+ * the bare tile with no glyph, which is a product whose artwork has not landed.
+ * A notification with no product is not that. It is a row that correctly has no
+ * product, and drawing it as a gap says the mark failed to load. So the fallback
+ * is a bell -- the panel's own symbol, which is what the drawing puts there.
+ *
+ * It is still drawn ProductMark's way rather than as a styled `div`: a `rect` on
+ * a 40-unit grid, its corner taken from `--radius-product-tile`, so the two
+ * kinds of tile in the same column share one corner at every size instead of
+ * agreeing to a px value that only matches at 22px. The glyph is on the same
+ * 16-unit grid as `EmptyBell` above and the group transform insets it into the
+ * middle 20 of the 40, which is the inset ProductMark gives its four -- so the
+ * bell's ink lands at the weight the product glyphs do (1.3 on the 16 grid,
+ * scaled 1.25, is 0.89px of stroke at 22px, which is what Paper draws).
+ *
+ * Decorative like ProductMark is here: the row's text names the source.
+ */
+export declare function SourceBellMark({ size }: {
+    size: number;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,112 @@
+/** Every user-facing string the notification centre renders that is not row data. */
+export interface NotificationCenterLabels {
+    /**
+     * The panel's heading, and through it the panel's accessible name. Default
+     * "Notifications".
+     *
+     * It is drawn as a real heading and the panel is pointed at it with
+     * `aria-labelledby`, rather than carrying a second copy of the same word in an
+     * `aria-label`. ADR-0010 says a disclosure panel carries no widget role and
+     * takes a name without one; it does not say the name has to be invisible, and
+     * a name that is already on the screen is one fewer string to translate and
+     * one fewer place for the two to disagree.
+     */
+    title: string;
+    /**
+     * The header's action, which clears every unread marker. Default
+     * "Mark all as read".
+     *
+     * Stage A renders the control and wires nothing to it -- the handler is Stage
+     * B's, with the rest of the interaction (CLAUDE.md, "Presentational-first").
+     */
+    markAllAsRead: string;
+    /** The first filter tab, showing every notification. Default "All". */
+    all: string;
+    /**
+     * The second filter tab, showing only the unread ones. Default "Unread".
+     *
+     * The count beside it is not a label: it is `items` counted, so it needs no
+     * translation and cannot disagree with the list under it.
+     */
+    unread: string;
+    /**
+     * The marker on an unread row, announced rather than drawn. Default "Unread".
+     *
+     * The drawing carries unread as a 6px orange dot and nothing else, which is a
+     * colour-only distinction and reaches nobody using a screen reader. This is
+     * the same state in words, in the row, visually hidden (CLAUDE.md,
+     * "Accessibility is part of done"). It repeats `unread` by default because it
+     * is the same English word, and it is a separate field because a locale is
+     * entitled to tag a row differently from how it names a filter.
+     */
+    unreadItem: string;
+    /**
+     * The second line of a row, around the host's source and time. Supplied whole
+     * so the consumer owns word order and the separator.
+     *
+     * Placeholders: `%source%`, `%time%`. Default (en) `%source% · %time%`.
+     *
+     * Both values are the host's, preformatted -- see `NotificationCenterItem`
+     * for why the time arrives as a string this package never computes.
+     */
+    meta: string;
+    /** The footer link out to the full list. Default "View all notifications". */
+    viewAll: string;
+    /** The empty state's headline. Default "You're all caught up". */
+    emptyTitle: string;
+    /**
+     * The line under the empty state's headline. Default
+     * "Nothing from any product needs your attention."
+     *
+     * **The empty state is not an edge case.** A host that has not wired a feed
+     * yet renders it, which makes it the state most consumers see first (B33-494's
+     * data decision). A locale that leaves it untranslated is a blank panel.
+     */
+    emptyBody: string;
+}
+/**
+ * The English defaults. A consumer that passes nothing renders the panel in
+ * English, which is what the specimen route shows and what a human will be
+ * looking at when they approve this component at its fidelity gate.
+ *
+ * Frozen, and frozen without a type annotation. It is a public export reaching
+ * four products on a version bump: `const` protects the binding and not the
+ * contents, so a consumer aliasing it -- `const mine = defaultNotificationCenterLabels;
+ * mine.title = 'Notifications'` -- would silently rename every panel in the
+ * process (B33-877), and an annotation here would widen the `Readonly` back off
+ * the emitted `.d.ts` and turn that into a runtime TypeError rather than a
+ * compile error (B33-916).
+ *
+ * The freeze is shallow. No field here is an object and none should become one
+ * without re-reading B33-916's note: a nested label defeats the guard silently.
+ */
+export declare const defaultNotificationCenterLabels: Readonly<{
+    title: string;
+    markAllAsRead: string;
+    all: string;
+    unread: string;
+    unreadItem: string;
+    meta: string;
+    viewAll: string;
+    emptyTitle: string;
+    emptyBody: string;
+}>;
+/**
+ * The labels as the render consumes them: `meta` presented as a function of its
+ * two values, so the component writes `t.meta(…)` and never handles a template
+ * itself. Internal, and the interpolation has to happen somewhere.
+ */
+export interface ResolvedNotificationCenterLabels extends Omit<NotificationCenterLabels, 'meta'> {
+    meta: (source: string, time: string) => string;
+}
+/**
+ * Merge a consumer's partial `labels` onto the English defaults, treating an
+ * explicitly-`undefined` field as unsupplied, and present `meta` as a function of
+ * its two values.
+ *
+ * `{ title: undefined }` is what one missing next-intl key looks like at the
+ * call site. It must fall back to English rather than blank the heading -- which
+ * here would also unname the panel, since the heading is what names it
+ * (B33-873).
+ */
+export declare function resolveNotificationCenterLabels(labels?: Partial<NotificationCenterLabels>): ResolvedNotificationCenterLabels;

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

@@ -4,6 +4,21 @@
  * adding a slug without artwork is a compile error rather than a mark that
  * silently draws nothing.
  *
+ * **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
+ * published type contract: a consumer could write `Record<ProductSlug, ...>` or
+ * switch exhaustively over it, and then artwork landing for a fifth 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.
+ *
+ * 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
@@ -66,10 +81,48 @@
  * 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.
  */
 export declare const PRODUCT_SLUGS: readonly ["wallet", "boostscore", "boostvoice", "boostoutbound"];
-/** One of the slugs this package draws a mark for. Not every slug Identity serves -- see above. */
+/**
+ * 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.
+ */
 export type ProductSlug = (typeof PRODUCT_SLUGS)[number];
+/**
+ * Does this package draw a mark for `slug`? The supported way to ask, and the
+ * only thing about the artwork inventory the package publishes (B33-1269).
+ *
+ * **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
+ * this gets the installed version's answer, and keeps working when the next mark
+ * ships.
+ *
+ * **A `false` is not an error and needs no guard around it.** `ProductMark`
+ * renders a slug it has no glyph for as the bare tile rather than throwing
+ * (ADR-0003's safe degrade), and in a switcher that row is still named, still
+ * linked and still clickable -- only the glyph is missing. So do not use this to
+ * filter a served registry, to hide a product's row, or to decide to substitute a
+ * drawing of your own: every one of those turns a missing glyph into a missing
+ * product, and the registry running ahead of the artwork is the supported state.
+ *
+ * It is here for a caller that needs to *know* rather than to branch on
+ * rendering -- a consumer test asserting its own hardcoded fixtures still draw
+ * something, or a report of which served slugs have artwork yet.
+ */
+export declare function hasProductMark(slug: string): boolean;
 export interface ProductMarkProps {
     /**
      * Identity's product slug. An unknown one -- a product the served registry