@dmitryvim/form-builder 0.2.24 → 0.2.26

package/dist/esm/index.js

@@ -6,7 +6,10 @@ function t(key, state, params) {
   let text = localeTranslations?.[key] || 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;
@@ -249,6 +252,9 @@ function validateSchema(schema) {
 }
 
 // src/utils/helpers.ts
+function isElementReadonly(element, state, ctx) {
+  return element.readonly === true || state.config.readonly === true || ctx?.inheritedReadonly === true;
+}
 function isPlainObject(obj) {
   return obj && typeof obj === "object" && obj.constructor === Object;
 }
@@ -407,6 +413,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");
@@ -417,7 +424,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);
@@ -428,8 +435,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)`;
@@ -450,7 +457,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);
@@ -459,7 +466,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);
   }
@@ -467,6 +474,7 @@ function renderTextElement(element, ctx, wrapper, pathKey) {
 }
 function renderMultipleTextElement(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 = element.minCount ?? 1;
@@ -498,7 +506,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);
@@ -508,8 +516,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)`;
@@ -530,7 +538,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);
@@ -539,7 +547,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);
     }
@@ -553,7 +561,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) => {
@@ -598,7 +606,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");
@@ -806,6 +814,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");
@@ -815,8 +824,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);
@@ -824,11 +833,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);
   }
@@ -836,6 +845,7 @@ function renderTextareaElement(element, ctx, wrapper, pathKey) {
 }
 function renderMultipleTextareaElement(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 = element.minCount ?? 1;
@@ -866,8 +876,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);
@@ -875,11 +885,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);
     }
@@ -893,7 +903,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) => {
@@ -927,7 +937,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");
@@ -961,7 +971,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;
@@ -980,7 +992,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(
@@ -1041,6 +1053,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");
@@ -1053,8 +1066,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);
@@ -1063,7 +1076,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);
   }
@@ -1071,6 +1084,7 @@ function renderNumberElement(element, ctx, wrapper, pathKey) {
 }
 function renderMultipleNumberElement(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 = element.minCount ?? 1;
@@ -1104,8 +1118,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);
@@ -1114,7 +1128,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);
     }
@@ -1128,7 +1142,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) => {
@@ -1162,7 +1176,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");
@@ -1367,10 +1381,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;
@@ -1380,14 +1395,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);
@@ -1396,6 +1411,7 @@ function renderSelectElement(element, ctx, wrapper, pathKey) {
 }
 function renderMultipleSelectElement(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 = element.minCount ?? 1;
@@ -1420,7 +1436,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;
@@ -1430,7 +1446,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);
       };
@@ -1446,7 +1462,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) => {
@@ -1478,7 +1494,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");
@@ -1525,7 +1541,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);
@@ -1741,12 +1757,14 @@ function buildSegmentedGroup(element, currentValue, hiddenInput, readonly, onCha
 }
 function renderSwitcherElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
-  const initialValue = String(ctx.prefill[element.key] ?? element.default ?? "");
+  const initialValue = String(
+    ctx.prefill[element.key] ?? element.default ?? ""
+  );
   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;
@@ -1775,7 +1793,7 @@ function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
   while (values.length < minCount) {
     values.push(element.default || element.options?.[0]?.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);
@@ -2178,9 +2196,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) {
@@ -2288,6 +2304,10 @@ async function renderFilePreview(container, resourceId, state, options = {}) {
       meta,
       state
     );
+    const isVideo = meta?.type?.startsWith("video/");
+    if (!isReadonly && !isVideo) {
+      renderDeleteButton(container, resourceId, state);
+    }
   }
 }
 async function renderFilePreviewReadonly(resourceId, state, fileName) {
@@ -2988,9 +3008,15 @@ function setupFilesPickerHandler(filesPicker, initialFiles, state, updateCallbac
 }
 function renderFileElement(element, ctx, wrapper, pathKey) {
   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) => {
@@ -3078,10 +3104,24 @@ function renderFileElement(element, ctx, wrapper, pathKey) {
 }
 function renderFilesElement(element, ctx, wrapper, pathKey) {
   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) => {
@@ -3112,6 +3152,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;
@@ -3161,10 +3202,24 @@ function renderMultipleFileElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
   const minFiles = element.minCount ?? 0;
   const maxFiles = element.maxCount ?? 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) => {
@@ -3180,6 +3235,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;
@@ -3293,10 +3349,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?.closest(".space-y-2");
     const container = filesWrapper?.querySelector(".files-list") || null;
     const resourceIds = [];
     if (container) {
@@ -3555,15 +3610,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 = `
@@ -3576,6 +3632,7 @@ function renderColourElement(element, ctx, wrapper, pathKey) {
 }
 function renderMultipleColourElement(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 = element.minCount ?? 1;
@@ -3598,7 +3655,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);
@@ -3618,7 +3675,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) => {
@@ -3663,7 +3720,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");
@@ -3710,7 +3767,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 = `
@@ -3779,7 +3836,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) => {
       const val = input?.value ?? "";
@@ -3826,7 +3885,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]);
@@ -4021,6 +4082,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 = ctx.prefill[element.key] ?? defaultValue;
   const sliderUI = createSliderUI(
@@ -4028,10 +4090,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 = `
@@ -4055,6 +4117,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 = element.minCount ?? 1;
@@ -4079,13 +4142,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) {
@@ -4097,7 +4154,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) => {
@@ -4143,7 +4200,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");
@@ -4189,7 +4246,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 = `
@@ -4428,9 +4485,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(".")) {
@@ -4494,7 +4549,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);
@@ -4509,12 +4565,15 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
     // Merged prefill with defaults for enableIf evaluation
     formData: ctx.formData ?? ctx.prefill,
     // Complete root data for enableIf evaluation
-    state: ctx.state
+    state: ctx.state,
+    inheritedReadonly: containerIsReadonly || ctx.inheritedReadonly
   };
   element.elements.forEach((child) => {
     if (child.hidden || child.type === "hidden") {
       const prefillVal = containerPrefill[child.key] ?? child.default ?? 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));
     }
@@ -4524,13 +4583,15 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
 }
 function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   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);
@@ -4568,8 +4629,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";
@@ -4583,13 +4645,18 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         }
         element.elements.forEach((child) => {
           if (child.hidden || child.type === "hidden") {
-            childWrapper.appendChild(createHiddenInput(pathJoin(subCtx.path, child.key), child.default ?? null));
+            childWrapper.appendChild(
+              createHiddenInput(
+                pathJoin(subCtx.path, child.key),
+                child.default ?? 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";
@@ -4639,8 +4706,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         path: pathJoin(ctx.path, `${element.key}[${idx}]`),
         prefill: mergedPrefill,
         // Merged prefill with defaults for enableIf
-        formData: ctx.formData ?? ctx.prefill
+        formData: ctx.formData ?? 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";
@@ -4655,13 +4723,15 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       element.elements.forEach((child) => {
         if (child.hidden || child.type === "hidden") {
           const prefillVal = prefillObj?.[child.key] ?? child.default ?? 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";
@@ -4684,7 +4754,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       itemsWrap.appendChild(item);
     });
   }
-  if (!state.config.readonly) {
+  if (!containerIsReadonly) {
     while (countItems() < min) {
       const idx = countItems();
       const subCtx = {
@@ -4692,8 +4762,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         path: pathJoin(ctx.path, `${element.key}[${idx}]`),
         prefill: childDefaults,
         // Defaults for enableIf evaluation
-        formData: ctx.formData ?? ctx.prefill
+        formData: ctx.formData ?? 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";
@@ -4707,7 +4778,12 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       }
       element.elements.forEach((child) => {
         if (child.hidden || child.type === "hidden") {
-          childWrapper.appendChild(createHiddenInput(pathJoin(subCtx.path, child.key), child.default ?? null));
+          childWrapper.appendChild(
+            createHiddenInput(
+              pathJoin(subCtx.path, child.key),
+              child.default ?? null
+            )
+          );
         } else {
           childWrapper.appendChild(renderElement(child, subCtx));
         }
@@ -4739,7 +4815,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());
@@ -4898,8 +4974,10 @@ function updateContainerField(element, fieldPath, value, context) {
             const filesKey = richChild.filesKey ?? "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);
             }
@@ -4935,8 +5013,10 @@ function updateContainerField(element, fieldPath, value, context) {
         const filesKey = richChild.filesKey ?? "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);
         }
@@ -5274,12 +5354,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) => {
@@ -5338,9 +5427,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();
     }
@@ -5488,15 +5575,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]");
@@ -5842,7 +5933,9 @@ function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
       if (!anchor) return;
       const text = e.clipboardData?.getData("text/plain") ?? "";
       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) {
@@ -5998,7 +6091,11 @@ function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
       }
     }
     function updateTopZoneOverlays(mx, wr, tblR, scrollL, active) {
-      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;
@@ -6016,7 +6113,10 @@ function renderEditTable(element, initialData, pathKey, ctx, wrapper) {
         if (borderDist < closestBorderDist && borderDist < 20) {
           closestBorderDist = borderDist;
           closestBorderX = cellRect.right - wr.left + scrollL;
-          closestAfterCol = parseInt(headerCells[i].getAttribute("data-col") ?? "0", 10);
+          closestAfterCol = parseInt(
+            headerCells[i].getAttribute("data-col") ?? "0",
+            10
+          );
         }
       }
       colRemoveBtns.forEach((btn, idx) => {
@@ -6071,7 +6171,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(firstTd?.getAttribute("data-row") ?? "0", 10);
+          closestAfterRow = parseInt(
+            firstTd?.getAttribute("data-row") ?? "0",
+            10
+          );
         }
       }
       rowRemoveBtns.forEach((btn, idx) => {
@@ -6097,7 +6200,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;
@@ -6156,6 +6260,7 @@ function isTableDataWithFieldNames(v, cellsKey) {
 }
 function renderTableElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
+  const readonly = isElementReadonly(element, state, ctx);
   const rawPrefill = ctx.prefill[element.key];
   const cellsKey = element.fieldNames?.cells ?? "cells";
   const mergesKey = element.fieldNames?.merges ?? "merges";
@@ -6190,11 +6295,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);
@@ -6871,20 +6978,26 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
   });
   let mentionTooltip = null;
   backdrop.addEventListener("mouseover", (e) => {
-    const mark = e.target.closest?.("mark");
+    const mark = e.target.closest?.(
+      "mark"
+    );
     if (!mark?.dataset.rid) return;
     mentionTooltip = removePortalTooltip(mentionTooltip);
     mentionTooltip = showMentionTooltip(mark, mark.dataset.rid, state);
   });
   backdrop.addEventListener("mouseout", (e) => {
-    const mark = e.target.closest?.("mark");
+    const mark = e.target.closest?.(
+      "mark"
+    );
     if (!mark) return;
     const related = e.relatedTarget;
     if (related?.closest?.("mark")) return;
     mentionTooltip = removePortalTooltip(mentionTooltip);
   });
   backdrop.addEventListener("mousedown", (e) => {
-    const mark = e.target.closest?.("mark");
+    const mark = e.target.closest?.(
+      "mark"
+    );
     if (!mark) return;
     mentionTooltip = removePortalTooltip(mentionTooltip);
     const marks = backdrop.querySelectorAll("mark");
@@ -7128,11 +7241,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(
@@ -7459,6 +7568,7 @@ function renderReadonlyMode(_element, ctx, wrapper, _pathKey, value) {
 }
 function renderRichInputElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
+  const readonly = isElementReadonly(element, state, ctx);
   const textKey = element.textKey ?? "text";
   const filesKey = element.filesKey ?? "files";
   let initialValue;
@@ -7496,7 +7606,7 @@ function renderRichInputElement(element, ctx, wrapper, pathKey) {
       });
     }
   }
-  if (state.config.readonly) {
+  if (readonly) {
     renderReadonlyMode(element, ctx, wrapper, pathKey, initialValue);
   } else {
     if (!state.config.uploadFile) {
@@ -7558,9 +7668,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 };
@@ -7676,9 +7784,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;
   }
@@ -7723,9 +7829,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) {
@@ -7777,7 +7881,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) {
@@ -7798,14 +7905,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);
@@ -7952,7 +8055,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);
     }
   }
@@ -8904,7 +9009,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 };
@@ -8913,10 +9021,7 @@ var FormBuilderInstance = class {
     this.state.schema.elements.forEach((element) => {
       if (element.enableIf) {
         try {
-          const shouldEnable = evaluateEnableCondition(
-            element.enableIf,
-            data
-          );
+          const shouldEnable = evaluateEnableCondition(element.enableIf, data);
           if (!shouldEnable) {
             return;
           }
@@ -9211,7 +9316,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"
+                );
                 wrapper.parentNode?.replaceChild(disabledWrapper, wrapper);
               }
             } catch (error) {