@boost33/ui 0.8.0 → 0.9.0

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

@@ -1,11 +1,11 @@
 import { ReactElement } from 'react';
 /**
  * Which glyph a row carries. A closed union, unlike `ProductMark`'s `slug`:
- * these four are the package's own chrome rather than a registry Identity owns
+ * these are the package's own chrome rather than a registry Identity owns
  * and can run ahead of, so there is no served value to degrade from. A row that
  * wants no glyph omits the field and keeps the empty lane -- see `.lane` in
  * AccountMenu.module.css for why the lane stays.
  */
-export type AccountMenuIcon = 'person' | 'settings' | 'switch' | 'signOut';
+export type AccountMenuIcon = 'person' | 'security' | 'settings' | 'switch' | 'feedback' | 'docs' | 'signOut';
 /** The glyph for each name, keyed so the row renders one lookup and no switch. */
 export declare const ACCOUNT_MENU_ICONS: Record<AccountMenuIcon, (className?: string) => ReactElement>;

package/dist/components/AccountMenu/icons.js

@@ -1,5 +1,5 @@
-import { jsxs as h, jsx as a } from "react/jsx-runtime";
-const r = {
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+const d = {
   viewBox: "0 0 24 24",
   fill: "none",
   stroke: "currentColor",
@@ -7,26 +7,39 @@ const r = {
   strokeLinecap: "round",
   strokeLinejoin: "round",
   "aria-hidden": !0
-}, d = {
-  person: (t) => /* @__PURE__ */ h("svg", { className: t, ...r, children: [
+}, e = {
+  person: (h) => /* @__PURE__ */ t("svg", { className: h, ...d, children: [
     /* @__PURE__ */ a("path", { d: "M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" }),
     /* @__PURE__ */ a("path", { d: "M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" })
   ] }),
-  settings: (t) => /* @__PURE__ */ h("svg", { className: t, ...r, children: [
+  settings: (h) => /* @__PURE__ */ t("svg", { className: h, ...d, children: [
     /* @__PURE__ */ a("path", { d: "M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065" }),
     /* @__PURE__ */ a("path", { d: "M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" })
   ] }),
-  switch: (t) => /* @__PURE__ */ h("svg", { className: t, ...r, children: [
+  switch: (h) => /* @__PURE__ */ t("svg", { className: h, ...d, children: [
     /* @__PURE__ */ a("path", { d: "M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" }),
     /* @__PURE__ */ a("path", { d: "M9 8l6 4l-6 4z" })
   ] }),
-  signOut: (t) => /* @__PURE__ */ h("svg", { className: t, ...r, children: [
+  security: (h) => /* @__PURE__ */ t("svg", { className: h, ...d, children: [
+    /* @__PURE__ */ a("path", { d: "M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3" }),
+    /* @__PURE__ */ a("path", { d: "M12 11m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }),
+    /* @__PURE__ */ a("path", { d: "M12 12l0 2.5" })
+  ] }),
+  feedback: (h) => /* @__PURE__ */ t("svg", { className: h, ...d, children: [
+    /* @__PURE__ */ a("path", { d: "M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" }),
+    /* @__PURE__ */ a("path", { d: "M3 7l9 6l9 -6" })
+  ] }),
+  docs: (h) => /* @__PURE__ */ t("svg", { className: h, ...d, children: [
+    /* @__PURE__ */ a("path", { d: "M14 3v4a1 1 0 0 0 1 1h4" }),
+    /* @__PURE__ */ a("path", { d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" })
+  ] }),
+  signOut: (h) => /* @__PURE__ */ t("svg", { className: h, ...d, children: [
     /* @__PURE__ */ a("path", { d: "M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" }),
     /* @__PURE__ */ a("path", { d: "M9 12h12l-3 -3" }),
     /* @__PURE__ */ a("path", { d: "M18 15l3 -3" })
   ] })
 };
 export {
-  d as ACCOUNT_MENU_ICONS
+  e as ACCOUNT_MENU_ICONS
 };
 //# sourceMappingURL=icons.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"icons.js","sources":["../../../src/components/AccountMenu/icons.tsx"],"sourcesContent":["// The account menu's four row glyphs. Drawn in `currentColor` so the row's own\n// ink carries them -- which is also what keeps the no-hardcoded-hex guard\n// satisfied, and what lets the picked-out row darken its glyph with its text in\n// one rule rather than two. Same arrangement as AppSwitcher/icons.tsx.\n//\n// All four are decorative: every row has a visible name beside its glyph, so a\n// name here would only make a screen reader say the row twice. Hence\n// `aria-hidden` on each, with no `title` prop to pass -- the opposite of\n// ProductMark, which can stand alone.\n//\n// The path data is reproduced verbatim from the AccountMenu drawings on Paper's\n// 004 Components page, where all four are Tabler outline glyphs on a 24-unit\n// grid at stroke 2. The drawing on 103 Identity carries byte-identical data, so\n// there is nothing to reconcile between the two here. They are NOT settled\n// artwork: the Wallet has never rendered this menu, so no approved baseline\n// fixes them, and the person at the component's fidelity gate may replace any of\n// them (CLAUDE.md, \"The three components the Wallet never rendered\").\n//\n// One of them is worth flagging rather than quietly shipping: `switch` is a\n// rounded square with a play triangle in it, which is what the drawing uses for\n// \"Switch account\" and is not an obvious reading of that row. Reproduced as\n// drawn, raised at the gate, not silently swapped for a better guess.\n\nimport type { ReactElement } from 'react'\n\n/**\n * Which glyph a row carries. A closed union, unlike `ProductMark`'s `slug`:\n * these four are the package's own chrome rather than a registry Identity owns\n * and can run ahead of, so there is no served value to degrade from. A row that\n * wants no glyph omits the field and keeps the empty lane -- see `.lane` in\n * AccountMenu.module.css for why the lane stays.\n */\nexport type AccountMenuIcon = 'person' | 'settings' | 'switch' | 'signOut'\n\nconst COMMON = {\n  viewBox: '0 0 24 24',\n  fill: 'none',\n  stroke: 'currentColor',\n  strokeWidth: '2',\n  strokeLinecap: 'round',\n  strokeLinejoin: 'round',\n  'aria-hidden': true,\n} as const\n\n/** The glyph for each name, keyed so the row renders one lookup and no switch. */\nexport const ACCOUNT_MENU_ICONS: Record<AccountMenuIcon, (className?: string) => ReactElement> = {\n  person: (className) => (\n    <svg className={className} {...COMMON}>\n      <path d=\"M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0\" />\n      <path d=\"M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2\" />\n    </svg>\n  ),\n  settings: (className) => (\n    <svg className={className} {...COMMON}>\n      <path d=\"M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065\" />\n      <path d=\"M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\" />\n    </svg>\n  ),\n  switch: (className) => (\n    <svg className={className} {...COMMON}>\n      <path d=\"M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\" />\n      <path d=\"M9 8l6 4l-6 4z\" />\n    </svg>\n  ),\n  signOut: (className) => (\n    <svg className={className} {...COMMON}>\n      <path d=\"M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2\" />\n      <path d=\"M9 12h12l-3 -3\" />\n      <path d=\"M18 15l3 -3\" />\n    </svg>\n  ),\n}\n"],"names":["COMMON","ACCOUNT_MENU_ICONS","className","jsx"],"mappings":";AAkCA,MAAMA,IAAS;AAAA,EACb,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,eAAe;AACjB,GAGaC,IAAoF;AAAA,EAC/F,QAAQ,CAACC,wBACN,OAAA,EAAI,WAAAA,GAAuB,GAAGF,GAC7B,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,GAAE,oCAAA,CAAoC;AAAA,IAC5C,gBAAAA,EAAC,QAAA,EAAK,GAAE,4CAAA,CAA4C;AAAA,EAAA,GACtD;AAAA,EAEF,UAAU,CAACD,wBACR,OAAA,EAAI,WAAAA,GAAuB,GAAGF,GAC7B,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,GAAE,6gBAAA,CAA6gB;AAAA,IACrhB,gBAAAA,EAAC,QAAA,EAAK,GAAE,qCAAA,CAAqC;AAAA,EAAA,GAC/C;AAAA,EAEF,QAAQ,CAACD,wBACN,OAAA,EAAI,WAAAA,GAAuB,GAAGF,GAC7B,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,GAAE,8EAAA,CAA8E;AAAA,IACtF,gBAAAA,EAAC,QAAA,EAAK,GAAE,iBAAA,CAAiB;AAAA,EAAA,GAC3B;AAAA,EAEF,SAAS,CAACD,wBACP,OAAA,EAAI,WAAAA,GAAuB,GAAGF,GAC7B,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,GAAE,kFAAA,CAAkF;AAAA,IAC1F,gBAAAA,EAAC,QAAA,EAAK,GAAE,iBAAA,CAAiB;AAAA,IACzB,gBAAAA,EAAC,QAAA,EAAK,GAAE,cAAA,CAAc;AAAA,EAAA,EAAA,CACxB;AAEJ;"}
+{"version":3,"file":"icons.js","sources":["../../../src/components/AccountMenu/icons.tsx"],"sourcesContent":["// The account menu's seven row glyphs. Drawn in `currentColor` so the row's own\n// ink carries them -- which is also what keeps the no-hardcoded-hex guard\n// satisfied, and what lets the picked-out row darken its glyph with its text in\n// one rule rather than two. Same arrangement as AppSwitcher/icons.tsx.\n//\n// All seven are decorative: every row has a visible name beside its glyph, so a\n// name here would only make a screen reader say the row twice. Hence\n// `aria-hidden` on each, with no `title` prop to pass -- the opposite of\n// ProductMark, which can stand alone.\n//\n// The path data is the Hub's working menu's (boost33-hub src/lib/icons.ts), the\n// referent Jamal named for Stage B on 5 Nov 2026: Tabler outline glyphs on a\n// 24-unit grid at stroke 2, copied from Paper 103 artboard 11. The original four\n// (person, settings, switch, signOut) are byte-identical to the ones Stage A\n// took from Paper 004; `security`, `feedback` and `docs` arrive with the Hub's\n// Security, Feedback and Docs rows. `switch` is still the rounded square with a\n// play triangle the drawing uses for \"Switch account\" -- the Hub ships it.\n\nimport type { ReactElement } from 'react'\n\n/**\n * Which glyph a row carries. A closed union, unlike `ProductMark`'s `slug`:\n * these are the package's own chrome rather than a registry Identity owns\n * and can run ahead of, so there is no served value to degrade from. A row that\n * wants no glyph omits the field and keeps the empty lane -- see `.lane` in\n * AccountMenu.module.css for why the lane stays.\n */\nexport type AccountMenuIcon = 'person' | 'security' | 'settings' | 'switch' | 'feedback' | 'docs' | 'signOut'\n\nconst COMMON = {\n  viewBox: '0 0 24 24',\n  fill: 'none',\n  stroke: 'currentColor',\n  strokeWidth: '2',\n  strokeLinecap: 'round',\n  strokeLinejoin: 'round',\n  'aria-hidden': true,\n} as const\n\n/** The glyph for each name, keyed so the row renders one lookup and no switch. */\nexport const ACCOUNT_MENU_ICONS: Record<AccountMenuIcon, (className?: string) => ReactElement> = {\n  person: (className) => (\n    <svg className={className} {...COMMON}>\n      <path d=\"M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0\" />\n      <path d=\"M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2\" />\n    </svg>\n  ),\n  settings: (className) => (\n    <svg className={className} {...COMMON}>\n      <path d=\"M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065\" />\n      <path d=\"M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\" />\n    </svg>\n  ),\n  switch: (className) => (\n    <svg className={className} {...COMMON}>\n      <path d=\"M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\" />\n      <path d=\"M9 8l6 4l-6 4z\" />\n    </svg>\n  ),\n  security: (className) => (\n    <svg className={className} {...COMMON}>\n      <path d=\"M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3\" />\n      <path d=\"M12 11m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\" />\n      <path d=\"M12 12l0 2.5\" />\n    </svg>\n  ),\n  feedback: (className) => (\n    <svg className={className} {...COMMON}>\n      <path d=\"M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z\" />\n      <path d=\"M3 7l9 6l9 -6\" />\n    </svg>\n  ),\n  docs: (className) => (\n    <svg className={className} {...COMMON}>\n      <path d=\"M14 3v4a1 1 0 0 0 1 1h4\" />\n      <path d=\"M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z\" />\n    </svg>\n  ),\n  signOut: (className) => (\n    <svg className={className} {...COMMON}>\n      <path d=\"M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2\" />\n      <path d=\"M9 12h12l-3 -3\" />\n      <path d=\"M18 15l3 -3\" />\n    </svg>\n  ),\n}\n"],"names":["COMMON","ACCOUNT_MENU_ICONS","className","jsx"],"mappings":";AA6BA,MAAMA,IAAS;AAAA,EACb,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,eAAe;AACjB,GAGaC,IAAoF;AAAA,EAC/F,QAAQ,CAACC,wBACN,OAAA,EAAI,WAAAA,GAAuB,GAAGF,GAC7B,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,GAAE,oCAAA,CAAoC;AAAA,IAC5C,gBAAAA,EAAC,QAAA,EAAK,GAAE,4CAAA,CAA4C;AAAA,EAAA,GACtD;AAAA,EAEF,UAAU,CAACD,wBACR,OAAA,EAAI,WAAAA,GAAuB,GAAGF,GAC7B,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,GAAE,6gBAAA,CAA6gB;AAAA,IACrhB,gBAAAA,EAAC,QAAA,EAAK,GAAE,qCAAA,CAAqC;AAAA,EAAA,GAC/C;AAAA,EAEF,QAAQ,CAACD,wBACN,OAAA,EAAI,WAAAA,GAAuB,GAAGF,GAC7B,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,GAAE,8EAAA,CAA8E;AAAA,IACtF,gBAAAA,EAAC,QAAA,EAAK,GAAE,iBAAA,CAAiB;AAAA,EAAA,GAC3B;AAAA,EAEF,UAAU,CAACD,wBACR,OAAA,EAAI,WAAAA,GAAuB,GAAGF,GAC7B,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,GAAE,sFAAA,CAAsF;AAAA,IAC9F,gBAAAA,EAAC,QAAA,EAAK,GAAE,2CAAA,CAA2C;AAAA,IACnD,gBAAAA,EAAC,QAAA,EAAK,GAAE,eAAA,CAAe;AAAA,EAAA,GACzB;AAAA,EAEF,UAAU,CAACD,wBACR,OAAA,EAAI,WAAAA,GAAuB,GAAGF,GAC7B,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,GAAE,8EAAA,CAA8E;AAAA,IACtF,gBAAAA,EAAC,QAAA,EAAK,GAAE,gBAAA,CAAgB;AAAA,EAAA,GAC1B;AAAA,EAEF,MAAM,CAACD,wBACJ,OAAA,EAAI,WAAAA,GAAuB,GAAGF,GAC7B,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,GAAE,0BAAA,CAA0B;AAAA,IAClC,gBAAAA,EAAC,QAAA,EAAK,GAAE,yEAAA,CAAyE;AAAA,EAAA,GACnF;AAAA,EAEF,SAAS,CAACD,wBACP,OAAA,EAAI,WAAAA,GAAuB,GAAGF,GAC7B,UAAA;AAAA,IAAA,gBAAAG,EAAC,QAAA,EAAK,GAAE,kFAAA,CAAkF;AAAA,IAC1F,gBAAAA,EAAC,QAAA,EAAK,GAAE,iBAAA,CAAiB;AAAA,IACzB,gBAAAA,EAAC,QAAA,EAAK,GAAE,cAAA,CAAc;AAAA,EAAA,EAAA,CACxB;AAEJ;"}

package/dist/components/AccountMenu/initials.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Two letters from a name or an email, for where a photo would go: the trigger,
+ * the person block, and the organisation tile when the consumer gives none.
+ *
+ * The Hub's own rule (boost33-hub src/lib/initials.ts), copied rather than
+ * re-derived, because the Hub and every product draw the same person behind the
+ * same avatar and must never disagree about the letters -- one screen saying SM
+ * and the next saying SO for the same person reads as a bug in whichever one you
+ * look at second.
+ */
+export declare function initials(value: string): string;

package/dist/components/AccountMenu/initials.js

@@ -0,0 +1,8 @@
+function r(e) {
+  const t = e.split("@")[0].trim().split(/[\s._-]+/).filter(Boolean);
+  return t.length === 0 ? "?" : t.length === 1 ? t[0].slice(0, 2).toUpperCase() : (t[0][0] + t[1][0]).toUpperCase();
+}
+export {
+  r as initials
+};
+//# sourceMappingURL=initials.js.map

package/dist/components/AccountMenu/initials.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"initials.js","sources":["../../../src/components/AccountMenu/initials.ts"],"sourcesContent":["/**\n * Two letters from a name or an email, for where a photo would go: the trigger,\n * the person block, and the organisation tile when the consumer gives none.\n *\n * The Hub's own rule (boost33-hub src/lib/initials.ts), copied rather than\n * re-derived, because the Hub and every product draw the same person behind the\n * same avatar and must never disagree about the letters -- one screen saying SM\n * and the next saying SO for the same person reads as a bug in whichever one you\n * look at second.\n */\nexport function initials(value: string): string {\n  const words = value.split('@')[0]!.trim().split(/[\\s._-]+/).filter(Boolean)\n  if (words.length === 0) return '?'\n  if (words.length === 1) return words[0]!.slice(0, 2).toUpperCase()\n  return (words[0]![0]! + words[1]![0]!).toUpperCase()\n}\n"],"names":["initials","value","words"],"mappings":"AAUO,SAASA,EAASC,GAAuB;AAC9C,QAAMC,IAAQD,EAAM,MAAM,GAAG,EAAE,CAAC,EAAG,KAAA,EAAO,MAAM,UAAU,EAAE,OAAO,OAAO;AAC1E,SAAIC,EAAM,WAAW,IAAU,MAC3BA,EAAM,WAAW,IAAUA,EAAM,CAAC,EAAG,MAAM,GAAG,CAAC,EAAE,YAAA,KAC7CA,EAAM,CAAC,EAAG,CAAC,IAAKA,EAAM,CAAC,EAAG,CAAC,GAAI,YAAA;AACzC;"}

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

@@ -1,15 +1,52 @@
 /** Every user-facing string the account menu renders that is not row data. */
 export interface AccountMenuLabels {
     /**
-     * The panel's accessible name. A disclosure panel carries no widget role, so
-     * an `aria-label` is the only thing that names it (ADR-0010). Default
-     * "Account".
+     * The menu's accessible name. Default "Your account", the Hub's.
      *
      * It names the control rather than the person in it: the person's name and
      * email are inside the panel and a screen reader reaches them on the way
      * through, so putting them in the name as well says them twice.
      */
     panel: string;
+    /**
+     * The avatar button's accessible name. Default "Your account", the Hub's. The
+     * button shows initials or a photo, neither of which says what it opens.
+     */
+    trigger: string;
+    /** The person block's name line when no name is known. Default "You", the Hub's. */
+    unnamed: string;
+}
+/**
+ * The standard rows' words (`standardAccountMenuGroups`, `StandardAccountMenu`).
+ * English defaults are the Hub's, copied from its working menu (boost33-hub
+ * src/app/account-menu.tsx), so that every app's menu reads as the Hub's does.
+ * Each field is overridable for a translated product; a field left out, or
+ * supplied as `undefined`, keeps its default.
+ */
+export interface StandardAccountMenuLabels {
+    profile: string;
+    profileDescription: string;
+    security: string;
+    securityDescription: string;
+    settings: string;
+    /** Settings' line for an admin. */
+    settingsDescriptionAdmin: string;
+    /** Settings' line for a member, or when no role is known. */
+    settingsDescriptionMember: string;
+    switchAccount: string;
+    /** Switch account's line when the other accounts are counted, not named, and there is one. */
+    otherAccountsOne: string;
+    /** Switch account's line when the other accounts are counted, not named. `%count%` is the number. */
+    otherAccountsMany: string;
+    feedback: string;
+    feedbackDescription: string;
+    docs: string;
+    docsDescription: string;
+    signOut: string;
+    /** The role pill for an admin. */
+    roleAdmin: string;
+    /** The role pill for a member. */
+    roleMember: string;
 }
 /**
  * The English defaults. A consumer that passes nothing renders English.
@@ -24,6 +61,28 @@ export interface AccountMenuLabels {
  */
 export declare const defaultAccountMenuLabels: Readonly<{
     panel: string;
+    trigger: string;
+    unnamed: string;
+}>;
+/** The standard rows' English defaults, the Hub's words. Frozen for the reason above. */
+export declare const defaultStandardAccountMenuLabels: Readonly<{
+    profile: string;
+    profileDescription: string;
+    security: string;
+    securityDescription: string;
+    settings: string;
+    settingsDescriptionAdmin: string;
+    settingsDescriptionMember: string;
+    switchAccount: string;
+    otherAccountsOne: string;
+    otherAccountsMany: string;
+    feedback: string;
+    feedbackDescription: string;
+    docs: string;
+    docsDescription: string;
+    signOut: string;
+    roleAdmin: string;
+    roleMember: string;
 }>;
 /**
  * Merge a consumer's partial `labels` onto the English defaults, treating an
@@ -37,3 +96,5 @@ export declare const defaultAccountMenuLabels: Readonly<{
  * skip does not (B33-873).
  */
 export declare function resolveAccountMenuLabels(labels?: Partial<AccountMenuLabels>): AccountMenuLabels;
+/** As `resolveAccountMenuLabels`, for the standard rows' words. */
+export declare function resolveStandardAccountMenuLabels(labels?: Partial<StandardAccountMenuLabels>): StandardAccountMenuLabels;

package/dist/components/AccountMenu/labels.js

@@ -1,14 +1,42 @@
-const c = Object.freeze({
-  panel: "Account"
+const o = Object.freeze({
+  panel: "Your account",
+  trigger: "Your account",
+  unnamed: "You"
+}), c = Object.freeze({
+  profile: "Profile",
+  profileDescription: "Your name, photo and email",
+  security: "Security",
+  securityDescription: "How you sign in, and your passphrase",
+  settings: "Settings",
+  settingsDescriptionAdmin: "Team, sign-in, billing and other accounts",
+  settingsDescriptionMember: "Notifications and other accounts",
+  switchAccount: "Switch account",
+  otherAccountsOne: "1 other account",
+  otherAccountsMany: "%count% other accounts",
+  feedback: "Feedback",
+  feedbackDescription: "Tell us what's working or not",
+  docs: "Docs",
+  docsDescription: "Guides for every Boost33 product",
+  signOut: "Sign out",
+  roleAdmin: "Admin",
+  roleMember: "Member"
 });
-function o(e) {
+function i(e) {
+  const t = Object.fromEntries(
+    Object.entries(e ?? {}).filter(([, n]) => n !== void 0)
+  );
+  return { ...o, ...t };
+}
+function r(e) {
   const t = Object.fromEntries(
     Object.entries(e ?? {}).filter(([, n]) => n !== void 0)
   );
   return { ...c, ...t };
 }
 export {
-  c as defaultAccountMenuLabels,
-  o as resolveAccountMenuLabels
+  o as defaultAccountMenuLabels,
+  c as defaultStandardAccountMenuLabels,
+  i as resolveAccountMenuLabels,
+  r as resolveStandardAccountMenuLabels
 };
 //# sourceMappingURL=labels.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"labels.js","sources":["../../../src/components/AccountMenu/labels.ts"],"sourcesContent":["// The account menu's own user-facing words -- which is one word, and the\n// shortness is the point of the file rather than an argument against it.\n//\n// Everything else a person reads in this panel is row data the consumer supplies\n// and therefore translates by construction: the person's name and email, the\n// organisation's name, initials and role, and each row's label and description.\n// That is the same split AppSwitcherLabels draws (\"the product names ... are\n// Identity's data, supplied per row, not copy this package owns\"). What is left\n// is the panel's accessible name, which no row carries and which a disclosure\n// panel has no other way to get (ADR-0010).\n//\n// It takes the WalletChip's label contract rather than inventing a third\n// dialect, and it takes it in full on day one even for one field. B33-1007 is\n// the ticket for what happens otherwise: the switcher's module opens by claiming\n// parity with the chip's and had none, and two of the three divergences it\n// records were only expensive because they were retrofitted. The first --\n// `labels` being the whole interface rather than a `Partial` -- is a breaking\n// change to fix once a consumer has written the object out, which is exactly the\n// position a one-field interface invites. So:\n//\n//   * `labels` is `Partial<AccountMenuLabels>`, so the second field costs no\n//     consumer a typecheck (CLAUDE.md, \"Versioning\");\n//   * `resolveAccountMenuLabels` filters explicitly-`undefined` fields before\n//     merging, so a missed next-intl key falls back to English instead of\n//     unnaming the panel (B33-873);\n//   * `defaultAccountMenuLabels` is `Object.freeze({ ... } satisfies ...)` with\n//     no type annotation, so the freeze survives into the emitted `.d.ts`\n//     instead of being widened back to mutable (B33-877, B33-916).\n//\n// There are no value-carrying labels here, so none of the chip's\n// `%placeholder%` machinery is reproduced. If one ever arrives, it arrives in the\n// chip's shape -- a template delimited `%name%`, never `{name}`, because a brace\n// is ICU argument syntax and a consumer keeps these strings in an ICU catalogue\n// (B33-1277; the reasoning is in `src/fill-template.ts`).\n\n/** Every user-facing string the account menu renders that is not row data. */\nexport interface AccountMenuLabels {\n  /**\n   * The panel's accessible name. A disclosure panel carries no widget role, so\n   * an `aria-label` is the only thing that names it (ADR-0010). Default\n   * \"Account\".\n   *\n   * It names the control rather than the person in it: the person's name and\n   * email are inside the panel and a screen reader reaches them on the way\n   * through, so putting them in the name as well says them twice.\n   */\n  panel: string\n}\n\n/**\n * The English defaults. A consumer that passes nothing renders English.\n *\n * Frozen because it is a public export reaching four products on a version bump:\n * `const` protects the binding and not the contents, so without the freeze a\n * consumer aliasing it -- `const mine = defaultAccountMenuLabels; mine.panel =\n * 'Compte'` -- renames every account menu in the process (B33-877). The freeze\n * carries no `: AccountMenuLabels` annotation on purpose; the annotation widens\n * `Readonly<...>` back to mutable in the emitted declaration file and makes the\n * freeze runtime-only (B33-916). `satisfies` checks the shape without widening.\n */\nexport const defaultAccountMenuLabels = Object.freeze({\n  panel: 'Account',\n} satisfies AccountMenuLabels)\n\n/**\n * Merge a consumer's partial `labels` onto the English defaults, treating an\n * explicitly-`undefined` field as unsupplied -- the same resolution\n * `resolveWalletChipLabels` and `resolveAppSwitcherLabels` perform.\n *\n * A next-intl `t('...')` returns `undefined` on a missed key, so\n * `{ panel: undefined }` is what one missing translation looks like at the call\n * site. A plain object spread copies that `undefined` across and leaves the\n * panel with an empty `aria-label`, which is the one thing naming it; a per-field\n * skip does not (B33-873).\n */\nexport function resolveAccountMenuLabels(labels?: Partial<AccountMenuLabels>): AccountMenuLabels {\n  const supplied = Object.fromEntries(\n    Object.entries(labels ?? {}).filter(([, value]) => value !== undefined),\n  ) as Partial<AccountMenuLabels>\n  return { ...defaultAccountMenuLabels, ...supplied }\n}\n"],"names":["defaultAccountMenuLabels","resolveAccountMenuLabels","labels","supplied","value"],"mappings":"AA4DO,MAAMA,IAA2B,OAAO,OAAO;AAAA,EACpD,OAAO;AACT,CAA6B;AAatB,SAASC,EAAyBC,GAAwD;AAC/F,QAAMC,IAAW,OAAO;AAAA,IACtB,OAAO,QAAQD,KAAU,EAAE,EAAE,OAAO,CAAC,CAAA,EAAGE,CAAK,MAAMA,MAAU,MAAS;AAAA,EAAA;AAExE,SAAO,EAAE,GAAGJ,GAA0B,GAAGG,EAAA;AAC3C;"}
+{"version":3,"file":"labels.js","sources":["../../../src/components/AccountMenu/labels.ts"],"sourcesContent":["// The account menu's own user-facing words: its two accessible names and the\n// fallback name line, plus the standard rows' words (B33-493 Stage B).\n//\n// Everything else a person reads in this panel is row data the consumer supplies\n// and therefore translates by construction: the person's name and email, the\n// organisation's name, initials and role, and each row's label and description.\n// That is the same split AppSwitcherLabels draws (\"the product names ... are\n// Identity's data, supplied per row, not copy this package owns\"). What is left\n// is the panel's accessible name, which no row carries and which a disclosure\n// panel has no other way to get (ADR-0010).\n//\n// It takes the WalletChip's label contract rather than inventing a third\n// dialect, and it takes it in full on day one even for one field. B33-1007 is\n// the ticket for what happens otherwise: the switcher's module opens by claiming\n// parity with the chip's and had none, and two of the three divergences it\n// records were only expensive because they were retrofitted. The first --\n// `labels` being the whole interface rather than a `Partial` -- is a breaking\n// change to fix once a consumer has written the object out, which is exactly the\n// position a one-field interface invites. So:\n//\n//   * `labels` is `Partial<AccountMenuLabels>`, so the second field costs no\n//     consumer a typecheck (CLAUDE.md, \"Versioning\");\n//   * `resolveAccountMenuLabels` filters explicitly-`undefined` fields before\n//     merging, so a missed next-intl key falls back to English instead of\n//     unnaming the panel (B33-873);\n//   * `defaultAccountMenuLabels` is `Object.freeze({ ... } satisfies ...)` with\n//     no type annotation, so the freeze survives into the emitted `.d.ts`\n//     instead of being widened back to mutable (B33-877, B33-916).\n//\n// One value-carrying label, `otherAccountsMany`, in the chip's shape: a template\n// delimited `%count%`, never `{count}`, because a brace is ICU argument syntax and\n// a consumer keeps these strings in an ICU catalogue (B33-1277; the reasoning is\n// in `src/fill-template.ts`).\n\n/** Every user-facing string the account menu renders that is not row data. */\nexport interface AccountMenuLabels {\n  /**\n   * The menu's accessible name. Default \"Your account\", the Hub's.\n   *\n   * It names the control rather than the person in it: the person's name and\n   * email are inside the panel and a screen reader reaches them on the way\n   * through, so putting them in the name as well says them twice.\n   */\n  panel: string\n  /**\n   * The avatar button's accessible name. Default \"Your account\", the Hub's. The\n   * button shows initials or a photo, neither of which says what it opens.\n   */\n  trigger: string\n  /** The person block's name line when no name is known. Default \"You\", the Hub's. */\n  unnamed: string\n}\n\n/**\n * The standard rows' words (`standardAccountMenuGroups`, `StandardAccountMenu`).\n * English defaults are the Hub's, copied from its working menu (boost33-hub\n * src/app/account-menu.tsx), so that every app's menu reads as the Hub's does.\n * Each field is overridable for a translated product; a field left out, or\n * supplied as `undefined`, keeps its default.\n */\nexport interface StandardAccountMenuLabels {\n  profile: string\n  profileDescription: string\n  security: string\n  securityDescription: string\n  settings: string\n  /** Settings' line for an admin. */\n  settingsDescriptionAdmin: string\n  /** Settings' line for a member, or when no role is known. */\n  settingsDescriptionMember: string\n  switchAccount: string\n  /** Switch account's line when the other accounts are counted, not named, and there is one. */\n  otherAccountsOne: string\n  /** Switch account's line when the other accounts are counted, not named. `%count%` is the number. */\n  otherAccountsMany: string\n  feedback: string\n  feedbackDescription: string\n  docs: string\n  docsDescription: string\n  signOut: string\n  /** The role pill for an admin. */\n  roleAdmin: string\n  /** The role pill for a member. */\n  roleMember: string\n}\n\n/**\n * The English defaults. A consumer that passes nothing renders English.\n *\n * Frozen because it is a public export reaching four products on a version bump:\n * `const` protects the binding and not the contents, so without the freeze a\n * consumer aliasing it -- `const mine = defaultAccountMenuLabels; mine.panel =\n * 'Compte'` -- renames every account menu in the process (B33-877). The freeze\n * carries no `: AccountMenuLabels` annotation on purpose; the annotation widens\n * `Readonly<...>` back to mutable in the emitted declaration file and makes the\n * freeze runtime-only (B33-916). `satisfies` checks the shape without widening.\n */\nexport const defaultAccountMenuLabels = Object.freeze({\n  panel: 'Your account',\n  trigger: 'Your account',\n  unnamed: 'You',\n} satisfies AccountMenuLabels)\n\n/** The standard rows' English defaults, the Hub's words. Frozen for the reason above. */\nexport const defaultStandardAccountMenuLabels = Object.freeze({\n  profile: 'Profile',\n  profileDescription: 'Your name, photo and email',\n  security: 'Security',\n  securityDescription: 'How you sign in, and your passphrase',\n  settings: 'Settings',\n  settingsDescriptionAdmin: 'Team, sign-in, billing and other accounts',\n  settingsDescriptionMember: 'Notifications and other accounts',\n  switchAccount: 'Switch account',\n  otherAccountsOne: '1 other account',\n  otherAccountsMany: '%count% other accounts',\n  feedback: 'Feedback',\n  feedbackDescription: \"Tell us what's working or not\",\n  docs: 'Docs',\n  docsDescription: 'Guides for every Boost33 product',\n  signOut: 'Sign out',\n  roleAdmin: 'Admin',\n  roleMember: 'Member',\n} satisfies StandardAccountMenuLabels)\n\n/**\n * Merge a consumer's partial `labels` onto the English defaults, treating an\n * explicitly-`undefined` field as unsupplied -- the same resolution\n * `resolveWalletChipLabels` and `resolveAppSwitcherLabels` perform.\n *\n * A next-intl `t('...')` returns `undefined` on a missed key, so\n * `{ panel: undefined }` is what one missing translation looks like at the call\n * site. A plain object spread copies that `undefined` across and leaves the\n * panel with an empty `aria-label`, which is the one thing naming it; a per-field\n * skip does not (B33-873).\n */\nexport function resolveAccountMenuLabels(labels?: Partial<AccountMenuLabels>): AccountMenuLabels {\n  const supplied = Object.fromEntries(\n    Object.entries(labels ?? {}).filter(([, value]) => value !== undefined),\n  ) as Partial<AccountMenuLabels>\n  return { ...defaultAccountMenuLabels, ...supplied }\n}\n\n/** As `resolveAccountMenuLabels`, for the standard rows' words. */\nexport function resolveStandardAccountMenuLabels(\n  labels?: Partial<StandardAccountMenuLabels>,\n): StandardAccountMenuLabels {\n  const supplied = Object.fromEntries(\n    Object.entries(labels ?? {}).filter(([, value]) => value !== undefined),\n  ) as Partial<StandardAccountMenuLabels>\n  return { ...defaultStandardAccountMenuLabels, ...supplied }\n}\n"],"names":["defaultAccountMenuLabels","defaultStandardAccountMenuLabels","resolveAccountMenuLabels","labels","supplied","value","resolveStandardAccountMenuLabels"],"mappings":"AAiGO,MAAMA,IAA2B,OAAO,OAAO;AAAA,EACpD,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AACX,CAA6B,GAGhBC,IAAmC,OAAO,OAAO;AAAA,EAC5D,SAAS;AAAA,EACT,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,qBAAqB;AAAA,EACrB,UAAU;AAAA,EACV,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,qBAAqB;AAAA,EACrB,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,WAAW;AAAA,EACX,YAAY;AACd,CAAqC;AAa9B,SAASC,EAAyBC,GAAwD;AAC/F,QAAMC,IAAW,OAAO;AAAA,IACtB,OAAO,QAAQD,KAAU,EAAE,EAAE,OAAO,CAAC,CAAA,EAAGE,CAAK,MAAMA,MAAU,MAAS;AAAA,EAAA;AAExE,SAAO,EAAE,GAAGL,GAA0B,GAAGI,EAAA;AAC3C;AAGO,SAASE,EACdH,GAC2B;AAC3B,QAAMC,IAAW,OAAO;AAAA,IACtB,OAAO,QAAQD,KAAU,EAAE,EAAE,OAAO,CAAC,CAAA,EAAGE,CAAK,MAAMA,MAAU,MAAS;AAAA,EAAA;AAExE,SAAO,EAAE,GAAGJ,GAAkC,GAAGG,EAAA;AACnD;"}

package/dist/components/AccountMenu/use-menu.d.ts

@@ -0,0 +1,34 @@
+import { FocusEvent as ReactFocusEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
+export type MenuFocus = 'first' | 'last';
+/**
+ * Where a key press inside an open menu moves focus, as an item index, or null
+ * when the key is not a menu key. `current` is -1 when focus is on something
+ * that is not an item.
+ */
+export declare function menuKeyTarget(key: string, current: number, count: number): number | null;
+/** What a key press on the closed trigger does: open at one end, or nothing. */
+export declare function triggerKeyOpens(key: string): MenuFocus | null;
+export declare function useMenu({ defaultOpen }?: {
+    defaultOpen?: boolean;
+}): {
+    open: boolean;
+    close: (returnFocus: boolean) => void;
+    rootProps: {
+        ref: import('react').RefObject<HTMLDivElement | null>;
+        onBlur: (event: ReactFocusEvent<HTMLDivElement>) => void;
+    };
+    triggerProps: {
+        ref: import('react').RefObject<HTMLButtonElement | null>;
+        'aria-haspopup': "menu";
+        'aria-expanded': boolean;
+        'aria-controls': string | undefined;
+        onClick: () => void;
+        onKeyDown: (event: ReactKeyboardEvent<HTMLButtonElement>) => void;
+    };
+    menuProps: {
+        ref: import('react').RefObject<HTMLDivElement | null>;
+        id: string;
+        role: "menu";
+        onKeyDown: (event: ReactKeyboardEvent<HTMLDivElement>) => void;
+    };
+};

package/dist/components/AccountMenu/use-menu.js

@@ -0,0 +1,102 @@
+import { useState as K, useRef as a, useId as O, useCallback as m, useEffect as E } from "react";
+function R(i, r, u) {
+  if (u === 0) return null;
+  switch (i) {
+    case "ArrowDown":
+      return r < 0 ? 0 : (r + 1) % u;
+    case "ArrowUp":
+      return r < 0 ? u - 1 : (r - 1 + u) % u;
+    case "Home":
+      return 0;
+    case "End":
+      return u - 1;
+    default:
+      return null;
+  }
+}
+function v(i) {
+  return i === "ArrowDown" ? "first" : i === "ArrowUp" ? "last" : null;
+}
+const b = "[role='menuitem']:not([disabled])";
+function C({ defaultOpen: i = !1 } = {}) {
+  const [r, u] = K(i), c = a(null), d = a(null), p = a(null), f = a(null), g = O(), l = m(
+    () => {
+      var e;
+      return Array.from(((e = p.current) == null ? void 0 : e.querySelectorAll(b)) ?? []);
+    },
+    []
+  ), w = m((e) => {
+    f.current = e, u(!0);
+  }, []), s = m((e) => {
+    var n;
+    u(!1), e && ((n = d.current) == null || n.focus());
+  }, []);
+  E(() => {
+    if (!r || !f.current) return;
+    const e = l(), n = f.current === "first" ? e[0] : e[e.length - 1];
+    f.current = null, n == null || n.focus();
+  }, [r, l]), E(() => {
+    if (!r) return;
+    function e(n) {
+      var t;
+      (t = c.current) != null && t.contains(n.target) || (s(!1), setTimeout(() => {
+        var y, D;
+        const o = document.activeElement;
+        (!o || o === document.body || (y = c.current) != null && y.contains(o)) && ((D = d.current) == null || D.focus());
+      }, 0));
+    }
+    return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
+  }, [r, s]);
+  function T() {
+    r ? s(!1) : w("first");
+  }
+  function h(e) {
+    var t;
+    const n = v(e.key);
+    if (n)
+      if (e.preventDefault(), r) {
+        const o = l();
+        (t = n === "first" ? o[0] : o[o.length - 1]) == null || t.focus();
+      } else
+        w(n);
+  }
+  function k(e) {
+    if (e.key === "Escape") {
+      e.preventDefault(), s(!0);
+      return;
+    }
+    const n = l(), t = n.indexOf(document.activeElement);
+    if (e.key === "Tab") {
+      t >= 0 && s(!0);
+      return;
+    }
+    const o = R(e.key, t, n.length);
+    o !== null && (e.preventDefault(), n[o].focus());
+  }
+  function A(e) {
+    var t;
+    if (!r) return;
+    const n = e.relatedTarget;
+    n && !((t = c.current) != null && t.contains(n)) && s(!1);
+  }
+  return {
+    open: r,
+    close: s,
+    rootProps: { ref: c, onBlur: A },
+    triggerProps: {
+      ref: d,
+      "aria-haspopup": "menu",
+      "aria-expanded": r,
+      "aria-controls": r ? g : void 0,
+      onClick: T,
+      onKeyDown: h
+    },
+    menuProps: { ref: p, id: g, role: "menu", onKeyDown: k }
+  };
+}
+export {
+  R as menuKeyTarget,
+  v as triggerKeyOpens,
+  C as useMenu
+};
+//# sourceMappingURL=use-menu.js.map

package/dist/components/AccountMenu/use-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-menu.js","sources":["../../../src/components/AccountMenu/use-menu.ts"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type FocusEvent as ReactFocusEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react'\n\n// Menu-button behaviour for AccountMenu (B33-493 Stage B), ported from the Hub's\n// working menu (boost33-hub src/app/use-menu.ts), which is the referent Jamal\n// named on 5 Nov 2026. The WAI-ARIA menu button pattern:\n//\n// - Opening moves focus to the first item (ArrowUp on the trigger: the last).\n// - ArrowDown/ArrowUp wrap through the items, Home/End jump to the ends.\n// - Items carry tabIndex -1, so Tab leaves the menu instead of walking it, and\n//   leaving closes it.\n// - Escape closes and returns focus to the trigger. So does a click outside,\n//   unless that click put focus somewhere else on purpose.\n//\n// This is a menu, not the disclosure AppSwitcher is (ADR-0010): the Hub's is a\n// menu, every app's avatar is to behave exactly as the Hub's does, and a person\n// moving between the Hub and a product must not meet two keyboard models behind\n// the same avatar. The two key decisions are split out as pure functions so they\n// test without a DOM, as the Hub's are.\n\nexport type MenuFocus = 'first' | 'last'\n\n/**\n * Where a key press inside an open menu moves focus, as an item index, or null\n * when the key is not a menu key. `current` is -1 when focus is on something\n * that is not an item.\n */\nexport function menuKeyTarget(key: string, current: number, count: number): number | null {\n  if (count === 0) return null\n  switch (key) {\n    case 'ArrowDown':\n      return current < 0 ? 0 : (current + 1) % count\n    case 'ArrowUp':\n      return current < 0 ? count - 1 : (current - 1 + count) % count\n    case 'Home':\n      return 0\n    case 'End':\n      return count - 1\n    default:\n      return null\n  }\n}\n\n/** What a key press on the closed trigger does: open at one end, or nothing. */\nexport function triggerKeyOpens(key: string): MenuFocus | null {\n  if (key === 'ArrowDown') return 'first'\n  if (key === 'ArrowUp') return 'last'\n  return null\n}\n\nconst ITEM_SELECTOR = \"[role='menuitem']:not([disabled])\"\n\nexport function useMenu({ defaultOpen = false }: { defaultOpen?: boolean } = {}) {\n  const [open, setOpen] = useState(defaultOpen)\n  const rootRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const menuRef = useRef<HTMLDivElement>(null)\n  const focusOnOpen = useRef<MenuFocus | null>(null)\n  const menuId = useId()\n\n  const items = useCallback(\n    () => Array.from(menuRef.current?.querySelectorAll<HTMLElement>(ITEM_SELECTOR) ?? []),\n    [],\n  )\n\n  const show = useCallback((at: MenuFocus) => {\n    focusOnOpen.current = at\n    setOpen(true)\n  }, [])\n\n  const close = useCallback((returnFocus: boolean) => {\n    setOpen(false)\n    if (returnFocus) triggerRef.current?.focus()\n  }, [])\n\n  // Focus lands on an item once the menu is in the DOM. A menu drawn open by\n  // `defaultOpen` takes no focus: nobody opened it, so nothing should move.\n  useEffect(() => {\n    if (!open || !focusOnOpen.current) return\n    const list = items()\n    const target = focusOnOpen.current === 'first' ? list[0] : list[list.length - 1]\n    focusOnOpen.current = null\n    target?.focus()\n  }, [open, items])\n\n  // `pointerdown` rather than `click`: a press that starts inside the menu and\n  // ends outside it should not count as leaving.\n  useEffect(() => {\n    if (!open) return\n    function onPointerDown(event: PointerEvent) {\n      if (rootRef.current?.contains(event.target as Node)) return\n      close(false)\n      // A click on blank page leaves focus nowhere; put it back on the\n      // trigger. A click on another control keeps the focus it just took.\n      setTimeout(() => {\n        const active = document.activeElement\n        if (!active || active === document.body || rootRef.current?.contains(active)) {\n          triggerRef.current?.focus()\n        }\n      }, 0)\n    }\n    document.addEventListener('pointerdown', onPointerDown)\n    return () => document.removeEventListener('pointerdown', onPointerDown)\n  }, [open, close])\n\n  function onTriggerClick() {\n    if (open) close(false)\n    else show('first')\n  }\n\n  function onTriggerKeyDown(event: ReactKeyboardEvent<HTMLButtonElement>) {\n    const at = triggerKeyOpens(event.key)\n    if (!at) return\n    event.preventDefault()\n    if (open) {\n      const list = items()\n      ;(at === 'first' ? list[0] : list[list.length - 1])?.focus()\n    } else {\n      show(at)\n    }\n  }\n\n  function onMenuKeyDown(event: ReactKeyboardEvent<HTMLDivElement>) {\n    if (event.key === 'Escape') {\n      event.preventDefault()\n      close(true)\n      return\n    }\n    const list = items()\n    const current = list.indexOf(document.activeElement as HTMLElement)\n    if (event.key === 'Tab') {\n      // Focus goes to the trigger first so the browser's own Tab moves on from\n      // there, to the next thing on the page.\n      if (current >= 0) close(true)\n      return\n    }\n    const next = menuKeyTarget(event.key, current, list.length)\n    if (next === null) return\n    event.preventDefault()\n    list[next]!.focus()\n  }\n\n  /** `focusout` on the whole widget: focus leaving it for somewhere else closes it. */\n  function onRootBlur(event: ReactFocusEvent<HTMLDivElement>) {\n    if (!open) return\n    const to = event.relatedTarget as Node | null\n    // Null is focus going nowhere (a blank-page click, the window losing focus,\n    // the focused item unmounting); the pointerdown handler covers the click,\n    // and the others should not close anything.\n    if (to && !rootRef.current?.contains(to)) close(false)\n  }\n\n  return {\n    open,\n    close,\n    rootProps: { ref: rootRef, onBlur: onRootBlur },\n    triggerProps: {\n      ref: triggerRef,\n      'aria-haspopup': 'menu' as const,\n      'aria-expanded': open,\n      'aria-controls': open ? menuId : undefined,\n      onClick: onTriggerClick,\n      onKeyDown: onTriggerKeyDown,\n    },\n    menuProps: { ref: menuRef, id: menuId, role: 'menu' as const, onKeyDown: onMenuKeyDown },\n  }\n}\n"],"names":["menuKeyTarget","key","current","count","triggerKeyOpens","ITEM_SELECTOR","useMenu","defaultOpen","open","setOpen","useState","rootRef","useRef","triggerRef","menuRef","focusOnOpen","menuId","useId","items","useCallback","_a","show","at","close","returnFocus","useEffect","list","target","onPointerDown","event","active","_b","onTriggerClick","onTriggerKeyDown","onMenuKeyDown","next","onRootBlur","to"],"mappings":"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"}

package/dist/components/Backdrop/BackdropAppMenu.d.ts

@@ -0,0 +1,55 @@
+import { ElementType, ReactNode } from 'react';
+export interface BackdropAppMenuItem {
+    key: string;
+    label: string;
+    /** 18px stroke icon. The folded strip shows only this. */
+    icon: ReactNode;
+    href?: string;
+    onClick?: () => void;
+    active?: boolean;
+    /** A count badge ("5" waiting approvals). */
+    count?: ReactNode;
+    /** Spoken with the count: "5 waiting". */
+    countLabel?: string;
+    /** Not built yet: the row shows a "Soon" tag and does not navigate. */
+    soon?: ReactNode;
+}
+export interface BackdropAppMenuSection {
+    /** A fixed 1–2 word group label ("Outreach"). Never collapsible. Omit for the first, unlabelled group. */
+    label?: string;
+    items: BackdropAppMenuItem[];
+}
+export interface BackdropAppMenuProps {
+    /** The app's name, beside its mark at the top. */
+    appName: string;
+    /** The app's 28px mark (ProductMark). */
+    mark: ReactNode;
+    /**
+     * The menu's main action. Always an OUTLINE button with a plus (round 5,
+     * decision 1): orange belongs to the page's own main action.
+     */
+    action: {
+        label: string;
+        onClick?: () => void;
+        href?: string;
+    };
+    sections: BackdropAppMenuSection[];
+    /** Settings, pinned to the bottom. Opens the hub's settings at this app. */
+    settings: BackdropAppMenuItem;
+    /**
+     * The first-time checklist pill above Settings ("Get started · 1 of 2"): a
+     * BackdropGetStarted. Gone once the steps are done.
+     */
+    getStarted?: ReactNode;
+    /**
+     * Folded to the 56px icon strip (round 5, decision 3): names move to
+     * tooltips, group labels become short dividers. `auto` (default) follows the
+     * frame's compact layout (below 1200px, or BackdropFrame `compact`).
+     */
+    folded?: boolean | 'auto';
+    /** The menu's landmark name: "Outbound menu". */
+    label: string;
+    linkComponent?: ElementType;
+    className?: string;
+}
+export declare function BackdropAppMenu(props: BackdropAppMenuProps): import("react").JSX.Element;

package/dist/components/Backdrop/BackdropAppMenu.js

@@ -0,0 +1,79 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import l from "./BackdropAppMenu.module.css.js";
+import { cx as N } from "./cx.js";
+import { Plus as p } from "./icons.js";
+import { BackdropBadge as v, BackdropSoonTag as k } from "./BackdropBasics.js";
+import { BackdropTooltip as b } from "./BackdropTooltip.js";
+function x(a) {
+  const { folded: d = "auto", label: r, className: s } = a;
+  return /* @__PURE__ */ c("nav", { className: N(l.menu, s), "aria-label": r, "data-folded": String(d), children: [
+    d !== !0 && /* @__PURE__ */ e(g, { ...a }),
+    d !== !1 && /* @__PURE__ */ e(L, { ...a })
+  ] });
+}
+function u({ item: a, Link: d, folded: r }) {
+  const s = a.soon !== void 0, t = a.href !== void 0 && !s ? d : "button", i = a.href !== void 0 && !s ? { href: a.href } : { type: "button", "aria-disabled": s || void 0 }, n = /* @__PURE__ */ c(
+    t,
+    {
+      ...i,
+      onClick: s ? void 0 : a.onClick,
+      "aria-current": a.active ? "page" : void 0,
+      "aria-label": r ? a.label : void 0,
+      className: r ? l.foldedItem : l.item,
+      children: [
+        /* @__PURE__ */ e("span", { className: l.itemIcon, children: a.icon }),
+        !r && /* @__PURE__ */ e("span", { className: l.itemLabel, children: a.label }),
+        !r && a.count !== void 0 && /* @__PURE__ */ e(v, { label: a.countLabel, children: a.count }),
+        !r && s && /* @__PURE__ */ e(k, { children: a.soon }),
+        r && a.count !== void 0 && /* @__PURE__ */ e("span", { className: l.foldedDot, "aria-hidden": "true" })
+      ]
+    }
+  );
+  return r ? /* @__PURE__ */ e(b, { content: a.label, side: "right", labelsTrigger: !0, children: n }) : n;
+}
+function g({ appName: a, mark: d, action: r, sections: s, settings: t, getStarted: i, linkComponent: n = "a" }) {
+  const h = r.href !== void 0 ? n : "button";
+  return /* @__PURE__ */ c("div", { className: l.open, children: [
+    /* @__PURE__ */ c("div", { className: l.header, children: [
+      /* @__PURE__ */ e("span", { className: l.mark, children: d }),
+      /* @__PURE__ */ e("span", { className: l.appName, children: a })
+    ] }),
+    /* @__PURE__ */ c(h, { ...r.href !== void 0 ? { href: r.href } : { type: "button" }, onClick: r.onClick, className: l.action, children: [
+      /* @__PURE__ */ e(p, {}),
+      /* @__PURE__ */ e("span", { children: r.label })
+    ] }),
+    /* @__PURE__ */ e("div", { className: l.sections, children: s.map((o, m) => /* @__PURE__ */ c("div", { className: l.section, children: [
+      o.label && /* @__PURE__ */ e("p", { className: l.groupLabel, children: o.label }),
+      /* @__PURE__ */ e("ul", { className: l.list, children: o.items.map((f) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(u, { item: f, Link: n, folded: !1 }) }, f.key)) })
+    ] }, o.label ?? m)) }),
+    /* @__PURE__ */ e("div", { className: l.fill }),
+    i && /* @__PURE__ */ e("div", { className: l.getStarted, children: i }),
+    /* @__PURE__ */ e(u, { item: t, Link: n, folded: !1 })
+  ] });
+}
+function L({ mark: a, appName: d, action: r, sections: s, settings: t, linkComponent: i = "a" }) {
+  const n = r.href !== void 0 ? i : "button";
+  return /* @__PURE__ */ c("div", { className: l.folded, children: [
+    /* @__PURE__ */ e("span", { className: l.foldedMark, children: /* @__PURE__ */ e("span", { className: l.mark, role: "img", "aria-label": d, children: a }) }),
+    /* @__PURE__ */ e(b, { content: r.label, side: "right", labelsTrigger: !0, children: /* @__PURE__ */ e(
+      n,
+      {
+        ...r.href !== void 0 ? { href: r.href } : { type: "button" },
+        onClick: r.onClick,
+        "aria-label": r.label,
+        className: l.foldedAction,
+        children: /* @__PURE__ */ e(p, {})
+      }
+    ) }),
+    /* @__PURE__ */ e("ul", { className: l.foldedList, children: s.map((h, o) => /* @__PURE__ */ c("li", { className: l.foldedSection, children: [
+      o > 0 && /* @__PURE__ */ e("span", { className: l.foldedDivider, "aria-hidden": "true" }),
+      /* @__PURE__ */ e("ul", { className: l.list, children: h.items.map((m) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(u, { item: m, Link: i, folded: !0 }) }, m.key)) })
+    ] }, h.label ?? o)) }),
+    /* @__PURE__ */ e("div", { className: l.fill }),
+    /* @__PURE__ */ e(u, { item: t, Link: i, folded: !0 })
+  ] });
+}
+export {
+  x as BackdropAppMenu
+};
+//# sourceMappingURL=BackdropAppMenu.js.map

package/dist/components/Backdrop/BackdropAppMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackdropAppMenu.js","sources":["../../../src/components/Backdrop/BackdropAppMenu.tsx"],"sourcesContent":["import type { ElementType, ReactNode } from 'react'\nimport styles from './BackdropAppMenu.module.css'\nimport { cx } from './cx'\nimport { Plus } from './icons'\nimport { BackdropBadge, BackdropSoonTag } from './BackdropBasics'\nimport { BackdropTooltip } from './BackdropTooltip'\n\nexport interface BackdropAppMenuItem {\n  key: string\n  label: string\n  /** 18px stroke icon. The folded strip shows only this. */\n  icon: ReactNode\n  href?: string\n  onClick?: () => void\n  active?: boolean\n  /** A count badge (\"5\" waiting approvals). */\n  count?: ReactNode\n  /** Spoken with the count: \"5 waiting\". */\n  countLabel?: string\n  /** Not built yet: the row shows a \"Soon\" tag and does not navigate. */\n  soon?: ReactNode\n}\n\nexport interface BackdropAppMenuSection {\n  /** A fixed 1–2 word group label (\"Outreach\"). Never collapsible. Omit for the first, unlabelled group. */\n  label?: string\n  items: BackdropAppMenuItem[]\n}\n\nexport interface BackdropAppMenuProps {\n  /** The app's name, beside its mark at the top. */\n  appName: string\n  /** The app's 28px mark (ProductMark). */\n  mark: ReactNode\n  /**\n   * The menu's main action. Always an OUTLINE button with a plus (round 5,\n   * decision 1): orange belongs to the page's own main action.\n   */\n  action: { label: string; onClick?: () => void; href?: string }\n  sections: BackdropAppMenuSection[]\n  /** Settings, pinned to the bottom. Opens the hub's settings at this app. */\n  settings: BackdropAppMenuItem\n  /**\n   * The first-time checklist pill above Settings (\"Get started · 1 of 2\"): a\n   * BackdropGetStarted. Gone once the steps are done.\n   */\n  getStarted?: ReactNode\n  /**\n   * Folded to the 56px icon strip (round 5, decision 3): names move to\n   * tooltips, group labels become short dividers. `auto` (default) follows the\n   * frame's compact layout (below 1200px, or BackdropFrame `compact`).\n   */\n  folded?: boolean | 'auto'\n  /** The menu's landmark name: \"Outbound menu\". */\n  label: string\n  linkComponent?: ElementType\n  className?: string\n}\n\n/*\n * Layer 2's menu column. Open: 232px -- mark and app name, the outline main\n * action, the pages (groups past ~5 pages, one level), Settings at the bottom.\n * Folded: 56px of icons with the same order and the same active chip.\n *\n * `auto` renders both and lets CSS show one, so the switch costs no state and\n * no hydration. Only the visible one is in the accessibility tree.\n */\nexport function BackdropAppMenu(props: BackdropAppMenuProps) {\n  const { folded = 'auto', label, className } = props\n  return (\n    <nav className={cx(styles.menu, className)} aria-label={label} data-folded={String(folded)}>\n      {folded !== true && <OpenMenu {...props} />}\n      {folded !== false && <FoldedMenu {...props} />}\n    </nav>\n  )\n}\n\nfunction Row({ item, Link, folded }: { item: BackdropAppMenuItem; Link: ElementType; folded: boolean }) {\n  const isSoon = item.soon !== undefined\n  const Element: ElementType = item.href !== undefined && !isSoon ? Link : 'button'\n  const elementProps =\n    item.href !== undefined && !isSoon ? { href: item.href } : { type: 'button', 'aria-disabled': isSoon || undefined }\n  const row = (\n    <Element\n      {...elementProps}\n      onClick={isSoon ? undefined : item.onClick}\n      aria-current={item.active ? 'page' : undefined}\n      aria-label={folded ? item.label : undefined}\n      className={folded ? styles.foldedItem : styles.item}\n    >\n      <span className={styles.itemIcon}>{item.icon}</span>\n      {!folded && <span className={styles.itemLabel}>{item.label}</span>}\n      {!folded && item.count !== undefined && <BackdropBadge label={item.countLabel}>{item.count}</BackdropBadge>}\n      {!folded && isSoon && <BackdropSoonTag>{item.soon}</BackdropSoonTag>}\n      {folded && item.count !== undefined && <span className={styles.foldedDot} aria-hidden=\"true\" />}\n    </Element>\n  )\n  return folded ? (\n    <BackdropTooltip content={item.label} side=\"right\" labelsTrigger>\n      {row}\n    </BackdropTooltip>\n  ) : (\n    row\n  )\n}\n\nfunction OpenMenu({ appName, mark, action, sections, settings, getStarted, linkComponent = 'a' }: BackdropAppMenuProps) {\n  const ActionElement: ElementType = action.href !== undefined ? linkComponent : 'button'\n  return (\n    <div className={styles.open}>\n      <div className={styles.header}>\n        <span className={styles.mark}>{mark}</span>\n        <span className={styles.appName}>{appName}</span>\n      </div>\n      <ActionElement {...(action.href !== undefined ? { href: action.href } : { type: 'button' })} onClick={action.onClick} className={styles.action}>\n        <Plus />\n        <span>{action.label}</span>\n      </ActionElement>\n      <div className={styles.sections}>\n        {sections.map((section, index) => (\n          <div key={section.label ?? index} className={styles.section}>\n            {section.label && <p className={styles.groupLabel}>{section.label}</p>}\n            <ul className={styles.list}>\n              {section.items.map((item) => (\n                <li key={item.key}>\n                  <Row item={item} Link={linkComponent} folded={false} />\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n      </div>\n      <div className={styles.fill} />\n      {getStarted && <div className={styles.getStarted}>{getStarted}</div>}\n      <Row item={settings} Link={linkComponent} folded={false} />\n    </div>\n  )\n}\n\nfunction FoldedMenu({ mark, appName, action, sections, settings, linkComponent = 'a' }: BackdropAppMenuProps) {\n  const ActionElement: ElementType = action.href !== undefined ? linkComponent : 'button'\n  return (\n    <div className={styles.folded}>\n      <span className={styles.foldedMark}>\n        <span className={styles.mark} role=\"img\" aria-label={appName}>\n          {mark}\n        </span>\n      </span>\n      <BackdropTooltip content={action.label} side=\"right\" labelsTrigger>\n        <ActionElement\n          {...(action.href !== undefined ? { href: action.href } : { type: 'button' })}\n          onClick={action.onClick}\n          aria-label={action.label}\n          className={styles.foldedAction}\n        >\n          <Plus />\n        </ActionElement>\n      </BackdropTooltip>\n      <ul className={styles.foldedList}>\n        {sections.map((section, index) => (\n          <li key={section.label ?? index} className={styles.foldedSection}>\n            {index > 0 && <span className={styles.foldedDivider} aria-hidden=\"true\" />}\n            <ul className={styles.list}>\n              {section.items.map((item) => (\n                <li key={item.key}>\n                  <Row item={item} Link={linkComponent} folded />\n                </li>\n              ))}\n            </ul>\n          </li>\n        ))}\n      </ul>\n      <div className={styles.fill} />\n      <Row item={settings} Link={linkComponent} folded />\n    </div>\n  )\n}\n"],"names":["BackdropAppMenu","props","folded","label","className","jsxs","cx","styles","jsx","OpenMenu","FoldedMenu","Row","item","Link","isSoon","Element","elementProps","row","BackdropBadge","BackdropSoonTag","BackdropTooltip","appName","mark","action","sections","settings","getStarted","linkComponent","ActionElement","Plus","section","index"],"mappings":";;;;;;AAmEO,SAASA,EAAgBC,GAA6B;AAC3D,QAAM,EAAE,QAAAC,IAAS,QAAQ,OAAAC,GAAO,WAAAC,MAAcH;AAC9C,SACE,gBAAAI,EAAC,OAAA,EAAI,WAAWC,EAAGC,EAAO,MAAMH,CAAS,GAAG,cAAYD,GAAO,eAAa,OAAOD,CAAM,GACtF,UAAA;AAAA,IAAAA,MAAW,MAAQ,gBAAAM,EAACC,GAAA,EAAU,GAAGR,EAAA,CAAO;AAAA,IACxCC,MAAW,MAAS,gBAAAM,EAACE,GAAA,EAAY,GAAGT,EAAA,CAAO;AAAA,EAAA,GAC9C;AAEJ;AAEA,SAASU,EAAI,EAAE,MAAAC,GAAM,MAAAC,GAAM,QAAAX,KAA6E;AACtG,QAAMY,IAASF,EAAK,SAAS,QACvBG,IAAuBH,EAAK,SAAS,UAAa,CAACE,IAASD,IAAO,UACnEG,IACJJ,EAAK,SAAS,UAAa,CAACE,IAAS,EAAE,MAAMF,EAAK,KAAA,IAAS,EAAE,MAAM,UAAU,iBAAiBE,KAAU,OAAA,GACpGG,IACJ,gBAAAZ;AAAA,IAACU;AAAA,IAAA;AAAA,MACE,GAAGC;AAAA,MACJ,SAASF,IAAS,SAAYF,EAAK;AAAA,MACnC,gBAAcA,EAAK,SAAS,SAAS;AAAA,MACrC,cAAYV,IAASU,EAAK,QAAQ;AAAA,MAClC,WAAWV,IAASK,EAAO,aAAaA,EAAO;AAAA,MAE/C,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWD,EAAO,UAAW,YAAK,MAAK;AAAA,QAC5C,CAACL,KAAU,gBAAAM,EAAC,QAAA,EAAK,WAAWD,EAAO,WAAY,YAAK,OAAM;AAAA,QAC1D,CAACL,KAAUU,EAAK,UAAU,UAAa,gBAAAJ,EAACU,GAAA,EAAc,OAAON,EAAK,YAAa,UAAAA,EAAK,MAAA,CAAM;AAAA,QAC1F,CAACV,KAAUY,KAAU,gBAAAN,EAACW,GAAA,EAAiB,YAAK,MAAK;AAAA,QACjDjB,KAAUU,EAAK,UAAU,UAAa,gBAAAJ,EAAC,UAAK,WAAWD,EAAO,WAAW,eAAY,OAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGjG,SAAOL,IACL,gBAAAM,EAACY,GAAA,EAAgB,SAASR,EAAK,OAAO,MAAK,SAAQ,eAAa,IAC7D,UAAAK,EAAA,CACH,IAEAA;AAEJ;AAEA,SAASR,EAAS,EAAE,SAAAY,GAAS,MAAAC,GAAM,QAAAC,GAAQ,UAAAC,GAAU,UAAAC,GAAU,YAAAC,GAAY,eAAAC,IAAgB,OAA6B;AACtH,QAAMC,IAA6BL,EAAO,SAAS,SAAYI,IAAgB;AAC/E,SACE,gBAAAtB,EAAC,OAAA,EAAI,WAAWE,EAAO,MACrB,UAAA;AAAA,IAAA,gBAAAF,EAAC,OAAA,EAAI,WAAWE,EAAO,QACrB,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWD,EAAO,MAAO,UAAAe,GAAK;AAAA,MACpC,gBAAAd,EAAC,QAAA,EAAK,WAAWD,EAAO,SAAU,UAAAc,EAAA,CAAQ;AAAA,IAAA,GAC5C;AAAA,IACA,gBAAAhB,EAACuB,KAAe,GAAIL,EAAO,SAAS,SAAY,EAAE,MAAMA,EAAO,KAAA,IAAS,EAAE,MAAM,YAAa,SAASA,EAAO,SAAS,WAAWhB,EAAO,QACtI,UAAA;AAAA,MAAA,gBAAAC,EAACqB,GAAA,EAAK;AAAA,MACN,gBAAArB,EAAC,QAAA,EAAM,UAAAe,EAAO,MAAA,CAAM;AAAA,IAAA,GACtB;AAAA,IACA,gBAAAf,EAAC,OAAA,EAAI,WAAWD,EAAO,UACpB,UAAAiB,EAAS,IAAI,CAACM,GAASC,MACtB,gBAAA1B,EAAC,OAAA,EAAiC,WAAWE,EAAO,SACjD,UAAA;AAAA,MAAAuB,EAAQ,SAAS,gBAAAtB,EAAC,KAAA,EAAE,WAAWD,EAAO,YAAa,YAAQ,MAAA,CAAM;AAAA,MAClE,gBAAAC,EAAC,QAAG,WAAWD,EAAO,MACnB,UAAAuB,EAAQ,MAAM,IAAI,CAAClB,MAClB,gBAAAJ,EAAC,QACC,UAAA,gBAAAA,EAACG,GAAA,EAAI,MAAAC,GAAY,MAAMe,GAAe,QAAQ,IAAO,EAAA,GAD9Cf,EAAK,GAEd,CACD,EAAA,CACH;AAAA,IAAA,EAAA,GARQkB,EAAQ,SAASC,CAS3B,CACD,EAAA,CACH;AAAA,IACA,gBAAAvB,EAAC,OAAA,EAAI,WAAWD,EAAO,KAAA,CAAM;AAAA,IAC5BmB,KAAc,gBAAAlB,EAAC,OAAA,EAAI,WAAWD,EAAO,YAAa,UAAAmB,GAAW;AAAA,sBAC7Df,GAAA,EAAI,MAAMc,GAAU,MAAME,GAAe,QAAQ,GAAA,CAAO;AAAA,EAAA,GAC3D;AAEJ;AAEA,SAASjB,EAAW,EAAE,MAAAY,GAAM,SAAAD,GAAS,QAAAE,GAAQ,UAAAC,GAAU,UAAAC,GAAU,eAAAE,IAAgB,OAA6B;AAC5G,QAAMC,IAA6BL,EAAO,SAAS,SAAYI,IAAgB;AAC/E,SACE,gBAAAtB,EAAC,OAAA,EAAI,WAAWE,EAAO,QACrB,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWD,EAAO,YACtB,4BAAC,QAAA,EAAK,WAAWA,EAAO,MAAM,MAAK,OAAM,cAAYc,GAClD,aACH,GACF;AAAA,IACA,gBAAAb,EAACY,KAAgB,SAASG,EAAO,OAAO,MAAK,SAAQ,eAAa,IAChE,UAAA,gBAAAf;AAAA,MAACoB;AAAA,MAAA;AAAA,QACE,GAAIL,EAAO,SAAS,SAAY,EAAE,MAAMA,EAAO,KAAA,IAAS,EAAE,MAAM,SAAA;AAAA,QACjE,SAASA,EAAO;AAAA,QAChB,cAAYA,EAAO;AAAA,QACnB,WAAWhB,EAAO;AAAA,QAElB,4BAACsB,GAAA,CAAA,CAAK;AAAA,MAAA;AAAA,IAAA,GAEV;AAAA,IACA,gBAAArB,EAAC,MAAA,EAAG,WAAWD,EAAO,YACnB,UAAAiB,EAAS,IAAI,CAACM,GAASC,MACtB,gBAAA1B,EAAC,MAAA,EAAgC,WAAWE,EAAO,eAChD,UAAA;AAAA,MAAAwB,IAAQ,KAAK,gBAAAvB,EAAC,QAAA,EAAK,WAAWD,EAAO,eAAe,eAAY,QAAO;AAAA,MACxE,gBAAAC,EAAC,QAAG,WAAWD,EAAO,MACnB,UAAAuB,EAAQ,MAAM,IAAI,CAAClB,MAClB,gBAAAJ,EAAC,QACC,UAAA,gBAAAA,EAACG,GAAA,EAAI,MAAAC,GAAY,MAAMe,GAAe,QAAM,IAAC,EAAA,GADtCf,EAAK,GAEd,CACD,EAAA,CACH;AAAA,IAAA,EAAA,GAROkB,EAAQ,SAASC,CAS1B,CACD,EAAA,CACH;AAAA,IACA,gBAAAvB,EAAC,OAAA,EAAI,WAAWD,EAAO,KAAA,CAAM;AAAA,sBAC5BI,GAAA,EAAI,MAAMc,GAAU,MAAME,GAAe,QAAM,GAAA,CAAC;AAAA,EAAA,GACnD;AAEJ;"}