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

package/dist/index.js

@@ -77,7 +77,7 @@ function cn(...inputs) {
 }
 
 // src/components/TableBlock/TableBlockClient.tsx
-var import_react6 = require("react");
+var import_react7 = __toESM(require("react"));
 
 // src/hooks/useToast.ts
 var import_react2 = require("react");
@@ -280,12 +280,36 @@ function useToast() {
 var import_react5 = __toESM(require("react"));
 
 // src/components/TableBlock/fields/DrivePickerCell.tsx
-var import_react3 = require("react");
+var import_react3 = __toESM(require("react"));
 var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function DrivePickerCell({ value, onChange, tableName, onMarkForDeletion, context }) {
+function DrivePickerCell({ value, onChange, tableName, column, rowId, onMarkForDeletion, context }) {
   const [isOpening, setIsOpening] = (0, import_react3.useState)(false);
   const { showError } = useToast();
+  const cellContextId = import_react3.default.useMemo(() => {
+    const colName = (column == null ? void 0 : column.name) || "col";
+    const rId = rowId || "row";
+    return `${rId}-${colName}`;
+  }, [rowId, column == null ? void 0 : column.name]);
+  const fileList = import_react3.default.useMemo(() => {
+    if (!value) return [];
+    if (Array.isArray(value)) return value;
+    if (typeof value === "object" && (value.fileId || value.fileUrl || value.url)) {
+      return [value];
+    }
+    return [];
+  }, [value]);
+  (0, import_react3.useEffect)(() => {
+    const handleMessage = (event) => {
+      var _a, _b, _c;
+      if (((_a = event.data) == null ? void 0 : _a.type) === "DRIVE_UPLOAD_SUCCESS" && ((_b = event.data) == null ? void 0 : _b.payload) && ((_c = event.data) == null ? void 0 : _c.cellContextId) === cellContextId) {
+        const incoming = Array.isArray(event.data.payload) ? event.data.payload : [event.data.payload];
+        onChange([...fileList, ...incoming]);
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [fileList, onChange, cellContextId]);
   const openUploadPopup = async () => {
     if (isOpening) return;
     setIsOpening(true);
@@ -314,34 +338,35 @@ function DrivePickerCell({ value, onChange, tableName, onMarkForDeletion, contex
           } catch (e) {
           }
         }
-        const actionResult = await context.executeAction("UPLOAD_DRIVE_FILE", { tableName });
+        const actionResult = await context.executeAction("UPLOAD_DRIVE_FILE", { tableName, cellContextId });
         const folderId = actionResult == null ? void 0 : actionResult.folderId;
-        const pickerUrl = (actionResult == null ? void 0 : actionResult.pickerUrl) || (folderId ? `/embed/picker?folderId=${encodeURIComponent(folderId)}` : `/embed/picker`);
+        let pickerUrl = (actionResult == null ? void 0 : actionResult.pickerUrl) || (folderId ? `/embed/picker?folderId=${encodeURIComponent(folderId)}` : `/embed/picker`);
+        if (!pickerUrl.includes("cellContextId=")) {
+          const separator = pickerUrl.includes("?") ? "&" : "?";
+          pickerUrl = `${pickerUrl}${separator}cellContextId=${encodeURIComponent(cellContextId)}`;
+        }
         if (popup) {
           popup.location.href = pickerUrl;
         }
-        const newFile = await new Promise((resolve) => {
+        await new Promise((resolve) => {
           let timer = null;
-          const handleMessage = (event) => {
+          const handlePopupMessage = (event) => {
             var _a, _b;
-            if (((_a = event.data) == null ? void 0 : _a.type) === "DRIVE_UPLOAD_SUCCESS" && ((_b = event.data) == null ? void 0 : _b.payload)) {
-              window.removeEventListener("message", handleMessage);
+            if (((_a = event.data) == null ? void 0 : _a.type) === "DRIVE_UPLOAD_SUCCESS" && ((_b = event.data) == null ? void 0 : _b.cellContextId) === cellContextId) {
+              window.removeEventListener("message", handlePopupMessage);
               if (timer) clearInterval(timer);
-              resolve(event.data.payload);
+              resolve();
             }
           };
           timer = setInterval(() => {
             if (!popup || popup.closed) {
               if (timer) clearInterval(timer);
-              window.removeEventListener("message", handleMessage);
-              resolve(null);
+              window.removeEventListener("message", handlePopupMessage);
+              resolve();
             }
           }, 800);
-          window.addEventListener("message", handleMessage);
+          window.addEventListener("message", handlePopupMessage);
         });
-        if (newFile) {
-          onChange(newFile);
-        }
       }
     } catch (error) {
       console.error("[DrivePickerCell] Error uploading file:", error);
@@ -351,40 +376,15 @@ function DrivePickerCell({ value, onChange, tableName, onMarkForDeletion, contex
       setIsOpening(false);
     }
   };
-  if (value == null ? void 0 : value.fileUrl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center w-full h-8 px-2 gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-        "a",
-        {
-          href: value.fileUrl,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          className: "inline-flex items-center gap-1.5 max-w-[calc(100%-24px)] px-2 py-1 rounded-md text-xs font-medium text-blue-700 bg-blue-50 hover:bg-blue-100 transition-colors truncate",
-          title: value.fileName || "Open file",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.FileText, { className: "w-3.5 h-3.5 shrink-0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "truncate", children: value.fileName || "Unnamed file" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            if ((value == null ? void 0 : value.fileId) && onMarkForDeletion) {
-              onMarkForDeletion(value.fileId);
-            }
-            onChange(null);
-          },
-          className: "shrink-0 p-0.5 rounded hover:bg-rose-100 text-slate-400 hover:text-rose-500 transition-colors",
-          title: "Remove file",
-          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.X, { className: "w-3.5 h-3.5" })
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center w-full h-8 px-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  const handleRemoveFile = (indexToRemove) => {
+    const fileToRemove = fileList[indexToRemove];
+    if ((fileToRemove == null ? void 0 : fileToRemove.fileId) && onMarkForDeletion) {
+      onMarkForDeletion(fileToRemove.fileId);
+    }
+    const updated = fileList.filter((_, idx) => idx !== indexToRemove);
+    onChange(updated);
+  };
+  const renderUploadButton = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center w-full h-8 px-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "button",
     {
       type: "button",
@@ -397,6 +397,38 @@ function DrivePickerCell({ value, onChange, tableName, onMarkForDeletion, contex
       ]
     }
   ) });
+  if (fileList.length > 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col w-full py-1 gap-1", children: [
+      fileList.map((file, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center w-full h-8 px-2 gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "a",
+          {
+            href: file.fileUrl || file.url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "inline-flex items-center gap-1.5 max-w-[calc(100%-24px)] px-2 py-1 rounded-md text-xs font-medium text-blue-700 bg-blue-50 hover:bg-blue-100 transition-colors truncate",
+            title: file.fileName || "Open file",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.FileText, { className: "w-3.5 h-3.5 shrink-0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "truncate", children: file.fileName || "Unnamed file" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleRemoveFile(idx),
+            className: "shrink-0 p-0.5 rounded hover:bg-rose-100 text-slate-400 hover:text-rose-500 transition-colors",
+            title: "Remove file",
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.X, { className: "w-3.5 h-3.5" })
+          }
+        )
+      ] }, file.fileId || idx)),
+      renderUploadButton()
+    ] });
+  }
+  return renderUploadButton();
 }
 
 // src/components/TableBlock/fields/DatePickerCell.tsx
@@ -742,15 +774,19 @@ var FORM_INPUTS = {
   DATE: ({ value, onChange, column }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DatePickerCell, { value, onChange, column }),
   CURRENCY: ({ value, column, onChange }) => {
     const symbol = getCurrencySymbol(column.currencySymbol);
+    const [isFocused, setIsFocused] = import_react5.default.useState(false);
+    const displayValue = !isFocused && value !== void 0 && value !== null && value !== "" && !isNaN(Number(value)) ? new Intl.NumberFormat("en-US").format(Number(value)) : value !== void 0 && value !== null ? value : "";
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative w-full h-full", children: [
       symbol && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "absolute left-2 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none text-sm", children: symbol }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "input",
         {
-          type: "number",
+          type: isFocused ? "number" : "text",
           step: "any",
           className: `w-full h-8 ${symbol ? "pl-6 pr-2" : "px-2"} bg-transparent focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-400 text-sm`,
-          value: value !== void 0 && value !== null ? value : "",
+          value: displayValue,
+          onFocus: () => setIsFocused(true),
+          onBlur: () => setIsFocused(false),
           onChange: (e) => {
             const val = e.target.value;
             onChange(val === "" ? "" : Number(val));
@@ -827,11 +863,13 @@ var FORM_INPUTS = {
       className: "w-4 h-4 rounded border-slate-300 text-brand"
     }
   ) }),
-  GOOGLE_DRIVE_FILE: ({ value, onChange, context }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  GOOGLE_DRIVE_FILE: ({ value, onChange, column, rowId, context }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     DrivePickerCell,
     {
-      value: value || null,
+      value: value || [],
       onChange,
+      column,
+      rowId,
       tableName: context == null ? void 0 : context.tableName,
       onMarkForDeletion: context == null ? void 0 : context.onMarkForDeletion,
       context
@@ -889,6 +927,228 @@ var FORM_INPUTS = {
       }
     }
   ),
+  PHONE: ({ value, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "input",
+    {
+      type: "tel",
+      className: "w-full h-8 px-2 bg-transparent focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-400 text-sm",
+      value: value !== void 0 && value !== null ? String(value) : "",
+      onChange: (e) => onChange(e.target.value),
+      dir: "ltr"
+    }
+  ),
+  GOOGLE_CONTACT: ({ value, column, rowId, onChange, context }) => {
+    const [isSyncing, setIsSyncing] = import_react5.default.useState(false);
+    const { addToast } = useToast();
+    const googleClientIdRef = import_react5.default.useRef(null);
+    const ensureGisScript = import_react5.default.useCallback(() => {
+      return new Promise((resolve, reject) => {
+        var _a, _b, _c;
+        if ((_c = (_b = (_a = window.google) == null ? void 0 : _a.accounts) == null ? void 0 : _b.oauth2) == null ? void 0 : _c.initTokenClient) {
+          resolve();
+          return;
+        }
+        if (document.querySelector('script[src*="accounts.google.com/gsi/client"]')) {
+          const waitForLoad = setInterval(() => {
+            var _a2, _b2, _c2;
+            if ((_c2 = (_b2 = (_a2 = window.google) == null ? void 0 : _a2.accounts) == null ? void 0 : _b2.oauth2) == null ? void 0 : _c2.initTokenClient) {
+              clearInterval(waitForLoad);
+              resolve();
+            }
+          }, 100);
+          setTimeout(() => {
+            clearInterval(waitForLoad);
+            reject(new Error("GIS script load timeout"));
+          }, 1e4);
+          return;
+        }
+        const script = document.createElement("script");
+        script.src = "https://accounts.google.com/gsi/client";
+        script.async = true;
+        script.onload = () => resolve();
+        script.onerror = () => reject(new Error("Failed to load Google Identity Services"));
+        document.head.appendChild(script);
+      });
+    }, []);
+    const requestGisToken = import_react5.default.useCallback(async (hint) => {
+      await ensureGisScript();
+      if (!googleClientIdRef.current && (context == null ? void 0 : context.executeAction)) {
+        try {
+          const config = await context.executeAction("GET_GOOGLE_CONFIG", {});
+          googleClientIdRef.current = (config == null ? void 0 : config.clientId) || "";
+        } catch (e) {
+          throw new Error("Failed to fetch Google configuration");
+        }
+      }
+      const clientId = googleClientIdRef.current;
+      if (!clientId) {
+        throw new Error("Google Client ID is not configured");
+      }
+      const accessToken = await new Promise((resolve, reject) => {
+        const tokenClient = window.google.accounts.oauth2.initTokenClient({
+          client_id: clientId,
+          scope: "https://www.googleapis.com/auth/contacts https://www.googleapis.com/auth/userinfo.email",
+          prompt: hint ? "" : "select_account",
+          hint: hint || void 0,
+          callback: (tokenResponse) => {
+            if (tokenResponse == null ? void 0 : tokenResponse.access_token) {
+              resolve(tokenResponse.access_token);
+            } else {
+              reject(new Error("Google authorization was cancelled or failed"));
+            }
+          },
+          error_callback: (err) => {
+            reject(new Error((err == null ? void 0 : err.message) || "Google authorization error"));
+          }
+        });
+        tokenClient.requestAccessToken({ hint: hint || void 0 });
+      });
+      let email = "";
+      try {
+        const res = await fetch("https://www.googleapis.com/oauth2/v3/userinfo", {
+          headers: { Authorization: `Bearer ${accessToken}` }
+        });
+        if (res.ok) {
+          const info = await res.json();
+          email = info.email || "";
+        }
+      } catch (e) {
+      }
+      return { accessToken, email };
+    }, [ensureGisScript, context]);
+    const handleSync = async () => {
+      var _a, _b, _c;
+      if (!(context == null ? void 0 : context.executeAction)) return;
+      setIsSyncing(true);
+      try {
+        const mapping = column.contactMapping || {};
+        const rowData = context.rowData || {};
+        let hasPhone = false;
+        if (mapping.phoneCol && rowData[mapping.phoneCol]) hasPhone = true;
+        let hasName = false;
+        if (mapping.nameParts && Array.isArray(mapping.nameParts)) {
+          for (const part of mapping.nameParts) {
+            if (part.type === "LOCAL" && rowData[part.columnId]) hasName = true;
+            if (part.type === "PARENT" && ((_a = context.parentRecord) == null ? void 0 : _a.tableId) === part.parentTableId && ((_c = (_b = context.parentRecord) == null ? void 0 : _b.data) == null ? void 0 : _c[part.columnId])) hasName = true;
+          }
+        }
+        if (!hasPhone) {
+          addToast({ type: "warning", message: "\u05E0\u05D0 \u05DC\u05DE\u05DC\u05D0 \u05DE\u05E1\u05E4\u05E8 \u05D8\u05DC\u05E4\u05D5\u05DF \u05DB\u05D3\u05D9 \u05DC\u05E1\u05E0\u05DB\u05E8\u05DF \u05D0\u05D9\u05E9 \u05E7\u05E9\u05E8 \u05DC\u05D2\u05D5\u05D2\u05DC" });
+          setIsSyncing(false);
+          return;
+        }
+        if (!hasName) {
+          addToast({ type: "warning", message: "\u05E0\u05D0 \u05DC\u05DE\u05DC\u05D0 \u05E9\u05DD \u05DB\u05D3\u05D9 \u05DC\u05E1\u05E0\u05DB\u05E8\u05DF \u05D0\u05D9\u05E9 \u05E7\u05E9\u05E8 \u05DC\u05D2\u05D5\u05D2\u05DC" });
+          setIsSyncing(false);
+          return;
+        }
+        let accessToken;
+        let userEmail = "";
+        try {
+          const gisResult = await requestGisToken();
+          accessToken = gisResult.accessToken;
+          userEmail = gisResult.email;
+        } catch (gisError) {
+          addToast({ type: "warning", message: gisError.message || "\u05D4\u05D4\u05E8\u05E9\u05D0\u05D4 \u05DC\u05D2\u05D5\u05D2\u05DC \u05E0\u05DB\u05E9\u05DC\u05D4" });
+          setIsSyncing(false);
+          return;
+        }
+        const payload = {
+          nameParts: mapping.nameParts || [],
+          phoneCol: mapping.phoneCol,
+          emailCol: mapping.emailCol,
+          localRowData: rowData,
+          parentRecord: context.parentRecord,
+          accessToken,
+          userEmail
+        };
+        const res = await context.executeAction("SYNC_GOOGLE_CONTACT", payload);
+        if (res && res.synced) {
+          if (context.updateQuietly) {
+            context.updateQuietly(rowId, column.name, res);
+          } else {
+            onChange(res);
+          }
+          if (context.tableId && !rowId.startsWith("temp_")) {
+            await context.executeAction("UPDATE_RECORD", {
+              tableId: context.tableId,
+              recordId: rowId,
+              data: { [column.name]: res }
+            });
+          }
+        }
+      } catch (error) {
+        console.error("Failed to sync contact:", error);
+        addToast({ type: "warning", message: "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E1\u05E0\u05DB\u05E8\u05D5\u05DF \u05D0\u05D9\u05E9 \u05E7\u05E9\u05E8: " + error.message });
+      } finally {
+        setIsSyncing(false);
+      }
+    };
+    const handleUnlink = async () => {
+      let accessToken;
+      try {
+        let emailHint = value == null ? void 0 : value.userEmail;
+        if (!emailHint && (value == null ? void 0 : value.url)) {
+          try {
+            const parsed = new URL(value.url);
+            emailHint = parsed.searchParams.get("authuser") || void 0;
+          } catch (e) {
+          }
+        }
+        const auth = await requestGisToken(emailHint);
+        accessToken = auth.accessToken;
+      } catch (err) {
+        console.warn("[handleUnlink] Could not obtain token via GIS, falling back to server default token:", err);
+      }
+      if ((value == null ? void 0 : value.resourceName) && (context == null ? void 0 : context.executeAction)) {
+        await context.executeAction("DELETE_GOOGLE_CONTACT", {
+          resourceName: value.resourceName,
+          accessToken
+        });
+      }
+      if (context == null ? void 0 : context.updateQuietly) {
+        context.updateQuietly(rowId, column.name, null);
+      } else {
+        onChange(null);
+      }
+      if ((context == null ? void 0 : context.tableId) && (context == null ? void 0 : context.executeAction) && !rowId.startsWith("temp_")) {
+        await context.executeAction("UPDATE_RECORD", {
+          tableId: context.tableId,
+          recordId: rowId,
+          data: { [column.name]: null }
+        });
+      }
+    };
+    if (value && value.synced && value.url) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2 h-8 px-2 group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { href: value.url, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:underline flex-1 truncate text-sm", children: "\u05D0\u05D9\u05E9 \u05E7\u05E9\u05E8 \u05D2\u05D5\u05D2\u05DC" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            onClick: handleUnlink,
+            className: "text-slate-400 hover:text-rose-500 opacity-0 group-hover:opacity-100 transition-opacity p-1",
+            title: "\u05D1\u05D8\u05DC \u05E1\u05E0\u05DB\u05E8\u05D5\u05DF",
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) })
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex items-center h-8 px-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "button",
+      {
+        onClick: handleSync,
+        disabled: isSyncing,
+        className: "flex items-center gap-1.5 px-3 py-1 bg-blue-50 text-blue-600 hover:bg-blue-100 border border-blue-200 rounded-md text-xs font-medium transition-colors disabled:opacity-50",
+        children: [
+          isSyncing ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { className: "w-3.5 h-3.5 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 4v16m8-8H4" }) }),
+          "\u05E1\u05E0\u05DB\u05E8\u05DF \u05DC\u05D2\u05D5\u05D2\u05DC"
+        ]
+      }
+    ) });
+  },
   DEFAULT: ({ value, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "input",
     {
@@ -897,11 +1157,459 @@ var FORM_INPUTS = {
       value: value !== void 0 && value !== null ? String(value) : "",
       onChange: (e) => onChange(e.target.value)
     }
-  )
+  ),
+  SUB_TABLE: ({ value, column }) => {
+    if (!Array.isArray(value)) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "px-2 py-1 flex items-center h-full text-slate-300 text-xs italic", children: "\u05E8\u05D9\u05E7" });
+    const selected = value.filter((e) => e == null ? void 0 : e.isSelected);
+    if (selected.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "px-2 py-1 flex items-center h-full text-slate-300 text-xs italic", children: "\u05E8\u05D9\u05E7" });
+    const displayFields = column.subTableDisplayFields || [];
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "px-1.5 py-1 flex flex-wrap items-center gap-1 h-full", children: selected.map((entry, idx) => {
+      var _a;
+      let label = "";
+      if (entry._resolvedData && displayFields.length > 0) {
+        label = displayFields.map((f) => String(entry._resolvedData[f] || "")).filter(Boolean).join("   ");
+      }
+      if (!label) label = ((_a = entry.recordId) == null ? void 0 : _a.slice(-6)) || "...";
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "span",
+        {
+          className: "inline-flex items-center px-1.5 py-0.5 bg-amber-50 text-amber-800 border border-amber-200 rounded-full text-xs font-medium max-w-[140px] truncate",
+          title: label,
+          children: label
+        },
+        entry.recordId || idx
+      );
+    }) });
+  }
 };
 
-// src/components/TableBlock/TableBlockClient.tsx
+// src/components/TableBlock/fields/SubTableViewer.tsx
+var import_react6 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+function SubTableViewer({ rowId, column, value, onChange, context }) {
+  var _a;
+  const { addToast } = useToast();
+  const entries = Array.isArray(value) ? value : [];
+  const [linkedRecords, setLinkedRecords] = (0, import_react6.useState)([]);
+  const [targetSchema, setTargetSchema] = (0, import_react6.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react6.useState)(true);
+  const [isSearchOpen, setIsSearchOpen] = (0, import_react6.useState)(false);
+  const [searchQuery, setSearchQuery] = (0, import_react6.useState)("");
+  const [searchResults, setSearchResults] = (0, import_react6.useState)([]);
+  const [isSearching, setIsSearching] = (0, import_react6.useState)(false);
+  const [isCreating, setIsCreating] = (0, import_react6.useState)(false);
+  const [newRecordData, setNewRecordData] = (0, import_react6.useState)({});
+  const searchRef = (0, import_react6.useRef)(null);
+  const searchTimerRef = (0, import_react6.useRef)(null);
+  const executeAction = context == null ? void 0 : context.executeAction;
+  const referencedTableId = column.referencedTableId;
+  const fetchedIdsRef = (0, import_react6.useRef)(/* @__PURE__ */ new Set());
+  (0, import_react6.useEffect)(() => {
+    if (!referencedTableId || !executeAction) {
+      setIsLoading(false);
+      return;
+    }
+    const recordIdsToFetch = entries.map((e) => e.recordId).filter((id) => !fetchedIdsRef.current.has(id));
+    if (recordIdsToFetch.length === 0 && targetSchema) return;
+    if (recordIdsToFetch.length > 0) {
+      recordIdsToFetch.forEach((id) => fetchedIdsRef.current.add(id));
+    }
+    setIsLoading(true);
+    executeAction("FETCH_SUB_TABLE_RECORDS", { referencedTableId, recordIds: recordIdsToFetch }).then((res) => {
+      const payload = (res == null ? void 0 : res.data) || res;
+      if (payload == null ? void 0 : payload.records) {
+        setLinkedRecords((prev) => {
+          const map = new Map(prev.map((r) => [r.id, r]));
+          payload.records.forEach((r) => map.set(r.id, r));
+          return Array.from(map.values());
+        });
+      }
+      if (payload == null ? void 0 : payload.schema) {
+        setTargetSchema(payload.schema);
+      }
+    }).catch(() => {
+      recordIdsToFetch.forEach((id) => fetchedIdsRef.current.delete(id));
+    }).finally(() => setIsLoading(false));
+  }, [referencedTableId, executeAction, entries, targetSchema]);
+  (0, import_react6.useEffect)(() => {
+    const handleClick = (e) => {
+      if (searchRef.current && !searchRef.current.contains(e.target)) {
+        setIsSearchOpen(false);
+      }
+    };
+    if (isSearchOpen) document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [isSearchOpen]);
+  const handleSearch = (0, import_react6.useCallback)((query) => {
+    setSearchQuery(query);
+    if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
+    if (!query.trim()) {
+      setSearchResults([]);
+      return;
+    }
+    searchTimerRef.current = setTimeout(async () => {
+      if (!executeAction || !referencedTableId) return;
+      setIsSearching(true);
+      try {
+        const excludeIds = entries.map((e) => e.recordId);
+        const res = await executeAction("SEARCH_SUB_TABLE_RECORDS", {
+          referencedTableId,
+          query: query.trim(),
+          excludeIds,
+          limit: 15
+        });
+        setSearchResults(Array.isArray(res) ? res : []);
+      } catch (e) {
+        setSearchResults([]);
+      } finally {
+        setIsSearching(false);
+      }
+    }, 300);
+  }, [executeAction, referencedTableId, entries]);
+  const targetColumns = ((targetSchema == null ? void 0 : targetSchema.columns) || []).filter(
+    (c) => {
+      if (c.name === "_id" || c.type === "SUB_TABLE") return false;
+      return true;
+    }
+  );
+  const [relationOptions, setRelationOptions] = (0, import_react6.useState)({});
+  (0, import_react6.useEffect)(() => {
+    if (!executeAction || targetColumns.length === 0) return;
+    const relationCols = targetColumns.filter((c) => {
+      var _a2;
+      return ((_a2 = c.type) == null ? void 0 : _a2.toUpperCase()) === "RELATION" && c.referencedTableId;
+    });
+    relationCols.forEach(async (col) => {
+      try {
+        const options = await executeAction("FETCH_RELATION", {
+          referencedTableId: col.referencedTableId,
+          displayField: col.displayField
+        });
+        if (options && Array.isArray(options)) {
+          setRelationOptions((prev) => __spreadProps(__spreadValues({}, prev), { [col.name]: options }));
+        }
+      } catch (err) {
+        console.warn(`[SubTableViewer] Could not fetch relation options for column ${col.name}:`, err);
+      }
+    });
+  }, [executeAction, targetColumns]);
+  const refetchRelation = (0, import_react6.useCallback)(async (colName) => {
+    var _a2;
+    const col = targetColumns.find((c) => c.name === colName);
+    if (!col || ((_a2 = col.type) == null ? void 0 : _a2.toUpperCase()) !== "RELATION" || !col.referencedTableId || !executeAction) return;
+    try {
+      const options = await executeAction("FETCH_RELATION", { referencedTableId: col.referencedTableId, displayField: col.displayField });
+      if (options && Array.isArray(options)) {
+        setRelationOptions((prev) => __spreadProps(__spreadValues({}, prev), { [col.name]: options }));
+      }
+    } catch (err) {
+      console.warn(`[SubTableViewer] Could not refetch relation options for column ${col.name}:`, err);
+    }
+  }, [targetColumns, executeAction]);
+  const updateParentLinkage = async (updated) => {
+    const isNewRow = rowId.startsWith("temp_");
+    if (context == null ? void 0 : context.updateQuietly) {
+      context.updateQuietly(rowId, column.name, updated);
+    } else {
+      onChange(updated);
+    }
+    if (executeAction && (context == null ? void 0 : context.parentTableId) && !isNewRow) {
+      try {
+        const payloadToSave = updated.map(({ recordId, isSelected }) => ({ recordId, isSelected }));
+        await executeAction("UPDATE_RECORD", {
+          tableId: context.parentTableId,
+          recordId: rowId,
+          data: { [column.name]: payloadToSave }
+        });
+        if (context == null ? void 0 : context.triggerSaveSuccess) {
+          context.triggerSaveSuccess();
+        }
+      } catch (err) {
+        console.error("Failed to auto-save parent linkage", err);
+      }
+    }
+  };
+  const handleLinkRecord = (record) => {
+    fetchedIdsRef.current.add(record.id);
+    const newEntry = { recordId: record.id, isSelected: true, _resolvedData: record.data };
+    const updated = [...entries, newEntry];
+    updateParentLinkage(updated);
+    setLinkedRecords((prev) => {
+      const exists = prev.find((r) => r.id === record.id);
+      if (exists) return prev;
+      return [...prev, record];
+    });
+    setSearchQuery("");
+    setSearchResults([]);
+    setIsSearchOpen(false);
+  };
+  const handleUnlinkRecord = (recordId) => {
+    const updated = entries.filter((e) => e.recordId !== recordId);
+    updateParentLinkage(updated);
+    setLinkedRecords((prev) => prev.filter((r) => r.id !== recordId));
+  };
+  const handleToggleSelected = (recordId) => {
+    const record = linkedRecords.find((r) => r.id === recordId);
+    const updated = entries.map(
+      (e) => e.recordId === recordId ? __spreadProps(__spreadValues({}, e), { isSelected: !e.isSelected, _resolvedData: (record == null ? void 0 : record.data) || e._resolvedData }) : e
+    );
+    updateParentLinkage(updated);
+  };
+  const handleRecordCellChange = async (recordId, colName, value2) => {
+    const updatedRecords = linkedRecords.map(
+      (r) => r.id === recordId ? __spreadProps(__spreadValues({}, r), { data: __spreadProps(__spreadValues({}, r.data), { [colName]: value2 }) }) : r
+    );
+    setLinkedRecords(updatedRecords);
+    const targetRecord = updatedRecords.find((r) => r.id === recordId);
+    const updatedEntries = entries.map(
+      (e) => e.recordId === recordId ? __spreadProps(__spreadValues({}, e), { _resolvedData: targetRecord == null ? void 0 : targetRecord.data }) : e
+    );
+    if (context == null ? void 0 : context.updateQuietly) {
+      context.updateQuietly(rowId, column.name, updatedEntries);
+    } else {
+      onChange(updatedEntries);
+    }
+    if (executeAction && referencedTableId && !recordId.startsWith("temp_")) {
+      try {
+        await executeAction("UPDATE_RECORD", {
+          tableId: referencedTableId,
+          recordId,
+          data: { [colName]: value2 }
+        });
+        if (context == null ? void 0 : context.triggerSaveSuccess) {
+          context.triggerSaveSuccess();
+        }
+      } catch (err) {
+        console.error("[SubTableViewer] Failed to auto-save linked record field", err);
+      }
+    }
+  };
+  const handleCreateRecord = async () => {
+    var _a2;
+    if (!executeAction || !referencedTableId) return;
+    for (const col of targetColumns) {
+      if (col.isRequired) {
+        const val = newRecordData[col.name];
+        if (val === void 0 || val === null || typeof val === "string" && val.trim() === "") {
+          addToast({
+            type: "error",
+            message: `Validation Error: Field '${col.name}' is required but was not provided.`
+          });
+          return;
+        }
+      }
+    }
+    try {
+      const res = await executeAction("CREATE_RECORD", {
+        tableId: referencedTableId,
+        records: [newRecordData]
+      });
+      if (res && res.success === false) {
+        throw new Error(res.error || "Action execution failed");
+      }
+      const created = Array.isArray(res) ? res[0] : ((_a2 = res == null ? void 0 : res.data) == null ? void 0 : _a2[0]) || res;
+      if (created) {
+        const newRecord = {
+          id: String(created.id || created._id),
+          data: created.data || newRecordData
+        };
+        handleLinkRecord(newRecord);
+        setIsCreating(false);
+        setNewRecordData({});
+      }
+    } catch (err) {
+      const msg = (err == null ? void 0 : err.message) || String(err);
+      addToast({
+        type: "error",
+        message: msg
+      });
+    }
+  };
+  const getDisplayLabel = (record) => {
+    const fields = column.subTableDisplayFields || [];
+    if (fields.length === 0) {
+      const firstField = Object.keys(record.data).find((k) => k !== "_id");
+      return firstField ? String(record.data[firstField] || "") : record.id;
+    }
+    return fields.map((f) => String(record.data[f] || "")).filter(Boolean).join("   ");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "p-3 animate-in fade-in slide-in-from-top-2 duration-200", dir: "rtl", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-4 mb-2.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-xs font-bold text-slate-600", children: (_a = targetSchema == null ? void 0 : targetSchema.name) != null ? _a : column.referencedTableName }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative", ref: searchRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => setIsSearchOpen((prev) => !prev),
+              className: "h-7 px-2.5 text-[11px] font-semibold bg-blue-50 hover:bg-blue-100 text-blue-700 border border-blue-200 rounded-md transition-colors cursor-pointer flex items-center gap-1",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
+                "\u05E7\u05D9\u05E9\u05D5\u05E8 \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA"
+              ]
+            }
+          ),
+          isSearchOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "absolute right-0 top-full mt-1 w-72 bg-white border border-slate-200 rounded-lg shadow-xl z-50 p-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "input",
+              {
+                type: "text",
+                value: searchQuery,
+                onChange: (e) => handleSearch(e.target.value),
+                placeholder: "\u05D7\u05E4\u05E9 \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA...",
+                className: "w-full h-8 px-2.5 text-xs border border-slate-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-400 mb-1.5",
+                autoFocus: true
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "max-h-48 overflow-y-auto", children: isSearching ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-4 h-4 border-2 border-blue-400 border-t-transparent rounded-full animate-spin" }) }) : searchResults.length > 0 ? searchResults.map((r) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleLinkRecord(r),
+                className: "w-full text-right px-2 py-1.5 text-xs hover:bg-blue-50 rounded cursor-pointer transition-colors",
+                children: getDisplayLabel(r)
+              },
+              r.id
+            )) : searchQuery.trim() ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs text-slate-400 text-center py-3", children: "\u05DC\u05D0 \u05E0\u05DE\u05E6\u05D0\u05D5 \u05EA\u05D5\u05E6\u05D0\u05D5\u05EA" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs text-slate-400 text-center py-3", children: "\u05D4\u05E7\u05DC\u05D3 \u05DC\u05D7\u05D9\u05E4\u05D5\u05E9..." }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setIsCreating(true);
+              const initialData = {};
+              targetColumns.forEach((c) => {
+                if (c.defaultValue !== void 0 && c.defaultValue !== null) {
+                  initialData[c.name] = c.type === "NUMBER" || c.type === "CURRENCY" ? parseFloat(c.defaultValue) : c.type === "BOOLEAN" ? c.defaultValue === "true" || c.defaultValue === true : c.defaultValue;
+                } else {
+                  if (c.type === "NUMBER" || c.type === "CURRENCY") initialData[c.name] = 0;
+                  else if (c.type === "BOOLEAN") initialData[c.name] = false;
+                  else initialData[c.name] = "";
+                }
+              });
+              setNewRecordData(initialData);
+            },
+            className: "h-7 px-2.5 text-[11px] font-semibold bg-emerald-50 hover:bg-emerald-100 text-emerald-700 border border-emerald-200 rounded-md transition-colors cursor-pointer flex items-center gap-1",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M12 4v16m8-8H4" }) }),
+              "\u05E8\u05E9\u05D5\u05DE\u05D4 \u05D7\u05D3\u05E9\u05D4"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-5 h-5 border-2 border-blue-400 border-t-transparent rounded-full animate-spin" }) }) : entries.length === 0 && !isCreating ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-center py-6 text-xs text-slate-400", children: "\u05D0\u05D9\u05DF \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05DE\u05E7\u05D5\u05E9\u05E8\u05D5\u05EA. \u05D4\u05E9\u05EA\u05DE\u05E9 \u05D1\u05D7\u05D9\u05E4\u05D5\u05E9 \u05DB\u05D3\u05D9 \u05DC\u05E7\u05E9\u05E8 \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05E7\u05D9\u05D9\u05DE\u05D5\u05EA, \u05D0\u05D5 \u05D4\u05D5\u05E1\u05E3 \u05E8\u05E9\u05D5\u05DE\u05D4 \u05D7\u05D3\u05E9\u05D4." }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "overflow-x-auto pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("table", { className: "w-full text-xs border-collapse", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { className: "bg-slate-100/80", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: "border border-slate-200 px-2 py-1.5 text-center w-10 font-semibold text-slate-500", children: "\u05E0\u05D1\u05D7\u05E8" }),
+        targetColumns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: "border border-slate-200 px-2 py-1.5 text-right font-semibold text-slate-600 whitespace-nowrap", children: col.name }, col.name)),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: "border border-slate-200 px-2 py-1.5 w-14" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tbody", { children: [
+        entries.map((entry) => {
+          const record = linkedRecords.find((r) => r.id === entry.recordId);
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { className: "hover:bg-blue-50/30 transition-colors", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "border border-slate-200 px-2 py-1 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "input",
+              {
+                type: "checkbox",
+                checked: entry.isSelected,
+                onChange: () => handleToggleSelected(entry.recordId),
+                className: "w-3.5 h-3.5 rounded border-slate-300 text-blue-600 cursor-pointer"
+              }
+            ) }),
+            targetColumns.map((col) => {
+              var _a2, _b;
+              const colType = ((_a2 = col.type) == null ? void 0 : _a2.toUpperCase()) || "DEFAULT";
+              const InputComponent = FORM_INPUTS[colType] || FORM_INPUTS.DEFAULT;
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "border border-slate-200 p-0 relative h-8", children: record ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                InputComponent,
+                {
+                  value: (_b = record.data[col.name]) != null ? _b : colType === "BOOLEAN" ? false : "",
+                  column: col,
+                  rowId: record.id,
+                  onChange: (v) => handleRecordCellChange(record.id, col.name, v),
+                  context: __spreadProps(__spreadValues({}, context), {
+                    tableName: (targetSchema == null ? void 0 : targetSchema.name) || (targetSchema == null ? void 0 : targetSchema.tableName) || (targetSchema == null ? void 0 : targetSchema.title) || (targetSchema == null ? void 0 : targetSchema.id) || "Table",
+                    relationOptions,
+                    updateRelationOptions: (name, opts) => setRelationOptions((prev) => __spreadProps(__spreadValues({}, prev), { [name]: opts })),
+                    refetchRelation,
+                    parentRecord: { tableId: (context == null ? void 0 : context.parentTableId) || (context == null ? void 0 : context.tableId), data: context == null ? void 0 : context.rowData },
+                    rowData: record.data,
+                    tableId: targetSchema == null ? void 0 : targetSchema.id,
+                    updateQuietly: (rid, colName, val) => handleRecordCellChange(rid, colName, val)
+                  })
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-slate-300 italic px-2", children: "\u05D8\u05D5\u05E2\u05DF..." }) }, col.name);
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "border border-slate-200 px-1 py-1 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleUnlinkRecord(entry.recordId),
+                className: "text-slate-400 hover:text-rose-500 p-0.5 rounded transition-colors cursor-pointer inline-flex items-center justify-center w-full",
+                title: "\u05D4\u05E1\u05E8 \u05E7\u05D9\u05E9\u05D5\u05E8",
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            ) })
+          ] }, entry.recordId);
+        }),
+        isCreating && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { className: "bg-emerald-50/40", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "border border-emerald-200 px-2 py-1 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-emerald-500 font-bold text-[10px]", children: "\u05D7\u05D3\u05E9" }) }),
+          targetColumns.map((col) => {
+            var _a2, _b;
+            const colType = ((_a2 = col.type) == null ? void 0 : _a2.toUpperCase()) || "DEFAULT";
+            const InputComponent = FORM_INPUTS[colType] || FORM_INPUTS.DEFAULT;
+            return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "border border-emerald-200 p-0 relative h-8", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              InputComponent,
+              {
+                value: (_b = newRecordData[col.name]) != null ? _b : colType === "BOOLEAN" ? false : "",
+                column: col,
+                rowId: "new_record",
+                onChange: (v) => setNewRecordData((prev) => __spreadProps(__spreadValues({}, prev), { [col.name]: v })),
+                context: __spreadProps(__spreadValues({}, context), {
+                  tableName: (targetSchema == null ? void 0 : targetSchema.name) || (targetSchema == null ? void 0 : targetSchema.tableName) || (targetSchema == null ? void 0 : targetSchema.title) || (targetSchema == null ? void 0 : targetSchema.id) || "Table",
+                  relationOptions,
+                  refetchRelation
+                })
+              }
+            ) }, `new_${col.name}`);
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "border border-emerald-200 px-1 py-1 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: handleCreateRecord,
+                className: "p-1 text-emerald-600 hover:bg-emerald-100 rounded transition-colors",
+                title: "\u05E9\u05DE\u05D5\u05E8",
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M5 13l4 4L19 7" }) })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setIsCreating(false);
+                },
+                className: "p-1 text-rose-500 hover:bg-rose-100 rounded transition-colors",
+                title: "\u05D1\u05D9\u05D8\u05D5\u05DC",
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            )
+          ] }) })
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/components/TableBlock/TableBlockClient.tsx
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function TableBlockClient({
   data: initialRecords,
   settings: schema,
@@ -918,6 +1626,68 @@ function TableBlockClient({
   "data-testid": dataTestId
 }) {
   const { showError, addToast } = useToast();
+  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_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) {
+        try {
+          setColumnWidths(JSON.parse(savedWidths));
+        } catch (e) {
+        }
+      }
+      const savedSummary = localStorage.getItem(`table_summary_${tableKey}`);
+      if (savedSummary !== null) {
+        setShowSummary(savedSummary === "true");
+      }
+      const savedLimit = localStorage.getItem(`table_limit_${tableKey}`);
+      if (savedLimit) {
+        const parsed = parseInt(savedLimit, 10);
+        if ([20, 50, 100].includes(parsed)) {
+          setLimit(parsed);
+        }
+      }
+    }
+    setIsMounted(true);
+  }, [tableKey]);
+  const [showSummary, setShowSummary] = (0, import_react7.useState)(false);
+  const toggleSummary = () => {
+    setShowSummary((prev) => {
+      const next = !prev;
+      const tableKey2 = (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";
+      localStorage.setItem(`table_summary_${tableKey2}`, String(next));
+      return next;
+    });
+  };
+  const [resizingCol, setResizingCol] = (0, import_react7.useState)(null);
+  (0, import_react7.useEffect)(() => {
+    if (!resizingCol) return;
+    const handleMouseMove = (e) => {
+      const diffX = resizingCol.startX - e.clientX;
+      const newWidth = Math.max(100, Math.min(500, resizingCol.startWidth + diffX));
+      setColumnWidths((prev) => __spreadProps(__spreadValues({}, prev), { [resizingCol.name]: newWidth }));
+    };
+    const handleMouseUp = () => {
+      setResizingCol(null);
+      setColumnWidths((prev) => {
+        const tableKey2 = (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";
+        localStorage.setItem(`table_widths_${tableKey2}`, JSON.stringify(prev));
+        return prev;
+      });
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [resizingCol, schema]);
   const normalizeRecords = (records) => {
     return (records || []).map((row) => {
       var _c;
@@ -943,18 +1713,38 @@ function TableBlockClient({
       return __spreadProps(__spreadValues({}, row), { id: String(row.id || ""), data: rowData });
     });
   };
-  const [localColumns, setLocalColumns] = (0, import_react6.useState)(() => (schema == null ? void 0 : schema.columns) || []);
-  (0, import_react6.useEffect)(() => {
+  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]));
+    const merged = incomingCols.map((inc) => {
+      const ext = existingMap.get(inc.name);
+      if (ext) {
+        existingMap.delete(inc.name);
+        return __spreadValues(__spreadValues({}, ext), inc);
+      }
+      return inc;
+    });
+    for (const [, extCol] of existingMap) {
+      merged.push(extCol);
+    }
+    return merged.sort((a, b) => {
+      var _a, _b;
+      return ((_a = a.order) != null ? _a : 0) - ((_b = b.order) != null ? _b : 0);
+    });
+  }, []);
+  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(schema.columns);
+      setLocalColumns((prev) => mergeColumnDefs(prev, schema.columns));
     }
-  }, [schema == null ? void 0 : schema.columns]);
-  const [dirty, setDirty] = (0, import_react6.useState)({ added: [], modified: {}, deleted: [] });
-  const dirtyRef = (0, import_react6.useRef)(dirty);
-  (0, import_react6.useEffect)(() => {
+  }, [schema == null ? void 0 : schema.columns, mergeColumnDefs]);
+  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) => {
@@ -967,8 +1757,8 @@ function TableBlockClient({
     const uniqueAdded = added.filter((r) => !baseIds.has(r.id));
     return [...uniqueAdded, ...modifiedRecords];
   }, []);
-  const [data, setData] = (0, import_react6.useState)(() => normalizeRecords(initialRecords));
-  (0, import_react6.useEffect)(() => {
+  const [data, setData] = (0, import_react7.useState)(() => normalizeRecords(initialRecords));
+  (0, import_react7.useEffect)(() => {
     if (initialRecords) {
       setData(mergeWithDirty(normalizeRecords(initialRecords)));
     }
@@ -983,54 +1773,83 @@ 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]);
-  (0, import_react6.useEffect)(() => {
+  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;
-    if (!(schema == null ? void 0 : schema.columns) || schema.columns.length === 0 || (!initialRecords || initialRecords.length === 0)) {
-      executeAction("FETCH_TABLE_DATA", { tableId }).then((res) => {
-        var _a;
-        if (res) {
-          if (((_a = res.schema) == null ? void 0 : _a.columns) && res.schema.columns.length > 0) {
-            setLocalColumns(res.schema.columns);
-          }
-          if (res.records && Array.isArray(res.records)) {
-            const norm = normalizeRecords(res.records);
-            const map = /* @__PURE__ */ new Map();
-            norm.forEach((r) => map.set(r.id, __spreadValues({}, r.data)));
-            setBaseRecordsMap(map);
-            setData(mergeWithDirty(norm));
+    if (!tableId || !executeAction) return Promise.resolve();
+    const activePage = targetPage !== void 0 ? targetPage : page;
+    const skip = (activePage - 1) * limit;
+    return executeAction("FETCH_TABLE_DATA", { tableId, page: activePage, limit, skip }).then((res) => {
+      var _a;
+      if (res) {
+        if (((_a = res.schema) == null ? void 0 : _a.columns) && res.schema.columns.length > 0) {
+          setLocalColumns((prev) => mergeColumnDefs(prev, res.schema.columns));
+        }
+        if (res.records && Array.isArray(res.records)) {
+          const norm = normalizeRecords(res.records);
+          const map = /* @__PURE__ */ new Map();
+          norm.forEach((r) => map.set(r.id, __spreadValues({}, r.data)));
+          setBaseRecordsMap(map);
+          setData(norm);
+        }
+        if (res.meta) {
+          const total = typeof res.meta.totalRecords === "number" ? res.meta.totalRecords : 0;
+          const pages = typeof res.meta.totalPages === "number" ? res.meta.totalPages : Math.ceil(total / limit) || 1;
+          setTotalRecords(total);
+          setTotalPages(pages);
+          if (activePage > pages && pages >= 1) {
+            setPage(pages);
           }
+        } else if (res.records && Array.isArray(res.records)) {
+          setTotalRecords(res.records.length);
+          setTotalPages(Math.ceil(res.records.length / limit) || 1);
         }
-      }).catch((err) => {
-        console.error("[TableBlock] Failed to auto-fetch table data:", err);
-      });
+      }
+    }).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, mergeColumnDefs]);
+  (0, import_react7.useEffect)(() => {
+    refetchTableData();
+  }, [refetchTableData]);
+  const handleLimitChange = (newLimit) => {
+    setLimit(newLimit);
+    setPage(1);
+    if (typeof window !== "undefined") {
+      localStorage.setItem(`table_limit_${tableKey}`, String(newLimit));
     }
-  }, [schema == null ? void 0 : schema.tableMetaId, schema == null ? void 0 : schema.tableId, schema == null ? void 0 : schema.id, schema == null ? void 0 : schema.columns, initialRecords, executeAction, mergeWithDirty]);
-  (0, import_react6.useEffect)(() => {
+  };
+  const handlePrevPage = () => {
+    setPage((prev) => Math.max(1, prev - 1));
+  };
+  const handleNextPage = () => {
+    setPage((prev) => Math.min(totalPages, prev + 1));
+  };
+  (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 {
@@ -1050,7 +1869,7 @@ function TableBlockClient({
       console.warn(`[TableBlock] Could not fetch relation options for column ${colName}:`, err);
     }
   }, [schemaColsString, executeAction]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     let parsedCols = [];
     try {
       parsedCols = JSON.parse(schemaColsString);
@@ -1064,10 +1883,144 @@ function TableBlockClient({
       refetchRelation(col.name);
     });
   }, [schemaColsString, refetchRelation]);
-  const filteredColumns = (0, import_react6.useMemo)(() => {
-    const systemFields = ["_id", "createdAt", "updatedAt", "orgId", "tableId"];
-    return (localColumns || []).filter((col) => !systemFields.includes(col.name));
+  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";
+      const isProtected = isRequired || isUnique;
+      return __spreadProps(__spreadValues({}, col), {
+        order: typeof col.order === "number" ? col.order : idx,
+        isHidden: isProtected ? false : Boolean(col.isHidden)
+      });
+    }).sort((a, b) => {
+      var _a, _b;
+      return ((_a = a.order) != null ? _a : 0) - ((_b = b.order) != null ? _b : 0);
+    });
   }, [localColumns]);
+  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_react7.useMemo)(() => {
+    const systemFields = ["_id", "createdAt", "updatedAt", "orgId", "tableId"];
+    return normalizedColumns.filter((col) => !systemFields.includes(col.name));
+  }, [normalizedColumns]);
+  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);
+      }
+    };
+    if (isColumnsDropdownOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isColumnsDropdownOpen]);
+  const handleShowAllColumns = async () => {
+    var _a;
+    const systemFields = ["_id", "createdAt", "updatedAt", "orgId", "tableId"];
+    const systemCols = (localColumns || []).filter((c) => systemFields.includes(c.name));
+    const updatedCustomCols = customizableColumns.map((col) => __spreadProps(__spreadValues({}, col), {
+      isHidden: false
+    }));
+    const fullUpdatedColumns = [...systemCols, ...updatedCustomCols];
+    setLocalColumns(fullUpdatedColumns);
+    const targetTableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
+    if (targetTableId && executeAction) {
+      try {
+        const res = await executeAction("UPDATE_TABLE_COLUMNS", {
+          tableId: targetTableId,
+          tableMetaId: targetTableId,
+          columns: fullUpdatedColumns
+        });
+        const returnedCols = (res == null ? void 0 : res.columns) || ((_a = res == null ? void 0 : res.data) == null ? void 0 : _a.columns);
+        if (returnedCols && Array.isArray(returnedCols)) {
+          setLocalColumns((prev) => mergeColumnDefs(prev, returnedCols));
+        }
+      } catch (err) {
+        console.error("[TableBlock] Failed to save show all columns:", err);
+        showError((err == null ? void 0 : err.message) || String(err), "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05D4\u05E6\u05D2\u05EA \u05DB\u05DC \u05D4\u05E2\u05DE\u05D5\u05D3\u05D5\u05EA");
+      }
+    }
+  };
+  const handleToggleColumnVisibility = async (colName, isVisible) => {
+    var _a;
+    const systemFields = ["_id", "createdAt", "updatedAt", "orgId", "tableId"];
+    const systemCols = (localColumns || []).filter((c) => systemFields.includes(c.name));
+    const updatedCustomCols = 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;
+      if (col.name === colName) {
+        if (isProtected) {
+          return __spreadProps(__spreadValues({}, col), { isHidden: false });
+        }
+        return __spreadProps(__spreadValues({}, col), { isHidden: !isVisible });
+      }
+      return __spreadProps(__spreadValues({}, col), {
+        isHidden: isProtected ? false : Boolean(col.isHidden)
+      });
+    });
+    const fullUpdatedColumns = [...systemCols, ...updatedCustomCols];
+    setLocalColumns(fullUpdatedColumns);
+    const targetTableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
+    if (targetTableId && executeAction) {
+      try {
+        const res = await executeAction("UPDATE_TABLE_COLUMNS", {
+          tableId: targetTableId,
+          tableMetaId: targetTableId,
+          columns: fullUpdatedColumns
+        });
+        const returnedCols = (res == null ? void 0 : res.columns) || ((_a = res == null ? void 0 : res.data) == null ? void 0 : _a.columns);
+        if (returnedCols && Array.isArray(returnedCols)) {
+          setLocalColumns((prev) => mergeColumnDefs(prev, returnedCols));
+        }
+      } catch (err) {
+        console.error("[TableBlock] Failed to save column visibility:", err);
+        showError((err == null ? void 0 : err.message) || String(err), "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E2\u05D3\u05DB\u05D5\u05DF \u05D4\u05E1\u05EA\u05E8\u05EA \u05E2\u05DE\u05D5\u05D3\u05D5\u05EA");
+      }
+    }
+  };
+  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;
+    const currentCustomCols = [...customizableColumns];
+    const fromIndex = currentCustomCols.findIndex((c) => c.name === draggedName);
+    const toIndex = currentCustomCols.findIndex((c) => c.name === dropTargetName);
+    if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) return;
+    const [draggedItem] = currentCustomCols.splice(fromIndex, 1);
+    currentCustomCols.splice(toIndex, 0, draggedItem);
+    const updatedCustomCols = currentCustomCols.map((col, idx) => __spreadProps(__spreadValues({}, col), {
+      order: idx
+    }));
+    const systemFields = ["_id", "createdAt", "updatedAt", "orgId", "tableId"];
+    const systemCols = (localColumns || []).filter((c) => systemFields.includes(c.name));
+    const fullUpdatedColumns = [...systemCols, ...updatedCustomCols];
+    setLocalColumns(fullUpdatedColumns);
+    const targetTableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
+    if (targetTableId && executeAction) {
+      try {
+        const res = await executeAction("UPDATE_TABLE_COLUMNS", {
+          tableId: targetTableId,
+          tableMetaId: targetTableId,
+          columns: fullUpdatedColumns
+        });
+        const returnedCols = (res == null ? void 0 : res.columns) || ((_a = res == null ? void 0 : res.data) == null ? void 0 : _a.columns);
+        if (returnedCols && Array.isArray(returnedCols)) {
+          setLocalColumns((prev) => mergeColumnDefs(prev, returnedCols));
+        }
+      } catch (err) {
+        console.error("[TableBlock] Failed to save column reorder:", err);
+        showError((err == null ? void 0 : err.message) || String(err), "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E2\u05D3\u05DB\u05D5\u05DF \u05E1\u05D3\u05E8 \u05D4\u05E2\u05DE\u05D5\u05D3\u05D5\u05EA");
+      }
+    }
+  };
   const generateTempId = () => `temp_${Math.random().toString(36).substr(2, 9)}`;
   const handleAddRow = () => {
     const defaultData = {};
@@ -1075,6 +2028,10 @@ function TableBlockClient({
       var _a;
       const typeUpper = (_a = col.type) == null ? void 0 : _a.toUpperCase();
       let initialValue = col.defaultValue;
+      if (typeUpper === "SUB_TABLE") {
+        defaultData[col.name] = [];
+        return;
+      }
       if (initialValue !== void 0 && initialValue !== null && initialValue !== "") {
         if (typeUpper === "CURRENCY" || typeUpper === "NUMBER") {
           initialValue = parseFloat(initialValue);
@@ -1097,6 +2054,34 @@ function TableBlockClient({
     setData((prev) => [newRow, ...prev]);
     setDirty((prev) => __spreadProps(__spreadValues({}, prev), { added: [newRow, ...prev.added] }));
   };
+  const handleDuplicateRow = () => {
+    if (selectedIds.size !== 1) return;
+    const targetId = Array.from(selectedIds)[0];
+    const sourceRow = data.find((r) => r.id === targetId);
+    if (!sourceRow) return;
+    const uniqueColNames = new Set(
+      (localColumns || []).filter((c) => c.isUnique === true || String(c.isUnique) === "true").map((c) => c.name)
+    );
+    const fieldsToScrub = /* @__PURE__ */ new Set(["id", "_id", "createdAt", "updatedAt", "created_at", "updated_at"]);
+    const clonedData = __spreadValues({}, sourceRow.data);
+    Object.keys(clonedData).forEach((key) => {
+      var _a;
+      if (fieldsToScrub.has(key) || uniqueColNames.has(key)) {
+        const col = (localColumns || []).find((c) => c.name === key);
+        const typeUpper = (_a = col == null ? void 0 : col.type) == null ? void 0 : _a.toUpperCase();
+        if (typeUpper === "NUMBER" || typeUpper === "CURRENCY") {
+          clonedData[key] = 0;
+        } else if (typeUpper === "BOOLEAN") {
+          clonedData[key] = false;
+        } else {
+          clonedData[key] = "";
+        }
+      }
+    });
+    const newRow = { id: generateTempId(), data: clonedData };
+    setData((prev) => [newRow, ...prev]);
+    setDirty((prev) => __spreadProps(__spreadValues({}, prev), { added: [newRow, ...prev.added] }));
+  };
   const handleCellChange = (rowId, colName, value) => {
     setData((prev) => prev.map(
       (row) => row.id === rowId ? __spreadProps(__spreadValues({}, row), { data: __spreadProps(__spreadValues({}, row.data), { [colName]: value }) }) : row
@@ -1130,6 +2115,36 @@ function TableBlockClient({
       });
     }
   };
+  const triggerSaveSuccess = (0, import_react7.useCallback)(() => {
+    setIsSaveSuccess(true);
+    setTimeout(() => {
+      setIsSaveSuccess(false);
+    }, 2500);
+  }, []);
+  const handleQuietCellChange = (0, import_react7.useCallback)((rowId, colName, value) => {
+    setData((prev) => prev.map(
+      (row) => row.id === rowId ? __spreadProps(__spreadValues({}, row), { data: __spreadProps(__spreadValues({}, row.data), { [colName]: value }) }) : row
+    ));
+    if (rowId.startsWith("temp_")) {
+      setDirty((prev) => {
+        if (!prev.added.some((r) => r.id === rowId)) return prev;
+        return __spreadProps(__spreadValues({}, prev), {
+          added: prev.added.map(
+            (r) => r.id === rowId ? __spreadProps(__spreadValues({}, r), { data: __spreadProps(__spreadValues({}, r.data), { [colName]: value }) }) : r
+          )
+        });
+      });
+    } else {
+      setBaseRecordsMap((prev) => {
+        const next = new Map(prev);
+        const rowData = next.get(rowId);
+        if (rowData) {
+          next.set(rowId, __spreadProps(__spreadValues({}, rowData), { [colName]: value }));
+        }
+        return next;
+      });
+    }
+  }, []);
   const toggleSelectAll = (checked) => {
     const nextSelected = checked ? new Set(filteredData.map((r) => r.id)) : /* @__PURE__ */ new Set();
     setSelectedIds(nextSelected);
@@ -1159,9 +2174,15 @@ function TableBlockClient({
         const row = data.find((r) => r.id === id);
         if (row) {
           driveCols.forEach((col) => {
-            const fileObj = row.data[col.name];
-            if (fileObj && fileObj.fileId) {
-              filesToDelete.push(fileObj.fileId);
+            const fileVal = row.data[col.name];
+            if (Array.isArray(fileVal)) {
+              fileVal.forEach((fileObj) => {
+                if (fileObj && fileObj.fileId) {
+                  filesToDelete.push(fileObj.fileId);
+                }
+              });
+            } else if (fileVal && fileVal.fileId) {
+              filesToDelete.push(fileVal.fileId);
             }
           });
         }
@@ -1188,7 +2209,7 @@ function TableBlockClient({
   const formatPayload = (payload) => {
     const formatted = {};
     (localColumns || []).forEach((col) => {
-      var _a;
+      var _a, _b;
       if (["_id", "id", "createdAt", "updatedAt", "orgId", "tableId", "isSelected"].includes(col.name)) return;
       let val = payload[col.name];
       if (val !== void 0) {
@@ -1198,6 +2219,11 @@ function TableBlockClient({
           if (((_a = col.type) == null ? void 0 : _a.toUpperCase()) === "NUMBER") {
             val = val === "" ? 0 : Number(val);
             if (isNaN(val)) val = 0;
+          } else if (((_b = col.type) == null ? void 0 : _b.toUpperCase()) === "SUB_TABLE" && Array.isArray(val)) {
+            val = val.map((item) => {
+              const _a2 = item, { _resolvedData } = _a2, rest = __objRest(_a2, ["_resolvedData"]);
+              return rest;
+            });
           }
           formatted[col.name] = val;
         }
@@ -1317,6 +2343,7 @@ function TableBlockClient({
         return next;
       });
       setDirty({ added: [], modified: {}, deleted: [] });
+      await refetchTableData();
       setIsSaveSuccess(true);
       setTimeout(() => {
         setIsSaveSuccess(false);
@@ -1329,7 +2356,7 @@ function TableBlockClient({
       setIsSaving(false);
     }
   };
-  const filteredData = (0, import_react6.useMemo)(() => {
+  const filteredData = (0, import_react7.useMemo)(() => {
     if (!searchQuery) return data;
     const lowerQuery = searchQuery.toLowerCase();
     return data.filter(
@@ -1340,32 +2367,60 @@ function TableBlockClient({
   }, [data, searchQuery]);
   const isUpdatingActive = Boolean(isUpdating || isSaving);
   const errorMessage = error ? typeof error === "string" ? error : error.message || String(error) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  const columnTotals = (0, import_react7.useMemo)(() => {
+    const totals = {};
+    if (!showSummary) return totals;
+    filteredColumns.forEach((col) => {
+      var _a;
+      const typeUpper = (_a = col.type) == null ? void 0 : _a.toUpperCase();
+      if (typeUpper === "CURRENCY" || typeUpper === "NUMBER") {
+        const sum = filteredData.reduce((acc, row) => {
+          var _a2;
+          const val = (_a2 = row.data) == null ? void 0 : _a2[col.name];
+          const num = Number(val);
+          return acc + (isNaN(num) ? 0 : num);
+        }, 0);
+        totals[col.name] = sum;
+      }
+    });
+    return totals;
+  }, [filteredData, filteredColumns, showSummary]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       id: componentId,
       "data-testid": dataTestId || (componentId ? `table-block-${componentId}` : void 0),
-      className: `flex flex-col w-full bg-white border border-slate-200 rounded-xl shadow-xs overflow-hidden ${className}`,
+      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.jsxs)(
+            /* @__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_runtime6.jsx)(import_lucide_react4.Copy, { className: "w-4 h-4 text-blue-600 shrink-0" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               "button",
               {
                 onClick: handleDeleteSelected,
@@ -1373,14 +2428,120 @@ 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.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.jsxs)(
+              "button",
+              {
+                onClick: toggleSummary,
+                disabled: isLoading || isUpdatingActive,
+                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_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_runtime6.jsxs)("div", { className: "relative", ref: dropdownRef, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                "button",
+                {
+                  onClick: () => setIsColumnsDropdownOpen((prev) => !prev),
+                  disabled: isLoading || isUpdatingActive,
+                  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_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_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,
+                      "/",
+                      customizableColumns.length,
+                      ")"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleShowAllColumns,
+                      className: "text-xs text-brand hover:text-brand-hover font-semibold hover:underline cursor-pointer",
+                      children: "\u05D4\u05E6\u05D2 \u05D4\u05DB\u05DC"
+                    }
+                  )
+                ] }),
+                /* @__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;
+                  const isVisible = !col.isHidden;
+                  let protectedExplanation = "";
+                  if (isRequired && isUnique) {
+                    protectedExplanation = "\u05E9\u05D3\u05D4 \u05D7\u05D5\u05D1\u05D4 \u05D5\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";
+                  } else if (isRequired) {
+                    protectedExplanation = "\u05E9\u05D3\u05D4 \u05D7\u05D5\u05D1\u05D4 - \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";
+                  } else if (isUnique) {
+                    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_runtime6.jsxs)(
+                    "div",
+                    {
+                      onClick: () => {
+                        if (!isProtected) {
+                          handleToggleColumnVisibility(col.name, !isVisible);
+                        }
+                      },
+                      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_runtime6.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                            "input",
+                            {
+                              type: "checkbox",
+                              checked: isVisible,
+                              disabled: isProtected,
+                              onChange: () => {
+                              },
+                              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_runtime6.jsx)("span", { className: `font-medium truncate ${isProtected ? "text-slate-500" : "text-slate-700"}`, children: col.name })
+                        ] }),
+                        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_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 })
+                            ]
+                          }
+                        )
+                      ]
+                    },
+                    col.name
+                  );
+                }) })
+              ] })
+            ] }),
+            /* @__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...",
@@ -1390,36 +2551,45 @@ function TableBlockClient({
                   className: "w-full h-9 px-3 pr-9 text-xs border border-slate-300 rounded-lg bg-white shadow-2xs focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 text-slate-800 disabled:opacity-50"
                 }
               ),
-              /* @__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" }) })
+              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_runtime6.jsx)(import_lucide_react4.X, { className: "w-3.5 h-3.5" })
+                }
+              ) : /* @__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", 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", 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", 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",
@@ -1429,67 +2599,313 @@ function TableBlockClient({
                   className: "w-4 h-4 rounded border-slate-300 text-brand"
                 }
               ) }),
-              filteredColumns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: "border-b border-l border-slate-200 px-4 py-2.5 font-semibold text-slate-700 whitespace-nowrap min-w-[140px]", children: col.name }, col.name))
-            ] }) }),
-            /* @__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 + 1, 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) => {
+                const isDragging = draggedColName === col.name;
+                const isDragOver = dragOverColName === col.name;
+                const currentWidth = columnWidths[col.name] || 200;
+                return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                  "th",
+                  {
+                    style: { width: currentWidth, minWidth: currentWidth, maxWidth: currentWidth },
+                    draggable: !isLoading && !isUpdatingActive,
+                    onDragStart: (e) => {
+                      e.dataTransfer.setData("text/plain", col.name);
+                      e.dataTransfer.effectAllowed = "move";
+                      setDraggedColName(col.name);
+                    },
+                    onDragOver: (e) => {
+                      e.preventDefault();
+                      e.dataTransfer.dropEffect = "move";
+                      if (dragOverColName !== col.name) {
+                        setDragOverColName(col.name);
+                      }
+                    },
+                    onDragLeave: () => {
+                      if (dragOverColName === col.name) {
+                        setDragOverColName(null);
+                      }
+                    },
+                    onDrop: (e) => {
+                      e.preventDefault();
+                      if (draggedColName && draggedColName !== col.name) {
+                        handleColumnReorder(draggedColName, col.name);
+                      }
+                      setDraggedColName(null);
+                      setDragOverColName(null);
+                    },
+                    onDragEnd: () => {
+                      setDraggedColName(null);
+                      setDragOverColName(null);
+                    },
+                    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_runtime6.jsx)(
+                        "div",
+                        {
+                          onMouseDown: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            setResizingCol({ name: col.name, startWidth: currentWidth, startX: e.clientX });
+                          },
+                          className: "absolute left-0 top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-brand active:bg-brand-hover z-20",
+                          title: "\u05E9\u05E0\u05D4 \u05D2\u05D5\u05D3\u05DC \u05E2\u05DE\u05D5\u05D3\u05D4"
+                        }
+                      ),
+                      /* @__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_runtime6.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M8 9h.01M8 15h.01M16 9h.01M16 15h.01" })
+                          }
+                        )
+                      ] })
+                    ]
+                  },
+                  col.name
+                );
+              }),
+              /* @__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_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);
-              })
-            ] }, row.id)) })
+                )
+              ] }, 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();
+                const isNumeric = typeUpper === "CURRENCY" || typeUpper === "NUMBER";
+                const total = columnTotals[col.name];
+                let displayVal = "";
+                if (isNumeric && total !== void 0) {
+                  displayVal = new Intl.NumberFormat("en-US").format(total);
+                  if (typeUpper === "CURRENCY") {
+                    const symbol = getCurrencySymbol(col.currencySymbol);
+                    displayVal = symbol ? `${symbol} ${displayVal}` : displayVal;
+                  }
+                }
+                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_runtime6.jsx)("td", { className: "border-b border-slate-200 bg-slate-50 pointer-events-none" })
+            ] }) })
+          ] })
+        ] }),
+        /* @__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,
+                onChange: (e) => handleLimitChange(Number(e.target.value)),
+                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_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_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_runtime6.jsx)("strong", { className: "text-slate-900", children: page }),
+              " \u05DE\u05EA\u05D5\u05DA ",
+              /* @__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_runtime6.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "button",
+                {
+                  onClick: handlePrevPage,
+                  disabled: page <= 1 || isLoading || isUpdatingActive,
+                  className: "px-3 py-1.5 bg-white border border-slate-300 hover:bg-slate-100 font-semibold text-slate-700 rounded-lg shadow-2xs disabled:opacity-40 disabled:pointer-events-none transition-colors cursor-pointer",
+                  title: "\u05E2\u05DE\u05D5\u05D3 \u05E7\u05D5\u05D3\u05DD",
+                  children: "\u05D4\u05E7\u05D5\u05D3\u05DD"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "button",
+                {
+                  onClick: handleNextPage,
+                  disabled: page >= totalPages || isLoading || isUpdatingActive,
+                  className: "px-3 py-1.5 bg-white border border-slate-300 hover:bg-slate-100 font-semibold text-slate-700 rounded-lg shadow-2xs disabled:opacity-40 disabled:pointer-events-none transition-colors cursor-pointer",
+                  title: "\u05E2\u05DE\u05D5\u05D3 \u05D4\u05D1\u05D0",
+                  children: "\u05D4\u05D1\u05D0"
+                }
+              )
+            ] })
           ] })
         ] })
       ]
     }
   );
 }
+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