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

package/dist/index.js

@@ -47,6 +47,7 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
@@ -60,13 +61,32 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  ColumnHeaderTitle: () => ColumnHeaderTitle,
+  DatePickerCell: () => DatePickerCell,
+  LinkPickerCell: () => LinkPickerCell,
+  PASTEL_PALETTES: () => PASTEL_PALETTES,
+  RelationPickerCell: () => RelationPickerCell,
   TableBlock: () => TableBlock,
+  TimePickerCell: () => TimePickerCell,
   ToastContext: () => ToastContext,
   ToastProvider: () => ToastProvider,
   UNIVERSE_COMPONENTS: () => UNIVERSE_COMPONENTS,
+  calculateMinColumnWidth: () => calculateMinColumnWidth,
   cn: () => cn,
+  formatConflictCellValue: () => formatConflictCellValue,
   formatPhoneDisplay: () => formatPhoneDisplay,
+  formatTimeInput: () => formatTimeInput,
+  formatTimeIso: () => formatTimeIso,
+  getDeterministicPastelBadge: () => getDeterministicPastelBadge,
+  measureTextWidth: () => measureTextWidth,
+  normalizeRelationValue: () => normalizeRelationValue,
   openWhatsAppChat: () => openWhatsAppChat,
+  parseLinkValue: () => parseLinkValue,
+  parseTimeParts: () => parseTimeParts,
+  resolveProtocol: () => resolveProtocol,
+  splitHeaderTitle: () => splitHeaderTitle,
+  useColumnReorder: () => useColumnReorder,
+  useColumnResize: () => useColumnResize,
   useToast: () => useToast
 });
 module.exports = __toCommonJS(src_exports);
@@ -108,8 +128,46 @@ function formatPhoneDisplay(phone) {
   return phone;
 }
 
+// src/utils/colors.ts
+var PASTEL_PALETTES = [
+  { bg: "bg-blue-50", text: "text-blue-700", border: "border-blue-200" },
+  { bg: "bg-emerald-50", text: "text-emerald-700", border: "border-emerald-200" },
+  { bg: "bg-violet-50", text: "text-violet-700", border: "border-violet-200" },
+  { bg: "bg-amber-50", text: "text-amber-700", border: "border-amber-200" },
+  { bg: "bg-rose-50", text: "text-rose-700", border: "border-rose-200" },
+  { bg: "bg-cyan-50", text: "text-cyan-700", border: "border-cyan-200" },
+  { bg: "bg-indigo-50", text: "text-indigo-700", border: "border-indigo-200" },
+  { bg: "bg-teal-50", text: "text-teal-700", border: "border-teal-200" },
+  { bg: "bg-sky-50", text: "text-sky-700", border: "border-sky-200" },
+  { bg: "bg-fuchsia-50", text: "text-fuchsia-700", border: "border-fuchsia-200" },
+  { bg: "bg-pink-50", text: "text-pink-700", border: "border-pink-200" },
+  { bg: "bg-purple-50", text: "text-purple-700", border: "border-purple-200" },
+  { bg: "bg-orange-50", text: "text-orange-700", border: "border-orange-200" },
+  { bg: "bg-red-50", text: "text-red-700", border: "border-red-200" },
+  { bg: "bg-lime-50", text: "text-lime-700", border: "border-lime-200" },
+  { bg: "bg-green-50", text: "text-green-700", border: "border-green-200" },
+  { bg: "bg-yellow-50", text: "text-yellow-700", border: "border-yellow-200" }
+];
+function getDeterministicPastelBadge(key) {
+  if (!key) return PASTEL_PALETTES[0];
+  let hash = 2166136261;
+  for (let i = 0; i < key.length; i++) {
+    hash ^= key.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  const index = Math.abs(hash) % PASTEL_PALETTES.length;
+  return PASTEL_PALETTES[index];
+}
+
+// src/types/data.types.ts
+var data_types_exports = {};
+__reExport(data_types_exports, require("@universe-platform/shared"));
+
+// src/index.ts
+__reExport(src_exports, data_types_exports, module.exports);
+
 // src/components/TableBlock/TableBlockClient.tsx
-var import_react7 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 
 // src/hooks/useToast.ts
 var import_react2 = require("react");
@@ -309,7 +367,7 @@ function useToast() {
 }
 
 // src/components/TableBlock/fields/fieldRegistry.tsx
-var import_react5 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 
 // src/components/TableBlock/fields/DrivePickerCell.tsx
 var import_react3 = __toESM(require("react"));
@@ -766,214 +824,1067 @@ function DatePickerCell({ value, onChange, readOnly = false }) {
   ] });
 }
 
-// src/components/TableBlock/fields/fieldRegistry.tsx
+// src/components/TableBlock/fields/TimePickerCell.tsx
+var import_react5 = require("react");
+var import_lucide_react4 = require("lucide-react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var CURRENCY_SYMBOLS = {
-  USD: "$",
-  EUR: "\u20AC",
-  ILS: "\u20AA",
-  GBP: "\xA3"
-};
-function getCurrencySymbol(code) {
-  if (!code) return "";
-  return CURRENCY_SYMBOLS[code.toUpperCase()] || code;
-}
-function getRelationDisplayLabel(opt, column) {
-  if (!opt) return "\u05E8\u05E9\u05D5\u05DE\u05D4 \u05D7\u05E1\u05E8\u05D4";
-  const val = column.displayField && opt.data ? opt.data[column.displayField] : void 0;
-  if (val !== void 0 && val !== null && val !== "") {
-    return String(val);
+function parseTimeParts(val) {
+  if (val === void 0 || val === null || val === "") return null;
+  if (typeof val === "string") {
+    const trimmed = val.trim();
+    if (!trimmed) return null;
+    const match = trimmed.match(/^(\d{1,2})[:.](\d{1,2})(?:[:.]\d{1,2})?$/);
+    if (match) {
+      const hour = parseInt(match[1], 10);
+      const minute = parseInt(match[2], 10);
+      if (hour >= 0 && hour <= 23 && minute >= 0 && minute <= 59) {
+        return { hour, minute };
+      }
+      return null;
+    }
+    if (trimmed.includes("T")) {
+      const d = new Date(trimmed);
+      if (!isNaN(d.getTime())) {
+        return { hour: d.getHours(), minute: d.getMinutes() };
+      }
+    }
+  } else if (val instanceof Date && !isNaN(val.getTime())) {
+    return { hour: val.getHours(), minute: val.getMinutes() };
   }
-  if (opt.label && opt.label !== opt.id) {
-    return String(opt.label);
+  return null;
+}
+function formatTimeIso(hour, minute) {
+  const hh = String(hour).padStart(2, "0");
+  const mm = String(minute).padStart(2, "0");
+  return `${hh}:${mm}`;
+}
+function formatTimeInput(input) {
+  if (!input) return "";
+  const digits = String(input).replace(/\D/g, "");
+  if (!digits) return "";
+  if (digits.length === 1) {
+    const d = parseInt(digits, 10);
+    if (d > 2) {
+      return `0${d}:`;
+    }
+    return `${digits}:`;
   }
-  if (opt.data) {
-    const fallbackField = Object.keys(opt.data).find((k) => {
-      if (k === "_id" || k === "id") return false;
-      const v = opt.data[k];
-      if (typeof v === "string" && v.trim() !== "") return true;
-      if (typeof v === "number" && !isNaN(v)) return true;
-      return false;
-    });
-    if (fallbackField) return String(opt.data[fallbackField]);
+  const h = parseInt(digits.slice(0, 2), 10);
+  const hh = h > 23 ? "23" : digits.slice(0, 2);
+  if (digits.length === 2) {
+    return `${hh}:`;
   }
-  if (opt.label) {
-    return String(opt.label);
+  if (digits.length === 3) {
+    return `${hh}:${digits[2]}`;
   }
-  return "\u05E2\u05E8\u05DA \u05E8\u05D9\u05E7";
+  const m = parseInt(digits.slice(2, 4), 10);
+  const mm = m > 59 ? "59" : digits.slice(2, 4);
+  return `${hh}:${mm}`;
 }
-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: 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: displayValue,
-          onFocus: () => setIsFocused(true),
-          onBlur: () => setIsFocused(false),
-          onChange: (e) => {
-            const val = e.target.value;
-            onChange(val === "" ? "" : Number(val));
-          }
+var ALL_MINUTES = Array.from({ length: 60 }, (_, i) => i);
+function TimePickerCell({ value, onChange, readOnly = false }) {
+  var _a, _b;
+  const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
+  const containerRef = (0, import_react5.useRef)(null);
+  const hoursListRef = (0, import_react5.useRef)(null);
+  const minutesListRef = (0, import_react5.useRef)(null);
+  const [popoverPos, setPopoverPos] = (0, import_react5.useState)({ top: 0, right: 0 });
+  const parsedParts = (0, import_react5.useMemo)(() => parseTimeParts(value), [value]);
+  const displayString = (0, import_react5.useMemo)(() => {
+    return parsedParts ? formatTimeIso(parsedParts.hour, parsedParts.minute) : "";
+  }, [parsedParts]);
+  const [rawInput, setRawInput] = (0, import_react5.useState)(displayString);
+  (0, import_react5.useEffect)(() => {
+    setRawInput(displayString);
+  }, [displayString]);
+  const selectedHour = (_a = parsedParts == null ? void 0 : parsedParts.hour) != null ? _a : null;
+  const selectedMinute = (_b = parsedParts == null ? void 0 : parsedParts.minute) != null ? _b : null;
+  const updatePopoverPosition = (0, import_react5.useCallback)(() => {
+    if (containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      const right = window.innerWidth - rect.right;
+      const popoverHeight = 260;
+      const spaceBelow = window.innerHeight - rect.bottom;
+      if (spaceBelow < popoverHeight && rect.top > popoverHeight) {
+        setPopoverPos({
+          top: Math.max(10, rect.top - popoverHeight - 4),
+          right: Math.max(10, right)
+        });
+      } else {
+        setPopoverPos({
+          top: Math.min(window.innerHeight - popoverHeight - 10, rect.bottom + 4),
+          right: Math.max(10, right)
+        });
+      }
+    }
+  }, []);
+  (0, import_react5.useEffect)(() => {
+    if (!isOpen) return;
+    updatePopoverPosition();
+    function handleScrollOrResize() {
+      updatePopoverPosition();
+    }
+    function handleClickOutside(event) {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        const popoverEl = document.getElementById("time-picker-popover");
+        if (popoverEl && popoverEl.contains(event.target)) {
+          return;
         }
-      )
-    ] });
-  },
-  TIME: ({ value, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "input",
-    {
-      type: "time",
-      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 || "",
-      onChange: (e) => onChange(e.target.value)
+        setIsOpen(false);
+      }
     }
-  ),
-  LINK: ({ value, onChange }) => {
-    const [isEditing, setIsEditing] = import_react5.default.useState(false);
-    const label = (value == null ? void 0 : value.label) || "";
-    const url = (value == null ? void 0 : value.url) || "";
-    if (!isEditing) {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2 px-2 py-1 h-full w-full", children: [
-        url ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:underline flex-1 truncate", children: label || url }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-slate-400 italic flex-1 text-sm", children: "\u05E8\u05D9\u05E7" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "button",
-          {
-            onClick: () => setIsEditing(true),
-            className: "text-xs font-medium text-slate-400 hover:text-blue-500 p-1 rounded transition-colors",
-            title: "\u05E2\u05E8\u05D5\u05DA \u05E7\u05D9\u05E9\u05D5\u05E8",
-            children: "\u05E2\u05E8\u05D9\u05DB\u05D4"
-          }
-        )
-      ] });
+    window.addEventListener("scroll", handleScrollOrResize, true);
+    window.addEventListener("resize", handleScrollOrResize);
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      window.removeEventListener("scroll", handleScrollOrResize, true);
+      window.removeEventListener("resize", handleScrollOrResize);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen, updatePopoverPosition]);
+  (0, import_react5.useEffect)(() => {
+    if (isOpen) {
+      if (selectedHour !== null && hoursListRef.current) {
+        const activeHourBtn = hoursListRef.current.querySelector('[data-selected="true"]');
+        if (activeHourBtn) {
+          activeHourBtn.scrollIntoView({ block: "center" });
+        }
+      }
+      if (selectedMinute !== null && minutesListRef.current) {
+        const activeMinBtn = minutesListRef.current.querySelector('[data-selected="true"]');
+        if (activeMinBtn) {
+          activeMinBtn.scrollIntoView({ block: "center" });
+        }
+      }
+    }
+  }, [isOpen, selectedHour, selectedMinute]);
+  const handleInputChange = (e) => {
+    let val = e.target.value;
+    if (val.length === 2 && !val.includes(":") && rawInput.length === 1) {
+      val += ":";
+    }
+    if (val.length > 5) return;
+    setRawInput(val);
+    if (val.length === 5 && /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/.test(val)) {
+      onChange(val);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleInputBlur();
+      setIsOpen(false);
+      return;
+    }
+    if (e.key === "Backspace" || e.key === "Delete" || e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "Tab" || e.key === "Escape" || (e.ctrlKey || e.metaKey)) {
+      return;
+    }
+    if (e.key === ":") return;
+    if (!/^\d$/.test(e.key)) {
+      e.preventDefault();
+    }
+  };
+  const handleInputBlur = () => {
+    let text = rawInput.trim();
+    if (!text) {
+      onChange(null);
+      return;
+    }
+    if (!text.includes(":")) {
+      if (text.length === 1 || text.length === 2) {
+        text = `${text}:00`;
+      } else if (text.length === 3) {
+        text = `0${text[0]}:${text.slice(1)}`;
+      } else if (text.length === 4) {
+        text = `${text.slice(0, 2)}:${text.slice(2)}`;
+      }
+    } else if (text.endsWith(":")) {
+      text = `${text}00`;
+    }
+    const parts = parseTimeParts(text);
+    if (parts) {
+      const iso = formatTimeIso(parts.hour, parts.minute);
+      setRawInput(iso);
+      onChange(iso);
+    } else {
+      setRawInput(displayString);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex gap-2 p-1 w-full min-w-[250px] items-center bg-white border border-blue-200 rounded shadow-sm z-10", children: [
+  };
+  const handleSelectHour = (h) => {
+    const m = selectedMinute != null ? selectedMinute : 0;
+    const iso = formatTimeIso(h, m);
+    onChange(iso);
+    setRawInput(iso);
+  };
+  const handleSelectMinute = (m) => {
+    const h = selectedHour != null ? selectedHour : (/* @__PURE__ */ new Date()).getHours();
+    const iso = formatTimeIso(h, m);
+    onChange(iso);
+    setRawInput(iso);
+  };
+  const handleSetNow = () => {
+    const now = /* @__PURE__ */ new Date();
+    const iso = formatTimeIso(now.getHours(), now.getMinutes());
+    onChange(iso);
+    setRawInput(iso);
+  };
+  const handleClear = () => {
+    onChange(null);
+    setRawInput("");
+    setIsOpen(false);
+  };
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1.5 px-2 h-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react4.Clock, { className: "w-3.5 h-3.5 text-slate-400 shrink-0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-sm font-normal text-slate-800 tracking-wider", dir: "ltr", children: displayString || "-" })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref: containerRef, className: "relative w-full h-full flex items-center px-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1.5", children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "input",
+        "button",
         {
-          type: "text",
-          placeholder: "Label",
-          className: "flex-1 h-8 px-2 bg-transparent focus:outline-none text-sm border-r",
-          value: label,
-          onChange: (e) => onChange({ label: e.target.value, url })
+          type: "button",
+          onClick: () => {
+            setIsOpen((prev) => {
+              const next = !prev;
+              if (next) updatePopoverPosition();
+              return next;
+            });
+          },
+          className: "p-1 text-slate-400 hover:text-blue-600 rounded transition-colors cursor-pointer shrink-0",
+          title: "\u05D1\u05D7\u05E8 \u05E9\u05E2\u05D4",
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react4.Clock, { className: "w-4 h-4" })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "input",
         {
-          type: "url",
-          placeholder: "URL",
-          className: "flex-1 h-8 px-2 bg-transparent focus:outline-none text-sm",
-          value: url,
-          onChange: (e) => onChange({ label, url: e.target.value })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "button",
-        {
-          onClick: () => setIsEditing(false),
-          className: "text-xs font-medium text-green-600 hover:text-green-700 p-1 mx-1 rounded transition-colors",
-          title: "\u05E9\u05DE\u05D5\u05E8",
-          children: "\u05E9\u05DE\u05D5\u05E8"
+          type: "text",
+          dir: "ltr",
+          placeholder: "--:--",
+          className: "w-14 h-7 px-1 bg-transparent focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-400 text-sm font-normal text-slate-800 tracking-wider rounded text-center",
+          value: rawInput,
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          onBlur: handleInputBlur
         }
       )
-    ] });
-  },
-  BOOLEAN: ({ value, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex items-center justify-center w-full h-full p-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "input",
-    {
-      type: "checkbox",
-      checked: !!value,
-      onChange: (e) => onChange(e.target.checked),
-      className: "w-4 h-4 rounded border-slate-300 text-brand"
-    }
-  ) }),
-  GOOGLE_DRIVE_FILE: ({ value, onChange, column, rowId, context }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    DrivePickerCell,
-    {
-      value: value || [],
-      onChange,
-      column,
-      rowId,
-      tableName: context == null ? void 0 : context.tableName,
-      onMarkForDeletion: context == null ? void 0 : context.onMarkForDeletion,
-      context
-    }
-  ),
-  RELATION: ({ value, onChange, column, context }) => {
-    var _a;
-    const options = ((_a = context == null ? void 0 : context.relationOptions) == null ? void 0 : _a[column.name]) || [];
-    import_react5.default.useEffect(() => {
-      if (typeof value === "string" && value !== "" && options.length > 0) {
-        const isValidId = options.some((o) => String(o.id) === String(value));
-        if (!isValidId) {
-          const match = options.find(
-            (o) => String(getRelationDisplayLabel(o, column)).trim() === String(value).trim()
-          );
-          if (match) {
-            onChange(match.id);
-          } else {
-            onChange("");
-          }
-        }
-      }
-    }, [value, options, column, onChange]);
-    const processedOptions = options.map((opt) => __spreadProps(__spreadValues({}, opt), {
-      _displayLabel: getRelationDisplayLabel(opt, column)
-    }));
-    const validOptions = processedOptions.filter((o) => o._displayLabel !== "\u05D4\u05E2\u05E8\u05DA \u05E9\u05D1\u05E8\u05E9\u05D5\u05DE\u05D4 \u05D4\u05DE\u05E7\u05D5\u05E9\u05E8\u05EA \u05E0\u05E9\u05D0\u05E8 \u05E8\u05D9\u05E7");
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-      "select",
+    ] }),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
       {
-        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),
-        onFocus: () => {
-          if (context == null ? void 0 : context.refetchRelation) {
-            context.refetchRelation(column.name);
-          }
-        },
+        id: "time-picker-popover",
+        dir: "rtl",
+        style: { top: `${popoverPos.top}px`, right: `${popoverPos.right}px` },
+        className: "fixed z-[99999] w-64 bg-white rounded-xl shadow-2xl border border-slate-200 p-3.5 animate-in fade-in zoom-in-95 duration-150",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "", children: "\u05D1\u05D7\u05E8..." }),
-          validOptions.length > 0 ? validOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: opt.id, children: opt._displayLabel }, opt.id)) : options.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "empty_all", disabled: true, children: "\u05DB\u05DC \u05D4\u05E2\u05E8\u05DB\u05D9\u05DD \u05D1\u05D8\u05D1\u05DC\u05D4 \u05D4\u05DE\u05E7\u05D5\u05E9\u05E8\u05EA \u05E8\u05D9\u05E7\u05D9\u05DD" }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between pb-2 mb-2 border-b border-slate-100", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1.5 text-xs font-semibold text-slate-700", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react4.Clock, { className: "w-3.5 h-3.5 text-blue-600" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "\u05D1\u05D7\u05D9\u05E8\u05EA \u05E9\u05E2\u05D4" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleSetNow,
+                  className: "text-[11px] px-1.5 py-0.5 font-medium text-blue-600 hover:bg-blue-50 rounded transition-colors cursor-pointer",
+                  children: "\u05E2\u05DB\u05E9\u05D9\u05D5"
+                }
+              ),
+              displayString && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleClear,
+                  className: "text-[11px] px-1.5 py-0.5 font-medium text-slate-500 hover:text-rose-600 hover:bg-rose-50 rounded transition-colors cursor-pointer",
+                  children: "\u05E0\u05E7\u05D4"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setIsOpen(false),
+                  className: "p-0.5 text-slate-400 hover:text-slate-600 rounded transition-colors cursor-pointer mr-0.5",
+                  title: "\u05E1\u05D2\u05D5\u05E8",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react4.X, { className: "w-3.5 h-3.5" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex items-center justify-center py-1 mb-2 bg-slate-50 border border-slate-100 rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-base font-semibold text-slate-800 tracking-wider", dir: "ltr", children: displayString || "--:--" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-[11px] font-medium text-slate-400 text-center mb-1", children: "\u05D3\u05E7\u05D5\u05EA" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "div",
+                {
+                  ref: minutesListRef,
+                  className: "h-44 overflow-y-auto border border-slate-100 rounded-lg p-1 space-y-0.5 bg-slate-50/50",
+                  children: ALL_MINUTES.map((m) => {
+                    const isSelected = selectedMinute === m;
+                    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        "data-selected": isSelected,
+                        onClick: () => handleSelectMinute(m),
+                        className: `w-full py-1 text-xs text-center rounded transition-colors cursor-pointer ${isSelected ? "bg-blue-600 text-white font-medium shadow-xs" : "text-slate-700 hover:bg-slate-200/70"}`,
+                        children: String(m).padStart(2, "0")
+                      },
+                      m
+                    );
+                  })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-[11px] font-medium text-slate-400 text-center mb-1", children: "\u05E9\u05E2\u05D5\u05EA" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "div",
+                {
+                  ref: hoursListRef,
+                  className: "h-44 overflow-y-auto border border-slate-100 rounded-lg p-1 space-y-0.5 bg-slate-50/50",
+                  children: Array.from({ length: 24 }, (_, i) => {
+                    const isSelected = selectedHour === i;
+                    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        "data-selected": isSelected,
+                        onClick: () => handleSelectHour(i),
+                        className: `w-full py-1 text-xs text-center rounded transition-colors cursor-pointer ${isSelected ? "bg-blue-600 text-white font-medium shadow-xs" : "text-slate-700 hover:bg-slate-200/70"}`,
+                        children: String(i).padStart(2, "0")
+                      },
+                      i
+                    );
+                  })
+                }
+              )
+            ] })
+          ] })
         ]
       }
-    );
-  },
-  NUMBER: ({ value, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "input",
-    {
-      type: "number",
-      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 ? value : "",
-      onChange: (e) => {
-        const val = e.target.value;
-        onChange(val === "" ? "" : Number(val));
-      }
+    )
+  ] });
+}
+
+// src/components/TableBlock/fields/LinkPickerCell.tsx
+var import_react6 = require("react");
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function parseLinkValue(val) {
+  if (!val) return { url: "", label: "" };
+  if (typeof val === "string") {
+    return { url: val.trim(), label: "" };
+  }
+  if (typeof val === "object") {
+    return {
+      url: typeof val.url === "string" ? val.url.trim() : "",
+      label: typeof val.label === "string" ? val.label.trim() : ""
+    };
+  }
+  return { url: "", label: "" };
+}
+function resolveProtocol(url) {
+  const trimmed = url.trim();
+  if (!trimmed) return "";
+  if (/^https?:\/\//i.test(trimmed)) {
+    return trimmed;
+  }
+  return `https://${trimmed}`;
+}
+function LinkPickerCell({ value, onChange, readOnly = false }) {
+  const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
+  const containerRef = (0, import_react6.useRef)(null);
+  const urlInputRef = (0, import_react6.useRef)(null);
+  const [popoverPos, setPopoverPos] = (0, import_react6.useState)({ top: 0, right: 0 });
+  const currentLink = parseLinkValue(value);
+  const [draftUrl, setDraftUrl] = (0, import_react6.useState)(currentLink.url);
+  const [draftLabel, setDraftLabel] = (0, import_react6.useState)(currentLink.label);
+  const draftUrlRef = (0, import_react6.useRef)(draftUrl);
+  const draftLabelRef = (0, import_react6.useRef)(draftLabel);
+  (0, import_react6.useEffect)(() => {
+    draftUrlRef.current = draftUrl;
+  }, [draftUrl]);
+  (0, import_react6.useEffect)(() => {
+    draftLabelRef.current = draftLabel;
+  }, [draftLabel]);
+  (0, import_react6.useEffect)(() => {
+    if (!isOpen) {
+      setDraftUrl(currentLink.url);
+      setDraftLabel(currentLink.label);
     }
-  ),
-  PHONE: ({ value, onChange, column }) => {
-    var _a;
-    const enableWhatsApp = (_a = column == null ? void 0 : column.config) == null ? void 0 : _a.enableWhatsApp;
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center w-full h-full px-2 gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "input",
-        {
+  }, [value, isOpen]);
+  const updatePopoverPosition = (0, import_react6.useCallback)(() => {
+    if (containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      const right = window.innerWidth - rect.right;
+      const popoverHeight = 220;
+      const spaceBelow = window.innerHeight - rect.bottom;
+      if (spaceBelow < popoverHeight && rect.top > popoverHeight) {
+        setPopoverPos({
+          top: Math.max(10, rect.top - popoverHeight - 4),
+          right: Math.max(10, right)
+        });
+      } else {
+        setPopoverPos({
+          top: Math.min(window.innerHeight - popoverHeight - 10, rect.bottom + 4),
+          right: Math.max(10, right)
+        });
+      }
+    }
+  }, []);
+  const handleSaveAndClose = (0, import_react6.useCallback)(() => {
+    const rawUrl = draftUrlRef.current.trim();
+    const rawLabel = draftLabelRef.current.trim();
+    if (!rawUrl) {
+      onChange(null);
+    } else {
+      const resolved = resolveProtocol(rawUrl);
+      onChange({
+        url: resolved,
+        label: rawLabel
+      });
+    }
+    setIsOpen(false);
+  }, [onChange]);
+  const handleOpen = () => {
+    setDraftUrl(currentLink.url);
+    setDraftLabel(currentLink.label);
+    updatePopoverPosition();
+    setIsOpen(true);
+    setTimeout(() => {
+      var _a;
+      (_a = urlInputRef.current) == null ? void 0 : _a.focus();
+    }, 50);
+  };
+  (0, import_react6.useEffect)(() => {
+    if (!isOpen) return;
+    updatePopoverPosition();
+    function handleScrollOrResize() {
+      updatePopoverPosition();
+    }
+    function handleClickOutside(event) {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        const popoverEl = document.getElementById("link-picker-popover");
+        if (popoverEl && popoverEl.contains(event.target)) {
+          return;
+        }
+        handleSaveAndClose();
+      }
+    }
+    window.addEventListener("scroll", handleScrollOrResize, true);
+    window.addEventListener("resize", handleScrollOrResize);
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      window.removeEventListener("scroll", handleScrollOrResize, true);
+      window.removeEventListener("resize", handleScrollOrResize);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen, updatePopoverPosition, handleSaveAndClose]);
+  const handleClear = () => {
+    onChange(null);
+    setDraftUrl("");
+    setDraftLabel("");
+    setIsOpen(false);
+  };
+  if (readOnly) {
+    if (!currentLink.url) {
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "px-2 py-1 flex items-center h-full text-slate-400 text-xs italic", children: "-" });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "px-2 py-1 flex items-center h-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "a",
+      {
+        href: currentLink.url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "text-blue-600 hover:underline truncate text-sm flex items-center gap-1.5",
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react5.ExternalLink, { className: "w-3.5 h-3.5 shrink-0 text-blue-500" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "truncate", children: currentLink.label || currentLink.url })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref: containerRef, className: "relative w-full h-full flex items-center justify-between px-2 py-1 group", children: [
+    currentLink.url ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "a",
+      {
+        href: currentLink.url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "text-blue-600 hover:underline truncate text-sm flex items-center gap-1.5 flex-1 min-w-0",
+        onClick: (e) => e.stopPropagation(),
+        title: currentLink.url,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react5.ExternalLink, { className: "w-3.5 h-3.5 shrink-0 text-blue-500" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "truncate", children: currentLink.label || currentLink.url })
+        ]
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "span",
+      {
+        className: "text-slate-400 italic text-sm flex-1 cursor-pointer select-none",
+        onClick: handleOpen,
+        children: "\u05E8\u05D9\u05E7"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          if (isOpen) {
+            handleSaveAndClose();
+          } else {
+            handleOpen();
+          }
+        },
+        className: "p-1 text-slate-400 hover:text-blue-600 hover:bg-slate-100 rounded transition-colors cursor-pointer shrink-0 ml-1",
+        title: "\u05E2\u05E8\u05D9\u05DB\u05EA \u05E7\u05D9\u05E9\u05D5\u05E8",
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react5.Link2, { className: "w-3.5 h-3.5" })
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        id: "link-picker-popover",
+        dir: "rtl",
+        style: { top: `${popoverPos.top}px`, right: `${popoverPos.right}px` },
+        className: "fixed z-[99999] w-[280px] bg-white rounded-xl shadow-2xl border border-slate-200 p-3.5 animate-in fade-in zoom-in-95 duration-150",
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between pb-2 mb-3 border-b border-slate-100", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-1.5 text-xs font-semibold text-slate-700", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react5.Link2, { className: "w-3.5 h-3.5 text-blue-600" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "\u05E2\u05E8\u05D9\u05DB\u05EA \u05E7\u05D9\u05E9\u05D5\u05E8" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: handleSaveAndClose,
+                className: "p-0.5 text-slate-400 hover:text-slate-600 rounded transition-colors cursor-pointer",
+                title: "\u05E1\u05D2\u05D5\u05E8 \u05D5\u05E9\u05DE\u05D5\u05E8",
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react5.X, { className: "w-3.5 h-3.5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-2.5 mb-3.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "block text-xs font-medium text-slate-700 mb-1", children: [
+                "\u05DB\u05EA\u05D5\u05D1\u05EA URL ",
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-rose-500", children: "*" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "input",
+                {
+                  ref: urlInputRef,
+                  type: "text",
+                  dir: "ltr",
+                  placeholder: "https://...",
+                  className: "w-full h-8 px-2.5 bg-slate-50 border border-slate-200 rounded-lg text-sm text-slate-800 placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-colors",
+                  value: draftUrl,
+                  onChange: (e) => setDraftUrl(e.target.value),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter") {
+                      e.preventDefault();
+                      handleSaveAndClose();
+                    }
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "block text-xs font-medium text-slate-700 mb-1", children: [
+                "\u05D8\u05E7\u05E1\u05D8 \u05DC\u05EA\u05E6\u05D5\u05D2\u05D4 ",
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-slate-400 font-normal", children: "(\u05D0\u05D5\u05E4\u05E6\u05D9\u05D5\u05E0\u05DC\u05D9)" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "input",
+                {
+                  type: "text",
+                  placeholder: "\u05E9\u05DD \u05D4\u05E7\u05D9\u05E9\u05D5\u05E8",
+                  className: "w-full h-8 px-2.5 bg-slate-50 border border-slate-200 rounded-lg text-sm text-slate-800 placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-colors",
+                  value: draftLabel,
+                  onChange: (e) => setDraftLabel(e.target.value),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter") {
+                      e.preventDefault();
+                      handleSaveAndClose();
+                    }
+                  }
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between pt-2 border-t border-slate-100", children: [
+            currentLink.url ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: handleClear,
+                className: "inline-flex items-center gap-1 text-xs text-rose-600 hover:text-rose-700 hover:bg-rose-50 px-2 py-1 rounded transition-colors cursor-pointer",
+                title: "\u05DE\u05D7\u05E7 \u05E7\u05D9\u05E9\u05D5\u05E8",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react5.Trash2, { className: "w-3 h-3" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "\u05E0\u05E7\u05D4" })
+                ]
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: handleSaveAndClose,
+                className: "inline-flex items-center gap-1 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 px-3 py-1.5 rounded-lg shadow-xs transition-colors cursor-pointer",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react5.Check, { className: "w-3.5 h-3.5" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "\u05E9\u05DE\u05D5\u05E8" })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/TableBlock/fields/RelationPickerCell.tsx
+var import_react7 = require("react");
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function isRawObjectId(str) {
+  if (typeof str !== "string") return false;
+  const trimmed = str.trim();
+  return /^[0-9a-fA-F]{24}$/.test(trimmed) || trimmed.startsWith("temp_");
+}
+function normalizeRelationValue(val) {
+  if (val === null || val === void 0 || val === "") return [];
+  if (Array.isArray(val)) {
+    return val.map((item) => {
+      if (typeof item === "string") return item.trim();
+      if (typeof item === "object" && item !== null) {
+        return String(item.id || item._id || item.value || "").trim();
+      }
+      return String(item).trim();
+    }).filter((id) => Boolean(id) && id !== "");
+  }
+  if (typeof val === "string") {
+    const trimmed = val.trim();
+    return trimmed ? [trimmed] : [];
+  }
+  if (typeof val === "object" && val !== null) {
+    const id = String(val.id || val._id || val.value || "").trim();
+    return id ? [id] : [];
+  }
+  return [];
+}
+function resolveRelationLabel(opt, column) {
+  var _a;
+  if (!opt) return "";
+  const displayField = (_a = column.config) == null ? void 0 : _a.displayField;
+  if (displayField && opt.data) {
+    const val = opt.data[displayField];
+    if (val !== void 0 && val !== null) {
+      const s = String(val).trim();
+      if (s !== "" && !isRawObjectId(s)) {
+        return s;
+      }
+    }
+  }
+  if (opt.label && typeof opt.label === "string") {
+    const s = opt.label.trim();
+    if (s !== "" && !isRawObjectId(s) && s !== opt.id) {
+      return s;
+    }
+  }
+  if (opt.data) {
+    const defaultLabel = opt.data.name || opt.data.title || opt.data.fullName;
+    if (defaultLabel !== void 0 && defaultLabel !== null) {
+      const s = String(defaultLabel).trim();
+      if (s !== "" && !isRawObjectId(s)) {
+        return s;
+      }
+    }
+  }
+  return "";
+}
+function RelationPickerCell({
+  value,
+  onChange,
+  column,
+  context,
+  rowId,
+  readOnly = false
+}) {
+  var _a;
+  const [isOpen, setIsOpen] = (0, import_react7.useState)(false);
+  const [searchQuery, setSearchQuery] = (0, import_react7.useState)("");
+  const containerRef = (0, import_react7.useRef)(null);
+  const searchInputRef = (0, import_react7.useRef)(null);
+  const allowMultiple = Boolean((_a = column.config) == null ? void 0 : _a.allowMultiple);
+  const selectedIds = (0, import_react7.useMemo)(() => normalizeRelationValue(value), [value]);
+  const isStandalone = !context || context.relationOptions === void 0;
+  const optionsLoaded = isStandalone || context.relationOptions[column.name] !== void 0;
+  const rawOptions = (0, import_react7.useMemo)(() => {
+    var _a2;
+    return ((_a2 = context == null ? void 0 : context.relationOptions) == null ? void 0 : _a2[column.name]) || [];
+  }, [context == null ? void 0 : context.relationOptions, column.name]);
+  const processedOptions = (0, import_react7.useMemo)(() => {
+    return rawOptions.map((opt) => {
+      const label = resolveRelationLabel(opt, column);
+      return {
+        id: String(opt.id),
+        _displayLabel: label
+      };
+    }).filter((opt) => opt._displayLabel && opt._displayLabel.trim() !== "" && !isRawObjectId(opt._displayLabel));
+  }, [rawOptions, column]);
+  const getDisplayForId = (0, import_react7.useCallback)((id) => {
+    const found = processedOptions.find((o) => String(o.id) === String(id));
+    if (found && found._displayLabel && !isRawObjectId(found._displayLabel)) {
+      return found._displayLabel;
+    }
+    return "-";
+  }, [processedOptions]);
+  const handleOpen = (e) => {
+    if (readOnly) return;
+    e == null ? void 0 : e.stopPropagation();
+    setIsOpen((prev) => !prev);
+    setSearchQuery("");
+    if (context == null ? void 0 : context.refetchRelation) {
+      context.refetchRelation(column.name);
+    }
+  };
+  (0, import_react7.useEffect)(() => {
+    if (isOpen) {
+      setTimeout(() => {
+        var _a2;
+        (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
+      }, 50);
+    }
+  }, [isOpen]);
+  const handleSelectOption = (optId) => {
+    if (!allowMultiple) {
+      onChange([optId]);
+      setIsOpen(false);
+    } else {
+      if (selectedIds.includes(optId)) {
+        onChange(selectedIds.filter((id) => id !== optId));
+      } else {
+        onChange([...selectedIds, optId]);
+      }
+    }
+  };
+  const handleRemove = (idToRemove) => {
+    onChange(selectedIds.filter((id) => id !== idToRemove));
+  };
+  const handleClearSingle = (e) => {
+    e.stopPropagation();
+    onChange([]);
+  };
+  (0, import_react7.useEffect)(() => {
+    if (!isOpen) return;
+    function handleClickOutside(event) {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    }
+    function handleKeyDown(event) {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen]);
+  const filteredOptions = (0, import_react7.useMemo)(() => {
+    const query = searchQuery.trim().toLowerCase();
+    if (!query) return processedOptions;
+    return processedOptions.filter((opt) => {
+      return (opt._displayLabel || "").toLowerCase().includes(query);
+    });
+  }, [processedOptions, searchQuery]);
+  if (!optionsLoaded && selectedIds.length > 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "px-2 py-1 flex items-center h-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "inline-block w-16 h-4 bg-slate-100 animate-pulse rounded" }) });
+  }
+  if (readOnly) {
+    if (selectedIds.length === 0) {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "px-2 py-1 flex items-center h-full text-slate-300 text-xs italic", children: "-" });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "px-1.5 py-1 flex flex-wrap items-center gap-1 h-full max-w-full overflow-hidden", dir: "rtl", children: selectedIds.map((id) => {
+      const displayText = getDisplayForId(id);
+      if (displayText === "-") {
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-slate-400 text-xs", children: "-" }, id);
+      }
+      const palette = getDeterministicPastelBadge(displayText);
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "span",
+        {
+          className: `inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border shadow-xs max-w-full truncate ${palette.bg} ${palette.text} ${palette.border}`,
+          title: displayText,
+          children: displayText
+        },
+        id
+      );
+    }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: `relative w-full h-full flex items-center justify-between px-1.5 py-1 ${isOpen ? "z-50" : ""}`,
+      dir: "rtl",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "div",
+          {
+            className: "flex items-center justify-between w-full h-full overflow-hidden cursor-pointer gap-1",
+            onClick: handleOpen,
+            children: !allowMultiple ? (
+              // Single Select Mode
+              (() => {
+                const singleId = selectedIds[0];
+                const displayText = singleId ? getDisplayForId(singleId) : "";
+                const hasValidSelection = singleId && displayText !== "-" && displayText !== "";
+                if (hasValidSelection) {
+                  const palette = getDeterministicPastelBadge(displayText);
+                  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between w-full overflow-hidden", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                      "span",
+                      {
+                        className: `inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium border shadow-xs max-w-full truncate group/tag ${palette.bg} ${palette.text} ${palette.border}`,
+                        title: displayText,
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "truncate", children: displayText }),
+                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: handleClearSingle,
+                              className: "opacity-0 group-hover/tag:opacity-100 hover:opacity-100 focus:opacity-100 focus:outline-none p-0.5 rounded-full hover:bg-black/10 transition-opacity cursor-pointer shrink-0",
+                              title: "\u05E0\u05E7\u05D4",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react6.X, { className: "w-3 h-3" })
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react6.ChevronDown, { className: "w-3.5 h-3.5 text-slate-400 opacity-0 hover:opacity-60 transition-opacity shrink-0 ml-1" })
+                  ] });
+                }
+                if (singleId && displayText === "-") {
+                  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between w-full text-slate-400 text-xs", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "-" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react6.ChevronDown, { className: "w-3.5 h-3.5 text-slate-400 opacity-0 hover:opacity-60 transition-opacity shrink-0 ml-1" })
+                  ] });
+                }
+                return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between w-full text-slate-400 italic text-xs select-none", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "\u05D1\u05D7\u05E8..." }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react6.ChevronDown, { className: "w-3.5 h-3.5 text-slate-400 opacity-60 shrink-0 ml-1" })
+                ] });
+              })()
+            ) : (
+              // Multi Select Mode
+              selectedIds.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between w-full text-slate-400 italic text-xs select-none", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "\u05D1\u05D7\u05E8..." }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react6.ChevronDown, { className: "w-3.5 h-3.5 text-slate-400 opacity-60 shrink-0 ml-1" })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between w-full overflow-hidden", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-wrap items-center gap-1 overflow-hidden max-h-full flex-1 py-0.5", children: selectedIds.map((id) => {
+                  const displayText = getDisplayForId(id);
+                  if (displayText === "-") {
+                    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-slate-400 text-xs px-1", children: "-" }, id);
+                  }
+                  const palette = getDeterministicPastelBadge(displayText);
+                  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                    "span",
+                    {
+                      className: `inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium border shadow-xs max-w-[160px] truncate group/tag ${palette.bg} ${palette.text} ${palette.border}`,
+                      title: displayText,
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "truncate", children: displayText }),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleRemove(id);
+                            },
+                            className: "opacity-0 group-hover/tag:opacity-100 hover:opacity-100 focus:opacity-100 focus:outline-none p-0.5 rounded-full hover:bg-black/10 transition-opacity cursor-pointer shrink-0",
+                            title: "\u05D4\u05E1\u05E8",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react6.X, { className: "w-3 h-3" })
+                          }
+                        )
+                      ]
+                    },
+                    id
+                  );
+                }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react6.ChevronDown, { className: "w-3.5 h-3.5 text-slate-400 opacity-0 hover:opacity-60 transition-opacity shrink-0 ml-1" })
+              ] })
+            )
+          }
+        ),
+        isOpen && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "div",
+          {
+            id: `relation-dropdown-${column.name}-${rowId || "cell"}`,
+            dir: "rtl",
+            className: "absolute top-full right-0 mt-1 z-[100] bg-white rounded-md shadow-lg border border-slate-200 p-1 min-w-[200px] w-full max-w-[300px] animate-in fade-in duration-100 flex flex-col",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative mb-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react6.Search, { className: "w-3.5 h-3.5 text-slate-400 absolute right-2 top-2 pointer-events-none" }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  "input",
+                  {
+                    ref: searchInputRef,
+                    type: "text",
+                    placeholder: "\u05D7\u05E4\u05E9...",
+                    value: searchQuery,
+                    onChange: (e) => setSearchQuery(e.target.value),
+                    onKeyDown: (e) => {
+                      if (e.key === "Escape") {
+                        e.stopPropagation();
+                        setIsOpen(false);
+                      }
+                    },
+                    className: "w-full h-7 pr-7 pl-2 bg-slate-50 border border-slate-200 rounded text-xs text-slate-800 placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "overflow-y-auto max-h-[180px] space-y-0.5", children: filteredOptions.length > 0 ? filteredOptions.map((opt) => {
+                const isSelected = selectedIds.includes(opt.id);
+                return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                  "div",
+                  {
+                    onClick: () => handleSelectOption(opt.id),
+                    className: `flex items-center justify-between px-2.5 py-1.5 rounded cursor-pointer text-xs transition-colors ${isSelected ? "bg-blue-50 text-blue-900 font-medium" : "hover:bg-slate-50 text-slate-700"}`,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "truncate flex-1", children: opt._displayLabel }),
+                      isSelected && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react6.Check, { className: "w-3.5 h-3.5 text-blue-600 shrink-0 mr-1" })
+                    ]
+                  },
+                  opt.id
+                );
+              }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "py-2.5 px-2 text-center text-xs text-slate-400 select-none", children: processedOptions.length === 0 ? "\u05D0\u05D9\u05DF \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05D6\u05DE\u05D9\u05E0\u05D5\u05EA" : "\u05DC\u05D0 \u05E0\u05DE\u05E6\u05D0\u05D5 \u05EA\u05D5\u05E6\u05D0\u05D5\u05EA" }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/TableBlock/fields/fieldRegistry.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var CURRENCY_SYMBOLS = {
+  USD: "$",
+  EUR: "\u20AC",
+  ILS: "\u20AA",
+  GBP: "\xA3"
+};
+function getCurrencySymbol(code) {
+  if (!code) return "";
+  return CURRENCY_SYMBOLS[code.toUpperCase()] || code;
+}
+var FORM_INPUTS = {
+  DATE: ({ value, onChange, column }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerCell, { value, onChange, column }),
+  CURRENCY: ({ value, column, onChange }) => {
+    var _a;
+    const symbol = getCurrencySymbol((_a = column.config) == null ? void 0 : _a.currencySymbol);
+    const [isFocused, setIsFocused] = import_react8.default.useState(false);
+    const displayValue = !isFocused && value !== void 0 && value !== null && !isNaN(Number(value)) ? new Intl.NumberFormat("en-US").format(Number(value)) : value !== void 0 && value !== null ? value : "";
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative w-full h-full", children: [
+      symbol && /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsx)(
+        "input",
+        {
+          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: displayValue,
+          onFocus: () => setIsFocused(true),
+          onBlur: () => setIsFocused(false),
+          onChange: (e) => {
+            const val = e.target.value;
+            onChange(val === "" ? null : Number(val));
+          }
+        }
+      )
+    ] });
+  },
+  TIME: ({ value, onChange, column }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TimePickerCell, { value, onChange, column }),
+  LINK: ({ value, onChange, column }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LinkPickerCell, { value, onChange, column }),
+  BOOLEAN: ({ value, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex items-center justify-center w-full h-full p-2", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "input",
+    {
+      type: "checkbox",
+      checked: !!value,
+      onChange: (e) => onChange(e.target.checked),
+      className: "w-4 h-4 rounded border-slate-300 text-brand"
+    }
+  ) }),
+  GOOGLE_DRIVE_FILE: ({ value, onChange, column, rowId, context }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    DrivePickerCell,
+    {
+      value: value || [],
+      onChange,
+      column,
+      rowId,
+      tableName: context == null ? void 0 : context.tableName,
+      onMarkForDeletion: context == null ? void 0 : context.onMarkForDeletion,
+      context
+    }
+  ),
+  RELATION: ({ value, onChange, column, context, rowId }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    RelationPickerCell,
+    {
+      value,
+      onChange,
+      column,
+      context,
+      rowId
+    }
+  ),
+  NUMBER: ({ value, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "input",
+    {
+      type: "number",
+      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 ? value : "",
+      onChange: (e) => {
+        const val = e.target.value;
+        onChange(val === "" ? null : Number(val));
+      }
+    }
+  ),
+  PHONE: ({ value, onChange, column }) => {
+    var _a;
+    const enableWhatsApp = (_a = column == null ? void 0 : column.config) == null ? void 0 : _a.enableWhatsApp;
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center w-full h-full px-2 gap-1.5 overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "input",
+        {
           type: "tel",
-          className: "w-full h-8 bg-transparent focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-400 text-sm flex-1",
+          className: "w-full h-8 bg-transparent focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-400 text-sm flex-1 min-w-0",
           value: value !== void 0 && value !== null ? String(value) : "",
-          onChange: (e) => onChange(e.target.value),
+          onChange: (e) => onChange(e.target.value || null),
           dir: "ltr"
         }
       ),
-      enableWhatsApp && value && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      enableWhatsApp && value && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "button",
         {
           type: "button",
@@ -983,16 +1894,16 @@ var FORM_INPUTS = {
             e.stopPropagation();
             openWhatsAppChat(String(value));
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a5.816 5.816 0 00-.571-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a5.816 5.816 0 00-.571-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) })
         }
       )
     ] });
   },
   GOOGLE_CONTACT: ({ value, column, rowId, onChange, context }) => {
-    const [isSyncing, setIsSyncing] = import_react5.default.useState(false);
+    const [isSyncing, setIsSyncing] = import_react8.default.useState(false);
     const { addToast } = useToast();
-    const googleClientIdRef = import_react5.default.useRef(null);
-    const ensureGisScript = import_react5.default.useCallback(() => {
+    const googleClientIdRef = import_react8.default.useRef(null);
+    const ensureGisScript = import_react8.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) {
@@ -1021,7 +1932,7 @@ var FORM_INPUTS = {
         document.head.appendChild(script);
       });
     }, []);
-    const requestGisToken = import_react5.default.useCallback(async (hint) => {
+    const requestGisToken = import_react8.default.useCallback(async (hint) => {
       await ensureGisScript();
       if (!googleClientIdRef.current && (context == null ? void 0 : context.executeAction)) {
         try {
@@ -1068,19 +1979,27 @@ var FORM_INPUTS = {
       return { accessToken, email };
     }, [ensureGisScript, context]);
     const handleSync = async () => {
-      var _a, _b, _c;
+      var _a, _b, _c, _d, _e, _f;
       if (!(context == null ? void 0 : context.executeAction)) return;
       setIsSyncing(true);
       try {
-        const mapping = column.contactMapping || {};
+        const mapping = ((_a = column.config) == null ? void 0 : _a.contactMapping) || {};
         const rowData = context.rowData || {};
+        const targetTableMetaId = (context == null ? void 0 : context.tableMetaId) || (context == null ? void 0 : context.tableId);
+        const targetOrgId = context == null ? void 0 : context.orgId;
         let hasPhone = false;
         if (mapping.phoneCol && rowData[mapping.phoneCol]) hasPhone = true;
+        const activeParentTableId = ((_b = context.parentRecord) == null ? void 0 : _b.tableId) || (context == null ? void 0 : context.parentTableId);
         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 (part.type === "PARENT") {
+              if (!activeParentTableId) continue;
+              if (part.parentTableId && part.parentTableId !== activeParentTableId) continue;
+              if ((_d = (_c = context.parentRecord) == null ? void 0 : _c.data) == null ? void 0 : _d[part.columnId]) hasName = true;
+              else if (((_e = context.parentRecord) == null ? void 0 : _e.recordId) || ((_f = context.parentRecord) == null ? void 0 : _f.id)) hasName = true;
+            }
           }
         }
         if (!hasPhone) {
@@ -1110,6 +2029,10 @@ var FORM_INPUTS = {
           emailCol: mapping.emailCol,
           localRowData: rowData,
           parentRecord: context.parentRecord,
+          tableMetaId: targetTableMetaId,
+          tableId: targetTableMetaId,
+          recordId: rowId,
+          orgId: targetOrgId,
           accessToken,
           userEmail
         };
@@ -1120,10 +2043,12 @@ var FORM_INPUTS = {
           } else {
             onChange(res);
           }
-          if (context.tableId && !rowId.startsWith("temp_")) {
+          if (targetTableMetaId && !rowId.startsWith("temp_")) {
             await context.executeAction("UPDATE_RECORD", {
-              tableId: context.tableId,
+              tableId: targetTableMetaId,
+              tableMetaId: targetTableMetaId,
               recordId: rowId,
+              orgId: targetOrgId,
               data: { [column.name]: res }
             });
           }
@@ -1137,6 +2062,8 @@ var FORM_INPUTS = {
     };
     const handleUnlink = async () => {
       let accessToken;
+      const targetTableMetaId = (context == null ? void 0 : context.tableMetaId) || (context == null ? void 0 : context.tableId);
+      const targetOrgId = context == null ? void 0 : context.orgId;
       try {
         let emailHint = value == null ? void 0 : value.userEmail;
         if (!emailHint && (value == null ? void 0 : value.url)) {
@@ -1154,7 +2081,11 @@ var FORM_INPUTS = {
       if ((value == null ? void 0 : value.resourceName) && (context == null ? void 0 : context.executeAction)) {
         await context.executeAction("DELETE_GOOGLE_CONTACT", {
           resourceName: value.resourceName,
-          accessToken
+          accessToken,
+          tableMetaId: targetTableMetaId,
+          tableId: targetTableMetaId,
+          recordId: rowId,
+          orgId: targetOrgId
         });
       }
       if (context == null ? void 0 : context.updateQuietly) {
@@ -1162,47 +2093,49 @@ var FORM_INPUTS = {
       } else {
         onChange(null);
       }
-      if ((context == null ? void 0 : context.tableId) && (context == null ? void 0 : context.executeAction) && !rowId.startsWith("temp_")) {
+      if (targetTableMetaId && (context == null ? void 0 : context.executeAction) && !rowId.startsWith("temp_")) {
         await context.executeAction("UPDATE_RECORD", {
-          tableId: context.tableId,
+          tableId: targetTableMetaId,
+          tableMetaId: targetTableMetaId,
           recordId: rowId,
+          orgId: targetOrgId,
           data: { [column.name]: null }
         });
       }
     };
     if (value && value.synced && value.url) {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1.5 h-8 px-2 group whitespace-nowrap", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { href: value.url, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:underline flex-1 truncate text-xs whitespace-nowrap", children: "\u05D0\u05D9\u05E9 \u05E7\u05E9\u05E8 \u05D2\u05D5\u05D2\u05DC" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1.5 h-8 px-2 group whitespace-nowrap overflow-hidden max-w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("a", { href: value.url, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:underline flex-1 truncate text-xs whitespace-nowrap", children: "\u05D0\u05D9\u05E9 \u05E7\u05E9\u05E8 \u05D2\u05D5\u05D2\u05DC" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "button",
           {
             type: "button",
             onClick: handleUnlink,
             className: "text-slate-400 hover:text-rose-500 opacity-0 group-hover:opacity-100 transition-opacity p-1 shrink-0",
             title: "\u05D1\u05D8\u05DC \u05E1\u05E0\u05DB\u05E8\u05D5\u05DF",
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) })
           }
         )
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex items-center h-8 px-2 whitespace-nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex items-center h-8 px-2 whitespace-nowrap overflow-hidden max-w-full", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "button",
       {
         type: "button",
         onClick: handleSync,
         disabled: isSyncing,
-        className: "inline-flex items-center gap-1.5 px-2.5 py-1 bg-blue-50 text-blue-600 hover:bg-blue-100 border border-blue-200 rounded-md text-xs font-medium transition-colors whitespace-nowrap shrink-0 disabled:opacity-50 cursor-pointer",
+        className: "inline-flex items-center gap-1.5 px-2.5 py-1 bg-blue-50 text-blue-600 hover:bg-blue-100 border border-blue-200 rounded-md text-xs font-medium transition-colors whitespace-nowrap shrink-0 disabled:opacity-50 cursor-pointer max-w-full overflow-hidden",
         children: [
-          isSyncing ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { className: "w-3.5 h-3.5 animate-spin shrink-0", viewBox: "0 0 24 24", fill: "none", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-3.5 h-3.5 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 4v16m8-8H4" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "whitespace-nowrap", children: "\u05E1\u05E0\u05DB\u05E8\u05DF \u05DC\u05D2\u05D5\u05D2\u05DC" })
+          isSyncing ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { className: "w-3.5 h-3.5 animate-spin shrink-0", viewBox: "0 0 24 24", fill: "none", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsx)("svg", { className: "w-3.5 h-3.5 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 4v16m8-8H4" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "whitespace-nowrap truncate", children: "\u05E1\u05E0\u05DB\u05E8\u05DF \u05DC\u05D2\u05D5\u05D2\u05DC" })
         ]
       }
     ) });
   },
-  DEFAULT: ({ value, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  DEFAULT: ({ value, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "input",
     {
       type: "text",
@@ -1212,14 +2145,14 @@ var FORM_INPUTS = {
     }
   ),
   SUB_TABLE: ({ value, column }) => {
-    var _a, _b;
-    if (!Array.isArray(value)) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "px-2 py-1 flex items-center h-full text-slate-300 text-xs italic", children: "\u05E8\u05D9\u05E7" });
+    var _a, _b, _c;
+    if (!Array.isArray(value)) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "px-2 py-1 flex items-center h-full text-slate-300 text-xs italic", children: "\u05E8\u05D9\u05E7" });
     const selected = value.filter((e) => e == null ? void 0 : e.isSelected);
-    if (selected.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "px-2 py-1 flex items-center h-full text-slate-300 text-xs italic", children: "\u05E8\u05D9\u05E7" });
-    const displayFields = column.subTableDisplayFields || [];
-    const isWhatsApp = ((_a = column.config) == null ? void 0 : _a.actionType) === "WHATSAPP";
-    const actionPhoneCol = (_b = column.config) == null ? void 0 : _b.actionPhoneColumn;
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "px-1.5 py-1 flex flex-wrap items-center gap-1 h-full", children: selected.map((entry, idx) => {
+    if (selected.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "px-2 py-1 flex items-center h-full text-slate-300 text-xs italic", children: "\u05E8\u05D9\u05E7" });
+    const displayFields = ((_a = column.config) == null ? void 0 : _a.subTableDisplayFields) || [];
+    const isWhatsApp = ((_b = column.config) == null ? void 0 : _b.actionType) === "WHATSAPP";
+    const actionPhoneCol = (_c = column.config) == null ? void 0 : _c.actionPhoneColumn;
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "px-1.5 py-1 flex flex-nowrap items-center gap-1 h-full overflow-hidden max-w-full", children: selected.map((entry, idx) => {
       var _a2, _b2;
       let label = "";
       if (entry._resolvedData) {
@@ -1235,7 +2168,7 @@ var FORM_INPUTS = {
         const rawPhone = actionPhoneCol ? (_b2 = entry._resolvedData) == null ? void 0 : _b2[actionPhoneCol] : null;
         const phone = rawPhone ? String(rawPhone).trim() : null;
         if (phone) {
-          return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
             "button",
             {
               type: "button",
@@ -1243,21 +2176,21 @@ var FORM_INPUTS = {
                 e.stopPropagation();
                 openWhatsAppChat(phone);
               },
-              className: "inline-flex items-center gap-1 px-1.5 py-0.5 bg-emerald-50 hover:bg-emerald-100 text-emerald-800 border border-emerald-300 hover:border-emerald-400 rounded-full text-xs font-medium max-w-[150px] truncate cursor-pointer transition-colors shadow-xs",
+              className: "inline-flex items-center gap-1 px-1.5 py-0.5 bg-emerald-50 hover:bg-emerald-100 text-emerald-800 border border-emerald-300 hover:border-emerald-400 rounded-full text-xs font-medium max-w-full truncate cursor-pointer transition-colors shadow-xs shrink",
               title: `\u05E4\u05EA\u05D9\u05D7\u05EA \u05D5\u05D5\u05D0\u05D8\u05E1\u05D0\u05E4 (${phone})`,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-3 h-3 text-emerald-600 shrink-0", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a5.816 5.816 0 00-.571-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate", children: label })
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "w-3 h-3 text-emerald-600 shrink-0", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a5.816 5.816 0 00-.571-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "truncate", children: label })
               ]
             },
             entry.recordId || idx
           );
         }
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime7.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",
+          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-full truncate shrink",
           title: label,
           children: label
         },
@@ -1268,7 +2201,8 @@ var FORM_INPUTS = {
 };
 
 // src/components/TableBlock/fields/SubTableViewer.tsx
-var import_react6 = require("react");
+var import_react11 = require("react");
+var import_shared = require("@universe-platform/shared");
 
 // src/utils/phone.ts
 function sanitizePhoneNumber(phone) {
@@ -1284,8 +2218,293 @@ function isValidPhoneNumber(phone) {
   return /^\+?[0-9]{9,15}$/.test(cleaned);
 }
 
+// src/components/TableBlock/useColumnResize.ts
+var import_react9 = require("react");
+function useColumnResize({
+  storageKey,
+  defaultWidth = 200,
+  minWidth = 60,
+  maxWidth = 500,
+  getMinColWidth
+}) {
+  const [columnWidths, setColumnWidths] = (0, import_react9.useState)({});
+  const [resizingCol, setResizingCol] = (0, import_react9.useState)(null);
+  (0, import_react9.useEffect)(() => {
+    if (typeof window === "undefined" || !storageKey) return;
+    try {
+      const saved = localStorage.getItem(storageKey);
+      if (saved) {
+        setColumnWidths(JSON.parse(saved));
+      }
+    } catch (e) {
+      console.error(`Failed to load column widths for key "${storageKey}":`, e);
+    }
+  }, [storageKey]);
+  (0, import_react9.useEffect)(() => {
+    if (!resizingCol) return;
+    const handleMouseMove = (e) => {
+      const diffX = resizingCol.startX - e.clientX;
+      const colMin = resizingCol.minWidth || minWidth;
+      const newWidth = Math.max(colMin, Math.min(maxWidth, resizingCol.startWidth + diffX));
+      setColumnWidths((prev) => __spreadProps(__spreadValues({}, prev), { [resizingCol.name]: newWidth }));
+    };
+    const handleMouseUp = () => {
+      setResizingCol(null);
+      setColumnWidths((prev) => {
+        if (typeof window !== "undefined" && storageKey) {
+          try {
+            localStorage.setItem(storageKey, JSON.stringify(prev));
+          } catch (e) {
+            console.error(`Failed to save column widths for key "${storageKey}":`, e);
+          }
+        }
+        return prev;
+      });
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [resizingCol, storageKey, minWidth, maxWidth]);
+  const startResize = (0, import_react9.useCallback)(
+    (colName, currentWidth, clientX, customMinWidth) => {
+      const colMin = customMinWidth != null ? customMinWidth : getMinColWidth ? getMinColWidth(colName) : minWidth;
+      setResizingCol({
+        name: colName,
+        startWidth: currentWidth,
+        startX: clientX,
+        minWidth: colMin
+      });
+    },
+    [getMinColWidth, minWidth]
+  );
+  const getWidth = (0, import_react9.useCallback)(
+    (colName, fallback) => {
+      const colMin = getMinColWidth ? getMinColWidth(colName) : minWidth;
+      const saved = columnWidths[colName] || fallback || defaultWidth;
+      return Math.max(colMin, saved);
+    },
+    [columnWidths, defaultWidth, getMinColWidth, minWidth]
+  );
+  return {
+    columnWidths,
+    setColumnWidths,
+    resizingCol,
+    startResize,
+    getWidth,
+    minWidth
+  };
+}
+
+// src/components/TableBlock/useColumnReorder.ts
+var import_react10 = require("react");
+function useColumnReorder({
+  onReorder,
+  disabled = false
+}) {
+  const [draggedColName, setDraggedColName] = (0, import_react10.useState)(null);
+  const [dragOverColName, setDragOverColName] = (0, import_react10.useState)(null);
+  const getHeaderDragProps = (0, import_react10.useCallback)(
+    (colName) => {
+      if (disabled) {
+        return {
+          draggable: false
+        };
+      }
+      return {
+        draggable: true,
+        onDragStart: (e) => {
+          e.dataTransfer.setData("text/plain", colName);
+          e.dataTransfer.effectAllowed = "move";
+          setDraggedColName(colName);
+        },
+        onDragOver: (e) => {
+          e.preventDefault();
+          e.dataTransfer.dropEffect = "move";
+          if (dragOverColName !== colName) {
+            setDragOverColName(colName);
+          }
+        },
+        onDragLeave: () => {
+          if (dragOverColName === colName) {
+            setDragOverColName(null);
+          }
+        },
+        onDrop: (e) => {
+          e.preventDefault();
+          if (draggedColName && draggedColName !== colName) {
+            onReorder(draggedColName, colName);
+          }
+          setDraggedColName(null);
+          setDragOverColName(null);
+        },
+        onDragEnd: () => {
+          setDraggedColName(null);
+          setDragOverColName(null);
+        }
+      };
+    },
+    [disabled, draggedColName, dragOverColName, onReorder]
+  );
+  const isDragging = (0, import_react10.useCallback)((colName) => draggedColName === colName, [draggedColName]);
+  const isDragOver = (0, import_react10.useCallback)((colName) => dragOverColName === colName, [dragOverColName]);
+  return {
+    draggedColName,
+    dragOverColName,
+    isDragging,
+    isDragOver,
+    getHeaderDragProps
+  };
+}
+
+// src/components/TableBlock/columnTitleUtils.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var canvas = null;
+function measureTextWidth(text, font = '600 14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif') {
+  if (typeof document === "undefined") return text.length * 9;
+  if (!canvas) {
+    canvas = document.createElement("canvas");
+  }
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return text.length * 9;
+  ctx.font = font;
+  return ctx.measureText(text).width;
+}
+function splitHeaderTitle(name) {
+  if (!name) return { isSingleWord: true, line1: "" };
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length <= 1) {
+    return { isSingleWord: true, line1: words[0] || "" };
+  }
+  if (words.length === 2) {
+    return { isSingleWord: false, line1: words[0], line2: words[1] };
+  }
+  let bestSplit = 1;
+  let minDiff = Infinity;
+  for (let i = 1; i < words.length; i++) {
+    const l1 = words.slice(0, i).join(" ");
+    const l2 = words.slice(i).join(" ");
+    const diff = Math.abs(l1.length - l2.length);
+    if (diff < minDiff) {
+      minDiff = diff;
+      bestSplit = i;
+    }
+  }
+  return {
+    isSingleWord: false,
+    line1: words.slice(0, bestSplit).join(" "),
+    line2: words.slice(bestSplit).join(" ")
+  };
+}
+function calculateMinColumnWidth(name, isSubTable = false, colType) {
+  const font = isSubTable ? '600 12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' : '600 14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+  const chromeWidth = isSubTable ? 44 : 52;
+  let baseMin = isSubTable ? 50 : 60;
+  if ((colType == null ? void 0 : colType.toUpperCase()) === "GOOGLE_CONTACT") {
+    baseMin = isSubTable ? 110 : 120;
+  }
+  if (!name) return baseMin;
+  const { isSingleWord, line1, line2 } = splitHeaderTitle(name);
+  if (isSingleWord) {
+    const wordWidth = measureTextWidth(line1, font);
+    return Math.max(baseMin, Math.ceil(wordWidth + chromeWidth));
+  }
+  const w1 = measureTextWidth(line1, font);
+  const w2 = line2 ? measureTextWidth(line2, font) : 0;
+  const maxLine = Math.max(w1, w2);
+  return Math.max(baseMin, Math.ceil(maxLine + chromeWidth));
+}
+function ColumnHeaderTitle({ name, width, isSubTable = false }) {
+  const { isSingleWord, line1, line2 } = splitHeaderTitle(name);
+  if (isSingleWord || !line2) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "whitespace-nowrap select-none overflow-hidden text-right flex-1", title: name, children: line1 });
+  }
+  const font = isSubTable ? '600 12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' : '600 14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+  const chromeWidth = isSubTable ? 44 : 52;
+  const fullTitleWidth = measureTextWidth(name, font) + chromeWidth;
+  if (width !== void 0 && width >= fullTitleWidth) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "whitespace-nowrap select-none overflow-hidden text-right flex-1", title: name, children: name });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "flex flex-col justify-center leading-tight select-none overflow-hidden text-right flex-1", title: name, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "whitespace-nowrap block", children: line1 }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "whitespace-nowrap block", children: line2 })
+  ] });
+}
+
 // src/components/TableBlock/fields/SubTableViewer.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function formatConflictCellValue(rawVal, colDef, relationOptionsMap) {
+  var _a, _b, _c;
+  if (rawVal === void 0 || rawVal === null || rawVal === "") {
+    return "-";
+  }
+  const colType = (_a = colDef == null ? void 0 : colDef.type) == null ? void 0 : _a.toUpperCase();
+  if (typeof rawVal === "boolean" || colType === "BOOLEAN") {
+    return rawVal ? "\u05DB\u05DF" : "\u05DC\u05D0";
+  }
+  if (colType === "GOOGLE_CONTACT" || typeof rawVal === "object" && rawVal !== null && ("resourceName" in rawVal || "synced" in rawVal)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-[11px] font-medium bg-violet-50 text-violet-700 border border-violet-200", children: "\u05D0\u05D9\u05E9 \u05E7\u05E9\u05E8 \u05D2\u05D5\u05D2\u05DC" });
+  }
+  if (colType === "GOOGLE_DRIVE_FILE" || typeof rawVal === "object" && rawVal !== null && ("fileId" in rawVal || "fileUrl" in rawVal || "fileName" in rawVal)) {
+    const fileName = rawVal == null ? void 0 : rawVal.fileName;
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-[11px] font-medium bg-rose-50 text-rose-700 border border-rose-200 truncate max-w-[150px]", title: fileName || "\u05E7\u05D5\u05D1\u05E5 \u05DE\u05E6\u05D5\u05E8\u05E3", children: fileName ? String(fileName) : "\u05E7\u05D5\u05D1\u05E5 \u05DE\u05E6\u05D5\u05E8\u05E3" });
+  }
+  if (colType === "LINK" || typeof rawVal === "object" && rawVal !== null && ("url" in rawVal || "label" in rawVal)) {
+    const text = (rawVal == null ? void 0 : rawVal.label) || (rawVal == null ? void 0 : rawVal.url);
+    return text ? String(text) : "-";
+  }
+  if (colType === "SUB_TABLE" || Array.isArray(rawVal) && rawVal.length > 0 && typeof rawVal[0] === "object" && ("recordId" in rawVal[0] || "id" in rawVal[0])) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-[11px] font-medium bg-amber-50 text-amber-700 border border-amber-200", children: [
+      rawVal.length,
+      " \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA"
+    ] });
+  }
+  if (colType === "RELATION") {
+    if (Array.isArray(rawVal)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-[11px] font-medium bg-indigo-50 text-indigo-700 border border-indigo-200", children: [
+        rawVal.length,
+        " \u05DE\u05E7\u05D5\u05E9\u05E8\u05D9\u05DD"
+      ] });
+    }
+    const colOpts = (colDef == null ? void 0 : colDef.name) && relationOptionsMap ? relationOptionsMap[colDef.name] : void 0;
+    if (Array.isArray(colOpts)) {
+      const opt = colOpts.find((o) => String(o.id) === String(rawVal));
+      if (opt) {
+        const displayField = (_b = colDef == null ? void 0 : colDef.config) == null ? void 0 : _b.displayField;
+        const disp = opt._displayLabel || displayField && ((_c = opt.data) == null ? void 0 : _c[displayField]) || (opt.label !== opt.id ? opt.label : "");
+        if (disp && String(disp).trim() !== "" && !/^[a-f\d]{24}$/i.test(String(disp))) {
+          return String(disp);
+        }
+      }
+    }
+    if (typeof rawVal === "object" && rawVal !== null) {
+      const relDisplay = rawVal.title || rawVal.name || rawVal.label;
+      if (relDisplay && !/^[a-f\d]{24}$/i.test(String(relDisplay))) {
+        return String(relDisplay);
+      }
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-[11px] font-medium bg-indigo-50 text-indigo-700 border border-indigo-200", children: "\u05E8\u05E9\u05D5\u05DE\u05D4 \u05DE\u05E7\u05D5\u05E9\u05E8\u05EA" });
+  }
+  if (Array.isArray(rawVal)) {
+    const allPrimitives = rawVal.every((v) => typeof v !== "object");
+    if (allPrimitives) {
+      return rawVal.join(", ") || "-";
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-[11px] font-medium bg-slate-100 text-slate-700 border border-slate-200", children: [
+      rawVal.length,
+      " \u05E4\u05E8\u05D9\u05D8\u05D9\u05DD"
+    ] });
+  }
+  if (typeof rawVal === "object" && rawVal !== null) {
+    return "-";
+  }
+  if ((colDef == null ? void 0 : colDef.type) && !(0, import_shared.isTextRepresentable)(colDef.type)) {
+    return "-";
+  }
+  return String(rawVal);
+}
 function validateCellValue(val, col) {
   var _a;
   const colType = ((_a = col.type) == null ? void 0 : _a.toUpperCase()) || "DEFAULT";
@@ -1323,29 +2542,32 @@ function SubTableCell({
   column,
   targetSchema,
   referencedTableId,
+  parentRowId,
   context,
   relationOptions,
   setRelationOptions,
   refetchRelation,
-  onCommit
+  onCommit,
+  onQuietUpdate,
+  width
 }) {
-  var _a, _b;
+  var _a, _b, _c, _d, _e;
   const colType = ((_a = column.type) == null ? void 0 : _a.toUpperCase()) || "DEFAULT";
   const isContact = colType === "GOOGLE_CONTACT";
   const InputComponent = FORM_INPUTS[colType] || FORM_INPUTS.DEFAULT;
   const serverValue = (_b = record.data[column.name]) != null ? _b : colType === "BOOLEAN" ? false : "";
-  const [draftValue, setDraftValue] = (0, import_react6.useState)(serverValue);
-  const [isDirty, setIsDirty] = (0, import_react6.useState)(false);
-  const [validationError, setValidationError] = (0, import_react6.useState)(null);
-  const cellRef = (0, import_react6.useRef)(null);
-  const draftRef = (0, import_react6.useRef)(draftValue);
-  const isDirtyRef = (0, import_react6.useRef)(isDirty);
-  const serverValueRef = (0, import_react6.useRef)(serverValue);
-  const recordIdRef = (0, import_react6.useRef)(record.id);
-  const columnRef = (0, import_react6.useRef)(column);
-  const onCommitRef = (0, import_react6.useRef)(onCommit);
-  const isCommittingRef = (0, import_react6.useRef)(false);
-  const lastFailedValRef = (0, import_react6.useRef)(void 0);
+  const [draftValue, setDraftValue] = (0, import_react11.useState)(serverValue);
+  const [isDirty, setIsDirty] = (0, import_react11.useState)(false);
+  const [validationError, setValidationError] = (0, import_react11.useState)(null);
+  const cellRef = (0, import_react11.useRef)(null);
+  const draftRef = (0, import_react11.useRef)(draftValue);
+  const isDirtyRef = (0, import_react11.useRef)(isDirty);
+  const serverValueRef = (0, import_react11.useRef)(serverValue);
+  const recordIdRef = (0, import_react11.useRef)(record.id);
+  const columnRef = (0, import_react11.useRef)(column);
+  const onCommitRef = (0, import_react11.useRef)(onCommit);
+  const isCommittingRef = (0, import_react11.useRef)(false);
+  const lastFailedValRef = (0, import_react11.useRef)(void 0);
   const { addToast } = useToast();
   draftRef.current = draftValue;
   isDirtyRef.current = isDirty;
@@ -1353,7 +2575,7 @@ function SubTableCell({
   recordIdRef.current = record.id;
   columnRef.current = column;
   onCommitRef.current = onCommit;
-  (0, import_react6.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!isDirtyRef.current) {
       setDraftValue(serverValue);
       draftRef.current = serverValue;
@@ -1361,7 +2583,7 @@ function SubTableCell({
       lastFailedValRef.current = void 0;
     }
   }, [serverValue]);
-  const commit = (0, import_react6.useCallback)(async (valToCommit) => {
+  const commit = (0, import_react11.useCallback)(async (valToCommit) => {
     if (isCommittingRef.current) return false;
     if (!isDirtyRef.current) return true;
     if (valToCommit === serverValueRef.current) {
@@ -1402,7 +2624,7 @@ function SubTableCell({
       isCommittingRef.current = false;
     }
   }, [addToast]);
-  const discard = (0, import_react6.useCallback)(() => {
+  const discard = (0, import_react11.useCallback)(() => {
     setDraftValue(serverValueRef.current);
     draftRef.current = serverValueRef.current;
     setIsDirty(false);
@@ -1410,7 +2632,7 @@ function SubTableCell({
     setValidationError(null);
     lastFailedValRef.current = void 0;
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     return () => {
       if (isDirtyRef.current && !isCommittingRef.current) {
         const val = draftRef.current;
@@ -1446,7 +2668,7 @@ function SubTableCell({
     }
   };
   const handleKeyDown = (e) => {
-    var _a2, _b2, _c, _d;
+    var _a2, _b2, _c2, _d2;
     if (e.key === "Enter") {
       e.preventDefault();
       if (isDirtyRef.current) {
@@ -1456,18 +2678,22 @@ function SubTableCell({
     } else if (e.key === "Escape") {
       e.preventDefault();
       discard();
-      (_d = (_c = e.target) == null ? void 0 : _c.blur) == null ? void 0 : _d.call(_c);
+      (_d2 = (_c2 = e.target) == null ? void 0 : _c2.blur) == null ? void 0 : _d2.call(_c2);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  const subTableMetaId = (targetSchema == null ? void 0 : targetSchema.tableMetaId) || (targetSchema == null ? void 0 : targetSchema.id) || referencedTableId;
+  const parentTableId = (context == null ? void 0 : context.parentTableId) || (context == null ? void 0 : context.tableId);
+  const effectiveParentRecordId = parentRowId || ((_c = context == null ? void 0 : context.parentRecord) == null ? void 0 : _c.recordId) || ((_d = context == null ? void 0 : context.parentRecord) == null ? void 0 : _d.id) || (context == null ? void 0 : context.rowId);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "td",
     {
       ref: cellRef,
       onBlur: handleBlur,
       onKeyDown: handleKeyDown,
       title: validationError || void 0,
-      className: `border border-slate-200 p-0 relative h-8 transition-colors ${isContact ? "min-w-[140px]" : ""} ${validationError ? "border-rose-400 ring-1 ring-rose-400 bg-rose-50/20" : ""}`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      style: width ? { width, minWidth: width, maxWidth: width } : void 0,
+      className: `border border-slate-200 p-0 relative h-8 transition-colors ${colType === "RELATION" ? "overflow-visible" : "overflow-hidden"} ${validationError ? "border-rose-400 ring-1 ring-rose-400 bg-rose-50/20" : ""}`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         InputComponent,
         {
           value: draftValue,
@@ -1479,10 +2705,25 @@ function SubTableCell({
             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 },
+            parentTableId,
+            parentRecord: {
+              tableId: parentTableId,
+              recordId: effectiveParentRecordId,
+              id: effectiveParentRecordId,
+              data: (context == null ? void 0 : context.rowData) || ((_e = context == null ? void 0 : context.parentRecord) == null ? void 0 : _e.data)
+            },
             rowData: record.data,
-            tableId: (targetSchema == null ? void 0 : targetSchema.tableMetaId) || (targetSchema == null ? void 0 : targetSchema.id) || referencedTableId,
-            updateQuietly: (rid, colName, val) => onCommitRef.current(rid, colName, val)
+            tableId: subTableMetaId,
+            tableMetaId: subTableMetaId,
+            recordId: record.id,
+            orgId: context == null ? void 0 : context.orgId,
+            updateQuietly: (rid, colName, val) => {
+              if (onQuietUpdate) {
+                onQuietUpdate(rid, colName, val);
+              } else {
+                onCommitRef.current(rid, colName, val);
+              }
+            }
           })
         }
       )
@@ -1490,39 +2731,37 @@ function SubTableCell({
   );
 }
 function SubTableViewer({ rowId, column, value, onChange, context }) {
-  var _a, _b;
+  var _a, _b, _c, _d, _e, _f;
   const { addToast } = useToast();
   const entries = Array.isArray(value) ? value : [];
-  const [linkedRecords, setLinkedRecords] = (0, import_react6.useState)(() => {
+  const [linkedRecords, setLinkedRecords] = (0, import_react11.useState)(() => {
     const initial = [];
-    if (Array.isArray(value)) {
-      for (const entry of value) {
-        if (entry.recordId && entry._resolvedData) {
-          initial.push({ id: entry.recordId, data: entry._resolvedData });
-        }
+    for (const entry of entries) {
+      if (entry.recordId && entry._resolvedData) {
+        initial.push({ id: entry.recordId, data: entry._resolvedData });
       }
     }
     return initial;
   });
-  const [targetSchema, setTargetSchema] = (0, import_react6.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react6.useState)(true);
-  const [isSearchOpen, setIsSearchOpen] = (0, import_react6.useState)(false);
-  const [searchQuery, setSearchQuery] = (0, import_react6.useState)("");
-  const [searchResults, setSearchResults] = (0, import_react6.useState)([]);
-  const [isSearching, setIsSearching] = (0, import_react6.useState)(false);
-  const [isCreating, setIsCreating] = (0, import_react6.useState)(false);
-  const [newRecordData, setNewRecordData] = (0, import_react6.useState)({});
-  const [conflictModalState, setConflictModalState] = (0, import_react6.useState)({
+  const [targetSchema, setTargetSchema] = (0, import_react11.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react11.useState)(true);
+  const [isSearchOpen, setIsSearchOpen] = (0, import_react11.useState)(false);
+  const [searchQuery, setSearchQuery] = (0, import_react11.useState)("");
+  const [searchResults, setSearchResults] = (0, import_react11.useState)([]);
+  const [isSearching, setIsSearching] = (0, import_react11.useState)(false);
+  const [isCreating, setIsCreating] = (0, import_react11.useState)(false);
+  const [newRecordData, setNewRecordData] = (0, import_react11.useState)({});
+  const [conflictModalState, setConflictModalState] = (0, import_react11.useState)({
     isOpen: false,
     fieldName: "",
     matchingRecords: []
   });
-  const searchRef = (0, import_react6.useRef)(null);
-  const searchTimerRef = (0, import_react6.useRef)(null);
+  const searchRef = (0, import_react11.useRef)(null);
+  const searchTimerRef = (0, import_react11.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)(() => {
+  const referencedTableId = ((_a = column.config) == null ? void 0 : _a.referencedTableId) || column.referencedTableId;
+  const fetchedIdsRef = (0, import_react11.useRef)(/* @__PURE__ */ new Set());
+  (0, import_react11.useEffect)(() => {
     if (entries.length > 0) {
       setLinkedRecords((prev) => {
         const existingIds = new Set(prev.map((r) => r.id));
@@ -1537,7 +2776,7 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
       });
     }
   }, [entries]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!referencedTableId || !executeAction) {
       setIsLoading(false);
       return;
@@ -1564,7 +2803,7 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
       recordIdsToFetch.forEach((id) => fetchedIdsRef.current.delete(id));
     }).finally(() => setIsLoading(false));
   }, [referencedTableId, executeAction, entries, targetSchema]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const handleClick = (e) => {
       if (searchRef.current && !searchRef.current.contains(e.target)) {
         setIsSearchOpen(false);
@@ -1573,7 +2812,7 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
     if (isSearchOpen) document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, [isSearchOpen]);
-  const handleSearch = (0, import_react6.useCallback)((query) => {
+  const handleSearch = (0, import_react11.useCallback)((query) => {
     setSearchQuery(query);
     if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
     if (!query.trim()) {
@@ -1599,24 +2838,79 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
       }
     }, 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 [localColumnOrder, setLocalColumnOrder] = (0, import_react11.useState)(null);
+  (0, import_react11.useEffect)(() => {
+    setLocalColumnOrder(null);
+  }, [column.name, (_b = column.config) == null ? void 0 : _b.subTableColumnOrder]);
+  const rawTargetColumns = (0, import_react11.useMemo)(() => {
+    return ((targetSchema == null ? void 0 : targetSchema.columns) || []).filter(
+      (c) => c.name !== "_id" && c.type !== "SUB_TABLE"
+    );
+  }, [targetSchema == null ? void 0 : targetSchema.columns]);
+  const targetColumns = (0, import_react11.useMemo)(() => {
+    var _a2;
+    const activeOrder = localColumnOrder || ((_a2 = column.config) == null ? void 0 : _a2.subTableColumnOrder);
+    if (!activeOrder || !Array.isArray(activeOrder) || activeOrder.length === 0) {
+      return rawTargetColumns;
     }
-  );
-  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;
+    const sorted = [...rawTargetColumns];
+    sorted.sort((a, b) => {
+      const idxA = activeOrder.indexOf(a.name);
+      const idxB = activeOrder.indexOf(b.name);
+      if (idxA === -1 && idxB === -1) return 0;
+      if (idxA === -1) return 1;
+      if (idxB === -1) return -1;
+      return idxA - idxB;
+    });
+    return sorted;
+  }, [rawTargetColumns, localColumnOrder, (_c = column.config) == null ? void 0 : _c.subTableColumnOrder]);
+  const handleSubTableColumnReorder = async (draggedName, dropTargetName) => {
+    if (draggedName === dropTargetName) return;
+    const currentNames = targetColumns.map((c) => c.name);
+    const fromIdx = currentNames.indexOf(draggedName);
+    const toIdx = currentNames.indexOf(dropTargetName);
+    if (fromIdx === -1 || toIdx === -1 || fromIdx === toIdx) return;
+    const newOrder = [...currentNames];
+    const [moved] = newOrder.splice(fromIdx, 1);
+    newOrder.splice(toIdx, 0, moved);
+    setLocalColumnOrder(newOrder);
+    if (context == null ? void 0 : context.onUpdateColumnConfig) {
+      try {
+        await context.onUpdateColumnConfig(column.name, {
+          subTableColumnOrder: newOrder
+        });
+      } catch (err) {
+        console.error("[SubTableViewer] Failed to save sub-table column order:", err);
+      }
+    }
+  };
+  const { draggedColName, dragOverColName, getHeaderDragProps } = useColumnReorder({
+    onReorder: handleSubTableColumnReorder,
+    disabled: isLoading
+  });
+  const targetTableId = (targetSchema == null ? void 0 : targetSchema.tableMetaId) || (targetSchema == null ? void 0 : targetSchema.id) || referencedTableId || column.name;
+  const { columnWidths, startResize } = useColumnResize({
+    storageKey: `table_sub_${targetTableId}_widths`,
+    minWidth: 60,
+    defaultWidth: 150,
+    getMinColWidth: (colName) => {
+      const col = targetColumns.find((c) => c.name === colName);
+      return calculateMinColumnWidth(colName, true, col == null ? void 0 : col.type);
+    }
+  });
+  const [relationOptions, setRelationOptions] = (0, import_react11.useState)({});
+  (0, import_react11.useEffect)(() => {
+    if (!executeAction || !(targetSchema == null ? void 0 : targetSchema.columns) || targetSchema.columns.length === 0) return;
+    const relationCols = targetSchema.columns.filter((c) => {
+      var _a2, _b2;
+      return ((_a2 = c.type) == null ? void 0 : _a2.toUpperCase()) === "RELATION" && ((_b2 = c.config) == null ? void 0 : _b2.referencedTableId);
     });
     relationCols.forEach(async (col) => {
+      var _a2, _b2;
       try {
         const options = await executeAction("FETCH_RELATION", {
-          referencedTableId: col.referencedTableId,
-          displayField: col.displayField
+          referencedTableId: (_a2 = col.config) == null ? void 0 : _a2.referencedTableId,
+          displayField: (_b2 = col.config) == null ? void 0 : _b2.displayField
         });
         if (options && Array.isArray(options)) {
           setRelationOptions((prev) => __spreadProps(__spreadValues({}, prev), { [col.name]: options }));
@@ -1626,12 +2920,12 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
       }
     });
   }, [executeAction, targetColumns]);
-  const refetchRelation = (0, import_react6.useCallback)(async (colName) => {
-    var _a2;
+  const refetchRelation = (0, import_react11.useCallback)(async (colName) => {
+    var _a2, _b2, _c2;
     const col = targetColumns.find((c) => c.name === colName);
-    if (!col || ((_a2 = col.type) == null ? void 0 : _a2.toUpperCase()) !== "RELATION" || !col.referencedTableId || !executeAction) return;
+    if (!col || ((_a2 = col.type) == null ? void 0 : _a2.toUpperCase()) !== "RELATION" || !((_b2 = col.config) == null ? void 0 : _b2.referencedTableId) || !executeAction) return;
     try {
-      const options = await executeAction("FETCH_RELATION", { referencedTableId: col.referencedTableId, displayField: col.displayField });
+      const options = await executeAction("FETCH_RELATION", { referencedTableId: col.config.referencedTableId, displayField: (_c2 = col.config) == null ? void 0 : _c2.displayField });
       if (options && Array.isArray(options)) {
         setRelationOptions((prev) => __spreadProps(__spreadValues({}, prev), { [col.name]: options }));
       }
@@ -1770,8 +3064,8 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
     );
     updateParentLinkage(updated);
   };
-  const isMountedRef = (0, import_react6.useRef)(true);
-  (0, import_react6.useEffect)(() => {
+  const isMountedRef = (0, import_react11.useRef)(true);
+  (0, import_react11.useEffect)(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
@@ -1795,7 +3089,9 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
       try {
         const res = await executeAction("UPDATE_RECORD", {
           tableId: referencedTableId,
+          tableMetaId: referencedTableId,
           recordId,
+          orgId: context == null ? void 0 : context.orgId,
           data: { [colName]: value2 }
         });
         if (res && res.success === false) {
@@ -1856,8 +3152,21 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
     }
   };
   const handleRecordCellChange = handleCommitRecordCell;
+  const handleQuietSubTableCellChange = (0, import_react11.useCallback)((recordId, colName, value2) => {
+    setLinkedRecords(
+      (prev) => prev.map((r) => r.id === recordId ? __spreadProps(__spreadValues({}, r), { data: __spreadProps(__spreadValues({}, r.data), { [colName]: value2 }) }) : r)
+    );
+    const updatedEntries = entries.map(
+      (e) => e.recordId === recordId ? __spreadProps(__spreadValues({}, e), { _resolvedData: __spreadProps(__spreadValues({}, e._resolvedData || {}), { [colName]: value2 }) }) : e
+    );
+    if (context == null ? void 0 : context.updateQuietly) {
+      context.updateQuietly(rowId, column.name, updatedEntries);
+    } else {
+      onChange(updatedEntries);
+    }
+  }, [entries, context, rowId, column.name, onChange]);
   const handleCreateRecord = async () => {
-    var _a2, _b2, _c, _d, _e;
+    var _a2, _b2, _c2, _d2, _e2;
     if (!executeAction || !referencedTableId) return;
     for (const col of targetColumns) {
       if (col.isRequired) {
@@ -1884,6 +3193,8 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
     try {
       const res = await executeAction("CREATE_RECORD", {
         tableId: referencedTableId,
+        tableMetaId: referencedTableId,
+        orgId: context == null ? void 0 : context.orgId,
         records: [newRecordData]
       });
       if (res && (res.error === "UNIQUE_CONSTRAINT_CONFLICT" || res.code === "UNIQUE_CONSTRAINT_CONFLICT")) {
@@ -1904,9 +3215,9 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
         setNewRecordData({});
       }
     } catch (err) {
-      const isConflict = (err == null ? void 0 : err.error) === "UNIQUE_CONSTRAINT_CONFLICT" || (err == null ? void 0 : err.code) === "UNIQUE_CONSTRAINT_CONFLICT" || ((_c = err == null ? void 0 : err.data) == null ? void 0 : _c.error) === "UNIQUE_CONSTRAINT_CONFLICT" || ((_d = err == null ? void 0 : err.message) == null ? void 0 : _d.includes("UNIQUE_CONSTRAINT_CONFLICT"));
+      const isConflict = (err == null ? void 0 : err.error) === "UNIQUE_CONSTRAINT_CONFLICT" || (err == null ? void 0 : err.code) === "UNIQUE_CONSTRAINT_CONFLICT" || ((_c2 = err == null ? void 0 : err.data) == null ? void 0 : _c2.error) === "UNIQUE_CONSTRAINT_CONFLICT" || ((_d2 = err == null ? void 0 : err.message) == null ? void 0 : _d2.includes("UNIQUE_CONSTRAINT_CONFLICT"));
       if (isConflict) {
-        const conflictPayload = (err == null ? void 0 : err.error) === "UNIQUE_CONSTRAINT_CONFLICT" ? err : ((_e = err == null ? void 0 : err.data) == null ? void 0 : _e.error) === "UNIQUE_CONSTRAINT_CONFLICT" ? err.data : err;
+        const conflictPayload = (err == null ? void 0 : err.error) === "UNIQUE_CONSTRAINT_CONFLICT" ? err : ((_e2 = err == null ? void 0 : err.data) == null ? void 0 : _e2.error) === "UNIQUE_CONSTRAINT_CONFLICT" ? err.data : err;
         handleUniqueConflict(conflictPayload);
         return;
       }
@@ -1918,32 +3229,33 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
     }
   };
   const getDisplayLabel = (record) => {
-    const fields = column.subTableDisplayFields || [];
+    var _a2;
+    const fields = ((_a2 = column.config) == null ? void 0 : _a2.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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "p-3 animate-in fade-in slide-in-from-top-2 duration-200", dir: "rtl", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-4 mb-2.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs font-bold text-slate-600", children: (_e = targetSchema == null ? void 0 : targetSchema.name) != null ? _e : (_d = column.config) == null ? void 0 : _d.referencedTableName }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative", ref: searchRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.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" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime9.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)(
+          isSearchOpen && /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)(
               "input",
               {
                 type: "text",
@@ -1954,7 +3266,7 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
                 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)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "max-h-48 overflow-y-auto", children: isSearching ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)(
               "button",
               {
                 type: "button",
@@ -1963,10 +3275,10 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
                 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..." }) })
+            )) : searchQuery.trim() ? /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.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)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "button",
           {
             type: "button",
@@ -1986,36 +3298,69 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
             },
             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" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime9.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" }),
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.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_runtime9.jsx)("div", { className: "overflow-x-auto pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("table", { className: "w-full text-xs border-collapse table-auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("tr", { className: "bg-slate-100/80 h-12 min-h-[48px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("th", { className: "border border-slate-200 px-2 py-1.5 text-center w-10 font-semibold text-slate-500 h-12 min-h-[48px] align-middle", style: { width: 40, minWidth: 40, maxWidth: 40 }, children: "\u05E0\u05D1\u05D7\u05E8" }),
         targetColumns.map((col) => {
-          var _a2;
-          const isContact = ((_a2 = col.type) == null ? void 0 : _a2.toUpperCase()) === "GOOGLE_CONTACT";
-          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          const dragProps = getHeaderDragProps(col.name);
+          const isDragging = draggedColName === col.name;
+          const isDragOver = dragOverColName === col.name;
+          const colMinWidth = calculateMinColumnWidth(col.name, true, col.type);
+          const currentWidth = Math.max(colMinWidth, columnWidths[col.name] || 150);
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
             "th",
-            {
-              className: `border border-slate-200 px-2 py-1.5 text-right font-semibold text-slate-600 whitespace-nowrap ${isContact ? "min-w-[140px]" : ""}`,
-              children: col.name
-            },
+            __spreadProps(__spreadValues({
+              style: { width: currentWidth, minWidth: currentWidth, maxWidth: currentWidth },
+              title: col.name
+            }, dragProps), {
+              className: `relative border border-slate-200 px-3 py-1.5 font-semibold text-slate-600 select-none cursor-grab active:cursor-grabbing transition-colors h-12 min-h-[48px] align-middle ${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_runtime9.jsx)(
+                  "div",
+                  {
+                    onMouseDown: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      startResize(col.name, currentWidth, e.clientX, colMinWidth);
+                    },
+                    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_runtime9.jsxs)("div", { className: "flex items-center justify-between gap-1.5 group overflow-hidden w-full", title: col.name, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColumnHeaderTitle, { name: col.name, width: currentWidth, isSubTable: true }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M8 9h.01M8 15h.01M16 9h.01M16 15h.01" })
+                    }
+                  )
+                ] })
+              ]
+            }),
             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_runtime9.jsx)("th", { className: "border border-slate-200 px-2 py-1.5 w-14 h-12 min-h-[48px]", style: { width: 56, minWidth: 56, maxWidth: 56 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("th", { className: "w-full min-w-[50px] border border-slate-200 pointer-events-none h-12 min-h-[48px]" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tbody", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("tbody", { children: [
         entries.map((entry) => {
           var _a2;
           const record = linkedRecords.find((r) => r.id === entry.recordId);
-          return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { className: "hover:bg-blue-50/30 transition-colors", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "border border-slate-200 px-2 py-1 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("tr", { className: "hover:bg-blue-50/30 transition-colors", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { className: "border border-slate-200 px-2 py-1 text-center", style: { width: 40, minWidth: 40, maxWidth: 40 }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "input",
               {
                 type: "checkbox",
@@ -2025,41 +3370,44 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
               }
             ) }),
             targetColumns.map((col) => {
-              var _a3;
-              const isContact = ((_a3 = col.type) == null ? void 0 : _a3.toUpperCase()) === "GOOGLE_CONTACT";
+              const currentWidth = columnWidths[col.name] || 150;
               if (!record) {
-                return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "td",
                   {
-                    className: `border border-slate-200 p-0 relative h-8 ${isContact ? "min-w-[140px]" : ""}`,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-slate-300 italic px-2", children: "\u05D8\u05D5\u05E2\u05DF..." })
+                    style: { width: currentWidth, minWidth: currentWidth, maxWidth: currentWidth },
+                    className: "border border-slate-200 p-0 relative h-8 overflow-hidden",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-slate-300 italic px-2", children: "\u05D8\u05D5\u05E2\u05DF..." })
                   },
                   col.name
                 );
               }
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 SubTableCell,
                 {
                   record,
                   column: col,
                   targetSchema,
                   referencedTableId,
+                  parentRowId: rowId,
                   context,
                   relationOptions,
                   setRelationOptions,
                   refetchRelation,
-                  onCommit: handleCommitRecordCell
+                  onCommit: handleCommitRecordCell,
+                  onQuietUpdate: handleQuietSubTableCellChange,
+                  width: currentWidth
                 },
                 `${record.id}_${col.name}`
               );
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: "border border-slate-200 px-1 py-1 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { className: "border border-slate-200 px-1 py-1 text-center", style: { width: 56, minWidth: 56, maxWidth: 56 }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-center gap-1", children: [
               ((_a2 = column.config) == null ? void 0 : _a2.actionType) === "WHATSAPP" && (() => {
-                var _a3, _b2, _c;
+                var _a3, _b2, _c2;
                 const actionPhoneCol = (_a3 = column.config) == null ? void 0 : _a3.actionPhoneColumn;
-                const phone = actionPhoneCol ? ((_b2 = record == null ? void 0 : record.data) == null ? void 0 : _b2[actionPhoneCol]) || ((_c = entry._resolvedData) == null ? void 0 : _c[actionPhoneCol]) : null;
+                const phone = actionPhoneCol ? ((_b2 = record == null ? void 0 : record.data) == null ? void 0 : _b2[actionPhoneCol]) || ((_c2 = entry._resolvedData) == null ? void 0 : _c2[actionPhoneCol]) : null;
                 if (phone) {
-                  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     "button",
                     {
                       type: "button",
@@ -2069,13 +3417,13 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
                       },
                       className: "text-emerald-500 hover:text-emerald-600 p-0.5 rounded hover:bg-emerald-50 transition-colors cursor-pointer",
                       title: `\u05E4\u05EA\u05D9\u05D7\u05EA \u05D5\u05D5\u05D0\u05D8\u05E1\u05D0\u05E4 (${phone})`,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-3.5 h-3.5", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a5.816 5.816 0 00-.571-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { className: "w-3.5 h-3.5", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a5.816 5.816 0 00-.571-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) })
                     }
                   );
                 }
                 return null;
               })(),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "button",
                 {
                   type: "button",
@@ -2085,27 +3433,30 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
                   },
                   className: "text-slate-400 hover:text-rose-500 p-0.5 rounded transition-colors cursor-pointer inline-flex items-center justify-center",
                   title: "\u05D4\u05E1\u05E8 \u05E7\u05D9\u05E9\u05D5\u05E8",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) })
                 }
               )
-            ] }) })
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { className: "border border-slate-200 bg-white pointer-events-none" })
           ] }, 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" }) }),
+        isCreating && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("tr", { className: "bg-emerald-50/40", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { className: "border border-emerald-200 px-2 py-1 text-center", style: { width: 40, minWidth: 40, maxWidth: 40 }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-emerald-500 font-bold text-[10px]", children: "\u05D7\u05D3\u05E9" }) }),
           targetColumns.map((col) => {
-            var _a2, _b2;
+            var _a2, _b2, _c2, _d2, _e2;
             const colType = ((_a2 = col.type) == null ? void 0 : _a2.toUpperCase()) || "DEFAULT";
             const InputComponent = FORM_INPUTS[colType] || FORM_INPUTS.DEFAULT;
-            const isContact = colType === "GOOGLE_CONTACT";
-            return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            const currentWidth = columnWidths[col.name] || 150;
+            const effectiveParentId = rowId || ((_b2 = context == null ? void 0 : context.parentRecord) == null ? void 0 : _b2.recordId) || ((_c2 = context == null ? void 0 : context.parentRecord) == null ? void 0 : _c2.id) || (context == null ? void 0 : context.rowId);
+            return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "td",
               {
-                className: `border border-emerald-200 p-0 relative h-8 ${isContact ? "min-w-[140px]" : ""}`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                style: { width: currentWidth, minWidth: currentWidth, maxWidth: currentWidth },
+                className: `border border-emerald-200 p-0 relative h-8 ${colType === "RELATION" ? "overflow-visible" : "overflow-hidden"}`,
+                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   InputComponent,
                   {
-                    value: (_b2 = newRecordData[col.name]) != null ? _b2 : colType === "BOOLEAN" ? false : "",
+                    value: (_d2 = newRecordData[col.name]) != null ? _d2 : colType === "BOOLEAN" ? false : "",
                     column: col,
                     rowId: "new_record",
                     onChange: (v) => setNewRecordData((prev) => __spreadProps(__spreadValues({}, prev), { [col.name]: v })),
@@ -2113,7 +3464,16 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
                       tableName: (targetSchema == null ? void 0 : targetSchema.name) || (targetSchema == null ? void 0 : targetSchema.tableName) || (targetSchema == null ? void 0 : targetSchema.title) || (targetSchema == null ? void 0 : targetSchema.id) || "Table",
                       relationOptions,
                       refetchRelation,
-                      tableId: (targetSchema == null ? void 0 : targetSchema.tableMetaId) || (targetSchema == null ? void 0 : targetSchema.id) || referencedTableId
+                      parentTableId: (context == null ? void 0 : context.parentTableId) || (context == null ? void 0 : context.tableId),
+                      parentRecord: {
+                        tableId: (context == null ? void 0 : context.parentTableId) || (context == null ? void 0 : context.tableId),
+                        recordId: effectiveParentId,
+                        id: effectiveParentId,
+                        data: (context == null ? void 0 : context.rowData) || ((_e2 = context == null ? void 0 : context.parentRecord) == null ? void 0 : _e2.data)
+                      },
+                      tableId: targetTableId,
+                      tableMetaId: targetTableId,
+                      orgId: context == null ? void 0 : context.orgId
                     })
                   }
                 )
@@ -2121,18 +3481,18 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
               `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)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { className: "border border-emerald-200 px-1 py-1 text-center", style: { width: 56, minWidth: 56, maxWidth: 56 }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.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" }) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M5 13l4 4L19 7" }) })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "button",
               {
                 type: "button",
@@ -2141,46 +3501,47 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
                 },
                 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" }) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M6 18L18 6M6 6l12 12" }) })
               }
             )
-          ] }) })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { className: "border border-emerald-200 bg-emerald-50/40 pointer-events-none" })
         ] })
       ] })
     ] }) }),
-    conflictModalState.isOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    conflictModalState.isOpen && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "div",
       {
         className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm animate-in fade-in duration-200",
         dir: "rtl",
         onClick: handleCancelConflict,
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "div",
           {
             className: "bg-white rounded-xl shadow-2xl w-full max-w-lg sm:max-w-xl overflow-hidden border border-slate-200 animate-in fade-in zoom-in-95 duration-200",
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "p-5 border-b border-slate-100 flex items-center gap-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-10 h-10 rounded-full bg-blue-50 border border-blue-200 flex items-center justify-center text-blue-600 flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" }) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { className: "text-base font-bold text-slate-800", children: conflictModalState.matchingRecords.length > 1 ? "\u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05E7\u05D9\u05D9\u05DE\u05D5\u05EA \u05D1\u05D8\u05D1\u05DC\u05D4" : "\u05E8\u05E9\u05D5\u05DE\u05D4 \u05E7\u05D9\u05D9\u05DE\u05EA \u05D1\u05D8\u05D1\u05DC\u05D4" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs text-slate-500", children: "\u05E0\u05DE\u05E6\u05D0\u05D4 \u05E8\u05E9\u05D5\u05DE\u05D4 \u05E7\u05D9\u05D9\u05DE\u05EA \u05E2\u05DD \u05D0\u05D5\u05EA\u05D5 \u05E2\u05E8\u05DA \u05D9\u05D9\u05D7\u05D5\u05D3\u05D9" })
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "p-5 border-b border-slate-100 flex items-center gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "w-10 h-10 rounded-full bg-blue-50 border border-blue-200 flex items-center justify-center text-blue-600 flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" }) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "text-base font-bold text-slate-800", children: conflictModalState.matchingRecords.length > 1 ? "\u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05E7\u05D9\u05D9\u05DE\u05D5\u05EA \u05D1\u05D8\u05D1\u05DC\u05D4" : "\u05E8\u05E9\u05D5\u05DE\u05D4 \u05E7\u05D9\u05D9\u05DE\u05EA \u05D1\u05D8\u05D1\u05DC\u05D4" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-xs text-slate-500", children: "\u05E0\u05DE\u05E6\u05D0\u05D4 \u05E8\u05E9\u05D5\u05DE\u05D4 \u05E7\u05D9\u05D9\u05DE\u05EA \u05E2\u05DD \u05D0\u05D5\u05EA\u05D5 \u05E2\u05E8\u05DA \u05D9\u05D9\u05D7\u05D5\u05D3\u05D9" })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "p-5 space-y-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "text-sm text-slate-700 leading-relaxed", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "p-5 space-y-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("p", { className: "text-sm text-slate-700 leading-relaxed", children: [
                   "\u05E7\u05D9\u05D9\u05DE\u05EA \u05DB\u05D1\u05E8 \u05E8\u05E9\u05D5\u05DE\u05D4 \u05E2\u05DD \u05D4\u05E2\u05E8\u05DA \u05E9\u05E0\u05D1\u05D7\u05E8 \u05D1\u05E9\u05D3\u05D4",
                   " ",
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-bold text-slate-900 bg-slate-100 px-1.5 py-0.5 rounded border border-slate-200", children: conflictModalState.fieldName }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "font-bold text-slate-900 bg-slate-100 px-1.5 py-0.5 rounded border border-slate-200", children: conflictModalState.fieldName }),
                   ". \u05D4\u05D0\u05DD \u05EA\u05E8\u05E6\u05D4 \u05DC\u05E7\u05E9\u05E8 \u05D0\u05D5\u05EA\u05D4 \u05DC\u05EA\u05EA-\u05D4\u05D8\u05D1\u05DC\u05D4 \u05D1\u05DE\u05E7\u05D5\u05DD \u05DC\u05D9\u05E6\u05D5\u05E8 \u05D7\u05D3\u05E9\u05D4?"
                 ] }),
-                conflictModalState.matchingRecords.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "p-3 bg-blue-50 border border-blue-200 rounded-lg text-xs font-semibold text-blue-800", children: [
+                conflictModalState.matchingRecords.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "p-3 bg-blue-50 border border-blue-200 rounded-lg text-xs font-semibold text-blue-800", children: [
                   "\u05E0\u05DE\u05E6\u05D0\u05D5 ",
                   conflictModalState.matchingRecords.length,
                   " \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05E7\u05D9\u05D9\u05DE\u05D5\u05EA. \u05D4\u05D0\u05DD \u05DC\u05E7\u05E9\u05E8 \u05D0\u05EA \u05DB\u05D5\u05DC\u05DF?"
                 ] }),
-                conflictModalState.matchingRecords.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "overflow-x-auto border border-slate-200 rounded-lg max-h-48 text-xs bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("table", { className: "w-full text-right border-collapse", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { className: "bg-slate-100 text-slate-700 font-semibold border-b whitespace-nowrap", children: (targetColumns.length > 0 ? targetColumns.filter((c) => c.name !== "_id" && c.name !== "id") : Object.keys(((_b = conflictModalState.matchingRecords[0]) == null ? void 0 : _b.data) || {}).filter((k) => k !== "_id" && k !== "id").map((name) => ({ name }))).map((col) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                conflictModalState.matchingRecords.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "overflow-x-auto border border-slate-200 rounded-lg max-h-48 text-xs bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("table", { className: "w-full text-right border-collapse", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("tr", { className: "bg-slate-100 text-slate-700 font-semibold border-b whitespace-nowrap", children: (targetColumns.length > 0 ? targetColumns.filter((c) => c.name !== "_id" && c.name !== "id") : Object.keys(((_f = conflictModalState.matchingRecords[0]) == null ? void 0 : _f.data) || {}).filter((k) => k !== "_id" && k !== "id").map((name) => ({ name }))).map((col) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     "th",
                     {
                       className: "bg-slate-100 text-slate-700 font-semibold p-2 border-b whitespace-nowrap",
@@ -2188,22 +3549,14 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
                     },
                     col.name
                   )) }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tbody", { children: conflictModalState.matchingRecords.map((r, idx) => {
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("tbody", { children: conflictModalState.matchingRecords.map((r, idx) => {
                     const cols = targetColumns.length > 0 ? targetColumns.filter((c) => c.name !== "_id" && c.name !== "id") : Object.keys(r.data || {}).filter((k) => k !== "_id" && k !== "id").map((name) => ({ name }));
-                    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { className: "hover:bg-slate-50/80 transition-colors", children: cols.map((col) => {
+                    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("tr", { className: "hover:bg-slate-50/80 transition-colors", children: cols.map((col) => {
                       var _a2;
                       const rawVal = (_a2 = r.data) == null ? void 0 : _a2[col.name];
-                      let displayVal = "-";
-                      if (rawVal !== void 0 && rawVal !== null && rawVal !== "") {
-                        if (typeof rawVal === "boolean") {
-                          displayVal = rawVal ? "\u05DB\u05DF" : "\u05DC\u05D0";
-                        } else if (typeof rawVal === "object") {
-                          displayVal = Array.isArray(rawVal) ? rawVal.join(", ") : JSON.stringify(rawVal);
-                        } else {
-                          displayVal = String(rawVal);
-                        }
-                      }
-                      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      const colDef = targetColumns.find((c) => c.name === col.name) || col;
+                      const displayVal = formatConflictCellValue(rawVal, colDef, relationOptions || (context == null ? void 0 : context.relationOptions));
+                      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                         "td",
                         {
                           className: "p-2 border-b border-slate-100 whitespace-nowrap text-slate-800",
@@ -2215,8 +3568,8 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
                   }) })
                 ] }) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "p-4 bg-slate-50 border-t border-slate-100 flex items-center justify-end gap-2.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "p-4 bg-slate-50 border-t border-slate-100 flex items-center justify-end gap-2.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2225,14 +3578,14 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
                     children: "\u05D1\u05D9\u05D8\u05D5\u05DC"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                   "button",
                   {
                     type: "button",
                     onClick: handleConfirmLinkConflict,
                     className: "px-4 py-2 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow transition-colors flex items-center gap-1.5 cursor-pointer",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" }) }),
                       conflictModalState.matchingRecords.length > 1 ? "\u05E7\u05E9\u05E8 \u05D0\u05EA \u05DB\u05D5\u05DC\u05DF" : "\u05E7\u05E9\u05E8 \u05E8\u05E9\u05D5\u05DE\u05D4"
                     ]
                   }
@@ -2247,8 +3600,8 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
 }
 
 // src/components/TableBlock/TableBlockClient.tsx
-var import_lucide_react4 = require("lucide-react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function TableBlockClient({
   data: initialRecords,
   settings: schema,
@@ -2265,22 +3618,25 @@ 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)(() => {
+  const { columnWidths, startResize } = useColumnResize({
+    storageKey: `table_widths_${tableKey}`,
+    minWidth: 60,
+    defaultWidth: 200,
+    getMinColWidth: (colName) => {
+      const col = (localColumns || []).find((c) => c.name === colName);
+      return calculateMinColumnWidth(colName, false, col == null ? void 0 : col.type);
+    }
+  });
+  const [isMounted, setIsMounted] = (0, import_react12.useState)(false);
+  const [isInitialLoading, setIsInitialLoading] = (0, import_react12.useState)(true);
+  const [page, setPage] = (0, import_react12.useState)(1);
+  const [limit, setLimit] = (0, import_react12.useState)(50);
+  const [totalRecords, setTotalRecords] = (0, import_react12.useState)(0);
+  const [totalPages, setTotalPages] = (0, import_react12.useState)(1);
+  const [showSummary, setShowSummary] = (0, import_react12.useState)(false);
+  (0, import_react12.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");
@@ -2295,7 +3651,6 @@ function TableBlockClient({
     }
     setIsMounted(true);
   }, [tableKey]);
-  const [showSummary, setShowSummary] = (0, import_react7.useState)(false);
   const toggleSummary = () => {
     setShowSummary((prev) => {
       const next = !prev;
@@ -2304,29 +3659,6 @@ function TableBlockClient({
       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;
@@ -2352,7 +3684,7 @@ function TableBlockClient({
       return __spreadProps(__spreadValues({}, row), { id: String(row.id || ""), data: rowData });
     });
   };
-  const mergeColumnDefs = (0, import_react7.useCallback)((existingCols, incomingCols) => {
+  const mergeColumnDefs = (0, import_react12.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]));
@@ -2372,18 +3704,18 @@ function TableBlockClient({
       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)(() => {
+  const [localColumns, setLocalColumns] = (0, import_react12.useState)(() => (schema == null ? void 0 : schema.columns) || []);
+  (0, import_react12.useEffect)(() => {
     if ((schema == null ? void 0 : schema.columns) && schema.columns.length > 0) {
       setLocalColumns((prev) => mergeColumnDefs(prev, schema.columns));
     }
   }, [schema == null ? void 0 : schema.columns, mergeColumnDefs]);
-  const [dirty, setDirty] = (0, import_react7.useState)({ added: [], modified: {}, deleted: [] });
-  const dirtyRef = (0, import_react7.useRef)(dirty);
-  (0, import_react7.useEffect)(() => {
+  const [dirty, setDirty] = (0, import_react12.useState)({ added: [], modified: {}, deleted: [] });
+  const dirtyRef = (0, import_react12.useRef)(dirty);
+  (0, import_react12.useEffect)(() => {
     dirtyRef.current = dirty;
   }, [dirty]);
-  const mergeWithDirty = (0, import_react7.useCallback)((baseRecords) => {
+  const mergeWithDirty = (0, import_react12.useCallback)((baseRecords) => {
     const { added, modified, deleted } = dirtyRef.current;
     const nonDeleted = (baseRecords || []).filter((r) => !deleted.includes(r.id));
     const modifiedRecords = nonDeleted.map((r) => {
@@ -2396,10 +3728,13 @@ function TableBlockClient({
     const uniqueAdded = added.filter((r) => !baseIds.has(r.id));
     return [...uniqueAdded, ...modifiedRecords];
   }, []);
-  const [data, setData] = (0, import_react7.useState)(() => normalizeRecords(initialRecords));
-  (0, import_react7.useEffect)(() => {
+  const [data, setData] = (0, import_react12.useState)(() => normalizeRecords(initialRecords));
+  const [serverRecords, setServerRecords] = (0, import_react12.useState)(() => normalizeRecords(initialRecords));
+  (0, import_react12.useEffect)(() => {
     if (initialRecords) {
-      setData(mergeWithDirty(normalizeRecords(initialRecords)));
+      const norm = normalizeRecords(initialRecords);
+      setServerRecords(norm);
+      setData(mergeWithDirty(norm));
     }
   }, [initialRecords, mergeWithDirty]);
   const isEqualValues = (a, b) => {
@@ -2412,19 +3747,19 @@ function TableBlockClient({
     }
     return false;
   };
-  const [baseRecordsMap, setBaseRecordsMap] = (0, import_react7.useState)(() => {
+  const [baseRecordsMap, setBaseRecordsMap] = (0, import_react12.useState)(() => {
     const map = /* @__PURE__ */ new Map();
     (normalizeRecords(initialRecords) || []).forEach((r) => map.set(r.id, __spreadValues({}, r.data)));
     return map;
   });
-  (0, import_react7.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (initialRecords && initialRecords.length > 0) {
       const map = /* @__PURE__ */ new Map();
       (normalizeRecords(initialRecords) || []).forEach((r) => map.set(r.id, __spreadValues({}, r.data)));
       setBaseRecordsMap(map);
     }
   }, [initialRecords]);
-  const refetchTableData = (0, import_react7.useCallback)((targetPage) => {
+  const refetchTableData = (0, import_react12.useCallback)((targetPage) => {
     const tableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
     if (!tableId || !executeAction) return Promise.resolve();
     const activePage = targetPage !== void 0 ? targetPage : page;
@@ -2440,7 +3775,8 @@ function TableBlockClient({
           const map = /* @__PURE__ */ new Map();
           norm.forEach((r) => map.set(r.id, __spreadValues({}, r.data)));
           setBaseRecordsMap(map);
-          setData(norm);
+          setServerRecords(norm);
+          setData(mergeWithDirty(norm));
         }
         if (res.meta) {
           const total = typeof res.meta.totalRecords === "number" ? res.meta.totalRecords : 0;
@@ -2458,9 +3794,22 @@ function TableBlockClient({
     }).catch((err) => {
       console.error("[TableBlock] Failed to auto-fetch table data:", err);
     });
-  }, [schema == null ? void 0 : schema.tableMetaId, schema == null ? void 0 : schema.tableId, schema == null ? void 0 : schema.id, page, limit, executeAction, mergeColumnDefs]);
-  (0, import_react7.useEffect)(() => {
-    refetchTableData();
+  }, [schema == null ? void 0 : schema.tableMetaId, schema == null ? void 0 : schema.tableId, schema == null ? void 0 : schema.id, page, limit, executeAction, mergeColumnDefs, mergeWithDirty]);
+  (0, import_react12.useEffect)(() => {
+    let isMounted2 = true;
+    const fetchPromise = refetchTableData();
+    if (fetchPromise && typeof fetchPromise.finally === "function") {
+      fetchPromise.finally(() => {
+        if (isMounted2) {
+          setIsInitialLoading(false);
+        }
+      });
+    } else {
+      setIsInitialLoading(false);
+    }
+    return () => {
+      isMounted2 = false;
+    };
   }, [refetchTableData]);
   const handleLimitChange = (newLimit) => {
     setLimit(newLimit);
@@ -2475,31 +3824,50 @@ function TableBlockClient({
   const handleNextPage = () => {
     setPage((prev) => Math.min(totalPages, prev + 1));
   };
-  (0, import_react7.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (error) {
       showError(error, "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E8\u05DB\u05D9\u05D1");
     }
   }, [error, showError]);
-  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;
+  const [searchQuery, setSearchQuery] = (0, import_react12.useState)("");
+  const [columnFilters, setColumnFilters] = (0, import_react12.useState)({});
+  const [activeSearchCol, setActiveSearchCol] = (0, import_react12.useState)(null);
+  const activeSearchRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
+    if (!activeSearchCol) return;
+    const handleMouseDown = (e) => {
+      if (activeSearchRef.current && !activeSearchRef.current.contains(e.target)) {
+        setActiveSearchCol(null);
+      }
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, [activeSearchCol]);
+  const [selectedIds, setSelectedIds] = (0, import_react12.useState)(/* @__PURE__ */ new Set());
+  const [pendingDeletions, setPendingDeletions] = (0, import_react12.useState)([]);
+  const [isSaving, setIsSaving] = (0, import_react12.useState)(false);
+  const isUpdatingActive = Boolean(isUpdating || isSaving);
+  const [isSaveSuccess, setIsSaveSuccess] = (0, import_react12.useState)(false);
+  const [relationOptions, setRelationOptions] = (0, import_react12.useState)({});
+  const [expandedRowIds, setExpandedRowIds] = (0, import_react12.useState)(/* @__PURE__ */ new Set());
+  const schemaColsString = (0, import_react12.useMemo)(() => JSON.stringify(localColumns || []), [localColumns]);
+  const refetchRelation = (0, import_react12.useCallback)(async (colName) => {
+    var _a, _b, _c;
     let parsedCols = [];
     try {
       parsedCols = JSON.parse(schemaColsString);
     } catch (e) {
     }
-    const col = parsedCols.find((c) => c.name === colName);
-    if (!col || ((_a = col.type) == null ? void 0 : _a.toUpperCase()) !== "RELATION" || !col.referencedTableId) return;
+    const col = parsedCols.find((c) => {
+      var _a2;
+      return c.name === colName && ((_a2 = c.type) == null ? void 0 : _a2.toUpperCase()) === "RELATION";
+    });
+    if (!col || !((_a = col.config) == null ? void 0 : _a.referencedTableId)) return;
     try {
       if (executeAction) {
-        const options = await executeAction("FETCH_RELATION", { referencedTableId: col.referencedTableId, displayField: col.displayField });
+        const options = await executeAction("FETCH_RELATION", { referencedTableId: (_b = col.config) == null ? void 0 : _b.referencedTableId, displayField: (_c = col.config) == null ? void 0 : _c.displayField });
         if (options && Array.isArray(options)) {
           setRelationOptions((prev) => __spreadProps(__spreadValues({}, prev), { [colName]: options }));
         }
@@ -2508,7 +3876,7 @@ function TableBlockClient({
       console.warn(`[TableBlock] Could not fetch relation options for column ${colName}:`, err);
     }
   }, [schemaColsString, executeAction]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     let parsedCols = [];
     try {
       parsedCols = JSON.parse(schemaColsString);
@@ -2522,7 +3890,7 @@ function TableBlockClient({
       refetchRelation(col.name);
     });
   }, [schemaColsString, refetchRelation]);
-  const normalizedColumns = (0, import_react7.useMemo)(() => {
+  const normalizedColumns = (0, import_react12.useMemo)(() => {
     return (localColumns || []).map((col, idx) => {
       const isRequired = col.isRequired === true || String(col.isRequired) === "true";
       const isUnique = col.isUnique === true || String(col.isUnique) === "true";
@@ -2536,17 +3904,17 @@ function TableBlockClient({
       return ((_a = a.order) != null ? _a : 0) - ((_b = b.order) != null ? _b : 0);
     });
   }, [localColumns]);
-  const filteredColumns = (0, import_react7.useMemo)(() => {
+  const filteredColumns = (0, import_react12.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 customizableColumns = (0, import_react12.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 [isColumnsDropdownOpen, setIsColumnsDropdownOpen] = (0, import_react12.useState)(false);
+  const dropdownRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsColumnsDropdownOpen(false);
@@ -2624,8 +3992,6 @@ function TableBlockClient({
       }
     }
   };
-  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;
@@ -2660,6 +4026,43 @@ function TableBlockClient({
       }
     }
   };
+  const { draggedColName, dragOverColName, getHeaderDragProps } = useColumnReorder({
+    onReorder: handleColumnReorder,
+    disabled: isLoading || isUpdatingActive
+  });
+  const handleUpdateColumnConfig = async (columnName, partialConfig) => {
+    var _a;
+    let updatedColumns = [];
+    setLocalColumns((prevCols) => {
+      const nextCols = (prevCols || []).map((col) => {
+        if (col.name === columnName) {
+          return __spreadProps(__spreadValues({}, col), {
+            config: __spreadValues(__spreadValues({}, col.config || {}), partialConfig)
+          });
+        }
+        return col;
+      });
+      updatedColumns = nextCols;
+      return nextCols;
+    });
+    const targetTableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
+    if (targetTableId && executeAction && updatedColumns.length > 0) {
+      try {
+        const res = await executeAction("UPDATE_TABLE_COLUMNS", {
+          tableId: targetTableId,
+          tableMetaId: targetTableId,
+          columns: updatedColumns
+        });
+        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 config:", err);
+        showError((err == null ? void 0 : err.message) || String(err), "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E2\u05D3\u05DB\u05D5\u05DF \u05D4\u05D2\u05D3\u05E8\u05D5\u05EA \u05E2\u05DE\u05D5\u05D3\u05D4");
+      }
+    }
+  };
   const generateTempId = () => `temp_${Math.random().toString(36).substr(2, 9)}`;
   const handleAddRow = () => {
     const defaultData = {};
@@ -2754,13 +4157,13 @@ function TableBlockClient({
       });
     }
   };
-  const triggerSaveSuccess = (0, import_react7.useCallback)(() => {
+  const triggerSaveSuccess = (0, import_react12.useCallback)(() => {
     setIsSaveSuccess(true);
     setTimeout(() => {
       setIsSaveSuccess(false);
     }, 2500);
   }, []);
-  const handleQuietCellChange = (0, import_react7.useCallback)((rowId, colName, value) => {
+  const handleQuietCellChange = (0, import_react12.useCallback)((rowId, colName, value) => {
     setData((prev) => prev.map(
       (row) => row.id === rowId ? __spreadProps(__spreadValues({}, row), { data: __spreadProps(__spreadValues({}, row.data), { [colName]: value }) }) : row
     ));
@@ -2873,6 +4276,15 @@ function TableBlockClient({
     return formatted;
   };
   const hasChanges = dirty.added.length > 0 || Object.keys(dirty.modified).length > 0 || dirty.deleted.length > 0;
+  const handleRevertChanges = () => {
+    setDirty({ added: [], modified: {}, deleted: [] });
+    setData(serverRecords.map((r) => __spreadProps(__spreadValues({}, r), { data: __spreadValues({}, r.data) })));
+    setSelectedIds(/* @__PURE__ */ new Set());
+    setPendingDeletions([]);
+    if (emitEvent) {
+      emitEvent("SELECTION_CHANGE", { selectedIds: [], componentId });
+    }
+  };
   const handleSave = async () => {
     var _a, _b;
     if (!hasChanges) {
@@ -3019,18 +4431,89 @@ function TableBlockClient({
       setIsSaving(false);
     }
   };
-  const filteredData = (0, import_react7.useMemo)(() => {
-    if (!searchQuery) return data;
-    const lowerQuery = searchQuery.toLowerCase();
-    return data.filter(
-      (row) => (row == null ? void 0 : row.data) && Object.values(row.data).some(
-        (val) => String(val != null ? val : "").toLowerCase().includes(lowerQuery)
-      )
-    );
-  }, [data, searchQuery]);
-  const isUpdatingActive = Boolean(isUpdating || isSaving);
+  const getRowRelationLabels = (0, import_react12.useCallback)((rowVal, col) => {
+    const ids = normalizeRelationValue(rowVal);
+    if (ids.length === 0) return [];
+    const options = relationOptions[col.name] || [];
+    return ids.map((id) => {
+      const opt = options.find((o) => o.id === id || o._id === id);
+      if (opt) {
+        const resolved = resolveRelationLabel(opt, col);
+        if (resolved) return resolved;
+        if (opt.label) return String(opt.label);
+        if (opt.name) return String(opt.name);
+      }
+      if (typeof rowVal === "object" && rowVal !== null) {
+        if (rowVal._displayLabel) return String(rowVal._displayLabel);
+        if (rowVal.label) return String(rowVal.label);
+      }
+      return id;
+    });
+  }, [relationOptions]);
+  const getUniqueRelationOptions = (0, import_react12.useCallback)((col) => {
+    const seenIds = /* @__PURE__ */ new Set();
+    const results = [];
+    const options = relationOptions[col.name] || [];
+    data.forEach((row) => {
+      if (!(row == null ? void 0 : row.data)) return;
+      const ids = normalizeRelationValue(row.data[col.name]);
+      ids.forEach((id) => {
+        if (!seenIds.has(id)) {
+          seenIds.add(id);
+          const opt = options.find((o) => o.id === id || o._id === id);
+          let label = opt ? resolveRelationLabel(opt, col) : "";
+          if (!label && opt) label = opt.label || opt.name || opt.title || id;
+          if (!label) label = id;
+          results.push({ id, label });
+        }
+      });
+    });
+    return results.sort((a, b) => a.label.localeCompare(b.label));
+  }, [data, relationOptions]);
+  const filteredData = (0, import_react12.useMemo)(() => {
+    const hasGlobalSearch = Boolean(searchQuery && searchQuery.trim() !== "");
+    const activeFilters = Object.entries(columnFilters).filter(([, val]) => Boolean(val && val.trim() !== ""));
+    const hasColumnFilters = activeFilters.length > 0;
+    if (!hasGlobalSearch && !hasColumnFilters) return data;
+    const lowerGlobal = hasGlobalSearch ? searchQuery.trim().toLowerCase() : "";
+    return data.filter((row) => {
+      var _a;
+      if (!row || !row.data) return false;
+      if (hasGlobalSearch) {
+        const matchesGlobal = (localColumns || []).some((col) => {
+          var _a2;
+          const rawVal = row.data[col.name];
+          if (rawVal === void 0 || rawVal === null) return false;
+          if (((_a2 = col.type) == null ? void 0 : _a2.toUpperCase()) === "RELATION") {
+            const labels = getRowRelationLabels(rawVal, col);
+            return labels.some((l) => l.toLowerCase().includes(lowerGlobal));
+          }
+          if (typeof rawVal === "object") {
+            return JSON.stringify(rawVal).toLowerCase().includes(lowerGlobal);
+          }
+          return String(rawVal).toLowerCase().includes(lowerGlobal);
+        });
+        if (!matchesGlobal) return false;
+      }
+      for (const [colName, filterVal] of activeFilters) {
+        const lowerFilter = filterVal.trim().toLowerCase();
+        const col = (localColumns || []).find((c) => c.name === colName);
+        const rawVal = row.data[colName];
+        if (((_a = col == null ? void 0 : col.type) == null ? void 0 : _a.toUpperCase()) === "RELATION") {
+          const labels = getRowRelationLabels(rawVal, col);
+          const matches = labels.some((l) => l.toLowerCase().includes(lowerFilter));
+          if (!matches) return false;
+        } else {
+          if (rawVal === void 0 || rawVal === null) return false;
+          const strVal = typeof rawVal === "object" ? JSON.stringify(rawVal).toLowerCase() : String(rawVal).toLowerCase();
+          if (!strVal.includes(lowerFilter)) return false;
+        }
+      }
+      return true;
+    });
+  }, [data, searchQuery, columnFilters, localColumns, getRowRelationLabels]);
   const errorMessage = error ? typeof error === "string" ? error : error.message || String(error) : null;
-  const columnTotals = (0, import_react7.useMemo)(() => {
+  const columnTotals = (0, import_react12.useMemo)(() => {
     const totals = {};
     if (!showSummary) return totals;
     filteredColumns.forEach((col) => {
@@ -3048,7 +4531,7 @@ function TableBlockClient({
     });
     return totals;
   }, [filteredData, filteredColumns, showSummary]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       id: componentId,
@@ -3056,34 +4539,34 @@ function TableBlockClient({
       className: `flex flex-col w-full bg-white border border-slate-200 rounded-xl shadow-xs min-h-[350px] overflow-hidden ${className}`,
       dir: "rtl",
       children: [
-        errorMessage && /* @__PURE__ */ (0, import_jsx_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 })
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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_runtime10.jsx)("span", { children: errorMessage })
         ] }) }),
-        /* @__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)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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_runtime10.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_runtime10.jsx)("span", { children: schema.title || schema.name }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.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_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" }) })
+                disabled: isInitialLoading || isLoading || isUpdatingActive,
+                className: `w-9 h-9 text-white rounded-lg shadow-xs flex items-center justify-center transition-all ${isInitialLoading || isLoading || isUpdatingActive ? "bg-emerald-950/80 text-emerald-400/60 pointer-events-none cursor-not-allowed" : "bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 cursor-pointer"}`,
+                title: isInitialLoading ? "\u05D8\u05D5\u05E2\u05DF \u05E0\u05EA\u05D5\u05E0\u05D9\u05DD..." : "\u05D4\u05D5\u05E1\u05E3 \u05E9\u05D5\u05E8\u05D4 \u05D7\u05D3\u05E9\u05D4",
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-4.5 h-4.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M12 4v16m8-8H4" }) })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "button",
               {
                 onClick: handleDuplicateRow,
-                disabled: isLoading || isUpdatingActive || selectedIds.size !== 1,
+                disabled: isInitialLoading || 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" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react7.Copy, { className: "w-4 h-4 text-blue-600 shrink-0" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
               "button",
               {
                 onClick: handleDeleteSelected,
@@ -3091,12 +4574,12 @@ function TableBlockClient({
                 className: "w-9 h-9 bg-rose-50 hover:bg-rose-100 border border-rose-200 text-rose-700 rounded-lg shadow-2xs flex items-center justify-center relative transition-all disabled:opacity-40 disabled:pointer-events-none cursor-pointer",
                 title: "\u05DE\u05D7\u05E7 \u05E9\u05D5\u05E8\u05D5\u05EA \u05E0\u05D1\u05D7\u05E8\u05D5\u05EA",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_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_runtime10.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_runtime10.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_runtime10.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.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
               "button",
               {
                 onClick: toggleSummary,
@@ -3104,13 +4587,13 @@ function TableBlockClient({
                 className: `h-9 px-3 border font-semibold rounded-lg shadow-2xs flex items-center gap-1.5 text-xs transition-all disabled:opacity-40 disabled:pointer-events-none cursor-pointer ${showSummary ? "bg-indigo-50 border-indigo-200 text-indigo-700 hover:bg-indigo-100" : "bg-white border-slate-300 text-slate-700 hover:bg-slate-100"}`,
                 title: "\u05D4\u05E6\u05D2/\u05D4\u05E1\u05EA\u05E8 \u05E9\u05D5\u05E8\u05EA \u05E1\u05D9\u05DB\u05D5\u05DD",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_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_runtime10.jsx)("svg", { className: "w-4 h-4 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.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)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative", ref: dropdownRef, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                 "button",
                 {
                   onClick: () => setIsColumnsDropdownOpen((prev) => !prev),
@@ -3118,16 +4601,16 @@ function TableBlockClient({
                   className: "h-9 px-3 bg-white hover:bg-slate-100 border border-slate-300 text-slate-700 font-semibold rounded-lg shadow-2xs flex items-center gap-1.5 text-xs transition-all disabled:opacity-40 disabled:pointer-events-none cursor-pointer",
                   title: "\u05D4\u05E6\u05D2/\u05D4\u05E1\u05EA\u05E8 \u05E2\u05DE\u05D5\u05D3\u05D5\u05EA",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_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" }) })
+                    /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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_runtime10.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_runtime10.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: [
+              isColumnsDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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_runtime10.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "\u05D4\u05E6\u05D2\u05EA \u05E2\u05DE\u05D5\u05D3\u05D5\u05EA" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-[10px] font-normal text-slate-400", children: [
                       "(",
                       customizableColumns.filter((c) => !c.isHidden).length,
                       "/",
@@ -3135,7 +4618,7 @@ function TableBlockClient({
                       ")"
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                     "button",
                     {
                       type: "button",
@@ -3145,7 +4628,7 @@ function TableBlockClient({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "max-h-60 overflow-y-auto space-y-0.5", children: customizableColumns.map((col) => {
+                /* @__PURE__ */ (0, import_jsx_runtime10.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;
@@ -3159,7 +4642,7 @@ function TableBlockClient({
                     protectedExplanation = "\u05E9\u05D3\u05D4 \u05D9\u05D9\u05D7\u05D5\u05D3\u05D9 - \u05DC\u05D0 \u05E0\u05D9\u05EA\u05DF \u05DC\u05D4\u05D5\u05E8\u05D9\u05D3 \u05E2\u05DE\u05D5\u05D3\u05D4 \u05D6\u05D5 \u05DE\u05D4\u05EA\u05E6\u05D5\u05D2\u05D4";
                   }
                   const badgeLabel = isRequired && isUnique ? "\u05D7\u05D5\u05D1\u05D4 + \u05D9\u05D9\u05D7\u05D5\u05D3\u05D9" : isRequired ? "\u05E9\u05D3\u05D4 \u05D7\u05D5\u05D1\u05D4" : "\u05E9\u05D3\u05D4 \u05D9\u05D9\u05D7\u05D5\u05D3\u05D9";
-                  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                     "div",
                     {
                       onClick: () => {
@@ -3170,8 +4653,8 @@ function TableBlockClient({
                       title: isProtected ? protectedExplanation : void 0,
                       className: `group flex items-center justify-between px-2.5 py-1.5 rounded-lg text-xs transition-colors select-none ${isProtected ? "opacity-75 bg-slate-50 border border-slate-100/70 cursor-not-allowed" : "hover:bg-slate-100 active:bg-slate-200 cursor-pointer"}`,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                             "input",
                             {
                               type: "checkbox",
@@ -3182,16 +4665,16 @@ function TableBlockClient({
                               className: "w-3.5 h-3.5 rounded border-slate-300 text-brand focus:ring-brand/20 cursor-pointer disabled:cursor-not-allowed disabled:opacity-60"
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `font-medium truncate ${isProtected ? "text-slate-500" : "text-slate-700"}`, children: col.name })
+                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `font-medium truncate ${isProtected ? "text-slate-500" : "text-slate-700"}`, children: col.name })
                         ] }),
-                        isProtected && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                        isProtected && /* @__PURE__ */ (0, import_jsx_runtime10.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 })
+                              /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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_runtime10.jsx)("span", { children: badgeLabel })
                             ]
                           }
                         )
@@ -3202,9 +4685,9 @@ function TableBlockClient({
                 }) })
               ] })
             ] }),
-            /* @__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)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-5 w-px bg-slate-300 mx-1 hidden sm:block" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative flex-1 sm:w-64 max-w-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "input",
                 {
                   placeholder: "\u05D7\u05D9\u05E4\u05D5\u05E9 \u05D1\u05E8\u05E9\u05D5\u05DE\u05D5\u05EA...",
@@ -3214,129 +4697,224 @@ function TableBlockClient({
                   className: "w-full h-9 px-3 pr-9 text-xs border border-slate-300 rounded-lg bg-white shadow-2xs focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 text-slate-800 disabled:opacity-50"
                 }
               ),
-              searchQuery ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              searchQuery ? /* @__PURE__ */ (0, import_jsx_runtime10.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" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react7.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_runtime10.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_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.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" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-3", children: [
+            isUpdatingActive ? /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)("span", { className: "w-2 h-2 rounded-full bg-blue-500 inline-block" }),
               "\u05DE\u05E2\u05D3\u05DB\u05DF..."
-            ] }) : 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" }) }),
+            ] }) : isSaveSuccess ? /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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_runtime10.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_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)(
+            ] }) : hasChanges ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1.5 animate-in fade-in", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs font-semibold text-amber-700", children: "\u05E9\u05D9\u05E0\u05D5\u05D9\u05D9\u05DD \u05E9\u05DC\u05D0 \u05E0\u05E9\u05DE\u05E8\u05D5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleRevertChanges,
+                  disabled: isUpdatingActive,
+                  className: "p-1 text-amber-700 hover:text-amber-900 hover:bg-amber-100/80 active:bg-amber-200/80 rounded-md transition-colors cursor-pointer disabled:opacity-50 disabled:pointer-events-none",
+                  title: "\u05D1\u05D8\u05DC \u05D0\u05EA \u05DB\u05DC \u05D4\u05E9\u05D9\u05E0\u05D5\u05D9\u05D9\u05DD \u05E9\u05DC\u05D0 \u05E0\u05E9\u05DE\u05E8\u05D5",
+                  "aria-label": "\u05D1\u05D8\u05DC \u05D0\u05EA \u05DB\u05DC \u05D4\u05E9\u05D9\u05E0\u05D5\u05D9\u05D9\u05DD \u05E9\u05DC\u05D0 \u05E0\u05E9\u05DE\u05E8\u05D5",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react7.RotateCcw, { className: "w-3.5 h-3.5" })
+                }
+              )
+            ] }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime6.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_runtime10.jsx)("span", { children: isUpdatingActive ? "\u05E9\u05D5\u05DE\u05E8..." : "\u05E9\u05DE\u05D9\u05E8\u05EA \u05E9\u05D9\u05E0\u05D5\u05D9\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_runtime10.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_runtime10.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_runtime10.jsx)("div", { className: "w-6 h-6 border-2 border-brand border-t-transparent rounded-full animate-spin" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.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)("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",
-                  checked: filteredData.length > 0 && selectedIds.size === filteredData.length,
-                  onChange: (e) => toggleSelectAll(e.target.checked),
-                  disabled: isLoading || isUpdatingActive,
-                  className: "w-4 h-4 rounded border-slate-300 text-brand"
-                }
-              ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("table", { className: "w-full text-sm text-right border-collapse table-auto", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("thead", { className: "bg-slate-100/80 text-slate-700 sticky top-0 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("tr", { className: "h-12 min-h-[48px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("th", { className: "border-b border-l border-slate-200 p-1.5 text-center shrink-0 h-12 min-h-[48px] align-middle", style: { width: 72, minWidth: 72, maxWidth: 72 }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-center gap-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: filteredData.length > 0 && selectedIds.size === filteredData.length,
+                    onChange: (e) => toggleSelectAll(e.target.checked),
+                    disabled: isLoading || isUpdatingActive,
+                    className: "w-4 h-4 rounded border-slate-300 text-brand"
+                  }
+                ),
+                filteredColumns.some((c) => {
+                  var _a;
+                  return ((_a = c.type) == null ? void 0 : _a.toUpperCase()) === "SUB_TABLE";
+                }) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-5 h-5 shrink-0" })
+              ] }) }),
               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)(
+                var _a, _b;
+                const isSearching = activeSearchCol === col.name;
+                const dragProps = isSearching ? {} : getHeaderDragProps(col.name);
+                const isDragging = !isSearching && draggedColName === col.name;
+                const isDragOver = !isSearching && dragOverColName === col.name;
+                const colMinWidth = calculateMinColumnWidth(col.name, false, col.type);
+                const currentWidth = Math.max(colMinWidth, columnWidths[col.name] || 200);
+                const isRelation = ((_a = col.type) == null ? void 0 : _a.toUpperCase()) === "RELATION";
+                const filterVal = columnFilters[col.name] || "";
+                return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
                   "th",
-                  {
+                  __spreadProps(__spreadValues({
                     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"}`,
+                    title: isSearching ? void 0 : col.name
+                  }, dragProps), {
+                    className: `relative border-b border-l border-slate-200 px-2.5 py-1.5 font-semibold text-slate-700 select-none transition-colors h-12 min-h-[48px] align-middle ${isSearching ? "cursor-default bg-blue-50/40" : "cursor-grab active:cursor-grabbing hover:bg-slate-200/60"} ${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" : ""}`,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                         "div",
                         {
                           onMouseDown: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
-                            setResizingCol({ name: col.name, startWidth: currentWidth, startX: e.clientX });
+                            startResize(col.name, currentWidth, e.clientX, colMinWidth);
                           },
                           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" })
-                          }
-                        )
+                      isSearching ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                        "div",
+                        {
+                          ref: activeSearchRef,
+                          className: "flex items-center gap-1 w-full",
+                          onClick: (e) => e.stopPropagation(),
+                          onMouseDown: (e) => e.stopPropagation(),
+                          children: [
+                            isRelation ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative flex items-center w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                              "select",
+                              {
+                                autoFocus: true,
+                                value: filterVal,
+                                onChange: (e) => {
+                                  const val = e.target.value;
+                                  setColumnFilters((prev) => {
+                                    const next = __spreadValues({}, prev);
+                                    if (val) next[col.name] = val;
+                                    else delete next[col.name];
+                                    return next;
+                                  });
+                                },
+                                onKeyDown: (e) => {
+                                  if (e.key === "Escape" || e.key === "Enter") {
+                                    setActiveSearchCol(null);
+                                  }
+                                },
+                                className: "h-7 text-xs px-1.5 w-full rounded border border-blue-400 bg-white text-slate-800 focus:outline-none focus:ring-1 focus:ring-blue-400 cursor-pointer truncate",
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "", children: "\u05D4\u05DB\u05DC" }),
+                                  getUniqueRelationOptions(col).map((opt) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: opt.label, children: opt.label }, opt.id))
+                                ]
+                              }
+                            ) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative flex items-center w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                              "input",
+                              {
+                                autoFocus: true,
+                                type: "text",
+                                placeholder: `\u05D7\u05E4\u05E9 \u05D1-${col.name}...`,
+                                value: filterVal,
+                                onChange: (e) => {
+                                  const val = e.target.value;
+                                  setColumnFilters((prev) => {
+                                    const next = __spreadValues({}, prev);
+                                    if (val) next[col.name] = val;
+                                    else delete next[col.name];
+                                    return next;
+                                  });
+                                },
+                                onKeyDown: (e) => {
+                                  if (e.key === "Escape" || e.key === "Enter") {
+                                    setActiveSearchCol(null);
+                                  }
+                                },
+                                className: "h-7 text-xs px-2 w-full rounded border border-blue-400 bg-white text-slate-800 focus:outline-none focus:ring-1 focus:ring-blue-400"
+                              }
+                            ) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                              "button",
+                              {
+                                type: "button",
+                                onMouseDown: (e) => {
+                                  e.preventDefault();
+                                  e.stopPropagation();
+                                },
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  setColumnFilters((prev) => {
+                                    const next = __spreadValues({}, prev);
+                                    delete next[col.name];
+                                    return next;
+                                  });
+                                  setActiveSearchCol(null);
+                                },
+                                className: "p-1 text-slate-400 hover:text-slate-700 hover:bg-slate-200/70 rounded transition-colors cursor-pointer shrink-0",
+                                title: "\u05E0\u05E7\u05D4 \u05D5\u05E1\u05D2\u05D5\u05E8 \u05D7\u05D9\u05E4\u05D5\u05E9",
+                                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react7.X, { className: "w-3.5 h-3.5" })
+                              }
+                            )
+                          ]
+                        }
+                      ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between gap-1.5 group overflow-hidden w-full", title: col.name, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-center gap-1.5 min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ColumnHeaderTitle, { name: col.name, width: currentWidth, isSubTable: false }) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1 shrink-0", children: [
+                          ((_b = col.type) == null ? void 0 : _b.toUpperCase()) !== "SUB_TABLE" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                setActiveSearchCol(col.name);
+                              },
+                              className: `p-1 rounded transition-all cursor-pointer ${filterVal ? "opacity-100 text-blue-600 bg-blue-100 hover:bg-blue-200" : "opacity-0 group-hover:opacity-100 text-slate-400 hover:text-slate-600 hover:bg-slate-200/60"}`,
+                              title: filterVal ? `\u05DE\u05E1\u05D5\u05E0\u05DF \u05DC\u05E4\u05D9: "${filterVal}" (\u05DC\u05D7\u05E5 \u05DC\u05E2\u05E8\u05D9\u05DB\u05D4)` : "\u05D7\u05E4\u05E9 \u05D5\u05E1\u05E0\u05DF \u05D1\u05E2\u05DE\u05D5\u05D3\u05D4 \u05D6\u05D5",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react7.Search, { className: "w-3.5 h-3.5" })
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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_runtime10.jsx)("th", { className: "w-full min-w-[50px] border-b border-slate-200 pointer-events-none h-12 min-h-[48px]" })
             ] }) }),
-            /* @__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." })
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tbody", { className: "bg-white", children: (isStateEmpty || filteredData.length === 0) && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { colSpan: filteredColumns.length + 2, className: "text-center py-12 text-slate-400", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col items-center justify-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-8 h-8 text-slate-300", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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;
@@ -3347,10 +4925,20 @@ function TableBlockClient({
                 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)(
+              return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react12.default.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("tr", { className: "hover:bg-blue-50/30 transition-colors group", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { className: "border-b border-l border-slate-200 p-1.5 text-center bg-white group-hover:bg-transparent", style: { width: 72, minWidth: 72, maxWidth: 72 }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-center gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.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"
+                      }
+                    ),
+                    hasSubTableCols && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       "button",
                       {
                         type: "button",
@@ -3360,19 +4948,9 @@ function TableBlockClient({
                           else next.add(row.id);
                           return next;
                         }),
-                        className: "text-slate-400 hover:text-blue-600 p-0.5 rounded transition-colors cursor-pointer",
+                        className: "w-5 h-5 rounded-full bg-slate-500 hover:bg-slate-600 text-white flex items-center justify-center transition-colors cursor-pointer shrink-0 shadow-sm",
                         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"
+                        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { className: `w-3 h-3 transition-transform duration-150 ${isExpanded ? "rotate-90" : "rotate-180"}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "3", d: "M9 5l7 7-7 7" }) })
                       }
                     )
                   ] }) }),
@@ -3380,6 +4958,8 @@ function TableBlockClient({
                     var _a;
                     const colType = ((_a = col.type) == null ? void 0 : _a.toUpperCase()) || "DEFAULT";
                     const InputComponent = FORM_INPUTS[colType] || FORM_INPUTS.DEFAULT;
+                    const colMinWidth = calculateMinColumnWidth(col.name, false, col.type);
+                    const currentWidth = Math.max(colMinWidth, columnWidths[col.name] || 200);
                     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;
@@ -3388,34 +4968,42 @@ function TableBlockClient({
                       }
                     }
                     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,
+                    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      "td",
                       {
-                        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);
+                        className: `border-b border-l border-slate-200 p-0 relative ${colType === "RELATION" ? "overflow-visible" : "overflow-hidden"}`,
+                        style: { width: currentWidth, minWidth: currentWidth, maxWidth: currentWidth },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime10.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" })
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { className: "border-b border-slate-200 bg-white pointer-events-none" })
                 ] }),
-                isExpanded && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                isExpanded && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   ExpandedSubTables,
                   {
                     rowId: row.id,
@@ -3430,37 +5018,38 @@ function TableBlockClient({
                       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
+                      triggerSaveSuccess,
+                      onUpdateColumnConfig: handleUpdateColumnConfig
                     }
                   }
                 )
               ] }, 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' }),
+            showSummary && filteredData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsxs)("tr", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.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;
+                var _a, _b;
                 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);
+                  if (col.type === "CURRENCY") {
+                    const symbol = getCurrencySymbol((_b = col.config) == null ? void 0 : _b.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);
+                return /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)("div", { className: "flex items-center text-right justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-medium text-slate-700", children: "\u05E9\u05D5\u05E8\u05D5\u05EA \u05DC\u05E2\u05DE\u05D5\u05D3:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
               "select",
               {
                 value: limit,
@@ -3468,27 +5057,27 @@ function TableBlockClient({
                 disabled: isLoading || isUpdatingActive,
                 className: "bg-white border border-slate-300 rounded-lg px-2.5 py-1 text-slate-700 font-semibold shadow-2xs cursor-pointer focus:outline-none focus:ring-2 focus:ring-brand disabled:opacity-50",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_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_runtime10.jsx)("option", { value: 20, children: "20" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: 50, children: "50" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.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: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.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 }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.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: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { className: "text-slate-900", children: totalPages || 1 }),
+              totalRecords > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.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)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "button",
                 {
                   onClick: handlePrevPage,
@@ -3498,7 +5087,7 @@ function TableBlockClient({
                   children: "\u05D4\u05E7\u05D5\u05D3\u05DD"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "button",
                 {
                   onClick: handleNextPage,
@@ -3524,11 +5113,11 @@ function ExpandedSubTables({
   context
 }) {
   var _a;
-  const [activeTab, setActiveTab] = (0, import_react7.useState)((_a = subTableColumns[0]) == null ? void 0 : _a.name);
+  const [activeTab, setActiveTab] = (0, import_react12.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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { colSpan: filteredColumnsLength + 2, className: "p-0 border-b border-slate-200 bg-slate-50/50", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       SubTableViewer,
       {
         rowId,
@@ -3540,8 +5129,8 @@ function ExpandedSubTables({
     ) }) });
   }
   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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("td", { colSpan: filteredColumnsLength + 2, className: "p-0 border-b border-slate-200 bg-slate-50/50 overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)(
       "button",
       {
         type: "button",
@@ -3551,7 +5140,7 @@ function ExpandedSubTables({
       },
       col.name
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       SubTableViewer,
       {
         rowId,
@@ -3566,9 +5155,9 @@ function ExpandedSubTables({
 }
 
 // src/components/TableBlock/TableBlock.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function TableBlock(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableBlockClient, __spreadValues({}, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TableBlockClient, __spreadValues({}, props));
 }
 
 // src/registry.ts
@@ -3577,12 +5166,31 @@ var UNIVERSE_COMPONENTS = {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ColumnHeaderTitle,
+  DatePickerCell,
+  LinkPickerCell,
+  PASTEL_PALETTES,
+  RelationPickerCell,
   TableBlock,
+  TimePickerCell,
   ToastContext,
   ToastProvider,
   UNIVERSE_COMPONENTS,
+  calculateMinColumnWidth,
   cn,
+  formatConflictCellValue,
   formatPhoneDisplay,
+  formatTimeInput,
+  formatTimeIso,
+  getDeterministicPastelBadge,
+  measureTextWidth,
+  normalizeRelationValue,
   openWhatsAppChat,
+  parseLinkValue,
+  parseTimeParts,
+  resolveProtocol,
+  splitHeaderTitle,
+  useColumnReorder,
+  useColumnResize,
   useToast
 });