@boost33/ui 0.1.0 → 0.3.0

package/dist/components/WalletChip/format.js

@@ -0,0 +1,29 @@
+const e = "en-US", i = {
+  grouped: {},
+  oneDecimal: { minimumFractionDigits: 1, maximumFractionDigits: 1 }
+}, m = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Set();
+function c(t, n) {
+  const o = `${n}|${t}`, a = m.get(o);
+  if (a) return a;
+  let r;
+  try {
+    r = new Intl.NumberFormat(t, i[n]);
+  } catch {
+    s.has(t) || (s.add(t), console.warn(
+      `@boost33/ui: WalletChip cannot format numbers in locale ${JSON.stringify(t)}; falling back to ${e}.`
+    )), r = new Intl.NumberFormat(e, i[n]);
+  }
+  return m.set(o, r), r;
+}
+function u(t, n = e) {
+  return c(n, "grouped").format(t);
+}
+function f(t, n = e) {
+  return c(n, "oneDecimal").format(t / 1e3);
+}
+export {
+  e as DEFAULT_WALLET_LOCALE,
+  u as formatTokens,
+  f as thousandsFigure
+};
+//# sourceMappingURL=format.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"format.js","sources":["../../../src/components/WalletChip/format.ts"],"sourcesContent":["// The two numbers the chip says out loud. Kept separate from the component so\n// the rounding and the separator -- the parts that carry meaning rather than\n// look -- are unit-tested without a render.\n//\n// ---------------------------------------------------------------------------\n// B33-876: why a `locale` string, and not consumer-supplied formatters\n// ---------------------------------------------------------------------------\n//\n// This module used to hardcode `toLocaleString('en-US')` and a literal `k`. The\n// first two consumers are French-default, and French writes `4 600` where this\n// wrote `4,600`, and `4,6 k` where this wrote `4.6k` -- in the largest glyphs on\n// the chip, and inside the `bar` and `railBalance` accessible names. `labels`\n// could not reach any of it: the label functions receive the figures *already\n// formatted*, by documented intent, so a consumer had `\"4,600 jetons\"` and no\n// hook.\n//\n// The ticket named two candidate shapes and picked neither: a `locale` prop, or\n// `formatTokens` / `abbreviateThousands` supplied by the consumer. The shape\n// chosen is **a `locale` prop** -- one BCP-47 language tag, defaulting to\n// `en-US`, driving `Intl.NumberFormat`. Written down here, prominently, because\n// it is a published API decision reaching four products on a version bump and\n// reversing it later should be cheap.\n//\n// 1. **A formatter prop is a function, and a function cannot cross the React\n//    Server Component boundary.** B33-880 had just finished taking the functions\n//    *out* of `labels` for exactly this reason: `AppShell.wallet` is a\n//    `ReactNode` slot, so it is the consumer's own page -- under the App Router,\n//    a Server Component by default -- that constructs `<WalletChip …/>`, and\n//    React's Flight serializer throws on any function anywhere in the prop\n//    graph, in production as well as in development. An API of injected\n//    formatters would reintroduce that bug the same week it was fixed, and\n//    reintroduce it as the *recommended* path. A language tag is a string: data\n//    all the way down, and it survives the boundary intact.\n//\n// 2. **Numbers are not words.** `labels` takes whole sentences because word\n//    order is not a property of English and cannot be reassembled from\n//    fragments -- that is a fact about a consumer's sentence, which no library\n//    can know. Grouping and the decimal separator are the opposite: they are\n//    CLDR facts about a locale, the platform ships them for every locale, and\n//    asking four products to each re-implement French grouping is asking four\n//    products to each get it slightly wrong. So \"the `labels` prop is already\n//    the injected shape, be consistent\" reverses once you read *why* `labels`\n//    took that shape.\n//\n// 3. **It is one string with a default**, and a consumer that passes nothing\n//    renders character-for-character what the chip rendered before the prop\n//    existed. The five `walletchip-*` baselines cannot move.\n//\n// What `locale` deliberately does not own is the `k`. See `thousandsFigure`.\n\n/**\n * The language tag the chip formats in when the consumer names none. Today's\n * rendering, so the default path is byte-identical to the one the fidelity\n * baselines were captured from.\n */\nexport const DEFAULT_WALLET_LOCALE = 'en-US'\n\n/**\n * The two shapes a figure is asked for: the full balance, grouped; and one\n * decimal of a thousand for the rail.\n */\ntype FormatterKind = 'grouped' | 'oneDecimal'\n\nconst FORMATTER_OPTIONS: Record<FormatterKind, Intl.NumberFormatOptions> = {\n  grouped: {},\n  oneDecimal: { minimumFractionDigits: 1, maximumFractionDigits: 1 },\n}\n\n/**\n * `Intl.NumberFormat` instances, keyed by kind and tag.\n *\n * Constructing one is not free and the chip formats up to four figures per\n * render, on a component that sits in the sidebar of every screen. The set of\n * locales an app uses is small and long-lived, so a plain module-level Map is\n * the whole of the caching this needs.\n */\nconst formatters = new Map<string, Intl.NumberFormat>()\n\n/**\n * The tags already warned about, so a bad one warns once rather than on every\n * render of every chip.\n */\nconst warnedLocales = new Set<string>()\n\n/**\n * An `Intl.NumberFormat` for this tag, falling back to English if the tag is\n * malformed.\n *\n * `Intl.NumberFormat` throws a `RangeError` on a structurally invalid language\n * tag (`'en_US'`, `'français'`), and this chip sits in the sidebar of four\n * products: one consumer's typo in a config file would take the whole shell down\n * rather than mis-space a number. A tag the platform refuses degrades to the\n * English default and warns the developer -- the same instinct as B33-873, where\n * a missing translation key falls back to English instead of blanking the\n * header. The warning is `console`-only: developer-facing, never rendered, never\n * translated.\n *\n * An unknown-but-well-formed tag (`'zz-ZZ'`) does not throw; the platform\n * resolves it to its own best match, which is its business and not this\n * package's.\n */\nfunction formatterFor(locale: string, kind: FormatterKind): Intl.NumberFormat {\n  const key = `${kind}|${locale}`\n  const cached = formatters.get(key)\n  if (cached) return cached\n\n  let formatter: Intl.NumberFormat\n  try {\n    formatter = new Intl.NumberFormat(locale, FORMATTER_OPTIONS[kind])\n  } catch {\n    if (!warnedLocales.has(locale)) {\n      warnedLocales.add(locale)\n      console.warn(\n        `@boost33/ui: WalletChip cannot format numbers in locale ${JSON.stringify(locale)}; falling back to ${DEFAULT_WALLET_LOCALE}.`,\n      )\n    }\n    formatter = new Intl.NumberFormat(DEFAULT_WALLET_LOCALE, FORMATTER_OPTIONS[kind])\n  }\n  formatters.set(key, formatter)\n  return formatter\n}\n\n/**\n * The full balance, thousands grouped the way the locale groups them:\n * 4600 -> `\"4,600\"` in `en-US`, `\"4 600\"` in `fr-FR`, `\"4.600\"` in `de-DE`.\n *\n * The `en-US` default is what `toLocaleString('en-US')` produced, character for\n * character -- it is the same CLDR data reached through the constructor that can\n * be cached.\n */\nexport function formatTokens(value: number, locale: string = DEFAULT_WALLET_LOCALE): string {\n  return formatterFor(locale, 'grouped').format(value)\n}\n\n/**\n * The rail's short form: one decimal thousand, always. At 56px there is no room\n * for four digits and a separator, and \"4.6k\" still answers \"am I fine?\".\n *\n * Returns **the figure alone** -- `\"4.6\"` in `en-US`, `\"4,6\"` in `fr-FR`. The\n * mark that follows it is a word rather than a number (\"k\" in English, \"Tsd.\" in\n * German, \"ألف\" in Arabic), and French puts a space in front of it where English\n * does not, so it lives with the chip's other words, as `labels.railFigure`\n * (B33-876).\n *\n * Not `Intl.NumberFormat`'s own `notation: 'compact'`, for two concrete reasons.\n * It renders `en-US` as `\"4.6K\"`, a capital the baselines do not have. And\n * German does not abbreviate four digits at all, so it renders `\"4600,0\"` -- six\n * characters and a decimal, in a 56px rail, longer than the number it was\n * supposed to shorten. One decimal thousand is this package's decision about a\n * fixed-width rail, not CLDR's about a locale; the separator inside it is CLDR's,\n * and that is the part `locale` fixes.\n *\n * Two default-path differences from the `(value / 1000).toFixed(1)` this\n * replaced, both narrower than any state the baselines hold and both left\n * deliberately, but written down because they reach four products (B33-876):\n *\n * - **A balance landing on an exact half rounds the other way.** `toFixed`\n *   rounds the double's exact binary expansion, so 150 tokens printed `0.1`;\n *   `Intl` rounds the shortest decimal the double stands for, so it prints\n *   `0.2`. `Intl` agrees with the reader here, and the old answer was a float\n *   artefact rather than a decision.\n * - **A balance over a million is grouped.** `toFixed` gave `1234.6`, this\n *   gives `1,234.6`. Neither fits a 56px rail; that is a rail question, not a\n *   formatting one.\n */\nexport function thousandsFigure(value: number, locale: string = DEFAULT_WALLET_LOCALE): string {\n  return formatterFor(locale, 'oneDecimal').format(value / 1000)\n}\n"],"names":["DEFAULT_WALLET_LOCALE","FORMATTER_OPTIONS","formatters","warnedLocales","formatterFor","locale","kind","key","cached","formatter","formatTokens","value","thousandsFigure"],"mappings":"AAuDO,MAAMA,IAAwB,SAQ/BC,IAAqE;AAAA,EACzE,SAAS,CAAA;AAAA,EACT,YAAY,EAAE,uBAAuB,GAAG,uBAAuB,EAAA;AACjE,GAUMC,wBAAiB,IAAA,GAMjBC,wBAAoB,IAAA;AAmB1B,SAASC,EAAaC,GAAgBC,GAAwC;AAC5E,QAAMC,IAAM,GAAGD,CAAI,IAAID,CAAM,IACvBG,IAASN,EAAW,IAAIK,CAAG;AACjC,MAAIC,EAAQ,QAAOA;AAEnB,MAAIC;AACJ,MAAI;AACF,IAAAA,IAAY,IAAI,KAAK,aAAaJ,GAAQJ,EAAkBK,CAAI,CAAC;AAAA,EACnE,QAAQ;AACN,IAAKH,EAAc,IAAIE,CAAM,MAC3BF,EAAc,IAAIE,CAAM,GACxB,QAAQ;AAAA,MACN,2DAA2D,KAAK,UAAUA,CAAM,CAAC,qBAAqBL,CAAqB;AAAA,IAAA,IAG/HS,IAAY,IAAI,KAAK,aAAaT,GAAuBC,EAAkBK,CAAI,CAAC;AAAA,EAClF;AACA,SAAAJ,EAAW,IAAIK,GAAKE,CAAS,GACtBA;AACT;AAUO,SAASC,EAAaC,GAAeN,IAAiBL,GAA+B;AAC1F,SAAOI,EAAaC,GAAQ,SAAS,EAAE,OAAOM,CAAK;AACrD;AAiCO,SAASC,EAAgBD,GAAeN,IAAiBL,GAA+B;AAC7F,SAAOI,EAAaC,GAAQ,YAAY,EAAE,OAAOM,IAAQ,GAAI;AAC/D;"}

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

@@ -0,0 +1,8 @@
+/** The card mark shown on the rail, where there is no room for the word "Wallet". */
+export declare function WalletMark({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+/** The retry affordance shown when the balance could not be confirmed. */
+export declare function RetryMark({ className }: {
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/WalletChip/icons.js

@@ -0,0 +1,18 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+function n({ className: e }) {
+  return /* @__PURE__ */ t("svg", { className: e, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ r("rect", { x: "3", y: "6", width: "18", height: "12", rx: "2" }),
+    /* @__PURE__ */ r("path", { d: "M3 10h18" })
+  ] });
+}
+function i({ className: e }) {
+  return /* @__PURE__ */ t("svg", { className: e, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ r("path", { d: "M21 12a9 9 0 1 1-2.64-6.36" }),
+    /* @__PURE__ */ r("path", { d: "M21 3v4h-4" })
+  ] });
+}
+export {
+  i as RetryMark,
+  n as WalletMark
+};
+//# sourceMappingURL=icons.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sources":["../../../src/components/WalletChip/icons.tsx"],"sourcesContent":["// Small monochrome glyphs the chip draws in `currentColor` -- no fill token, so\n// the surrounding text colour carries them and the no-hardcoded-hex guard stays\n// satisfied. Decorative: the balance text is what carries meaning, so both are\n// aria-hidden.\n\n/** The card mark shown on the rail, where there is no room for the word \"Wallet\". */\nexport function WalletMark({ className }: { className?: string }) {\n  return (\n    <svg className={className} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n      <rect x=\"3\" y=\"6\" width=\"18\" height=\"12\" rx=\"2\" />\n      <path d=\"M3 10h18\" />\n    </svg>\n  )\n}\n\n/** The retry affordance shown when the balance could not be confirmed. */\nexport function RetryMark({ className }: { className?: string }) {\n  return (\n    <svg className={className} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n      <path d=\"M21 12a9 9 0 1 1-2.64-6.36\" />\n      <path d=\"M21 3v4h-4\" />\n    </svg>\n  )\n}\n"],"names":["WalletMark","className","jsx","RetryMark"],"mappings":";AAMO,SAASA,EAAW,EAAE,WAAAC,KAAqC;AAChE,2BACG,OAAA,EAAI,WAAAA,GAAsB,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,QAAO,eAAc,SAAQ,gBAAe,SAAQ,eAAY,QAC3J,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,IAAG,IAAA,CAAI;AAAA,IAChD,gBAAAA,EAAC,QAAA,EAAK,GAAE,WAAA,CAAW;AAAA,EAAA,GACrB;AAEJ;AAGO,SAASC,EAAU,EAAE,WAAAF,KAAqC;AAC/D,2BACG,OAAA,EAAI,WAAAA,GAAsB,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,QAAO,eAAc,SAAQ,gBAAe,SAAQ,eAAY,QAC3J,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,6BAAA,CAA6B;AAAA,IACrC,gBAAAA,EAAC,QAAA,EAAK,GAAE,aAAA,CAAa;AAAA,EAAA,GACvB;AAEJ;"}

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

@@ -0,0 +1,143 @@
+/**
+ * Every user-facing string the chip renders. Supplied whole -- the strings that
+ * carry a value take a `{placeholder}` template (or a function) rather than
+ * fragments, because word order is not a property of English and cannot be
+ * reassembled on the consumer's side.
+ *
+ * `grantExpiry`, `railFigure`, `railBalance` and `bar` each accept two shapes.
+ *
+ * A **template** is a plain string marking the value's position with a
+ * `{placeholder}` -- `'Granted expires {date} · burns first'`. It is data all
+ * the way down, so the whole `labels` object survives the React Server Component
+ * boundary and a Next App Router page can pass it. **This is the recommended
+ * form**, and the one the defaults use.
+ *
+ * A **function** of the same values still works unchanged. It is never
+ * serializable, so it only reaches the chip from a Client Component, but it is
+ * the escape hatch when the sentence needs logic a template cannot express --
+ * ICU plurals, an `Intl.ListFormat` call.
+ *
+ * In a template, a `{name}` the label does not define is left exactly as written
+ * -- a locale whose copy genuinely contains braces is not mangled, and a
+ * misspelled placeholder shows up in the rendering rather than silently
+ * blanking. A placeholder a template omits is simply not rendered: a locale that
+ * does not need a figure is allowed not to name it.
+ */
+export interface WalletChipLabels {
+    /** Accessible name for the expanded chip's status region. Default "Wallet balance". */
+    region: string;
+    /** The chip header. Default "Wallet". */
+    name: string;
+    /** The unit rendered beside the figure. Default "tokens". */
+    unit: string;
+    /** Screen-reader-only text in the figure when the balance is unknown. Default "Balance unknown". */
+    balanceUnknown: string;
+    /** The granted side of the split -- granted burns first. Default "Granted". */
+    granted: string;
+    /** The purchased side of the split -- purchased never expires. Default "Purchased". */
+    purchased: string;
+    /**
+     * The footer, around the preformatted expiry date. Supplied whole so the
+     * consumer owns word order.
+     *
+     * Placeholder: `{date}`. Default (en) `Granted expires {date} · burns first`.
+     * A function form `(date) => string` is also accepted.
+     */
+    grantExpiry: string | ((date: string) => string);
+    /** The top-up button. Default "Top up". */
+    topUp: string;
+    /**
+     * The rail's abbreviated balance, around the one-decimal-thousand figure
+     * (e.g. "4.6"). Both the visible text in the 56px rail and the figure that
+     * `railBalance` is given.
+     *
+     * Placeholder: `{figure}`. Default (en) `{figure}k`. A function form
+     * `(figure) => string` is also accepted.
+     *
+     * The figure itself is formatted for `locale` -- "4.6" in `en-US`, "4,6" in
+     * `fr-FR` -- but the mark after it is a word, and locales disagree about it:
+     * French writes "4,6 k" with a space, German abbreviates a thousand "Tsd.".
+     * So the mark is a label like every other word the chip renders, and a
+     * template rather than a bare suffix, because a locale is entitled to put the
+     * mark somewhere other than the end (B33-876).
+     */
+    railFigure: string | ((figure: string) => string);
+    /**
+     * The rail group's accessible name, around the abbreviated balance (e.g. "4.6k").
+     *
+     * Placeholder: `{balance}`. Default (en) `Wallet balance {balance}`. A function
+     * form `(balance) => string` is also accepted.
+     */
+    railBalance: string | ((balance: string) => string);
+    /** The rail group's accessible name when the balance is unknown. Default "Wallet balance unknown". */
+    railBalanceUnknown: string;
+    /** Screen-reader-only marker on the rail when the balance is unknown. Default "unknown". */
+    railUnknown: string;
+    /**
+     * The bar's accessible label, around the three preformatted figures. Assembled
+     * whole rather than concatenated from fragments -- the shape that cannot be
+     * translated at all otherwise.
+     *
+     * Placeholders: `{granted}`, `{purchased}`, `{remaining}`. Default (en)
+     * `{granted} granted and {purchased} purchased of {remaining} remaining`. A
+     * function form `(granted, purchased, remaining) => string` is also accepted.
+     */
+    bar: string | ((granted: string, purchased: string, remaining: string) => string);
+}
+/**
+ * The English defaults. A consumer that passes nothing renders exactly what the
+ * chip rendered before this prop existed, so the wallet baselines do not move.
+ *
+ * **Every field is a string.** That is what makes `labels={defaultWalletChipLabels}`
+ * and `labels={{ ...defaultWalletChipLabels, name: 'Portefeuille' }}` -- the
+ * pattern the specimen shows and this package's own advice recommends -- legal
+ * from a Server Component. The four value-carrying defaults are templates, and
+ * the rendered output is character-for-character what the function defaults
+ * produced (B33-880).
+ *
+ * Frozen because it is a public export reaching four products on a version bump.
+ * `const` protects the binding, not the contents: without the freeze, a consumer
+ * aliasing it by reference -- `const mine = defaultWalletChipLabels; mine.name =
+ * 'Portefeuille'` -- would silently rename every chip in the process (B33-877).
+ */
+export declare const defaultWalletChipLabels: Readonly<{
+    region: string;
+    name: string;
+    unit: string;
+    balanceUnknown: string;
+    granted: string;
+    purchased: string;
+    grantExpiry: string;
+    topUp: string;
+    railFigure: string;
+    railBalance: string;
+    railBalanceUnknown: string;
+    railUnknown: string;
+    bar: string;
+}>;
+/**
+ * The labels as the render consumes them: the four value-carrying fields
+ * normalised to functions, whichever shape the consumer supplied. The component
+ * calls `t.bar(…)` either way and never learns which form it was given, so the
+ * union costs the render nothing -- and, in particular, the lazy call that keeps
+ * a consumer's `bar` off the degraded unknown path (B33-875) still works.
+ */
+export interface ResolvedWalletChipLabels extends Omit<WalletChipLabels, 'grantExpiry' | 'railFigure' | 'railBalance' | 'bar'> {
+    grantExpiry: (date: string) => string;
+    railFigure: (figure: string) => string;
+    railBalance: (balance: string) => string;
+    bar: (granted: string, purchased: string, remaining: string) => string;
+}
+/**
+ * Merge a consumer's partial `labels` onto the English defaults, treating an
+ * explicitly-`undefined` field as unsupplied, and normalise the four
+ * value-carrying fields to functions.
+ *
+ * A next-intl `t('...')` returns `undefined` on a missed key, so
+ * `{ name: undefined }` is what one missing translation out of thirteen looks like
+ * at the call site -- it must fall back to English, not overwrite the default
+ * with `undefined` and blank the header, unname the button, or crash on
+ * `t.bar(...)` (B33-873). A plain object spread copies the `undefined` across; a
+ * per-field skip does not.
+ */
+export declare function resolveWalletChipLabels(labels?: Partial<WalletChipLabels>): ResolvedWalletChipLabels;

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.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export interface WordmarkProps {
+    /**
+     * The Boost33 mark -- the logo artwork, owned by its own ticket. Passed in
+     * rather than hardcoded here so the wordmark does not carry a second copy of
+     * the mark. On the rail it is all that shows.
+     */
+    mark?: ReactNode;
+    /** Sidebar-on-the-rail state. Hides the "Boost33" name; the mark stays. */
+    collapsed?: boolean;
+}
+export declare function Wordmark({ mark, collapsed }: WordmarkProps): import("react").JSX.Element;

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

@@ -1,4 +1,28 @@
+export { Sidebar } from './components/Sidebar/Sidebar';
+export type { SidebarProps } from './components/Sidebar/Sidebar';
+export { NavSection } from './components/NavSection/NavSection';
+export type { NavSectionProps } from './components/NavSection/NavSection';
+export { Wordmark } from './components/Wordmark/Wordmark';
+export type { WordmarkProps } from './components/Wordmark/Wordmark';
+export { Boost33Mark, BOOST33_MARK_MIN_LEGIBLE_PX } from './components/Boost33Mark/Boost33Mark';
+export type { Boost33MarkProps } from './components/Boost33Mark/Boost33Mark';
+export { ProductMark, PRODUCT_SLUGS } from './components/ProductMark/ProductMark';
+export type { ProductMarkProps, ProductSlug } from './components/ProductMark/ProductMark';
 export { NavItem } from './components/NavItem/NavItem';
 export type { NavItemProps } from './components/NavItem/NavItem';
-export { NAV_HEIGHT_BUDGET_PX, checkNavHeightBudget, measureNavHeight } from './nav-height-budget';
-export type { NavHeightBudget } from './nav-height-budget';
+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 { 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,38 +1,44 @@
-import { jsx as o, jsxs as _, Fragment as f } from "react/jsx-runtime";
-const g = "_row_5f12t_4", m = "_label_5f12t_36", d = "_trailingSlot_5f12t_62", h = "_count_5f12t_76", p = "_countUrgent_5f12t_80", a = {
-  row: g,
-  label: m,
-  trailingSlot: d,
-  count: h,
-  countUrgent: p
-};
-function w({ children: t, active: n = !1, collapsed: i = !1, count: e, countUrgent: u = !1, href: r, onClick: l }) {
-  const c = {
-    "data-active": n ? "true" : void 0,
-    "data-collapsed": i ? "true" : void 0,
-    "aria-current": n ? "page" : void 0
-  }, s = /* @__PURE__ */ _(f, { children: [
-    /* @__PURE__ */ o("span", { className: a.label, children: t }),
-    /* @__PURE__ */ o("span", { className: a.trailingSlot, children: e != null && /* @__PURE__ */ o("span", { className: u ? a.countUrgent : a.count, children: e }) })
-  ] });
-  return r ? /* @__PURE__ */ o("a", { className: a.row, href: r, onClick: l, ...c, children: s }) : /* @__PURE__ */ o("button", { type: "button", className: a.row, onClick: l, ...c, children: s });
-}
-const N = 700;
-function H(t, n = N) {
-  return {
-    usedPx: t,
-    budgetPx: n,
-    fits: t <= n,
-    overBy: Math.max(0, t - n)
-  };
-}
-function U(t) {
-  return t.scrollHeight;
-}
+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 {
-  N as NAV_HEIGHT_BUDGET_PX,
-  w as NavItem,
-  H as checkNavHeightBudget,
-  U as measureNavHeight
+  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

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/components/NavItem/NavItem.tsx","../src/nav-height-budget.ts"],"sourcesContent":["import type { ReactNode } from 'react'\nimport styles from './NavItem.module.css'\n\nexport interface NavItemProps {\n  /** The nav label. Truncates with an ellipsis rather than wrapping. */\n  children: ReactNode\n  /** Marks this row as the current page. Sets `aria-current=\"page\"`. */\n  active?: boolean\n  /** Sidebar-on-the-rail state. Hides the label and trailing slot visually; the label stays in the accessibility tree. */\n  collapsed?: boolean\n  /** Trailing slot content. Omit to leave the slot empty -- it still reserves its width so counts line up across rows. */\n  count?: number\n  /** Renders `count` in the primary color instead of muted. */\n  countUrgent?: boolean\n  href?: string\n  onClick?: () => void\n}\n\nexport function NavItem({ children, active = false, collapsed = false, count, countUrgent = false, href, onClick }: NavItemProps) {\n  const dataProps = {\n    'data-active': active ? ('true' as const) : undefined,\n    'data-collapsed': collapsed ? ('true' as const) : undefined,\n    'aria-current': active ? ('page' as const) : undefined,\n  }\n\n  const content = (\n    <>\n      <span className={styles.label}>{children}</span>\n      <span className={styles.trailingSlot}>\n        {count != null && <span className={countUrgent ? styles.countUrgent : styles.count}>{count}</span>}\n      </span>\n    </>\n  )\n\n  if (href) {\n    return (\n      <a className={styles.row} href={href} onClick={onClick} {...dataProps}>\n        {content}\n      </a>\n    )\n  }\n\n  return (\n    <button type=\"button\" className={styles.row} onClick={onClick} {...dataProps}>\n      {content}\n    </button>\n  )\n}\n","// The spec's rough budget: a sidebar's nav has to fit above the wallet chip\n// and footer without scrolling. Boost Outbound's admin role has already blown\n// past it once, so this is a real check, not a hypothetical.\nexport const NAV_HEIGHT_BUDGET_PX = 700\n\nexport interface NavHeightBudget {\n  usedPx: number\n  budgetPx: number\n  fits: boolean\n  overBy: number\n}\n\nexport function checkNavHeightBudget(usedPx: number, budgetPx: number = NAV_HEIGHT_BUDGET_PX): NavHeightBudget {\n  return {\n    usedPx,\n    budgetPx,\n    fits: usedPx <= budgetPx,\n    overBy: Math.max(0, usedPx - budgetPx),\n  }\n}\n\nexport function measureNavHeight(nav: HTMLElement): number {\n  return nav.scrollHeight\n}\n"],"names":["NavItem","children","active","collapsed","count","countUrgent","href","onClick","dataProps","content","jsxs","Fragment","jsx","styles","NAV_HEIGHT_BUDGET_PX","checkNavHeightBudget","usedPx","budgetPx","measureNavHeight","nav"],"mappings":";;;;;;;;AAkBO,SAASA,EAAQ,EAAE,UAAAC,GAAU,QAAAC,IAAS,IAAO,WAAAC,IAAY,IAAO,OAAAC,GAAO,aAAAC,IAAc,IAAO,MAAAC,GAAM,SAAAC,EAAA,GAAyB;AAChI,QAAMC,IAAY;AAAA,IAChB,eAAeN,IAAU,SAAmB;AAAA,IAC5C,kBAAkBC,IAAa,SAAmB;AAAA,IAClD,gBAAgBD,IAAU,SAAmB;AAAA,EAAA,GAGzCO,IACJ,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWC,EAAO,OAAQ,UAAAZ,GAAS;AAAA,sBACxC,QAAA,EAAK,WAAWY,EAAO,cACrB,eAAS,QAAQ,gBAAAD,EAAC,QAAA,EAAK,WAAWP,IAAcQ,EAAO,cAAcA,EAAO,OAAQ,aAAM,EAAA,CAC7F;AAAA,EAAA,GACF;AAGF,SAAIP,IAEA,gBAAAM,EAAC,OAAE,WAAWC,EAAO,KAAK,MAAAP,GAAY,SAAAC,GAAmB,GAAGC,GACzD,UAAAC,EAAA,CACH,IAKF,gBAAAG,EAAC,UAAA,EAAO,MAAK,UAAS,WAAWC,EAAO,KAAK,SAAAN,GAAmB,GAAGC,GAChE,UAAAC,EAAA,CACH;AAEJ;AC5CO,MAAMK,IAAuB;AAS7B,SAASC,EAAqBC,GAAgBC,IAAmBH,GAAuC;AAC7G,SAAO;AAAA,IACL,QAAAE;AAAA,IACA,UAAAC;AAAA,IACA,MAAMD,KAAUC;AAAA,IAChB,QAAQ,KAAK,IAAI,GAAGD,IAASC,CAAQ;AAAA,EAAA;AAEzC;AAEO,SAASC,EAAiBC,GAA0B;AACzD,SAAOA,EAAI;AACb;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

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

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

package/dist/nav-height-budget.js

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