@eifi1/ui-kit 0.4.0

package/dist/search/command-palette.js

@@ -0,0 +1,198 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Search } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useOverlayHistory } from "../hooks/use-overlay-history.js";
+const DEFAULT_LABELS = {
+  placeholder: "Search\u2026",
+  empty: "No results",
+  loading: "Searching\u2026"
+};
+function useCommandKey(onOpen) {
+  useEffect(() => {
+    const handler = (e) => {
+      if ((e.metaKey || e.ctrlKey) && (e.key === "k" || e.key === "K")) {
+        e.preventDefault();
+        onOpen();
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [onOpen]);
+}
+function CommandPalette({
+  open,
+  onClose,
+  search,
+  revision,
+  labels
+}) {
+  const l = { ...DEFAULT_LABELS, ...labels };
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [active, setActive] = useState(0);
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  const searchRef = useRef(search);
+  searchRef.current = search;
+  const reqId = useRef(0);
+  useOverlayHistory(open, onClose);
+  useEffect(() => {
+    if (!open) return;
+    setQuery("");
+    setActive(0);
+    const id = requestAnimationFrame(() => inputRef.current?.focus());
+    return () => cancelAnimationFrame(id);
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const id = ++reqId.current;
+    setLoading(true);
+    const run = async () => {
+      try {
+        const r = await Promise.resolve(searchRef.current(query));
+        if (reqId.current === id) {
+          setResults(r);
+          setActive(0);
+        }
+      } finally {
+        if (reqId.current === id) setLoading(false);
+      }
+    };
+    const t = setTimeout(run, query ? 150 : 0);
+    return () => clearTimeout(t);
+  }, [query, open, revision]);
+  const { groups, flat } = useMemo(() => {
+    const order = [];
+    const byGroup = /* @__PURE__ */ new Map();
+    for (const item of results) {
+      if (!byGroup.has(item.group)) {
+        byGroup.set(item.group, []);
+        order.push(item.group);
+      }
+      byGroup.get(item.group).push(item);
+    }
+    return {
+      groups: order.map((g) => ({ group: g, items: byGroup.get(g) })),
+      flat: order.flatMap((g) => byGroup.get(g))
+    };
+  }, [results]);
+  const choose = (item) => {
+    if (!item) return;
+    onClose();
+    item.onSelect();
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActive((i) => Math.min(i + 1, flat.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActive((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      choose(flat[active]);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      onClose();
+    }
+  };
+  useEffect(() => {
+    const el = listRef.current?.querySelector(`[data-index="${active}"]`);
+    el?.scrollIntoView({ block: "nearest" });
+  }, [active]);
+  if (!open) return null;
+  let flatIndex = -1;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-[70] flex items-start justify-center bg-black/40 p-4 pt-[10vh]",
+        onMouseDown: (e) => {
+          if (e.target === e.currentTarget) onClose();
+        },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": l.placeholder,
+            className: "flex max-h-[70vh] w-full max-w-xl flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-2xl dark:border-slate-700 dark:bg-slate-900",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-slate-100 px-3 dark:border-slate-800", children: [
+                /* @__PURE__ */ jsx(Search, { className: "size-4 shrink-0 text-slate-400 dark:text-slate-500" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: inputRef,
+                    role: "combobox",
+                    "aria-expanded": true,
+                    "aria-controls": "command-palette-list",
+                    "aria-activedescendant": flat[active] ? `command-item-${flat[active].id}` : void 0,
+                    value: query,
+                    onChange: (e) => setQuery(e.target.value),
+                    onKeyDown,
+                    placeholder: l.placeholder,
+                    className: "w-full bg-transparent py-3 text-sm outline-none placeholder:text-slate-400 dark:text-slate-100 dark:placeholder:text-slate-500"
+                  }
+                ),
+                loading && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] text-slate-400 dark:text-slate-500", children: l.loading })
+              ] }),
+              /* @__PURE__ */ jsxs("ul", { id: "command-palette-list", ref: listRef, role: "listbox", className: "min-h-0 flex-1 overflow-y-auto py-1", children: [
+                flat.length === 0 && !loading && /* @__PURE__ */ jsx("li", { className: "px-3 py-6 text-center text-sm text-slate-500 dark:text-slate-400", children: l.empty }),
+                groups.map(({ group, items }) => /* @__PURE__ */ jsxs("li", { children: [
+                  /* @__PURE__ */ jsx("div", { className: "px-3 pb-0.5 pt-2 text-[10px] font-semibold uppercase tracking-wide text-slate-400 dark:text-slate-500", children: group }),
+                  /* @__PURE__ */ jsx("ul", { children: items.map((item) => {
+                    flatIndex += 1;
+                    const idx = flatIndex;
+                    const isActive = idx === active;
+                    const shared = {
+                      id: `command-item-${item.id}`,
+                      role: "option",
+                      "aria-selected": isActive,
+                      "data-index": idx,
+                      onMouseMove: () => setActive(idx),
+                      className: cn(
+                        "flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm",
+                        isActive ? "bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-slate-100" : "text-slate-700 dark:text-slate-300"
+                      )
+                    };
+                    const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+                      item.icon && /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center text-slate-400 dark:text-slate-500", children: item.icon }),
+                      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+                      item.hint && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-slate-400 dark:text-slate-500", children: item.hint })
+                    ] });
+                    return /* @__PURE__ */ jsx("li", { children: item.href ? /* @__PURE__ */ jsx(
+                      "a",
+                      {
+                        ...shared,
+                        href: item.href,
+                        draggable: false,
+                        onClick: (e) => {
+                          if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
+                            return;
+                          e.preventDefault();
+                          choose(item);
+                        },
+                        children: inner
+                      }
+                    ) : /* @__PURE__ */ jsx("button", { type: "button", ...shared, onClick: () => choose(item), children: inner }) }, item.id);
+                  }) })
+                ] }, group))
+              ] }),
+              l.hint && /* @__PURE__ */ jsx("div", { className: "border-t border-slate-100 px-3 py-1.5 text-[11px] text-slate-400 dark:border-slate-800 dark:text-slate-500", children: l.hint })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+export {
+  CommandPalette,
+  useCommandKey
+};
+//# sourceMappingURL=command-palette.js.map

package/dist/search/command-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/search/command-palette.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Search } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\n\nexport interface CommandItem {\n  id: string;\n  /** Primary text. */\n  label: string;\n  /** Secondary text on the right (e.g. an amount, a date, a group hint). */\n  hint?: string;\n  /** Heading this item is grouped under. */\n  group: string;\n  /** Leading icon / element. */\n  icon?: ReactNode;\n  /** Invoked when the item is chosen (navigate, run an action, …). */\n  onSelect: () => void;\n  /** Where this item leads, when it is a navigation rather than an action. Renders\n   *  the row as a real anchor so it can be middle-/⌘-clicked into a new tab\n   *  (Keksdose feedback #451); `onSelect` still runs for a plain click and for ↵, so\n   *  in-app navigation stays client-side. `href` only adds what the browser can do\n   *  with a link and JavaScript cannot fake — the rejected alternative, an\n   *  `onAuxClick` calling `window.open`, gets the middle click and nothing else. */\n  href?: string;\n}\n\nexport interface CommandPaletteLabels {\n  placeholder: string;\n  empty: string;\n  loading: string;\n  /** Hint shown in the footer, e.g. \"↑↓ to navigate · ↵ to select · esc to close\". */\n  hint?: string;\n}\n\nconst DEFAULT_LABELS: CommandPaletteLabels = {\n  placeholder: \"Search…\",\n  empty: \"No results\",\n  loading: \"Searching…\",\n};\n\ninterface CommandPaletteProps {\n  open: boolean;\n  onClose: () => void;\n  /**\n   * Returns results for a query (called debounced as the user types; an empty\n   * query is allowed — return defaults like pages/recent). Sync or async; stale\n   * async responses are ignored.\n   *\n   * Its IDENTITY is not a re-run signal — it is read through a ref, so the palette\n   * never re-searches merely because the caller rebuilt the callback. That is\n   * deliberate: a provider closing over a list rendered from a query allocates a new\n   * function on most renders, and re-running the search on each would make typing\n   * stutter. Use {@link CommandPaletteProps.revision} when the DATA behind the\n   * provider changes.\n   */\n  search: (query: string) => CommandItem[] | Promise<CommandItem[]>;\n  /**\n   * Anything whose change means the current results are out of date — typically the\n   * arrays the provider searches over. Compared by identity (as an effect dependency\n   * would be), so pass stable references: a `data = []` default allocates a fresh\n   * array on every render while a query is pending and would re-search forever.\n   *\n   * Without it, a provider whose data arrives AFTER the palette opened never gets\n   * asked again: the user's last keystroke settles the debounce, the queries resolve a\n   * moment later, and the groups they would have contributed are simply absent until\n   * another keystroke. That is the ordinary first open on a cold cache.\n   */\n  revision?: unknown;\n  labels?: Partial<CommandPaletteLabels>;\n}\n\n/** Registers a global ⌘K / Ctrl-K shortcut that calls `onOpen`. */\nexport function useCommandKey(onOpen: () => void): void {\n  useEffect(() => {\n    const handler = (e: KeyboardEvent) => {\n      if ((e.metaKey || e.ctrlKey) && (e.key === \"k\" || e.key === \"K\")) {\n        e.preventDefault();\n        onOpen();\n      }\n    };\n    document.addEventListener(\"keydown\", handler);\n    return () => document.removeEventListener(\"keydown\", handler);\n  }, [onOpen]);\n}\n\n/**\n * A ⌘K-style command palette: a top-centred modal with a search field and a\n * grouped, keyboard-navigable result list. Domain-free — the app supplies\n * results via the `search` provider (pages, actions, records, …); each result\n * carries its own `onSelect`.\n */\nexport function CommandPalette({\n  open,\n  onClose,\n  search,\n  revision,\n  labels,\n}: CommandPaletteProps) {\n  const l = { ...DEFAULT_LABELS, ...labels };\n  const [query, setQuery] = useState(\"\");\n  const [results, setResults] = useState<CommandItem[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [active, setActive] = useState(0);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n  const searchRef = useRef(search);\n  searchRef.current = search;\n  const reqId = useRef(0);\n\n  // Back dismisses the palette (Keksdose feedback #172). Declared with the other\n  // hooks, above the `if (!open) return null` below — a hook past a conditional\n  // return changes the hook order between renders. Passing `open` rather than\n  // mounting-while-open is what lets it sit here.\n  useOverlayHistory(open, onClose);\n\n  // Reset + focus when opened.\n  useEffect(() => {\n    if (!open) return;\n    setQuery(\"\");\n    setActive(0);\n    const id = requestAnimationFrame(() => inputRef.current?.focus());\n    return () => cancelAnimationFrame(id);\n  }, [open]);\n\n  // Debounced, race-safe search.\n  useEffect(() => {\n    if (!open) return;\n    const id = ++reqId.current;\n    setLoading(true);\n    const run = async () => {\n      try {\n        const r = await Promise.resolve(searchRef.current(query));\n        if (reqId.current === id) {\n          setResults(r);\n          setActive(0);\n        }\n      } finally {\n        if (reqId.current === id) setLoading(false);\n      }\n    };\n    const t = setTimeout(run, query ? 150 : 0);\n    return () => clearTimeout(t);\n    // `revision`, not `search`: see the prop's docstring. The debounce is re-armed on a\n    // revision change, which is right — data arriving is not a keystroke and there is\n    // nothing to feel laggy about.\n  }, [query, open, revision]);\n\n  // Group results, preserving first-seen group order; keep a flat list for nav.\n  const { groups, flat } = useMemo(() => {\n    const order: string[] = [];\n    const byGroup = new Map<string, CommandItem[]>();\n    for (const item of results) {\n      if (!byGroup.has(item.group)) {\n        byGroup.set(item.group, []);\n        order.push(item.group);\n      }\n      byGroup.get(item.group)!.push(item);\n    }\n    return {\n      groups: order.map((g) => ({ group: g, items: byGroup.get(g)! })),\n      flat: order.flatMap((g) => byGroup.get(g)!),\n    };\n  }, [results]);\n\n  const choose = (item: CommandItem | undefined) => {\n    if (!item) return;\n    onClose();\n    item.onSelect();\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      setActive((i) => Math.min(i + 1, flat.length - 1));\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      setActive((i) => Math.max(i - 1, 0));\n    } else if (e.key === \"Enter\") {\n      e.preventDefault();\n      choose(flat[active]);\n    } else if (e.key === \"Escape\") {\n      e.preventDefault();\n      onClose();\n    }\n  };\n\n  // Keep the active row scrolled into view.\n  useEffect(() => {\n    const el = listRef.current?.querySelector<HTMLElement>(`[data-index=\"${active}\"]`);\n    el?.scrollIntoView({ block: \"nearest\" });\n  }, [active]);\n\n  if (!open) return null;\n\n  let flatIndex = -1;\n  return createPortal(\n    <div\n      className=\"fixed inset-0 z-[70] flex items-start justify-center bg-black/40 p-4 pt-[10vh]\"\n      onMouseDown={(e) => {\n        if (e.target === e.currentTarget) onClose();\n      }}\n    >\n      <div\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={l.placeholder}\n        className=\"flex max-h-[70vh] w-full max-w-xl flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-2xl dark:border-slate-700 dark:bg-slate-900\"\n      >\n        <div className=\"flex items-center gap-2 border-b border-slate-100 px-3 dark:border-slate-800\">\n          <Search className=\"size-4 shrink-0 text-slate-400 dark:text-slate-500\" />\n          <input\n            ref={inputRef}\n            role=\"combobox\"\n            aria-expanded\n            aria-controls=\"command-palette-list\"\n            aria-activedescendant={flat[active] ? `command-item-${flat[active].id}` : undefined}\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            onKeyDown={onKeyDown}\n            placeholder={l.placeholder}\n            className=\"w-full bg-transparent py-3 text-sm outline-none placeholder:text-slate-400 dark:text-slate-100 dark:placeholder:text-slate-500\"\n          />\n          {loading && <span className=\"shrink-0 text-[11px] text-slate-400 dark:text-slate-500\">{l.loading}</span>}\n        </div>\n\n        <ul id=\"command-palette-list\" ref={listRef} role=\"listbox\" className=\"min-h-0 flex-1 overflow-y-auto py-1\">\n          {flat.length === 0 && !loading && (\n            <li className=\"px-3 py-6 text-center text-sm text-slate-500 dark:text-slate-400\">{l.empty}</li>\n          )}\n          {groups.map(({ group, items }) => (\n            <li key={group}>\n              <div className=\"px-3 pb-0.5 pt-2 text-[10px] font-semibold uppercase tracking-wide text-slate-400 dark:text-slate-500\">\n                {group}\n              </div>\n              <ul>\n                {items.map((item) => {\n                  flatIndex += 1;\n                  const idx = flatIndex;\n                  const isActive = idx === active;\n                  // Written once and worn by either tag below, so the anchor and the\n                  // button can never drift apart in looks or in listbox semantics.\n                  // `role=\"option\"` on an <a href> is fine: the browser's middle-click\n                  // behaviour keys off the element, not the ARIA role.\n                  const shared = {\n                    id: `command-item-${item.id}`,\n                    role: \"option\" as const,\n                    \"aria-selected\": isActive,\n                    \"data-index\": idx,\n                    onMouseMove: () => setActive(idx),\n                    className: cn(\n                      \"flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm\",\n                      isActive\n                        ? \"bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-slate-100\"\n                        : \"text-slate-700 dark:text-slate-300\",\n                    ),\n                  };\n                  const inner = (\n                    <>\n                      {item.icon && (\n                        <span className=\"flex size-4 shrink-0 items-center justify-center text-slate-400 dark:text-slate-500\">\n                          {item.icon}\n                        </span>\n                      )}\n                      <span className=\"min-w-0 flex-1 truncate\">{item.label}</span>\n                      {item.hint && (\n                        <span className=\"shrink-0 text-xs text-slate-400 dark:text-slate-500\">{item.hint}</span>\n                      )}\n                    </>\n                  );\n                  return (\n                    <li key={item.id}>\n                      {item.href ? (\n                        <a\n                          {...shared}\n                          href={item.href}\n                          draggable={false}\n                          onClick={(e) => {\n                            // A modified click belongs to the browser (feedback\n                            // #451) — and the palette deliberately stays OPEN for\n                            // it: ⌘-clicking three results in a row is the reason to\n                            // want this, and closing after the first would undo it.\n                            if (\n                              e.button !== 0 ||\n                              e.metaKey ||\n                              e.ctrlKey ||\n                              e.shiftKey ||\n                              e.altKey\n                            )\n                              return;\n                            e.preventDefault();\n                            choose(item);\n                          }}\n                        >\n                          {inner}\n                        </a>\n                      ) : (\n                        <button type=\"button\" {...shared} onClick={() => choose(item)}>\n                          {inner}\n                        </button>\n                      )}\n                    </li>\n                  );\n                })}\n              </ul>\n            </li>\n          ))}\n        </ul>\n\n        {l.hint && (\n          <div className=\"border-t border-slate-100 px-3 py-1.5 text-[11px] text-slate-400 dark:border-slate-800 dark:text-slate-500\">\n            {l.hint}\n          </div>\n        )}\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/shell/app-shell.d.ts

@@ -0,0 +1,64 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface AppShellSubItem {
+    to: string;
+    label: string;
+    icon: LucideIcon;
+    /** Passed to NavLink's `end` (exact match). Defaults to true. */
+    end?: boolean;
+}
+interface AppShellNavItem {
+    to: string;
+    label: string;
+    /** Optional shorter label for the MOBILE BOTTOM BAR only (the sidebar, its
+     *  tooltips and any palette built on this list keep `label`).
+     *
+     *  The bar divides the viewport into `nav.length` equal cells, so a label's room
+     *  shrinks with every entry added — at six entries on a 406 px phone that is ~67 px,
+     *  and "Import & Export" wrapped to two lines and pushed the row taller than its
+     *  neighbours (keksdose feedback live #210). A per-item override is better than
+     *  shortening the real label, which the sidebar has ample room for and which is the
+     *  name the rest of the product uses. */
+    shortLabel?: string;
+    icon: LucideIcon;
+    /** Passed to NavLink's `end` (exact match). Defaults to true. */
+    end?: boolean;
+    /** Optional `data-tour` value rendered on this item's link (both the desktop
+     *  sidebar and the mobile bottom bar), so a guided tour can spotlight ONE nav
+     *  entry precisely instead of matching by href (feedback #338). */
+    dataTour?: string;
+    /** Optional sub-items. When present, hovering (or focusing) the item opens a
+     *  flyout to the right of the sidebar with a header (this item's label) and the
+     *  sub-items as icon + title links. Works collapsed or expanded; the mobile
+     *  bottom bar ignores sub-items and links to `to`. */
+    items?: AppShellSubItem[];
+}
+interface AppShellProps {
+    /** Navigation entries — shared by the desktop sidebar and mobile bottom bar. */
+    nav: AppShellNavItem[];
+    /** The composed top bar (e.g. the shared TopBar with app-owned actions). */
+    topBar: ReactNode;
+    /** Main content — typically the router `<Outlet />`. */
+    children: ReactNode;
+    /** Desktop-only footer rendered below the content (hidden on mobile). */
+    footer?: ReactNode;
+    /** Extra sidebar content above the collapse toggle (e.g. a version link).
+     *  Receives the collapsed state so it can render compact vs. full. */
+    sidebarFooter?: (collapsed: boolean) => ReactNode;
+    /** localStorage key for the persisted collapse state. */
+    collapseStorageKey?: string;
+    collapseLabel?: string;
+    expandLabel?: string;
+}
+/**
+ * The responsive application shell: a top bar, a collapsible desktop sidebar
+ * (icon-only when collapsed, with tooltips), a mobile bottom nav bar, the main
+ * content area, and an optional desktop footer. Router-aware via react-router
+ * `NavLink`; domain-free — nav items, brand, footer and the top bar's actions
+ * are all supplied by the app.
+ */
+declare function AppShell({ nav, topBar, children, footer, sidebarFooter, collapseStorageKey, collapseLabel, expandLabel, }: AppShellProps): react.JSX.Element;
+
+export { AppShell, type AppShellNavItem, type AppShellSubItem };

package/dist/shell/app-shell.js

@@ -0,0 +1,237 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { NavLink } from "react-router";
+import { ChevronRight, PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { readStored, writeStored } from "../lib/safe-storage.js";
+import { Tooltip } from "../components/tooltip.js";
+import { useAnchoredRect } from "../hooks/use-anchored-rect.js";
+import { useEscapeKey } from "../hooks/use-dismiss.js";
+import { useMediaQuery } from "../hooks/use-media-query.js";
+function useNavHeightVar(ref) {
+  const isMdUp = useMediaQuery("(min-width: 768px)", false);
+  useEffect(() => {
+    const node = ref.current;
+    const root = document.documentElement;
+    const publish = () => root.style.setProperty(
+      "--app-nav-h",
+      `${node ? Math.floor(node.getBoundingClientRect().height) : 0}px`
+    );
+    publish();
+    const ro = node && typeof ResizeObserver !== "undefined" ? new ResizeObserver(publish) : null;
+    if (ro && node) ro.observe(node);
+    return () => {
+      ro?.disconnect();
+      root.style.removeProperty("--app-nav-h");
+    };
+  }, [ref, isMdUp]);
+}
+function AppShell({
+  nav,
+  topBar,
+  children,
+  footer,
+  sidebarFooter,
+  collapseStorageKey = "appLayout.sidebarCollapsed",
+  collapseLabel = "Collapse sidebar",
+  expandLabel = "Expand sidebar"
+}) {
+  const [collapsed, setCollapsed] = useState(() => readStored(collapseStorageKey) === "1");
+  const navRef = useRef(null);
+  useNavHeightVar(navRef);
+  useEffect(() => {
+    writeStored(collapseStorageKey, collapsed ? "1" : "0");
+  }, [collapsed, collapseStorageKey]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-h-screen md:h-dvh md:overflow-hidden", children: [
+    topBar,
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 min-h-0", children: [
+      /* @__PURE__ */ jsxs(
+        "aside",
+        {
+          className: `hidden md:flex md:flex-col md:sticky md:top-12 md:self-start md:h-[calc(100vh-3rem)] border-r border-[var(--border)] bg-[var(--bg-surface)] transition-[width] duration-200 ease-out overflow-hidden ${collapsed ? "md:w-14" : "md:w-60"}`,
+          children: [
+            /* @__PURE__ */ jsx("nav", { className: "flex-1 px-2 py-3 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ jsx("div", { "data-tour": "nav", className: "space-y-1", children: nav.map((item) => /* @__PURE__ */ jsx(SidebarNavItem, { item, collapsed }, item.to)) }) }),
+            sidebarFooter?.(collapsed),
+            /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border)] p-2", children: collapsed ? /* @__PURE__ */ jsx(Tooltip, { label: expandLabel, side: "right", portal: true, className: "block", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setCollapsed(false),
+                "aria-label": expandLabel,
+                className: "flex w-full items-center justify-center min-h-9 rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-700 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200",
+                children: /* @__PURE__ */ jsx(PanelLeftOpen, { className: "size-4 shrink-0" })
+              }
+            ) }) : /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setCollapsed(true),
+                "aria-label": collapseLabel,
+                className: "flex w-full items-center gap-3 min-h-9 px-3 py-2 rounded-md text-sm text-slate-500 hover:bg-slate-100 hover:text-slate-700 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200",
+                children: [
+                  /* @__PURE__ */ jsx(PanelLeftClose, { className: "size-4 shrink-0" }),
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: collapseLabel })
+                ]
+              }
+            ) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col min-w-0 md:min-h-0", children: [
+        /* @__PURE__ */ jsx("main", { className: "flex-1 max-w-full overflow-x-clip pb-20 md:pb-0 md:min-h-0 md:overflow-y-auto md:[scrollbar-gutter:stable_both-edges]", children }),
+        footer
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref: navRef,
+        "data-tour": "nav",
+        className: "md:hidden fixed bottom-0 inset-x-0 z-30 bg-[var(--bg-surface)] border-t border-[var(--border)] grid",
+        style: { gridTemplateColumns: `repeat(${nav.length}, minmax(0, 1fr))` },
+        children: nav.map((item) => /* @__PURE__ */ jsxs(
+          NavLink,
+          {
+            to: item.to,
+            end: item.end ?? true,
+            "data-tour": item.dataTour,
+            className: ({ isActive }) => (
+              // The active page needs a clear marker, not just a subtle text
+              // shade (feedback #327): brand-accent icon + label, bolder weight,
+              // and a top accent bar spanning the cell so it reads at a glance.
+              cn(
+                "relative flex flex-col items-center justify-center py-2 text-[11px] gap-0.5 transition-colors",
+                "before:absolute before:content-[''] before:inset-x-4 before:top-0 before:h-0.5 before:rounded-full before:transition-colors",
+                isActive ? "font-semibold text-[var(--brand)] before:bg-[var(--brand)]" : "text-slate-500 dark:text-slate-400 before:bg-transparent"
+              )
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "relative", children: /* @__PURE__ */ jsx(item.icon, { className: "size-5" }) }),
+              /* @__PURE__ */ jsx("span", { className: "max-w-full truncate px-0.5", children: item.shortLabel ?? item.label })
+            ]
+          },
+          item.to
+        ))
+      }
+    )
+  ] });
+}
+const navLinkClass = (collapsed) => ({ isActive }) => `flex items-center gap-3 min-h-9 ${collapsed ? "justify-center px-2" : "px-3"} py-2 rounded-md text-sm ${isActive ? "bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900" : "text-slate-700 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"}`;
+function SidebarNavItem({ item, collapsed }) {
+  const hasSub = !!item.items?.length;
+  const link = /* @__PURE__ */ jsxs(
+    NavLink,
+    {
+      to: item.to,
+      end: item.end ?? true,
+      "data-tour": item.dataTour,
+      className: navLinkClass(collapsed),
+      "aria-haspopup": hasSub ? "menu" : void 0,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "relative shrink-0", children: /* @__PURE__ */ jsx(item.icon, { className: "size-4" }) }),
+        !collapsed && /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.label }),
+        !collapsed && hasSub && /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 shrink-0 opacity-60" })
+      ]
+    }
+  );
+  if (hasSub) return /* @__PURE__ */ jsx(SidebarFlyout, { item, children: link });
+  return collapsed ? /* @__PURE__ */ jsx(Tooltip, { label: item.label, side: "right", portal: true, className: "block", children: link }) : link;
+}
+let activeFlyoutClose = null;
+function SidebarFlyout({ item, children }) {
+  const wrapperRef = useRef(null);
+  const closeTimer = useRef(null);
+  const [open, setOpen] = useState(false);
+  const rect = useAnchoredRect(wrapperRef, open);
+  const pos = rect ? { top: rect.top, left: rect.right } : null;
+  const cancelClose = useCallback(() => {
+    if (closeTimer.current) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+  }, []);
+  const closeNow = useCallback(() => {
+    cancelClose();
+    setOpen(false);
+  }, [cancelClose]);
+  const openMenu = useCallback(() => {
+    cancelClose();
+    if (activeFlyoutClose && activeFlyoutClose !== closeNow) activeFlyoutClose();
+    activeFlyoutClose = closeNow;
+    setOpen(true);
+  }, [cancelClose, closeNow]);
+  const scheduleClose = useCallback(() => {
+    cancelClose();
+    closeTimer.current = setTimeout(() => {
+      setOpen(false);
+      if (activeFlyoutClose === closeNow) activeFlyoutClose = null;
+    }, 140);
+  }, [cancelClose, closeNow]);
+  useEscapeKey(() => setOpen(false), open);
+  useEffect(
+    () => () => {
+      cancelClose();
+      if (activeFlyoutClose === closeNow) activeFlyoutClose = null;
+    },
+    [cancelClose, closeNow]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className: "relative",
+      onMouseEnter: openMenu,
+      onMouseLeave: scheduleClose,
+      onFocus: openMenu,
+      onBlur: scheduleClose,
+      children: [
+        children,
+        open && pos && createPortal(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: { position: "fixed", top: pos.top, left: pos.left },
+              className: "z-40 pl-1",
+              onMouseEnter: cancelClose,
+              onMouseLeave: scheduleClose,
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "menu",
+                  "aria-label": item.label,
+                  className: "min-w-52 overflow-hidden rounded-md border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900",
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: "border-b border-slate-100 px-3 py-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500 dark:border-slate-800 dark:text-slate-400", children: item.label }),
+                    /* @__PURE__ */ jsx("ul", { className: "py-1", children: item.items.map((sub) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                      NavLink,
+                      {
+                        to: sub.to,
+                        end: sub.end ?? true,
+                        role: "menuitem",
+                        onClick: () => setOpen(false),
+                        className: ({ isActive }) => cn(
+                          "flex items-center gap-2.5 px-3 py-2 text-sm",
+                          isActive ? "bg-slate-100 font-medium text-slate-900 dark:bg-slate-800 dark:text-slate-100" : "text-slate-700 hover:bg-slate-50 dark:text-slate-300 dark:hover:bg-slate-800"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx(sub.icon, { className: "size-4 shrink-0 text-slate-400 dark:text-slate-500" }),
+                          /* @__PURE__ */ jsx("span", { className: "truncate", children: sub.label })
+                        ]
+                      }
+                    ) }, sub.to)) })
+                  ]
+                }
+              )
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}
+export {
+  AppShell
+};
+//# sourceMappingURL=app-shell.js.map

package/dist/shell/app-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/app-shell.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { NavLink } from \"react-router\";\nimport { ChevronRight, PanelLeftClose, PanelLeftOpen } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { readStored, writeStored } from \"../lib/safe-storage\";\nimport { Tooltip } from \"../components/tooltip\";\nimport { useAnchoredRect } from \"../hooks/use-anchored-rect\";\nimport { useEscapeKey } from \"../hooks/use-dismiss\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\n\nexport interface AppShellSubItem {\n  to: string;\n  label: string;\n  icon: LucideIcon;\n  /** Passed to NavLink's `end` (exact match). Defaults to true. */\n  end?: boolean;\n}\n\nexport interface AppShellNavItem {\n  to: string;\n  label: string;\n  /** Optional shorter label for the MOBILE BOTTOM BAR only (the sidebar, its\n   *  tooltips and any palette built on this list keep `label`).\n   *\n   *  The bar divides the viewport into `nav.length` equal cells, so a label's room\n   *  shrinks with every entry added — at six entries on a 406 px phone that is ~67 px,\n   *  and \"Import & Export\" wrapped to two lines and pushed the row taller than its\n   *  neighbours (keksdose feedback live #210). A per-item override is better than\n   *  shortening the real label, which the sidebar has ample room for and which is the\n   *  name the rest of the product uses. */\n  shortLabel?: string;\n  icon: LucideIcon;\n  /** Passed to NavLink's `end` (exact match). Defaults to true. */\n  end?: boolean;\n  /** Optional `data-tour` value rendered on this item's link (both the desktop\n   *  sidebar and the mobile bottom bar), so a guided tour can spotlight ONE nav\n   *  entry precisely instead of matching by href (feedback #338). */\n  dataTour?: string;\n  /** Optional sub-items. When present, hovering (or focusing) the item opens a\n   *  flyout to the right of the sidebar with a header (this item's label) and the\n   *  sub-items as icon + title links. Works collapsed or expanded; the mobile\n   *  bottom bar ignores sub-items and links to `to`. */\n  items?: AppShellSubItem[];\n}\n\ninterface AppShellProps {\n  /** Navigation entries — shared by the desktop sidebar and mobile bottom bar. */\n  nav: AppShellNavItem[];\n  /** The composed top bar (e.g. the shared TopBar with app-owned actions). */\n  topBar: ReactNode;\n  /** Main content — typically the router `<Outlet />`. */\n  children: ReactNode;\n  /** Desktop-only footer rendered below the content (hidden on mobile). */\n  footer?: ReactNode;\n  /** Extra sidebar content above the collapse toggle (e.g. a version link).\n   *  Receives the collapsed state so it can render compact vs. full. */\n  sidebarFooter?: (collapsed: boolean) => ReactNode;\n  /** localStorage key for the persisted collapse state. */\n  collapseStorageKey?: string;\n  collapseLabel?: string;\n  expandLabel?: string;\n}\n\n/**\n * The bottom nav's own height, published as `--app-nav-h` so anything that has to sit\n * ON it can stop guessing.\n *\n * Keksdose live #314 is what this is for. Its rework — *\"Stick it to the bottom\n * touching the bottom icon bar with budget, accounts, … Currently there is a small gap\n * which confuses\"* — was a receipt footer pinned at `bottom-20`, because `<main>`\n * reserves `pb-20` for this nav and 20 looked like the nav's height. It is not: the\n * padding is generous CLEARANCE, and the nav is content-sized (icon + label + `py-2`,\n * about 56px), so the footer floated ~24px above the bar.\n *\n * Measured rather than named, because the height is not a constant anyone owns: it is\n * an icon, a translated label that can wrap or truncate, and whatever the platform does\n * with the safe-area inset. A hard-coded `bottom-14` would be the same guess one number\n * lower, and it would be wrong again the first time a label needed two lines.\n *\n * `0px` when the nav is not rendered — above `md` it is `display:none`, which observes\n * as a zero box — so a consumer can write `bottom-[var(--app-nav-h,0px)]` once and get\n * the right answer at both widths without a breakpoint of its own.\n */\nfunction useNavHeightVar(ref: React.RefObject<HTMLElement | null>): void {\n  // Re-run when the breakpoint flips. A ResizeObserver SKIPS an element that is not\n  // being rendered, so the nav going `display:none` above `md` fires no callback and\n  // would leave the last phone height published — a desktop footer would then sit 56px\n  // off the bottom after a live resize. The query is the one the nav's own `md:hidden`\n  // compiles to, so the two cannot disagree about where the boundary is.\n  const isMdUp = useMediaQuery(\"(min-width: 768px)\", false);\n  useEffect(() => {\n    const node = ref.current;\n    const root = document.documentElement;\n    // `getBoundingClientRect().height`, rounded DOWN — not `offsetHeight`, and not\n    // ceil. Measured on the running app at 406x816: the bar is **55.5px** tall, and\n    // both `offsetHeight` and `Math.ceil` answer 56. That is why live #314 round four\n    // was *\"No change. Still a pixel inbetween\"* — the previous fix was arithmetically\n    // a no-op on the very value it was meant to correct.\n    //\n    // 56 is the wrong side. A sticky element with `bottom: X` puts its bottom edge X\n    // above the viewport bottom, and the bar's TOP edge is at its own height: so\n    // X = 56 lands the footer at y=760.0 against a bar starting at y=760.5, i.e. half\n    // a CSS pixel of page showing through — about 1.4 device pixels on his phone,\n    // which is exactly the hairline in the screenshot.\n    //\n    // The two errors are not symmetric, and I had them backwards the first time.\n    // Too SMALL tucks the sticky element under a bar that is opaque and painted above\n    // it (`z-30` against `z-10`): invisible. Too LARGE opens the seam. So floor, and\n    // consumers subtract a further pixel (see `invoice-line-totals.tsx`) for the case\n    // where the height lands on a whole pixel and floor leaves no overlap at all.\n    const publish = () =>\n      root.style.setProperty(\n        \"--app-nav-h\",\n        `${node ? Math.floor(node.getBoundingClientRect().height) : 0}px`,\n      );\n    publish();\n    // The observer is the refinement, not the mechanism: `publish()` above is already\n    // right for a static nav, and jsdom has no ResizeObserver unless a test stubs one.\n    // ONE cleanup for every branch, though — an early `return` on the no-observer path\n    // left the variable behind on unmount, which a stale `bottom:` offset on whatever\n    // rendered next would have inherited.\n    const ro = node && typeof ResizeObserver !== \"undefined\" ? new ResizeObserver(publish) : null;\n    if (ro && node) ro.observe(node);\n    return () => {\n      ro?.disconnect();\n      root.style.removeProperty(\"--app-nav-h\");\n    };\n  }, [ref, isMdUp]);\n}\n\n/**\n * The responsive application shell: a top bar, a collapsible desktop sidebar\n * (icon-only when collapsed, with tooltips), a mobile bottom nav bar, the main\n * content area, and an optional desktop footer. Router-aware via react-router\n * `NavLink`; domain-free — nav items, brand, footer and the top bar's actions\n * are all supplied by the app.\n */\nexport function AppShell({\n  nav,\n  topBar,\n  children,\n  footer,\n  sidebarFooter,\n  collapseStorageKey = \"appLayout.sidebarCollapsed\",\n  collapseLabel = \"Collapse sidebar\",\n  expandLabel = \"Expand sidebar\",\n}: AppShellProps) {\n  // Through the guarded helpers, not `window.localStorage` directly. The read runs\n  // inside a `useState` initialiser — i.e. during render of the top-level shell — and\n  // `localStorage` THROWS where site data is blocked (Safari private browsing, a\n  // partitioned webview). Unguarded, that was not a lost sidebar preference: nothing\n  // in the application mounted at all.\n  const [collapsed, setCollapsed] = useState(() => readStored(collapseStorageKey) === \"1\");\n  // Publishes `--app-nav-h` for anything that has to sit on the bottom bar.\n  const navRef = useRef<HTMLElement>(null);\n  useNavHeightVar(navRef);\n  useEffect(() => {\n    writeStored(collapseStorageKey, collapsed ? \"1\" : \"0\");\n  }, [collapsed, collapseStorageKey]);\n\n  return (\n    <div className=\"flex flex-col min-h-screen md:h-dvh md:overflow-hidden\">\n      {topBar}\n      <div className=\"flex flex-1 min-h-0\">\n        <aside\n          className={`hidden md:flex md:flex-col md:sticky md:top-12 md:self-start md:h-[calc(100vh-3rem)] border-r border-[var(--border)] bg-[var(--bg-surface)] transition-[width] duration-200 ease-out overflow-hidden ${\n            collapsed ? \"md:w-14\" : \"md:w-60\"\n          }`}\n        >\n          {/* The `<nav>` is flex-1 so it fills the sidebar's height (with empty\n              space below the items); the data-tour marker goes on the INNER,\n              fit-content wrapper so the guided-tour spotlight hugs the actual nav\n              items instead of the whole tall column (feedback #322). The marker\n              also tags the mobile bottom bar below; the tour targets\n              `[data-tour=\"nav\"]` and resolves to whichever is visible (#313). */}\n          <nav className=\"flex-1 px-2 py-3 overflow-y-auto overflow-x-hidden\">\n            <div data-tour=\"nav\" className=\"space-y-1\">\n              {nav.map((item) => (\n                <SidebarNavItem key={item.to} item={item} collapsed={collapsed} />\n              ))}\n            </div>\n          </nav>\n          {sidebarFooter?.(collapsed)}\n          <div className=\"border-t border-[var(--border)] p-2\">\n            {collapsed ? (\n              <Tooltip label={expandLabel} side=\"right\" portal className=\"block\">\n                <button\n                  type=\"button\"\n                  onClick={() => setCollapsed(false)}\n                  aria-label={expandLabel}\n                  className=\"flex w-full items-center justify-center min-h-9 rounded-md text-slate-500 hover:bg-slate-100 hover:text-slate-700 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200\"\n                >\n                  <PanelLeftOpen className=\"size-4 shrink-0\" />\n                </button>\n              </Tooltip>\n            ) : (\n              <button\n                type=\"button\"\n                onClick={() => setCollapsed(true)}\n                aria-label={collapseLabel}\n                className=\"flex w-full items-center gap-3 min-h-9 px-3 py-2 rounded-md text-sm text-slate-500 hover:bg-slate-100 hover:text-slate-700 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200\"\n              >\n                <PanelLeftClose className=\"size-4 shrink-0\" />\n                <span className=\"truncate\">{collapseLabel}</span>\n              </button>\n            )}\n          </div>\n        </aside>\n\n        {/* Content column beside the sidebar. main grows to fill so the footer\n            sits at the bottom — at the viewport edge when content is short,\n            beside the sidebar rather than under it. */}\n        <div className=\"flex flex-1 flex-col min-w-0 md:min-h-0\">\n          {/* `scrollbar-gutter: stable` reserves the scrollbar's track whether or\n              not it is currently needed. Without it this element — the app's only\n              scroll container from md up — narrows its own client box by the\n              scrollbar width the moment a page's content outgrows it, and widens\n              it again when the next page fits. Every centred `mx-auto` container\n              inside then jumps sideways by half a scrollbar, and any fluid-width\n              content changes width outright. Keksdose feedback #403 caught it as\n              \"slight width increase/decrease\" when switching to the notifications\n              settings section and back: that section is the only one tall enough\n              to scroll. Platform-dependent, which is why it is easy to miss —\n              overlay scrollbars (macOS, most Linux builds) take no layout space,\n              classic ones (Windows) take ~15px.\n\n              `both-edges`, not the bare `stable`: a one-sided reservation keeps the\n              width stable but moves the middle. On a page short enough not to\n              scroll, nothing is painted into the reserved track, so every centred\n              `mx-auto` container sits half a scrollbar left of the optical centre\n              and every full-bleed child stops ~15px short on the right. Keksdose\n              feedback #491 (/settings#data) and #498 (/budgets) both reported it as\n              \"the left boundary looks smaller / cut off compared to the right\" on\n              the one element per page whose frame is a saturated colour — the rose\n              destructive-action cards. Reserving the track on both edges keeps the\n              content centred whether or not the scrollbar is showing. */}\n          <main className=\"flex-1 max-w-full overflow-x-clip pb-20 md:pb-0 md:min-h-0 md:overflow-y-auto md:[scrollbar-gutter:stable_both-edges]\">\n            {children}\n          </main>\n          {footer}\n        </div>\n      </div>\n\n      <nav\n        ref={navRef}\n        data-tour=\"nav\"\n        className=\"md:hidden fixed bottom-0 inset-x-0 z-30 bg-[var(--bg-surface)] border-t border-[var(--border)] grid\"\n        style={{ gridTemplateColumns: `repeat(${nav.length}, minmax(0, 1fr))` }}\n      >\n        {nav.map((item) => (\n          <NavLink\n            key={item.to}\n            to={item.to}\n            end={item.end ?? true}\n            data-tour={item.dataTour}\n            className={({ isActive }) =>\n              // The active page needs a clear marker, not just a subtle text\n              // shade (feedback #327): brand-accent icon + label, bolder weight,\n              // and a top accent bar spanning the cell so it reads at a glance.\n              cn(\n                \"relative flex flex-col items-center justify-center py-2 text-[11px] gap-0.5 transition-colors\",\n                \"before:absolute before:content-[''] before:inset-x-4 before:top-0 before:h-0.5 before:rounded-full before:transition-colors\",\n                isActive\n                  ? \"font-semibold text-[var(--brand)] before:bg-[var(--brand)]\"\n                  : \"text-slate-500 dark:text-slate-400 before:bg-transparent\",\n              )\n            }\n          >\n            <span className=\"relative\">\n              <item.icon className=\"size-5\" />\n            </span>\n            {/* One line, always. `truncate` is the backstop for the case a\n                `shortLabel` was not supplied (or a translation is longer than its\n                author expected): an ellipsis in one cell is a far smaller problem\n                than a bar whose rows are different heights. */}\n            <span className=\"max-w-full truncate px-0.5\">\n              {item.shortLabel ?? item.label}\n            </span>\n          </NavLink>\n        ))}\n      </nav>\n    </div>\n  );\n}\n\nconst navLinkClass = (collapsed: boolean) =>\n  ({ isActive }: { isActive: boolean }) =>\n    `flex items-center gap-3 min-h-9 ${collapsed ? \"justify-center px-2\" : \"px-3\"} py-2 rounded-md text-sm ${\n      isActive\n        ? \"bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900\"\n        : \"text-slate-700 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800\"\n    }`;\n\n/** A single desktop sidebar entry. Plain link (with a tooltip when collapsed) —\n *  unless it has sub-items, in which case hovering/focusing opens a flyout. */\nfunction SidebarNavItem({ item, collapsed }: { item: AppShellNavItem; collapsed: boolean }) {\n  const hasSub = !!item.items?.length;\n\n  const link = (\n    <NavLink\n      to={item.to}\n      end={item.end ?? true}\n      data-tour={item.dataTour}\n      className={navLinkClass(collapsed)}\n      aria-haspopup={hasSub ? \"menu\" : undefined}\n    >\n      <span className=\"relative shrink-0\">\n        <item.icon className=\"size-4\" />\n      </span>\n      {!collapsed && <span className=\"flex-1 truncate\">{item.label}</span>}\n      {!collapsed && hasSub && <ChevronRight className=\"size-3.5 shrink-0 opacity-60\" />}\n    </NavLink>\n  );\n\n  if (hasSub) return <SidebarFlyout item={item}>{link}</SidebarFlyout>;\n  return collapsed ? (\n    <Tooltip label={item.label} side=\"right\" portal className=\"block\">\n      {link}\n    </Tooltip>\n  ) : (\n    link\n  );\n}\n\n// Only ONE sidebar flyout should be on screen at a time. Each open flyout parks its\n// \"close now\" here so the next item to open can dismiss it immediately, instead of\n// leaving the previous panel up for the 140ms travel delay while the cursor moves\n// down the nav list — which showed two panels at once.\nlet activeFlyoutClose: (() => void) | null = null;\n\n/**\n * Wraps a nav item that has sub-items: on hover or keyboard focus it opens a\n * portalled flyout to the right of the sidebar (portalled so the sidebar's\n * `overflow-hidden` can't clip it) with the item's label as a header and each\n * sub-item as an icon + title link. A short close delay lets the cursor travel\n * from the item onto the panel; Escape / outside-move close it.\n */\nfunction SidebarFlyout({ item, children }: { item: AppShellNavItem; children: ReactNode }) {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const [open, setOpen] = useState(false);\n\n  // Anchor the flyout to the item's right edge; the hook re-measures on\n  // scroll/resize (the nav list can scroll).\n  const rect = useAnchoredRect(wrapperRef, open);\n  const pos = rect ? { top: rect.top, left: rect.right } : null;\n\n  const cancelClose = useCallback(() => {\n    if (closeTimer.current) {\n      clearTimeout(closeTimer.current);\n      closeTimer.current = null;\n    }\n  }, []);\n  // Stable identity: the coordinator above holds this so a sibling item can close\n  // THIS flyout without waiting out its travel delay.\n  const closeNow = useCallback(() => {\n    cancelClose();\n    setOpen(false);\n  }, [cancelClose]);\n  const openMenu = useCallback(() => {\n    cancelClose();\n    if (activeFlyoutClose && activeFlyoutClose !== closeNow) activeFlyoutClose();\n    activeFlyoutClose = closeNow;\n    setOpen(true);\n  }, [cancelClose, closeNow]);\n  const scheduleClose = useCallback(() => {\n    cancelClose();\n    closeTimer.current = setTimeout(() => {\n      setOpen(false);\n      if (activeFlyoutClose === closeNow) activeFlyoutClose = null;\n    }, 140);\n  }, [cancelClose, closeNow]);\n\n  // Close on Escape while open.\n  useEscapeKey(() => setOpen(false), open);\n\n  useEffect(\n    () => () => {\n      cancelClose();\n      if (activeFlyoutClose === closeNow) activeFlyoutClose = null;\n    },\n    [cancelClose, closeNow],\n  );\n\n  return (\n    <div\n      ref={wrapperRef}\n      className=\"relative\"\n      onMouseEnter={openMenu}\n      onMouseLeave={scheduleClose}\n      onFocus={openMenu}\n      onBlur={scheduleClose}\n    >\n      {children}\n      {open &&\n        pos &&\n        createPortal(\n          <div\n            style={{ position: \"fixed\", top: pos.top, left: pos.left }}\n            className=\"z-40 pl-1\"\n            onMouseEnter={cancelClose}\n            onMouseLeave={scheduleClose}\n          >\n            <div\n              role=\"menu\"\n              aria-label={item.label}\n              className=\"min-w-52 overflow-hidden rounded-md border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900\"\n            >\n              <div className=\"border-b border-slate-100 px-3 py-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500 dark:border-slate-800 dark:text-slate-400\">\n                {item.label}\n              </div>\n              <ul className=\"py-1\">\n                {item.items!.map((sub) => (\n                  <li key={sub.to}>\n                    <NavLink\n                      to={sub.to}\n                      end={sub.end ?? true}\n                      role=\"menuitem\"\n                      onClick={() => setOpen(false)}\n                      className={({ isActive }) =>\n                        cn(\n                          \"flex items-center gap-2.5 px-3 py-2 text-sm\",\n                          isActive\n                            ? \"bg-slate-100 font-medium text-slate-900 dark:bg-slate-800 dark:text-slate-100\"\n                            : \"text-slate-700 hover:bg-slate-50 dark:text-slate-300 dark:hover:bg-slate-800\",\n                        )\n                      }\n                    >\n                      <sub.icon className=\"size-4 shrink-0 text-slate-400 dark:text-slate-500\" />\n                      <span className=\"truncate\">{sub.label}</span>\n                    </NavLink>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/shell/option-switcher-menu.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface OptionSwitcherOption<T extends string> {
+    value: T;
+    label: ReactNode;
+}
+/**
+ * A top-bar hover menu that switches between a small set of options, with a
+ * check on the active one and an optional heading. Generic glue over
+ * {@link HoverMenu} — e.g. a dev role/impersonation switcher, an environment
+ * picker. Controlled: the app owns `value` and `onSelect`.
+ */
+declare function OptionSwitcherMenu<T extends string>({ icon, ariaLabel, title, heading, options, value, onSelect, }: {
+    icon: ReactNode;
+    ariaLabel: string;
+    title?: string;
+    heading?: string;
+    options: OptionSwitcherOption<T>[];
+    value: T;
+    onSelect: (value: T) => void;
+}): react.JSX.Element;
+
+export { OptionSwitcherMenu, type OptionSwitcherOption };