@juv/codego-react-ui 3.4.7 → 3.4.8

package/dist/index.js

@@ -5783,13 +5783,79 @@ function FileUpload({
 }
 
 // src/components/ui/repeater.tsx
-import { Plus as Plus3, Trash2, GripVertical as GripVertical3 } from "lucide-react";
+import { Plus as Plus3, Trash2, GripVertical as GripVertical3, Paperclip } from "lucide-react";
 import { jsx as jsx29, jsxs as jsxs27 } from "react/jsx-runtime";
+function RepeaterFieldRenderer({
+  field,
+  value,
+  onChange
+}) {
+  if (field.type === "image") {
+    return /* @__PURE__ */ jsxs27("div", { className: "flex flex-col gap-1.5", children: [
+      field.label && /* @__PURE__ */ jsx29("span", { className: "text-xs font-medium text-muted-foreground", children: field.label }),
+      /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-3", children: [
+        value && /* @__PURE__ */ jsx29("img", { src: value, alt: field.key, className: "h-10 w-10 rounded-lg object-cover ring-1 ring-border shrink-0" }),
+        /* @__PURE__ */ jsx29(
+          Input,
+          {
+            inputMode: "text",
+            value: value ?? "",
+            onChange: (e) => onChange(e.target.value),
+            placeholder: field.placeholder ?? "Image URL"
+          }
+        )
+      ] })
+    ] });
+  }
+  if (field.type === "attachment") {
+    return /* @__PURE__ */ jsxs27("div", { className: "flex flex-col gap-1.5", children: [
+      field.label && /* @__PURE__ */ jsx29("span", { className: "text-xs font-medium text-muted-foreground", children: field.label }),
+      /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2", children: [
+        value && /* @__PURE__ */ jsxs27(
+          "a",
+          {
+            href: value,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "inline-flex items-center gap-1.5 rounded-lg border border-border bg-muted/50 px-2.5 py-1 text-xs font-medium text-foreground hover:bg-muted transition-colors shrink-0",
+            children: [
+              /* @__PURE__ */ jsx29(Paperclip, { className: "h-3 w-3" }),
+              String(value).split("/").pop()
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx29(
+          Input,
+          {
+            inputMode: "text",
+            value: value ?? "",
+            onChange: (e) => onChange(e.target.value),
+            placeholder: field.placeholder ?? "Attachment URL"
+          }
+        )
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs27("div", { className: "flex flex-col gap-1.5", children: [
+    field.label && /* @__PURE__ */ jsx29("span", { className: "text-xs font-medium text-muted-foreground", children: field.label }),
+    /* @__PURE__ */ jsx29(
+      Input,
+      {
+        inputMode: "text",
+        value: value ?? "",
+        onChange: (e) => onChange(e.target.value),
+        placeholder: field.placeholder ?? field.key
+      }
+    )
+  ] });
+}
 function Repeater({
   items,
   onAdd,
   onRemove,
   renderItem,
+  fields,
+  onFieldChange,
   addButtonText = "Add Item",
   className
 }) {
@@ -5802,7 +5868,15 @@ function Repeater({
         children: [
           /* @__PURE__ */ jsx29("div", { className: "mt-1 cursor-grab text-muted-foreground/30 group-hover:text-muted-foreground/60 transition-colors shrink-0", children: /* @__PURE__ */ jsx29(GripVertical3, { className: "h-4 w-4" }) }),
           /* @__PURE__ */ jsx29("div", { className: "mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/10 text-[10px] font-semibold text-primary", children: index + 1 }),
-          /* @__PURE__ */ jsx29("div", { className: "flex-1 min-w-0", children: renderItem(item, index) }),
+          /* @__PURE__ */ jsx29("div", { className: "flex-1 min-w-0", children: fields ? /* @__PURE__ */ jsx29("div", { className: "grid gap-3", style: { gridTemplateColumns: fields.length > 1 ? `repeat(${Math.min(fields.length, 3)}, minmax(0, 1fr))` : "1fr" }, children: fields.map((f) => /* @__PURE__ */ jsx29(
+            RepeaterFieldRenderer,
+            {
+              field: f,
+              value: item[f.key],
+              onChange: (v) => onFieldChange?.(index, f.key, v)
+            },
+            f.key
+          )) }) : renderItem ? renderItem(item, index) : null }),
           /* @__PURE__ */ jsxs27(
             Button,
             {
@@ -6284,7 +6358,7 @@ import * as React28 from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import axios3 from "axios";
 import { ChevronLeft as ChevronLeft6, ChevronRight as ChevronRight8, Search as Search5, Trash2 as Trash22, ChevronsUpDown, ChevronUp, ChevronDown as ChevronDown4, X as X9, Eye as Eye2, Pencil as Pencil2, Trash as Trash3, Loader2 as Loader22 } from "lucide-react";
-import { Fragment as Fragment11, jsx as jsx32, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx32, jsxs as jsxs30 } from "react/jsx-runtime";
 function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce = 300, transform, manual = false, refresh: refreshEnabled = false, refreshInterval = 0, hardReload, onSuccess, onError }) {
   const [data, setData] = React28.useState([]);
   const [columns, setColumns] = React28.useState([]);
@@ -6375,8 +6449,14 @@ function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOv
     goToPage: (page) => setCurrentPage(page),
     reload: () => setTick((t) => t + 1),
     refresh: () => setTick((t) => t + 1),
+    // Passthrough props
     searchValue,
-    onSearchChange: handleSearchChange
+    onSearchChange: handleSearchChange,
+    page: currentPage,
+    onPageChange: (page) => setCurrentPage(page),
+    sort: [],
+    onSortChange: () => {
+    }
   };
 }
 var MODAL_WIDTH = {
@@ -6434,8 +6514,8 @@ function validateField(field, value) {
   return null;
 }
 function FieldRenderer({ field, value, onChange }) {
-  if (field.component) return /* @__PURE__ */ jsx32(Fragment11, { children: field.component });
-  if (field.render) return /* @__PURE__ */ jsx32(Fragment11, { children: field.render(value, onChange) });
+  if (field.component) return /* @__PURE__ */ jsx32(Fragment12, { children: field.component });
+  if (field.render) return /* @__PURE__ */ jsx32(Fragment12, { children: field.render(value, onChange) });
   const toLabelValue = (o) => {
     if (typeof o === "string") return { label: o, value: o };
     if (Array.isArray(o)) return { label: o[0], value: o[1] };
@@ -6532,6 +6612,28 @@ function FieldRenderer({ field, value, onChange }) {
       } });
     case "repeater": {
       const items = Array.isArray(value) ? value : [];
+      if (field.repeaterFields) {
+        const rows = Array.isArray(value) ? value : [];
+        return /* @__PURE__ */ jsx32(
+          Repeater,
+          {
+            items: rows,
+            fields: field.repeaterFields,
+            onAdd: () => {
+              const blank = {};
+              field.repeaterFields.forEach((f) => {
+                blank[f.key] = "";
+              });
+              onChange([...rows, blank]);
+            },
+            onRemove: (i) => onChange(rows.filter((_, idx) => idx !== i)),
+            onFieldChange: (i, key, val) => {
+              const next = rows.map((r, idx) => idx === i ? { ...r, [key]: val } : r);
+              onChange(next);
+            }
+          }
+        );
+      }
       return /* @__PURE__ */ jsx32(
         Repeater,
         {
@@ -6583,8 +6685,8 @@ function ViewModal({
     const vt = f.viewType ?? f.type;
     const empty = value === null || value === void 0 || value === "";
     const dash = /* @__PURE__ */ jsx32("span", { className: "text-muted-foreground italic text-sm", children: "\u2014" });
-    if (f.component) return /* @__PURE__ */ jsx32(Fragment11, { children: f.component });
-    if (f.render) return /* @__PURE__ */ jsx32(Fragment11, { children: f.render(value, () => {
+    if (f.component) return /* @__PURE__ */ jsx32(Fragment12, { children: f.component });
+    if (f.render) return /* @__PURE__ */ jsx32(Fragment12, { children: f.render(value, () => {
     }) });
     switch (vt) {
       case "image":
@@ -6658,6 +6760,47 @@ function ViewModal({
             ]
           }
         );
+      case "repeater": {
+        const rows = Array.isArray(value) ? value : [];
+        if (!rows.length) return dash;
+        const rFields = f.repeaterFields;
+        return /* @__PURE__ */ jsx32("div", { className: "space-y-2", children: rows.map((row, ri) => /* @__PURE__ */ jsxs30("div", { className: "flex flex-wrap gap-3 rounded-xl border border-border bg-muted/30 px-3 py-2", children: [
+          /* @__PURE__ */ jsx32("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/10 text-[10px] font-semibold text-primary", children: ri + 1 }),
+          rFields ? rFields.map((rf) => {
+            const v = row[rf.key];
+            if (rf.type === "image") return /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-1", children: [
+              rf.label && /* @__PURE__ */ jsx32("span", { className: "text-[10px] text-muted-foreground", children: rf.label }),
+              v ? /* @__PURE__ */ jsx32("img", { src: v, alt: rf.key, className: "h-10 w-10 rounded-lg object-cover ring-1 ring-border" }) : dash
+            ] }, rf.key);
+            if (rf.type === "attachment") return /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-1", children: [
+              rf.label && /* @__PURE__ */ jsx32("span", { className: "text-[10px] text-muted-foreground", children: rf.label }),
+              v ? /* @__PURE__ */ jsxs30(
+                "a",
+                {
+                  href: v,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "inline-flex items-center gap-1 rounded-lg border border-border bg-muted/50 px-2 py-1 text-xs font-medium hover:bg-muted transition-colors",
+                  children: [
+                    /* @__PURE__ */ jsx32("svg", { className: "h-3 w-3 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx32("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" }) }),
+                    String(v).split("/").pop()
+                  ]
+                }
+              ) : dash
+            ] }, rf.key);
+            return /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-1", children: [
+              rf.label && /* @__PURE__ */ jsx32("span", { className: "text-[10px] text-muted-foreground", children: rf.label }),
+              /* @__PURE__ */ jsx32("span", { className: "text-sm", children: v ?? "\u2014" })
+            ] }, rf.key);
+          }) : (
+            // payload mode: row has { type, key, value }
+            Object.entries(row).map(([k, v]) => /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx32("span", { className: "text-[10px] text-muted-foreground", children: k }),
+              /* @__PURE__ */ jsx32("span", { className: "text-sm", children: String(v) })
+            ] }, k))
+          )
+        ] }, ri)) });
+      }
       case "checkbox":
         return /* @__PURE__ */ jsx32(
           "input",
@@ -6810,7 +6953,7 @@ function EditModal({
       title: "Edit Record",
       onClose,
       width,
-      footer: /* @__PURE__ */ jsxs30(Fragment11, { children: [
+      footer: /* @__PURE__ */ jsxs30(Fragment12, { children: [
         /* @__PURE__ */ jsx32(Button, { variant: "outline", size: "sm", onClick: onClose, disabled: loading, children: "Cancel" }),
         /* @__PURE__ */ jsxs30(Button, { size: "sm", onClick: handleSubmit, disabled: loading, children: [
           loading && /* @__PURE__ */ jsx32(Loader22, { className: "h-3.5 w-3.5 mr-1.5 animate-spin" }),
@@ -6837,7 +6980,7 @@ function EditModal({
               ...f.colSpan ? { gridColumn: `span ${f.colSpan}` } : {},
               ...f.rowSpan ? { gridRow: `span ${f.rowSpan}` } : {}
             },
-            children: f.component ? /* @__PURE__ */ jsx32(Fragment11, { children: f.component }) : /* @__PURE__ */ jsxs30(Fragment11, { children: [
+            children: f.component ? /* @__PURE__ */ jsx32(Fragment12, { children: f.component }) : /* @__PURE__ */ jsxs30(Fragment12, { children: [
               f.type !== "checkbox" && /* @__PURE__ */ jsxs30("label", { className: "block text-xs font-semibold text-muted-foreground mb-1", children: [
                 f.label,
                 f.required && /* @__PURE__ */ jsx32("span", { className: "text-danger ml-0.5", children: "*" })
@@ -6897,7 +7040,7 @@ function DeleteModal({
       title: "Confirm Delete",
       onClose,
       width: "lg",
-      footer: /* @__PURE__ */ jsxs30(Fragment11, { children: [
+      footer: /* @__PURE__ */ jsxs30(Fragment12, { children: [
         /* @__PURE__ */ jsx32(Button, { variant: "outline", size: "sm", onClick: onClose, disabled: loading, children: "Cancel" }),
         /* @__PURE__ */ jsxs30(Button, { variant: "danger", size: "sm", onClick: handleDelete, disabled: loading, children: [
           loading && /* @__PURE__ */ jsx32(Loader22, { className: "h-3.5 w-3.5 mr-1.5 animate-spin" }),
@@ -6957,12 +7100,45 @@ var BADGE_COLORS = {
 function badgeClass(value) {
   return BADGE_COLORS[value.toLowerCase()] ?? "bg-primary/10 text-primary border-primary/20";
 }
+function deriveField(key, sample) {
+  const label = key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+  const base = { key, label };
+  if (typeof sample === "boolean") return { ...base, type: "toggle", viewType: "toggle" };
+  if (typeof sample === "number") return { ...base, inputType: "number" };
+  if (Array.isArray(sample)) {
+    if (sample.length === 0 || typeof sample[0] === "string")
+      return { ...base, type: "tag-input" };
+    return base;
+  }
+  if (typeof sample === "string") {
+    if (/\.(png|jpe?g|gif|webp|svg|avif)(\?.*)?$/i.test(sample))
+      return { ...base, type: "input", viewType: "image" };
+    if (/\.(pdf|docx?|xlsx?|csv|zip|pptx?)(\?.*)?$/i.test(sample))
+      return { ...base, type: "input", viewType: "attachment" };
+    if (/^https?:\/\//.test(sample))
+      return { ...base, type: "input", viewType: "text-url-open-other-tabs" };
+    if (sample.length > 120 || /\n/.test(sample))
+      return { ...base, type: "textarea" };
+    if (/password|secret|token/i.test(key))
+      return { ...base, type: "password" };
+    if (/email/i.test(key))
+      return { ...base, inputType: "email" };
+    if (/color|colour/i.test(key) && /^#[0-9a-f]{3,8}$/i.test(sample))
+      return { ...base, type: "color-picker", viewType: "text" };
+  }
+  return base;
+}
 function Table({
   data,
   columns,
+  loading,
+  emptyState,
+  error: errorProp,
   searchable = false,
   searchPlaceholder = "Search...",
-  pagination = false,
+  searchValue: controlledSearch,
+  onSearchChange,
+  clientPagination = false,
   itemsPerPage = 10,
   selectable = false,
   onBulkDelete,
@@ -6970,15 +7146,38 @@ function Table({
   bulkDeleteBaseUrl,
   defaultActions,
   serverPagination,
-  className
+  variant = "default",
+  className,
+  onRowClick,
+  onRowDoubleClick,
+  rowClassName,
+  expandable = false,
+  renderExpanded,
+  columnVisibility,
+  onColumnVisibilityChange,
+  exportable = false,
+  onExport,
+  virtualized = false,
+  draggable = false,
+  onRowReorder,
+  keyboardNavigation = false
 }) {
   const { toast } = useToast();
-  const [search, setSearch] = React28.useState("");
+  const isControlledSearch = controlledSearch !== void 0;
+  const [internalSearch, setInternalSearch] = React28.useState("");
+  const search = isControlledSearch ? controlledSearch : internalSearch;
+  const setSearch = (v) => {
+    if (!isControlledSearch) setInternalSearch(v);
+    onSearchChange?.(v);
+  };
   const [currentPage, setCurrentPage] = React28.useState(1);
   const [selectedIds, setSelectedIds] = React28.useState([]);
   const [sortKey, setSortKey] = React28.useState(null);
   const [sortDir, setSortDir] = React28.useState(null);
   const [bulkLoading, setBulkLoading] = React28.useState(false);
+  const [expandedIds, setExpandedIds] = React28.useState(/* @__PURE__ */ new Set());
+  const [dragOverId, setDragOverId] = React28.useState(null);
+  const [focusedRowIdx, setFocusedRowIdx] = React28.useState(-1);
   const [viewItem, setViewItem] = React28.useState(null);
   const [editItem, setEditItem] = React28.useState(null);
   const [deleteItem, setDeleteItem] = React28.useState(null);
@@ -6990,15 +7189,17 @@ function Table({
   const safeBaseUrl = defaultActions?.baseUrl.replace(/\/+$/, "") ?? "";
   const autoFields = React28.useMemo(() => {
     if (!tableData.length) return [];
-    return Object.keys(tableData[0]).map((k) => ({
-      key: k,
-      label: k.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())
-    }));
+    const row = tableData[0];
+    return Object.keys(row).map((k) => deriveField(k, row[k]));
   }, [tableData]);
   const editFields = defaultActions?.editForm ?? autoFields;
   const viewFields = defaultActions?.viewForm ?? autoFields;
+  const visibleColumns = React28.useMemo(() => {
+    if (!columnVisibility) return columns;
+    return columns.filter((col) => columnVisibility[String(col.key)] !== false);
+  }, [columns, columnVisibility]);
   const allColumns = React28.useMemo(() => {
-    if (!defaultActions) return columns;
+    if (!defaultActions) return visibleColumns;
     const actionsCol = {
       key: "__actions__",
       title: "Actions",
@@ -7047,8 +7248,8 @@ function Table({
         ))
       ] })
     };
-    return defaultActions.position === "first" ? [actionsCol, ...columns] : [...columns, actionsCol];
-  }, [columns, defaultActions]);
+    return defaultActions.position === "first" ? [actionsCol, ...visibleColumns] : [...visibleColumns, actionsCol];
+  }, [visibleColumns, defaultActions]);
   const handleSort = (key) => {
     if (sortKey !== key) {
       setSortKey(key);
@@ -7081,13 +7282,28 @@ function Table({
   const totalPages = Math.max(1, Math.ceil(filteredData.length / itemsPerPage));
   const safePage = Math.min(currentPage, totalPages);
   const paginatedData = React28.useMemo(() => {
-    if (!pagination) return filteredData;
+    if (!clientPagination) return filteredData;
     const start = (safePage - 1) * itemsPerPage;
     return filteredData.slice(start, start + itemsPerPage);
-  }, [filteredData, pagination, safePage, itemsPerPage]);
+  }, [filteredData, clientPagination, safePage, itemsPerPage]);
   React28.useEffect(() => {
     setCurrentPage(1);
   }, [search]);
+  React28.useEffect(() => {
+    if (!keyboardNavigation) return;
+    const handler = (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setFocusedRowIdx((i) => Math.min(i + 1, paginatedData.length - 1));
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setFocusedRowIdx((i) => Math.max(i - 1, 0));
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [keyboardNavigation, paginatedData.length]);
   const handleSelectAll = (checked) => setSelectedIds(checked ? paginatedData.map((item) => String(item[idKey])) : []);
   const handleSelect = (id, checked) => setSelectedIds((prev) => checked ? [...prev, id] : prev.filter((i) => i !== id));
   const allSelected = paginatedData.length > 0 && selectedIds.length === paginatedData.length;
@@ -7145,8 +7361,9 @@ function Table({
     if (sortKey !== String(col.key)) return /* @__PURE__ */ jsx32(ChevronsUpDown, { className: "ml-1.5 h-3.5 w-3.5 opacity-40" });
     return sortDir === "asc" ? /* @__PURE__ */ jsx32(ChevronUp, { className: "ml-1.5 h-3.5 w-3.5 text-primary" }) : /* @__PURE__ */ jsx32(ChevronDown4, { className: "ml-1.5 h-3.5 w-3.5 text-primary" });
   };
-  return /* @__PURE__ */ jsxs30(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs30(Fragment12, { children: [
     /* @__PURE__ */ jsxs30("div", { className: cn("w-full space-y-3", className), children: [
+      errorProp && /* @__PURE__ */ jsx32("div", { className: "rounded-xl border border-danger/30 bg-danger/5 px-4 py-3 text-sm text-danger", children: errorProp }),
       /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between gap-3 flex-wrap", children: [
         searchable && /* @__PURE__ */ jsxs30("div", { className: "relative w-72", children: [
           /* @__PURE__ */ jsx32(Search5, { className: "absolute text-primary left-3 top-1/2 -translate-y-1/2 h-4 w-4 z-10" }),
@@ -7169,7 +7386,7 @@ function Table({
           )
         ] }),
         /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2 ml-auto flex-wrap", children: [
-          selectable && selectedIds.length > 0 && /* @__PURE__ */ jsxs30(Fragment11, { children: [
+          selectable && selectedIds.length > 0 && /* @__PURE__ */ jsxs30(Fragment12, { children: [
             /* @__PURE__ */ jsxs30(
               "button",
               {
@@ -7222,6 +7439,33 @@ function Table({
               ]
             }
           ),
+          exportable && /* @__PURE__ */ jsxs30("div", { className: "relative group", children: [
+            /* @__PURE__ */ jsx32("button", { className: "inline-flex items-center gap-1.5 rounded-lg border border-border bg-muted/50 px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-muted transition-colors", children: "Export" }),
+            /* @__PURE__ */ jsx32("div", { className: "absolute right-0 top-full mt-1 z-20 hidden group-hover:flex flex-col min-w-[110px] rounded-xl border border-border bg-card shadow-lg overflow-hidden", children: ["csv", "excel", "pdf"].map((type) => /* @__PURE__ */ jsx32(
+              "button",
+              {
+                onClick: () => onExport?.(type),
+                className: "px-4 py-2 text-xs text-left hover:bg-muted transition-colors capitalize",
+                children: type.toUpperCase()
+              },
+              type
+            )) })
+          ] }),
+          columnVisibility && onColumnVisibilityChange && /* @__PURE__ */ jsxs30("div", { className: "relative group", children: [
+            /* @__PURE__ */ jsx32("button", { className: "inline-flex items-center gap-1.5 rounded-lg border border-border bg-muted/50 px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-muted transition-colors", children: "Columns" }),
+            /* @__PURE__ */ jsx32("div", { className: "absolute right-0 top-full mt-1 z-20 hidden group-hover:flex flex-col min-w-[150px] rounded-xl border border-border bg-card shadow-lg overflow-hidden p-2 gap-1", children: columns.map((col) => /* @__PURE__ */ jsxs30("label", { className: "flex items-center gap-2 px-2 py-1 rounded-lg hover:bg-muted cursor-pointer text-xs", children: [
+              /* @__PURE__ */ jsx32(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: columnVisibility[String(col.key)] !== false,
+                  onChange: (e) => onColumnVisibilityChange({ ...columnVisibility, [String(col.key)]: e.target.checked }),
+                  className: "accent-primary"
+                }
+              ),
+              col.title
+            ] }, String(col.key))) })
+          ] }),
           /* @__PURE__ */ jsxs30("span", { className: "text-xs text-muted-foreground", children: [
             totalRows,
             " ",
@@ -7230,8 +7474,26 @@ function Table({
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsx32("div", { className: "rounded-xl border border-border overflow-hidden bg-card/50 backdrop-blur-sm shadow-sm", children: /* @__PURE__ */ jsx32("div", { className: "w-full overflow-auto", children: /* @__PURE__ */ jsxs30("table", { className: "w-full caption-bottom text-sm", children: [
-        /* @__PURE__ */ jsx32("thead", { children: /* @__PURE__ */ jsxs30("tr", { className: "border-b border-border bg-muted/40", children: [
+      loading && /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-center py-12 text-muted-foreground gap-2", children: [
+        /* @__PURE__ */ jsx32(Loader22, { className: "h-5 w-5 animate-spin" }),
+        /* @__PURE__ */ jsx32("span", { className: "text-sm", children: "Loading\u2026" })
+      ] }),
+      !loading && /* @__PURE__ */ jsx32("div", { className: cn(
+        variant === "default" && "rounded-xl border border-border overflow-hidden bg-card/50 backdrop-blur-sm shadow-sm",
+        variant === "zebra" && "rounded-xl border border-border overflow-hidden bg-card/50 backdrop-blur-sm shadow-sm",
+        variant === "card" && "space-y-2",
+        variant === "glass" && "rounded-2xl overflow-hidden border border-white/10 bg-background/30 backdrop-blur-xl shadow-xl",
+        variant === "soft" && "rounded-2xl overflow-hidden bg-card",
+        variant === "soft" && "[box-shadow:6px_6px_12px_hsl(var(--foreground)/0.07),-6px_-6px_12px_hsl(var(--background)/0.8)]",
+        virtualized && "max-h-[520px] overflow-y-auto"
+      ), children: /* @__PURE__ */ jsx32("div", { className: cn("w-full overflow-auto", variant === "card" && "space-y-2"), children: /* @__PURE__ */ jsxs30("table", { className: cn("w-full caption-bottom text-sm", variant === "card" && "border-separate border-spacing-y-2"), children: [
+        /* @__PURE__ */ jsx32("thead", { children: /* @__PURE__ */ jsxs30("tr", { className: cn(
+          variant === "default" && "border-b border-border bg-muted/40",
+          variant === "zebra" && "border-b border-border bg-muted/40",
+          variant === "card" && "[&>th]:bg-transparent",
+          variant === "glass" && "border-b border-white/10 bg-white/5",
+          variant === "soft" && "border-b-0 bg-muted/30"
+        ), children: [
           selectable && /* @__PURE__ */ jsx32("th", { className: "h-11 w-[46px] px-4 text-left align-middle", children: /* @__PURE__ */ jsx32(
             Checkbox,
             {
@@ -7239,13 +7501,16 @@ function Table({
               onChange: (e) => handleSelectAll(e.target.checked)
             }
           ) }),
+          expandable && /* @__PURE__ */ jsx32("th", { className: "h-11 w-8" }),
           allColumns.map((col, ci) => /* @__PURE__ */ jsx32(
             "th",
             {
               onClick: () => col.sortable && handleSort(String(col.key)),
               className: cn(
                 "h-11 px-4 text-left align-middle text-xs font-semibold uppercase tracking-wider text-muted-foreground select-none whitespace-nowrap",
-                col.sortable && "cursor-pointer hover:text-foreground transition-colors"
+                col.sortable && "cursor-pointer hover:text-foreground transition-colors",
+                variant === "glass" && "text-foreground/70",
+                variant === "soft" && "text-muted-foreground/80"
               ),
               children: /* @__PURE__ */ jsxs30("span", { className: "inline-flex items-center", children: [
                 col.title,
@@ -7258,9 +7523,9 @@ function Table({
         /* @__PURE__ */ jsx32("tbody", { children: paginatedData.length === 0 ? /* @__PURE__ */ jsx32("tr", { children: /* @__PURE__ */ jsx32(
           "td",
           {
-            colSpan: allColumns.length + (selectable ? 1 : 0),
+            colSpan: allColumns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0),
             className: "h-32 text-center align-middle",
-            children: /* @__PURE__ */ jsxs30("div", { className: "flex flex-col items-center gap-1 text-muted-foreground", children: [
+            children: emptyState ?? /* @__PURE__ */ jsxs30("div", { className: "flex flex-col items-center gap-1 text-muted-foreground", children: [
               /* @__PURE__ */ jsx32(Search5, { className: "h-8 w-8 opacity-20" }),
               /* @__PURE__ */ jsx32("span", { className: "text-sm", children: "No results found" }),
               search && /* @__PURE__ */ jsx32("button", { onClick: () => setSearch(""), className: "text-xs text-primary hover:underline", children: "Clear search" })
@@ -7269,107 +7534,168 @@ function Table({
         ) }) : paginatedData.map((item, i) => {
           const id = String(item[idKey] || i);
           const isSelected = selectedIds.includes(id);
-          return /* @__PURE__ */ jsxs30(
-            "tr",
-            {
-              className: cn(
-                "border-b border-border/60 transition-colors last:border-0",
-                isSelected ? "bg-primary/5 hover:bg-primary/8" : "hover:bg-muted/30"
-              ),
-              children: [
-                selectable && /* @__PURE__ */ jsx32("td", { className: "px-4 py-3 align-middle", children: /* @__PURE__ */ jsx32(
-                  Checkbox,
-                  {
-                    checked: isSelected,
-                    onChange: (e) => handleSelect(id, e.target.checked)
-                  }
-                ) }),
-                allColumns.map((col, ci) => /* @__PURE__ */ jsx32("td", { className: "px-4 py-3 align-middle", children: col.render ? col.render(item) : col.type === "image" ? /* @__PURE__ */ jsx32(
-                  "img",
-                  {
-                    src: item[col.key],
-                    alt: item[col.key],
-                    className: "h-9 w-9 rounded-lg object-cover ring-1 ring-border"
-                  }
-                ) : col.type === "badge" ? /* @__PURE__ */ jsxs30("span", { className: cn(
-                  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium",
-                  badgeClass(String(item[col.key]))
-                ), children: [
-                  /* @__PURE__ */ jsx32("span", { className: cn(
-                    "mr-1.5 h-1.5 w-1.5 rounded-full",
-                    badgeClass(String(item[col.key])).includes("success") ? "bg-success" : badgeClass(String(item[col.key])).includes("warning") ? "bg-warning" : badgeClass(String(item[col.key])).includes("danger") ? "bg-danger" : badgeClass(String(item[col.key])).includes("info") ? "bg-info" : "bg-primary"
+          const isExpanded = expandedIds.has(id);
+          const isFocused = keyboardNavigation && focusedRowIdx === i;
+          return /* @__PURE__ */ jsxs30(React28.Fragment, { children: [
+            /* @__PURE__ */ jsxs30(
+              "tr",
+              {
+                draggable,
+                tabIndex: keyboardNavigation ? 0 : void 0,
+                onDragStart: draggable ? (e) => {
+                  e.dataTransfer.setData("text/plain", id);
+                } : void 0,
+                onDragOver: draggable ? (e) => {
+                  e.preventDefault();
+                  setDragOverId(id);
+                } : void 0,
+                onDragLeave: draggable ? () => setDragOverId(null) : void 0,
+                onDrop: draggable ? (e) => {
+                  e.preventDefault();
+                  setDragOverId(null);
+                  const fromId = e.dataTransfer.getData("text/plain");
+                  if (fromId === id) return;
+                  setTableData((prev) => {
+                    const fromIdx = prev.findIndex((r) => String(r[idKey] || "") === fromId);
+                    const toIdx = prev.findIndex((r) => String(r[idKey] || "") === id);
+                    if (fromIdx < 0 || toIdx < 0) return prev;
+                    const next = [...prev];
+                    const [moved] = next.splice(fromIdx, 1);
+                    next.splice(toIdx, 0, moved);
+                    onRowReorder?.(next);
+                    return next;
+                  });
+                } : void 0,
+                onClick: () => {
+                  if (expandable) setExpandedIds((prev) => {
+                    const s = new Set(prev);
+                    s.has(id) ? s.delete(id) : s.add(id);
+                    return s;
+                  });
+                  onRowClick?.(item);
+                  if (keyboardNavigation) setFocusedRowIdx(i);
+                },
+                onDoubleClick: () => onRowDoubleClick?.(item),
+                className: cn(
+                  // default
+                  variant === "default" && "border-b border-border/60 transition-colors last:border-0",
+                  variant === "default" && (isSelected ? "bg-primary/5 hover:bg-primary/8" : "hover:bg-muted/30"),
+                  // zebra
+                  variant === "zebra" && "border-b border-border/40 transition-colors last:border-0",
+                  variant === "zebra" && (isSelected ? "bg-primary/8" : i % 2 === 0 ? "bg-card" : "bg-muted/40"),
+                  variant === "zebra" && !isSelected && "hover:bg-primary/5",
+                  // card
+                  variant === "card" && "rounded-xl border border-border bg-card shadow-sm transition-all hover:shadow-md hover:-translate-y-px",
+                  variant === "card" && (isSelected ? "border-primary/50 bg-primary/5" : ""),
+                  variant === "card" && "[&>td:first-child]:rounded-l-xl [&>td:last-child]:rounded-r-xl",
+                  // glass
+                  variant === "glass" && "border-b border-white/8 transition-colors last:border-0",
+                  variant === "glass" && (isSelected ? "bg-primary/15 hover:bg-primary/20" : "hover:bg-white/5"),
+                  // soft
+                  variant === "soft" && "transition-all",
+                  variant === "soft" && (isSelected ? "bg-primary/8 [box-shadow:inset_2px_2px_5px_hsl(var(--foreground)/0.06),inset_-2px_-2px_5px_hsl(var(--background)/0.7)]" : "hover:bg-muted/20"),
+                  variant === "soft" && "border-b border-border/30 last:border-0",
+                  (onRowClick || onRowDoubleClick || expandable) && "cursor-pointer",
+                  draggable && dragOverId === id && "ring-2 ring-inset ring-primary/40",
+                  isFocused && "ring-2 ring-inset ring-ring",
+                  rowClassName?.(item)
+                ),
+                children: [
+                  selectable && /* @__PURE__ */ jsx32("td", { className: "px-4 py-3 align-middle", children: /* @__PURE__ */ jsx32(
+                    Checkbox,
+                    {
+                      checked: isSelected,
+                      onChange: (e) => handleSelect(id, e.target.checked)
+                    }
                   ) }),
-                  item[col.key]
-                ] }) : col.type === "stack" ? /* @__PURE__ */ jsx32(AvatarStack, { images: Array.isArray(item[col.key]) ? item[col.key] : [], ...col.stackProps ?? {} }) : col.type === "icon" ? /* @__PURE__ */ jsx32("span", { className: "flex items-center", children: item[col.key] }) : col.type === "select" ? /* @__PURE__ */ jsx32(
-                  "select",
-                  {
-                    value: item[col.key],
-                    onChange: (e) => col.onChange?.(item, e.target.value),
-                    className: "h-8 rounded-lg border border-border bg-background/50 px-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-colors",
-                    children: (col.selectOptions ?? []).map((opt) => /* @__PURE__ */ jsx32("option", { value: opt, children: opt }, opt))
-                  }
-                ) : col.type === "toggle" ? /* @__PURE__ */ jsx32(
-                  "button",
-                  {
-                    role: "switch",
-                    "aria-checked": !!item[col.key],
-                    onClick: () => col.onChange?.(item, !item[col.key]),
-                    className: cn(
-                      "relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-                      item[col.key] ? "bg-primary" : "bg-muted"
-                    ),
-                    children: /* @__PURE__ */ jsx32("span", { className: cn(
-                      "pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform",
-                      item[col.key] ? "translate-x-4" : "translate-x-0"
-                    ) })
-                  }
-                ) : col.type === "color" ? /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx32(
-                    "input",
+                  expandable && /* @__PURE__ */ jsx32("td", { className: "w-8 px-2 py-3 align-middle", children: /* @__PURE__ */ jsx32(ChevronRight8, { className: cn("h-3.5 w-3.5 text-muted-foreground transition-transform", isExpanded && "rotate-90") }) }),
+                  allColumns.map((col, ci) => /* @__PURE__ */ jsx32("td", { className: "px-4 py-3 align-middle", children: col.render ? col.render(item) : col.type === "image" ? /* @__PURE__ */ jsx32(
+                    "img",
                     {
-                      type: "color",
-                      value: item[col.key] || "#000000",
+                      src: item[col.key],
+                      alt: item[col.key],
+                      className: "h-9 w-9 rounded-lg object-cover ring-1 ring-border"
+                    }
+                  ) : col.type === "badge" ? /* @__PURE__ */ jsxs30("span", { className: cn(
+                    "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium",
+                    badgeClass(String(item[col.key]))
+                  ), children: [
+                    /* @__PURE__ */ jsx32("span", { className: cn(
+                      "mr-1.5 h-1.5 w-1.5 rounded-full",
+                      badgeClass(String(item[col.key])).includes("success") ? "bg-success" : badgeClass(String(item[col.key])).includes("warning") ? "bg-warning" : badgeClass(String(item[col.key])).includes("danger") ? "bg-danger" : badgeClass(String(item[col.key])).includes("info") ? "bg-info" : "bg-primary"
+                    ) }),
+                    item[col.key]
+                  ] }) : col.type === "stack" ? /* @__PURE__ */ jsx32(AvatarStack, { images: Array.isArray(item[col.key]) ? item[col.key] : [], ...col.stackProps ?? {} }) : col.type === "icon" ? /* @__PURE__ */ jsx32("span", { className: "flex items-center", children: item[col.key] }) : col.type === "select" ? /* @__PURE__ */ jsx32(
+                    "select",
+                    {
+                      value: item[col.key],
                       onChange: (e) => col.onChange?.(item, e.target.value),
-                      className: "h-7 w-7 cursor-pointer rounded border border-border bg-transparent p-0.5"
+                      className: "h-8 rounded-lg border border-border bg-background/50 px-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-colors",
+                      children: (col.selectOptions ?? []).map((opt) => /* @__PURE__ */ jsx32("option", { value: opt, children: opt }, opt))
                     }
-                  ),
-                  /* @__PURE__ */ jsx32("span", { className: "text-xs text-muted-foreground font-mono", children: item[col.key] })
-                ] }) : col.type === "checkbox" ? /* @__PURE__ */ jsx32(
-                  Checkbox,
-                  {
-                    checked: !!item[col.key],
-                    onChange: (e) => col.onChange?.(item, e.target.checked)
-                  }
-                ) : col.type === "text-url" ? (() => {
-                  const href = col.redirect ? typeof col.redirect === "function" ? col.redirect(item) : col.redirect : String(item[col.key] ?? "");
-                  const colorMap = {
-                    primary: "var(--primary)",
-                    info: "var(--info)",
-                    success: "var(--success)",
-                    warning: "var(--warning)",
-                    danger: "var(--danger)"
-                  };
-                  const underline = col.underlineColor ? colorMap[col.underlineColor] ?? col.underlineColor : "var(--primary)";
-                  return /* @__PURE__ */ jsx32(
-                    "a",
+                  ) : col.type === "toggle" ? /* @__PURE__ */ jsx32(
+                    "button",
                     {
-                      href,
-                      target: col.openNewTab ? "_blank" : void 0,
-                      rel: col.openNewTab ? "noopener noreferrer" : void 0,
-                      style: { textDecorationColor: underline },
-                      className: "text-sm underline underline-offset-2 hover:opacity-75 transition-opacity break-all",
-                      onClick: col.openNewTab ? void 0 : (e) => e.preventDefault(),
-                      children: item[col.key]
+                      role: "switch",
+                      "aria-checked": !!item[col.key],
+                      onClick: () => col.onChange?.(item, !item[col.key]),
+                      className: cn(
+                        "relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                        item[col.key] ? "bg-primary" : "bg-muted"
+                      ),
+                      children: /* @__PURE__ */ jsx32("span", { className: cn(
+                        "pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform",
+                        item[col.key] ? "translate-x-4" : "translate-x-0"
+                      ) })
                     }
-                  );
-                })() : /* @__PURE__ */ jsx32("span", { className: "text-foreground/90", children: item[col.key] }) }, `${String(col.key)}-${ci}`))
-              ]
-            },
-            id
-          );
+                  ) : col.type === "color" ? /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx32(
+                      "input",
+                      {
+                        type: "color",
+                        value: item[col.key] || "#000000",
+                        onChange: (e) => col.onChange?.(item, e.target.value),
+                        className: "h-7 w-7 cursor-pointer rounded border border-border bg-transparent p-0.5"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx32("span", { className: "text-xs text-muted-foreground font-mono", children: item[col.key] })
+                  ] }) : col.type === "checkbox" ? /* @__PURE__ */ jsx32(
+                    Checkbox,
+                    {
+                      checked: !!item[col.key],
+                      onChange: (e) => col.onChange?.(item, e.target.checked)
+                    }
+                  ) : col.type === "text-url" ? (() => {
+                    const href = col.redirect ? typeof col.redirect === "function" ? col.redirect(item) : col.redirect : String(item[col.key] ?? "");
+                    const colorMap = {
+                      primary: "var(--primary)",
+                      info: "var(--info)",
+                      success: "var(--success)",
+                      warning: "var(--warning)",
+                      danger: "var(--danger)"
+                    };
+                    const underline = col.underlineColor ? colorMap[col.underlineColor] ?? col.underlineColor : "var(--primary)";
+                    return /* @__PURE__ */ jsx32(
+                      "a",
+                      {
+                        href,
+                        target: col.openNewTab ? "_blank" : void 0,
+                        rel: col.openNewTab ? "noopener noreferrer" : void 0,
+                        style: { textDecorationColor: underline },
+                        className: "text-sm underline underline-offset-2 hover:opacity-75 transition-opacity break-all",
+                        onClick: col.openNewTab ? void 0 : (e) => e.preventDefault(),
+                        children: item[col.key]
+                      }
+                    );
+                  })() : /* @__PURE__ */ jsx32("span", { className: "text-foreground/90", children: item[col.key] }) }, `${String(col.key)}-${ci}`))
+                ]
+              }
+            ),
+            expandable && isExpanded && renderExpanded && /* @__PURE__ */ jsx32("tr", { className: "bg-muted/20 border-b border-border/60", children: /* @__PURE__ */ jsx32("td", { colSpan: allColumns.length + (selectable ? 1 : 0) + 1, className: "px-6 py-3", children: renderExpanded(item) }) })
+          ] }, id);
         }) })
       ] }) }) }),
-      pagination && !serverPagination && totalPages > 1 && /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
+      clientPagination && !serverPagination && totalPages > 1 && /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
         /* @__PURE__ */ jsxs30("span", { className: "text-xs text-muted-foreground", children: [
           "Showing ",
           (safePage - 1) * itemsPerPage + 1,
@@ -7388,7 +7714,7 @@ function Table({
               children: /* @__PURE__ */ jsx32(ChevronLeft6, { className: "h-4 w-4" })
             }
           ),
-          pagePills[0] > 1 && /* @__PURE__ */ jsxs30(Fragment11, { children: [
+          pagePills[0] > 1 && /* @__PURE__ */ jsxs30(Fragment12, { children: [
             /* @__PURE__ */ jsx32("button", { onClick: () => setCurrentPage(1), className: "flex h-8 w-8 items-center justify-center rounded-lg border border-border text-xs text-muted-foreground hover:bg-muted transition-colors", children: "1" }),
             pagePills[0] > 2 && /* @__PURE__ */ jsx32("span", { className: "px-1 text-muted-foreground text-xs", children: "\u2026" })
           ] }),
@@ -7404,7 +7730,7 @@ function Table({
             },
             p
           )),
-          pagePills[pagePills.length - 1] < totalPages && /* @__PURE__ */ jsxs30(Fragment11, { children: [
+          pagePills[pagePills.length - 1] < totalPages && /* @__PURE__ */ jsxs30(Fragment12, { children: [
             pagePills[pagePills.length - 1] < totalPages - 1 && /* @__PURE__ */ jsx32("span", { className: "px-1 text-muted-foreground text-xs", children: "\u2026" }),
             /* @__PURE__ */ jsx32("button", { onClick: () => setCurrentPage(totalPages), className: "flex h-8 w-8 items-center justify-center rounded-lg border border-border text-xs text-muted-foreground hover:bg-muted transition-colors", children: totalPages })
           ] }),
@@ -7420,8 +7746,8 @@ function Table({
         ] })
       ] }),
       serverPagination && (() => {
-        const { pagination: pagination2, currentPage: cp, goToPage } = serverPagination;
-        const totalServerPages = pagination2.last_page ?? Math.ceil(pagination2.total / pagination2.per_page);
+        const { pagination, currentPage: cp, goToPage } = serverPagination;
+        const totalServerPages = pagination.last_page ?? Math.ceil(pagination.total / pagination.per_page);
         const pills = [];
         if (totalServerPages <= 7) {
           for (let i = 1; i <= totalServerPages; i++) pills.push(i);
@@ -7434,7 +7760,7 @@ function Table({
         }
         return /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
           /* @__PURE__ */ jsxs30("span", { className: "text-xs text-muted-foreground", children: [
-            pagination2.total,
+            pagination.total,
             " total rows \xB7 page ",
             cp,
             " of ",
@@ -7445,7 +7771,7 @@ function Table({
               "button",
               {
                 onClick: () => goToPage(cp - 1),
-                disabled: !pagination2.prev_page_url,
+                disabled: !pagination.prev_page_url,
                 className: "flex h-8 w-8 items-center justify-center rounded-lg border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40 disabled:pointer-events-none",
                 children: /* @__PURE__ */ jsx32(ChevronLeft6, { className: "h-4 w-4" })
               }
@@ -7468,7 +7794,7 @@ function Table({
               "button",
               {
                 onClick: () => goToPage(cp + 1),
-                disabled: !pagination2.next_page_url,
+                disabled: !pagination.next_page_url,
                 className: "flex h-8 w-8 items-center justify-center rounded-lg border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-40 disabled:pointer-events-none",
                 children: /* @__PURE__ */ jsx32(ChevronRight8, { className: "h-4 w-4" })
               }
@@ -7546,7 +7872,7 @@ function Table({
 }
 
 // src/components/ui/data-grid.tsx
-import { Fragment as Fragment12, jsx as jsx33, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx33, jsxs as jsxs31 } from "react/jsx-runtime";
 function useServerDataGrid({ url, params, encrypt, key, decryptPayloadLog, columnOverrides }) {
   const [data, setData] = React29.useState([]);
   const [columns, setColumns] = React29.useState([]);
@@ -7674,7 +8000,7 @@ function DGModalShell({ title, onClose, children, footer, width = "lg" }) {
   );
 }
 function DGFieldRenderer({ field, value, onChange }) {
-  if (field.render) return /* @__PURE__ */ jsx33(Fragment12, { children: field.render(value, onChange) });
+  if (field.render) return /* @__PURE__ */ jsx33(Fragment13, { children: field.render(value, onChange) });
   const toLabelValue = (o) => {
     if (typeof o === "string") return { label: o, value: o };
     if (Array.isArray(o)) return { label: o[0], value: o[1] };
@@ -7754,7 +8080,7 @@ function DGViewModal({ item, fields, onClose, width }) {
       footer: /* @__PURE__ */ jsx33("button", { onClick: onClose, className: "px-4 py-1.5 text-sm rounded-xl border border-border hover:bg-accent transition-colors", children: "Close" }),
       children: /* @__PURE__ */ jsx33("div", { className: "space-y-3", children: fields.map((f) => /* @__PURE__ */ jsxs31("div", { children: [
         /* @__PURE__ */ jsx33("p", { className: "text-xs font-semibold text-muted-foreground mb-1", children: f.label }),
-        f.render ? /* @__PURE__ */ jsx33(Fragment12, { children: f.render(item[f.key], () => {
+        f.render ? /* @__PURE__ */ jsx33(Fragment13, { children: f.render(item[f.key], () => {
         }) }) : /* @__PURE__ */ jsx33("p", { className: "text-sm text-foreground break-words", children: item[f.key] == null || item[f.key] === "" ? /* @__PURE__ */ jsx33("span", { className: "text-muted-foreground italic", children: "\u2014" }) : String(item[f.key]) })
       ] }, f.key)) })
     }
@@ -7818,7 +8144,7 @@ function DGEditModal({
       title: "Edit Record",
       onClose,
       width,
-      footer: /* @__PURE__ */ jsxs31(Fragment12, { children: [
+      footer: /* @__PURE__ */ jsxs31(Fragment13, { children: [
         /* @__PURE__ */ jsx33("button", { onClick: onClose, disabled: loading, className: "px-4 py-1.5 text-sm rounded-xl border border-border hover:bg-accent transition-colors", children: "Cancel" }),
         /* @__PURE__ */ jsxs31("button", { onClick: handleSubmit, disabled: loading, className: "px-4 py-1.5 text-sm rounded-xl bg-primary text-primary-foreground hover:bg-primary-hover transition-colors flex items-center gap-1.5", children: [
           loading && /* @__PURE__ */ jsx33(Loader23, { className: "h-3.5 w-3.5 animate-spin" }),
@@ -7878,7 +8204,7 @@ function DGDeleteModal({
       title: "Confirm Delete",
       onClose,
       width: "lg",
-      footer: /* @__PURE__ */ jsxs31(Fragment12, { children: [
+      footer: /* @__PURE__ */ jsxs31(Fragment13, { children: [
         /* @__PURE__ */ jsx33("button", { onClick: onClose, disabled: loading, className: "px-4 py-1.5 text-sm rounded-xl border border-border hover:bg-accent transition-colors", children: "Cancel" }),
         /* @__PURE__ */ jsxs31("button", { onClick: handleDelete, disabled: loading, className: "px-4 py-1.5 text-sm rounded-xl bg-danger text-danger-foreground hover:bg-danger-hover transition-colors flex items-center gap-1.5", children: [
           loading && /* @__PURE__ */ jsx33(Loader23, { className: "h-3.5 w-3.5 animate-spin" }),
@@ -8810,7 +9136,7 @@ function KanbanBoard({ columns: controlled, onChange, onAddCard, className }) {
 import * as React33 from "react";
 import { MapContainer, TileLayer, Marker, Popup, Polyline, useMap, CircleMarker } from "react-leaflet";
 import L from "leaflet";
-import { Fragment as Fragment14, jsx as jsx39, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx39, jsxs as jsxs35 } from "react/jsx-runtime";
 L.Icon.Default.mergeOptions({
   iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
   iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
@@ -8916,7 +9242,7 @@ function RouteLayer({ routes }) {
     });
   }, [routes]);
   if (loading) return null;
-  return /* @__PURE__ */ jsx39(Fragment14, { children: resolved.map((r, i) => {
+  return /* @__PURE__ */ jsx39(Fragment15, { children: resolved.map((r, i) => {
     const color = r.route.color ?? (r.route.routeType === "walk" ? "#22c55e" : "#6366f1");
     const isDrive = (r.route.routeType ?? "drive") === "drive";
     const midIdx = Math.floor(r.coords.length / 2);
@@ -8956,7 +9282,7 @@ function RouteLayer({ routes }) {
           zIndexOffset: 100,
           children: /* @__PURE__ */ jsx39(Popup, { children: /* @__PURE__ */ jsxs35("div", { className: "text-xs space-y-0.5 min-w-[120px]", children: [
             /* @__PURE__ */ jsx39("p", { className: "font-semibold", children: r.route.label ? `${r.route.label} \u2014 Start` : "Start" }),
-            r.distance > 0 && /* @__PURE__ */ jsxs35(Fragment14, { children: [
+            r.distance > 0 && /* @__PURE__ */ jsxs35(Fragment15, { children: [
               /* @__PURE__ */ jsx39("p", { className: "text-muted-foreground", children: fmtDistance(r.distance) }),
               /* @__PURE__ */ jsxs35("p", { className: "text-muted-foreground", children: [
                 fmtDuration(r.duration),
@@ -8975,7 +9301,7 @@ function RouteLayer({ routes }) {
           zIndexOffset: 100,
           children: /* @__PURE__ */ jsx39(Popup, { children: /* @__PURE__ */ jsxs35("div", { className: "text-xs space-y-0.5 min-w-[120px]", children: [
             /* @__PURE__ */ jsx39("p", { className: "font-semibold", children: r.route.label ? `${r.route.label} \u2014 End` : "End" }),
-            r.distance > 0 && /* @__PURE__ */ jsxs35(Fragment14, { children: [
+            r.distance > 0 && /* @__PURE__ */ jsxs35(Fragment15, { children: [
               /* @__PURE__ */ jsx39("p", { className: "text-muted-foreground", children: fmtDistance(r.distance) }),
               /* @__PURE__ */ jsxs35("p", { className: "text-muted-foreground", children: [
                 fmtDuration(r.duration),
@@ -9090,7 +9416,7 @@ function ClusterLayer({ markers, variant, onMarkerClick }) {
     });
     return groups;
   }, [markers, zoom, map]);
-  return /* @__PURE__ */ jsx39(Fragment14, { children: clusters.map((g, gi) => {
+  return /* @__PURE__ */ jsx39(Fragment15, { children: clusters.map((g, gi) => {
     if (g.items.length === 1) {
       const m = g.items[0];
       const color2 = resolveColor(m.color);
@@ -9959,7 +10285,7 @@ function Modal({
 // src/components/ui/modal-variants.tsx
 import * as React36 from "react";
 import { AlertTriangle as AlertTriangle3, CheckCircle as CheckCircle2, Trash2 as Trash23, X as X13 } from "lucide-react";
-import { Fragment as Fragment15, jsx as jsx42, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx42, jsxs as jsxs38 } from "react/jsx-runtime";
 function ModalBase({
   isOpen,
   onClose,
@@ -10110,7 +10436,7 @@ function ModalWithForms({
     onSubmit(values);
   }
   function renderField(field) {
-    if (field.render) return /* @__PURE__ */ jsx42(Fragment15, { children: field.render(values[field.name], (v) => handleChange(field.name, v)) });
+    if (field.render) return /* @__PURE__ */ jsx42(Fragment16, { children: field.render(values[field.name], (v) => handleChange(field.name, v)) });
     const strOptions = (field.options ?? []).map(
       (o) => typeof o === "string" ? { label: o, value: o } : o
     );
@@ -10458,7 +10784,7 @@ import { PanelLeftClose, PanelLeftOpen, Sun as Sun3, Moon as Moon2, Loader2 as L
 // src/components/ui/tooltip.tsx
 import * as React38 from "react";
 import * as ReactDOM2 from "react-dom";
-import { Fragment as Fragment16, jsx as jsx44, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx44, jsxs as jsxs40 } from "react/jsx-runtime";
 function Tooltip({
   content,
   children,
@@ -10469,7 +10795,7 @@ function Tooltip({
   const [visible, setVisible] = React38.useState(false);
   const [coords, setCoords] = React38.useState({ top: 0, left: 0 });
   const ref = React38.useRef(null);
-  if (!enabled) return /* @__PURE__ */ jsx44(Fragment16, { children });
+  if (!enabled) return /* @__PURE__ */ jsx44(Fragment17, { children });
   function calcCoords() {
     const r = ref.current?.getBoundingClientRect();
     if (!r) return;
@@ -11066,7 +11392,7 @@ var useTheme = () => {
 };
 
 // src/components/ui/panel.tsx
-import { Fragment as Fragment17, jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
 var PanelCollapsedContext = React40.createContext(false);
 var PanelGroupsContext = React40.createContext({ expandedGroups: /* @__PURE__ */ new Set(), onGroupToggle: () => {
 } });
@@ -11228,7 +11554,7 @@ function Panel({
                     "shrink-0 border-b border-border",
                     effectiveCollapsed ? "flex items-center justify-center py-3" : "flex items-center gap-2 px-4 py-3"
                   ),
-                  children: sidebarBrand ? effectiveCollapsed ? sidebarBrand.image ? /* @__PURE__ */ jsx46("img", { src: sidebarBrand.image, alt: "logo", className: "h-7 w-7 rounded-md object-cover shrink-0" }) : /* @__PURE__ */ jsx46("span", { className: "shrink-0", children: sidebarBrand.icon }) : /* @__PURE__ */ jsxs41(Fragment17, { children: [
+                  children: sidebarBrand ? effectiveCollapsed ? sidebarBrand.image ? /* @__PURE__ */ jsx46("img", { src: sidebarBrand.image, alt: "logo", className: "h-7 w-7 rounded-md object-cover shrink-0" }) : /* @__PURE__ */ jsx46("span", { className: "shrink-0", children: sidebarBrand.icon }) : /* @__PURE__ */ jsxs41(Fragment18, { children: [
                     sidebarBrand.image ? /* @__PURE__ */ jsx46("img", { src: sidebarBrand.image, alt: "logo", className: "h-7 w-7 rounded-md object-cover shrink-0" }) : sidebarBrand.icon && /* @__PURE__ */ jsx46("span", { className: "shrink-0", children: sidebarBrand.icon }),
                     sidebarBrand.title && /* @__PURE__ */ jsx46("span", { className: "flex-1 truncate text-sm font-semibold", children: sidebarBrand.title }),
                     sidebarBrand.trailing && /* @__PURE__ */ jsx46("span", { className: "shrink-0", children: sidebarBrand.trailing })
@@ -12537,7 +12863,7 @@ function Widget({
 // src/components/ui/wizard.tsx
 import * as React50 from "react";
 import { Check as Check7, X as X15, ChevronLeft as ChevronLeft8, ChevronRight as ChevronRight12, AlertCircle as AlertCircle2 } from "lucide-react";
-import { Fragment as Fragment20, jsx as jsx62, jsxs as jsxs55 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx62, jsxs as jsxs55 } from "react/jsx-runtime";
 var SIZE_MAP = {
   sm: "max-w-sm",
   md: "max-w-lg",
@@ -12747,10 +13073,10 @@ function DefaultActions({
               /* @__PURE__ */ jsx62("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v8z" })
             ] }),
             "Processing..."
-          ] }) : isLast ? /* @__PURE__ */ jsxs55(Fragment20, { children: [
+          ] }) : isLast ? /* @__PURE__ */ jsxs55(Fragment21, { children: [
             /* @__PURE__ */ jsx62(Check7, { className: "h-4 w-4" }),
             finishLabel ?? "Finish"
-          ] }) : /* @__PURE__ */ jsxs55(Fragment20, { children: [
+          ] }) : /* @__PURE__ */ jsxs55(Fragment21, { children: [
             nextLabel ?? "Next",
             /* @__PURE__ */ jsx62(ChevronRight12, { className: "h-4 w-4" })
           ] })
@@ -13059,13 +13385,13 @@ var setupInterceptors = () => {
 
 // src/lib/codego/provider.tsx
 import * as React51 from "react";
-import { Fragment as Fragment21, jsx as jsx63 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx63 } from "react/jsx-runtime";
 function CodegoApiProvider({ children }) {
   const { toast } = useToast();
   React51.useEffect(() => {
     setToastFunction(toast);
   }, [toast]);
-  return /* @__PURE__ */ jsx63(Fragment21, { children });
+  return /* @__PURE__ */ jsx63(Fragment22, { children });
 }
 
 // src/lib/codego/index.ts