@flanksource/clicky-ui 0.2.19 → 0.2.21

package/dist/layout/AppShell.js

@@ -2,8 +2,11 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { cn } from "../lib/utils.js";
 import { Icon } from "../data/Icon.js";
+import { useRouter } from "../rpc/router.js";
 import { SplitPane } from "./SplitPane.js";
 import { UiSidebar } from "../icons/components/UiSidebar.js";
+import { UiMenu } from "../icons/components/UiMenu.js";
+import { UiClose } from "../icons/components/UiClose.js";
 function readStored(key) {
   if (!key || typeof window === "undefined") return null;
   return window.localStorage.getItem(key);
@@ -25,6 +28,7 @@ function AppShell(props) {
     collapsedStorageKey,
     sidebarWidth = 240,
     collapsedWidth = 56,
+    mobileSidebarLabel = "Navigation",
     bodyHeader,
     bodyActions,
     bodySidebar,
@@ -38,6 +42,7 @@ function AppShell(props) {
     contentClassName
   } = props;
   const hasSidebar = sidebar !== void 0 || ((navSections == null ? void 0 : navSections.length) ?? 0) > 0;
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const [collapsed, setCollapsed] = useState(
     () => readStored(collapsedStorageKey) === "true" || readStored(collapsedStorageKey) === null && defaultCollapsed
   );
@@ -45,16 +50,33 @@ function AppShell(props) {
     if (collapsedStorageKey && typeof window !== "undefined")
       window.localStorage.setItem(collapsedStorageKey, String(collapsed));
   }, [collapsed, collapsedStorageKey]);
+  useEffect(() => {
+    if (!mobileSidebarOpen) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") setMobileSidebarOpen(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [mobileSidebarOpen]);
   const railWidth = collapsed ? collapsedWidth : sidebarWidth;
   const hasTopBar = !hasSidebar && brand !== void 0 || nav !== void 0 || search !== void 0 || actions !== void 0 || toolbar !== void 0;
+  const hasMobileHeader = hasSidebar;
   const hasBodyHeader = bodyHeader !== void 0 || bodyActions !== void 0;
+  const renderSidebarContent = (collapsedValue, onNavigate) => typeof sidebar === "function" ? sidebar(collapsedValue) : sidebar !== void 0 ? sidebar : navSections && /* @__PURE__ */ jsx(
+    NavSections,
+    {
+      sections: navSections,
+      collapsed: collapsedValue,
+      ...onNavigate ? { onNavigate } : {}
+    }
+  );
   return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full min-h-0 w-full bg-background", className), children: [
     hasSidebar && /* @__PURE__ */ jsxs(
       "aside",
       {
         style: { width: railWidth },
         className: cn(
-          "flex shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200",
+          "hidden shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 md:flex",
           sidebarClassName
         ),
         children: [
@@ -82,17 +104,38 @@ function AppShell(props) {
             }
           ),
           sidebarHeader && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-sidebar-border px-density-3 py-density-2", children: sidebarHeader }),
-          /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto py-density-2", children: typeof sidebar === "function" ? sidebar(collapsed) : sidebar !== void 0 ? sidebar : navSections && /* @__PURE__ */ jsx(NavSections, { sections: navSections, collapsed }) }),
+          /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto py-density-2", children: renderSidebarContent(collapsed) }),
           sidebarFooter && /* @__PURE__ */ jsx("div", { className: "mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2", children: sidebarFooter })
         ]
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
-      hasTopBar && /* @__PURE__ */ jsxs("header", { className: "shrink-0 border-b border-border bg-card", children: [
+      (hasTopBar || hasMobileHeader) && /* @__PURE__ */ jsxs("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 }),
+          actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 items-center gap-density-2", children: actions }),
+          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("flex h-14 items-center gap-density-3 px-density-4", headerClassName),
+            className: cn(
+              "hidden h-14 items-center gap-density-3 px-density-4 md:flex",
+              !hasSidebar && "flex",
+              headerClassName
+            ),
             children: [
               !hasSidebar && brand && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-density-2", children: brand }),
               nav && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center", children: nav }),
@@ -106,7 +149,7 @@ function AppShell(props) {
           "div",
           {
             className: cn(
-              "flex items-center gap-density-2 border-t border-border bg-muted px-density-4 py-density-2",
+              "flex flex-wrap items-center gap-density-2 border-t border-border bg-muted px-density-3 py-density-2 md:px-density-4",
               toolbarClassName
             ),
             children: toolbar
@@ -117,64 +160,171 @@ function AppShell(props) {
         "div",
         {
           className: cn(
-            "flex shrink-0 items-start justify-between gap-density-3 border-b border-border bg-card px-density-4 py-density-2",
+            "flex shrink-0 flex-col items-stretch gap-density-2 border-b border-border bg-card px-density-3 py-density-2 md:flex-row md:items-start md:justify-between md:gap-density-3 md:px-density-4",
             bodyHeaderClassName
           ),
           children: [
             /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: bodyHeader }),
-            bodyActions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-density-2", children: bodyActions })
+            bodyActions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-density-2", children: bodyActions })
           ]
         }
       ),
-      bodySidebar !== void 0 ? /* @__PURE__ */ jsx(
-        SplitPane,
+      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("div", { className: "max-h-[40vh] shrink-0 overflow-y-auto border-b border-border bg-background", children: bodySidebar }),
+          /* @__PURE__ */ jsx(
+            "main",
+            {
+              className: cn(
+                "min-h-0 min-w-0 flex-1 overflow-auto",
+                contentClassName
+              ),
+              children
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          SplitPane,
+          {
+            className: "hidden min-h-0 flex-1 md:flex",
+            defaultSplit: bodySplit,
+            minLeft: 12,
+            minRight: 30,
+            left: bodySidebar,
+            right: /* @__PURE__ */ jsx("div", { className: cn("h-full min-w-0", contentClassName), children }),
+            rightClass: "overflow-y-auto"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx(
+        "main",
         {
-          className: "min-h-0 flex-1",
-          defaultSplit: bodySplit,
-          minLeft: 12,
-          minRight: 30,
-          left: bodySidebar,
-          right: /* @__PURE__ */ jsx("div", { className: cn("h-full min-w-0", contentClassName), children }),
-          rightClass: "overflow-y-auto"
+          className: cn(
+            "min-h-0 min-w-0 flex-1 overflow-auto",
+            contentClassName
+          ),
+          children
         }
-      ) : /* @__PURE__ */ jsx("main", { className: cn("min-h-0 min-w-0 flex-1 overflow-auto", contentClassName), children })
-    ] })
+      )
+    ] }),
+    hasSidebar && mobileSidebarOpen && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "fixed inset-0 z-50 md:hidden",
+        role: "presentation",
+        onClick: () => setMobileSidebarOpen(false),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/40" }),
+          /* @__PURE__ */ jsxs(
+            "aside",
+            {
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-label": mobileSidebarLabel,
+              className: cn(
+                "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",
+                sidebarClassName
+              ),
+              onClick: (event) => event.stopPropagation(),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex h-14 shrink-0 items-center justify-between border-b border-sidebar-border px-density-3", children: [
+                  brand && /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-2", children: brand }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": `Close ${mobileSidebarLabel}`,
+                      title: "Close",
+                      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",
+                      onClick: () => setMobileSidebarOpen(false),
+                      children: /* @__PURE__ */ jsx(Icon, { icon: UiClose, className: "h-4 w-4" })
+                    }
+                  )
+                ] }),
+                sidebarHeader && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-sidebar-border px-density-3 py-density-2", children: sidebarHeader }),
+                /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto py-density-2", children: renderSidebarContent(false, () => setMobileSidebarOpen(false)) }),
+                sidebarFooter && /* @__PURE__ */ jsx("div", { className: "mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2", children: sidebarFooter })
+              ]
+            }
+          )
+        ]
+      }
+    )
   ] });
 }
 function NavSections({
   sections,
-  collapsed
+  collapsed,
+  onNavigate
 }) {
-  return /* @__PURE__ */ jsx("nav", { className: cn("flex flex-col gap-0.5", collapsed ? "px-2" : "px-density-2"), children: sections.map((section, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-    section.label && (collapsed ? /* @__PURE__ */ jsx("div", { className: "mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1" }) : /* @__PURE__ */ 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__ */ jsx(NavItemRow, { item, collapsed }, item.key))
-  ] }, section.label ?? `section-${i}`)) });
+  const { renderLink } = useRouter();
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      className: cn(
+        "flex flex-col gap-0.5",
+        collapsed ? "px-2" : "px-density-2"
+      ),
+      children: sections.map((section, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        section.label && (collapsed ? /* @__PURE__ */ jsx("div", { className: "mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1" }) : /* @__PURE__ */ 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__ */ jsx(
+          NavItemRow,
+          {
+            item,
+            collapsed,
+            renderLink,
+            ...onNavigate ? { onNavigate } : {}
+          },
+          item.key
+        ))
+      ] }, section.label ?? `section-${i}`))
+    }
+  );
 }
-function NavItemRow({ item, collapsed }) {
+function NavItemRow({
+  item,
+  collapsed,
+  renderLink,
+  onNavigate
+}) {
   const className = cn(
     "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",
     collapsed && "justify-center px-0",
     item.active && "bg-sidebar-accent font-medium text-sidebar-primary"
   );
   const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
-    item.icon && /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(Icon, { ...typeof item.icon === "string" ? { name: item.icon } : { icon: item.icon } }) }),
+    item.icon && /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(
+      Icon,
+      {
+        ...typeof item.icon === "string" ? { name: item.icon } : { icon: item.icon }
+      }
+    ) }),
     !collapsed && /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.label }),
     !collapsed && item.badge
   ] });
   const title = collapsed && typeof item.label === "string" ? item.label : void 0;
-  if (item.href) {
+  if (item.external) {
     return /* @__PURE__ */ jsx(
       "a",
       {
-        href: item.href,
+        href: item.to,
         className,
         title,
-        ...item.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+        target: "_blank",
+        rel: "noopener noreferrer",
+        onClick: onNavigate,
         children: inner
       }
     );
   }
-  return /* @__PURE__ */ jsx("button", { type: "button", onClick: item.onClick, className, title, children: inner });
+  const link = renderLink({
+    key: item.key,
+    to: item.to,
+    className,
+    children: inner,
+    ...title ? { title } : {}
+  });
+  if (!onNavigate) return link;
+  return /* @__PURE__ */ jsx("div", { onClick: onNavigate, children: link });
 }
 export {
   AppShell

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 { UiSidebar } from \"../icons\";\nimport { SplitPane } from \"./SplitPane\";\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  /** Click handler (rendered as a button when no `href`). */\n  onClick?: () => void;\n  /** Destination (rendered as an anchor). */\n  href?: string;\n  /** Opens `href` 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  /** 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\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\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    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    bodyHeader,\n    bodyActions,\n    bodySidebar,\n    bodySplit = 24,\n    children,\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\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  const railWidth = collapsed ? collapsedWidth : sidebarWidth;\n  const hasTopBar =\n    (!hasSidebar && brand !== undefined) ||\n    nav !== undefined ||\n    search !== undefined ||\n    actions !== undefined ||\n    toolbar !== undefined;\n  const hasBodyHeader = bodyHeader !== undefined || bodyActions !== undefined;\n\n  return (\n    <div className={cn(\"flex h-full min-h-0 w-full bg-background\", className)}>\n      {hasSidebar && (\n        <aside\n          style={{ width: railWidth }}\n          className={cn(\n            \"flex shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200\",\n            sidebarClassName,\n          )}\n        >\n          <div\n            className={cn(\n              \"flex h-14 shrink-0 items-center border-b border-sidebar-border\",\n              collapsed ? \"justify-center px-2\" : \"justify-between px-density-3\",\n            )}\n          >\n            {!collapsed && brand && <div className=\"flex min-w-0 items-center gap-2\">{brand}</div>}\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 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            {typeof sidebar === \"function\"\n              ? sidebar(collapsed)\n              : sidebar !== undefined\n                ? sidebar\n                : navSections && <NavSections sections={navSections} collapsed={collapsed} />}\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      )}\n\n      <div className=\"flex min-h-0 min-w-0 flex-1 flex-col\">\n        {hasTopBar && (\n          <header className=\"shrink-0 border-b border-border bg-card\">\n            <div\n              className={cn(\"flex h-14 items-center gap-density-3 px-density-4\", headerClassName)}\n            >\n              {!hasSidebar && brand && (\n                <div className=\"flex shrink-0 items-center gap-density-2\">{brand}</div>\n              )}\n              {nav && <div className=\"flex shrink-0 items-center\">{nav}</div>}\n              {search !== undefined && (\n                <div className=\"flex min-w-0 flex-1 justify-center\">\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 className=\"flex shrink-0 items-center gap-density-2\">{actions}</div>\n              )}\n            </div>\n            {toolbar && (\n              <div\n                className={cn(\n                  \"flex items-center gap-density-2 border-t border-border bg-muted px-density-4 py-density-2\",\n                  toolbarClassName,\n                )}\n              >\n                {toolbar}\n              </div>\n            )}\n          </header>\n        )}\n\n        {hasBodyHeader && (\n          <div\n            className={cn(\n              \"flex shrink-0 items-start justify-between gap-density-3 border-b border-border bg-card px-density-4 py-density-2\",\n              bodyHeaderClassName,\n            )}\n          >\n            <div className=\"min-w-0 flex-1\">{bodyHeader}</div>\n            {bodyActions && (\n              <div className=\"flex shrink-0 items-center gap-density-2\">{bodyActions}</div>\n            )}\n          </div>\n        )}\n\n        {bodySidebar !== undefined ? (\n          <SplitPane\n            className=\"min-h-0 flex-1\"\n            defaultSplit={bodySplit}\n            minLeft={12}\n            minRight={30}\n            left={bodySidebar}\n            right={<div className={cn(\"h-full min-w-0\", contentClassName)}>{children}</div>}\n            rightClass=\"overflow-y-auto\"\n          />\n        ) : (\n          <main className={cn(\"min-h-0 min-w-0 flex-1 overflow-auto\", contentClassName)}>\n            {children}\n          </main>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction NavSections({\n  sections,\n  collapsed,\n}: {\n  sections: AppShellNavSection[];\n  collapsed: boolean;\n}) {\n  return (\n    <nav className={cn(\"flex flex-col gap-0.5\", collapsed ? \"px-2\" : \"px-density-2\")}>\n      {sections.map((section, i) => (\n        <div key={section.label ?? `section-${i}`} className=\"flex flex-col\">\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 key={item.key} item={item} collapsed={collapsed} />\n          ))}\n        </div>\n      ))}\n    </nav>\n  );\n}\n\nfunction NavItemRow({ item, collapsed }: { item: AppShellNavItem; collapsed: boolean }) {\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 inner = (\n    <>\n      {item.icon && (\n        <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n          <Icon {...(typeof item.icon === \"string\" ? { name: item.icon } : { icon: item.icon })} />\n        </span>\n      )}\n      {!collapsed && <span className=\"flex-1 truncate\">{item.label}</span>}\n      {!collapsed && item.badge}\n    </>\n  );\n  const title = collapsed && typeof item.label === \"string\" ? item.label : undefined;\n\n  if (item.href) {\n    return (\n      <a\n        href={item.href}\n        className={className}\n        title={title}\n        {...(item.external ? { target: \"_blank\", rel: \"noopener noreferrer\" } : {})}\n      >\n        {inner}\n      </a>\n    );\n  }\n  return (\n    <button type=\"button\" onClick={item.onClick} className={className} title={title}>\n      {inner}\n    </button>\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 { useRouter } from \"../rpc/router\";\nimport type { RenderLink } from \"../rpc/EndpointList\";\nimport { SplitPane } from \"./SplitPane\";\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  /** 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\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    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    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  useEffect(() => {\n    if (!mobileSidebarOpen) return;\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") setMobileSidebarOpen(false);\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [mobileSidebarOpen]);\n\n  const railWidth = collapsed ? collapsedWidth : sidebarWidth;\n  const hasTopBar =\n    (!hasSidebar && brand !== undefined) ||\n    nav !== undefined ||\n    search !== undefined ||\n    actions !== undefined ||\n    toolbar !== undefined;\n  const hasMobileHeader = hasSidebar;\n  const hasBodyHeader = bodyHeader !== undefined || bodyActions !== undefined;\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 className={cn(\"flex h-full min-h-0 w-full bg-background\", className)}>\n      {hasSidebar && (\n        <aside\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 className=\"flex min-w-0 items-center gap-2\">{brand}</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 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(collapsed)}\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      )}\n\n      <div className=\"flex min-h-0 min-w-0 flex-1 flex-col\">\n        {(hasTopBar || hasMobileHeader) && (\n          <header className=\"shrink-0 border-b border-border bg-card\">\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                {actions && (\n                  <div className=\"ml-auto flex shrink-0 items-center gap-density-2\">\n                    {actions}\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 className=\"flex shrink-0 items-center gap-density-2\">\n                  {brand}\n                </div>\n              )}\n              {nav && <div className=\"flex shrink-0 items-center\">{nav}</div>}\n              {search !== undefined && (\n                <div className=\"flex min-w-0 flex-1 justify-center\">\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 className=\"flex shrink-0 items-center gap-density-2\">\n                  {actions}\n                </div>\n              )}\n            </div>\n            {toolbar && (\n              <div\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            className={cn(\n              \"flex shrink-0 flex-col items-stretch gap-density-2 border-b border-border bg-card px-density-3 py-density-2 md:flex-row md:items-start md:justify-between md:gap-density-3 md:px-density-4\",\n              bodyHeaderClassName,\n            )}\n          >\n            <div className=\"min-w-0 flex-1\">{bodyHeader}</div>\n            {bodyActions && (\n              <div className=\"flex shrink-0 flex-wrap items-center gap-density-2\">\n                {bodyActions}\n              </div>\n            )}\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 className=\"max-h-[40vh] shrink-0 overflow-y-auto border-b border-border bg-background\">\n                {bodySidebar}\n              </div>\n              <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={bodySidebar}\n              right={\n                <div className={cn(\"h-full min-w-0\", contentClassName)}>\n                  {children}\n                </div>\n              }\n              rightClass=\"overflow-y-auto\"\n            />\n          </>\n        ) : (\n          <main\n            className={cn(\n              \"min-h-0 min-w-0 flex-1 overflow-auto\",\n              contentClassName,\n            )}\n          >\n            {children}\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\nfunction 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, i) => (\n        <div key={section.label ?? `section-${i}`} className=\"flex flex-col\">\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 inner = (\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        {inner}\n      </a>\n    );\n  }\n  const link = renderLink({\n    key: item.key,\n    to: item.to,\n    className,\n    children: inner,\n    ...(title ? { title } : {}),\n  });\n\n  if (!onNavigate) return link;\n  return (\n    <div onClick={onNavigate}>\n      {link}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAgGA,SAAS,WAAW,KAAwC;AAC1D,MAAI,CAAC,OAAO,OAAO,WAAW,YAAa,QAAO;AAClD,SAAO,OAAO,aAAa,QAAQ,GAAG;AACxC;AAEO,SAAS,SAAS,OAAsB;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB;AAAA,IACA,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,qBAAqB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,aAAa,YAAY,YAAc,2CAAa,WAAU,KAAK;AACzE,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAEhE,QAAM,CAAC,WAAW,YAAY,IAAI;AAAA,IAChC,MACE,WAAW,mBAAmB,MAAM,UACnC,WAAW,mBAAmB,MAAM,QAAQ;AAAA,EAAA;AAGjD,YAAU,MAAM;AACd,QAAI,uBAAuB,OAAO,WAAW;AAC3C,aAAO,aAAa,QAAQ,qBAAqB,OAAO,SAAS,CAAC;AAAA,EACtE,GAAG,CAAC,WAAW,mBAAmB,CAAC;AAEnC,YAAU,MAAM;AACd,QAAI,CAAC,kBAAmB;AACxB,UAAM,YAAY,CAAC,UAAyB;AAC1C,UAAI,MAAM,QAAQ,SAAU,sBAAqB,KAAK;AAAA,IACxD;AACA,aAAS,iBAAiB,WAAW,SAAS;AAC9C,WAAO,MAAM,SAAS,oBAAoB,WAAW,SAAS;AAAA,EAChE,GAAG,CAAC,iBAAiB,CAAC;AAEtB,QAAM,YAAY,YAAY,iBAAiB;AAC/C,QAAM,YACH,CAAC,cAAc,UAAU,UAC1B,QAAQ,UACR,WAAW,UACX,YAAY,UACZ,YAAY;AACd,QAAM,kBAAkB;AACxB,QAAM,gBAAgB,eAAe,UAAa,gBAAgB;AAClE,QAAM,uBAAuB,CAAC,gBAAyB,eACrD,OAAO,YAAY,aACf,QAAQ,cAAc,IACtB,YAAY,SACV,UACA,eACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAW;AAAA,MACV,GAAI,aAAa,EAAE,eAAe,CAAA;AAAA,IAAC;AAAA,EAAA;AAIhD,8BACG,OAAA,EAAI,WAAW,GAAG,4CAA4C,SAAS,GACrE,UAAA;AAAA,IAAA,cACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,EAAE,OAAO,UAAA;AAAA,QAChB,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,YACI,wBACA;AAAA,cAAA;AAAA,cAGL,UAAA;AAAA,gBAAA,CAAC,aAAa,SACb,oBAAC,OAAA,EAAI,WAAU,mCAAmC,UAAA,OAAM;AAAA,gBAEzD,eACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,SAAS,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC;AAAA,oBACrC,cAAY,YAAY,mBAAmB;AAAA,oBAC3C,OAAO,YAAY,mBAAmB;AAAA,oBACtC,WAAU;AAAA,oBAEV,UAAA,oBAAC,MAAA,EAAK,MAAM,WAAW,WAAU,UAAA,CAAU;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAC7C;AAAA,YAAA;AAAA,UAAA;AAAA,UAGH,iBACC,oBAAC,OAAA,EAAI,WAAU,qEACZ,UAAA,eACH;AAAA,8BAED,OAAA,EAAI,WAAU,+CACZ,UAAA,qBAAqB,SAAS,GACjC;AAAA,UACC,iBACC,oBAAC,OAAA,EAAI,WAAU,6EACZ,UAAA,cAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAKN,qBAAC,OAAA,EAAI,WAAU,wCACX,UAAA;AAAA,OAAA,aAAa,oBACb,qBAAC,UAAA,EAAO,WAAU,2CACf,UAAA;AAAA,QAAA,mBACC,qBAAC,OAAA,EAAI,WAAU,iFACb,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAY,QAAQ,kBAAkB;AAAA,cACtC,OAAO;AAAA,cACP,WAAU;AAAA,cACV,SAAS,MAAM,qBAAqB,IAAI;AAAA,cAExC,UAAA,oBAAC,MAAA,EAAK,MAAM,QAAQ,WAAU,UAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAEzC,SACC,oBAAC,OAAA,EAAI,WAAU,kDACZ,UAAA,OACH;AAAA,UAED,WACC,oBAAC,OAAA,EAAI,WAAU,oDACZ,UAAA,SACH;AAAA,UAED,WAAW,UACV,oBAAC,OAAA,EAAI,WAAU,sBACZ,UAAA,QACH;AAAA,UAED,OACC,oBAAC,OAAA,EAAI,WAAU,sCACZ,UAAA,IAAA,CACH;AAAA,QAAA,GAEJ;AAAA,QAEF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,CAAC,cAAc;AAAA,cACf;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,cAAA,CAAC,cAAc,SACd,oBAAC,OAAA,EAAI,WAAU,4CACZ,UAAA,OACH;AAAA,cAED,OAAO,oBAAC,OAAA,EAAI,WAAU,8BAA8B,UAAA,KAAI;AAAA,cACxD,WAAW,UACV,oBAAC,OAAA,EAAI,WAAU,sCACb,UAAA,oBAAC,OAAA,EAAI,WAAU,UAAS,OAAO,EAAE,UAAU,eAAA,GACxC,kBACH,GACF;AAAA,cAED,WAAW,UAAa,oBAAC,OAAA,EAAI,WAAU,UAAS;AAAA,cAChD,WACC,oBAAC,OAAA,EAAI,WAAU,4CACZ,UAAA,QAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGH,WACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,GAEJ;AAAA,MAGD,iBACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAGF,UAAA;AAAA,YAAA,oBAAC,OAAA,EAAI,WAAU,kBAAkB,UAAA,YAAW;AAAA,YAC3C,eACC,oBAAC,OAAA,EAAI,WAAU,sDACZ,UAAA,YAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAKL,gBAAgB,SACf,qBAAA,UAAA,EACE,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,0DACb,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAU,8EACZ,UAAA,aACH;AAAA,UACA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,cAAA;AAAA,cAGD;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,GACF;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,cAAc;AAAA,YACd,SAAS;AAAA,YACT,UAAU;AAAA,YACV,MAAM;AAAA,YACN,2BACG,OAAA,EAAI,WAAW,GAAG,kBAAkB,gBAAgB,GAClD,UACH;AAAA,YAEF,YAAW;AAAA,UAAA;AAAA,QAAA;AAAA,MACb,EAAA,CACF,IAEA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAGD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,IACC,cAAc,qBACb;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QACL,SAAS,MAAM,qBAAqB,KAAK;AAAA,QAEzC,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAU,+BAAA,CAA+B;AAAA,UAC9C;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,cAAY;AAAA,cACZ,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,cAAA;AAAA,cAEF,SAAS,CAAC,UAAU,MAAM,gBAAA;AAAA,cAE1B,UAAA;AAAA,gBAAA,qBAAC,OAAA,EAAI,WAAU,+FACZ,UAAA;AAAA,kBAAA,SAAS,oBAAC,OAAA,EAAI,WAAU,mCAAmC,UAAA,OAAM;AAAA,kBAClE;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,MAAK;AAAA,sBACL,cAAY,SAAS,kBAAkB;AAAA,sBACvC,OAAM;AAAA,sBACN,WAAU;AAAA,sBACV,SAAS,MAAM,qBAAqB,KAAK;AAAA,sBAEzC,UAAA,oBAAC,MAAA,EAAK,MAAM,SAAS,WAAU,UAAA,CAAU;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAC3C,GACF;AAAA,gBACC,iBACC,oBAAC,OAAA,EAAI,WAAU,qEACZ,UAAA,eACH;AAAA,gBAEF,oBAAC,OAAA,EAAI,WAAU,+CACZ,UAAA,qBAAqB,OAAO,MAAM,qBAAqB,KAAK,CAAC,EAAA,CAChE;AAAA,gBACC,iBACC,oBAAC,OAAA,EAAI,WAAU,6EACZ,UAAA,cAAA,CACH;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAEJ;AAEJ;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,EAAE,WAAA,IAAe,UAAA;AACvB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,YAAY,SAAS;AAAA,MAAA;AAAA,MAGtB,UAAA,SAAS,IAAI,CAAC,SAAS,MACtB,qBAAC,OAAA,EAA0C,WAAU,iBAClD,UAAA;AAAA,QAAA,QAAQ,UACN,YACC,oBAAC,OAAA,EAAI,WAAU,2DAAA,CAA2D,IAE1E,oBAAC,OAAA,EAAI,WAAU,wHACZ,UAAA,QAAQ,MAAA,CACX;AAAA,QAEH,QAAQ,MAAM,IAAI,CAAC,SAClB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA,YACC,GAAI,aAAa,EAAE,eAAe,CAAA;AAAA,UAAC;AAAA,UAJ/B,KAAK;AAAA,QAAA,CAMb;AAAA,MAAA,EAAA,GAjBO,QAAQ,SAAS,WAAW,CAAC,EAkBvC,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,YAAY;AAAA,IAChB;AAAA,IACA,aAAa;AAAA,IACb,KAAK,UAAU;AAAA,EAAA;AAEjB,QAAM,QACJ,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA,KAAK,QACJ,oBAAC,QAAA,EAAK,WAAU,qDACd,UAAA;AAAA,MAAC;AAAA,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,aAAa,oBAAC,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,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,KAAK;AAAA,QACX;AAAA,QACA;AAAA,QACA,QAAO;AAAA,QACP,KAAI;AAAA,QACJ,SAAS;AAAA,QAER,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACA,QAAM,OAAO,WAAW;AAAA,IACtB,KAAK,KAAK;AAAA,IACV,IAAI,KAAK;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV,GAAI,QAAQ,EAAE,UAAU,CAAA;AAAA,EAAC,CAC1B;AAED,MAAI,CAAC,WAAY,QAAO;AACxB,SACE,oBAAC,OAAA,EAAI,SAAS,YACX,UAAA,MACH;AAEJ;"}

package/dist/layout/AppSidebar.cjs

@@ -0,0 +1,239 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../lib/utils.cjs");
+const Icon = require("../data/Icon.cjs");
+const router = require("../rpc/router.cjs");
+const UiSidebar = require("../icons/components/UiSidebar.cjs");
+const DEFAULT_COLLAPSE_KEY = "clicky-ui:app-sidebar:collapsed";
+const DEFAULT_GROUP_COLLAPSE_KEY = "clicky-ui:app-sidebar:groups";
+function defaultIsActive(pathname, to) {
+  if (to === "/") return pathname === "/";
+  return pathname === to || pathname.startsWith(`${to}/`);
+}
+function useCollapsed(storageKey) {
+  const [collapsed, setCollapsed] = react.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.localStorage.getItem(storageKey) === "true";
+  });
+  react.useEffect(() => {
+    if (typeof window === "undefined") return;
+    window.localStorage.setItem(storageKey, String(collapsed));
+  }, [collapsed, storageKey]);
+  return [collapsed, () => setCollapsed((c) => !c)];
+}
+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] = react.useState(() => readGroupState(storageKey));
+  react.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 flattenGroupItems(groups) {
+  const out = [];
+  for (const group of groups) {
+    if (group.items) out.push(...group.items);
+    if (group.groups) out.push(...flattenGroupItems(group.groups));
+  }
+  return out;
+}
+function AppSidebar({
+  sections,
+  pathname: pathnameProp,
+  renderLink: renderLinkProp,
+  header,
+  footer,
+  collapsedStorageKey = DEFAULT_COLLAPSE_KEY,
+  groupCollapsedStorageKey = DEFAULT_GROUP_COLLAPSE_KEY,
+  isActive = defaultIsActive,
+  className
+}) {
+  const router$1 = router.useRouter();
+  const pathname = pathnameProp ?? router$1.pathname;
+  const renderLink = renderLinkProp ?? router$1.renderLink;
+  const [collapsed, toggleCollapsed] = useCollapsed(collapsedStorageKey);
+  const groupState = useGroupCollapsed(groupCollapsedStorageKey);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "nav",
+    {
+      className: utils.cn(
+        "flex shrink-0 flex-col overflow-hidden border-r border-border bg-muted/30 transition-[width] duration-200",
+        collapsed ? "w-16" : "w-64",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: utils.cn(
+              "flex shrink-0 items-center border-b border-border py-3",
+              collapsed ? "justify-center px-2" : "justify-between px-4"
+            ),
+            children: [
+              !collapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: header }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: toggleCollapsed,
+                  "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+                  title: collapsed ? "Expand sidebar" : "Collapse sidebar",
+                  className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiSidebar.UiSidebar, className: "h-4 w-4" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto py-2", collapsed ? "px-2" : "px-3"), children: sections.map((section, i) => {
+          var _a, _b;
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+            section.label && /* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { collapsed, children: section.label }),
+            (_a = section.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+              SidebarItem,
+              {
+                item,
+                active: isActive(pathname, item.to),
+                collapsed,
+                renderLink
+              },
+              item.key
+            )),
+            (_b = section.groups) == null ? void 0 : _b.map(
+              (group) => collapsed ? flattenGroupItems([group]).map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                SidebarItem,
+                {
+                  item,
+                  active: isActive(pathname, item.to),
+                  collapsed: true,
+                  renderLink
+                },
+                item.key
+              )) : /* @__PURE__ */ jsxRuntime.jsx(
+                SidebarGroup,
+                {
+                  group,
+                  pathname,
+                  isActive,
+                  renderLink,
+                  groupState
+                },
+                group.key
+              )
+            )
+          ] }, section.label ?? `section-${i}`);
+        }) }),
+        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("mt-auto border-t border-border py-3", collapsed ? "px-2" : "px-4"), children: footer })
+      ]
+    }
+  );
+}
+function SidebarGroup({
+  group,
+  pathname,
+  isActive,
+  renderLink,
+  groupState
+}) {
+  var _a, _b;
+  const fallback = group.defaultCollapsed ?? false;
+  const collapsed = groupState.isCollapsed(group.key, fallback);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => groupState.toggle(group.key, fallback),
+        "aria-expanded": !collapsed,
+        className: "flex items-center gap-2 rounded-md px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground transition-colors hover:bg-accent/40",
+        children: [
+          group.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: group.icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate text-left", children: group.label }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-[0.65rem] opacity-60", children: collapsed ? "▸" : "▾" })
+        ]
+      }
+    ),
+    !collapsed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-2 mt-0.5 flex flex-col gap-0.5 border-l border-border/60 pl-2", children: [
+      (_a = group.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+        SidebarItem,
+        {
+          item,
+          active: isActive(pathname, item.to),
+          collapsed: false,
+          renderLink
+        },
+        item.key
+      )),
+      (_b = group.groups) == null ? void 0 : _b.map((sub) => /* @__PURE__ */ jsxRuntime.jsx(
+        SidebarGroup,
+        {
+          group: sub,
+          pathname,
+          isActive,
+          renderLink,
+          groupState
+        },
+        sub.key
+      ))
+    ] })
+  ] });
+}
+function SidebarItem({
+  item,
+  active,
+  collapsed,
+  renderLink
+}) {
+  const className = utils.cn(
+    "flex items-center gap-2.5 rounded-md px-3 py-1.5 text-[13px] text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+    collapsed && "justify-center px-0",
+    active && "bg-accent font-medium text-accent-foreground"
+  );
+  const title = collapsed ? item.title : void 0;
+  const children = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: item.icon }),
+    !collapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: item.title }),
+    !collapsed && item.badge
+  ] });
+  if (item.external) {
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.to, className, title, target: "_blank", rel: "noopener noreferrer", children });
+  }
+  return renderLink({ key: item.key, to: item.to, className, children, ...title ? { title } : {} });
+}
+function SectionLabel({ children, collapsed }) {
+  if (collapsed) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-2 mb-1 mt-3 border-t border-border first:mt-2" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-0.5 mt-3 px-3 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground first:mt-2", children });
+}
+function AppLayout({ sidebar, header, children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex h-full min-h-0 w-full overflow-hidden bg-background", className), children: [
+    sidebar,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+      header,
+      /* @__PURE__ */ jsxRuntime.jsx("main", { className: "min-h-0 min-w-0 flex-1 overflow-y-auto", children })
+    ] })
+  ] });
+}
+exports.AppLayout = AppLayout;
+exports.AppSidebar = AppSidebar;
+//# sourceMappingURL=AppSidebar.cjs.map