@universe-platform/ui 0.1.0-beta.6 → 0.1.0-beta.7

package/dist/index.js

@@ -77,7 +77,7 @@ function cn(...inputs) {
 }
 
 // src/components/TableBlock/TableBlockClient.tsx
-var import_react6 = require("react");
+var import_react7 = __toESM(require("react"));
 
 // src/hooks/useToast.ts
 var import_react2 = require("react");
@@ -280,12 +280,36 @@ function useToast() {
 var import_react5 = __toESM(require("react"));
 
 // src/components/TableBlock/fields/DrivePickerCell.tsx
-var import_react3 = require("react");
+var import_react3 = __toESM(require("react"));
 var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function DrivePickerCell({ value, onChange, tableName, onMarkForDeletion, context }) {
+function DrivePickerCell({ value, onChange, tableName, column, rowId, onMarkForDeletion, context }) {
   const [isOpening, setIsOpening] = (0, import_react3.useState)(false);
   const { showError } = useToast();
+  const cellContextId = import_react3.default.useMemo(() => {
+    const colName = (column == null ? void 0 : column.name) || "col";
+    const rId = rowId || "row";
+    return `${rId}-${colName}`;
+  }, [rowId, column == null ? void 0 : column.name]);
+  const fileList = import_react3.default.useMemo(() => {
+    if (!value) return [];
+    if (Array.isArray(value)) return value;
+    if (typeof value === "object" && (value.fileId || value.fileUrl || value.url)) {
+      return [value];
+    }
+    return [];
+  }, [value]);
+  (0, import_react3.useEffect)(() => {
+    const handleMessage = (event) => {
+      var _a, _b, _c;
+      if (((_a = event.data) == null ? void 0 : _a.type) === "DRIVE_UPLOAD_SUCCESS" && ((_b = event.data) == null ? void 0 : _b.payload) && ((_c = event.data) == null ? void 0 : _c.cellContextId) === cellContextId) {
+        const incoming = Array.isArray(event.data.payload) ? event.data.payload : [event.data.payload];
+        onChange([...fileList, ...incoming]);
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [fileList, onChange, cellContextId]);
   const openUploadPopup = async () => {
     if (isOpening) return;
     setIsOpening(true);
@@ -314,34 +338,35 @@ function DrivePickerCell({ value, onChange, tableName, onMarkForDeletion, contex
           } catch (e) {
           }
         }
-        const actionResult = await context.executeAction("UPLOAD_DRIVE_FILE", { tableName });
+        const actionResult = await context.executeAction("UPLOAD_DRIVE_FILE", { tableName, cellContextId });
         const folderId = actionResult == null ? void 0 : actionResult.folderId;
-        const pickerUrl = (actionResult == null ? void 0 : actionResult.pickerUrl) || (folderId ? `/embed/picker?folderId=${encodeURIComponent(folderId)}` : `/embed/picker`);
+        let pickerUrl = (actionResult == null ? void 0 : actionResult.pickerUrl) || (folderId ? `/embed/picker?folderId=${encodeURIComponent(folderId)}` : `/embed/picker`);
+        if (!pickerUrl.includes("cellContextId=")) {
+          const separator = pickerUrl.includes("?") ? "&" : "?";
+          pickerUrl = `${pickerUrl}${separator}cellContextId=${encodeURIComponent(cellContextId)}`;
+        }
         if (popup) {
           popup.location.href = pickerUrl;
         }
-        const newFile = await new Promise((resolve) => {
+        await new Promise((resolve) => {
           let timer = null;
-          const handleMessage = (event) => {
+          const handlePopupMessage = (event) => {
             var _a, _b;
-            if (((_a = event.data) == null ? void 0 : _a.type) === "DRIVE_UPLOAD_SUCCESS" && ((_b = event.data) == null ? void 0 : _b.payload)) {
-              window.removeEventListener("message", handleMessage);
+            if (((_a = event.data) == null ? void 0 : _a.type) === "DRIVE_UPLOAD_SUCCESS" && ((_b = event.data) == null ? void 0 : _b.cellContextId) === cellContextId) {
+              window.removeEventListener("message", handlePopupMessage);
               if (timer) clearInterval(timer);
-              resolve(event.data.payload);
+              resolve();
             }
           };
           timer = setInterval(() => {
             if (!popup || popup.closed) {
               if (timer) clearInterval(timer);
-              window.removeEventListener("message", handleMessage);
-              resolve(null);
+              window.removeEventListener("message", handlePopupMessage);
+              resolve();
             }
           }, 800);
-          window.addEventListener("message", handleMessage);
+          window.addEventListener("message", handlePopupMessage);
         });
-        if (newFile) {
-          onChange(newFile);
-        }
       }
     } catch (error) {
       console.error("[DrivePickerCell] Error uploading file:", error);
@@ -351,40 +376,15 @@ function DrivePickerCell({ value, onChange, tableName, onMarkForDeletion, contex
       setIsOpening(false);
     }
   };
-  if (value == null ? void 0 : value.fileUrl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center w-full h-8 px-2 gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-        "a",
-        {
-          href: value.fileUrl,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          className: "inline-flex items-center gap-1.5 max-w-[calc(100%-24px)] px-2 py-1 rounded-md text-xs font-medium text-blue-700 bg-blue-50 hover:bg-blue-100 transition-colors truncate",
-          title: value.fileName || "Open file",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.FileText, { className: "w-3.5 h-3.5 shrink-0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "truncate", children: value.fileName || "Unnamed file" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            if ((value == null ? void 0 : value.fileId) && onMarkForDeletion) {
-              onMarkForDeletion(value.fileId);
-            }
-            onChange(null);
-          },
-          className: "shrink-0 p-0.5 rounded hover:bg-rose-100 text-slate-400 hover:text-rose-500 transition-colors",
-          title: "Remove file",
-          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.X, { className: "w-3.5 h-3.5" })
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center w-full h-8 px-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  const handleRemoveFile = (indexToRemove) => {
+    const fileToRemove = fileList[indexToRemove];
+    if ((fileToRemove == null ? void 0 : fileToRemove.fileId) && onMarkForDeletion) {
+      onMarkForDeletion(fileToRemove.fileId);
+    }
+    const updated = fileList.filter((_, idx) => idx !== indexToRemove);
+    onChange(updated);
+  };
+  const renderUploadButton = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center w-full h-8 px-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "button",
     {
       type: "button",
@@ -397,6 +397,38 @@ function DrivePickerCell({ value, onChange, tableName, onMarkForDeletion, contex
       ]
     }
   ) });
+  if (fileList.length > 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col w-full py-1 gap-1", children: [
+      fileList.map((file, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center w-full h-8 px-2 gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "a",
+          {
+            href: file.fileUrl || file.url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "inline-flex items-center gap-1.5 max-w-[calc(100%-24px)] px-2 py-1 rounded-md text-xs font-medium text-blue-700 bg-blue-50 hover:bg-blue-100 transition-colors truncate",
+            title: file.fileName || "Open file",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.FileText, { className: "w-3.5 h-3.5 shrink-0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "truncate", children: file.fileName || "Unnamed file" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleRemoveFile(idx),
+            className: "shrink-0 p-0.5 rounded hover:bg-rose-100 text-slate-400 hover:text-rose-500 transition-colors",
+            title: "Remove file",
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.X, { className: "w-3.5 h-3.5" })
+          }
+        )
+      ] }, file.fileId || idx)),
+      renderUploadButton()
+    ] });
+  }
+  return renderUploadButton();
 }
 
 // src/components/TableBlock/fields/DatePickerCell.tsx
@@ -831,11 +863,13 @@ var FORM_INPUTS = {
       className: "w-4 h-4 rounded border-slate-300 text-brand"
     }
   ) }),
-  GOOGLE_DRIVE_FILE: ({ value, onChange, context }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  GOOGLE_DRIVE_FILE: ({ value, onChange, column, rowId, context }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     DrivePickerCell,
     {
-      value: value || null,
+      value: value || [],
       onChange,
+      column,
+      rowId,
       tableName: context == null ? void 0 : context.tableName,
       onMarkForDeletion: context == null ? void 0 : context.onMarkForDeletion,
       context
@@ -893,6 +927,228 @@ var FORM_INPUTS = {
       }
     }
   ),
+  PHONE: ({ value, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "input",
+    {
+      type: "tel",
+      className: "w-full h-8 px-2 bg-transparent focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-400 text-sm",
+      value: value !== void 0 && value !== null ? String(value) : "",
+      onChange: (e) => onChange(e.target.value),
+      dir: "ltr"
+    }
+  ),
+  GOOGLE_CONTACT: ({ value, column, rowId, onChange, context }) => {
+    const [isSyncing, setIsSyncing] = import_react5.default.useState(false);
+    const { addToast } = useToast();
+    const googleClientIdRef = import_react5.default.useRef(null);
+    const ensureGisScript = import_react5.default.useCallback(() => {
+      return new Promise((resolve, reject) => {
+        var _a, _b, _c;
+        if ((_c = (_b = (_a = window.google) == null ? void 0 : _a.accounts) == null ? void 0 : _b.oauth2) == null ? void 0 : _c.initTokenClient) {
+          resolve();
+          return;
+        }
+        if (document.querySelector('script[src*="accounts.google.com/gsi/client"]')) {
+          const waitForLoad = setInterval(() => {
+            var _a2, _b2, _c2;
+            if ((_c2 = (_b2 = (_a2 = window.google) == null ? void 0 : _a2.accounts) == null ? void 0 : _b2.oauth2) == null ? void 0 : _c2.initTokenClient) {
+              clearInterval(waitForLoad);
+              resolve();
+            }
+          }, 100);
+          setTimeout(() => {
+            clearInterval(waitForLoad);
+            reject(new Error("GIS script load timeout"));
+          }, 1e4);
+          return;
+        }
+        const script = document.createElement("script");
+        script.src = "https://accounts.google.com/gsi/client";
+        script.async = true;
+        script.onload = () => resolve();
+        script.onerror = () => reject(new Error("Failed to load Google Identity Services"));
+        document.head.appendChild(script);
+      });
+    }, []);
+    const requestGisToken = import_react5.default.useCallback(async (hint) => {
+      await ensureGisScript();
+      if (!googleClientIdRef.current && (context == null ? void 0 : context.executeAction)) {
+        try {
+          const config = await context.executeAction("GET_GOOGLE_CONFIG", {});
+          googleClientIdRef.current = (config == null ? void 0 : config.clientId) || "";
+        } catch (e) {
+          throw new Error("Failed to fetch Google configuration");
+        }
+      }
+      const clientId = googleClientIdRef.current;
+      if (!clientId) {
+        throw new Error("Google Client ID is not configured");
+      }
+      const accessToken = await new Promise((resolve, reject) => {
+        const tokenClient = window.google.accounts.oauth2.initTokenClient({
+          client_id: clientId,
+          scope: "https://www.googleapis.com/auth/contacts https://www.googleapis.com/auth/userinfo.email",
+          prompt: hint ? "" : "select_account",
+          hint: hint || void 0,
+          callback: (tokenResponse) => {
+            if (tokenResponse == null ? void 0 : tokenResponse.access_token) {
+              resolve(tokenResponse.access_token);
+            } else {
+              reject(new Error("Google authorization was cancelled or failed"));
+            }
+          },
+          error_callback: (err) => {
+            reject(new Error((err == null ? void 0 : err.message) || "Google authorization error"));
+          }
+        });
+        tokenClient.requestAccessToken({ hint: hint || void 0 });
+      });
+      let email = "";
+      try {
+        const res = await fetch("https://www.googleapis.com/oauth2/v3/userinfo", {
+          headers: { Authorization: `Bearer ${accessToken}` }
+        });
+        if (res.ok) {
+          const info = await res.json();
+          email = info.email || "";
+        }
+      } catch (e) {
+      }
+      return { accessToken, email };
+    }, [ensureGisScript, context]);
+    const handleSync = async () => {
+      var _a, _b, _c;
+      if (!(context == null ? void 0 : context.executeAction)) return;
+      setIsSyncing(true);
+      try {
+        const mapping = column.contactMapping || {};
+        const rowData = context.rowData || {};
+        let hasPhone = false;
+        if (mapping.phoneCol && rowData[mapping.phoneCol]) hasPhone = true;
+        let hasName = false;
+        if (mapping.nameParts && Array.isArray(mapping.nameParts)) {
+          for (const part of mapping.nameParts) {
+            if (part.type === "LOCAL" && rowData[part.columnId]) hasName = true;
+            if (part.type === "PARENT" && ((_a = context.parentRecord) == null ? void 0 : _a.tableId) === part.parentTableId && ((_c = (_b = context.parentRecord) == null ? void 0 : _b.data) == null ? void 0 : _c[part.columnId])) hasName = true;
+          }
+        }
+        if (!hasPhone) {
+          addToast({ type: "warning", message: "\u05E0\u05D0 \u05DC\u05DE\u05DC\u05D0 \u05DE\u05E1\u05E4\u05E8 \u05D8\u05DC\u05E4\u05D5\u05DF \u05DB\u05D3\u05D9 \u05DC\u05E1\u05E0\u05DB\u05E8\u05DF \u05D0\u05D9\u05E9 \u05E7\u05E9\u05E8 \u05DC\u05D2\u05D5\u05D2\u05DC" });
+          setIsSyncing(false);
+          return;
+        }
+        if (!hasName) {
+          addToast({ type: "warning", message: "\u05E0\u05D0 \u05DC\u05DE\u05DC\u05D0 \u05E9\u05DD \u05DB\u05D3\u05D9 \u05DC\u05E1\u05E0\u05DB\u05E8\u05DF \u05D0\u05D9\u05E9 \u05E7\u05E9\u05E8 \u05DC\u05D2\u05D5\u05D2\u05DC" });
+          setIsSyncing(false);
+          return;
+        }
+        let accessToken;
+        let userEmail = "";
+        try {
+          const gisResult = await requestGisToken();
+          accessToken = gisResult.accessToken;
+          userEmail = gisResult.email;
+        } catch (gisError) {
+          addToast({ type: "warning", message: gisError.message || "\u05D4\u05D4\u05E8\u05E9\u05D0\u05D4 \u05DC\u05D2\u05D5\u05D2\u05DC \u05E0\u05DB\u05E9\u05DC\u05D4" });
+          setIsSyncing(false);
+          return;
+        }
+        const payload = {
+          nameParts: mapping.nameParts || [],
+          phoneCol: mapping.phoneCol,
+          emailCol: mapping.emailCol,
+          localRowData: rowData,
+          parentRecord: context.parentRecord,
+          accessToken,
+          userEmail
+        };
+        const res = await context.executeAction("SYNC_GOOGLE_CONTACT", payload);
+        if (res && res.synced) {
+          if (context.updateQuietly) {
+            context.updateQuietly(rowId, column.name, res);
+          } else {
+            onChange(res);
+          }
+          if (context.tableId && !rowId.startsWith("temp_")) {
+            await context.executeAction("UPDATE_RECORD", {
+              tableId: context.tableId,
+              recordId: rowId,
+              data: { [column.name]: res }
+            });
+          }
+        }
+      } catch (error) {
+        console.error("Failed to sync contact:", error);
+        addToast({ type: "warning", message: "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E1\u05E0\u05DB\u05E8\u05D5\u05DF \u05D0\u05D9\u05E9 \u05E7\u05E9\u05E8: " + error.message });
+      } finally {
+        setIsSyncing(false);
+      }
+    };
+    const handleUnlink = async () => {
+      let accessToken;
+      try {
+        let emailHint = value == null ? void 0 : value.userEmail;
+        if (!emailHint && (value == null ? void 0 : value.url)) {
+          try {
+            const parsed = new URL(value.url);
+            emailHint = parsed.searchParams.get("authuser") || void 0;
+          } catch (e) {
+          }
+        }
+        const auth = await requestGisToken(emailHint);
+        accessToken = auth.accessToken;
+      } catch (err) {
+        console.warn("[handleUnlink] Could not obtain token via GIS, falling back to server default token:", err);
+      }
+      if ((value == null ? void 0 : value.resourceName) && (context == null ? void 0 : context.executeAction)) {
+        await context.executeAction("DELETE_GOOGLE_CONTACT", {
+          resourceName: value.resourceName,
+          accessToken
+        });
+      }
+      if (context == null ? void 0 : context.updateQuietly) {
+        context.updateQuietly(rowId, column.name, null);
+      } else {
+        onChange(null);
+      }
+      if ((context == null ? void 0 : context.tableId) && (context == null ? void 0 : context.executeAction) && !rowId.startsWith("temp_")) {
+        await context.executeAction("UPDATE_RECORD", {
+          tableId: context.tableId,
+          recordId: rowId,
+          data: { [column.name]: null }
+        });
+      }
+    };
+    if (value && value.synced && value.url) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2 h-8 px-2 group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { href: value.url, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:underline flex-1 truncate text-sm", children: "\u05D0\u05D9\u05E9 \u05E7\u05E9\u05E8 \u05D2\u05D5\u05D2\u05DC" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            onClick: handleUnlink,
+            className: "text-slate-400 hover:text-rose-500 opacity-0 group-hover:opacity-100 transition-opacity p-1",
+            title: "\u05D1\u05D8\u05DC \u05E1\u05E0\u05DB\u05E8\u05D5\u05DF",
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) })
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex items-center h-8 px-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "button",
+      {
+        onClick: handleSync,
+        disabled: isSyncing,
+        className: "flex items-center gap-1.5 px-3 py-1 bg-blue-50 text-blue-600 hover:bg-blue-100 border border-blue-200 rounded-md text-xs font-medium transition-colors disabled:opacity-50",
+        children: [
+          isSyncing ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { className: "w-3.5 h-3.5 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 4v16m8-8H4" }) }),
+          "\u05E1\u05E0\u05DB\u05E8\u05DF \u05DC\u05D2\u05D5\u05D2\u05DC"
+        ]
+      }
+    ) });
+  },
   DEFAULT: ({ value, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "input",
     {
@@ -901,12 +1157,459 @@ var FORM_INPUTS = {
       value: value !== void 0 && value !== null ? String(value) : "",
       onChange: (e) => onChange(e.target.value)
     }
-  )
+  ),
+  SUB_TABLE: ({ value, column }) => {
+    if (!Array.isArray(value)) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "px-2 py-1 flex items-center h-full text-slate-300 text-xs italic", children: "\u05E8\u05D9\u05E7" });
+    const selected = value.filter((e) => e == null ? void 0 : e.isSelected);
+    if (selected.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "px-2 py-1 flex items-center h-full text-slate-300 text-xs italic", children: "\u05E8\u05D9\u05E7" });
+    const displayFields = column.subTableDisplayFields || [];
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "px-1.5 py-1 flex flex-wrap items-center gap-1 h-full", children: selected.map((entry, idx) => {
+      var _a;
+      let label = "";
+      if (entry._resolvedData && displayFields.length > 0) {
+        label = displayFields.map((f) => String(entry._resolvedData[f] || "")).filter(Boolean).join("   ");
+      }
+      if (!label) label = ((_a = entry.recordId) == null ? void 0 : _a.slice(-6)) || "...";
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "span",
+        {
+          className: "inline-flex items-center px-1.5 py-0.5 bg-amber-50 text-amber-800 border border-amber-200 rounded-full text-xs font-medium max-w-[140px] truncate",
+          title: label,
+          children: label
+        },
+        entry.recordId || idx
+      );
+    }) });
+  }
 };
 
+// src/components/TableBlock/fields/SubTableViewer.tsx
+var import_react6 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function SubTableViewer({ rowId, column, value, onChange, context }) {
+  var _a;
+  const { addToast } = useToast();
+  const entries = Array.isArray(value) ? value : [];
+  const [linkedRecords, setLinkedRecords] = (0, import_react6.useState)([]);
+  const [targetSchema, setTargetSchema] = (0, import_react6.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react6.useState)(true);
+  const [isSearchOpen, setIsSearchOpen] = (0, import_react6.useState)(false);
+  const [searchQuery, setSearchQuery] = (0, import_react6.useState)("");
+  const [searchResults, setSearchResults] = (0, import_react6.useState)([]);
+  const [isSearching, setIsSearching] = (0, import_react6.useState)(false);
+  const [isCreating, setIsCreating] = (0, import_react6.useState)(false);
+  const [newRecordData, setNewRecordData] = (0, import_react6.useState)({});
+  const searchRef = (0, import_react6.useRef)(null);
+  const searchTimerRef = (0, import_react6.useRef)(null);
+  const executeAction = context == null ? void 0 : context.executeAction;
+  const referencedTableId = column.referencedTableId;
+  const fetchedIdsRef = (0, import_react6.useRef)(/* @__PURE__ */ new Set());
+  (0, import_react6.useEffect)(() => {
+    if (!referencedTableId || !executeAction) {
+      setIsLoading(false);
+      return;
+    }
+    const recordIdsToFetch = entries.map((e) => e.recordId).filter((id) => !fetchedIdsRef.current.has(id));
+    if (recordIdsToFetch.length === 0 && targetSchema) return;
+    if (recordIdsToFetch.length > 0) {
+      recordIdsToFetch.forEach((id) => fetchedIdsRef.current.add(id));
+    }
+    setIsLoading(true);
+    executeAction("FETCH_SUB_TABLE_RECORDS", { referencedTableId, recordIds: recordIdsToFetch }).then((res) => {
+      const payload = (res == null ? void 0 : res.data) || res;
+      if (payload == null ? void 0 : payload.records) {
+        setLinkedRecords((prev) => {
+          const map = new Map(prev.map((r) => [r.id, r]));
+          payload.records.forEach((r) => map.set(r.id, r));
+          return Array.from(map.values());
+        });
+      }
+      if (payload == null ? void 0 : payload.schema) {
+        setTargetSchema(payload.schema);
+      }
+    }).catch(() => {
+      recordIdsToFetch.forEach((id) => fetchedIdsRef.current.delete(id));
+    }).finally(() => setIsLoading(false));
+  }, [referencedTableId, executeAction, entries, targetSchema]);
+  (0, import_react6.useEffect)(() => {
+    const handleClick = (e) => {
+      if (searchRef.current && !searchRef.current.contains(e.target)) {
+        setIsSearchOpen(false);
+      }
+    };
+    if (isSearchOpen) document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [isSearchOpen]);
+  const handleSearch = (0, import_react6.useCallback)((query) => {
+    setSearchQuery(query);
+    if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
+    if (!query.trim()) {
+      setSearchResults([]);
+      return;
+    }
+    searchTimerRef.current = setTimeout(async () => {
+      if (!executeAction || !referencedTableId) return;
+      setIsSearching(true);
+      try {
+        const excludeIds = entries.map((e) => e.recordId);
+        const res = await executeAction("SEARCH_SUB_TABLE_RECORDS", {
+          referencedTableId,
+          query: query.trim(),
+          excludeIds,
+          limit: 15
+        });
+        setSearchResults(Array.isArray(res) ? res : []);
+      } catch (e) {
+        setSearchResults([]);
+      } finally {
+        setIsSearching(false);
+      }
+    }, 300);
+  }, [executeAction, referencedTableId, entries]);
+  const targetColumns = ((targetSchema == null ? void 0 : targetSchema.columns) || []).filter(
+    (c) => {
+      if (c.name === "_id" || c.type === "SUB_TABLE") return false;
+      return true;
+    }
+  );
+  const [relationOptions, setRelationOptions] = (0, import_react6.useState)({});
+  (0, import_react6.useEffect)(() => {
+    if (!executeAction || targetColumns.length === 0) return;
+    const relationCols = targetColumns.filter((c) => {
+      var _a2;
+      return ((_a2 = c.type) == null ? void 0 : _a2.toUpperCase()) === "RELATION" && c.referencedTableId;
+    });
+    relationCols.forEach(async (col) => {
+      try {
+        const options = await executeAction("FETCH_RELATION", {
+          referencedTableId: col.referencedTableId,
+          displayField: col.displayField
+        });
+        if (options && Array.isArray(options)) {
+          setRelationOptions((prev) => __spreadProps(__spreadValues({}, prev), { [col.name]: options }));
+        }
+      } catch (err) {
+        console.warn(`[SubTableViewer] Could not fetch relation options for column ${col.name}:`, err);
+      }
+    });
+  }, [executeAction, targetColumns]);
+  const refetchRelation = (0, import_react6.useCallback)(async (colName) => {
+    var _a2;
+    const col = targetColumns.find((c) => c.name === colName);
+    if (!col || ((_a2 = col.type) == null ? void 0 : _a2.toUpperCase()) !== "RELATION" || !col.referencedTableId || !executeAction) return;
+    try {
+      const options = await executeAction("FETCH_RELATION", { referencedTableId: col.referencedTableId, displayField: col.displayField });
+      if (options && Array.isArray(options)) {
+        setRelationOptions((prev) => __spreadProps(__spreadValues({}, prev), { [col.name]: options }));
+      }
+    } catch (err) {
+      console.warn(`[SubTableViewer] Could not refetch relation options for column ${col.name}:`, err);
+    }
+  }, [targetColumns, executeAction]);
+  const updateParentLinkage = async (updated) => {
+    const isNewRow = rowId.startsWith("temp_");
+    if (context == null ? void 0 : context.updateQuietly) {
+      context.updateQuietly(rowId, column.name, updated);
+    } else {
+      onChange(updated);
+    }
+    if (executeAction && (context == null ? void 0 : context.parentTableId) && !isNewRow) {
+      try {
+        const payloadToSave = updated.map(({ recordId, isSelected }) => ({ recordId, isSelected }));
+        await executeAction("UPDATE_RECORD", {
+          tableId: context.parentTableId,
+          recordId: rowId,
+          data: { [column.name]: payloadToSave }
+        });
+        if (context == null ? void 0 : context.triggerSaveSuccess) {
+          context.triggerSaveSuccess();
+        }
+      } catch (err) {
+        console.error("Failed to auto-save parent linkage", err);
+      }
+    }
+  };
+  const handleLinkRecord = (record) => {
+    fetchedIdsRef.current.add(record.id);
+    const newEntry = { recordId: record.id, isSelected: true, _resolvedData: record.data };
+    const updated = [...entries, newEntry];
+    updateParentLinkage(updated);
+    setLinkedRecords((prev) => {
+      const exists = prev.find((r) => r.id === record.id);
+      if (exists) return prev;
+      return [...prev, record];
+    });
+    setSearchQuery("");
+    setSearchResults([]);
+    setIsSearchOpen(false);
+  };
+  const handleUnlinkRecord = (recordId) => {
+    const updated = entries.filter((e) => e.recordId !== recordId);
+    updateParentLinkage(updated);
+    setLinkedRecords((prev) => prev.filter((r) => r.id !== recordId));
+  };
+  const handleToggleSelected = (recordId) => {
+    const record = linkedRecords.find((r) => r.id === recordId);
+    const updated = entries.map(
+      (e) => e.recordId === recordId ? __spreadProps(__spreadValues({}, e), { isSelected: !e.isSelected, _resolvedData: (record == null ? void 0 : record.data) || e._resolvedData }) : e
+    );
+    updateParentLinkage(updated);
+  };
+  const handleRecordCellChange = async (recordId, colName, value2) => {
+    const updatedRecords = linkedRecords.map(
+      (r) => r.id === recordId ? __spreadProps(__spreadValues({}, r), { data: __spreadProps(__spreadValues({}, r.data), { [colName]: value2 }) }) : r
+    );
+    setLinkedRecords(updatedRecords);
+    const targetRecord = updatedRecords.find((r) => r.id === recordId);
+    const updatedEntries = entries.map(
+      (e) => e.recordId === recordId ? __spreadProps(__spreadValues({}, e), { _resolvedData: targetRecord == null ? void 0 : targetRecord.data }) : e
+    );
+    if (context == null ? void 0 : context.updateQuietly) {
+      context.updateQuietly(rowId, column.name, updatedEntries);
+    } else {
+      onChange(updatedEntries);
+    }
+    if (executeAction && referencedTableId && !recordId.startsWith("temp_")) {
+      try {
+        await executeAction("UPDATE_RECORD", {
+          tableId: referencedTableId,
+          recordId,
+          data: { [colName]: value2 }
+        });
+        if (context == null ? void 0 : context.triggerSaveSuccess) {
+          context.triggerSaveSuccess();
+        }
+      } catch (err) {
+        console.error("[SubTableViewer] Failed to auto-save linked record field", err);
+      }
+    }
+  };
+  const handleCreateRecord = async () => {
+    var _a2;
+    if (!executeAction || !referencedTableId) return;
+    for (const col of targetColumns) {
+      if (col.isRequired) {
+        const val = newRecordData[col.name];
+        if (val === void 0 || val === null || typeof val === "string" && val.trim() === "") {
+          addToast({
+            type: "error",
+            message: `Validation Error: Field '${col.name}' is required but was not provided.`
+          });
+          return;
+        }
+      }
+    }
+    try {
+      const res = await executeAction("CREATE_RECORD", {
+        tableId: referencedTableId,
+        records: [newRecordData]
+      });
+      if (res && res.success === false) {
+        throw new Error(res.error || "Action execution failed");
+      }
+      const created = Array.isArray(res) ? res[0] : ((_a2 = res == null ? void 0 : res.data) == null ? void 0 : _a2[0]) || res;
+      if (created) {
+        const newRecord = {
+          id: String(created.id || created._id),
+          data: created.data || newRecordData
+        };
+        handleLinkRecord(newRecord);
+        setIsCreating(false);
+        setNewRecordData({});
+      }
+    } catch (err) {
+      const msg = (err == null ? void 0 : err.message) || String(err);
+      addToast({
+        type: "error",
+        message: msg
+      });
+    }
+  };
+  const getDisplayLabel = (record) => {
+    const fields = column.subTableDisplayFields || [];
+    if (fields.length === 0) {
+      const firstField = Object.keys(record.data).find((k) => k !== "_id");
+      return firstField ? String(record.data[firstField] || "") : record.id;
+    }
+    return fields.map((f) => String(record.data[f] || "")).filter(Boolean).join("   ");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "p-3 animate-in fade-in slide-in-from-top-2 duration-200", dir: "rtl", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-4 mb-2.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-xs font-bold text-slate-600", children: (_a = targetSchema == null ? void 0 : targetSchema.name) != null ? _a : column.referencedTableName }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative", ref: searchRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => setIsSearchOpen((prev) => !prev),
+              className: "h-7 px-2.5 text-[11px] font-semibold bg-blue-50 hover:bg-blue-100 text-blue-700 border border-blue-200 rounded-md transition-colors cursor-pointer flex items-center gap-1",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
+                "\u05E7\u05D9\u05E9\u05D5\u05E8 \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA"
+              ]
+            }
+          ),
+          isSearchOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "absolute right-0 top-full mt-1 w-72 bg-white border border-slate-200 rounded-lg shadow-xl z-50 p-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "input",
+              {
+                type: "text",
+                value: searchQuery,
+                onChange: (e) => handleSearch(e.target.value),
+                placeholder: "\u05D7\u05E4\u05E9 \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA...",
+                className: "w-full h-8 px-2.5 text-xs border border-slate-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-400 mb-1.5",
+                autoFocus: true
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "max-h-48 overflow-y-auto", children: isSearching ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-4 h-4 border-2 border-blue-400 border-t-transparent rounded-full animate-spin" }) }) : searchResults.length > 0 ? searchResults.map((r) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleLinkRecord(r),
+                className: "w-full text-right px-2 py-1.5 text-xs hover:bg-blue-50 rounded cursor-pointer transition-colors",
+                children: getDisplayLabel(r)
+              },
+              r.id
+            )) : searchQuery.trim() ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs text-slate-400 text-center py-3", children: "\u05DC\u05D0 \u05E0\u05DE\u05E6\u05D0\u05D5 \u05EA\u05D5\u05E6\u05D0\u05D5\u05EA" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs text-slate-400 text-center py-3", children: "\u05D4\u05E7\u05DC\u05D3 \u05DC\u05D7\u05D9\u05E4\u05D5\u05E9..." }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setIsCreating(true);
+              const initialData = {};
+              targetColumns.forEach((c) => {
+                if (c.defaultValue !== void 0 && c.defaultValue !== null) {
+                  initialData[c.name] = c.type === "NUMBER" || c.type === "CURRENCY" ? parseFloat(c.defaultValue) : c.type === "BOOLEAN" ? c.defaultValue === "true" || c.defaultValue === true : c.defaultValue;
+                } else {
+                  if (c.type === "NUMBER" || c.type === "CURRENCY") initialData[c.name] = 0;
+                  else if (c.type === "BOOLEAN") initialData[c.name] = false;
+                  else initialData[c.name] = "";
+                }
+              });
+              setNewRecordData(initialData);
+            },
+            className: "h-7 px-2.5 text-[11px] font-semibold bg-emerald-50 hover:bg-emerald-100 text-emerald-700 border border-emerald-200 rounded-md transition-colors cursor-pointer flex items-center gap-1",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M12 4v16m8-8H4" }) }),
+              "\u05E8\u05E9\u05D5\u05DE\u05D4 \u05D7\u05D3\u05E9\u05D4"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-5 h-5 border-2 border-blue-400 border-t-transparent rounded-full animate-spin" }) }) : entries.length === 0 && !isCreating ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-center py-6 text-xs text-slate-400", children: "\u05D0\u05D9\u05DF \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05DE\u05E7\u05D5\u05E9\u05E8\u05D5\u05EA. \u05D4\u05E9\u05EA\u05DE\u05E9 \u05D1\u05D7\u05D9\u05E4\u05D5\u05E9 \u05DB\u05D3\u05D9 \u05DC\u05E7\u05E9\u05E8 \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05E7\u05D9\u05D9\u05DE\u05D5\u05EA, \u05D0\u05D5 \u05D4\u05D5\u05E1\u05E3 \u05E8\u05E9\u05D5\u05DE\u05D4 \u05D7\u05D3\u05E9\u05D4." }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "overflow-x-auto pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("table", { className: "w-full text-xs border-collapse", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { className: "bg-slate-100/80", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: "border border-slate-200 px-2 py-1.5 text-center w-10 font-semibold text-slate-500", children: "\u05E0\u05D1\u05D7\u05E8" }),
+        targetColumns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: "border border-slate-200 px-2 py-1.5 text-right font-semibold text-slate-600 whitespace-nowrap", children: col.name }, col.name)),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: "border border-slate-200 px-2 py-1.5 w-14" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tbody", { children: [
+        entries.map((entry) => {
+          const record = linkedRecords.find((r) => r.id === entry.recordId);
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { className: "hover:bg-blue-50/30 transition-colors", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "border border-slate-200 px-2 py-1 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "input",
+              {
+                type: "checkbox",
+                checked: entry.isSelected,
+                onChange: () => handleToggleSelected(entry.recordId),
+                className: "w-3.5 h-3.5 rounded border-slate-300 text-blue-600 cursor-pointer"
+              }
+            ) }),
+            targetColumns.map((col) => {
+              var _a2, _b;
+              const colType = ((_a2 = col.type) == null ? void 0 : _a2.toUpperCase()) || "DEFAULT";
+              const InputComponent = FORM_INPUTS[colType] || FORM_INPUTS.DEFAULT;
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "border border-slate-200 p-0 relative h-8", children: record ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                InputComponent,
+                {
+                  value: (_b = record.data[col.name]) != null ? _b : colType === "BOOLEAN" ? false : "",
+                  column: col,
+                  rowId: record.id,
+                  onChange: (v) => handleRecordCellChange(record.id, col.name, v),
+                  context: __spreadProps(__spreadValues({}, context), {
+                    tableName: (targetSchema == null ? void 0 : targetSchema.name) || (targetSchema == null ? void 0 : targetSchema.tableName) || (targetSchema == null ? void 0 : targetSchema.title) || (targetSchema == null ? void 0 : targetSchema.id) || "Table",
+                    relationOptions,
+                    updateRelationOptions: (name, opts) => setRelationOptions((prev) => __spreadProps(__spreadValues({}, prev), { [name]: opts })),
+                    refetchRelation,
+                    parentRecord: { tableId: (context == null ? void 0 : context.parentTableId) || (context == null ? void 0 : context.tableId), data: context == null ? void 0 : context.rowData },
+                    rowData: record.data,
+                    tableId: targetSchema == null ? void 0 : targetSchema.id,
+                    updateQuietly: (rid, colName, val) => handleRecordCellChange(rid, colName, val)
+                  })
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-slate-300 italic px-2", children: "\u05D8\u05D5\u05E2\u05DF..." }) }, col.name);
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "border border-slate-200 px-1 py-1 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleUnlinkRecord(entry.recordId),
+                className: "text-slate-400 hover:text-rose-500 p-0.5 rounded transition-colors cursor-pointer inline-flex items-center justify-center w-full",
+                title: "\u05D4\u05E1\u05E8 \u05E7\u05D9\u05E9\u05D5\u05E8",
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            ) })
+          ] }, entry.recordId);
+        }),
+        isCreating && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { className: "bg-emerald-50/40", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "border border-emerald-200 px-2 py-1 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-emerald-500 font-bold text-[10px]", children: "\u05D7\u05D3\u05E9" }) }),
+          targetColumns.map((col) => {
+            var _a2, _b;
+            const colType = ((_a2 = col.type) == null ? void 0 : _a2.toUpperCase()) || "DEFAULT";
+            const InputComponent = FORM_INPUTS[colType] || FORM_INPUTS.DEFAULT;
+            return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "border border-emerald-200 p-0 relative h-8", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              InputComponent,
+              {
+                value: (_b = newRecordData[col.name]) != null ? _b : colType === "BOOLEAN" ? false : "",
+                column: col,
+                rowId: "new_record",
+                onChange: (v) => setNewRecordData((prev) => __spreadProps(__spreadValues({}, prev), { [col.name]: v })),
+                context: __spreadProps(__spreadValues({}, context), {
+                  tableName: (targetSchema == null ? void 0 : targetSchema.name) || (targetSchema == null ? void 0 : targetSchema.tableName) || (targetSchema == null ? void 0 : targetSchema.title) || (targetSchema == null ? void 0 : targetSchema.id) || "Table",
+                  relationOptions,
+                  refetchRelation
+                })
+              }
+            ) }, `new_${col.name}`);
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "border border-emerald-200 px-1 py-1 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: handleCreateRecord,
+                className: "p-1 text-emerald-600 hover:bg-emerald-100 rounded transition-colors",
+                title: "\u05E9\u05DE\u05D5\u05E8",
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M5 13l4 4L19 7" }) })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setIsCreating(false);
+                },
+                className: "p-1 text-rose-500 hover:bg-rose-100 rounded transition-colors",
+                title: "\u05D1\u05D9\u05D8\u05D5\u05DC",
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            )
+          ] }) })
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+
 // src/components/TableBlock/TableBlockClient.tsx
 var import_lucide_react4 = require("lucide-react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function TableBlockClient({
   data: initialRecords,
   settings: schema,
@@ -923,14 +1626,14 @@ function TableBlockClient({
   "data-testid": dataTestId
 }) {
   const { showError, addToast } = useToast();
-  const [columnWidths, setColumnWidths] = (0, import_react6.useState)({});
-  const [isMounted, setIsMounted] = (0, import_react6.useState)(false);
+  const [columnWidths, setColumnWidths] = (0, import_react7.useState)({});
+  const [isMounted, setIsMounted] = (0, import_react7.useState)(false);
   const tableKey = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id) || (schema == null ? void 0 : schema.name) || "default";
-  const [page, setPage] = (0, import_react6.useState)(1);
-  const [limit, setLimit] = (0, import_react6.useState)(50);
-  const [totalRecords, setTotalRecords] = (0, import_react6.useState)(0);
-  const [totalPages, setTotalPages] = (0, import_react6.useState)(1);
-  (0, import_react6.useEffect)(() => {
+  const [page, setPage] = (0, import_react7.useState)(1);
+  const [limit, setLimit] = (0, import_react7.useState)(50);
+  const [totalRecords, setTotalRecords] = (0, import_react7.useState)(0);
+  const [totalPages, setTotalPages] = (0, import_react7.useState)(1);
+  (0, import_react7.useEffect)(() => {
     if (typeof window !== "undefined") {
       const savedWidths = localStorage.getItem(`table_widths_${tableKey}`);
       if (savedWidths) {
@@ -953,7 +1656,7 @@ function TableBlockClient({
     }
     setIsMounted(true);
   }, [tableKey]);
-  const [showSummary, setShowSummary] = (0, import_react6.useState)(false);
+  const [showSummary, setShowSummary] = (0, import_react7.useState)(false);
   const toggleSummary = () => {
     setShowSummary((prev) => {
       const next = !prev;
@@ -962,8 +1665,8 @@ function TableBlockClient({
       return next;
     });
   };
-  const [resizingCol, setResizingCol] = (0, import_react6.useState)(null);
-  (0, import_react6.useEffect)(() => {
+  const [resizingCol, setResizingCol] = (0, import_react7.useState)(null);
+  (0, import_react7.useEffect)(() => {
     if (!resizingCol) return;
     const handleMouseMove = (e) => {
       const diffX = resizingCol.startX - e.clientX;
@@ -1010,7 +1713,7 @@ function TableBlockClient({
       return __spreadProps(__spreadValues({}, row), { id: String(row.id || ""), data: rowData });
     });
   };
-  const mergeColumnDefs = (0, import_react6.useCallback)((existingCols, incomingCols) => {
+  const mergeColumnDefs = (0, import_react7.useCallback)((existingCols, incomingCols) => {
     if (!incomingCols || incomingCols.length === 0) return existingCols || [];
     if (!existingCols || existingCols.length === 0) return incomingCols;
     const existingMap = new Map(existingCols.map((c) => [c.name, c]));
@@ -1030,18 +1733,18 @@ function TableBlockClient({
       return ((_a = a.order) != null ? _a : 0) - ((_b = b.order) != null ? _b : 0);
     });
   }, []);
-  const [localColumns, setLocalColumns] = (0, import_react6.useState)(() => (schema == null ? void 0 : schema.columns) || []);
-  (0, import_react6.useEffect)(() => {
+  const [localColumns, setLocalColumns] = (0, import_react7.useState)(() => (schema == null ? void 0 : schema.columns) || []);
+  (0, import_react7.useEffect)(() => {
     if ((schema == null ? void 0 : schema.columns) && schema.columns.length > 0) {
       setLocalColumns((prev) => mergeColumnDefs(prev, schema.columns));
     }
   }, [schema == null ? void 0 : schema.columns, mergeColumnDefs]);
-  const [dirty, setDirty] = (0, import_react6.useState)({ added: [], modified: {}, deleted: [] });
-  const dirtyRef = (0, import_react6.useRef)(dirty);
-  (0, import_react6.useEffect)(() => {
+  const [dirty, setDirty] = (0, import_react7.useState)({ added: [], modified: {}, deleted: [] });
+  const dirtyRef = (0, import_react7.useRef)(dirty);
+  (0, import_react7.useEffect)(() => {
     dirtyRef.current = dirty;
   }, [dirty]);
-  const mergeWithDirty = (0, import_react6.useCallback)((baseRecords) => {
+  const mergeWithDirty = (0, import_react7.useCallback)((baseRecords) => {
     const { added, modified, deleted } = dirtyRef.current;
     const nonDeleted = (baseRecords || []).filter((r) => !deleted.includes(r.id));
     const modifiedRecords = nonDeleted.map((r) => {
@@ -1054,8 +1757,8 @@ function TableBlockClient({
     const uniqueAdded = added.filter((r) => !baseIds.has(r.id));
     return [...uniqueAdded, ...modifiedRecords];
   }, []);
-  const [data, setData] = (0, import_react6.useState)(() => normalizeRecords(initialRecords));
-  (0, import_react6.useEffect)(() => {
+  const [data, setData] = (0, import_react7.useState)(() => normalizeRecords(initialRecords));
+  (0, import_react7.useEffect)(() => {
     if (initialRecords) {
       setData(mergeWithDirty(normalizeRecords(initialRecords)));
     }
@@ -1070,19 +1773,19 @@ function TableBlockClient({
     }
     return false;
   };
-  const [baseRecordsMap, setBaseRecordsMap] = (0, import_react6.useState)(() => {
+  const [baseRecordsMap, setBaseRecordsMap] = (0, import_react7.useState)(() => {
     const map = /* @__PURE__ */ new Map();
     (normalizeRecords(initialRecords) || []).forEach((r) => map.set(r.id, __spreadValues({}, r.data)));
     return map;
   });
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (initialRecords && initialRecords.length > 0) {
       const map = /* @__PURE__ */ new Map();
       (normalizeRecords(initialRecords) || []).forEach((r) => map.set(r.id, __spreadValues({}, r.data)));
       setBaseRecordsMap(map);
     }
   }, [initialRecords]);
-  const refetchTableData = (0, import_react6.useCallback)((targetPage) => {
+  const refetchTableData = (0, import_react7.useCallback)((targetPage) => {
     const tableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
     if (!tableId || !executeAction) return Promise.resolve();
     const activePage = targetPage !== void 0 ? targetPage : page;
@@ -1116,8 +1819,8 @@ function TableBlockClient({
     }).catch((err) => {
       console.error("[TableBlock] Failed to auto-fetch table data:", err);
     });
-  }, [schema == null ? void 0 : schema.tableMetaId, schema == null ? void 0 : schema.tableId, schema == null ? void 0 : schema.id, page, limit, executeAction, mergeWithDirty, mergeColumnDefs]);
-  (0, import_react6.useEffect)(() => {
+  }, [schema == null ? void 0 : schema.tableMetaId, schema == null ? void 0 : schema.tableId, schema == null ? void 0 : schema.id, page, limit, executeAction, mergeColumnDefs]);
+  (0, import_react7.useEffect)(() => {
     refetchTableData();
   }, [refetchTableData]);
   const handleLimitChange = (newLimit) => {
@@ -1133,19 +1836,20 @@ function TableBlockClient({
   const handleNextPage = () => {
     setPage((prev) => Math.min(totalPages, prev + 1));
   };
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (error) {
       showError(error, "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E8\u05DB\u05D9\u05D1");
     }
   }, [error, showError]);
-  const [searchQuery, setSearchQuery] = (0, import_react6.useState)("");
-  const [selectedIds, setSelectedIds] = (0, import_react6.useState)(/* @__PURE__ */ new Set());
-  const [pendingDeletions, setPendingDeletions] = (0, import_react6.useState)([]);
-  const [isSaving, setIsSaving] = (0, import_react6.useState)(false);
-  const [isSaveSuccess, setIsSaveSuccess] = (0, import_react6.useState)(false);
-  const [relationOptions, setRelationOptions] = (0, import_react6.useState)({});
-  const schemaColsString = (0, import_react6.useMemo)(() => JSON.stringify(localColumns || []), [localColumns]);
-  const refetchRelation = (0, import_react6.useCallback)(async (colName) => {
+  const [searchQuery, setSearchQuery] = (0, import_react7.useState)("");
+  const [selectedIds, setSelectedIds] = (0, import_react7.useState)(/* @__PURE__ */ new Set());
+  const [pendingDeletions, setPendingDeletions] = (0, import_react7.useState)([]);
+  const [isSaving, setIsSaving] = (0, import_react7.useState)(false);
+  const [isSaveSuccess, setIsSaveSuccess] = (0, import_react7.useState)(false);
+  const [relationOptions, setRelationOptions] = (0, import_react7.useState)({});
+  const [expandedRowIds, setExpandedRowIds] = (0, import_react7.useState)(/* @__PURE__ */ new Set());
+  const schemaColsString = (0, import_react7.useMemo)(() => JSON.stringify(localColumns || []), [localColumns]);
+  const refetchRelation = (0, import_react7.useCallback)(async (colName) => {
     var _a;
     let parsedCols = [];
     try {
@@ -1165,7 +1869,7 @@ function TableBlockClient({
       console.warn(`[TableBlock] Could not fetch relation options for column ${colName}:`, err);
     }
   }, [schemaColsString, executeAction]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     let parsedCols = [];
     try {
       parsedCols = JSON.parse(schemaColsString);
@@ -1179,7 +1883,7 @@ function TableBlockClient({
       refetchRelation(col.name);
     });
   }, [schemaColsString, refetchRelation]);
-  const normalizedColumns = (0, import_react6.useMemo)(() => {
+  const normalizedColumns = (0, import_react7.useMemo)(() => {
     return (localColumns || []).map((col, idx) => {
       const isRequired = col.isRequired === true || String(col.isRequired) === "true";
       const isUnique = col.isUnique === true || String(col.isUnique) === "true";
@@ -1193,17 +1897,17 @@ function TableBlockClient({
       return ((_a = a.order) != null ? _a : 0) - ((_b = b.order) != null ? _b : 0);
     });
   }, [localColumns]);
-  const filteredColumns = (0, import_react6.useMemo)(() => {
+  const filteredColumns = (0, import_react7.useMemo)(() => {
     const systemFields = ["_id", "createdAt", "updatedAt", "orgId", "tableId"];
     return normalizedColumns.filter((col) => !systemFields.includes(col.name) && !col.isHidden);
   }, [normalizedColumns]);
-  const customizableColumns = (0, import_react6.useMemo)(() => {
+  const customizableColumns = (0, import_react7.useMemo)(() => {
     const systemFields = ["_id", "createdAt", "updatedAt", "orgId", "tableId"];
     return normalizedColumns.filter((col) => !systemFields.includes(col.name));
   }, [normalizedColumns]);
-  const [isColumnsDropdownOpen, setIsColumnsDropdownOpen] = (0, import_react6.useState)(false);
-  const dropdownRef = (0, import_react6.useRef)(null);
-  (0, import_react6.useEffect)(() => {
+  const [isColumnsDropdownOpen, setIsColumnsDropdownOpen] = (0, import_react7.useState)(false);
+  const dropdownRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsColumnsDropdownOpen(false);
@@ -1281,8 +1985,8 @@ function TableBlockClient({
       }
     }
   };
-  const [draggedColName, setDraggedColName] = (0, import_react6.useState)(null);
-  const [dragOverColName, setDragOverColName] = (0, import_react6.useState)(null);
+  const [draggedColName, setDraggedColName] = (0, import_react7.useState)(null);
+  const [dragOverColName, setDragOverColName] = (0, import_react7.useState)(null);
   const handleColumnReorder = async (draggedName, dropTargetName) => {
     var _a;
     if (draggedName === dropTargetName) return;
@@ -1324,6 +2028,10 @@ function TableBlockClient({
       var _a;
       const typeUpper = (_a = col.type) == null ? void 0 : _a.toUpperCase();
       let initialValue = col.defaultValue;
+      if (typeUpper === "SUB_TABLE") {
+        defaultData[col.name] = [];
+        return;
+      }
       if (initialValue !== void 0 && initialValue !== null && initialValue !== "") {
         if (typeUpper === "CURRENCY" || typeUpper === "NUMBER") {
           initialValue = parseFloat(initialValue);
@@ -1407,6 +2115,36 @@ function TableBlockClient({
       });
     }
   };
+  const triggerSaveSuccess = (0, import_react7.useCallback)(() => {
+    setIsSaveSuccess(true);
+    setTimeout(() => {
+      setIsSaveSuccess(false);
+    }, 2500);
+  }, []);
+  const handleQuietCellChange = (0, import_react7.useCallback)((rowId, colName, value) => {
+    setData((prev) => prev.map(
+      (row) => row.id === rowId ? __spreadProps(__spreadValues({}, row), { data: __spreadProps(__spreadValues({}, row.data), { [colName]: value }) }) : row
+    ));
+    if (rowId.startsWith("temp_")) {
+      setDirty((prev) => {
+        if (!prev.added.some((r) => r.id === rowId)) return prev;
+        return __spreadProps(__spreadValues({}, prev), {
+          added: prev.added.map(
+            (r) => r.id === rowId ? __spreadProps(__spreadValues({}, r), { data: __spreadProps(__spreadValues({}, r.data), { [colName]: value }) }) : r
+          )
+        });
+      });
+    } else {
+      setBaseRecordsMap((prev) => {
+        const next = new Map(prev);
+        const rowData = next.get(rowId);
+        if (rowData) {
+          next.set(rowId, __spreadProps(__spreadValues({}, rowData), { [colName]: value }));
+        }
+        return next;
+      });
+    }
+  }, []);
   const toggleSelectAll = (checked) => {
     const nextSelected = checked ? new Set(filteredData.map((r) => r.id)) : /* @__PURE__ */ new Set();
     setSelectedIds(nextSelected);
@@ -1436,9 +2174,15 @@ function TableBlockClient({
         const row = data.find((r) => r.id === id);
         if (row) {
           driveCols.forEach((col) => {
-            const fileObj = row.data[col.name];
-            if (fileObj && fileObj.fileId) {
-              filesToDelete.push(fileObj.fileId);
+            const fileVal = row.data[col.name];
+            if (Array.isArray(fileVal)) {
+              fileVal.forEach((fileObj) => {
+                if (fileObj && fileObj.fileId) {
+                  filesToDelete.push(fileObj.fileId);
+                }
+              });
+            } else if (fileVal && fileVal.fileId) {
+              filesToDelete.push(fileVal.fileId);
             }
           });
         }
@@ -1465,7 +2209,7 @@ function TableBlockClient({
   const formatPayload = (payload) => {
     const formatted = {};
     (localColumns || []).forEach((col) => {
-      var _a;
+      var _a, _b;
       if (["_id", "id", "createdAt", "updatedAt", "orgId", "tableId", "isSelected"].includes(col.name)) return;
       let val = payload[col.name];
       if (val !== void 0) {
@@ -1475,6 +2219,11 @@ function TableBlockClient({
           if (((_a = col.type) == null ? void 0 : _a.toUpperCase()) === "NUMBER") {
             val = val === "" ? 0 : Number(val);
             if (isNaN(val)) val = 0;
+          } else if (((_b = col.type) == null ? void 0 : _b.toUpperCase()) === "SUB_TABLE" && Array.isArray(val)) {
+            val = val.map((item) => {
+              const _a2 = item, { _resolvedData } = _a2, rest = __objRest(_a2, ["_resolvedData"]);
+              return rest;
+            });
           }
           formatted[col.name] = val;
         }
@@ -1607,7 +2356,7 @@ function TableBlockClient({
       setIsSaving(false);
     }
   };
-  const filteredData = (0, import_react6.useMemo)(() => {
+  const filteredData = (0, import_react7.useMemo)(() => {
     if (!searchQuery) return data;
     const lowerQuery = searchQuery.toLowerCase();
     return data.filter(
@@ -1618,7 +2367,7 @@ function TableBlockClient({
   }, [data, searchQuery]);
   const isUpdatingActive = Boolean(isUpdating || isSaving);
   const errorMessage = error ? typeof error === "string" ? error : error.message || String(error) : null;
-  const columnTotals = (0, import_react6.useMemo)(() => {
+  const columnTotals = (0, import_react7.useMemo)(() => {
     const totals = {};
     if (!showSummary) return totals;
     filteredColumns.forEach((col) => {
@@ -1636,7 +2385,7 @@ function TableBlockClient({
     });
     return totals;
   }, [filteredData, filteredColumns, showSummary]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       id: componentId,
@@ -1644,34 +2393,34 @@ function TableBlockClient({
       className: `flex flex-col w-full bg-white border border-slate-200 rounded-xl shadow-xs min-h-[350px] overflow-hidden ${className}`,
       dir: "rtl",
       children: [
-        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "p-3 bg-rose-50 border-b border-rose-200 text-rose-700 text-sm flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-4 h-4 text-rose-500 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: errorMessage })
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "p-3 bg-rose-50 border-b border-rose-200 text-rose-700 text-sm flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "w-4 h-4 text-rose-500 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: errorMessage })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3 p-3.5 sm:p-4 bg-slate-50 border-b border-slate-200", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-wrap items-center gap-2.5", children: [
-            ((schema == null ? void 0 : schema.title) || (schema == null ? void 0 : schema.name)) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "font-bold text-slate-800 text-sm sm:text-base border-l border-slate-300 pl-3 ml-1", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: schema.title || schema.name }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3 p-3.5 sm:p-4 bg-slate-50 border-b border-slate-200", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap items-center gap-2.5", children: [
+            ((schema == null ? void 0 : schema.title) || (schema == null ? void 0 : schema.name)) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "font-bold text-slate-800 text-sm sm:text-base border-l border-slate-300 pl-3 ml-1", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: schema.title || schema.name }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "button",
               {
                 onClick: handleAddRow,
                 disabled: isLoading || isUpdatingActive,
                 className: "w-9 h-9 bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white rounded-lg shadow-xs flex items-center justify-center transition-all disabled:opacity-40 disabled:pointer-events-none cursor-pointer",
                 title: "\u05D4\u05D5\u05E1\u05E3 \u05E9\u05D5\u05E8\u05D4 \u05D7\u05D3\u05E9\u05D4",
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-4.5 h-4.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M12 4v16m8-8H4" }) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "w-4.5 h-4.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M12 4v16m8-8H4" }) })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "button",
               {
                 onClick: handleDuplicateRow,
                 disabled: isLoading || isUpdatingActive || selectedIds.size !== 1,
                 className: "w-9 h-9 bg-blue-50 hover:bg-blue-100 border border-blue-200 text-blue-700 rounded-lg shadow-2xs flex items-center justify-center transition-all disabled:opacity-40 disabled:pointer-events-none cursor-pointer",
                 title: "\u05E9\u05DB\u05E4\u05DC \u05E9\u05D5\u05E8\u05D4 \u05E0\u05D1\u05D7\u05E8\u05EA",
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.Copy, { className: "w-4 h-4 text-blue-600 shrink-0" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.Copy, { className: "w-4 h-4 text-blue-600 shrink-0" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               "button",
               {
                 onClick: handleDeleteSelected,
@@ -1679,12 +2428,12 @@ function TableBlockClient({
                 className: "w-9 h-9 bg-rose-50 hover:bg-rose-100 border border-rose-200 text-rose-700 rounded-lg shadow-2xs flex items-center justify-center relative transition-all disabled:opacity-40 disabled:pointer-events-none cursor-pointer",
                 title: "\u05DE\u05D7\u05E7 \u05E9\u05D5\u05E8\u05D5\u05EA \u05E0\u05D1\u05D7\u05E8\u05D5\u05EA",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-4.5 h-4.5 text-rose-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
-                  selectedIds.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "absolute -top-1.5 -right-1.5 bg-rose-600 text-white min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-bold flex items-center justify-center shadow-xs", children: selectedIds.size })
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "w-4.5 h-4.5 text-rose-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
+                  selectedIds.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "absolute -top-1.5 -right-1.5 bg-rose-600 text-white min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-bold flex items-center justify-center shadow-xs", children: selectedIds.size })
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               "button",
               {
                 onClick: toggleSummary,
@@ -1692,13 +2441,13 @@ function TableBlockClient({
                 className: `h-9 px-3 border font-semibold rounded-lg shadow-2xs flex items-center gap-1.5 text-xs transition-all disabled:opacity-40 disabled:pointer-events-none cursor-pointer ${showSummary ? "bg-indigo-50 border-indigo-200 text-indigo-700 hover:bg-indigo-100" : "bg-white border-slate-300 text-slate-700 hover:bg-slate-100"}`,
                 title: "\u05D4\u05E6\u05D2/\u05D4\u05E1\u05EA\u05E8 \u05E9\u05D5\u05E8\u05EA \u05E1\u05D9\u05DB\u05D5\u05DD",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-4 h-4 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "hidden sm:inline", children: "\u05E1\u05DB\u05D9\u05DE\u05D4" })
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "w-4 h-4 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hidden sm:inline", children: "\u05E1\u05DB\u05D9\u05DE\u05D4" })
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative", ref: dropdownRef, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative", ref: dropdownRef, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                 "button",
                 {
                   onClick: () => setIsColumnsDropdownOpen((prev) => !prev),
@@ -1706,16 +2455,16 @@ function TableBlockClient({
                   className: "h-9 px-3 bg-white hover:bg-slate-100 border border-slate-300 text-slate-700 font-semibold rounded-lg shadow-2xs flex items-center gap-1.5 text-xs transition-all disabled:opacity-40 disabled:pointer-events-none cursor-pointer",
                   title: "\u05D4\u05E6\u05D2/\u05D4\u05E1\u05EA\u05E8 \u05E2\u05DE\u05D5\u05D3\u05D5\u05EA",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-4 h-4 text-slate-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: `w-3.5 h-3.5 text-slate-500 transition-transform ${isColumnsDropdownOpen ? "rotate-180" : ""}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "w-4 h-4 text-slate-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: `w-3.5 h-3.5 text-slate-500 transition-transform ${isColumnsDropdownOpen ? "rotate-180" : ""}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })
                   ]
                 }
               ),
-              isColumnsDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "absolute right-0 top-full mt-1.5 w-56 bg-white border border-slate-200 rounded-xl shadow-xl z-50 p-1.5 dir-rtl animate-in fade-in slide-in-from-top-2 duration-150", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "px-2 py-1.5 text-xs font-bold text-slate-500 border-b border-slate-100 mb-1 flex items-center justify-between", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "\u05D4\u05E6\u05D2\u05EA \u05E2\u05DE\u05D5\u05D3\u05D5\u05EA" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-[10px] font-normal text-slate-400", children: [
+              isColumnsDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "absolute right-0 top-full mt-1.5 w-56 bg-white border border-slate-200 rounded-xl shadow-xl z-50 p-1.5 dir-rtl animate-in fade-in slide-in-from-top-2 duration-150", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "px-2 py-1.5 text-xs font-bold text-slate-500 border-b border-slate-100 mb-1 flex items-center justify-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "\u05D4\u05E6\u05D2\u05EA \u05E2\u05DE\u05D5\u05D3\u05D5\u05EA" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "text-[10px] font-normal text-slate-400", children: [
                       "(",
                       customizableColumns.filter((c) => !c.isHidden).length,
                       "/",
@@ -1723,7 +2472,7 @@ function TableBlockClient({
                       ")"
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     "button",
                     {
                       type: "button",
@@ -1733,7 +2482,7 @@ function TableBlockClient({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "max-h-60 overflow-y-auto space-y-0.5", children: customizableColumns.map((col) => {
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "max-h-60 overflow-y-auto space-y-0.5", children: customizableColumns.map((col) => {
                   const isRequired = col.isRequired === true || String(col.isRequired) === "true";
                   const isUnique = col.isUnique === true || String(col.isUnique) === "true";
                   const isProtected = isRequired || isUnique;
@@ -1747,7 +2496,7 @@ function TableBlockClient({
                     protectedExplanation = "\u05E9\u05D3\u05D4 \u05D9\u05D9\u05D7\u05D5\u05D3\u05D9 - \u05DC\u05D0 \u05E0\u05D9\u05EA\u05DF \u05DC\u05D4\u05D5\u05E8\u05D9\u05D3 \u05E2\u05DE\u05D5\u05D3\u05D4 \u05D6\u05D5 \u05DE\u05D4\u05EA\u05E6\u05D5\u05D2\u05D4";
                   }
                   const badgeLabel = isRequired && isUnique ? "\u05D7\u05D5\u05D1\u05D4 + \u05D9\u05D9\u05D7\u05D5\u05D3\u05D9" : isRequired ? "\u05E9\u05D3\u05D4 \u05D7\u05D5\u05D1\u05D4" : "\u05E9\u05D3\u05D4 \u05D9\u05D9\u05D7\u05D5\u05D3\u05D9";
-                  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                     "div",
                     {
                       onClick: () => {
@@ -1758,8 +2507,8 @@ function TableBlockClient({
                       title: isProtected ? protectedExplanation : void 0,
                       className: `group flex items-center justify-between px-2.5 py-1.5 rounded-lg text-xs transition-colors select-none ${isProtected ? "opacity-75 bg-slate-50 border border-slate-100/70 cursor-not-allowed" : "hover:bg-slate-100 active:bg-slate-200 cursor-pointer"}`,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                             "input",
                             {
                               type: "checkbox",
@@ -1770,16 +2519,16 @@ function TableBlockClient({
                               className: "w-3.5 h-3.5 rounded border-slate-300 text-brand focus:ring-brand/20 cursor-pointer disabled:cursor-not-allowed disabled:opacity-60"
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `font-medium truncate ${isProtected ? "text-slate-500" : "text-slate-700"}`, children: col.name })
+                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `font-medium truncate ${isProtected ? "text-slate-500" : "text-slate-700"}`, children: col.name })
                         ] }),
-                        isProtected && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                        isProtected && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                           "div",
                           {
                             className: "flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-semibold bg-amber-50 text-amber-800 border border-amber-200/80 cursor-help",
                             title: protectedExplanation,
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-3 h-3 text-amber-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "2.2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" }) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: badgeLabel })
+                              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "w-3 h-3 text-amber-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "2.2", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" }) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: badgeLabel })
                             ]
                           }
                         )
@@ -1790,9 +2539,9 @@ function TableBlockClient({
                 }) })
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "h-5 w-px bg-slate-300 mx-1 hidden sm:block" }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative flex-1 sm:w-64 max-w-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "h-5 w-px bg-slate-300 mx-1 hidden sm:block" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative flex-1 sm:w-64 max-w-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "input",
                 {
                   placeholder: "\u05D7\u05D9\u05E4\u05D5\u05E9 \u05D1\u05E8\u05E9\u05D5\u05DE\u05D5\u05EA...",
@@ -1802,45 +2551,45 @@ function TableBlockClient({
                   className: "w-full h-9 px-3 pr-9 text-xs border border-slate-300 rounded-lg bg-white shadow-2xs focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 text-slate-800 disabled:opacity-50"
                 }
               ),
-              searchQuery ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              searchQuery ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "button",
                 {
                   type: "button",
                   onClick: () => setSearchQuery(""),
                   className: "absolute right-2.5 top-2.5 text-slate-400 hover:text-slate-600 transition-colors p-0.5 rounded-full hover:bg-slate-100 cursor-pointer",
                   title: "Clear search",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.X, { className: "w-3.5 h-3.5" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react4.X, { className: "w-3.5 h-3.5" })
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-4 h-4 text-slate-400 absolute right-2.5 top-2.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) })
+              ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "w-4 h-4 text-slate-400 absolute right-2.5 top-2.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-3", children: [
-            isUpdatingActive ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-xs text-blue-600 font-semibold flex items-center gap-1.5 bg-blue-50 border border-blue-200 px-3 py-1.5 rounded-lg animate-pulse", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-2 h-2 rounded-full bg-blue-500 inline-block" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-3", children: [
+            isUpdatingActive ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "text-xs text-blue-600 font-semibold flex items-center gap-1.5 bg-blue-50 border border-blue-200 px-3 py-1.5 rounded-lg animate-pulse", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-2 h-2 rounded-full bg-blue-500 inline-block" }),
               "\u05DE\u05E2\u05D3\u05DB\u05DF..."
-            ] }) : isSaveSuccess ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-xs text-emerald-700 font-semibold flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 px-3 py-1.5 rounded-lg animate-in fade-in duration-200", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-4 h-4 text-emerald-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M5 13l4 4L19 7" }) }),
+            ] }) : isSaveSuccess ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "text-xs text-emerald-700 font-semibold flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 px-3 py-1.5 rounded-lg animate-in fade-in duration-200", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "w-4 h-4 text-emerald-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M5 13l4 4L19 7" }) }),
               "\u05E2\u05D5\u05D3\u05DB\u05DF \u05D1\u05D4\u05E6\u05DC\u05D7\u05D4"
-            ] }) : hasChanges ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-xs font-semibold text-amber-700 animate-in fade-in", children: "\u05E9\u05D9\u05E0\u05D5\u05D9\u05D9\u05DD \u05E9\u05DC\u05D0 \u05E0\u05E9\u05DE\u05E8\u05D5" }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            ] }) : hasChanges ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-xs font-semibold text-amber-700 animate-in fade-in", children: "\u05E9\u05D9\u05E0\u05D5\u05D9\u05D9\u05DD \u05E9\u05DC\u05D0 \u05E0\u05E9\u05DE\u05E8\u05D5" }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "button",
               {
                 onClick: handleSave,
                 disabled: isUpdatingActive || isLoading || !hasChanges,
                 className: `h-9 px-4 text-xs font-bold rounded-lg shadow-2xs transition-all flex items-center justify-center cursor-pointer ${hasChanges && !isUpdatingActive && !isLoading ? "bg-brand hover:bg-brand-hover active:bg-[#00897b] text-white shadow-teal-500/20" : "opacity-50 grayscale bg-slate-200 text-slate-400 cursor-not-allowed"}`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: isUpdatingActive ? "\u05E9\u05D5\u05DE\u05E8..." : "\u05E9\u05DE\u05D9\u05E8\u05EA \u05E9\u05D9\u05E0\u05D5\u05D9\u05D9\u05DD" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: isUpdatingActive ? "\u05E9\u05D5\u05DE\u05E8..." : "\u05E9\u05DE\u05D9\u05E8\u05EA \u05E9\u05D9\u05E0\u05D5\u05D9\u05D9\u05DD" })
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `overflow-x-auto relative min-h-[260px] flex-1 transition-opacity duration-200 ${isMounted ? "opacity-100" : "opacity-0"}`, children: [
-          isLoading && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "absolute inset-0 bg-white/80 backdrop-blur-xs z-20 flex flex-col items-center justify-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-6 h-6 border-2 border-brand border-t-transparent rounded-full animate-spin" }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-sm font-medium text-slate-600", children: "\u05D8\u05D5\u05E2\u05DF \u05E0\u05EA\u05D5\u05E0\u05D9\u05DD..." })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `overflow-x-auto relative min-h-[260px] flex-1 transition-opacity duration-200 ${isMounted ? "opacity-100" : "opacity-0"}`, children: [
+          isLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "absolute inset-0 bg-white/80 backdrop-blur-xs z-20 flex flex-col items-center justify-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "w-6 h-6 border-2 border-brand border-t-transparent rounded-full animate-spin" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-sm font-medium text-slate-600", children: "\u05D8\u05D5\u05E2\u05DF \u05E0\u05EA\u05D5\u05E0\u05D9\u05DD..." })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("table", { className: "w-full text-sm text-right border-collapse table-auto", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { className: "bg-slate-100/80 text-slate-700 sticky top-0 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: "border-b border-l border-slate-200 p-2.5 w-10 text-center shrink-0", style: { width: 50, minWidth: 50, maxWidth: 50 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("table", { className: "w-full text-sm text-right border-collapse table-auto", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("thead", { className: "bg-slate-100/80 text-slate-700 sticky top-0 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("tr", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("th", { className: "border-b border-l border-slate-200 p-2.5 w-10 text-center shrink-0", style: { width: 50, minWidth: 50, maxWidth: 50 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "input",
                 {
                   type: "checkbox",
@@ -1854,7 +2603,7 @@ function TableBlockClient({
                 const isDragging = draggedColName === col.name;
                 const isDragOver = dragOverColName === col.name;
                 const currentWidth = columnWidths[col.name] || 200;
-                return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                   "th",
                   {
                     style: { width: currentWidth, minWidth: currentWidth, maxWidth: currentWidth },
@@ -1890,7 +2639,7 @@ function TableBlockClient({
                     },
                     className: `relative border-b border-l border-slate-200 px-4 py-2.5 font-semibold text-slate-700 whitespace-nowrap select-none cursor-grab active:cursor-grabbing transition-colors ${isDragging ? "opacity-40 bg-slate-200 border-dashed border-2 border-brand" : ""} ${isDragOver ? "bg-blue-50 border-r-4 border-r-brand text-brand font-bold" : "hover:bg-slate-200/60"}`,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                         "div",
                         {
                           onMouseDown: (e) => {
@@ -1902,16 +2651,16 @@ function TableBlockClient({
                           title: "\u05E9\u05E0\u05D4 \u05D2\u05D5\u05D3\u05DC \u05E2\u05DE\u05D5\u05D3\u05D4"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between gap-2 group overflow-hidden", title: "\u05D2\u05E8\u05D5\u05E8 \u05DC\u05E9\u05D9\u05E0\u05D5\u05D9 \u05E1\u05D3\u05E8 \u05D4\u05E2\u05DE\u05D5\u05D3\u05D4", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "truncate", children: col.name }),
-                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between gap-2 group overflow-hidden", title: "\u05D2\u05E8\u05D5\u05E8 \u05DC\u05E9\u05D9\u05E0\u05D5\u05D9 \u05E1\u05D3\u05E8 \u05D4\u05E2\u05DE\u05D5\u05D3\u05D4", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "truncate", children: col.name }),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                           "svg",
                           {
                             className: "w-3.5 h-3.5 text-slate-400 opacity-40 group-hover:opacity-100 transition-opacity shrink-0 cursor-grab",
                             fill: "none",
                             viewBox: "0 0 24 24",
                             stroke: "currentColor",
-                            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M8 9h.01M8 15h.01M16 9h.01M16 15h.01" })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M8 9h.01M8 15h.01M16 9h.01M16 15h.01" })
                           }
                         )
                       ] })
@@ -1920,59 +2669,112 @@ function TableBlockClient({
                   col.name
                 );
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: "w-full min-w-[50px] border-b border-slate-200 pointer-events-none" })
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("th", { className: "w-full min-w-[50px] border-b border-slate-200 pointer-events-none" })
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tbody", { className: "bg-white", children: (isStateEmpty || filteredData.length === 0) && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { colSpan: filteredColumns.length + 2, className: "text-center py-12 text-slate-400", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col items-center justify-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-8 h-8 text-slate-300", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "\u05D0\u05D9\u05DF \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05DC\u05D4\u05E6\u05D2\u05D4." })
-            ] }) }) }) : filteredData.map((row) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { className: "hover:bg-blue-50/30 transition-colors group", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "border-b border-l border-slate-200 p-1.5 text-center bg-white group-hover:bg-transparent", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                "input",
-                {
-                  type: "checkbox",
-                  checked: selectedIds.has(row.id),
-                  onChange: (e) => toggleSelectRow(row.id, e.target.checked),
-                  disabled: isLoading || isUpdatingActive,
-                  className: "w-4 h-4 rounded border-slate-300 text-brand"
-                }
-              ) }),
-              filteredColumns.map((col) => {
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tbody", { className: "bg-white", children: (isStateEmpty || filteredData.length === 0) && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { colSpan: filteredColumns.length + 2, className: "text-center py-12 text-slate-400", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col items-center justify-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "w-8 h-8 text-slate-300", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "\u05D0\u05D9\u05DF \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05DC\u05D4\u05E6\u05D2\u05D4." })
+            ] }) }) }) : filteredData.map((row) => {
+              const hasSubTableCols = filteredColumns.some((c) => {
                 var _a;
-                const colType = ((_a = col.type) == null ? void 0 : _a.toUpperCase()) || "DEFAULT";
-                const InputComponent = FORM_INPUTS[colType] || FORM_INPUTS.DEFAULT;
-                let value = (row == null ? void 0 : row.data) ? row.data[col.name] : void 0;
-                if (value === void 0 && col.defaultValue !== void 0) {
-                  value = colType === "CURRENCY" || colType === "NUMBER" ? parseFloat(col.defaultValue) : col.defaultValue;
-                  if (colType === "CURRENCY" || colType === "NUMBER") {
-                    if (isNaN(value)) value = null;
-                  }
-                }
-                if (value === void 0) value = null;
-                return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "border-b border-l border-slate-200 p-0 relative", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                  InputComponent,
+                return ((_a = c.type) == null ? void 0 : _a.toUpperCase()) === "SUB_TABLE";
+              });
+              const isExpanded = expandedRowIds.has(row.id);
+              const subTableColumns = filteredColumns.filter((c) => {
+                var _a;
+                return ((_a = c.type) == null ? void 0 : _a.toUpperCase()) === "SUB_TABLE";
+              });
+              return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react7.default.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("tr", { className: "hover:bg-blue-50/30 transition-colors group", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { className: "border-b border-l border-slate-200 p-1.5 text-center bg-white group-hover:bg-transparent", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-center gap-1", children: [
+                    hasSubTableCols && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setExpandedRowIds((prev) => {
+                          const next = new Set(prev);
+                          if (next.has(row.id)) next.delete(row.id);
+                          else next.add(row.id);
+                          return next;
+                        }),
+                        className: "text-slate-400 hover:text-blue-600 p-0.5 rounded transition-colors cursor-pointer",
+                        title: isExpanded ? "\u05E1\u05D2\u05D5\u05E8 \u05EA\u05EA-\u05D8\u05D1\u05DC\u05D4" : "\u05E4\u05EA\u05D7 \u05EA\u05EA-\u05D8\u05D1\u05DC\u05D4",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: `w-3.5 h-3.5 transition-transform duration-150 ${isExpanded ? "rotate-90" : ""}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9 5l7 7-7 7" }) })
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: selectedIds.has(row.id),
+                        onChange: (e) => toggleSelectRow(row.id, e.target.checked),
+                        disabled: isLoading || isUpdatingActive,
+                        className: "w-4 h-4 rounded border-slate-300 text-brand"
+                      }
+                    )
+                  ] }) }),
+                  filteredColumns.map((col) => {
+                    var _a;
+                    const colType = ((_a = col.type) == null ? void 0 : _a.toUpperCase()) || "DEFAULT";
+                    const InputComponent = FORM_INPUTS[colType] || FORM_INPUTS.DEFAULT;
+                    let value = (row == null ? void 0 : row.data) ? row.data[col.name] : void 0;
+                    if (value === void 0 && col.defaultValue !== void 0) {
+                      value = colType === "CURRENCY" || colType === "NUMBER" ? parseFloat(col.defaultValue) : col.defaultValue;
+                      if (colType === "CURRENCY" || colType === "NUMBER") {
+                        if (isNaN(value)) value = null;
+                      }
+                    }
+                    if (value === void 0) value = null;
+                    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { className: "border-b border-l border-slate-200 p-0 relative", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      InputComponent,
+                      {
+                        value,
+                        column: col,
+                        rowId: row.id,
+                        onChange: (v) => handleCellChange(row.id, col.name, v),
+                        context: {
+                          tableName: (schema == null ? void 0 : schema.name) || (schema == null ? void 0 : schema.tableName) || (schema == null ? void 0 : schema.title) || (schema == null ? void 0 : schema.id) || "Table",
+                          tableId: (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id),
+                          onMarkForDeletion: (fileId) => setPendingDeletions((prev) => [...prev, fileId]),
+                          relationOptions,
+                          refetchRelation,
+                          executeAction,
+                          emitEvent,
+                          pageState,
+                          componentId,
+                          orgId,
+                          updateQuietly: handleQuietCellChange,
+                          triggerSaveSuccess,
+                          rowData: row.data
+                        }
+                      }
+                    ) }, col.name);
+                  }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { className: "border-b border-slate-200 bg-white pointer-events-none" })
+                ] }),
+                isExpanded && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  ExpandedSubTables,
                   {
-                    value,
-                    column: col,
                     rowId: row.id,
-                    onChange: (v) => handleCellChange(row.id, col.name, v),
+                    rowData: row.data,
+                    subTableColumns,
+                    filteredColumnsLength: filteredColumns.length,
+                    handleCellChange,
                     context: {
-                      tableName: (schema == null ? void 0 : schema.name) || (schema == null ? void 0 : schema.tableName) || (schema == null ? void 0 : schema.title) || (schema == null ? void 0 : schema.id) || "Table",
-                      onMarkForDeletion: (fileId) => setPendingDeletions((prev) => [...prev, fileId]),
-                      relationOptions,
-                      refetchRelation,
                       executeAction,
-                      emitEvent,
-                      pageState,
-                      componentId,
-                      orgId
+                      orgId,
+                      parentTableId: (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id),
+                      tableId: (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id),
+                      rowData: row.data,
+                      updateQuietly: handleQuietCellChange,
+                      triggerSaveSuccess
                     }
                   }
-                ) }, col.name);
-              }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "border-b border-slate-200 bg-white pointer-events-none" })
-            ] }, row.id)) }),
-            showSummary && filteredData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tfoot", { className: "bg-slate-50 border-t-2 border-slate-300 sticky bottom-0 z-10 shadow-[0_-2px_4px_rgba(0,0,0,0.02)]", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "border-b border-l border-slate-200 p-1.5 text-center font-bold text-slate-600 text-xs", children: '\u05E1\u05D4"\u05DB' }),
+                )
+              ] }, row.id);
+            }) }),
+            showSummary && filteredData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tfoot", { className: "bg-slate-50 border-t-2 border-slate-300 sticky bottom-0 z-10 shadow-[0_-2px_4px_rgba(0,0,0,0.02)]", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("tr", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { className: "border-b border-l border-slate-200 p-1.5 text-center font-bold text-slate-600 text-xs", children: '\u05E1\u05D4"\u05DB' }),
               filteredColumns.map((col) => {
                 var _a;
                 const typeUpper = (_a = col.type) == null ? void 0 : _a.toUpperCase();
@@ -1986,16 +2788,16 @@ function TableBlockClient({
                     displayVal = symbol ? `${symbol} ${displayVal}` : displayVal;
                   }
                 }
-                return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "border-b border-l border-slate-200 p-2 text-sm font-semibold text-slate-700 bg-slate-50 relative", children: isNumeric && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center text-right justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "truncate", children: displayVal }) }) }, col.name);
+                return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { className: "border-b border-l border-slate-200 p-2 text-sm font-semibold text-slate-700 bg-slate-50 relative", children: isNumeric && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex items-center text-right justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "truncate", children: displayVal }) }) }, col.name);
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "border-b border-slate-200 bg-slate-50 pointer-events-none" })
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { className: "border-b border-slate-200 bg-slate-50 pointer-events-none" })
             ] }) })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-3 px-4 py-3 bg-slate-50 border-t border-slate-200 text-xs text-slate-600 rounded-b-xl", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-medium text-slate-700", children: "\u05E9\u05D5\u05E8\u05D5\u05EA \u05DC\u05E2\u05DE\u05D5\u05D3:" }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-3 px-4 py-3 bg-slate-50 border-t border-slate-200 text-xs text-slate-600 rounded-b-xl", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "font-medium text-slate-700", children: "\u05E9\u05D5\u05E8\u05D5\u05EA \u05DC\u05E2\u05DE\u05D5\u05D3:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               "select",
               {
                 value: limit,
@@ -2003,27 +2805,27 @@ function TableBlockClient({
                 disabled: isLoading || isUpdatingActive,
                 className: "bg-white border border-slate-300 rounded-lg px-2.5 py-1 text-slate-700 font-semibold shadow-2xs cursor-pointer focus:outline-none focus:ring-2 focus:ring-brand disabled:opacity-50",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: 20, children: "20" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: 50, children: "50" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: 100, children: "100" })
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: 20, children: "20" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: 50, children: "50" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: 100, children: "100" })
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "font-medium text-slate-600", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "font-medium text-slate-600", children: [
               "\u05E2\u05DE\u05D5\u05D3 ",
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { className: "text-slate-900", children: page }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { className: "text-slate-900", children: page }),
               " \u05DE\u05EA\u05D5\u05DA ",
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { className: "text-slate-900", children: totalPages || 1 }),
-              totalRecords > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-slate-500 font-normal", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { className: "text-slate-900", children: totalPages || 1 }),
+              totalRecords > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "text-slate-500 font-normal", children: [
                 " (",
                 totalRecords,
                 ' \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05D1\u05E1\u05D4"\u05DB)'
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "button",
                 {
                   onClick: handlePrevPage,
@@ -2033,7 +2835,7 @@ function TableBlockClient({
                   children: "\u05D4\u05E7\u05D5\u05D3\u05DD"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "button",
                 {
                   onClick: handleNextPage,
@@ -2050,11 +2852,60 @@ function TableBlockClient({
     }
   );
 }
+function ExpandedSubTables({
+  rowId,
+  rowData,
+  subTableColumns,
+  filteredColumnsLength,
+  handleCellChange,
+  context
+}) {
+  var _a;
+  const [activeTab, setActiveTab] = (0, import_react7.useState)((_a = subTableColumns[0]) == null ? void 0 : _a.name);
+  if (subTableColumns.length === 0) return null;
+  if (subTableColumns.length === 1) {
+    const stCol = subTableColumns[0];
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { colSpan: filteredColumnsLength + 2, className: "p-0 border-b border-slate-200 bg-slate-50/50", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      SubTableViewer,
+      {
+        rowId,
+        column: stCol,
+        value: (rowData == null ? void 0 : rowData[stCol.name]) || [],
+        onChange: (newVal) => handleCellChange(rowId, stCol.name, newVal),
+        context
+      }
+    ) }) });
+  }
+  const activeCol = subTableColumns.find((c) => c.name === activeTab) || subTableColumns[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("td", { colSpan: filteredColumnsLength + 2, className: "p-0 border-b border-slate-200 bg-slate-50/50 overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex border-b border-slate-200 bg-slate-100/50 px-2 pt-2 gap-1 overflow-hidden", children: subTableColumns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => setActiveTab(col.name),
+        className: `px-4 py-2 text-sm font-semibold rounded-t-lg transition-colors whitespace-nowrap cursor-pointer relative top-[1px] ${activeTab === col.name ? "bg-white border border-slate-200 border-b-transparent text-brand" : "bg-transparent border border-transparent text-slate-500 hover:text-slate-700 hover:bg-slate-200/50"}`,
+        children: col.name
+      },
+      col.name
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      SubTableViewer,
+      {
+        rowId,
+        column: activeCol,
+        value: (rowData == null ? void 0 : rowData[activeCol.name]) || [],
+        onChange: (newVal) => handleCellChange(rowId, activeCol.name, newVal),
+        context
+      },
+      activeCol.name
+    ) })
+  ] }) });
+}
 
 // src/components/TableBlock/TableBlock.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function TableBlock(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TableBlockClient, __spreadValues({}, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableBlockClient, __spreadValues({}, props));
 }
 
 // src/registry.ts