@flanksource/clicky-ui 0.3.17 → 0.3.18

package/dist/layout/AppShell.js

@@ -14,6 +14,34 @@ function readStored(key) {
   if (!key || typeof window === "undefined") return null;
   return window.localStorage.getItem(key);
 }
+const DEFAULT_GROUP_COLLAPSE_KEY = "clicky-ui:app-shell:groups";
+function readGroupState(storageKey) {
+  if (typeof window === "undefined") return {};
+  try {
+    const raw = window.localStorage.getItem(storageKey);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    return parsed && typeof parsed === "object" ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+function useGroupCollapsed(storageKey) {
+  const [state, setState] = useState(
+    () => readGroupState(storageKey)
+  );
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    try {
+      window.localStorage.setItem(storageKey, JSON.stringify(state));
+    } catch {
+    }
+  }, [state, storageKey]);
+  return {
+    isCollapsed: (key, fallback) => state[key] ?? fallback,
+    toggle: (key, fallback) => setState((prev) => ({ ...prev, [key]: !(prev[key] ?? fallback) }))
+  };
+}
 function AppShell(props) {
   const {
     brand,
@@ -30,6 +58,7 @@ function AppShell(props) {
     collapsible = true,
     defaultCollapsed = false,
     collapsedStorageKey,
+    groupCollapsedStorageKey,
     sidebarWidth = 240,
     collapsedWidth = 56,
     mobileSidebarLabel = "Navigation",
@@ -57,8 +86,10 @@ function AppShell(props) {
       window.localStorage.setItem(collapsedStorageKey, String(collapsed));
   }, [collapsed, collapsedStorageKey]);
   useEscapeLayer(mobileSidebarOpen, () => setMobileSidebarOpen(false));
+  const groupState = useGroupCollapsed(
+    groupCollapsedStorageKey ?? DEFAULT_GROUP_COLLAPSE_KEY
+  );
   const railWidth = collapsed ? collapsedWidth : sidebarWidth;
-  const compactActions = mobileActions ?? actions;
   const hasTopBar = !hasSidebar && brand !== void 0 || nav !== void 0 || search !== void 0 || actions !== void 0 || mobileActions !== void 0 || toolbar !== void 0;
   const hasMobileHeader = hasSidebar;
   const hasBodyHeader = bodyHeader !== void 0 || bodyActions !== void 0;
@@ -68,6 +99,7 @@ function AppShell(props) {
     {
       sections: navSections,
       collapsed: collapsedValue,
+      groupState,
       ...onNavigate ? { onNavigate } : {}
     }
   );
@@ -143,56 +175,71 @@ function AppShell(props) {
                   "data-slot": "app-shell-header",
                   className: "shrink-0 border-b border-border bg-card",
                   children: [
-                    hasMobileHeader && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-density-2 px-density-3 py-density-2 md:hidden", children: [
-                      /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          type: "button",
-                          "aria-label": `Open ${mobileSidebarLabel}`,
-                          title: mobileSidebarLabel,
-                          className: "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-background text-foreground transition-colors hover:bg-accent",
-                          onClick: () => setMobileSidebarOpen(true),
-                          children: /* @__PURE__ */ jsx(Icon, { icon: UiMenu, className: "h-4 w-4" })
-                        }
-                      ),
-                      brand && /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-density-2", children: brand }),
-                      compactActions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex min-w-0 shrink items-center justify-end gap-density-2", children: compactActions }),
-                      search !== void 0 && /* @__PURE__ */ jsx("div", { className: "basis-full min-w-0", children: search }),
-                      nav && /* @__PURE__ */ jsx("div", { className: "basis-full min-w-0 overflow-x-auto", children: nav })
-                    ] }),
                     /* @__PURE__ */ jsxs(
                       "div",
                       {
                         className: cn(
-                          "hidden h-14 items-center gap-density-3 px-density-4 md:flex",
-                          !hasSidebar && "flex",
+                          hasSidebar ? "flex flex-wrap items-center gap-density-2 px-density-3 py-density-2 md:h-14 md:flex-nowrap md:gap-density-3 md:px-density-4 md:py-0" : "flex h-14 items-center gap-density-3 px-density-4",
                           headerClassName
                         ),
                         children: [
-                          !hasSidebar && brand && /* @__PURE__ */ jsx(
+                          hasSidebar && /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              "aria-label": `Open ${mobileSidebarLabel}`,
+                              title: mobileSidebarLabel,
+                              className: "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-background text-foreground transition-colors hover:bg-accent md:hidden",
+                              onClick: () => setMobileSidebarOpen(true),
+                              children: /* @__PURE__ */ jsx(Icon, { icon: UiMenu, className: "h-4 w-4" })
+                            }
+                          ),
+                          brand && /* @__PURE__ */ jsx(
                             "div",
                             {
                               "data-slot": "app-shell-brand",
-                              className: "flex shrink-0 items-center gap-density-2",
+                              className: cn(
+                                "min-w-0 items-center gap-density-2",
+                                hasSidebar ? "flex flex-1 md:hidden" : "flex shrink-0"
+                              ),
                               children: brand
                             }
                           ),
-                          nav && /* @__PURE__ */ jsx("div", { "data-slot": "app-shell-nav", className: "flex shrink-0 items-center", children: nav }),
+                          nav && /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              "data-slot": "app-shell-nav",
+                              className: cn(
+                                "flex min-w-0 items-center",
+                                hasSidebar && "order-3 basis-full overflow-x-auto md:order-none md:basis-auto md:overflow-visible"
+                              ),
+                              children: nav
+                            }
+                          ),
                           search !== void 0 && /* @__PURE__ */ jsx(
                             "div",
                             {
                               "data-slot": "app-shell-search",
-                              className: "flex min-w-0 flex-1 justify-center",
+                              className: cn(
+                                "flex min-w-0 flex-1 justify-center",
+                                hasSidebar && "order-2 basis-full md:order-none md:basis-auto md:flex-1"
+                              ),
                               children: /* @__PURE__ */ jsx("div", { className: "w-full", style: { maxWidth: searchMaxWidth }, children: search })
                             }
                           ),
-                          search === void 0 && /* @__PURE__ */ jsx("div", { className: "flex-1" }),
-                          actions && /* @__PURE__ */ jsx(
+                          search === void 0 && /* @__PURE__ */ jsx("div", { className: cn("flex-1", hasSidebar && "hidden md:block") }),
+                          (actions !== void 0 || hasSidebar && mobileActions !== void 0) && /* @__PURE__ */ jsx(
                             "div",
                             {
                               "data-slot": "app-shell-actions",
-                              className: "flex shrink-0 items-center gap-density-2",
-                              children: actions
+                              className: cn(
+                                "flex shrink-0 items-center gap-density-2",
+                                hasSidebar && "order-1 ml-auto md:order-none md:ml-0"
+                              ),
+                              children: !hasSidebar || mobileActions === void 0 ? actions : /* @__PURE__ */ jsxs(Fragment, { children: [
+                                /* @__PURE__ */ jsx("div", { className: "hidden items-center gap-density-2 md:flex", children: actions }),
+                                /* @__PURE__ */ jsx("div", { className: "flex items-center gap-density-2 md:hidden", children: mobileActions })
+                              ] })
                             }
                           )
                         ]
@@ -244,48 +291,37 @@ function AppShell(props) {
                   )
                 }
               ),
-              bodySidebar !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden md:hidden", children: [
-                  /* @__PURE__ */ jsx(
+              bodySidebar !== void 0 ? /* @__PURE__ */ jsx(
+                SplitPane,
+                {
+                  stackOnMobile: true,
+                  className: "min-h-0 flex-1",
+                  defaultSplit: bodySplit,
+                  minLeft: 12,
+                  minRight: 30,
+                  left: /* @__PURE__ */ jsx(
                     "div",
                     {
                       "data-slot": "app-shell-body-sidebar",
-                      className: "max-h-[40vh] shrink-0 overflow-y-auto border-b border-border bg-background",
+                      className: "h-full",
                       children: bodySidebar
                     }
                   ),
-                  /* @__PURE__ */ jsx(
+                  right: /* @__PURE__ */ jsx(
                     "main",
                     {
                       "data-slot": "app-shell-main",
                       className: cn(
-                        "min-h-0 min-w-0 flex-1 overflow-auto",
+                        "h-full min-h-0 min-w-0 overflow-auto",
                         contentClassName
                       ),
                       children
                     }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx(
-                  SplitPane,
-                  {
-                    className: "hidden min-h-0 flex-1 md:flex",
-                    defaultSplit: bodySplit,
-                    minLeft: 12,
-                    minRight: 30,
-                    left: /* @__PURE__ */ jsx("div", { "data-slot": "app-shell-body-sidebar", className: "h-full", children: bodySidebar }),
-                    right: /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        "data-slot": "app-shell-main",
-                        className: cn("h-full min-w-0", contentClassName),
-                        children
-                      }
-                    ),
-                    rightClass: "overflow-y-auto"
-                  }
-                )
-              ] }) : /* @__PURE__ */ jsx(
+                  ),
+                  leftClass: "max-h-[40vh] shrink-0 border-b border-border md:max-h-none md:border-b-0",
+                  rightClass: "min-h-0 flex-1 md:flex-none"
+                }
+              ) : /* @__PURE__ */ jsx(
                 "main",
                 {
                   "data-slot": "app-shell-main",

package/dist/layout/AppShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.js","sources":["../../src/layout/AppShell.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiClose, UiMenu, UiSidebar } from \"../icons\";\nimport { useEscapeLayer } from \"../overlay/modalStack\";\nimport { SplitPane } from \"./SplitPane\";\nimport { AppShellSlotOutlines } from \"./AppShell.debug\";\nimport { NavSections } from \"./AppShell.nav\";\nimport {\n  contentWidthClassName,\n  type ContentWidth,\n} from \"./content-width\";\n\n// AppShell is a sidebar-first application shell. The full-height DARK nav rail\n// owns the brand + collapse toggle and renders grouped nav sections; the top bar\n// (search, actions) sits to the RIGHT of the rail — there is no full-width top\n// bar when a rail is present. With no rail, the top bar spans full width. The\n// body carries a fixed bodyHeader + bodyActions row over an optional\n// bodySidebar | body-main split (body-main scrolls; bodySidebar — e.g. a tree —\n// scrolls independently via a resizable SplitPane).\n\nexport type AppShellNavItem = {\n  /** Stable key; also the React key. */\n  key: string;\n  /** Visible label (hidden when the rail is collapsed). */\n  label: ReactNode;\n  /** Leading icon (icon name or component). */\n  icon?: string | StaticIconComponent;\n  /** Highlights the item as the current location. */\n  active?: boolean;\n  /** Routing destination; rendered as an anchor via the RouterAdapter. */\n  to: string;\n  /** Opens `to` in a new tab. */\n  external?: boolean;\n  /** Trailing adornment (count, status dot). */\n  badge?: ReactNode;\n};\n\nexport type AppShellNavSection = {\n  /** Section heading; collapses to a divider when the rail is collapsed. */\n  label?: string;\n  items: AppShellNavItem[];\n};\n\nexport type AppShellProps = {\n  // ── Top bar (right of the rail; full width when no rail) ─\n  /** Brand mark / wordmark. Shown in the rail header when a rail is present, else in the top bar. */\n  brand?: ReactNode;\n  /** Inline primary nav (e.g. tabs) shown after the brand in the top bar. */\n  nav?: ReactNode;\n  /** Centered search slot; grows to fill and is width-capped. */\n  search?: ReactNode;\n  /** Right-aligned cluster (icon buttons, settings/org picker, …). */\n  actions?: ReactNode;\n  /** Compact action cluster used in the mobile header. Defaults to `actions`. */\n  mobileActions?: ReactNode;\n  /** Optional second top-bar row for filters / bulk actions. */\n  toolbar?: ReactNode;\n  /** Max width of the centered search slot. Defaults to 28rem. */\n  searchMaxWidth?: string | number;\n\n  // ── Left nav rail (dark, collapsible, fixed width) ───────\n  /** Declarative nav sections rendered into the rail (collapse-aware). */\n  navSections?: AppShellNavSection[];\n  /** Custom sidebar content; receives the collapsed flag. Overrides navSections. */\n  sidebar?: ReactNode | ((collapsed: boolean) => ReactNode);\n  /** Pinned below the rail header (e.g. a context switcher). */\n  sidebarHeader?: ReactNode;\n  /** Pinned to the bottom of the rail (version, account). */\n  sidebarFooter?: ReactNode;\n  /** Show the collapse toggle. Defaults to true when a rail is present. */\n  collapsible?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultCollapsed?: boolean;\n  /** localStorage key persisting the collapsed state. */\n  collapsedStorageKey?: string;\n  /** Expanded rail width in px. Defaults to 240. */\n  sidebarWidth?: number;\n  /** Collapsed rail width in px. Defaults to 56. */\n  collapsedWidth?: number;\n  /** Accessible label for the mobile navigation drawer. Defaults to \"Navigation\". */\n  mobileSidebarLabel?: string;\n\n  // ── Body ─────────────────────────────────────────────────\n  /** Fixed header row, left side (breadcrumb, title, tabs). */\n  bodyHeader?: ReactNode;\n  /** Fixed header row, right side (entity actions) — same row as bodyHeader. */\n  bodyActions?: ReactNode;\n  /** Optional independent-scroll pane (e.g. a tree). Renders a SplitPane vs body-main. */\n  bodySidebar?: ReactNode;\n  /** bodySidebar width as a percent when present. Defaults to 24. */\n  bodySplit?: number;\n  /** Main content (body-main); fills the remaining space and scrolls. */\n  children: ReactNode;\n  /** Centers content at responsive wide breakpoints, or allows it to fill the workspace. */\n  contentWidth?: ContentWidth;\n\n  /**\n   * Outlines every slot in its own colour and labels it with its `data-slot`\n   * name — a layout-debugging aid for working out which region owns a given\n   * area or scrollbar. Uses `outline`, so enabling it does not shift layout.\n   */\n  debugSlots?: boolean;\n\n  className?: string;\n  headerClassName?: string;\n  toolbarClassName?: string;\n  sidebarClassName?: string;\n  bodyHeaderClassName?: string;\n  contentClassName?: string;\n};\n\nfunction readStored(key: string | undefined): string | null {\n  if (!key || typeof window === \"undefined\") return null;\n  return window.localStorage.getItem(key);\n}\n\nexport function AppShell(props: AppShellProps) {\n  const {\n    brand,\n    nav,\n    search,\n    actions,\n    mobileActions,\n    toolbar,\n    searchMaxWidth = \"28rem\",\n    navSections,\n    sidebar,\n    sidebarHeader,\n    sidebarFooter,\n    collapsible = true,\n    defaultCollapsed = false,\n    collapsedStorageKey,\n    sidebarWidth = 240,\n    collapsedWidth = 56,\n    mobileSidebarLabel = \"Navigation\",\n    bodyHeader,\n    bodyActions,\n    bodySidebar,\n    bodySplit = 24,\n    children,\n    contentWidth = \"contained\",\n    debugSlots = false,\n    className,\n    headerClassName,\n    toolbarClassName,\n    sidebarClassName,\n    bodyHeaderClassName,\n    contentClassName,\n  } = props;\n\n  const hasSidebar = sidebar !== undefined || (navSections?.length ?? 0) > 0;\n  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);\n\n  const [collapsed, setCollapsed] = useState(\n    () =>\n      readStored(collapsedStorageKey) === \"true\" ||\n      (readStored(collapsedStorageKey) === null && defaultCollapsed),\n  );\n\n  useEffect(() => {\n    if (collapsedStorageKey && typeof window !== \"undefined\")\n      window.localStorage.setItem(collapsedStorageKey, String(collapsed));\n  }, [collapsed, collapsedStorageKey]);\n\n  useEscapeLayer(mobileSidebarOpen, () => setMobileSidebarOpen(false));\n\n  const railWidth = collapsed ? collapsedWidth : sidebarWidth;\n  const compactActions = mobileActions ?? actions;\n  const hasTopBar =\n    (!hasSidebar && brand !== undefined) ||\n    nav !== undefined ||\n    search !== undefined ||\n    actions !== undefined ||\n    mobileActions !== undefined ||\n    toolbar !== undefined;\n  const hasMobileHeader = hasSidebar;\n  const hasBodyHeader = bodyHeader !== undefined || bodyActions !== undefined;\n  const effectiveContentWidth =\n    bodySidebar === undefined ? contentWidth : \"full\";\n  const renderSidebarContent = (collapsedValue: boolean, onNavigate?: () => void) =>\n    typeof sidebar === \"function\"\n      ? sidebar(collapsedValue)\n      : sidebar !== undefined\n        ? sidebar\n        : navSections && (\n            <NavSections\n              sections={navSections}\n              collapsed={collapsedValue}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          );\n\n  return (\n    <div\n      className={cn(\"flex h-full min-h-0 w-full bg-background\", className)}\n      {...(debugSlots ? { \"data-debug-slots\": \"true\" } : {})}\n    >\n      {debugSlots && <AppShellSlotOutlines />}\n      {hasSidebar && (\n        <aside\n          data-slot=\"app-shell-sidebar\"\n          style={{ width: railWidth }}\n          className={cn(\n            \"hidden shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 md:flex\",\n            sidebarClassName,\n          )}\n        >\n          <div\n            className={cn(\n              \"flex h-14 shrink-0 items-center border-b border-sidebar-border\",\n              collapsed\n                ? \"justify-center px-2\"\n                : \"justify-between px-density-3\",\n            )}\n          >\n            {!collapsed && brand && (\n              <div data-slot=\"app-shell-brand\" className=\"flex min-w-0 items-center gap-2\">\n                {brand}\n              </div>\n            )}\n            {collapsible && (\n              <button\n                type=\"button\"\n                onClick={() => setCollapsed((c) => !c)}\n                aria-label={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                title={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <Icon icon={UiSidebar} className=\"h-4 w-4\" />\n              </button>\n            )}\n          </div>\n          {sidebarHeader && (\n            <div\n              data-slot=\"app-shell-sidebar-header\"\n              className=\"shrink-0 border-b border-sidebar-border px-density-3 py-density-2\"\n            >\n              {sidebarHeader}\n            </div>\n          )}\n          <div className=\"min-h-0 flex-1 overflow-y-auto py-density-2\">\n            {renderSidebarContent(collapsed)}\n          </div>\n          {sidebarFooter && (\n            <div\n              data-slot=\"app-shell-sidebar-footer\"\n              className=\"mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2\"\n            >\n              {sidebarFooter}\n            </div>\n          )}\n        </aside>\n      )}\n\n      <div\n        data-slot=\"app-shell-column\"\n        className=\"@container/app-content flex min-h-0 min-w-0 flex-1 flex-col\"\n      >\n        {(hasTopBar || hasMobileHeader) && (\n          <header\n            data-slot=\"app-shell-header\"\n            className=\"shrink-0 border-b border-border bg-card\"\n          >\n            {hasMobileHeader && (\n              <div className=\"flex flex-wrap items-center gap-density-2 px-density-3 py-density-2 md:hidden\">\n                <button\n                  type=\"button\"\n                  aria-label={`Open ${mobileSidebarLabel}`}\n                  title={mobileSidebarLabel}\n                  className=\"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-background text-foreground transition-colors hover:bg-accent\"\n                  onClick={() => setMobileSidebarOpen(true)}\n                >\n                  <Icon icon={UiMenu} className=\"h-4 w-4\" />\n                </button>\n                {brand && (\n                  <div className=\"flex min-w-0 flex-1 items-center gap-density-2\">\n                    {brand}\n                  </div>\n                )}\n                {compactActions && (\n                  <div className=\"ml-auto flex min-w-0 shrink items-center justify-end gap-density-2\">\n                    {compactActions}\n                  </div>\n                )}\n                {search !== undefined && (\n                  <div className=\"basis-full min-w-0\">\n                    {search}\n                  </div>\n                )}\n                {nav && (\n                  <div className=\"basis-full min-w-0 overflow-x-auto\">\n                    {nav}\n                  </div>\n                )}\n              </div>\n            )}\n            <div\n              className={cn(\n                \"hidden h-14 items-center gap-density-3 px-density-4 md:flex\",\n                !hasSidebar && \"flex\",\n                headerClassName,\n              )}\n            >\n              {!hasSidebar && brand && (\n                <div\n                  data-slot=\"app-shell-brand\"\n                  className=\"flex shrink-0 items-center gap-density-2\"\n                >\n                  {brand}\n                </div>\n              )}\n              {nav && (\n                <div data-slot=\"app-shell-nav\" className=\"flex shrink-0 items-center\">\n                  {nav}\n                </div>\n              )}\n              {search !== undefined && (\n                <div\n                  data-slot=\"app-shell-search\"\n                  className=\"flex min-w-0 flex-1 justify-center\"\n                >\n                  <div className=\"w-full\" style={{ maxWidth: searchMaxWidth }}>\n                    {search}\n                  </div>\n                </div>\n              )}\n              {search === undefined && <div className=\"flex-1\" />}\n              {actions && (\n                <div\n                  data-slot=\"app-shell-actions\"\n                  className=\"flex shrink-0 items-center gap-density-2\"\n                >\n                  {actions}\n                </div>\n              )}\n            </div>\n            {toolbar && (\n              <div\n                data-slot=\"app-shell-toolbar\"\n                className={cn(\n                  \"flex flex-wrap items-center gap-density-2 border-t border-border bg-muted px-density-3 py-density-2 md:px-density-4\",\n                  toolbarClassName,\n                )}\n              >\n                {toolbar}\n              </div>\n            )}\n          </header>\n        )}\n\n        {hasBodyHeader && (\n          <div\n            data-slot=\"app-shell-body-header\"\n            className={cn(\n              \"shrink-0 border-b border-border bg-card\",\n              bodyHeaderClassName,\n            )}\n          >\n            <div\n              data-slot=\"app-shell-body-header-content\"\n              data-content-width={effectiveContentWidth}\n              className={cn(\n                \"flex flex-col items-stretch gap-density-2 px-density-3 py-density-2 md:flex-row md:items-start md:justify-between md:gap-density-3 md:px-density-4\",\n                contentWidthClassName(effectiveContentWidth),\n              )}\n            >\n              <div className=\"min-w-0 flex-1\">{bodyHeader}</div>\n              {bodyActions && (\n                <div\n                  data-slot=\"app-shell-body-actions\"\n                  className=\"flex shrink-0 flex-wrap items-center gap-density-2\"\n                >\n                  {bodyActions}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n\n        {bodySidebar !== undefined ? (\n          <>\n            <div className=\"flex min-h-0 flex-1 flex-col overflow-hidden md:hidden\">\n              <div\n                data-slot=\"app-shell-body-sidebar\"\n                className=\"max-h-[40vh] shrink-0 overflow-y-auto border-b border-border bg-background\"\n              >\n                {bodySidebar}\n              </div>\n              <main\n                data-slot=\"app-shell-main\"\n                className={cn(\n                  \"min-h-0 min-w-0 flex-1 overflow-auto\",\n                  contentClassName,\n                )}\n              >\n                {children}\n              </main>\n            </div>\n            <SplitPane\n              className=\"hidden min-h-0 flex-1 md:flex\"\n              defaultSplit={bodySplit}\n              minLeft={12}\n              minRight={30}\n              left={<div data-slot=\"app-shell-body-sidebar\" className=\"h-full\">{bodySidebar}</div>}\n              right={\n                <div\n                  data-slot=\"app-shell-main\"\n                  className={cn(\"h-full min-w-0\", contentClassName)}\n                >\n                  {children}\n                </div>\n              }\n              rightClass=\"overflow-y-auto\"\n            />\n          </>\n        ) : (\n          <main\n            data-slot=\"app-shell-main\"\n            className={cn(\n              \"min-h-0 min-w-0 flex-1 overflow-auto\",\n              contentClassName,\n            )}\n          >\n            <div\n              data-slot=\"app-shell-content\"\n              data-content-width={contentWidth}\n              className={cn(contentWidthClassName(contentWidth), \"h-full\")}\n            >\n              {children}\n            </div>\n          </main>\n        )}\n      </div>\n      {hasSidebar && mobileSidebarOpen && (\n        <div\n          className=\"fixed inset-0 z-50 md:hidden\"\n          role=\"presentation\"\n          onClick={() => setMobileSidebarOpen(false)}\n        >\n          <div className=\"absolute inset-0 bg-black/40\" />\n          <aside\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={mobileSidebarLabel}\n            className={cn(\n              \"relative z-10 flex h-full w-[min(20rem,85vw)] flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground shadow-xl\",\n              sidebarClassName,\n            )}\n            onClick={(event) => event.stopPropagation()}\n          >\n            <div className=\"flex h-14 shrink-0 items-center justify-between border-b border-sidebar-border px-density-3\">\n              {brand && <div className=\"flex min-w-0 items-center gap-2\">{brand}</div>}\n              <button\n                type=\"button\"\n                aria-label={`Close ${mobileSidebarLabel}`}\n                title=\"Close\"\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                onClick={() => setMobileSidebarOpen(false)}\n              >\n                <Icon icon={UiClose} className=\"h-4 w-4\" />\n              </button>\n            </div>\n            {sidebarHeader && (\n              <div className=\"shrink-0 border-b border-sidebar-border px-density-3 py-density-2\">\n                {sidebarHeader}\n              </div>\n            )}\n            <div className=\"min-h-0 flex-1 overflow-y-auto py-density-2\">\n              {renderSidebarContent(false, () => setMobileSidebarOpen(false))}\n            </div>\n            {sidebarFooter && (\n              <div className=\"mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2\">\n                {sidebarFooter}\n              </div>\n            )}\n          </aside>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AppShell.js","sources":["../../src/layout/AppShell.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiClose, UiMenu, UiSidebar } from \"../icons\";\nimport { useEscapeLayer } from \"../overlay/modalStack\";\nimport { SplitPane } from \"./SplitPane\";\nimport { AppShellSlotOutlines } from \"./AppShell.debug\";\nimport { NavSections, type GroupState } from \"./AppShell.nav\";\nimport {\n  contentWidthClassName,\n  type ContentWidth,\n} from \"./content-width\";\n\n// AppShell is a sidebar-first application shell. The full-height DARK nav rail\n// owns the brand + collapse toggle and renders grouped nav sections; the top bar\n// (search, actions) sits to the RIGHT of the rail — there is no full-width top\n// bar when a rail is present. With no rail, the top bar spans full width. The\n// body carries a fixed bodyHeader + bodyActions row over an optional\n// bodySidebar | body-main split (body-main scrolls; bodySidebar — e.g. a tree —\n// scrolls independently via a resizable SplitPane).\n\nexport type AppShellNavItem = {\n  /** Stable key; also the React key. */\n  key: string;\n  /** Visible label (hidden when the rail is collapsed). */\n  label: ReactNode;\n  /** Leading icon (icon name or component). */\n  icon?: string | StaticIconComponent;\n  /** Highlights the item as the current location. */\n  active?: boolean;\n  /** Routing destination; rendered as an anchor via the RouterAdapter. */\n  to: string;\n  /** Opens `to` in a new tab. */\n  external?: boolean;\n  /** Trailing adornment (count, status dot). */\n  badge?: ReactNode;\n};\n\nexport type AppShellNavGroup = {\n  /** Stable key; also the key its collapsed state persists under. */\n  key: string;\n  /** Group heading rendered on the toggle row. */\n  label: string;\n  /** Leading icon (icon name or component). */\n  icon?: string | StaticIconComponent;\n  /** Folded on first render until the user toggles it. */\n  defaultCollapsed?: boolean;\n  /**\n   * Keeps the group open regardless of stored state, so a deep-linked\n   * destination can never hide under a folder the user collapsed earlier.\n   * Mirrors `Tree.revealSelected`: set it on the active item's ancestors.\n   */\n  forceExpanded?: boolean;\n  items: AppShellNavItem[];\n  /**\n   * Nested sub-groups, rendered after `items` at one further indent. Groups\n   * nest arbitrarily, so a backend hierarchy deeper than two levels does not\n   * have to be flattened to fit the rail.\n   */\n  groups?: AppShellNavGroup[];\n  /**\n   * Makes the group's own heading row a destination as well as a disclosure:\n   * the label becomes a nav link and the chevron sits beside it as a separate\n   * control. Needed wherever a node is both a folder and a leaf — e.g. a\n   * profile named `jms` that is runnable *and* the parent of `jms.incoming`.\n   */\n  item?: AppShellNavItem;\n};\n\nexport type AppShellNavSection = {\n  /** Section heading; collapses to a divider when the rail is collapsed. */\n  label?: string;\n  items?: AppShellNavItem[];\n  /** Collapsible groups rendered after the flat items. High-cardinality\n   *  clusters (provider surfaces, per-ledger journals) belong here so they can\n   *  be folded away; a collapsed rail flattens them back to plain items. */\n  groups?: AppShellNavGroup[];\n  /**\n   * How the groups read.\n   *\n   * `\"list\"` (the default) styles each group heading as a small uppercase\n   * cluster label — right for a handful of named clusters under one section.\n   *\n   * `\"tree\"` styles headings as ordinary nav rows, because in a tree a folder\n   * sits at the same level as its sibling destinations: a group carrying an\n   * `item` renders as a link either way, so an uppercase heading beside it\n   * would make two nodes of the same kind look like different things.\n   */\n  variant?: \"list\" | \"tree\";\n};\n\nexport type AppShellProps = {\n  // ── Top bar (right of the rail; full width when no rail) ─\n  /** Brand mark / wordmark. Shown in the rail header when a rail is present, else in the top bar. */\n  brand?: ReactNode;\n  /** Inline primary nav (e.g. tabs) shown after the brand in the top bar. */\n  nav?: ReactNode;\n  /** Centered search slot; grows to fill and is width-capped. */\n  search?: ReactNode;\n  /** Right-aligned cluster (icon buttons, settings/org picker, …). */\n  actions?: ReactNode;\n  /** Compact action cluster used in the mobile header. Defaults to `actions`. */\n  mobileActions?: ReactNode;\n  /** Optional second top-bar row for filters / bulk actions. */\n  toolbar?: ReactNode;\n  /** Max width of the centered search slot. Defaults to 28rem. */\n  searchMaxWidth?: string | number;\n\n  // ── Left nav rail (dark, collapsible, fixed width) ───────\n  /** Declarative nav sections rendered into the rail (collapse-aware). */\n  navSections?: AppShellNavSection[];\n  /** Custom sidebar content; receives the collapsed flag. Overrides navSections. */\n  sidebar?: ReactNode | ((collapsed: boolean) => ReactNode);\n  /** Pinned below the rail header (e.g. a context switcher). */\n  sidebarHeader?: ReactNode;\n  /** Pinned to the bottom of the rail (version, account). */\n  sidebarFooter?: ReactNode;\n  /** Show the collapse toggle. Defaults to true when a rail is present. */\n  collapsible?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultCollapsed?: boolean;\n  /** localStorage key persisting the collapsed state. */\n  collapsedStorageKey?: string;\n  /** localStorage key persisting per-group collapsed state. */\n  groupCollapsedStorageKey?: string;\n  /** Expanded rail width in px. Defaults to 240. */\n  sidebarWidth?: number;\n  /** Collapsed rail width in px. Defaults to 56. */\n  collapsedWidth?: number;\n  /** Accessible label for the mobile navigation drawer. Defaults to \"Navigation\". */\n  mobileSidebarLabel?: string;\n\n  // ── Body ─────────────────────────────────────────────────\n  /** Fixed header row, left side (breadcrumb, title, tabs). */\n  bodyHeader?: ReactNode;\n  /** Fixed header row, right side (entity actions) — same row as bodyHeader. */\n  bodyActions?: ReactNode;\n  /** Optional independent-scroll pane (e.g. a tree). Renders a SplitPane vs body-main. */\n  bodySidebar?: ReactNode;\n  /** bodySidebar width as a percent when present. Defaults to 24. */\n  bodySplit?: number;\n  /** Main content (body-main); fills the remaining space and scrolls. */\n  children: ReactNode;\n  /** Centers content at responsive wide breakpoints, or allows it to fill the workspace. */\n  contentWidth?: ContentWidth;\n\n  /**\n   * Outlines every slot in its own colour and labels it with its `data-slot`\n   * name — a layout-debugging aid for working out which region owns a given\n   * area or scrollbar. Uses `outline`, so enabling it does not shift layout.\n   */\n  debugSlots?: boolean;\n\n  className?: string;\n  headerClassName?: string;\n  toolbarClassName?: string;\n  sidebarClassName?: string;\n  bodyHeaderClassName?: string;\n  contentClassName?: string;\n};\n\nfunction readStored(key: string | undefined): string | null {\n  if (!key || typeof window === \"undefined\") return null;\n  return window.localStorage.getItem(key);\n}\n\nconst DEFAULT_GROUP_COLLAPSE_KEY = \"clicky-ui:app-shell:groups\";\n\nfunction readGroupState(storageKey: string): Record<string, boolean> {\n  if (typeof window === \"undefined\") return {};\n  try {\n    const raw = window.localStorage.getItem(storageKey);\n    if (!raw) return {};\n    const parsed = JSON.parse(raw);\n    return parsed && typeof parsed === \"object\"\n      ? (parsed as Record<string, boolean>)\n      : {};\n  } catch {\n    return {};\n  }\n}\n\n// Lives here rather than in AppShell.nav so a single instance can be shared by\n// both NavSections renders (rail + mobile drawer).\nfunction useGroupCollapsed(storageKey: string): GroupState {\n  const [state, setState] = useState<Record<string, boolean>>(() =>\n    readGroupState(storageKey),\n  );\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    try {\n      window.localStorage.setItem(storageKey, JSON.stringify(state));\n    } catch {\n      // Rail state is a UX nicety; private-mode storage failures are safe to swallow.\n    }\n  }, [state, storageKey]);\n  return {\n    isCollapsed: (key, fallback) => state[key] ?? fallback,\n    toggle: (key, fallback) =>\n      setState((prev) => ({ ...prev, [key]: !(prev[key] ?? fallback) })),\n  };\n}\n\nexport function AppShell(props: AppShellProps) {\n  const {\n    brand,\n    nav,\n    search,\n    actions,\n    mobileActions,\n    toolbar,\n    searchMaxWidth = \"28rem\",\n    navSections,\n    sidebar,\n    sidebarHeader,\n    sidebarFooter,\n    collapsible = true,\n    defaultCollapsed = false,\n    collapsedStorageKey,\n    groupCollapsedStorageKey,\n    sidebarWidth = 240,\n    collapsedWidth = 56,\n    mobileSidebarLabel = \"Navigation\",\n    bodyHeader,\n    bodyActions,\n    bodySidebar,\n    bodySplit = 24,\n    children,\n    contentWidth = \"contained\",\n    debugSlots = false,\n    className,\n    headerClassName,\n    toolbarClassName,\n    sidebarClassName,\n    bodyHeaderClassName,\n    contentClassName,\n  } = props;\n\n  const hasSidebar = sidebar !== undefined || (navSections?.length ?? 0) > 0;\n  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);\n\n  const [collapsed, setCollapsed] = useState(\n    () =>\n      readStored(collapsedStorageKey) === \"true\" ||\n      (readStored(collapsedStorageKey) === null && defaultCollapsed),\n  );\n\n  useEffect(() => {\n    if (collapsedStorageKey && typeof window !== \"undefined\")\n      window.localStorage.setItem(collapsedStorageKey, String(collapsed));\n  }, [collapsed, collapsedStorageKey]);\n\n  useEscapeLayer(mobileSidebarOpen, () => setMobileSidebarOpen(false));\n\n  // One instance for the rail AND the mobile drawer: both render NavSections,\n  // and per-render state behind a shared storage key would desync.\n  const groupState = useGroupCollapsed(\n    groupCollapsedStorageKey ?? DEFAULT_GROUP_COLLAPSE_KEY,\n  );\n\n  const railWidth = collapsed ? collapsedWidth : sidebarWidth;\n  const hasTopBar =\n    (!hasSidebar && brand !== undefined) ||\n    nav !== undefined ||\n    search !== undefined ||\n    actions !== undefined ||\n    mobileActions !== undefined ||\n    toolbar !== undefined;\n  const hasMobileHeader = hasSidebar;\n  const hasBodyHeader = bodyHeader !== undefined || bodyActions !== undefined;\n  const effectiveContentWidth =\n    bodySidebar === undefined ? contentWidth : \"full\";\n  const renderSidebarContent = (collapsedValue: boolean, onNavigate?: () => void) =>\n    typeof sidebar === \"function\"\n      ? sidebar(collapsedValue)\n      : sidebar !== undefined\n        ? sidebar\n        : navSections && (\n            <NavSections\n              sections={navSections}\n              collapsed={collapsedValue}\n              groupState={groupState}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          );\n\n  return (\n    <div\n      className={cn(\"flex h-full min-h-0 w-full bg-background\", className)}\n      {...(debugSlots ? { \"data-debug-slots\": \"true\" } : {})}\n    >\n      {debugSlots && <AppShellSlotOutlines />}\n      {hasSidebar && (\n        <aside\n          data-slot=\"app-shell-sidebar\"\n          style={{ width: railWidth }}\n          className={cn(\n            \"hidden shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 md:flex\",\n            sidebarClassName,\n          )}\n        >\n          <div\n            className={cn(\n              \"flex h-14 shrink-0 items-center border-b border-sidebar-border\",\n              collapsed\n                ? \"justify-center px-2\"\n                : \"justify-between px-density-3\",\n            )}\n          >\n            {!collapsed && brand && (\n              <div data-slot=\"app-shell-brand\" className=\"flex min-w-0 items-center gap-2\">\n                {brand}\n              </div>\n            )}\n            {collapsible && (\n              <button\n                type=\"button\"\n                onClick={() => setCollapsed((c) => !c)}\n                aria-label={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                title={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <Icon icon={UiSidebar} className=\"h-4 w-4\" />\n              </button>\n            )}\n          </div>\n          {sidebarHeader && (\n            <div\n              data-slot=\"app-shell-sidebar-header\"\n              className=\"shrink-0 border-b border-sidebar-border px-density-3 py-density-2\"\n            >\n              {sidebarHeader}\n            </div>\n          )}\n          <div className=\"min-h-0 flex-1 overflow-y-auto py-density-2\">\n            {renderSidebarContent(collapsed)}\n          </div>\n          {sidebarFooter && (\n            <div\n              data-slot=\"app-shell-sidebar-footer\"\n              className=\"mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2\"\n            >\n              {sidebarFooter}\n            </div>\n          )}\n        </aside>\n      )}\n\n      <div\n        data-slot=\"app-shell-column\"\n        className=\"@container/app-content flex min-h-0 min-w-0 flex-1 flex-col\"\n      >\n        {(hasTopBar || hasMobileHeader) && (\n          <header\n            data-slot=\"app-shell-header\"\n            className=\"shrink-0 border-b border-border bg-card\"\n          >\n            <div\n              className={cn(\n                hasSidebar\n                  ? \"flex flex-wrap items-center gap-density-2 px-density-3 py-density-2 md:h-14 md:flex-nowrap md:gap-density-3 md:px-density-4 md:py-0\"\n                  : \"flex h-14 items-center gap-density-3 px-density-4\",\n                headerClassName,\n              )}\n            >\n              {hasSidebar && (\n                <button\n                  type=\"button\"\n                  aria-label={`Open ${mobileSidebarLabel}`}\n                  title={mobileSidebarLabel}\n                  className=\"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-background text-foreground transition-colors hover:bg-accent md:hidden\"\n                  onClick={() => setMobileSidebarOpen(true)}\n                >\n                  <Icon icon={UiMenu} className=\"h-4 w-4\" />\n                </button>\n              )}\n              {brand && (\n                <div\n                  data-slot=\"app-shell-brand\"\n                  className={cn(\n                    \"min-w-0 items-center gap-density-2\",\n                    hasSidebar ? \"flex flex-1 md:hidden\" : \"flex shrink-0\",\n                  )}\n                >\n                  {brand}\n                </div>\n              )}\n              {nav && (\n                <div\n                  data-slot=\"app-shell-nav\"\n                  className={cn(\n                    \"flex min-w-0 items-center\",\n                    hasSidebar &&\n                      \"order-3 basis-full overflow-x-auto md:order-none md:basis-auto md:overflow-visible\",\n                  )}\n                >\n                  {nav}\n                </div>\n              )}\n              {search !== undefined && (\n                <div\n                  data-slot=\"app-shell-search\"\n                  className={cn(\n                    \"flex min-w-0 flex-1 justify-center\",\n                    hasSidebar &&\n                      \"order-2 basis-full md:order-none md:basis-auto md:flex-1\",\n                  )}\n                >\n                  <div className=\"w-full\" style={{ maxWidth: searchMaxWidth }}>\n                    {search}\n                  </div>\n                </div>\n              )}\n              {search === undefined && (\n                <div className={cn(\"flex-1\", hasSidebar && \"hidden md:block\")} />\n              )}\n              {(actions !== undefined || (hasSidebar && mobileActions !== undefined)) && (\n                <div\n                  data-slot=\"app-shell-actions\"\n                  className={cn(\n                    \"flex shrink-0 items-center gap-density-2\",\n                    hasSidebar && \"order-1 ml-auto md:order-none md:ml-0\",\n                  )}\n                >\n                  {!hasSidebar || mobileActions === undefined ? (\n                    actions\n                  ) : (\n                    <>\n                      <div className=\"hidden items-center gap-density-2 md:flex\">\n                        {actions}\n                      </div>\n                      <div className=\"flex items-center gap-density-2 md:hidden\">\n                        {mobileActions}\n                      </div>\n                    </>\n                  )}\n                </div>\n              )}\n            </div>\n            {toolbar && (\n              <div\n                data-slot=\"app-shell-toolbar\"\n                className={cn(\n                  \"flex flex-wrap items-center gap-density-2 border-t border-border bg-muted px-density-3 py-density-2 md:px-density-4\",\n                  toolbarClassName,\n                )}\n              >\n                {toolbar}\n              </div>\n            )}\n          </header>\n        )}\n\n        {hasBodyHeader && (\n          <div\n            data-slot=\"app-shell-body-header\"\n            className={cn(\n              \"shrink-0 border-b border-border bg-card\",\n              bodyHeaderClassName,\n            )}\n          >\n            <div\n              data-slot=\"app-shell-body-header-content\"\n              data-content-width={effectiveContentWidth}\n              className={cn(\n                \"flex flex-col items-stretch gap-density-2 px-density-3 py-density-2 md:flex-row md:items-start md:justify-between md:gap-density-3 md:px-density-4\",\n                contentWidthClassName(effectiveContentWidth),\n              )}\n            >\n              <div className=\"min-w-0 flex-1\">{bodyHeader}</div>\n              {bodyActions && (\n                <div\n                  data-slot=\"app-shell-body-actions\"\n                  className=\"flex shrink-0 flex-wrap items-center gap-density-2\"\n                >\n                  {bodyActions}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n\n        {bodySidebar !== undefined ? (\n          <SplitPane\n            stackOnMobile\n            className=\"min-h-0 flex-1\"\n            defaultSplit={bodySplit}\n            minLeft={12}\n            minRight={30}\n            left={\n              <div\n                data-slot=\"app-shell-body-sidebar\"\n                className=\"h-full\"\n              >\n                {bodySidebar}\n              </div>\n            }\n            right={\n              <main\n                data-slot=\"app-shell-main\"\n                className={cn(\n                  \"h-full min-h-0 min-w-0 overflow-auto\",\n                  contentClassName,\n                )}\n              >\n                {children}\n              </main>\n            }\n            leftClass=\"max-h-[40vh] shrink-0 border-b border-border md:max-h-none md:border-b-0\"\n            rightClass=\"min-h-0 flex-1 md:flex-none\"\n          />\n        ) : (\n          <main\n            data-slot=\"app-shell-main\"\n            className={cn(\n              \"min-h-0 min-w-0 flex-1 overflow-auto\",\n              contentClassName,\n            )}\n          >\n            <div\n              data-slot=\"app-shell-content\"\n              data-content-width={contentWidth}\n              className={cn(contentWidthClassName(contentWidth), \"h-full\")}\n            >\n              {children}\n            </div>\n          </main>\n        )}\n      </div>\n      {hasSidebar && mobileSidebarOpen && (\n        <div\n          className=\"fixed inset-0 z-50 md:hidden\"\n          role=\"presentation\"\n          onClick={() => setMobileSidebarOpen(false)}\n        >\n          <div className=\"absolute inset-0 bg-black/40\" />\n          <aside\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={mobileSidebarLabel}\n            className={cn(\n              \"relative z-10 flex h-full w-[min(20rem,85vw)] flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground shadow-xl\",\n              sidebarClassName,\n            )}\n            onClick={(event) => event.stopPropagation()}\n          >\n            <div className=\"flex h-14 shrink-0 items-center justify-between border-b border-sidebar-border px-density-3\">\n              {brand && <div className=\"flex min-w-0 items-center gap-2\">{brand}</div>}\n              <button\n                type=\"button\"\n                aria-label={`Close ${mobileSidebarLabel}`}\n                title=\"Close\"\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                onClick={() => setMobileSidebarOpen(false)}\n              >\n                <Icon icon={UiClose} className=\"h-4 w-4\" />\n              </button>\n            </div>\n            {sidebarHeader && (\n              <div className=\"shrink-0 border-b border-sidebar-border px-density-3 py-density-2\">\n                {sidebarHeader}\n              </div>\n            )}\n            <div className=\"min-h-0 flex-1 overflow-y-auto py-density-2\">\n              {renderSidebarContent(false, () => setMobileSidebarOpen(false))}\n            </div>\n            {sidebarFooter && (\n              <div className=\"mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2\">\n                {sidebarFooter}\n              </div>\n            )}\n          </aside>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/layout/AppShell.nav.cjs

@@ -7,6 +7,7 @@ const router = require("../rpc/router.cjs");
 function NavSections({
   sections,
   collapsed,
+  groupState,
   onNavigate
 }) {
   const { renderLink } = router.useRouter();
@@ -17,28 +18,152 @@ function NavSections({
         "flex flex-col gap-0.5",
         collapsed ? "px-2" : "px-density-2"
       ),
-      children: sections.map((section, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
+      children: sections.map((section, index) => {
+        var _a, _b;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex flex-col",
+            children: [
+              section.label && (collapsed ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1", children: section.label })),
+              (_a = section.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                NavItemRow,
+                {
+                  item,
+                  collapsed,
+                  renderLink,
+                  ...onNavigate ? { onNavigate } : {}
+                },
+                item.key
+              )),
+              (_b = section.groups) == null ? void 0 : _b.map(
+                (group) => (
+                  // A collapsed rail has no room for group headings, so the whole
+                  // subtree flattens into the icon strip rather than hiding behind
+                  // toggles the user cannot see.
+                  collapsed ? flattenGroup(group).map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                    NavItemRow,
+                    {
+                      item,
+                      collapsed: true,
+                      renderLink,
+                      ...onNavigate ? { onNavigate } : {}
+                    },
+                    item.key
+                  )) : /* @__PURE__ */ jsxRuntime.jsx(
+                    NavGroupRows,
+                    {
+                      group,
+                      variant: section.variant ?? "list",
+                      renderLink,
+                      groupState,
+                      ...onNavigate ? { onNavigate } : {}
+                    },
+                    group.key
+                  )
+                )
+              )
+            ]
+          },
+          section.label ?? `section-${index}`
+        );
+      })
+    }
+  );
+}
+function flattenGroup(group) {
+  return [
+    ...group.item ? [group.item] : [],
+    ...group.items,
+    ...(group.groups ?? []).flatMap(flattenGroup)
+  ];
+}
+function NavGroupRows({
+  group,
+  variant,
+  renderLink,
+  groupState,
+  onNavigate
+}) {
+  var _a;
+  const fallback = group.defaultCollapsed ?? false;
+  const collapsed = !group.forceExpanded && groupState.isCollapsed(group.key, fallback);
+  const toggle = () => groupState.toggle(group.key, fallback);
+  const chevron = /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-[0.65rem] opacity-60", children: collapsed ? "▸" : "▾" });
+  const groupIcon = group.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Icon.Icon,
+    {
+      ...typeof group.icon === "string" ? { name: group.icon } : { icon: group.icon }
+    }
+  ) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+    group.item ? (
+      // Folder AND leaf: the link and the disclosure are siblings. Nesting a
+      // button inside the anchor would be invalid DOM and would make the
+      // click target ambiguous.
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/nav flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+          NavItemRow,
+          {
+            item: group.item,
+            collapsed: false,
+            renderLink,
+            ...onNavigate ? { onNavigate } : {}
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: toggle,
+            "aria-expanded": !collapsed,
+            "aria-label": `${collapsed ? "Expand" : "Collapse"} ${group.label}`,
+            className: "shrink-0 rounded-md px-1.5 py-1.5 text-sidebar-foreground/55 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+            children: chevron
+          }
+        )
+      ] })
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: toggle,
+        "aria-expanded": !collapsed,
+        className: utils.cn(
+          "flex items-center gap-2.5 rounded-md px-density-2 py-1.5 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+          variant === "tree" ? "text-[13px] text-sidebar-foreground" : "text-[11px] font-semibold uppercase tracking-[0.14em] text-sidebar-foreground/55"
+        ),
+        children: [
+          groupIcon,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate text-left", children: group.label }),
+          chevron
+        ]
+      }
+    ),
+    !collapsed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-2 mt-0.5 flex flex-col gap-0.5 border-l border-sidebar-border pl-2", children: [
+      group.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+        NavItemRow,
+        {
+          item,
+          collapsed: false,
+          renderLink,
+          ...onNavigate ? { onNavigate } : {}
+        },
+        item.key
+      )),
+      (_a = group.groups) == null ? void 0 : _a.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+        NavGroupRows,
         {
-          className: "flex flex-col",
-          children: [
-            section.label && (collapsed ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1", children: section.label })),
-            section.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-              NavItemRow,
-              {
-                item,
-                collapsed,
-                renderLink,
-                ...onNavigate ? { onNavigate } : {}
-              },
-              item.key
-            ))
-          ]
+          group: child,
+          variant,
+          renderLink,
+          groupState,
+          ...onNavigate ? { onNavigate } : {}
         },
-        section.label ?? `section-${index}`
+        child.key
       ))
-    }
-  );
+    ] })
+  ] });
 }
 function NavItemRow({
   item,

package/dist/layout/AppShell.nav.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.nav.cjs","sources":["../../src/layout/AppShell.nav.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { cn } from \"../lib/utils\";\nimport type { RenderLink } from \"../rpc/EndpointList\";\nimport { useRouter } from \"../rpc/router\";\nimport type { AppShellNavItem, AppShellNavSection } from \"./AppShell\";\n\nexport function NavSections({\n  sections,\n  collapsed,\n  onNavigate,\n}: {\n  sections: AppShellNavSection[];\n  collapsed: boolean;\n  onNavigate?: () => void;\n}) {\n  const { renderLink } = useRouter();\n  return (\n    <nav\n      className={cn(\n        \"flex flex-col gap-0.5\",\n        collapsed ? \"px-2\" : \"px-density-2\",\n      )}\n    >\n      {sections.map((section, index) => (\n        <div\n          key={section.label ?? `section-${index}`}\n          className=\"flex flex-col\"\n        >\n          {section.label &&\n            (collapsed ? (\n              <div className=\"mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1\" />\n            ) : (\n              <div className=\"mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1\">\n                {section.label}\n              </div>\n            ))}\n          {section.items.map((item) => (\n            <NavItemRow\n              key={item.key}\n              item={item}\n              collapsed={collapsed}\n              renderLink={renderLink}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))}\n        </div>\n      ))}\n    </nav>\n  );\n}\n\nfunction NavItemRow({\n  item,\n  collapsed,\n  renderLink,\n  onNavigate,\n}: {\n  item: AppShellNavItem;\n  collapsed: boolean;\n  renderLink: RenderLink;\n  onNavigate?: () => void;\n}) {\n  const className = cn(\n    \"flex w-full items-center gap-2.5 rounded-md px-density-2 py-1.5 text-left text-[13px] text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n    collapsed && \"justify-center px-0\",\n    item.active && \"bg-sidebar-accent font-medium text-sidebar-primary\",\n  );\n  const children: ReactNode = (\n    <>\n      {item.icon && (\n        <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n          <Icon\n            {...(typeof item.icon === \"string\"\n              ? { name: item.icon }\n              : { icon: item.icon })}\n          />\n        </span>\n      )}\n      {!collapsed && <span className=\"flex-1 truncate\">{item.label}</span>}\n      {!collapsed && item.badge}\n    </>\n  );\n  const title =\n    collapsed && typeof item.label === \"string\" ? item.label : undefined;\n\n  if (item.external) {\n    return (\n      <a\n        href={item.to}\n        className={className}\n        title={title}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        onClick={onNavigate}\n      >\n        {children}\n      </a>\n    );\n  }\n  const link = renderLink({\n    key: item.key,\n    to: item.to,\n    className,\n    children,\n    ...(title ? { title } : {}),\n  });\n\n  if (!onNavigate) return link;\n  return <div onClick={onNavigate}>{link}</div>;\n}\n"],"names":["useRouter","jsx","cn","jsxs","Fragment","Icon"],"mappings":";;;;;;AAOO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,EAAE,WAAA,IAAeA,iBAAA;AACvB,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA,YAAY,SAAS;AAAA,MAAA;AAAA,MAGtB,UAAA,SAAS,IAAI,CAAC,SAAS,UACtBC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAET,UAAA;AAAA,YAAA,QAAQ,UACN,YACCF,2BAAAA,IAAC,OAAA,EAAI,WAAU,2DAAA,CAA2D,IAE1EA,2BAAAA,IAAC,OAAA,EAAI,WAAU,wHACZ,UAAA,QAAQ,MAAA,CACX;AAAA,YAEH,QAAQ,MAAM,IAAI,CAAC,SAClBA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBAEC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACC,GAAI,aAAa,EAAE,eAAe,CAAA;AAAA,cAAC;AAAA,cAJ/B,KAAK;AAAA,YAAA,CAMb;AAAA,UAAA;AAAA,QAAA;AAAA,QAnBI,QAAQ,SAAS,WAAW,KAAK;AAAA,MAAA,CAqBzC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,YAAYC,MAAAA;AAAAA,IAChB;AAAA,IACA,aAAa;AAAA,IACb,KAAK,UAAU;AAAA,EAAA;AAEjB,QAAM,WACJC,2BAAAA,KAAAC,WAAAA,UAAA,EACG,UAAA;AAAA,IAAA,KAAK,QACJH,+BAAC,QAAA,EAAK,WAAU,qDACd,UAAAA,2BAAAA;AAAAA,MAACI,KAAAA;AAAAA,MAAA;AAAA,QACE,GAAI,OAAO,KAAK,SAAS,WACtB,EAAE,MAAM,KAAK,KAAA,IACb,EAAE,MAAM,KAAK,KAAA;AAAA,MAAK;AAAA,IAAA,GAE1B;AAAA,IAED,CAAC,aAAaJ,+BAAC,UAAK,WAAU,mBAAmB,eAAK,OAAM;AAAA,IAC5D,CAAC,aAAa,KAAK;AAAA,EAAA,GACtB;AAEF,QAAM,QACJ,aAAa,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ;AAE7D,MAAI,KAAK,UAAU;AACjB,WACEA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,KAAK;AAAA,QACX;AAAA,QACA;AAAA,QACA,QAAO;AAAA,QACP,KAAI;AAAA,QACJ,SAAS;AAAA,QAER;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACA,QAAM,OAAO,WAAW;AAAA,IACtB,KAAK,KAAK;AAAA,IACV,IAAI,KAAK;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAI,QAAQ,EAAE,UAAU,CAAA;AAAA,EAAC,CAC1B;AAED,MAAI,CAAC,WAAY,QAAO;AACxB,SAAOA,2BAAAA,IAAC,OAAA,EAAI,SAAS,YAAa,UAAA,MAAK;AACzC;;"}
+{"version":3,"file":"AppShell.nav.cjs","sources":["../../src/layout/AppShell.nav.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { cn } from \"../lib/utils\";\nimport type { RenderLink } from \"../rpc/EndpointList\";\nimport { useRouter } from \"../rpc/router\";\nimport type {\n  AppShellNavGroup,\n  AppShellNavItem,\n  AppShellNavSection,\n} from \"./AppShell\";\n\n// Per-group collapsed state. Owned by AppShell (see `useGroupCollapsed` there)\n// and passed down, because AppShell renders NavSections twice — the desktop\n// rail and the mobile drawer — and per-render state behind one storage key\n// would desync: the rail stays mounted while the drawer is open, so a drawer\n// toggle would write localStorage the rail never reads back.\nexport interface GroupState {\n  isCollapsed: (key: string, fallback: boolean) => boolean;\n  toggle: (key: string, fallback: boolean) => void;\n}\n\nexport function NavSections({\n  sections,\n  collapsed,\n  groupState,\n  onNavigate,\n}: {\n  sections: AppShellNavSection[];\n  collapsed: boolean;\n  groupState: GroupState;\n  onNavigate?: () => void;\n}) {\n  const { renderLink } = useRouter();\n  return (\n    <nav\n      className={cn(\n        \"flex flex-col gap-0.5\",\n        collapsed ? \"px-2\" : \"px-density-2\",\n      )}\n    >\n      {sections.map((section, index) => (\n        <div\n          key={section.label ?? `section-${index}`}\n          className=\"flex flex-col\"\n        >\n          {section.label &&\n            (collapsed ? (\n              <div className=\"mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1\" />\n            ) : (\n              <div className=\"mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1\">\n                {section.label}\n              </div>\n            ))}\n          {section.items?.map((item) => (\n            <NavItemRow\n              key={item.key}\n              item={item}\n              collapsed={collapsed}\n              renderLink={renderLink}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))}\n          {section.groups?.map((group) =>\n            // A collapsed rail has no room for group headings, so the whole\n            // subtree flattens into the icon strip rather than hiding behind\n            // toggles the user cannot see.\n            collapsed\n              ? flattenGroup(group).map((item) => (\n                  <NavItemRow\n                    key={item.key}\n                    item={item}\n                    collapsed\n                    renderLink={renderLink}\n                    {...(onNavigate ? { onNavigate } : {})}\n                  />\n                ))\n              : (\n                  <NavGroupRows\n                    key={group.key}\n                    group={group}\n                    variant={section.variant ?? \"list\"}\n                    renderLink={renderLink}\n                    groupState={groupState}\n                    {...(onNavigate ? { onNavigate } : {})}\n                  />\n                ),\n          )}\n        </div>\n      ))}\n    </nav>\n  );\n}\n\n// flattenGroup collects every destination in a group's subtree — its own row\n// (when it has one), its items, and everything under its nested groups.\nfunction flattenGroup(group: AppShellNavGroup): AppShellNavItem[] {\n  return [\n    ...(group.item ? [group.item] : []),\n    ...group.items,\n    ...(group.groups ?? []).flatMap(flattenGroup),\n  ];\n}\n\nfunction NavGroupRows({\n  group,\n  variant,\n  renderLink,\n  groupState,\n  onNavigate,\n}: {\n  group: AppShellNavGroup;\n  variant: \"list\" | \"tree\";\n  renderLink: RenderLink;\n  groupState: GroupState;\n  onNavigate?: () => void;\n}) {\n  const fallback = group.defaultCollapsed ?? false;\n  const collapsed =\n    !group.forceExpanded && groupState.isCollapsed(group.key, fallback);\n  const toggle = () => groupState.toggle(group.key, fallback);\n  const chevron = (\n    <span aria-hidden className=\"text-[0.65rem] opacity-60\">\n      {collapsed ? \"▸\" : \"▾\"}\n    </span>\n  );\n  const groupIcon = group.icon && (\n    <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n      <Icon\n        {...(typeof group.icon === \"string\"\n          ? { name: group.icon }\n          : { icon: group.icon })}\n      />\n    </span>\n  );\n  return (\n    <div className=\"flex flex-col\">\n      {group.item ? (\n        // Folder AND leaf: the link and the disclosure are siblings. Nesting a\n        // button inside the anchor would be invalid DOM and would make the\n        // click target ambiguous.\n        <div className=\"group/nav flex items-center gap-1\">\n          <div className=\"min-w-0 flex-1\">\n            <NavItemRow\n              item={group.item}\n              collapsed={false}\n              renderLink={renderLink}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          </div>\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-expanded={!collapsed}\n            aria-label={`${collapsed ? \"Expand\" : \"Collapse\"} ${group.label}`}\n            className=\"shrink-0 rounded-md px-1.5 py-1.5 text-sidebar-foreground/55 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n          >\n            {chevron}\n          </button>\n        </div>\n      ) : (\n        <button\n          type=\"button\"\n          onClick={toggle}\n          aria-expanded={!collapsed}\n          className={cn(\n            \"flex items-center gap-2.5 rounded-md px-density-2 py-1.5 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n            variant === \"tree\"\n              ? \"text-[13px] text-sidebar-foreground\"\n              : \"text-[11px] font-semibold uppercase tracking-[0.14em] text-sidebar-foreground/55\",\n          )}\n        >\n          {groupIcon}\n          <span className=\"flex-1 truncate text-left\">{group.label}</span>\n          {chevron}\n        </button>\n      )}\n      {!collapsed && (\n        <div className=\"ml-2 mt-0.5 flex flex-col gap-0.5 border-l border-sidebar-border pl-2\">\n          {group.items.map((item) => (\n            <NavItemRow\n              key={item.key}\n              item={item}\n              collapsed={false}\n              renderLink={renderLink}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))}\n          {group.groups?.map((child) => (\n            <NavGroupRows\n              key={child.key}\n              group={child}\n              variant={variant}\n              renderLink={renderLink}\n              groupState={groupState}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction NavItemRow({\n  item,\n  collapsed,\n  renderLink,\n  onNavigate,\n}: {\n  item: AppShellNavItem;\n  collapsed: boolean;\n  renderLink: RenderLink;\n  onNavigate?: () => void;\n}) {\n  const className = cn(\n    \"flex w-full items-center gap-2.5 rounded-md px-density-2 py-1.5 text-left text-[13px] text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n    collapsed && \"justify-center px-0\",\n    item.active && \"bg-sidebar-accent font-medium text-sidebar-primary\",\n  );\n  const children: ReactNode = (\n    <>\n      {item.icon && (\n        <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n          <Icon\n            {...(typeof item.icon === \"string\"\n              ? { name: item.icon }\n              : { icon: item.icon })}\n          />\n        </span>\n      )}\n      {!collapsed && <span className=\"flex-1 truncate\">{item.label}</span>}\n      {!collapsed && item.badge}\n    </>\n  );\n  const title =\n    collapsed && typeof item.label === \"string\" ? item.label : undefined;\n\n  if (item.external) {\n    return (\n      <a\n        href={item.to}\n        className={className}\n        title={title}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        onClick={onNavigate}\n      >\n        {children}\n      </a>\n    );\n  }\n  const link = renderLink({\n    key: item.key,\n    to: item.to,\n    className,\n    children,\n    ...(title ? { title } : {}),\n  });\n\n  if (!onNavigate) return link;\n  return <div onClick={onNavigate}>{link}</div>;\n}\n"],"names":["useRouter","jsx","cn","jsxs","Icon","Fragment"],"mappings":"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"}

package/dist/layout/AppShell.nav.d.ts

@@ -1,7 +1,12 @@
 import { AppShellNavSection } from './AppShell';
-export declare function NavSections({ sections, collapsed, onNavigate, }: {
+export interface GroupState {
+    isCollapsed: (key: string, fallback: boolean) => boolean;
+    toggle: (key: string, fallback: boolean) => void;
+}
+export declare function NavSections({ sections, collapsed, groupState, onNavigate, }: {
     sections: AppShellNavSection[];
     collapsed: boolean;
+    groupState: GroupState;
     onNavigate?: () => void;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AppShell.nav.d.ts.map

package/dist/layout/AppShell.nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.nav.d.ts","sourceRoot":"","sources":["../../src/layout/AppShell.nav.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAmB,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEtE,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,UAAU,GACX,EAAE;IACD,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,2CAmCA"}
+{"version":3,"file":"AppShell.nav.d.ts","sourceRoot":"","sources":["../../src/layout/AppShell.nav.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAGV,kBAAkB,EACnB,MAAM,YAAY,CAAC;AAOpB,MAAM,WAAW,UAAU;IACzB,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,OAAO,CAAC;IACzD,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,UAAU,EACV,UAAU,GACX,EAAE;IACD,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,2CA4DA"}