@flanksource/clicky-ui 0.3.15 → 0.3.17

package/dist/layout/AppShell.cjs

@@ -4,9 +4,11 @@ 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 modalStack = require("../overlay/modalStack.cjs");
 const SplitPane = require("./SplitPane.cjs");
+const AppShell_debug = require("./AppShell.debug.cjs");
+const AppShell_nav = require("./AppShell.nav.cjs");
+const contentWidth = require("./content-width.cjs");
 const UiSidebar = require("../icons/components/UiSidebar.cjs");
 const UiMenu = require("../icons/components/UiMenu.cjs");
 const UiClose = require("../icons/components/UiClose.cjs");
@@ -38,6 +40,8 @@ function AppShell(props) {
     bodySidebar,
     bodySplit = 24,
     children,
+    contentWidth: contentWidth$1 = "contained",
+    debugSlots = false,
     className,
     headerClassName,
     toolbarClassName,
@@ -60,269 +64,297 @@ function AppShell(props) {
   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;
+  const effectiveContentWidth = bodySidebar === void 0 ? contentWidth$1 : "full";
   const renderSidebarContent = (collapsedValue, onNavigate) => typeof sidebar === "function" ? sidebar(collapsedValue) : sidebar !== void 0 ? sidebar : navSections && /* @__PURE__ */ jsxRuntime.jsx(
-    NavSections,
+    AppShell_nav.NavSections,
     {
       sections: navSections,
       collapsed: collapsedValue,
       ...onNavigate ? { onNavigate } : {}
     }
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex h-full min-h-0 w-full bg-background", className), children: [
-    hasSidebar && /* @__PURE__ */ jsxRuntime.jsxs(
-      "aside",
-      {
-        style: { width: railWidth },
-        className: utils.cn(
-          "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: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: utils.cn(
-                "flex h-14 shrink-0 items-center border-b border-sidebar-border",
-                collapsed ? "justify-center px-2" : "justify-between px-density-3"
-              ),
-              children: [
-                !collapsed && brand && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 items-center gap-2", children: brand }),
-                collapsible && /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => setCollapsed((c) => !c),
-                    "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-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiSidebar.UiSidebar, className: "h-4 w-4" })
-                  }
-                )
-              ]
-            }
-          ),
-          sidebarHeader && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-b border-sidebar-border px-density-3 py-density-2", children: sidebarHeader }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-y-auto py-density-2", children: renderSidebarContent(collapsed) }),
-          sidebarFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2", children: sidebarFooter })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
-      (hasTopBar || hasMobileHeader) && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "shrink-0 border-b border-border bg-card", children: [
-        hasMobileHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-density-2 px-density-3 py-density-2 md:hidden", children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiMenu.UiMenu, className: "h-4 w-4" })
-            }
-          ),
-          brand && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 items-center gap-density-2", children: brand }),
-          compactActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex min-w-0 shrink items-center justify-end gap-density-2", children: compactActions }),
-          search !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "basis-full min-w-0", children: search }),
-          nav && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "basis-full min-w-0 overflow-x-auto", children: nav })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn("flex h-full min-h-0 w-full bg-background", className),
+      ...debugSlots ? { "data-debug-slots": "true" } : {},
+      children: [
+        debugSlots && /* @__PURE__ */ jsxRuntime.jsx(AppShell_debug.AppShellSlotOutlines, {}),
+        hasSidebar && /* @__PURE__ */ jsxRuntime.jsxs(
+          "aside",
           {
+            "data-slot": "app-shell-sidebar",
+            style: { width: railWidth },
             className: utils.cn(
-              "hidden h-14 items-center gap-density-3 px-density-4 md:flex",
-              !hasSidebar && "flex",
-              headerClassName
+              "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: [
-              !hasSidebar && brand && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-density-2", children: brand }),
-              nav && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center", children: nav }),
-              search !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", style: { maxWidth: searchMaxWidth }, children: search }) }),
-              search === void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
-              actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-density-2", children: actions })
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: utils.cn(
+                    "flex h-14 shrink-0 items-center border-b border-sidebar-border",
+                    collapsed ? "justify-center px-2" : "justify-between px-density-3"
+                  ),
+                  children: [
+                    !collapsed && brand && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "app-shell-brand", className: "flex min-w-0 items-center gap-2", children: brand }),
+                    collapsible && /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setCollapsed((c) => !c),
+                        "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-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiSidebar.UiSidebar, className: "h-4 w-4" })
+                      }
+                    )
+                  ]
+                }
+              ),
+              sidebarHeader && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-slot": "app-shell-sidebar-header",
+                  className: "shrink-0 border-b border-sidebar-border px-density-3 py-density-2",
+                  children: sidebarHeader
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-y-auto py-density-2", children: renderSidebarContent(collapsed) }),
+              sidebarFooter && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-slot": "app-shell-sidebar-footer",
+                  className: "mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2",
+                  children: sidebarFooter
+                }
+              )
             ]
           }
         ),
-        toolbar && /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: utils.cn(
-              "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
-          }
-        )
-      ] }),
-      hasBodyHeader && /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: utils.cn(
-            "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__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: bodyHeader }),
-            bodyActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-density-2", children: bodyActions })
-          ]
-        }
-      ),
-      bodySidebar !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden md:hidden", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-[40vh] shrink-0 overflow-y-auto border-b border-border bg-background", children: bodySidebar }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "main",
-            {
-              className: utils.cn(
-                "min-h-0 min-w-0 flex-1 overflow-auto",
-                contentClassName
+            "data-slot": "app-shell-column",
+            className: "@container/app-content flex min-h-0 min-w-0 flex-1 flex-col",
+            children: [
+              (hasTopBar || hasMobileHeader) && /* @__PURE__ */ jsxRuntime.jsxs(
+                "header",
+                {
+                  "data-slot": "app-shell-header",
+                  className: "shrink-0 border-b border-border bg-card",
+                  children: [
+                    hasMobileHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-density-2 px-density-3 py-density-2 md:hidden", children: [
+                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiMenu.UiMenu, className: "h-4 w-4" })
+                        }
+                      ),
+                      brand && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 items-center gap-density-2", children: brand }),
+                      compactActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex min-w-0 shrink items-center justify-end gap-density-2", children: compactActions }),
+                      search !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "basis-full min-w-0", children: search }),
+                      nav && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "basis-full min-w-0 overflow-x-auto", children: nav })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        className: utils.cn(
+                          "hidden h-14 items-center gap-density-3 px-density-4 md:flex",
+                          !hasSidebar && "flex",
+                          headerClassName
+                        ),
+                        children: [
+                          !hasSidebar && brand && /* @__PURE__ */ jsxRuntime.jsx(
+                            "div",
+                            {
+                              "data-slot": "app-shell-brand",
+                              className: "flex shrink-0 items-center gap-density-2",
+                              children: brand
+                            }
+                          ),
+                          nav && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "app-shell-nav", className: "flex shrink-0 items-center", children: nav }),
+                          search !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                            "div",
+                            {
+                              "data-slot": "app-shell-search",
+                              className: "flex min-w-0 flex-1 justify-center",
+                              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", style: { maxWidth: searchMaxWidth }, children: search })
+                            }
+                          ),
+                          search === void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+                          actions && /* @__PURE__ */ jsxRuntime.jsx(
+                            "div",
+                            {
+                              "data-slot": "app-shell-actions",
+                              className: "flex shrink-0 items-center gap-density-2",
+                              children: actions
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    toolbar && /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        "data-slot": "app-shell-toolbar",
+                        className: utils.cn(
+                          "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
+                      }
+                    )
+                  ]
+                }
               ),
-              children
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          SplitPane.SplitPane,
-          {
-            className: "hidden min-h-0 flex-1 md:flex",
-            defaultSplit: bodySplit,
-            minLeft: 12,
-            minRight: 30,
-            left: bodySidebar,
-            right: /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("h-full min-w-0", contentClassName), children }),
-            rightClass: "overflow-y-auto"
-          }
-        )
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-        "main",
-        {
-          className: utils.cn(
-            "min-h-0 min-w-0 flex-1 overflow-auto",
-            contentClassName
-          ),
-          children
-        }
-      )
-    ] }),
-    hasSidebar && mobileSidebarOpen && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: "fixed inset-0 z-50 md:hidden",
-        role: "presentation",
-        onClick: () => setMobileSidebarOpen(false),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/40" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "aside",
-            {
-              role: "dialog",
-              "aria-modal": "true",
-              "aria-label": mobileSidebarLabel,
-              className: utils.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
+              hasBodyHeader && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-slot": "app-shell-body-header",
+                  className: utils.cn(
+                    "shrink-0 border-b border-border bg-card",
+                    bodyHeaderClassName
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      "data-slot": "app-shell-body-header-content",
+                      "data-content-width": effectiveContentWidth,
+                      className: utils.cn(
+                        "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",
+                        contentWidth.contentWidthClassName(effectiveContentWidth)
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: bodyHeader }),
+                        bodyActions && /* @__PURE__ */ jsxRuntime.jsx(
+                          "div",
+                          {
+                            "data-slot": "app-shell-body-actions",
+                            className: "flex shrink-0 flex-wrap items-center gap-density-2",
+                            children: bodyActions
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
               ),
-              onClick: (event) => event.stopPropagation(),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-14 shrink-0 items-center justify-between border-b border-sidebar-border px-density-3", children: [
-                  brand && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 items-center gap-2", children: brand }),
+              bodySidebar !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden md:hidden", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
+                    "div",
                     {
-                      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__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiClose.UiClose, className: "h-4 w-4" })
+                      "data-slot": "app-shell-body-sidebar",
+                      className: "max-h-[40vh] shrink-0 overflow-y-auto border-b border-border bg-background",
+                      children: bodySidebar
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "main",
+                    {
+                      "data-slot": "app-shell-main",
+                      className: utils.cn(
+                        "min-h-0 min-w-0 flex-1 overflow-auto",
+                        contentClassName
+                      ),
+                      children
                     }
                   )
                 ] }),
-                sidebarHeader && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-b border-sidebar-border px-density-3 py-density-2", children: sidebarHeader }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-y-auto py-density-2", children: renderSidebarContent(false, () => setMobileSidebarOpen(false)) }),
-                sidebarFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2", children: sidebarFooter })
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-function NavSections({
-  sections,
-  collapsed,
-  onNavigate
-}) {
-  const { renderLink } = router.useRouter();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "nav",
-    {
-      className: utils.cn(
-        "flex flex-col gap-0.5",
-        collapsed ? "px-2" : "px-density-2"
-      ),
-      children: sections.map((section, i) => /* @__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 })),
-        section.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-          NavItemRow,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  SplitPane.SplitPane,
+                  {
+                    className: "hidden min-h-0 flex-1 md:flex",
+                    defaultSplit: bodySplit,
+                    minLeft: 12,
+                    minRight: 30,
+                    left: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "app-shell-body-sidebar", className: "h-full", children: bodySidebar }),
+                    right: /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        "data-slot": "app-shell-main",
+                        className: utils.cn("h-full min-w-0", contentClassName),
+                        children
+                      }
+                    ),
+                    rightClass: "overflow-y-auto"
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+                "main",
+                {
+                  "data-slot": "app-shell-main",
+                  className: utils.cn(
+                    "min-h-0 min-w-0 flex-1 overflow-auto",
+                    contentClassName
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      "data-slot": "app-shell-content",
+                      "data-content-width": contentWidth$1,
+                      className: utils.cn(contentWidth.contentWidthClassName(contentWidth$1), "h-full"),
+                      children
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        hasSidebar && mobileSidebarOpen && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
           {
-            item,
-            collapsed,
-            renderLink,
-            ...onNavigate ? { onNavigate } : {}
-          },
-          item.key
-        ))
-      ] }, section.label ?? `section-${i}`))
+            className: "fixed inset-0 z-50 md:hidden",
+            role: "presentation",
+            onClick: () => setMobileSidebarOpen(false),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/40" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "aside",
+                {
+                  role: "dialog",
+                  "aria-modal": "true",
+                  "aria-label": mobileSidebarLabel,
+                  className: utils.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__ */ jsxRuntime.jsxs("div", { className: "flex h-14 shrink-0 items-center justify-between border-b border-sidebar-border px-density-3", children: [
+                      brand && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 items-center gap-2", children: brand }),
+                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiClose.UiClose, className: "h-4 w-4" })
+                        }
+                      )
+                    ] }),
+                    sidebarHeader && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-b border-sidebar-border px-density-3 py-density-2", children: sidebarHeader }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-y-auto py-density-2", children: renderSidebarContent(false, () => setMobileSidebarOpen(false)) }),
+                    sidebarFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2", children: sidebarFooter })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
     }
   );
 }
-function NavItemRow({
-  item,
-  collapsed,
-  renderLink,
-  onNavigate
-}) {
-  const className = utils.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-      Icon.Icon,
-      {
-        ...typeof item.icon === "string" ? { name: item.icon } : { icon: item.icon }
-      }
-    ) }),
-    !collapsed && /* @__PURE__ */ jsxRuntime.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.external) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "a",
-      {
-        href: item.to,
-        className,
-        title,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        onClick: onNavigate,
-        children: inner
-      }
-    );
-  }
-  const link = renderLink({
-    key: item.key,
-    to: item.to,
-    className,
-    children: inner,
-    ...title ? { title } : {}
-  });
-  if (!onNavigate) return link;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: onNavigate, children: link });
-}
 exports.AppShell = AppShell;
 //# sourceMappingURL=AppShell.cjs.map