@flanksource/clicky-ui 0.3.17 → 0.3.19

package/dist/index.js

@@ -1,7 +1,8 @@
 import { cn } from "./lib/utils.js";
 import { AVATAR_PALETTE, fnv1a32, paletteClass } from "./lib/palette.js";
 import { SIZE_TOKENS, resolveSize } from "./lib/size.js";
-import { formatBytes, formatBytesPerSecond, formatDuration, formatShort, formatUnit } from "./lib/format.js";
+import { PATH_SEPARATOR, buildPathTree, foldersFirst, isPathTreeFolder, splitPath } from "./lib/path-tree.js";
+import { CLICKY_COLUMN_FORMAT_OPTIONS, CLICKY_COLUMN_UNIT_OPTIONS, formatBytes, formatBytesPerSecond, formatDuration, formatShort, formatUnit } from "./lib/format.js";
 import { useOptionalTheme, useResolvedTheme, useTheme } from "./hooks/use-theme.js";
 import { ThemeProvider } from "./hooks/theme-provider.js";
 import { useDensity, useDensityValue } from "./hooks/use-density.js";
@@ -12,12 +13,18 @@ import { useTaskRun, useTaskRuns } from "./hooks/use-task-run.js";
 import { answerPrompt, usePrompts } from "./hooks/use-prompts.js";
 import { formatHotkey, parseHotkey, useHotkey } from "./hooks/use-hotkey.js";
 import { Button } from "./components/button.js";
+import { ErrorWrapper } from "./components/ErrorWrapper.js";
 import { Loading, LoadingBar, 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 { InputField } from "./components/InputField.js";
+import { JSONPathField } from "./components/JSONPathField.js";
+import { JSONPathPlayground } from "./components/JSONPathPlayground.js";
+import { buildJSONPathNode, createLazyJSONPathTree, literalSegments } from "./components/jsonPathTree.js";
 import { SegmentedControl } from "./components/SegmentedControl.js";
+import { TriStateToggle } from "./components/TriStateToggle.js";
+import { nextTriState } from "./components/tri-state.js";
 import { SearchInput } from "./components/SearchInput.js";
 import { Switch } from "./components/Switch.js";
 import { FormatOptionsDropdown } from "./components/FormatOptionsDropdown.js";
@@ -37,11 +44,15 @@ import { useForm } from "./components/use-form.js";
 import { TreePickerField } from "./components/TreePickerField.js";
 import { WorkloadPicker } from "./components/WorkloadPicker.js";
 import { EndpointSelector } from "./components/EndpointSelector.js";
+import { parseEndpointValue, serializeEndpointValue } from "./components/EndpointSelector.model.js";
 import { DEFAULT_PREFERRED_ENDPOINT_PORTS, preferredEndpointPort } from "./components/endpoint-port.js";
 import { NamespacePicker } from "./components/NamespacePicker.js";
 import { kindForValue, loadedWorkloads, parseWorkloadKey, workloadKey } from "./components/workload-picker-utils.js";
 import { SecretKeySelector } from "./components/SecretKeySelector.js";
 import { parseSecretRef, serializeSecretRef } from "./components/SecretKeySelector.model.js";
+import { OnePasswordSelector } from "./components/OnePasswordSelector.js";
+import { buildOnePasswordReference, parseOnePasswordReference } from "./components/OnePasswordSelector.model.js";
+import { createSecretFormExtensions } from "./components/secret-form-extension.js";
 import { ThemeSwitcher } from "./components/theme-switcher.js";
 import { DensitySwitcher } from "./components/density-switcher.js";
 import { IconMenuPicker } from "./components/icon-menu-picker.js";
@@ -55,6 +66,7 @@ import { DEFAULT_PREFERENCES_STORAGE_KEY, readPreferences, writePreferences } fr
 import { effectiveProperties, isOpenStringMap, matchesIf, resolveControl } from "./components/json-schema-form-resolve.js";
 import { rehydrateRefs } from "./components/json-schema-form-refs.js";
 import { templateValuePre } from "./components/json-schema-form-template.js";
+import { applyPostExtensions } from "./components/json-schema-form-extensions.js";
 import { SplitPane } from "./layout/SplitPane.js";
 import { Workspace } from "./layout/Workspace.js";
 import { AppShell } from "./layout/AppShell.js";
@@ -66,8 +78,12 @@ import { DropdownMenu } from "./overlay/DropdownMenu.js";
 import { CellActionButton, CellActions } from "./overlay/CellActions.js";
 import { HoverCard } from "./overlay/HoverCard.js";
 import { Modal } from "./overlay/Modal.js";
-import { useEscapeLayer, useFloatingZIndex, useModalStack } from "./overlay/modalStack.js";
+import { useEscapeLayer, useFloatingZIndex, useModalStack, useTourLayer } from "./overlay/modalStack.js";
 import { zIndex } from "./overlay/zIndex.js";
+import { Tour } from "./overlay/Tour.js";
+import { TourProvider } from "./overlay/TourProvider.js";
+import { useTour } from "./overlay/tour-context.js";
+import { isTourFinished, localStorageTourStorage, memoryTourStorage } from "./overlay/tour-progress.js";
 import { CommandPalette } from "./overlay/CommandPalette.js";
 import { CommandPaletteTrigger } from "./overlay/CommandPaletteTrigger.js";
 import { ToastProvider } from "./overlay/Toast.js";
@@ -81,6 +97,8 @@ import { CodeBlock } from "./data/CodeBlock.js";
 import { CodeDiff } from "./data/CodeDiff.js";
 import { computeLineDiff, parseUnifiedDiff } from "./data/code-diff.js";
 import { inferColumns } from "./data/data-table-utils.js";
+import { parseMultiFilterValue, serializeMultiFilterValue, splitCommaValues, updateFilterSelection } from "./data/data-table-filter-values.js";
+import { DATA_TABLE_FILTER_LOOKUP_LIMIT, serverColumnsToDataTableColumns, serverFiltersToFilterBar } from "./data/data-table-server-filters.js";
 import { DataTable } from "./data/DataTable.js";
 import { groupRecords, isGroupCollapsedByDefault } from "./data/DataTable.grouping.js";
 import { StatStrip } from "./data/StatStrip.js";
@@ -88,6 +106,7 @@ import { EntityCell } from "./data/cells/EntityCell.js";
 import { Timestamp } from "./data/cells/Timestamp.js";
 import { chooseTimestampFormat, formatDateTimeRelative, formatRelativeTime, formatTimestamp, modeToFormat, parseTimestamp } from "./data/cells/timestamp-format.js";
 import { TagActionsProvider, TagList } from "./data/cells/TagList.js";
+import { CellFilterActions } from "./data/cells/CellFilterActions.js";
 import { normalizeTags, splitTagToken, tagActionsFromRecord, tagFilterTokens, useTagActions, useTagActionsValue } from "./data/cells/tag-utils.js";
 import { StatusDot } from "./data/cells/StatusDot.js";
 import { STATUS_TOKEN_GROUPS, normalizeStatus } from "./data/cells/status-mapping.js";
@@ -143,6 +162,7 @@ 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";
 import { TaskManager } from "./data/TaskManager.js";
+import { taskQueryKeys } from "./data/task-query-keys.js";
 import { TaskManagerButton } from "./data/TaskManagerButton.js";
 import { PromptDialog } from "./data/PromptDialog.js";
 import { PromptBanner } from "./data/PromptBanner.js";
@@ -179,6 +199,7 @@ import { OperationCatalog } from "./rpc/OperationCatalog.js";
 import { EntityExplorerApp } from "./rpc/EntityExplorerApp.js";
 import { ACCEPT_OPTIONS, VIEW_OPTIONS } from "./rpc/accept-options.js";
 import { SchemaActionForm } from "./rpc/SchemaActionForm.js";
+import { useOperationLookupFetcher } from "./rpc/operationLookupFetcher.js";
 import { CommandForm } from "./rpc/CommandForm.js";
 import { normalizeParameters, pathParamNames, submitValue } from "./rpc/command-form-utils.js";
 import { CommandOutput } from "./rpc/CommandOutput.js";
@@ -208,6 +229,7 @@ import { CacheValue } from "./data/cache-browser/CacheValue.js";
 import { FixtureEditor } from "./data/FixtureEditor/FixtureEditor.js";
 import { GitChangedFilesSummary, GitCommitList, GitDiffPanel, GitFileList } from "./data/git/GitChangeList.js";
 import { QueryBrowser } from "./data/query-browser/QueryBrowser.js";
+import { QueryBrowserExecutionError } from "./data/query-browser/QueryBrowser.types.js";
 import { STATUS_LABELS, aggregateStatusCounts, collapseSingleChildChains, collectFrameworks, filterTests, formatCount, formatTestDuration, hasFailed, hasPending, humanizeName, statusIconFor, statusToneFor, sum, sumNonTaskTests, testStatus, totalDuration } from "./data/test-runner/status.js";
 import { TestAttempts, TestFailureDetail, TestOutput } from "./data/test-runner/TestFailureDetail.js";
 import { TestDetailPanel } from "./data/test-runner/TestDetailPanel.js";
@@ -539,6 +561,7 @@ import { annotateRoutePaths, findNodeByRoutePath, slugify } from "./data/test-ru
 import { applyFixtureFrontmatterRaw, applyFixtureFrontmatterState, fixtureFrontmatterState, parseFixtureFrontmatter } from "./data/FixtureEditor/fixture-frontmatter.js";
 import { cacheQueryKeys, createCacheClient } from "./data/cache-browser/api.js";
 import { changeIconAliases, getChangeIcon } from "./icons/changeIconAliases.js";
+import { clickyIconProvider, iconsByConsumerName } from "./icons/registry.js";
 import { createChecklistMarkdown, createFenceMarkdown, fixtureFenceKind, fixtureFenceSchemaAliases, fixtureFenceSnippetInfo, parseFixtureYaml, resolveFixtureFenceSchema, schemaKeys, stringifyFixtureYaml } from "./data/FixtureEditor/fixture-blocks.js";
 import { cycleFilterState, decodeFilterState, emptyTestFilters, encodeFilterState, filterStateToRecord, matchesFilterState, recordToFilterState } from "./data/test-runner/filterState.js";
 import { formatGitCommitDateHeader } from "./data/git/git-dates.js";
@@ -555,6 +578,8 @@ export {
   AvatarBadge,
   Badge,
   Button,
+  CLICKY_COLUMN_FORMAT_OPTIONS,
+  CLICKY_COLUMN_UNIT_OPTIONS,
   CLICKY_FORMAT_OPTIONS,
   CacheAdapterRegistry,
   CacheBrowser,
@@ -565,6 +590,7 @@ export {
   CacheValue,
   CellActionButton,
   CellActions,
+  CellFilterActions,
   Clicky,
   ClickyNodeView,
   ClickyTable,
@@ -586,6 +612,7 @@ export {
   CommentThread,
   CommentThreadList,
   CopyBadge,
+  DATA_TABLE_FILTER_LOOKUP_LIMIT,
   DEFAULT_CHECKLIST_CYCLE,
   DEFAULT_COMMENT_STATUSES,
   DEFAULT_FORM_SIZE,
@@ -608,6 +635,7 @@ export {
   EntityCell,
   EntityExplorerApp,
   ErrorDetails,
+  ErrorWrapper,
   ExecutionTree,
   Field,
   FilterBar,
@@ -633,6 +661,8 @@ export {
   IconMenuPicker,
   InlineError,
   InputField,
+  JSONPathField,
+  JSONPathPlayground,
   JsonSchemaForm,
   JsonView,
   JvmStackFrameRow,
@@ -661,6 +691,7 @@ export {
   MultiSelect,
   NamespacePicker,
   ObjectGraph,
+  OnePasswordSelector,
   OperationActionDialog,
   OperationCatalog,
   OperationCommandPage,
@@ -668,6 +699,7 @@ export {
   OperationEntityPage,
   OperationResultView,
   OperationsApiClientError,
+  PATH_SEPARATOR,
   Panel,
   PrettyStackTrace,
   ProgressBar,
@@ -676,6 +708,7 @@ export {
   PromptDialog,
   Properties,
   QueryBrowser,
+  QueryBrowserExecutionError,
   RadialGauge,
   RangeSlider,
   RouterProvider,
@@ -730,11 +763,14 @@ export {
   TimeseriesPanel,
   Timestamp,
   ToastProvider,
+  Tour,
+  TourProvider,
   Tree,
   TreeGroupHeader,
   TreeNode,
   TreePickerField,
   TriStateMultiSelect,
+  TriStateToggle,
   UiActivity,
   UiAdd,
   UiAddFilled,
@@ -1335,12 +1371,16 @@ export {
   applyFilterExtensions,
   applyFixtureFrontmatterRaw,
   applyFixtureFrontmatterState,
+  applyPostExtensions,
   assignAxes,
   authorDisplayName,
   badgeVariants,
   bucketTasks,
   buildCommandHref,
+  buildJSONPathNode,
   buildMarkdownPreviewUrl,
+  buildOnePasswordReference,
+  buildPathTree,
   buildReplyMap,
   buildSchemaTree,
   buildSchemaViewerTree,
@@ -1351,6 +1391,7 @@ export {
   changeIconAliases,
   chooseTimestampFormat,
   clickyFormatForMarkdownPreview,
+  clickyIconProvider,
   clickyRowRecord,
   cn,
   collapseSingleChildChains,
@@ -1367,7 +1408,9 @@ export {
   createCacheRegistry,
   createChecklistMarkdown,
   createFenceMarkdown,
+  createLazyJSONPathTree,
   createOperationsApiClient,
+  createSecretFormExtensions,
   createTestRunnerRegistry,
   cycleFilterState,
   decodeFilterState,
@@ -1396,6 +1439,7 @@ export {
   fixtureFenceSnippetInfo,
   fixtureFrontmatterState,
   fnv1a32,
+  foldersFirst,
   formatBytes,
   formatBytesPerSecond,
   formatCount,
@@ -1424,27 +1468,34 @@ export {
   hasHoverMeta,
   hasPending,
   humanizeName,
+  iconsByConsumerName,
   inferColumns,
   isApplicationStackFrame,
   isGroupCollapsedByDefault,
   isLeaf,
   isOpenStringMap,
+  isPathTreeFolder,
   isPositionalParam,
   isTerminalStatus,
+  isTourFinished,
   isUnresolved,
   kindForValue,
   latestOf,
+  literalSegments,
   loadedWorkloads,
+  localStorageTourStorage,
   logLevelColor,
   makeSurfaceDefinition,
   markdownDocumentStats,
   matchMentionsInBody,
   matchesFilterState,
   matchesIf,
+  memoryTourStorage,
   mergeSeries,
   mockMarkdownPreview,
   modeToFormat,
   nextChecklistStatus,
+  nextTriState,
   normalizeErrorDiagnostics,
   normalizeLogsTableRows,
   normalizeParameters,
@@ -1453,6 +1504,7 @@ export {
   normalizeTags,
   paletteClass,
   parseDiagnosticsStackTrace,
+  parseEndpointValue,
   parseFixtureFrontmatter,
   parseFixtureYaml,
   parseGoroutineDump,
@@ -1461,6 +1513,8 @@ export {
   parseJavaStackTrace,
   parseJsonBody,
   parseJvmThreadDump,
+  parseMultiFilterValue,
+  parseOnePasswordReference,
   parseSecretRef,
   parseServerTiming,
   parseStackDump,
@@ -1486,13 +1540,19 @@ export {
   resolveStatusConfig,
   schemaKeys,
   segment,
+  serializeEndpointValue,
+  serializeMultiFilterValue,
   serializeSecretRef,
   seriesStats,
+  serverColumnsToDataTableColumns,
+  serverFiltersToFilterBar,
   serverTimingCounterSummary,
   serverTimingMetricLabel,
   setFallbackIconProvider,
   slugify,
   sortReplies,
+  splitCommaValues,
+  splitPath,
   splitTagToken,
   statusIconFor,
   statusToneFor,
@@ -1503,6 +1563,7 @@ export {
   sumNonTaskTests,
   tagActionsFromRecord,
   tagFilterTokens,
+  taskQueryKeys,
   taskSegments,
   taskStatusBg,
   taskStatusColor,
@@ -1512,6 +1573,7 @@ export {
   toneToBadgeTone,
   totalDuration,
   truncatePlain,
+  updateFilterSelection,
   useBrowserRouter,
   useCommentAnchorActionsOptional,
   useCommentAnchorOptional,
@@ -1530,6 +1592,7 @@ export {
   useModalStack,
   useOpenAPI,
   useOperationById,
+  useOperationLookupFetcher,
   useOperations,
   useOptionalTheme,
   usePrompts,
@@ -1543,6 +1606,8 @@ export {
   useTestRunner,
   useTheme,
   useToast,
+  useTour,
+  useTourLayer,
   withBasePath,
   workloadKey,
   workloadKindLabel,

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

@@ -16,6 +16,34 @@ function readStored(key) {
   if (!key || typeof window === "undefined") return null;
   return window.localStorage.getItem(key);
 }
+const DEFAULT_GROUP_COLLAPSE_KEY = "clicky-ui:app-shell:groups";
+function readGroupState(storageKey) {
+  if (typeof window === "undefined") return {};
+  try {
+    const raw = window.localStorage.getItem(storageKey);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    return parsed && typeof parsed === "object" ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+function useGroupCollapsed(storageKey) {
+  const [state, setState] = 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 AppShell(props) {
   const {
     brand,
@@ -32,6 +60,7 @@ function AppShell(props) {
     collapsible = true,
     defaultCollapsed = false,
     collapsedStorageKey,
+    groupCollapsedStorageKey,
     sidebarWidth = 240,
     collapsedWidth = 56,
     mobileSidebarLabel = "Navigation",
@@ -59,8 +88,10 @@ function AppShell(props) {
       window.localStorage.setItem(collapsedStorageKey, String(collapsed));
   }, [collapsed, collapsedStorageKey]);
   modalStack.useEscapeLayer(mobileSidebarOpen, () => setMobileSidebarOpen(false));
+  const groupState = useGroupCollapsed(
+    groupCollapsedStorageKey ?? DEFAULT_GROUP_COLLAPSE_KEY
+  );
   const railWidth = collapsed ? collapsedWidth : sidebarWidth;
-  const compactActions = mobileActions ?? actions;
   const hasTopBar = !hasSidebar && brand !== void 0 || nav !== void 0 || search !== void 0 || actions !== void 0 || mobileActions !== void 0 || toolbar !== void 0;
   const hasMobileHeader = hasSidebar;
   const hasBodyHeader = bodyHeader !== void 0 || bodyActions !== void 0;
@@ -70,6 +101,7 @@ function AppShell(props) {
     {
       sections: navSections,
       collapsed: collapsedValue,
+      groupState,
       ...onNavigate ? { onNavigate } : {}
     }
   );
@@ -145,56 +177,71 @@ function AppShell(props) {
                   "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",
+                          hasSidebar ? "flex flex-wrap items-center gap-density-2 px-density-3 py-density-2 md:h-14 md:flex-nowrap md:gap-density-3 md:px-density-4 md:py-0" : "flex h-14 items-center gap-density-3 px-density-4",
                           headerClassName
                         ),
                         children: [
-                          !hasSidebar && brand && /* @__PURE__ */ jsxRuntime.jsx(
+                          hasSidebar && /* @__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 md:hidden",
+                              onClick: () => setMobileSidebarOpen(true),
+                              children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiMenu.UiMenu, className: "h-4 w-4" })
+                            }
+                          ),
+                          brand && /* @__PURE__ */ jsxRuntime.jsx(
                             "div",
                             {
                               "data-slot": "app-shell-brand",
-                              className: "flex shrink-0 items-center gap-density-2",
+                              className: utils.cn(
+                                "min-w-0 items-center gap-density-2",
+                                hasSidebar ? "flex flex-1 md:hidden" : "flex shrink-0"
+                              ),
                               children: brand
                             }
                           ),
-                          nav && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "app-shell-nav", className: "flex shrink-0 items-center", children: nav }),
+                          nav && /* @__PURE__ */ jsxRuntime.jsx(
+                            "div",
+                            {
+                              "data-slot": "app-shell-nav",
+                              className: utils.cn(
+                                "flex min-w-0 items-center",
+                                hasSidebar && "order-3 basis-full overflow-x-auto md:order-none md:basis-auto md:overflow-visible"
+                              ),
+                              children: nav
+                            }
+                          ),
                           search !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
                             "div",
                             {
                               "data-slot": "app-shell-search",
-                              className: "flex min-w-0 flex-1 justify-center",
+                              className: utils.cn(
+                                "flex min-w-0 flex-1 justify-center",
+                                hasSidebar && "order-2 basis-full md:order-none md:basis-auto md:flex-1"
+                              ),
                               children: /* @__PURE__ */ 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(
+                          search === void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("flex-1", hasSidebar && "hidden md:block") }),
+                          (actions !== void 0 || hasSidebar && mobileActions !== void 0) && /* @__PURE__ */ jsxRuntime.jsx(
                             "div",
                             {
                               "data-slot": "app-shell-actions",
-                              className: "flex shrink-0 items-center gap-density-2",
-                              children: actions
+                              className: utils.cn(
+                                "flex shrink-0 items-center gap-density-2",
+                                hasSidebar && "order-1 ml-auto md:order-none md:ml-0"
+                              ),
+                              children: !hasSidebar || mobileActions === void 0 ? actions : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden items-center gap-density-2 md:flex", children: actions }),
+                                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-density-2 md:hidden", children: mobileActions })
+                              ] })
                             }
                           )
                         ]
@@ -246,48 +293,37 @@ function AppShell(props) {
                   )
                 }
               ),
-              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(
+              bodySidebar !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                SplitPane.SplitPane,
+                {
+                  stackOnMobile: true,
+                  className: "min-h-0 flex-1",
+                  defaultSplit: bodySplit,
+                  minLeft: 12,
+                  minRight: 30,
+                  left: /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
                       "data-slot": "app-shell-body-sidebar",
-                      className: "max-h-[40vh] shrink-0 overflow-y-auto border-b border-border bg-background",
+                      className: "h-full",
                       children: bodySidebar
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
+                  right: /* @__PURE__ */ jsxRuntime.jsx(
                     "main",
                     {
                       "data-slot": "app-shell-main",
                       className: utils.cn(
-                        "min-h-0 min-w-0 flex-1 overflow-auto",
+                        "h-full min-h-0 min-w-0 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: /* @__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(
+                  ),
+                  leftClass: "max-h-[40vh] shrink-0 border-b border-border md:max-h-none md:border-b-0",
+                  rightClass: "min-h-0 flex-1 md:flex-none"
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
                 "main",
                 {
                   "data-slot": "app-shell-main",