@dmitryvim/form-builder 0.2.25 → 0.2.27

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);
@@ -2070,7 +2088,7 @@ function updateSwitcherField(element, fieldPath, value, context) {
   }
 }
 
-// src/components/file.ts
+// src/components/file/constraints.ts
 function getAllowedExtensions(accept) {
   if (!accept) return [];
   if (typeof accept === "object" && Array.isArray(accept.extensions)) {
@@ -2083,16 +2101,662 @@ function getAllowedExtensions(accept) {
 }
 function isFileExtensionAllowed(fileName, allowedExtensions) {
   if (allowedExtensions.length === 0) return true;
-  const ext = fileName.split(".").pop()?.toLowerCase() || "";
+  const ext = fileName.split(".").pop()?.toLowerCase() ?? "";
   return allowedExtensions.includes(ext);
 }
 function isFileSizeAllowed(file, maxSizeMB) {
   if (maxSizeMB === Infinity) return true;
   return file.size <= maxSizeMB * 1024 * 1024;
 }
+function addPrefillFilesToIndex(initialFiles, resourceIndex) {
+  for (const resourceId of initialFiles) {
+    if (resourceIndex.has(resourceId)) continue;
+    const filename = resourceId.split("/").pop() || "file";
+    const extension = filename.split(".").pop()?.toLowerCase();
+    let fileType = "application/octet-stream";
+    if (extension) {
+      if (["jpg", "jpeg", "png", "gif", "webp"].includes(extension)) {
+        fileType = `image/${extension === "jpg" ? "jpeg" : extension}`;
+      } else if (["mp4", "webm", "mov", "avi"].includes(extension)) {
+        fileType = `video/${extension === "mov" ? "quicktime" : extension}`;
+      }
+    }
+    resourceIndex.set(resourceId, {
+      name: filename,
+      type: fileType,
+      size: 0,
+      uploadedAt: /* @__PURE__ */ new Date(),
+      file: void 0
+    });
+  }
+}
+
+// src/components/file/styles.ts
+var STYLE_ID = "fb-file-styles";
+function ensureFileStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.setAttribute("data-fb-file-styles", "true");
+  style.textContent = `
+@keyframes fb-spin { to { transform: rotate(360deg); } }
+
+/* Spinner used during single-file and multi-file upload */
+.fb-spinner {
+  width: 36px;
+  height: 36px;
+  border: 3px solid rgba(0,0,0,0.12);
+  border-top-color: var(--fb-text-secondary-color, #6b7280);
+  border-radius: 50%;
+  animation: fb-spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+
+/* Base tile: fixed 160\xD7160 square, theme-aware background */
+.fb-tile {
+  width: var(--fb-tile-size, 160px);
+  height: var(--fb-tile-size, 160px);
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--fb-border-radius, 0.5rem);
+  background: var(--fb-file-upload-bg-color, #f3f4f6);
+}
+
+/* Uploaded resource tile \u2014 adds a visible border */
+.fb-tile-resource {
+  border: 1px solid var(--fb-file-upload-border-color, #d1d5db);
+}
+
+/* Uploading placeholder tile \u2014 dashed border, uploading indicator */
+.fb-tile-uploading {
+  border: 2px dashed var(--fb-file-upload-border-color, #d1d5db);
+}
+
+/* "+" add-more tile */
+.fb-tile-add {
+  border: 2px dashed var(--fb-file-upload-border-color, #d1d5db);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 32px;
+  color: var(--fb-file-upload-text-color, #9ca3af);
+  transition:
+    border-color var(--fb-transition-duration, 200ms),
+    color var(--fb-transition-duration, 200ms);
+}
+.fb-tile-add:hover {
+  border-color: var(--fb-file-upload-hover-border-color, #3b82f6);
+  color: var(--fb-text-color, #1f2937);
+}
+
+/* Count chip shown when at maxCount */
+.fb-tile-counter {
+  font-size: 11px;
+  color: var(--fb-text-secondary-color, #6b7280);
+  background: var(--fb-file-upload-bg-color, #f3f4f6);
+  border: 1px solid var(--fb-file-upload-border-color, #d1d5db);
+  border-radius: 4px;
+  padding: 2px 6px;
+  align-self: flex-end;
+  margin-bottom: 4px;
+}
+
+/* Empty-state dropzone */
+.fb-file-dropzone {
+  width: 100%;
+  height: 128px;
+  border: 2px dashed var(--fb-file-upload-border-color, #d1d5db);
+  border-radius: var(--fb-border-radius, 0.5rem);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  cursor: pointer;
+  transition:
+    border-color var(--fb-transition-duration, 200ms),
+    background var(--fb-transition-duration, 200ms);
+}
+.fb-file-dropzone:hover {
+  border-color: var(--fb-file-upload-hover-border-color, #3b82f6);
+  background: var(--fb-background-hover-color, #f9fafb);
+}
+
+/* Inline text inside tiles */
+.fb-tile-label {
+  font-size: 9px;
+  color: var(--fb-text-secondary-color, #6b7280);
+  text-align: center;
+  overflow: hidden;
+  word-break: break-all;
+  max-height: 28px;
+}
+.fb-tile-uploading-text {
+  font-size: 8px;
+  color: var(--fb-file-upload-text-color, #9ca3af);
+}
+.fb-tile-hint {
+  font-size: 11px;
+  color: var(--fb-file-upload-text-color, #9ca3af);
+  margin-top: 4px;
+}
+.fb-tile-empty-text {
+  font-size: 12px;
+  color: var(--fb-text-secondary-color, #6b7280);
+  padding: 4px 0;
+}
+.fb-dropzone-primary-text {
+  font-size: 13px;
+  color: var(--fb-text-secondary-color, #6b7280);
+}
+.fb-dropzone-hint-text {
+  font-size: 11px;
+  color: var(--fb-file-upload-text-color, #9ca3af);
+}
+
+/* Hover overlay + X-button on resource tiles */
+.fb-tile-overlay {
+  position: absolute;
+  inset: 0;
+  background: transparent;
+  transition: background var(--fb-transition-duration, 200ms);
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+.fb-tile-resource:hover .fb-tile-overlay {
+  background: var(--fb-tile-hover-overlay-color, rgba(0,0,0,0.4));
+}
+.fb-tile-x-btn {
+  margin: 3px;
+  width: 18px;
+  height: 18px;
+  background: var(--fb-error-color, #ef4444);
+  color: var(--fb-file-bg-color, #fff);
+  border: none;
+  border-radius: 50%;
+  font-size: 11px;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity var(--fb-transition-duration, 200ms);
+}
+.fb-tile-resource:hover .fb-tile-x-btn {
+  opacity: 1;
+}
+
+/* Video play button overlay (readonly tiles with video thumbnails) */
+.fb-video-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--fb-tile-hover-overlay-color, rgba(0,0,0,0.25));
+}
+.fb-play-btn {
+  background: var(--fb-file-bg-color, rgba(255,255,255,0.9));
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Edit-mode local video preview wrapper */
+.fb-video-preview-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+/* Hover overlay for edit-mode local video (Remove / Change buttons) */
+.fb-video-btn-overlay {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 10;
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity var(--fb-transition-duration, 200ms);
+  pointer-events: none;
+}
+.fb-video-preview-wrap:hover .fb-video-btn-overlay {
+  opacity: 1;
+  pointer-events: auto;
+}
+.fb-video-btn {
+  border: none;
+  border-radius: var(--fb-border-radius, 4px);
+  font-size: 11px;
+  padding: 4px 8px;
+  cursor: pointer;
+  color: #fff;
+  line-height: 1.2;
+}
+.fb-video-btn-delete {
+  background: rgba(220, 38, 38, 0.85);
+}
+.fb-video-btn-delete:hover {
+  background: rgba(185, 28, 28, 0.95);
+}
+.fb-video-btn-change {
+  background: rgba(31, 41, 55, 0.85);
+}
+.fb-video-btn-change:hover {
+  background: rgba(17, 24, 39, 0.95);
+}
+
+/* Tile action icon buttons (download / open / remove) \u2014 shown on tile hover */
+.fb-tile-actions {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  display: flex;
+  flex-direction: row;
+  gap: 3px;
+  opacity: 0;
+  transition: opacity var(--fb-transition-duration, 200ms);
+  z-index: 10;
+}
+.fb-tile-resource:hover .fb-tile-actions {
+  opacity: 1;
+}
+.fb-tile-action-btn {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  background: rgba(31, 41, 55, 0.75);
+  color: #fff;
+  padding: 0;
+  flex-shrink: 0;
+  transition:
+    background var(--fb-transition-duration, 200ms),
+    opacity var(--fb-transition-duration, 200ms);
+}
+.fb-tile-action-btn:hover {
+  background: rgba(17, 24, 39, 0.95);
+}
+.fb-tile-action-remove {
+  background: rgba(220, 38, 38, 0.8);
+}
+.fb-tile-action-remove:hover {
+  background: rgba(185, 28, 28, 0.95);
+}
+
+/* Actions row inside zoom popup \u2014 always visible while popup is shown */
+.fb-tile-zoom-preview .fb-tile-actions {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  opacity: 1;
+  z-index: 10000;
+}
+
+/* Hover zoom preview popup for image tiles \u2014 appended to document.body (fixed) */
+.fb-tile-zoom-preview {
+  position: fixed;
+  z-index: 9999;
+  background: var(--fb-background-color, #fff);
+  border: 1px solid var(--fb-file-upload-border-color, #d1d5db);
+  border-radius: var(--fb-border-radius, 0.5rem);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
+  padding: 4px;
+  width: 350px;
+  height: 350px;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+.fb-tile-zoom-preview.fb-tile-zoom-preview--visible {
+  opacity: 1;
+}
+.fb-tile-zoom-preview-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+  background: var(--fb-file-upload-bg-color, #f3f4f6);
+  border-radius: calc(var(--fb-border-radius, 0.5rem) - 2px);
+}
+`;
+  document.head.appendChild(style);
+}
+
+// src/components/file/dom.ts
+var TILE_SIZE = "160px";
+function createFileTile() {
+  ensureFileStyles();
+  const tile = document.createElement("div");
+  tile.className = "fb-tile";
+  return tile;
+}
+function showFileError(container, message) {
+  const existing = container.closest(".space-y-2")?.querySelector(".file-error-message");
+  if (existing) existing.remove();
+  const errorEl = document.createElement("div");
+  errorEl.className = "file-error-message error-message";
+  errorEl.style.cssText = `
+    color: var(--fb-error-color);
+    font-size: var(--fb-font-size-small);
+    margin-top: 0.25rem;
+  `;
+  errorEl.textContent = message;
+  container.closest(".space-y-2")?.appendChild(errorEl);
+}
+function clearFileError(container) {
+  const existing = container.closest(".space-y-2")?.querySelector(".file-error-message");
+  if (existing) existing.remove();
+}
+function addDeleteButton(container, state, onDelete) {
+  const existingOverlay = container.querySelector(".delete-overlay");
+  if (existingOverlay) existingOverlay.remove();
+  const overlay = document.createElement("div");
+  overlay.className = "delete-overlay absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center";
+  const deleteBtn = document.createElement("button");
+  deleteBtn.className = "bg-red-600 text-white px-3 py-1 rounded text-sm hover:bg-red-700 transition-colors";
+  deleteBtn.textContent = t("removeElement", state);
+  deleteBtn.onclick = (e) => {
+    e.stopPropagation();
+    onDelete();
+  };
+  overlay.appendChild(deleteBtn);
+  container.appendChild(overlay);
+}
+function findFilePicker(container) {
+  let el = container.parentElement;
+  while (el && !el.dataset.filesWrapper) {
+    el = el.parentElement;
+  }
+  return el?.querySelector('input[type="file"]') ?? null;
+}
+function createUploadingTile(fileName, state) {
+  ensureFileStyles();
+  const tile = createFileTile();
+  tile.classList.add("fb-tile-uploading");
+  tile.className += " fb-uploading-tile";
+  const label = fileName.length > 10 ? fileName.substring(0, 8) + "\u2026" : fileName;
+  tile.innerHTML = `
+    <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:6px;padding:4px;">
+      <div class="fb-spinner"></div>
+      <div class="fb-tile-label">${escapeHtml(label)}</div>
+      <div class="fb-tile-uploading-text">${escapeHtml(t("uploadingFile", state))}</div>
+    </div>`;
+  return tile;
+}
+function ensureTilesWrap(list) {
+  const existing = list.querySelector(".fb-tiles-wrap");
+  if (existing) return existing;
+  const dropzone = list.querySelector(".fb-file-dropzone");
+  if (dropzone) dropzone.remove();
+  const tilesWrap = document.createElement("div");
+  tilesWrap.className = "fb-tiles-wrap";
+  tilesWrap.style.cssText = "display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;";
+  const addTile = document.createElement("div");
+  addTile.className = "fb-tile fb-tile-add";
+  addTile.innerHTML = "+";
+  tilesWrap.appendChild(addTile);
+  list.appendChild(tilesWrap);
+  return tilesWrap;
+}
+function setEmptyFileContainer(fileContainer, state, hint) {
+  const hintHtml = hint ? `<div class="text-xs text-gray-500 mt-1">${escapeHtml(hint)}</div>` : "";
+  fileContainer.innerHTML = `
+    <div class="flex flex-col items-center justify-center h-full text-gray-400">
+      <svg class="w-6 h-6 mb-2" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+      </svg>
+      <div class="text-sm text-center">${escapeHtml(t("clickDragText", state))}</div>
+      ${hintHtml}
+    </div>
+  `;
+}
+function setupDragAndDrop(element, dropHandler) {
+  element.addEventListener("dragover", (e) => {
+    e.preventDefault();
+    element.classList.add("border-blue-500", "bg-blue-50");
+  });
+  element.addEventListener("dragleave", (e) => {
+    e.preventDefault();
+    element.classList.remove("border-blue-500", "bg-blue-50");
+  });
+  element.addEventListener("drop", (e) => {
+    e.preventDefault();
+    element.classList.remove("border-blue-500", "bg-blue-50");
+    if (e.dataTransfer?.files) {
+      dropHandler(e.dataTransfer.files);
+    }
+  });
+}
+
+// src/components/file/preview.ts
+var ICON_DOWNLOAD = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>`;
+var ICON_OPEN = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>`;
+var ICON_REMOVE = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"/></svg>`;
+function canDownload(state, meta) {
+  return Boolean(
+    state.config.downloadFile || state.config.getDownloadUrl || state.config.getThumbnail || meta?.file
+  );
+}
+function canOpenInTab(state, meta) {
+  return Boolean(
+    state.config.getDownloadUrl || state.config.getThumbnail || meta?.file
+  );
+}
+function createTileActions(options) {
+  const { canRemove, removeHandler, state, resourceId, fileName, meta } = options;
+  const group = document.createElement("div");
+  group.className = "fb-tile-actions";
+  const makeBtn = (icon, label, cls) => {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = `fb-tile-action-btn ${cls}`;
+    btn.innerHTML = icon;
+    btn.title = label;
+    btn.setAttribute("aria-label", label);
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+    });
+    return btn;
+  };
+  if (canDownload(state, meta)) {
+    const dlBtn = makeBtn(ICON_DOWNLOAD, t("downloadFile", state), "fb-tile-action-download");
+    dlBtn.addEventListener("click", () => {
+      triggerTileDownload(resourceId, fileName, state, meta);
+    });
+    group.appendChild(dlBtn);
+  }
+  if (canOpenInTab(state, meta)) {
+    const openBtn = makeBtn(ICON_OPEN, t("openInNewTab", state), "fb-tile-action-open");
+    openBtn.addEventListener("click", () => {
+      triggerTileOpen(resourceId, state, meta).catch((err) => {
+        console.error("Open failed:", err);
+      });
+    });
+    group.appendChild(openBtn);
+  }
+  if (canRemove && removeHandler) {
+    const rmBtn = makeBtn(ICON_REMOVE, t("removeElement", state), "fb-tile-action-remove");
+    rmBtn.addEventListener("click", () => {
+      removeHandler();
+    });
+    group.appendChild(rmBtn);
+  }
+  return group;
+}
+var localFileUrlCache = /* @__PURE__ */ new WeakMap();
+function getLocalFileUrl(file) {
+  let url = localFileUrlCache.get(file);
+  if (!url) {
+    url = URL.createObjectURL(file);
+    localFileUrlCache.set(file, url);
+  }
+  return url;
+}
+function releaseLocalFileUrl(file) {
+  if (!file) return;
+  const url = localFileUrlCache.get(file);
+  if (url) {
+    URL.revokeObjectURL(url);
+    localFileUrlCache.delete(file);
+  }
+}
+function triggerTileDownload(resourceId, fileName, state, meta) {
+  if (state.config.downloadFile) {
+    state.config.downloadFile(resourceId, fileName);
+    return;
+  }
+  if (meta?.file instanceof File) {
+    downloadBlob(meta.file, fileName || meta.file.name);
+    return;
+  }
+  forceDownload(resourceId, fileName, state).catch((err) => {
+    console.error("Download failed:", err);
+  });
+}
+async function triggerTileOpen(resourceId, state, meta) {
+  let url = null;
+  if (state.config.getDownloadUrl) {
+    url = state.config.getDownloadUrl(resourceId);
+  } else if (state.config.getThumbnail) {
+    url = await state.config.getThumbnail(resourceId);
+  } else if (meta?.file instanceof File) {
+    url = getLocalFileUrl(meta.file);
+  }
+  if (url) {
+    window.open(url, "_blank");
+  }
+}
+var sharedZoomPopup = null;
+var zoomTimer = null;
+var zoomHideTimer = null;
+var zoomOwner = null;
+function getOrCreateZoomPopup() {
+  if (!sharedZoomPopup) {
+    sharedZoomPopup = document.createElement("div");
+    sharedZoomPopup.className = "fb-tile-zoom-preview";
+    const img = document.createElement("img");
+    img.className = "fb-tile-zoom-preview-img";
+    sharedZoomPopup.appendChild(img);
+    sharedZoomPopup.addEventListener("mouseenter", cancelHideZoomPopup);
+    sharedZoomPopup.addEventListener("mouseleave", scheduleHideZoomPopup);
+  }
+  return sharedZoomPopup;
+}
+function positionZoomPopup(popup, tile) {
+  const tileRect = tile.getBoundingClientRect();
+  const popupSize = 350;
+  const margin = 6;
+  const padding = 8;
+  let top;
+  if (tileRect.top - popupSize - margin >= padding) {
+    top = tileRect.top - popupSize - margin;
+  } else if (tileRect.bottom + margin + popupSize + padding <= window.innerHeight) {
+    top = tileRect.bottom + margin;
+  } else {
+    top = Math.max(padding, Math.min(window.innerHeight - popupSize - padding, tileRect.top));
+  }
+  const tileCenterX = tileRect.left + tileRect.width / 2;
+  let left = tileCenterX - popupSize / 2;
+  left = Math.max(padding, Math.min(window.innerWidth - popupSize - padding, left));
+  popup.style.top = `${top}px`;
+  popup.style.left = `${left}px`;
+}
+function scheduleHideZoomPopup() {
+  if (zoomHideTimer !== null) {
+    clearTimeout(zoomHideTimer);
+  }
+  zoomHideTimer = setTimeout(() => {
+    zoomHideTimer = null;
+    removeZoomPopupNow();
+  }, 100);
+}
+function cancelHideZoomPopup() {
+  if (zoomHideTimer !== null) {
+    clearTimeout(zoomHideTimer);
+    zoomHideTimer = null;
+  }
+}
+function removeZoomPopupNow() {
+  if (zoomTimer !== null) {
+    clearTimeout(zoomTimer);
+    zoomTimer = null;
+  }
+  if (sharedZoomPopup && sharedZoomPopup.parentNode) {
+    sharedZoomPopup.classList.remove("fb-tile-zoom-preview--visible");
+    sharedZoomPopup.parentNode.removeChild(sharedZoomPopup);
+  }
+  zoomOwner = null;
+}
+function attachZoomHover(tile, src, alt, actionsEl) {
+  tile.dataset.zoomSrc = src;
+  tile.dataset.zoomAlt = alt;
+  tile.addEventListener("mouseenter", () => {
+    cancelHideZoomPopup();
+    if (zoomOwner !== tile) {
+      removeZoomPopupNow();
+    }
+    zoomOwner = tile;
+    zoomTimer = setTimeout(() => {
+      zoomTimer = null;
+      const popup = getOrCreateZoomPopup();
+      const existingActions = popup.querySelector(".fb-tile-actions");
+      if (existingActions) existingActions.remove();
+      const img = popup.querySelector(".fb-tile-zoom-preview-img");
+      img.src = src;
+      img.alt = alt;
+      if (actionsEl) {
+        popup.appendChild(actionsEl.cloneNode(true));
+        attachClonedActionListeners(
+          popup.querySelector(".fb-tile-actions"),
+          actionsEl
+        );
+      }
+      popup.style.pointerEvents = "auto";
+      positionZoomPopup(popup, tile);
+      document.body.appendChild(popup);
+      popup.getBoundingClientRect();
+      popup.classList.add("fb-tile-zoom-preview--visible");
+    }, 200);
+  });
+  tile.addEventListener("mouseleave", () => {
+    if (zoomTimer !== null) {
+      clearTimeout(zoomTimer);
+      zoomTimer = null;
+      zoomOwner = null;
+    } else {
+      scheduleHideZoomPopup();
+    }
+  });
+}
+function attachClonedActionListeners(cloned, original) {
+  const originalBtns = Array.from(original.querySelectorAll(".fb-tile-action-btn"));
+  const clonedBtns = Array.from(cloned.querySelectorAll(".fb-tile-action-btn"));
+  clonedBtns.forEach((clonedBtn, i) => {
+    const origBtn = originalBtns[i];
+    if (origBtn) {
+      clonedBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        origBtn.click();
+      });
+    }
+  });
+}
 function renderLocalImagePreview(container, file, fileName, state) {
   const img = document.createElement("img");
   img.className = "w-full h-full object-contain";
+  img.style.background = "var(--fb-file-upload-bg-color,#f3f4f6)";
   img.alt = fileName || t("previewAlt", state);
   const reader = new FileReader();
   reader.onload = (e) => {
@@ -2101,23 +2765,27 @@ function renderLocalImagePreview(container, file, fileName, state) {
   reader.readAsDataURL(file);
   container.appendChild(img);
 }
-function renderLocalVideoPreview(container, file, videoType, resourceId, state, deps) {
-  const videoUrl = URL.createObjectURL(file);
+function setupDragDropless(container, _deps) {
   container.onclick = null;
   const newContainer = container.cloneNode(false);
   if (container.parentNode) {
     container.parentNode.replaceChild(newContainer, container);
   }
+  return newContainer;
+}
+function renderLocalVideoPreview(container, file, videoType, resourceId, state, deps) {
+  const videoUrl = URL.createObjectURL(file);
+  const newContainer = setupDragDropless(container);
   newContainer.innerHTML = `
-    <div class="relative group h-full">
+    <div class="fb-video-preview-wrap">
       <video class="w-full h-full object-contain" controls preload="auto" muted src="${videoUrl}">
         ${escapeHtml(t("videoNotSupported", state))}
       </video>
-      <div class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity z-10 flex gap-1">
-        <button class="bg-red-600 bg-opacity-75 hover:bg-opacity-90 text-white p-1 rounded text-xs delete-file-btn">
+      <div class="fb-video-btn-overlay">
+        <button class="fb-video-btn fb-video-btn-delete delete-file-btn">
           ${escapeHtml(t("removeElement", state))}
         </button>
-        <button class="bg-gray-800 bg-opacity-75 hover:bg-opacity-90 text-white p-1 rounded text-xs change-file-btn">
+        <button class="fb-video-btn fb-video-btn-change change-file-btn">
           ${escapeHtml(t("changeButton", state))}
         </button>
       </div>
@@ -2127,20 +2795,14 @@ function renderLocalVideoPreview(container, file, videoType, resourceId, state,
   return newContainer;
 }
 function attachVideoButtonHandlers(container, resourceId, state, deps) {
-  const changeBtn = container.querySelector(
-    ".change-file-btn"
-  );
+  const changeBtn = container.querySelector(".change-file-btn");
   if (changeBtn) {
     changeBtn.onclick = (e) => {
       e.stopPropagation();
-      if (deps?.picker) {
-        deps.picker.click();
-      }
+      deps?.picker?.click();
     };
   }
-  const deleteBtn = container.querySelector(
-    ".delete-file-btn"
-  );
+  const deleteBtn = container.querySelector(".delete-file-btn");
   if (deleteBtn) {
     deleteBtn.onclick = (e) => {
       e.stopPropagation();
@@ -2159,9 +2821,6 @@ function handleVideoDelete(container, resourceId, state, deps) {
   if (deps?.fileUploadHandler) {
     container.onclick = deps.fileUploadHandler;
   }
-  if (deps?.dragHandler) {
-    setupDragAndDrop(container, deps.dragHandler);
-  }
   container.innerHTML = `
     <div class="flex flex-col items-center justify-center h-full text-gray-400">
       <svg class="w-6 h-6 mb-2" fill="currentColor" viewBox="0 0 24 24">
@@ -2170,18 +2829,9 @@ function handleVideoDelete(container, resourceId, state, deps) {
       <div class="text-sm text-center">${escapeHtml(t("clickDragText", state))}</div>
     </div>
   `;
-}
-function renderUploadedVideoPreview(container, thumbnailUrl, _videoType, state) {
-  const video = document.createElement("video");
-  video.className = "w-full h-full object-contain";
-  video.controls = true;
-  video.preload = "metadata";
-  video.muted = true;
-  video.src = thumbnailUrl;
-  video.appendChild(
-    document.createTextNode(t("videoNotSupported", state))
-  );
-  container.appendChild(video);
+  if (deps?.setupDrop) {
+    deps.setupDrop(container);
+  }
 }
 function renderDeleteButton(container, resourceId, state) {
   addDeleteButton(container, state, () => {
@@ -2203,13 +2853,11 @@ function renderDeleteButton(container, resourceId, state) {
   });
 }
 async function renderLocalFilePreview(container, meta, fileName, resourceId, isReadonly, state, deps) {
-  if (!meta.file || !(meta.file instanceof File)) {
-    return;
-  }
-  if (meta.type && meta.type.startsWith("image/")) {
+  if (!meta.file || !(meta.file instanceof File)) return;
+  if (meta.type?.startsWith("image/")) {
     renderLocalImagePreview(container, meta.file, fileName, state);
-  } else if (meta.type && meta.type.startsWith("video/")) {
-    const newContainer = renderLocalVideoPreview(
+  } else if (meta.type?.startsWith("video/")) {
+    container = renderLocalVideoPreview(
       container,
       meta.file,
       meta.type,
@@ -2217,14 +2865,23 @@ async function renderLocalFilePreview(container, meta, fileName, resourceId, isR
       state,
       deps
     );
-    container = newContainer;
   } else {
-    container.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400"><div class="text-2xl mb-2">\u{1F4C1}</div><div class="text-sm">${escapeHtml(fileName)}</div></div>`;
+    container.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400"><div style="font-size:36px;" class="mb-2">\u{1F4C1}</div><div class="text-sm">${escapeHtml(fileName)}</div></div>`;
   }
-  if (!isReadonly && !(meta.type && meta.type.startsWith("video/"))) {
+  if (!isReadonly && !meta.type?.startsWith("video/")) {
     renderDeleteButton(container, resourceId, state);
   }
 }
+function renderUploadedVideoPreview(container, thumbnailUrl, state) {
+  const video = document.createElement("video");
+  video.className = "w-full h-full object-contain";
+  video.controls = true;
+  video.preload = "metadata";
+  video.muted = true;
+  video.src = thumbnailUrl;
+  video.appendChild(document.createTextNode(t("videoNotSupported", state)));
+  container.appendChild(video);
+}
 async function renderUploadedFilePreview(container, resourceId, fileName, meta, state) {
   if (!state.config.getThumbnail) {
     setEmptyFileContainer(container, state);
@@ -2234,11 +2891,12 @@ async function renderUploadedFilePreview(container, resourceId, fileName, meta,
     const thumbnailUrl = await state.config.getThumbnail(resourceId);
     if (thumbnailUrl) {
       clear(container);
-      if (meta && meta.type && meta.type.startsWith("video/")) {
-        renderUploadedVideoPreview(container, thumbnailUrl, meta.type, state);
+      if (meta?.type?.startsWith("video/")) {
+        renderUploadedVideoPreview(container, thumbnailUrl, state);
       } else {
         const img = document.createElement("img");
         img.className = "w-full h-full object-contain";
+        img.style.background = "var(--fb-file-upload-bg-color,#f3f4f6)";
         img.alt = fileName || t("previewAlt", state);
         img.src = thumbnailUrl;
         container.appendChild(img);
@@ -2266,9 +2924,6 @@ async function renderFilePreview(container, resourceId, state, options = {}) {
     );
   }
   clear(container);
-  if (isReadonly) {
-    container.classList.add("cursor-pointer");
-  }
   const meta = state.resourceIndex.get(resourceId);
   if (meta && meta.file && meta.file instanceof File) {
     await renderLocalFilePreview(
@@ -2281,364 +2936,291 @@ async function renderFilePreview(container, resourceId, state, options = {}) {
       deps
     );
   } else {
-    await renderUploadedFilePreview(
-      container,
-      resourceId,
-      fileName,
-      meta,
-      state
-    );
+    await renderUploadedFilePreview(container, resourceId, fileName, meta, state);
     const isVideo = meta?.type?.startsWith("video/");
     if (!isReadonly && !isVideo) {
       renderDeleteButton(container, resourceId, state);
     }
   }
 }
-async function renderFilePreviewReadonly(resourceId, state, fileName) {
+function resolveFileName(resourceId, meta, fileName) {
+  if (fileName) return fileName;
+  if (meta?.name?.includes(".")) return meta.name;
+  const basename = resourceId.includes("/") ? resourceId.split("/").pop() : resourceId;
+  return basename?.includes(".") ? basename : "";
+}
+async function renderFilePreviewReadonly(resourceId, state, fileName, options = {}) {
   const meta = state.resourceIndex.get(resourceId);
-  const actualFileName = meta?.name || resourceId.split("/").pop() || "file";
-  const isPSD = actualFileName.toLowerCase().match(/\.psd$/);
-  const fileResult = document.createElement("div");
-  fileResult.className = isPSD ? "space-y-2" : "space-y-3";
-  const previewContainer = document.createElement("div");
-  if (isPSD) {
-    previewContainer.className = "bg-gray-100 rounded-lg overflow-hidden cursor-pointer hover:opacity-90 transition-opacity flex items-center p-3 max-w-sm";
-  } else {
-    previewContainer.className = "bg-gray-100 rounded-lg overflow-hidden cursor-pointer hover:opacity-90 transition-opacity";
-  }
-  const isImage = !isPSD && (meta?.type?.startsWith("image/") || actualFileName.toLowerCase().match(/\.(jpg|jpeg|png|gif|webp)$/));
-  const isVideo = meta?.type?.startsWith("video/") || actualFileName.toLowerCase().match(/\.(mp4|webm|avi|mov)$/);
-  if (isImage) {
+  const actualFileName = resolveFileName(resourceId, meta, fileName);
+  const { canRemove = false, removeHandler = null } = options;
+  const isImage = meta?.type?.startsWith("image/") || Boolean(actualFileName.toLowerCase().match(/\.(jpg|jpeg|png|gif|webp)$/));
+  const isVideo = meta?.type?.startsWith("video/") || Boolean(actualFileName.toLowerCase().match(/\.(mp4|webm|avi|mov)$/));
+  const tile = createFileTile();
+  tile.classList.add("fb-tile-resource");
+  tile.style.cursor = "pointer";
+  if (actualFileName) {
+    tile.title = actualFileName;
+  }
+  const localFileUrl = meta?.file instanceof File ? getLocalFileUrl(meta.file) : null;
+  const resolveOpenUrl = async () => {
+    if (state.config.getDownloadUrl) return state.config.getDownloadUrl(resourceId);
+    if (state.config.getThumbnail) return state.config.getThumbnail(resourceId);
+    return localFileUrl;
+  };
+  tile.onclick = async () => {
+    const url = await resolveOpenUrl();
+    if (url) {
+      window.open(url, "_blank");
+    } else if (state.config.downloadFile) {
+      state.config.downloadFile(resourceId, actualFileName);
+    } else {
+      forceDownload(resourceId, actualFileName, state).catch((err) => {
+        console.error("Download failed:", err);
+      });
+    }
+  };
+  const actionsEl = createTileActions({
+    canRemove,
+    removeHandler,
+    state,
+    resourceId,
+    fileName: actualFileName,
+    meta
+  });
+  const resolveImageDisplayUrl = async () => {
     if (state.config.getThumbnail) {
       try {
-        const thumbnailUrl = await state.config.getThumbnail(resourceId);
-        if (thumbnailUrl) {
-          previewContainer.innerHTML = `<img src="${thumbnailUrl}" alt="${escapeHtml(actualFileName)}" class="w-full h-auto">`;
-        } else {
-          previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">\u{1F5BC}\uFE0F</div><div class="text-sm">${escapeHtml(actualFileName)}</div></div></div>`;
-        }
-      } catch (error) {
-        console.warn("getThumbnail failed for", resourceId, error);
-        previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">\u{1F5BC}\uFE0F</div><div class="text-sm">${escapeHtml(actualFileName)}</div></div></div>`;
+        const url = await state.config.getThumbnail(resourceId);
+        if (url) return url;
+      } catch {
       }
+    }
+    return localFileUrl;
+  };
+  const renderImageFallback = () => {
+    tile.innerHTML = `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;font-size:36px;">\u{1F5BC}\uFE0F</div>`;
+    tile.appendChild(actionsEl);
+  };
+  if (isImage) {
+    const displayUrl = await resolveImageDisplayUrl();
+    if (displayUrl) {
+      const img = document.createElement("img");
+      img.style.cssText = "width:100%;height:100%;object-fit:contain;background:var(--fb-file-upload-bg-color,#f3f4f6);";
+      img.alt = actualFileName;
+      img.src = displayUrl;
+      tile.appendChild(img);
+      tile.appendChild(actionsEl);
+      attachZoomHover(tile, displayUrl, actualFileName, actionsEl);
     } else {
-      previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">\u{1F5BC}\uFE0F</div><div class="text-sm">${escapeHtml(actualFileName)}</div></div></div>`;
+      renderImageFallback();
     }
   } else if (isVideo) {
     if (state.config.getThumbnail) {
       try {
         const videoUrl = await state.config.getThumbnail(resourceId);
         if (videoUrl) {
-          previewContainer.innerHTML = `
-            <div class="relative group">
-              <video class="w-full h-auto" controls preload="auto" muted src="${videoUrl}">
-                ${escapeHtml(t("videoNotSupported", state))}
-              </video>
-              <div class="absolute inset-0 bg-black bg-opacity-20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center pointer-events-none">
-                <div class="bg-white bg-opacity-90 rounded-full p-3">
-                  <svg class="w-8 h-8 text-gray-800" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M8 5v14l11-7z"/>
-                  </svg>
-                </div>
+          tile.innerHTML = `
+            <img style="width:100%;height:100%;object-fit:contain;background:var(--fb-file-upload-bg-color,#f3f4f6);" alt="${escapeHtml(actualFileName)}" src="${videoUrl}">
+            <div class="fb-video-overlay">
+              <div class="fb-play-btn" style="width:22px;height:22px;">
+                <svg width="10" height="12" viewBox="0 0 10 12" fill="currentColor"><path d="M0 0l10 6-10 6z"/></svg>
               </div>
-            </div>
-          `;
+            </div>`;
+          tile.appendChild(actionsEl);
         } else {
-          previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">\u{1F3A5}</div><div class="text-sm">${escapeHtml(actualFileName)}</div></div></div>`;
+          tile.innerHTML = `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;font-size:36px;">\u{1F3A5}</div>`;
+          tile.appendChild(actionsEl);
         }
-      } catch (error) {
-        console.warn("getThumbnail failed for video", resourceId, error);
-        previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">\u{1F3A5}</div><div class="text-sm">${escapeHtml(actualFileName)}</div></div></div>`;
+      } catch {
+        tile.innerHTML = `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;font-size:36px;">\u{1F3A5}</div>`;
+        tile.appendChild(actionsEl);
       }
     } else {
-      previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">\u{1F3A5}</div><div class="text-sm">${escapeHtml(actualFileName)}</div></div></div>`;
+      tile.innerHTML = `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;font-size:36px;">\u{1F3A5}</div>`;
+      tile.appendChild(actionsEl);
     }
   } else {
-    const fileIcon = isPSD ? "\u{1F3A8}" : "\u{1F4C1}";
-    const fileDescription = isPSD ? "PSD File" : "Document";
-    if (isPSD) {
-      previewContainer.innerHTML = `
-        <div class="flex items-center space-x-3">
-          <div class="text-3xl text-gray-400">${fileIcon}</div>
-          <div class="flex-1 min-w-0">
-            <div class="text-sm font-medium text-gray-900 truncate">${escapeHtml(actualFileName)}</div>
-            <div class="text-xs text-gray-500">${fileDescription}</div>
-          </div>
-        </div>
-      `;
-    } else {
-      previewContainer.innerHTML = `<div class="aspect-video flex items-center justify-center text-gray-400"><div class="text-center"><div class="text-4xl mb-2">${fileIcon}</div><div class="text-sm">${escapeHtml(actualFileName)}</div><div class="text-xs text-gray-500 mt-1">${fileDescription}</div></div></div>`;
+    if (state.config.getThumbnail) {
+      try {
+        const thumbUrl = await state.config.getThumbnail(resourceId);
+        if (thumbUrl) {
+          const img = document.createElement("img");
+          img.style.cssText = "width:100%;height:100%;object-fit:contain;background:var(--fb-file-upload-bg-color,#f3f4f6);";
+          img.alt = actualFileName || resourceId;
+          img.src = thumbUrl;
+          tile.appendChild(img);
+          tile.appendChild(actionsEl);
+          return tile;
+        }
+      } catch {
+      }
     }
+    const captionHtml = actualFileName ? `<div class="fb-tile-label">${escapeHtml(actualFileName.length > 10 ? actualFileName.substring(0, 8) + "\u2026" : actualFileName)}</div>
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M19 9h-4V3H9v6H5l7 7 7-7zm-7 9H5v2h14v-2h-7z"/></svg>` : "";
+    tile.innerHTML = `
+      <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:6px;gap:4px;">
+        <div style="font-size:36px;">\u{1F4C1}</div>
+        ${captionHtml}
+      </div>`;
+    tile.appendChild(actionsEl);
   }
-  const fileNameElement = document.createElement("p");
-  fileNameElement.className = isPSD ? "hidden" : "text-sm font-medium text-gray-900 text-center";
-  fileNameElement.textContent = actualFileName;
-  const downloadButton = document.createElement("button");
-  downloadButton.className = "w-full px-3 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors";
-  downloadButton.textContent = t("downloadButton", state);
-  downloadButton.onclick = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (state.config.downloadFile) {
-      state.config.downloadFile(resourceId, actualFileName);
-    } else {
-      forceDownload(resourceId, actualFileName, state);
-    }
-  };
-  fileResult.appendChild(previewContainer);
-  fileResult.appendChild(fileNameElement);
-  fileResult.appendChild(downloadButton);
-  return fileResult;
+  return tile;
 }
-function renderResourcePills(container, rids, state, onRemove, hint, countInfo) {
-  clear(container);
-  const buildHintLine = () => {
-    const parts = [t("clickDragTextMultiple", state)];
-    if (hint) parts.push(hint);
-    if (countInfo) parts.push(countInfo);
-    return parts.join(" \u2022 ");
-  };
-  const isInitialRender = !container.classList.contains("grid");
-  if ((!rids || rids.length === 0) && isInitialRender) {
-    const gridContainer2 = document.createElement("div");
-    gridContainer2.className = "grid grid-cols-4 gap-3 mb-3";
-    for (let i = 0; i < 4; i++) {
-      const slot = document.createElement("div");
-      slot.className = "aspect-square bg-gray-100 border-2 border-dashed border-gray-300 rounded flex items-center justify-center cursor-pointer hover:border-gray-400 transition-colors";
-      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-      svg.setAttribute("class", "w-12 h-12 text-gray-400");
-      svg.setAttribute("fill", "currentColor");
-      svg.setAttribute("viewBox", "0 0 24 24");
-      const path = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      );
-      path.setAttribute(
-        "d",
-        "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"
-      );
-      svg.appendChild(path);
-      slot.appendChild(svg);
-      slot.onclick = () => {
-        let filesWrapper = container.parentElement;
-        while (filesWrapper && !filesWrapper.classList.contains("space-y-2")) {
-          filesWrapper = filesWrapper.parentElement;
-        }
-        if (!filesWrapper && container.classList.contains("space-y-2")) {
-          filesWrapper = container;
-        }
-        const fileInput = filesWrapper?.querySelector(
-          'input[type="file"]'
-        );
-        if (fileInput) fileInput.click();
-      };
-      gridContainer2.appendChild(slot);
-    }
-    const hintText2 = document.createElement("div");
-    hintText2.className = "text-center text-xs text-gray-500 mt-2";
-    hintText2.textContent = buildHintLine();
-    container.appendChild(gridContainer2);
-    container.appendChild(hintText2);
-    return;
-  }
-  const gridContainer = document.createElement("div");
-  gridContainer.className = "files-list grid grid-cols-4 gap-3";
-  const currentImagesCount = rids ? rids.length : 0;
-  const rowsNeeded = Math.floor(currentImagesCount / 4) + 1;
-  const slotsNeeded = rowsNeeded * 4;
-  for (let i = 0; i < slotsNeeded; i++) {
-    const slot = document.createElement("div");
-    if (rids && i < rids.length) {
-      const rid = rids[i];
-      const meta = state.resourceIndex.get(rid);
-      slot.className = "resource-pill aspect-square bg-gray-100 rounded-lg overflow-hidden relative group border border-gray-300";
-      slot.dataset.resourceId = rid;
-      renderThumbnailForResource(slot, rid, meta, state).catch((err) => {
-        console.error("Failed to render thumbnail:", err);
-        slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-          <div class="text-2xl mb-1">\u{1F4C1}</div>
-          <div class="text-xs">${escapeHtml(t("previewError", state))}</div>
-        </div>`;
-      });
-      if (onRemove) {
-        const overlay = document.createElement("div");
-        overlay.className = "absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center";
-        const removeBtn = document.createElement("button");
-        removeBtn.className = "bg-red-600 text-white px-2 py-1 rounded text-xs";
-        removeBtn.textContent = t("removeElement", state);
-        removeBtn.onclick = (e) => {
-          e.stopPropagation();
-          onRemove(rid);
-        };
-        overlay.appendChild(removeBtn);
-        slot.appendChild(overlay);
-      }
-    } else {
-      slot.className = "aspect-square bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center cursor-pointer hover:border-gray-400 transition-colors";
-      slot.innerHTML = '<svg class="w-12 h-12 text-gray-400" fill="currentColor" viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>';
-      slot.onclick = () => {
-        let filesWrapper = container.parentElement;
-        while (filesWrapper && !filesWrapper.classList.contains("space-y-2")) {
-          filesWrapper = filesWrapper.parentElement;
-        }
-        if (!filesWrapper && container.classList.contains("space-y-2")) {
-          filesWrapper = container;
-        }
-        const fileInput = filesWrapper?.querySelector(
-          'input[type="file"]'
-        );
-        if (fileInput) fileInput.click();
-      };
-    }
-    gridContainer.appendChild(slot);
-  }
-  container.appendChild(gridContainer);
-  const hintText = document.createElement("div");
-  hintText.className = "text-center text-xs text-gray-500 mt-2";
-  hintText.textContent = buildHintLine();
-  container.appendChild(hintText);
-}
-function renderThumbnailError(slot, state, iconSize = "w-12 h-12") {
-  slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-    <svg class="${escapeHtml(iconSize)} text-red-400" fill="currentColor" viewBox="0 0 24 24">
-      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
-    </svg>
-    <div class="text-xs mt-1 text-red-600">${escapeHtml(t("previewError", state))}</div>
-  </div>`;
+async function renderSingleFileEditTile(fileContainer, resourceId, state, deps) {
+  const meta = state.resourceIndex.get(resourceId);
+  const fileName = meta?.name ?? resourceId.split("/").pop() ?? "";
+  const removeHandler = deps.onRemove ?? null;
+  const tile = await renderFilePreviewReadonly(resourceId, state, fileName, {
+    canRemove: true,
+    removeHandler
+  });
+  fileContainer.className = "file-preview-container";
+  fileContainer.removeAttribute("style");
+  clear(fileContainer);
+  fileContainer.appendChild(tile);
 }
-async function renderThumbnailForResource(slot, rid, meta, state) {
-  if (meta && meta.type?.startsWith("image/")) {
+async function fillTileContent(tile, rid, meta, state, actionsEl) {
+  if (meta?.type?.startsWith("image/")) {
     if (meta.file && meta.file instanceof File) {
       const img = document.createElement("img");
-      img.className = "w-full h-full object-contain";
+      img.style.cssText = "width:100%;height:100%;object-fit:contain;background:var(--fb-file-upload-bg-color,#f3f4f6);";
       img.alt = meta.name;
       const reader = new FileReader();
       reader.onload = (e) => {
         img.src = e.target?.result || "";
+        attachZoomHover(tile, img.src, meta.name, actionsEl ?? null);
       };
       reader.readAsDataURL(meta.file);
-      slot.appendChild(img);
+      tile.appendChild(img);
     } else if (state.config.getThumbnail) {
       try {
         const url = await state.config.getThumbnail(rid);
         if (url) {
           const img = document.createElement("img");
-          img.className = "w-full h-full object-contain";
+          img.style.cssText = "width:100%;height:100%;object-fit:contain;background:var(--fb-file-upload-bg-color,#f3f4f6);";
           img.alt = meta.name;
           img.src = url;
-          slot.appendChild(img);
+          tile.appendChild(img);
+          attachZoomHover(tile, url, meta.name, actionsEl ?? null);
         } else {
-          slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-            <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
-              <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-            </svg>
-          </div>`;
+          tile.innerHTML = `<div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:36px;">\u{1F5BC}\uFE0F</div>`;
         }
       } catch (error) {
         const err = error instanceof Error ? error : new Error(String(error));
-        if (state.config.onThumbnailError) {
-          state.config.onThumbnailError(err, rid);
-        }
-        renderThumbnailError(slot, state);
+        if (state.config.onThumbnailError) state.config.onThumbnailError(err, rid);
+        tile.innerHTML = `<div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:16px;color:var(--fb-error-color,#ef4444);">\u2715</div>`;
       }
     } else {
-      slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-        <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-        </svg>
-      </div>`;
+      tile.innerHTML = `<div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:36px;">\u{1F5BC}\uFE0F</div>`;
     }
-  } else if (meta && meta.type?.startsWith("video/")) {
+    if (actionsEl) tile.appendChild(actionsEl);
+  } else if (meta?.type?.startsWith("video/")) {
     if (meta.file && meta.file instanceof File) {
       const videoUrl = URL.createObjectURL(meta.file);
-      slot.innerHTML = `
-        <div class="relative group h-full w-full">
-          <video class="w-full h-full object-contain" preload="metadata" muted src="${videoUrl}">
-          </video>
-          <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
-            <div class="bg-white bg-opacity-90 rounded-full p-1">
-              <svg class="w-4 h-4 text-gray-800" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M8 5v14l11-7z"/>
-              </svg>
-            </div>
+      tile.innerHTML = `
+        <video style="width:100%;height:100%;" preload="metadata" muted src="${videoUrl}"></video>
+        <div class="fb-video-overlay">
+          <div class="fb-play-btn" style="width:20px;height:20px;">
+            <svg width="8" height="10" viewBox="0 0 8 10" fill="currentColor"><path d="M0 0l8 5-8 5z"/></svg>
           </div>
-        </div>
-      `;
+        </div>`;
     } else if (state.config.getThumbnail) {
       try {
         const videoUrl = await state.config.getThumbnail(rid);
         if (videoUrl) {
-          slot.innerHTML = `
-            <div class="relative group h-full w-full">
-              <video class="w-full h-full object-contain" preload="metadata" muted src="${videoUrl}">
-              </video>
-              <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
-                <div class="bg-white bg-opacity-90 rounded-full p-1">
-                  <svg class="w-4 h-4 text-gray-800" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M8 5v14l11-7z"/>
-                  </svg>
-                </div>
+          tile.innerHTML = `
+            <img style="width:100%;height:100%;object-fit:contain;background:var(--fb-file-upload-bg-color,#f3f4f6);" alt="${escapeHtml(meta.name)}" src="${videoUrl}">
+            <div class="fb-video-overlay">
+              <div class="fb-play-btn" style="width:20px;height:20px;">
+                <svg width="8" height="10" viewBox="0 0 8 10" fill="currentColor"><path d="M0 0l8 5-8 5z"/></svg>
               </div>
-            </div>
-          `;
+            </div>`;
         } else {
-          slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
-              <path d="M8 5v14l11-7z"/>
-            </svg>
-            <div class="text-xs mt-1">${escapeHtml(meta?.name || "Video")}</div>
-          </div>`;
+          tile.innerHTML = `<div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:36px;">\u{1F3A5}</div>`;
         }
       } catch (error) {
         const err = error instanceof Error ? error : new Error(String(error));
-        if (state.config.onThumbnailError) {
-          state.config.onThumbnailError(err, rid);
-        }
-        renderThumbnailError(slot, state, "w-8 h-8");
+        if (state.config.onThumbnailError) state.config.onThumbnailError(err, rid);
+        tile.innerHTML = `<div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:16px;color:var(--fb-error-color,#ef4444);">\u2715</div>`;
       }
     } else {
-      slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M8 5v14l11-7z"/>
-        </svg>
-        <div class="text-xs mt-1">${escapeHtml(meta?.name || "Video")}</div>
-      </div>`;
+      tile.innerHTML = `<div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:36px;">\u{1F3A5}</div>`;
     }
+    if (actionsEl) tile.appendChild(actionsEl);
   } else {
-    slot.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-gray-400">
-      <div class="text-2xl mb-1">\u{1F4C1}</div>
-      <div class="text-xs">${escapeHtml(meta?.name || "File")}</div>
-    </div>`;
+    const name = meta?.name ?? "";
+    const hasExtension = name.includes(".");
+    const captionHtml = hasExtension ? `<div class="fb-tile-label">${escapeHtml(name.length > 10 ? name.substring(0, 8) + "\u2026" : name)}</div>` : "";
+    tile.innerHTML = `
+      <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:6px;gap:4px;">
+        <div style="font-size:36px;">\u{1F4C1}</div>
+        ${captionHtml}
+      </div>`;
+    if (actionsEl) tile.appendChild(actionsEl);
   }
 }
-function setEmptyFileContainer(fileContainer, state, hint) {
-  const hintHtml = hint ? `<div class="text-xs text-gray-500 mt-1">${escapeHtml(hint)}</div>` : "";
-  fileContainer.innerHTML = `
-    <div class="flex flex-col items-center justify-center h-full text-gray-400">
-      <svg class="w-6 h-6 mb-2" fill="currentColor" viewBox="0 0 24 24">
-        <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-      </svg>
-      <div class="text-sm text-center">${escapeHtml(t("clickDragText", state))}</div>
-      ${hintHtml}
-    </div>
-  `;
+async function forceDownload(resourceId, fileName, state) {
+  try {
+    let fileUrl = null;
+    if (state.config.getDownloadUrl) {
+      fileUrl = state.config.getDownloadUrl(resourceId);
+    } else if (state.config.getThumbnail) {
+      fileUrl = await state.config.getThumbnail(resourceId);
+    }
+    if (fileUrl) {
+      const finalUrl = fileUrl.startsWith("http") ? fileUrl : new URL(fileUrl, window.location.href).href;
+      const response = await fetch(finalUrl);
+      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+      const blob = await response.blob();
+      downloadBlob(blob, fileName);
+    } else {
+      throw new Error("No download URL available for resource");
+    }
+  } catch (error) {
+    const err = error instanceof Error ? error : new Error(String(error));
+    if (state.config.onDownloadError) {
+      state.config.onDownloadError(err, resourceId, fileName);
+    }
+    console.error(`File download failed for ${fileName}:`, err);
+    throw err;
+  }
 }
-function showFileError(container, message) {
-  const existing = container.closest(".space-y-2")?.querySelector(".file-error-message");
-  if (existing) existing.remove();
-  const errorEl = document.createElement("div");
-  errorEl.className = "file-error-message error-message";
-  errorEl.style.cssText = `
-    color: var(--fb-error-color);
-    font-size: var(--fb-font-size-small);
-    margin-top: 0.25rem;
-  `;
-  errorEl.textContent = message;
-  container.closest(".space-y-2")?.appendChild(errorEl);
+function downloadBlob(blob, fileName) {
+  try {
+    const blobUrl = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = blobUrl;
+    link.download = fileName;
+    link.style.display = "none";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    setTimeout(() => {
+      URL.revokeObjectURL(blobUrl);
+    }, 100);
+  } catch (error) {
+    throw new Error(`Blob download failed: ${error.message}`);
+  }
 }
-function clearFileError(container) {
-  const existing = container.closest(".space-y-2")?.querySelector(".file-error-message");
-  if (existing) existing.remove();
+
+// src/components/file/upload.ts
+async function uploadSingleFile(file, state) {
+  if (!state.config.uploadFile) {
+    throw new Error(
+      "No upload handler configured. Set uploadHandler via FormBuilder.setUploadHandler()"
+    );
+  }
+  try {
+    const rid = await state.config.uploadFile(file);
+    if (typeof rid !== "string") {
+      throw new Error("Upload handler must return a string resource ID");
+    }
+    return rid;
+  } catch (error) {
+    const err = error instanceof Error ? error : new Error(String(error));
+    if (state.config.onUploadError) state.config.onUploadError(err, file);
+    throw new Error(`File upload failed: ${err.message}`);
+  }
 }
 async function handleFileSelect(file, container, fieldName, state, deps = null, instance, allowedExtensions = [], maxSizeMB = Infinity) {
   if (!isFileExtensionAllowed(file.name, allowedExtensions)) {
@@ -2657,24 +3239,18 @@ async function handleFileSelect(file, container, fieldName, state, deps = null,
     return;
   }
   clearFileError(container);
+  ensureFileStyles();
+  container.innerHTML = `
+    <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:6px;padding:6px;">
+      <div class="fb-spinner"></div>
+      <div style="font-size:11px;color:var(--fb-text-secondary-color,#6b7280);text-align:center;">${escapeHtml(t("uploadingFile", state))}</div>
+    </div>`;
   let rid;
-  if (state.config.uploadFile) {
-    try {
-      rid = await state.config.uploadFile(file);
-      if (typeof rid !== "string") {
-        throw new Error("Upload handler must return a string resource ID");
-      }
-    } catch (error) {
-      const err = error instanceof Error ? error : new Error(String(error));
-      if (state.config.onUploadError) {
-        state.config.onUploadError(err, file);
-      }
-      throw new Error(`File upload failed: ${err.message}`);
-    }
-  } else {
-    throw new Error(
-      "No upload handler configured. Set uploadHandler via FormBuilder.setUploadHandler()"
-    );
+  try {
+    rid = await uploadSingleFile(file, state);
+  } catch (error) {
+    setEmptyFileContainer(container, state);
+    throw error;
   }
   state.resourceIndex.set(rid, {
     name: file.name,
@@ -2682,7 +3258,6 @@ async function handleFileSelect(file, container, fieldName, state, deps = null,
     size: file.size,
     uploadedAt: /* @__PURE__ */ new Date(),
     file
-    // Store the file object for local preview
   });
   let hiddenInput = container.parentElement?.querySelector(
     'input[type="hidden"]'
@@ -2694,140 +3269,132 @@ async function handleFileSelect(file, container, fieldName, state, deps = null,
     container.parentElement?.appendChild(hiddenInput);
   }
   hiddenInput.value = rid;
-  renderFilePreview(container, rid, state, {
-    fileName: file.name,
-    isReadonly: false,
-    deps
-  }).catch(console.error);
+  const isVideo = file.type.startsWith("video/");
+  if (!isVideo && deps) {
+    renderSingleFileEditTile(container, rid, state, deps).catch(console.error);
+  } else {
+    renderFilePreview(container, rid, state, {
+      fileName: file.name,
+      isReadonly: false,
+      deps
+    }).catch(console.error);
+  }
   if (instance && !state.config.readonly) {
     instance.triggerOnChange(fieldName, rid);
   }
 }
-function setupDragAndDrop(element, dropHandler) {
-  element.addEventListener("dragover", (e) => {
-    e.preventDefault();
-    element.classList.add("border-blue-500", "bg-blue-50");
-  });
-  element.addEventListener("dragleave", (e) => {
-    e.preventDefault();
-    element.classList.remove("border-blue-500", "bg-blue-50");
-  });
-  element.addEventListener("drop", (e) => {
-    e.preventDefault();
-    element.classList.remove("border-blue-500", "bg-blue-50");
-    if (e.dataTransfer?.files) {
-      dropHandler(e.dataTransfer.files);
-    }
-  });
-}
-function addDeleteButton(container, state, onDelete) {
-  const existingOverlay = container.querySelector(".delete-overlay");
-  if (existingOverlay) {
-    existingOverlay.remove();
-  }
-  const overlay = document.createElement("div");
-  overlay.className = "delete-overlay absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center";
-  const deleteBtn = document.createElement("button");
-  deleteBtn.className = "bg-red-600 text-white px-3 py-1 rounded text-sm hover:bg-red-700 transition-colors";
-  deleteBtn.textContent = t("removeElement", state);
-  deleteBtn.onclick = (e) => {
-    e.stopPropagation();
-    onDelete();
-  };
-  overlay.appendChild(deleteBtn);
-  container.appendChild(overlay);
-}
-async function uploadSingleFile(file, state) {
-  if (state.config.uploadFile) {
-    try {
-      const rid = await state.config.uploadFile(file);
-      if (typeof rid !== "string") {
-        throw new Error("Upload handler must return a string resource ID");
-      }
-      return rid;
-    } catch (error) {
-      const err = error instanceof Error ? error : new Error(String(error));
-      if (state.config.onUploadError) {
-        state.config.onUploadError(err, file);
-      }
-      throw new Error(`File upload failed: ${err.message}`);
-    }
-  } else {
-    throw new Error(
-      "No upload handler configured. Set uploadHandler via FormBuilder.setUploadHandler()"
+function filterAndSlice(allFiles, currentCount, constraints, state) {
+  const rejectedByExt = allFiles.filter(
+    (f) => !isFileExtensionAllowed(f.name, constraints.allowedExtensions)
+  );
+  const afterExt = allFiles.filter(
+    (f) => isFileExtensionAllowed(f.name, constraints.allowedExtensions)
+  );
+  const rejectedBySize = afterExt.filter(
+    (f) => !isFileSizeAllowed(f, constraints.maxSize)
+  );
+  const valid = afterExt.filter((f) => isFileSizeAllowed(f, constraints.maxSize));
+  const remaining = constraints.maxCount === Infinity ? valid.length : Math.max(0, constraints.maxCount - currentCount);
+  const accepted = valid.slice(0, remaining);
+  const skippedByCount = valid.length - accepted.length;
+  const errorParts = [];
+  if (rejectedByExt.length > 0) {
+    const formats = constraints.allowedExtensions.join(", ");
+    const names = rejectedByExt.map((f) => f.name).join(", ");
+    errorParts.push(t("invalidFileExtension", state, { name: names, formats }));
+  }
+  if (rejectedBySize.length > 0) {
+    const names = rejectedBySize.map((f) => f.name).join(", ");
+    errorParts.push(
+      t("fileTooLarge", state, { name: names, maxSize: constraints.maxSize })
     );
   }
-}
-async function forceDownload(resourceId, fileName, state) {
-  try {
-    let fileUrl = null;
-    if (state.config.getDownloadUrl) {
-      fileUrl = state.config.getDownloadUrl(resourceId);
-    } else if (state.config.getThumbnail) {
-      fileUrl = await state.config.getThumbnail(resourceId);
-    }
-    if (fileUrl) {
-      const finalUrl = fileUrl.startsWith("http") ? fileUrl : new URL(fileUrl, window.location.href).href;
-      const response = await fetch(finalUrl);
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-      const blob = await response.blob();
-      downloadBlob(blob, fileName);
-    } else {
-      throw new Error("No download URL available for resource");
-    }
-  } catch (error) {
-    const err = error instanceof Error ? error : new Error(String(error));
-    if (state.config.onDownloadError) {
-      state.config.onDownloadError(err, resourceId, fileName);
-    }
-    console.error(`File download failed for ${fileName}:`, err);
-    throw err;
-  }
-}
-function downloadBlob(blob, fileName) {
-  try {
-    const blobUrl = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = blobUrl;
-    link.download = fileName;
-    link.style.display = "none";
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    setTimeout(() => {
-      URL.revokeObjectURL(blobUrl);
-    }, 100);
-  } catch (error) {
-    throw new Error(`Blob download failed: ${error.message}`);
+  if (skippedByCount > 0) {
+    errorParts.push(
+      t("filesLimitExceeded", state, {
+        skipped: skippedByCount,
+        max: constraints.maxCount
+      })
+    );
   }
-}
-function addPrefillFilesToIndex(initialFiles, state) {
-  if (initialFiles.length > 0) {
-    initialFiles.forEach((resourceId) => {
-      if (!state.resourceIndex.has(resourceId)) {
-        const filename = resourceId.split("/").pop() || "file";
-        const extension = filename.split(".").pop()?.toLowerCase();
-        let fileType = "application/octet-stream";
-        if (extension) {
-          if (["jpg", "jpeg", "png", "gif", "webp"].includes(extension)) {
-            fileType = `image/${extension === "jpg" ? "jpeg" : extension}`;
-          } else if (["mp4", "webm", "mov", "avi"].includes(extension)) {
-            fileType = `video/${extension === "mov" ? "quicktime" : extension}`;
-          }
+  return { accepted, errorMessage: errorParts.join(" \u2022 ") };
+}
+async function uploadBatch(accepted, resourceIds, listEl, state) {
+  await Promise.all(
+    accepted.map(async (file) => {
+      const placeholder = createUploadingTile(file.name, state);
+      if (listEl) {
+        const tilesWrap = ensureTilesWrap(listEl);
+        const addTile = tilesWrap.querySelector(".fb-tile-add");
+        if (addTile) {
+          tilesWrap.insertBefore(placeholder, addTile);
+        } else {
+          tilesWrap.appendChild(placeholder);
         }
-        state.resourceIndex.set(resourceId, {
-          name: filename,
-          type: fileType,
-          size: 0,
+      }
+      try {
+        const rid = await uploadSingleFile(file, state);
+        state.resourceIndex.set(rid, {
+          name: file.name,
+          type: file.type,
+          size: file.size,
           uploadedAt: /* @__PURE__ */ new Date(),
           file: void 0
         });
+        resourceIds.push(rid);
+      } finally {
+        placeholder.remove();
       }
-    });
-  }
+    })
+  );
+}
+function setupFilesDropHandler(filesContainer, resourceIds, state, updateCallback, constraints, pathKey, instance) {
+  setupDragAndDrop(filesContainer, async (files) => {
+    const { accepted, errorMessage } = filterAndSlice(
+      Array.from(files),
+      resourceIds.length,
+      constraints,
+      state
+    );
+    if (errorMessage) {
+      showFileError(filesContainer, errorMessage);
+    } else {
+      clearFileError(filesContainer);
+    }
+    const list = filesContainer.querySelector(".files-list") ?? filesContainer;
+    await uploadBatch(accepted, resourceIds, list, state);
+    updateCallback();
+    if (instance && pathKey && !state.config.readonly) {
+      instance.triggerOnChange(pathKey, resourceIds);
+    }
+  });
+}
+function setupFilesPickerHandler(filesPicker, resourceIds, state, updateCallback, constraints, pathKey, instance) {
+  filesPicker.onchange = async () => {
+    if (!filesPicker.files) return;
+    const wrapperEl = filesPicker.closest(".space-y-2") || filesPicker.parentElement;
+    const { accepted, errorMessage } = filterAndSlice(
+      Array.from(filesPicker.files),
+      resourceIds.length,
+      constraints,
+      state
+    );
+    if (errorMessage && wrapperEl) {
+      showFileError(wrapperEl, errorMessage);
+    } else if (wrapperEl) {
+      clearFileError(wrapperEl);
+    }
+    const listEl = wrapperEl?.querySelector(".files-list");
+    await uploadBatch(accepted, resourceIds, listEl ?? null, state);
+    updateCallback();
+    filesPicker.value = "";
+    if (instance && pathKey && !state.config.readonly) {
+      instance.triggerOnChange(pathKey, resourceIds);
+    }
+  };
 }
+
+// src/components/file/render-edit.ts
 function handleInitialFileData(initial, fileContainer, pathKey, fileWrapper, state, deps) {
   if (!state.resourceIndex.has(initial)) {
     const filename = initial.split("/").pop() || "file";
@@ -2848,493 +3415,553 @@ function handleInitialFileData(initial, fileContainer, pathKey, fileWrapper, sta
       file: void 0
     });
   }
-  renderFilePreview(fileContainer, initial, state, {
-    fileName: initial,
-    isReadonly: false,
-    deps
-  }).catch(console.error);
+  const meta = state.resourceIndex.get(initial);
+  const isVideo = meta?.type?.startsWith("video/");
+  if (isVideo) {
+    renderFilePreview(fileContainer, initial, state, {
+      fileName: initial,
+      isReadonly: false,
+      deps
+    }).catch(console.error);
+  } else {
+    renderSingleFileEditTile(fileContainer, initial, state, deps).catch(console.error);
+  }
   const hiddenInput = document.createElement("input");
   hiddenInput.type = "hidden";
   hiddenInput.name = pathKey;
   hiddenInput.value = initial;
   fileWrapper.appendChild(hiddenInput);
 }
-function setupFilesDropHandler(filesContainer, initialFiles, state, updateCallback, constraints, pathKey, instance) {
-  setupDragAndDrop(filesContainer, async (files) => {
-    const allFiles = Array.from(files);
-    const rejectedByExtension = allFiles.filter(
-      (f) => !isFileExtensionAllowed(f.name, constraints.allowedExtensions)
-    );
-    const afterExtension = allFiles.filter(
-      (f) => isFileExtensionAllowed(f.name, constraints.allowedExtensions)
-    );
-    const rejectedBySize = afterExtension.filter(
-      (f) => !isFileSizeAllowed(f, constraints.maxSize)
-    );
-    const validFiles = afterExtension.filter(
-      (f) => isFileSizeAllowed(f, constraints.maxSize)
-    );
-    const remaining = constraints.maxCount === Infinity ? validFiles.length : Math.max(0, constraints.maxCount - initialFiles.length);
-    const arr = validFiles.slice(0, remaining);
-    const skippedByCount = validFiles.length - arr.length;
-    const errorParts = [];
-    if (rejectedByExtension.length > 0) {
-      const formats = constraints.allowedExtensions.join(", ");
-      const names = rejectedByExtension.map((f) => f.name).join(", ");
-      errorParts.push(
-        t("invalidFileExtension", state, { name: names, formats })
-      );
-    }
-    if (rejectedBySize.length > 0) {
-      const names = rejectedBySize.map((f) => f.name).join(", ");
-      errorParts.push(
-        t("fileTooLarge", state, { name: names, maxSize: constraints.maxSize })
-      );
-    }
-    if (skippedByCount > 0) {
-      errorParts.push(
-        t("filesLimitExceeded", state, {
-          skipped: skippedByCount,
-          max: constraints.maxCount
-        })
-      );
-    }
-    if (errorParts.length > 0) {
-      showFileError(filesContainer, errorParts.join(" \u2022 "));
-    } else {
-      clearFileError(filesContainer);
-    }
-    for (const file of arr) {
-      const rid = await uploadSingleFile(file, state);
-      state.resourceIndex.set(rid, {
-        name: file.name,
-        type: file.type,
-        size: file.size,
-        uploadedAt: /* @__PURE__ */ new Date(),
-        file: void 0
-      });
-      initialFiles.push(rid);
-    }
-    updateCallback();
-    if (instance && pathKey && !state.config.readonly) {
-      instance.triggerOnChange(pathKey, initialFiles);
-    }
-  });
-}
-function setupFilesPickerHandler(filesPicker, initialFiles, state, updateCallback, constraints, pathKey, instance) {
-  filesPicker.onchange = async () => {
-    if (filesPicker.files) {
-      const allFiles = Array.from(filesPicker.files);
-      const rejectedByExtension = allFiles.filter(
-        (f) => !isFileExtensionAllowed(f.name, constraints.allowedExtensions)
-      );
-      const afterExtension = allFiles.filter(
-        (f) => isFileExtensionAllowed(f.name, constraints.allowedExtensions)
-      );
-      const rejectedBySize = afterExtension.filter(
-        (f) => !isFileSizeAllowed(f, constraints.maxSize)
-      );
-      const validFiles = afterExtension.filter(
-        (f) => isFileSizeAllowed(f, constraints.maxSize)
-      );
-      const remaining = constraints.maxCount === Infinity ? validFiles.length : Math.max(0, constraints.maxCount - initialFiles.length);
-      const arr = validFiles.slice(0, remaining);
-      const skippedByCount = validFiles.length - arr.length;
-      const errorParts = [];
-      if (rejectedByExtension.length > 0) {
-        const formats = constraints.allowedExtensions.join(", ");
-        const names = rejectedByExtension.map((f) => f.name).join(", ");
-        errorParts.push(
-          t("invalidFileExtension", state, { name: names, formats })
-        );
-      }
-      if (rejectedBySize.length > 0) {
-        const names = rejectedBySize.map((f) => f.name).join(", ");
-        errorParts.push(
-          t("fileTooLarge", state, {
-            name: names,
-            maxSize: constraints.maxSize
-          })
-        );
-      }
-      if (skippedByCount > 0) {
-        errorParts.push(
-          t("filesLimitExceeded", state, {
-            skipped: skippedByCount,
-            max: constraints.maxCount
-          })
-        );
-      }
-      const wrapper = filesPicker.closest(".space-y-2") || filesPicker.parentElement;
-      if (errorParts.length > 0 && wrapper) {
-        showFileError(wrapper, errorParts.join(" \u2022 "));
-      } else if (wrapper) {
-        clearFileError(wrapper);
-      }
-      for (const file of arr) {
-        const rid = await uploadSingleFile(file, state);
-        state.resourceIndex.set(rid, {
-          name: file.name,
-          type: file.type,
-          size: file.size,
-          uploadedAt: /* @__PURE__ */ new Date(),
-          file: void 0
-        });
-        initialFiles.push(rid);
-      }
-    }
-    updateCallback();
-    filesPicker.value = "";
-    if (instance && pathKey && !state.config.readonly) {
-      instance.triggerOnChange(pathKey, initialFiles);
-    }
+function renderResourcePills(container, rids, state, onRemove, hint, countInfo, maxCount, isReadonly = false) {
+  ensureFileStyles();
+  const wrapper = container.closest("[data-files-wrapper]");
+  if (wrapper) {
+    wrapper.dataset.resourceIds = JSON.stringify(rids ?? []);
+  }
+  while (container.firstChild) container.removeChild(container.firstChild);
+  const ridList = rids ?? [];
+  const atMax = maxCount !== void 0 && ridList.length >= maxCount;
+  const buildSubHint = () => {
+    const parts = [];
+    if (hint) parts.push(hint);
+    if (countInfo) parts.push(countInfo);
+    return parts.join(" \u2022 ");
   };
-}
-function renderFileElement(element, ctx, wrapper, pathKey) {
-  const state = ctx.state;
-  if (state.config.readonly) {
-    const initial = ctx.prefill[element.key];
-    if (initial) {
-      renderFilePreviewReadonly(initial, state).then((filePreview) => {
-        wrapper.appendChild(filePreview);
-      }).catch((err) => {
-        console.error("Failed to render file preview:", err);
-        const emptyState = document.createElement("div");
-        emptyState.className = "aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500";
-        emptyState.innerHTML = `<div class="text-center">${escapeHtml(t("previewUnavailable", state))}</div>`;
-        wrapper.appendChild(emptyState);
-      });
-    } else {
-      const emptyState = document.createElement("div");
-      emptyState.className = "aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500";
-      emptyState.innerHTML = `<div class="text-center">${escapeHtml(t("noFileSelected", state))}</div>`;
-      wrapper.appendChild(emptyState);
-    }
-  } else {
-    const fileWrapper = document.createElement("div");
-    fileWrapper.className = "space-y-2";
-    const picker = document.createElement("input");
-    picker.type = "file";
-    picker.name = pathKey;
-    picker.style.display = "none";
-    if (element.accept) {
-      picker.accept = typeof element.accept === "string" ? element.accept : element.accept.extensions?.map((ext) => `.${ext}`).join(",") || "";
-    }
-    const fileContainer = document.createElement("div");
-    fileContainer.className = "file-preview-container w-full aspect-square max-w-xs bg-gray-100 rounded-lg overflow-hidden relative group cursor-pointer";
-    const initial = ctx.prefill[element.key];
-    const allowedExts = getAllowedExtensions(element.accept);
-    const maxSizeMB = element.maxSize ?? Infinity;
-    const fileUploadHandler = () => picker.click();
-    const dragHandler = (files) => {
-      if (files.length > 0) {
-        const deps = { picker, fileUploadHandler, dragHandler };
-        handleFileSelect(
-          files[0],
-          fileContainer,
-          pathKey,
-          state,
-          deps,
-          ctx.instance,
-          allowedExts,
-          maxSizeMB
-        );
-      }
-    };
-    if (initial) {
-      handleInitialFileData(
-        initial,
-        fileContainer,
-        pathKey,
-        fileWrapper,
-        state,
-        {
-          picker,
-          fileUploadHandler,
-          dragHandler
-        }
-      );
+  const openPicker = () => {
+    const picker = findFilePicker(container);
+    if (picker) picker.click();
+  };
+  if (ridList.length === 0) {
+    if (isReadonly) {
+      const emptyEl = document.createElement("div");
+      emptyEl.className = "fb-tile-empty-text";
+      emptyEl.textContent = t("noFilesSelected", state);
+      container.appendChild(emptyEl);
     } else {
-      const hint = makeFieldHint(element, state);
-      setEmptyFileContainer(fileContainer, state, hint);
+      const dropzone = document.createElement("div");
+      dropzone.className = "fb-file-dropzone";
+      const subHint2 = buildSubHint();
+      dropzone.innerHTML = `
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" style="flex-shrink:0;color:var(--fb-file-upload-text-color,#9ca3af);">
+          <path d="M19.35 10.04A7.49 7.49 0 0012 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 000 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
+        </svg>
+        <div class="fb-dropzone-primary-text">${escapeHtml(t("clickDragTextMultiple", state))}</div>
+        ${subHint2 ? `<div class="fb-dropzone-hint-text">${escapeHtml(subHint2)}</div>` : ""}
+      `;
+      dropzone.onclick = openPicker;
+      container.appendChild(dropzone);
     }
-    fileContainer.onclick = fileUploadHandler;
-    setupDragAndDrop(fileContainer, dragHandler);
-    picker.onchange = () => {
-      if (picker.files && picker.files.length > 0) {
-        const deps = { picker, fileUploadHandler, dragHandler };
+    return;
+  }
+  const tilesWrap = document.createElement("div");
+  tilesWrap.className = "fb-tiles-wrap";
+  tilesWrap.style.cssText = "display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;";
+  for (const rid of ridList) {
+    const meta = state.resourceIndex.get(rid);
+    const tile = createFileTile();
+    tile.classList.add("fb-tile-resource", "resource-pill");
+    tile.dataset.resourceId = rid;
+    const actionsEl = createTileActions({
+      canRemove: !isReadonly && onRemove !== null,
+      removeHandler: onRemove ? () => onRemove(rid) : null,
+      state,
+      resourceId: rid,
+      fileName: meta?.name ?? ""
+    });
+    fillTileContent(tile, rid, meta, state, actionsEl).catch((err) => {
+      console.error("Failed to render tile:", err);
+    });
+    tilesWrap.appendChild(tile);
+  }
+  if (!isReadonly && !atMax) {
+    const addTile = document.createElement("div");
+    addTile.className = "fb-tile fb-tile-add";
+    addTile.innerHTML = "+";
+    addTile.onclick = openPicker;
+    tilesWrap.appendChild(addTile);
+  } else if (!isReadonly && atMax) {
+    const chip = document.createElement("div");
+    chip.className = "fb-tile-counter";
+    chip.textContent = t("filesCounter", state, {
+      count: ridList.length,
+      max: maxCount
+    });
+    tilesWrap.appendChild(chip);
+  }
+  container.appendChild(tilesWrap);
+  const subHint = buildSubHint();
+  if (subHint) {
+    const hintEl = document.createElement("div");
+    hintEl.className = "fb-tile-hint";
+    hintEl.textContent = subHint;
+    container.appendChild(hintEl);
+  }
+}
+function renderFileElementEdit(element, ctx, wrapper, pathKey) {
+  const state = ctx.state;
+  const fileWrapper = document.createElement("div");
+  fileWrapper.className = "space-y-2";
+  const picker = document.createElement("input");
+  picker.type = "file";
+  picker.name = pathKey;
+  picker.style.display = "none";
+  if (element.accept) {
+    picker.accept = typeof element.accept === "string" ? element.accept : element.accept.extensions?.map((ext) => `.${ext}`).join(",") || "";
+  }
+  const fileContainer = document.createElement("div");
+  fileContainer.className = "file-preview-container";
+  const initial = ctx.prefill[element.key];
+  const allowedExts = getAllowedExtensions(element.accept);
+  const maxSizeMB = element.maxSize ?? Infinity;
+  const handlers = {
+    fileUploadHandler() {
+      picker.click();
+    },
+    dragHandler(files) {
+      if (files.length > 0) {
         handleFileSelect(
-          picker.files[0],
+          files[0],
           fileContainer,
           pathKey,
           state,
-          deps,
+          buildDeps(),
           ctx.instance,
           allowedExts,
           maxSizeMB
         );
       }
-    };
-    fileWrapper.appendChild(fileContainer);
-    fileWrapper.appendChild(picker);
-    wrapper.appendChild(fileWrapper);
-  }
-}
-function renderFilesElement(element, ctx, wrapper, pathKey) {
-  const state = ctx.state;
-  if (state.config.readonly) {
-    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) => {
-          resultsWrapper.appendChild(filePreview);
-        }).catch((err) => {
-          console.error("Failed to render file preview:", err);
-        });
-      });
-    } else {
-      resultsWrapper.innerHTML = `<div class="aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500"><div class="text-center">${escapeHtml(t("noFilesSelected", state))}</div></div>`;
+    },
+    setupDrop(container) {
+      setupDragAndDrop(container, handlers.dragHandler);
+    },
+    restoreDropzone() {
+      const hint = makeFieldHint(element, state);
+      fileContainer.className = "file-preview-container w-full max-w-md bg-gray-100 rounded-lg overflow-hidden relative group cursor-pointer";
+      fileContainer.style.height = "128px";
+      setEmptyFileContainer(fileContainer, state, hint);
+      fileContainer.onclick = handlers.fileUploadHandler;
+      setupDragAndDrop(fileContainer, handlers.dragHandler);
+    },
+    onRemove() {
+      const hiddenInput = fileWrapper.querySelector('input[type="hidden"]');
+      const currentRid = hiddenInput?.value;
+      if (currentRid) {
+        releaseLocalFileUrl(state.resourceIndex.get(currentRid)?.file);
+      }
+      if (hiddenInput) hiddenInput.value = "";
+      handlers.restoreDropzone();
+    }
+  };
+  const buildDeps = () => ({
+    picker,
+    fileUploadHandler: handlers.fileUploadHandler,
+    dragHandler: handlers.dragHandler,
+    setupDrop: handlers.setupDrop,
+    onRemove: handlers.onRemove
+  });
+  if (initial) {
+    handleInitialFileData(
+      initial,
+      fileContainer,
+      pathKey,
+      fileWrapper,
+      state,
+      buildDeps()
+    );
+    const prefillMeta = state.resourceIndex.get(initial);
+    if (prefillMeta?.type?.startsWith("video/")) {
+      fileContainer.onclick = handlers.fileUploadHandler;
+      setupDragAndDrop(fileContainer, handlers.dragHandler);
     }
-    wrapper.appendChild(resultsWrapper);
   } else {
-    let updateFilesList2 = function() {
-      renderResourcePills(
-        list,
-        initialFiles,
+    handlers.restoreDropzone();
+  }
+  picker.onchange = () => {
+    if (picker.files && picker.files.length > 0) {
+      handleFileSelect(
+        picker.files[0],
+        fileContainer,
+        pathKey,
         state,
-        (ridToRemove) => {
-          const index = initialFiles.indexOf(ridToRemove);
-          if (index > -1) {
-            initialFiles.splice(index, 1);
-          }
-          updateFilesList2();
-        },
-        filesFieldHint
+        buildDeps(),
+        ctx.instance,
+        allowedExts,
+        maxSizeMB
       );
-    };
-    const filesWrapper = document.createElement("div");
-    filesWrapper.className = "space-y-2";
-    const filesPicker = document.createElement("input");
-    filesPicker.type = "file";
-    filesPicker.name = pathKey;
-    filesPicker.multiple = true;
-    filesPicker.style.display = "none";
-    if (element.accept) {
-      filesPicker.accept = typeof element.accept === "string" ? element.accept : element.accept.extensions?.map((ext) => `.${ext}`).join(",") || "";
-    }
-    const filesContainer = document.createElement("div");
-    filesContainer.className = "border-2 border-dashed border-gray-300 rounded-lg p-3 hover:border-gray-400 transition-colors";
-    const list = document.createElement("div");
-    list.className = "files-list";
-    const initialFiles = ctx.prefill[element.key] || [];
-    addPrefillFilesToIndex(initialFiles, state);
-    const filesFieldHint = makeFieldHint(element, state);
-    const filesConstraints = {
-      maxCount: Infinity,
-      allowedExtensions: getAllowedExtensions(element.accept),
-      maxSize: element.maxSize ?? Infinity
-    };
-    updateFilesList2();
-    setupFilesDropHandler(
-      filesContainer,
-      initialFiles,
-      state,
-      updateFilesList2,
-      filesConstraints,
-      pathKey,
-      ctx.instance
-    );
-    setupFilesPickerHandler(
-      filesPicker,
+    }
+  };
+  fileWrapper.appendChild(fileContainer);
+  fileWrapper.appendChild(picker);
+  wrapper.appendChild(fileWrapper);
+}
+function renderFilesElementEdit(element, ctx, wrapper, pathKey) {
+  const state = ctx.state;
+  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;
+  filesPicker.multiple = true;
+  filesPicker.style.display = "none";
+  if (element.accept) {
+    filesPicker.accept = typeof element.accept === "string" ? element.accept : element.accept.extensions?.map((ext) => `.${ext}`).join(",") || "";
+  }
+  const filesContainer = document.createElement("div");
+  filesContainer.className = "files-list-wrapper";
+  filesContainer.style.cssText = "border:2px dashed var(--fb-file-upload-border-color,#d1d5db);border-radius:var(--fb-border-radius,0.5rem);padding:8px;transition:border-color var(--fb-transition-duration,200ms),background var(--fb-transition-duration,200ms);";
+  const list = document.createElement("div");
+  list.className = "files-list";
+  const initialFiles = ctx.prefill[element.key] || [];
+  addPrefillFilesToIndex(initialFiles, state.resourceIndex);
+  filesWrapper.dataset.resourceIds = JSON.stringify(initialFiles);
+  const filesFieldHint = makeFieldHint(element, state);
+  const filesConstraints = {
+    maxCount: Infinity,
+    allowedExtensions: getAllowedExtensions(element.accept),
+    maxSize: element.maxSize ?? Infinity
+  };
+  filesContainer.appendChild(list);
+  filesWrapper.appendChild(filesPicker);
+  filesWrapper.appendChild(filesContainer);
+  wrapper.appendChild(filesWrapper);
+  function updateFilesList() {
+    const currentlyReadonly = isElementReadonly(element, state);
+    renderResourcePills(
+      list,
       initialFiles,
       state,
-      updateFilesList2,
-      filesConstraints,
-      pathKey,
-      ctx.instance
+      currentlyReadonly ? null : (ridToRemove) => {
+        releaseLocalFileUrl(state.resourceIndex.get(ridToRemove)?.file);
+        const index = initialFiles.indexOf(ridToRemove);
+        if (index > -1) initialFiles.splice(index, 1);
+        updateFilesList();
+      },
+      filesFieldHint,
+      void 0,
+      void 0,
+      currentlyReadonly
     );
-    filesContainer.appendChild(list);
-    filesWrapper.appendChild(filesContainer);
-    filesWrapper.appendChild(filesPicker);
-    wrapper.appendChild(filesWrapper);
   }
+  updateFilesList();
+  setupFilesDropHandler(
+    filesContainer,
+    initialFiles,
+    state,
+    updateFilesList,
+    filesConstraints,
+    pathKey,
+    ctx.instance
+  );
+  setupFilesPickerHandler(
+    filesPicker,
+    initialFiles,
+    state,
+    updateFilesList,
+    filesConstraints,
+    pathKey,
+    ctx.instance
+  );
 }
-function renderMultipleFileElement(element, ctx, wrapper, pathKey) {
+function renderMultipleFileElementEdit(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
   const minFiles = element.minCount ?? 0;
   const maxFiles = element.maxCount ?? Infinity;
-  if (state.config.readonly) {
-    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) => {
-          resultsWrapper.appendChild(filePreview);
-        }).catch((err) => {
-          console.error("Failed to render file preview:", err);
-        });
-      });
-    } else {
-      resultsWrapper.innerHTML = `<div class="aspect-video bg-gray-100 rounded-lg flex items-center justify-center text-gray-500"><div class="text-center">${escapeHtml(t("noFilesSelected", state))}</div></div>`;
-    }
-    wrapper.appendChild(resultsWrapper);
-  } else {
-    const filesWrapper = document.createElement("div");
-    filesWrapper.className = "space-y-2";
-    const filesPicker = document.createElement("input");
-    filesPicker.type = "file";
-    filesPicker.name = pathKey;
-    filesPicker.multiple = true;
-    filesPicker.style.display = "none";
-    if (element.accept) {
-      filesPicker.accept = typeof element.accept === "string" ? element.accept : element.accept.extensions?.map((ext) => `.${ext}`).join(",") || "";
-    }
-    const filesContainer = document.createElement("div");
-    filesContainer.className = "files-list space-y-2";
-    filesWrapper.appendChild(filesPicker);
-    filesWrapper.appendChild(filesContainer);
-    const initialFiles = Array.isArray(ctx.prefill[element.key]) ? [...ctx.prefill[element.key]] : [];
-    addPrefillFilesToIndex(initialFiles, state);
-    const multipleFilesHint = makeFieldHint(element, state);
-    const multipleConstraints = {
-      maxCount: maxFiles,
-      allowedExtensions: getAllowedExtensions(element.accept),
-      maxSize: element.maxSize ?? Infinity
-    };
-    const buildCountInfo = () => {
-      const countText = initialFiles.length === 1 ? t("fileCountSingle", state, { count: initialFiles.length }) : t("fileCountPlural", state, { count: initialFiles.length });
-      const minMaxText = minFiles > 0 || maxFiles < Infinity ? ` ${t("fileCountRange", state, { min: minFiles, max: maxFiles })}` : "";
-      return countText + minMaxText;
-    };
-    const updateFilesDisplay = () => {
-      renderResourcePills(
-        filesContainer,
-        initialFiles,
-        state,
-        (index) => {
-          initialFiles.splice(initialFiles.indexOf(index), 1);
-          updateFilesDisplay();
-        },
-        multipleFilesHint,
-        buildCountInfo()
-      );
-    };
-    setupFilesDropHandler(
-      filesContainer,
+  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;
+  filesPicker.multiple = true;
+  filesPicker.style.display = "none";
+  if (element.accept) {
+    filesPicker.accept = typeof element.accept === "string" ? element.accept : element.accept.extensions?.map((ext) => `.${ext}`).join(",") || "";
+  }
+  const filesContainer = document.createElement("div");
+  filesContainer.className = "files-list-wrapper";
+  filesContainer.style.cssText = "border:2px dashed var(--fb-file-upload-border-color,#d1d5db);border-radius:var(--fb-border-radius,0.5rem);padding:8px;transition:border-color var(--fb-transition-duration,200ms),background var(--fb-transition-duration,200ms);";
+  const list = document.createElement("div");
+  list.className = "files-list";
+  filesWrapper.appendChild(filesPicker);
+  filesWrapper.appendChild(filesContainer);
+  filesContainer.appendChild(list);
+  const initialFiles = Array.isArray(ctx.prefill[element.key]) ? [...ctx.prefill[element.key]] : [];
+  addPrefillFilesToIndex(initialFiles, state.resourceIndex);
+  filesWrapper.dataset.resourceIds = JSON.stringify(initialFiles);
+  const multipleFilesHint = makeFieldHint(element, state);
+  const multipleConstraints = {
+    maxCount: maxFiles,
+    allowedExtensions: getAllowedExtensions(element.accept),
+    maxSize: element.maxSize ?? Infinity
+  };
+  const buildCountInfo = () => {
+    const countText = initialFiles.length === 1 ? t("fileCountSingle", state, { count: initialFiles.length }) : t("fileCountPlural", state, { count: initialFiles.length });
+    const minMaxText = minFiles > 0 || maxFiles < Infinity ? ` ${t("fileCountRange", state, { min: minFiles, max: maxFiles })}` : "";
+    return countText + minMaxText;
+  };
+  const updateFilesDisplay = () => {
+    const currentlyReadonly = isElementReadonly(element, state);
+    renderResourcePills(
+      list,
       initialFiles,
       state,
-      updateFilesDisplay,
-      multipleConstraints,
-      pathKey,
-      ctx.instance
+      currentlyReadonly ? null : (index) => {
+        releaseLocalFileUrl(state.resourceIndex.get(index)?.file);
+        initialFiles.splice(initialFiles.indexOf(index), 1);
+        updateFilesDisplay();
+      },
+      multipleFilesHint,
+      buildCountInfo(),
+      maxFiles < Infinity ? maxFiles : void 0,
+      currentlyReadonly
     );
-    setupFilesPickerHandler(
-      filesPicker,
-      initialFiles,
-      state,
-      updateFilesDisplay,
-      multipleConstraints,
-      pathKey,
-      ctx.instance
+  };
+  setupFilesDropHandler(
+    filesContainer,
+    initialFiles,
+    state,
+    updateFilesDisplay,
+    multipleConstraints,
+    pathKey,
+    ctx.instance
+  );
+  setupFilesPickerHandler(
+    filesPicker,
+    initialFiles,
+    state,
+    updateFilesDisplay,
+    multipleConstraints,
+    pathKey,
+    ctx.instance
+  );
+  updateFilesDisplay();
+  wrapper.appendChild(filesWrapper);
+}
+
+// src/components/file/validate.ts
+function readMultiFileResourceIds(scopeRoot, fullKey) {
+  const wrapper = scopeRoot.querySelector(
+    `[data-files-wrapper="${fullKey}"]`
+  );
+  if (!wrapper) return [];
+  const encoded = wrapper.dataset.resourceIds;
+  if (encoded === void 0) {
+    throw new Error(
+      `readMultiFileResourceIds: [data-files-wrapper="${fullKey}"] is missing data-resource-ids attribute. This is a render bug.`
     );
-    updateFilesDisplay();
-    wrapper.appendChild(filesWrapper);
   }
+  const parsed = JSON.parse(encoded);
+  if (!Array.isArray(parsed)) {
+    throw new Error(
+      `readMultiFileResourceIds: data-resource-ids on [data-files-wrapper="${fullKey}"] is not a JSON array. Got: ${encoded}`
+    );
+  }
+  return parsed;
 }
-function validateFileElement(element, key, context) {
-  const errors = [];
-  const { scopeRoot, skipValidation, path } = context;
-  const isMultipleField = element.type === "files" || "multiple" in element && Boolean(element.multiple);
-  const validateFileCount = (key2, resourceIds, element2) => {
-    if (skipValidation) return;
-    const { state } = context;
-    const minFiles = "minCount" in element2 ? element2.minCount ?? 0 : 0;
-    const maxFiles = "maxCount" in element2 ? element2.maxCount ?? Infinity : Infinity;
-    if (element2.required && resourceIds.length === 0) {
-      errors.push(`${key2}: ${t("required", state)}`);
-    }
-    if (resourceIds.length < minFiles) {
-      errors.push(`${key2}: ${t("minFiles", state, { min: minFiles })}`);
-    }
-    if (resourceIds.length > maxFiles) {
-      errors.push(`${key2}: ${t("maxFiles", state, { max: maxFiles })}`);
-    }
-  };
-  const validateFileExtensions = (key2, resourceIds, element2) => {
-    if (skipValidation) return;
-    const { state } = context;
-    const acceptField = "accept" in element2 ? element2.accept : void 0;
-    const allowedExtensions = getAllowedExtensions(acceptField);
-    if (allowedExtensions.length === 0) return;
-    const formats = allowedExtensions.join(", ");
-    for (const rid of resourceIds) {
-      const meta = state.resourceIndex.get(rid);
-      const fileName = meta?.name ?? rid;
-      if (!isFileExtensionAllowed(fileName, allowedExtensions)) {
-        errors.push(
-          `${key2}: ${t("invalidFileExtension", state, { name: fileName, formats })}`
-        );
-      }
+function validateFileCount(key, resourceIds, element, state, errors) {
+  const minFiles = "minCount" in element ? element.minCount ?? 0 : 0;
+  const maxFiles = "maxCount" in element ? element.maxCount ?? Infinity : Infinity;
+  if (element.required && resourceIds.length === 0) {
+    errors.push(`${key}: ${t("required", state)}`);
+  }
+  if (resourceIds.length < minFiles) {
+    errors.push(`${key}: ${t("minFiles", state, { min: minFiles })}`);
+  }
+  if (resourceIds.length > maxFiles) {
+    errors.push(`${key}: ${t("maxFiles", state, { max: maxFiles })}`);
+  }
+}
+function validateFileExtensions(key, resourceIds, element, state, errors) {
+  const acceptField = "accept" in element ? element.accept : void 0;
+  const allowedExtensions = getAllowedExtensions(acceptField);
+  if (allowedExtensions.length === 0) return;
+  const formats = allowedExtensions.join(", ");
+  for (const rid of resourceIds) {
+    const meta = state.resourceIndex.get(rid);
+    const fileName = meta?.name ?? rid;
+    if (!isFileExtensionAllowed(fileName, allowedExtensions)) {
+      errors.push(
+        `${key}: ${t("invalidFileExtension", state, { name: fileName, formats })}`
+      );
     }
-  };
-  const validateFileSizes = (key2, resourceIds, element2) => {
-    if (skipValidation) return;
-    const { state } = context;
-    const maxSizeMB = "maxSize" in element2 ? element2.maxSize ?? Infinity : Infinity;
-    if (maxSizeMB === Infinity) return;
-    for (const rid of resourceIds) {
-      const meta = state.resourceIndex.get(rid);
-      if (!meta) continue;
-      if (meta.size > maxSizeMB * 1024 * 1024) {
-        errors.push(
-          `${key2}: ${t("fileTooLarge", state, { name: meta.name, maxSize: maxSizeMB })}`
-        );
-      }
+  }
+}
+function validateFileSizes(key, resourceIds, element, state, errors) {
+  const maxSizeMB = "maxSize" in element ? element.maxSize ?? Infinity : Infinity;
+  if (maxSizeMB === Infinity) return;
+  for (const rid of resourceIds) {
+    const meta = state.resourceIndex.get(rid);
+    if (!meta) continue;
+    if (meta.size > maxSizeMB * 1024 * 1024) {
+      errors.push(
+        `${key}: ${t("fileTooLarge", state, { name: meta.name, maxSize: maxSizeMB })}`
+      );
     }
-  };
+  }
+}
+function validateMultiFile(element, key, context) {
+  const { scopeRoot, skipValidation, path, state } = context;
+  const errors = [];
+  const fullKey = pathJoin(path, key);
+  const resourceIds = readMultiFileResourceIds(scopeRoot, fullKey);
+  if (!skipValidation) {
+    validateFileCount(key, resourceIds, element, state, errors);
+    validateFileExtensions(key, resourceIds, element, state, errors);
+    validateFileSizes(key, resourceIds, element, state, errors);
+  }
+  return { value: resourceIds, errors };
+}
+function validateSingleFile(element, key, context) {
+  const { scopeRoot, skipValidation, state } = context;
+  const errors = [];
+  const input = scopeRoot.querySelector(
+    `input[name$="${key}"][type="hidden"]`
+  );
+  const rid = input?.value ?? "";
+  if (!skipValidation && element.required && rid === "") {
+    errors.push(`${key}: ${t("required", state)}`);
+    return { value: null, errors };
+  }
+  if (!skipValidation && rid !== "") {
+    validateFileExtensions(key, [rid], element, state, errors);
+    validateFileSizes(key, [rid], element, state, errors);
+  }
+  return { value: rid || null, errors };
+}
+function validateFileElement(element, key, context) {
+  const isMultipleField = element.type === "files" || "multiple" in element && Boolean(element.multiple);
   if (isMultipleField) {
-    const fullKey = pathJoin(path, key);
-    const pickerInput = scopeRoot.querySelector(
-      `input[type="file"][name="${fullKey}"]`
-    );
-    const filesWrapper = pickerInput?.closest(".space-y-2");
-    const container = filesWrapper?.querySelector(".files-list") || null;
-    const resourceIds = [];
-    if (container) {
-      const pills = container.querySelectorAll(".resource-pill");
-      pills.forEach((pill) => {
-        const resourceId = pill.dataset.resourceId;
-        if (resourceId) {
-          resourceIds.push(resourceId);
-        }
-      });
-    }
-    validateFileCount(key, resourceIds, element);
-    validateFileExtensions(key, resourceIds, element);
-    validateFileSizes(key, resourceIds, element);
-    return { value: resourceIds, errors };
+    return validateMultiFile(element, key, context);
+  }
+  return validateSingleFile(element, key, context);
+}
+
+// src/components/file/render-readonly.ts
+function renderFileElementReadonly(element, ctx, wrapper, pathKey) {
+  const state = ctx.state;
+  const rawInitial = ctx.prefill[element.key];
+  const initial = typeof rawInitial === "string" ? rawInitial : "";
+  if (initial) {
+    addPrefillFilesToIndex([initial], state.resourceIndex);
+    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) => {
+      console.error("Failed to render file preview:", err);
+      wrapper.appendChild(buildEmptyReadonlyTile(state));
+    });
   } else {
-    const input = scopeRoot.querySelector(
-      `input[name$="${key}"][type="hidden"]`
-    );
-    const rid = input?.value ?? "";
-    if (!skipValidation && element.required && rid === "") {
-      errors.push(`${key}: ${t("required", context.state)}`);
-      return { value: null, errors };
-    }
-    if (!skipValidation && rid !== "") {
-      validateFileExtensions(key, [rid], element);
-      validateFileSizes(key, [rid], element);
-    }
-    return { value: rid || null, errors };
+    wrapper.appendChild(buildEmptyReadonlyTile(state));
+  }
+}
+function buildEmptyReadonlyTile(state) {
+  const emptyState = document.createElement("div");
+  emptyState.style.cssText = `
+    width:${TILE_SIZE};
+    height:${TILE_SIZE};
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    background:var(--fb-file-upload-bg-color,#f3f4f6);
+    border-radius:var(--fb-border-radius,0.5rem);
+    border:1px solid var(--fb-file-upload-border-color,#d1d5db);
+  `;
+  emptyState.innerHTML = `<div style="font-size:11px;text-align:center;color:var(--fb-text-secondary-color,#6b7280);">${escapeHtml(t("noFileSelected", state))}</div>`;
+  return emptyState;
+}
+function renderMultiFileReadonly(rids, state, wrapper, pathKey, marginTop) {
+  addPrefillFilesToIndex(rids, state.resourceIndex);
+  const filesWrapper = document.createElement("div");
+  filesWrapper.dataset.filesWrapper = pathKey;
+  filesWrapper.dataset.resourceIds = JSON.stringify(rids);
+  wrapper.appendChild(filesWrapper);
+  if (rids.length === 0) {
+    const emptyEl = document.createElement("div");
+    emptyEl.className = "fb-tile-empty-text";
+    emptyEl.textContent = t("noFilesSelected", state);
+    filesWrapper.appendChild(emptyEl);
+    return;
+  }
+  const tilesWrap = document.createElement("div");
+  tilesWrap.style.cssText = `display:flex;flex-wrap:wrap;gap:6px;${marginTop ? `margin-top:${marginTop};` : ""}`;
+  filesWrapper.appendChild(tilesWrap);
+  const placeholders = rids.map(() => {
+    const placeholder = document.createElement("div");
+    placeholder.style.cssText = `width:${TILE_SIZE};height:${TILE_SIZE};`;
+    tilesWrap.appendChild(placeholder);
+    return placeholder;
+  });
+  for (let i = 0; i < rids.length; i++) {
+    const resourceId = rids[i];
+    const placeholder = placeholders[i];
+    renderFilePreviewReadonly(resourceId, state).then((tileEl) => {
+      placeholder.replaceWith(tileEl);
+    }).catch((err) => {
+      console.error("Failed to render readonly tile:", err);
+    });
+  }
+}
+function renderFilesElementReadonly(element, ctx, wrapper, pathKey) {
+  const rawPrefill = ctx.prefill[element.key];
+  const initialFiles = Array.isArray(rawPrefill) ? rawPrefill : [];
+  renderMultiFileReadonly(initialFiles, ctx.state, wrapper, pathKey);
+}
+function renderMultipleFileElementReadonly(element, ctx, wrapper, pathKey) {
+  const rawPrefill = ctx.prefill[element.key];
+  const initialFiles = Array.isArray(rawPrefill) ? rawPrefill : [];
+  renderMultiFileReadonly(initialFiles, ctx.state, wrapper, pathKey, "4px");
+}
+
+// src/components/file.ts
+function renderFileElement(element, ctx, wrapper, pathKey) {
+  if (isElementReadonly(element, ctx.state, ctx)) {
+    renderFileElementReadonly(element, ctx, wrapper, pathKey);
+  } else {
+    renderFileElementEdit(element, ctx, wrapper, pathKey);
+  }
+}
+function renderFilesElement(element, ctx, wrapper, pathKey) {
+  if (isElementReadonly(element, ctx.state, ctx)) {
+    renderFilesElementReadonly(element, ctx, wrapper, pathKey);
+  } else {
+    renderFilesElementEdit(element, ctx, wrapper, pathKey);
+  }
+}
+function renderMultipleFileElement(element, ctx, wrapper, pathKey) {
+  if (isElementReadonly(element, ctx.state, ctx)) {
+    renderMultipleFileElementReadonly(element, ctx, wrapper, pathKey);
+  } else {
+    renderMultipleFileElementEdit(element, ctx, wrapper, pathKey);
   }
 }
 function updateFileField(element, fieldPath, value, context) {
   const { scopeRoot, state } = context;
-  if ("multiple" in element && element.multiple) {
+  if (element.type === "files" || "multiple" in element && element.multiple) {
     if (!Array.isArray(value)) {
       console.warn(
         `updateFileField: Expected array for multiple file field "${fieldPath}", got ${typeof value}`
@@ -3344,29 +3971,20 @@ function updateFileField(element, fieldPath, value, context) {
     value.forEach((resourceId) => {
       if (resourceId && typeof resourceId === "string") {
         if (!state.resourceIndex.has(resourceId)) {
-          const filename = resourceId.split("/").pop() || "file";
-          const extension = filename.split(".").pop()?.toLowerCase();
-          let fileType = "application/octet-stream";
-          if (extension) {
-            if (["jpg", "jpeg", "png", "gif", "webp"].includes(extension)) {
-              fileType = `image/${extension === "jpg" ? "jpeg" : extension}`;
-            } else if (["mp4", "webm", "mov", "avi"].includes(extension)) {
-              fileType = `video/${extension === "mov" ? "quicktime" : extension}`;
-            }
-          }
-          state.resourceIndex.set(resourceId, {
-            name: filename,
-            type: fileType,
-            size: 0,
-            uploadedAt: /* @__PURE__ */ new Date(),
-            file: void 0
-          });
+          addResourceToIndex(resourceId, state);
         }
       }
     });
-    console.info(
-      `updateFileField: Multiple file field "${fieldPath}" updated. Preview update requires re-render.`
+    const filesWrapper = scopeRoot.querySelector(
+      `[data-files-wrapper="${fieldPath}"]`
     );
+    if (filesWrapper) {
+      filesWrapper.dataset.resourceIds = JSON.stringify(value);
+    } else {
+      console.warn(
+        `updateFileField: [data-files-wrapper="${fieldPath}"] not found in DOM; data-resource-ids not updated`
+      );
+    }
   } else {
     const hiddenInput = scopeRoot.querySelector(
       `input[name="${fieldPath}"][type="hidden"]`
@@ -3380,23 +3998,7 @@ function updateFileField(element, fieldPath, value, context) {
     hiddenInput.value = value != null ? String(value) : "";
     if (value && typeof value === "string") {
       if (!state.resourceIndex.has(value)) {
-        const filename = value.split("/").pop() || "file";
-        const extension = filename.split(".").pop()?.toLowerCase();
-        let fileType = "application/octet-stream";
-        if (extension) {
-          if (["jpg", "jpeg", "png", "gif", "webp"].includes(extension)) {
-            fileType = `image/${extension === "jpg" ? "jpeg" : extension}`;
-          } else if (["mp4", "webm", "mov", "avi"].includes(extension)) {
-            fileType = `video/${extension === "mov" ? "quicktime" : extension}`;
-          }
-        }
-        state.resourceIndex.set(value, {
-          name: filename,
-          type: fileType,
-          size: 0,
-          uploadedAt: /* @__PURE__ */ new Date(),
-          file: void 0
-        });
+        addResourceToIndex(value, state);
       }
       console.info(
         `updateFileField: File field "${fieldPath}" updated. Preview update requires re-render.`
@@ -3404,6 +4006,25 @@ function updateFileField(element, fieldPath, value, context) {
     }
   }
 }
+function addResourceToIndex(resourceId, state) {
+  const filename = resourceId.split("/").pop() || "file";
+  const extension = filename.split(".").pop()?.toLowerCase();
+  let fileType = "application/octet-stream";
+  if (extension) {
+    if (["jpg", "jpeg", "png", "gif", "webp"].includes(extension)) {
+      fileType = `image/${extension === "jpg" ? "jpeg" : extension}`;
+    } else if (["mp4", "webm", "mov", "avi"].includes(extension)) {
+      fileType = `video/${extension === "mov" ? "quicktime" : extension}`;
+    }
+  }
+  state.resourceIndex.set(resourceId, {
+    name: filename,
+    type: fileType,
+    size: 0,
+    uploadedAt: /* @__PURE__ */ new Date(),
+    file: void 0
+  });
+}
 
 // src/components/colour.ts
 function normalizeColourValue(value) {
@@ -3559,15 +4180,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 = `
@@ -3580,6 +4202,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;
@@ -3602,7 +4225,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);
@@ -3622,7 +4245,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) => {
@@ -3667,7 +4290,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");
@@ -3714,7 +4337,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 = `
@@ -3783,7 +4406,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 ?? "";
@@ -3830,7 +4455,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]);
@@ -4025,6 +4652,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(
@@ -4032,10 +4660,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 = `
@@ -4059,6 +4687,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;
@@ -4083,13 +4712,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) {
@@ -4101,7 +4724,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) => {
@@ -4147,7 +4770,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");
@@ -4193,7 +4816,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 = `
@@ -4432,9 +5055,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(".")) {
@@ -4498,7 +5119,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);
@@ -4513,12 +5135,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));
     }
@@ -4528,13 +5153,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);
@@ -4572,8 +5199,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";
@@ -4587,13 +5215,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";
@@ -4643,8 +5276,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";
@@ -4659,13 +5293,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";
@@ -4688,7 +5324,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       itemsWrap.appendChild(item);
     });
   }
-  if (!state.config.readonly) {
+  if (!containerIsReadonly) {
     while (countItems() < min) {
       const idx = countItems();
       const subCtx = {
@@ -4696,8 +5332,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";
@@ -4711,7 +5348,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));
         }
@@ -4743,7 +5385,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());
@@ -4902,8 +5544,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);
             }
@@ -4939,8 +5583,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);
         }
@@ -5278,12 +5924,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) => {
@@ -5342,9 +5997,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();
     }
@@ -5492,15 +6145,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]");
@@ -5846,7 +6503,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) {
@@ -6002,7 +6661,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;
@@ -6020,7 +6683,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) => {
@@ -6075,7 +6741,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) => {
@@ -6101,7 +6770,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;
@@ -6160,6 +6830,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";
@@ -6194,11 +6865,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);
@@ -6875,20 +7548,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");
@@ -7132,11 +7811,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(
@@ -7463,6 +8138,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;
@@ -7500,7 +8176,7 @@ function renderRichInputElement(element, ctx, wrapper, pathKey) {
       });
     }
   }
-  if (state.config.readonly) {
+  if (readonly) {
     renderReadonlyMode(element, ctx, wrapper, pathKey, initialValue);
   } else {
     if (!state.config.uploadFile) {
@@ -7562,9 +8238,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 };
@@ -7680,9 +8354,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;
   }
@@ -7727,9 +8399,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) {
@@ -7781,7 +8451,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) {
@@ -7802,14 +8475,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);
@@ -7956,7 +8625,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);
     }
   }
@@ -8008,6 +8679,8 @@ var defaultConfig = {
       noFileSelected: "No file selected",
       noFilesSelected: "No files selected",
       downloadButton: "Download",
+      downloadFile: "Download",
+      openInNewTab: "Open in new tab",
       changeButton: "Change",
       placeholderText: "Enter text",
       previewAlt: "Preview",
@@ -8029,6 +8702,8 @@ var defaultConfig = {
       fileCountSingle: "{count} file",
       fileCountPlural: "{count} files",
       fileCountRange: "({min}-{max})",
+      uploadingFile: "Uploading\u2026",
+      filesCounter: "{count}/{max}",
       // Validation errors
       required: "Required",
       minItems: "Minimum {min} items required",
@@ -8070,6 +8745,8 @@ var defaultConfig = {
       noFileSelected: "\u0424\u0430\u0439\u043B \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D",
       noFilesSelected: "\u041D\u0435\u0442 \u0444\u0430\u0439\u043B\u043E\u0432",
       downloadButton: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C",
+      downloadFile: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C",
+      openInNewTab: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043D\u043E\u0432\u043E\u0439 \u0432\u043A\u043B\u0430\u0434\u043A\u0435",
       changeButton: "\u0418\u0437\u043C\u0435\u043D\u0438\u0442\u044C",
       placeholderText: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442",
       previewAlt: "\u041F\u0440\u0435\u0434\u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440",
@@ -8091,6 +8768,8 @@ var defaultConfig = {
       fileCountSingle: "{count} \u0444\u0430\u0439\u043B",
       fileCountPlural: "{count} \u0444\u0430\u0439\u043B\u043E\u0432",
       fileCountRange: "({min}-{max})",
+      uploadingFile: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430\u2026",
+      filesCounter: "{count}/{max}",
       // Validation errors
       required: "\u041E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E\u0435 \u043F\u043E\u043B\u0435",
       minItems: "\u041C\u0438\u043D\u0438\u043C\u0443\u043C {min} \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u0432",
@@ -8908,7 +9587,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 };
@@ -8917,10 +9599,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;
           }
@@ -9215,7 +9894,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) {