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

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",
@@ -398,17 +701,22 @@ function getRelationDisplayLabel(opt, column) {
   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(
+    const [isFocused, setIsFocused] = React4.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__ */ 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",
+          type: isFocused ? "number" : "text",
           step: "any",
           className: `w-full h-8 ${symbol ? "pl-6 pr-2" : "px-2"} bg-transparent focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-400 text-sm`,
-          value: value !== void 0 && value !== null ? value : "",
+          value: displayValue,
+          onFocus: () => setIsFocused(true),
+          onBlur: () => setIsFocused(false),
           onChange: (e) => {
             const val = e.target.value;
             onChange(val === "" ? "" : Number(val));
@@ -417,7 +725,7 @@ var FORM_INPUTS = {
       )
     ] });
   },
-  TIME: ({ value, onChange }) => /* @__PURE__ */ jsx3(
+  TIME: ({ value, onChange }) => /* @__PURE__ */ jsx4(
     "input",
     {
       type: "time",
@@ -427,13 +735,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),
@@ -444,8 +752,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",
@@ -455,7 +763,7 @@ var FORM_INPUTS = {
           onChange: (e) => onChange({ label: e.target.value, url })
         }
       ),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         "input",
         {
           type: "url",
@@ -465,7 +773,7 @@ var FORM_INPUTS = {
           onChange: (e) => onChange({ label, url: e.target.value })
         }
       ),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         "button",
         {
           onClick: () => setIsEditing(false),
@@ -476,7 +784,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",
@@ -485,7 +793,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,
@@ -498,7 +806,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) {
@@ -517,7 +825,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",
@@ -529,13 +837,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",
@@ -547,7 +855,7 @@ var FORM_INPUTS = {
       }
     }
   ),
-  DEFAULT: ({ value, onChange }) => /* @__PURE__ */ jsx3(
+  DEFAULT: ({ value, onChange }) => /* @__PURE__ */ jsx4(
     "input",
     {
       type: "text",
@@ -559,7 +867,8 @@ var FORM_INPUTS = {
 };
 
 // src/components/TableBlock/TableBlockClient.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { X as X4, Copy as Copy2 } from "lucide-react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function TableBlockClient({
   data: initialRecords,
   settings: schema,
@@ -576,6 +885,68 @@ function TableBlockClient({
   "data-testid": dataTestId
 }) {
   const { showError, addToast } = useToast();
+  const [columnWidths, setColumnWidths] = useState4({});
+  const [isMounted, setIsMounted] = useState4(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] = useState4(1);
+  const [limit, setLimit] = useState4(50);
+  const [totalRecords, setTotalRecords] = useState4(0);
+  const [totalPages, setTotalPages] = useState4(1);
+  useEffect2(() => {
+    if (typeof window !== "undefined") {
+      const savedWidths = localStorage.getItem(`table_widths_${tableKey}`);
+      if (savedWidths) {
+        try {
+          setColumnWidths(JSON.parse(savedWidths));
+        } catch (e) {
+        }
+      }
+      const savedSummary = localStorage.getItem(`table_summary_${tableKey}`);
+      if (savedSummary !== null) {
+        setShowSummary(savedSummary === "true");
+      }
+      const savedLimit = localStorage.getItem(`table_limit_${tableKey}`);
+      if (savedLimit) {
+        const parsed = parseInt(savedLimit, 10);
+        if ([20, 50, 100].includes(parsed)) {
+          setLimit(parsed);
+        }
+      }
+    }
+    setIsMounted(true);
+  }, [tableKey]);
+  const [showSummary, setShowSummary] = useState4(false);
+  const toggleSummary = () => {
+    setShowSummary((prev) => {
+      const next = !prev;
+      const tableKey2 = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id) || (schema == null ? void 0 : schema.name) || "default";
+      localStorage.setItem(`table_summary_${tableKey2}`, String(next));
+      return next;
+    });
+  };
+  const [resizingCol, setResizingCol] = useState4(null);
+  useEffect2(() => {
+    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;
@@ -601,18 +972,38 @@ function TableBlockClient({
       return __spreadProps(__spreadValues({}, row), { id: String(row.id || ""), data: rowData });
     });
   };
-  const [localColumns, setLocalColumns] = useState3(() => (schema == null ? void 0 : schema.columns) || []);
-  useEffect(() => {
+  const mergeColumnDefs = useCallback3((existingCols, incomingCols) => {
+    if (!incomingCols || incomingCols.length === 0) return existingCols || [];
+    if (!existingCols || existingCols.length === 0) return incomingCols;
+    const existingMap = new Map(existingCols.map((c) => [c.name, c]));
+    const merged = incomingCols.map((inc) => {
+      const ext = existingMap.get(inc.name);
+      if (ext) {
+        existingMap.delete(inc.name);
+        return __spreadValues(__spreadValues({}, ext), inc);
+      }
+      return inc;
+    });
+    for (const [, extCol] of existingMap) {
+      merged.push(extCol);
+    }
+    return merged.sort((a, b) => {
+      var _a, _b;
+      return ((_a = a.order) != null ? _a : 0) - ((_b = b.order) != null ? _b : 0);
+    });
+  }, []);
+  const [localColumns, setLocalColumns] = useState4(() => (schema == null ? void 0 : schema.columns) || []);
+  useEffect2(() => {
     if ((schema == null ? void 0 : schema.columns) && schema.columns.length > 0) {
-      setLocalColumns(schema.columns);
+      setLocalColumns((prev) => mergeColumnDefs(prev, schema.columns));
     }
-  }, [schema == null ? void 0 : schema.columns]);
-  const [dirty, setDirty] = useState3({ added: [], modified: {}, deleted: [] });
-  const dirtyRef = useRef2(dirty);
-  useEffect(() => {
+  }, [schema == null ? void 0 : schema.columns, mergeColumnDefs]);
+  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) => {
@@ -625,8 +1016,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)));
     }
@@ -641,54 +1032,82 @@ 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 refetchTableData = useCallback3((targetPage) => {
     const tableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
-    if (!tableId || !executeAction) return;
-    if (!(schema == null ? void 0 : schema.columns) || schema.columns.length === 0 || (!initialRecords || initialRecords.length === 0)) {
-      executeAction("FETCH_TABLE_DATA", { tableId }).then((res) => {
-        var _a;
-        if (res) {
-          if (((_a = res.schema) == null ? void 0 : _a.columns) && res.schema.columns.length > 0) {
-            setLocalColumns(res.schema.columns);
-          }
-          if (res.records && Array.isArray(res.records)) {
-            const norm = normalizeRecords(res.records);
-            const map = /* @__PURE__ */ new Map();
-            norm.forEach((r) => map.set(r.id, __spreadValues({}, r.data)));
-            setBaseRecordsMap(map);
-            setData(mergeWithDirty(norm));
+    if (!tableId || !executeAction) return Promise.resolve();
+    const activePage = targetPage !== void 0 ? targetPage : page;
+    const skip = (activePage - 1) * limit;
+    return executeAction("FETCH_TABLE_DATA", { tableId, page: activePage, limit, skip }).then((res) => {
+      var _a;
+      if (res) {
+        if (((_a = res.schema) == null ? void 0 : _a.columns) && res.schema.columns.length > 0) {
+          setLocalColumns((prev) => mergeColumnDefs(prev, res.schema.columns));
+        }
+        if (res.records && Array.isArray(res.records)) {
+          const norm = normalizeRecords(res.records);
+          const map = /* @__PURE__ */ new Map();
+          norm.forEach((r) => map.set(r.id, __spreadValues({}, r.data)));
+          setBaseRecordsMap(map);
+          setData(norm);
+        }
+        if (res.meta) {
+          const total = typeof res.meta.totalRecords === "number" ? res.meta.totalRecords : 0;
+          const pages = typeof res.meta.totalPages === "number" ? res.meta.totalPages : Math.ceil(total / limit) || 1;
+          setTotalRecords(total);
+          setTotalPages(pages);
+          if (activePage > pages && pages >= 1) {
+            setPage(pages);
           }
+        } else if (res.records && Array.isArray(res.records)) {
+          setTotalRecords(res.records.length);
+          setTotalPages(Math.ceil(res.records.length / limit) || 1);
         }
-      }).catch((err) => {
-        console.error("[TableBlock] Failed to auto-fetch table data:", err);
-      });
+      }
+    }).catch((err) => {
+      console.error("[TableBlock] Failed to auto-fetch table data:", err);
+    });
+  }, [schema == null ? void 0 : schema.tableMetaId, schema == null ? void 0 : schema.tableId, schema == null ? void 0 : schema.id, page, limit, executeAction, mergeWithDirty, mergeColumnDefs]);
+  useEffect2(() => {
+    refetchTableData();
+  }, [refetchTableData]);
+  const handleLimitChange = (newLimit) => {
+    setLimit(newLimit);
+    setPage(1);
+    if (typeof window !== "undefined") {
+      localStorage.setItem(`table_limit_${tableKey}`, String(newLimit));
     }
-  }, [schema == null ? void 0 : schema.tableMetaId, schema == null ? void 0 : schema.tableId, schema == null ? void 0 : schema.id, schema == null ? void 0 : schema.columns, initialRecords, executeAction, mergeWithDirty]);
-  useEffect(() => {
+  };
+  const handlePrevPage = () => {
+    setPage((prev) => Math.max(1, prev - 1));
+  };
+  const handleNextPage = () => {
+    setPage((prev) => Math.min(totalPages, prev + 1));
+  };
+  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 {
@@ -708,7 +1127,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);
@@ -722,10 +1141,144 @@ function TableBlockClient({
       refetchRelation(col.name);
     });
   }, [schemaColsString, refetchRelation]);
-  const filteredColumns = useMemo(() => {
-    const systemFields = ["_id", "createdAt", "updatedAt", "orgId", "tableId"];
-    return (localColumns || []).filter((col) => !systemFields.includes(col.name));
+  const normalizedColumns = useMemo2(() => {
+    return (localColumns || []).map((col, idx) => {
+      const isRequired = col.isRequired === true || String(col.isRequired) === "true";
+      const isUnique = col.isUnique === true || String(col.isUnique) === "true";
+      const isProtected = isRequired || isUnique;
+      return __spreadProps(__spreadValues({}, col), {
+        order: typeof col.order === "number" ? col.order : idx,
+        isHidden: isProtected ? false : Boolean(col.isHidden)
+      });
+    }).sort((a, b) => {
+      var _a, _b;
+      return ((_a = a.order) != null ? _a : 0) - ((_b = b.order) != null ? _b : 0);
+    });
   }, [localColumns]);
+  const filteredColumns = useMemo2(() => {
+    const systemFields = ["_id", "createdAt", "updatedAt", "orgId", "tableId"];
+    return normalizedColumns.filter((col) => !systemFields.includes(col.name) && !col.isHidden);
+  }, [normalizedColumns]);
+  const customizableColumns = useMemo2(() => {
+    const systemFields = ["_id", "createdAt", "updatedAt", "orgId", "tableId"];
+    return normalizedColumns.filter((col) => !systemFields.includes(col.name));
+  }, [normalizedColumns]);
+  const [isColumnsDropdownOpen, setIsColumnsDropdownOpen] = useState4(false);
+  const dropdownRef = useRef3(null);
+  useEffect2(() => {
+    const handleClickOutside = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setIsColumnsDropdownOpen(false);
+      }
+    };
+    if (isColumnsDropdownOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isColumnsDropdownOpen]);
+  const handleShowAllColumns = async () => {
+    var _a;
+    const systemFields = ["_id", "createdAt", "updatedAt", "orgId", "tableId"];
+    const systemCols = (localColumns || []).filter((c) => systemFields.includes(c.name));
+    const updatedCustomCols = customizableColumns.map((col) => __spreadProps(__spreadValues({}, col), {
+      isHidden: false
+    }));
+    const fullUpdatedColumns = [...systemCols, ...updatedCustomCols];
+    setLocalColumns(fullUpdatedColumns);
+    const targetTableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
+    if (targetTableId && executeAction) {
+      try {
+        const res = await executeAction("UPDATE_TABLE_COLUMNS", {
+          tableId: targetTableId,
+          tableMetaId: targetTableId,
+          columns: fullUpdatedColumns
+        });
+        const returnedCols = (res == null ? void 0 : res.columns) || ((_a = res == null ? void 0 : res.data) == null ? void 0 : _a.columns);
+        if (returnedCols && Array.isArray(returnedCols)) {
+          setLocalColumns((prev) => mergeColumnDefs(prev, returnedCols));
+        }
+      } catch (err) {
+        console.error("[TableBlock] Failed to save show all columns:", err);
+        showError((err == null ? void 0 : err.message) || String(err), "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05D4\u05E6\u05D2\u05EA \u05DB\u05DC \u05D4\u05E2\u05DE\u05D5\u05D3\u05D5\u05EA");
+      }
+    }
+  };
+  const handleToggleColumnVisibility = async (colName, isVisible) => {
+    var _a;
+    const systemFields = ["_id", "createdAt", "updatedAt", "orgId", "tableId"];
+    const systemCols = (localColumns || []).filter((c) => systemFields.includes(c.name));
+    const updatedCustomCols = customizableColumns.map((col) => {
+      const isRequired = col.isRequired === true || String(col.isRequired) === "true";
+      const isUnique = col.isUnique === true || String(col.isUnique) === "true";
+      const isProtected = isRequired || isUnique;
+      if (col.name === colName) {
+        if (isProtected) {
+          return __spreadProps(__spreadValues({}, col), { isHidden: false });
+        }
+        return __spreadProps(__spreadValues({}, col), { isHidden: !isVisible });
+      }
+      return __spreadProps(__spreadValues({}, col), {
+        isHidden: isProtected ? false : Boolean(col.isHidden)
+      });
+    });
+    const fullUpdatedColumns = [...systemCols, ...updatedCustomCols];
+    setLocalColumns(fullUpdatedColumns);
+    const targetTableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
+    if (targetTableId && executeAction) {
+      try {
+        const res = await executeAction("UPDATE_TABLE_COLUMNS", {
+          tableId: targetTableId,
+          tableMetaId: targetTableId,
+          columns: fullUpdatedColumns
+        });
+        const returnedCols = (res == null ? void 0 : res.columns) || ((_a = res == null ? void 0 : res.data) == null ? void 0 : _a.columns);
+        if (returnedCols && Array.isArray(returnedCols)) {
+          setLocalColumns((prev) => mergeColumnDefs(prev, returnedCols));
+        }
+      } catch (err) {
+        console.error("[TableBlock] Failed to save column visibility:", err);
+        showError((err == null ? void 0 : err.message) || String(err), "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E2\u05D3\u05DB\u05D5\u05DF \u05D4\u05E1\u05EA\u05E8\u05EA \u05E2\u05DE\u05D5\u05D3\u05D5\u05EA");
+      }
+    }
+  };
+  const [draggedColName, setDraggedColName] = useState4(null);
+  const [dragOverColName, setDragOverColName] = useState4(null);
+  const handleColumnReorder = async (draggedName, dropTargetName) => {
+    var _a;
+    if (draggedName === dropTargetName) return;
+    const currentCustomCols = [...customizableColumns];
+    const fromIndex = currentCustomCols.findIndex((c) => c.name === draggedName);
+    const toIndex = currentCustomCols.findIndex((c) => c.name === dropTargetName);
+    if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) return;
+    const [draggedItem] = currentCustomCols.splice(fromIndex, 1);
+    currentCustomCols.splice(toIndex, 0, draggedItem);
+    const updatedCustomCols = currentCustomCols.map((col, idx) => __spreadProps(__spreadValues({}, col), {
+      order: idx
+    }));
+    const systemFields = ["_id", "createdAt", "updatedAt", "orgId", "tableId"];
+    const systemCols = (localColumns || []).filter((c) => systemFields.includes(c.name));
+    const fullUpdatedColumns = [...systemCols, ...updatedCustomCols];
+    setLocalColumns(fullUpdatedColumns);
+    const targetTableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
+    if (targetTableId && executeAction) {
+      try {
+        const res = await executeAction("UPDATE_TABLE_COLUMNS", {
+          tableId: targetTableId,
+          tableMetaId: targetTableId,
+          columns: fullUpdatedColumns
+        });
+        const returnedCols = (res == null ? void 0 : res.columns) || ((_a = res == null ? void 0 : res.data) == null ? void 0 : _a.columns);
+        if (returnedCols && Array.isArray(returnedCols)) {
+          setLocalColumns((prev) => mergeColumnDefs(prev, returnedCols));
+        }
+      } catch (err) {
+        console.error("[TableBlock] Failed to save column reorder:", err);
+        showError((err == null ? void 0 : err.message) || String(err), "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E2\u05D3\u05DB\u05D5\u05DF \u05E1\u05D3\u05E8 \u05D4\u05E2\u05DE\u05D5\u05D3\u05D5\u05EA");
+      }
+    }
+  };
   const generateTempId = () => `temp_${Math.random().toString(36).substr(2, 9)}`;
   const handleAddRow = () => {
     const defaultData = {};
@@ -755,6 +1308,34 @@ function TableBlockClient({
     setData((prev) => [newRow, ...prev]);
     setDirty((prev) => __spreadProps(__spreadValues({}, prev), { added: [newRow, ...prev.added] }));
   };
+  const handleDuplicateRow = () => {
+    if (selectedIds.size !== 1) return;
+    const targetId = Array.from(selectedIds)[0];
+    const sourceRow = data.find((r) => r.id === targetId);
+    if (!sourceRow) return;
+    const uniqueColNames = new Set(
+      (localColumns || []).filter((c) => c.isUnique === true || String(c.isUnique) === "true").map((c) => c.name)
+    );
+    const fieldsToScrub = /* @__PURE__ */ new Set(["id", "_id", "createdAt", "updatedAt", "created_at", "updated_at"]);
+    const clonedData = __spreadValues({}, sourceRow.data);
+    Object.keys(clonedData).forEach((key) => {
+      var _a;
+      if (fieldsToScrub.has(key) || uniqueColNames.has(key)) {
+        const col = (localColumns || []).find((c) => c.name === key);
+        const typeUpper = (_a = col == null ? void 0 : col.type) == null ? void 0 : _a.toUpperCase();
+        if (typeUpper === "NUMBER" || typeUpper === "CURRENCY") {
+          clonedData[key] = 0;
+        } else if (typeUpper === "BOOLEAN") {
+          clonedData[key] = false;
+        } else {
+          clonedData[key] = "";
+        }
+      }
+    });
+    const newRow = { id: generateTempId(), data: clonedData };
+    setData((prev) => [newRow, ...prev]);
+    setDirty((prev) => __spreadProps(__spreadValues({}, prev), { added: [newRow, ...prev.added] }));
+  };
   const handleCellChange = (rowId, colName, value) => {
     setData((prev) => prev.map(
       (row) => row.id === rowId ? __spreadProps(__spreadValues({}, row), { data: __spreadProps(__spreadValues({}, row.data), { [colName]: value }) }) : row
@@ -975,6 +1556,7 @@ function TableBlockClient({
         return next;
       });
       setDirty({ added: [], modified: {}, deleted: [] });
+      await refetchTableData();
       setIsSaveSuccess(true);
       setTimeout(() => {
         setIsSaveSuccess(false);
@@ -987,7 +1569,7 @@ function TableBlockClient({
       setIsSaving(false);
     }
   };
-  const filteredData = useMemo(() => {
+  const filteredData = useMemo2(() => {
     if (!searchQuery) return data;
     const lowerQuery = searchQuery.toLowerCase();
     return data.filter(
@@ -998,32 +1580,60 @@ function TableBlockClient({
   }, [data, searchQuery]);
   const isUpdatingActive = Boolean(isUpdating || isSaving);
   const errorMessage = error ? typeof error === "string" ? error : error.message || String(error) : null;
-  return /* @__PURE__ */ jsxs4(
+  const columnTotals = useMemo2(() => {
+    const totals = {};
+    if (!showSummary) return totals;
+    filteredColumns.forEach((col) => {
+      var _a;
+      const typeUpper = (_a = col.type) == null ? void 0 : _a.toUpperCase();
+      if (typeUpper === "CURRENCY" || typeUpper === "NUMBER") {
+        const sum = filteredData.reduce((acc, row) => {
+          var _a2;
+          const val = (_a2 = row.data) == null ? void 0 : _a2[col.name];
+          const num = Number(val);
+          return acc + (isNaN(num) ? 0 : num);
+        }, 0);
+        totals[col.name] = sum;
+      }
+    });
+    return totals;
+  }, [filteredData, filteredColumns, showSummary]);
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       id: componentId,
       "data-testid": dataTestId || (componentId ? `table-block-${componentId}` : void 0),
-      className: `flex flex-col w-full bg-white border border-slate-200 rounded-xl shadow-xs overflow-hidden ${className}`,
+      className: `flex flex-col w-full bg-white border border-slate-200 rounded-xl shadow-xs min-h-[350px] overflow-hidden ${className}`,
       dir: "rtl",
       children: [
-        errorMessage && /* @__PURE__ */ 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__ */ jsx5(
+              "button",
+              {
+                onClick: handleDuplicateRow,
+                disabled: isLoading || isUpdatingActive || selectedIds.size !== 1,
+                className: "w-9 h-9 bg-blue-50 hover:bg-blue-100 border border-blue-200 text-blue-700 rounded-lg shadow-2xs flex items-center justify-center transition-all disabled:opacity-40 disabled:pointer-events-none cursor-pointer",
+                title: "\u05E9\u05DB\u05E4\u05DC \u05E9\u05D5\u05E8\u05D4 \u05E0\u05D1\u05D7\u05E8\u05EA",
+                children: /* @__PURE__ */ jsx5(Copy2, { className: "w-4 h-4 text-blue-600 shrink-0" })
               }
             ),
-            /* @__PURE__ */ jsxs4(
+            /* @__PURE__ */ jsxs5(
               "button",
               {
                 onClick: handleDeleteSelected,
@@ -1031,14 +1641,120 @@ function TableBlockClient({
                 className: "w-9 h-9 bg-rose-50 hover:bg-rose-100 border border-rose-200 text-rose-700 rounded-lg shadow-2xs flex items-center justify-center relative transition-all disabled:opacity-40 disabled:pointer-events-none cursor-pointer",
                 title: "\u05DE\u05D7\u05E7 \u05E9\u05D5\u05E8\u05D5\u05EA \u05E0\u05D1\u05D7\u05E8\u05D5\u05EA",
                 children: [
-                  /* @__PURE__ */ 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__ */ jsxs5(
+              "button",
+              {
+                onClick: toggleSummary,
+                disabled: isLoading || isUpdatingActive,
+                className: `h-9 px-3 border font-semibold rounded-lg shadow-2xs flex items-center gap-1.5 text-xs transition-all disabled:opacity-40 disabled:pointer-events-none cursor-pointer ${showSummary ? "bg-indigo-50 border-indigo-200 text-indigo-700 hover:bg-indigo-100" : "bg-white border-slate-300 text-slate-700 hover:bg-slate-100"}`,
+                title: "\u05D4\u05E6\u05D2/\u05D4\u05E1\u05EA\u05E8 \u05E9\u05D5\u05E8\u05EA \u05E1\u05D9\u05DB\u05D5\u05DD",
+                children: [
+                  /* @__PURE__ */ jsx5("svg", { className: "w-4 h-4 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
+                  /* @__PURE__ */ jsx5("span", { className: "hidden sm:inline", children: "\u05E1\u05DB\u05D9\u05DE\u05D4" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs5("div", { className: "relative", ref: dropdownRef, children: [
+              /* @__PURE__ */ jsxs5(
+                "button",
+                {
+                  onClick: () => setIsColumnsDropdownOpen((prev) => !prev),
+                  disabled: isLoading || isUpdatingActive,
+                  className: "h-9 px-3 bg-white hover:bg-slate-100 border border-slate-300 text-slate-700 font-semibold rounded-lg shadow-2xs flex items-center gap-1.5 text-xs transition-all disabled:opacity-40 disabled:pointer-events-none cursor-pointer",
+                  title: "\u05D4\u05E6\u05D2/\u05D4\u05E1\u05EA\u05E8 \u05E2\u05DE\u05D5\u05D3\u05D5\u05EA",
+                  children: [
+                    /* @__PURE__ */ jsx5("svg", { className: "w-4 h-4 text-slate-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx5("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__ */ jsx5("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__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })
+                  ]
+                }
+              ),
+              isColumnsDropdownOpen && /* @__PURE__ */ jsxs5("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__ */ jsxs5("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__ */ jsxs5("div", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsx5("span", { children: "\u05D4\u05E6\u05D2\u05EA \u05E2\u05DE\u05D5\u05D3\u05D5\u05EA" }),
+                    /* @__PURE__ */ jsxs5("span", { className: "text-[10px] font-normal text-slate-400", children: [
+                      "(",
+                      customizableColumns.filter((c) => !c.isHidden).length,
+                      "/",
+                      customizableColumns.length,
+                      ")"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx5(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleShowAllColumns,
+                      className: "text-xs text-brand hover:text-brand-hover font-semibold hover:underline cursor-pointer",
+                      children: "\u05D4\u05E6\u05D2 \u05D4\u05DB\u05DC"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx5("div", { className: "max-h-60 overflow-y-auto space-y-0.5", children: customizableColumns.map((col) => {
+                  const isRequired = col.isRequired === true || String(col.isRequired) === "true";
+                  const isUnique = col.isUnique === true || String(col.isUnique) === "true";
+                  const isProtected = isRequired || isUnique;
+                  const isVisible = !col.isHidden;
+                  let protectedExplanation = "";
+                  if (isRequired && isUnique) {
+                    protectedExplanation = "\u05E9\u05D3\u05D4 \u05D7\u05D5\u05D1\u05D4 \u05D5\u05D9\u05D9\u05D7\u05D5\u05D3\u05D9 - \u05DC\u05D0 \u05E0\u05D9\u05EA\u05DF \u05DC\u05D4\u05D5\u05E8\u05D9\u05D3 \u05E2\u05DE\u05D5\u05D3\u05D4 \u05D6\u05D5 \u05DE\u05D4\u05EA\u05E6\u05D5\u05D2\u05D4";
+                  } else if (isRequired) {
+                    protectedExplanation = "\u05E9\u05D3\u05D4 \u05D7\u05D5\u05D1\u05D4 - \u05DC\u05D0 \u05E0\u05D9\u05EA\u05DF \u05DC\u05D4\u05D5\u05E8\u05D9\u05D3 \u05E2\u05DE\u05D5\u05D3\u05D4 \u05D6\u05D5 \u05DE\u05D4\u05EA\u05E6\u05D5\u05D2\u05D4";
+                  } else if (isUnique) {
+                    protectedExplanation = "\u05E9\u05D3\u05D4 \u05D9\u05D9\u05D7\u05D5\u05D3\u05D9 - \u05DC\u05D0 \u05E0\u05D9\u05EA\u05DF \u05DC\u05D4\u05D5\u05E8\u05D9\u05D3 \u05E2\u05DE\u05D5\u05D3\u05D4 \u05D6\u05D5 \u05DE\u05D4\u05EA\u05E6\u05D5\u05D2\u05D4";
+                  }
+                  const badgeLabel = isRequired && isUnique ? "\u05D7\u05D5\u05D1\u05D4 + \u05D9\u05D9\u05D7\u05D5\u05D3\u05D9" : isRequired ? "\u05E9\u05D3\u05D4 \u05D7\u05D5\u05D1\u05D4" : "\u05E9\u05D3\u05D4 \u05D9\u05D9\u05D7\u05D5\u05D3\u05D9";
+                  return /* @__PURE__ */ jsxs5(
+                    "div",
+                    {
+                      onClick: () => {
+                        if (!isProtected) {
+                          handleToggleColumnVisibility(col.name, !isVisible);
+                        }
+                      },
+                      title: isProtected ? protectedExplanation : void 0,
+                      className: `group flex items-center justify-between px-2.5 py-1.5 rounded-lg text-xs transition-colors select-none ${isProtected ? "opacity-75 bg-slate-50 border border-slate-100/70 cursor-not-allowed" : "hover:bg-slate-100 active:bg-slate-200 cursor-pointer"}`,
+                      children: [
+                        /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 min-w-0", children: [
+                          /* @__PURE__ */ jsx5(
+                            "input",
+                            {
+                              type: "checkbox",
+                              checked: isVisible,
+                              disabled: isProtected,
+                              onChange: () => {
+                              },
+                              className: "w-3.5 h-3.5 rounded border-slate-300 text-brand focus:ring-brand/20 cursor-pointer disabled:cursor-not-allowed disabled:opacity-60"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx5("span", { className: `font-medium truncate ${isProtected ? "text-slate-500" : "text-slate-700"}`, children: col.name })
+                        ] }),
+                        isProtected && /* @__PURE__ */ jsxs5(
+                          "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__ */ jsx5("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__ */ jsx5("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__ */ jsx5("span", { children: badgeLabel })
+                            ]
+                          }
+                        )
+                      ]
+                    },
+                    col.name
+                  );
+                }) })
+              ] })
+            ] }),
+            /* @__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...",
@@ -1048,36 +1764,45 @@ function TableBlockClient({
                   className: "w-full h-9 px-3 pr-9 text-xs border border-slate-300 rounded-lg bg-white shadow-2xs focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 text-slate-800 disabled:opacity-50"
                 }
               ),
-              /* @__PURE__ */ 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" }) })
+              searchQuery ? /* @__PURE__ */ jsx5(
+                "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__ */ jsx5(X4, { className: "w-3.5 h-3.5" })
+                }
+              ) : /* @__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 min-h-[260px] flex-1 transition-opacity duration-200 ${isMounted ? "opacity-100" : "opacity-0"}`, 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 table-auto", 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 shrink-0", style: { width: 50, minWidth: 50, maxWidth: 50 }, children: /* @__PURE__ */ jsx5(
                 "input",
                 {
                   type: "checkbox",
@@ -1087,13 +1812,83 @@ 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) => {
+                const isDragging = draggedColName === col.name;
+                const isDragOver = dragOverColName === col.name;
+                const currentWidth = columnWidths[col.name] || 200;
+                return /* @__PURE__ */ jsxs5(
+                  "th",
+                  {
+                    style: { width: currentWidth, minWidth: currentWidth, maxWidth: currentWidth },
+                    draggable: !isLoading && !isUpdatingActive,
+                    onDragStart: (e) => {
+                      e.dataTransfer.setData("text/plain", col.name);
+                      e.dataTransfer.effectAllowed = "move";
+                      setDraggedColName(col.name);
+                    },
+                    onDragOver: (e) => {
+                      e.preventDefault();
+                      e.dataTransfer.dropEffect = "move";
+                      if (dragOverColName !== col.name) {
+                        setDragOverColName(col.name);
+                      }
+                    },
+                    onDragLeave: () => {
+                      if (dragOverColName === col.name) {
+                        setDragOverColName(null);
+                      }
+                    },
+                    onDrop: (e) => {
+                      e.preventDefault();
+                      if (draggedColName && draggedColName !== col.name) {
+                        handleColumnReorder(draggedColName, col.name);
+                      }
+                      setDraggedColName(null);
+                      setDragOverColName(null);
+                    },
+                    onDragEnd: () => {
+                      setDraggedColName(null);
+                      setDragOverColName(null);
+                    },
+                    className: `relative border-b border-l border-slate-200 px-4 py-2.5 font-semibold text-slate-700 whitespace-nowrap select-none cursor-grab active:cursor-grabbing transition-colors ${isDragging ? "opacity-40 bg-slate-200 border-dashed border-2 border-brand" : ""} ${isDragOver ? "bg-blue-50 border-r-4 border-r-brand text-brand font-bold" : "hover:bg-slate-200/60"}`,
+                    children: [
+                      /* @__PURE__ */ jsx5(
+                        "div",
+                        {
+                          onMouseDown: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            setResizingCol({ name: col.name, startWidth: currentWidth, startX: e.clientX });
+                          },
+                          className: "absolute left-0 top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-brand active:bg-brand-hover z-20",
+                          title: "\u05E9\u05E0\u05D4 \u05D2\u05D5\u05D3\u05DC \u05E2\u05DE\u05D5\u05D3\u05D4"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs5("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__ */ jsx5("span", { className: "truncate", children: col.name }),
+                        /* @__PURE__ */ jsx5(
+                          "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__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M8 9h.01M8 15h.01M16 9h.01M16 15h.01" })
+                          }
+                        )
+                      ] })
+                    ]
+                  },
+                  col.name
+                );
+              }),
+              /* @__PURE__ */ jsx5("th", { className: "w-full min-w-[50px] border-b border-slate-200 pointer-events-none" })
             ] }) }),
-            /* @__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 + 2, 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",
@@ -1115,7 +1910,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,
@@ -1135,8 +1930,82 @@ function TableBlockClient({
                     }
                   }
                 ) }, col.name);
-              })
-            ] }, row.id)) })
+              }),
+              /* @__PURE__ */ jsx5("td", { className: "border-b border-slate-200 bg-white pointer-events-none" })
+            ] }, row.id)) }),
+            showSummary && filteredData.length > 0 && /* @__PURE__ */ jsx5("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__ */ jsxs5("tr", { children: [
+              /* @__PURE__ */ jsx5("td", { className: "border-b border-l border-slate-200 p-1.5 text-center font-bold text-slate-600 text-xs", children: '\u05E1\u05D4"\u05DB' }),
+              filteredColumns.map((col) => {
+                var _a;
+                const typeUpper = (_a = col.type) == null ? void 0 : _a.toUpperCase();
+                const isNumeric = typeUpper === "CURRENCY" || typeUpper === "NUMBER";
+                const total = columnTotals[col.name];
+                let displayVal = "";
+                if (isNumeric && total !== void 0) {
+                  displayVal = new Intl.NumberFormat("en-US").format(total);
+                  if (typeUpper === "CURRENCY") {
+                    const symbol = getCurrencySymbol(col.currencySymbol);
+                    displayVal = symbol ? `${symbol} ${displayVal}` : displayVal;
+                  }
+                }
+                return /* @__PURE__ */ jsx5("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__ */ jsx5("div", { className: "flex items-center text-right justify-start", children: /* @__PURE__ */ jsx5("span", { className: "truncate", children: displayVal }) }) }, col.name);
+              }),
+              /* @__PURE__ */ jsx5("td", { className: "border-b border-slate-200 bg-slate-50 pointer-events-none" })
+            ] }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs5("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__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx5("span", { className: "font-medium text-slate-700", children: "\u05E9\u05D5\u05E8\u05D5\u05EA \u05DC\u05E2\u05DE\u05D5\u05D3:" }),
+            /* @__PURE__ */ jsxs5(
+              "select",
+              {
+                value: limit,
+                onChange: (e) => handleLimitChange(Number(e.target.value)),
+                disabled: isLoading || isUpdatingActive,
+                className: "bg-white border border-slate-300 rounded-lg px-2.5 py-1 text-slate-700 font-semibold shadow-2xs cursor-pointer focus:outline-none focus:ring-2 focus:ring-brand disabled:opacity-50",
+                children: [
+                  /* @__PURE__ */ jsx5("option", { value: 20, children: "20" }),
+                  /* @__PURE__ */ jsx5("option", { value: 50, children: "50" }),
+                  /* @__PURE__ */ jsx5("option", { value: 100, children: "100" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ jsxs5("span", { className: "font-medium text-slate-600", children: [
+              "\u05E2\u05DE\u05D5\u05D3 ",
+              /* @__PURE__ */ jsx5("strong", { className: "text-slate-900", children: page }),
+              " \u05DE\u05EA\u05D5\u05DA ",
+              /* @__PURE__ */ jsx5("strong", { className: "text-slate-900", children: totalPages || 1 }),
+              totalRecords > 0 && /* @__PURE__ */ jsxs5("span", { className: "text-slate-500 font-normal", children: [
+                " (",
+                totalRecords,
+                ' \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05D1\u05E1\u05D4"\u05DB)'
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  onClick: handlePrevPage,
+                  disabled: page <= 1 || isLoading || isUpdatingActive,
+                  className: "px-3 py-1.5 bg-white border border-slate-300 hover:bg-slate-100 font-semibold text-slate-700 rounded-lg shadow-2xs disabled:opacity-40 disabled:pointer-events-none transition-colors cursor-pointer",
+                  title: "\u05E2\u05DE\u05D5\u05D3 \u05E7\u05D5\u05D3\u05DD",
+                  children: "\u05D4\u05E7\u05D5\u05D3\u05DD"
+                }
+              ),
+              /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  onClick: handleNextPage,
+                  disabled: page >= totalPages || isLoading || isUpdatingActive,
+                  className: "px-3 py-1.5 bg-white border border-slate-300 hover:bg-slate-100 font-semibold text-slate-700 rounded-lg shadow-2xs disabled:opacity-40 disabled:pointer-events-none transition-colors cursor-pointer",
+                  title: "\u05E2\u05DE\u05D5\u05D3 \u05D4\u05D1\u05D0",
+                  children: "\u05D4\u05D1\u05D0"
+                }
+              )
+            ] })
           ] })
         ] })
       ]
@@ -1145,9 +2014,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