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

package/dist/index.mjs

@@ -39,7 +39,7 @@ function cn(...inputs) {
 }
 
 // src/components/TableBlock/TableBlockClient.tsx
-import { useState as useState3, useMemo, useEffect, useCallback as useCallback2, useRef as useRef2 } from "react";
+import { useState as useState4, useMemo as useMemo2, useEffect as useEffect2, useCallback as useCallback3, useRef as useRef3 } from "react";
 
 // src/hooks/useToast.ts
 import { useContext as useContext2 } from "react";
@@ -239,7 +239,7 @@ function useToast() {
 }
 
 // src/components/TableBlock/fields/fieldRegistry.tsx
-import React3 from "react";
+import React4 from "react";
 
 // src/components/TableBlock/fields/DrivePickerCell.tsx
 import { useState as useState2 } from "react";
@@ -361,8 +361,311 @@ function DrivePickerCell({ value, onChange, tableName, onMarkForDeletion, contex
   ) });
 }
 
-// src/components/TableBlock/fields/fieldRegistry.tsx
+// src/components/TableBlock/fields/DatePickerCell.tsx
+import { useState as useState3, useRef as useRef2, useEffect, useMemo, useCallback as useCallback2 } from "react";
+import { Calendar as CalendarIcon, ChevronLeft, ChevronRight, X as X3 } from "lucide-react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function parseDateParts(val) {
+  if (val === void 0 || val === null || val === "") return null;
+  if (typeof val === "string") {
+    const trimmed = val.trim();
+    if (!trimmed) return null;
+    const ymdMatch = trimmed.match(/^(\d{4})[-/.](\d{1,2})[-/.](\d{1,2})/);
+    if (ymdMatch) {
+      const year = parseInt(ymdMatch[1], 10);
+      const month = parseInt(ymdMatch[2], 10);
+      const day = parseInt(ymdMatch[3], 10);
+      if (month >= 1 && month <= 12 && day >= 1 && day <= 31) {
+        return { year, month, day };
+      }
+    }
+    const dmyMatch = trimmed.match(/^(\d{1,2})[-/.](\d{1,2})[-/.](\d{4})/);
+    if (dmyMatch) {
+      const day = parseInt(dmyMatch[1], 10);
+      const month = parseInt(dmyMatch[2], 10);
+      const year = parseInt(dmyMatch[3], 10);
+      if (month >= 1 && month <= 12 && day >= 1 && day <= 31) {
+        return { year, month, day };
+      }
+    }
+    const parsed = new Date(trimmed);
+    if (!isNaN(parsed.getTime())) {
+      return {
+        year: parsed.getFullYear(),
+        month: parsed.getMonth() + 1,
+        day: parsed.getDate()
+      };
+    }
+  } else if (val instanceof Date && !isNaN(val.getTime())) {
+    return {
+      year: val.getFullYear(),
+      month: val.getMonth() + 1,
+      day: val.getDate()
+    };
+  } else if (typeof val === "number" && !isNaN(val)) {
+    const parsed = new Date(val);
+    if (!isNaN(parsed.getTime())) {
+      return {
+        year: parsed.getFullYear(),
+        month: parsed.getMonth() + 1,
+        day: parsed.getDate()
+      };
+    }
+  }
+  return null;
+}
+function formatDateIso(year, month, day) {
+  const mm = String(month).padStart(2, "0");
+  const dd = String(day).padStart(2, "0");
+  return `${year}-${mm}-${dd}`;
+}
+function formatDateDisplay(parts) {
+  if (!parts) return "";
+  const mm = String(parts.month).padStart(2, "0");
+  const dd = String(parts.day).padStart(2, "0");
+  return `${dd}/${mm}/${parts.year}`;
+}
+var HEBREW_MONTHS = [
+  "\u05D9\u05E0\u05D5\u05D0\u05E8",
+  "\u05E4\u05D1\u05E8\u05D5\u05D0\u05E8",
+  "\u05DE\u05E8\u05E5",
+  "\u05D0\u05E4\u05E8\u05D9\u05DC",
+  "\u05DE\u05D0\u05D9",
+  "\u05D9\u05D5\u05E0\u05D9",
+  "\u05D9\u05D5\u05DC\u05D9",
+  "\u05D0\u05D5\u05D2\u05D5\u05E1\u05D8",
+  "\u05E1\u05E4\u05D8\u05DE\u05D1\u05E8",
+  "\u05D0\u05D5\u05E7\u05D8\u05D5\u05D1\u05E8",
+  "\u05E0\u05D5\u05D1\u05DE\u05D1\u05E8",
+  "\u05D3\u05E6\u05DE\u05D1\u05E8"
+];
+var WEEKDAY_LABELS = ["\u05D0'", "\u05D1'", "\u05D2'", "\u05D3'", "\u05D4'", "\u05D5'", "\u05E9'"];
+function DatePickerCell({ value, onChange, readOnly = false }) {
+  const [isOpen, setIsOpen] = useState3(false);
+  const containerRef = useRef2(null);
+  const [popoverPos, setPopoverPos] = useState3({ top: 0, right: 0 });
+  const parsedParts = useMemo(() => parseDateParts(value), [value]);
+  const displayString = useMemo(() => formatDateDisplay(parsedParts), [parsedParts]);
+  const [rawInput, setRawInput] = useState3(displayString);
+  useEffect(() => {
+    setRawInput(displayString);
+  }, [displayString]);
+  const now = /* @__PURE__ */ new Date();
+  const [viewYear, setViewYear] = useState3((parsedParts == null ? void 0 : parsedParts.year) || now.getFullYear());
+  const [viewMonth, setViewMonth] = useState3((parsedParts == null ? void 0 : parsedParts.month) || now.getMonth() + 1);
+  useEffect(() => {
+    if (parsedParts) {
+      setViewYear(parsedParts.year);
+      setViewMonth(parsedParts.month);
+    }
+  }, [parsedParts, isOpen]);
+  const updatePopoverPosition = useCallback2(() => {
+    if (containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      const right = window.innerWidth - rect.right;
+      const popoverHeight = 320;
+      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)
+        });
+      }
+    }
+  }, []);
+  useEffect(() => {
+    if (!isOpen) return;
+    updatePopoverPosition();
+    function handleScrollOrResize() {
+      updatePopoverPosition();
+    }
+    function handleClickOutside(event) {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        const popoverEl = document.getElementById("date-picker-popover");
+        if (popoverEl && popoverEl.contains(event.target)) {
+          return;
+        }
+        setIsOpen(false);
+      }
+    }
+    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]);
+  const handleInputChange = (e) => {
+    const text = e.target.value;
+    setRawInput(text);
+    if (!text.trim()) {
+      onChange(null);
+      return;
+    }
+    const parts = parseDateParts(text);
+    if (parts) {
+      const iso = formatDateIso(parts.year, parts.month, parts.day);
+      onChange(iso);
+    }
+  };
+  const handleInputBlur = () => {
+    const parts = parseDateParts(rawInput);
+    if (parts) {
+      setRawInput(formatDateDisplay(parts));
+    } else if (!rawInput.trim()) {
+      setRawInput("");
+    }
+  };
+  const handleSelectDay = (day) => {
+    const iso = formatDateIso(viewYear, viewMonth, day);
+    onChange(iso);
+    setRawInput(formatDateDisplay({ year: viewYear, month: viewMonth, day }));
+    setIsOpen(false);
+  };
+  const handlePrevMonth = () => {
+    if (viewMonth === 1) {
+      setViewMonth(12);
+      setViewYear((prev) => prev - 1);
+    } else {
+      setViewMonth((prev) => prev - 1);
+    }
+  };
+  const handleNextMonth = () => {
+    if (viewMonth === 12) {
+      setViewMonth(1);
+      setViewYear((prev) => prev + 1);
+    } else {
+      setViewMonth((prev) => prev + 1);
+    }
+  };
+  const calendarDays = useMemo(() => {
+    const firstDayIndex = new Date(viewYear, viewMonth - 1, 1).getDay();
+    const totalDays = new Date(viewYear, viewMonth, 0).getDate();
+    const days = [];
+    const prevMonthTotalDays = new Date(viewYear, viewMonth - 1, 0).getDate();
+    for (let i = firstDayIndex - 1; i >= 0; i--) {
+      days.push({ day: prevMonthTotalDays - i, isCurrentMonth: false });
+    }
+    for (let d = 1; d <= totalDays; d++) {
+      days.push({ day: d, isCurrentMonth: true });
+    }
+    const remaining = 7 - days.length % 7;
+    if (remaining < 7) {
+      for (let d = 1; d <= remaining; d++) {
+        days.push({ day: d, isCurrentMonth: false });
+      }
+    }
+    return days;
+  }, [viewYear, viewMonth]);
+  if (readOnly) {
+    return /* @__PURE__ */ jsx3("span", { className: "px-2 py-1 flex items-center justify-end w-full h-full text-sm font-normal text-slate-800 text-right", dir: "ltr", children: displayString });
+  }
+  return /* @__PURE__ */ jsxs3("div", { ref: containerRef, className: "relative w-full h-full flex items-center", children: [
+    /* @__PURE__ */ jsx3(
+      "input",
+      {
+        type: "text",
+        dir: "ltr",
+        placeholder: "DD/MM/YYYY",
+        className: "w-full h-8 pl-8 pr-2 bg-transparent focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-400 text-sm text-right font-normal text-slate-800",
+        value: rawInput,
+        onChange: handleInputChange,
+        onBlur: handleInputBlur
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          setIsOpen((prev) => {
+            const next = !prev;
+            if (next) updatePopoverPosition();
+            return next;
+          });
+        },
+        className: "absolute left-1.5 p-1 text-slate-400 hover:text-blue-600 rounded transition-colors",
+        title: "\u05D1\u05D7\u05E8 \u05EA\u05D0\u05E8\u05D9\u05DA",
+        children: /* @__PURE__ */ jsx3(CalendarIcon, { className: "w-4 h-4" })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        id: "date-picker-popover",
+        dir: "rtl",
+        style: { top: `${popoverPos.top}px`, right: `${popoverPos.right}px` },
+        className: "fixed z-[99999] w-72 bg-white rounded-xl shadow-2xl border border-slate-200 p-3.5 animate-in fade-in zoom-in-95 duration-150",
+        children: [
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between border-b border-slate-100 pb-2.5 mb-2.5", children: [
+            /* @__PURE__ */ jsx3("div", { className: "text-xs font-semibold text-slate-500", children: parsedParts ? `${parsedParts.day} \u05D1${HEBREW_MONTHS[parsedParts.month - 1]} ${parsedParts.year}` : "\u05D1\u05D7\u05D9\u05E8\u05EA \u05EA\u05D0\u05E8\u05D9\u05DA" }),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                onClick: () => setIsOpen(false),
+                className: "text-slate-400 hover:text-slate-600 p-0.5 rounded-full hover:bg-slate-100",
+                children: /* @__PURE__ */ jsx3(X3, { className: "w-4 h-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between mb-3 px-1", children: [
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                onClick: handleNextMonth,
+                className: "p-1 text-slate-600 hover:bg-slate-100 rounded-lg transition-colors",
+                title: "\u05D7\u05D5\u05D3\u05E9 \u05D4\u05D1\u05D0",
+                children: /* @__PURE__ */ jsx3(ChevronRight, { className: "w-4 h-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxs3("span", { className: "font-bold text-sm text-slate-800", children: [
+              HEBREW_MONTHS[viewMonth - 1],
+              " ",
+              viewYear
+            ] }),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                onClick: handlePrevMonth,
+                className: "p-1 text-slate-600 hover:bg-slate-100 rounded-lg transition-colors",
+                title: "\u05D7\u05D5\u05D3\u05E9 \u05E7\u05D5\u05D3\u05DD",
+                children: /* @__PURE__ */ jsx3(ChevronLeft, { className: "w-4 h-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-7 gap-1 text-center mb-1.5", children: WEEKDAY_LABELS.map((label, idx) => /* @__PURE__ */ jsx3("span", { className: "text-[11px] font-bold text-slate-400 select-none py-0.5", children: label }, idx)) }),
+          /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-7 gap-1 text-center", children: calendarDays.map((item, idx) => {
+            const isSelected = item.isCurrentMonth && (parsedParts == null ? void 0 : parsedParts.year) === viewYear && (parsedParts == null ? void 0 : parsedParts.month) === viewMonth && (parsedParts == null ? void 0 : parsedParts.day) === item.day;
+            const isToday = item.isCurrentMonth && now.getFullYear() === viewYear && now.getMonth() + 1 === viewMonth && now.getDate() === item.day;
+            return /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                disabled: !item.isCurrentMonth,
+                onClick: () => item.isCurrentMonth && handleSelectDay(item.day),
+                className: `h-8 w-8 mx-auto flex items-center justify-center rounded-lg text-xs transition-all ${!item.isCurrentMonth ? "text-slate-300 cursor-not-allowed" : isSelected ? "bg-blue-600 text-white font-bold shadow-md scale-105" : isToday ? "bg-blue-50 text-blue-700 font-bold border border-blue-300 hover:bg-blue-100" : "text-slate-700 hover:bg-slate-100 font-medium"}`,
+                children: item.day
+              },
+              idx
+            );
+          }) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/TableBlock/fields/fieldRegistry.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var CURRENCY_SYMBOLS = {
   USD: "$",
   EUR: "\u20AC",
@@ -379,24 +682,31 @@ function getRelationDisplayLabel(opt, column) {
   if (val !== void 0 && val !== null && val !== "") {
     return String(val);
   }
+  if (opt.label && opt.label !== opt.id) {
+    return String(opt.label);
+  }
   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") return true;
+      if (typeof v === "number" && !isNaN(v)) return true;
       return false;
     });
     if (fallbackField) return String(opt.data[fallbackField]);
   }
+  if (opt.label) {
+    return String(opt.label);
+  }
   return "\u05E2\u05E8\u05DA \u05E8\u05D9\u05E7";
 }
 var FORM_INPUTS = {
+  DATE: ({ value, onChange, column }) => /* @__PURE__ */ jsx4(DatePickerCell, { value, onChange, column }),
   CURRENCY: ({ value, column, onChange }) => {
     const symbol = getCurrencySymbol(column.currencySymbol);
-    return /* @__PURE__ */ jsxs3("div", { className: "relative w-full h-full", children: [
-      symbol && /* @__PURE__ */ jsx3("span", { className: "absolute left-2 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none text-sm", children: symbol }),
-      /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsxs4("div", { className: "relative w-full h-full", children: [
+      symbol && /* @__PURE__ */ jsx4("span", { className: "absolute left-2 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none text-sm", children: symbol }),
+      /* @__PURE__ */ jsx4(
         "input",
         {
           type: "number",
@@ -411,7 +721,7 @@ var FORM_INPUTS = {
       )
     ] });
   },
-  TIME: ({ value, onChange }) => /* @__PURE__ */ jsx3(
+  TIME: ({ value, onChange }) => /* @__PURE__ */ jsx4(
     "input",
     {
       type: "time",
@@ -421,13 +731,13 @@ var FORM_INPUTS = {
     }
   ),
   LINK: ({ value, onChange }) => {
-    const [isEditing, setIsEditing] = React3.useState(false);
+    const [isEditing, setIsEditing] = React4.useState(false);
     const label = (value == null ? void 0 : value.label) || "";
     const url = (value == null ? void 0 : value.url) || "";
     if (!isEditing) {
-      return /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 px-2 py-1 h-full w-full", children: [
-        url ? /* @__PURE__ */ jsx3("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:underline flex-1 truncate", children: label || url }) : /* @__PURE__ */ jsx3("span", { className: "text-slate-400 italic flex-1 text-sm", children: "\u05E8\u05D9\u05E7" }),
-        /* @__PURE__ */ jsx3(
+      return /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 px-2 py-1 h-full w-full", children: [
+        url ? /* @__PURE__ */ jsx4("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:underline flex-1 truncate", children: label || url }) : /* @__PURE__ */ jsx4("span", { className: "text-slate-400 italic flex-1 text-sm", children: "\u05E8\u05D9\u05E7" }),
+        /* @__PURE__ */ jsx4(
           "button",
           {
             onClick: () => setIsEditing(true),
@@ -438,8 +748,8 @@ var FORM_INPUTS = {
         )
       ] });
     }
-    return /* @__PURE__ */ jsxs3("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: [
-      /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsxs4("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: [
+      /* @__PURE__ */ jsx4(
         "input",
         {
           type: "text",
@@ -449,7 +759,7 @@ var FORM_INPUTS = {
           onChange: (e) => onChange({ label: e.target.value, url })
         }
       ),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         "input",
         {
           type: "url",
@@ -459,7 +769,7 @@ var FORM_INPUTS = {
           onChange: (e) => onChange({ label, url: e.target.value })
         }
       ),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         "button",
         {
           onClick: () => setIsEditing(false),
@@ -470,7 +780,7 @@ var FORM_INPUTS = {
       )
     ] });
   },
-  BOOLEAN: ({ value, onChange }) => /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-center w-full h-full p-2", children: /* @__PURE__ */ jsx3(
+  BOOLEAN: ({ value, onChange }) => /* @__PURE__ */ jsx4("div", { className: "flex items-center justify-center w-full h-full p-2", children: /* @__PURE__ */ jsx4(
     "input",
     {
       type: "checkbox",
@@ -479,7 +789,7 @@ var FORM_INPUTS = {
       className: "w-4 h-4 rounded border-slate-300 text-brand"
     }
   ) }),
-  GOOGLE_DRIVE_FILE: ({ value, onChange, context }) => /* @__PURE__ */ jsx3(
+  GOOGLE_DRIVE_FILE: ({ value, onChange, context }) => /* @__PURE__ */ jsx4(
     DrivePickerCell,
     {
       value: value || null,
@@ -492,7 +802,7 @@ var FORM_INPUTS = {
   RELATION: ({ value, onChange, column, context }) => {
     var _a;
     const options = ((_a = context == null ? void 0 : context.relationOptions) == null ? void 0 : _a[column.name]) || [];
-    React3.useEffect(() => {
+    React4.useEffect(() => {
       if (typeof value === "string" && value !== "" && options.length > 0) {
         const isValidId = options.some((o) => String(o.id) === String(value));
         if (!isValidId) {
@@ -511,7 +821,7 @@ var FORM_INPUTS = {
       _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__ */ jsxs3(
+    return /* @__PURE__ */ jsxs4(
       "select",
       {
         className: "w-full h-8 px-2 bg-transparent focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-400 text-sm",
@@ -523,13 +833,13 @@ var FORM_INPUTS = {
           }
         },
         children: [
-          /* @__PURE__ */ jsx3("option", { value: "", children: "\u05D1\u05D7\u05E8..." }),
-          validOptions.length > 0 ? validOptions.map((opt) => /* @__PURE__ */ jsx3("option", { value: opt.id, children: opt._displayLabel }, opt.id)) : options.length > 0 ? /* @__PURE__ */ jsx3("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__ */ jsx4("option", { value: "", children: "\u05D1\u05D7\u05E8..." }),
+          validOptions.length > 0 ? validOptions.map((opt) => /* @__PURE__ */ jsx4("option", { value: opt.id, children: opt._displayLabel }, opt.id)) : options.length > 0 ? /* @__PURE__ */ jsx4("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
         ]
       }
     );
   },
-  NUMBER: ({ value, onChange }) => /* @__PURE__ */ jsx3(
+  NUMBER: ({ value, onChange }) => /* @__PURE__ */ jsx4(
     "input",
     {
       type: "number",
@@ -541,7 +851,7 @@ var FORM_INPUTS = {
       }
     }
   ),
-  DEFAULT: ({ value, onChange }) => /* @__PURE__ */ jsx3(
+  DEFAULT: ({ value, onChange }) => /* @__PURE__ */ jsx4(
     "input",
     {
       type: "text",
@@ -553,7 +863,7 @@ var FORM_INPUTS = {
 };
 
 // src/components/TableBlock/TableBlockClient.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function TableBlockClient({
   data: initialRecords,
   settings: schema,
@@ -595,18 +905,18 @@ function TableBlockClient({
       return __spreadProps(__spreadValues({}, row), { id: String(row.id || ""), data: rowData });
     });
   };
-  const [localColumns, setLocalColumns] = useState3(() => (schema == null ? void 0 : schema.columns) || []);
-  useEffect(() => {
+  const [localColumns, setLocalColumns] = useState4(() => (schema == null ? void 0 : schema.columns) || []);
+  useEffect2(() => {
     if ((schema == null ? void 0 : schema.columns) && schema.columns.length > 0) {
       setLocalColumns(schema.columns);
     }
   }, [schema == null ? void 0 : schema.columns]);
-  const [dirty, setDirty] = useState3({ added: [], modified: {}, deleted: [] });
-  const dirtyRef = useRef2(dirty);
-  useEffect(() => {
+  const [dirty, setDirty] = useState4({ added: [], modified: {}, deleted: [] });
+  const dirtyRef = useRef3(dirty);
+  useEffect2(() => {
     dirtyRef.current = dirty;
   }, [dirty]);
-  const mergeWithDirty = useCallback2((baseRecords) => {
+  const mergeWithDirty = useCallback3((baseRecords) => {
     const { added, modified, deleted } = dirtyRef.current;
     const nonDeleted = (baseRecords || []).filter((r) => !deleted.includes(r.id));
     const modifiedRecords = nonDeleted.map((r) => {
@@ -619,8 +929,8 @@ function TableBlockClient({
     const uniqueAdded = added.filter((r) => !baseIds.has(r.id));
     return [...uniqueAdded, ...modifiedRecords];
   }, []);
-  const [data, setData] = useState3(() => normalizeRecords(initialRecords));
-  useEffect(() => {
+  const [data, setData] = useState4(() => normalizeRecords(initialRecords));
+  useEffect2(() => {
     if (initialRecords) {
       setData(mergeWithDirty(normalizeRecords(initialRecords)));
     }
@@ -635,20 +945,20 @@ function TableBlockClient({
     }
     return false;
   };
-  const [baseRecordsMap, setBaseRecordsMap] = useState3(() => {
+  const [baseRecordsMap, setBaseRecordsMap] = useState4(() => {
     const map = /* @__PURE__ */ new Map();
     (normalizeRecords(initialRecords) || []).forEach((r) => map.set(r.id, __spreadValues({}, r.data)));
     return map;
   });
-  useEffect(() => {
+  useEffect2(() => {
     if (initialRecords && initialRecords.length > 0) {
       const map = /* @__PURE__ */ new Map();
       (normalizeRecords(initialRecords) || []).forEach((r) => map.set(r.id, __spreadValues({}, r.data)));
       setBaseRecordsMap(map);
     }
   }, [initialRecords]);
-  useEffect(() => {
-    const tableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.id) || (schema == null ? void 0 : schema.tableId);
+  useEffect2(() => {
+    const tableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
     if (!tableId || !executeAction) return;
     if (!(schema == null ? void 0 : schema.columns) || schema.columns.length === 0 || (!initialRecords || initialRecords.length === 0)) {
       executeAction("FETCH_TABLE_DATA", { tableId }).then((res) => {
@@ -669,20 +979,20 @@ function TableBlockClient({
         console.error("[TableBlock] Failed to auto-fetch table data:", err);
       });
     }
-  }, [schema == null ? void 0 : schema.tableMetaId, schema == null ? void 0 : schema.id, schema == null ? void 0 : schema.tableId, schema == null ? void 0 : schema.columns, initialRecords, executeAction, mergeWithDirty]);
-  useEffect(() => {
+  }, [schema == null ? void 0 : schema.tableMetaId, schema == null ? void 0 : schema.tableId, schema == null ? void 0 : schema.id, schema == null ? void 0 : schema.columns, initialRecords, executeAction, mergeWithDirty]);
+  useEffect2(() => {
     if (error) {
       showError(error, "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E8\u05DB\u05D9\u05D1");
     }
   }, [error, showError]);
-  const [searchQuery, setSearchQuery] = useState3("");
-  const [selectedIds, setSelectedIds] = useState3(/* @__PURE__ */ new Set());
-  const [pendingDeletions, setPendingDeletions] = useState3([]);
-  const [isSaving, setIsSaving] = useState3(false);
-  const [isSaveSuccess, setIsSaveSuccess] = useState3(false);
-  const [relationOptions, setRelationOptions] = useState3({});
-  const schemaColsString = useMemo(() => JSON.stringify(localColumns || []), [localColumns]);
-  const refetchRelation = useCallback2(async (colName) => {
+  const [searchQuery, setSearchQuery] = useState4("");
+  const [selectedIds, setSelectedIds] = useState4(/* @__PURE__ */ new Set());
+  const [pendingDeletions, setPendingDeletions] = useState4([]);
+  const [isSaving, setIsSaving] = useState4(false);
+  const [isSaveSuccess, setIsSaveSuccess] = useState4(false);
+  const [relationOptions, setRelationOptions] = useState4({});
+  const schemaColsString = useMemo2(() => JSON.stringify(localColumns || []), [localColumns]);
+  const refetchRelation = useCallback3(async (colName) => {
     var _a;
     let parsedCols = [];
     try {
@@ -693,7 +1003,7 @@ function TableBlockClient({
     if (!col || ((_a = col.type) == null ? void 0 : _a.toUpperCase()) !== "RELATION" || !col.referencedTableId) return;
     try {
       if (executeAction) {
-        const options = await executeAction("FETCH_RELATION", { referencedTableId: col.referencedTableId });
+        const options = await executeAction("FETCH_RELATION", { referencedTableId: col.referencedTableId, displayField: col.displayField });
         if (options && Array.isArray(options)) {
           setRelationOptions((prev) => __spreadProps(__spreadValues({}, prev), { [colName]: options }));
         }
@@ -702,7 +1012,7 @@ function TableBlockClient({
       console.warn(`[TableBlock] Could not fetch relation options for column ${colName}:`, err);
     }
   }, [schemaColsString, executeAction]);
-  useEffect(() => {
+  useEffect2(() => {
     let parsedCols = [];
     try {
       parsedCols = JSON.parse(schemaColsString);
@@ -716,7 +1026,7 @@ function TableBlockClient({
       refetchRelation(col.name);
     });
   }, [schemaColsString, refetchRelation]);
-  const filteredColumns = useMemo(() => {
+  const filteredColumns = useMemo2(() => {
     const systemFields = ["_id", "createdAt", "updatedAt", "orgId", "tableId"];
     return (localColumns || []).filter((col) => !systemFields.includes(col.name));
   }, [localColumns]);
@@ -888,19 +1198,58 @@ function TableBlockClient({
         showError("\u05E8\u05DB\u05D9\u05D1 \u05D4\u05EA\u05E7\u05E9\u05D5\u05E8\u05EA \u05DC\u05D0 \u05D0\u05D5\u05EA\u05D7\u05DC", "\u05E9\u05D2\u05D9\u05D0\u05EA \u05EA\u05E7\u05E9\u05D5\u05E8\u05EA");
         return;
       }
-      const targetTableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.id) || (schema == null ? void 0 : schema.tableId);
+      const targetTableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
       if (!targetTableId) {
         showError("\u05DC\u05D0 \u05E0\u05D9\u05EA\u05DF \u05DC\u05E9\u05DE\u05D5\u05E8: \u05DE\u05D6\u05D4\u05D4 \u05D4\u05D8\u05D1\u05DC\u05D4 \u05D7\u05E1\u05E8 (tableId)", "\u05E9\u05D2\u05D9\u05D0\u05EA \u05E9\u05DE\u05D9\u05E8\u05D4");
         return;
       }
+      const tempToRealMap = {};
+      const realRecordDataMap = {};
       if (dirty.added.length > 0) {
         const payload = dirty.added.map((row) => formatPayload(row.data));
-        await executeAction("CREATE_RECORD", { tableId: targetTableId, tableMetaId: targetTableId, records: payload });
+        const res = await executeAction("CREATE_RECORD", { tableId: targetTableId, tableMetaId: targetTableId, records: payload });
+        const createdList = Array.isArray(res) ? res : (res == null ? void 0 : res.data) && Array.isArray(res.data) ? res.data : res ? [res] : [];
+        if (createdList && createdList.length > 0) {
+          dirty.added.forEach((addedRow, idx) => {
+            const created = createdList[idx];
+            if (created) {
+              const realId = String(created.id || created._id || "");
+              if (realId) {
+                tempToRealMap[addedRow.id] = realId;
+                const createdData = created.data && typeof created.data === "object" ? created.data : addedRow.data;
+                realRecordDataMap[realId] = __spreadValues(__spreadValues({}, addedRow.data), createdData);
+              }
+            }
+          });
+          setData((prev) => prev.map((row) => {
+            if (tempToRealMap[row.id]) {
+              const realId = tempToRealMap[row.id];
+              return __spreadProps(__spreadValues({}, row), {
+                id: realId,
+                data: realRecordDataMap[realId] || row.data
+              });
+            }
+            return row;
+          }));
+          setSelectedIds((prev) => {
+            let changed = false;
+            const next = new Set(prev);
+            Object.entries(tempToRealMap).forEach(([tempId, realId]) => {
+              if (next.has(tempId)) {
+                next.delete(tempId);
+                next.add(realId);
+                changed = true;
+              }
+            });
+            return changed ? next : prev;
+          });
+        }
       }
       if (Object.keys(dirty.modified).length > 0) {
         const payload = {};
         for (const [id, modData] of Object.entries(dirty.modified)) {
-          payload[id] = formatPayload(modData);
+          const targetId = tempToRealMap[id] || id;
+          payload[targetId] = formatPayload(modData);
         }
         await executeAction("UPDATE_RECORD", { tableId: targetTableId, tableMetaId: targetTableId, modifications: payload });
       }
@@ -916,10 +1265,15 @@ function TableBlockClient({
       }
       setBaseRecordsMap((prev) => {
         const next = new Map(prev);
-        dirty.added.forEach((r) => next.set(r.id, __spreadValues({}, r.data)));
+        dirty.added.forEach((r) => {
+          const realId = tempToRealMap[r.id] || r.id;
+          const dataToStore = realRecordDataMap[realId] || __spreadValues({}, r.data);
+          next.set(realId, dataToStore);
+        });
         Object.entries(dirty.modified).forEach(([id, mods]) => {
-          const existing = next.get(id) || {};
-          next.set(id, __spreadValues(__spreadValues({}, existing), mods));
+          const realId = tempToRealMap[id] || id;
+          const existing = next.get(realId) || {};
+          next.set(realId, __spreadValues(__spreadValues({}, existing), mods));
         });
         dirty.deleted.forEach((id) => next.delete(id));
         return next;
@@ -937,7 +1291,7 @@ function TableBlockClient({
       setIsSaving(false);
     }
   };
-  const filteredData = useMemo(() => {
+  const filteredData = useMemo2(() => {
     if (!searchQuery) return data;
     const lowerQuery = searchQuery.toLowerCase();
     return data.filter(
@@ -948,7 +1302,7 @@ function TableBlockClient({
   }, [data, searchQuery]);
   const isUpdatingActive = Boolean(isUpdating || isSaving);
   const errorMessage = error ? typeof error === "string" ? error : error.message || String(error) : null;
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       id: componentId,
@@ -956,24 +1310,24 @@ function TableBlockClient({
       className: `flex flex-col w-full bg-white border border-slate-200 rounded-xl shadow-xs overflow-hidden ${className}`,
       dir: "rtl",
       children: [
-        errorMessage && /* @__PURE__ */ jsx4("div", { className: "p-3 bg-rose-50 border-b border-rose-200 text-rose-700 text-sm flex items-center justify-between", children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx4("svg", { className: "w-4 h-4 text-rose-500 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-          /* @__PURE__ */ jsx4("span", { children: errorMessage })
+        errorMessage && /* @__PURE__ */ jsx5("div", { className: "p-3 bg-rose-50 border-b border-rose-200 text-rose-700 text-sm flex items-center justify-between", children: /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx5("svg", { className: "w-4 h-4 text-rose-500 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+          /* @__PURE__ */ jsx5("span", { children: errorMessage })
         ] }) }),
-        /* @__PURE__ */ jsxs4("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__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-2.5", children: [
-            ((schema == null ? void 0 : schema.title) || (schema == null ? void 0 : schema.name)) && /* @__PURE__ */ jsx4("div", { className: "font-bold text-slate-800 text-sm sm:text-base border-l border-slate-300 pl-3 ml-1", children: /* @__PURE__ */ jsx4("span", { children: schema.title || schema.name }) }),
-            /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsxs5("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__ */ jsxs5("div", { className: "flex flex-wrap items-center gap-2.5", children: [
+            ((schema == null ? void 0 : schema.title) || (schema == null ? void 0 : schema.name)) && /* @__PURE__ */ jsx5("div", { className: "font-bold text-slate-800 text-sm sm:text-base border-l border-slate-300 pl-3 ml-1", children: /* @__PURE__ */ jsx5("span", { children: schema.title || schema.name }) }),
+            /* @__PURE__ */ jsx5(
               "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__ */ jsx4("svg", { className: "w-4.5 h-4.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M12 4v16m8-8H4" }) })
+                children: /* @__PURE__ */ jsx5("svg", { className: "w-4.5 h-4.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M12 4v16m8-8H4" }) })
               }
             ),
-            /* @__PURE__ */ jsxs4(
+            /* @__PURE__ */ jsxs5(
               "button",
               {
                 onClick: handleDeleteSelected,
@@ -981,14 +1335,14 @@ 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__ */ jsx4("svg", { className: "w-4.5 h-4.5 text-rose-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx4("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__ */ jsx4("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__ */ jsx5("svg", { className: "w-4.5 h-4.5 text-rose-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx5("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__ */ jsx5("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__ */ jsx4("div", { className: "h-5 w-px bg-slate-300 mx-1 hidden sm:block" }),
-            /* @__PURE__ */ jsxs4("div", { className: "relative flex-1 sm:w-64 max-w-xs", children: [
-              /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx5("div", { className: "h-5 w-px bg-slate-300 mx-1 hidden sm:block" }),
+            /* @__PURE__ */ jsxs5("div", { className: "relative flex-1 sm:w-64 max-w-xs", children: [
+              /* @__PURE__ */ jsx5(
                 "input",
                 {
                   placeholder: "\u05D7\u05D9\u05E4\u05D5\u05E9 \u05D1\u05E8\u05E9\u05D5\u05DE\u05D5\u05EA...",
@@ -998,36 +1352,36 @@ function TableBlockClient({
                   className: "w-full h-9 px-3 pr-9 text-xs border border-slate-300 rounded-lg bg-white shadow-2xs focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 text-slate-800 disabled:opacity-50"
                 }
               ),
-              /* @__PURE__ */ jsx4("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__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) })
+              /* @__PURE__ */ jsx5("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__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-3", children: [
-            isUpdatingActive ? /* @__PURE__ */ jsxs4("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__ */ jsx4("span", { className: "w-2 h-2 rounded-full bg-blue-500 inline-block" }),
+          /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3", children: [
+            isUpdatingActive ? /* @__PURE__ */ jsxs5("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__ */ jsx5("span", { className: "w-2 h-2 rounded-full bg-blue-500 inline-block" }),
               "\u05DE\u05E2\u05D3\u05DB\u05DF..."
-            ] }) : isSaveSuccess ? /* @__PURE__ */ jsxs4("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__ */ jsx4("svg", { className: "w-4 h-4 text-emerald-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M5 13l4 4L19 7" }) }),
+            ] }) : isSaveSuccess ? /* @__PURE__ */ jsxs5("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__ */ jsx5("svg", { className: "w-4 h-4 text-emerald-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx5("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__ */ jsx4("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__ */ jsx4(
+            ] }) : hasChanges ? /* @__PURE__ */ jsx5("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__ */ jsx5(
               "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__ */ jsx4("span", { children: isUpdatingActive ? "\u05E9\u05D5\u05DE\u05E8..." : "\u05E9\u05DE\u05D9\u05E8\u05EA \u05E9\u05D9\u05E0\u05D5\u05D9\u05D9\u05DD" })
+                children: /* @__PURE__ */ jsx5("span", { children: isUpdatingActive ? "\u05E9\u05D5\u05DE\u05E8..." : "\u05E9\u05DE\u05D9\u05E8\u05EA \u05E9\u05D9\u05E0\u05D5\u05D9\u05D9\u05DD" })
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs4("div", { className: "overflow-x-auto relative", children: [
-          isLoading && /* @__PURE__ */ jsxs4("div", { className: "absolute inset-0 bg-white/80 backdrop-blur-xs z-20 flex flex-col items-center justify-center gap-2", children: [
-            /* @__PURE__ */ jsx4("div", { className: "w-6 h-6 border-2 border-brand border-t-transparent rounded-full animate-spin" }),
-            /* @__PURE__ */ jsx4("span", { className: "text-sm font-medium text-slate-600", children: "\u05D8\u05D5\u05E2\u05DF \u05E0\u05EA\u05D5\u05E0\u05D9\u05DD..." })
+        /* @__PURE__ */ jsxs5("div", { className: "overflow-x-auto relative", children: [
+          isLoading && /* @__PURE__ */ jsxs5("div", { className: "absolute inset-0 bg-white/80 backdrop-blur-xs z-20 flex flex-col items-center justify-center gap-2", children: [
+            /* @__PURE__ */ jsx5("div", { className: "w-6 h-6 border-2 border-brand border-t-transparent rounded-full animate-spin" }),
+            /* @__PURE__ */ jsx5("span", { className: "text-sm font-medium text-slate-600", children: "\u05D8\u05D5\u05E2\u05DF \u05E0\u05EA\u05D5\u05E0\u05D9\u05DD..." })
           ] }),
-          /* @__PURE__ */ jsxs4("table", { className: "w-full text-sm text-right border-collapse", children: [
-            /* @__PURE__ */ jsx4("thead", { className: "bg-slate-100/80 text-slate-700 sticky top-0 z-10", children: /* @__PURE__ */ jsxs4("tr", { children: [
-              /* @__PURE__ */ jsx4("th", { className: "border-b border-l border-slate-200 p-2.5 w-10 text-center", children: /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsxs5("table", { className: "w-full text-sm text-right border-collapse", children: [
+            /* @__PURE__ */ jsx5("thead", { className: "bg-slate-100/80 text-slate-700 sticky top-0 z-10", children: /* @__PURE__ */ jsxs5("tr", { children: [
+              /* @__PURE__ */ jsx5("th", { className: "border-b border-l border-slate-200 p-2.5 w-10 text-center", children: /* @__PURE__ */ jsx5(
                 "input",
                 {
                   type: "checkbox",
@@ -1037,13 +1391,13 @@ function TableBlockClient({
                   className: "w-4 h-4 rounded border-slate-300 text-brand"
                 }
               ) }),
-              filteredColumns.map((col) => /* @__PURE__ */ jsx4("th", { className: "border-b border-l border-slate-200 px-4 py-2.5 font-semibold text-slate-700 whitespace-nowrap min-w-[140px]", children: col.name }, col.name))
+              filteredColumns.map((col) => /* @__PURE__ */ jsx5("th", { className: "border-b border-l border-slate-200 px-4 py-2.5 font-semibold text-slate-700 whitespace-nowrap min-w-[140px]", children: col.name }, col.name))
             ] }) }),
-            /* @__PURE__ */ jsx4("tbody", { className: "bg-white", children: (isStateEmpty || filteredData.length === 0) && !isLoading ? /* @__PURE__ */ jsx4("tr", { children: /* @__PURE__ */ jsx4("td", { colSpan: filteredColumns.length + 1, className: "text-center py-12 text-slate-400", children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center justify-center gap-2", children: [
-              /* @__PURE__ */ jsx4("svg", { className: "w-8 h-8 text-slate-300", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx4("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__ */ jsx4("span", { children: "\u05D0\u05D9\u05DF \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05DC\u05D4\u05E6\u05D2\u05D4." })
-            ] }) }) }) : filteredData.map((row) => /* @__PURE__ */ jsxs4("tr", { className: "hover:bg-blue-50/30 transition-colors group", children: [
-              /* @__PURE__ */ jsx4("td", { className: "border-b border-l border-slate-200 p-1.5 text-center bg-white group-hover:bg-transparent", children: /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx5("tbody", { className: "bg-white", children: (isStateEmpty || filteredData.length === 0) && !isLoading ? /* @__PURE__ */ jsx5("tr", { children: /* @__PURE__ */ jsx5("td", { colSpan: filteredColumns.length + 1, className: "text-center py-12 text-slate-400", children: /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-center justify-center gap-2", children: [
+              /* @__PURE__ */ jsx5("svg", { className: "w-8 h-8 text-slate-300", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx5("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__ */ jsx5("span", { children: "\u05D0\u05D9\u05DF \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05DC\u05D4\u05E6\u05D2\u05D4." })
+            ] }) }) }) : filteredData.map((row) => /* @__PURE__ */ jsxs5("tr", { className: "hover:bg-blue-50/30 transition-colors group", children: [
+              /* @__PURE__ */ jsx5("td", { className: "border-b border-l border-slate-200 p-1.5 text-center bg-white group-hover:bg-transparent", children: /* @__PURE__ */ jsx5(
                 "input",
                 {
                   type: "checkbox",
@@ -1065,7 +1419,7 @@ function TableBlockClient({
                   }
                 }
                 if (value === void 0) value = null;
-                return /* @__PURE__ */ jsx4("td", { className: "border-b border-l border-slate-200 p-0 relative", children: /* @__PURE__ */ jsx4(
+                return /* @__PURE__ */ jsx5("td", { className: "border-b border-l border-slate-200 p-0 relative", children: /* @__PURE__ */ jsx5(
                   InputComponent,
                   {
                     value,
@@ -1095,9 +1449,9 @@ function TableBlockClient({
 }
 
 // src/components/TableBlock/TableBlock.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function TableBlock(props) {
-  return /* @__PURE__ */ jsx5(TableBlockClient, __spreadValues({}, props));
+  return /* @__PURE__ */ jsx6(TableBlockClient, __spreadValues({}, props));
 }
 
 // src/registry.ts