@marktiderman/genesis-ui 1.0.0

package/dist/components/data/index.js

@@ -0,0 +1,2923 @@
+"use client";
+import { useResourceForm, buildArrayItemDefaults } from '../../chunk-F2JB7YFF.js';
+import { useResource } from '../../chunk-IKIFQILN.js';
+import { useWizard } from '../../chunk-4HUKJSKC.js';
+import { Textarea } from '../../chunk-W64GERJW.js';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '../../chunk-SCUT2ZCD.js';
+import { Skeleton } from '../../chunk-QFM4Z2SS.js';
+import { Spinner } from '../../chunk-OVU3Z2MT.js';
+import { Switch } from '../../chunk-2MXMWBDV.js';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../../chunk-N2ZFNOOT.js';
+import { Progress } from '../../chunk-W5Y3LG5K.js';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../chunk-2B3MFHBQ.js';
+import { Separator } from '../../chunk-SXSCHWZU.js';
+import { Input } from '../../chunk-6V4GJUE3.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 { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuSeparator, DropdownMenuItem } from '../../chunk-SBJV3K4G.js';
+import { FormField, FormLabel, FormError, FormDescription } from '../../chunk-X7KMF6NH.js';
+import '../../chunk-AIODTBWP.js';
+import { Card, CardContent, CardHeader, CardTitle } from '../../chunk-FN3FZVUR.js';
+import { Button } from '../../chunk-4TROUCWO.js';
+import { Checkbox } from '../../chunk-WZWR2ELB.js';
+import { Badge } from '../../chunk-MUQLZFUR.js';
+import { cn } from '../../chunk-NZ5WBA4R.js';
+import { titleCase, useResourcePage } from '../../chunk-CLK7JBZJ.js';
+import '../../chunk-XISSLIMH.js';
+import { DefaultLink, defaultNavigate, isPathActive } from '../../chunk-AI6CCNWK.js';
+export { DefaultLink, defaultNavigate, isPathActive } from '../../chunk-AI6CCNWK.js';
+import { useIsMobile } from '../../chunk-M7AU5DDM.js';
+import '../../chunk-A5WHNNXJ.js';
+import { useDataProvider } from '../../chunk-JEECTX26.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 { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { formatDistanceToNow, format } from 'date-fns';
+import { useFieldArray, Controller, useWatch } from 'react-hook-form';
+import { useDropzone } from 'react-dropzone';
+
+function EmptyState({
+  icon: Icon = Search,
+  message = "No items found",
+  action,
+  hasFilters = false,
+  onClearFilters
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "text-center py-16 animate-fade-in", children: [
+    /* @__PURE__ */ jsx(Icon, { className: "h-10 w-10 text-muted-foreground/30 mx-auto mb-3" }),
+    /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: hasFilters ? "No results match your filters" : message }),
+    hasFilters && onClearFilters ? /* @__PURE__ */ jsx(Button, { variant: "link", size: "sm", onClick: onClearFilters, className: "mt-2", children: "Clear all filters" }) : action && /* @__PURE__ */ jsx("div", { className: "mt-4", children: action })
+  ] });
+}
+function ViewToggle({ viewMode, onViewModeChange }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center border rounded-lg overflow-hidden", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: viewMode === "grid" ? "default" : "ghost",
+        size: "icon",
+        className: "h-8 w-8 rounded-none",
+        onClick: () => onViewModeChange("grid"),
+        title: "Grid view",
+        children: /* @__PURE__ */ jsx(LayoutGrid, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: viewMode === "table" ? "default" : "ghost",
+        size: "icon",
+        className: "h-8 w-8 rounded-none",
+        onClick: () => onViewModeChange("table"),
+        title: "Table view",
+        children: /* @__PURE__ */ jsx(Table2, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: viewMode === "list" ? "default" : "ghost",
+        size: "icon",
+        className: "h-8 w-8 rounded-none",
+        onClick: () => onViewModeChange("list"),
+        title: "List view",
+        children: /* @__PURE__ */ jsx(List, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+}
+var PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
+var DENSITY_OPTIONS = [
+  { value: "compact", label: "Compact" },
+  { value: "comfortable", label: "Comfortable" },
+  { value: "spacious", label: "Spacious" }
+];
+function ViewSettings({
+  pageSize,
+  onPageSizeChange,
+  density,
+  onDensityChange
+}) {
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: "h-8 w-8",
+        title: "View settings",
+        children: /* @__PURE__ */ jsx(Settings2, { className: "h-4 w-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "w-56 space-y-4", children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: "Display Settings" }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-xs text-muted-foreground", children: "Page size" }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: String(pageSize),
+            onValueChange: (v) => onPageSizeChange(Number(v)),
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 text-xs", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsx(SelectContent, { className: "bg-popover z-50", children: PAGE_SIZE_OPTIONS.map((n) => /* @__PURE__ */ jsxs(SelectItem, { value: String(n), children: [
+                n,
+                " items"
+              ] }, n)) })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-xs text-muted-foreground", children: "Density" }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: density,
+            onValueChange: (v) => onDensityChange(v),
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 text-xs", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsx(SelectContent, { className: "bg-popover z-50", children: DENSITY_OPTIONS.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function DataPageShell({
+  title,
+  icon: Icon,
+  entityName,
+  subtitle,
+  createAction,
+  isLoading = false,
+  isEmpty = false,
+  emptyIcon,
+  emptyMessage,
+  emptyAction,
+  hasError = false,
+  errorMessage,
+  onRetry,
+  count,
+  totalCount,
+  viewMode,
+  onViewModeChange,
+  pageSize,
+  onPageSizeChange,
+  density,
+  onDensityChange,
+  filters,
+  hasActiveFilters = false,
+  onClearFilters,
+  children
+}) {
+  const entity = entityName || title.toLowerCase();
+  const hasViewToggle = viewMode && onViewModeChange;
+  const hasViewSettings = onPageSizeChange && onDensityChange;
+  const hasCount = count !== void 0 && totalCount !== void 0;
+  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
+      ] })
+    ] }),
+    filters,
+    isLoading ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-testid": "page-loader",
+        className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4",
+        children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            className: "h-40 rounded-xl",
+            style: { animationDelay: `${i * 75}ms` }
+          },
+          i
+        ))
+      }
+    ) : 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.` }),
+      onRetry && /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: onRetry, children: [
+        /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4 mr-1" }),
+        " Retry"
+      ] })
+    ] }) : isEmpty ? /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        icon: emptyIcon,
+        message: emptyMessage,
+        action: emptyAction,
+        hasFilters: hasActiveFilters,
+        onClearFilters
+      }
+    ) : children
+  ] });
+}
+function FilterCombobox({
+  label,
+  icon: Icon,
+  options,
+  selected,
+  onChange,
+  searchPlaceholder,
+  allLabel,
+  labelMap
+}) {
+  const [open, setOpen] = useState(false);
+  const toggle = (value) => {
+    onChange(
+      selected.includes(value) ? selected.filter((v) => v !== value) : [...selected, value]
+    );
+  };
+  const getDisplayLabel = (value) => labelMap?.[value] || value;
+  const triggerLabel = selected.length === 0 ? allLabel || `All ${label}` : selected.length === 1 ? getDisplayLabel(selected[0]) : `${selected.length} ${label.toLowerCase()}`;
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: selected.length > 0 ? "default" : "outline",
+        size: "sm",
+        className: "text-xs h-7 gap-1.5",
+        children: [
+          /* @__PURE__ */ jsx(Icon, { className: "h-3 w-3" }),
+          triggerLabel,
+          /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 ml-0.5 opacity-60" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        className: "w-[220px] max-w-[calc(100vw-2rem)] p-0 bg-popover z-50",
+        align: "start",
+        children: /* @__PURE__ */ jsxs(Command, { children: [
+          /* @__PURE__ */ jsx(
+            CommandInput,
+            {
+              placeholder: searchPlaceholder || `Search ${label.toLowerCase()}...`
+            }
+          ),
+          /* @__PURE__ */ jsxs(CommandList, { children: [
+            /* @__PURE__ */ jsxs(CommandEmpty, { children: [
+              "No ",
+              label.toLowerCase(),
+              " found."
+            ] }),
+            /* @__PURE__ */ jsxs(CommandGroup, { children: [
+              /* @__PURE__ */ jsxs(
+                CommandItem,
+                {
+                  value: `__all_${label.toLowerCase()}__`,
+                  onSelect: () => onChange([]),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Check,
+                      {
+                        className: cn(
+                          "mr-2 h-3.5 w-3.5",
+                          selected.length === 0 ? "opacity-100" : "opacity-0"
+                        )
+                      }
+                    ),
+                    allLabel || `All ${label}`
+                  ]
+                }
+              ),
+              options.map((opt) => /* @__PURE__ */ jsxs(
+                CommandItem,
+                {
+                  value: opt.label || getDisplayLabel(opt.value),
+                  onSelect: () => toggle(opt.value),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Check,
+                      {
+                        className: cn(
+                          "mr-2 h-3.5 w-3.5",
+                          selected.includes(opt.value) ? "opacity-100" : "opacity-0"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "flex-1", children: opt.label || getDisplayLabel(opt.value) }),
+                    opt.count !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground ml-2", children: opt.count })
+                  ]
+                },
+                opt.value
+              ))
+            ] })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+function DataFilters({
+  search,
+  onSearchChange,
+  searchPlaceholder = "Search...",
+  sort,
+  onSortChange,
+  sortOptions,
+  filters = [],
+  statusChips,
+  savedViews = [],
+  onLoadView,
+  onSaveView,
+  onDeleteView,
+  canSaveViews = false,
+  onViewSaved,
+  onClearAll,
+  searchInputRef
+}) {
+  const internalSearchRef = useRef(null);
+  const effectiveSearchRef = searchInputRef || internalSearchRef;
+  const [viewsOpen, setViewsOpen] = useState(false);
+  const [saveDialogOpen, setSaveDialogOpen] = useState(false);
+  const [newViewName, setNewViewName] = useState("");
+  const hasFilters = filters.some((f) => f.selected.length > 0) || (statusChips?.selected.length ?? 0) > 0;
+  const toggleStatus = (status) => {
+    if (!statusChips) return;
+    const { selected, onChange } = statusChips;
+    onChange(
+      selected.includes(status) ? selected.filter((s) => s !== status) : [...selected, status]
+    );
+  };
+  const handleSaveView = () => {
+    if (!newViewName.trim()) return;
+    onSaveView?.(newViewName.trim());
+    setNewViewName("");
+    setSaveDialogOpen(false);
+    onViewSaved?.(newViewName.trim());
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+        /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref: effectiveSearchRef,
+            placeholder: searchPlaceholder,
+            value: search,
+            onChange: (e) => onSearchChange(e.target.value),
+            className: "pl-9"
+          }
+        ),
+        search && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => onSearchChange(""),
+            className: "absolute right-3 top-1/2 -translate-y-1/2",
+            children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5 text-muted-foreground" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Select, { value: sort, onValueChange: onSortChange, children: [
+        /* @__PURE__ */ jsxs(SelectTrigger, { className: "w-full sm:w-[180px] shrink-0", children: [
+          /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3.5 w-3.5 mr-1.5 text-muted-foreground" }),
+          /* @__PURE__ */ jsx(SelectValue, { placeholder: "Sort by..." })
+        ] }),
+        /* @__PURE__ */ jsx(SelectContent, { className: "bg-popover z-50", children: sortOptions.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      (savedViews.length > 0 || canSaveViews) && /* @__PURE__ */ jsxs(Popover, { open: viewsOpen, onOpenChange: setViewsOpen, children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            className: "text-xs h-7 gap-1.5",
+            children: [
+              /* @__PURE__ */ jsx(Bookmark, { className: "h-3 w-3" }),
+              "Views",
+              savedViews.length > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground ml-0.5", children: [
+                "(",
+                savedViews.length,
+                ")"
+              ] }),
+              /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 ml-0.5 opacity-60" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          PopoverContent,
+          {
+            className: "w-[240px] p-2 bg-popover z-50",
+            align: "start",
+            children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              savedViews.map((view) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 group", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: "flex-1 text-left text-sm px-2 py-1.5 rounded hover:bg-accent truncate",
+                    onClick: () => {
+                      onLoadView?.(view.filters);
+                      setViewsOpen(false);
+                    },
+                    children: view.name
+                  }
+                ),
+                onDeleteView && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: "opacity-0 group-hover:opacity-100 p-1 rounded hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-opacity",
+                    onClick: () => onDeleteView(view.id),
+                    children: /* @__PURE__ */ jsx(Trash2, { className: "h-3 w-3" })
+                  }
+                )
+              ] }, view.id)),
+              savedViews.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground px-2 py-1", children: "No saved views yet" }),
+              canSaveViews && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("div", { className: "border-t my-1" }),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    className: "w-full flex items-center gap-1.5 text-sm px-2 py-1.5 rounded hover:bg-accent text-primary",
+                    onClick: () => {
+                      setViewsOpen(false);
+                      setSaveDialogOpen(true);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(BookmarkPlus, { className: "h-3.5 w-3.5" }),
+                      "Save current view"
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          }
+        )
+      ] }),
+      statusChips && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 mr-1", children: statusChips.options.map((s) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => toggleStatus(s),
+          className: cn(
+            "text-xs px-2.5 py-1 rounded-full border transition-all font-medium",
+            statusChips.selected.includes(s) ? "bg-primary text-primary-foreground border-primary" : "bg-background text-muted-foreground border-border hover:border-primary/40"
+          ),
+          children: s
+        },
+        s
+      )) }),
+      filters.map(
+        (f) => f.options.length > 0 ? /* @__PURE__ */ jsx(
+          FilterCombobox,
+          {
+            label: f.label,
+            icon: f.icon,
+            options: f.options,
+            selected: f.selected,
+            onChange: f.onChange,
+            searchPlaceholder: f.searchPlaceholder,
+            allLabel: f.allLabel,
+            labelMap: f.labelMap
+          },
+          f.key
+        ) : null
+      ),
+      filters.flatMap(
+        (f) => f.selected.map((val) => /* @__PURE__ */ jsxs(
+          Badge,
+          {
+            variant: "secondary",
+            className: "text-xs cursor-pointer gap-1",
+            onClick: () => f.onChange(f.selected.filter((v) => v !== val)),
+            children: [
+              f.labelMap?.[val] || val,
+              /* @__PURE__ */ jsx(X, { className: "h-2.5 w-2.5" })
+            ]
+          },
+          `${f.key}-${val}`
+        ))
+      ),
+      hasFilters && onClearAll && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: "text-xs h-7 text-muted-foreground",
+          onClick: onClearAll,
+          children: [
+            /* @__PURE__ */ jsx(X, { className: "h-3 w-3 mr-1" }),
+            "Clear all"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Dialog, { open: saveDialogOpen, onOpenChange: setSaveDialogOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-sm", children: [
+      /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { className: "font-display", children: "Save Current View" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: "View name (e.g. 'Active Sessions')",
+            value: newViewName,
+            onChange: (e) => setNewViewName(e.target.value),
+            onKeyDown: (e) => e.key === "Enter" && handleSaveView(),
+            autoFocus: true
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => setSaveDialogOpen(false),
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              onClick: handleSaveView,
+              disabled: !newViewName.trim(),
+              children: "Save"
+            }
+          )
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+var DEFAULT_BATCH_SIZE = 48;
+function DataGrid({
+  items,
+  viewMode,
+  batchSize = DEFAULT_BATCH_SIZE,
+  gridCols = "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+  renderCard,
+  renderTable,
+  renderListItem,
+  staggerAnimation = true,
+  getKey,
+  focusedIndex = -1,
+  keyboardContainerRef
+}) {
+  const [visibleCount, setVisibleCount] = useState(batchSize);
+  const sentinelRef = useRef(null);
+  useEffect(() => {
+    setVisibleCount(batchSize);
+  }, [items.length, batchSize]);
+  useEffect(() => {
+    if (viewMode !== "grid") return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting && visibleCount < items.length) {
+          setVisibleCount(
+            (prev) => Math.min(prev + batchSize, items.length)
+          );
+        }
+      },
+      { rootMargin: "200px" }
+    );
+    if (sentinelRef.current) observer.observe(sentinelRef.current);
+    return () => observer.disconnect();
+  }, [viewMode, visibleCount, items.length, batchSize]);
+  if (viewMode === "table" && renderTable) {
+    return /* @__PURE__ */ jsx(Fragment, { children: renderTable(items) });
+  }
+  if (viewMode === "list" && renderListItem) {
+    const keyFnList = getKey || ((item) => item.id);
+    return /* @__PURE__ */ jsx("div", { className: "divide-y divide-border rounded-lg border", children: items.map((item, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "px-4 py-3 transition-colors hover:bg-accent/50",
+        children: renderListItem(item, i)
+      },
+      keyFnList(item)
+    )) });
+  }
+  const visible = items.slice(0, visibleCount);
+  const keyFn = getKey || ((item) => item.id);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { ref: keyboardContainerRef, className: `grid ${gridCols} gap-4`, children: visible.map((item, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-nav-item": true,
+        className: cn(
+          staggerAnimation && "animate-fade-in",
+          focusedIndex === i && "ring-2 ring-primary ring-offset-2 ring-offset-background rounded-xl transition-shadow duration-150"
+        ),
+        style: staggerAnimation ? {
+          animationDelay: `${i % batchSize * 30}ms`,
+          animationFillMode: "both"
+        } : void 0,
+        children: renderCard(item, i)
+      },
+      keyFn(item)
+    )) }),
+    visibleCount < items.length && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: sentinelRef,
+        className: "h-12 flex items-center justify-center",
+        children: /* @__PURE__ */ jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" })
+      }
+    )
+  ] });
+}
+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);
+}
+function EditableCell({
+  item,
+  column,
+  value
+}) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(String(value ?? ""));
+  const editable = column.editable;
+  const commit = useCallback(
+    (v) => {
+      editable.onSave(item, v);
+      setEditing(false);
+    },
+    [editable, item]
+  );
+  if (!editing) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "cursor-pointer hover:underline decoration-dashed underline-offset-4 decoration-muted-foreground/40",
+        onClick: (e) => {
+          e.stopPropagation();
+          setDraft(String(value ?? ""));
+          setEditing(true);
+        },
+        children: column.render ? column.render(item, value) : String(value ?? "\u2014")
+      }
+    );
+  }
+  if (editable.type === "select" && editable.options) {
+    return /* @__PURE__ */ jsx("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs(Select, { defaultValue: draft, onValueChange: (v) => commit(v), children: [
+      /* @__PURE__ */ jsx(SelectTrigger, { className: "h-7 text-xs w-28", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+      /* @__PURE__ */ jsx(SelectContent, { children: editable.options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt, children: opt }, opt)) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      autoFocus: true,
+      className: "h-7 text-xs w-full",
+      value: draft,
+      onChange: (e) => setDraft(e.target.value),
+      onBlur: () => commit(draft),
+      onKeyDown: (e) => {
+        if (e.key === "Enter") commit(draft);
+        if (e.key === "Escape") setEditing(false);
+      }
+    }
+  ) });
+}
+function ResizeHandle({
+  onResize,
+  onResizeEnd
+}) {
+  const startX = useRef(0);
+  const [isResizing, setIsResizing] = useState(false);
+  const handlePointerDown = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      startX.current = e.clientX;
+      setIsResizing(true);
+      document.body.style.cursor = "col-resize";
+      const target = e.currentTarget;
+      target.setPointerCapture(e.pointerId);
+      const onMove = (ev) => {
+        const delta = ev.clientX - startX.current;
+        startX.current = ev.clientX;
+        onResize(delta);
+      };
+      const onUp = () => {
+        target.removeEventListener("pointermove", onMove);
+        target.removeEventListener("pointerup", onUp);
+        setIsResizing(false);
+        document.body.style.cursor = "";
+        onResizeEnd?.();
+      };
+      target.addEventListener("pointermove", onMove);
+      target.addEventListener("pointerup", onUp);
+    },
+    [onResize, onResizeEnd]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "absolute right-0 top-0 bottom-0 cursor-col-resize transition-colors",
+        isResizing ? "w-1.5 bg-primary/50" : "w-1 hover:bg-primary/30"
+      ),
+      onPointerDown: handlePointerDown,
+      onClick: (e) => e.stopPropagation()
+    }
+  );
+}
+function DataTable({
+  items,
+  columns,
+  getKey,
+  onRowClick,
+  selectable,
+  selected,
+  onToggleSelect,
+  onToggleAll,
+  renderActions,
+  emptyMessage = "No records found",
+  columnVisibility = true,
+  columnVisibilityKey,
+  resizableColumns = true,
+  pagination = true,
+  pageSize: initialPageSize = 25,
+  pageSizeOptions = [10, 25, 50, 100],
+  stickyHeader = true,
+  resizeKey,
+  stickyFirstColumn
+}) {
+  const [sorts, setSorts] = useState([]);
+  const handleSort = useCallback(
+    (key, shiftKey) => {
+      setSorts((prev) => {
+        const existing = prev.findIndex((s) => s.key === key);
+        if (existing >= 0) {
+          const entry = prev[existing];
+          if (entry.dir === "asc") {
+            const next = [...prev];
+            next[existing] = { key, dir: "desc" };
+            return next;
+          }
+          return prev.filter((_, i) => i !== existing);
+        }
+        if (shiftKey) return [...prev, { key, dir: "asc" }];
+        return [{ key, dir: "asc" }];
+      });
+    },
+    []
+  );
+  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;
+      });
+      return initial;
+    }
+  );
+  useEffect(() => {
+    if (columnVisibilityKey) {
+      localStorage.setItem(
+        `dt-vis-${columnVisibilityKey}`,
+        JSON.stringify(visibleCols)
+      );
+    }
+  }, [visibleCols, columnVisibilityKey]);
+  const toggleColumnVisibility = useCallback((key) => {
+    setVisibleCols((prev) => ({ ...prev, [key]: !prev[key] }));
+  }, []);
+  const resetColumnVisibility = useCallback(() => {
+    const defaults = {};
+    columns.forEach((c) => {
+      defaults[c.key] = c.defaultVisible !== false;
+    });
+    setVisibleCols(defaults);
+    if (columnVisibilityKey) {
+      localStorage.removeItem(`dt-vis-${columnVisibilityKey}`);
+    }
+  }, [columns, columnVisibilityKey]);
+  useEffect(() => {
+    setVisibleCols((prev) => {
+      const updated = { ...prev };
+      let changed = false;
+      columns.forEach((c) => {
+        if (!(c.key in updated)) {
+          updated[c.key] = c.defaultVisible !== false;
+          changed = true;
+        }
+      });
+      return changed ? updated : prev;
+    });
+  }, [columns]);
+  const activeColumns = columnVisibility ? columns.filter((c) => visibleCols[c.key] !== false) : columns;
+  const [colWidths, setColWidths] = useState(() => {
+    if (resizeKey) {
+      try {
+        const saved = localStorage.getItem(`dt-resize-${resizeKey}`);
+        if (saved) return JSON.parse(saved);
+      } catch {
+      }
+    }
+    const initial = {};
+    columns.forEach((c) => {
+      if (c.width) {
+        const px = parseInt(c.width, 10);
+        if (!isNaN(px) && px > 0) initial[c.key] = px;
+      }
+    });
+    return initial;
+  });
+  const handleResize = useCallback(
+    (key, delta, minWidth) => {
+      setColWidths((prev) => {
+        const current = prev[key] || 150;
+        return { ...prev, [key]: Math.max(minWidth, current + delta) };
+      });
+    },
+    []
+  );
+  const handleResizeEnd = useCallback(() => {
+    if (resizeKey) {
+      localStorage.setItem(`dt-resize-${resizeKey}`, JSON.stringify(colWidths));
+    }
+  }, [resizeKey, colWidths]);
+  const [currentPage, setCurrentPage] = useState(0);
+  const [currentPageSize, setCurrentPageSize] = useState(initialPageSize);
+  useEffect(() => {
+    setCurrentPage(0);
+  }, [items.length, currentPageSize]);
+  const sorted = (() => {
+    if (sorts.length === 0) return items;
+    return [...items].sort((a, b) => {
+      for (const s of sorts) {
+        const col = columns.find((c) => c.key === s.key);
+        if (!col) continue;
+        const acc = col.accessor || ((item) => item[col.key]);
+        const va = acc(a);
+        const vb = acc(b);
+        const sa = va == null ? "" : String(va);
+        const sb = vb == null ? "" : String(vb);
+        const cmp = sa.localeCompare(sb, void 0, {
+          numeric: true,
+          sensitivity: "base"
+        });
+        if (cmp !== 0) return s.dir === "asc" ? cmp : -cmp;
+      }
+      return 0;
+    });
+  })();
+  const totalItems = sorted.length;
+  const totalPages = pagination ? Math.max(1, Math.ceil(totalItems / currentPageSize)) : 1;
+  const displayItems = pagination ? sorted.slice(
+    currentPage * currentPageSize,
+    (currentPage + 1) * currentPageSize
+  ) : sorted;
+  const showingFrom = totalItems === 0 ? 0 : currentPage * currentPageSize + 1;
+  const showingTo = Math.min(
+    (currentPage + 1) * currentPageSize,
+    totalItems
+  );
+  const totalCols = activeColumns.length + (selectable ? 1 : 0) + (renderActions ? 1 : 0);
+  return /* @__PURE__ */ jsxs("div", { className: "border rounded-lg animate-fade-in flex flex-col", children: [
+    columnVisibility && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end px-3 py-2 border-b bg-muted/30", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "h-7 text-xs gap-1.5",
+          children: [
+            /* @__PURE__ */ jsx(Columns3, { className: "h-3.5 w-3.5" }),
+            "Columns"
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(
+        DropdownMenuContent,
+        {
+          align: "end",
+          className: "w-44 bg-popover z-50",
+          children: [
+            columns.map(
+              (col) => col.header ? /* @__PURE__ */ jsx(
+                DropdownMenuCheckboxItem,
+                {
+                  checked: visibleCols[col.key] !== false,
+                  onCheckedChange: () => toggleColumnVisibility(col.key),
+                  children: col.header
+                },
+                col.key
+              ) : null
+            ),
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: resetColumnVisibility, children: "Reset to defaults" })
+          ]
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs(Table, { style: { tableLayout: "fixed" }, children: [
+      /* @__PURE__ */ jsx(
+        TableHeader,
+        {
+          className: stickyHeader ? "sticky top-0 z-10 bg-background" : "",
+          children: /* @__PURE__ */ jsxs(TableRow, { children: [
+            selectable && /* @__PURE__ */ jsx(TableHead, { className: "w-10", children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: items.length > 0 && selected?.size === items.length,
+                onCheckedChange: onToggleAll
+              }
+            ) }),
+            activeColumns.map((col, colIndex) => {
+              const sortIndex = sorts.findIndex((s) => s.key === col.key);
+              const sortEntry = sortIndex >= 0 ? sorts[sortIndex] : null;
+              const resizeWidth = colWidths[col.key];
+              const isFirstCol = colIndex === 0 && stickyFirstColumn;
+              return /* @__PURE__ */ jsxs(
+                TableHead,
+                {
+                  className: cn(
+                    getCellClasses(col),
+                    col.sortable && "cursor-pointer select-none",
+                    resizableColumns && "relative",
+                    isFirstCol && "sticky left-0 bg-background",
+                    isFirstCol && stickyHeader ? "z-[15]" : isFirstCol ? "z-[5]" : void 0
+                  ),
+                  style: resizeWidth ? { width: resizeWidth, minWidth: resizeWidth } : void 0,
+                  onClick: col.sortable ? (e) => handleSort(col.key, e.shiftKey) : void 0,
+                  children: [
+                    /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+                      col.header,
+                      col.sortable && (sortEntry ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                        sortEntry.dir === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3 text-foreground" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "h-3 w-3 text-foreground" }),
+                        sorts.length > 1 && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground font-mono", children: sortIndex + 1 })
+                      ] }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3 w-3 text-muted-foreground/50" }))
+                    ] }),
+                    resizableColumns && /* @__PURE__ */ jsx(
+                      ResizeHandle,
+                      {
+                        onResize: (delta) => handleResize(
+                          col.key,
+                          delta,
+                          col.minWidth ?? 60
+                        ),
+                        onResizeEnd: handleResizeEnd
+                      }
+                    )
+                  ]
+                },
+                col.key
+              );
+            }),
+            renderActions && /* @__PURE__ */ jsx(TableHead, { className: "w-10" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(TableBody, { children: displayItems.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+        TableCell,
+        {
+          colSpan: totalCols,
+          className: "text-center py-12 text-muted-foreground",
+          children: emptyMessage
+        }
+      ) }) : displayItems.map((item) => {
+        const id = getKey(item);
+        return /* @__PURE__ */ jsxs(
+          TableRow,
+          {
+            className: cn(onRowClick && "cursor-pointer"),
+            "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,
+                {
+                  checked: selected?.has(id),
+                  onCheckedChange: () => onToggleSelect?.(id)
+                }
+              ) }),
+              activeColumns.map((col, colIndex) => {
+                const acc = col.accessor || ((it) => it[col.key]);
+                const value = acc(item);
+                const isFirstCol = colIndex === 0 && stickyFirstColumn;
+                return /* @__PURE__ */ jsx(
+                  TableCell,
+                  {
+                    className: cn(
+                      getCellClasses(
+                        col
+                      ),
+                      isFirstCol && "sticky left-0 z-[1] bg-background"
+                    ),
+                    children: col.editable ? /* @__PURE__ */ jsx(
+                      EditableCell,
+                      {
+                        item,
+                        column: col,
+                        value
+                      }
+                    ) : col.render ? col.render(item, value) : /* @__PURE__ */ jsx("span", { className: "truncate block max-w-[300px]", children: String(value ?? "\u2014") })
+                  },
+                  col.key
+                );
+              }),
+              renderActions && /* @__PURE__ */ jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: renderActions(item) })
+            ]
+          },
+          id
+        );
+      }) })
+    ] }) }),
+    pagination && /* @__PURE__ */ jsxs("div", { className: "sticky bottom-0 z-10 flex flex-col sm:flex-row items-center justify-between gap-2 px-4 py-3 border-t bg-muted/30 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("span", { children: totalItems === 0 ? "No records" : `Showing ${showingFrom}\u2013${showingTo} of ${totalItems}` }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { children: "Rows:" }),
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: String(currentPageSize),
+              onValueChange: (v) => setCurrentPageSize(Number(v)),
+              children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { className: "h-7 w-16 text-xs", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsx(SelectContent, { className: "bg-popover z-50", children: pageSizeOptions.map((n) => /* @__PURE__ */ jsx(SelectItem, { value: String(n), children: n }, n)) })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "icon",
+              className: "h-7 w-7",
+              disabled: currentPage === 0,
+              onClick: () => setCurrentPage((p) => p - 1),
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3.5 w-3.5" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "px-2 tabular-nums", children: [
+            currentPage + 1,
+            " / ",
+            totalPages
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "icon",
+              className: "h-7 w-7",
+              disabled: currentPage >= totalPages - 1,
+              onClick: () => setCurrentPage((p) => p + 1),
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function ThumbnailCell({
+  src,
+  alt
+}) {
+  if (!src) {
+    return /* @__PURE__ */ jsx("div", { className: "h-10 w-14 rounded bg-muted flex items-center justify-center text-[10px] text-muted-foreground", children: "\u2014" });
+  }
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt,
+      className: "h-10 w-14 rounded object-cover bg-muted",
+      loading: "lazy"
+    }
+  );
+}
+function LinkCell({
+  href,
+  label
+}) {
+  if (!href) return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      onClick: (e) => e.stopPropagation(),
+      className: "inline-flex items-center gap-1 text-xs text-primary hover:underline max-w-[200px] truncate",
+      children: [
+        label || new URL(href).hostname,
+        /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3 shrink-0" })
+      ]
+    }
+  );
+}
+function DataBulkBar({
+  selected,
+  totalCount,
+  onToggleAll,
+  onClearSelection,
+  actions
+}) {
+  if (selected.size === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 rounded-lg border bg-muted/50 animate-fade-in", children: [
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked: selected.size === totalCount,
+        onCheckedChange: onToggleAll
+      }
+    ),
+    /* @__PURE__ */ jsxs(Badge, { variant: "secondary", children: [
+      selected.size,
+      " selected"
+    ] }),
+    actions.map((action) => {
+      const ActionIcon = action.icon;
+      return /* @__PURE__ */ jsxs(
+        Button,
+        {
+          size: "sm",
+          variant: action.variant || "outline",
+          onClick: action.onClick,
+          children: [
+            /* @__PURE__ */ jsx(ActionIcon, { className: "h-3.5 w-3.5 mr-1" }),
+            action.label
+          ]
+        },
+        action.label
+      );
+    }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        variant: "ghost",
+        onClick: onClearSelection,
+        className: "ml-auto text-xs text-muted-foreground",
+        children: "Clear"
+      }
+    )
+  ] });
+}
+function DateCell(options) {
+  return (_item, value) => {
+    if (!value) return "\u2014";
+    const date = new Date(String(value));
+    if (isNaN(date.getTime())) return String(value);
+    const relative = options?.relative !== false;
+    const fmt = options?.format ?? "MMM d, yyyy";
+    return relative ? formatDistanceToNow(date, { addSuffix: true }) : format(date, fmt);
+  };
+}
+function NumberCell(options) {
+  const formatter = new Intl.NumberFormat(void 0, options);
+  return (_item, value) => {
+    if (value == null) return "\u2014";
+    const num = Number(value);
+    return isNaN(num) ? String(value) : formatter.format(num);
+  };
+}
+function CurrencyCell(currency = "USD", locale) {
+  const formatter = new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency
+  });
+  return (_item, value) => {
+    if (value == null) return "\u2014";
+    const str = String(value).replace(/[^0-9.-]/g, "");
+    const num = Number(str);
+    return isNaN(num) ? String(value) : formatter.format(num);
+  };
+}
+function BadgeCell(colorMap2) {
+  return (_item, value) => {
+    if (value == null) return "\u2014";
+    const str = String(value);
+    const variant = colorMap2?.[str] ?? "outline";
+    return /* @__PURE__ */ jsx(Badge, { variant, children: str });
+  };
+}
+var colorMap = {
+  primary: "text-primary",
+  success: "text-success",
+  warning: "text-warning",
+  info: "text-info",
+  destructive: "text-destructive",
+  muted: "text-muted-foreground"
+};
+function resolveColor(color) {
+  return colorMap[color] ?? color;
+}
+function StatCard({
+  label,
+  value,
+  icon: Icon,
+  color = "primary",
+  href,
+  linkComponent: Link = DefaultLink,
+  trend,
+  className
+}) {
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: label }),
+      Icon && /* @__PURE__ */ jsx(Icon, { className: cn("h-4 w-4", resolveColor(color)) })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "mt-2 text-2xl font-bold", children: value }),
+    trend && /* @__PURE__ */ jsxs(
+      "p",
+      {
+        className: cn(
+          "mt-1 text-xs font-medium",
+          trend.value >= 0 ? "text-primary" : "text-destructive"
+        ),
+        children: [
+          trend.value >= 0 ? "+" : "",
+          trend.value,
+          "% ",
+          trend.label
+        ]
+      }
+    )
+  ] });
+  const cardClasses = cn(
+    "rounded-xl border border-border bg-card p-4 transition-all hover:shadow-md",
+    href && "cursor-pointer hover:border-primary/30",
+    className
+  );
+  if (href) {
+    return /* @__PURE__ */ jsx(Link, { href, className: cardClasses, children: content });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cardClasses, children: content });
+}
+var statusColorMap = {
+  neutral: { color: "text-muted-foreground", bgColor: "bg-muted" },
+  warning: { color: "text-warning", bgColor: "bg-warning/15" },
+  success: { color: "text-success", bgColor: "bg-success/15" },
+  info: { color: "text-info", bgColor: "bg-info/15" },
+  destructive: { color: "text-destructive", bgColor: "bg-destructive/15" },
+  primary: { color: "text-primary", bgColor: "bg-primary/15" }
+};
+function KanbanBoard({
+  columns,
+  renderCard,
+  emptyMessage = "No items",
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+        className
+      ),
+      children: columns.map((column) => {
+        const resolved = column.status ? statusColorMap[column.status] : { color: column.color ?? "", bgColor: column.bgColor ?? "" };
+        return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: cn("text-sm font-semibold", resolved.color), children: column.label }),
+            /* @__PURE__ */ jsx(
+              Badge,
+              {
+                variant: "secondary",
+                className: cn("text-[10px] px-1.5 py-0", resolved.bgColor),
+                children: column.items.length
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 min-h-[80px]", children: column.items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center rounded-lg border border-dashed border-border p-6 text-xs text-muted-foreground", children: emptyMessage }) : column.items.map((item, i) => /* @__PURE__ */ jsx("div", { className: "animate-fade-in", style: { animationDelay: `${i * 30}ms`, animationFillMode: "both" }, children: renderCard(item) }, i)) })
+        ] }, column.key);
+      })
+    }
+  );
+}
+function DataList({
+  items,
+  renderItem,
+  emptyMessage = "No items found",
+  className
+}) {
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "text-center py-12 text-sm text-muted-foreground", children: emptyMessage });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("divide-y divide-border rounded-lg border", className), children: items.map((item, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "px-4 py-3 transition-colors hover:bg-accent/50",
+      children: renderItem(item, i)
+    },
+    i
+  )) });
+}
+var widthClasses = {
+  sm: "w-80",
+  md: "w-96",
+  lg: "w-[480px]"
+};
+function keyToLabel(key) {
+  return key.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function formatValue(value) {
+  if (value === null || value === void 0) return "\u2014";
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (value instanceof Date) return value.toLocaleDateString();
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+function DetailPanel({
+  item,
+  open,
+  onClose,
+  title,
+  subtitle,
+  onEdit,
+  onDelete,
+  children,
+  fields,
+  width = "md"
+}) {
+  if (!open || !item) return null;
+  const renderContent = () => {
+    if (children) {
+      return children(item);
+    }
+    if (fields) {
+      return /* @__PURE__ */ jsx("dl", { className: "space-y-0", children: fields.map((field, index) => /* @__PURE__ */ jsxs("div", { children: [
+        index > 0 && /* @__PURE__ */ jsx(Separator, {}),
+        /* @__PURE__ */ jsxs("div", { className: "py-3", children: [
+          /* @__PURE__ */ jsx("dt", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: field.label }),
+          /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm text-foreground", children: field.render ? field.render(item[field.key], item) : formatValue(item[field.key]) })
+        ] })
+      ] }, field.key)) });
+    }
+    const entries = Object.entries(item).filter(([key]) => key !== "id");
+    return /* @__PURE__ */ jsx("dl", { className: "space-y-0", children: entries.map(([key, value], index) => /* @__PURE__ */ jsxs("div", { children: [
+      index > 0 && /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsxs("div", { className: "py-3", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: keyToLabel(key) }),
+        /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm text-foreground", children: formatValue(value) })
+      ] })
+    ] }, key)) });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-40 bg-black/50 sm:hidden",
+        onClick: onClose,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "dialog",
+        "aria-label": title ?? "Detail panel",
+        onKeyDown: (e) => {
+          if (e.key === "Escape") onClose();
+        },
+        tabIndex: -1,
+        className: cn(
+          "fixed inset-y-0 right-0 z-50 flex flex-col border-l border-border bg-card shadow-xl",
+          "max-w-[90vw]",
+          widthClasses[width],
+          "transform transition-transform duration-200 ease-in-out",
+          open ? "translate-x-0" : "translate-x-full"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border px-4 py-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              title && /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold truncate", children: title }),
+              subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: subtitle })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+              onEdit && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-8 w-8",
+                  onClick: () => onEdit(item),
+                  "aria-label": "Edit",
+                  children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" })
+                }
+              ),
+              onDelete && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-8 w-8 text-destructive hover:text-destructive",
+                  onClick: () => onDelete(item),
+                  "aria-label": "Delete",
+                  children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-8 w-8",
+                  onClick: onClose,
+                  "aria-label": "Close",
+                  children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-4 py-3", children: renderContent() })
+        ]
+      }
+    )
+  ] });
+}
+function RelationField({
+  field,
+  value,
+  onChange,
+  disabled
+}) {
+  const [open, setOpen] = useState(false);
+  const [createOpen, setCreateOpen] = useState(false);
+  const [createValue, setCreateValue] = useState("");
+  const [createError, setCreateError] = useState(null);
+  const [isCreating, setIsCreating] = useState(false);
+  const [extraOptions, setExtraOptions] = useState([]);
+  const relation = field.relation;
+  const valueField = relation.valueField ?? "id";
+  const provider = useDataProvider();
+  const { list } = useResource(relation.resource, {
+    defaultPerPage: 100
+  });
+  const options = useMemo(() => {
+    const base = list.data?.data ? list.data.data.map((item) => {
+      const record = item;
+      return {
+        value: String(record[valueField] ?? ""),
+        label: String(record[relation.labelField] ?? "")
+      };
+    }) : [];
+    return [...base, ...extraOptions];
+  }, [list.data?.data, valueField, relation.labelField, extraOptions]);
+  const handleCreate = async () => {
+    if (!createValue.trim() || isCreating) return;
+    setIsCreating(true);
+    try {
+      const res = await provider.create(relation.resource, {
+        data: { [relation.labelField]: createValue.trim() }
+      });
+      const record = res.data;
+      const newValue = String(record[valueField] ?? "");
+      const newLabel = String(record[relation.labelField] ?? "");
+      setExtraOptions((prev) => [...prev, { value: newValue, label: newLabel }]);
+      onChange(newValue);
+      setCreateOpen(false);
+      setCreateValue("");
+    } catch (err) {
+      console.error(`Failed to create ${relation.resource}:`, err);
+      setCreateError(err instanceof Error ? err.message : "Failed to create record");
+    } finally {
+      setIsCreating(false);
+    }
+  };
+  const showSearch = relation.searchable ?? options.length > 10;
+  const selectedLabel = useMemo(() => {
+    if (!value) return null;
+    const match = options.find((opt) => opt.value === value);
+    return match?.label ?? null;
+  }, [value, options]);
+  const isLoading = list.isLoading;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          role: "combobox",
+          "aria-expanded": open,
+          className: "w-full justify-between font-normal",
+          disabled: disabled || isLoading,
+          children: [
+            isLoading ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-muted-foreground", children: [
+              /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
+              "Loading..."
+            ] }) : selectedLabel ? selectedLabel : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: field.placeholder ?? "Select..." }),
+            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PopoverContent, { className: "w-[--radix-popover-trigger-width] p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { children: [
+        showSearch && /* @__PURE__ */ jsx(CommandInput, { placeholder: "Search..." }),
+        /* @__PURE__ */ jsxs(CommandList, { children: [
+          /* @__PURE__ */ jsx(CommandEmpty, { children: "No results found." }),
+          /* @__PURE__ */ jsx(CommandGroup, { children: options.map((opt) => /* @__PURE__ */ jsxs(
+            CommandItem,
+            {
+              value: opt.label,
+              onSelect: () => {
+                onChange(opt.value === value ? "" : opt.value);
+                setOpen(false);
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Check,
+                  {
+                    className: cn(
+                      "mr-2 h-4 w-4",
+                      value === opt.value ? "opacity-100" : "opacity-0"
+                    )
+                  }
+                ),
+                opt.label
+              ]
+            },
+            opt.value
+          )) }),
+          relation.allowCreate && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(CommandSeparator, {}),
+            /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsx(
+              CommandItem,
+              {
+                onSelect: () => {
+                  setOpen(false);
+                  setCreateOpen(true);
+                },
+                children: "+ Create new..."
+              }
+            ) })
+          ] })
+        ] })
+      ] }) })
+    ] }),
+    relation.allowCreate && /* @__PURE__ */ jsx(Dialog, { open: createOpen, onOpenChange: setCreateOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[400px]", children: [
+      /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(DialogTitle, { children: [
+        "Create new ",
+        relation.resource.replace(/s$/, "")
+      ] }) }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          placeholder: `Enter ${relation.labelField}...`,
+          value: createValue,
+          onChange: (e) => {
+            setCreateValue(e.target.value);
+            setCreateError(null);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              void handleCreate();
+            }
+          },
+          autoFocus: true
+        }
+      ),
+      createError && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: createError }),
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => setCreateOpen(false), disabled: isCreating, children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { onClick: () => void handleCreate(), disabled: isCreating || !createValue.trim(), children: isCreating ? "Creating..." : "Create" })
+      ] })
+    ] }) })
+  ] });
+}
+var DEFAULT_MAX_SIZE = 10 * 1024 * 1024;
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function parseAcceptProp(accept) {
+  if (!accept) return void 0;
+  const result = {};
+  const parts = accept.split(",").map((s) => s.trim());
+  for (const part of parts) {
+    if (part.includes("/")) {
+      result[part] = [];
+    } else if (part.startsWith(".")) {
+      const key = "application/octet-stream";
+      if (!result[key]) result[key] = [];
+      result[key].push(part);
+    }
+  }
+  return Object.keys(result).length > 0 ? result : void 0;
+}
+function FileUploadField({
+  field,
+  value,
+  onChange,
+  disabled
+}) {
+  const multiple = field.multiple ?? false;
+  const maxSize = field.maxSize ?? DEFAULT_MAX_SIZE;
+  const isImage = field.type === "image";
+  const acceptObj = useMemo(
+    () => parseAcceptProp(field.accept ?? (isImage ? "image/*" : void 0)),
+    [field.accept, isImage]
+  );
+  const [errors, setErrors] = useState([]);
+  const files = useMemo(() => {
+    if (!value) return [];
+    return Array.isArray(value) ? value : [value];
+  }, [value]);
+  const [previews, setPreviews] = useState([]);
+  useEffect(() => {
+    const urls = files.filter((f) => f.type.startsWith("image/")).map((f) => URL.createObjectURL(f));
+    setPreviews(urls);
+    return () => urls.forEach((u) => URL.revokeObjectURL(u));
+  }, [files]);
+  const onDrop = useCallback(
+    (accepted, rejected) => {
+      const newErrors = [];
+      for (const rej of rejected) {
+        for (const err of rej.errors) {
+          if (err.code === "file-too-large") {
+            newErrors.push(
+              `"${rej.file.name}" exceeds ${formatFileSize(maxSize)} limit`
+            );
+          } else if (err.code === "file-invalid-type") {
+            newErrors.push(`"${rej.file.name}" is not an accepted file type`);
+          } else {
+            newErrors.push(`"${rej.file.name}": ${err.message}`);
+          }
+        }
+      }
+      setErrors(newErrors);
+      if (accepted.length === 0) return;
+      if (multiple) {
+        const merged = [...files, ...accepted];
+        onChange(merged);
+      } else {
+        onChange(accepted[0]);
+      }
+    },
+    [files, maxSize, multiple, onChange]
+  );
+  const removeFile = useCallback(
+    (index) => {
+      const next = files.filter((_, i) => i !== index);
+      if (next.length === 0) {
+        onChange(null);
+      } else if (multiple) {
+        onChange(next);
+      } else {
+        onChange(null);
+      }
+      setErrors([]);
+    },
+    [files, multiple, onChange]
+  );
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: acceptObj,
+    maxSize,
+    multiple,
+    disabled
+  });
+  const hasFiles = files.length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...getRootProps(),
+        className: cn(
+          "flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed px-6 py-8 text-center transition-colors",
+          isDragActive ? "border-primary bg-primary/5" : "border-muted-foreground/25 hover:border-muted-foreground/50",
+          disabled && "pointer-events-none opacity-50",
+          hasFiles && "py-4"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("input", { ...getInputProps() }),
+          isImage ? /* @__PURE__ */ jsx(ImageIcon, { className: "mb-2 h-8 w-8 text-muted-foreground" }) : /* @__PURE__ */ jsx(Upload, { className: "mb-2 h-8 w-8 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: isDragActive ? "Drop files here..." : "Drag & drop or click to upload" }),
+          /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-muted-foreground/70", children: [
+            "Max ",
+            formatFileSize(maxSize),
+            field.accept ? ` -- ${field.accept}` : ""
+          ] })
+        ]
+      }
+    ),
+    errors.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-1", children: errors.map((err, i) => /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1 text-sm text-destructive", children: [
+      /* @__PURE__ */ jsx(AlertCircle, { className: "h-3.5 w-3.5 shrink-0" }),
+      err
+    ] }, i)) }),
+    hasFiles && /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: files.map((file, index) => {
+      const isImg = file.type.startsWith("image/");
+      const previewUrl = isImg ? previews[files.filter((f, i) => i <= index && f.type.startsWith("image/")).length - 1] : void 0;
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: "flex items-center gap-3 rounded-md border bg-muted/30 p-2",
+          children: [
+            isImg && previewUrl ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: previewUrl,
+                alt: file.name,
+                className: "h-10 w-10 rounded object-cover"
+              }
+            ) : /* @__PURE__ */ jsx(FileIcon, { className: "h-10 w-10 shrink-0 text-muted-foreground p-1" }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: file.name }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: formatFileSize(file.size) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  removeFile(index);
+                },
+                className: "shrink-0 rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground",
+                "aria-label": `Remove ${file.name}`,
+                children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+              }
+            )
+          ]
+        },
+        `${file.name}-${index}`
+      );
+    }) })
+  ] });
+}
+function FieldArrayRenderer({
+  field,
+  control,
+  action,
+  watchedValues
+}) {
+  const { fields: items, append, remove } = useFieldArray({
+    control,
+    name: field.key
+  });
+  const subFields = field.arrayFields ?? [];
+  const label = field.label ?? titleCase(field.key);
+  const canAdd = field.arrayMax == null || items.length < field.arrayMax;
+  const canRemove = field.arrayMin == null || items.length > field.arrayMin;
+  const handleAdd = () => {
+    append(buildArrayItemDefaults(subFields));
+  };
+  return /* @__PURE__ */ jsxs(FormField, { children: [
+    /* @__PURE__ */ jsx(FormLabel, { required: field.required, children: label }),
+    field.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: field.description }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-3", children: items.map((item, index) => /* @__PURE__ */ jsx(Card, { className: "relative", children: /* @__PURE__ */ jsxs(CardContent, { className: "pt-4 pb-3 px-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-muted-foreground", children: [
+          "Item ",
+          index + 1
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            className: "h-7 px-2 text-destructive hover:text-destructive",
+            disabled: !canRemove,
+            onClick: () => remove(index),
+            "aria-label": `Remove item ${index + 1}`,
+            children: /* @__PURE__ */ jsx(TrashIcon, { className: "h-4 w-4" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: subFields.map((subField) => /* @__PURE__ */ jsx(
+        ResourceFormFieldRenderer,
+        {
+          field: {
+            ...subField,
+            key: `${field.key}.${index}.${subField.key}`
+          },
+          control,
+          action,
+          watchedValues
+        },
+        subField.key
+      )) })
+    ] }) }, item.id)) }),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: "mt-2",
+        disabled: !canAdd,
+        onClick: handleAdd,
+        children: [
+          /* @__PURE__ */ jsx(PlusIcon, { className: "h-4 w-4 mr-1" }),
+          "Add ",
+          label.replace(/s$/, "")
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error` })
+  ] });
+}
+function TrashIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M3 6h18" }),
+        /* @__PURE__ */ jsx("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+        /* @__PURE__ */ jsx("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }),
+        /* @__PURE__ */ jsx("line", { x1: "10", y1: "11", x2: "10", y2: "17" }),
+        /* @__PURE__ */ jsx("line", { x1: "14", y1: "11", x2: "14", y2: "17" })
+      ]
+    }
+  );
+}
+function PlusIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+        /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+      ]
+    }
+  );
+}
+function ResourceFormFieldRenderer({
+  field,
+  control,
+  action,
+  autoFocus,
+  watchedValues
+}) {
+  const label = field.label ?? titleCase(field.key);
+  const fieldType = field.type ?? "text";
+  const isReadOnly = action === "edit" && field.readOnlyOnEdit;
+  const isDisabled = isReadOnly || (watchedValues ? field.disabled?.(watchedValues) === true : false);
+  if (fieldType === "array" && field.arrayFields) {
+    return /* @__PURE__ */ jsx(
+      FieldArrayRenderer,
+      {
+        field,
+        control,
+        action,
+        watchedValues
+      }
+    );
+  }
+  if (field.hidden || fieldType === "hidden") {
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        name: field.key,
+        control,
+        render: ({ field: f }) => /* @__PURE__ */ jsx("input", { type: "hidden", ...f, value: String(f.value ?? "") })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name: field.key,
+      control,
+      render: ({ field: f, fieldState }) => {
+        const errorMessage = fieldState.error?.message;
+        const ariaProps = {
+          "aria-invalid": !!errorMessage || void 0,
+          "aria-describedby": errorMessage ? `${field.key}-error` : field.description ? `${field.key}-desc` : void 0,
+          "aria-required": field.required || void 0
+        };
+        if (fieldType === "switch") {
+          return /* @__PURE__ */ jsxs(FormField, { className: "flex flex-row items-center justify-between rounded-lg border p-4", children: [
+            /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage, children: label }) }),
+            /* @__PURE__ */ jsx(
+              Switch,
+              {
+                checked: !!f.value,
+                onCheckedChange: f.onChange,
+                disabled: isDisabled,
+                ...ariaProps
+              }
+            )
+          ] });
+        }
+        if (fieldType === "checkbox") {
+          return /* @__PURE__ */ jsxs(FormField, { className: "flex flex-row items-start space-x-3 space-y-0", children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: !!f.value,
+                onCheckedChange: f.onChange,
+                disabled: isDisabled,
+                ...ariaProps
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1 leading-none", children: [
+              /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage, children: label }),
+              /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage })
+            ] })
+          ] });
+        }
+        if (fieldType === "select" && field.options) {
+          return /* @__PURE__ */ jsxs(FormField, { children: [
+            /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage, required: field.required, children: label }),
+            /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: f.value != null ? String(f.value) : "",
+                onValueChange: f.onChange,
+                disabled: isDisabled,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    SelectTrigger,
+                    {
+                      ...ariaProps,
+                      children: /* @__PURE__ */ jsx(SelectValue, { placeholder: field.placeholder ?? `Select ${label.toLowerCase()}...` })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(SelectContent, { children: field.options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+                ]
+              }
+            ),
+            field.description && /* @__PURE__ */ jsx(FormDescription, { id: `${field.key}-desc`, children: field.description }),
+            /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage })
+          ] });
+        }
+        if (fieldType === "relation" && field.relation) {
+          return /* @__PURE__ */ jsxs(FormField, { children: [
+            /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage, required: field.required, children: label }),
+            /* @__PURE__ */ jsx(
+              RelationField,
+              {
+                field,
+                value: f.value != null ? String(f.value) : "",
+                onChange: f.onChange,
+                disabled: isDisabled
+              }
+            ),
+            field.description && /* @__PURE__ */ jsx(FormDescription, { id: `${field.key}-desc`, children: field.description }),
+            /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage })
+          ] });
+        }
+        if (fieldType === "file" || fieldType === "image") {
+          return /* @__PURE__ */ jsxs(FormField, { children: [
+            /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage, required: field.required, children: label }),
+            /* @__PURE__ */ jsx(
+              FileUploadField,
+              {
+                field,
+                value: f.value,
+                onChange: f.onChange,
+                disabled: isDisabled
+              }
+            ),
+            field.description && /* @__PURE__ */ jsx(FormDescription, { id: `${field.key}-desc`, children: field.description }),
+            /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage })
+          ] });
+        }
+        if (fieldType === "textarea") {
+          return /* @__PURE__ */ jsxs(FormField, { children: [
+            /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage, required: field.required, children: label }),
+            /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                placeholder: field.placeholder,
+                rows: field.rows ?? 3,
+                value: f.value != null ? String(f.value) : "",
+                onChange: (e) => f.onChange(e.target.value),
+                disabled: isDisabled,
+                autoFocus,
+                ...ariaProps
+              }
+            ),
+            field.description && /* @__PURE__ */ jsx(FormDescription, { id: `${field.key}-desc`, children: field.description }),
+            /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage })
+          ] });
+        }
+        if (fieldType === "number") {
+          return /* @__PURE__ */ jsxs(FormField, { children: [
+            /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage, required: field.required, children: label }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "number",
+                placeholder: field.placeholder,
+                min: field.min,
+                max: field.max,
+                value: f.value != null ? String(f.value) : "",
+                onChange: (e) => {
+                  const val = e.target.value;
+                  f.onChange(val === "" ? void 0 : Number(val));
+                },
+                disabled: isDisabled,
+                autoFocus,
+                ...ariaProps
+              }
+            ),
+            field.description && /* @__PURE__ */ jsx(FormDescription, { id: `${field.key}-desc`, children: field.description }),
+            /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage })
+          ] });
+        }
+        return /* @__PURE__ */ jsxs(FormField, { children: [
+          /* @__PURE__ */ jsx(FormLabel, { error: !!errorMessage, required: field.required, children: label }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: fieldType,
+              placeholder: field.placeholder,
+              value: f.value != null ? String(f.value) : "",
+              onChange: (e) => f.onChange(e.target.value),
+              disabled: isDisabled,
+              autoFocus,
+              ...ariaProps
+            }
+          ),
+          field.description && /* @__PURE__ */ jsx(FormDescription, { id: `${field.key}-desc`, children: field.description }),
+          /* @__PURE__ */ jsx(FormError, { id: `${field.key}-error`, children: errorMessage })
+        ] });
+      }
+    }
+  );
+}
+function WizardForm({
+  steps,
+  form,
+  fields,
+  onSubmit,
+  isSaving,
+  renderField,
+  action,
+  onInvalid
+}) {
+  const wizard = useWizard(steps, form);
+  const watchedValues = useWatch({ control: form.control });
+  const stepFieldKeys = new Set(wizard.currentStepDef.fields);
+  const stepFields = fields.filter(
+    (f) => stepFieldKeys.has(f.key) && f.visible?.(watchedValues) !== false
+  );
+  const handleNext = async () => {
+    if (wizard.isLast) {
+      await form.handleSubmit(onSubmit, onInvalid)();
+    } else {
+      await wizard.next();
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          "Step ",
+          wizard.currentStep + 1,
+          " of ",
+          wizard.totalSteps
+        ] }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          Math.round(wizard.progress * 100),
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Progress, { value: wizard.progress * 100 })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: wizard.currentStepDef.title }),
+      wizard.currentStepDef.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: wizard.currentStepDef.description })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "animate-in fade-in slide-in-from-right-2 duration-200",
+        children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: stepFields.map(
+          (field) => renderField ? /* @__PURE__ */ jsx("div", { children: renderField(field, form.control, action, watchedValues) }, field.key) : /* @__PURE__ */ jsx(
+            ResourceFormFieldRenderer,
+            {
+              field,
+              control: form.control,
+              action,
+              watchedValues
+            },
+            field.key
+          )
+        ) })
+      },
+      wizard.currentStep
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between pt-2", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          onClick: wizard.back,
+          disabled: wizard.isFirst || isSaving,
+          children: "Back"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          onClick: handleNext,
+          disabled: isSaving,
+          children: [
+            isSaving && /* @__PURE__ */ jsx(Spinner, { size: "sm", className: "mr-2" }),
+            wizard.isLast ? action === "create" ? "Create" : "Save" : "Next"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function FormBody({
+  form,
+  resolvedFields,
+  renderForm,
+  action,
+  isSaving,
+  isLoading,
+  onOpenChange,
+  handleSave,
+  mode = "standard",
+  steps,
+  columns = 1
+}) {
+  const hasConditionalFields = resolvedFields.some((f) => f.visible || f.disabled);
+  const watchedValues = useWatch({
+    control: form.control,
+    disabled: !hasConditionalFields
+  });
+  const onInvalid = (errors) => {
+    const firstErrorKey = Object.keys(errors)[0];
+    if (firstErrorKey) form.setFocus(firstErrorKey);
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(Spinner, {}) });
+  }
+  if (mode === "wizard" && steps) {
+    return /* @__PURE__ */ jsx(
+      WizardForm,
+      {
+        steps,
+        form,
+        fields: resolvedFields,
+        onSubmit: handleSave,
+        isSaving,
+        action,
+        onInvalid
+      }
+    );
+  }
+  const visibleFields = resolvedFields.filter(
+    (field) => field.visible?.(watchedValues) !== false
+  );
+  let autoFocusAssigned = false;
+  const groups = [];
+  const groupMap = /* @__PURE__ */ new Map();
+  for (const field of visibleFields) {
+    const groupKey = field.group ?? null;
+    if (!groupMap.has(groupKey)) {
+      const arr = [];
+      groupMap.set(groupKey, arr);
+      groups.push({ name: groupKey, fields: arr });
+    }
+    groupMap.get(groupKey).push(field);
+  }
+  function renderFields(fields) {
+    const useGrid = columns === 2;
+    return /* @__PURE__ */ jsx("div", { className: useGrid ? "grid grid-cols-2 gap-4" : "space-y-4", children: fields.map((field) => {
+      const isHidden = field.hidden || field.type === "hidden";
+      const shouldAutoFocus = !isHidden && !autoFocusAssigned;
+      if (shouldAutoFocus) autoFocusAssigned = true;
+      const autoSpan = useGrid && (field.type === "textarea" || field.type === "array") ? 2 : void 0;
+      const span = useGrid ? field.colSpan ?? autoSpan ?? 1 : void 0;
+      return /* @__PURE__ */ jsx("div", { className: span === 2 ? "col-span-2" : "", children: /* @__PURE__ */ jsx(
+        ResourceFormFieldRenderer,
+        {
+          field,
+          control: form.control,
+          action,
+          autoFocus: shouldAutoFocus,
+          watchedValues
+        }
+      ) }, field.key);
+    }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: (e) => {
+        e.preventDefault();
+        void form.handleSubmit(handleSave, onInvalid)(e);
+      },
+      className: "space-y-4",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "max-h-[60vh] overflow-y-auto px-1", children: renderForm ? renderForm(form, visibleFields) : /* @__PURE__ */ jsx("div", { className: "space-y-4", children: groups.map((group, idx) => /* @__PURE__ */ jsxs("div", { children: [
+          group.name && /* @__PURE__ */ jsxs("div", { className: "pt-2", children: [
+            idx > 0 && /* @__PURE__ */ jsx("div", { className: "border-t mb-3" }),
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-muted-foreground mb-3", children: group.name })
+          ] }),
+          renderFields(group.fields)
+        ] }, group.name ?? "__default")) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: () => onOpenChange(false),
+              disabled: isSaving,
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxs(Button, { type: "submit", disabled: isSaving, children: [
+            isSaving && /* @__PURE__ */ jsx(Spinner, { size: "sm", className: "mr-2" }),
+            action === "create" ? "Create" : "Save"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function ResourceForm(props) {
+  const {
+    resource,
+    action,
+    item,
+    open,
+    onOpenChange,
+    title: titleProp,
+    fields: fieldsProp,
+    listData,
+    renderForm,
+    onSuccess,
+    onError,
+    layout: layoutProp = "dialog",
+    mode = "standard",
+    steps,
+    columns = 1
+  } = props;
+  const isMobile = useIsMobile();
+  const effectiveLayout = isMobile ? "sheet" : layoutProp;
+  const resourceLabel = titleCase(resource.replace(/s$/, ""));
+  const formTitle = titleProp ?? (action === "create" ? `Create ${resourceLabel}` : `Edit ${resourceLabel}`);
+  const formDescription = `${action === "create" ? "Fill in the details to create a new" : "Update the"} ${resourceLabel.toLowerCase()} record.`;
+  const hookOptions = {
+    resource,
+    action,
+    id: item ? String(item.id ?? "") : void 0,
+    initialData: item ?? void 0,
+    fields: fieldsProp,
+    listData,
+    onSuccess: (data) => {
+      onOpenChange(false);
+      onSuccess?.(data);
+    },
+    onError
+  };
+  const { form, resolvedFields, handleSave, isSaving, isLoading } = useResourceForm(hookOptions);
+  const bodyProps = {
+    form,
+    resolvedFields,
+    renderForm,
+    action,
+    isSaving,
+    isLoading,
+    onOpenChange,
+    handleSave,
+    mode,
+    steps,
+    columns
+  };
+  if (effectiveLayout === "dialog") {
+    return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[560px]", children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: formTitle }),
+        /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: formDescription })
+      ] }),
+      /* @__PURE__ */ jsx(FormBody, { ...bodyProps })
+    ] }) });
+  }
+  if (effectiveLayout === "sheet") {
+    return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "sm:max-w-[480px] overflow-y-auto", children: [
+      /* @__PURE__ */ jsxs(SheetHeader, { children: [
+        /* @__PURE__ */ jsx(SheetTitle, { children: formTitle }),
+        /* @__PURE__ */ jsx(SheetDescription, { className: "sr-only", children: formDescription })
+      ] }),
+      /* @__PURE__ */ jsx(FormBody, { ...bodyProps })
+    ] }) });
+  }
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs(Card, { className: "mx-auto max-w-[560px]", children: [
+    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: formTitle }) }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(FormBody, { ...bodyProps }) })
+  ] });
+}
+function ResourcePage(props) {
+  const {
+    resource: resourceName,
+    data: dataProp,
+    total: totalProp,
+    title,
+    subtitle,
+    icon,
+    columns: columnsProp,
+    detail = "panel",
+    detailWidth = "md",
+    titleField: titleFieldProp,
+    subtitleField: subtitleFieldProp,
+    renderDetail: renderDetailProp,
+    detailFields,
+    statusFilter,
+    searchFields,
+    searchPlaceholder,
+    initialFilters,
+    onFiltersChange,
+    onCreate,
+    onEdit,
+    onDelete,
+    createLabel = "New",
+    allowCreate,
+    allowEdit,
+    formFields,
+    renderForm: renderFormProp,
+    formMode,
+    formSteps,
+    formLayout: formLayoutProp,
+    bulkActions,
+    toolbar,
+    emptyState,
+    resourceOptions,
+    defaultView = "table",
+    onNavigate = defaultNavigate
+  } = props;
+  const isClientMode = !!resourceName;
+  const resourceHook = useResource(
+    resourceName ?? "__noop__",
+    isClientMode ? resourceOptions : { enabled: false }
+  );
+  const displayData = isClientMode ? resourceHook.list.data?.data ?? [] : dataProp ?? [];
+  const displayTotal = isClientMode ? resourceHook.list.data?.total ?? 0 : totalProp ?? 0;
+  const isLoading = isClientMode ? resourceHook.list.isLoading : false;
+  const hasError = isClientMode ? resourceHook.list.isError : false;
+  const page = useResourcePage({
+    resource: resourceName,
+    data: displayData,
+    total: displayTotal,
+    columns: columnsProp,
+    statusFilter,
+    searchFields,
+    initialFilters,
+    onFiltersChange,
+    defaultView,
+    detail,
+    titleField: titleFieldProp,
+    subtitleField: subtitleFieldProp
+  });
+  const actions = useMemo(() => {
+    if (isClientMode) {
+      return {
+        update: resourceHook.update,
+        remove: resourceHook.remove,
+        refetch: () => resourceHook.list.refetch()
+      };
+    }
+    return {
+      update: async () => {
+        throw new Error("ResourceActions.update not available in server-data mode");
+      },
+      remove: async () => {
+        throw new Error("ResourceActions.remove not available in server-data mode");
+      },
+      refetch: () => {
+      }
+    };
+  }, [isClientMode, resourceHook.update, resourceHook.remove, resourceHook.list]);
+  const [selectedIds, setSelectedIds] = useState(/* @__PURE__ */ new Set());
+  const handleToggleSelect = useCallback((id) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+  const handleToggleAll = useCallback(() => {
+    setSelectedIds((prev) => {
+      if (prev.size === page.data.length) return /* @__PURE__ */ new Set();
+      return new Set(
+        page.data.map(
+          (item) => String(item.id ?? "")
+        )
+      );
+    });
+  }, [page.data]);
+  const handleClearSelection = useCallback(() => {
+    setSelectedIds(/* @__PURE__ */ new Set());
+  }, []);
+  const [formOpen, setFormOpen] = useState(false);
+  const [formAction, setFormAction] = useState("create");
+  const [formItem, setFormItem] = useState(null);
+  const useBuiltInCreate = allowCreate && !onCreate && isClientMode;
+  const useBuiltInEdit = allowEdit && !onEdit && isClientMode;
+  const handleCreate = useCallback(() => {
+    if (useBuiltInCreate) {
+      setFormAction("create");
+      setFormItem(null);
+      setFormOpen(true);
+    } else if (onCreate) {
+      onCreate();
+    }
+  }, [useBuiltInCreate, onCreate]);
+  const handleEdit = useCallback(
+    (item) => {
+      if (useBuiltInEdit) {
+        setFormAction("edit");
+        setFormItem(item);
+        setFormOpen(true);
+      } else if (onEdit) {
+        onEdit(item);
+      }
+    },
+    [useBuiltInEdit, onEdit]
+  );
+  const tableColumns = useMemo(() => {
+    if (!isClientMode) return page.tableColumns;
+    return page.columns.map((col) => ({
+      key: col.key,
+      header: col.header ?? col.key,
+      sortable: col.sortable ?? true,
+      hideBelow: col.hideBelow,
+      render: col.render ? (item, value) => col.render(item, value, actions) : void 0
+    }));
+  }, [isClientMode, page.columns, page.tableColumns, actions]);
+  const detailTitle = page.selectedItem ? String(
+    page.selectedItem[page.titleField] ?? ""
+  ) : "";
+  const detailSubtitle = page.selectedItem && page.subtitleField ? String(
+    page.selectedItem[page.subtitleField] ?? ""
+  ) : void 0;
+  const handleRowClick = (item) => {
+    if (detail === "route") {
+      const id = item.id;
+      if (resourceName && id) {
+        onNavigate(`/${resourceName}/${id}`);
+      }
+      return;
+    }
+    page.handleRowClick(item);
+  };
+  const showCreateButton = onCreate || useBuiltInCreate;
+  const createButton = showCreateButton ? /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: handleCreate, children: [
+    /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-1" }),
+    createLabel
+  ] }) : null;
+  const createAction = toolbar || createButton ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    toolbar,
+    createButton
+  ] }) : void 0;
+  const isEmpty = !isLoading && !hasError && page.data.length === 0;
+  const modalDetailContent = page.selectedItem ? renderDetailProp ? renderDetailProp(page.selectedItem) : detailFields ? /* @__PURE__ */ jsx("dl", { className: "space-y-3", children: detailFields.map((field) => /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: field.label }),
+    /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm text-foreground", children: field.render ? field.render(
+      page.selectedItem[field.key],
+      page.selectedItem
+    ) : String(
+      page.selectedItem[field.key] ?? "\u2014"
+    ) })
+  ] }, field.key)) }) : null : null;
+  return /* @__PURE__ */ jsxs(
+    DataPageShell,
+    {
+      title,
+      subtitle,
+      icon,
+      count: page.data.length,
+      totalCount: displayTotal,
+      isLoading,
+      hasError,
+      isEmpty,
+      onRetry: isClientMode ? () => resourceHook.list.refetch() : void 0,
+      viewMode: page.viewMode,
+      onViewModeChange: page.setViewMode,
+      createAction,
+      hasActiveFilters: page.hasActiveFilters,
+      onClearFilters: page.clearFilters,
+      emptyAction: emptyState,
+      filters: /* @__PURE__ */ jsx(
+        DataFilters,
+        {
+          search: page.filterConfig.search,
+          onSearchChange: page.filterConfig.onSearchChange,
+          searchPlaceholder,
+          sort: page.filterConfig.sort,
+          onSortChange: page.filterConfig.onSortChange,
+          sortOptions: page.filterConfig.sortOptions,
+          statusChips: page.filterConfig.statusChips,
+          onClearAll: page.hasActiveFilters ? page.clearFilters : void 0
+        }
+      ),
+      children: [
+        bulkActions && bulkActions.length > 0 && /* @__PURE__ */ jsx(
+          DataBulkBar,
+          {
+            selected: selectedIds,
+            totalCount: page.data.length,
+            onToggleAll: handleToggleAll,
+            onClearSelection: handleClearSelection,
+            actions: bulkActions.map((a) => ({
+              label: a.label,
+              icon: a.icon ?? Trash2,
+              variant: a.variant,
+              onClick: () => {
+                void a.onAction(Array.from(selectedIds));
+              }
+            }))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DataGrid,
+          {
+            items: page.data,
+            viewMode: page.viewMode,
+            getKey: (item) => String(item.id ?? ""),
+            renderTable: (items) => /* @__PURE__ */ jsx(
+              DataTable,
+              {
+                items,
+                columns: tableColumns,
+                getKey: (item) => String(item.id ?? ""),
+                onRowClick: detail !== "none" ? handleRowClick : void 0,
+                selectable: !!bulkActions && bulkActions.length > 0,
+                selected: selectedIds,
+                onToggleSelect: handleToggleSelect,
+                onToggleAll: handleToggleAll
+              }
+            ),
+            renderCard: (item) => {
+              const cols = page.columns;
+              const titleCol = cols[0];
+              const titleVal = titleCol ? String(item[titleCol.key] ?? "") : "";
+              const badgeCol = cols[1];
+              const badgeVal = badgeCol ? item[badgeCol.key] : null;
+              const priceCol = cols.find(
+                (c, i) => i > 1 && /price|cost|amount|total/i.test(c.key)
+              );
+              const priceVal = priceCol ? item[priceCol.key] : null;
+              const metaCols = cols.filter(
+                (c) => c !== titleCol && c !== badgeCol && c !== priceCol
+              );
+              return /* @__PURE__ */ jsxs(
+                Card,
+                {
+                  className: "h-full cursor-pointer hover:shadow-md transition-shadow",
+                  onClick: () => handleRowClick(item),
+                  children: [
+                    /* @__PURE__ */ jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-base truncate", children: titleVal }) }),
+                    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                        badgeCol && /* @__PURE__ */ jsx("span", { children: badgeCol.render ? badgeCol.render(item, badgeVal, actions) : badgeVal != null ? String(badgeVal) : "\u2014" }),
+                        priceVal != null && /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: String(priceVal) })
+                      ] }),
+                      metaCols.map((col) => {
+                        const val = item[col.key];
+                        return /* @__PURE__ */ jsx(
+                          "p",
+                          {
+                            className: "text-xs text-muted-foreground truncate",
+                            children: col.render ? col.render(item, val, actions) : val != null ? String(val) : "\u2014"
+                          },
+                          col.key
+                        );
+                      })
+                    ] }) })
+                  ]
+                }
+              );
+            },
+            renderListItem: (item) => {
+              const cols = page.columns;
+              const titleCol = cols[0];
+              const titleVal = titleCol ? String(item[titleCol.key] ?? "") : "";
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "flex items-center justify-between px-3 py-2 border-b cursor-pointer hover:bg-muted/50 transition-colors",
+                  onClick: () => handleRowClick(item),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-medium text-sm truncate", children: titleVal }),
+                    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 text-xs text-muted-foreground", children: cols.slice(1, 4).map((col) => {
+                      const val = item[col.key];
+                      return /* @__PURE__ */ jsx("span", { children: col.render ? col.render(item, val, actions) : val != null ? String(val) : "\u2014" }, col.key);
+                    }) })
+                  ]
+                }
+              );
+            }
+          }
+        ),
+        detail === "panel" && /* @__PURE__ */ jsx(
+          DetailPanel,
+          {
+            item: page.selectedItem,
+            open: page.detailOpen,
+            onClose: () => {
+              page.setDetailOpen(false);
+              page.setSelectedItem(null);
+            },
+            title: detailTitle,
+            subtitle: detailSubtitle,
+            onEdit: onEdit ?? (useBuiltInEdit ? handleEdit : void 0),
+            onDelete,
+            fields: detailFields,
+            width: detailWidth,
+            children: renderDetailProp ? (item) => renderDetailProp(item) : void 0
+          }
+        ),
+        detail === "modal" && /* @__PURE__ */ jsx(
+          Dialog,
+          {
+            open: page.detailOpen,
+            onOpenChange: (open) => {
+              page.setDetailOpen(open);
+              if (!open) page.setSelectedItem(null);
+            },
+            children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+              /* @__PURE__ */ jsxs(DialogHeader, { children: [
+                /* @__PURE__ */ jsx(DialogTitle, { children: detailTitle }),
+                detailSubtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: detailSubtitle })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "py-4", children: [
+                modalDetailContent,
+                (onEdit || useBuiltInEdit || onDelete) && page.selectedItem && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-4 pt-4 border-t", children: [
+                  (onEdit || useBuiltInEdit) && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "outline",
+                      size: "sm",
+                      onClick: () => handleEdit(page.selectedItem),
+                      children: "Edit"
+                    }
+                  ),
+                  onDelete && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "destructive",
+                      size: "sm",
+                      onClick: () => onDelete(page.selectedItem),
+                      children: "Delete"
+                    }
+                  )
+                ] })
+              ] })
+            ] })
+          }
+        ),
+        (useBuiltInCreate || useBuiltInEdit) && resourceName && /* @__PURE__ */ jsx(
+          ResourceForm,
+          {
+            resource: resourceName,
+            action: formAction,
+            layout: formLayoutProp ?? (formAction === "edit" ? "sheet" : "dialog"),
+            mode: formMode,
+            steps: formSteps,
+            item: formAction === "edit" ? formItem ?? void 0 : page.data.length > 0 ? Object.fromEntries(
+              Object.keys(page.data[0]).filter((k) => k !== "id").map((k) => [k, ""])
+            ) : void 0,
+            open: formOpen,
+            onOpenChange: setFormOpen,
+            fields: formFields,
+            listData: page.data,
+            renderForm: renderFormProp,
+            onSuccess: () => {
+              page.setDetailOpen(false);
+              page.setSelectedItem(null);
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function ThemeToggle() {
+  const [dark, setDark] = useState(false);
+  useEffect(() => {
+    const stored = localStorage.getItem("theme");
+    const prefersDark = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    ).matches;
+    const isDark = stored === "dark" || !stored && prefersDark;
+    setDark(isDark);
+    document.documentElement.classList.toggle("dark", isDark);
+  }, []);
+  function toggle() {
+    const next = !dark;
+    setDark(next);
+    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" }) });
+}
+function SidebarNav({
+  navItems,
+  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);
+    return /* @__PURE__ */ jsxs(
+      LinkComp,
+      {
+        href: item.to,
+        onClick: onNavClick,
+        "aria-current": active ? "page" : void 0,
+        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"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(item.icon, { className: "h-4 w-4" }),
+          item.label
+        ]
+      },
+      item.to
+    );
+  }) });
+}
+function SidebarLogo({
+  appName,
+  appLogo
+}) {
+  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 })
+  ] });
+}
+function AppShell({
+  appName,
+  appLogo,
+  navItems,
+  children,
+  showThemeToggle = true,
+  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",
+      {
+        className: "fixed inset-0 z-40 bg-black/50 md:hidden",
+        onClick: () => setMobileOpen(false)
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        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"
+        ),
+        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(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                onClick: () => setMobileOpen(false),
+                children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            SidebarNav,
+            {
+              navItems,
+              onNavClick: () => setMobileOpen(false),
+              linkComponent,
+              activePath,
+              isActive
+            }
+          )
+        ]
+      }
+    ),
+    /* @__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: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            onClick: () => setMobileOpen(true),
+            children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+          }
+        ),
+        /* @__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,
+          {
+            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"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(item.icon, { className: "h-5 w-5" }),
+              item.label
+            ]
+          },
+          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 };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map