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

package/dist/index.js

@@ -58,16 +58,18 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var index_exports = {};
-__export(index_exports, {
+var src_exports = {};
+__export(src_exports, {
   TableBlock: () => TableBlock,
   ToastContext: () => ToastContext,
   ToastProvider: () => ToastProvider,
   UNIVERSE_COMPONENTS: () => UNIVERSE_COMPONENTS,
   cn: () => cn,
+  formatPhoneDisplay: () => formatPhoneDisplay,
+  openWhatsAppChat: () => openWhatsAppChat,
   useToast: () => useToast
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(src_exports);
 
 // src/utils/cn.ts
 var import_clsx = require("clsx");
@@ -76,8 +78,38 @@ function cn(...inputs) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
 
+// src/utils/whatsapp.ts
+function openWhatsAppChat(phone, defaultCountryCode = "972") {
+  if (!phone || typeof window === "undefined") return;
+  let cleaned = phone.replace(/\D/g, "");
+  if (cleaned.startsWith("0")) {
+    cleaned = defaultCountryCode + cleaned.substring(1);
+  }
+  const appUrl = `whatsapp://send?phone=${cleaned}`;
+  const webUrl = `https://web.whatsapp.com/send?phone=${cleaned}`;
+  const start = Date.now();
+  window.location.href = appUrl;
+  setTimeout(() => {
+    if (typeof document !== "undefined" && document.hasFocus() && Date.now() - start < 2e3) {
+      window.open(webUrl, "_blank", "noopener,noreferrer");
+    }
+  }, 1200);
+}
+function formatPhoneDisplay(phone) {
+  if (!phone) return "";
+  const digits = phone.replace(/\D/g, "");
+  if (digits.length === 10 && digits.startsWith("05")) {
+    return `${digits.slice(0, 3)}-${digits.slice(3, 6)}-${digits.slice(6)}`;
+  }
+  if (digits.length === 12 && digits.startsWith("9725")) {
+    const local = "0" + digits.slice(3);
+    return `${local.slice(0, 3)}-${local.slice(3, 6)}-${local.slice(6)}`;
+  }
+  return phone;
+}
+
 // 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 +312,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 +370,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 +408,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 +429,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 +895,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 +959,249 @@ var FORM_INPUTS = {
       }
     }
   ),
+  PHONE: ({ value, onChange, column }) => {
+    var _a;
+    const enableWhatsApp = (_a = column == null ? void 0 : column.config) == null ? void 0 : _a.enableWhatsApp;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center w-full h-full px-2 gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "input",
+        {
+          type: "tel",
+          className: "w-full h-8 bg-transparent focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-400 text-sm flex-1",
+          value: value !== void 0 && value !== null ? String(value) : "",
+          onChange: (e) => onChange(e.target.value),
+          dir: "ltr"
+        }
+      ),
+      enableWhatsApp && value && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "text-emerald-500 cursor-pointer hover:opacity-80 transition-opacity shrink-0 p-1 rounded hover:bg-emerald-50",
+          title: "\u05E4\u05EA\u05D9\u05D7\u05EA \u05D5\u05D5\u05D0\u05D8\u05E1\u05D0\u05E4",
+          onClick: (e) => {
+            e.stopPropagation();
+            openWhatsAppChat(String(value));
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a5.816 5.816 0 00-.571-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) })
+        }
+      )
+    ] });
+  },
+  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-1.5 h-8 px-2 group whitespace-nowrap", 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-xs whitespace-nowrap", children: "\u05D0\u05D9\u05E9 \u05E7\u05E9\u05E8 \u05D2\u05D5\u05D2\u05DC" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: handleUnlink,
+            className: "text-slate-400 hover:text-rose-500 opacity-0 group-hover:opacity-100 transition-opacity p-1 shrink-0",
+            title: "\u05D1\u05D8\u05DC \u05E1\u05E0\u05DB\u05E8\u05D5\u05DF",
+            children: /* @__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: "M6 18L18 6M6 6l12 12" }) })
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex items-center h-8 px-2 whitespace-nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: handleSync,
+        disabled: isSyncing,
+        className: "inline-flex items-center gap-1.5 px-2.5 py-1 bg-blue-50 text-blue-600 hover:bg-blue-100 border border-blue-200 rounded-md text-xs font-medium transition-colors whitespace-nowrap shrink-0 disabled:opacity-50 cursor-pointer",
+        children: [
+          isSyncing ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { className: "w-3.5 h-3.5 animate-spin shrink-0", 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 shrink-0", 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" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "whitespace-nowrap", children: "\u05E1\u05E0\u05DB\u05E8\u05DF \u05DC\u05D2\u05D5\u05D2\u05DC" })
+        ]
+      }
+    ) });
+  },
   DEFAULT: ({ value, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "input",
     {
@@ -901,12 +1210,1045 @@ var FORM_INPUTS = {
       value: value !== void 0 && value !== null ? String(value) : "",
       onChange: (e) => onChange(e.target.value)
     }
-  )
+  ),
+  SUB_TABLE: ({ value, column }) => {
+    var _a, _b;
+    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 || [];
+    const isWhatsApp = ((_a = column.config) == null ? void 0 : _a.actionType) === "WHATSAPP";
+    const actionPhoneCol = (_b = column.config) == null ? void 0 : _b.actionPhoneColumn;
+    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 _a2, _b2;
+      let label = "";
+      if (entry._resolvedData) {
+        if (displayFields.length > 0) {
+          label = displayFields.map((f) => String(entry._resolvedData[f] || "")).filter(Boolean).join(" ");
+        } else {
+          const firstField = Object.keys(entry._resolvedData).find((k) => k !== "_id");
+          if (firstField) label = String(entry._resolvedData[firstField] || "");
+        }
+      }
+      if (!label) label = ((_a2 = entry.recordId) == null ? void 0 : _a2.slice(-6)) || "...";
+      if (isWhatsApp) {
+        const rawPhone = actionPhoneCol ? (_b2 = entry._resolvedData) == null ? void 0 : _b2[actionPhoneCol] : null;
+        const phone = rawPhone ? String(rawPhone).trim() : null;
+        if (phone) {
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                openWhatsAppChat(phone);
+              },
+              className: "inline-flex items-center gap-1 px-1.5 py-0.5 bg-emerald-50 hover:bg-emerald-100 text-emerald-800 border border-emerald-300 hover:border-emerald-400 rounded-full text-xs font-medium max-w-[150px] truncate cursor-pointer transition-colors shadow-xs",
+              title: `\u05E4\u05EA\u05D9\u05D7\u05EA \u05D5\u05D5\u05D0\u05D8\u05E1\u05D0\u05E4 (${phone})`,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-3 h-3 text-emerald-600 shrink-0", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a5.816 5.816 0 00-.571-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate", children: label })
+              ]
+            },
+            entry.recordId || idx
+          );
+        }
+      }
+      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");
+
+// src/utils/phone.ts
+function sanitizePhoneNumber(phone) {
+  if (!phone) return "";
+  const trimmed = phone.trim();
+  const hasLeadingPlus = trimmed.startsWith("+");
+  const digitsOnly = trimmed.replace(/\D/g, "");
+  return hasLeadingPlus ? `+${digitsOnly}` : digitsOnly;
+}
+function isValidPhoneNumber(phone) {
+  if (!phone) return false;
+  const cleaned = sanitizePhoneNumber(phone);
+  return /^\+?[0-9]{9,15}$/.test(cleaned);
+}
+
+// src/components/TableBlock/fields/SubTableViewer.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function validateCellValue(val, col) {
+  var _a;
+  const colType = ((_a = col.type) == null ? void 0 : _a.toUpperCase()) || "DEFAULT";
+  const isEmpty = val === void 0 || val === null || typeof val === "string" && val.trim() === "";
+  if (col.isRequired && isEmpty) {
+    return {
+      isValid: false,
+      error: `\u05E9\u05D2\u05D9\u05D0\u05EA \u05D0\u05D9\u05DE\u05D5\u05EA: \u05E9\u05D3\u05D4 '${col.name}' \u05D4\u05D9\u05E0\u05D5 \u05E9\u05D3\u05D4 \u05D7\u05D5\u05D1\u05D4 \u05D5\u05DC\u05D0 \u05D9\u05DB\u05D5\u05DC \u05DC\u05D4\u05D9\u05E9\u05D0\u05E8 \u05E8\u05D9\u05E7.`
+    };
+  }
+  if (isEmpty) {
+    return { isValid: true };
+  }
+  if (colType === "PHONE") {
+    const strVal = String(val).trim();
+    if (!isValidPhoneNumber(strVal)) {
+      return {
+        isValid: false,
+        error: `\u05DE\u05E1\u05E4\u05E8 \u05D4\u05D8\u05DC\u05E4\u05D5\u05DF \u05D1\u05E9\u05D3\u05D4 '${col.name}' \u05D0\u05D9\u05E0\u05D5 \u05EA\u05E7\u05D9\u05DF. \u05D9\u05E9 \u05DC\u05D4\u05D6\u05D9\u05DF \u05DE\u05E1\u05E4\u05E8 \u05D1\u05D0\u05D5\u05E8\u05DA 9-15 \u05E1\u05E4\u05E8\u05D5\u05EA (\u05DC\u05D3\u05D5\u05D2\u05DE\u05D4 0501234567 \u05D0\u05D5 +972501234567).`
+      };
+    }
+  }
+  if (colType === "NUMBER" || colType === "CURRENCY") {
+    if (typeof val === "string" && isNaN(Number(val))) {
+      return {
+        isValid: false,
+        error: `\u05D4\u05E2\u05E8\u05DA \u05D1\u05E9\u05D3\u05D4 '${col.name}' \u05D7\u05D9\u05D9\u05D1 \u05DC\u05D4\u05D9\u05D5\u05EA \u05DE\u05E1\u05E4\u05E8 \u05EA\u05E7\u05D9\u05DF.`
+      };
+    }
+  }
+  return { isValid: true };
+}
+function SubTableCell({
+  record,
+  column,
+  targetSchema,
+  referencedTableId,
+  context,
+  relationOptions,
+  setRelationOptions,
+  refetchRelation,
+  onCommit
+}) {
+  var _a, _b;
+  const colType = ((_a = column.type) == null ? void 0 : _a.toUpperCase()) || "DEFAULT";
+  const isContact = colType === "GOOGLE_CONTACT";
+  const InputComponent = FORM_INPUTS[colType] || FORM_INPUTS.DEFAULT;
+  const serverValue = (_b = record.data[column.name]) != null ? _b : colType === "BOOLEAN" ? false : "";
+  const [draftValue, setDraftValue] = (0, import_react6.useState)(serverValue);
+  const [isDirty, setIsDirty] = (0, import_react6.useState)(false);
+  const [validationError, setValidationError] = (0, import_react6.useState)(null);
+  const cellRef = (0, import_react6.useRef)(null);
+  const draftRef = (0, import_react6.useRef)(draftValue);
+  const isDirtyRef = (0, import_react6.useRef)(isDirty);
+  const serverValueRef = (0, import_react6.useRef)(serverValue);
+  const recordIdRef = (0, import_react6.useRef)(record.id);
+  const columnRef = (0, import_react6.useRef)(column);
+  const onCommitRef = (0, import_react6.useRef)(onCommit);
+  const isCommittingRef = (0, import_react6.useRef)(false);
+  const lastFailedValRef = (0, import_react6.useRef)(void 0);
+  const { addToast } = useToast();
+  draftRef.current = draftValue;
+  isDirtyRef.current = isDirty;
+  serverValueRef.current = serverValue;
+  recordIdRef.current = record.id;
+  columnRef.current = column;
+  onCommitRef.current = onCommit;
+  (0, import_react6.useEffect)(() => {
+    if (!isDirtyRef.current) {
+      setDraftValue(serverValue);
+      draftRef.current = serverValue;
+      setValidationError(null);
+      lastFailedValRef.current = void 0;
+    }
+  }, [serverValue]);
+  const commit = (0, import_react6.useCallback)(async (valToCommit) => {
+    if (isCommittingRef.current) return false;
+    if (!isDirtyRef.current) return true;
+    if (valToCommit === serverValueRef.current) {
+      setIsDirty(false);
+      isDirtyRef.current = false;
+      setValidationError(null);
+      lastFailedValRef.current = void 0;
+      return true;
+    }
+    const valRes = validateCellValue(valToCommit, columnRef.current);
+    if (!valRes.isValid) {
+      const errorMsg = valRes.error || "\u05E9\u05D2\u05D9\u05D0\u05EA \u05D0\u05D9\u05DE\u05D5\u05EA";
+      setValidationError(errorMsg);
+      if (lastFailedValRef.current !== valToCommit) {
+        addToast({ type: "error", message: errorMsg });
+        lastFailedValRef.current = valToCommit;
+      }
+      return false;
+    }
+    try {
+      isCommittingRef.current = true;
+      const success = await onCommitRef.current(recordIdRef.current, columnRef.current.name, valToCommit);
+      if (success) {
+        setIsDirty(false);
+        isDirtyRef.current = false;
+        serverValueRef.current = valToCommit;
+        setValidationError(null);
+        lastFailedValRef.current = void 0;
+        return true;
+      } else {
+        setValidationError("\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E9\u05DE\u05D9\u05E8\u05EA \u05D4\u05E8\u05E9\u05D5\u05DE\u05D4");
+        return false;
+      }
+    } catch (e) {
+      setValidationError("\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E9\u05DE\u05D9\u05E8\u05EA \u05D4\u05E8\u05E9\u05D5\u05DE\u05D4");
+      return false;
+    } finally {
+      isCommittingRef.current = false;
+    }
+  }, [addToast]);
+  const discard = (0, import_react6.useCallback)(() => {
+    setDraftValue(serverValueRef.current);
+    draftRef.current = serverValueRef.current;
+    setIsDirty(false);
+    isDirtyRef.current = false;
+    setValidationError(null);
+    lastFailedValRef.current = void 0;
+  }, []);
+  (0, import_react6.useEffect)(() => {
+    return () => {
+      if (isDirtyRef.current && !isCommittingRef.current) {
+        const val = draftRef.current;
+        const orig = serverValueRef.current;
+        if (val !== orig) {
+          const valRes = validateCellValue(val, columnRef.current);
+          if (valRes.isValid) {
+            onCommitRef.current(recordIdRef.current, columnRef.current.name, val);
+          }
+        }
+      }
+    };
+  }, []);
+  const handleChange = (newVal) => {
+    setDraftValue(newVal);
+    draftRef.current = newVal;
+    setIsDirty(true);
+    isDirtyRef.current = true;
+    if (validationError) {
+      setValidationError(null);
+      lastFailedValRef.current = void 0;
+    }
+    if (colType === "BOOLEAN" || colType === "GOOGLE_DRIVE_FILE") {
+      commit(newVal);
+    }
+  };
+  const handleBlur = (e) => {
+    if (e.currentTarget.contains(e.relatedTarget)) {
+      return;
+    }
+    if (isDirtyRef.current) {
+      commit(draftRef.current);
+    }
+  };
+  const handleKeyDown = (e) => {
+    var _a2, _b2, _c, _d;
+    if (e.key === "Enter") {
+      e.preventDefault();
+      if (isDirtyRef.current) {
+        commit(draftRef.current);
+      }
+      (_b2 = (_a2 = e.target) == null ? void 0 : _a2.blur) == null ? void 0 : _b2.call(_a2);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      discard();
+      (_d = (_c = e.target) == null ? void 0 : _c.blur) == null ? void 0 : _d.call(_c);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "td",
+    {
+      ref: cellRef,
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown,
+      title: validationError || void 0,
+      className: `border border-slate-200 p-0 relative h-8 transition-colors ${isContact ? "min-w-[140px]" : ""} ${validationError ? "border-rose-400 ring-1 ring-rose-400 bg-rose-50/20" : ""}`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        InputComponent,
+        {
+          value: draftValue,
+          column,
+          rowId: record.id,
+          onChange: handleChange,
+          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.tableMetaId) || (targetSchema == null ? void 0 : targetSchema.id) || referencedTableId,
+            updateQuietly: (rid, colName, val) => onCommitRef.current(rid, colName, val)
+          })
+        }
+      )
+    }
+  );
+}
+function SubTableViewer({ rowId, column, value, onChange, context }) {
+  var _a, _b;
+  const { addToast } = useToast();
+  const entries = Array.isArray(value) ? value : [];
+  const [linkedRecords, setLinkedRecords] = (0, import_react6.useState)(() => {
+    const initial = [];
+    if (Array.isArray(value)) {
+      for (const entry of value) {
+        if (entry.recordId && entry._resolvedData) {
+          initial.push({ id: entry.recordId, data: entry._resolvedData });
+        }
+      }
+    }
+    return initial;
+  });
+  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 [conflictModalState, setConflictModalState] = (0, import_react6.useState)({
+    isOpen: false,
+    fieldName: "",
+    matchingRecords: []
+  });
+  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 (entries.length > 0) {
+      setLinkedRecords((prev) => {
+        const existingIds = new Set(prev.map((r) => r.id));
+        const toAdd = [];
+        for (const entry of entries) {
+          if (entry.recordId && entry._resolvedData && !existingIds.has(entry.recordId)) {
+            toAdd.push({ id: entry.recordId, data: entry._resolvedData });
+            existingIds.add(entry.recordId);
+          }
+        }
+        return toAdd.length > 0 ? [...prev, ...toAdd] : prev;
+      });
+    }
+  }, [entries]);
+  (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 handleLinkRecords = (recordsToLink) => {
+    if (!recordsToLink || recordsToLink.length === 0) return;
+    const existingEntryIds = new Set(entries.map((e) => e.recordId));
+    const newEntries = [];
+    const newRecordsToAdd = [];
+    for (const record of recordsToLink) {
+      fetchedIdsRef.current.add(record.id);
+      const resolvedData = __spreadValues({}, record.data || {});
+      targetColumns.forEach((col) => {
+        if ((resolvedData[col.name] === void 0 || resolvedData[col.name] === null) && record[col.name] !== void 0) {
+          resolvedData[col.name] = record[col.name];
+        }
+      });
+      if (!existingEntryIds.has(record.id)) {
+        newEntries.push({
+          recordId: record.id,
+          isSelected: true,
+          _resolvedData: resolvedData
+        });
+        existingEntryIds.add(record.id);
+      }
+      newRecordsToAdd.push({
+        id: record.id,
+        data: resolvedData
+      });
+    }
+    const updatedEntries = [...entries, ...newEntries];
+    updateParentLinkage(updatedEntries);
+    setLinkedRecords((prev) => {
+      const map = new Map(prev.map((r) => [r.id, r]));
+      newRecordsToAdd.forEach((r) => {
+        const existing = map.get(r.id);
+        if (existing) {
+          map.set(r.id, __spreadProps(__spreadValues({}, existing), {
+            data: __spreadValues(__spreadValues({}, existing.data), r.data)
+          }));
+        } else {
+          map.set(r.id, r);
+        }
+      });
+      return Array.from(map.values());
+    });
+    setSearchQuery("");
+    setSearchResults([]);
+    setIsSearchOpen(false);
+  };
+  const handleLinkRecord = (record) => {
+    handleLinkRecords([record]);
+  };
+  const handleUniqueConflict = (conflictData) => {
+    const rawMatching = Array.isArray(conflictData == null ? void 0 : conflictData.matchingRecords) ? conflictData.matchingRecords : [];
+    const resolvedMatching = rawMatching.map((r) => {
+      var _a2;
+      const recordId = String(r.id || ((_a2 = r._id) == null ? void 0 : _a2.$oid) || r._id);
+      let dataObj = {};
+      if (r.data && typeof r.data === "object") {
+        dataObj = __spreadValues({}, r.data);
+      }
+      targetColumns.forEach((col) => {
+        if ((dataObj[col.name] === void 0 || dataObj[col.name] === null) && r[col.name] !== void 0) {
+          dataObj[col.name] = r[col.name];
+        }
+      });
+      return {
+        id: recordId,
+        data: dataObj
+      };
+    });
+    setConflictModalState({
+      isOpen: true,
+      fieldName: (conflictData == null ? void 0 : conflictData.fieldName) || "",
+      matchingRecords: resolvedMatching
+    });
+  };
+  const handleCancelConflict = () => {
+    setConflictModalState((prev) => __spreadProps(__spreadValues({}, prev), { isOpen: false }));
+  };
+  const handleConfirmLinkConflict = async () => {
+    const { matchingRecords } = conflictModalState;
+    if (matchingRecords && matchingRecords.length > 0) {
+      handleLinkRecords(matchingRecords);
+      setNewRecordData({});
+      setIsCreating(false);
+      setConflictModalState({
+        isOpen: false,
+        fieldName: "",
+        matchingRecords: []
+      });
+      addToast({
+        type: "success",
+        message: "\u05D4\u05E8\u05E9\u05D5\u05DE\u05D4 \u05E7\u05D5\u05E9\u05E8\u05D4 \u05D1\u05D4\u05E6\u05DC\u05D7\u05D4"
+      });
+    } else {
+      setConflictModalState((prev) => __spreadProps(__spreadValues({}, prev), { isOpen: 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 isMountedRef = (0, import_react6.useRef)(true);
+  (0, import_react6.useEffect)(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+  const handleCommitRecordCell = async (recordId, colName, value2) => {
+    var _a2;
+    const previousRecord = linkedRecords.find((r) => r.id === recordId);
+    const previousValue = (_a2 = previousRecord == null ? void 0 : previousRecord.data) == null ? void 0 : _a2[colName];
+    if (previousValue === value2) return true;
+    const targetCol = targetColumns.find((c) => c.name === colName);
+    const valRes = targetCol ? validateCellValue(value2, targetCol) : { isValid: true };
+    if (!valRes.isValid) {
+      addToast({
+        type: "error",
+        message: valRes.error || "\u05E9\u05D2\u05D9\u05D0\u05EA \u05D0\u05D9\u05DE\u05D5\u05EA"
+      });
+      return false;
+    }
+    if (executeAction && referencedTableId && !recordId.startsWith("temp_")) {
+      try {
+        const res = await executeAction("UPDATE_RECORD", {
+          tableId: referencedTableId,
+          recordId,
+          data: { [colName]: value2 }
+        });
+        if (res && res.success === false) {
+          const err = new Error(res.error || res.message || "Action execution failed");
+          Object.assign(err, res);
+          throw err;
+        }
+        if (isMountedRef.current) {
+          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 (context == null ? void 0 : context.triggerSaveSuccess) {
+            context.triggerSaveSuccess();
+          }
+        }
+        return true;
+      } catch (err) {
+        console.error("[SubTableViewer] Failed to auto-save linked record field", err);
+        let errorMsg = (err == null ? void 0 : err.message) || (err == null ? void 0 : err.error) || "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E9\u05DE\u05D9\u05E8\u05EA \u05D4\u05E8\u05E9\u05D5\u05DE\u05D4";
+        if ((err == null ? void 0 : err.error) === "UNIQUE_CONSTRAINT_CONFLICT" || (err == null ? void 0 : err.code) === "UNIQUE_CONSTRAINT_CONFLICT" || errorMsg.includes("must be unique") || errorMsg.includes("Duplicate value detected") || errorMsg.includes("\u05DB\u05D1\u05E8 \u05E7\u05D9\u05D9\u05DE\u05EA") || errorMsg.includes("UNIQUE_CONSTRAINT_CONFLICT")) {
+          errorMsg = `\u05E9\u05D2\u05D9\u05D0\u05EA \u05D0\u05D9\u05DE\u05D5\u05EA: \u05D4\u05E2\u05E8\u05DA '${value2}' \u05DB\u05D1\u05E8 \u05E7\u05D9\u05D9\u05DD \u05D1\u05E9\u05D3\u05D4 '${colName}' (\u05E9\u05D3\u05D4 \u05D9\u05D9\u05D7\u05D5\u05D3\u05D9).`;
+        } else if (errorMsg.includes("is required") || errorMsg.includes("\u05E9\u05D3\u05D4 \u05D7\u05D5\u05D1\u05D4") || errorMsg.toLowerCase().includes("required")) {
+          errorMsg = `\u05E9\u05D2\u05D9\u05D0\u05EA \u05D0\u05D9\u05DE\u05D5\u05EA: \u05E9\u05D3\u05D4 '${colName}' \u05D4\u05D9\u05E0\u05D5 \u05E9\u05D3\u05D4 \u05D7\u05D5\u05D1\u05D4 \u05D5\u05DC\u05D0 \u05D9\u05DB\u05D5\u05DC \u05DC\u05D4\u05D9\u05E9\u05D0\u05E8 \u05E8\u05D9\u05E7.`;
+        }
+        addToast({
+          type: "error",
+          message: errorMsg
+        });
+        return false;
+      }
+    } else {
+      if (isMountedRef.current) {
+        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);
+        }
+      }
+      return true;
+    }
+  };
+  const handleRecordCellChange = handleCommitRecordCell;
+  const handleCreateRecord = async () => {
+    var _a2, _b2, _c, _d, _e;
+    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;
+        }
+      }
+      if (((_a2 = col.type) == null ? void 0 : _a2.toUpperCase()) === "PHONE") {
+        const val = newRecordData[col.name];
+        if (val !== void 0 && val !== null && String(val).trim() !== "" && !isValidPhoneNumber(String(val))) {
+          addToast({
+            type: "error",
+            message: `\u05DE\u05E1\u05E4\u05E8 \u05D4\u05D8\u05DC\u05E4\u05D5\u05DF \u05D1\u05E9\u05D3\u05D4 '${col.name}' \u05D0\u05D9\u05E0\u05D5 \u05EA\u05E7\u05D9\u05DF. \u05D9\u05E9 \u05DC\u05D4\u05D6\u05D9\u05DF \u05DE\u05E1\u05E4\u05E8 \u05D1\u05D0\u05D5\u05E8\u05DA 9-15 \u05E1\u05E4\u05E8\u05D5\u05EA.`
+          });
+          return;
+        }
+      }
+    }
+    try {
+      const res = await executeAction("CREATE_RECORD", {
+        tableId: referencedTableId,
+        records: [newRecordData]
+      });
+      if (res && (res.error === "UNIQUE_CONSTRAINT_CONFLICT" || res.code === "UNIQUE_CONSTRAINT_CONFLICT")) {
+        handleUniqueConflict(res);
+        return;
+      }
+      if (res && res.success === false) {
+        throw new Error(res.error || "Action execution failed");
+      }
+      const created = Array.isArray(res) ? res[0] : ((_b2 = res == null ? void 0 : res.data) == null ? void 0 : _b2[0]) || res;
+      if (created) {
+        const newRecord = {
+          id: String(created.id || created._id),
+          data: created.data || newRecordData
+        };
+        handleLinkRecord(newRecord);
+        setIsCreating(false);
+        setNewRecordData({});
+      }
+    } catch (err) {
+      const isConflict = (err == null ? void 0 : err.error) === "UNIQUE_CONSTRAINT_CONFLICT" || (err == null ? void 0 : err.code) === "UNIQUE_CONSTRAINT_CONFLICT" || ((_c = err == null ? void 0 : err.data) == null ? void 0 : _c.error) === "UNIQUE_CONSTRAINT_CONFLICT" || ((_d = err == null ? void 0 : err.message) == null ? void 0 : _d.includes("UNIQUE_CONSTRAINT_CONFLICT"));
+      if (isConflict) {
+        const conflictPayload = (err == null ? void 0 : err.error) === "UNIQUE_CONSTRAINT_CONFLICT" ? err : ((_e = err == null ? void 0 : err.data) == null ? void 0 : _e.error) === "UNIQUE_CONSTRAINT_CONFLICT" ? err.data : err;
+        handleUniqueConflict(conflictPayload);
+        return;
+      }
+      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) => {
+          var _a2;
+          const isContact = ((_a2 = col.type) == null ? void 0 : _a2.toUpperCase()) === "GOOGLE_CONTACT";
+          return /* @__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 ${isContact ? "min-w-[140px]" : ""}`,
+              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) => {
+          var _a2;
+          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 _a3;
+              const isContact = ((_a3 = col.type) == null ? void 0 : _a3.toUpperCase()) === "GOOGLE_CONTACT";
+              if (!record) {
+                return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "td",
+                  {
+                    className: `border border-slate-200 p-0 relative h-8 ${isContact ? "min-w-[140px]" : ""}`,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-slate-300 italic px-2", children: "\u05D8\u05D5\u05E2\u05DF..." })
+                  },
+                  col.name
+                );
+              }
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                SubTableCell,
+                {
+                  record,
+                  column: col,
+                  targetSchema,
+                  referencedTableId,
+                  context,
+                  relationOptions,
+                  setRelationOptions,
+                  refetchRelation,
+                  onCommit: handleCommitRecordCell
+                },
+                `${record.id}_${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.jsxs)("div", { className: "flex items-center justify-center gap-1", children: [
+              ((_a2 = column.config) == null ? void 0 : _a2.actionType) === "WHATSAPP" && (() => {
+                var _a3, _b2, _c;
+                const actionPhoneCol = (_a3 = column.config) == null ? void 0 : _a3.actionPhoneColumn;
+                const phone = actionPhoneCol ? ((_b2 = record == null ? void 0 : record.data) == null ? void 0 : _b2[actionPhoneCol]) || ((_c = entry._resolvedData) == null ? void 0 : _c[actionPhoneCol]) : null;
+                if (phone) {
+                  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        openWhatsAppChat(String(phone));
+                      },
+                      className: "text-emerald-500 hover:text-emerald-600 p-0.5 rounded hover:bg-emerald-50 transition-colors cursor-pointer",
+                      title: `\u05E4\u05EA\u05D9\u05D7\u05EA \u05D5\u05D5\u05D0\u05D8\u05E1\u05D0\u05E4 (${phone})`,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-3.5 h-3.5", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a5.816 5.816 0 00-.571-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) })
+                    }
+                  );
+                }
+                return null;
+              })(),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    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",
+                  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, _b2;
+            const colType = ((_a2 = col.type) == null ? void 0 : _a2.toUpperCase()) || "DEFAULT";
+            const InputComponent = FORM_INPUTS[colType] || FORM_INPUTS.DEFAULT;
+            const isContact = colType === "GOOGLE_CONTACT";
+            return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "td",
+              {
+                className: `border border-emerald-200 p-0 relative h-8 ${isContact ? "min-w-[140px]" : ""}`,
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  InputComponent,
+                  {
+                    value: (_b2 = newRecordData[col.name]) != null ? _b2 : 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,
+                      tableId: (targetSchema == null ? void 0 : targetSchema.tableMetaId) || (targetSchema == null ? void 0 : targetSchema.id) || referencedTableId
+                    })
+                  }
+                )
+              },
+              `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" }) })
+              }
+            )
+          ] }) })
+        ] })
+      ] })
+    ] }) }),
+    conflictModalState.isOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm animate-in fade-in duration-200",
+        dir: "rtl",
+        onClick: handleCancelConflict,
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "div",
+          {
+            className: "bg-white rounded-xl shadow-2xl w-full max-w-lg sm:max-w-xl overflow-hidden border border-slate-200 animate-in fade-in zoom-in-95 duration-200",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "p-5 border-b border-slate-100 flex items-center gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-10 h-10 rounded-full bg-blue-50 border border-blue-200 flex items-center justify-center text-blue-600 flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" }) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "text-base font-bold text-slate-800", children: conflictModalState.matchingRecords.length > 1 ? "\u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05E7\u05D9\u05D9\u05DE\u05D5\u05EA \u05D1\u05D8\u05D1\u05DC\u05D4" : "\u05E8\u05E9\u05D5\u05DE\u05D4 \u05E7\u05D9\u05D9\u05DE\u05EA \u05D1\u05D8\u05D1\u05DC\u05D4" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs text-slate-500", children: "\u05E0\u05DE\u05E6\u05D0\u05D4 \u05E8\u05E9\u05D5\u05DE\u05D4 \u05E7\u05D9\u05D9\u05DE\u05EA \u05E2\u05DD \u05D0\u05D5\u05EA\u05D5 \u05E2\u05E8\u05DA \u05D9\u05D9\u05D7\u05D5\u05D3\u05D9" })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "p-5 space-y-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "text-sm text-slate-700 leading-relaxed", children: [
+                  "\u05E7\u05D9\u05D9\u05DE\u05EA \u05DB\u05D1\u05E8 \u05E8\u05E9\u05D5\u05DE\u05D4 \u05E2\u05DD \u05D4\u05E2\u05E8\u05DA \u05E9\u05E0\u05D1\u05D7\u05E8 \u05D1\u05E9\u05D3\u05D4",
+                  " ",
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-bold text-slate-900 bg-slate-100 px-1.5 py-0.5 rounded border border-slate-200", children: conflictModalState.fieldName }),
+                  ". \u05D4\u05D0\u05DD \u05EA\u05E8\u05E6\u05D4 \u05DC\u05E7\u05E9\u05E8 \u05D0\u05D5\u05EA\u05D4 \u05DC\u05EA\u05EA-\u05D4\u05D8\u05D1\u05DC\u05D4 \u05D1\u05DE\u05E7\u05D5\u05DD \u05DC\u05D9\u05E6\u05D5\u05E8 \u05D7\u05D3\u05E9\u05D4?"
+                ] }),
+                conflictModalState.matchingRecords.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "p-3 bg-blue-50 border border-blue-200 rounded-lg text-xs font-semibold text-blue-800", children: [
+                  "\u05E0\u05DE\u05E6\u05D0\u05D5 ",
+                  conflictModalState.matchingRecords.length,
+                  " \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05E7\u05D9\u05D9\u05DE\u05D5\u05EA. \u05D4\u05D0\u05DD \u05DC\u05E7\u05E9\u05E8 \u05D0\u05EA \u05DB\u05D5\u05DC\u05DF?"
+                ] }),
+                conflictModalState.matchingRecords.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "overflow-x-auto border border-slate-200 rounded-lg max-h-48 text-xs bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("table", { className: "w-full text-right border-collapse", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { className: "bg-slate-100 text-slate-700 font-semibold border-b whitespace-nowrap", children: (targetColumns.length > 0 ? targetColumns.filter((c) => c.name !== "_id" && c.name !== "id") : Object.keys(((_b = conflictModalState.matchingRecords[0]) == null ? void 0 : _b.data) || {}).filter((k) => k !== "_id" && k !== "id").map((name) => ({ name }))).map((col) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    "th",
+                    {
+                      className: "bg-slate-100 text-slate-700 font-semibold p-2 border-b whitespace-nowrap",
+                      children: col.name
+                    },
+                    col.name
+                  )) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tbody", { children: conflictModalState.matchingRecords.map((r, idx) => {
+                    const cols = targetColumns.length > 0 ? targetColumns.filter((c) => c.name !== "_id" && c.name !== "id") : Object.keys(r.data || {}).filter((k) => k !== "_id" && k !== "id").map((name) => ({ name }));
+                    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { className: "hover:bg-slate-50/80 transition-colors", children: cols.map((col) => {
+                      var _a2;
+                      const rawVal = (_a2 = r.data) == null ? void 0 : _a2[col.name];
+                      let displayVal = "-";
+                      if (rawVal !== void 0 && rawVal !== null && rawVal !== "") {
+                        if (typeof rawVal === "boolean") {
+                          displayVal = rawVal ? "\u05DB\u05DF" : "\u05DC\u05D0";
+                        } else if (typeof rawVal === "object") {
+                          displayVal = Array.isArray(rawVal) ? rawVal.join(", ") : JSON.stringify(rawVal);
+                        } else {
+                          displayVal = String(rawVal);
+                        }
+                      }
+                      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        "td",
+                        {
+                          className: "p-2 border-b border-slate-100 whitespace-nowrap text-slate-800",
+                          children: displayVal
+                        },
+                        col.name
+                      );
+                    }) }, r.id || idx);
+                  }) })
+                ] }) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "p-4 bg-slate-50 border-t border-slate-100 flex items-center justify-end gap-2.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleCancelConflict,
+                    className: "px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-200/70 rounded-lg border border-slate-300 transition-colors cursor-pointer",
+                    children: "\u05D1\u05D9\u05D8\u05D5\u05DC"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleConfirmLinkConflict,
+                    className: "px-4 py-2 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow transition-colors flex items-center gap-1.5 cursor-pointer",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" }) }),
+                      conflictModalState.matchingRecords.length > 1 ? "\u05E7\u05E9\u05E8 \u05D0\u05EA \u05DB\u05D5\u05DC\u05DF" : "\u05E7\u05E9\u05E8 \u05E8\u05E9\u05D5\u05DE\u05D4"
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
 // 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 +2265,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 +2295,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 +2304,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 +2352,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 +2372,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 +2396,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 +2412,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 +2458,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 +2475,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 +2508,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 +2522,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 +2536,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 +2624,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 +2667,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 +2754,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 +2813,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 +2848,7 @@ function TableBlockClient({
   const formatPayload = (payload) => {
     const formatted = {};
     (localColumns || []).forEach((col) => {
-      var _a;
+      var _a, _b, _c;
       if (["_id", "id", "createdAt", "updatedAt", "orgId", "tableId", "isSelected"].includes(col.name)) return;
       let val = payload[col.name];
       if (val !== void 0) {
@@ -1475,6 +2858,13 @@ 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()) === "PHONE") {
+            val = sanitizePhoneNumber(String(val));
+          } else if (((_c = col.type) == null ? void 0 : _c.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;
         }
@@ -1484,7 +2874,7 @@ function TableBlockClient({
   };
   const hasChanges = dirty.added.length > 0 || Object.keys(dirty.modified).length > 0 || dirty.deleted.length > 0;
   const handleSave = async () => {
-    var _a;
+    var _a, _b;
     if (!hasChanges) {
       return;
     }
@@ -1507,6 +2897,28 @@ function TableBlockClient({
         }
       }
     }
+    const phoneCols = (localColumns || []).filter((c) => {
+      var _a2;
+      return ((_a2 = c.type) == null ? void 0 : _a2.toUpperCase()) === "PHONE";
+    });
+    for (const col of phoneCols) {
+      for (const row of dirty.added) {
+        const val = row.data[col.name];
+        if (!isEmpty(val) && !isValidPhoneNumber(val)) {
+          showError(`\u05DE\u05E1\u05E4\u05E8 \u05D4\u05D8\u05DC\u05E4\u05D5\u05DF \u05D1\u05E9\u05D3\u05D4 "${col.name}" \u05D0\u05D9\u05E0\u05D5 \u05EA\u05E7\u05D9\u05DF. \u05D9\u05E9 \u05DC\u05D4\u05D6\u05D9\u05DF \u05DE\u05E1\u05E4\u05E8 \u05D1\u05D0\u05D5\u05E8\u05DA 9-15 \u05E1\u05E4\u05E8\u05D5\u05EA (\u05DC\u05D3\u05D5\u05D2\u05DE\u05D4 0501234567 \u05D0\u05D5 +972501234567).`, "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05D5\u05D5\u05DC\u05D9\u05D3\u05E6\u05D9\u05D4");
+          return;
+        }
+      }
+      for (const [rowId, mods] of Object.entries(dirty.modified)) {
+        const rowData = ((_b = data.find((r) => r.id === rowId)) == null ? void 0 : _b.data) || {};
+        const mergedData = __spreadValues(__spreadValues({}, rowData), mods);
+        const val = mergedData[col.name];
+        if (!isEmpty(val) && !isValidPhoneNumber(val)) {
+          showError(`\u05DE\u05E1\u05E4\u05E8 \u05D4\u05D8\u05DC\u05E4\u05D5\u05DF \u05D1\u05E9\u05D3\u05D4 "${col.name}" \u05D0\u05D9\u05E0\u05D5 \u05EA\u05E7\u05D9\u05DF. \u05D9\u05E9 \u05DC\u05D4\u05D6\u05D9\u05DF \u05DE\u05E1\u05E4\u05E8 \u05D1\u05D0\u05D5\u05E8\u05DA 9-15 \u05E1\u05E4\u05E8\u05D5\u05EA (\u05DC\u05D3\u05D5\u05D2\u05DE\u05D4 0501234567 \u05D0\u05D5 +972501234567).`, "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05D5\u05D5\u05DC\u05D9\u05D3\u05E6\u05D9\u05D4");
+          return;
+        }
+      }
+    }
     setIsSaving(true);
     try {
       if (!executeAction) {
@@ -1607,7 +3019,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 +3030,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 +3048,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 +3056,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 +3091,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 +3104,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 +3118,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 +3135,7 @@ function TableBlockClient({
                       ")"
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     "button",
                     {
                       type: "button",
@@ -1733,7 +3145,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 +3159,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 +3170,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 +3182,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 +3202,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 +3214,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 +3266,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 +3302,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 +3314,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 +3332,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 +3451,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 +3468,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 +3498,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 +3515,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
@@ -2068,5 +3582,7 @@ var UNIVERSE_COMPONENTS = {
   ToastProvider,
   UNIVERSE_COMPONENTS,
   cn,
+  formatPhoneDisplay,
+  openWhatsAppChat,
   useToast
 });