@universe-platform/ui 0.1.0-beta.12 → 0.1.0-beta.15

package/dist/index.mjs

@@ -99,6 +99,30 @@ function getDeterministicPastelBadge(key) {
   return PASTEL_PALETTES[index];
 }
 
+// src/utils/permissions.ts
+function getRolePermissions(role) {
+  if (role === "VIEWER" || !role) {
+    return {
+      permissions: {
+        canCreate: false,
+        canRead: true,
+        canUpdate: false,
+        canDelete: false
+      },
+      readOnly: true
+    };
+  }
+  return {
+    permissions: {
+      canCreate: true,
+      canRead: true,
+      canUpdate: true,
+      canDelete: true
+    },
+    readOnly: false
+  };
+}
+
 // ../shared/src/columns.ts
 var COLUMN_TYPES = [
   "STRING",
@@ -376,7 +400,7 @@ import React7 from "react";
 import React2, { useState as useState2, useEffect } from "react";
 import { FileText, Upload, X as X2 } from "lucide-react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function DrivePickerCell({ value, onChange, tableName, column, rowId, onMarkForDeletion, context }) {
+function DrivePickerCell({ value, onChange, tableName, column, rowId, onMarkForDeletion, context, readOnly = false }) {
   const [isOpening, setIsOpening] = useState2(false);
   const { showError } = useToast();
   const cellContextId = React2.useMemo(() => {
@@ -477,29 +501,33 @@ function DrivePickerCell({ value, onChange, tableName, column, rowId, onMarkForD
     const updated = fileList.filter((_, idx) => idx !== indexToRemove);
     onChange(updated);
   };
-  const renderUploadButton = () => /* @__PURE__ */ jsx2("div", { className: "flex items-center w-full h-8 px-2", children: /* @__PURE__ */ jsxs2(
-    "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__ */ jsx2(Upload, { className: "w-3.5 h-3.5" }),
-        /* @__PURE__ */ jsx2("span", { children: isOpening ? "Loading..." : "Upload File" })
-      ]
-    }
-  ) });
+  const renderUploadButton = (iconOnly) => {
+    if (readOnly) return null;
+    return /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        onClick: openUploadPopup,
+        disabled: isOpening || !(context == null ? void 0 : context.executeAction),
+        className: `inline-flex items-center justify-center gap-1.5 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 ${iconOnly ? "w-7 h-7 shrink-0" : "px-2 py-1"}`,
+        title: "Upload File",
+        children: [
+          /* @__PURE__ */ jsx2(Upload, { className: "w-3.5 h-3.5 shrink-0" }),
+          !iconOnly && /* @__PURE__ */ jsx2("span", { className: "truncate", children: isOpening ? "Loading..." : "Upload File" })
+        ]
+      }
+    );
+  };
   if (fileList.length > 0) {
-    return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col w-full py-1 gap-1", children: [
-      fileList.map((file, idx) => /* @__PURE__ */ jsxs2("div", { className: "flex items-center w-full h-8 px-2 gap-1", children: [
+    return /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap items-center w-full py-1 px-2 gap-1.5", children: [
+      fileList.map((file, idx) => /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1 max-w-full", children: [
         /* @__PURE__ */ jsxs2(
           "a",
           {
             href: file.fileUrl || file.url,
             target: "_blank",
             rel: "noopener noreferrer",
-            className: "inline-flex items-center gap-1.5 max-w-[calc(100%-24px)] px-2 py-1 rounded-md text-xs font-medium text-blue-700 bg-blue-50 hover:bg-blue-100 transition-colors truncate",
+            className: `inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium text-blue-700 bg-blue-50 hover:bg-blue-100 transition-colors truncate ${readOnly ? "max-w-full" : "max-w-[calc(100%-28px)]"}`,
             title: file.fileName || "Open file",
             children: [
               /* @__PURE__ */ jsx2(FileText, { className: "w-3.5 h-3.5 shrink-0" }),
@@ -507,21 +535,24 @@ function DrivePickerCell({ value, onChange, tableName, column, rowId, onMarkForD
             ]
           }
         ),
-        /* @__PURE__ */ jsx2(
+        !readOnly && /* @__PURE__ */ jsx2(
           "button",
           {
             type: "button",
             onClick: () => handleRemoveFile(idx),
-            className: "shrink-0 p-0.5 rounded hover:bg-rose-100 text-slate-400 hover:text-rose-500 transition-colors",
+            className: "shrink-0 inline-flex items-center justify-center w-6 h-6 rounded hover:bg-rose-100 text-slate-400 hover:text-rose-500 transition-colors",
             title: "Remove file",
-            children: /* @__PURE__ */ jsx2(X2, { className: "w-3.5 h-3.5" })
+            children: /* @__PURE__ */ jsx2(X2, { className: "w-3.5 h-3.5 shrink-0" })
           }
         )
       ] }, file.fileId || idx)),
-      renderUploadButton()
+      renderUploadButton(true)
     ] });
   }
-  return renderUploadButton();
+  if (readOnly) {
+    return /* @__PURE__ */ jsx2("span", { className: "px-2 py-1 flex items-center h-full text-slate-300 text-xs italic", children: "-" });
+  }
+  return /* @__PURE__ */ jsx2("div", { className: "flex items-center w-full h-8 px-2", children: renderUploadButton(false) });
 }
 
 // src/components/TableBlock/fields/DatePickerCell.tsx
@@ -2088,11 +2119,19 @@ function getCurrencySymbol(code) {
   return CURRENCY_SYMBOLS[code.toUpperCase()] || code;
 }
 var FORM_INPUTS = {
-  DATE: ({ value, onChange, column }) => /* @__PURE__ */ jsx7(DatePickerCell, { value, onChange, column }),
-  CURRENCY: ({ value, column, onChange }) => {
+  DATE: ({ value, onChange, column, readOnly }) => /* @__PURE__ */ jsx7(DatePickerCell, { value, onChange, column, readOnly }),
+  CURRENCY: ({ value, column, onChange, readOnly }) => {
     var _a;
     const symbol = getCurrencySymbol((_a = column.config) == null ? void 0 : _a.currencySymbol);
     const [isFocused, setIsFocused] = React7.useState(false);
+    if (readOnly) {
+      const num = Number(value);
+      const formattedValue = value !== null && value !== void 0 && !isNaN(num) ? new Intl.NumberFormat("en-US").format(num) : "";
+      return /* @__PURE__ */ jsxs7("span", { className: "px-2 py-1 flex items-center h-full text-sm select-text truncate", children: [
+        symbol && /* @__PURE__ */ jsx7("span", { className: "text-slate-400 mr-1", children: symbol }),
+        formattedValue
+      ] });
+    }
     const displayValue = !isFocused && value !== void 0 && value !== null && !isNaN(Number(value)) ? new Intl.NumberFormat("en-US").format(Number(value)) : value !== void 0 && value !== null ? value : "";
     return /* @__PURE__ */ jsxs7("div", { className: "relative w-full h-full", children: [
       symbol && /* @__PURE__ */ jsx7("span", { className: "absolute left-2 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none text-sm", children: symbol }),
@@ -2113,18 +2152,19 @@ var FORM_INPUTS = {
       )
     ] });
   },
-  TIME: ({ value, onChange, column }) => /* @__PURE__ */ jsx7(TimePickerCell, { value, onChange, column }),
-  LINK: ({ value, onChange, column }) => /* @__PURE__ */ jsx7(LinkPickerCell, { value, onChange, column }),
-  BOOLEAN: ({ value, onChange }) => /* @__PURE__ */ jsx7("div", { className: "flex items-center justify-center w-full h-full p-2", children: /* @__PURE__ */ jsx7(
+  TIME: ({ value, onChange, column, readOnly }) => /* @__PURE__ */ jsx7(TimePickerCell, { value, onChange, column, readOnly }),
+  LINK: ({ value, onChange, column, readOnly }) => /* @__PURE__ */ jsx7(LinkPickerCell, { value, onChange, column, readOnly }),
+  BOOLEAN: ({ value, onChange, readOnly }) => /* @__PURE__ */ jsx7("div", { className: "flex items-center justify-center w-full h-full p-2", children: /* @__PURE__ */ jsx7(
     "input",
     {
       type: "checkbox",
       checked: !!value,
+      disabled: readOnly,
       onChange: (e) => onChange(e.target.checked),
-      className: "w-4 h-4 rounded border-slate-300 text-brand"
+      className: `w-4 h-4 rounded border-slate-300 text-brand ${readOnly ? "cursor-not-allowed opacity-70" : "cursor-pointer"}`
     }
   ) }),
-  GOOGLE_DRIVE_FILE: ({ value, onChange, column, rowId, context }) => /* @__PURE__ */ jsx7(
+  GOOGLE_DRIVE_FILE: ({ value, onChange, column, rowId, context, readOnly }) => /* @__PURE__ */ jsx7(
     DrivePickerCell,
     {
       value: value || [],
@@ -2133,34 +2173,60 @@ var FORM_INPUTS = {
       rowId,
       tableName: context == null ? void 0 : context.tableName,
       onMarkForDeletion: context == null ? void 0 : context.onMarkForDeletion,
-      context
+      context,
+      readOnly
     }
   ),
-  RELATION: ({ value, onChange, column, context, rowId }) => /* @__PURE__ */ jsx7(
+  RELATION: ({ value, onChange, column, context, rowId, readOnly }) => /* @__PURE__ */ jsx7(
     RelationPickerCell,
     {
       value,
       onChange,
       column,
       context,
-      rowId
+      rowId,
+      readOnly
     }
   ),
-  NUMBER: ({ value, onChange }) => /* @__PURE__ */ jsx7(
-    "input",
-    {
-      type: "number",
-      className: "w-full h-8 px-2 bg-transparent focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-400 text-sm",
-      value: value !== void 0 && value !== null ? value : "",
-      onChange: (e) => {
-        const val = e.target.value;
-        onChange(val === "" ? null : Number(val));
-      }
+  NUMBER: ({ value, onChange, readOnly }) => {
+    if (readOnly) {
+      return /* @__PURE__ */ jsx7("span", { className: "px-2 py-1 flex items-center h-full text-sm select-text truncate", children: value !== void 0 && value !== null ? value : "" });
     }
-  ),
-  PHONE: ({ value, onChange, column }) => {
+    return /* @__PURE__ */ jsx7(
+      "input",
+      {
+        type: "number",
+        className: "w-full h-8 px-2 bg-transparent focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-400 text-sm",
+        value: value !== void 0 && value !== null ? value : "",
+        onChange: (e) => {
+          const val = e.target.value;
+          onChange(val === "" ? null : Number(val));
+        }
+      }
+    );
+  },
+  PHONE: ({ value, onChange, column, readOnly }) => {
     var _a;
     const enableWhatsApp = (_a = column == null ? void 0 : column.config) == null ? void 0 : _a.enableWhatsApp;
+    const formatted = value ? formatPhoneDisplay(String(value)) : "";
+    if (readOnly) {
+      return /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between w-full h-full px-2 gap-1.5 overflow-hidden", children: [
+        /* @__PURE__ */ jsx7("span", { className: "truncate text-sm", dir: "ltr", children: formatted }),
+        enableWhatsApp && value && /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            className: "text-emerald-500 cursor-pointer hover:opacity-80 transition-opacity shrink-0 p-1 rounded hover:bg-emerald-50",
+            title: "\u05E4\u05EA\u05D9\u05D7\u05EA \u05D5\u05D5\u05D0\u05D8\u05E1\u05D0\u05E4",
+            onClick: (e) => {
+              e.stopPropagation();
+              openWhatsAppChat(String(value));
+            },
+            children: /* @__PURE__ */ jsx7("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a5.816 5.816 0 00-.571-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) })
+          }
+        )
+      ] });
+    }
     return /* @__PURE__ */ jsxs7("div", { className: "flex items-center w-full h-full px-2 gap-1.5 overflow-hidden", children: [
       /* @__PURE__ */ jsx7(
         "input",
@@ -2187,85 +2253,9 @@ var FORM_INPUTS = {
       )
     ] });
   },
-  GOOGLE_CONTACT: ({ value, column, rowId, onChange, context }) => {
+  GOOGLE_CONTACT: ({ value, column, rowId, onChange, context, readOnly }) => {
     const [isSyncing, setIsSyncing] = React7.useState(false);
     const { addToast } = useToast();
-    const googleClientIdRef = React7.useRef(null);
-    const ensureGisScript = React7.useCallback(() => {
-      return new Promise((resolve, reject) => {
-        var _a, _b, _c;
-        if ((_c = (_b = (_a = window.google) == null ? void 0 : _a.accounts) == null ? void 0 : _b.oauth2) == null ? void 0 : _c.initTokenClient) {
-          resolve();
-          return;
-        }
-        if (document.querySelector('script[src*="accounts.google.com/gsi/client"]')) {
-          const waitForLoad = setInterval(() => {
-            var _a2, _b2, _c2;
-            if ((_c2 = (_b2 = (_a2 = window.google) == null ? void 0 : _a2.accounts) == null ? void 0 : _b2.oauth2) == null ? void 0 : _c2.initTokenClient) {
-              clearInterval(waitForLoad);
-              resolve();
-            }
-          }, 100);
-          setTimeout(() => {
-            clearInterval(waitForLoad);
-            reject(new Error("GIS script load timeout"));
-          }, 1e4);
-          return;
-        }
-        const script = document.createElement("script");
-        script.src = "https://accounts.google.com/gsi/client";
-        script.async = true;
-        script.onload = () => resolve();
-        script.onerror = () => reject(new Error("Failed to load Google Identity Services"));
-        document.head.appendChild(script);
-      });
-    }, []);
-    const requestGisToken = React7.useCallback(async (hint) => {
-      await ensureGisScript();
-      if (!googleClientIdRef.current && (context == null ? void 0 : context.executeAction)) {
-        try {
-          const config = await context.executeAction("GET_GOOGLE_CONFIG", {});
-          googleClientIdRef.current = (config == null ? void 0 : config.clientId) || "";
-        } catch (e) {
-          throw new Error("Failed to fetch Google configuration");
-        }
-      }
-      const clientId = googleClientIdRef.current;
-      if (!clientId) {
-        throw new Error("Google Client ID is not configured");
-      }
-      const accessToken = await new Promise((resolve, reject) => {
-        const tokenClient = window.google.accounts.oauth2.initTokenClient({
-          client_id: clientId,
-          scope: "https://www.googleapis.com/auth/contacts https://www.googleapis.com/auth/userinfo.email",
-          prompt: hint ? "" : "select_account",
-          hint: hint || void 0,
-          callback: (tokenResponse) => {
-            if (tokenResponse == null ? void 0 : tokenResponse.access_token) {
-              resolve(tokenResponse.access_token);
-            } else {
-              reject(new Error("Google authorization was cancelled or failed"));
-            }
-          },
-          error_callback: (err) => {
-            reject(new Error((err == null ? void 0 : err.message) || "Google authorization error"));
-          }
-        });
-        tokenClient.requestAccessToken({ hint: hint || void 0 });
-      });
-      let email = "";
-      try {
-        const res = await fetch("https://www.googleapis.com/oauth2/v3/userinfo", {
-          headers: { Authorization: `Bearer ${accessToken}` }
-        });
-        if (res.ok) {
-          const info = await res.json();
-          email = info.email || "";
-        }
-      } catch (e) {
-      }
-      return { accessToken, email };
-    }, [ensureGisScript, context]);
     const handleSync = async () => {
       var _a, _b, _c, _d, _e, _f;
       if (!(context == null ? void 0 : context.executeAction)) return;
@@ -2300,17 +2290,6 @@ var FORM_INPUTS = {
           setIsSyncing(false);
           return;
         }
-        let accessToken;
-        let userEmail = "";
-        try {
-          const gisResult = await requestGisToken();
-          accessToken = gisResult.accessToken;
-          userEmail = gisResult.email;
-        } catch (gisError) {
-          addToast({ type: "warning", message: gisError.message || "\u05D4\u05D4\u05E8\u05E9\u05D0\u05D4 \u05DC\u05D2\u05D5\u05D2\u05DC \u05E0\u05DB\u05E9\u05DC\u05D4" });
-          setIsSyncing(false);
-          return;
-        }
         const payload = {
           nameParts: mapping.nameParts || [],
           phoneCol: mapping.phoneCol,
@@ -2320,9 +2299,7 @@ var FORM_INPUTS = {
           tableMetaId: targetTableMetaId,
           tableId: targetTableMetaId,
           recordId: rowId,
-          orgId: targetOrgId,
-          accessToken,
-          userEmail
+          orgId: targetOrgId
         };
         const res = await context.executeAction("SYNC_GOOGLE_CONTACT", payload);
         if (res && res.synced) {
@@ -2342,39 +2319,44 @@ var FORM_INPUTS = {
           }
         }
       } catch (error) {
-        console.error("Failed to sync contact:", error);
-        addToast({ type: "warning", message: "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E1\u05E0\u05DB\u05E8\u05D5\u05DF \u05D0\u05D9\u05E9 \u05E7\u05E9\u05E8: " + error.message });
+        const errorMessage = (error == null ? void 0 : error.message) || (error == null ? void 0 : error.error) || (typeof error === "string" ? error : "");
+        if (errorMessage.includes("OAUTH_REQUIRED") || errorMessage.includes("Access Denied") || errorMessage.includes("No refresh token")) {
+          addToast({
+            type: "warning",
+            message: "\u05D8\u05E8\u05DD \u05D4\u05D5\u05D2\u05D3\u05E8 \u05D7\u05E9\u05D1\u05D5\u05DF \u05D2\u05D5\u05D2\u05DC \u05D0\u05E8\u05D2\u05D5\u05E0\u05D9. \u05D9\u05E9 \u05DC\u05E4\u05E0\u05D5\u05EA \u05DC\u05DE\u05E0\u05D4\u05DC \u05D4\u05DE\u05E2\u05E8\u05DB\u05EA \u05DC\u05D7\u05D9\u05D1\u05D5\u05E8 \u05D4\u05D7\u05E9\u05D1\u05D5\u05DF \u05D1\u05D4\u05D2\u05D3\u05E8\u05D5\u05EA \u05D4\u05D0\u05E8\u05D2\u05D5\u05DF."
+          });
+        } else {
+          console.error("Failed to sync contact:", error);
+          addToast({
+            type: "warning",
+            message: "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E1\u05E0\u05DB\u05E8\u05D5\u05DF \u05D0\u05D9\u05E9 \u05E7\u05E9\u05E8: " + error.message
+          });
+        }
       } finally {
         setIsSyncing(false);
       }
     };
     const handleUnlink = async () => {
-      let accessToken;
       const targetTableMetaId = (context == null ? void 0 : context.tableMetaId) || (context == null ? void 0 : context.tableId);
       const targetOrgId = context == null ? void 0 : context.orgId;
       try {
-        let emailHint = value == null ? void 0 : value.userEmail;
-        if (!emailHint && (value == null ? void 0 : value.url)) {
-          try {
-            const parsed = new URL(value.url);
-            emailHint = parsed.searchParams.get("authuser") || void 0;
-          } catch (e) {
-          }
+        if ((value == null ? void 0 : value.resourceName) && (context == null ? void 0 : context.executeAction)) {
+          await context.executeAction("DELETE_GOOGLE_CONTACT", {
+            resourceName: value.resourceName,
+            tableMetaId: targetTableMetaId,
+            tableId: targetTableMetaId,
+            recordId: rowId,
+            orgId: targetOrgId
+          });
         }
-        const auth = await requestGisToken(emailHint);
-        accessToken = auth.accessToken;
-      } catch (err) {
-        console.warn("[handleUnlink] Could not obtain token via GIS, falling back to server default token:", err);
-      }
-      if ((value == null ? void 0 : value.resourceName) && (context == null ? void 0 : context.executeAction)) {
-        await context.executeAction("DELETE_GOOGLE_CONTACT", {
-          resourceName: value.resourceName,
-          accessToken,
-          tableMetaId: targetTableMetaId,
-          tableId: targetTableMetaId,
-          recordId: rowId,
-          orgId: targetOrgId
-        });
+      } catch (error) {
+        if (error.message === "OAUTH_REQUIRED" || error.error === "OAUTH_REQUIRED") {
+          addToast({ type: "warning", message: "\u05D8\u05E8\u05DD \u05D4\u05D5\u05D2\u05D3\u05E8 \u05D7\u05E9\u05D1\u05D5\u05DF \u05D2\u05D5\u05D2\u05DC \u05D0\u05E8\u05D2\u05D5\u05E0\u05D9. \u05D9\u05E9 \u05DC\u05E4\u05E0\u05D5\u05EA \u05DC\u05DE\u05E0\u05D4\u05DC \u05D4\u05DE\u05E2\u05E8\u05DB\u05EA \u05DC\u05D7\u05D9\u05D1\u05D5\u05E8 \u05D4\u05D7\u05E9\u05D1\u05D5\u05DF \u05D1\u05D4\u05D2\u05D3\u05E8\u05D5\u05EA \u05D4\u05D0\u05E8\u05D2\u05D5\u05DF." });
+          return;
+        }
+        console.error("Failed to unlink contact:", error);
+        addToast({ type: "warning", message: "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05D4\u05E1\u05E8\u05EA \u05D0\u05D9\u05E9 \u05E7\u05E9\u05E8: " + error.message });
+        return;
       }
       if (context == null ? void 0 : context.updateQuietly) {
         context.updateQuietly(rowId, column.name, null);
@@ -2394,7 +2376,7 @@ var FORM_INPUTS = {
     if (value && value.synced && value.url) {
       return /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1.5 h-8 px-2 group whitespace-nowrap overflow-hidden max-w-full", children: [
         /* @__PURE__ */ jsx7("a", { href: value.url, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:underline flex-1 truncate text-xs whitespace-nowrap", children: "\u05D0\u05D9\u05E9 \u05E7\u05E9\u05E8 \u05D2\u05D5\u05D2\u05DC" }),
-        /* @__PURE__ */ jsx7(
+        !readOnly && /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -2406,6 +2388,9 @@ var FORM_INPUTS = {
         )
       ] });
     }
+    if (readOnly) {
+      return /* @__PURE__ */ jsx7("span", { className: "px-2 py-1 flex items-center h-full text-slate-300 text-xs italic", children: "\u05DC\u05D0 \u05DE\u05E1\u05D5\u05E0\u05DB\u05E8\u05DF" });
+    }
     return /* @__PURE__ */ jsx7("div", { className: "flex items-center h-8 px-2 whitespace-nowrap overflow-hidden max-w-full", children: /* @__PURE__ */ jsxs7(
       "button",
       {
@@ -2423,15 +2408,20 @@ var FORM_INPUTS = {
       }
     ) });
   },
-  DEFAULT: ({ value, onChange }) => /* @__PURE__ */ jsx7(
-    "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)
+  DEFAULT: ({ value, onChange, readOnly }) => {
+    if (readOnly) {
+      return /* @__PURE__ */ jsx7("span", { className: "px-2 py-1 flex items-center h-full text-sm select-text truncate", children: value !== void 0 && value !== null ? String(value) : "" });
     }
-  ),
+    return /* @__PURE__ */ jsx7(
+      "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)
+      }
+    );
+  },
   SUB_TABLE: ({ value, column }) => {
     var _a, _b, _c;
     if (!Array.isArray(value)) return /* @__PURE__ */ jsx7("span", { className: "px-2 py-1 flex items-center h-full text-slate-300 text-xs italic", children: "\u05E8\u05D9\u05E7" });
@@ -2841,7 +2831,8 @@ function SubTableCell({
   refetchRelation,
   onCommit,
   onQuietUpdate,
-  width
+  width,
+  readOnly
 }) {
   var _a, _b, _c, _d, _e;
   const colType = ((_a = column.type) == null ? void 0 : _a.toUpperCase()) || "DEFAULT";
@@ -2876,6 +2867,7 @@ function SubTableCell({
     }
   }, [serverValue]);
   const commit = useCallback8(async (valToCommit) => {
+    if (readOnly) return true;
     if (isCommittingRef.current) return false;
     if (!isDirtyRef.current) return true;
     if (valToCommit === serverValueRef.current) {
@@ -2992,7 +2984,9 @@ function SubTableCell({
           column,
           rowId: record.id,
           onChange: handleChange,
+          readOnly,
           context: __spreadProps(__spreadValues({}, context), {
+            readOnly,
             tableName: (targetSchema == null ? void 0 : targetSchema.name) || (targetSchema == null ? void 0 : targetSchema.tableName) || (targetSchema == null ? void 0 : targetSchema.title) || (targetSchema == null ? void 0 : targetSchema.id) || "Table",
             relationOptions,
             updateRelationOptions: (name, opts) => setRelationOptions((prev) => __spreadProps(__spreadValues({}, prev), { [name]: opts })),
@@ -3022,8 +3016,9 @@ function SubTableCell({
     }
   );
 }
-function SubTableViewer({ rowId, column, value, onChange, context }) {
+function SubTableViewer({ rowId, column, value, onChange, context, readOnly }) {
   var _a, _b, _c, _d, _e, _f;
+  const isReadOnly = readOnly != null ? readOnly : Boolean(context == null ? void 0 : context.readOnly);
   const { addToast } = useToast();
   const entries = Array.isArray(value) ? value : [];
   const [linkedRecords, setLinkedRecords] = useState10(() => {
@@ -3550,7 +3545,7 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
   return /* @__PURE__ */ jsxs9("div", { className: "p-3 animate-in fade-in slide-in-from-top-2 duration-200", dir: "rtl", children: [
     /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-4 mb-2.5", children: [
       /* @__PURE__ */ jsx9("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx9("span", { className: "text-xs font-bold text-slate-600", children: (_e = targetSchema == null ? void 0 : targetSchema.name) != null ? _e : (_d = column.config) == null ? void 0 : _d.referencedTableName }) }),
-      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1.5", children: [
+      !isReadOnly && /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsxs9("div", { className: "relative", ref: searchRef, children: [
           /* @__PURE__ */ jsxs9(
             "button",
@@ -3615,13 +3610,13 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
         )
       ] })
     ] }),
-    isLoading ? /* @__PURE__ */ jsx9("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ jsx9("div", { className: "w-5 h-5 border-2 border-blue-400 border-t-transparent rounded-full animate-spin" }) }) : entries.length === 0 && !isCreating ? /* @__PURE__ */ jsx9("div", { className: "text-center py-6 text-xs text-slate-400", children: "\u05D0\u05D9\u05DF \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05DE\u05E7\u05D5\u05E9\u05E8\u05D5\u05EA. \u05D4\u05E9\u05EA\u05DE\u05E9 \u05D1\u05D7\u05D9\u05E4\u05D5\u05E9 \u05DB\u05D3\u05D9 \u05DC\u05E7\u05E9\u05E8 \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05E7\u05D9\u05D9\u05DE\u05D5\u05EA, \u05D0\u05D5 \u05D4\u05D5\u05E1\u05E3 \u05E8\u05E9\u05D5\u05DE\u05D4 \u05D7\u05D3\u05E9\u05D4." }) : /* @__PURE__ */ jsx9("div", { className: "overflow-x-auto pb-1", children: /* @__PURE__ */ jsxs9("table", { className: "w-full text-xs border-collapse table-auto", children: [
+    isLoading ? /* @__PURE__ */ jsx9("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ jsx9("div", { className: "w-5 h-5 border-2 border-blue-400 border-t-transparent rounded-full animate-spin" }) }) : entries.length === 0 && !isCreating ? /* @__PURE__ */ jsx9("div", { className: "text-center py-6 text-xs text-slate-400", children: isReadOnly ? "\u05D0\u05D9\u05DF \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05DE\u05E7\u05D5\u05E9\u05E8\u05D5\u05EA \u05DC\u05D4\u05E6\u05D2\u05D4." : "\u05D0\u05D9\u05DF \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05DE\u05E7\u05D5\u05E9\u05E8\u05D5\u05EA. \u05D4\u05E9\u05EA\u05DE\u05E9 \u05D1\u05D7\u05D9\u05E4\u05D5\u05E9 \u05DB\u05D3\u05D9 \u05DC\u05E7\u05E9\u05E8 \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05E7\u05D9\u05D9\u05DE\u05D5\u05EA, \u05D0\u05D5 \u05D4\u05D5\u05E1\u05E3 \u05E8\u05E9\u05D5\u05DE\u05D4 \u05D7\u05D3\u05E9\u05D4." }) : /* @__PURE__ */ jsx9("div", { className: "overflow-x-auto pb-1", children: /* @__PURE__ */ jsxs9("table", { className: "w-full text-xs border-collapse table-auto", children: [
       /* @__PURE__ */ jsx9("thead", { children: /* @__PURE__ */ jsxs9("tr", { className: "bg-slate-100/80 h-12 min-h-[48px]", children: [
         /* @__PURE__ */ jsx9("th", { className: "border border-slate-200 px-2 py-1.5 text-center w-10 font-semibold text-slate-500 h-12 min-h-[48px] align-middle", style: { width: 40, minWidth: 40, maxWidth: 40 }, children: "\u05E0\u05D1\u05D7\u05E8" }),
         targetColumns.map((col) => {
-          const dragProps = getHeaderDragProps(col.name);
-          const isDragging = draggedColName === col.name;
-          const isDragOver = dragOverColName === col.name;
+          const dragProps = isReadOnly ? {} : getHeaderDragProps(col.name);
+          const isDragging = !isReadOnly && draggedColName === col.name;
+          const isDragOver = !isReadOnly && dragOverColName === col.name;
           const colMinWidth = calculateMinColumnWidth(col.name, true, col.type);
           const currentWidth = Math.max(colMinWidth, columnWidths[col.name] || 150);
           return /* @__PURE__ */ jsxs9(
@@ -3630,7 +3625,7 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
               style: { width: currentWidth, minWidth: currentWidth, maxWidth: currentWidth },
               title: col.name
             }, dragProps), {
-              className: `relative border border-slate-200 px-3 py-1.5 font-semibold text-slate-600 select-none cursor-grab active:cursor-grabbing transition-colors h-12 min-h-[48px] align-middle ${isDragging ? "opacity-40 bg-slate-200 border-dashed border-2 border-brand" : ""} ${isDragOver ? "bg-blue-50 border-r-4 border-r-brand text-brand font-bold" : "hover:bg-slate-200/60"}`,
+              className: `relative border border-slate-200 px-3 py-1.5 font-semibold text-slate-600 select-none ${isReadOnly ? "cursor-default" : "cursor-grab active:cursor-grabbing"} transition-colors h-12 min-h-[48px] align-middle ${isDragging ? "opacity-40 bg-slate-200 border-dashed border-2 border-brand" : ""} ${isDragOver ? "bg-blue-50 border-r-4 border-r-brand text-brand font-bold" : isReadOnly ? "" : "hover:bg-slate-200/60"}`,
               children: [
                 /* @__PURE__ */ jsx9(
                   "div",
@@ -3646,7 +3641,7 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
                 ),
                 /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between gap-1.5 group overflow-hidden w-full", title: col.name, children: [
                   /* @__PURE__ */ jsx9(ColumnHeaderTitle, { name: col.name, width: currentWidth, isSubTable: true }),
-                  /* @__PURE__ */ jsx9(
+                  !isReadOnly && /* @__PURE__ */ jsx9(
                     "svg",
                     {
                       className: "w-3.5 h-3.5 text-slate-400 opacity-40 group-hover:opacity-100 transition-opacity shrink-0 cursor-grab",
@@ -3675,8 +3670,9 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
               {
                 type: "checkbox",
                 checked: entry.isSelected,
+                disabled: isReadOnly,
                 onChange: () => handleToggleSelected(entry.recordId),
-                className: "w-3.5 h-3.5 rounded border-slate-300 text-blue-600 cursor-pointer"
+                className: `w-3.5 h-3.5 rounded border-slate-300 text-blue-600 ${isReadOnly ? "cursor-not-allowed opacity-60" : "cursor-pointer"}`
               }
             ) }),
             targetColumns.map((col) => {
@@ -3706,7 +3702,8 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
                   refetchRelation,
                   onCommit: handleCommitRecordCell,
                   onQuietUpdate: handleQuietSubTableCellChange,
-                  width: currentWidth
+                  width: currentWidth,
+                  readOnly: isReadOnly
                 },
                 `${record.id}_${col.name}`
               );
@@ -3733,7 +3730,7 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
                 }
                 return null;
               })(),
-              /* @__PURE__ */ jsx9(
+              !isReadOnly && /* @__PURE__ */ jsx9(
                 "button",
                 {
                   type: "button",
@@ -3750,7 +3747,7 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
             /* @__PURE__ */ jsx9("td", { className: "border border-slate-200 bg-white pointer-events-none" })
           ] }, entry.recordId);
         }),
-        isCreating && /* @__PURE__ */ jsxs9("tr", { className: "bg-emerald-50/40", children: [
+        isCreating && !isReadOnly && /* @__PURE__ */ jsxs9("tr", { className: "bg-emerald-50/40", children: [
           /* @__PURE__ */ jsx9("td", { className: "border border-emerald-200 px-2 py-1 text-center", style: { width: 40, minWidth: 40, maxWidth: 40 }, children: /* @__PURE__ */ jsx9("span", { className: "text-emerald-500 font-bold text-[10px]", children: "\u05D7\u05D3\u05E9" }) }),
           targetColumns.map((col) => {
             var _a2, _b2, _c2, _d2, _e2;
@@ -4265,10 +4262,21 @@ function TableBlockClient({
   componentId,
   orgId,
   className = "",
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  role,
+  permissions,
+  readOnly
 }) {
   const { showError, addToast } = useToast();
   const [isExporting, setIsExporting] = useState12(false);
+  const resolvedRole = role ? getRolePermissions(role) : void 0;
+  const effectivePermissions = permissions || (resolvedRole == null ? void 0 : resolvedRole.permissions) || {
+    canCreate: !readOnly,
+    canRead: true,
+    canUpdate: !readOnly,
+    canDelete: !readOnly
+  };
+  const effectiveReadOnly = readOnly != null ? readOnly : resolvedRole ? resolvedRole.readOnly : !effectivePermissions.canUpdate && !effectivePermissions.canCreate && !effectivePermissions.canDelete;
   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 { columnWidths, startResize } = useColumnResize({
     storageKey: `table_widths_${tableKey}`,
@@ -5397,14 +5405,29 @@ function TableBlockClient({
       }
       const result = (res == null ? void 0 : res.data) || res;
       if ((result == null ? void 0 : result.success) === false) {
-        throw new Error(result.error || "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05D9\u05D9\u05E6\u05D5\u05D0 \u05D4\u05E0\u05EA\u05D5\u05E0\u05D9\u05DD");
+        throw new Error(result.error || "Failed to export data");
       }
+      const base64Data = result == null ? void 0 : result.base64Data;
       const csvString = (result == null ? void 0 : result.csvString) || (result == null ? void 0 : result.csv);
-      if (!csvString) {
-        throw new Error("\u05DC\u05D0 \u05D4\u05EA\u05E7\u05D1\u05DC\u05D5 \u05E0\u05EA\u05D5\u05E0\u05D9 CSV \u05DE\u05D4\u05E9\u05E8\u05EA");
+      if (!base64Data && !csvString) {
+        throw new Error("No export data received from server");
+      }
+      let blob;
+      const defaultFileName = `${((schema == null ? void 0 : schema.title) || (schema == null ? void 0 : schema.name) || "table").trim()}_export.xlsx`;
+      let fileName = (result == null ? void 0 : result.fileName) || defaultFileName;
+      if (base64Data) {
+        const byteCharacters = atob(base64Data);
+        const byteNumbers = new Uint8Array(byteCharacters.length);
+        for (let i = 0; i < byteCharacters.length; i++) {
+          byteNumbers[i] = byteCharacters.charCodeAt(i);
+        }
+        blob = new Blob([byteNumbers], {
+          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+        });
+      } else {
+        fileName = fileName.replace(/\.xlsx$/i, ".csv");
+        blob = new Blob([csvString], { type: "text/csv;charset=utf-8;" });
       }
-      const fileName = (result == null ? void 0 : result.fileName) || `${((schema == null ? void 0 : schema.title) || (schema == null ? void 0 : schema.name) || "table").trim()}_export.csv`;
-      const blob = new Blob([csvString], { type: "text/csv;charset=utf-8;" });
       const url = URL.createObjectURL(blob);
       const link = document.createElement("a");
       link.href = url;
@@ -5413,6 +5436,13 @@ function TableBlockClient({
       link.click();
       document.body.removeChild(link);
       URL.revokeObjectURL(url);
+      if (result == null ? void 0 : result.isTruncated) {
+        addToast({
+          message: "\u05D9\u05D5\u05E6\u05D0\u05D5 10,000 \u05D4\u05E9\u05D5\u05E8\u05D5\u05EA \u05D4\u05E8\u05D0\u05E9\u05D5\u05E0\u05D5\u05EA. \u05DE\u05D5\u05DE\u05DC\u05E5 \u05DC\u05E1\u05E0\u05DF \u05D0\u05EA \u05D4\u05D8\u05D1\u05DC\u05D4 \u05DB\u05D3\u05D9 \u05DC\u05E6\u05DE\u05E6\u05DD \u05D0\u05EA \u05D4\u05DB\u05DE\u05D5\u05EA",
+          type: "warning",
+          duration: 5e3
+        });
+      }
     } catch (err) {
       console.error("[TableBlock] Export to CSV failed:", err);
       showError((err == null ? void 0 : err.message) || String(err), "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05D9\u05D9\u05E6\u05D5\u05D0 \u05D4\u05E0\u05EA\u05D5\u05E0\u05D9\u05DD");
@@ -5435,7 +5465,7 @@ function TableBlockClient({
         /* @__PURE__ */ jsxs11("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 shrink-0", children: [
           /* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap items-center gap-2.5", children: [
             ((schema == null ? void 0 : schema.title) || (schema == null ? void 0 : schema.name)) && /* @__PURE__ */ jsx11("div", { className: "font-bold text-slate-800 text-sm sm:text-base border-l border-slate-300 pl-3 ml-1", children: /* @__PURE__ */ jsx11("span", { children: schema.title || schema.name }) }),
-            /* @__PURE__ */ jsx11(
+            !effectiveReadOnly && effectivePermissions.canCreate && /* @__PURE__ */ jsx11(
               "button",
               {
                 onClick: handleAddRow,
@@ -5445,7 +5475,7 @@ function TableBlockClient({
                 children: /* @__PURE__ */ jsx11("svg", { className: "w-4.5 h-4.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M12 4v16m8-8H4" }) })
               }
             ),
-            /* @__PURE__ */ jsx11(
+            !effectiveReadOnly && effectivePermissions.canCreate && /* @__PURE__ */ jsx11(
               "button",
               {
                 onClick: handleDuplicateRow,
@@ -5455,7 +5485,7 @@ function TableBlockClient({
                 children: /* @__PURE__ */ jsx11(Copy2, { className: "w-4 h-4 text-blue-600 shrink-0" })
               }
             ),
-            /* @__PURE__ */ jsxs11(
+            !effectiveReadOnly && effectivePermissions.canDelete && /* @__PURE__ */ jsxs11(
               "button",
               {
                 onClick: handleDeleteSelected,
@@ -5481,7 +5511,7 @@ function TableBlockClient({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs11("div", { className: "relative", ref: dropdownRef, children: [
+            !effectiveReadOnly && effectivePermissions.canUpdate && /* @__PURE__ */ jsxs11("div", { className: "relative", ref: dropdownRef, children: [
               /* @__PURE__ */ jsxs11(
                 "button",
                 {
@@ -5619,7 +5649,7 @@ function TableBlockClient({
             ] }) : isSaveSuccess ? /* @__PURE__ */ jsxs11("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__ */ jsx11("svg", { className: "w-4 h-4 text-emerald-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx11("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__ */ jsxs11("div", { className: "flex items-center gap-1.5 animate-in fade-in", children: [
+            ] }) : !effectiveReadOnly && effectivePermissions.canUpdate && hasChanges ? /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1.5 animate-in fade-in", children: [
               /* @__PURE__ */ jsx11("span", { className: "text-xs font-semibold text-amber-700", children: "\u05E9\u05D9\u05E0\u05D5\u05D9\u05D9\u05DD \u05E9\u05DC\u05D0 \u05E0\u05E9\u05DE\u05E8\u05D5" }),
               /* @__PURE__ */ jsx11(
                 "button",
@@ -5634,7 +5664,7 @@ function TableBlockClient({
                 }
               )
             ] }) : null,
-            /* @__PURE__ */ jsx11(
+            !effectiveReadOnly && effectivePermissions.canUpdate && /* @__PURE__ */ jsx11(
               "button",
               {
                 onClick: handleSave,
@@ -5672,9 +5702,10 @@ function TableBlockClient({
               filteredColumns.map((col) => {
                 var _a, _b;
                 const isSearching = activeSearchCol === col.name;
-                const dragProps = isSearching ? {} : getHeaderDragProps(col.name);
-                const isDragging = !isSearching && draggedColName === col.name;
-                const isDragOver = !isSearching && dragOverColName === col.name;
+                const canReorderColumns = !effectiveReadOnly && effectivePermissions.canUpdate && !isSearching;
+                const dragProps = canReorderColumns ? getHeaderDragProps(col.name) : {};
+                const isDragging = canReorderColumns && draggedColName === col.name;
+                const isDragOver = canReorderColumns && dragOverColName === col.name;
                 const colMinWidth = calculateMinColumnWidth(col.name, false, col.type);
                 const currentWidth = Math.max(colMinWidth, columnWidths[col.name] || 200);
                 const isRelation = ((_a = col.type) == null ? void 0 : _a.toUpperCase()) === "RELATION";
@@ -5694,7 +5725,7 @@ function TableBlockClient({
                     style: { width: currentWidth, minWidth: currentWidth, maxWidth: currentWidth },
                     title: isSearching ? void 0 : col.name
                   }, dragProps), {
-                    className: `group relative border-b border-l border-slate-200 px-2 py-1 font-semibold text-slate-700 select-none transition-colors h-12 min-h-[48px] align-middle bg-white ${isSearching ? "cursor-default bg-blue-50/40" : "cursor-grab active:cursor-grabbing hover:bg-slate-100"} ${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" : ""}`,
+                    className: `group relative border-b border-l border-slate-200 px-2 py-1 font-semibold text-slate-700 select-none transition-colors h-12 min-h-[48px] align-middle bg-white ${isSearching ? "cursor-default bg-blue-50/40" : canReorderColumns ? "cursor-grab active:cursor-grabbing hover:bg-slate-100" : "cursor-default"} ${isDragging ? "opacity-40 bg-slate-200 border-dashed border-2 border-brand" : ""} ${isDragOver ? "bg-blue-50 border-r-4 border-r-brand text-brand font-bold" : ""}`,
                     children: [
                       /* @__PURE__ */ jsx11(
                         "div",
@@ -5835,7 +5866,9 @@ function TableBlockClient({
                   relationDictionaryRef,
                   refetchRelation,
                   executeAction,
-                  emitEvent
+                  emitEvent,
+                  readOnly: effectiveReadOnly || !effectivePermissions.canUpdate,
+                  permissions: effectivePermissions
                 },
                 row.id
               );
@@ -5986,7 +6019,8 @@ function ExpandedSubTables({
         column: activeCol,
         value: (rowData == null ? void 0 : rowData[activeCol.name]) || [],
         onChange: (newVal) => handleCellChange(rowId, activeCol.name, newVal),
-        context
+        context,
+        readOnly: context == null ? void 0 : context.readOnly
       },
       activeCol.name
     ) })
@@ -6017,7 +6051,9 @@ var TableRow = React11.memo(function TableRow2({
   relationDictionaryRef,
   refetchRelation,
   executeAction,
-  emitEvent
+  emitEvent,
+  readOnly,
+  permissions
 }) {
   return /* @__PURE__ */ jsxs11(React11.Fragment, { children: [
     /* @__PURE__ */ jsxs11("tr", { className: `hover:bg-blue-50/30 transition-colors group ${isSelected ? "bg-blue-50/40" : ""}`, children: [
@@ -6069,6 +6105,7 @@ var TableRow = React11.memo(function TableRow2({
                 column: col,
                 rowId: row.id,
                 onChange: (v) => handleCellChange(row.id, col.name, v),
+                readOnly,
                 context: {
                   tableName: (schema == null ? void 0 : schema.name) || (schema == null ? void 0 : schema.tableName) || (schema == null ? void 0 : schema.title) || (schema == null ? void 0 : schema.id) || "Table",
                   tableId: (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id),
@@ -6083,7 +6120,9 @@ var TableRow = React11.memo(function TableRow2({
                   orgId,
                   updateQuietly: handleQuietCellChange,
                   triggerSaveSuccess,
-                  rowData: row.data
+                  rowData: row.data,
+                  readOnly,
+                  permissions
                 }
               }
             )
@@ -6109,7 +6148,9 @@ var TableRow = React11.memo(function TableRow2({
           rowData: row.data,
           updateQuietly: handleQuietCellChange,
           triggerSaveSuccess,
-          onUpdateColumnConfig: handleUpdateColumnConfig
+          onUpdateColumnConfig: handleUpdateColumnConfig,
+          readOnly,
+          permissions
         }
       }
     )
@@ -6150,6 +6191,7 @@ export {
   formatTimeInput,
   formatTimeIso,
   getDeterministicPastelBadge,
+  getRolePermissions,
   isTextRepresentable,
   measureTextWidth,
   normalizeRelationValue,