@boost33/ui 0.1.0 → 0.3.0

package/README.md

@@ -1,7 +1,9 @@
 # @boost33/ui
 
-The app shell every Boost33 product renders inside. Eleven components and the
-design tokens they are drawn with, published to public npm.
+The app shell every Boost33 product renders inside. Fourteen components and the
+design tokens they are drawn with, published to public npm. Eleven ship today;
+AccountMenu, NotificationCenter and CommandPalette are in v1's scope and not
+built yet.
 
 Built because the product switcher and the wallet chip worked in the Wallet and
 nowhere else, and because a sidebar fixed in one app fixed nothing in the other
@@ -15,6 +17,7 @@ three.
 | What we are building | Linear document **The shared app shell** |
 | Vocabulary | `CONTEXT.md`, and the initiative's **Vocabulary** document |
 | Settled decisions | `docs/adr/` |
+| What changed between versions | `CHANGELOG.md` |
 | Tickets | Linear, project **Boost33 Shared UI** |
 
 ## Commands

package/dist/anchored-overlay.d.ts

@@ -0,0 +1,86 @@
+import { KeyboardEvent } from 'react';
+/** What `aria-haspopup` announces, when a consumer has a popup role to announce. */
+export type AnchoredOverlayPopup = 'menu' | 'dialog' | 'listbox' | 'tree' | 'grid';
+export interface UseAnchoredOverlayOptions {
+    /**
+     * The value for the trigger's `aria-haspopup`, for a consumer that has a popup
+     * role to announce. Per consumer, not fixed: the value differs by what the
+     * panel actually is, so one hardcoded here would misannounce another.
+     *
+     * Optional, and its absence means only "no popup role", nothing more. ADR-0010
+     * puts AppSwitcher, AccountMenu and NotificationCenter on the Disclosure
+     * pattern: their trigger wants `aria-expanded` while a container of ordinary
+     * links and buttons must not claim a popup role. Supply it and the hook emits
+     * `aria-haspopup`; omit it and the trigger still carries `aria-expanded` and
+     * `aria-controls`. Whether there is a trigger at all is `hasTrigger`, not this.
+     */
+    haspopup?: AnchoredOverlayPopup;
+    /**
+     * Whether this overlay has a trigger element. Defaults to `true`, because
+     * three of the four consumers open from one. Set it `false` for the ⌘K-opened
+     * command palette (B33-495), which may have no trigger at all: then no
+     * `triggerProps` is produced -- there is nothing to spread it onto, and
+     * `aria-expanded`/`aria-controls` would announce a trigger that does not
+     * exist. Focus still restores, to the captured opener.
+     *
+     * This is the gate `haspopup` used to stand in for. Conflating "has no
+     * trigger" with "has no popup role" is what B33-720 corrects: a disclosure
+     * has a trigger and no popup role, and could not say so before.
+     */
+    hasTrigger?: boolean;
+    /**
+     * Drives the overlay from outside. Supplying it makes the overlay
+     * controlled: it opens and closes only when this changes, and every attempt
+     * to move it arrives at `onOpenChange` instead. A specimen route passes it
+     * to draw the open panel with no interaction, which is Stage A.
+     */
+    open?: boolean;
+    /** Starting state when uncontrolled. Ignored once `open` is supplied. */
+    defaultOpen?: boolean;
+    /**
+     * Every open and close, including the ones this hook decides on its own. A
+     * consumer whose ancestor clips overflow needs this to un-clip while the
+     * panel overhangs -- the sidebar does exactly that in boostledger.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The modal variant, for the command palette (B33-495) alone. It additionally
+     * traps focus inside the panel, marks the rest of the document `inert`, and
+     * skips the focusout dismissal listener -- under a trap focus never leaves the
+     * panel, so that listener could never fire and is not attached. Everything
+     * else in the contract is unchanged: Escape restores to the opener and an
+     * outside (backdrop) pointer-down closes.
+     *
+     * A per-consumer flag, and only the palette sets it. AppSwitcher, AccountMenu
+     * and NotificationCenter never become modal -- B33-479 carries that as a hard
+     * acceptance criterion. See docs/adr/0009.
+     */
+    modal?: boolean;
+}
+export interface AnchoredOverlay {
+    open: boolean;
+    /** Move the overlay. On a controlled overlay this only reports. */
+    setOpen: (next: boolean) => void;
+    toggle: () => void;
+    /** Close and return focus, for a row that acts and dismisses. */
+    close: () => void;
+    /**
+     * Undefined when `hasTrigger` is `false`: a trigger-less overlay has nothing
+     * to carry these attributes, so the hook produces none. `aria-haspopup` is
+     * present only when a `haspopup` value was supplied -- a disclosure trigger
+     * carries `aria-expanded` and `aria-controls` without it.
+     */
+    triggerProps?: {
+        ref: (node: HTMLElement | null) => void;
+        'aria-haspopup'?: AnchoredOverlayPopup;
+        'aria-expanded': boolean;
+        'aria-controls': string | undefined;
+        onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+    };
+    panelProps: {
+        ref: (node: HTMLElement | null) => void;
+        id: string;
+        onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+    };
+}
+export declare function useAnchoredOverlay(options: UseAnchoredOverlayOptions): AnchoredOverlay;

package/dist/anchored-overlay.js

@@ -0,0 +1,125 @@
+import { useId as B, useRef as i, useState as N, useCallback as s, useEffect as m } from "react";
+const R = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function x(b) {
+  return Array.from(b.querySelectorAll(R));
+}
+function j(b) {
+  const {
+    haspopup: O,
+    hasTrigger: K = !0,
+    open: P,
+    defaultOpen: T = !1,
+    onOpenChange: w,
+    modal: c = !1
+  } = b, A = B(), g = i(null), f = i(null), y = P !== void 0, [C, k] = N(T), n = y ? P : C, d = i(w);
+  d.current = w;
+  const p = i(!0), h = i(null), v = i(n), a = s(
+    (e) => {
+      var t;
+      y || k(e), (t = d.current) == null || t.call(d, e);
+    },
+    [y]
+  ), l = s((e) => {
+    var t, r;
+    return e ? !!((t = g.current) != null && t.contains(e) || (r = f.current) != null && r.contains(e)) : !1;
+  }, []), u = s(
+    (e) => {
+      p.current = e, a(!1);
+    },
+    [a]
+  );
+  m(() => {
+    var e;
+    if (n && !v.current) {
+      const t = document.activeElement;
+      h.current = t && t !== document.body ? t : null, p.current = !0;
+    } else if (!n && v.current) {
+      const t = h.current;
+      p.current && (t != null && t.isConnected ? t.focus() : (e = g.current) == null || e.focus()), h.current = null, p.current = !0;
+    }
+    v.current = n;
+  }, [n]), m(() => {
+    if (!n || c) return;
+    const e = (t) => {
+      if (!l(t.target)) return;
+      const r = t.relatedTarget;
+      r && (l(r) || u(!1));
+    };
+    return document.addEventListener("focusout", e, !0), () => document.removeEventListener("focusout", e, !0);
+  }, [n, c, l, u]), m(() => {
+    if (!n) return;
+    const e = (t) => {
+      l(t.target) || u(!1);
+    };
+    return document.addEventListener("pointerdown", e, !0), () => document.removeEventListener("pointerdown", e, !0);
+  }, [n, l, u]), m(() => {
+    if (!n || !c) return;
+    const e = f.current;
+    if (!e) return;
+    (x(e)[0] ?? e).focus();
+    const r = Array.from(document.body.children).filter(
+      (o) => o instanceof HTMLElement && !o.contains(e)
+    );
+    for (const o of r) o.setAttribute("inert", "");
+    return () => {
+      for (const o of r) o.removeAttribute("inert");
+    };
+  }, [n, c]);
+  const E = s(
+    (e) => {
+      e.key !== "Escape" || !n || (e.stopPropagation(), u(!0));
+    },
+    [n, u]
+  ), F = s(
+    (e) => {
+      if (E(e), !c || e.key !== "Tab" || e.defaultPrevented) return;
+      const t = f.current;
+      if (!t) return;
+      const r = x(t);
+      if (r.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const o = r[0], D = r[r.length - 1], L = document.activeElement;
+      e.shiftKey && L === o ? (e.preventDefault(), D.focus()) : !e.shiftKey && L === D && (e.preventDefault(), o.focus());
+    },
+    [E, c]
+  ), I = s((e) => {
+    g.current = e;
+  }, []), S = s((e) => {
+    f.current = e;
+  }, []);
+  return {
+    open: n,
+    setOpen: a,
+    toggle: s(() => a(!n), [a, n]),
+    close: s(() => u(!0), [u]),
+    triggerProps: K ? {
+      ref: I,
+      // Only when a value was supplied. A disclosure has a trigger and no
+      // popup role, so it registers a trigger without announcing one.
+      ...O ? { "aria-haspopup": O } : {},
+      "aria-expanded": n,
+      // Only while the panel exists. Pointing at an id that is not in the
+      // document is a dangling reference an AT has to resolve and cannot.
+      "aria-controls": n ? A : void 0,
+      onKeyDown: E
+    } : void 0,
+    panelProps: {
+      ref: S,
+      id: A,
+      onKeyDown: F
+    }
+  };
+}
+export {
+  j as useAnchoredOverlay
+};
+//# sourceMappingURL=anchored-overlay.js.map

package/dist/anchored-overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"anchored-overlay.js","sources":["../src/anchored-overlay.ts"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from 'react'\nimport type { KeyboardEvent } from 'react'\n\n/*\n * The dismissal contract every anchored overlay in this package shares.\n *\n * Four components open a panel from a trigger -- AppSwitcher (B33-479),\n * AccountMenu (B33-493), NotificationCenter (B33-494) and CommandPalette\n * (B33-495) -- and B33-533 asked for one hook covering all four, extracted\n * from the switcher onBlur in boostledger. All four use this. It owns\n * dismissal, focus restoration and trigger ARIA; it does NOT own what keys do\n * inside the panel, and it does not position anything. The command palette is\n * the modal variant: pass `modal` and it also traps focus, marks the\n * background `inert`, and drops the focusout listener a trap makes dead. See\n * docs/adr/0009.\n *\n * Internal on purpose: absent from src/index.ts, so consumers of the package\n * get components rather than behaviour they could wire up three ways.\n *\n * Three things here are corrections to the reference implementation rather\n * than transcriptions of it, and each one is a bug it has:\n *\n *   - Containment is a ref test, not `currentTarget.parentElement.contains`.\n *     DOM parentage is false the moment a panel is portalled, and a portalled\n *     panel would then close on its first Tab.\n *   - A focusout with no relatedTarget does not close. macOS Safari and\n *     Firefox do not focus a clicked button, so the trigger blurs with a null\n *     relatedTarget while the pointer is still travelling to a row -- closing\n *     there shuts the panel underneath the click that opened a row.\n *   - Outside pointer-down closes. The reference has no outside handler at\n *     all, so once focus entered its panel nothing could shut it: the trigger\n *     had already blurred and never blurs again.\n *\n * Reduced motion is deliberately absent. It stays in CSS, in each component's\n * own module, the way NavItem.module.css and WalletChip.module.css already do\n * it -- there is no matchMedia anywhere in src/, and jsdom ships none.\n */\n\n/** What `aria-haspopup` announces, when a consumer has a popup role to announce. */\nexport type AnchoredOverlayPopup = 'menu' | 'dialog' | 'listbox' | 'tree' | 'grid'\n\nexport interface UseAnchoredOverlayOptions {\n  /**\n   * The value for the trigger's `aria-haspopup`, for a consumer that has a popup\n   * role to announce. Per consumer, not fixed: the value differs by what the\n   * panel actually is, so one hardcoded here would misannounce another.\n   *\n   * Optional, and its absence means only \"no popup role\", nothing more. ADR-0010\n   * puts AppSwitcher, AccountMenu and NotificationCenter on the Disclosure\n   * pattern: their trigger wants `aria-expanded` while a container of ordinary\n   * links and buttons must not claim a popup role. Supply it and the hook emits\n   * `aria-haspopup`; omit it and the trigger still carries `aria-expanded` and\n   * `aria-controls`. Whether there is a trigger at all is `hasTrigger`, not this.\n   */\n  haspopup?: AnchoredOverlayPopup\n  /**\n   * Whether this overlay has a trigger element. Defaults to `true`, because\n   * three of the four consumers open from one. Set it `false` for the ⌘K-opened\n   * command palette (B33-495), which may have no trigger at all: then no\n   * `triggerProps` is produced -- there is nothing to spread it onto, and\n   * `aria-expanded`/`aria-controls` would announce a trigger that does not\n   * exist. Focus still restores, to the captured opener.\n   *\n   * This is the gate `haspopup` used to stand in for. Conflating \"has no\n   * trigger\" with \"has no popup role\" is what B33-720 corrects: a disclosure\n   * has a trigger and no popup role, and could not say so before.\n   */\n  hasTrigger?: boolean\n  /**\n   * Drives the overlay from outside. Supplying it makes the overlay\n   * controlled: it opens and closes only when this changes, and every attempt\n   * to move it arrives at `onOpenChange` instead. A specimen route passes it\n   * to draw the open panel with no interaction, which is Stage A.\n   */\n  open?: boolean\n  /** Starting state when uncontrolled. Ignored once `open` is supplied. */\n  defaultOpen?: boolean\n  /**\n   * Every open and close, including the ones this hook decides on its own. A\n   * consumer whose ancestor clips overflow needs this to un-clip while the\n   * panel overhangs -- the sidebar does exactly that in boostledger.\n   */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * The modal variant, for the command palette (B33-495) alone. It additionally\n   * traps focus inside the panel, marks the rest of the document `inert`, and\n   * skips the focusout dismissal listener -- under a trap focus never leaves the\n   * panel, so that listener could never fire and is not attached. Everything\n   * else in the contract is unchanged: Escape restores to the opener and an\n   * outside (backdrop) pointer-down closes.\n   *\n   * A per-consumer flag, and only the palette sets it. AppSwitcher, AccountMenu\n   * and NotificationCenter never become modal -- B33-479 carries that as a hard\n   * acceptance criterion. See docs/adr/0009.\n   */\n  modal?: boolean\n}\n\nexport interface AnchoredOverlay {\n  open: boolean\n  /** Move the overlay. On a controlled overlay this only reports. */\n  setOpen: (next: boolean) => void\n  toggle: () => void\n  /** Close and return focus, for a row that acts and dismisses. */\n  close: () => void\n  /**\n   * Undefined when `hasTrigger` is `false`: a trigger-less overlay has nothing\n   * to carry these attributes, so the hook produces none. `aria-haspopup` is\n   * present only when a `haspopup` value was supplied -- a disclosure trigger\n   * carries `aria-expanded` and `aria-controls` without it.\n   */\n  triggerProps?: {\n    ref: (node: HTMLElement | null) => void\n    'aria-haspopup'?: AnchoredOverlayPopup\n    'aria-expanded': boolean\n    'aria-controls': string | undefined\n    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void\n  }\n  panelProps: {\n    ref: (node: HTMLElement | null) => void\n    id: string\n    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void\n  }\n}\n\n// The tabbable elements inside a modal panel, in document order, for the focus\n// trap. Deliberately narrow: the palette's own search input and results are all\n// it holds, and jsdom cannot tell a visible element from a hidden one anyway.\n// `[tabindex=\"-1\"]` is excluded because a programmatically-focusable container\n// is not a Tab stop. Query order is document order, which is what Tab follows.\nconst FOCUSABLE = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',')\n\nfunction focusableWithin(root: HTMLElement): HTMLElement[] {\n  return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE))\n}\n\nexport function useAnchoredOverlay(options: UseAnchoredOverlayOptions): AnchoredOverlay {\n  const {\n    haspopup,\n    hasTrigger = true,\n    open: openProp,\n    defaultOpen = false,\n    onOpenChange,\n    modal = false,\n  } = options\n\n  const panelId = useId()\n  const triggerRef = useRef<HTMLElement | null>(null)\n  const panelRef = useRef<HTMLElement | null>(null)\n\n  const controlled = openProp !== undefined\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen)\n  const open = controlled ? openProp : uncontrolledOpen\n\n  // Read through a ref inside the document listeners. An inline arrow for\n  // onOpenChange is a new function every render, and without this the\n  // listeners detach and reattach on each one.\n  const onOpenChangeRef = useRef(onOpenChange)\n  onOpenChangeRef.current = onOpenChange\n\n  // Whether the close that is about to happen should move focus. Escape and a\n  // component's own close() restore; a dismissal caused by focus or a pointer\n  // already moving somewhere else does not, because focus has arrived where\n  // the person sent it and dragging it back would fight them.\n  const restoreOnClose = useRef(true)\n  const openedFrom = useRef<HTMLElement | null>(null)\n  const wasOpen = useRef(open)\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (!controlled) setUncontrolledOpen(next)\n      onOpenChangeRef.current?.(next)\n    },\n    [controlled],\n  )\n\n  const isInside = useCallback((node: Node | null) => {\n    if (!node) return false\n    return Boolean(triggerRef.current?.contains(node) || panelRef.current?.contains(node))\n  }, [])\n\n  const dismiss = useCallback(\n    (restore: boolean) => {\n      restoreOnClose.current = restore\n      setOpen(false)\n    },\n    [setOpen],\n  )\n\n  // Capture the opener as the overlay opens, restore as it closes. Reading\n  // document.activeElement at open time rather than assuming the trigger is\n  // what makes a palette opened from a table return focus to the table -- and\n  // for the three non-modal consumers the opener IS the trigger, so \"restore\n  // the opener\" and \"restore the trigger\" name the same element.\n  useEffect(() => {\n    if (open && !wasOpen.current) {\n      // document.activeElement is <body> when nothing is focused, and restoring\n      // focus to the body is indistinguishable from dropping it. Treat that as\n      // no opener so the close falls through to the trigger.\n      const active = document.activeElement\n      openedFrom.current = active && active !== document.body ? (active as HTMLElement) : null\n      restoreOnClose.current = true\n    } else if (!open && wasOpen.current) {\n      const opener = openedFrom.current\n      if (restoreOnClose.current) {\n        // isConnected, not a truthiness check: the opener can have unmounted\n        // while the panel was up, and focusing a detached node silently sends\n        // focus to the body instead.\n        if (opener?.isConnected) opener.focus()\n        else triggerRef.current?.focus()\n      }\n      openedFrom.current = null\n      restoreOnClose.current = true\n    }\n    wasOpen.current = open\n  }, [open])\n\n  // focusout rather than React's onBlur, on the document rather than on either\n  // element. A portalled panel is not a DOM descendant of anything the trigger\n  // can see, so this is the only listener that observes both halves.\n  useEffect(() => {\n    // A modal traps focus in the panel, so focus never leaves the trigger and\n    // panel together and this listener could never fire. Skip attaching it\n    // rather than leave a handler that only ever runs its early return.\n    if (!open || modal) return\n    const onFocusOut = (event: FocusEvent) => {\n      if (!isInside(event.target as Node | null)) return\n      const next = event.relatedTarget as Node | null\n      if (!next) return\n      if (isInside(next)) return\n      dismiss(false)\n    }\n    document.addEventListener('focusout', onFocusOut, true)\n    return () => document.removeEventListener('focusout', onFocusOut, true)\n  }, [open, modal, isInside, dismiss])\n\n  // pointerdown, and never preventDefault: the click that dismissed the panel\n  // still has to reach whatever it landed on. The trigger counts as inside, so\n  // its own click falls through to its onClick and toggles -- were it outside,\n  // pointerdown would close and the following click would reopen, and the\n  // trigger could never be clicked shut.\n  useEffect(() => {\n    if (!open) return\n    const onPointerDown = (event: Event) => {\n      if (isInside(event.target as Node | null)) return\n      dismiss(false)\n    }\n    document.addEventListener('pointerdown', onPointerDown, true)\n    return () => document.removeEventListener('pointerdown', onPointerDown, true)\n  }, [open, isInside, dismiss])\n\n  // Modal only: seal the panel off from the rest of the document while it is\n  // open. Pull focus in (the opener was already captured above, so restoration\n  // still lands where the palette was summoned from), and mark every top-level\n  // sibling that does not contain the panel `inert` so neither pointer nor AT\n  // reaches behind it. The panel is portalled to the body, so its own top-level\n  // node is skipped and stays live. Both undone on close.\n  useEffect(() => {\n    if (!open || !modal) return\n    const panel = panelRef.current\n    if (!panel) return\n    const focusables = focusableWithin(panel)\n    ;(focusables[0] ?? panel).focus()\n\n    const sealed = Array.from(document.body.children).filter(\n      (el): el is HTMLElement => el instanceof HTMLElement && !el.contains(panel),\n    )\n    for (const el of sealed) el.setAttribute('inert', '')\n    return () => {\n      for (const el of sealed) el.removeAttribute('inert')\n    }\n  }, [open, modal])\n\n  const onKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLElement>) => {\n      if (event.key !== 'Escape' || !open) return\n      // Stop here rather than letting it climb. An overlay that consumed the\n      // key and an ancestor that also closes on it would both act on one press.\n      event.stopPropagation()\n      dismiss(true)\n    },\n    [open, dismiss],\n  )\n\n  // The panel shares the trigger's Escape and, under a modal, also keeps Tab\n  // inside itself. Wrapping at the ends is the whole trap the keyboard needs;\n  // the `inert` background stops the pointer reaching anything behind it.\n  const onPanelKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLElement>) => {\n      onKeyDown(event)\n      if (!modal || event.key !== 'Tab' || event.defaultPrevented) return\n      const panel = panelRef.current\n      if (!panel) return\n      const focusables = focusableWithin(panel)\n      if (focusables.length === 0) {\n        event.preventDefault()\n        return\n      }\n      const first = focusables[0] as HTMLElement\n      const last = focusables[focusables.length - 1] as HTMLElement\n      const active = document.activeElement\n      if (event.shiftKey && active === first) {\n        event.preventDefault()\n        last.focus()\n      } else if (!event.shiftKey && active === last) {\n        event.preventDefault()\n        first.focus()\n      }\n    },\n    [onKeyDown, modal],\n  )\n\n  const setTriggerNode = useCallback((node: HTMLElement | null) => {\n    triggerRef.current = node\n  }, [])\n\n  const setPanelNode = useCallback((node: HTMLElement | null) => {\n    panelRef.current = node\n  }, [])\n\n  return {\n    open,\n    setOpen,\n    toggle: useCallback(() => setOpen(!open), [setOpen, open]),\n    close: useCallback(() => dismiss(true), [dismiss]),\n    triggerProps: hasTrigger\n      ? {\n          ref: setTriggerNode,\n          // Only when a value was supplied. A disclosure has a trigger and no\n          // popup role, so it registers a trigger without announcing one.\n          ...(haspopup ? { 'aria-haspopup': haspopup } : {}),\n          'aria-expanded': open,\n          // Only while the panel exists. Pointing at an id that is not in the\n          // document is a dangling reference an AT has to resolve and cannot.\n          'aria-controls': open ? panelId : undefined,\n          onKeyDown,\n        }\n      : undefined,\n    panelProps: {\n      ref: setPanelNode,\n      id: panelId,\n      onKeyDown: onPanelKeyDown,\n    },\n  }\n}\n"],"names":["FOCUSABLE","focusableWithin","root","useAnchoredOverlay","options","haspopup","hasTrigger","openProp","defaultOpen","onOpenChange","modal","panelId","useId","triggerRef","useRef","panelRef","controlled","uncontrolledOpen","setUncontrolledOpen","useState","open","onOpenChangeRef","restoreOnClose","openedFrom","wasOpen","setOpen","useCallback","next","_a","isInside","node","_b","dismiss","restore","useEffect","active","opener","onFocusOut","event","onPointerDown","panel","sealed","el","onKeyDown","onPanelKeyDown","focusables","first","last","setTriggerNode","setPanelNode"],"mappings":"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"}

package/dist/components/AppShell/AppShell.d.ts

@@ -0,0 +1,80 @@
+import { ElementType, ReactNode } from 'react';
+import { TopBarProps } from '../TopBar/TopBar';
+import { PageHeaderProps } from '../PageHeader/PageHeader';
+/** One nav row, described as data. The consumer never hands the shell markup. */
+export interface AppShellNavItem {
+    /** The row's name. Truncates rather than wrapping; on the rail it collapses to the accessibility tree. */
+    label: string;
+    /** The leading icon. Decorative -- the label carries the name. On the rail it is all that shows. */
+    icon?: ReactNode;
+    /** Marks this row as the current page. Sets `aria-current="page"`. */
+    active?: boolean;
+    /** Trailing-slot count. Omit to leave the slot empty; it still reserves its width so counts line up. */
+    count?: number;
+    /** Renders `count` in the primary color instead of muted. */
+    countUrgent?: boolean;
+    /** Where the row goes. A nav row's destination is data; the shell renders it as a link. */
+    href?: string;
+}
+/** One nav section: an optional header over a run of rows. */
+export interface AppShellNavSection {
+    /** The section header. Omit for a headerless section (the nav's first section has none). On the rail every header drops. */
+    label?: string;
+    /** The section's rows, as data. */
+    items: AppShellNavItem[];
+}
+export interface AppShellProps {
+    /**
+     * The product this shell renders for. The consumer names it once, here, and
+     * the shell carries it down -- it labels the sidebar and its navigation, and
+     * nothing above the nav (the Boost33 wordmark and brand) changes between
+     * products. This one prop is the whole of the shell's product-awareness.
+     */
+    product: string;
+    /** The navigation, as data. No product hardcodes rows; the shell composes them. */
+    nav: AppShellNavSection[];
+    /** The top bar's content -- the breadcrumb and the shell actions on its right. */
+    topBar: TopBarProps;
+    /**
+     * The page header's content -- the page title, its optional subtitle and
+     * trailing controls. Omit it for a screen that has no title: the Wallet's own
+     * overview is one, which is why its 9 Sep baseline shows the top bar's
+     * hairline sitting directly on the body (B33-750). The header draws no border
+     * of its own, so dropping it leaves that hairline in place rather than a gap.
+     */
+    pageHeader?: PageHeaderProps;
+    /** The Boost33 mark for the wordmark lockup. Passed in, the way Wordmark takes it; on the rail it is all that shows. */
+    mark?: ReactNode;
+    /**
+     * The product switcher, sitting under the wordmark. A slot: the registry it
+     * draws is served by Identity (ADR-0003), not owned here. Render its own
+     * collapsed form for the rail.
+     */
+    switcher?: ReactNode;
+    /**
+     * The wallet chip, pinned above the footer. A slot: the balance comes from
+     * `@boost33/ledger-client`, never read here. Render its own collapsed form
+     * for the rail.
+     */
+    wallet?: ReactNode;
+    /** The sidebar footer, below the wallet chip. A slot -- the product's own. */
+    footer?: ReactNode;
+    /**
+     * The sidebar collapsed to the 56px rail. A state of the shell: the sidebar
+     * narrows and every piece it owns collapses off this one flag. The slots
+     * (switcher, wallet, footer) render their own collapsed form.
+     */
+    collapsed?: boolean;
+    /**
+     * The element every linked nav row renders through. Defaults to a plain `a`;
+     * a consumer whose router owns navigation passes its own once here and the
+     * shell threads it to every row, so the whole nav goes client-side with the
+     * locale prefix intact rather than full-page-reloading (B33-847). This is the
+     * shell's one nod to how a consumer routes -- it renders the element, never
+     * knowing what it is. See docs/adr/0011.
+     */
+    linkComponent?: ElementType;
+    /** The page body. Sits on white, below the header. */
+    children: ReactNode;
+}
+export declare function AppShell({ product, nav, topBar, pageHeader, mark, switcher, wallet, footer, collapsed, linkComponent, children, }: AppShellProps): import("react").JSX.Element;

package/dist/components/AppShell/AppShell.js

@@ -0,0 +1,59 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { Sidebar as b } from "../Sidebar/Sidebar.js";
+import { NavSection as x } from "../NavSection/NavSection.js";
+import { NavItem as S } from "../NavItem/NavItem.js";
+import { TopBar as g } from "../TopBar/TopBar.js";
+import { PageHeader as j } from "../PageHeader/PageHeader.js";
+import { Wordmark as k } from "../Wordmark/Wordmark.js";
+import l from "./AppShell.module.css.js";
+function q({
+  product: e,
+  nav: d,
+  topBar: h,
+  pageHeader: m,
+  mark: v,
+  switcher: o,
+  wallet: c,
+  footer: s,
+  collapsed: n = !1,
+  linkComponent: f,
+  children: p
+}) {
+  return /* @__PURE__ */ i("div", { className: l.shell, children: [
+    /* @__PURE__ */ i(b, { label: e, collapsed: n, children: [
+      /* @__PURE__ */ r("div", { className: l.wordmark, children: /* @__PURE__ */ r(k, { mark: v, collapsed: n }) }),
+      o != null && /* @__PURE__ */ r("div", { className: l.switcher, children: o }),
+      /* @__PURE__ */ r("nav", { "aria-label": e, className: l.nav, children: d.map((t, u) => (
+        // No room for a header at 56px, so on the rail every section renders
+        // headerless -- its rows collapse to their icons and line up.
+        /* @__PURE__ */ r(x, { label: n ? void 0 : t.label, children: t.items.map((a, N) => /* @__PURE__ */ r(
+          S,
+          {
+            icon: a.icon,
+            active: a.active,
+            collapsed: n,
+            count: a.count,
+            countUrgent: a.countUrgent,
+            href: a.href,
+            linkComponent: f,
+            children: a.label
+          },
+          N
+        )) }, u)
+      )) }),
+      (c != null || s != null) && /* @__PURE__ */ i("div", { className: l.foot, children: [
+        c,
+        s
+      ] })
+    ] }),
+    /* @__PURE__ */ i("div", { className: l.main, children: [
+      /* @__PURE__ */ r(g, { ...h }),
+      m != null && /* @__PURE__ */ r(j, { ...m }),
+      /* @__PURE__ */ r("div", { className: l.content, children: p })
+    ] })
+  ] });
+}
+export {
+  q as AppShell
+};
+//# sourceMappingURL=AppShell.js.map

package/dist/components/AppShell/AppShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.js","sources":["../../../src/components/AppShell/AppShell.tsx"],"sourcesContent":["import type { ElementType, ReactNode } from 'react'\nimport { Sidebar } from '../Sidebar/Sidebar'\nimport { NavSection } from '../NavSection/NavSection'\nimport { NavItem } from '../NavItem/NavItem'\nimport { TopBar, type TopBarProps } from '../TopBar/TopBar'\nimport { PageHeader, type PageHeaderProps } from '../PageHeader/PageHeader'\nimport { Wordmark } from '../Wordmark/Wordmark'\nimport styles from './AppShell.module.css'\n\n/** One nav row, described as data. The consumer never hands the shell markup. */\nexport interface AppShellNavItem {\n  /** The row's name. Truncates rather than wrapping; on the rail it collapses to the accessibility tree. */\n  label: string\n  /** The leading icon. Decorative -- the label carries the name. On the rail it is all that shows. */\n  icon?: ReactNode\n  /** Marks this row as the current page. Sets `aria-current=\"page\"`. */\n  active?: boolean\n  /** Trailing-slot count. Omit to leave the slot empty; it still reserves its width so counts line up. */\n  count?: number\n  /** Renders `count` in the primary color instead of muted. */\n  countUrgent?: boolean\n  /** Where the row goes. A nav row's destination is data; the shell renders it as a link. */\n  href?: string\n}\n\n/** One nav section: an optional header over a run of rows. */\nexport interface AppShellNavSection {\n  /** The section header. Omit for a headerless section (the nav's first section has none). On the rail every header drops. */\n  label?: string\n  /** The section's rows, as data. */\n  items: AppShellNavItem[]\n}\n\nexport interface AppShellProps {\n  /**\n   * The product this shell renders for. The consumer names it once, here, and\n   * the shell carries it down -- it labels the sidebar and its navigation, and\n   * nothing above the nav (the Boost33 wordmark and brand) changes between\n   * products. This one prop is the whole of the shell's product-awareness.\n   */\n  product: string\n  /** The navigation, as data. No product hardcodes rows; the shell composes them. */\n  nav: AppShellNavSection[]\n  /** The top bar's content -- the breadcrumb and the shell actions on its right. */\n  topBar: TopBarProps\n  /**\n   * The page header's content -- the page title, its optional subtitle and\n   * trailing controls. Omit it for a screen that has no title: the Wallet's own\n   * overview is one, which is why its 9 Sep baseline shows the top bar's\n   * hairline sitting directly on the body (B33-750). The header draws no border\n   * of its own, so dropping it leaves that hairline in place rather than a gap.\n   */\n  pageHeader?: PageHeaderProps\n  /** The Boost33 mark for the wordmark lockup. Passed in, the way Wordmark takes it; on the rail it is all that shows. */\n  mark?: ReactNode\n  /**\n   * The product switcher, sitting under the wordmark. A slot: the registry it\n   * draws is served by Identity (ADR-0003), not owned here. Render its own\n   * collapsed form for the rail.\n   */\n  switcher?: ReactNode\n  /**\n   * The wallet chip, pinned above the footer. A slot: the balance comes from\n   * `@boost33/ledger-client`, never read here. Render its own collapsed form\n   * for the rail.\n   */\n  wallet?: ReactNode\n  /** The sidebar footer, below the wallet chip. A slot -- the product's own. */\n  footer?: ReactNode\n  /**\n   * The sidebar collapsed to the 56px rail. A state of the shell: the sidebar\n   * narrows and every piece it owns collapses off this one flag. The slots\n   * (switcher, wallet, footer) render their own collapsed form.\n   */\n  collapsed?: boolean\n  /**\n   * The element every linked nav row renders through. Defaults to a plain `a`;\n   * a consumer whose router owns navigation passes its own once here and the\n   * shell threads it to every row, so the whole nav goes client-side with the\n   * locale prefix intact rather than full-page-reloading (B33-847). This is the\n   * shell's one nod to how a consumer routes -- it renders the element, never\n   * knowing what it is. See docs/adr/0011.\n   */\n  linkComponent?: ElementType\n  /** The page body. Sits on white, below the header. */\n  children: ReactNode\n}\n\n// The shell every authenticated Boost33 screen renders inside. It composes the\n// pieces built in the earlier tickets -- sidebar, wordmark, switcher, nav,\n// wallet chip, top bar, page header -- into one thing a product imports instead\n// of building a sidebar. Product-aware only through `product`; everything below\n// that is the product's own data, and nothing above it changes.\nexport function AppShell({\n  product,\n  nav,\n  topBar,\n  pageHeader,\n  mark,\n  switcher,\n  wallet,\n  footer,\n  collapsed = false,\n  linkComponent,\n  children,\n}: AppShellProps) {\n  return (\n    <div className={styles.shell}>\n      <Sidebar label={product} collapsed={collapsed}>\n        <div className={styles.wordmark}>\n          <Wordmark mark={mark} collapsed={collapsed} />\n        </div>\n        {switcher != null && <div className={styles.switcher}>{switcher}</div>}\n        <nav aria-label={product} className={styles.nav}>\n          {nav.map((section, sectionIndex) => (\n            // No room for a header at 56px, so on the rail every section renders\n            // headerless -- its rows collapse to their icons and line up.\n            <NavSection key={sectionIndex} label={collapsed ? undefined : section.label}>\n              {section.items.map((item, itemIndex) => (\n                <NavItem\n                  key={itemIndex}\n                  icon={item.icon}\n                  active={item.active}\n                  collapsed={collapsed}\n                  count={item.count}\n                  countUrgent={item.countUrgent}\n                  href={item.href}\n                  linkComponent={linkComponent}\n                >\n                  {item.label}\n                </NavItem>\n              ))}\n            </NavSection>\n          ))}\n        </nav>\n        {(wallet != null || footer != null) && (\n          <div className={styles.foot}>\n            {wallet}\n            {footer}\n          </div>\n        )}\n      </Sidebar>\n      <div className={styles.main}>\n        <TopBar {...topBar} />\n        {pageHeader != null && <PageHeader {...pageHeader} />}\n        <div className={styles.content}>{children}</div>\n      </div>\n    </div>\n  )\n}\n"],"names":["AppShell","product","nav","topBar","pageHeader","mark","switcher","wallet","footer","collapsed","linkComponent","children","jsxs","styles","Sidebar","jsx","Wordmark","section","sectionIndex","NavSection","item","itemIndex","NavItem","TopBar","PageHeader"],"mappings":";;;;;;;;AA6FO,SAASA,EAAS;AAAA,EACvB,SAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,eAAAC;AAAA,EACA,UAAAC;AACF,GAAkB;AAChB,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,OACrB,UAAA;AAAA,IAAA,gBAAAD,EAACE,GAAA,EAAQ,OAAOb,GAAS,WAAAQ,GACvB,UAAA;AAAA,MAAA,gBAAAM,EAAC,OAAA,EAAI,WAAWF,EAAO,UACrB,4BAACG,GAAA,EAAS,MAAAX,GAAY,WAAAI,GAAsB,EAAA,CAC9C;AAAA,MACCH,KAAY,QAAQ,gBAAAS,EAAC,SAAI,WAAWF,EAAO,UAAW,UAAAP,GAAS;AAAA,MAChE,gBAAAS,EAAC,OAAA,EAAI,cAAYd,GAAS,WAAWY,EAAO,KACzC,UAAAX,EAAI,IAAI,CAACe,GAASC;AAAA;AAAA;AAAA,QAGjB,gBAAAH,EAACI,GAAA,EAA8B,OAAOV,IAAY,SAAYQ,EAAQ,OACnE,UAAAA,EAAQ,MAAM,IAAI,CAACG,GAAMC,MACxB,gBAAAN;AAAA,UAACO;AAAA,UAAA;AAAA,YAEC,MAAMF,EAAK;AAAA,YACX,QAAQA,EAAK;AAAA,YACb,WAAAX;AAAA,YACA,OAAOW,EAAK;AAAA,YACZ,aAAaA,EAAK;AAAA,YAClB,MAAMA,EAAK;AAAA,YACX,eAAAV;AAAA,YAEC,UAAAU,EAAK;AAAA,UAAA;AAAA,UATDC;AAAA,QAAA,CAWR,KAdcH,CAejB;AAAA,OACD,GACH;AAAA,OACEX,KAAU,QAAQC,KAAU,2BAC3B,OAAA,EAAI,WAAWK,EAAO,MACpB,UAAA;AAAA,QAAAN;AAAA,QACAC;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IACA,gBAAAI,EAAC,OAAA,EAAI,WAAWC,EAAO,MACrB,UAAA;AAAA,MAAA,gBAAAE,EAACQ,GAAA,EAAQ,GAAGpB,GAAQ;AAAA,MACnBC,KAAc,QAAQ,gBAAAW,EAACS,GAAA,EAAY,GAAGpB,EAAA,CAAY;AAAA,MACnD,gBAAAW,EAAC,OAAA,EAAI,WAAWF,EAAO,SAAU,UAAAF,EAAA,CAAS;AAAA,IAAA,EAAA,CAC5C;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -0,0 +1,20 @@
+const o = "_shell_19o9q_10", t = "_wordmark_19o9q_20", _ = "_switcher_19o9q_26", n = "_foot_19o9q_33", s = "_nav_19o9q_45", c = "_main_19o9q_54", e = "_content_19o9q_65", a = {
+  shell: o,
+  wordmark: t,
+  switcher: _,
+  foot: n,
+  nav: s,
+  main: c,
+  content: e
+};
+export {
+  e as content,
+  a as default,
+  n as foot,
+  c as main,
+  s as nav,
+  o as shell,
+  _ as switcher,
+  t as wordmark
+};
+//# sourceMappingURL=AppShell.module.css.js.map

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

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

package/dist/components/AppSwitcher/AppSwitcher.d.ts

@@ -0,0 +1,96 @@
+import { ElementType } from 'react';
+import { AppSwitcherLabels } from './labels';
+/**
+ * One product the switcher can jump to. It is Identity's registry row, supplied
+ * by the consuming app (ADR-0003) -- the switcher fetches nothing and hardcodes
+ * no list. Every product is rendered, entitled or not: hiding an unowned one
+ * means nobody learns the family exists (B33-479).
+ */
+export interface AppSwitcherProduct {
+    /** Identity's product slug, which selects the ProductMark artwork. */
+    slug: string;
+    /** The product's display name, e.g. "Boost Score". Identity's, not the slug. */
+    name: string;
+    /** Where selecting this product goes -- the product's own URL, never the hub. */
+    href: string;
+    /**
+     * Whether the account holds this product. Defaults to `true`. `false` dims the
+     * mark and shows the "Not on plan" tag, but the row stays an ordinary focusable
+     * link: entitlement is a rendering hint, and the switcher is not the thing
+     * deciding what someone may open (ADR-0010, "Not entitled is not disabled").
+     */
+    entitled?: boolean;
+}
+/** The "all products" row above the divider. Its blurb and URL are the consumer's. */
+export interface AppSwitcherHub {
+    /** The row's name, e.g. "Hub". */
+    name: string;
+    /** The line beneath it, e.g. "All Boost33 products". */
+    description: string;
+    /** The hub URL. */
+    href: string;
+}
+/**
+ * The account/workspace row at the foot of the panel. A row that opens a second
+ * panel (a later ticket owns that panel), so it is a button rather than a link;
+ * this ticket renders the row and calls `onSelect` when it is chosen.
+ */
+export interface AppSwitcherAccount {
+    /** The organisation's name, e.g. "Acme Coaching". */
+    name: string;
+    /** The avatar's initials, e.g. "AC". */
+    initials: string;
+    /** The line beneath the name, preformatted, e.g. "Admin · 2 workspaces". */
+    description: string;
+    /** Chosen -- opens the workspace panel. */
+    onSelect?: () => void;
+}
+export interface AppSwitcherProps {
+    /** The products, in the order Identity serves them. Rendered whole, entitled or not. */
+    products: AppSwitcherProduct[];
+    /**
+     * The slug of the product this shell is rendering for. It names the trigger
+     * and is the row that carries the check -- the product you are in.
+     *
+     * A slug matching nothing in `products` is a supported state, not a caller
+     * error: the registry is Identity's and can run ahead of this package
+     * (ADR-0003). The mark degrades to a bare tile and the trigger falls back to
+     * `labels.switchProduct` for its name (B33-919).
+     */
+    currentSlug: string;
+    /** The "all products" row above the products. */
+    hub: AppSwitcherHub;
+    /** The account/workspace row below the products. */
+    account: AppSwitcherAccount;
+    /**
+     * Every user-facing string that is not row data. Each field defaults to
+     * English, and a field left out -- or supplied as `undefined`, which is what
+     * a missed next-intl key looks like -- keeps its default (B33-873).
+     */
+    labels?: Partial<AppSwitcherLabels>;
+    /**
+     * The element the product and hub rows render through. Defaults to a plain
+     * `a`; a router-owning consumer passes its own so the rows route client-side
+     * with the locale prefix intact (ADR-0011, B33-847). The account row stays a
+     * button -- it opens a panel, it does not navigate.
+     */
+    linkComponent?: ElementType;
+    /** The 56px rail. The trigger collapses to the current product's mark alone. */
+    collapsed?: boolean;
+    /** Render the panel open on first paint -- the specimen's Stage-A open state. */
+    defaultOpen?: boolean;
+    /** Every open and close, so a consumer can un-clip an ancestor's overflow while the panel overhangs. */
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * The product switcher under the wordmark. It opens, lists every Boost33 product
+ * with the current one checked, and takes you straight into the one you pick --
+ * the real switcher the Wallet's chevron-that-opens-nothing never was (B33-479).
+ *
+ * A disclosure, not a menu (ADR-0010): the panel carries no widget role, the
+ * rows are the real links and buttons they already are, and Tab is the
+ * document's own tab order -- so tabbing through the products does not close the
+ * panel on the first row. Dismissal, focus restoration and trigger ARIA are the
+ * shared anchored-overlay contract's (ADR-0009); it never becomes a modal.
+ */
+export declare function AppSwitcher({ products, currentSlug, hub, account, labels, linkComponent, collapsed, defaultOpen, onOpenChange, }: AppSwitcherProps): import("react").JSX.Element;

package/dist/components/AppSwitcher/AppSwitcher.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsxs as s, jsx as a, Fragment as b } from "react/jsx-runtime";
+import { useAnchoredOverlay as C } from "../../anchored-overlay.js";
+import { ProductMark as u } from "../ProductMark/ProductMark.js";
+import { Chevron as x, HubMark as y, Check as P, ChevronRight as R } from "./icons.js";
+import { resolveAppSwitcherLabels as A } from "./labels.js";
+import e from "./AppSwitcher.module.css.js";
+function E({
+  products: N,
+  currentSlug: i,
+  hub: t,
+  account: l,
+  labels: v,
+  linkComponent: f,
+  collapsed: c = !1,
+  defaultOpen: w,
+  onOpenChange: k
+}) {
+  const n = C({ defaultOpen: w, onOpenChange: k }), o = A(v), p = f ?? "a", m = N.find((r) => r.slug === i), g = (m == null ? void 0 : m.name) ?? o.switchProduct;
+  return /* @__PURE__ */ s("div", { className: e.root, children: [
+    /* @__PURE__ */ s(
+      "button",
+      {
+        type: "button",
+        className: c ? e.railTrigger : e.trigger,
+        onClick: n.toggle,
+        ...n.triggerProps,
+        children: [
+          /* @__PURE__ */ a(u, { slug: i, title: c ? g : void 0 }),
+          !c && /* @__PURE__ */ s(b, { children: [
+            /* @__PURE__ */ a("span", { className: e.triggerName, children: g }),
+            /* @__PURE__ */ a(x, { className: e.chevron })
+          ] })
+        ]
+      }
+    ),
+    n.open && /* @__PURE__ */ s("div", { ...n.panelProps, className: e.panel, "aria-label": o.panel, children: [
+      /* @__PURE__ */ s(p, { className: e.hubRow, href: t.href, onClick: n.close, children: [
+        /* @__PURE__ */ a(y, { className: e.hubMark }),
+        /* @__PURE__ */ s("span", { className: e.rowText, children: [
+          /* @__PURE__ */ a("span", { className: e.rowName, children: t.name }),
+          /* @__PURE__ */ a("span", { className: e.rowSub, children: t.description })
+        ] })
+      ] }),
+      /* @__PURE__ */ a("hr", { className: e.divider }),
+      /* @__PURE__ */ a("ul", { className: e.products, children: N.map((r) => {
+        const h = r.slug === i, d = r.entitled === !1;
+        return /* @__PURE__ */ a("li", { children: /* @__PURE__ */ s(
+          p,
+          {
+            className: e.productRow,
+            href: r.href,
+            "aria-current": h ? "true" : void 0,
+            "data-current": h ? "true" : void 0,
+            "data-entitled": d ? "false" : void 0,
+            onClick: n.close,
+            children: [
+              /* @__PURE__ */ a(u, { slug: r.slug, muted: d }),
+              /* @__PURE__ */ a("span", { className: e.rowName, children: r.name }),
+              d && /* @__PURE__ */ a("span", { className: e.tag, children: o.notOnPlan }),
+              h && /* @__PURE__ */ a(P, { className: e.check })
+            ]
+          }
+        ) }, r.slug);
+      }) }),
+      /* @__PURE__ */ a("hr", { className: e.divider }),
+      /* @__PURE__ */ s("button", { type: "button", className: e.accountRow, onClick: l.onSelect, children: [
+        /* @__PURE__ */ a("span", { className: e.avatar, "aria-hidden": "true", children: l.initials }),
+        /* @__PURE__ */ s("span", { className: e.rowText, children: [
+          /* @__PURE__ */ a("span", { className: e.rowName, children: l.name }),
+          /* @__PURE__ */ a("span", { className: e.rowSub, children: l.description })
+        ] }),
+        /* @__PURE__ */ a(R, { className: e.chevronRight })
+      ] })
+    ] })
+  ] });
+}
+export {
+  E as AppSwitcher
+};
+//# sourceMappingURL=AppSwitcher.js.map