@flanksource/clicky-ui 0.3.16 → 0.3.18

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,16 @@ 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 { 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";
@@ -55,6 +60,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 +72,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 +91,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 +100,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";
@@ -124,6 +137,8 @@ import { ProgressBars } from "./data/ProgressBars.js";
 import { deriveProgressBars } from "./data/ProgressBars.model.js";
 import { TimeseriesCoreBars } from "./data/TimeseriesCoreBars.js";
 import { GaugeHoverCard } from "./data/GaugeHoverCard.js";
+import { ServerTimingBadge } from "./data/ServerTimingBadge.js";
+import { formatServerTimingDuration, parseServerTiming, serverTimingCounterSummary, serverTimingMetricLabel } from "./data/server-timing.js";
 import { seriesStats } from "./data/gauge-stats.js";
 import { WorkloadCard } from "./data/WorkloadCard.js";
 import { formatReplicaCounts, workloadKindLabel, workloadStatusLabel, workloadStatusTone } from "./data/WorkloadCard.model.js";
@@ -141,6 +156,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";
@@ -177,6 +193,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";
@@ -537,6 +554,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";
@@ -553,6 +571,8 @@ export {
   AvatarBadge,
   Badge,
   Button,
+  CLICKY_COLUMN_FORMAT_OPTIONS,
+  CLICKY_COLUMN_UNIT_OPTIONS,
   CLICKY_FORMAT_OPTIONS,
   CacheAdapterRegistry,
   CacheBrowser,
@@ -563,6 +583,7 @@ export {
   CacheValue,
   CellActionButton,
   CellActions,
+  CellFilterActions,
   Clicky,
   ClickyNodeView,
   ClickyTable,
@@ -584,6 +605,7 @@ export {
   CommentThread,
   CommentThreadList,
   CopyBadge,
+  DATA_TABLE_FILTER_LOOKUP_LIMIT,
   DEFAULT_CHECKLIST_CYCLE,
   DEFAULT_COMMENT_STATUSES,
   DEFAULT_FORM_SIZE,
@@ -606,6 +628,7 @@ export {
   EntityCell,
   EntityExplorerApp,
   ErrorDetails,
+  ErrorWrapper,
   ExecutionTree,
   Field,
   FilterBar,
@@ -631,6 +654,7 @@ export {
   IconMenuPicker,
   InlineError,
   InputField,
+  JSONPathField,
   JsonSchemaForm,
   JsonView,
   JvmStackFrameRow,
@@ -666,6 +690,7 @@ export {
   OperationEntityPage,
   OperationResultView,
   OperationsApiClientError,
+  PATH_SEPARATOR,
   Panel,
   PrettyStackTrace,
   ProgressBar,
@@ -690,6 +715,7 @@ export {
   Section,
   SegmentedControl,
   Select,
+  ServerTimingBadge,
   SignedDeltaBar,
   SortableHeader,
   SplitButton,
@@ -727,11 +753,14 @@ export {
   TimeseriesPanel,
   Timestamp,
   ToastProvider,
+  Tour,
+  TourProvider,
   Tree,
   TreeGroupHeader,
   TreeNode,
   TreePickerField,
   TriStateMultiSelect,
+  TriStateToggle,
   UiActivity,
   UiAdd,
   UiAddFilled,
@@ -1332,12 +1361,14 @@ export {
   applyFilterExtensions,
   applyFixtureFrontmatterRaw,
   applyFixtureFrontmatterState,
+  applyPostExtensions,
   assignAxes,
   authorDisplayName,
   badgeVariants,
   bucketTasks,
   buildCommandHref,
   buildMarkdownPreviewUrl,
+  buildPathTree,
   buildReplyMap,
   buildSchemaTree,
   buildSchemaViewerTree,
@@ -1348,6 +1379,7 @@ export {
   changeIconAliases,
   chooseTimestampFormat,
   clickyFormatForMarkdownPreview,
+  clickyIconProvider,
   clickyRowRecord,
   cn,
   collapseSingleChildChains,
@@ -1393,6 +1425,7 @@ export {
   fixtureFenceSnippetInfo,
   fixtureFrontmatterState,
   fnv1a32,
+  foldersFirst,
   formatBytes,
   formatBytesPerSecond,
   formatCount,
@@ -1403,6 +1436,7 @@ export {
   formatPropertyLabel,
   formatRelativeTime,
   formatReplicaCounts,
+  formatServerTimingDuration,
   formatShort,
   formatTestDuration,
   formatTimestamp,
@@ -1420,27 +1454,33 @@ export {
   hasHoverMeta,
   hasPending,
   humanizeName,
+  iconsByConsumerName,
   inferColumns,
   isApplicationStackFrame,
   isGroupCollapsedByDefault,
   isLeaf,
   isOpenStringMap,
+  isPathTreeFolder,
   isPositionalParam,
   isTerminalStatus,
+  isTourFinished,
   isUnresolved,
   kindForValue,
   latestOf,
   loadedWorkloads,
+  localStorageTourStorage,
   logLevelColor,
   makeSurfaceDefinition,
   markdownDocumentStats,
   matchMentionsInBody,
   matchesFilterState,
   matchesIf,
+  memoryTourStorage,
   mergeSeries,
   mockMarkdownPreview,
   modeToFormat,
   nextChecklistStatus,
+  nextTriState,
   normalizeErrorDiagnostics,
   normalizeLogsTableRows,
   normalizeParameters,
@@ -1457,7 +1497,9 @@ export {
   parseJavaStackTrace,
   parseJsonBody,
   parseJvmThreadDump,
+  parseMultiFilterValue,
   parseSecretRef,
+  parseServerTiming,
   parseStackDump,
   parseTimestamp,
   parseUnifiedDiff,
@@ -1481,11 +1523,18 @@ export {
   resolveStatusConfig,
   schemaKeys,
   segment,
+  serializeMultiFilterValue,
   serializeSecretRef,
   seriesStats,
+  serverColumnsToDataTableColumns,
+  serverFiltersToFilterBar,
+  serverTimingCounterSummary,
+  serverTimingMetricLabel,
   setFallbackIconProvider,
   slugify,
   sortReplies,
+  splitCommaValues,
+  splitPath,
   splitTagToken,
   statusIconFor,
   statusToneFor,
@@ -1496,6 +1545,7 @@ export {
   sumNonTaskTests,
   tagActionsFromRecord,
   tagFilterTokens,
+  taskQueryKeys,
   taskSegments,
   taskStatusBg,
   taskStatusColor,
@@ -1505,6 +1555,7 @@ export {
   toneToBadgeTone,
   totalDuration,
   truncatePlain,
+  updateFilterSelection,
   useBrowserRouter,
   useCommentAnchorActionsOptional,
   useCommentAnchorOptional,
@@ -1523,6 +1574,7 @@ export {
   useModalStack,
   useOpenAPI,
   useOperationById,
+  useOperationLookupFetcher,
   useOperations,
   useOptionalTheme,
   usePrompts,
@@ -1536,6 +1588,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",
@@ -300,7 +336,7 @@ function AppShell(props) {
                     {
                       "data-slot": "app-shell-content",
                       "data-content-width": contentWidth$1,
-                      className: contentWidth.contentWidthClassName(contentWidth$1),
+                      className: utils.cn(contentWidth.contentWidthClassName(contentWidth$1), "h-full"),
                       children
                     }
                   )