@juv/codego-react-ui 3.4.11 → 3.5.1

package/dist/index.global.js

@@ -63192,7 +63192,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
     ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }]
   ];
-  var File = createLucideIcon("file", __iconNode30);
+  var File2 = createLucideIcon("file", __iconNode30);
 
   // node_modules/lucide-react/dist/esm/icons/flip-horizontal.js
   var __iconNode31 = [
@@ -63373,8 +63373,20 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
   ];
   var PanelLeftOpen = createLucideIcon("panel-left-open", __iconNode49);
 
-  // node_modules/lucide-react/dist/esm/icons/pencil.js
+  // node_modules/lucide-react/dist/esm/icons/paperclip.js
   var __iconNode50 = [
+    [
+      "path",
+      {
+        d: "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551",
+        key: "1miecu"
+      }
+    ]
+  ];
+  var Paperclip = createLucideIcon("paperclip", __iconNode50);
+
+  // node_modules/lucide-react/dist/esm/icons/pencil.js
+  var __iconNode51 = [
     [
       "path",
       {
@@ -63384,10 +63396,10 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     ],
     ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
   ];
-  var Pencil = createLucideIcon("pencil", __iconNode50);
+  var Pencil = createLucideIcon("pencil", __iconNode51);
 
   // node_modules/lucide-react/dist/esm/icons/pin.js
-  var __iconNode51 = [
+  var __iconNode52 = [
     ["path", { d: "M12 17v5", key: "bb1du9" }],
     [
       "path",
@@ -63397,17 +63409,17 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       }
     ]
   ];
-  var Pin = createLucideIcon("pin", __iconNode51);
+  var Pin = createLucideIcon("pin", __iconNode52);
 
   // node_modules/lucide-react/dist/esm/icons/plus.js
-  var __iconNode52 = [
+  var __iconNode53 = [
     ["path", { d: "M5 12h14", key: "1ays0h" }],
     ["path", { d: "M12 5v14", key: "s699le" }]
   ];
-  var Plus = createLucideIcon("plus", __iconNode52);
+  var Plus = createLucideIcon("plus", __iconNode53);
 
   // node_modules/lucide-react/dist/esm/icons/quote.js
-  var __iconNode53 = [
+  var __iconNode54 = [
     [
       "path",
       {
@@ -63423,31 +63435,31 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       }
     ]
   ];
-  var Quote = createLucideIcon("quote", __iconNode53);
+  var Quote = createLucideIcon("quote", __iconNode54);
 
   // node_modules/lucide-react/dist/esm/icons/redo.js
-  var __iconNode54 = [
+  var __iconNode55 = [
     ["path", { d: "M21 7v6h-6", key: "3ptur4" }],
     ["path", { d: "M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7", key: "1kgawr" }]
   ];
-  var Redo = createLucideIcon("redo", __iconNode54);
+  var Redo = createLucideIcon("redo", __iconNode55);
 
   // node_modules/lucide-react/dist/esm/icons/rotate-ccw.js
-  var __iconNode55 = [
+  var __iconNode56 = [
     ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
     ["path", { d: "M3 3v5h5", key: "1xhq8a" }]
   ];
-  var RotateCcw = createLucideIcon("rotate-ccw", __iconNode55);
+  var RotateCcw = createLucideIcon("rotate-ccw", __iconNode56);
 
   // node_modules/lucide-react/dist/esm/icons/rotate-cw.js
-  var __iconNode56 = [
+  var __iconNode57 = [
     ["path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8", key: "1p45f6" }],
     ["path", { d: "M21 3v5h-5", key: "1q7to0" }]
   ];
-  var RotateCw = createLucideIcon("rotate-cw", __iconNode56);
+  var RotateCw = createLucideIcon("rotate-cw", __iconNode57);
 
   // node_modules/lucide-react/dist/esm/icons/satellite.js
-  var __iconNode57 = [
+  var __iconNode58 = [
     [
       "path",
       {
@@ -63472,10 +63484,10 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       }
     ]
   ];
-  var Satellite = createLucideIcon("satellite", __iconNode57);
+  var Satellite = createLucideIcon("satellite", __iconNode58);
 
   // node_modules/lucide-react/dist/esm/icons/save.js
-  var __iconNode58 = [
+  var __iconNode59 = [
     [
       "path",
       {
@@ -63486,26 +63498,26 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     ["path", { d: "M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7", key: "1ydtos" }],
     ["path", { d: "M7 3v4a1 1 0 0 0 1 1h7", key: "t51u73" }]
   ];
-  var Save = createLucideIcon("save", __iconNode58);
+  var Save = createLucideIcon("save", __iconNode59);
 
   // node_modules/lucide-react/dist/esm/icons/search.js
-  var __iconNode59 = [
+  var __iconNode60 = [
     ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
     ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
   ];
-  var Search = createLucideIcon("search", __iconNode59);
+  var Search = createLucideIcon("search", __iconNode60);
 
   // node_modules/lucide-react/dist/esm/icons/settings-2.js
-  var __iconNode60 = [
+  var __iconNode61 = [
     ["path", { d: "M14 17H5", key: "gfn3mx" }],
     ["path", { d: "M19 7h-9", key: "6i9tg" }],
     ["circle", { cx: "17", cy: "17", r: "3", key: "18b49y" }],
     ["circle", { cx: "7", cy: "7", r: "3", key: "dfmy0x" }]
   ];
-  var Settings2 = createLucideIcon("settings-2", __iconNode60);
+  var Settings2 = createLucideIcon("settings-2", __iconNode61);
 
   // node_modules/lucide-react/dist/esm/icons/sliders-vertical.js
-  var __iconNode61 = [
+  var __iconNode62 = [
     ["path", { d: "M10 8h4", key: "1sr2af" }],
     ["path", { d: "M12 21v-9", key: "17s77i" }],
     ["path", { d: "M12 8V3", key: "13r4qs" }],
@@ -63516,10 +63528,10 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     ["path", { d: "M5 10V3", key: "cb8scm" }],
     ["path", { d: "M5 21v-7", key: "1w1uti" }]
   ];
-  var SlidersVertical = createLucideIcon("sliders-vertical", __iconNode61);
+  var SlidersVertical = createLucideIcon("sliders-vertical", __iconNode62);
 
   // node_modules/lucide-react/dist/esm/icons/sun.js
-  var __iconNode62 = [
+  var __iconNode63 = [
     ["circle", { cx: "12", cy: "12", r: "4", key: "4exip2" }],
     ["path", { d: "M12 2v2", key: "tus03m" }],
     ["path", { d: "M12 20v2", key: "1lh1kg" }],
@@ -63530,10 +63542,10 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     ["path", { d: "m6.34 17.66-1.41 1.41", key: "1m8zz5" }],
     ["path", { d: "m19.07 4.93-1.41 1.41", key: "1shlcs" }]
   ];
-  var Sun = createLucideIcon("sun", __iconNode62);
+  var Sun = createLucideIcon("sun", __iconNode63);
 
   // node_modules/lucide-react/dist/esm/icons/tag.js
-  var __iconNode63 = [
+  var __iconNode64 = [
     [
       "path",
       {
@@ -63543,42 +63555,42 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     ],
     ["circle", { cx: "7.5", cy: "7.5", r: ".5", fill: "currentColor", key: "kqv944" }]
   ];
-  var Tag = createLucideIcon("tag", __iconNode63);
+  var Tag = createLucideIcon("tag", __iconNode64);
 
   // node_modules/lucide-react/dist/esm/icons/trash-2.js
-  var __iconNode64 = [
+  var __iconNode65 = [
     ["path", { d: "M10 11v6", key: "nco0om" }],
     ["path", { d: "M14 11v6", key: "outv1u" }],
     ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
     ["path", { d: "M3 6h18", key: "d0wm0j" }],
     ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
   ];
-  var Trash2 = createLucideIcon("trash-2", __iconNode64);
+  var Trash2 = createLucideIcon("trash-2", __iconNode65);
 
   // node_modules/lucide-react/dist/esm/icons/trash.js
-  var __iconNode65 = [
+  var __iconNode66 = [
     ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
     ["path", { d: "M3 6h18", key: "d0wm0j" }],
     ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
   ];
-  var Trash = createLucideIcon("trash", __iconNode65);
+  var Trash = createLucideIcon("trash", __iconNode66);
 
   // node_modules/lucide-react/dist/esm/icons/trending-down.js
-  var __iconNode66 = [
+  var __iconNode67 = [
     ["path", { d: "M16 17h6v-6", key: "t6n2it" }],
     ["path", { d: "m22 17-8.5-8.5-5 5L2 7", key: "x473p" }]
   ];
-  var TrendingDown = createLucideIcon("trending-down", __iconNode66);
+  var TrendingDown = createLucideIcon("trending-down", __iconNode67);
 
   // node_modules/lucide-react/dist/esm/icons/trending-up.js
-  var __iconNode67 = [
+  var __iconNode68 = [
     ["path", { d: "M16 7h6v6", key: "box55l" }],
     ["path", { d: "m22 7-8.5 8.5-5-5L2 17", key: "1t1m79" }]
   ];
-  var TrendingUp = createLucideIcon("trending-up", __iconNode67);
+  var TrendingUp = createLucideIcon("trending-up", __iconNode68);
 
   // node_modules/lucide-react/dist/esm/icons/triangle-alert.js
-  var __iconNode68 = [
+  var __iconNode69 = [
     [
       "path",
       {
@@ -63589,28 +63601,28 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     ["path", { d: "M12 9v4", key: "juzpu7" }],
     ["path", { d: "M12 17h.01", key: "p32p05" }]
   ];
-  var TriangleAlert = createLucideIcon("triangle-alert", __iconNode68);
+  var TriangleAlert = createLucideIcon("triangle-alert", __iconNode69);
 
   // node_modules/lucide-react/dist/esm/icons/underline.js
-  var __iconNode69 = [
+  var __iconNode70 = [
     ["path", { d: "M6 4v6a6 6 0 0 0 12 0V4", key: "9kb039" }],
     ["line", { x1: "4", x2: "20", y1: "20", y2: "20", key: "nun2al" }]
   ];
-  var Underline = createLucideIcon("underline", __iconNode69);
+  var Underline = createLucideIcon("underline", __iconNode70);
 
   // node_modules/lucide-react/dist/esm/icons/undo.js
-  var __iconNode70 = [
+  var __iconNode71 = [
     ["path", { d: "M3 7v6h6", key: "1v2h90" }],
     ["path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13", key: "1r6uu6" }]
   ];
-  var Undo = createLucideIcon("undo", __iconNode70);
+  var Undo = createLucideIcon("undo", __iconNode71);
 
   // node_modules/lucide-react/dist/esm/icons/x.js
-  var __iconNode71 = [
+  var __iconNode72 = [
     ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
     ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
   ];
-  var X = createLucideIcon("x", __iconNode71);
+  var X = createLucideIcon("x", __iconNode72);
 
   // src/components/ui/date-picker.tsx
   var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
@@ -65399,13 +65411,13 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     const categories = React8.useMemo(() => {
       if (categoriesProp) return categoriesProp;
       const set = /* @__PURE__ */ new Set();
-      items.forEach((i) => {
+      (items ?? []).forEach((i) => {
         if (i.category) set.add(i.category);
       });
       return Array.from(set);
     }, [items, categoriesProp]);
     const filtered = React8.useMemo(() => {
-      let list = items;
+      let list = items ?? [];
       if (search.trim()) {
         const q = search.toLowerCase();
         list = list.filter(
@@ -65414,7 +65426,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       }
       if (category) list = list.filter((i) => i.category === category);
       return [...list].sort((a, b) => (b.pinned ? 1 : 0) - (a.pinned ? 1 : 0));
-    }, [items, search, category]);
+    }, [items ?? [], search, category]);
     const showToolbar = searchable || filterable && categories.length > 0;
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("flex flex-col gap-4", className), children: [
       showHeader && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
@@ -69055,11 +69067,77 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
 
   // src/components/ui/repeater.tsx
   var import_jsx_runtime29 = __toESM(require_jsx_runtime(), 1);
+  function RepeaterFieldRenderer({
+    field,
+    value,
+    onChange
+  }) {
+    if (field.type === "image") {
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+        field.label && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-xs font-medium text-muted-foreground", children: field.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-3", children: [
+          value && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("img", { src: value, alt: field.key, className: "h-10 w-10 rounded-lg object-cover ring-1 ring-border shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            Input,
+            {
+              inputMode: "text",
+              value: value ?? "",
+              onChange: (e) => onChange(e.target.value),
+              placeholder: field.placeholder ?? "Image URL"
+            }
+          )
+        ] })
+      ] });
+    }
+    if (field.type === "attachment") {
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+        field.label && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-xs font-medium text-muted-foreground", children: field.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2", children: [
+          value && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+            "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__ */ (0, import_jsx_runtime29.jsx)(Paperclip, { className: "h-3 w-3" }),
+                String(value).split("/").pop()
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            Input,
+            {
+              inputMode: "text",
+              value: value ?? "",
+              onChange: (e) => onChange(e.target.value),
+              placeholder: field.placeholder ?? "Attachment URL"
+            }
+          )
+        ] })
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+      field.label && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-xs font-medium text-muted-foreground", children: field.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        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
   }) {
@@ -69072,7 +69150,15 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mt-1 cursor-grab text-muted-foreground/30 group-hover:text-muted-foreground/60 transition-colors shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(GripVertical, { className: "h-4 w-4" }) }),
             /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("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__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-1 min-w-0", children: renderItem(item, index) }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-1 min-w-0", children: fields ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("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__ */ (0, import_jsx_runtime29.jsx)(
+              RepeaterFieldRenderer,
+              {
+                field: f,
+                value: item[f.key],
+                onChange: (v) => onFieldChange?.(index, f.key, v)
+              },
+              f.key
+            )) }) : renderItem ? renderItem(item, index) : null }),
             /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
               Button,
               {
@@ -69552,17 +69638,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
   var React28 = __toESM(require_react(), 1);
   var import_react_dom2 = __toESM(require_react_dom(), 1);
   var import_jsx_runtime32 = __toESM(require_jsx_runtime(), 1);
-  var csrfAxios = axios_default.create();
-  csrfAxios.interceptors.request.use((config) => {
-    const method = (config.method ?? "").toUpperCase();
-    if (["POST", "PUT", "PATCH", "DELETE"].includes(method)) {
-      const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute("content");
-      if (!token) throw new Error('[Table] CSRF token not found. Add <meta name="csrf-token" content="..."> to your HTML <head>.');
-      config.headers.set("X-CSRF-Token", token);
-    }
-    return config;
-  });
-  function useServerTable({ url: url2, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce = 300, transform, manual = false, refresh: refreshEnabled = false, refreshInterval = 0, hardReload, onSuccess, onError }) {
+  function useServerTable({ url: url2, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce = 300, transform, manual = false, refresh: refreshEnabled = false, refreshInterval = 0, hardReload, onSuccess, onError, filter: filterFields, sort: sortKeys }) {
     const [data, setData] = React28.useState([]);
     const [columns, setColumns] = React28.useState([]);
     const [currentPage, setCurrentPage] = React28.useState(1);
@@ -69572,6 +69648,15 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     const [tick, setTick] = React28.useState(0);
     const [searchValue, setSearchValue] = React28.useState("");
     const debounceTimer = React28.useRef(void 0);
+    const [filterValues, setFilterValues] = React28.useState(() => {
+      const init = {};
+      filterFields?.forEach((f) => {
+        init[f.key] = f.type === "checkbox" || f.type === "toggle" ? false : "";
+      });
+      return init;
+    });
+    const [sortKey, setSortKey] = React28.useState("");
+    const [sortDir, setSortDir] = React28.useState("asc");
     React28.useEffect(() => {
       if (hardReload) hardReload.current = () => setTick((t) => t + 1);
     }, [hardReload]);
@@ -69580,13 +69665,32 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       const id = setInterval(() => setTick((t) => t + 1), refreshInterval);
       return () => clearInterval(id);
     }, [refreshInterval]);
+    const activeFilterParams = React28.useMemo(() => {
+      const out = {};
+      filterFields?.forEach((f) => {
+        const v = filterValues[f.key];
+        if (f.type === "checkbox" || f.type === "toggle") {
+          if (v) out[f.key] = 1;
+        } else if (f.type === "date-range") {
+          if (v?.from) out[`${f.key}_from`] = v.from;
+          if (v?.to) out[`${f.key}_to`] = v.to;
+        } else if (v !== "" && v !== null && v !== void 0) {
+          out[f.key] = v;
+        }
+      });
+      if (sortKey) {
+        out.sort = sortKey;
+        out.direction = sortDir;
+      }
+      return out;
+    }, [filterValues, sortKey, sortDir, filterFields]);
     React28.useEffect(() => {
       if (manual && tick === 0) return;
       let cancelled = false;
       setLoading(true);
       setError(null);
       axios_default.get(url2, {
-        params: { ...params, page: currentPage, search: searchValue }
+        params: { ...params, ...activeFilterParams, page: currentPage, search: searchValue }
       }).then(({ data: res }) => {
         if (cancelled) return;
         const payload = encrypt ? decryptLaravelPayload(res, key) : res;
@@ -69632,15 +69736,184 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       return () => {
         cancelled = true;
       };
-    }, [url2, currentPage, tick, JSON.stringify(params), encrypt, decryptPayloadLog, JSON.stringify(columnOverrides), searchValue]);
+    }, [url2, currentPage, tick, JSON.stringify(params), JSON.stringify(activeFilterParams), encrypt, decryptPayloadLog, JSON.stringify(columnOverrides), searchValue]);
     const handleSearchChange = (value) => {
       setSearchValue(value);
       setCurrentPage(1);
       if (debounceTimer.current) clearTimeout(debounceTimer.current);
-      debounceTimer.current = setTimeout(() => {
-        setTick((t) => t + 1);
-      }, debounce);
+      debounceTimer.current = setTimeout(() => setTick((t) => t + 1), debounce);
+    };
+    const handleFilterChange = (key2, value) => {
+      setFilterValues((prev) => ({ ...prev, [key2]: value }));
+      setCurrentPage(1);
+      setTick((t) => t + 1);
+    };
+    const handleClearFilters = () => {
+      const reset = {};
+      filterFields?.forEach((f) => {
+        reset[f.key] = f.type === "checkbox" || f.type === "toggle" ? false : "";
+      });
+      setFilterValues(reset);
+      setSortKey("");
+      setSortDir("asc");
+      setCurrentPage(1);
+      setTick((t) => t + 1);
     };
+    const hasActiveFilters = filterFields?.some((f) => {
+      const v = filterValues[f.key];
+      return f.type === "checkbox" || f.type === "toggle" ? !!v : v !== "" && v !== null && v !== void 0;
+    }) || !!sortKey;
+    const filterBar = filterFields?.length || sortKeys?.length ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-wrap items-end gap-3 rounded-xl border border-border bg-muted/30 px-4 py-3", children: [
+      filterFields?.map((f) => {
+        const label = f.label ?? f.key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+        const value = filterValues[f.key];
+        const opts = (f.options ?? []).map(
+          (o) => typeof o === "string" ? { label: o, value: o } : o
+        );
+        if (f.type === "checkbox") return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer select-none", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              checked: !!value,
+              onChange: (e) => handleFilterChange(f.key, e.target.checked),
+              className: "h-4 w-4 rounded accent-primary"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xs font-medium text-foreground", children: label })
+        ] }, f.key);
+        if (f.type === "toggle") return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer select-none", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "button",
+            {
+              type: "button",
+              role: "switch",
+              "aria-checked": !!value,
+              onClick: () => handleFilterChange(f.key, !value),
+              className: cn(
+                "relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors",
+                value ? "bg-primary" : "bg-muted"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: cn(
+                "pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform",
+                value ? "translate-x-4" : "translate-x-0"
+              ) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xs font-medium text-foreground", children: label })
+        ] }, f.key);
+        if (f.type === "select") return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+            "select",
+            {
+              value: value ?? "",
+              onChange: (e) => handleFilterChange(f.key, e.target.value),
+              className: "h-8 min-w-[120px] rounded-lg border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-colors",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("option", { value: "", children: f.placeholder ?? `All ${label}` }),
+                opts.map((o) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("option", { value: o.value, children: o.label }, o.value))
+              ]
+            }
+          )
+        ] }, f.key);
+        if (f.type === "date" || f.type === "date-time") return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "input",
+            {
+              type: f.type === "date-time" ? "datetime-local" : "date",
+              value: value ?? "",
+              onChange: (e) => handleFilterChange(f.key, e.target.value),
+              className: "h-8 rounded-lg border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-colors"
+            }
+          )
+        ] }, f.key);
+        if (f.type === "date-range") return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              "input",
+              {
+                type: "date",
+                value: value?.from ?? "",
+                onChange: (e) => handleFilterChange(f.key, { ...value, from: e.target.value }),
+                className: "h-8 rounded-lg border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-colors"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xs text-muted-foreground", children: "\u2013" }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              "input",
+              {
+                type: "date",
+                value: value?.to ?? "",
+                onChange: (e) => handleFilterChange(f.key, { ...value, to: e.target.value }),
+                className: "h-8 rounded-lg border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-colors"
+              }
+            )
+          ] })
+        ] }, f.key);
+        return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "input",
+            {
+              type: "text",
+              value: value ?? "",
+              placeholder: f.placeholder ?? `Filter ${label}\u2026`,
+              onChange: (e) => handleFilterChange(f.key, e.target.value),
+              className: "h-8 min-w-[140px] rounded-lg border border-border bg-background px-3 text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-colors"
+            }
+          )
+        ] }, f.key);
+      }),
+      sortKeys?.length ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Sort by" }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+            "select",
+            {
+              value: sortKey,
+              onChange: (e) => {
+                setSortKey(e.target.value);
+                setCurrentPage(1);
+                setTick((t) => t + 1);
+              },
+              className: "h-8 min-w-[120px] rounded-lg border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-colors",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("option", { value: "", children: "Default" }),
+                sortKeys.map((k) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("option", { value: k, children: k.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()) }, k))
+              ]
+            }
+          ),
+          sortKey && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setSortDir((d) => d === "asc" ? "desc" : "asc");
+                setTick((t) => t + 1);
+              },
+              className: "flex h-8 w-8 items-center justify-center rounded-lg border border-border bg-background text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+              title: sortDir === "asc" ? "Ascending" : "Descending",
+              children: sortDir === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChevronUp, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChevronDown, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ] })
+      ] }) : null,
+      hasActiveFilters && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: handleClearFilters,
+          className: "flex h-8 items-center gap-1.5 self-end rounded-lg border border-border bg-background px-3 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-colors",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(X, { className: "h-3 w-3" }),
+            " Clear"
+          ]
+        }
+      )
+    ] }) : null;
     return {
       data,
       columns,
@@ -69649,11 +69922,18 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       serverPagination: pagination ? { pagination, currentPage, goToPage: (page) => setCurrentPage(page) } : null,
       loading,
       error,
+      filterBar,
       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 = {
@@ -69711,6 +69991,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     return null;
   }
   function FieldRenderer({ field, value, onChange }) {
+    if (field.component) return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: field.component });
     if (field.render) return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: field.render(value, onChange) });
     const toLabelValue = (o) => {
       if (typeof o === "string") return { label: o, value: o };
@@ -69803,9 +70084,33 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       case "rich-text":
         return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(RichTextEditor, { value: value ?? "", onChange: (v) => onChange(v) });
       case "file-upload":
-        return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FileUpload, { onChange: (files) => onChange(files) });
+        return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FileUpload, { onFileSelect: (file) => onChange(file), onFilesChange: (files) => {
+          if (files.length > 1) onChange(files);
+        } });
       case "repeater": {
         const items = Array.isArray(value) ? value : [];
+        if (field.repeaterFields) {
+          const rows = Array.isArray(value) ? value : [];
+          return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            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((r2, idx) => idx === i ? { ...r2, [key]: val } : r2);
+                onChange(next);
+              }
+            }
+          );
+        }
         return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           Repeater,
           {
@@ -69846,8 +70151,172 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     item,
     fields,
     onClose,
-    width
+    width,
+    grid
   }) {
+    const renderViewValue = (f, value) => {
+      const sizeStyle = {
+        ...f.width ? { width: typeof f.width === "number" ? `${f.width}px` : f.width } : {},
+        ...f.height ? { height: typeof f.height === "number" ? `${f.height}px` : f.height } : {}
+      };
+      const vt = f.viewType ?? f.type;
+      const empty = value === null || value === void 0 || value === "";
+      const dash = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-muted-foreground italic text-sm", children: "\u2014" });
+      if (f.component) return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: f.component });
+      if (f.render) return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: f.render(value, () => {
+      }) });
+      switch (vt) {
+        case "image":
+          return empty ? dash : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "img",
+            {
+              src: value,
+              alt: f.label,
+              className: "rounded-xl object-cover ring-1 ring-border",
+              style: { width: sizeStyle.width ?? 128, height: sizeStyle.height ?? 128 }
+            }
+          );
+        case "image-url":
+          return empty ? dash : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "a",
+            {
+              href: value,
+              onClick: (e) => e.preventDefault(),
+              className: "inline-block rounded-xl overflow-hidden ring-1 ring-border hover:ring-primary transition-all",
+              style: { width: sizeStyle.width ?? 128, height: sizeStyle.height ?? 128 },
+              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { src: value, alt: f.label, className: "w-full h-full object-cover" })
+            }
+          );
+        case "image-url-open-other-tabs":
+          return empty ? dash : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "a",
+            {
+              href: value,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "inline-block rounded-xl overflow-hidden ring-1 ring-border hover:ring-primary transition-all",
+              style: { width: sizeStyle.width ?? 128, height: sizeStyle.height ?? 128 },
+              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { src: value, alt: f.label, className: "w-full h-full object-cover" })
+            }
+          );
+        case "text-url":
+          return empty ? dash : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "a",
+            {
+              href: value,
+              onClick: (e) => e.preventDefault(),
+              className: "text-sm text-primary underline underline-offset-2 hover:text-primary/80 break-all",
+              style: sizeStyle,
+              children: value
+            }
+          );
+        case "text-url-open-other-tabs":
+          return empty ? dash : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "a",
+            {
+              href: value,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "text-sm text-primary underline underline-offset-2 hover:text-primary/80 break-all",
+              style: sizeStyle,
+              children: value
+            }
+          );
+        case "attachment":
+          return empty ? dash : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+            "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-3 py-1.5 text-xs font-medium text-foreground hover:bg-muted transition-colors",
+              style: sizeStyle,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("svg", { className: "h-3.5 w-3.5 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("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(value).split("/").pop() ?? "Download"
+              ]
+            }
+          );
+        case "repeater": {
+          const rows = Array.isArray(value) ? value : [];
+          if (!rows.length) return dash;
+          const rFields = f.repeaterFields;
+          return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "space-y-2", children: rows.map((row, ri) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-wrap gap-3 rounded-xl border border-border bg-muted/30 px-3 py-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("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__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                rf.label && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-[10px] text-muted-foreground", children: rf.label }),
+                v ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("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__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                rf.label && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-[10px] text-muted-foreground", children: rf.label }),
+                v ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+                  "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__ */ (0, import_jsx_runtime32.jsx)("svg", { className: "h-3 w-3 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("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__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                rf.label && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-[10px] text-muted-foreground", children: rf.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-sm", children: v ?? "\u2014" })
+              ] }, rf.key);
+            }) : (
+              // payload mode: row has { type, key, value }
+              Object.entries(row).map(([k, v]) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-[10px] text-muted-foreground", children: k }),
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-sm", children: String(v) })
+              ] }, k))
+            )
+          ] }, ri)) });
+        }
+        case "checkbox":
+          return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              checked: !!value,
+              readOnly: true,
+              className: "h-4 w-4 rounded border-border accent-primary cursor-default",
+              style: sizeStyle
+            }
+          );
+        case "toggle":
+          return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "div",
+            {
+              className: cn(
+                "relative inline-flex shrink-0 rounded-full border-2 border-transparent transition-colors",
+                value ? "bg-primary" : "bg-muted"
+              ),
+              style: { width: sizeStyle.width ?? 36, height: sizeStyle.height ?? 20 },
+              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                "span",
+                {
+                  className: cn(
+                    "pointer-events-none inline-block rounded-full bg-white shadow-sm transition-transform"
+                  ),
+                  style: {
+                    width: typeof (sizeStyle.height ?? 20) === "number" ? sizeStyle.height - 4 : 16,
+                    height: typeof (sizeStyle.height ?? 20) === "number" ? sizeStyle.height - 4 : 16,
+                    transform: value ? `translateX(${typeof (sizeStyle.width ?? 36) === "number" ? sizeStyle.width - (sizeStyle.height ?? 20) : 16}px)` : "translateX(0)"
+                  }
+                }
+              )
+            }
+          );
+        default:
+          return empty ? dash : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-sm text-foreground break-words", style: sizeStyle, children: String(value) });
+      }
+    };
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       ModalShell,
       {
@@ -69855,11 +70324,27 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
         onClose,
         width,
         footer: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { variant: "outline", size: "sm", onClick: onClose, children: "Close" }),
-        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "space-y-3", children: fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-xs font-semibold text-muted-foreground mb-1", children: f.label }),
-          f.render ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: f.render(item[f.key], () => {
-          }) }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-sm text-foreground break-words", children: item[f.key] === null || item[f.key] === void 0 || item[f.key] === "" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-muted-foreground italic", children: "\u2014" }) : String(item[f.key]) })
-        ] }, f.key)) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "div",
+          {
+            className: grid ? "grid gap-4" : "space-y-3",
+            style: grid ? { gridTemplateColumns: `repeat(${grid}, minmax(0, 1fr))` } : void 0,
+            children: fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+              "div",
+              {
+                style: {
+                  ...f.colSpan ? { gridColumn: `span ${f.colSpan}` } : {},
+                  ...f.rowSpan ? { gridRow: `span ${f.rowSpan}` } : {}
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-xs font-semibold text-muted-foreground mb-1", children: f.label }),
+                  renderViewValue(f, item[f.key])
+                ]
+              },
+              f.key
+            ))
+          }
+        )
       }
     );
   }
@@ -69877,7 +70362,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     const [form, setForm] = React28.useState(() => {
       const init = {};
       fields.forEach((f) => {
-        init[f.key] = item[f.key] ?? "";
+        init[f.key] = f.type === "file-upload" ? null : item[f.key] ?? "";
       });
       return init;
     });
@@ -69889,6 +70374,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       e.preventDefault();
       const errs = {};
       fields.forEach((f) => {
+        if (f.type === "file-upload" && !form[f.key] && item[f.key]) return;
         const msg = validateField(f, form[f.key]);
         if (msg) errs[f.key] = msg;
       });
@@ -69900,7 +70386,30 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       setLoading(true);
       setError(null);
       try {
-        await csrfAxios.put(`${baseUrl}/${itemId}/update`, form);
+        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute("content");
+        if (!csrfToken) throw new Error("[Table] CSRF token not found.");
+        const isFile2 = (v) => v instanceof File;
+        const isFileArray = (v) => Array.isArray(v) && v.length > 0 && v[0] instanceof File;
+        const hasFiles = Object.values(form).some((v) => isFile2(v) || isFileArray(v));
+        let body;
+        if (hasFiles) {
+          const fd = new FormData();
+          fd.append("_method", "PUT");
+          Object.entries(form).forEach(([k, v]) => {
+            if (isFileArray(v)) {
+              v.forEach((f) => fd.append(k, f));
+            } else if (isFile2(v)) {
+              fd.append(k, v);
+            } else if (v === null || v === void 0) {
+            } else if (!Array.isArray(v)) {
+              fd.append(k, String(v));
+            }
+          });
+          body = fd;
+        } else {
+          body = form;
+        }
+        await axios_default.put(`${baseUrl}/${itemId}/update`, body, { headers: { "X-CSRF-Token": csrfToken } });
         const updated = { ...item, ...form };
         if (notif && (notif.type ?? "toast") === "notification") {
           setBanner(true);
@@ -69941,14 +70450,14 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
             ),
             notif.action && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: notif.action })
           ] }),
-          fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+          fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "div",
             {
               style: {
                 ...f.colSpan ? { gridColumn: `span ${f.colSpan}` } : {},
                 ...f.rowSpan ? { gridRow: `span ${f.rowSpan}` } : {}
               },
-              children: [
+              children: f.component ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: f.component }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
                 f.type !== "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "block text-xs font-semibold text-muted-foreground mb-1", children: [
                   f.label,
                   f.required && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-danger ml-0.5", children: "*" })
@@ -69968,7 +70477,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
                   }
                 ),
                 fieldErrors[f.key] && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-xs text-danger mt-1", children: fieldErrors[f.key] })
-              ]
+              ] })
             },
             f.key
           )),
@@ -69991,7 +70500,9 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       setLoading(true);
       setError(null);
       try {
-        await csrfAxios.delete(`${baseUrl}/${itemId}/delete`);
+        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute("content");
+        if (!csrfToken) throw new Error("[Table] CSRF token not found.");
+        await axios_default.delete(`${baseUrl}/${itemId}/delete?csrfToken=${encodeURIComponent(csrfToken)}`, { headers: { "X-CSRF-Token": csrfToken } });
         onSuccess?.(item);
         onClose();
       } catch (err) {
@@ -70066,26 +70577,89 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
   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,
     idKey = "id",
+    bulkDeleteBaseUrl,
     defaultActions,
     serverPagination,
-    className
+    variant = "default",
+    className,
+    onRowClick,
+    onRowDoubleClick,
+    rowClassName,
+    expandable = false,
+    renderExpanded,
+    columnVisibility,
+    onColumnVisibilityChange,
+    columnVisibilityIcon,
+    filterBar,
+    filterableIcon,
+    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 [bulkConfirm, setBulkConfirm] = React28.useState(null);
+    const [filterBarOpen, setFilterBarOpen] = 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);
@@ -70097,15 +70671,17 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     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",
@@ -70154,8 +70730,8 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           ))
         ] })
       };
-      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);
@@ -70188,16 +70764,78 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     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;
+    const totalRows = serverPagination ? serverPagination.pagination.total : filteredData.length;
+    const unselectedCount = totalRows - selectedIds.length;
+    const handleSelectAllRecords = () => setSelectedIds(filteredData.map((item) => String(item[idKey])));
+    const handleUnselectAll = () => setSelectedIds([]);
+    const execBulkDeleteSelected = async () => {
+      if (!bulkDeleteBaseUrl || selectedIds.length === 0) {
+        onBulkDelete?.(selectedIds);
+        setSelectedIds([]);
+        return;
+      }
+      setBulkLoading(true);
+      try {
+        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute("content");
+        if (!csrfToken) throw new Error("[Table] CSRF token not found.");
+        const safeUrl = bulkDeleteBaseUrl.replace(/\/+$/, "");
+        await axios_default.delete(`${safeUrl}/delete/${selectedIds.join(",")}/selected`, { headers: { "X-CSRF-Token": csrfToken } });
+        setTableData((prev) => prev.filter((r2) => !selectedIds.includes(String(r2[idKey]))));
+        onBulkDelete?.(selectedIds);
+        setSelectedIds([]);
+        defaultActions?.onReload?.();
+        toast({ variant: "success", title: "Deleted", description: `${selectedIds.length} record${selectedIds.length !== 1 ? "s" : ""} deleted successfully.` });
+      } catch (err) {
+        const msg = err?.response?.data?.message ?? err.message ?? "Bulk delete failed";
+        toast({ variant: "error", title: "Delete failed", description: msg });
+      } finally {
+        setBulkLoading(false);
+      }
+    };
+    const execDeleteAll = async () => {
+      if (!bulkDeleteBaseUrl) return;
+      setBulkLoading(true);
+      try {
+        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute("content");
+        if (!csrfToken) throw new Error("[Table] CSRF token not found.");
+        const safeUrl = bulkDeleteBaseUrl.replace(/\/+$/, "");
+        await axios_default.delete(`${safeUrl}/delete/all`, { headers: { "X-CSRF-Token": csrfToken } });
+        setTableData([]);
+        setSelectedIds([]);
+        defaultActions?.onReload?.();
+        toast({ variant: "success", title: "Deleted", description: "All records deleted successfully." });
+      } catch (err) {
+        const msg = err?.response?.data?.message ?? err.message ?? "Delete all failed";
+        toast({ variant: "error", title: "Delete failed", description: msg });
+      } finally {
+        setBulkLoading(false);
+      }
+    };
     const pagePills = React28.useMemo(() => {
       if (totalPages <= 5) return Array.from({ length: totalPages }, (_, i) => i + 1);
       if (safePage <= 3) return [1, 2, 3, 4, 5];
@@ -70211,6 +70849,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     };
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cn("w-full space-y-3", className), children: [
+        errorProp && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "rounded-xl border border-danger/30 bg-danger/5 px-4 py-3 text-sm text-danger", children: errorProp }),
         /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-between gap-3 flex-wrap", children: [
           searchable && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "relative w-72", children: [
             /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Search, { className: "absolute text-primary left-3 top-1/2 -translate-y-1/2 h-4 w-4 z-10" }),
@@ -70232,33 +70871,127 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-2 ml-auto", children: [
-            selectable && onBulkDelete && selectedIds.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-2 ml-auto flex-wrap", children: [
+            selectable && selectedIds.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+                "button",
+                {
+                  onClick: handleUnselectAll,
+                  disabled: bulkLoading,
+                  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 disabled:opacity-40",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(X, { className: "h-3.5 w-3.5" }),
+                    "Unselect all ",
+                    selectedIds.length
+                  ]
+                }
+              ),
+              unselectedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+                "button",
+                {
+                  onClick: handleSelectAllRecords,
+                  disabled: bulkLoading,
+                  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 disabled:opacity-40",
+                  children: [
+                    "Select all ",
+                    unselectedCount
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+                "button",
+                {
+                  onClick: () => setBulkConfirm("selected"),
+                  disabled: bulkLoading,
+                  className: "inline-flex items-center gap-1.5 rounded-lg bg-danger/10 border border-danger/20 px-3 py-1.5 text-xs font-medium text-danger hover:bg-danger/20 transition-colors disabled:opacity-40",
+                  children: [
+                    bulkLoading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LoaderCircle, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Trash2, { className: "h-3.5 w-3.5" }),
+                    "Delete ",
+                    selectedIds.length,
+                    " selected"
+                  ]
+                }
+              ),
+              bulkDeleteBaseUrl && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+                "button",
+                {
+                  onClick: () => setBulkConfirm("all"),
+                  disabled: bulkLoading,
+                  className: "inline-flex items-center gap-1.5 rounded-lg bg-danger/10 border border-danger/20 px-3 py-1.5 text-xs font-medium text-danger hover:bg-danger/20 transition-colors disabled:opacity-40",
+                  children: [
+                    bulkLoading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LoaderCircle, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Trash2, { className: "h-3.5 w-3.5" }),
+                    "Delete all"
+                  ]
+                }
+              )
+            ] }),
+            filterBar && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               "button",
               {
-                onClick: () => {
-                  onBulkDelete(selectedIds);
-                  setSelectedIds([]);
-                },
-                className: "inline-flex items-center gap-1.5 rounded-lg bg-danger/10 border border-danger/20 px-3 py-1.5 text-xs font-medium text-danger hover:bg-danger/20 transition-colors",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Trash2, { className: "h-3.5 w-3.5" }),
-                  "Delete ",
-                  selectedIds.length,
-                  " selected"
-                ]
+                onClick: () => setFilterBarOpen((o) => !o),
+                className: cn(
+                  "inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors",
+                  filterBarOpen ? "border-primary bg-primary/10 text-primary hover:bg-primary/20" : "border-border bg-muted/50 text-muted-foreground hover:bg-muted"
+                ),
+                children: filterableIcon ?? "Filter"
               }
             ),
+            exportable && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "relative group", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("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__ */ (0, import_jsx_runtime32.jsx)("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__ */ (0, import_jsx_runtime32.jsx)(
+                "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__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "relative group", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("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: columnVisibilityIcon ?? "Columns" }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("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__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "flex items-center gap-2 px-2 py-1 rounded-lg hover:bg-muted cursor-pointer text-xs", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  "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__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
-              serverPagination ? serverPagination.pagination.total : filteredData.length,
+              totalRows,
               " ",
-              (serverPagination ? serverPagination.pagination.total : filteredData.length) === 1 ? "row" : "rows",
+              totalRows === 1 ? "row" : "rows",
               search && ` \xB7 filtered from ${tableData.length}`
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "rounded-xl border border-border overflow-hidden bg-card/50 backdrop-blur-sm shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-full overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("table", { className: "w-full caption-bottom text-sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("tr", { className: "border-b border-border bg-muted/40", children: [
+        filterBar && filterBarOpen && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: filterBar }),
+        loading && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-center py-12 text-muted-foreground gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LoaderCircle, { className: "h-5 w-5 animate-spin" }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-sm", children: "Loading\u2026" })
+        ] }),
+        !loading && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("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__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn("w-full overflow-auto", variant === "card" && "space-y-2"), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("table", { className: cn("w-full caption-bottom text-sm", variant === "card" && "border-separate border-spacing-y-2"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("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__ */ (0, import_jsx_runtime32.jsx)("th", { className: "h-11 w-[46px] px-4 text-left align-middle", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               Checkbox,
               {
@@ -70266,13 +70999,16 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
                 onChange: (e) => handleSelectAll(e.target.checked)
               }
             ) }),
+            expandable && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("th", { className: "h-11 w-8" }),
             allColumns.map((col, ci) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               "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__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "inline-flex items-center", children: [
                   col.title,
@@ -70285,9 +71021,9 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tbody", { children: paginatedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "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__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col items-center gap-1 text-muted-foreground", children: [
+              children: emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col items-center gap-1 text-muted-foreground", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Search, { className: "h-8 w-8 opacity-20" }),
                 /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-sm", children: "No results found" }),
                 search && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { onClick: () => setSearch(""), className: "text-xs text-primary hover:underline", children: "Clear search" })
@@ -70296,85 +71032,168 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           ) }) : paginatedData.map((item, i) => {
             const id = String(item[idKey] || i);
             const isSelected = selectedIds.includes(id);
-            return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-              "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__ */ (0, import_jsx_runtime32.jsx)("td", { className: "px-4 py-3 align-middle", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-                    Checkbox,
-                    {
-                      checked: isSelected,
-                      onChange: (e) => handleSelect(id, e.target.checked)
-                    }
-                  ) }),
-                  allColumns.map((col, ci) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { className: "px-4 py-3 align-middle", children: col.render ? col.render(item) : col.type === "image" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-                    "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__ */ (0, import_jsx_runtime32.jsxs)("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__ */ (0, import_jsx_runtime32.jsx)("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__ */ (0, import_jsx_runtime32.jsxs)(React28.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+                "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((r2) => String(r2[idKey] || "") === fromId);
+                      const toIdx = prev.findIndex((r2) => String(r2[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__ */ (0, import_jsx_runtime32.jsx)("td", { className: "px-4 py-3 align-middle", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                      Checkbox,
+                      {
+                        checked: isSelected,
+                        onChange: (e) => handleSelect(id, e.target.checked)
+                      }
                     ) }),
-                    item[col.key]
-                  ] }) : col.type === "stack" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(AvatarStack, { images: Array.isArray(item[col.key]) ? item[col.key] : [], ...col.stackProps ?? {} }) : col.type === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "flex items-center", children: item[col.key] }) : col.type === "select" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-                    "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__ */ (0, import_jsx_runtime32.jsx)("option", { value: opt, children: opt }, opt))
-                    }
-                  ) : col.type === "toggle" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-                    "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__ */ (0, import_jsx_runtime32.jsx)("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__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-                      "input",
+                    expandable && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { className: "w-8 px-2 py-3 align-middle", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChevronRight, { className: cn("h-3.5 w-3.5 text-muted-foreground transition-transform", isExpanded && "rotate-90") }) }),
+                    allColumns.map((col, ci) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { className: "px-4 py-3 align-middle", children: col.render ? col.render(item) : col.type === "image" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                      "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__ */ (0, import_jsx_runtime32.jsxs)("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__ */ (0, import_jsx_runtime32.jsx)("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__ */ (0, import_jsx_runtime32.jsx)(AvatarStack, { images: Array.isArray(item[col.key]) ? item[col.key] : [], ...col.stackProps ?? {} }) : col.type === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "flex items-center", children: item[col.key] }) : col.type === "select" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                      "select",
                       {
-                        type: "color",
-                        value: item[col.key] || "#000000",
+                        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__ */ (0, import_jsx_runtime32.jsx)("option", { value: opt, children: opt }, opt))
                       }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xs text-muted-foreground font-mono", children: item[col.key] })
-                  ] }) : col.type === "checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-                    Checkbox,
-                    {
-                      checked: !!item[col.key],
-                      onChange: (e) => col.onChange?.(item, e.target.checked)
-                    }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-foreground/90", children: item[col.key] }) }, `${String(col.key)}-${ci}`))
-                ]
-              },
-              id
-            );
+                    ) : col.type === "toggle" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                      "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__ */ (0, import_jsx_runtime32.jsx)("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__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                        "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__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xs text-muted-foreground font-mono", children: item[col.key] })
+                    ] }) : col.type === "checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                      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__ */ (0, import_jsx_runtime32.jsx)(
+                        "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__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-foreground/90", children: item[col.key] }) }, `${String(col.key)}-${ci}`))
+                  ]
+                }
+              ),
+              expandable && isExpanded && renderExpanded && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tr", { className: "bg-muted/20 border-b border-border/60", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { colSpan: allColumns.length + (selectable ? 1 : 0) + 1, className: "px-6 py-3", children: renderExpanded(item) }) })
+            ] }, id);
           }) })
         ] }) }) }),
-        pagination && !serverPagination && totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
+        clientPagination && !serverPagination && totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
           /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
             "Showing ",
             (safePage - 1) * itemsPerPage + 1,
@@ -70425,8 +71244,8 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           ] })
         ] }),
         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);
@@ -70439,7 +71258,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           }
           return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
             /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
-              pagination2.total,
+              pagination.total,
               " total rows \xB7 page ",
               cp,
               " of ",
@@ -70450,7 +71269,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
                 "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__ */ (0, import_jsx_runtime32.jsx)(ChevronLeft, { className: "h-4 w-4" })
                 }
@@ -70473,7 +71292,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
                 "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__ */ (0, import_jsx_runtime32.jsx)(ChevronRight, { className: "h-4 w-4" })
                 }
@@ -70488,6 +71307,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           item: viewItem,
           fields: viewFields,
           width: defaultActions.modalWidth,
+          grid: defaultActions.viewFormGrid,
           onClose: () => setViewItem(null)
         }
       ),
@@ -70545,6 +71365,37 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
             }
           }
         }
+      ),
+      bulkConfirm && (0, import_react_dom2.createPortal)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "div",
+          {
+            className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+            style: { background: "rgba(0,0,0,0.5)" },
+            onMouseDown: (e) => {
+              if (e.target === e.currentTarget) setBulkConfirm(null);
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "relative w-full max-w-md rounded-2xl border border-border bg-card shadow-2xl flex flex-col", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h2", { className: "text-base font-semibold", children: "Confirm Delete" }),
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { onClick: () => setBulkConfirm(null), className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(X, { className: "h-4 w-4" }) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "px-6 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-sm text-muted-foreground", children: bulkConfirm === "selected" ? `Are you sure you want to delete ${selectedIds.length} selected record${selectedIds.length !== 1 ? "s" : ""}? This action cannot be undone.` : "Are you sure you want to delete all records? This action cannot be undone." }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "px-6 py-4 border-t border-border flex justify-end gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { variant: "outline", size: "sm", onClick: () => setBulkConfirm(null), disabled: bulkLoading, children: "Cancel" }),
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Button, { variant: "danger", size: "sm", disabled: bulkLoading, onClick: async () => {
+                  if (bulkConfirm === "selected") await execBulkDeleteSelected();
+                  else await execDeleteAll();
+                  setBulkConfirm(null);
+                }, children: [
+                  bulkLoading && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LoaderCircle, { className: "h-3.5 w-3.5 mr-1.5 animate-spin" }),
+                  bulkLoading ? "Deleting\u2026" : "Delete"
+                ] })
+              ] })
+            ] })
+          }
+        ),
+        document.body
       )
     ] });
   }
@@ -75729,7 +76580,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     const hasChildren = !!node.children?.length;
     const isExpanded = expanded.includes(node.id);
     const isSelected = selected.includes(node.id);
-    const defaultIcon = hasChildren ? isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FolderOpen, { className: "h-4 w-4 text-warning" }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Folder, { className: "h-4 w-4 text-warning" }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(File, { className: "h-4 w-4 text-muted-foreground" });
+    const defaultIcon = hasChildren ? isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FolderOpen, { className: "h-4 w-4 text-warning" }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Folder, { className: "h-4 w-4 text-warning" }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(File2, { className: "h-4 w-4 text-muted-foreground" });
     return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
         "div",
@@ -76409,6 +77260,12 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       Accept: "application/json"
     }
   });
+  axiosInstance.interceptors.request.use((config) => {
+    if (config.data instanceof FormData) {
+      delete config.headers["Content-Type"];
+    }
+    return config;
+  });
 
   // src/lib/codego/request.ts
   var request = async (config) => {
@@ -76930,6 +77787,7 @@ lucide-react/dist/esm/icons/minus.js:
 lucide-react/dist/esm/icons/moon.js:
 lucide-react/dist/esm/icons/panel-left-close.js:
 lucide-react/dist/esm/icons/panel-left-open.js:
+lucide-react/dist/esm/icons/paperclip.js:
 lucide-react/dist/esm/icons/pencil.js:
 lucide-react/dist/esm/icons/pin.js:
 lucide-react/dist/esm/icons/plus.js: