@marktiderman/genesis-ui 1.2.0 → 1.3.0

package/dist/components/data/index.js

@@ -3,31 +3,35 @@ import { Spinner } from '../../chunk-OVU3Z2MT.js';
 import { Switch } from '../../chunk-2MXMWBDV.js';
 import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../../chunk-N2ZFNOOT.js';
 import { Textarea } from '../../chunk-YETMISCE.js';
+import { Progress } from '../../chunk-W5Y3LG5K.js';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../chunk-2B3MFHBQ.js';
 import { Separator } from '../../chunk-SXSCHWZU.js';
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '../../chunk-SCUT2ZCD.js';
 import { Skeleton } from '../../chunk-QFM4Z2SS.js';
-import { Progress } from '../../chunk-W5Y3LG5K.js';
+import { Input } from '../../chunk-QSXVL5UB.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../../chunk-NJMO3VPA.js';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuSeparator, DropdownMenuItem } from '../../chunk-SBJV3K4G.js';
 import { FormField, FormLabel, FormError, FormDescription } from '../../chunk-IP6TMT3D.js';
-import '../../chunk-T5VX5DYO.js';
-import { Input } from '../../chunk-QSXVL5UB.js';
+import { Label } from '../../chunk-T5VX5DYO.js';
+import { Card, CardContent, CardHeader, CardTitle } from '../../chunk-FN3FZVUR.js';
 import { Checkbox } from '../../chunk-WZWR2ELB.js';
-import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator } from '../../chunk-7OBL3H5P.js';
-import { Popover, PopoverTrigger, PopoverContent } from '../../chunk-NJMO3VPA.js';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from '../../chunk-YZEA5TGK.js';
+import { Collapsible, CollapsibleContent } from '../../chunk-KBS4BHME.js';
 import { Badge } from '../../chunk-NPNADZHM.js';
-import { Button } from '../../chunk-I6JQHP6D.js';
-import { Card, CardContent, CardHeader, CardTitle } from '../../chunk-FN3FZVUR.js';
-import { cn } from '../../chunk-NZ5WBA4R.js';
+import { Button } from '../../chunk-ZJFSZFPI.js';
 import { titleCase, useResourcePage } from '../../chunk-QLCDAFS7.js';
+export { useSavedViews } from '../../chunk-GCQFVMPI.js';
 import '../../chunk-XISSLIMH.js';
-import { DefaultLink, defaultNavigate, isPathActive } from '../../chunk-AI6CCNWK.js';
-export { DefaultLink, defaultNavigate, isPathActive } from '../../chunk-AI6CCNWK.js';
+import { useViewSettings } from '../../chunk-OZ7ZAYCS.js';
+export { CommandPalette, useCommandPaletteHotkey } from '../../chunk-A2OXCNNY.js';
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator } from '../../chunk-7OBL3H5P.js';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from '../../chunk-YZEA5TGK.js';
+import { cn } from '../../chunk-NZ5WBA4R.js';
+import { DefaultLink, defaultNavigate, isPathActive } from '../../chunk-6NPEMLBA.js';
+export { DefaultLink, defaultNavigate, isPathActive } from '../../chunk-6NPEMLBA.js';
 import { useIsMobile } from '../../chunk-M7AU5DDM.js';
-import { Search, LayoutGrid, Table2, List, Settings2, AlertTriangle, RefreshCw, ChevronDown, Check, X, ArrowUpDown, Bookmark, Trash2, BookmarkPlus, Loader2, Columns3, ArrowUp, ArrowDown, ChevronLeft, ChevronRight, ExternalLink, Pencil, ChevronsUpDown, ImageIcon, Upload, AlertCircle, FileIcon, Menu, Sun, Moon, Plus } from 'lucide-react';
+import { Search, LayoutGrid, Table2, List, Settings2, ListFilter, SlidersHorizontal, AlertTriangle, RefreshCw, ChevronDown, Check, X, ArrowUpDown, Bookmark, Trash2, BookmarkPlus, Loader2, Columns3, ArrowUp, ArrowDown, ChevronLeft, ChevronRight, ExternalLink, Pencil, ChevronsUpDown, ImageIcon, Upload, AlertCircle, FileIcon, Menu, PanelLeft, PanelLeftClose, Sun, Moon, Plus } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { useId, useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import { formatDistanceToNow, format } from 'date-fns';
 import { useFieldArray, Controller, useWatch } from 'react-hook-form';
 import { useResource, useWizard, useResourceForm, buildArrayItemDefaults } from '@marktiderman/genesis-core/hooks';
@@ -143,9 +147,330 @@ function ViewSettings({
     ] })
   ] });
 }
-function DataPageShell({
+
+// src/option-storage.ts
+function readStoredOptions(key) {
+  if (typeof window === "undefined") return {};
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== "object") return {};
+    return parsed;
+  } catch {
+    return {};
+  }
+}
+function writeStoredOptions(key, value) {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+  }
+}
+function pluralizeEntity(entity, count) {
+  if (count === 1) return entity;
+  return entity.endsWith("s") ? entity : `${entity}s`;
+}
+var OPTION_DEFAULTS = {
+  showIcon: true,
+  showSubtitle: true,
+  showCount: true,
+  showViewToggle: true,
+  showViewSettings: true,
+  showCreate: true,
+  showDetailsToggle: true,
+  showDetailsHint: true,
+  subtitleInDetails: void 0,
+  defaultDetailsOpen: false,
+  detailsLabel: "Details",
+  configurable: void 0
+};
+var BOOLEAN_OPTION_KEYS = [
+  "showIcon",
+  "showSubtitle",
+  "showCount",
+  "showViewToggle",
+  "showViewSettings",
+  "showCreate",
+  "showDetailsToggle",
+  "showDetailsHint",
+  "subtitleInDetails",
+  "defaultDetailsOpen",
+  "configurable"
+];
+var STRING_OPTION_KEYS = ["detailsLabel"];
+function readStoredOptions2(key) {
+  const raw = readStoredOptions(key);
+  const sanitized = {};
+  for (const optKey of BOOLEAN_OPTION_KEYS) {
+    const value = raw[optKey];
+    if (typeof value === "boolean") {
+      sanitized[optKey] = value;
+    }
+  }
+  for (const optKey of STRING_OPTION_KEYS) {
+    const value = raw[optKey];
+    if (typeof value === "string") {
+      sanitized[optKey] = value;
+    }
+  }
+  return sanitized;
+}
+function PageHeader({
   title,
+  subtitle,
   icon: Icon,
+  options: optionsProp,
+  optionsStorageKey,
+  actions,
+  details,
+  detailsOpen,
+  onDetailsOpenChange,
+  detailsActive = false,
+  detailsHint,
+  count,
+  totalCount,
+  entityName,
+  countActive = false,
+  viewMode,
+  onViewModeChange,
+  pageSize,
+  onPageSizeChange,
+  density,
+  onDensityChange,
+  createAction
+}) {
+  const detailsRegionId = useId();
+  const hasDetails = details != null;
+  const hasCount = count !== void 0 && totalCount !== void 0;
+  const hasViewToggle = Boolean(viewMode && onViewModeChange);
+  const hasViewSettings = Boolean(onPageSizeChange && onDensityChange);
+  const hasCreate = createAction != null;
+  const [userOverrides, setUserOverrides] = useState(
+    {}
+  );
+  const [hydratedKey, setHydratedKey] = useState(
+    optionsStorageKey ? void 0 : ""
+  );
+  useEffect(() => {
+    if (!optionsStorageKey) {
+      setUserOverrides({});
+      setHydratedKey("");
+      return;
+    }
+    setUserOverrides(readStoredOptions2(optionsStorageKey));
+    setHydratedKey(optionsStorageKey);
+  }, [optionsStorageKey]);
+  useEffect(() => {
+    if (!optionsStorageKey || hydratedKey !== optionsStorageKey) return;
+    writeStoredOptions(optionsStorageKey, userOverrides);
+  }, [optionsStorageKey, userOverrides, hydratedKey]);
+  const resolved = useMemo(() => {
+    const merged = {
+      ...OPTION_DEFAULTS,
+      ...optionsProp,
+      ...userOverrides
+    };
+    if (merged.subtitleInDetails === void 0) {
+      merged.subtitleInDetails = hasDetails;
+    }
+    if (merged.configurable === void 0) {
+      merged.configurable = hasDetails || hasCount || hasViewSettings || hasViewToggle;
+    }
+    return merged;
+  }, [
+    optionsProp,
+    userOverrides,
+    hasDetails,
+    hasCount,
+    hasViewSettings,
+    hasViewToggle
+  ]);
+  const patchOption = useCallback((key, value) => {
+    setUserOverrides((prev) => ({ ...prev, [key]: value }));
+  }, []);
+  const moveSubtitle = Boolean(resolved.subtitleInDetails) && hasDetails;
+  const showTitleSubtitle = Boolean(subtitle) && Boolean(resolved.showSubtitle) && !moveSubtitle;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(
+    () => optionsProp?.defaultDetailsOpen ?? OPTION_DEFAULTS.defaultDetailsOpen
+  );
+  const isControlled = detailsOpen !== void 0;
+  const open = isControlled ? detailsOpen : uncontrolledOpen;
+  const setOpen = (next) => {
+    if (!isControlled) setUncontrolledOpen(next);
+    onDetailsOpenChange?.(next);
+  };
+  const detailsLabel = resolved.detailsLabel ?? "Details";
+  const entity = entityName || "item";
+  const toggles = [
+    { key: "showIcon", label: "Icon", available: Boolean(Icon) },
+    {
+      key: "showSubtitle",
+      label: "Subtitle",
+      available: Boolean(subtitle) && !moveSubtitle
+    },
+    { key: "showCount", label: "Count", available: hasCount },
+    { key: "showViewToggle", label: "View toggle", available: hasViewToggle },
+    {
+      key: "showViewSettings",
+      label: "Display settings",
+      available: hasViewSettings
+    },
+    { key: "showCreate", label: "Create action", available: hasCreate },
+    {
+      key: "showDetailsToggle",
+      label: "Filters / details",
+      available: hasDetails
+    },
+    {
+      key: "showDetailsHint",
+      label: "Collapsed hint",
+      available: hasDetails && detailsHint != null
+    }
+  ].filter((t) => t.available);
+  const showDetailsToggle = hasDetails && Boolean(resolved.showDetailsToggle);
+  const showHint = hasDetails && !open && Boolean(resolved.showDetailsHint) && detailsHint != null;
+  const actionsCluster = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 shrink-0", children: [
+    showHint ? /* @__PURE__ */ jsx("span", { className: "hidden max-w-[14rem] truncate text-xs text-muted-foreground sm:inline", children: detailsHint }) : null,
+    hasCount && resolved.showCount !== false ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: countActive ? `${count} of ${totalCount}` : `${totalCount} ${pluralizeEntity(entity, totalCount)}` }) : null,
+    hasViewToggle && resolved.showViewToggle !== false ? /* @__PURE__ */ jsx(ViewToggle, { viewMode, onViewModeChange }) : null,
+    showDetailsToggle ? /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon",
+        className: cn(
+          "relative h-8 w-8",
+          (open || detailsActive) && "bg-accent text-accent-foreground"
+        ),
+        onClick: () => setOpen(!open),
+        "data-testid": "page-header-details-toggle",
+        title: open ? `Hide ${detailsLabel}` : `Show ${detailsLabel}`,
+        "aria-label": open ? `Hide ${detailsLabel}` : `Show ${detailsLabel}`,
+        "aria-expanded": open,
+        "aria-controls": detailsRegionId,
+        testID: "page-header-details-toggle",
+        children: [
+          /* @__PURE__ */ jsx(ListFilter, { className: "h-4 w-4" }),
+          detailsActive ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute right-1.5 top-1.5 size-1.5 rounded-full bg-primary",
+              "aria-hidden": true
+            }
+          ) : null
+        ]
+      }
+    ) : null,
+    hasViewSettings && resolved.showViewSettings !== false ? /* @__PURE__ */ jsx(
+      ViewSettings,
+      {
+        pageSize: pageSize ?? 25,
+        onPageSizeChange,
+        density: density ?? "comfortable",
+        onDensityChange
+      }
+    ) : null,
+    hasCreate && resolved.showCreate !== false ? createAction : null,
+    actions,
+    resolved.configurable && toggles.length > 0 ? /* @__PURE__ */ jsxs(Popover, { children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          className: "h-8 w-8",
+          title: "Header options",
+          "aria-label": "Header options",
+          "data-testid": "page-header-options",
+          testID: "page-header-options",
+          children: /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-4 w-4" })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "w-64 space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: "Header options" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Customize this page header. Saved on this device when a storage key is set." })
+        ] }),
+        /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: toggles.map((t) => {
+          const checked = Boolean(resolved[t.key] ?? true);
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "flex items-center justify-between gap-3",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Label,
+                  {
+                    htmlFor: `page-header-opt-${t.key}`,
+                    className: "text-sm font-normal",
+                    children: t.label
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Switch,
+                  {
+                    id: `page-header-opt-${t.key}`,
+                    checked,
+                    onCheckedChange: (v) => patchOption(t.key, v)
+                  }
+                )
+              ]
+            },
+            t.key
+          );
+        }) }),
+        optionsStorageKey && Object.keys(userOverrides).length > 0 ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            className: "h-8 w-full text-xs",
+            onClick: () => setUserOverrides({}),
+            "data-testid": "page-header-options-reset",
+            "aria-label": "Reset header options",
+            testID: "page-header-options-reset",
+            children: "Reset to defaults"
+          }
+        ) : null
+      ] })
+    ] }) : null
+  ] });
+  const titleRow = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+      Icon && resolved.showIcon !== false ? /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-primary/10", children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5 text-primary" }) }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx(
+          "h1",
+          {
+            "data-testid": "page-title",
+            className: "truncate font-display text-xl font-bold tracking-tight sm:text-2xl",
+            children: title
+          }
+        ),
+        showTitleSubtitle ? /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-muted-foreground", children: subtitle }) : null
+      ] })
+    ] }),
+    actionsCluster
+  ] });
+  if (!hasDetails) {
+    return titleRow;
+  }
+  return /* @__PURE__ */ jsxs(Collapsible, { open, onOpenChange: setOpen, children: [
+    titleRow,
+    /* @__PURE__ */ jsx(CollapsibleContent, { id: detailsRegionId, className: "mt-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-lg border border-border bg-card/40 p-3 sm:p-4", children: [
+      moveSubtitle && subtitle && resolved.showSubtitle !== false ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: subtitle }) : null,
+      details
+    ] }) })
+  ] });
+}
+function DataPageShell({
+  title,
+  icon,
   entityName,
   subtitle,
   createAction,
@@ -168,44 +493,57 @@ function DataPageShell({
   filters,
   hasActiveFilters = false,
   onClearFilters,
+  filtersCollapsible = false,
+  defaultFiltersOpen = false,
+  filtersOpen,
+  onFiltersOpenChange,
+  filtersLabel,
+  filtersHint,
+  headerOptions,
+  headerOptionsStorageKey,
   children
 }) {
   const entity = entityName || title.toLowerCase();
-  const hasViewToggle = viewMode && onViewModeChange;
-  const hasViewSettings = onPageSizeChange && onDensityChange;
-  const hasCount = count !== void 0 && totalCount !== void 0;
+  const collapseFilters = filtersCollapsible && filters != null;
+  const mergedOptions = {
+    defaultDetailsOpen: defaultFiltersOpen,
+    detailsLabel: filtersLabel,
+    subtitleInDetails: collapseFilters ? true : void 0,
+    ...headerOptions
+  };
+  const sharedHeaderProps = {
+    title,
+    subtitle,
+    icon,
+    entityName: entity,
+    count,
+    totalCount,
+    countActive: hasActiveFilters,
+    viewMode,
+    onViewModeChange,
+    pageSize,
+    onPageSizeChange,
+    density,
+    onDensityChange,
+    createAction,
+    optionsStorageKey: headerOptionsStorageKey
+  };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
-        Icon && /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 overflow-hidden", children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5 text-primary" }) }),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx(
-            "h1",
-            {
-              "data-testid": "page-title",
-              className: "text-xl sm:text-2xl font-bold font-display tracking-tight truncate",
-              children: title
-            }
-          ),
-          subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground truncate", children: subtitle })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
-        hasCount && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: hasActiveFilters ? `${count} of ${totalCount}` : `${totalCount} ${entity.endsWith("s") ? entity : `${entity}s`}` }),
-        hasViewToggle && /* @__PURE__ */ jsx(ViewToggle, { viewMode, onViewModeChange }),
-        hasViewSettings && /* @__PURE__ */ jsx(
-          ViewSettings,
-          {
-            pageSize: pageSize ?? 25,
-            onPageSizeChange,
-            density: density ?? "comfortable",
-            onDensityChange
-          }
-        ),
-        createAction
-      ] })
+    collapseFilters ? /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        ...sharedHeaderProps,
+        details: filters,
+        detailsOpen: filtersOpen,
+        onDetailsOpenChange: onFiltersOpenChange,
+        detailsActive: hasActiveFilters,
+        detailsHint: filtersHint,
+        options: mergedOptions
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(PageHeader, { ...sharedHeaderProps, options: headerOptions }),
+      filters
     ] }),
-    filters,
     isLoading ? /* @__PURE__ */ jsx(
       "div",
       {
@@ -222,10 +560,10 @@ function DataPageShell({
       }
     ) : hasError ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [
       /* @__PURE__ */ jsx(AlertTriangle, { className: "h-10 w-10 text-destructive mb-3" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground mb-1", children: "Something went wrong" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-4", children: errorMessage || `Failed to load ${entity}s. Please try again.` }),
+      /* @__PURE__ */ jsx("p", { className: "mb-1 text-sm font-medium text-foreground", children: "Something went wrong" }),
+      /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: errorMessage || `Failed to load ${entity}s. Please try again.` }),
       onRetry && /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: onRetry, children: [
-        /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4 mr-1" }),
+        /* @__PURE__ */ jsx(RefreshCw, { className: "mr-1 h-4 w-4" }),
         " Retry"
       ] })
     ] }) : isEmpty ? /* @__PURE__ */ jsx(
@@ -647,6 +985,16 @@ function DataGrid({
     )
   ] });
 }
+var DENSITY_CELL = {
+  compact: "py-1 h-8",
+  comfortable: "py-2",
+  spacious: "py-3"
+};
+var DENSITY_HEAD = {
+  compact: "h-8 py-1",
+  comfortable: "h-10",
+  spacious: "h-12 py-3"
+};
 function getCellClasses(col) {
   const hide = col.hideBelow ? col.hideBelow === "sm" ? "hidden sm:table-cell" : col.hideBelow === "md" ? "hidden md:table-cell" : col.hideBelow === "lg" ? "hidden lg:table-cell" : "hidden xl:table-cell" : "";
   return cn(col.width, hide);
@@ -764,8 +1112,11 @@ function DataTable({
   pageSizeOptions = [10, 25, 50, 100],
   stickyHeader = true,
   resizeKey,
-  stickyFirstColumn
+  stickyFirstColumn,
+  density = "comfortable"
 }) {
+  const cellDensity = DENSITY_CELL[density];
+  const headDensity = DENSITY_HEAD[density];
   const [sorts, setSorts] = useState([]);
   const handleSort = useCallback(
     (key, shiftKey) => {
@@ -788,15 +1139,6 @@ function DataTable({
   );
   const [visibleCols, setVisibleCols] = useState(
     () => {
-      if (columnVisibilityKey) {
-        try {
-          const saved = localStorage.getItem(
-            `dt-vis-${columnVisibilityKey}`
-          );
-          if (saved) return JSON.parse(saved);
-        } catch {
-        }
-      }
       const initial = {};
       columns.forEach((c) => {
         initial[c.key] = c.defaultVisible !== false;
@@ -804,14 +1146,40 @@ function DataTable({
       return initial;
     }
   );
+  const [visibilityHydrated, setVisibilityHydrated] = useState(false);
   useEffect(() => {
-    if (columnVisibilityKey) {
-      localStorage.setItem(
-        `dt-vis-${columnVisibilityKey}`,
-        JSON.stringify(visibleCols)
-      );
+    if (!columnVisibilityKey) {
+      setVisibilityHydrated(true);
+      return;
     }
-  }, [visibleCols, columnVisibilityKey]);
+    try {
+      const saved = localStorage.getItem(`dt-vis-${columnVisibilityKey}`);
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        setVisibleCols((prev) => {
+          const next = { ...prev };
+          for (const [k, v] of Object.entries(parsed)) {
+            if (k in next || columns.some((c) => c.key === k)) {
+              next[k] = v;
+            }
+          }
+          columns.forEach((c) => {
+            if (!(c.key in next)) next[c.key] = c.defaultVisible !== false;
+          });
+          return next;
+        });
+      }
+    } catch {
+    }
+    setVisibilityHydrated(true);
+  }, [columnVisibilityKey]);
+  useEffect(() => {
+    if (!visibilityHydrated || !columnVisibilityKey) return;
+    localStorage.setItem(
+      `dt-vis-${columnVisibilityKey}`,
+      JSON.stringify(visibleCols)
+    );
+  }, [visibleCols, columnVisibilityKey, visibilityHydrated]);
   const toggleColumnVisibility = useCallback((key) => {
     setVisibleCols((prev) => ({ ...prev, [key]: !prev[key] }));
   }, []);
@@ -950,7 +1318,7 @@ function DataTable({
         {
           className: stickyHeader ? "sticky top-0 z-10 bg-background" : "",
           children: /* @__PURE__ */ jsxs(TableRow, { children: [
-            selectable && /* @__PURE__ */ jsx(TableHead, { className: "w-10", children: /* @__PURE__ */ jsx(
+            selectable && /* @__PURE__ */ jsx(TableHead, { className: cn("w-10", headDensity), children: /* @__PURE__ */ jsx(
               Checkbox,
               {
                 checked: items.length > 0 && selected?.size === items.length,
@@ -967,6 +1335,7 @@ function DataTable({
                 {
                   className: cn(
                     getCellClasses(col),
+                    headDensity,
                     col.sortable && "cursor-pointer select-none",
                     resizableColumns && "relative",
                     isFirstCol && "sticky left-0 bg-background",
@@ -998,7 +1367,7 @@ function DataTable({
                 col.key
               );
             }),
-            renderActions && /* @__PURE__ */ jsx(TableHead, { className: "w-10" })
+            renderActions && /* @__PURE__ */ jsx(TableHead, { className: cn("w-10", headDensity) })
           ] })
         }
       ),
@@ -1018,13 +1387,20 @@ function DataTable({
             "data-state": selected?.has(id) ? "selected" : void 0,
             onClick: onRowClick ? () => onRowClick(item) : void 0,
             children: [
-              selectable && /* @__PURE__ */ jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
-                Checkbox,
+              selectable && /* @__PURE__ */ jsx(
+                TableCell,
                 {
-                  checked: selected?.has(id),
-                  onCheckedChange: () => onToggleSelect?.(id)
+                  className: cellDensity,
+                  onClick: (e) => e.stopPropagation(),
+                  children: /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      checked: selected?.has(id),
+                      onCheckedChange: () => onToggleSelect?.(id)
+                    }
+                  )
                 }
-              ) }),
+              ),
               activeColumns.map((col, colIndex) => {
                 const acc = col.accessor || ((it) => it[col.key]);
                 const value = acc(item);
@@ -1036,6 +1412,7 @@ function DataTable({
                       getCellClasses(
                         col
                       ),
+                      cellDensity,
                       isFirstCol && "sticky left-0 z-[1] bg-background"
                     ),
                     children: col.editable ? /* @__PURE__ */ jsx(
@@ -1050,7 +1427,14 @@ function DataTable({
                   col.key
                 );
               }),
-              renderActions && /* @__PURE__ */ jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: renderActions(item) })
+              renderActions && /* @__PURE__ */ jsx(
+                TableCell,
+                {
+                  className: cellDensity,
+                  onClick: (e) => e.stopPropagation(),
+                  children: renderActions(item)
+                }
+              )
             ]
           },
           id
@@ -2393,9 +2777,12 @@ function ResourcePage(props) {
     emptyState,
     resourceOptions,
     defaultView = "table",
-    onNavigate = defaultNavigate
+    onNavigate = defaultNavigate,
+    viewSettingsKey: viewSettingsKeyProp
   } = props;
   const isClientMode = !!resourceName;
+  const viewSettingsKey = viewSettingsKeyProp ?? resourceName ?? title.toLowerCase().replace(/\s+/g, "-");
+  const { settings, updateSetting } = useViewSettings(viewSettingsKey);
   const resourceHook = useResource(
     resourceName ?? "__noop__",
     isClientMode ? resourceOptions : { enabled: false }
@@ -2544,6 +2931,10 @@ function ResourcePage(props) {
       onRetry: isClientMode ? () => resourceHook.list.refetch() : void 0,
       viewMode: page.viewMode,
       onViewModeChange: page.setViewMode,
+      pageSize: settings.pageSize,
+      onPageSizeChange: (size) => updateSetting("pageSize", size),
+      density: settings.density,
+      onDensityChange: (d) => updateSetting("density", d),
       createAction,
       hasActiveFilters: page.hasActiveFilters,
       onClearFilters: page.clearFilters,
@@ -2595,7 +2986,9 @@ function ResourcePage(props) {
                 selectable: !!bulkActions && bulkActions.length > 0,
                 selected: selectedIds,
                 onToggleSelect: handleToggleSelect,
-                onToggleAll: handleToggleAll
+                onToggleAll: handleToggleAll,
+                density: settings.density,
+                pageSize: settings.pageSize
               }
             ),
             renderCard: (item) => {
@@ -2743,7 +3136,40 @@ function ResourcePage(props) {
     }
   );
 }
-function ThemeToggle() {
+var OPTION_DEFAULTS2 = {
+  showLogo: true,
+  showAppName: true,
+  showThemeToggle: true,
+  showCollapse: true,
+  showUserSlot: true,
+  showFooter: true,
+  showSecondaryNav: true,
+  showMobileBottomNav: true,
+  defaultCollapsed: false,
+  configurable: void 0,
+  density: "comfortable",
+  railWidth: "narrow",
+  scrollRoot: "container"
+};
+function readStoredCollapsed(key) {
+  if (typeof window === "undefined") return void 0;
+  try {
+    const raw = localStorage.getItem(`${key}:collapsed`);
+    if (raw === "1") return true;
+    if (raw === "0") return false;
+    return void 0;
+  } catch {
+    return void 0;
+  }
+}
+function writeStoredCollapsed(key, collapsed) {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(`${key}:collapsed`, collapsed ? "1" : "0");
+  } catch {
+  }
+}
+function ThemeToggle({ testId }) {
   const [dark, setDark] = useState(false);
   useEffect(() => {
     const stored = localStorage.getItem("theme");
@@ -2760,159 +3186,717 @@ function ThemeToggle() {
     document.documentElement.classList.toggle("dark", next);
     localStorage.setItem("theme", next ? "dark" : "light");
   }
-  return /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: toggle, className: "h-8 w-8", children: dark ? /* @__PURE__ */ jsx(Sun, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Moon, { className: "h-4 w-4" }) });
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon",
+      onClick: toggle,
+      className: "h-8 w-8",
+      title: "Toggle theme",
+      "aria-label": "Toggle theme",
+      "data-testid": testId,
+      testID: testId,
+      children: dark ? /* @__PURE__ */ jsx(Sun, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Moon, { className: "h-4 w-4" })
+    }
+  );
+}
+function itemIsActive(item, activePath, isActive) {
+  if (item.end) {
+    return Boolean(activePath && activePath === item.to);
+  }
+  if (isActive(item.to, activePath)) return true;
+  return Boolean(
+    item.children?.some((child) => itemIsActive(child, activePath, isActive))
+  );
 }
-function SidebarNav({
-  navItems,
+function NavLinkRow({
+  item,
+  collapsed,
+  density,
   onNavClick,
   linkComponent: LinkComp,
   activePath,
   isActive
 }) {
-  return /* @__PURE__ */ jsx("nav", { className: "flex-1 p-3 space-y-1", children: navItems.map((item) => {
-    const active = isActive(item.to, activePath);
+  const active = itemIsActive(item, activePath, isActive);
+  const pad = density === "compact" ? "px-2.5 py-1.5" : "px-3 py-2";
+  if (item.disabled) {
     return /* @__PURE__ */ jsxs(
-      LinkComp,
+      "span",
       {
-        href: item.to,
-        onClick: onNavClick,
-        "aria-current": active ? "page" : void 0,
+        title: item.label,
         className: cn(
-          "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
-          active ? "bg-sidebar-accent text-sidebar-primary" : "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+          "flex items-center gap-3 rounded-lg text-sm font-medium opacity-40",
+          pad,
+          collapsed && "justify-center px-2"
         ),
+        "aria-disabled": true,
         children: [
-          /* @__PURE__ */ jsx(item.icon, { className: "h-4 w-4" }),
-          item.label
+          /* @__PURE__ */ jsx(item.icon, { className: "h-4 w-4 shrink-0" }),
+          !collapsed ? /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label }) : null
         ]
-      },
-      item.to
+      }
     );
-  }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    LinkComp,
+    {
+      href: item.to,
+      onClick: onNavClick,
+      title: collapsed ? item.label : void 0,
+      "aria-label": collapsed ? item.label : void 0,
+      "aria-current": active ? "page" : void 0,
+      className: cn(
+        "flex items-center gap-3 rounded-lg text-sm font-medium transition-colors",
+        pad,
+        collapsed && "justify-center px-2",
+        active ? "bg-sidebar-accent text-sidebar-primary" : "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(item.icon, { className: "h-4 w-4 shrink-0" }),
+        !collapsed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+          item.badge != null ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "h-5 shrink-0 px-1.5 text-[10px]", children: item.badge }) : null
+        ] }) : null
+      ]
+    }
+  );
 }
-function SidebarLogo({
+function NavGroup({
+  item,
+  collapsed,
+  density,
+  onNavClick,
+  linkComponent,
+  activePath,
+  isActive
+}) {
+  const children = item.children ?? [];
+  const childActive = children.some(
+    (c) => itemIsActive(c, activePath, isActive)
+  );
+  const [open, setOpen] = useState(childActive);
+  useEffect(() => {
+    if (childActive) setOpen(true);
+  }, [childActive]);
+  if (children.length === 0) {
+    return /* @__PURE__ */ jsx(
+      NavLinkRow,
+      {
+        item,
+        collapsed,
+        density,
+        onNavClick,
+        linkComponent,
+        activePath,
+        isActive
+      }
+    );
+  }
+  if (collapsed) {
+    const target = item.to ? { ...item, children: void 0 } : { ...children[0], children: void 0 };
+    return /* @__PURE__ */ jsx(
+      NavLinkRow,
+      {
+        item: target,
+        collapsed: true,
+        density,
+        onNavClick,
+        linkComponent,
+        activePath,
+        isActive
+      }
+    );
+  }
+  const selfExact = Boolean(item.to && activePath && activePath === item.to);
+  const selfActive = item.to ? item.end ? selfExact : isActive(item.to, activePath) : false;
+  const groupHighlight = selfActive || childActive;
+  const pad = density === "compact" ? "px-2.5 py-1.5" : "px-3 py-2";
+  const LinkComp = linkComponent;
+  const parentClass = cn(
+    "flex min-w-0 flex-1 items-center gap-3 rounded-lg text-sm font-medium transition-colors",
+    pad,
+    groupHighlight ? "bg-sidebar-accent/60 text-sidebar-primary" : "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+  );
+  return /* @__PURE__ */ jsx(Collapsible, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", "data-testid": `nav-group-${item.label}`, children: [
+      item.to && !item.disabled ? /* @__PURE__ */ jsxs(
+        LinkComp,
+        {
+          href: item.to,
+          onClick: onNavClick,
+          "aria-current": selfExact ? "page" : void 0,
+          className: parentClass,
+          children: [
+            /* @__PURE__ */ jsx(item.icon, { className: "h-4 w-4 shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: item.label })
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: parentClass,
+          onClick: () => setOpen((o) => !o),
+          "aria-expanded": open,
+          "aria-disabled": item.disabled || void 0,
+          disabled: item.disabled,
+          children: [
+            /* @__PURE__ */ jsx(item.icon, { className: "h-4 w-4 shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: item.label })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "shrink-0 rounded-lg p-1.5 text-sidebar-foreground transition-colors hover:bg-sidebar-accent",
+            groupHighlight && "text-sidebar-primary",
+            item.disabled && "pointer-events-none opacity-40"
+          ),
+          onClick: () => setOpen((o) => !o),
+          "aria-expanded": open,
+          "aria-label": open ? `Collapse ${item.label}` : `Expand ${item.label}`,
+          "aria-disabled": item.disabled || void 0,
+          disabled: item.disabled,
+          "data-testid": `nav-group-toggle-${item.label}`,
+          children: /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: cn(
+                "h-3.5 w-3.5 opacity-60 transition-transform",
+                open && "rotate-180"
+              )
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "ml-3 space-y-0.5 border-l border-sidebar-border pl-2", children: children.map((child) => /* @__PURE__ */ jsx(
+      NavLinkRow,
+      {
+        item: child,
+        collapsed: false,
+        density,
+        onNavClick,
+        linkComponent,
+        activePath,
+        isActive
+      },
+      child.to + child.label
+    )) }) })
+  ] }) });
+}
+function SidebarNav({
+  navItems,
+  secondaryNavItems,
+  secondaryNavLabel,
+  showSecondary,
+  collapsed,
+  density,
+  onNavClick,
+  linkComponent,
+  activePath,
+  isActive
+}) {
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      className: cn(
+        "flex-1 space-y-1 overflow-y-auto",
+        collapsed ? "p-2" : "p-3"
+      ),
+      "aria-label": "Main",
+      children: [
+        navItems.map((item) => /* @__PURE__ */ jsx(
+          NavGroup,
+          {
+            item,
+            collapsed,
+            density,
+            onNavClick,
+            linkComponent,
+            activePath,
+            isActive
+          },
+          item.to + item.label
+        )),
+        showSecondary && secondaryNavItems && secondaryNavItems.length > 0 ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mt-4 space-y-1 border-t border-sidebar-border pt-4",
+              collapsed && "mt-2 pt-2"
+            ),
+            children: [
+              !collapsed ? /* @__PURE__ */ jsx("p", { className: "mb-2 px-3 text-xs font-medium uppercase tracking-wider text-sidebar-foreground/40", children: secondaryNavLabel }) : null,
+              secondaryNavItems.map((item) => /* @__PURE__ */ jsx(
+                NavGroup,
+                {
+                  item,
+                  collapsed,
+                  density,
+                  onNavClick,
+                  linkComponent,
+                  activePath,
+                  isActive
+                },
+                item.to + item.label
+              ))
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function SidebarBrand({
   appName,
-  appLogo
+  appLogo,
+  logo,
+  showLogo,
+  showAppName,
+  collapsed
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-    appLogo && /* @__PURE__ */ jsx("div", { className: "h-7 w-7 rounded-lg bg-primary flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-primary-foreground text-sm font-bold", children: appLogo }) }),
-    /* @__PURE__ */ jsx("span", { className: "font-semibold text-sidebar-foreground", children: appName })
-  ] });
+  if (!showLogo && !showAppName) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex min-w-0 items-center gap-2",
+        collapsed && "justify-center"
+      ),
+      children: [
+        showLogo ? logo ? /* @__PURE__ */ jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden", children: logo }) : appLogo ? /* @__PURE__ */ jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-primary", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-primary-foreground", children: appLogo }) }) : null : null,
+        showAppName && !collapsed ? /* @__PURE__ */ jsx("span", { className: "truncate font-semibold text-sidebar-foreground", children: appName }) : null
+      ]
+    }
+  );
 }
 function AppShell({
   appName,
   appLogo,
+  logo,
   navItems,
+  secondaryNavItems,
+  secondaryNavLabel = "More",
+  mobileNavItems,
+  headerSlot,
+  collapsedHeaderSlot,
+  footer,
+  userSlot,
   children,
-  showThemeToggle = true,
+  showThemeToggle: showThemeToggleProp,
+  options: optionsProp,
+  optionsStorageKey,
+  collapsed: collapsedProp,
+  onCollapsedChange,
   linkComponent = DefaultLink,
   activePath,
   isActive = isPathActive
 }) {
   const [mobileOpen, setMobileOpen] = useState(false);
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-screen overflow-hidden", children: [
-    /* @__PURE__ */ jsxs("aside", { className: "hidden md:flex md:w-60 flex-col border-r border-sidebar-border bg-sidebar", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex h-14 items-center gap-2 px-4 border-b border-sidebar-border", children: /* @__PURE__ */ jsx(SidebarLogo, { appName, appLogo }) }),
-      /* @__PURE__ */ jsx(
-        SidebarNav,
-        {
-          navItems,
-          linkComponent,
-          activePath,
-          isActive
-        }
-      ),
-      showThemeToggle && /* @__PURE__ */ jsx("div", { className: "border-t border-sidebar-border p-3 flex items-center justify-end", children: /* @__PURE__ */ jsx(ThemeToggle, {}) })
-    ] }),
-    mobileOpen && /* @__PURE__ */ jsx(
-      "div",
+  const [userOverrides, setUserOverrides] = useState(
+    {}
+  );
+  const [hydratedKey, setHydratedKey] = useState(
+    optionsStorageKey ? void 0 : ""
+  );
+  useEffect(() => {
+    setMobileOpen(false);
+  }, [activePath]);
+  const hasSecondary = Boolean(secondaryNavItems && secondaryNavItems.length);
+  const hasUser = userSlot != null;
+  const hasFooter = footer != null;
+  const hasLogo = Boolean(logo || appLogo);
+  useEffect(() => {
+    if (!optionsStorageKey) {
+      setUserOverrides({});
+      setHydratedKey("");
+      return;
+    }
+    setUserOverrides(readStoredOptions(optionsStorageKey));
+    setHydratedKey(optionsStorageKey);
+  }, [optionsStorageKey]);
+  useEffect(() => {
+    if (!optionsStorageKey || hydratedKey !== optionsStorageKey) return;
+    writeStoredOptions(optionsStorageKey, userOverrides);
+  }, [optionsStorageKey, userOverrides, hydratedKey]);
+  const lockedOptions = optionsProp?.lockedOptions;
+  const resolved = useMemo(() => {
+    const merged = {
+      ...OPTION_DEFAULTS2,
+      ...showThemeToggleProp !== void 0 ? { showThemeToggle: showThemeToggleProp } : {},
+      ...optionsProp,
+      ...userOverrides
+    };
+    if (merged.configurable === void 0) {
+      merged.configurable = hasSecondary || hasUser || hasFooter || Boolean(merged.showCollapse) || Boolean(merged.showThemeToggle);
+    }
+    if (lockedOptions?.length) {
+      const defaults = OPTION_DEFAULTS2;
+      const devOptions = optionsProp;
+      const target = merged;
+      for (const key of lockedOptions) {
+        target[key] = devOptions?.[key] ?? defaults[key];
+      }
+    }
+    return merged;
+  }, [
+    optionsProp,
+    userOverrides,
+    showThemeToggleProp,
+    hasSecondary,
+    hasUser,
+    hasFooter,
+    lockedOptions
+  ]);
+  const patchOption = useCallback(
+    (key, value) => {
+      if (lockedOptions?.includes(key)) return;
+      setUserOverrides((prev) => ({ ...prev, [key]: value }));
+    },
+    [lockedOptions]
+  );
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(
+    () => optionsProp?.defaultCollapsed ?? OPTION_DEFAULTS2.defaultCollapsed
+  );
+  useEffect(() => {
+    if (!optionsStorageKey || collapsedProp !== void 0) return;
+    const stored = readStoredCollapsed(optionsStorageKey);
+    if (stored !== void 0) setUncontrolledCollapsed(stored);
+  }, [optionsStorageKey, collapsedProp]);
+  const isCollapseControlled = collapsedProp !== void 0;
+  const collapsed = isCollapseControlled ? collapsedProp : uncontrolledCollapsed;
+  const setCollapsed = (next) => {
+    if (!isCollapseControlled) {
+      setUncontrolledCollapsed(next);
+      if (optionsStorageKey) writeStoredCollapsed(optionsStorageKey, next);
+    }
+    onCollapsedChange?.(next);
+  };
+  const density = resolved.density ?? "comfortable";
+  const scrollWindow = resolved.scrollRoot === "window";
+  const railExpanded = resolved.railWidth === "wide" ? "md:w-64" : "md:w-52";
+  const railClass = collapsed ? "md:w-14" : railExpanded;
+  const bottomItems = (mobileNavItems ?? navItems.filter((i) => !i.children || i.children.length === 0)).filter((i) => !i.disabled);
+  const toggles = [
+    { key: "showLogo", label: "Logo", available: hasLogo },
+    { key: "showAppName", label: "App name", available: true },
+    {
+      key: "showThemeToggle",
+      label: "Theme toggle",
+      available: true
+    },
+    { key: "showCollapse", label: "Collapse control", available: true },
+    {
+      key: "showSecondaryNav",
+      label: "Secondary nav",
+      available: hasSecondary
+    },
+    { key: "showFooter", label: "Footer", available: hasFooter },
+    { key: "showUserSlot", label: "User block", available: hasUser },
+    {
+      key: "showMobileBottomNav",
+      label: "Mobile bottom nav",
+      available: bottomItems.length > 0
+    }
+  ].filter((t) => t.available && !lockedOptions?.includes(t.key));
+  const showTheme = resolved.showThemeToggle !== false;
+  const showCollapseCtrl = resolved.showCollapse !== false;
+  const showSecondary = hasSecondary && resolved.showSecondaryNav !== false;
+  const showFooterSlot = hasFooter && resolved.showFooter !== false;
+  const showUser = hasUser && resolved.showUserSlot !== false;
+  const showMobileBottom = bottomItems.length > 0 && resolved.showMobileBottomNav !== false;
+  const optionsControl = resolved.configurable && toggles.length > 0 ? /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
       {
-        className: "fixed inset-0 z-40 bg-black/50 md:hidden",
-        onClick: () => setMobileOpen(false)
+        type: "button",
+        variant: "ghost",
+        size: "icon",
+        className: "h-8 w-8",
+        title: "Sidebar options",
+        "aria-label": "Sidebar options",
+        "data-testid": "app-shell-options",
+        testID: "app-shell-options",
+        children: /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-4 w-4" })
       }
-    ),
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { align: "start", side: "top", className: "w-64 space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: "Sidebar options" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Customize this sidebar. Saved on this device when a storage key is set." })
+      ] }),
+      /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: toggles.map((t) => {
+        const checked = Boolean(resolved[t.key] ?? true);
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: "flex items-center justify-between gap-3",
+            children: [
+              /* @__PURE__ */ jsx(
+                Label,
+                {
+                  htmlFor: `app-shell-opt-${t.key}`,
+                  className: "text-sm font-normal",
+                  children: t.label
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Switch,
+                {
+                  id: `app-shell-opt-${t.key}`,
+                  checked,
+                  onCheckedChange: (v) => patchOption(t.key, v)
+                }
+              )
+            ]
+          },
+          t.key
+        );
+      }) }),
+      optionsStorageKey && Object.keys(userOverrides).length > 0 ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          className: "h-8 w-full text-xs",
+          onClick: () => setUserOverrides({}),
+          "data-testid": "app-shell-options-reset",
+          "aria-label": "Reset sidebar options",
+          testID: "app-shell-options-reset",
+          children: "Reset to defaults"
+        }
+      ) : null
+    ] })
+  ] }) : null;
+  const sidebarChrome = (opts) => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
-      "aside",
+      "div",
       {
         className: cn(
-          "fixed inset-y-0 left-0 z-50 w-60 flex flex-col border-r border-sidebar-border bg-sidebar transition-transform md:hidden",
-          mobileOpen ? "translate-x-0" : "-translate-x-full"
+          "flex h-14 shrink-0 items-center gap-2 border-b border-sidebar-border",
+          collapsed && !opts.mobile ? "justify-center px-2" : "px-3"
         ),
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex h-14 items-center justify-between px-4 border-b border-sidebar-border", children: [
-            /* @__PURE__ */ jsx(SidebarLogo, { appName, appLogo }),
-            /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
+            SidebarBrand,
+            {
+              appName,
+              appLogo,
+              logo,
+              showLogo: resolved.showLogo !== false,
+              showAppName: resolved.showAppName !== false,
+              collapsed: collapsed && !opts.mobile
+            }
+          ) }),
+          opts.mobile ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              onClick: () => setMobileOpen(false),
+              "aria-label": "Close navigation",
+              "data-testid": "app-shell-mobile-close",
+              testID: "app-shell-mobile-close",
+              children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
+            }
+          ) : /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
+            showCollapseCtrl ? /* @__PURE__ */ jsx(
               Button,
               {
                 variant: "ghost",
                 size: "icon",
-                onClick: () => setMobileOpen(false),
-                children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
+                className: "h-8 w-8",
+                onClick: () => setCollapsed(!collapsed),
+                title: collapsed ? "Expand sidebar" : "Collapse sidebar",
+                "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+                "aria-pressed": collapsed,
+                "data-testid": "app-shell-collapse",
+                testID: "app-shell-collapse",
+                children: collapsed ? /* @__PURE__ */ jsx(PanelLeft, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(PanelLeftClose, { className: "h-4 w-4" })
               }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            SidebarNav,
-            {
-              navItems,
-              onNavClick: () => setMobileOpen(false),
-              linkComponent,
-              activePath,
-              isActive
-            }
-          )
+            ) : null,
+            !collapsed ? optionsControl : null
+          ] })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
-      /* @__PURE__ */ jsxs("header", { className: "flex h-14 items-center gap-3 border-b px-4 md:hidden", children: [
+    collapsed && !opts.mobile ? collapsedHeaderSlot ? /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-sidebar-border p-2", children: collapsedHeaderSlot }) : null : headerSlot ? /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-sidebar-border", children: headerSlot }) : null,
+    /* @__PURE__ */ jsx(
+      SidebarNav,
+      {
+        navItems,
+        secondaryNavItems,
+        secondaryNavLabel,
+        showSecondary,
+        collapsed: collapsed && !opts.mobile,
+        density,
+        onNavClick: opts.mobile ? () => setMobileOpen(false) : void 0,
+        linkComponent,
+        activePath,
+        isActive
+      }
+    ),
+    (showFooterSlot || showUser || showTheme || collapsed && optionsControl) && !opts.mobile ? /* @__PURE__ */ jsxs("div", { className: "mt-auto shrink-0 space-y-2 border-t border-sidebar-border p-2", children: [
+      showFooterSlot && !collapsed ? footer : null,
+      showUser ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            collapsed && "flex justify-center [&_[data-shell-user-detail]]:hidden"
+          ),
+          children: userSlot
+        }
+      ) : null,
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center gap-1",
+            collapsed ? "flex-col" : "justify-end"
+          ),
+          children: [
+            collapsed ? optionsControl : null,
+            showTheme ? /* @__PURE__ */ jsx(ThemeToggle, { testId: "app-shell-theme-toggle-desktop" }) : null
+          ]
+        }
+      )
+    ] }) : null,
+    opts.mobile && (showFooterSlot || showUser || showTheme) ? /* @__PURE__ */ jsxs("div", { className: "mt-auto shrink-0 space-y-2 border-t border-sidebar-border p-3", children: [
+      showFooterSlot ? footer : null,
+      showUser ? userSlot : null,
+      showTheme ? /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(ThemeToggle, { testId: "app-shell-theme-toggle-mobile-drawer" }) }) : null
+    ] }) : null
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex",
+        scrollWindow ? "min-h-screen" : "h-screen overflow-hidden"
+      ),
+      children: [
         /* @__PURE__ */ jsx(
-          Button,
+          "aside",
           {
-            variant: "ghost",
-            size: "icon",
-            onClick: () => setMobileOpen(true),
-            children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+            className: cn(
+              "hidden flex-col border-r border-sidebar-border bg-sidebar transition-[width] duration-200 md:flex",
+              scrollWindow && "sticky top-0 h-screen",
+              railClass
+            ),
+            "data-collapsed": collapsed || void 0,
+            "data-testid": "app-shell-sidebar",
+            children: sidebarChrome({})
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "flex-1 font-semibold", children: appName }),
-        showThemeToggle && /* @__PURE__ */ jsx(ThemeToggle, {})
-      ] }),
-      /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-y-auto pb-16 md:pb-0", children: /* @__PURE__ */ jsx("div", { className: "p-4 sm:p-6 lg:p-8", children }) }),
-      /* @__PURE__ */ jsx("nav", { className: "fixed bottom-0 left-0 right-0 z-30 flex border-t bg-background md:hidden", children: navItems.map((item) => {
-        const LinkComp = linkComponent;
-        const active = isActive(item.to, activePath);
-        return /* @__PURE__ */ jsxs(
-          LinkComp,
+        mobileOpen ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "fixed inset-0 z-40 bg-black/50 md:hidden",
+            onClick: () => setMobileOpen(false),
+            "aria-hidden": true
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "aside",
           {
-            href: item.to,
-            "aria-current": active ? "page" : void 0,
             className: cn(
-              "flex flex-1 flex-col items-center gap-1 py-2 text-xs font-medium transition-colors",
-              active ? "text-primary" : "text-muted-foreground"
+              "fixed inset-y-0 left-0 z-50 flex w-60 flex-col border-r border-sidebar-border bg-sidebar transition-transform md:hidden",
+              mobileOpen ? "translate-x-0" : "-translate-x-full pointer-events-none"
+            ),
+            id: "app-shell-mobile-nav",
+            "aria-hidden": !mobileOpen,
+            inert: !mobileOpen || void 0,
+            children: sidebarChrome({ mobile: true })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex min-w-0 flex-1 flex-col",
+              !scrollWindow && "overflow-hidden"
             ),
             children: [
-              /* @__PURE__ */ jsx(item.icon, { className: "h-5 w-5" }),
-              item.label
+              /* @__PURE__ */ jsxs(
+                "header",
+                {
+                  className: cn(
+                    "flex h-14 items-center gap-3 border-b px-4 md:hidden",
+                    scrollWindow && "sticky top-0 z-20 bg-background"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "icon",
+                        onClick: () => setMobileOpen(true),
+                        "aria-label": "Open navigation",
+                        "aria-expanded": mobileOpen,
+                        "aria-controls": "app-shell-mobile-nav",
+                        "data-testid": "app-shell-mobile-open",
+                        testID: "app-shell-mobile-open",
+                        children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate font-semibold", children: appName }),
+                    showTheme ? /* @__PURE__ */ jsx(ThemeToggle, { testId: "app-shell-theme-toggle-mobile-header" }) : null
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "main",
+                {
+                  className: cn(
+                    "flex-1",
+                    !scrollWindow && "overflow-y-auto",
+                    showMobileBottom ? "pb-16 md:pb-0" : "pb-0"
+                  ),
+                  children: /* @__PURE__ */ jsx("div", { className: "min-w-0 p-4 sm:p-6 lg:p-8", children })
+                }
+              ),
+              showMobileBottom ? /* @__PURE__ */ jsx(
+                "nav",
+                {
+                  className: "fixed bottom-0 left-0 right-0 z-30 flex border-t bg-background md:hidden",
+                  "aria-label": "Primary",
+                  children: bottomItems.map((item) => {
+                    const LinkComp = linkComponent;
+                    const active = itemIsActive(item, activePath, isActive);
+                    return /* @__PURE__ */ jsxs(
+                      LinkComp,
+                      {
+                        href: item.to,
+                        title: item.label,
+                        "aria-label": item.label,
+                        "aria-current": active ? "page" : void 0,
+                        className: cn(
+                          "flex flex-1 flex-col items-center gap-1 py-2 text-xs font-medium transition-colors",
+                          active ? "text-primary" : "text-muted-foreground"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx(item.icon, { className: "h-5 w-5" }),
+                          /* @__PURE__ */ jsx("span", { className: "max-w-full truncate px-0.5", children: item.label })
+                        ]
+                      },
+                      item.to + item.label
+                    );
+                  })
+                }
+              ) : null
             ]
-          },
-          item.to
-        );
-      }) })
-    ] })
-  ] });
-}
-function PageHeader({ title, subtitle, icon: Icon, actions }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
-      Icon && /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 overflow-hidden", children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5 text-primary" }) }),
-      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx("h1", { className: "text-xl sm:text-2xl font-bold font-display tracking-tight truncate", children: title }),
-        subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground truncate", children: subtitle })
-      ] })
-    ] }),
-    actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 shrink-0", children: actions })
-  ] });
+          }
+        )
+      ]
+    }
+  );
 }
 
 export { AppShell, BadgeCell, CurrencyCell, DataBulkBar, DataFilters, DataGrid, DataList, DataPageShell, DataTable, DateCell, DetailPanel, EmptyState, FieldArrayRenderer, FileUploadField, FilterCombobox, KanbanBoard, LinkCell, NumberCell, PageHeader, RelationField, ResourceForm, ResourcePage, StatCard, ThumbnailCell, ViewSettings, ViewToggle, WizardForm };