@dmitryvim/form-builder 0.2.24 → 0.2.26

package/dist/cjs/index.cjs

@@ -10,7 +10,10 @@ function t(key, state, params) {
   let text = (localeTranslations == null ? void 0 : localeTranslations[key]) || (fallbackTranslations == null ? void 0 : fallbackTranslations[key]) || key;
   if (params) {
     for (const [paramKey, paramValue] of Object.entries(params)) {
-      text = text.replace(new RegExp(`\\{${paramKey}\\}`, "g"), String(paramValue));
+      text = text.replace(
+        new RegExp(`\\{${paramKey}\\}`, "g"),
+        String(paramValue)
+      );
     }
   }
   return text;
@@ -255,6 +258,9 @@ function validateSchema(schema) {
 }
 
 // src/utils/helpers.ts
+function isElementReadonly(element, state, ctx) {
+  return element.readonly === true || state.config.readonly === true || (ctx == null ? void 0 : ctx.inheritedReadonly) === true;
+}
 function isPlainObject(obj) {
   return obj && typeof obj === "object" && obj.constructor === Object;
 }
@@ -414,6 +420,7 @@ function createCharCounter(element, input, isTextarea = false) {
 }
 function renderTextElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
+  const readonly = isElementReadonly(element, state, ctx);
   const inputWrapper = document.createElement("div");
   inputWrapper.style.cssText = "position: relative;";
   const textInput = document.createElement("input");
@@ -424,7 +431,7 @@ function renderTextElement(element, ctx, wrapper, pathKey) {
     padding-right: 60px;
     border: var(--fb-border-width) solid var(--fb-border-color);
     border-radius: var(--fb-border-radius);
-    background-color: ${state.config.readonly ? "var(--fb-background-readonly-color)" : "var(--fb-background-color)"};
+    background-color: ${readonly ? "var(--fb-background-readonly-color)" : "var(--fb-background-color)"};
     color: var(--fb-text-color);
     font-size: var(--fb-font-size);
     font-family: var(--fb-font-family);
@@ -435,8 +442,8 @@ function renderTextElement(element, ctx, wrapper, pathKey) {
   textInput.name = pathKey;
   textInput.placeholder = element.placeholder || "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442";
   textInput.value = ctx.prefill[element.key] || element.default || "";
-  textInput.readOnly = state.config.readonly;
-  if (!state.config.readonly) {
+  textInput.readOnly = readonly;
+  if (!readonly) {
     textInput.addEventListener("focus", () => {
       textInput.style.borderColor = "var(--fb-border-focus-color)";
       textInput.style.outline = `var(--fb-focus-ring-width) solid var(--fb-focus-ring-color)`;
@@ -457,7 +464,7 @@ function renderTextElement(element, ctx, wrapper, pathKey) {
       }
     });
   }
-  if (!state.config.readonly && ctx.instance) {
+  if (!readonly && ctx.instance) {
     const handleChange = () => {
       const value = textInput.value === "" ? null : textInput.value;
       ctx.instance.triggerOnChange(pathKey, value);
@@ -466,7 +473,7 @@ function renderTextElement(element, ctx, wrapper, pathKey) {
     textInput.addEventListener("input", handleChange);
   }
   inputWrapper.appendChild(textInput);
-  if (!state.config.readonly && (element.minLength != null || element.maxLength != null)) {
+  if (!readonly && (element.minLength != null || element.maxLength != null)) {
     const counter = createCharCounter(element, textInput, false);
     inputWrapper.appendChild(counter);
   }
@@ -475,6 +482,7 @@ function renderTextElement(element, ctx, wrapper, pathKey) {
 function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
   var _a, _b;
   const state = ctx.state;
+  const readonly = isElementReadonly(element, state, ctx);
   const prefillValues = ctx.prefill[element.key] || [];
   const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
   const minCount = (_a = element.minCount) != null ? _a : 1;
@@ -506,7 +514,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
       padding-right: 60px;
       border: var(--fb-border-width) solid var(--fb-border-color);
       border-radius: var(--fb-border-radius);
-      background-color: ${state.config.readonly ? "var(--fb-background-readonly-color)" : "var(--fb-background-color)"};
+      background-color: ${readonly ? "var(--fb-background-readonly-color)" : "var(--fb-background-color)"};
       color: var(--fb-text-color);
       font-size: var(--fb-font-size);
       font-family: var(--fb-font-family);
@@ -516,8 +524,8 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
     `;
     textInput.placeholder = element.placeholder || t("placeholderText", state);
     textInput.value = value;
-    textInput.readOnly = state.config.readonly;
-    if (!state.config.readonly) {
+    textInput.readOnly = readonly;
+    if (!readonly) {
       textInput.addEventListener("focus", () => {
         textInput.style.borderColor = "var(--fb-border-focus-color)";
         textInput.style.outline = `var(--fb-focus-ring-width) solid var(--fb-focus-ring-color)`;
@@ -538,7 +546,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
         }
       });
     }
-    if (!state.config.readonly && ctx.instance) {
+    if (!readonly && ctx.instance) {
       const handleChange = () => {
         const value2 = textInput.value === "" ? null : textInput.value;
         ctx.instance.triggerOnChange(textInput.name, value2);
@@ -547,7 +555,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
       textInput.addEventListener("input", handleChange);
     }
     inputContainer.appendChild(textInput);
-    if (!state.config.readonly && (element.minLength != null || element.maxLength != null)) {
+    if (!readonly && (element.minLength != null || element.maxLength != null)) {
       const counter = createCharCounter(element, textInput, false);
       inputContainer.appendChild(counter);
     }
@@ -561,7 +569,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
     return itemWrapper;
   }
   function updateRemoveButtons() {
-    if (state.config.readonly) return;
+    if (readonly) return;
     const items = container.querySelectorAll(".multiple-text-item");
     const currentCount = items.length;
     items.forEach((item) => {
@@ -606,7 +614,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
   }
   let addRow = null;
   let countDisplay = null;
-  if (!state.config.readonly) {
+  if (!readonly) {
     addRow = document.createElement("div");
     addRow.className = "flex items-center gap-3 mt-2";
     const addBtn = document.createElement("button");
@@ -817,6 +825,7 @@ function applyAutoExpand(textarea) {
 }
 function renderTextareaElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
+  const readonly = isElementReadonly(element, state, ctx);
   const textareaWrapper = document.createElement("div");
   textareaWrapper.style.cssText = "position: relative;";
   const textareaInput = document.createElement("textarea");
@@ -826,8 +835,8 @@ function renderTextareaElement(element, ctx, wrapper, pathKey) {
   textareaInput.placeholder = element.placeholder || "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442";
   textareaInput.rows = element.rows || 4;
   textareaInput.value = ctx.prefill[element.key] || element.default || "";
-  textareaInput.readOnly = state.config.readonly;
-  if (!state.config.readonly && ctx.instance) {
+  textareaInput.readOnly = readonly;
+  if (!readonly && ctx.instance) {
     const handleChange = () => {
       const value = textareaInput.value === "" ? null : textareaInput.value;
       ctx.instance.triggerOnChange(pathKey, value);
@@ -835,11 +844,11 @@ function renderTextareaElement(element, ctx, wrapper, pathKey) {
     textareaInput.addEventListener("blur", handleChange);
     textareaInput.addEventListener("input", handleChange);
   }
-  if (element.autoExpand || state.config.readonly) {
+  if (element.autoExpand || readonly) {
     applyAutoExpand(textareaInput);
   }
   textareaWrapper.appendChild(textareaInput);
-  if (!state.config.readonly && (element.minLength != null || element.maxLength != null)) {
+  if (!readonly && (element.minLength != null || element.maxLength != null)) {
     const counter = createCharCounter(element, textareaInput, true);
     textareaWrapper.appendChild(counter);
   }
@@ -848,6 +857,7 @@ function renderTextareaElement(element, ctx, wrapper, pathKey) {
 function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
   var _a, _b;
   const state = ctx.state;
+  const readonly = isElementReadonly(element, state, ctx);
   const prefillValues = ctx.prefill[element.key] || [];
   const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
   const minCount = (_a = element.minCount) != null ? _a : 1;
@@ -878,8 +888,8 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
     textareaInput.placeholder = element.placeholder || t("placeholderText", state);
     textareaInput.rows = element.rows || 4;
     textareaInput.value = value;
-    textareaInput.readOnly = state.config.readonly;
-    if (!state.config.readonly && ctx.instance) {
+    textareaInput.readOnly = readonly;
+    if (!readonly && ctx.instance) {
       const handleChange = () => {
         const value2 = textareaInput.value === "" ? null : textareaInput.value;
         ctx.instance.triggerOnChange(textareaInput.name, value2);
@@ -887,11 +897,11 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
       textareaInput.addEventListener("blur", handleChange);
       textareaInput.addEventListener("input", handleChange);
     }
-    if (element.autoExpand || state.config.readonly) {
+    if (element.autoExpand || readonly) {
       applyAutoExpand(textareaInput);
     }
     textareaContainer.appendChild(textareaInput);
-    if (!state.config.readonly && (element.minLength != null || element.maxLength != null)) {
+    if (!readonly && (element.minLength != null || element.maxLength != null)) {
       const counter = createCharCounter(element, textareaInput, true);
       textareaContainer.appendChild(counter);
     }
@@ -905,7 +915,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
     return itemWrapper;
   }
   function updateRemoveButtons() {
-    if (state.config.readonly) return;
+    if (readonly) return;
     const items = container.querySelectorAll(".multiple-textarea-item");
     const currentCount = items.length;
     items.forEach((item) => {
@@ -939,7 +949,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
   }
   let addRow = null;
   let countDisplay = null;
-  if (!state.config.readonly) {
+  if (!readonly) {
     addRow = document.createElement("div");
     addRow.className = "flex items-center gap-3 mt-2";
     const addBtn = document.createElement("button");
@@ -973,7 +983,9 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
   }
   function updateAddButton() {
     if (!addRow || !countDisplay) return;
-    const addBtn = addRow.querySelector(".add-textarea-btn");
+    const addBtn = addRow.querySelector(
+      ".add-textarea-btn"
+    );
     if (addBtn) {
       const disabled = values.length >= maxCount;
       addBtn.disabled = disabled;
@@ -992,7 +1004,7 @@ function validateTextareaElement(element, key, context) {
 function updateTextareaField(element, fieldPath, value, context) {
   updateTextField(element, fieldPath, value, context);
   const { scopeRoot, state } = context;
-  const shouldAutoExpand = element.autoExpand || state.config.readonly;
+  const shouldAutoExpand = element.autoExpand || isElementReadonly(element, state);
   if (!shouldAutoExpand) return;
   if (element.multiple) {
     const textareas = scopeRoot.querySelectorAll(
@@ -1053,6 +1065,7 @@ function createNumberRangeHint(element, input) {
 }
 function renderNumberElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
+  const readonly = isElementReadonly(element, state, ctx);
   const inputWrapper = document.createElement("div");
   inputWrapper.style.cssText = "position: relative;";
   const numberInput = document.createElement("input");
@@ -1065,8 +1078,8 @@ function renderNumberElement(element, ctx, wrapper, pathKey) {
   if (element.max !== void 0) numberInput.max = element.max.toString();
   if (element.step !== void 0) numberInput.step = element.step.toString();
   numberInput.value = ctx.prefill[element.key] || element.default || "";
-  numberInput.readOnly = state.config.readonly;
-  if (!state.config.readonly && ctx.instance) {
+  numberInput.readOnly = readonly;
+  if (!readonly && ctx.instance) {
     const handleChange = () => {
       const value = numberInput.value ? parseFloat(numberInput.value) : null;
       ctx.instance.triggerOnChange(pathKey, value);
@@ -1075,7 +1088,7 @@ function renderNumberElement(element, ctx, wrapper, pathKey) {
     numberInput.addEventListener("input", handleChange);
   }
   inputWrapper.appendChild(numberInput);
-  if (!state.config.readonly && (element.min != null || element.max != null)) {
+  if (!readonly && (element.min != null || element.max != null)) {
     const counter = createNumberRangeHint(element, numberInput);
     inputWrapper.appendChild(counter);
   }
@@ -1084,6 +1097,7 @@ function renderNumberElement(element, ctx, wrapper, pathKey) {
 function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
   var _a, _b;
   const state = ctx.state;
+  const readonly = isElementReadonly(element, state, ctx);
   const prefillValues = ctx.prefill[element.key] || [];
   const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
   const minCount = (_a = element.minCount) != null ? _a : 1;
@@ -1117,8 +1131,8 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
     if (element.max !== void 0) numberInput.max = element.max.toString();
     if (element.step !== void 0) numberInput.step = element.step.toString();
     numberInput.value = value.toString();
-    numberInput.readOnly = state.config.readonly;
-    if (!state.config.readonly && ctx.instance) {
+    numberInput.readOnly = readonly;
+    if (!readonly && ctx.instance) {
       const handleChange = () => {
         const val = numberInput.value ? parseFloat(numberInput.value) : null;
         ctx.instance.triggerOnChange(numberInput.name, val);
@@ -1127,7 +1141,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
       numberInput.addEventListener("input", handleChange);
     }
     inputContainer.appendChild(numberInput);
-    if (!state.config.readonly && (element.min != null || element.max != null)) {
+    if (!readonly && (element.min != null || element.max != null)) {
       const counter = createNumberRangeHint(element, numberInput);
       inputContainer.appendChild(counter);
     }
@@ -1141,7 +1155,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
     return itemWrapper;
   }
   function updateRemoveButtons() {
-    if (state.config.readonly) return;
+    if (readonly) return;
     const items = container.querySelectorAll(".multiple-number-item");
     const currentCount = items.length;
     items.forEach((item) => {
@@ -1175,7 +1189,7 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
   }
   let addRow = null;
   let countDisplay = null;
-  if (!state.config.readonly) {
+  if (!readonly) {
     addRow = document.createElement("div");
     addRow.className = "flex items-center gap-3 mt-2";
     const addBtn = document.createElement("button");
@@ -1383,10 +1397,11 @@ function updateNumberField(element, fieldPath, value, context) {
 // src/components/select.ts
 function renderSelectElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
+  const readonly = isElementReadonly(element, state, ctx);
   const selectInput = document.createElement("select");
   selectInput.className = "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
   selectInput.name = pathKey;
-  selectInput.disabled = state.config.readonly;
+  selectInput.disabled = readonly;
   (element.options || []).forEach((option) => {
     const optionEl = document.createElement("option");
     optionEl.value = option.value;
@@ -1396,14 +1411,14 @@ function renderSelectElement(element, ctx, wrapper, pathKey) {
     }
     selectInput.appendChild(optionEl);
   });
-  if (!state.config.readonly && ctx.instance) {
+  if (!readonly && ctx.instance) {
     const handleChange = () => {
       ctx.instance.triggerOnChange(pathKey, selectInput.value);
     };
     selectInput.addEventListener("change", handleChange);
   }
   wrapper.appendChild(selectInput);
-  if (!state.config.readonly) {
+  if (!readonly) {
     const selectHint = document.createElement("p");
     selectHint.className = "text-xs text-gray-500 mt-1";
     selectHint.textContent = makeFieldHint(element, state);
@@ -1413,6 +1428,7 @@ function renderSelectElement(element, ctx, wrapper, pathKey) {
 function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
   var _a, _b, _c, _d;
   const state = ctx.state;
+  const readonly = isElementReadonly(element, state, ctx);
   const prefillValues = ctx.prefill[element.key] || [];
   const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
   const minCount = (_a = element.minCount) != null ? _a : 1;
@@ -1437,7 +1453,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
     itemWrapper.className = "multiple-select-item flex items-center gap-2";
     const selectInput = document.createElement("select");
     selectInput.className = "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
-    selectInput.disabled = state.config.readonly;
+    selectInput.disabled = readonly;
     (element.options || []).forEach((option) => {
       const optionElement = document.createElement("option");
       optionElement.value = option.value;
@@ -1447,7 +1463,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
       }
       selectInput.appendChild(optionElement);
     });
-    if (!state.config.readonly && ctx.instance) {
+    if (!readonly && ctx.instance) {
       const handleChange = () => {
         ctx.instance.triggerOnChange(selectInput.name, selectInput.value);
       };
@@ -1463,7 +1479,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
     return itemWrapper;
   }
   function updateRemoveButtons() {
-    if (state.config.readonly) return;
+    if (readonly) return;
     const items = container.querySelectorAll(".multiple-select-item");
     const currentCount = items.length;
     items.forEach((item) => {
@@ -1495,7 +1511,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
   }
   let addRow = null;
   let countDisplay = null;
-  if (!state.config.readonly) {
+  if (!readonly) {
     addRow = document.createElement("div");
     addRow.className = "flex items-center gap-3 mt-2";
     const addBtn = document.createElement("button");
@@ -1543,7 +1559,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
   values.forEach((value) => addSelectItem(value));
   updateAddButton();
   updateRemoveButtons();
-  if (!state.config.readonly) {
+  if (!readonly) {
     const hint = document.createElement("p");
     hint.className = "text-xs text-gray-500 mt-1";
     hint.textContent = makeFieldHint(element, state);
@@ -1764,12 +1780,14 @@ function buildSegmentedGroup(element, currentValue, hiddenInput, readonly, onCha
 function renderSwitcherElement(element, ctx, wrapper, pathKey) {
   var _a, _b;
   const state = ctx.state;
-  const initialValue = String((_b = (_a = ctx.prefill[element.key]) != null ? _a : element.default) != null ? _b : "");
+  const initialValue = String(
+    (_b = (_a = ctx.prefill[element.key]) != null ? _a : element.default) != null ? _b : ""
+  );
   const hiddenInput = document.createElement("input");
   hiddenInput.type = "hidden";
   hiddenInput.name = pathKey;
   hiddenInput.value = initialValue;
-  const readonly = state.config.readonly;
+  const readonly = isElementReadonly(element, state, ctx);
   const onChange = !readonly && ctx.instance ? (value) => {
     ctx.instance.triggerOnChange(pathKey, value);
   } : null;
@@ -1799,7 +1817,7 @@ function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
   while (values.length < minCount) {
     values.push(element.default || ((_d = (_c = element.options) == null ? void 0 : _c[0]) == null ? void 0 : _d.value) || "");
   }
-  const readonly = state.config.readonly;
+  const readonly = isElementReadonly(element, state, ctx);
   const container = document.createElement("div");
   container.className = "space-y-2";
   wrapper.appendChild(container);
@@ -2212,9 +2230,7 @@ function renderUploadedVideoPreview(container, thumbnailUrl, _videoType, state)
   video.preload = "metadata";
   video.muted = true;
   video.src = thumbnailUrl;
-  video.appendChild(
-    document.createTextNode(t("videoNotSupported", state))
-  );
+  video.appendChild(document.createTextNode(t("videoNotSupported", state)));
   container.appendChild(video);
 }
 function renderDeleteButton(container, resourceId, state) {
@@ -2294,6 +2310,7 @@ async function renderUploadedFilePreview(container, resourceId, fileName, meta,
   }
 }
 async function renderFilePreview(container, resourceId, state, options = {}) {
+  var _a;
   const { fileName = "", isReadonly = false, deps = null } = options;
   if (!isReadonly && deps && (!deps.picker || !deps.fileUploadHandler || !deps.dragHandler)) {
     throw new Error(
@@ -2323,6 +2340,10 @@ async function renderFilePreview(container, resourceId, state, options = {}) {
       meta,
       state
     );
+    const isVideo = (_a = meta == null ? void 0 : meta.type) == null ? void 0 : _a.startsWith("video/");
+    if (!isReadonly && !isVideo) {
+      renderDeleteButton(container, resourceId, state);
+    }
   }
 }
 async function renderFilePreviewReadonly(resourceId, state, fileName) {
@@ -3033,9 +3054,15 @@ function setupFilesPickerHandler(filesPicker, initialFiles, state, updateCallbac
 function renderFileElement(element, ctx, wrapper, pathKey) {
   var _a, _b;
   const state = ctx.state;
-  if (state.config.readonly) {
-    const initial = ctx.prefill[element.key];
+  if (isElementReadonly(element, state, ctx)) {
+    const rawInitial = ctx.prefill[element.key];
+    const initial = typeof rawInitial === "string" ? rawInitial : "";
     if (initial) {
+      const hiddenInput = document.createElement("input");
+      hiddenInput.type = "hidden";
+      hiddenInput.name = pathKey;
+      hiddenInput.value = initial;
+      wrapper.appendChild(hiddenInput);
       renderFilePreviewReadonly(initial, state).then((filePreview) => {
         wrapper.appendChild(filePreview);
       }).catch((err) => {
@@ -3124,10 +3151,24 @@ function renderFileElement(element, ctx, wrapper, pathKey) {
 function renderFilesElement(element, ctx, wrapper, pathKey) {
   var _a, _b;
   const state = ctx.state;
-  if (state.config.readonly) {
+  if (isElementReadonly(element, state, ctx)) {
+    const rawPrefill = ctx.prefill[element.key];
+    const initialFiles = Array.isArray(rawPrefill) ? rawPrefill : [];
+    const filesWrapper = document.createElement("div");
+    filesWrapper.className = "space-y-2";
+    filesWrapper.dataset.filesWrapper = pathKey;
+    const filesList = document.createElement("div");
+    filesList.className = "files-list";
+    initialFiles.forEach((resourceId) => {
+      const pill = document.createElement("div");
+      pill.className = "resource-pill";
+      pill.dataset.resourceId = resourceId;
+      filesList.appendChild(pill);
+    });
+    filesWrapper.appendChild(filesList);
+    wrapper.appendChild(filesWrapper);
     const resultsWrapper = document.createElement("div");
     resultsWrapper.className = "space-y-4";
-    const initialFiles = ctx.prefill[element.key] || [];
     if (initialFiles.length > 0) {
       initialFiles.forEach((resourceId) => {
         renderFilePreviewReadonly(resourceId, state).then((filePreview) => {
@@ -3158,6 +3199,7 @@ function renderFilesElement(element, ctx, wrapper, pathKey) {
     };
     const filesWrapper = document.createElement("div");
     filesWrapper.className = "space-y-2";
+    filesWrapper.dataset.filesWrapper = pathKey;
     const filesPicker = document.createElement("input");
     filesPicker.type = "file";
     filesPicker.name = pathKey;
@@ -3208,10 +3250,24 @@ function renderMultipleFileElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
   const minFiles = (_a = element.minCount) != null ? _a : 0;
   const maxFiles = (_b = element.maxCount) != null ? _b : Infinity;
-  if (state.config.readonly) {
+  if (isElementReadonly(element, state, ctx)) {
+    const rawPrefill = ctx.prefill[element.key];
+    const initialFiles = Array.isArray(rawPrefill) ? rawPrefill : [];
+    const filesWrapper = document.createElement("div");
+    filesWrapper.className = "space-y-2";
+    filesWrapper.dataset.filesWrapper = pathKey;
+    const filesList = document.createElement("div");
+    filesList.className = "files-list";
+    initialFiles.forEach((resourceId) => {
+      const pill = document.createElement("div");
+      pill.className = "resource-pill";
+      pill.dataset.resourceId = resourceId;
+      filesList.appendChild(pill);
+    });
+    filesWrapper.appendChild(filesList);
+    wrapper.appendChild(filesWrapper);
     const resultsWrapper = document.createElement("div");
     resultsWrapper.className = "space-y-4";
-    const initialFiles = ctx.prefill[element.key] || [];
     if (initialFiles.length > 0) {
       initialFiles.forEach((resourceId) => {
         renderFilePreviewReadonly(resourceId, state).then((filePreview) => {
@@ -3227,6 +3283,7 @@ function renderMultipleFileElement(element, ctx, wrapper, pathKey) {
   } else {
     const filesWrapper = document.createElement("div");
     filesWrapper.className = "space-y-2";
+    filesWrapper.dataset.filesWrapper = pathKey;
     const filesPicker = document.createElement("input");
     filesPicker.type = "file";
     filesPicker.name = pathKey;
@@ -3344,10 +3401,9 @@ function validateFileElement(element, key, context) {
   };
   if (isMultipleField) {
     const fullKey = pathJoin(path, key);
-    const pickerInput = scopeRoot.querySelector(
-      `input[type="file"][name="${fullKey}"]`
+    const filesWrapper = scopeRoot.querySelector(
+      `[data-files-wrapper="${fullKey}"]`
     );
-    const filesWrapper = pickerInput == null ? void 0 : pickerInput.closest(".space-y-2");
     const container = (filesWrapper == null ? void 0 : filesWrapper.querySelector(".files-list")) || null;
     const resourceIds = [];
     if (container) {
@@ -3608,15 +3664,16 @@ function createEditColourUI(value, pathKey, ctx) {
 }
 function renderColourElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
+  const readonly = isElementReadonly(element, state, ctx);
   const initialValue = ctx.prefill[element.key] || element.default || "#000000";
-  if (state.config.readonly) {
+  if (readonly) {
     const readonlyUI = createReadonlyColourUI(initialValue);
     wrapper.appendChild(readonlyUI);
   } else {
     const editUI = createEditColourUI(initialValue, pathKey, ctx);
     wrapper.appendChild(editUI);
   }
-  if (!state.config.readonly) {
+  if (!readonly) {
     const colourHint = document.createElement("p");
     colourHint.className = "mt-1";
     colourHint.style.cssText = `
@@ -3630,6 +3687,7 @@ function renderColourElement(element, ctx, wrapper, pathKey) {
 function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
   var _a, _b;
   const state = ctx.state;
+  const readonly = isElementReadonly(element, state, ctx);
   const prefillValues = ctx.prefill[element.key] || [];
   const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
   const minCount = (_a = element.minCount) != null ? _a : 1;
@@ -3652,7 +3710,7 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
   function addColourItem(value = "#000000", index = -1) {
     const itemWrapper = document.createElement("div");
     itemWrapper.className = "multiple-colour-item flex items-center gap-2";
-    if (state.config.readonly) {
+    if (readonly) {
       const readonlyUI = createReadonlyColourUI(value);
       while (readonlyUI.firstChild) {
         itemWrapper.appendChild(readonlyUI.firstChild);
@@ -3672,7 +3730,7 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
     return itemWrapper;
   }
   function updateRemoveButtons() {
-    if (state.config.readonly) return;
+    if (readonly) return;
     const items = container.querySelectorAll(".multiple-colour-item");
     const currentCount = items.length;
     items.forEach((item) => {
@@ -3717,7 +3775,7 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
   }
   let addRow = null;
   let countDisplay = null;
-  if (!state.config.readonly) {
+  if (!readonly) {
     addRow = document.createElement("div");
     addRow.className = "flex items-center gap-3 mt-2";
     const addBtn = document.createElement("button");
@@ -3764,7 +3822,7 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
   values.forEach((value) => addColourItem(value));
   updateAddButton();
   updateRemoveButtons();
-  if (!state.config.readonly) {
+  if (!readonly) {
     const hint = document.createElement("p");
     hint.className = "mt-1";
     hint.style.cssText = `
@@ -3835,7 +3893,9 @@ function validateColourElement(element, key, context) {
     return normalized;
   };
   if (element.multiple) {
-    const hexInputs = scopeRoot.querySelectorAll(`[name^="${key}["].colour-hex-input`);
+    const hexInputs = scopeRoot.querySelectorAll(
+      `[name^="${key}["].colour-hex-input`
+    );
     const values = [];
     hexInputs.forEach((input, index) => {
       var _a2;
@@ -3883,7 +3943,9 @@ function updateColourField(element, fieldPath, value, context) {
       );
       return;
     }
-    const hexInputs = scopeRoot.querySelectorAll(`[name^="${fieldPath}["].colour-hex-input`);
+    const hexInputs = scopeRoot.querySelectorAll(
+      `[name^="${fieldPath}["].colour-hex-input`
+    );
     hexInputs.forEach((hexInput, index) => {
       if (index < value.length) {
         const normalized = normalizeColourValue(value[index]);
@@ -4080,6 +4142,7 @@ function renderSliderElement(element, ctx, wrapper, pathKey) {
     );
   }
   const state = ctx.state;
+  const readonly = isElementReadonly(element, state, ctx);
   const defaultValue = element.default !== void 0 ? element.default : (element.min + element.max) / 2;
   const initialValue = (_a = ctx.prefill[element.key]) != null ? _a : defaultValue;
   const sliderUI = createSliderUI(
@@ -4087,10 +4150,10 @@ function renderSliderElement(element, ctx, wrapper, pathKey) {
     pathKey,
     element,
     ctx,
-    state.config.readonly
+    readonly
   );
   wrapper.appendChild(sliderUI);
-  if (!state.config.readonly) {
+  if (!readonly) {
     const hint = document.createElement("p");
     hint.className = "mt-1";
     hint.style.cssText = `
@@ -4115,6 +4178,7 @@ function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
     );
   }
   const state = ctx.state;
+  const readonly = isElementReadonly(element, state, ctx);
   const prefillValues = ctx.prefill[element.key] || [];
   const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
   const minCount = (_a = element.minCount) != null ? _a : 1;
@@ -4139,13 +4203,7 @@ function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
     const itemWrapper = document.createElement("div");
     itemWrapper.className = "multiple-slider-item flex items-start gap-2";
     const tempPathKey = `${pathKey}[${container.children.length}]`;
-    const sliderUI = createSliderUI(
-      value,
-      tempPathKey,
-      element,
-      ctx,
-      state.config.readonly
-    );
+    const sliderUI = createSliderUI(value, tempPathKey, element, ctx, readonly);
     sliderUI.style.flex = "1";
     itemWrapper.appendChild(sliderUI);
     if (index === -1) {
@@ -4157,7 +4215,7 @@ function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
     return itemWrapper;
   }
   function updateRemoveButtons() {
-    if (state.config.readonly) return;
+    if (readonly) return;
     const items = container.querySelectorAll(".multiple-slider-item");
     const currentCount = items.length;
     items.forEach((item) => {
@@ -4203,7 +4261,7 @@ function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
   }
   let addRow = null;
   let countDisplay = null;
-  if (!state.config.readonly) {
+  if (!readonly) {
     addRow = document.createElement("div");
     addRow.className = "flex items-center gap-3 mt-2";
     const addBtn = document.createElement("button");
@@ -4249,7 +4307,7 @@ function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
   values.forEach((value) => addSliderItem(value));
   updateAddButton();
   updateRemoveButtons();
-  if (!state.config.readonly) {
+  if (!readonly) {
     const hint = document.createElement("p");
     hint.className = "mt-1";
     hint.style.cssText = `
@@ -4491,9 +4549,7 @@ function mergeWithDefaults(prefill, defaults) {
 }
 function extractRootFormData(formRoot) {
   const data = {};
-  const inputs = formRoot.querySelectorAll(
-    "input, select, textarea"
-  );
+  const inputs = formRoot.querySelectorAll("input, select, textarea");
   inputs.forEach((input) => {
     const fieldName = input.getAttribute("name");
     if (fieldName && !fieldName.includes("[") && !fieldName.includes(".")) {
@@ -4558,7 +4614,8 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
   } else {
     itemsWrap.className = `grid grid-cols-${columns} gap-4`;
   }
-  if (!ctx.state.config.readonly) {
+  const containerIsReadonly = isElementReadonly(element, ctx.state, ctx);
+  if (!containerIsReadonly) {
     const hintsElement = createPrefillHints(element, pathKey);
     if (hintsElement) {
       containerWrap.appendChild(hintsElement);
@@ -4573,13 +4630,16 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
     // Merged prefill with defaults for enableIf evaluation
     formData: (_b = ctx.formData) != null ? _b : ctx.prefill,
     // Complete root data for enableIf evaluation
-    state: ctx.state
+    state: ctx.state,
+    inheritedReadonly: containerIsReadonly || ctx.inheritedReadonly
   };
   element.elements.forEach((child) => {
     var _a2, _b2;
     if (child.hidden || child.type === "hidden") {
       const prefillVal = (_b2 = (_a2 = containerPrefill[child.key]) != null ? _a2 : child.default) != null ? _b2 : null;
-      itemsWrap.appendChild(createHiddenInput(pathJoin(subCtx.path, child.key), prefillVal));
+      itemsWrap.appendChild(
+        createHiddenInput(pathJoin(subCtx.path, child.key), prefillVal)
+      );
     } else {
       itemsWrap.appendChild(renderElement(child, subCtx));
     }
@@ -4590,13 +4650,15 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
 function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   var _a, _b, _c, _d;
   const state = ctx.state;
+  const containerIsReadonly = isElementReadonly(element, state, ctx);
+  const childInheritedReadonly = containerIsReadonly || ctx.inheritedReadonly;
   const containerWrap = document.createElement("div");
   containerWrap.className = "border border-gray-200 rounded-lg p-4 bg-gray-50";
   const countDisplay = document.createElement("span");
   countDisplay.className = "text-sm text-gray-500";
   const itemsWrap = document.createElement("div");
   itemsWrap.className = "space-y-4";
-  if (!ctx.state.config.readonly) {
+  if (!containerIsReadonly) {
     const hintsElement = createPrefillHints(element, element.key);
     if (hintsElement) {
       containerWrap.appendChild(hintsElement);
@@ -4634,8 +4696,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
           path: pathJoin(ctx.path, `${element.key}[${idx}]`),
           prefill: childDefaults,
           // Defaults for enableIf evaluation
-          formData: currentFormData
+          formData: currentFormData,
           // Current root data from DOM for enableIf
+          inheritedReadonly: childInheritedReadonly
         };
         const item = document.createElement("div");
         item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
@@ -4650,13 +4713,18 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         element.elements.forEach((child) => {
           var _a2;
           if (child.hidden || child.type === "hidden") {
-            childWrapper.appendChild(createHiddenInput(pathJoin(subCtx.path, child.key), (_a2 = child.default) != null ? _a2 : null));
+            childWrapper.appendChild(
+              createHiddenInput(
+                pathJoin(subCtx.path, child.key),
+                (_a2 = child.default) != null ? _a2 : null
+              )
+            );
           } else {
             childWrapper.appendChild(renderElement(child, subCtx));
           }
         });
         item.appendChild(childWrapper);
-        if (!state.config.readonly) {
+        if (!containerIsReadonly) {
           const rem = document.createElement("button");
           rem.type = "button";
           rem.className = "absolute top-2 right-2 px-2 py-1 rounded";
@@ -4707,8 +4775,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         path: pathJoin(ctx.path, `${element.key}[${idx}]`),
         prefill: mergedPrefill,
         // Merged prefill with defaults for enableIf
-        formData: (_a2 = ctx.formData) != null ? _a2 : ctx.prefill
+        formData: (_a2 = ctx.formData) != null ? _a2 : ctx.prefill,
         // Complete root data for enableIf
+        inheritedReadonly: childInheritedReadonly
       };
       const item = document.createElement("div");
       item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
@@ -4724,13 +4793,15 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         var _a3, _b2;
         if (child.hidden || child.type === "hidden") {
           const prefillVal = (_b2 = (_a3 = prefillObj == null ? void 0 : prefillObj[child.key]) != null ? _a3 : child.default) != null ? _b2 : null;
-          childWrapper.appendChild(createHiddenInput(pathJoin(subCtx.path, child.key), prefillVal));
+          childWrapper.appendChild(
+            createHiddenInput(pathJoin(subCtx.path, child.key), prefillVal)
+          );
         } else {
           childWrapper.appendChild(renderElement(child, subCtx));
         }
       });
       item.appendChild(childWrapper);
-      if (!state.config.readonly) {
+      if (!containerIsReadonly) {
         const rem = document.createElement("button");
         rem.type = "button";
         rem.className = "absolute top-2 right-2 px-2 py-1 rounded";
@@ -4753,7 +4824,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       itemsWrap.appendChild(item);
     });
   }
-  if (!state.config.readonly) {
+  if (!containerIsReadonly) {
     while (countItems() < min) {
       const idx = countItems();
       const subCtx = {
@@ -4761,8 +4832,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         path: pathJoin(ctx.path, `${element.key}[${idx}]`),
         prefill: childDefaults,
         // Defaults for enableIf evaluation
-        formData: (_d = ctx.formData) != null ? _d : ctx.prefill
+        formData: (_d = ctx.formData) != null ? _d : ctx.prefill,
         // Complete root data for enableIf
+        inheritedReadonly: childInheritedReadonly
       };
       const item = document.createElement("div");
       item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
@@ -4777,7 +4849,12 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       element.elements.forEach((child) => {
         var _a2;
         if (child.hidden || child.type === "hidden") {
-          childWrapper.appendChild(createHiddenInput(pathJoin(subCtx.path, child.key), (_a2 = child.default) != null ? _a2 : null));
+          childWrapper.appendChild(
+            createHiddenInput(
+              pathJoin(subCtx.path, child.key),
+              (_a2 = child.default) != null ? _a2 : null
+            )
+          );
         } else {
           childWrapper.appendChild(renderElement(child, subCtx));
         }
@@ -4809,7 +4886,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
     }
   }
   containerWrap.appendChild(itemsWrap);
-  if (!state.config.readonly) {
+  if (!containerIsReadonly) {
     const addRow = document.createElement("div");
     addRow.className = "flex items-center gap-3 mt-2";
     addRow.appendChild(createAddButton());
@@ -4972,8 +5049,10 @@ function updateContainerField(element, fieldPath, value, context) {
             const filesKey = (_b = richChild.filesKey) != null ? _b : "files";
             const containerValue = itemValue;
             const compositeValue = {};
-            if (textKey in containerValue) compositeValue[textKey] = containerValue[textKey];
-            if (filesKey in containerValue) compositeValue[filesKey] = containerValue[filesKey];
+            if (textKey in containerValue)
+              compositeValue[textKey] = containerValue[textKey];
+            if (filesKey in containerValue)
+              compositeValue[filesKey] = containerValue[filesKey];
             if (Object.keys(compositeValue).length > 0) {
               instance.updateField(childPath, compositeValue);
             }
@@ -5010,8 +5089,10 @@ function updateContainerField(element, fieldPath, value, context) {
         const filesKey = (_b = richChild.filesKey) != null ? _b : "files";
         const containerValue = value;
         const compositeValue = {};
-        if (textKey in containerValue) compositeValue[textKey] = containerValue[textKey];
-        if (filesKey in containerValue) compositeValue[filesKey] = containerValue[filesKey];
+        if (textKey in containerValue)
+          compositeValue[textKey] = containerValue[textKey];
+        if (filesKey in containerValue)
+          compositeValue[filesKey] = containerValue[filesKey];
         if (Object.keys(compositeValue).length > 0) {
           instance.updateField(childPath, compositeValue);
         }
@@ -5357,12 +5438,21 @@ function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
   const hiddenInput = document.createElement("input");
   hiddenInput.type = "hidden";
   hiddenInput.name = pathKey;
-  hiddenInput.value = JSON.stringify({ [cellsKey]: cells, [mergesKey]: merges });
+  hiddenInput.value = JSON.stringify({
+    [cellsKey]: cells,
+    [mergesKey]: merges
+  });
   wrapper.appendChild(hiddenInput);
   function persistValue() {
-    hiddenInput.value = JSON.stringify({ [cellsKey]: cells, [mergesKey]: merges });
+    hiddenInput.value = JSON.stringify({
+      [cellsKey]: cells,
+      [mergesKey]: merges
+    });
     if (instance) {
-      instance.triggerOnChange(pathKey, { [cellsKey]: cells, [mergesKey]: merges });
+      instance.triggerOnChange(pathKey, {
+        [cellsKey]: cells,
+        [mergesKey]: merges
+      });
     }
   }
   hiddenInput._applyExternalUpdate = (data) => {
@@ -5422,9 +5512,7 @@ function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
       rebuild();
     } catch (e) {
       const errMsg = e instanceof Error ? e.message : String(e);
-      console.error(
-        t("tableImportError", state).replace("{error}", errMsg)
-      );
+      console.error(t("tableImportError", state).replace("{error}", errMsg));
     } finally {
       overlay.remove();
     }
@@ -5574,15 +5662,19 @@ function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
     contextMenu.style.display = "none";
   }
   const menuDismissCtrl = new AbortController();
-  document.addEventListener("mousedown", (e) => {
-    if (!wrapper.isConnected) {
-      menuDismissCtrl.abort();
-      return;
-    }
-    if (!contextMenu.contains(e.target)) {
-      hideContextMenu();
-    }
-  }, { signal: menuDismissCtrl.signal });
+  document.addEventListener(
+    "mousedown",
+    (e) => {
+      if (!wrapper.isConnected) {
+        menuDismissCtrl.abort();
+        return;
+      }
+      if (!contextMenu.contains(e.target)) {
+        hideContextMenu();
+      }
+    },
+    { signal: menuDismissCtrl.signal }
+  );
   function applySelectionStyles() {
     const range = selectionRange(sel);
     const allTds = tableEl.querySelectorAll("td[data-row]");
@@ -5935,7 +6027,9 @@ function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
       if (!anchor) return;
       const text = (_b3 = (_a3 = e.clipboardData) == null ? void 0 : _a3.getData("text/plain")) != null ? _b3 : "";
       const isMultiCell = text.includes("	") || text.split(/\r?\n/).filter((l) => l).length > 1;
-      const editing = tableEl.querySelector("[contenteditable='true']");
+      const editing = tableEl.querySelector(
+        "[contenteditable='true']"
+      );
       if (editing && !isMultiCell) return;
       e.preventDefault();
       if (editing) {
@@ -6095,7 +6189,11 @@ function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
     }
     function updateTopZoneOverlays(mx, wr, tblR, scrollL, active) {
       var _a3;
-      const headerCells = active ? Array.from(tableEl.querySelectorAll("thead td[data-col]")) : [];
+      const headerCells = active ? Array.from(
+        tableEl.querySelectorAll(
+          "thead td[data-col]"
+        )
+      ) : [];
       let closestColIdx = -1;
       let closestColDist = Infinity;
       let closestBorderX = -1;
@@ -6113,7 +6211,10 @@ function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
         if (borderDist < closestBorderDist && borderDist < 20) {
           closestBorderDist = borderDist;
           closestBorderX = cellRect.right - wr.left + scrollL;
-          closestAfterCol = parseInt((_a3 = headerCells[i].getAttribute("data-col")) != null ? _a3 : "0", 10);
+          closestAfterCol = parseInt(
+            (_a3 = headerCells[i].getAttribute("data-col")) != null ? _a3 : "0",
+            10
+          );
         }
       }
       colRemoveBtns.forEach((btn, idx) => {
@@ -6169,7 +6270,10 @@ function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
           closestRowBorderDist = borderDist;
           closestBorderY = trRect.bottom - wr.top;
           const firstTd = allRowEls[i].querySelector("td[data-row]");
-          closestAfterRow = parseInt((_a3 = firstTd == null ? void 0 : firstTd.getAttribute("data-row")) != null ? _a3 : "0", 10);
+          closestAfterRow = parseInt(
+            (_a3 = firstTd == null ? void 0 : firstTd.getAttribute("data-row")) != null ? _a3 : "0",
+            10
+          );
         }
       }
       rowRemoveBtns.forEach((btn, idx) => {
@@ -6195,7 +6299,8 @@ function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
     let rafPending = false;
     tableWrapper.onmousemove = (e) => {
       const target = e.target;
-      if (target.tagName === "BUTTON" && target.parentElement === tableWrapper) return;
+      if (target.tagName === "BUTTON" && target.parentElement === tableWrapper)
+        return;
       if (rafPending) return;
       rafPending = true;
       const mx = e.clientX;
@@ -6256,6 +6361,7 @@ function isTableDataWithFieldNames(v, cellsKey) {
 function renderTableElement(element, ctx, wrapper, pathKey) {
   var _a, _b, _c, _d;
   const state = ctx.state;
+  const readonly = isElementReadonly(element, state, ctx);
   const rawPrefill = ctx.prefill[element.key];
   const cellsKey = (_b = (_a = element.fieldNames) == null ? void 0 : _a.cells) != null ? _b : "cells";
   const mergesKey = (_d = (_c = element.fieldNames) == null ? void 0 : _c.merges) != null ? _d : "merges";
@@ -6290,11 +6396,13 @@ function renderTableElement(element, ctx, wrapper, pathKey) {
     const cols = rows > 0 ? initialData.cells[0].length : 0;
     const err = validateMerges(initialData.merges, rows, cols);
     if (err) {
-      console.warn(`Table "${element.key}": invalid prefill merges stripped (${err})`);
+      console.warn(
+        `Table "${element.key}": invalid prefill merges stripped (${err})`
+      );
       initialData = { ...initialData, merges: [] };
     }
   }
-  if (state.config.readonly) {
+  if (readonly) {
     renderReadonlyTable(initialData, wrapper);
   } else {
     renderEditTable(element, initialData, pathKey, ctx, wrapper);
@@ -6990,14 +7098,20 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
   let mentionTooltip = null;
   backdrop.addEventListener("mouseover", (e) => {
     var _a2, _b;
-    const mark = (_b = (_a2 = e.target).closest) == null ? void 0 : _b.call(_a2, "mark");
+    const mark = (_b = (_a2 = e.target).closest) == null ? void 0 : _b.call(
+      _a2,
+      "mark"
+    );
     if (!(mark == null ? void 0 : mark.dataset.rid)) return;
     mentionTooltip = removePortalTooltip(mentionTooltip);
     mentionTooltip = showMentionTooltip(mark, mark.dataset.rid, state);
   });
   backdrop.addEventListener("mouseout", (e) => {
     var _a2, _b, _c;
-    const mark = (_b = (_a2 = e.target).closest) == null ? void 0 : _b.call(_a2, "mark");
+    const mark = (_b = (_a2 = e.target).closest) == null ? void 0 : _b.call(
+      _a2,
+      "mark"
+    );
     if (!mark) return;
     const related = e.relatedTarget;
     if ((_c = related == null ? void 0 : related.closest) == null ? void 0 : _c.call(related, "mark")) return;
@@ -7005,7 +7119,10 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
   });
   backdrop.addEventListener("mousedown", (e) => {
     var _a2, _b;
-    const mark = (_b = (_a2 = e.target).closest) == null ? void 0 : _b.call(_a2, "mark");
+    const mark = (_b = (_a2 = e.target).closest) == null ? void 0 : _b.call(
+      _a2,
+      "mark"
+    );
     if (!mark) return;
     mentionTooltip = removePortalTooltip(mentionTooltip);
     const marks = backdrop.querySelectorAll("mark");
@@ -7258,11 +7375,7 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
   textarea.addEventListener("keydown", (e) => {
     if (!dropdownState.open) return;
     const labels = buildFileLabelsFromClosure();
-    const filtered = filterFilesForDropdown(
-      dropdownState.query,
-      files,
-      labels
-    );
+    const filtered = filterFilesForDropdown(dropdownState.query, files, labels);
     if (e.key === "ArrowDown") {
       e.preventDefault();
       dropdownState.selectedIndex = Math.min(
@@ -7597,6 +7710,7 @@ function renderReadonlyMode(_element, ctx, wrapper, _pathKey, value) {
 function renderRichInputElement(element, ctx, wrapper, pathKey) {
   var _a, _b, _c, _d;
   const state = ctx.state;
+  const readonly = isElementReadonly(element, state, ctx);
   const textKey = (_a = element.textKey) != null ? _a : "text";
   const filesKey = (_b = element.filesKey) != null ? _b : "files";
   let initialValue;
@@ -7634,7 +7748,7 @@ function renderRichInputElement(element, ctx, wrapper, pathKey) {
       });
     }
   }
-  if (state.config.readonly) {
+  if (readonly) {
     renderReadonlyMode(element, ctx, wrapper, pathKey, initialValue);
   } else {
     if (!state.config.uploadFile) {
@@ -7697,9 +7811,7 @@ function validateRichInputElement(element, key, context) {
       }
     }
     if (element.maxFiles != null && files.length > element.maxFiles) {
-      errors.push(
-        `${key}: ${t("maxFiles", state, { max: element.maxFiles })}`
-      );
+      errors.push(`${key}: ${t("maxFiles", state, { max: element.maxFiles })}`);
     }
   }
   return { value, errors, spread: !!element.flatOutput };
@@ -7817,9 +7929,7 @@ function shouldDisableElement(element, ctx) {
   return false;
 }
 function extractDOMValue(fieldPath, formRoot) {
-  const input = formRoot.querySelector(
-    `[name="${fieldPath}"]`
-  );
+  const input = formRoot.querySelector(`[name="${fieldPath}"]`);
   if (!input) {
     return void 0;
   }
@@ -7865,9 +7975,7 @@ function reevaluateEnableIf(wrapper, element, ctx) {
         `[data-container-item="${containerKey}[${containerIndex}]"]`
       );
       if (containerItemElement) {
-        const inputs = containerItemElement.querySelectorAll(
-          "input, select, textarea"
-        );
+        const inputs = containerItemElement.querySelectorAll("input, select, textarea");
         inputs.forEach((input) => {
           const fieldName = input.getAttribute("name");
           if (fieldName) {
@@ -7919,7 +8027,10 @@ function reevaluateEnableIf(wrapper, element, ctx) {
       wrapper.setAttribute("data-conditionally-disabled", "true");
     }
   } catch (error) {
-    console.error(`Error re-evaluating enableIf for field "${element.key}":`, error);
+    console.error(
+      `Error re-evaluating enableIf for field "${element.key}":`,
+      error
+    );
   }
 }
 function setupEnableIfListeners(wrapper, element, ctx) {
@@ -7941,14 +8052,10 @@ function setupEnableIfListeners(wrapper, element, ctx) {
   } else {
     dependencyFieldPath = dependencyKey;
   }
-  const dependencyInput = formRoot.querySelector(
-    `[name="${dependencyFieldPath}"]`
-  );
+  const dependencyInput = formRoot.querySelector(`[name="${dependencyFieldPath}"]`);
   if (!dependencyInput) {
     const observer = new MutationObserver(() => {
-      const input = formRoot.querySelector(
-        `[name="${dependencyFieldPath}"]`
-      );
+      const input = formRoot.querySelector(`[name="${dependencyFieldPath}"]`);
       if (input) {
         input.addEventListener("change", () => {
           reevaluateEnableIf(wrapper, element, ctx);
@@ -8095,7 +8202,9 @@ function dispatchToRenderer(element, ctx, wrapper, pathKey) {
     default: {
       const unsupported = document.createElement("div");
       unsupported.className = "text-red-500 text-sm";
-      unsupported.textContent = t("unsupportedFieldType", ctx.state, { type: element.type });
+      unsupported.textContent = t("unsupportedFieldType", ctx.state, {
+        type: element.type
+      });
       wrapper.appendChild(unsupported);
     }
   }
@@ -9049,7 +9158,10 @@ var FormBuilderInstance = class {
       );
       if (componentResult !== null) {
         errors.push(...componentResult.errors);
-        return { value: componentResult.value, spread: !!componentResult.spread };
+        return {
+          value: componentResult.value,
+          spread: !!componentResult.spread
+        };
       }
       console.warn(`Unknown field type "${element.type}" for key "${key}"`);
       return { value: null, spread: false };
@@ -9059,10 +9171,7 @@ var FormBuilderInstance = class {
       var _a;
       if (element.enableIf) {
         try {
-          const shouldEnable = evaluateEnableCondition(
-            element.enableIf,
-            data
-          );
+          const shouldEnable = evaluateEnableCondition(element.enableIf, data);
           if (!shouldEnable) {
             return;
           }
@@ -9359,7 +9468,10 @@ var FormBuilderInstance = class {
                 disabledWrapper.className = "fb-field-wrapper-disabled";
                 disabledWrapper.style.display = "none";
                 disabledWrapper.setAttribute("data-field-key", element.key);
-                disabledWrapper.setAttribute("data-conditionally-disabled", "true");
+                disabledWrapper.setAttribute(
+                  "data-conditionally-disabled",
+                  "true"
+                );
                 (_c = wrapper.parentNode) == null ? void 0 : _c.replaceChild(disabledWrapper, wrapper);
               }
             } catch (error) {