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

package/dist/index.js

@@ -1,8 +1,40 @@
+"use client";
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -15,13 +47,25 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  TableBlock: () => TableBlock,
+  ToastContext: () => ToastContext,
+  ToastProvider: () => ToastProvider,
+  UNIVERSE_COMPONENTS: () => UNIVERSE_COMPONENTS,
   cn: () => cn,
-  isUiLibraryReady: () => isUiLibraryReady
+  useToast: () => useToast
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -32,10 +76,1078 @@ function cn(...inputs) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
 
-// src/index.ts
-var isUiLibraryReady = true;
+// src/components/TableBlock/TableBlockClient.tsx
+var import_react5 = require("react");
+
+// src/hooks/useToast.ts
+var import_react2 = require("react");
+
+// src/providers/ToastProvider.tsx
+var import_react = require("react");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ToastContext = (0, import_react.createContext)(void 0);
+function ToastCard({
+  toast,
+  onClose,
+  onMouseEnter,
+  onMouseLeave
+}) {
+  const [copied, setCopied] = (0, import_react.useState)(false);
+  const handleCopy = (e) => {
+    e.stopPropagation();
+    const textToCopy = toast.title ? `${toast.title}
+${toast.message}` : toast.message;
+    navigator.clipboard.writeText(textToCopy).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }).catch(() => {
+    });
+  };
+  const isSuccess = toast.type === "success";
+  const isInfo = toast.type === "info";
+  const isWarning = toast.type === "warning";
+  let borderClass = "border-rose-200";
+  let iconBgClass = "bg-rose-100 text-rose-600";
+  let titleClass = "text-rose-900";
+  let defaultTitle = "\u05E9\u05D2\u05D9\u05D0\u05D4";
+  let IconComponent = import_lucide_react.AlertCircle;
+  if (isSuccess) {
+    borderClass = "border-emerald-200";
+    iconBgClass = "bg-emerald-100 text-emerald-600";
+    titleClass = "text-emerald-900";
+    defaultTitle = "\u05D4\u05E6\u05DC\u05D7\u05D4";
+    IconComponent = import_lucide_react.CheckCircle2;
+  } else if (isInfo) {
+    borderClass = "border-sky-200";
+    iconBgClass = "bg-sky-100 text-sky-600";
+    titleClass = "text-sky-900";
+    defaultTitle = "\u05E2\u05D3\u05DB\u05D5\u05DF";
+    IconComponent = import_lucide_react.Info;
+  } else if (isWarning) {
+    borderClass = "border-amber-200";
+    iconBgClass = "bg-amber-100 text-amber-600";
+    titleClass = "text-amber-900";
+    defaultTitle = "\u05D0\u05D6\u05D4\u05E8\u05D4";
+    IconComponent = import_lucide_react.AlertTriangle;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      onMouseEnter,
+      onMouseLeave,
+      className: `pointer-events-auto flex items-start gap-3 p-4 rounded-xl shadow-xl border bg-white/95 text-slate-900 backdrop-blur-md transition-all animate-in fade-in slide-in-from-bottom-5 duration-200 select-text ${borderClass}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `p-1.5 rounded-full shrink-0 mt-0.5 ${iconBgClass}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconComponent, { className: "w-5 h-5" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 text-right min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { className: `font-semibold text-sm ${titleClass}`, children: toast.title || defaultTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "p",
+            {
+              className: "text-xs text-slate-700 mt-1 leading-relaxed break-words font-sans select-text selection:bg-blue-100 selection:text-blue-900",
+              dir: "auto",
+              children: toast.message
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1 shrink-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              onClick: handleCopy,
+              className: "text-slate-400 hover:text-slate-700 hover:bg-slate-100 transition-colors p-1.5 rounded-md relative flex items-center gap-1 text-xs",
+              title: "\u05D4\u05E2\u05EA\u05E7 \u05D8\u05E7\u05E1\u05D8",
+              "aria-label": "\u05D4\u05E2\u05EA\u05E7 \u05D8\u05E7\u05E1\u05D8",
+              children: copied ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { className: "w-4 h-4 text-emerald-600" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[10px] text-emerald-600 font-medium", children: "\u05D4\u05D5\u05E2\u05EA\u05E7!" })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Copy, { className: "w-4 h-4" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              onClick: () => onClose(toast.id),
+              className: "text-slate-400 hover:text-slate-700 hover:bg-slate-100 transition-colors p-1.5 rounded-md",
+              "aria-label": "\u05E1\u05D2\u05D5\u05E8",
+              title: "\u05E1\u05D2\u05D5\u05E8",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "w-4 h-4" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = (0, import_react.useState)([]);
+  const timersRef = (0, import_react.useRef)({});
+  const removeToast = (0, import_react.useCallback)((id) => {
+    if (timersRef.current[id]) {
+      clearTimeout(timersRef.current[id]);
+      delete timersRef.current[id];
+    }
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const scheduleDismiss = (0, import_react.useCallback)(
+    (id, duration) => {
+      if (duration <= 0) return;
+      if (timersRef.current[id]) {
+        clearTimeout(timersRef.current[id]);
+      }
+      timersRef.current[id] = setTimeout(() => {
+        removeToast(id);
+      }, duration);
+    },
+    [removeToast]
+  );
+  const addToast = (0, import_react.useCallback)(
+    (toast) => {
+      var _a;
+      const id = Math.random().toString(36).substring(2, 9);
+      const defaultDuration = toast.type === "error" ? 1e4 : 6e3;
+      const duration = (_a = toast.duration) != null ? _a : defaultDuration;
+      const newToast = __spreadProps(__spreadValues({}, toast), { id, duration });
+      setToasts((prev) => [...prev, newToast]);
+      scheduleDismiss(id, duration);
+      return id;
+    },
+    [scheduleDismiss]
+  );
+  const showError = (0, import_react.useCallback)(
+    (error, title = "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E8\u05DB\u05D9\u05D1") => {
+      if (!error) return;
+      const message = typeof error === "string" ? error : error.message || String(error);
+      addToast({
+        title,
+        message,
+        type: "error",
+        duration: 12e3
+      });
+    },
+    [addToast]
+  );
+  const handleMouseEnter = (toast) => {
+    if (timersRef.current[toast.id]) {
+      clearTimeout(timersRef.current[toast.id]);
+    }
+  };
+  const handleMouseLeave = (toast) => {
+    var _a;
+    scheduleDismiss(toast.id, (_a = toast.duration) != null ? _a : 6e3);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ToastContext.Provider, { value: { toasts, addToast, showError, removeToast }, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        "aria-live": "assertive",
+        className: "fixed bottom-4 right-4 z-[9999] flex flex-col gap-3 max-w-md w-full pointer-events-none p-2",
+        dir: "rtl",
+        children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          ToastCard,
+          {
+            toast,
+            onClose: removeToast,
+            onMouseEnter: () => handleMouseEnter(toast),
+            onMouseLeave: () => handleMouseLeave(toast)
+          },
+          toast.id
+        ))
+      }
+    )
+  ] });
+}
+
+// src/hooks/useToast.ts
+function useToast() {
+  const context = (0, import_react2.useContext)(ToastContext);
+  if (!context) {
+    return {
+      toasts: [],
+      addToast: () => "",
+      showError: (err) => {
+        if (err) console.error("[UI Component Error]:", err);
+      },
+      removeToast: () => {
+      }
+    };
+  }
+  return context;
+}
+
+// src/components/TableBlock/fields/fieldRegistry.tsx
+var import_react4 = __toESM(require("react"));
+
+// src/components/TableBlock/fields/DrivePickerCell.tsx
+var import_react3 = require("react");
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function DrivePickerCell({ value, onChange, tableName, onMarkForDeletion, context }) {
+  const [isOpening, setIsOpening] = (0, import_react3.useState)(false);
+  const { showError } = useToast();
+  const openUploadPopup = async () => {
+    if (isOpening) return;
+    setIsOpening(true);
+    try {
+      if (context == null ? void 0 : context.executeAction) {
+        const width = 600;
+        const height = 600;
+        const left = typeof window !== "undefined" ? window.screen.width / 2 - width / 2 : 100;
+        const top = typeof window !== "undefined" ? window.screen.height / 2 - height / 2 : 100;
+        const popup = typeof window !== "undefined" ? window.open(
+          "about:blank",
+          "GoogleDrivePicker",
+          `width=${width},height=${height},top=${top},left=${left},resizable=yes,scrollbars=yes`
+        ) : null;
+        if (!popup && typeof window !== "undefined") {
+          const popupErrMsg = "\u05E4\u05EA\u05D9\u05D7\u05EA \u05D7\u05DC\u05D5\u05DF PopUp \u05E0\u05D7\u05E1\u05DE\u05D4 \u05E2\u05DC \u05D9\u05D3\u05D9 \u05D4\u05D3\u05E4\u05D3\u05E4\u05DF. \u05D0\u05E0\u05D0 \u05D0\u05E4\u05E9\u05E8 \u05D7\u05DC\u05D5\u05E0\u05D5\u05EA \u05E7\u05D5\u05E4\u05E6\u05D9\u05DD \u05E2\u05D1\u05D5\u05E8 \u05D0\u05EA\u05E8 \u05D6\u05D4.";
+          console.error("[DrivePickerCell]", popupErrMsg);
+          showError(popupErrMsg, "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E4\u05EA\u05D9\u05D7\u05EA \u05E4\u05D5\u05E4\u05D0\u05E4");
+          return;
+        }
+        if (popup) {
+          try {
+            popup.document.write(
+              "<html dir='rtl'><head><title>Google Drive</title><style>body { font-family: sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; background: #f8fafc; color: #475569; font-size: 14px; }</style></head><body>\u05D8\u05D5\u05E2\u05DF...</body></html>"
+            );
+          } catch (e) {
+          }
+        }
+        const actionResult = await context.executeAction("UPLOAD_DRIVE_FILE", { tableName });
+        const folderId = actionResult == null ? void 0 : actionResult.folderId;
+        const pickerUrl = (actionResult == null ? void 0 : actionResult.pickerUrl) || (folderId ? `/embed/picker?folderId=${encodeURIComponent(folderId)}` : `/embed/picker`);
+        if (popup) {
+          popup.location.href = pickerUrl;
+        }
+        const newFile = await new Promise((resolve) => {
+          let timer = null;
+          const handleMessage = (event) => {
+            var _a, _b;
+            if (((_a = event.data) == null ? void 0 : _a.type) === "DRIVE_UPLOAD_SUCCESS" && ((_b = event.data) == null ? void 0 : _b.payload)) {
+              window.removeEventListener("message", handleMessage);
+              if (timer) clearInterval(timer);
+              resolve(event.data.payload);
+            }
+          };
+          timer = setInterval(() => {
+            if (!popup || popup.closed) {
+              if (timer) clearInterval(timer);
+              window.removeEventListener("message", handleMessage);
+              resolve(null);
+            }
+          }, 800);
+          window.addEventListener("message", handleMessage);
+        });
+        if (newFile) {
+          onChange(newFile);
+        }
+      }
+    } catch (error) {
+      console.error("[DrivePickerCell] Error uploading file:", error);
+      const errorMessage = typeof error === "string" ? error : (error == null ? void 0 : error.message) || "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05DC\u05EA\u05D9 \u05E6\u05E4\u05D5\u05D9\u05D4 \u05D1\u05D2\u05D9\u05E9\u05D4 \u05DC-Google Drive";
+      showError(errorMessage, "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05D4\u05E2\u05DC\u05D0\u05EA \u05E7\u05D5\u05D1\u05E5 \u05DC-Drive");
+    } finally {
+      setIsOpening(false);
+    }
+  };
+  if (value == null ? void 0 : value.fileUrl) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center w-full h-8 px-2 gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "a",
+        {
+          href: value.fileUrl,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "inline-flex items-center gap-1.5 max-w-[calc(100%-24px)] px-2 py-1 rounded-md text-xs font-medium text-blue-700 bg-blue-50 hover:bg-blue-100 transition-colors truncate",
+          title: value.fileName || "Open file",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.FileText, { className: "w-3.5 h-3.5 shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "truncate", children: value.fileName || "Unnamed file" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            if ((value == null ? void 0 : value.fileId) && onMarkForDeletion) {
+              onMarkForDeletion(value.fileId);
+            }
+            onChange(null);
+          },
+          className: "shrink-0 p-0.5 rounded hover:bg-rose-100 text-slate-400 hover:text-rose-500 transition-colors",
+          title: "Remove file",
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.X, { className: "w-3.5 h-3.5" })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center w-full h-8 px-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick: openUploadPopup,
+      disabled: isOpening || !(context == null ? void 0 : context.executeAction),
+      className: "inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium text-slate-500 bg-slate-100 hover:bg-slate-200 hover:text-slate-700 transition-colors disabled:opacity-50",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Upload, { className: "w-3.5 h-3.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: isOpening ? "Loading..." : "Upload File" })
+      ]
+    }
+  ) });
+}
+
+// src/components/TableBlock/fields/fieldRegistry.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var CURRENCY_SYMBOLS = {
+  USD: "$",
+  EUR: "\u20AC",
+  ILS: "\u20AA",
+  GBP: "\xA3"
+};
+function getCurrencySymbol(code) {
+  if (!code) return "";
+  return CURRENCY_SYMBOLS[code.toUpperCase()] || code;
+}
+function getRelationDisplayLabel(opt, column) {
+  if (!opt) return "\u05E8\u05E9\u05D5\u05DE\u05D4 \u05D7\u05E1\u05E8\u05D4";
+  const val = column.displayField && opt.data ? opt.data[column.displayField] : void 0;
+  if (val !== void 0 && val !== null && val !== "") {
+    return String(val);
+  }
+  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;
+      return false;
+    });
+    if (fallbackField) return String(opt.data[fallbackField]);
+  }
+  return "\u05E2\u05E8\u05DA \u05E8\u05D9\u05E7";
+}
+var FORM_INPUTS = {
+  CURRENCY: ({ value, column, onChange }) => {
+    const symbol = getCurrencySymbol(column.currencySymbol);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative w-full h-full", children: [
+      symbol && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute left-2 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none text-sm", children: symbol }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "input",
+        {
+          type: "number",
+          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 : "",
+          onChange: (e) => {
+            const val = e.target.value;
+            onChange(val === "" ? "" : Number(val));
+          }
+        }
+      )
+    ] });
+  },
+  TIME: ({ value, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "input",
+    {
+      type: "time",
+      className: "w-full h-8 px-2 bg-transparent focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-400 text-sm",
+      value: value || "",
+      onChange: (e) => onChange(e.target.value)
+    }
+  ),
+  LINK: ({ value, onChange }) => {
+    const [isEditing, setIsEditing] = import_react4.default.useState(false);
+    const label = (value == null ? void 0 : value.label) || "";
+    const url = (value == null ? void 0 : value.url) || "";
+    if (!isEditing) {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2 px-2 py-1 h-full w-full", children: [
+        url ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:underline flex-1 truncate", children: label || url }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-slate-400 italic flex-1 text-sm", children: "\u05E8\u05D9\u05E7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            onClick: () => setIsEditing(true),
+            className: "text-xs font-medium text-slate-400 hover:text-blue-500 p-1 rounded transition-colors",
+            title: "\u05E2\u05E8\u05D5\u05DA \u05E7\u05D9\u05E9\u05D5\u05E8",
+            children: "\u05E2\u05E8\u05D9\u05DB\u05D4"
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex gap-2 p-1 w-full min-w-[250px] items-center bg-white border border-blue-200 rounded shadow-sm z-10", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "input",
+        {
+          type: "text",
+          placeholder: "Label",
+          className: "flex-1 h-8 px-2 bg-transparent focus:outline-none text-sm border-r",
+          value: label,
+          onChange: (e) => onChange({ label: e.target.value, url })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "input",
+        {
+          type: "url",
+          placeholder: "URL",
+          className: "flex-1 h-8 px-2 bg-transparent focus:outline-none text-sm",
+          value: url,
+          onChange: (e) => onChange({ label, url: e.target.value })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          onClick: () => setIsEditing(false),
+          className: "text-xs font-medium text-green-600 hover:text-green-700 p-1 mx-1 rounded transition-colors",
+          title: "\u05E9\u05DE\u05D5\u05E8",
+          children: "\u05E9\u05DE\u05D5\u05E8"
+        }
+      )
+    ] });
+  },
+  BOOLEAN: ({ value, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex items-center justify-center w-full h-full p-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "input",
+    {
+      type: "checkbox",
+      checked: !!value,
+      onChange: (e) => onChange(e.target.checked),
+      className: "w-4 h-4 rounded border-slate-300 text-brand"
+    }
+  ) }),
+  GOOGLE_DRIVE_FILE: ({ value, onChange, context }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    DrivePickerCell,
+    {
+      value: value || null,
+      onChange,
+      tableName: context == null ? void 0 : context.tableName,
+      onMarkForDeletion: context == null ? void 0 : context.onMarkForDeletion,
+      context
+    }
+  ),
+  RELATION: ({ value, onChange, column, context }) => {
+    var _a;
+    const options = ((_a = context == null ? void 0 : context.relationOptions) == null ? void 0 : _a[column.name]) || [];
+    import_react4.default.useEffect(() => {
+      if (typeof value === "string" && value !== "" && options.length > 0) {
+        const isValidId = options.some((o) => String(o.id) === String(value));
+        if (!isValidId) {
+          const match = options.find(
+            (o) => String(getRelationDisplayLabel(o, column)).trim() === String(value).trim()
+          );
+          if (match) {
+            onChange(match.id);
+          } else {
+            onChange("");
+          }
+        }
+      }
+    }, [value, options, column, onChange]);
+    const processedOptions = options.map((opt) => __spreadProps(__spreadValues({}, opt), {
+      _displayLabel: getRelationDisplayLabel(opt, column)
+    }));
+    const validOptions = processedOptions.filter((o) => o._displayLabel !== "\u05D4\u05E2\u05E8\u05DA \u05E9\u05D1\u05E8\u05E9\u05D5\u05DE\u05D4 \u05D4\u05DE\u05E7\u05D5\u05E9\u05E8\u05EA \u05E0\u05E9\u05D0\u05E8 \u05E8\u05D9\u05E7");
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "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",
+        value: value !== void 0 && value !== null ? String(value) : "",
+        onChange: (e) => onChange(e.target.value),
+        onFocus: () => {
+          if (context == null ? void 0 : context.refetchRelation) {
+            context.refetchRelation(column.name);
+          }
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "", children: "\u05D1\u05D7\u05E8..." }),
+          validOptions.length > 0 ? validOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: opt.id, children: opt._displayLabel }, opt.id)) : options.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "empty_all", disabled: true, children: "\u05DB\u05DC \u05D4\u05E2\u05E8\u05DB\u05D9\u05DD \u05D1\u05D8\u05D1\u05DC\u05D4 \u05D4\u05DE\u05E7\u05D5\u05E9\u05E8\u05EA \u05E8\u05D9\u05E7\u05D9\u05DD" }) : null
+        ]
+      }
+    );
+  },
+  NUMBER: ({ value, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "input",
+    {
+      type: "number",
+      className: "w-full h-8 px-2 bg-transparent focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-400 text-sm",
+      value: value !== void 0 && value !== null ? value : "",
+      onChange: (e) => {
+        const val = e.target.value;
+        onChange(val === "" ? "" : Number(val));
+      }
+    }
+  ),
+  DEFAULT: ({ value, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "input",
+    {
+      type: "text",
+      className: "w-full h-8 px-2 bg-transparent focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-400 text-sm",
+      value: value !== void 0 && value !== null ? String(value) : "",
+      onChange: (e) => onChange(e.target.value)
+    }
+  )
+};
+
+// src/components/TableBlock/TableBlockClient.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function TableBlockClient({
+  data: initialRecords,
+  settings: schema,
+  executeAction,
+  emitEvent,
+  pageState,
+  isLoading,
+  isUpdating,
+  error,
+  isEmpty: isStateEmpty,
+  componentId,
+  orgId,
+  className = "",
+  "data-testid": dataTestId
+}) {
+  const { showError, addToast } = useToast();
+  const normalizeRecords = (records) => {
+    return (records || []).map((row) => {
+      var _c;
+      if (!row) return { id: "", data: {} };
+      const rowData = row.data && typeof row.data === "object" ? __spreadValues({}, row.data) : ((_a) => {
+        var _b = _a, { id } = _b, rest = __objRest(_b, ["id"]);
+        return rest;
+      })(row);
+      (_c = schema == null ? void 0 : schema.columns) == null ? void 0 : _c.forEach((col) => {
+        var _a;
+        if (rowData[col.name] === void 0 && col.defaultValue !== void 0 && col.defaultValue !== null) {
+          let initialValue = col.defaultValue;
+          const typeUpper = (_a = col.type) == null ? void 0 : _a.toUpperCase();
+          if (typeUpper === "CURRENCY" || typeUpper === "NUMBER") {
+            initialValue = parseFloat(initialValue);
+            if (isNaN(initialValue)) initialValue = null;
+          } else if (typeUpper === "BOOLEAN") {
+            initialValue = initialValue === "true" || initialValue === true;
+          }
+          rowData[col.name] = initialValue;
+        }
+      });
+      return __spreadProps(__spreadValues({}, row), { id: String(row.id || ""), data: rowData });
+    });
+  };
+  const [localColumns, setLocalColumns] = (0, import_react5.useState)(() => (schema == null ? void 0 : schema.columns) || []);
+  (0, import_react5.useEffect)(() => {
+    if ((schema == null ? void 0 : schema.columns) && schema.columns.length > 0) {
+      setLocalColumns(schema.columns);
+    }
+  }, [schema == null ? void 0 : schema.columns]);
+  const [dirty, setDirty] = (0, import_react5.useState)({ added: [], modified: {}, deleted: [] });
+  const dirtyRef = (0, import_react5.useRef)(dirty);
+  (0, import_react5.useEffect)(() => {
+    dirtyRef.current = dirty;
+  }, [dirty]);
+  const mergeWithDirty = (0, import_react5.useCallback)((baseRecords) => {
+    const { added, modified, deleted } = dirtyRef.current;
+    const nonDeleted = (baseRecords || []).filter((r) => !deleted.includes(r.id));
+    const modifiedRecords = nonDeleted.map((r) => {
+      if (modified[r.id]) {
+        return __spreadProps(__spreadValues({}, r), { data: __spreadValues(__spreadValues({}, r.data), modified[r.id]) });
+      }
+      return r;
+    });
+    const baseIds = new Set(modifiedRecords.map((r) => r.id));
+    const uniqueAdded = added.filter((r) => !baseIds.has(r.id));
+    return [...uniqueAdded, ...modifiedRecords];
+  }, []);
+  const [data, setData] = (0, import_react5.useState)(() => normalizeRecords(initialRecords));
+  (0, import_react5.useEffect)(() => {
+    if (initialRecords) {
+      setData(mergeWithDirty(normalizeRecords(initialRecords)));
+    }
+  }, [initialRecords, mergeWithDirty]);
+  const isEqualValues = (a, b) => {
+    if (a === b) return true;
+    if ((a === null || a === void 0 || a === "") && (b === null || b === void 0 || b === "")) return true;
+    if (typeof a === "number" && typeof b === "string" && !isNaN(Number(b)) && Number(b) === a) return true;
+    if (typeof b === "number" && typeof a === "string" && !isNaN(Number(a)) && Number(a) === b) return true;
+    if (typeof a === "object" && typeof b === "object" && a !== null && b !== null) {
+      return JSON.stringify(a) === JSON.stringify(b);
+    }
+    return false;
+  };
+  const [baseRecordsMap, setBaseRecordsMap] = (0, import_react5.useState)(() => {
+    const map = /* @__PURE__ */ new Map();
+    (normalizeRecords(initialRecords) || []).forEach((r) => map.set(r.id, __spreadValues({}, r.data)));
+    return map;
+  });
+  (0, import_react5.useEffect)(() => {
+    if (initialRecords && initialRecords.length > 0) {
+      const map = /* @__PURE__ */ new Map();
+      (normalizeRecords(initialRecords) || []).forEach((r) => map.set(r.id, __spreadValues({}, r.data)));
+      setBaseRecordsMap(map);
+    }
+  }, [initialRecords]);
+  (0, import_react5.useEffect)(() => {
+    const tableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.id) || (schema == null ? void 0 : schema.tableId);
+    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));
+          }
+        }
+      }).catch((err) => {
+        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]);
+  (0, import_react5.useEffect)(() => {
+    if (error) {
+      showError(error, "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E8\u05DB\u05D9\u05D1");
+    }
+  }, [error, showError]);
+  const [searchQuery, setSearchQuery] = (0, import_react5.useState)("");
+  const [selectedIds, setSelectedIds] = (0, import_react5.useState)(/* @__PURE__ */ new Set());
+  const [pendingDeletions, setPendingDeletions] = (0, import_react5.useState)([]);
+  const [isSaving, setIsSaving] = (0, import_react5.useState)(false);
+  const [isSaveSuccess, setIsSaveSuccess] = (0, import_react5.useState)(false);
+  const [relationOptions, setRelationOptions] = (0, import_react5.useState)({});
+  const schemaColsString = (0, import_react5.useMemo)(() => JSON.stringify(localColumns || []), [localColumns]);
+  const refetchRelation = (0, import_react5.useCallback)(async (colName) => {
+    var _a;
+    let parsedCols = [];
+    try {
+      parsedCols = JSON.parse(schemaColsString);
+    } catch (e) {
+    }
+    const col = parsedCols.find((c) => c.name === colName);
+    if (!col || ((_a = col.type) == null ? void 0 : _a.toUpperCase()) !== "RELATION" || !col.referencedTableId) return;
+    try {
+      if (executeAction) {
+        const options = await executeAction("FETCH_RELATION", { referencedTableId: col.referencedTableId });
+        if (options && Array.isArray(options)) {
+          setRelationOptions((prev) => __spreadProps(__spreadValues({}, prev), { [colName]: options }));
+        }
+      }
+    } catch (err) {
+      console.warn(`[TableBlock] Could not fetch relation options for column ${colName}:`, err);
+    }
+  }, [schemaColsString, executeAction]);
+  (0, import_react5.useEffect)(() => {
+    let parsedCols = [];
+    try {
+      parsedCols = JSON.parse(schemaColsString);
+    } catch (e) {
+    }
+    const relationCols = parsedCols.filter((c) => {
+      var _a;
+      return ((_a = c.type) == null ? void 0 : _a.toUpperCase()) === "RELATION";
+    }) || [];
+    relationCols.forEach((col) => {
+      refetchRelation(col.name);
+    });
+  }, [schemaColsString, refetchRelation]);
+  const filteredColumns = (0, import_react5.useMemo)(() => {
+    const systemFields = ["_id", "createdAt", "updatedAt", "orgId", "tableId"];
+    return (localColumns || []).filter((col) => !systemFields.includes(col.name));
+  }, [localColumns]);
+  const generateTempId = () => `temp_${Math.random().toString(36).substr(2, 9)}`;
+  const handleAddRow = () => {
+    const defaultData = {};
+    (localColumns || []).forEach((col) => {
+      var _a;
+      const typeUpper = (_a = col.type) == null ? void 0 : _a.toUpperCase();
+      let initialValue = col.defaultValue;
+      if (initialValue !== void 0 && initialValue !== null && initialValue !== "") {
+        if (typeUpper === "CURRENCY" || typeUpper === "NUMBER") {
+          initialValue = parseFloat(initialValue);
+          if (isNaN(initialValue)) initialValue = null;
+        } else if (typeUpper === "BOOLEAN") {
+          initialValue = initialValue === "true" || initialValue === true;
+        }
+        defaultData[col.name] = initialValue;
+      } else {
+        if (typeUpper === "NUMBER" || typeUpper === "CURRENCY") {
+          defaultData[col.name] = 0;
+        } else if (typeUpper === "BOOLEAN") {
+          defaultData[col.name] = false;
+        } else {
+          defaultData[col.name] = "";
+        }
+      }
+    });
+    const newRow = { id: generateTempId(), data: defaultData };
+    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
+    ));
+    const isAdded = dirty.added.some((r) => r.id === rowId);
+    if (isAdded) {
+      setDirty((prev) => __spreadProps(__spreadValues({}, prev), {
+        added: prev.added.map(
+          (r) => r.id === rowId ? __spreadProps(__spreadValues({}, r), { data: __spreadProps(__spreadValues({}, r.data), { [colName]: value }) }) : r
+        )
+      }));
+    } else {
+      const origData = baseRecordsMap.get(rowId) || {};
+      const origValue = origData[colName];
+      setDirty((prev) => {
+        const currentMods = __spreadValues({}, prev.modified[rowId] || {});
+        if (isEqualValues(value, origValue)) {
+          delete currentMods[colName];
+        } else {
+          currentMods[colName] = value;
+        }
+        const nextModified = __spreadValues({}, prev.modified);
+        if (Object.keys(currentMods).length === 0) {
+          delete nextModified[rowId];
+        } else {
+          nextModified[rowId] = currentMods;
+        }
+        return __spreadProps(__spreadValues({}, prev), {
+          modified: nextModified
+        });
+      });
+    }
+  };
+  const toggleSelectAll = (checked) => {
+    const nextSelected = checked ? new Set(filteredData.map((r) => r.id)) : /* @__PURE__ */ new Set();
+    setSelectedIds(nextSelected);
+    if (emitEvent) {
+      emitEvent("SELECTION_CHANGE", { selectedIds: Array.from(nextSelected), componentId });
+    }
+  };
+  const toggleSelectRow = (rowId, checked) => {
+    const newSelected = new Set(selectedIds);
+    if (checked) newSelected.add(rowId);
+    else newSelected.delete(rowId);
+    setSelectedIds(newSelected);
+    if (emitEvent) {
+      emitEvent("SELECTION_CHANGE", { selectedIds: Array.from(newSelected), componentId });
+    }
+  };
+  const handleDeleteSelected = () => {
+    const idsToDelete = Array.from(selectedIds);
+    if (idsToDelete.length === 0) return;
+    const filesToDelete = [];
+    const driveCols = (localColumns || []).filter((c) => {
+      var _a;
+      return ((_a = c.type) == null ? void 0 : _a.toUpperCase()) === "GOOGLE_DRIVE_FILE";
+    });
+    if (driveCols.length > 0) {
+      idsToDelete.forEach((id) => {
+        const row = data.find((r) => r.id === id);
+        if (row) {
+          driveCols.forEach((col) => {
+            const fileObj = row.data[col.name];
+            if (fileObj && fileObj.fileId) {
+              filesToDelete.push(fileObj.fileId);
+            }
+          });
+        }
+      });
+    }
+    if (filesToDelete.length > 0) {
+      setPendingDeletions((prev) => [...prev, ...filesToDelete]);
+    }
+    setData((prev) => prev.filter((row) => !idsToDelete.includes(row.id)));
+    setDirty((prev) => {
+      const newAdded = prev.added.filter((r) => !idsToDelete.includes(r.id));
+      const newModified = __spreadValues({}, prev.modified);
+      const newDeleted = [...prev.deleted];
+      idsToDelete.forEach((id) => {
+        if (!prev.added.some((r) => r.id === id) && id.length === 24 && !id.startsWith("temp_")) {
+          newDeleted.push(id);
+        }
+        delete newModified[id];
+      });
+      return { added: newAdded, modified: newModified, deleted: newDeleted };
+    });
+    setSelectedIds(/* @__PURE__ */ new Set());
+  };
+  const formatPayload = (payload) => {
+    const formatted = {};
+    (localColumns || []).forEach((col) => {
+      var _a;
+      if (["_id", "id", "createdAt", "updatedAt", "orgId", "tableId", "isSelected"].includes(col.name)) return;
+      let val = payload[col.name];
+      if (val !== void 0) {
+        if (val === null) {
+          formatted[col.name] = null;
+        } else {
+          if (((_a = col.type) == null ? void 0 : _a.toUpperCase()) === "NUMBER") {
+            val = val === "" ? 0 : Number(val);
+            if (isNaN(val)) val = 0;
+          }
+          formatted[col.name] = val;
+        }
+      }
+    });
+    return formatted;
+  };
+  const hasChanges = dirty.added.length > 0 || Object.keys(dirty.modified).length > 0 || dirty.deleted.length > 0;
+  const handleSave = async () => {
+    var _a;
+    if (!hasChanges) {
+      return;
+    }
+    const systemFields = ["_id", "id", "createdAt", "updatedAt", "orgId", "tableId", "isSelected"];
+    const requiredCols = (localColumns || []).filter((c) => c.isRequired && !systemFields.includes(c.name));
+    const isEmpty = (val) => val === void 0 || val === null || val === "";
+    for (const col of requiredCols) {
+      for (const row of dirty.added) {
+        if (isEmpty(row.data[col.name])) {
+          showError(`\u05E9\u05D2\u05D9\u05D0\u05EA \u05D5\u05DC\u05D9\u05D3\u05E6\u05D9\u05D4: \u05D4\u05E9\u05D3\u05D4 ${col.name} \u05D4\u05D5\u05D0 \u05D7\u05D5\u05D1\u05D4.`, "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05D5\u05D5\u05DC\u05D9\u05D3\u05E6\u05D9\u05D4");
+          return;
+        }
+      }
+      for (const [rowId, mods] of Object.entries(dirty.modified)) {
+        const rowData = ((_a = data.find((r) => r.id === rowId)) == null ? void 0 : _a.data) || {};
+        const mergedData = __spreadValues(__spreadValues({}, rowData), mods);
+        if (isEmpty(mergedData[col.name])) {
+          showError(`\u05E9\u05D2\u05D9\u05D0\u05EA \u05D5\u05DC\u05D9\u05D3\u05E6\u05D9\u05D4: \u05D4\u05E9\u05D3\u05D4 ${col.name} \u05D4\u05D5\u05D0 \u05D7\u05D5\u05D1\u05D4.`, "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05D5\u05D5\u05DC\u05D9\u05D3\u05E6\u05D9\u05D4");
+          return;
+        }
+      }
+    }
+    setIsSaving(true);
+    try {
+      if (!executeAction) {
+        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);
+      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;
+      }
+      if (dirty.added.length > 0) {
+        const payload = dirty.added.map((row) => formatPayload(row.data));
+        await executeAction("CREATE_RECORD", { tableId: targetTableId, tableMetaId: targetTableId, records: payload });
+      }
+      if (Object.keys(dirty.modified).length > 0) {
+        const payload = {};
+        for (const [id, modData] of Object.entries(dirty.modified)) {
+          payload[id] = formatPayload(modData);
+        }
+        await executeAction("UPDATE_RECORD", { tableId: targetTableId, tableMetaId: targetTableId, modifications: payload });
+      }
+      if (dirty.deleted.length > 0) {
+        await executeAction("DELETE_RECORD", { tableId: targetTableId, tableMetaId: targetTableId, ids: dirty.deleted });
+      }
+      if (pendingDeletions.length > 0) {
+        for (const fileId of pendingDeletions) {
+          await executeAction("DELETE_DRIVE_FILE", { fileId }).catch(() => {
+          });
+        }
+        setPendingDeletions([]);
+      }
+      setBaseRecordsMap((prev) => {
+        const next = new Map(prev);
+        dirty.added.forEach((r) => next.set(r.id, __spreadValues({}, r.data)));
+        Object.entries(dirty.modified).forEach(([id, mods]) => {
+          const existing = next.get(id) || {};
+          next.set(id, __spreadValues(__spreadValues({}, existing), mods));
+        });
+        dirty.deleted.forEach((id) => next.delete(id));
+        return next;
+      });
+      setDirty({ added: [], modified: {}, deleted: [] });
+      setIsSaveSuccess(true);
+      setTimeout(() => {
+        setIsSaveSuccess(false);
+      }, 2500);
+    } catch (err) {
+      setIsSaveSuccess(false);
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      showError(errorMsg, "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E9\u05DE\u05D9\u05E8\u05EA \u05D4\u05E9\u05D9\u05E0\u05D5\u05D9\u05D9\u05DD");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const filteredData = (0, import_react5.useMemo)(() => {
+    if (!searchQuery) return data;
+    const lowerQuery = searchQuery.toLowerCase();
+    return data.filter(
+      (row) => (row == null ? void 0 : row.data) && Object.values(row.data).some(
+        (val) => String(val != null ? val : "").toLowerCase().includes(lowerQuery)
+      )
+    );
+  }, [data, searchQuery]);
+  const isUpdatingActive = Boolean(isUpdating || isSaving);
+  const errorMessage = error ? typeof error === "string" ? error : error.message || String(error) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      id: componentId,
+      "data-testid": dataTestId || (componentId ? `table-block-${componentId}` : void 0),
+      className: `flex flex-col w-full bg-white border border-slate-200 rounded-xl shadow-xs overflow-hidden ${className}`,
+      dir: "rtl",
+      children: [
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "p-3 bg-rose-50 border-b border-rose-200 text-rose-700 text-sm flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-4 h-4 text-rose-500 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: errorMessage })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3 p-3.5 sm:p-4 bg-slate-50 border-b border-slate-200", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-wrap items-center gap-2.5", children: [
+            ((schema == null ? void 0 : schema.title) || (schema == null ? void 0 : schema.name)) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "font-bold text-slate-800 text-sm sm:text-base border-l border-slate-300 pl-3 ml-1", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: schema.title || schema.name }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                onClick: handleAddRow,
+                disabled: isLoading || isUpdatingActive,
+                className: "w-9 h-9 bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white rounded-lg shadow-xs flex items-center justify-center transition-all disabled:opacity-40 disabled:pointer-events-none cursor-pointer",
+                title: "\u05D4\u05D5\u05E1\u05E3 \u05E9\u05D5\u05E8\u05D4 \u05D7\u05D3\u05E9\u05D4",
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-4.5 h-4.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M12 4v16m8-8H4" }) })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "button",
+              {
+                onClick: handleDeleteSelected,
+                disabled: isLoading || isUpdatingActive || selectedIds.size === 0,
+                className: "w-9 h-9 bg-rose-50 hover:bg-rose-100 border border-rose-200 text-rose-700 rounded-lg shadow-2xs flex items-center justify-center relative transition-all disabled:opacity-40 disabled:pointer-events-none cursor-pointer",
+                title: "\u05DE\u05D7\u05E7 \u05E9\u05D5\u05E8\u05D5\u05EA \u05E0\u05D1\u05D7\u05E8\u05D5\u05EA",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-4.5 h-4.5 text-rose-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
+                  selectedIds.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "absolute -top-1.5 -right-1.5 bg-rose-600 text-white min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-bold flex items-center justify-center shadow-xs", children: selectedIds.size })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-5 w-px bg-slate-300 mx-1 hidden sm:block" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative flex-1 sm:w-64 max-w-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "input",
+                {
+                  placeholder: "\u05D7\u05D9\u05E4\u05D5\u05E9 \u05D1\u05E8\u05E9\u05D5\u05DE\u05D5\u05EA...",
+                  value: searchQuery,
+                  onChange: (e) => setSearchQuery(e.target.value),
+                  disabled: isLoading,
+                  className: "w-full h-9 px-3 pr-9 text-xs border border-slate-300 rounded-lg bg-white shadow-2xs focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 text-slate-800 disabled:opacity-50"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-4 h-4 text-slate-400 absolute right-2.5 top-2.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-3", children: [
+            isUpdatingActive ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "text-xs text-blue-600 font-semibold flex items-center gap-1.5 bg-blue-50 border border-blue-200 px-3 py-1.5 rounded-lg animate-pulse", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "w-2 h-2 rounded-full bg-blue-500 inline-block" }),
+              "\u05DE\u05E2\u05D3\u05DB\u05DF..."
+            ] }) : isSaveSuccess ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "text-xs text-emerald-700 font-semibold flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 px-3 py-1.5 rounded-lg animate-in fade-in duration-200", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-4 h-4 text-emerald-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M5 13l4 4L19 7" }) }),
+              "\u05E2\u05D5\u05D3\u05DB\u05DF \u05D1\u05D4\u05E6\u05DC\u05D7\u05D4"
+            ] }) : hasChanges ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-xs font-semibold text-amber-700 animate-in fade-in", children: "\u05E9\u05D9\u05E0\u05D5\u05D9\u05D9\u05DD \u05E9\u05DC\u05D0 \u05E0\u05E9\u05DE\u05E8\u05D5" }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                onClick: handleSave,
+                disabled: isUpdatingActive || isLoading || !hasChanges,
+                className: `h-9 px-4 text-xs font-bold rounded-lg shadow-2xs transition-all flex items-center justify-center cursor-pointer ${hasChanges && !isUpdatingActive && !isLoading ? "bg-brand hover:bg-brand-hover active:bg-[#00897b] text-white shadow-teal-500/20" : "opacity-50 grayscale bg-slate-200 text-slate-400 cursor-not-allowed"}`,
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: isUpdatingActive ? "\u05E9\u05D5\u05DE\u05E8..." : "\u05E9\u05DE\u05D9\u05E8\u05EA \u05E9\u05D9\u05E0\u05D5\u05D9\u05D9\u05DD" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "overflow-x-auto relative", children: [
+          isLoading && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "absolute inset-0 bg-white/80 backdrop-blur-xs z-20 flex flex-col items-center justify-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-6 h-6 border-2 border-brand border-t-transparent rounded-full animate-spin" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-sm font-medium text-slate-600", children: "\u05D8\u05D5\u05E2\u05DF \u05E0\u05EA\u05D5\u05E0\u05D9\u05DD..." })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("table", { className: "w-full text-sm text-right border-collapse", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("thead", { className: "bg-slate-100/80 text-slate-700 sticky top-0 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("th", { className: "border-b border-l border-slate-200 p-2.5 w-10 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: filteredData.length > 0 && selectedIds.size === filteredData.length,
+                  onChange: (e) => toggleSelectAll(e.target.checked),
+                  disabled: isLoading || isUpdatingActive,
+                  className: "w-4 h-4 rounded border-slate-300 text-brand"
+                }
+              ) }),
+              filteredColumns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("th", { className: "border-b border-l border-slate-200 px-4 py-2.5 font-semibold text-slate-700 whitespace-nowrap min-w-[140px]", children: col.name }, col.name))
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { className: "bg-white", children: (isStateEmpty || filteredData.length === 0) && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { colSpan: filteredColumns.length + 1, className: "text-center py-12 text-slate-400", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col items-center justify-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-8 h-8 text-slate-300", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "\u05D0\u05D9\u05DF \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05DC\u05D4\u05E6\u05D2\u05D4." })
+            ] }) }) }) : filteredData.map((row) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { className: "hover:bg-blue-50/30 transition-colors group", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: "border-b border-l border-slate-200 p-1.5 text-center bg-white group-hover:bg-transparent", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: selectedIds.has(row.id),
+                  onChange: (e) => toggleSelectRow(row.id, e.target.checked),
+                  disabled: isLoading || isUpdatingActive,
+                  className: "w-4 h-4 rounded border-slate-300 text-brand"
+                }
+              ) }),
+              filteredColumns.map((col) => {
+                var _a;
+                const colType = ((_a = col.type) == null ? void 0 : _a.toUpperCase()) || "DEFAULT";
+                const InputComponent = FORM_INPUTS[colType] || FORM_INPUTS.DEFAULT;
+                let value = (row == null ? void 0 : row.data) ? row.data[col.name] : void 0;
+                if (value === void 0 && col.defaultValue !== void 0) {
+                  value = colType === "CURRENCY" || colType === "NUMBER" ? parseFloat(col.defaultValue) : col.defaultValue;
+                  if (colType === "CURRENCY" || colType === "NUMBER") {
+                    if (isNaN(value)) value = null;
+                  }
+                }
+                if (value === void 0) value = null;
+                return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: "border-b border-l border-slate-200 p-0 relative", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  InputComponent,
+                  {
+                    value,
+                    column: col,
+                    rowId: row.id,
+                    onChange: (v) => handleCellChange(row.id, col.name, v),
+                    context: {
+                      tableName: (schema == null ? void 0 : schema.name) || (schema == null ? void 0 : schema.tableName) || (schema == null ? void 0 : schema.title) || (schema == null ? void 0 : schema.id) || "Table",
+                      onMarkForDeletion: (fileId) => setPendingDeletions((prev) => [...prev, fileId]),
+                      relationOptions,
+                      refetchRelation,
+                      executeAction,
+                      emitEvent,
+                      pageState,
+                      componentId,
+                      orgId
+                    }
+                  }
+                ) }, col.name);
+              })
+            ] }, row.id)) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/TableBlock/TableBlock.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function TableBlock(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TableBlockClient, __spreadValues({}, props));
+}
+
+// src/registry.ts
+var UNIVERSE_COMPONENTS = {
+  TABLE: TableBlock
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  TableBlock,
+  ToastContext,
+  ToastProvider,
+  UNIVERSE_COMPONENTS,
   cn,
-  isUiLibraryReady
+  useToast
 });