@boost33/ui 0.2.0 → 0.3.1

package/dist/components/WalletChip/labels.js

@@ -0,0 +1,38 @@
+const c = Object.freeze({
+  region: "Wallet balance",
+  name: "Wallet",
+  unit: "tokens",
+  balanceUnknown: "Balance unknown",
+  granted: "Granted",
+  purchased: "Purchased",
+  grantExpiry: "Granted expires {date} · burns first",
+  topUp: "Top up",
+  railFigure: "{figure}k",
+  railBalance: "Wallet balance {balance}",
+  railBalanceUnknown: "Wallet balance unknown",
+  railUnknown: "unknown",
+  bar: "{granted} granted and {purchased} purchased of {remaining} remaining"
+});
+function r(t, e) {
+  return t.replace(
+    /\{(\w+)\}/g,
+    (n, a) => Object.hasOwn(e, a) ? e[a] ?? n : n
+  );
+}
+function o(t) {
+  const e = Object.fromEntries(
+    Object.entries(t ?? {}).filter(([, a]) => a !== void 0)
+  ), n = { ...c, ...e };
+  return {
+    ...n,
+    grantExpiry: (a) => typeof n.grantExpiry == "function" ? n.grantExpiry(a) : r(n.grantExpiry, { date: a }),
+    railFigure: (a) => typeof n.railFigure == "function" ? n.railFigure(a) : r(n.railFigure, { figure: a }),
+    railBalance: (a) => typeof n.railBalance == "function" ? n.railBalance(a) : r(n.railBalance, { balance: a }),
+    bar: (a, l, i) => typeof n.bar == "function" ? n.bar(a, l, i) : r(n.bar, { granted: a, purchased: l, remaining: i })
+  };
+}
+export {
+  c as defaultWalletChipLabels,
+  o as resolveWalletChipLabels
+};
+//# sourceMappingURL=labels.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"labels.js","sources":["../../../src/components/WalletChip/labels.ts"],"sourcesContent":["// The chip is the only component in the package that renders words. Every one\n// of them lives here as a prop with an English default, so a French-default\n// consumer (the first two are) can translate the chip without the package\n// taking an i18n dependency -- CLAUDE.md, \"a component here renders what it is\n// given\". This is the same argument grantExpires and burnNote already made,\n// applied to the strings that were still English literals in the render.\n//\n// Three of those strings carry a value, and word order is not a property of\n// English: \"Granted expires 30 Sep\" puts the date where English puts it, and a\n// translation cannot be reassembled from fragments on the consumer's side. The\n// shape that solves that and nothing else is a function -- and a function is\n// the one thing that cannot be a prop of a Client Component rendered from a\n// React Server Component. React's Flight serializer walks the whole prop graph\n// and throws on any function it finds, nested or not, in production as well as\n// in development:\n//\n//   Functions cannot be passed directly to Client Components unless you\n//   explicitly expose it by marking it with \"use server\".\n//\n// `AppShell.wallet` is a ReactNode slot, so it is the *consumer's page* that\n// constructs `<WalletChip …/>`, and a Server Component page is the default way\n// the shell is meant to be used. A labels object that cannot cross that\n// boundary is a labels object most consumers cannot pass (B33-880).\n//\n// So each of the three takes either shape. The string form spells the value's\n// position with a `{placeholder}`, which is data all the way down and crosses\n// the boundary intact; it is the form the defaults use and the form the\n// specimen and the CHANGELOG demonstrate. The function form still works\n// unchanged, for a Client Component consumer that wants a real function --\n// next-intl's ICU plurals, an Intl.ListFormat call -- and that is a consumer\n// already on the client, where functions are ordinary props.\n//\n// B33-876 added a fourth of the same kind, `railFigure`. The rail's balance is\n// a number the `locale` prop formats -- \"4.6\" or \"4,6\" -- followed by a mark\n// that is a word and not a number: English \"k\", German \"Tsd.\", and French with\n// a space in front of it that English does not have. Intl cannot supply it (its\n// own compact notation renders German four-digit balances unabbreviated, which\n// does not fit a 56px rail -- see format.ts), so it belongs here, in the same\n// template shape, for the same reason: the consumer owns where the mark goes.\n\n/**\n * Every user-facing string the chip renders. Supplied whole -- the strings that\n * carry a value take a `{placeholder}` template (or a function) rather than\n * fragments, because word order is not a property of English and cannot be\n * reassembled on the consumer's side.\n *\n * `grantExpiry`, `railFigure`, `railBalance` and `bar` each accept two shapes.\n *\n * A **template** is a plain string marking the value's position with a\n * `{placeholder}` -- `'Granted expires {date} · burns first'`. It is data all\n * the way down, so the whole `labels` object survives the React Server Component\n * boundary and a Next App Router page can pass it. **This is the recommended\n * form**, and the one the defaults use.\n *\n * A **function** of the same values still works unchanged. It is never\n * serializable, so it only reaches the chip from a Client Component, but it is\n * the escape hatch when the sentence needs logic a template cannot express --\n * ICU plurals, an `Intl.ListFormat` call.\n *\n * In a template, a `{name}` the label does not define is left exactly as written\n * -- a locale whose copy genuinely contains braces is not mangled, and a\n * misspelled placeholder shows up in the rendering rather than silently\n * blanking. A placeholder a template omits is simply not rendered: a locale that\n * does not need a figure is allowed not to name it.\n */\nexport interface WalletChipLabels {\n  /** Accessible name for the expanded chip's status region. Default \"Wallet balance\". */\n  region: string\n  /** The chip header. Default \"Wallet\". */\n  name: string\n  /** The unit rendered beside the figure. Default \"tokens\". */\n  unit: string\n  /** Screen-reader-only text in the figure when the balance is unknown. Default \"Balance unknown\". */\n  balanceUnknown: string\n  /** The granted side of the split -- granted burns first. Default \"Granted\". */\n  granted: string\n  /** The purchased side of the split -- purchased never expires. Default \"Purchased\". */\n  purchased: string\n  /**\n   * The footer, around the preformatted expiry date. Supplied whole so the\n   * consumer owns word order.\n   *\n   * Placeholder: `{date}`. Default (en) `Granted expires {date} · burns first`.\n   * A function form `(date) => string` is also accepted.\n   */\n  grantExpiry: string | ((date: string) => string)\n  /** The top-up button. Default \"Top up\". */\n  topUp: string\n  /**\n   * The rail's abbreviated balance, around the one-decimal-thousand figure\n   * (e.g. \"4.6\"). Both the visible text in the 56px rail and the figure that\n   * `railBalance` is given.\n   *\n   * Placeholder: `{figure}`. Default (en) `{figure}k`. A function form\n   * `(figure) => string` is also accepted.\n   *\n   * The figure itself is formatted for `locale` -- \"4.6\" in `en-US`, \"4,6\" in\n   * `fr-FR` -- but the mark after it is a word, and locales disagree about it:\n   * French writes \"4,6 k\" with a space, German abbreviates a thousand \"Tsd.\".\n   * So the mark is a label like every other word the chip renders, and a\n   * template rather than a bare suffix, because a locale is entitled to put the\n   * mark somewhere other than the end (B33-876).\n   */\n  railFigure: string | ((figure: string) => string)\n  /**\n   * The rail group's accessible name, around the abbreviated balance (e.g. \"4.6k\").\n   *\n   * Placeholder: `{balance}`. Default (en) `Wallet balance {balance}`. A function\n   * form `(balance) => string` is also accepted.\n   */\n  railBalance: string | ((balance: string) => string)\n  /** The rail group's accessible name when the balance is unknown. Default \"Wallet balance unknown\". */\n  railBalanceUnknown: string\n  /** Screen-reader-only marker on the rail when the balance is unknown. Default \"unknown\". */\n  railUnknown: string\n  /**\n   * The bar's accessible label, around the three preformatted figures. Assembled\n   * whole rather than concatenated from fragments -- the shape that cannot be\n   * translated at all otherwise.\n   *\n   * Placeholders: `{granted}`, `{purchased}`, `{remaining}`. Default (en)\n   * `{granted} granted and {purchased} purchased of {remaining} remaining`. A\n   * function form `(granted, purchased, remaining) => string` is also accepted.\n   */\n  bar: string | ((granted: string, purchased: string, remaining: string) => string)\n}\n\n/**\n * The English defaults. A consumer that passes nothing renders exactly what the\n * chip rendered before this prop existed, so the wallet baselines do not move.\n *\n * **Every field is a string.** That is what makes `labels={defaultWalletChipLabels}`\n * and `labels={{ ...defaultWalletChipLabels, name: 'Portefeuille' }}` -- the\n * pattern the specimen shows and this package's own advice recommends -- legal\n * from a Server Component. The four value-carrying defaults are templates, and\n * the rendered output is character-for-character what the function defaults\n * produced (B33-880).\n *\n * Frozen because it is a public export reaching four products on a version bump.\n * `const` protects the binding, not the contents: without the freeze, a consumer\n * aliasing it by reference -- `const mine = defaultWalletChipLabels; mine.name =\n * 'Portefeuille'` -- would silently rename every chip in the process (B33-877).\n */\nexport const defaultWalletChipLabels = Object.freeze({\n  region: 'Wallet balance',\n  name: 'Wallet',\n  unit: 'tokens',\n  balanceUnknown: 'Balance unknown',\n  granted: 'Granted',\n  purchased: 'Purchased',\n  grantExpiry: 'Granted expires {date} · burns first',\n  topUp: 'Top up',\n  railFigure: '{figure}k',\n  railBalance: 'Wallet balance {balance}',\n  railBalanceUnknown: 'Wallet balance unknown',\n  railUnknown: 'unknown',\n  bar: '{granted} granted and {purchased} purchased of {remaining} remaining',\n} satisfies WalletChipLabels)\n\n/**\n * The labels as the render consumes them: the four value-carrying fields\n * normalised to functions, whichever shape the consumer supplied. The component\n * calls `t.bar(…)` either way and never learns which form it was given, so the\n * union costs the render nothing -- and, in particular, the lazy call that keeps\n * a consumer's `bar` off the degraded unknown path (B33-875) still works.\n */\nexport interface ResolvedWalletChipLabels\n  extends Omit<WalletChipLabels, 'grantExpiry' | 'railFigure' | 'railBalance' | 'bar'> {\n  grantExpiry: (date: string) => string\n  railFigure: (figure: string) => string\n  railBalance: (balance: string) => string\n  bar: (granted: string, purchased: string, remaining: string) => string\n}\n\n/**\n * Fill a template's `{placeholder}`s from `values`.\n *\n * A name not in `values` is left verbatim, so misspelled or deliberate braces\n * survive to the rendering rather than disappearing. The replacement runs\n * through a callback, so a `$` in a formatted figure is a `$` and not a\n * `String.prototype.replace` substitution pattern.\n */\nfunction fillTemplate(template: string, values: Record<string, string>): string {\n  return template.replace(/\\{(\\w+)\\}/g, (whole, key: string) =>\n    Object.hasOwn(values, key) ? (values[key] ?? whole) : whole,\n  )\n}\n\n/**\n * Merge a consumer's partial `labels` onto the English defaults, treating an\n * explicitly-`undefined` field as unsupplied, and normalise the four\n * value-carrying fields to functions.\n *\n * A next-intl `t('...')` returns `undefined` on a missed key, so\n * `{ name: undefined }` is what one missing translation out of thirteen looks like\n * at the call site -- it must fall back to English, not overwrite the default\n * with `undefined` and blank the header, unname the button, or crash on\n * `t.bar(...)` (B33-873). A plain object spread copies the `undefined` across; a\n * per-field skip does not.\n */\nexport function resolveWalletChipLabels(labels?: Partial<WalletChipLabels>): ResolvedWalletChipLabels {\n  const supplied = Object.fromEntries(\n    Object.entries(labels ?? {}).filter(([, value]) => value !== undefined),\n  ) as Partial<WalletChipLabels>\n  const merged = { ...defaultWalletChipLabels, ...supplied }\n  return {\n    ...merged,\n    grantExpiry: (date) =>\n      typeof merged.grantExpiry === 'function'\n        ? merged.grantExpiry(date)\n        : fillTemplate(merged.grantExpiry, { date }),\n    railFigure: (figure) =>\n      typeof merged.railFigure === 'function'\n        ? merged.railFigure(figure)\n        : fillTemplate(merged.railFigure, { figure }),\n    railBalance: (balance) =>\n      typeof merged.railBalance === 'function'\n        ? merged.railBalance(balance)\n        : fillTemplate(merged.railBalance, { balance }),\n    bar: (granted, purchased, remaining) =>\n      typeof merged.bar === 'function'\n        ? merged.bar(granted, purchased, remaining)\n        : fillTemplate(merged.bar, { granted, purchased, remaining }),\n  }\n}\n"],"names":["defaultWalletChipLabels","fillTemplate","template","values","whole","key","resolveWalletChipLabels","labels","supplied","value","merged","date","figure","balance","granted","purchased","remaining"],"mappings":"AA+IO,MAAMA,IAA0B,OAAO,OAAO;AAAA,EACnD,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,WAAW;AAAA,EACX,aAAa;AAAA,EACb,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,KAAK;AACP,CAA4B;AAyB5B,SAASC,EAAaC,GAAkBC,GAAwC;AAC9E,SAAOD,EAAS;AAAA,IAAQ;AAAA,IAAc,CAACE,GAAOC,MAC5C,OAAO,OAAOF,GAAQE,CAAG,IAAKF,EAAOE,CAAG,KAAKD,IAASA;AAAA,EAAA;AAE1D;AAcO,SAASE,EAAwBC,GAA8D;AACpG,QAAMC,IAAW,OAAO;AAAA,IACtB,OAAO,QAAQD,KAAU,EAAE,EAAE,OAAO,CAAC,CAAA,EAAGE,CAAK,MAAMA,MAAU,MAAS;AAAA,EAAA,GAElEC,IAAS,EAAE,GAAGV,GAAyB,GAAGQ,EAAA;AAChD,SAAO;AAAA,IACL,GAAGE;AAAA,IACH,aAAa,CAACC,MACZ,OAAOD,EAAO,eAAgB,aAC1BA,EAAO,YAAYC,CAAI,IACvBV,EAAaS,EAAO,aAAa,EAAE,MAAAC,GAAM;AAAA,IAC/C,YAAY,CAACC,MACX,OAAOF,EAAO,cAAe,aACzBA,EAAO,WAAWE,CAAM,IACxBX,EAAaS,EAAO,YAAY,EAAE,QAAAE,GAAQ;AAAA,IAChD,aAAa,CAACC,MACZ,OAAOH,EAAO,eAAgB,aAC1BA,EAAO,YAAYG,CAAO,IAC1BZ,EAAaS,EAAO,aAAa,EAAE,SAAAG,GAAS;AAAA,IAClD,KAAK,CAACC,GAASC,GAAWC,MACxB,OAAON,EAAO,OAAQ,aAClBA,EAAO,IAAII,GAASC,GAAWC,CAAS,IACxCf,EAAaS,EAAO,KAAK,EAAE,SAAAI,GAAS,WAAAC,GAAW,WAAAC,EAAA,CAAW;AAAA,EAAA;AAEpE;"}

package/dist/components/Wordmark/Wordmark.js

@@ -0,0 +1,12 @@
+import { jsxs as l, jsx as s } from "react/jsx-runtime";
+import a from "./Wordmark.module.css.js";
+function n({ mark: r, collapsed: e = !1 }) {
+  return /* @__PURE__ */ l("div", { className: a.wordmark, "data-collapsed": e ? "true" : void 0, children: [
+    r != null && /* @__PURE__ */ s("span", { className: a.mark, "aria-hidden": "true", children: r }),
+    /* @__PURE__ */ s("span", { className: a.name, children: "Boost33" })
+  ] });
+}
+export {
+  n as Wordmark
+};
+//# sourceMappingURL=Wordmark.js.map

package/dist/components/Wordmark/Wordmark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Wordmark.js","sources":["../../../src/components/Wordmark/Wordmark.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport styles from './Wordmark.module.css'\n\nexport interface WordmarkProps {\n  /**\n   * The Boost33 mark -- the logo artwork, owned by its own ticket. Passed in\n   * rather than hardcoded here so the wordmark does not carry a second copy of\n   * the mark. On the rail it is all that shows.\n   */\n  mark?: ReactNode\n  /** Sidebar-on-the-rail state. Hides the \"Boost33\" name; the mark stays. */\n  collapsed?: boolean\n}\n\n// The lockup at the top of the sidebar: the Boost33 mark and the \"Boost33\"\n// name beside it. On the rail the name drops to the accessibility tree and the\n// mark stands alone.\nexport function Wordmark({ mark, collapsed = false }: WordmarkProps) {\n  return (\n    <div className={styles.wordmark} data-collapsed={collapsed ? 'true' : undefined}>\n      {mark != null && (\n        <span className={styles.mark} aria-hidden=\"true\">\n          {mark}\n        </span>\n      )}\n      <span className={styles.name}>Boost33</span>\n    </div>\n  )\n}\n"],"names":["Wordmark","mark","collapsed","jsxs","styles","jsx"],"mappings":";;AAiBO,SAASA,EAAS,EAAE,MAAAC,GAAM,WAAAC,IAAY,MAAwB;AACnE,SACE,gBAAAC,EAAC,SAAI,WAAWC,EAAO,UAAU,kBAAgBF,IAAY,SAAS,QACnE,UAAA;AAAA,IAAAD,KAAQ,0BACN,QAAA,EAAK,WAAWG,EAAO,MAAM,eAAY,QACvC,UAAAH,EAAA,CACH;AAAA,IAEF,gBAAAI,EAAC,QAAA,EAAK,WAAWD,EAAO,MAAM,UAAA,UAAA,CAAO;AAAA,EAAA,GACvC;AAEJ;"}

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

@@ -0,0 +1,12 @@
+const r = "_wordmark_1k88r_4", a = "_mark_1k88r_17", k = "_name_1k88r_35", m = {
+  wordmark: r,
+  mark: a,
+  name: k
+};
+export {
+  m as default,
+  a as mark,
+  k as name,
+  r as wordmark
+};
+//# sourceMappingURL=Wordmark.module.css.js.map

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

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

package/dist/index.d.ts

@@ -12,11 +12,17 @@ export { NavItem } from './components/NavItem/NavItem';
 export type { NavItemProps } from './components/NavItem/NavItem';
 export { WalletChip } from './components/WalletChip/WalletChip';
 export type { WalletChipProps } from './components/WalletChip/WalletChip';
+export { defaultWalletChipLabels } from './components/WalletChip/labels';
+export type { WalletChipLabels } from './components/WalletChip/labels';
 export { TopBar } from './components/TopBar/TopBar';
 export type { TopBarProps } from './components/TopBar/TopBar';
 export { PageHeader } from './components/PageHeader/PageHeader';
 export type { PageHeaderProps } from './components/PageHeader/PageHeader';
 export { AppShell } from './components/AppShell/AppShell';
 export type { AppShellProps, AppShellNavSection, AppShellNavItem } from './components/AppShell/AppShell';
-export { NAV_HEIGHT_BUDGET_PX, NAV_SECTION_HEADER_PX, NAV_ITEM_PX, NAV_SHELL_FIXED_PX, checkNavHeightBudget, measureNavHeight, navContentHeight, navBudgetForViewport, } from './nav-height-budget';
-export type { NavHeightBudget, NavSectionShape } from './nav-height-budget';
+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 { NAV_HEIGHT_BUDGET_PX, NAV_SECTION_HEADER_PX, NAV_ITEM_PX, NAV_SECTION_GAP_PX, NAV_FOCUS_GUTTER_PX, NAV_SHELL_FIXED_PX, NAV_SHELL_PACKAGE_FIXED_PX, NAV_SHELL_CONSUMER_SLOTS_PX, checkNavHeightBudget, measureNavHeight, navContentHeight, navBudgetForViewport, } from './nav-height-budget';
+export type { NavHeightBudget, NavRowCosts, NavSectionShape } from './nav-height-budget';

package/dist/index.js

@@ -1,423 +1,44 @@
-import { jsx as e, jsxs as a, Fragment as k } from "react/jsx-runtime";
-import { useRef as B, useEffect as I, useId as L } from "react";
-const H = 700, C = 40, E = 32, P = 198;
-function lt(t) {
-  return t.reduce(
-    (n, l) => n + (l.hasHeader ? C : 0) + l.itemCount * E,
-    0
-  );
-}
-function st(t) {
-  return t - P;
-}
-function U(t, n = H) {
-  return {
-    usedPx: t,
-    budgetPx: n,
-    fits: t <= n,
-    overBy: Math.max(0, t - n)
-  };
-}
-function T(t) {
-  return t.scrollHeight;
-}
-const G = "_sidebar_17kel_7", W = {
-  sidebar: G
-};
-function j({ label: t, collapsed: n = !1, children: l }) {
-  const i = B(null);
-  return R(i, t, l), /* @__PURE__ */ e("aside", { ref: i, className: W.sidebar, "aria-label": t, "data-collapsed": n ? "true" : void 0, children: l });
-}
-function R(t, n, l) {
-  I(() => {
-    if (process.env.NODE_ENV === "production") return;
-    const i = t.current;
-    if (!i) return;
-    const o = i.querySelector(":scope > nav");
-    if (!(o instanceof HTMLElement)) {
-      i.querySelector("nav") && console.warn(
-        `@boost33/ui Sidebar ("${n}"): the nav is nested inside another element, so it is not the sidebar's scroll region. Make the <nav> a direct child of the Sidebar, or a nav longer than the column will paint past its bottom edge instead of scrolling. See ADR-0005.`
-      );
-      return;
-    }
-    const s = U(T(o), o.clientHeight);
-    s.fits || console.warn(
-      `@boost33/ui Sidebar ("${n}"): the nav needs ${s.usedPx}px and the column has ${s.budgetPx}px for it, so it is ${s.overBy}px over and scrolling. Nothing is lost -- the wallet chip and footer stay pinned -- but the shell's nav budget is about ${H}px at a 900px viewport, and a nav past it is a nav worth cutting. navContentHeight() and checkNavHeightBudget(), exported from this package, check a nav's shape before it renders.`
-    );
-  }, [t, n, l]);
-}
-const V = "_section_3sxsg_5", O = "_header_3sxsg_13", y = {
-  section: V,
-  header: O
-};
-function F({ label: t, children: n }) {
-  const l = L();
-  return t == null ? /* @__PURE__ */ e("div", { className: y.section, children: n }) : /* @__PURE__ */ a("div", { className: y.section, role: "group", "aria-labelledby": l, children: [
-    /* @__PURE__ */ e("p", { id: l, className: y.header, children: t }),
-    n
-  ] });
-}
-const Z = "_wordmark_1k88r_4", D = "_mark_1k88r_17", X = "_name_1k88r_35", w = {
-  wordmark: Z,
-  mark: D,
-  name: X
-};
-function q({ mark: t, collapsed: n = !1 }) {
-  return /* @__PURE__ */ a("div", { className: w.wordmark, "data-collapsed": n ? "true" : void 0, children: [
-    t != null && /* @__PURE__ */ e("span", { className: w.mark, "aria-hidden": "true", children: t }),
-    /* @__PURE__ */ e("span", { className: w.name, children: "Boost33" })
-  ] });
-}
-const K = "_tile_5vhrh_12", Y = "_ring_5vhrh_16", J = "_mark_5vhrh_24", m = {
-  tile: K,
-  ring: Y,
-  mark: J
-}, Q = 24, ot = 20;
-function it({ size: t = Q, title: n, className: l }) {
-  const i = L(), o = n == null;
-  return /* @__PURE__ */ a(
-    "svg",
-    {
-      className: l != null ? `${m.mark} ${l}` : m.mark,
-      width: t,
-      height: t,
-      viewBox: "402.17 34.21 234.9 235",
-      role: o ? void 0 : "img",
-      "aria-hidden": o ? "true" : void 0,
-      "aria-labelledby": o ? void 0 : i,
-      children: [
-        !o && /* @__PURE__ */ e("title", { id: i, children: n }),
-        /* @__PURE__ */ e(
-          "path",
-          {
-            className: m.tile,
-            d: "M404.19,97c3.79-36.53,38.18-62.45,74.88-62.79q40-.37,80,0c43.66.4,77.69,34.58,78,78.28q.27,38.63,0,77.27c-.35,45.47-34.21,79.19-79.71,79.45q-38.62.23-77.24,0c-43.46-.34-77.66-34.79-77.95-78.34-.09-13,0-26.07,0-39.1m42.93-56V207c23.4,0,46.31.89,69.1-.33,14.41-.77,25.11-13.75,26.36-28.3,1.37-16-6.92-26.34-20.61-33.54,1.15-2.88,2.34-5.37,3.16-8C529,118.35,517,97.73,497.72,96,480.55,94.49,463.15,95.7,445.11,95.7Zm127.65,63.44a31.89,31.89,0,1,0-31.21-32.47A31.87,31.87,0,0,0,572.76,159.14ZM597.12,183V168.11H550.05V183Z"
-          }
-        ),
-        /* @__PURE__ */ e(
-          "path",
-          {
-            className: m.ring,
-            d: "M572.76,159.14a31.89,31.89,0,1,1,32.47-31.31A31.62,31.62,0,0,1,572.76,159.14Zm.56-47.42a15.53,15.53,0,1,0,15.61,16A15.44,15.44,0,0,0,573.32,111.72Z"
-          }
-        ),
-        /* @__PURE__ */ e(
-          "path",
-          {
-            className: m.tile,
-            d: "M460.7,190.94V160.11c17.05,0,33.68-.53,50.25.23,8.11.37,13.22,7.7,13,15.5s-5.75,14.69-13.73,14.94C493.9,191.3,477.58,190.94,460.7,190.94Z"
-          }
-        ),
-        /* @__PURE__ */ e(
-          "path",
-          {
-            className: m.tile,
-            d: "M460.65,142.62V112.36c12.1,0,24.4-.89,36.5.33,7.46.76,11.4,7.3,11.05,15-.37,8.1-5,14-12.95,14.64C484,143.3,472.52,142.62,460.65,142.62Z"
-          }
-        ),
-        /* @__PURE__ */ e(
-          "path",
-          {
-            className: m.tile,
-            d: "M573.32,111.72a15.53,15.53,0,1,1,0,31.06,15.53,15.53,0,1,1,0-31.06Z"
-          }
-        )
-      ]
-    }
-  );
-}
-const z = "_mark_1jt5g_6", ee = "_ground_1jt5g_17", x = {
-  mark: z,
-  ground: ee
-}, te = 20, ne = ["wallet", "score", "voice", "outbound"], re = {
-  // 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__ */ a(k, { children: [
-    /* @__PURE__ */ e("rect", { x: "5", y: "10", width: "30", height: "20", rx: "4", fill: "none", stroke: "currentColor", strokeWidth: "3" }),
-    /* @__PURE__ */ e("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.
-  score: /* @__PURE__ */ a(k, { children: [
-    /* @__PURE__ */ e("path", { d: "M6 26 A14 14 0 0 1 34 26", fill: "none", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round" }),
-    /* @__PURE__ */ e("line", { x1: "20", y1: "26", x2: "28", y2: "14", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round" }),
-    /* @__PURE__ */ e("circle", { cx: "20", cy: "26", r: "3", fill: "currentColor" })
-  ] }),
-  // A soundwave, tall in the middle: three pill bars, all centred on y=20.
-  voice: /* @__PURE__ */ a(k, { children: [
-    /* @__PURE__ */ e("rect", { x: "6", y: "14", width: "7", height: "12", rx: "3.5", fill: "currentColor" }),
-    /* @__PURE__ */ e("rect", { x: "16.5", y: "4", width: "7", height: "32", rx: "3.5", fill: "currentColor" }),
-    /* @__PURE__ */ e("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.
-  outbound: /* @__PURE__ */ a(k, { children: [
-    /* @__PURE__ */ e("line", { x1: "8", y1: "32", x2: "32", y2: "8", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" }),
-    /* @__PURE__ */ e("path", { d: "M16 8 H32 V24", fill: "none", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" })
-  ] })
-};
-function ae(t) {
-  return ne.includes(t);
-}
-function ct({ slug: t, size: n = te, muted: l, title: i, className: o }) {
-  const s = L(), c = i == null, d = ae(t) ? re[t] : null;
-  return /* @__PURE__ */ a(
-    "svg",
-    {
-      className: o != null ? `${x.mark} ${o}` : x.mark,
-      width: n,
-      height: n,
-      viewBox: "0 0 40 40",
-      role: c ? void 0 : "img",
-      "aria-hidden": c ? "true" : void 0,
-      "aria-labelledby": c ? void 0 : s,
-      children: [
-        !c && /* @__PURE__ */ e("title", { id: s, children: i }),
-        /* @__PURE__ */ e(
-          "rect",
-          {
-            className: x.ground,
-            width: "40",
-            height: "40",
-            style: { fill: l ? "var(--color-neutral-300)" : "var(--color-neutral-950)" }
-          }
-        ),
-        d && /* @__PURE__ */ e(
-          "g",
-          {
-            transform: "translate(10 10) scale(0.5)",
-            style: { color: "var(--color-primary-foreground)" },
-            children: d
-          }
-        )
-      ]
-    }
-  );
-}
-const le = "_row_16hr7_4", se = "_icon_16hr7_41", oe = "_label_16hr7_66", ie = "_trailingSlot_16hr7_92", ce = "_count_16hr7_106", de = "_countUrgent_16hr7_110", p = {
-  row: le,
-  icon: se,
-  label: oe,
-  trailingSlot: ie,
-  count: ce,
-  countUrgent: de
-};
-function he({ children: t, icon: n, active: l = !1, collapsed: i = !1, count: o, countUrgent: s = !1, href: c, onClick: d }) {
-  const h = {
-    "data-active": l ? "true" : void 0,
-    "data-collapsed": i ? "true" : void 0,
-    "aria-current": l ? "page" : void 0
-  }, _ = /* @__PURE__ */ a(k, { children: [
-    n != null && /* @__PURE__ */ e("span", { className: p.icon, "aria-hidden": "true", children: n }),
-    /* @__PURE__ */ e("span", { className: p.label, children: t }),
-    /* @__PURE__ */ e("span", { className: p.trailingSlot, children: o != null && /* @__PURE__ */ e("span", { className: s ? p.countUrgent : p.count, children: o }) })
-  ] });
-  return c ? /* @__PURE__ */ e("a", { className: p.row, href: c, onClick: d, ...h, children: _ }) : /* @__PURE__ */ e("button", { type: "button", className: p.row, onClick: d, ...h, children: _ });
-}
-const ue = "_chip_676ll_37", _e = "_header_676ll_74", me = "_name_676ll_83", pe = "_pill_676ll_94", ve = "_figure_676ll_103", ge = "_amount_676ll_118", Ne = "_unit_676ll_127", be = "_retry_676ll_132", fe = "_bar_676ll_141", ke = "_segmentGranted_676ll_162", ye = "_segmentPurchased_676ll_163", we = "_details_676ll_183", xe = "_split_676ll_192", $e = "_splitRow_676ll_199", Le = "_splitLabel_676ll_205", Se = "_splitAmount_676ll_213", Me = "_dotGranted_676ll_221", He = "_dotPurchased_676ll_222", Ae = "_footer_676ll_236", Be = "_burnNote_676ll_244", Ie = "_topUp_676ll_256", Ce = "_rail_676ll_310", Ee = "_railIcon_676ll_324", Pe = "_railFigure_676ll_330", Ue = "_srOnly_676ll_343", r = {
-  chip: ue,
-  header: _e,
-  name: me,
-  pill: pe,
-  figure: ve,
-  amount: ge,
-  unit: Ne,
-  retry: be,
-  bar: fe,
-  segmentGranted: ke,
-  segmentPurchased: ye,
-  details: we,
-  split: xe,
-  splitRow: $e,
-  splitLabel: Le,
-  splitAmount: Se,
-  dotGranted: Me,
-  dotPurchased: He,
-  footer: Ae,
-  burnNote: Be,
-  topUp: Ie,
-  rail: Ce,
-  railIcon: Ee,
-  railFigure: Pe,
-  srOnly: Ue
-};
-function N(t) {
-  return t.toLocaleString("en-US");
-}
-function S(t) {
-  return `${(t / 1e3).toFixed(1)}k`;
-}
-function Te({ className: t }) {
-  return /* @__PURE__ */ a("svg", { className: t, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-    /* @__PURE__ */ e("rect", { x: "3", y: "6", width: "18", height: "12", rx: "2" }),
-    /* @__PURE__ */ e("path", { d: "M3 10h18" })
-  ] });
-}
-function Ge({ className: t }) {
-  return /* @__PURE__ */ a("svg", { className: t, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-    /* @__PURE__ */ e("path", { d: "M21 12a9 9 0 1 1-2.64-6.36" }),
-    /* @__PURE__ */ e("path", { d: "M21 3v4h-4" })
-  ] });
-}
-const We = 0.8;
-function M({ granted: t, purchased: n, cycleTotal: l, tone: i }) {
-  const o = (d) => `${d / l * 100}%`, s = t + n, c = `${N(t)} granted and ${N(n)} purchased of ${N(s)} remaining`;
-  return /* @__PURE__ */ a("div", { className: r.bar, "data-tone": i, role: "img", "aria-label": c, children: [
-    /* @__PURE__ */ e("span", { className: r.segmentGranted, "data-testid": "segment-granted", style: { width: o(t) } }),
-    /* @__PURE__ */ e("span", { className: r.segmentPurchased, "data-testid": "segment-purchased", style: { width: o(n) } })
-  ] });
-}
-function dt({ granted: t, purchased: n, grantCycle: l, grantExpires: i, burnNote: o, unknown: s = !1, collapsed: c = !1, onTopUp: d }) {
-  const h = t + n, _ = l + n, b = l > 0 ? (l - t) / l : 0, u = !s && b >= We;
-  return c ? /* @__PURE__ */ a("div", { className: r.rail, role: "group", "aria-label": s ? "Wallet balance unknown" : `Wallet balance ${S(h)}`, tabIndex: 0, children: [
-    /* @__PURE__ */ e(Te, { className: r.railIcon }),
-    /* @__PURE__ */ e("span", { className: r.railFigure, children: s ? "—" : S(h) }),
-    s ? /* @__PURE__ */ e("span", { className: r.srOnly, children: "unknown" }) : /* @__PURE__ */ e(M, { granted: t, purchased: n, cycleTotal: _, tone: u ? "threshold" : "rest" })
-  ] }) : /* @__PURE__ */ a("div", { className: r.chip, role: "group", "aria-label": "Wallet balance", tabIndex: 0, "data-threshold": u ? "true" : void 0, "data-unknown": s ? "true" : void 0, children: [
-    /* @__PURE__ */ a("div", { className: r.header, children: [
-      /* @__PURE__ */ e("span", { className: r.name, children: "Wallet" }),
-      u && /* @__PURE__ */ a("span", { className: r.pill, children: [
-        Math.round(b * 100),
-        "%"
-      ] })
-    ] }),
-    s ? /* @__PURE__ */ a("div", { className: r.figure, children: [
-      /* @__PURE__ */ e("span", { className: r.amount, "aria-hidden": "true", children: "—" }),
-      /* @__PURE__ */ e(Ge, { className: r.retry }),
-      /* @__PURE__ */ e("span", { className: r.srOnly, children: "Balance unknown" })
-    ] }) : /* @__PURE__ */ a("div", { className: r.figure, children: [
-      /* @__PURE__ */ e("span", { className: r.amount, children: N(h) }),
-      /* @__PURE__ */ e("span", { className: r.unit, children: "tokens" })
-    ] }),
-    s ? /* @__PURE__ */ e("div", { className: r.bar, "data-tone": "unknown", "aria-hidden": "true" }) : /* @__PURE__ */ e(M, { granted: t, purchased: n, cycleTotal: _, tone: u ? "threshold" : "rest" }),
-    !s && !u && /* @__PURE__ */ a("div", { className: r.details, children: [
-      /* @__PURE__ */ a("dl", { className: r.split, children: [
-        /* @__PURE__ */ a("div", { className: r.splitRow, children: [
-          /* @__PURE__ */ a("dt", { className: r.splitLabel, children: [
-            /* @__PURE__ */ e("span", { className: r.dotGranted, "aria-hidden": "true" }),
-            "Granted"
-          ] }),
-          /* @__PURE__ */ e("dd", { className: r.splitAmount, children: N(t) })
-        ] }),
-        /* @__PURE__ */ a("div", { className: r.splitRow, children: [
-          /* @__PURE__ */ a("dt", { className: r.splitLabel, children: [
-            /* @__PURE__ */ e("span", { className: r.dotPurchased, "aria-hidden": "true" }),
-            "Purchased"
-          ] }),
-          /* @__PURE__ */ e("dd", { className: r.splitAmount, children: N(n) })
-        ] })
-      ] }),
-      i && /* @__PURE__ */ a("p", { className: r.footer, children: [
-        "Granted expires ",
-        i,
-        " · burns first"
-      ] })
-    ] }),
-    u && o && /* @__PURE__ */ e("p", { className: r.burnNote, children: o }),
-    !s && /* @__PURE__ */ e("button", { type: "button", className: r.topUp, "data-grown": u ? "true" : void 0, onClick: d, children: "Top up" })
-  ] });
-}
-const je = "_bar_r1jjn_6", Re = "_breadcrumb_r1jjn_19", Ve = "_actions_r1jjn_32", $ = {
-  bar: je,
-  breadcrumb: Re,
-  actions: Ve
-};
-function Oe({ breadcrumb: t, actions: n }) {
-  return /* @__PURE__ */ a("div", { className: $.bar, children: [
-    /* @__PURE__ */ e("div", { className: $.breadcrumb, children: t }),
-    n != null && /* @__PURE__ */ e("div", { className: $.actions, children: n })
-  ] });
-}
-const Fe = "_header_18p6i_13", Ze = "_headings_18p6i_23", De = "_title_18p6i_30", Xe = "_subtitle_18p6i_39", qe = "_actions_18p6i_47", f = {
-  header: Fe,
-  headings: Ze,
-  title: De,
-  subtitle: Xe,
-  actions: qe
-};
-function Ke({ title: t, subtitle: n, actions: l }) {
-  return /* @__PURE__ */ a("header", { className: f.header, children: [
-    /* @__PURE__ */ a("div", { className: f.headings, children: [
-      /* @__PURE__ */ e("h1", { className: f.title, children: t }),
-      n != null && /* @__PURE__ */ e("p", { className: f.subtitle, children: n })
-    ] }),
-    l != null && /* @__PURE__ */ e("div", { className: f.actions, children: l })
-  ] });
-}
-const Ye = "_shell_1xurb_10", Je = "_wordmark_1xurb_20", Qe = "_switcher_1xurb_26", ze = "_foot_1xurb_33", et = "_nav_1xurb_45", tt = "_main_1xurb_54", nt = "_content_1xurb_64", v = {
-  shell: Ye,
-  wordmark: Je,
-  switcher: Qe,
-  foot: ze,
-  nav: et,
-  main: tt,
-  content: nt
-};
-function ht({
-  product: t,
-  nav: n,
-  topBar: l,
-  pageHeader: i,
-  mark: o,
-  switcher: s,
-  wallet: c,
-  footer: d,
-  collapsed: h = !1,
-  children: _
-}) {
-  return /* @__PURE__ */ a("div", { className: v.shell, children: [
-    /* @__PURE__ */ a(j, { label: t, collapsed: h, children: [
-      /* @__PURE__ */ e("div", { className: v.wordmark, children: /* @__PURE__ */ e(q, { mark: o, collapsed: h }) }),
-      s != null && /* @__PURE__ */ e("div", { className: v.switcher, children: s }),
-      /* @__PURE__ */ e("nav", { "aria-label": t, className: v.nav, children: n.map((b, u) => (
-        // No room for a header at 56px, so on the rail every section renders
-        // headerless -- its rows collapse to their icons and line up.
-        /* @__PURE__ */ e(F, { label: h ? void 0 : b.label, children: b.items.map((g, A) => /* @__PURE__ */ e(
-          he,
-          {
-            icon: g.icon,
-            active: g.active,
-            collapsed: h,
-            count: g.count,
-            countUrgent: g.countUrgent,
-            href: g.href,
-            children: g.label
-          },
-          A
-        )) }, u)
-      )) }),
-      (c != null || d != null) && /* @__PURE__ */ a("div", { className: v.foot, children: [
-        c,
-        d
-      ] })
-    ] }),
-    /* @__PURE__ */ a("div", { className: v.main, children: [
-      /* @__PURE__ */ e(Oe, { ...l }),
-      /* @__PURE__ */ e(Ke, { ...i }),
-      /* @__PURE__ */ e("div", { className: v.content, children: _ })
-    ] })
-  ] });
-}
+import { Sidebar as o } from "./components/Sidebar/Sidebar.js";
+import { NavSection as _ } from "./components/NavSection/NavSection.js";
+import { Wordmark as a } from "./components/Wordmark/Wordmark.js";
+import { BOOST33_MARK_MIN_LEGIBLE_PX as E, Boost33Mark as S } from "./components/Boost33Mark/Boost33Mark.js";
+import { PRODUCT_SLUGS as A, ProductMark as N } from "./components/ProductMark/ProductMark.js";
+import { NavItem as P } from "./components/NavItem/NavItem.js";
+import { WalletChip as T } from "./components/WalletChip/WalletChip.js";
+import { defaultWalletChipLabels as i } from "./components/WalletChip/labels.js";
+import { TopBar as H } from "./components/TopBar/TopBar.js";
+import { PageHeader as C } from "./components/PageHeader/PageHeader.js";
+import { AppShell as V } from "./components/AppShell/AppShell.js";
+import { AppSwitcher as O } from "./components/AppSwitcher/AppSwitcher.js";
+import { defaultAppSwitcherLabels as G } from "./components/AppSwitcher/labels.js";
+import { NAV_FOCUS_GUTTER_PX as g, NAV_HEIGHT_BUDGET_PX as u, NAV_ITEM_PX as v, NAV_SECTION_GAP_PX as M, NAV_SECTION_HEADER_PX as U, NAV_SHELL_CONSUMER_SLOTS_PX as n, NAV_SHELL_FIXED_PX as D, NAV_SHELL_PACKAGE_FIXED_PX as R, checkNavHeightBudget as k, measureNavHeight as s, navBudgetForViewport as F, navContentHeight as b } from "./nav-height-budget.js";
 export {
-  ht as AppShell,
-  ot as BOOST33_MARK_MIN_LEGIBLE_PX,
-  it as Boost33Mark,
-  H as NAV_HEIGHT_BUDGET_PX,
-  E as NAV_ITEM_PX,
-  C as NAV_SECTION_HEADER_PX,
-  P as NAV_SHELL_FIXED_PX,
-  he as NavItem,
-  F as NavSection,
-  ne as PRODUCT_SLUGS,
-  Ke as PageHeader,
-  ct as ProductMark,
-  j as Sidebar,
-  Oe as TopBar,
-  dt as WalletChip,
-  q as Wordmark,
-  U as checkNavHeightBudget,
-  T as measureNavHeight,
-  st as navBudgetForViewport,
-  lt as navContentHeight
+  V as AppShell,
+  O as AppSwitcher,
+  E as BOOST33_MARK_MIN_LEGIBLE_PX,
+  S as Boost33Mark,
+  g as NAV_FOCUS_GUTTER_PX,
+  u as NAV_HEIGHT_BUDGET_PX,
+  v as NAV_ITEM_PX,
+  M as NAV_SECTION_GAP_PX,
+  U as NAV_SECTION_HEADER_PX,
+  n as NAV_SHELL_CONSUMER_SLOTS_PX,
+  D as NAV_SHELL_FIXED_PX,
+  R as NAV_SHELL_PACKAGE_FIXED_PX,
+  P as NavItem,
+  _ as NavSection,
+  A as PRODUCT_SLUGS,
+  C as PageHeader,
+  N as ProductMark,
+  o as Sidebar,
+  H as TopBar,
+  T as WalletChip,
+  a as Wordmark,
+  k as checkNavHeightBudget,
+  G as defaultAppSwitcherLabels,
+  i as defaultWalletChipLabels,
+  s as measureNavHeight,
+  F as navBudgetForViewport,
+  b as navContentHeight
 };
 //# sourceMappingURL=index.js.map