@flanksource/clicky-ui 0.2.19 → 0.2.20

package/dist/index.js

@@ -14,6 +14,9 @@ import { Loading, LoadingDots } from "./components/loading.js";
 import { buttonVariants } from "./components/button-variants.js";
 import { IconButton } from "./components/IconButton.js";
 import { SplitButton } from "./components/SplitButton.js";
+import { SegmentedControl } from "./components/SegmentedControl.js";
+import { SearchInput } from "./components/SearchInput.js";
+import { Switch } from "./components/Switch.js";
 import { FormatOptionsDropdown } from "./components/FormatOptionsDropdown.js";
 import { CLICKY_FORMAT_OPTIONS } from "./components/format-options.js";
 import { DateField } from "./components/DateField.js";
@@ -21,7 +24,8 @@ import { DatePicker } from "./components/DatePicker.js";
 import { DateTimePicker } from "./components/DateTimePicker.js";
 import { TimeRange } from "./components/TimeRange.js";
 import { RangeSlider } from "./components/RangeSlider.js";
-import { FilterBar, TriStateMultiSelect, applyFilterExtensions } from "./components/FilterBar.js";
+import { FilterBar, TriStateMultiSelect } from "./components/FilterBar.js";
+import { applyFilterExtensions } from "./components/filter-bar-utils.js";
 import { MultiSelect } from "./components/MultiSelect.js";
 import { Select } from "./components/select.js";
 import { Combobox } from "./components/Combobox.js";
@@ -40,6 +44,7 @@ import { DEFAULT_PREFERENCES_STORAGE_KEY, readPreferences, writePreferences } fr
 import { effectiveProperties, isOpenStringMap, matchesIf, resolveControl } from "./components/json-schema-form-resolve.js";
 import { SplitPane } from "./layout/SplitPane.js";
 import { AppShell } from "./layout/AppShell.js";
+import { AppLayout, AppSidebar } from "./layout/AppSidebar.js";
 import { Panel } from "./layout/Panel.js";
 import { Tabs } from "./layout/Tabs.js";
 import { DetailEmptyState, Section } from "./layout/Section.js";
@@ -47,6 +52,8 @@ import { DropdownMenu } from "./overlay/DropdownMenu.js";
 import { HoverCard } from "./overlay/HoverCard.js";
 import { Modal } from "./overlay/Modal.js";
 import { useModalStack } from "./overlay/modalStack.js";
+import { ToastProvider } from "./overlay/Toast.js";
+import { useToast } from "./overlay/toast-context.js";
 import { AnsiHtml } from "./data/AnsiHtml.js";
 import { Avatar } from "./data/Avatar.js";
 import { AvatarBadge } from "./data/AvatarBadge.js";
@@ -63,7 +70,9 @@ import { StatusDot } from "./data/cells/StatusDot.js";
 import { STATUS_TOKEN_GROUPS, normalizeStatus } from "./data/cells/status-mapping.js";
 import { FilterPill, FilterPillGroup, FilterSeparator } from "./data/FilterPill.js";
 import { Gauge } from "./data/Gauge.js";
-import { Icon, LabelIcon, setFallbackIconProvider } from "./data/Icon.js";
+import { RadialGauge } from "./data/RadialGauge.js";
+import { Icon, LabelIcon } from "./data/Icon.js";
+import { setFallbackIconProvider } from "./data/icon-fallback.js";
 import { JsonView } from "./data/JsonView.js";
 import { KeyValueList } from "./data/KeyValueList.js";
 import { Properties } from "./data/Properties.js";
@@ -78,15 +87,20 @@ import { ProgressBar } from "./data/ProgressBar.js";
 import { SignedDeltaBar } from "./data/SignedDeltaBar.js";
 import { SortableHeader } from "./data/SortableHeader.js";
 import { TabButton } from "./data/TabButton.js";
-import { TimeseriesPanel, resolveBreakdown, resolveSeries } from "./data/TimeseriesPanel.js";
+import { TimeseriesPanel } from "./data/TimeseriesPanel.js";
+import { mergeSeries, resolveBreakdown, resolveSeries } from "./data/TimeseriesPanel.model.js";
+import { assignAxes, latestOf } from "./data/TimeseriesPanel.axes.js";
 import { TimeseriesGauge } from "./data/TimeseriesGauge.js";
-import { TimeseriesCoreBars, deriveCoreBars } from "./data/TimeseriesCoreBars.js";
-import { StackedStatusBar, StatusRows, segment } from "./data/StatusBreakdown.js";
+import { TimeseriesCoreBars } from "./data/TimeseriesCoreBars.js";
+import { deriveCoreBars } from "./data/TimeseriesCoreBars.model.js";
+import { StackedStatusBar, StatusRows } from "./data/StatusBreakdown.js";
+import { segment } from "./data/status-breakdown-utils.js";
 import { Version } from "./data/Version.js";
 import { getVersionInfo } from "./data/version-info.js";
 import { Tree } from "./data/Tree.js";
 import { TreeNode } from "./data/TreeNode.js";
 import { TreeGroupHeader } from "./data/TreeGroupHeader.js";
+import { Timeline } from "./data/Timeline.js";
 import { allGroupsTerminal, isTerminalStatus } from "./data/TaskSnapshot.js";
 import { bucketTasks, logLevelColor, taskSegments, taskStatusBg, taskStatusColor, taskStatusIcon } from "./data/task-status.js";
 import { TaskProgress } from "./data/TaskProgress.js";
@@ -97,7 +111,8 @@ import { countProcesses, findProcessByPID, processLabel, processStateColor, proc
 import { countGoroutinesByState, countStackByState, detectDumpFormat, parseGoroutineDump, parseStackDump } from "./data/diagnostics/stacktrace.js";
 import { countThreadsByState, parseJvmThreadDump } from "./data/diagnostics/jvm-stacktrace.js";
 import { JvmStackFrameRow, JvmStackTrace } from "./data/diagnostics/JvmStackTrace.js";
-import { FrameSourceWindow, frameHasSource } from "./data/diagnostics/FrameSourceWindow.js";
+import { FrameSourceWindow } from "./data/diagnostics/FrameSourceWindow.js";
+import { frameHasSource } from "./data/diagnostics/FrameSourceWindow.utils.js";
 import { StackTrace } from "./data/diagnostics/RenderedStackTrace.js";
 import { parseJavaStackTrace } from "./data/diagnostics/stacktrace-parse.js";
 import { CopyBadge, ErrorDetails, PrettyStackTrace } from "./data/diagnostics/ErrorDetails.js";
@@ -109,6 +124,7 @@ import { EntityExplorerApp } from "./rpc/EntityExplorerApp.js";
 import { AcceptPicker } from "./rpc/AcceptPicker.js";
 import { ACCEPT_OPTIONS, VIEW_OPTIONS } from "./rpc/accept-options.js";
 import { CommandForm } from "./rpc/CommandForm.js";
+import { normalizeParameters, pathParamNames, submitValue } from "./rpc/command-form-utils.js";
 import { CommandOutput } from "./rpc/CommandOutput.js";
 import { FilterForm } from "./rpc/FilterForm.js";
 import { InlineError } from "./rpc/InlineError.js";
@@ -119,6 +135,10 @@ import { EndpointList } from "./rpc/EndpointList.js";
 import { useOpenAPI, useOperationById, useOperations } from "./rpc/useOperations.js";
 import { OperationsApiClientError, createOperationsApiClient } from "./rpc/apiClient.js";
 import { filterOperationsByDomain, findDetailEndpoint, findListEndpoint, normalizeRows, parseJsonBody } from "./rpc/classify.js";
+import { findSurfaceListOperation, getClickySurfaces, makeSurfaceDefinition } from "./rpc/clickyMetadata.js";
+import { buildCommandHref, withBasePath } from "./rpc/commandHref.js";
+import { useBrowserRouter, useMemoryRouter, useRouter } from "./rpc/router.js";
+import { RouterProvider } from "./rpc/RouterProvider.js";
 import { isPositionalParam } from "./rpc/types.js";
 import { CacheAdapterRegistry, createCacheRegistry, prefixAdapter } from "./data/cache-browser/adapter.js";
 import { CacheBrowser } from "./data/cache-browser/CacheBrowser.js";
@@ -406,7 +426,9 @@ export {
   AVATAR_PALETTE,
   AcceptPicker,
   AnsiHtml,
+  AppLayout,
   AppShell,
+  AppSidebar,
   Avatar,
   AvatarBadge,
   Badge,
@@ -482,11 +504,15 @@ export {
   PrettyStackTrace,
   ProgressBar,
   Properties,
+  RadialGauge,
   RangeSlider,
+  RouterProvider,
   SIZE_TOKENS,
   STATUS_TOKEN_GROUPS,
+  SearchInput,
   SecretKeySelector,
   Section,
+  SegmentedControl,
   Select,
   SignedDeltaBar,
   SortableHeader,
@@ -496,6 +522,7 @@ export {
   StackedStatusBar,
   StatusDot,
   StatusRows,
+  Switch,
   TabButton,
   Tabs,
   TagActionsProvider,
@@ -516,10 +543,12 @@ export {
   ThemeProvider,
   ThemeSwitcher,
   TimeRange,
+  Timeline,
   TimeseriesCoreBars,
   TimeseriesGauge,
   TimeseriesPanel,
   Timestamp,
+  ToastProvider,
   Tree,
   TreeGroupHeader,
   TreeNode,
@@ -1020,8 +1049,10 @@ export {
   allGroupsTerminal,
   annotateRoutePaths,
   applyFilterExtensions,
+  assignAxes,
   badgeVariants,
   bucketTasks,
+  buildCommandHref,
   buttonVariants,
   cacheQueryKeys,
   changeIconAliases,
@@ -1051,6 +1082,7 @@ export {
   findListEndpoint,
   findNodeByRoutePath,
   findProcessByPID,
+  findSurfaceListOperation,
   fnv1a32,
   formatBytes,
   formatBytesPerSecond,
@@ -1066,6 +1098,7 @@ export {
   frameHasSource,
   frameworkIcon,
   getChangeIcon,
+  getClickySurfaces,
   getVersionInfo,
   hasFailed,
   hasPending,
@@ -1077,13 +1110,17 @@ export {
   isPositionalParam,
   isTerminalStatus,
   kindForValue,
+  latestOf,
   loadedWorkloads,
   logLevelColor,
+  makeSurfaceDefinition,
   matchesFilterState,
   matchesIf,
+  mergeSeries,
   modeToFormat,
   normalizeErrorDiagnostics,
   normalizeLogsTableRows,
+  normalizeParameters,
   normalizeRows,
   normalizeStatus,
   normalizeTags,
@@ -1097,6 +1134,7 @@ export {
   parseStackDump,
   parseTimestamp,
   parseWorkloadKey,
+  pathParamNames,
   prefixAdapter,
   processLabel,
   processStateColor,
@@ -1112,6 +1150,7 @@ export {
   splitTagToken,
   statusIconFor,
   statusToneFor,
+  submitValue,
   sum,
   sumNonTaskTests,
   tagActionsFromRecord,
@@ -1122,16 +1161,19 @@ export {
   taskStatusIcon,
   testStatus,
   totalDuration,
+  useBrowserRouter,
   useDensity,
   useDensityValue,
   useForm,
   useHistoryRoute,
+  useMemoryRouter,
   useModalStack,
   useOpenAPI,
   useOperationById,
   useOperations,
   useOptionalTheme,
   useResolvedTheme,
+  useRouter,
   useSort,
   useTagActions,
   useTagActionsValue,
@@ -1139,6 +1181,8 @@ export {
   useTaskRuns,
   useTestRunner,
   useTheme,
+  useToast,
+  withBasePath,
   workloadKey,
   writePreferences
 };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/layout/AppShell.cjs

@@ -4,8 +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 SplitPane = require("./SplitPane.cjs");
 const UiSidebar = require("../icons/components/UiSidebar.cjs");
+const UiMenu = require("../icons/components/UiMenu.cjs");
+const UiClose = require("../icons/components/UiClose.cjs");
 function readStored(key) {
   if (!key || typeof window === "undefined") return null;
   return window.localStorage.getItem(key);
@@ -27,6 +30,7 @@ function AppShell(props) {
     collapsedStorageKey,
     sidebarWidth = 240,
     collapsedWidth = 56,
+    mobileSidebarLabel = "Navigation",
     bodyHeader,
     bodyActions,
     bodySidebar,
@@ -40,6 +44,7 @@ function AppShell(props) {
     contentClassName
   } = props;
   const hasSidebar = sidebar !== void 0 || ((navSections == null ? void 0 : navSections.length) ?? 0) > 0;
+  const [mobileSidebarOpen, setMobileSidebarOpen] = react.useState(false);
   const [collapsed, setCollapsed] = react.useState(
     () => readStored(collapsedStorageKey) === "true" || readStored(collapsedStorageKey) === null && defaultCollapsed
   );
@@ -47,16 +52,33 @@ function AppShell(props) {
     if (collapsedStorageKey && typeof window !== "undefined")
       window.localStorage.setItem(collapsedStorageKey, String(collapsed));
   }, [collapsed, collapsedStorageKey]);
+  react.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__ */ jsxRuntime.jsx(
+    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(
-          "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: [
@@ -84,17 +106,38 @@ function AppShell(props) {
             }
           ),
           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: typeof sidebar === "function" ? sidebar(collapsed) : sidebar !== void 0 ? sidebar : navSections && /* @__PURE__ */ jsxRuntime.jsx(NavSections, { sections: navSections, collapsed }) }),
+          /* @__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 && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "shrink-0 border-b border-border bg-card", 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 }),
+          actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex shrink-0 items-center gap-density-2", children: actions }),
+          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("flex h-14 items-center gap-density-3 px-density-4", headerClassName),
+            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", { className: "flex shrink-0 items-center gap-density-2", children: brand }),
               nav && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center", children: nav }),
@@ -108,7 +151,7 @@ function AppShell(props) {
           "div",
           {
             className: utils.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
@@ -119,64 +162,171 @@ function AppShell(props) {
         "div",
         {
           className: utils.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__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: bodyHeader }),
-            bodyActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-density-2", children: bodyActions })
+            bodyActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-density-2", children: bodyActions })
           ]
         }
       ),
-      bodySidebar !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-        SplitPane.SplitPane,
+      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
+              ),
+              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: "min-h-0 flex-1",
-          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"
+          className: utils.cn(
+            "min-h-0 min-w-0 flex-1 overflow-auto",
+            contentClassName
+          ),
+          children
         }
-      ) : /* @__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
+              ),
+              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 NavSections({
   sections,
-  collapsed
+  collapsed,
+  onNavigate
 }) {
-  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, { item, collapsed }, item.key))
-  ] }, section.label ?? `section-${i}`)) });
+  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,
+          {
+            item,
+            collapsed,
+            renderLink,
+            ...onNavigate ? { onNavigate } : {}
+          },
+          item.key
+        ))
+      ] }, section.label ?? `section-${i}`))
+    }
+  );
 }
-function NavItemRow({ item, collapsed }) {
+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 } }) }),
+    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.href) {
+  if (item.external) {
     return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { onClick: onNavigate, children: link });
 }
 exports.AppShell = AppShell;
 //# sourceMappingURL=AppShell.cjs.map