@eifi1/ui-kit 0.6.1 → 0.7.0

package/dist/shell/app-shell.js

@@ -1,33 +1,39 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { NavLink, matchPath, useLocation } from "react-router";
 import { ChevronRight, PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { cn } from "../lib/cn.js";
+import { dirOf } from "../lib/direction.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";
 import { DEFAULT_APP_SHELL_LABELS, useKitLabels } from "../i18n/kit-labels.js";
-function useNavHeightVar(ref) {
+const AppShellNesting = createContext(false);
+function useNavHeightVar(ref, shellRef, embedded) {
   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`
+    const shell = shellRef.current;
+    const global = !embedded && !shell?.parentElement?.closest("[data-app-shell]");
+    const targets = [shell, global ? document.documentElement : null].filter(
+      (el) => el !== null
     );
+    const publish = () => {
+      const value = `${node ? Math.floor(node.getBoundingClientRect().height) : 0}px`;
+      for (const el of targets) el.style.setProperty("--app-nav-h", value);
+    };
     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");
+      for (const el of targets) el.style.removeProperty("--app-nav-h");
     };
-  }, [ref, isMdUp]);
+  }, [ref, shellRef, embedded, isMdUp]);
 }
 function AppShell({
   nav,
@@ -35,103 +41,143 @@ function AppShell({
   children,
   footer,
   sidebarFooter,
-  collapseStorageKey = "appLayout.sidebarCollapsed",
+  collapseStorageKey: collapseStorageKeyProp,
   collapseLabel,
   expandLabel,
   subNav = "flyout",
   mobileSubNav = true,
   toggleGroupLabel,
+  embedded: embeddedProp,
   className,
   ...rest
 }) {
+  const embedded = useContext(AppShellNesting) || !!embeddedProp;
+  const collapseStorageKey = collapseStorageKeyProp ?? (embedded ? null : "appLayout.sidebarCollapsed");
   const labels = useKitLabels("appShell", DEFAULT_APP_SHELL_LABELS, {
     collapse: collapseLabel,
     expand: expandLabel,
     toggleGroup: toggleGroupLabel
   });
-  const [collapsed, setCollapsed] = useState(() => readStored(collapseStorageKey) === "1");
+  const [collapsed, setCollapsed] = useState(
+    () => collapseStorageKey !== null && readStored(collapseStorageKey) === "1"
+  );
   const [openGroup, setOpenGroup] = useState(null);
   const navRef = useRef(null);
-  useNavHeightVar(navRef);
+  const rootRef = useRef(null);
+  useNavHeightVar(navRef, rootRef, embedded);
   useEffect(() => {
-    writeStored(collapseStorageKey, collapsed ? "1" : "0");
+    if (collapseStorageKey !== null) writeStored(collapseStorageKey, collapsed ? "1" : "0");
   }, [collapsed, collapseStorageKey]);
   return (
     // The caller's attributes go on the shell's own root, never on the `data-tour="nav"`
     // wrappers below — those are the kit's anchors for its own guided tour (#313/#322),
     // and a second element answering to the same selector is a tour that highlights the
     // wrong thing or nothing at all.
-    /* @__PURE__ */ jsxs("div", { ...rest, className: cn("relative flex flex-col min-h-screen md:h-dvh md:overflow-hidden", className), 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,
-                  inline: subNav === "inline",
-                  toggleGroupLabel: labels.toggleGroup,
-                  openGroup,
-                  setOpenGroup
-                },
-                item.to
-              )) }) }),
-              sidebarFooter?.(collapsed),
-              /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border)] p-2", children: collapsed ? /* @__PURE__ */ jsx(Tooltip, { label: labels.expand, side: "right", portal: true, className: "block", children: /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setCollapsed(false),
-                  "aria-label": labels.expand,
-                  className: "flex w-full items-center justify-center min-h-9 rounded-md text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]",
-                  children: /* @__PURE__ */ jsx(PanelLeftOpen, { className: "size-4 shrink-0" })
-                }
-              ) }) : /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setCollapsed(true),
-                  "aria-label": labels.collapse,
-                  className: "flex w-full items-center gap-3 min-h-9 px-3 py-2 rounded-md text-sm text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]",
-                  children: [
-                    /* @__PURE__ */ jsx(PanelLeftClose, { className: "size-4 shrink-0" }),
-                    /* @__PURE__ */ jsx("span", { className: "truncate", children: labels.collapse })
-                  ]
-                }
-              ) })
-            ]
-          }
+    /* @__PURE__ */ jsx(AppShellNesting.Provider, { value: true, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref: rootRef,
+        "data-app-shell": "",
+        className: cn(
+          "relative flex flex-col",
+          embedded ? (
+            // `contain: layout` makes this box the containing block for the `fixed`
+            // bottom bar below, so it pins to the shell rather than to the window.
+            "h-full min-h-0 overflow-hidden [contain:layout]"
+          ) : "min-h-screen md:h-dvh md:overflow-hidden",
+          className
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col min-w-0 md:min-h-0", children: [
-          /* @__PURE__ */ jsx("main", { className: "relative flex-1 max-w-full overflow-x-clip pb-[calc(var(--app-nav-h,4rem)+1.5rem)] md:pb-0 md:min-h-0 md:overflow-y-auto md:[scrollbar-gutter:stable_both-edges]", children }),
-          footer
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: navRef,
-          className: "md:hidden fixed bottom-0 inset-x-0 z-30 border-t border-[var(--border)] bg-[var(--bg-surface)]",
-          children: [
-            mobileSubNav && /* @__PURE__ */ jsx(MobileSubNav, { nav }),
-            /* @__PURE__ */ jsx(
-              "nav",
+        children: [
+          topBar,
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-1 min-h-0", children: [
+            /* @__PURE__ */ jsxs(
+              "aside",
               {
-                "data-tour": "nav",
-                className: "grid",
-                style: { gridTemplateColumns: `repeat(${nav.length}, minmax(0, 1fr))` },
-                children: nav.map((item) => /* @__PURE__ */ jsx(MobileNavItem, { item }, item.to))
+                className: cn(
+                  // `border-e`: the sidebar sits at the START, which is the right in RTL.
+                  "hidden md:flex md:flex-col border-e border-[var(--border)] bg-[var(--bg-surface)] transition-[width] duration-200 ease-out overflow-hidden",
+                  // Embedded, the row it sits in is already the shell's height; the sticky
+                  // offsets below are measured against the window's top bar.
+                  embedded ? "md:self-stretch" : "md:sticky md:top-12 md:self-start md:h-[calc(100vh-3rem)]",
+                  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,
+                      inline: subNav === "inline",
+                      toggleGroupLabel: labels.toggleGroup,
+                      openGroup,
+                      setOpenGroup
+                    },
+                    item.to
+                  )) }) }),
+                  sidebarFooter?.(collapsed),
+                  /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border)] p-2", children: collapsed ? /* @__PURE__ */ jsx(Tooltip, { label: labels.expand, side: "right", portal: true, className: "block", children: /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setCollapsed(false),
+                      "aria-label": labels.expand,
+                      className: "flex w-full items-center justify-center min-h-9 rounded-md text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]",
+                      children: /* @__PURE__ */ jsx(PanelLeftOpen, { className: "size-4 shrink-0 rtl:-scale-x-100" })
+                    }
+                  ) }) : /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setCollapsed(true),
+                      "aria-label": labels.collapse,
+                      className: "flex w-full items-center gap-3 min-h-9 px-3 py-2 rounded-md text-sm text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]",
+                      children: [
+                        /* @__PURE__ */ jsx(PanelLeftClose, { className: "size-4 shrink-0 rtl:-scale-x-100" }),
+                        /* @__PURE__ */ jsx("span", { className: "truncate", children: labels.collapse })
+                      ]
+                    }
+                  ) })
+                ]
               }
-            )
-          ]
-        }
-      )
-    ] })
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col min-w-0 md:min-h-0", children: [
+              /* @__PURE__ */ jsx(
+                "main",
+                {
+                  className: cn(
+                    "relative flex-1 max-w-full overflow-x-clip pb-[calc(var(--app-nav-h,4rem)+1.5rem)] md:pb-0 md:min-h-0 md:overflow-y-auto md:[scrollbar-gutter:stable_both-edges]",
+                    // Embedded there is no document scroll to lean on below `md` either.
+                    embedded && "min-h-0 overflow-y-auto"
+                  ),
+                  children
+                }
+              ),
+              footer
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: navRef,
+              className: "md:hidden fixed bottom-0 inset-x-0 z-30 border-t border-[var(--border)] bg-[var(--bg-surface)]",
+              children: [
+                mobileSubNav && /* @__PURE__ */ jsx(MobileSubNav, { nav }),
+                /* @__PURE__ */ jsx(
+                  "nav",
+                  {
+                    "data-tour": "nav",
+                    className: "grid",
+                    style: { gridTemplateColumns: `repeat(${nav.length}, minmax(0, 1fr))` },
+                    children: nav.map((item) => /* @__PURE__ */ jsx(MobileNavItem, { item }, item.to))
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ) })
   );
 }
 function MobileNavItem({ item }) {
@@ -234,7 +280,7 @@ function SidebarNavItem({
       children: [
         /* @__PURE__ */ jsx("span", { className: "relative shrink-0", children: /* @__PURE__ */ jsx(item.icon, { className: "size-4" }) }),
         !collapsed && /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 break-words leading-snug", children: item.label }),
-        !collapsed && hasSub && /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 shrink-0 opacity-60" })
+        !collapsed && hasSub && /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 shrink-0 opacity-60 rtl:-scale-x-100" })
       ]
     }
   );
@@ -342,8 +388,9 @@ function SidebarFlyout({ item, children }) {
   const wrapperRef = useRef(null);
   const closeTimer = useRef(null);
   const [open, setOpen] = useState(false);
+  const [dir, setDir] = useState("ltr");
   const rect = useAnchoredRect(wrapperRef, open);
-  const pos = rect ? { top: rect.top, left: rect.right } : null;
+  const pos = rect ? dir === "rtl" ? { top: rect.top, right: window.innerWidth - rect.left } : { top: rect.top, left: rect.right } : null;
   const cancelClose = useCallback(() => {
     if (closeTimer.current) {
       clearTimeout(closeTimer.current);
@@ -358,6 +405,7 @@ function SidebarFlyout({ item, children }) {
     cancelClose();
     if (activeFlyoutClose && activeFlyoutClose !== closeNow) activeFlyoutClose();
     activeFlyoutClose = closeNow;
+    setDir(dirOf(wrapperRef.current));
     setOpen(true);
   }, [cancelClose, closeNow]);
   const scheduleClose = useCallback(() => {
@@ -390,8 +438,9 @@ function SidebarFlyout({ item, children }) {
           /* @__PURE__ */ jsx(
             "div",
             {
-              style: { position: "fixed", top: pos.top, left: pos.left },
-              className: "z-40 pl-1",
+              dir,
+              style: { position: "fixed", ...pos },
+              className: "z-40 ps-1",
               onMouseEnter: cancelClose,
               onMouseLeave: scheduleClose,
               children: /* @__PURE__ */ jsxs(

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/app-shell.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { NavLink, matchPath, useLocation } 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\";\nimport { DEFAULT_APP_SHELL_LABELS, useKitLabels } from \"../i18n/kit-labels\";\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\n/**\n * Exported and `<div>`-shaped. This is the outermost element of every consuming app, so\n * there is nothing above it to hang an id, a landmark label or a `data-tour` anchor on —\n * and nothing a consumer can wrap it in either, since the root owns the `h-dvh` and\n * `overflow-hidden` the whole layout is built on (audit §api-design).\n */\nexport interface AppShellProps extends ComponentPropsWithoutRef<\"div\"> {\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  /** Default: `appShell.collapse` from the {@link UiKitProvider}, else English. */\n  collapseLabel?: string;\n  /** Default: `appShell.expand` from the {@link UiKitProvider}, else English. */\n  expandLabel?: string;\n  /** How an entry's `items` are revealed in the EXPANDED desktop sidebar.\n   *\n   *  - `\"flyout\"` (default) — a panel beside the sidebar on hover/focus. Compact: the\n   *    sidebar stays one row per group however many pages a group holds.\n   *  - `\"inline\"` — a disclosure under the entry, the pattern of MUI's nested List and\n   *    most documentation sites. Every page is visible at once, and the group holding\n   *    the current page opens on its own, so the reader can see where they are without\n   *    hovering anything.\n   *\n   *  The icon-only (collapsed) sidebar always uses the flyout: an indented list has no\n   *  room there. The mobile bottom bar ignores `items` in both modes. */\n  subNav?: \"flyout\" | \"inline\";\n  /** Accessible name of the inline disclosure button, given the group's label.\n   *  Only used with `subNav=\"inline\"`. Its expanded state is carried by\n   *  `aria-expanded`, so one wording serves both directions. Default:\n   *  `appShell.toggleGroup` from the {@link UiKitProvider}, else English. */\n  toggleGroupLabel?: (groupLabel: string) => string;\n  /** Below `md`: show the current group's `items` as a scrollable row above the\n   *  bottom bar — the phone's counterpart of the sidebar's second level. Default true;\n   *  `false` keeps the single bar, where a group entry only links to its own `to`. */\n  mobileSubNav?: boolean;\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,\n  expandLabel,\n  subNav = \"flyout\",\n  mobileSubNav = true,\n  toggleGroupLabel,\n  className,\n  ...rest\n}: AppShellProps) {\n  // The three props are per-shell overrides of the provider's `appShell`; one left\n  // undefined falls through to the provider rather than to English.\n  const labels = useKitLabels(\"appShell\", DEFAULT_APP_SHELL_LABELS, {\n    collapse: collapseLabel,\n    expand: expandLabel,\n    toggleGroup: toggleGroupLabel,\n  });\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  // The inline sidebar is an ACCORDION: one group open at a time, keyed by its `to`.\n  // Held here rather than per group so opening one can close the other — two lists\n  // open at once pushed every entry below them off a laptop screen.\n  const [openGroup, setOpenGroup] = useState<string | null>(null);\n  // Publishes `--app-nav-h` for anything that has to sit on the bottom bar.\n  const navRef = useRef<HTMLDivElement>(null);\n  useNavHeightVar(navRef);\n  useEffect(() => {\n    writeStored(collapseStorageKey, collapsed ? \"1\" : \"0\");\n  }, [collapsed, collapseStorageKey]);\n\n  return (\n    // The caller's attributes go on the shell's own root, never on the `data-tour=\"nav\"`\n    // wrappers below — those are the kit's anchors for its own guided tour (#313/#322),\n    // and a second element answering to the same selector is a tour that highlights the\n    // wrong thing or nothing at all.\n    <div {...rest} className={cn(\"relative flex flex-col min-h-screen md:h-dvh md:overflow-hidden\", className)}>\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\n                  key={item.to}\n                  item={item}\n                  collapsed={collapsed}\n                  inline={subNav === \"inline\"}\n                  toggleGroupLabel={labels.toggleGroup}\n                  openGroup={openGroup}\n                  setOpenGroup={setOpenGroup}\n                />\n              ))}\n            </div>\n          </nav>\n          {sidebarFooter?.(collapsed)}\n          <div className=\"border-t border-[var(--border)] p-2\">\n            {collapsed ? (\n              <Tooltip label={labels.expand} side=\"right\" portal className=\"block\">\n                <button\n                  type=\"button\"\n                  onClick={() => setCollapsed(false)}\n                  aria-label={labels.expand}\n                  className=\"flex w-full items-center justify-center min-h-9 rounded-md text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]\"\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={labels.collapse}\n                className=\"flex w-full items-center gap-3 min-h-9 px-3 py-2 rounded-md text-sm text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]\"\n              >\n                <PanelLeftClose className=\"size-4 shrink-0\" />\n                <span className=\"truncate\">{labels.collapse}</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          {/* `relative` makes <main> the containing block for everything absolutely\n              positioned inside it. Tailwind's `sr-only` is `position:absolute`; with no\n              positioned ancestor it resolves against the INITIAL containing block, is\n              laid out at its offset from the top of the DOCUMENT, and grows\n              `<html>`'s scroll height past the viewport — a second scrollbar beside this\n              one that scrolls into empty space. Guarding it per component (see\n              sr-only-containment.test) could never be complete: any page's own\n              `sr-only` span re-opened it. Here it is closed for every child at once. */}\n          <main className=\"relative flex-1 max-w-full overflow-x-clip pb-[calc(var(--app-nav-h,4rem)+1.5rem)] 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      {/* The phone navigation: the group bar, and above it — when the current page\n          belongs to a group with pages of its own — the row of those pages. The pair\n          is the phone's version of the sidebar's two levels; without the upper row a\n          group's `items` were simply unreachable below `md`. ONE measured box, so\n          `--app-nav-h` covers both rows and whatever docks on the bar sits on the\n          whole of it. */}\n      <div\n        ref={navRef}\n        className=\"md:hidden fixed bottom-0 inset-x-0 z-30 border-t border-[var(--border)] bg-[var(--bg-surface)]\"\n      >\n        {mobileSubNav && <MobileSubNav nav={nav} />}\n        <nav\n          data-tour=\"nav\"\n          className=\"grid\"\n          style={{ gridTemplateColumns: `repeat(${nav.length}, minmax(0, 1fr))` }}\n        >\n          {nav.map((item) => (\n            <MobileNavItem key={item.to} item={item} />\n          ))}\n        </nav>\n      </div>\n    </div>\n  );\n}\n\n/** One cell of the phone's group bar. Marked while the group's own page OR any of its\n *  pages is current — NavLink alone only knows its own `to`, which left the bar with\n *  nothing marked on every sub-page (the same defect the sidebar had). */\nfunction MobileNavItem({ item }: { item: AppShellNavItem }) {\n  const subActive = useSubItemActive(item);\n  return (\n    <NavLink\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 || subActive\n            ? \"font-semibold text-[var(--brand)] before:bg-[var(--brand)]\"\n            : \"text-[var(--text-muted)] 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\">{item.shortLabel ?? item.label}</span>\n    </NavLink>\n  );\n}\n\n/**\n * The upper row of the phone navigation: the pages of the group the reader is in, as\n * a sideways-scrolling row of pills. Rendered only while such a group is current —\n * on a page outside every group the bar stays one row, rather than showing an empty\n * shelf or guessing a group.\n *\n * It slides in over 200ms (fade only under reduced motion) and wraps onto more rows\n * rather than scrolling, so every page of the group is in view at once.\n */\nfunction MobileSubNav({ nav }: { nav: AppShellNavItem[] }) {\n  const { pathname } = useLocation();\n  const group = nav.find(\n    (item) =>\n      !!item.items?.length &&\n      (matchPath({ path: item.to, end: item.end ?? true }, pathname) ||\n        item.items.some((sub) => matchPath({ path: sub.to, end: sub.end ?? true }, pathname))),\n  );\n\n  if (!group) return null;\n  return (\n    <nav\n      aria-label={group.label}\n      // Keyed by group so switching groups replays the entrance.\n      key={group.to}\n      className=\"animate-subnav border-b border-[var(--border)]\"\n    >\n      <ul\n        // Wraps onto as many rows as the group needs rather than scrolling sideways: a\n        // sideways row hides pages past the edge, and every page of the group in view\n        // is the point of the row. The bar grows with it — `--app-nav-h` measures it.\n        className=\"flex flex-wrap gap-1.5 px-3 py-2\"\n      >\n        {group.items!.map((sub) => (\n          <li key={sub.to} className=\"shrink-0\">\n            <NavLink\n              to={sub.to}\n              end={sub.end ?? true}\n              className={({ isActive }) =>\n                cn(\n                  \"flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs transition-colors\",\n                  isActive\n                    ? \"border-[var(--brand)] bg-[var(--brand)] font-medium text-[var(--brand-contrast)]\"\n                    : \"border-[var(--border)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n                )\n              }\n            >\n              <sub.icon className=\"size-3.5 shrink-0\" aria-hidden />\n              {sub.label}\n            </NavLink>\n          </li>\n        ))}\n      </ul>\n    </nav>\n  );\n}\n\n/** `strong` is the current page; `trail` is the group that CONTAINS the current page\n *  while the page itself is shown elsewhere (the inline list below it). */\nconst navLinkClass = (collapsed: boolean, forceActive: boolean, trail = false) =>\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 transition-colors duration-150 ${\n      isActive || (forceActive && !trail)\n        ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n        : forceActive\n          ? \"font-medium text-[var(--text-primary)] hover:bg-[var(--bg-hover)]\"\n          : \"text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\"\n    }`;\n\n/** Whether any of an entry's sub-items is the current route. NavLink only knows about\n *  its OWN `to`, so without this a group whose pages live at sibling paths\n *  (`/fields`, `/numbers`, …) lost its highlight the moment the reader left the one\n *  page the group linked to — the sidebar then marked nothing at all, and the only\n *  \"you are here\" left was inside a flyout that is closed unless hovered. */\nfunction useSubItemActive(item: AppShellNavItem): boolean {\n  const { pathname } = useLocation();\n  return !!item.items?.some((sub) => matchPath({ path: sub.to, end: sub.end ?? true }, pathname));\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, or (with\n *  `inline`) a disclosure lists them underneath. */\nfunction SidebarNavItem({\n  item,\n  collapsed,\n  inline,\n  toggleGroupLabel,\n  openGroup,\n  setOpenGroup,\n}: {\n  item: AppShellNavItem;\n  collapsed: boolean;\n  inline: boolean;\n  toggleGroupLabel: (groupLabel: string) => string;\n  openGroup: string | null;\n  setOpenGroup: (to: string | null) => void;\n}) {\n  const hasSub = !!item.items?.length;\n  const subActive = useSubItemActive(item);\n\n  // In the EXPANDED sidebar a group is one component in both styles, so switching\n  // between them is a transition of the same element (the page list folding away or\n  // unfolding) rather than one tree replaced by another. The icon-only sidebar keeps\n  // the plain flyout below: an indented list has no room there.\n  if (hasSub && !collapsed) {\n    return (\n      <SidebarGroup\n        item={item}\n        subActive={subActive}\n        inline={inline}\n        toggleGroupLabel={toggleGroupLabel}\n        open={openGroup === item.to}\n        setOpenGroup={setOpenGroup}\n      />\n    );\n  }\n\n  const link = (\n    <NavLink\n      to={item.to}\n      end={item.end ?? true}\n      data-tour={item.dataTour}\n      className={navLinkClass(collapsed, subActive)}\n      aria-haspopup={hasSub ? \"menu\" : undefined}\n    >\n      <span className=\"relative shrink-0\">\n        <item.icon className=\"size-4\" />\n      </span>\n      {/* Wraps rather than truncates: in the sidebar a label cut to \"Checkbox, switch\n          & sl…\" hides the one word that tells two pages apart, and there is height\n          to spare. (The phone bar keeps `truncate` — its cells must stay one row.) */}\n      {!collapsed && <span className=\"min-w-0 flex-1 break-words leading-snug\">{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/**\n * An entry with sub-items in the expanded sidebar.\n *\n * - `inline`: the entry's own link (its overview page) plus a chevron button that\n *   shows or hides the sub-items indented beneath it. Two controls rather than one\n *   because they do two different things — a row that both navigated AND toggled\n *   would make \"open the overview\" and \"peek at the pages\" the same click.\n * - flyout: the link alone, with the sub-items in a panel beside the sidebar on\n *   hover/focus. The inline list is still rendered, folded shut, so that switching\n *   styles animates it rather than swapping it.\n *\n * THE FOLD is a `grid-template-rows` transition from `0fr` to `1fr` — the one way to\n * animate to a content-sized height without measuring it, so a translated label that\n * wraps to two lines unfolds exactly as far as it needs. `visibility` rides the same\n * transition so a shut list drops out of the accessibility tree only once it has\n * finished closing, and `inert` takes its links out of the tab order immediately.\n */\nfunction SidebarGroup({\n  item,\n  subActive,\n  inline,\n  toggleGroupLabel,\n  open,\n  setOpenGroup,\n}: {\n  item: AppShellNavItem;\n  subActive: boolean;\n  inline: boolean;\n  toggleGroupLabel: (groupLabel: string) => string;\n  /** Whether this is the sidebar's one open group (see AppShell's `openGroup`). */\n  open: boolean;\n  setOpenGroup: (to: string | null) => void;\n}) {\n  const listId = useId();\n  const { pathname } = useLocation();\n  const onOwnPage = !!matchPath({ path: item.to, end: item.end ?? true }, pathname);\n  // Opening follows the reader: arriving on this group's overview or one of its pages\n  // (by link, by the pager, by Back) opens it — and, the sidebar holding ONE open\n  // group, closes whichever was open before. Both folds run at once, so the eye sees\n  // one list hand over to the other. Run in an effect after mount, so the current\n  // group UNFOLDS into view on load rather than appearing already open.\n  const here = subActive || onOwnPage;\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- follows the route, see above\n    if (here) setOpenGroup(item.to);\n  }, [here, item.to, setOpenGroup]);\n  const expanded = inline && open;\n\n  const link = (\n    <NavLink\n      to={item.to}\n      end={item.end ?? true}\n      data-tour={item.dataTour}\n      aria-haspopup={inline ? undefined : \"menu\"}\n      // `trail` (inline only): while a page of the group is current, the group row is\n      // the breadcrumb, not the destination — the page's own row below carries the\n      // strong marker, and two inverse rows would say \"you are here\" twice. In the\n      // flyout style the pages are out of sight, so the group row IS the marker.\n      className={(state) => cn(navLinkClass(false, subActive, inline)(state), \"min-w-0 flex-1\")}\n    >\n      <span className=\"relative shrink-0\">\n        <item.icon className=\"size-4\" />\n      </span>\n      <span className=\"min-w-0 flex-1 break-words leading-snug\">{item.label}</span>\n      {!inline && <ChevronRight className=\"size-3.5 shrink-0 opacity-60 rtl:-scale-x-100\" />}\n    </NavLink>\n  );\n\n  return (\n    <div>\n      {inline ? (\n        <div className=\"flex items-center gap-0.5\">\n          {link}\n          <button\n            type=\"button\"\n            aria-expanded={open}\n            aria-controls={listId}\n            aria-label={toggleGroupLabel(item.label)}\n            onClick={() => setOpenGroup(open ? null : item.to)}\n            className=\"flex size-9 shrink-0 items-center justify-center rounded-md text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]\"\n          >\n            <ChevronRight\n              aria-hidden\n              className={cn(\n                \"size-3.5 transition-transform duration-200 ease-out motion-reduce:transition-none rtl:-scale-x-100\",\n                // Under dir=\"rtl\" the chevron is MIRRORED first (scale applies before rotate), so\n                // it starts pointing left and a +90° turn would point it UP — hence −90° there.\n                open && \"rotate-90 rtl:-rotate-90\",\n              )}\n            />\n          </button>\n        </div>\n      ) : (\n        <SidebarFlyout item={item}>{link}</SidebarFlyout>\n      )}\n      <div\n        id={listId}\n        inert={!expanded}\n        className=\"grid transition-[grid-template-rows,visibility] duration-200 ease-out motion-reduce:transition-none\"\n        style={{\n          gridTemplateRows: expanded ? \"1fr\" : \"0fr\",\n          visibility: expanded ? \"visible\" : \"hidden\",\n        }}\n      >\n        <div\n          className={cn(\n            \"min-h-0 overflow-hidden transition-opacity duration-200 ease-out motion-reduce:transition-none\",\n            expanded ? \"opacity-100\" : \"opacity-0\",\n          )}\n        >\n          {/* The rule and indent live on the list INSIDE the clipping box: margin or\n              padding on the element whose row is collapsing to 0fr would hold it open\n              by that much. */}\n          <ul className=\"ms-[1.3rem] mt-0.5 space-y-0.5 border-s border-[var(--border)] ps-2\">\n            {item.items!.map((sub) => (\n              <li key={sub.to}>\n                <NavLink\n                  to={sub.to}\n                  end={sub.end ?? true}\n                  className={({ isActive }) =>\n                    cn(\n                      \"flex min-h-8 items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors\",\n                      isActive\n                        ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n                        : \"text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n                    )\n                  }\n                >\n                  <sub.icon className=\"size-4 shrink-0 opacity-70\" aria-hidden />\n                  <span className=\"min-w-0 break-words leading-snug\">{sub.label}</span>\n                </NavLink>\n              </li>\n            ))}\n          </ul>\n        </div>\n      </div>\n    </div>\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=\"animate-flyout min-w-52 overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\"\n            >\n              <div className=\"border-b border-[var(--border)] px-3 py-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]\">\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-[var(--bg-active)] font-medium text-[var(--text-primary)]\"\n                            : \"text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n                        )\n                      }\n                    >\n                      <sub.icon className=\"size-4 shrink-0 text-[var(--text-placeholder)]\" />\n                      <span className=\"min-w-0 break-words leading-snug\">{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":[]}
+{"version":3,"sources":["../../src/shell/app-shell.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useEffect, useId, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { NavLink, matchPath, useLocation } from \"react-router\";\nimport { ChevronRight, PanelLeftClose, PanelLeftOpen } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf, type Direction } from \"../lib/direction\";\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\";\nimport { DEFAULT_APP_SHELL_LABELS, useKitLabels } from \"../i18n/kit-labels\";\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\n/**\n * Exported and `<div>`-shaped. This is the outermost element of every consuming app, so\n * there is nothing above it to hang an id, a landmark label or a `data-tour` anchor on —\n * and nothing a consumer can wrap it in either, since the root owns the `h-dvh` and\n * `overflow-hidden` the whole layout is built on (audit §api-design).\n */\nexport interface AppShellProps extends ComponentPropsWithoutRef<\"div\"> {\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  /** Default: `appShell.collapse` from the {@link UiKitProvider}, else English. */\n  collapseLabel?: string;\n  /** Default: `appShell.expand` from the {@link UiKitProvider}, else English. */\n  expandLabel?: string;\n  /** How an entry's `items` are revealed in the EXPANDED desktop sidebar.\n   *\n   *  - `\"flyout\"` (default) — a panel beside the sidebar on hover/focus. Compact: the\n   *    sidebar stays one row per group however many pages a group holds.\n   *  - `\"inline\"` — a disclosure under the entry, the pattern of MUI's nested List and\n   *    most documentation sites. Every page is visible at once, and the group holding\n   *    the current page opens on its own, so the reader can see where they are without\n   *    hovering anything.\n   *\n   *  The icon-only (collapsed) sidebar always uses the flyout: an indented list has no\n   *  room there. The mobile bottom bar ignores `items` in both modes. */\n  subNav?: \"flyout\" | \"inline\";\n  /** Accessible name of the inline disclosure button, given the group's label.\n   *  Only used with `subNav=\"inline\"`. Its expanded state is carried by\n   *  `aria-expanded`, so one wording serves both directions. Default:\n   *  `appShell.toggleGroup` from the {@link UiKitProvider}, else English. */\n  toggleGroupLabel?: (groupLabel: string) => string;\n  /** Below `md`: show the current group's `items` as a scrollable row above the\n   *  bottom bar — the phone's counterpart of the sidebar's second level. Default true;\n   *  `false` keeps the single bar, where a group entry only links to its own `to`. */\n  mobileSubNav?: boolean;\n  /**\n   * Lay the shell out inside its PARENT'S box instead of the viewport: `h-full` rather\n   * than `h-dvh`, its own scroll container at every width, a bottom bar pinned to the\n   * shell rather than the window, `--app-nav-h` published on the shell alone, and no\n   * persisted collapse state unless `collapseStorageKey` is passed. For an app preview,\n   * a device frame, a docs example.\n   *\n   * Implied for a shell rendered inside another AppShell, which is the case this\n   * exists for: the inner one used to publish its own nav height on `<html>`, fight\n   * the outer one over it, and remove it on unmount from under the outer app.\n   */\n  embedded?: boolean;\n}\n\n/** True below an AppShell — how a nested shell knows it is one. */\nconst AppShellNesting = createContext(false);\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(\n  ref: React.RefObject<HTMLElement | null>,\n  shellRef: React.RefObject<HTMLElement | null>,\n  embedded: boolean,\n): 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 shell = shellRef.current;\n    // Always on the shell's own root, so everything inside it — a nested shell's\n    // content included — reads the nearest bar's height. On <html> as well only for\n    // the OUTERMOST shell, for what it portals to <body> (a sheet docking on the bar).\n    // The DOM check backs up the context for a shell mounted in a separate React root.\n    const global = !embedded && !shell?.parentElement?.closest(\"[data-app-shell]\");\n    const targets = [shell, global ? document.documentElement : null].filter(\n      (el): el is HTMLElement => el !== null,\n    );\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      const value = `${node ? Math.floor(node.getBoundingClientRect().height) : 0}px`;\n      for (const el of targets) el.style.setProperty(\"--app-nav-h\", value);\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      for (const el of targets) el.style.removeProperty(\"--app-nav-h\");\n    };\n  }, [ref, shellRef, embedded, 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: collapseStorageKeyProp,\n  collapseLabel,\n  expandLabel,\n  subNav = \"flyout\",\n  mobileSubNav = true,\n  toggleGroupLabel,\n  embedded: embeddedProp,\n  className,\n  ...rest\n}: AppShellProps) {\n  const embedded = useContext(AppShellNesting) || !!embeddedProp;\n  // An embedded shell sharing the default key would overwrite the outer app's sidebar\n  // preference with its own — so it persists only when given a key of its own.\n  const collapseStorageKey =\n    collapseStorageKeyProp ?? (embedded ? null : \"appLayout.sidebarCollapsed\");\n  // The three props are per-shell overrides of the provider's `appShell`; one left\n  // undefined falls through to the provider rather than to English.\n  const labels = useKitLabels(\"appShell\", DEFAULT_APP_SHELL_LABELS, {\n    collapse: collapseLabel,\n    expand: expandLabel,\n    toggleGroup: toggleGroupLabel,\n  });\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(\n    () => collapseStorageKey !== null && readStored(collapseStorageKey) === \"1\",\n  );\n  // The inline sidebar is an ACCORDION: one group open at a time, keyed by its `to`.\n  // Held here rather than per group so opening one can close the other — two lists\n  // open at once pushed every entry below them off a laptop screen.\n  const [openGroup, setOpenGroup] = useState<string | null>(null);\n  // Publishes `--app-nav-h` for anything that has to sit on the bottom bar.\n  const navRef = useRef<HTMLDivElement>(null);\n  const rootRef = useRef<HTMLDivElement>(null);\n  useNavHeightVar(navRef, rootRef, embedded);\n  useEffect(() => {\n    if (collapseStorageKey !== null) writeStored(collapseStorageKey, collapsed ? \"1\" : \"0\");\n  }, [collapsed, collapseStorageKey]);\n\n  return (\n    // The caller's attributes go on the shell's own root, never on the `data-tour=\"nav\"`\n    // wrappers below — those are the kit's anchors for its own guided tour (#313/#322),\n    // and a second element answering to the same selector is a tour that highlights the\n    // wrong thing or nothing at all.\n    <AppShellNesting.Provider value={true}>\n      <div\n        {...rest}\n        ref={rootRef}\n        data-app-shell=\"\"\n        className={cn(\n          \"relative flex flex-col\",\n          embedded\n            ? // `contain: layout` makes this box the containing block for the `fixed`\n              // bottom bar below, so it pins to the shell rather than to the window.\n              \"h-full min-h-0 overflow-hidden [contain:layout]\"\n            : \"min-h-screen md:h-dvh md:overflow-hidden\",\n          className,\n        )}\n      >\n        {topBar}\n        <div className=\"flex flex-1 min-h-0\">\n          <aside\n            className={cn(\n              // `border-e`: the sidebar sits at the START, which is the right in RTL.\n              \"hidden md:flex md:flex-col border-e border-[var(--border)] bg-[var(--bg-surface)] transition-[width] duration-200 ease-out overflow-hidden\",\n              // Embedded, the row it sits in is already the shell's height; the sticky\n              // offsets below are measured against the window's top bar.\n              embedded ? \"md:self-stretch\" : \"md:sticky md:top-12 md:self-start md:h-[calc(100vh-3rem)]\",\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\n                    key={item.to}\n                    item={item}\n                    collapsed={collapsed}\n                    inline={subNav === \"inline\"}\n                    toggleGroupLabel={labels.toggleGroup}\n                    openGroup={openGroup}\n                    setOpenGroup={setOpenGroup}\n                  />\n                ))}\n              </div>\n            </nav>\n            {sidebarFooter?.(collapsed)}\n            <div className=\"border-t border-[var(--border)] p-2\">\n              {collapsed ? (\n                <Tooltip label={labels.expand} side=\"right\" portal className=\"block\">\n                  <button\n                    type=\"button\"\n                    onClick={() => setCollapsed(false)}\n                    aria-label={labels.expand}\n                    className=\"flex w-full items-center justify-center min-h-9 rounded-md text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]\"\n                  >\n                    <PanelLeftOpen className=\"size-4 shrink-0 rtl:-scale-x-100\" />\n                  </button>\n                </Tooltip>\n              ) : (\n                <button\n                  type=\"button\"\n                  onClick={() => setCollapsed(true)}\n                  aria-label={labels.collapse}\n                  className=\"flex w-full items-center gap-3 min-h-9 px-3 py-2 rounded-md text-sm text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]\"\n                >\n                  <PanelLeftClose className=\"size-4 shrink-0 rtl:-scale-x-100\" />\n                  <span className=\"truncate\">{labels.collapse}</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            {/* `relative` makes <main> the containing block for everything absolutely\n                positioned inside it. Tailwind's `sr-only` is `position:absolute`; with no\n                positioned ancestor it resolves against the INITIAL containing block, is\n                laid out at its offset from the top of the DOCUMENT, and grows\n                `<html>`'s scroll height past the viewport — a second scrollbar beside this\n                one that scrolls into empty space. Guarding it per component (see\n                sr-only-containment.test) could never be complete: any page's own\n                `sr-only` span re-opened it. Here it is closed for every child at once. */}\n            <main\n              className={cn(\n                \"relative flex-1 max-w-full overflow-x-clip pb-[calc(var(--app-nav-h,4rem)+1.5rem)] md:pb-0 md:min-h-0 md:overflow-y-auto md:[scrollbar-gutter:stable_both-edges]\",\n                // Embedded there is no document scroll to lean on below `md` either.\n                embedded && \"min-h-0 overflow-y-auto\",\n              )}\n            >\n              {children}\n            </main>\n            {footer}\n          </div>\n        </div>\n\n        {/* The phone navigation: the group bar, and above it — when the current page\n            belongs to a group with pages of its own — the row of those pages. The pair\n            is the phone's version of the sidebar's two levels; without the upper row a\n            group's `items` were simply unreachable below `md`. ONE measured box, so\n            `--app-nav-h` covers both rows and whatever docks on the bar sits on the\n            whole of it. */}\n        <div\n          ref={navRef}\n          className=\"md:hidden fixed bottom-0 inset-x-0 z-30 border-t border-[var(--border)] bg-[var(--bg-surface)]\"\n        >\n          {mobileSubNav && <MobileSubNav nav={nav} />}\n          <nav\n            data-tour=\"nav\"\n            className=\"grid\"\n            style={{ gridTemplateColumns: `repeat(${nav.length}, minmax(0, 1fr))` }}\n          >\n            {nav.map((item) => (\n              <MobileNavItem key={item.to} item={item} />\n            ))}\n          </nav>\n        </div>\n      </div>\n    </AppShellNesting.Provider>\n  );\n}\n\n/** One cell of the phone's group bar. Marked while the group's own page OR any of its\n *  pages is current — NavLink alone only knows its own `to`, which left the bar with\n *  nothing marked on every sub-page (the same defect the sidebar had). */\nfunction MobileNavItem({ item }: { item: AppShellNavItem }) {\n  const subActive = useSubItemActive(item);\n  return (\n    <NavLink\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 || subActive\n            ? \"font-semibold text-[var(--brand)] before:bg-[var(--brand)]\"\n            : \"text-[var(--text-muted)] 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\">{item.shortLabel ?? item.label}</span>\n    </NavLink>\n  );\n}\n\n/**\n * The upper row of the phone navigation: the pages of the group the reader is in, as\n * a sideways-scrolling row of pills. Rendered only while such a group is current —\n * on a page outside every group the bar stays one row, rather than showing an empty\n * shelf or guessing a group.\n *\n * It slides in over 200ms (fade only under reduced motion) and wraps onto more rows\n * rather than scrolling, so every page of the group is in view at once.\n */\nfunction MobileSubNav({ nav }: { nav: AppShellNavItem[] }) {\n  const { pathname } = useLocation();\n  const group = nav.find(\n    (item) =>\n      !!item.items?.length &&\n      (matchPath({ path: item.to, end: item.end ?? true }, pathname) ||\n        item.items.some((sub) => matchPath({ path: sub.to, end: sub.end ?? true }, pathname))),\n  );\n\n  if (!group) return null;\n  return (\n    <nav\n      aria-label={group.label}\n      // Keyed by group so switching groups replays the entrance.\n      key={group.to}\n      className=\"animate-subnav border-b border-[var(--border)]\"\n    >\n      <ul\n        // Wraps onto as many rows as the group needs rather than scrolling sideways: a\n        // sideways row hides pages past the edge, and every page of the group in view\n        // is the point of the row. The bar grows with it — `--app-nav-h` measures it.\n        className=\"flex flex-wrap gap-1.5 px-3 py-2\"\n      >\n        {group.items!.map((sub) => (\n          <li key={sub.to} className=\"shrink-0\">\n            <NavLink\n              to={sub.to}\n              end={sub.end ?? true}\n              className={({ isActive }) =>\n                cn(\n                  \"flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs transition-colors\",\n                  isActive\n                    ? \"border-[var(--brand)] bg-[var(--brand)] font-medium text-[var(--brand-contrast)]\"\n                    : \"border-[var(--border)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n                )\n              }\n            >\n              <sub.icon className=\"size-3.5 shrink-0\" aria-hidden />\n              {sub.label}\n            </NavLink>\n          </li>\n        ))}\n      </ul>\n    </nav>\n  );\n}\n\n/** `strong` is the current page; `trail` is the group that CONTAINS the current page\n *  while the page itself is shown elsewhere (the inline list below it). */\nconst navLinkClass = (collapsed: boolean, forceActive: boolean, trail = false) =>\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 transition-colors duration-150 ${\n      isActive || (forceActive && !trail)\n        ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n        : forceActive\n          ? \"font-medium text-[var(--text-primary)] hover:bg-[var(--bg-hover)]\"\n          : \"text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\"\n    }`;\n\n/** Whether any of an entry's sub-items is the current route. NavLink only knows about\n *  its OWN `to`, so without this a group whose pages live at sibling paths\n *  (`/fields`, `/numbers`, …) lost its highlight the moment the reader left the one\n *  page the group linked to — the sidebar then marked nothing at all, and the only\n *  \"you are here\" left was inside a flyout that is closed unless hovered. */\nfunction useSubItemActive(item: AppShellNavItem): boolean {\n  const { pathname } = useLocation();\n  return !!item.items?.some((sub) => matchPath({ path: sub.to, end: sub.end ?? true }, pathname));\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, or (with\n *  `inline`) a disclosure lists them underneath. */\nfunction SidebarNavItem({\n  item,\n  collapsed,\n  inline,\n  toggleGroupLabel,\n  openGroup,\n  setOpenGroup,\n}: {\n  item: AppShellNavItem;\n  collapsed: boolean;\n  inline: boolean;\n  toggleGroupLabel: (groupLabel: string) => string;\n  openGroup: string | null;\n  setOpenGroup: (to: string | null) => void;\n}) {\n  const hasSub = !!item.items?.length;\n  const subActive = useSubItemActive(item);\n\n  // In the EXPANDED sidebar a group is one component in both styles, so switching\n  // between them is a transition of the same element (the page list folding away or\n  // unfolding) rather than one tree replaced by another. The icon-only sidebar keeps\n  // the plain flyout below: an indented list has no room there.\n  if (hasSub && !collapsed) {\n    return (\n      <SidebarGroup\n        item={item}\n        subActive={subActive}\n        inline={inline}\n        toggleGroupLabel={toggleGroupLabel}\n        open={openGroup === item.to}\n        setOpenGroup={setOpenGroup}\n      />\n    );\n  }\n\n  const link = (\n    <NavLink\n      to={item.to}\n      end={item.end ?? true}\n      data-tour={item.dataTour}\n      className={navLinkClass(collapsed, subActive)}\n      aria-haspopup={hasSub ? \"menu\" : undefined}\n    >\n      <span className=\"relative shrink-0\">\n        <item.icon className=\"size-4\" />\n      </span>\n      {/* Wraps rather than truncates: in the sidebar a label cut to \"Checkbox, switch\n          & sl…\" hides the one word that tells two pages apart, and there is height\n          to spare. (The phone bar keeps `truncate` — its cells must stay one row.) */}\n      {!collapsed && <span className=\"min-w-0 flex-1 break-words leading-snug\">{item.label}</span>}\n      {!collapsed && hasSub && <ChevronRight className=\"size-3.5 shrink-0 opacity-60 rtl:-scale-x-100\" />}\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/**\n * An entry with sub-items in the expanded sidebar.\n *\n * - `inline`: the entry's own link (its overview page) plus a chevron button that\n *   shows or hides the sub-items indented beneath it. Two controls rather than one\n *   because they do two different things — a row that both navigated AND toggled\n *   would make \"open the overview\" and \"peek at the pages\" the same click.\n * - flyout: the link alone, with the sub-items in a panel beside the sidebar on\n *   hover/focus. The inline list is still rendered, folded shut, so that switching\n *   styles animates it rather than swapping it.\n *\n * THE FOLD is a `grid-template-rows` transition from `0fr` to `1fr` — the one way to\n * animate to a content-sized height without measuring it, so a translated label that\n * wraps to two lines unfolds exactly as far as it needs. `visibility` rides the same\n * transition so a shut list drops out of the accessibility tree only once it has\n * finished closing, and `inert` takes its links out of the tab order immediately.\n */\nfunction SidebarGroup({\n  item,\n  subActive,\n  inline,\n  toggleGroupLabel,\n  open,\n  setOpenGroup,\n}: {\n  item: AppShellNavItem;\n  subActive: boolean;\n  inline: boolean;\n  toggleGroupLabel: (groupLabel: string) => string;\n  /** Whether this is the sidebar's one open group (see AppShell's `openGroup`). */\n  open: boolean;\n  setOpenGroup: (to: string | null) => void;\n}) {\n  const listId = useId();\n  const { pathname } = useLocation();\n  const onOwnPage = !!matchPath({ path: item.to, end: item.end ?? true }, pathname);\n  // Opening follows the reader: arriving on this group's overview or one of its pages\n  // (by link, by the pager, by Back) opens it — and, the sidebar holding ONE open\n  // group, closes whichever was open before. Both folds run at once, so the eye sees\n  // one list hand over to the other. Run in an effect after mount, so the current\n  // group UNFOLDS into view on load rather than appearing already open.\n  const here = subActive || onOwnPage;\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- follows the route, see above\n    if (here) setOpenGroup(item.to);\n  }, [here, item.to, setOpenGroup]);\n  const expanded = inline && open;\n\n  const link = (\n    <NavLink\n      to={item.to}\n      end={item.end ?? true}\n      data-tour={item.dataTour}\n      aria-haspopup={inline ? undefined : \"menu\"}\n      // `trail` (inline only): while a page of the group is current, the group row is\n      // the breadcrumb, not the destination — the page's own row below carries the\n      // strong marker, and two inverse rows would say \"you are here\" twice. In the\n      // flyout style the pages are out of sight, so the group row IS the marker.\n      className={(state) => cn(navLinkClass(false, subActive, inline)(state), \"min-w-0 flex-1\")}\n    >\n      <span className=\"relative shrink-0\">\n        <item.icon className=\"size-4\" />\n      </span>\n      <span className=\"min-w-0 flex-1 break-words leading-snug\">{item.label}</span>\n      {!inline && <ChevronRight className=\"size-3.5 shrink-0 opacity-60 rtl:-scale-x-100\" />}\n    </NavLink>\n  );\n\n  return (\n    <div>\n      {inline ? (\n        <div className=\"flex items-center gap-0.5\">\n          {link}\n          <button\n            type=\"button\"\n            aria-expanded={open}\n            aria-controls={listId}\n            aria-label={toggleGroupLabel(item.label)}\n            onClick={() => setOpenGroup(open ? null : item.to)}\n            className=\"flex size-9 shrink-0 items-center justify-center rounded-md text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]\"\n          >\n            <ChevronRight\n              aria-hidden\n              className={cn(\n                \"size-3.5 transition-transform duration-200 ease-out motion-reduce:transition-none rtl:-scale-x-100\",\n                // Under dir=\"rtl\" the chevron is MIRRORED first (scale applies before rotate), so\n                // it starts pointing left and a +90° turn would point it UP — hence −90° there.\n                open && \"rotate-90 rtl:-rotate-90\",\n              )}\n            />\n          </button>\n        </div>\n      ) : (\n        <SidebarFlyout item={item}>{link}</SidebarFlyout>\n      )}\n      <div\n        id={listId}\n        inert={!expanded}\n        className=\"grid transition-[grid-template-rows,visibility] duration-200 ease-out motion-reduce:transition-none\"\n        style={{\n          gridTemplateRows: expanded ? \"1fr\" : \"0fr\",\n          visibility: expanded ? \"visible\" : \"hidden\",\n        }}\n      >\n        <div\n          className={cn(\n            \"min-h-0 overflow-hidden transition-opacity duration-200 ease-out motion-reduce:transition-none\",\n            expanded ? \"opacity-100\" : \"opacity-0\",\n          )}\n        >\n          {/* The rule and indent live on the list INSIDE the clipping box: margin or\n              padding on the element whose row is collapsing to 0fr would hold it open\n              by that much. */}\n          <ul className=\"ms-[1.3rem] mt-0.5 space-y-0.5 border-s border-[var(--border)] ps-2\">\n            {item.items!.map((sub) => (\n              <li key={sub.to}>\n                <NavLink\n                  to={sub.to}\n                  end={sub.end ?? true}\n                  className={({ isActive }) =>\n                    cn(\n                      \"flex min-h-8 items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors\",\n                      isActive\n                        ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n                        : \"text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n                    )\n                  }\n                >\n                  <sub.icon className=\"size-4 shrink-0 opacity-70\" aria-hidden />\n                  <span className=\"min-w-0 break-words leading-snug\">{sub.label}</span>\n                </NavLink>\n              </li>\n            ))}\n          </ul>\n        </div>\n      </div>\n    </div>\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  // The flyout is portalled out of the subtree whose `dir` it inherited; read on open.\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n\n  // Anchor the flyout to the item's END edge — its right, or its left in RTL, where\n  // the sidebar sits on the right of the window. The hook re-measures on\n  // scroll/resize (the nav list can scroll).\n  const rect = useAnchoredRect(wrapperRef, open);\n  const pos = rect\n    ? dir === \"rtl\"\n      ? { top: rect.top, right: window.innerWidth - rect.left }\n      : { top: rect.top, left: rect.right }\n    : 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    setDir(dirOf(wrapperRef.current));\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            dir={dir}\n            style={{ position: \"fixed\", ...pos }}\n            className=\"z-40 ps-1\"\n            onMouseEnter={cancelClose}\n            onMouseLeave={scheduleClose}\n          >\n            <div\n              role=\"menu\"\n              aria-label={item.label}\n              className=\"animate-flyout min-w-52 overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\"\n            >\n              <div className=\"border-b border-[var(--border)] px-3 py-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]\">\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-[var(--bg-active)] font-medium text-[var(--text-primary)]\"\n                            : \"text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n                        )\n                      }\n                    >\n                      <sub.icon className=\"size-4 shrink-0 text-[var(--text-placeholder)]\" />\n                      <span className=\"min-w-0 break-words leading-snug\">{sub.label}</span>\n                    </NavLink>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n}\n"],"mappings":";AA8RkB,cA0BF,YA1BE;AA9RlB,SAAS,eAAe,aAAa,YAAY,WAAW,OAAO,QAAQ,gBAAgB;AAE3F,SAAS,oBAAoB;AAC7B,SAAS,SAAS,WAAW,mBAAmB;AAChD,SAAS,cAAc,gBAAgB,qBAAqB;AAE5D,SAAS,UAAU;AACnB,SAAS,aAA6B;AACtC,SAAS,YAAY,mBAAmB;AACxC,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B,oBAAoB;AAiGvD,MAAM,kBAAkB,cAAc,KAAK;AAsB3C,SAAS,gBACP,KACA,UACA,UACM;AAMN,QAAM,SAAS,cAAc,sBAAsB,KAAK;AACxD,YAAU,MAAM;AACd,UAAM,OAAO,IAAI;AACjB,UAAM,QAAQ,SAAS;AAKvB,UAAM,SAAS,CAAC,YAAY,CAAC,OAAO,eAAe,QAAQ,kBAAkB;AAC7E,UAAM,UAAU,CAAC,OAAO,SAAS,SAAS,kBAAkB,IAAI,EAAE;AAAA,MAChE,CAAC,OAA0B,OAAO;AAAA,IACpC;AAkBA,UAAM,UAAU,MAAM;AACpB,YAAM,QAAQ,GAAG,OAAO,KAAK,MAAM,KAAK,sBAAsB,EAAE,MAAM,IAAI,CAAC;AAC3E,iBAAW,MAAM,QAAS,IAAG,MAAM,YAAY,eAAe,KAAK;AAAA,IACrE;AACA,YAAQ;AAMR,UAAM,KAAK,QAAQ,OAAO,mBAAmB,cAAc,IAAI,eAAe,OAAO,IAAI;AACzF,QAAI,MAAM,KAAM,IAAG,QAAQ,IAAI;AAC/B,WAAO,MAAM;AACX,UAAI,WAAW;AACf,iBAAW,MAAM,QAAS,IAAG,MAAM,eAAe,aAAa;AAAA,IACjE;AAAA,EACF,GAAG,CAAC,KAAK,UAAU,UAAU,MAAM,CAAC;AACtC;AASO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,eAAe;AAAA,EACf;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,WAAW,WAAW,eAAe,KAAK,CAAC,CAAC;AAGlD,QAAM,qBACJ,2BAA2B,WAAW,OAAO;AAG/C,QAAM,SAAS,aAAa,YAAY,0BAA0B;AAAA,IAChE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,aAAa;AAAA,EACf,CAAC;AAMD,QAAM,CAAC,WAAW,YAAY,IAAI;AAAA,IAChC,MAAM,uBAAuB,QAAQ,WAAW,kBAAkB,MAAM;AAAA,EAC1E;AAIA,QAAM,CAAC,WAAW,YAAY,IAAI,SAAwB,IAAI;AAE9D,QAAM,SAAS,OAAuB,IAAI;AAC1C,QAAM,UAAU,OAAuB,IAAI;AAC3C,kBAAgB,QAAQ,SAAS,QAAQ;AACzC,YAAU,MAAM;AACd,QAAI,uBAAuB,KAAM,aAAY,oBAAoB,YAAY,MAAM,GAAG;AAAA,EACxF,GAAG,CAAC,WAAW,kBAAkB,CAAC;AAElC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,MAC/B;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,kBAAe;AAAA,QACf,WAAW;AAAA,UACT;AAAA,UACA;AAAA;AAAA;AAAA,YAGI;AAAA,cACA;AAAA,UACJ;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,UACD,qBAAC,SAAI,WAAU,uBACb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA;AAAA,kBAET;AAAA;AAAA;AAAA,kBAGA,WAAW,oBAAoB;AAAA,kBAC/B,YAAY,YAAY;AAAA,gBAC1B;AAAA,gBAQA;AAAA,sCAAC,SAAI,WAAU,sDACb,8BAAC,SAAI,aAAU,OAAM,WAAU,aAC5B,cAAI,IAAI,CAAC,SACR;AAAA,oBAAC;AAAA;AAAA,sBAEC;AAAA,sBACA;AAAA,sBACA,QAAQ,WAAW;AAAA,sBACnB,kBAAkB,OAAO;AAAA,sBACzB;AAAA,sBACA;AAAA;AAAA,oBANK,KAAK;AAAA,kBAOZ,CACD,GACH,GACF;AAAA,kBACC,gBAAgB,SAAS;AAAA,kBAC1B,oBAAC,SAAI,WAAU,uCACZ,sBACC,oBAAC,WAAQ,OAAO,OAAO,QAAQ,MAAK,SAAQ,QAAM,MAAC,WAAU,SAC3D;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,SAAS,MAAM,aAAa,KAAK;AAAA,sBACjC,cAAY,OAAO;AAAA,sBACnB,WAAU;AAAA,sBAEV,8BAAC,iBAAc,WAAU,oCAAmC;AAAA;AAAA,kBAC9D,GACF,IAEA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,SAAS,MAAM,aAAa,IAAI;AAAA,sBAChC,cAAY,OAAO;AAAA,sBACnB,WAAU;AAAA,sBAEV;AAAA,4CAAC,kBAAe,WAAU,oCAAmC;AAAA,wBAC7D,oBAAC,UAAK,WAAU,YAAY,iBAAO,UAAS;AAAA;AAAA;AAAA,kBAC9C,GAEJ;AAAA;AAAA;AAAA,YACF;AAAA,YAKA,qBAAC,SAAI,WAAU,2CAgCb;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA;AAAA,oBAEA,YAAY;AAAA,kBACd;AAAA,kBAEC;AAAA;AAAA,cACH;AAAA,cACC;AAAA,eACH;AAAA,aACF;AAAA,UAQA;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,WAAU;AAAA,cAET;AAAA,gCAAgB,oBAAC,gBAAa,KAAU;AAAA,gBACzC;AAAA,kBAAC;AAAA;AAAA,oBACC,aAAU;AAAA,oBACV,WAAU;AAAA,oBACV,OAAO,EAAE,qBAAqB,UAAU,IAAI,MAAM,oBAAoB;AAAA,oBAErE,cAAI,IAAI,CAAC,SACR,oBAAC,iBAA4B,QAAT,KAAK,EAAgB,CAC1C;AAAA;AAAA,gBACH;AAAA;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF,GACF;AAAA;AAEJ;AAKA,SAAS,cAAc,EAAE,KAAK,GAA8B;AAC1D,QAAM,YAAY,iBAAiB,IAAI;AACvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,KAAK;AAAA,MACT,KAAK,KAAK,OAAO;AAAA,MACjB,aAAW,KAAK;AAAA,MAChB,WAAW,CAAC,EAAE,SAAS;AAAA;AAAA;AAAA;AAAA,QAIrB;AAAA,UACE;AAAA,UACA;AAAA,UACA,YAAY,YACR,+DACA;AAAA,QACN;AAAA;AAAA,MAGF;AAAA,4BAAC,UAAK,WAAU,YACd,8BAAC,KAAK,MAAL,EAAU,WAAU,UAAS,GAChC;AAAA,QAKA,oBAAC,UAAK,WAAU,8BAA8B,eAAK,cAAc,KAAK,OAAM;AAAA;AAAA;AAAA,EAC9E;AAEJ;AAWA,SAAS,aAAa,EAAE,IAAI,GAA+B;AACzD,QAAM,EAAE,SAAS,IAAI,YAAY;AACjC,QAAM,QAAQ,IAAI;AAAA,IAChB,CAAC,SACC,CAAC,CAAC,KAAK,OAAO,WACb,UAAU,EAAE,MAAM,KAAK,IAAI,KAAK,KAAK,OAAO,KAAK,GAAG,QAAQ,KAC3D,KAAK,MAAM,KAAK,CAAC,QAAQ,UAAU,EAAE,MAAM,IAAI,IAAI,KAAK,IAAI,OAAO,KAAK,GAAG,QAAQ,CAAC;AAAA,EAC1F;AAEA,MAAI,CAAC,MAAO,QAAO;AACnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,MAAM;AAAA,MAGlB,WAAU;AAAA,MAEV;AAAA,QAAC;AAAA;AAAA,UAIC,WAAU;AAAA,UAET,gBAAM,MAAO,IAAI,CAAC,QACjB,oBAAC,QAAgB,WAAU,YACzB;AAAA,YAAC;AAAA;AAAA,cACC,IAAI,IAAI;AAAA,cACR,KAAK,IAAI,OAAO;AAAA,cAChB,WAAW,CAAC,EAAE,SAAS,MACrB;AAAA,gBACE;AAAA,gBACA,WACI,qFACA;AAAA,cACN;AAAA,cAGF;AAAA,oCAAC,IAAI,MAAJ,EAAS,WAAU,qBAAoB,eAAW,MAAC;AAAA,gBACnD,IAAI;AAAA;AAAA;AAAA,UACP,KAfO,IAAI,EAgBb,CACD;AAAA;AAAA,MACH;AAAA;AAAA,IA5BK,MAAM;AAAA,EA6Bb;AAEJ;AAIA,MAAM,eAAe,CAAC,WAAoB,aAAsB,QAAQ,UACtE,CAAC,EAAE,SAAS,MACV,mCAAmC,YAAY,wBAAwB,MAAM,2DAC3E,YAAa,eAAe,CAAC,QACzB,sDACA,cACE,sEACA,yDACR;AAOJ,SAAS,iBAAiB,MAAgC;AACxD,QAAM,EAAE,SAAS,IAAI,YAAY;AACjC,SAAO,CAAC,CAAC,KAAK,OAAO,KAAK,CAAC,QAAQ,UAAU,EAAE,MAAM,IAAI,IAAI,KAAK,IAAI,OAAO,KAAK,GAAG,QAAQ,CAAC;AAChG;AAKA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,SAAS,CAAC,CAAC,KAAK,OAAO;AAC7B,QAAM,YAAY,iBAAiB,IAAI;AAMvC,MAAI,UAAU,CAAC,WAAW;AACxB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,cAAc,KAAK;AAAA,QACzB;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,QAAM,OACJ;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,KAAK;AAAA,MACT,KAAK,KAAK,OAAO;AAAA,MACjB,aAAW,KAAK;AAAA,MAChB,WAAW,aAAa,WAAW,SAAS;AAAA,MAC5C,iBAAe,SAAS,SAAS;AAAA,MAEjC;AAAA,4BAAC,UAAK,WAAU,qBACd,8BAAC,KAAK,MAAL,EAAU,WAAU,UAAS,GAChC;AAAA,QAIC,CAAC,aAAa,oBAAC,UAAK,WAAU,2CAA2C,eAAK,OAAM;AAAA,QACpF,CAAC,aAAa,UAAU,oBAAC,gBAAa,WAAU,iDAAgD;AAAA;AAAA;AAAA,EACnG;AAGF,MAAI,OAAQ,QAAO,oBAAC,iBAAc,MAAa,gBAAK;AACpD,SAAO,YACL,oBAAC,WAAQ,OAAO,KAAK,OAAO,MAAK,SAAQ,QAAM,MAAC,WAAU,SACvD,gBACH,IAEA;AAEJ;AAmBA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,QAAM,SAAS,MAAM;AACrB,QAAM,EAAE,SAAS,IAAI,YAAY;AACjC,QAAM,YAAY,CAAC,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,KAAK,KAAK,OAAO,KAAK,GAAG,QAAQ;AAMhF,QAAM,OAAO,aAAa;AAC1B,YAAU,MAAM;AAEd,QAAI,KAAM,cAAa,KAAK,EAAE;AAAA,EAChC,GAAG,CAAC,MAAM,KAAK,IAAI,YAAY,CAAC;AAChC,QAAM,WAAW,UAAU;AAE3B,QAAM,OACJ;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,KAAK;AAAA,MACT,KAAK,KAAK,OAAO;AAAA,MACjB,aAAW,KAAK;AAAA,MAChB,iBAAe,SAAS,SAAY;AAAA,MAKpC,WAAW,CAAC,UAAU,GAAG,aAAa,OAAO,WAAW,MAAM,EAAE,KAAK,GAAG,gBAAgB;AAAA,MAExF;AAAA,4BAAC,UAAK,WAAU,qBACd,8BAAC,KAAK,MAAL,EAAU,WAAU,UAAS,GAChC;AAAA,QACA,oBAAC,UAAK,WAAU,2CAA2C,eAAK,OAAM;AAAA,QACrE,CAAC,UAAU,oBAAC,gBAAa,WAAU,iDAAgD;AAAA;AAAA;AAAA,EACtF;AAGF,SACE,qBAAC,SACE;AAAA,aACC,qBAAC,SAAI,WAAU,6BACZ;AAAA;AAAA,MACD;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,iBAAe;AAAA,UACf,iBAAe;AAAA,UACf,cAAY,iBAAiB,KAAK,KAAK;AAAA,UACvC,SAAS,MAAM,aAAa,OAAO,OAAO,KAAK,EAAE;AAAA,UACjD,WAAU;AAAA,UAEV;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,WAAW;AAAA,gBACT;AAAA;AAAA;AAAA,gBAGA,QAAQ;AAAA,cACV;AAAA;AAAA,UACF;AAAA;AAAA,MACF;AAAA,OACF,IAEA,oBAAC,iBAAc,MAAa,gBAAK;AAAA,IAEnC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,OAAO,CAAC;AAAA,QACR,WAAU;AAAA,QACV,OAAO;AAAA,UACL,kBAAkB,WAAW,QAAQ;AAAA,UACrC,YAAY,WAAW,YAAY;AAAA,QACrC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,WAAW,gBAAgB;AAAA,YAC7B;AAAA,YAKA,8BAAC,QAAG,WAAU,uEACX,eAAK,MAAO,IAAI,CAAC,QAChB,oBAAC,QACC;AAAA,cAAC;AAAA;AAAA,gBACC,IAAI,IAAI;AAAA,gBACR,KAAK,IAAI,OAAO;AAAA,gBAChB,WAAW,CAAC,EAAE,SAAS,MACrB;AAAA,kBACE;AAAA,kBACA,WACI,sDACA;AAAA,gBACN;AAAA,gBAGF;AAAA,sCAAC,IAAI,MAAJ,EAAS,WAAU,8BAA6B,eAAW,MAAC;AAAA,kBAC7D,oBAAC,UAAK,WAAU,oCAAoC,cAAI,OAAM;AAAA;AAAA;AAAA,YAChE,KAfO,IAAI,EAgBb,CACD,GACH;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAMA,IAAI,oBAAyC;AAS7C,SAAS,cAAc,EAAE,MAAM,SAAS,GAAmD;AACzF,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,aAAa,OAA6C,IAAI;AACpE,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,QAAM,CAAC,KAAK,MAAM,IAAI,SAAoB,KAAK;AAK/C,QAAM,OAAO,gBAAgB,YAAY,IAAI;AAC7C,QAAM,MAAM,OACR,QAAQ,QACN,EAAE,KAAK,KAAK,KAAK,OAAO,OAAO,aAAa,KAAK,KAAK,IACtD,EAAE,KAAK,KAAK,KAAK,MAAM,KAAK,MAAM,IACpC;AAEJ,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI,WAAW,SAAS;AACtB,mBAAa,WAAW,OAAO;AAC/B,iBAAW,UAAU;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,CAAC;AAGL,QAAM,WAAW,YAAY,MAAM;AACjC,gBAAY;AACZ,YAAQ,KAAK;AAAA,EACf,GAAG,CAAC,WAAW,CAAC;AAChB,QAAM,WAAW,YAAY,MAAM;AACjC,gBAAY;AACZ,QAAI,qBAAqB,sBAAsB,SAAU,mBAAkB;AAC3E,wBAAoB;AACpB,WAAO,MAAM,WAAW,OAAO,CAAC;AAChC,YAAQ,IAAI;AAAA,EACd,GAAG,CAAC,aAAa,QAAQ,CAAC;AAC1B,QAAM,gBAAgB,YAAY,MAAM;AACtC,gBAAY;AACZ,eAAW,UAAU,WAAW,MAAM;AACpC,cAAQ,KAAK;AACb,UAAI,sBAAsB,SAAU,qBAAoB;AAAA,IAC1D,GAAG,GAAG;AAAA,EACR,GAAG,CAAC,aAAa,QAAQ,CAAC;AAG1B,eAAa,MAAM,QAAQ,KAAK,GAAG,IAAI;AAEvC;AAAA,IACE,MAAM,MAAM;AACV,kBAAY;AACZ,UAAI,sBAAsB,SAAU,qBAAoB;AAAA,IAC1D;AAAA,IACA,CAAC,aAAa,QAAQ;AAAA,EACxB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAU;AAAA,MACV,cAAc;AAAA,MACd,cAAc;AAAA,MACd,SAAS;AAAA,MACT,QAAQ;AAAA,MAEP;AAAA;AAAA,QACA,QACC,OACA;AAAA,UACE;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,OAAO,EAAE,UAAU,SAAS,GAAG,IAAI;AAAA,cACnC,WAAU;AAAA,cACV,cAAc;AAAA,cACd,cAAc;AAAA,cAEd;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,cAAY,KAAK;AAAA,kBACjB,WAAU;AAAA,kBAEV;AAAA,wCAAC,SAAI,WAAU,wHACZ,eAAK,OACR;AAAA,oBACA,oBAAC,QAAG,WAAU,QACX,eAAK,MAAO,IAAI,CAAC,QAChB,oBAAC,QACC;AAAA,sBAAC;AAAA;AAAA,wBACC,IAAI,IAAI;AAAA,wBACR,KAAK,IAAI,OAAO;AAAA,wBAChB,MAAK;AAAA,wBACL,SAAS,MAAM,QAAQ,KAAK;AAAA,wBAC5B,WAAW,CAAC,EAAE,SAAS,MACrB;AAAA,0BACE;AAAA,0BACA,WACI,iEACA;AAAA,wBACN;AAAA,wBAGF;AAAA,8CAAC,IAAI,MAAJ,EAAS,WAAU,kDAAiD;AAAA,0BACrE,oBAAC,UAAK,WAAU,oCAAoC,cAAI,OAAM;AAAA;AAAA;AAAA,oBAChE,KAjBO,IAAI,EAkBb,CACD,GACH;AAAA;AAAA;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UACA,SAAS;AAAA,QACX;AAAA;AAAA;AAAA,EACJ;AAEJ;","names":[]}

package/dist/shell/topbar-action-menu.js

@@ -25,7 +25,7 @@ function TopBarActionMenu({
           const content = /* @__PURE__ */ jsxs("span", { className: "flex w-full items-center gap-2", children: [
             entry.icon,
             entry.label,
-            entry.trailing && /* @__PURE__ */ jsx("span", { className: "ml-auto pl-2", children: entry.trailing })
+            entry.trailing && /* @__PURE__ */ jsx("span", { className: "ms-auto ps-2", children: entry.trailing })
           ] });
           return /* @__PURE__ */ jsx("li", { children: entry.kind === "link" ? /* @__PURE__ */ jsx(Link, { to: entry.to, onClick: close, className: TOPBAR_MENU_ITEM_CLASS, children: content }) : /* @__PURE__ */ jsx(
             "button",

package/dist/shell/topbar-action-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/topbar-action-menu.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Link } from \"react-router\";\nimport { cn } from \"../lib/cn\";\nimport { HoverMenu } from \"../components/hover-menu\";\nimport { TOPBAR_MENU_ITEM_CLASS, TOPBAR_TRIGGER_CLASS } from \"./topbar-controls\";\n\n/**\n * One row of a {@link TopBarActionMenu}. An `action` (default) runs `onSelect`, a\n * `link` navigates via react-router, and a `divider` draws a rule. Non-divider\n * rows close the menu automatically when chosen. `kind` may be omitted for\n * actions, keeping the common case terse.\n */\nexport type TopBarMenuEntry =\n  | { kind?: \"action\"; key: string; icon?: ReactNode; label: ReactNode; trailing?: ReactNode; onSelect: () => void }\n  | { kind: \"link\"; key: string; icon?: ReactNode; label: ReactNode; trailing?: ReactNode; to: string }\n  | { kind: \"divider\"; key: string };\n\n/**\n * A top-bar icon button that opens a {@link HoverMenu} of actions and/or links,\n * with an optional uppercase heading and divider rules. Generic glue over the\n * shared top-bar chrome — e.g. the feedback launcher or the guided-tours menu —\n * so those call sites describe their rows as data instead of rebuilding the\n * trigger + list markup. For a checkmarked value-switcher use\n * {@link OptionSwitcherMenu} instead.\n */\nexport function TopBarActionMenu({\n  icon,\n  ariaLabel,\n  heading,\n  entries,\n  panelClassName,\n}: {\n  icon: ReactNode;\n  ariaLabel: string;\n  heading?: string;\n  entries: TopBarMenuEntry[];\n  panelClassName?: string;\n}) {\n  return (\n    <HoverMenu\n      ariaLabel={ariaLabel}\n      trigger={({ toggle }) => (\n        <button type=\"button\" onClick={toggle} aria-label={ariaLabel} className={TOPBAR_TRIGGER_CLASS}>\n          {icon}\n        </button>\n      )}\n    >\n      {(close) => (\n        <ul className={cn(\"py-1\", panelClassName)}>\n          {heading && (\n            <li className=\"px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-[var(--text-placeholder)]\">\n              {heading}\n            </li>\n          )}\n          {entries.map((entry) => {\n            if (entry.kind === \"divider\") {\n              return <li key={entry.key} className=\"my-1 border-t border-[var(--border)]\" />;\n            }\n            const content = (\n              <span className=\"flex w-full items-center gap-2\">\n                {entry.icon}\n                {entry.label}\n                {entry.trailing && <span className=\"ml-auto pl-2\">{entry.trailing}</span>}\n              </span>\n            );\n            return (\n              <li key={entry.key}>\n                {entry.kind === \"link\" ? (\n                  <Link to={entry.to} onClick={close} className={TOPBAR_MENU_ITEM_CLASS}>\n                    {content}\n                  </Link>\n                ) : (\n                  <button\n                    type=\"button\"\n                    onClick={() => {\n                      entry.onSelect();\n                      close();\n                    }}\n                    className={TOPBAR_MENU_ITEM_CLASS}\n                  >\n                    {content}\n                  </button>\n                )}\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </HoverMenu>\n  );\n}\n"],"mappings":";AA0CQ,cAiBM,YAjBN;AAzCR,SAAS,YAAY;AACrB,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB,4BAA4B;AAqBtD,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS,CAAC,EAAE,OAAO,MACjB,oBAAC,YAAO,MAAK,UAAS,SAAS,QAAQ,cAAY,WAAW,WAAW,sBACtE,gBACH;AAAA,MAGD,WAAC,UACA,qBAAC,QAAG,WAAW,GAAG,QAAQ,cAAc,GACrC;AAAA,mBACC,oBAAC,QAAG,WAAU,8FACX,mBACH;AAAA,QAED,QAAQ,IAAI,CAAC,UAAU;AACtB,cAAI,MAAM,SAAS,WAAW;AAC5B,mBAAO,oBAAC,QAAmB,WAAU,0CAArB,MAAM,GAAsD;AAAA,UAC9E;AACA,gBAAM,UACJ,qBAAC,UAAK,WAAU,kCACb;AAAA,kBAAM;AAAA,YACN,MAAM;AAAA,YACN,MAAM,YAAY,oBAAC,UAAK,WAAU,gBAAgB,gBAAM,UAAS;AAAA,aACpE;AAEF,iBACE,oBAAC,QACE,gBAAM,SAAS,SACd,oBAAC,QAAK,IAAI,MAAM,IAAI,SAAS,OAAO,WAAW,wBAC5C,mBACH,IAEA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM;AACb,sBAAM,SAAS;AACf,sBAAM;AAAA,cACR;AAAA,cACA,WAAW;AAAA,cAEV;AAAA;AAAA,UACH,KAfK,MAAM,GAiBf;AAAA,QAEJ,CAAC;AAAA,SACH;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/shell/topbar-action-menu.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Link } from \"react-router\";\nimport { cn } from \"../lib/cn\";\nimport { HoverMenu } from \"../components/hover-menu\";\nimport { TOPBAR_MENU_ITEM_CLASS, TOPBAR_TRIGGER_CLASS } from \"./topbar-controls\";\n\n/**\n * One row of a {@link TopBarActionMenu}. An `action` (default) runs `onSelect`, a\n * `link` navigates via react-router, and a `divider` draws a rule. Non-divider\n * rows close the menu automatically when chosen. `kind` may be omitted for\n * actions, keeping the common case terse.\n */\nexport type TopBarMenuEntry =\n  | { kind?: \"action\"; key: string; icon?: ReactNode; label: ReactNode; trailing?: ReactNode; onSelect: () => void }\n  | { kind: \"link\"; key: string; icon?: ReactNode; label: ReactNode; trailing?: ReactNode; to: string }\n  | { kind: \"divider\"; key: string };\n\n/**\n * A top-bar icon button that opens a {@link HoverMenu} of actions and/or links,\n * with an optional uppercase heading and divider rules. Generic glue over the\n * shared top-bar chrome — e.g. the feedback launcher or the guided-tours menu —\n * so those call sites describe their rows as data instead of rebuilding the\n * trigger + list markup. For a checkmarked value-switcher use\n * {@link OptionSwitcherMenu} instead.\n */\nexport function TopBarActionMenu({\n  icon,\n  ariaLabel,\n  heading,\n  entries,\n  panelClassName,\n}: {\n  icon: ReactNode;\n  ariaLabel: string;\n  heading?: string;\n  entries: TopBarMenuEntry[];\n  panelClassName?: string;\n}) {\n  return (\n    <HoverMenu\n      ariaLabel={ariaLabel}\n      trigger={({ toggle }) => (\n        <button type=\"button\" onClick={toggle} aria-label={ariaLabel} className={TOPBAR_TRIGGER_CLASS}>\n          {icon}\n        </button>\n      )}\n    >\n      {(close) => (\n        <ul className={cn(\"py-1\", panelClassName)}>\n          {heading && (\n            <li className=\"px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-[var(--text-placeholder)]\">\n              {heading}\n            </li>\n          )}\n          {entries.map((entry) => {\n            if (entry.kind === \"divider\") {\n              return <li key={entry.key} className=\"my-1 border-t border-[var(--border)]\" />;\n            }\n            const content = (\n              <span className=\"flex w-full items-center gap-2\">\n                {entry.icon}\n                {entry.label}\n                {entry.trailing && <span className=\"ms-auto ps-2\">{entry.trailing}</span>}\n              </span>\n            );\n            return (\n              <li key={entry.key}>\n                {entry.kind === \"link\" ? (\n                  <Link to={entry.to} onClick={close} className={TOPBAR_MENU_ITEM_CLASS}>\n                    {content}\n                  </Link>\n                ) : (\n                  <button\n                    type=\"button\"\n                    onClick={() => {\n                      entry.onSelect();\n                      close();\n                    }}\n                    className={TOPBAR_MENU_ITEM_CLASS}\n                  >\n                    {content}\n                  </button>\n                )}\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </HoverMenu>\n  );\n}\n"],"mappings":";AA0CQ,cAiBM,YAjBN;AAzCR,SAAS,YAAY;AACrB,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB,4BAA4B;AAqBtD,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS,CAAC,EAAE,OAAO,MACjB,oBAAC,YAAO,MAAK,UAAS,SAAS,QAAQ,cAAY,WAAW,WAAW,sBACtE,gBACH;AAAA,MAGD,WAAC,UACA,qBAAC,QAAG,WAAW,GAAG,QAAQ,cAAc,GACrC;AAAA,mBACC,oBAAC,QAAG,WAAU,8FACX,mBACH;AAAA,QAED,QAAQ,IAAI,CAAC,UAAU;AACtB,cAAI,MAAM,SAAS,WAAW;AAC5B,mBAAO,oBAAC,QAAmB,WAAU,0CAArB,MAAM,GAAsD;AAAA,UAC9E;AACA,gBAAM,UACJ,qBAAC,UAAK,WAAU,kCACb;AAAA,kBAAM;AAAA,YACN,MAAM;AAAA,YACN,MAAM,YAAY,oBAAC,UAAK,WAAU,gBAAgB,gBAAM,UAAS;AAAA,aACpE;AAEF,iBACE,oBAAC,QACE,gBAAM,SAAS,SACd,oBAAC,QAAK,IAAI,MAAM,IAAI,SAAS,OAAO,WAAW,wBAC5C,mBACH,IAEA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM;AACb,sBAAM,SAAS;AACf,sBAAM;AAAA,cACR;AAAA,cACA,WAAW;AAAA,cAEV;AAAA;AAAA,UACH,KAfK,MAAM,GAiBf;AAAA,QAEJ,CAAC;AAAA,SACH;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/shell/topbar-controls.d.ts

@@ -8,8 +8,9 @@ import 'zustand';
 /** Shared square icon-button styling for top-bar triggers, so app-owned controls
  *  (account/feedback menus) line up with the shared ones. */
 declare const TOPBAR_TRIGGER_CLASS = "size-9 rounded-md flex items-center justify-center text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)]";
-/** Shared row styling for the top-bar hover-menu items. */
-declare const TOPBAR_MENU_ITEM_CLASS = "flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-left text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]";
+/** Shared row styling for the top-bar hover-menu items. `text-start`, so a label that
+ *  wraps aligns to the reading edge in RTL too. */
+declare const TOPBAR_MENU_ITEM_CLASS = "flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-start text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]";
 /** Sun/Moon toggle for the light/dark theme. Controlled: the app owns the mode. */
 declare function ThemeToggle({ mode, onToggle, ariaLabel, title, className, }: {
     mode: ThemeMode;
@@ -46,12 +47,15 @@ interface LanguageOption {
  *  (Keksdose feedback #121). The flag also shows which language is currently on,
  *  which no icon can, and costs the same width on a crowded mobile bar. A globe
  *  covers the case where `current` matches nothing in `options`. */
-declare function LanguageMenu({ options, current, onChange, ariaLabel, }: {
+declare function LanguageMenu({ options, current, onChange, ariaLabel, heading, }: {
     options: LanguageOption[];
     current: string | undefined;
     onChange: (code: string) => void;
     /** Default: `topBar.language` from the {@link UiKitProvider}, else English. */
     ariaLabel?: string;
+    /** Optional small heading row above the list — as on `TopBarActionMenu`,
+     *  `OptionSwitcherMenu` and `PaletteMenu`. */
+    heading?: string;
 }): react.JSX.Element;
 
 export { LanguageMenu, type LanguageOption, PaletteMenu, TOPBAR_MENU_ITEM_CLASS, TOPBAR_TRIGGER_CLASS, ThemeToggle };