@dmitryvim/form-builder 0.2.30 → 0.2.34

package/dist/esm/index.js

@@ -46,8 +46,9 @@ function addRangeHint(element, parts, state) {
   }
 }
 function addFileSizeHint(element, parts, state) {
-  if (element.maxSizeMB) {
-    parts.push(t("hintMaxSize", state, { size: element.maxSizeMB }));
+  const sizeMB = element.maxSize ?? element.maxSizeMB;
+  if (sizeMB && sizeMB !== Infinity) {
+    parts.push(t("hintMaxSize", state, { size: sizeMB }));
   }
 }
 function addFormatHint(element, parts, state) {
@@ -120,6 +121,25 @@ function validateSchema(schema) {
       });
     }
   }
+  function validateContainerProps(element, elementPath, errors2) {
+    if ("columns" in element && element.columns !== void 0) {
+      const columns = element.columns;
+      const validColumns = [1, 2, 3, 4];
+      if (!Number.isInteger(columns) || !validColumns.includes(columns)) {
+        errors2.push(
+          `${elementPath}: columns must be 1, 2, 3, or 4 (got ${columns})`
+        );
+      }
+    }
+    if ("displayMode" in element && element.displayMode !== void 0) {
+      const displayMode = element.displayMode;
+      if (displayMode !== "stack" && displayMode !== "slides") {
+        errors2.push(
+          `${elementPath}: displayMode must be "stack" or "slides" (got ${JSON.stringify(displayMode)})`
+        );
+      }
+    }
+  }
   function checkFlatOutputCollisions(elements, scopePath) {
     const allOutputKeys = /* @__PURE__ */ new Set();
     for (const el of elements) {
@@ -199,15 +219,7 @@ function validateSchema(schema) {
         validateElements(element.elements, `${elementPath}.elements`);
       }
       if (element.type === "container" && element.elements) {
-        if ("columns" in element && element.columns !== void 0) {
-          const columns = element.columns;
-          const validColumns = [1, 2, 3, 4];
-          if (!Number.isInteger(columns) || !validColumns.includes(columns)) {
-            errors.push(
-              `${elementPath}: columns must be 1, 2, 3, or 4 (got ${columns})`
-            );
-          }
-        }
+        validateContainerProps(element, elementPath, errors);
         if ("prefillHints" in element && element.prefillHints) {
           const prefillHints = element.prefillHints;
           if (Array.isArray(prefillHints)) {
@@ -386,6 +398,167 @@ function deepEqual(a, b) {
   return a === b;
 }
 
+// src/utils/styles.ts
+function mountCounterInLabel(wrapper, counter) {
+  const labelRow = wrapper.querySelector(
+    ":scope > [data-fb-label-row]"
+  );
+  if (labelRow) labelRow.appendChild(counter);
+}
+function createAddItemRow(classNameSuffix, onClick, options = {}) {
+  const label = options.label ?? "";
+  const showCounter = options.showCounter !== false;
+  const row = document.createElement("div");
+  row.className = "fb-add-row mt-2";
+  row.style.cssText = "display:flex;align-items:stretch;width:100%;";
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = `add-${classNameSuffix}-btn`;
+  button.style.cssText = `
+    flex: 1 1 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 6px 10px;
+    border: 1px dashed var(--fb-primary-color);
+    border-radius: var(--fb-border-radius);
+    background: transparent;
+    color: var(--fb-primary-color);
+    font-size: var(--fb-font-size-small, var(--fb-font-size));
+    font-weight: 500;
+    font-family: var(--fb-font-family);
+    cursor: pointer;
+    transition: border-color var(--fb-transition-duration), color var(--fb-transition-duration), background-color var(--fb-transition-duration);
+  `;
+  button.textContent = label ? `+ ${label}` : "+";
+  button.addEventListener("mouseenter", () => {
+    if (button.disabled) return;
+    button.style.borderStyle = "solid";
+    button.style.backgroundColor = "var(--fb-background-hover-color)";
+  });
+  button.addEventListener("mouseleave", () => {
+    button.style.borderStyle = "dashed";
+    button.style.backgroundColor = "transparent";
+  });
+  button.onclick = onClick;
+  const counter = document.createElement("span");
+  counter.className = "fb-add-counter";
+  counter.style.cssText = `
+    margin-left: auto;
+    font-size: var(--fb-font-size-small, 0.875rem);
+    color: var(--fb-text-secondary-color);
+    font-weight: 400;
+  `;
+  if (!showCounter) counter.style.display = "none";
+  row.appendChild(button);
+  const update = (current, max) => {
+    const reached = current >= max;
+    row.style.display = reached ? "none" : "flex";
+    button.style.display = reached ? "none" : "inline-flex";
+    button.disabled = reached;
+    if (showCounter) {
+      counter.textContent = `${current}/${max === Infinity ? "\u221E" : max}`;
+    }
+  };
+  return { row, button, counter, update };
+}
+function createSlideAddTile(onClick, options = {}) {
+  const label = options.label ?? "";
+  const tile = document.createElement("button");
+  tile.type = "button";
+  tile.className = "add-container-btn fb-slide-add";
+  tile.style.cssText = `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    width: 100%;
+    min-height: 180px;
+    align-self: stretch;
+    padding: 24px 16px;
+    border: 1.5px dashed var(--fb-primary-color);
+    border-radius: var(--fb-border-radius);
+    background: transparent;
+    color: var(--fb-primary-color);
+    font-size: var(--fb-font-size-small, var(--fb-font-size));
+    font-weight: 500;
+    font-family: var(--fb-font-family);
+    cursor: pointer;
+    transition: border-color var(--fb-transition-duration), color var(--fb-transition-duration), background-color var(--fb-transition-duration);
+  `;
+  const circle = document.createElement("span");
+  circle.className = "fb-slide-add-circle";
+  circle.style.cssText = `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border: 1px solid var(--fb-primary-color);
+    border-radius: 50%;
+    background: var(--fb-background-color);
+    font-size: 20px;
+    line-height: 1;
+    color: inherit;
+    transition: inherit;
+  `;
+  circle.textContent = "+";
+  tile.appendChild(circle);
+  if (label) {
+    const text = document.createElement("span");
+    text.textContent = label;
+    tile.appendChild(text);
+  }
+  tile.addEventListener("mouseenter", () => {
+    if (tile.disabled) return;
+    tile.style.borderStyle = "solid";
+    tile.style.backgroundColor = "var(--fb-background-hover-color)";
+  });
+  tile.addEventListener("mouseleave", () => {
+    tile.style.borderStyle = "dashed";
+    tile.style.backgroundColor = "transparent";
+  });
+  tile.onclick = onClick;
+  const counter = document.createElement("span");
+  counter.className = "fb-add-counter";
+  counter.style.cssText = `
+    margin-left: auto;
+    font-size: var(--fb-font-size-small, 0.875rem);
+    color: var(--fb-text-secondary-color);
+    font-weight: 400;
+  `;
+  const update = (current, max) => {
+    const reached = current >= max;
+    tile.style.display = reached ? "none" : "flex";
+    tile.disabled = reached;
+    counter.textContent = `${current}/${max === Infinity ? "\u221E" : max}`;
+  };
+  return { tile, counter, update };
+}
+function applyActionButtonStyles(button, isFormLevel = false) {
+  button.style.cssText = `
+    background-color: var(--fb-action-bg-color);
+    color: var(--fb-action-text-color);
+    border: var(--fb-border-width) solid var(--fb-action-border-color);
+    padding: ${isFormLevel ? "0.5rem 1rem" : "0.5rem 0.75rem"};
+    font-size: var(--fb-font-size);
+    font-weight: var(--fb-font-weight-medium);
+    border-radius: var(--fb-border-radius);
+    transition: all var(--fb-transition-duration);
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  `;
+  button.addEventListener("mouseenter", () => {
+    button.style.backgroundColor = "var(--fb-action-hover-bg-color)";
+    button.style.borderColor = "var(--fb-action-hover-border-color)";
+  });
+  button.addEventListener("mouseleave", () => {
+    button.style.backgroundColor = "var(--fb-action-bg-color)";
+    button.style.borderColor = "var(--fb-action-border-color)";
+  });
+}
+
 // src/components/text.ts
 function createCharCounter(element, input, isTextarea = false) {
   const counter = document.createElement("span");
@@ -438,12 +611,13 @@ function renderTextElement(element, ctx, wrapper, pathKey) {
   const readonly = isElementReadonly(element, state, ctx);
   const inputWrapper = document.createElement("div");
   inputWrapper.style.cssText = "position: relative;";
+  const hasCharCounter = !readonly && (element.minLength != null || element.maxLength != null);
   const textInput = document.createElement("input");
   textInput.type = "text";
   textInput.className = "w-full rounded-lg";
   textInput.style.cssText = `
     padding: var(--fb-input-padding-y) var(--fb-input-padding-x);
-    padding-right: 60px;
+    ${hasCharCounter ? "padding-right: 60px;" : ""}
     border: var(--fb-border-width) solid var(--fb-border-color);
     border-radius: var(--fb-border-radius);
     background-color: ${readonly ? "var(--fb-background-readonly-color)" : "var(--fb-background-color)"};
@@ -488,7 +662,7 @@ function renderTextElement(element, ctx, wrapper, pathKey) {
     textInput.addEventListener("input", handleChange);
   }
   inputWrapper.appendChild(textInput);
-  if (!readonly && (element.minLength != null || element.maxLength != null)) {
+  if (hasCharCounter) {
     const counter = createCharCounter(element, textInput, false);
     inputWrapper.appendChild(counter);
   }
@@ -499,6 +673,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
   const readonly = isElementReadonly(element, state, ctx);
   const prefillValues = ctx.prefill[element.key] || [];
   const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
+  const hasCharCounter = !readonly && (element.minLength != null || element.maxLength != null);
   const minCount = element.minCount ?? 1;
   const maxCount = element.maxCount ?? Infinity;
   while (values.length < minCount) {
@@ -525,7 +700,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
     textInput.type = "text";
     textInput.style.cssText = `
       padding: var(--fb-input-padding-y) var(--fb-input-padding-x);
-      padding-right: 60px;
+      ${hasCharCounter ? "padding-right: 60px;" : ""}
       border: var(--fb-border-width) solid var(--fb-border-color);
       border-radius: var(--fb-border-radius);
       background-color: ${readonly ? "var(--fb-background-readonly-color)" : "var(--fb-background-color)"};
@@ -569,7 +744,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
       textInput.addEventListener("input", handleChange);
     }
     inputContainer.appendChild(textInput);
-    if (!readonly && (element.minLength != null || element.maxLength != null)) {
+    if (hasCharCounter) {
       const counter = createCharCounter(element, textInput, false);
       inputContainer.appendChild(counter);
     }
@@ -626,50 +801,24 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
       removeBtn.style.pointerEvents = disabled ? "none" : "auto";
     });
   }
-  let addRow = null;
-  let countDisplay = null;
+  let addUpdate = null;
   if (!readonly) {
-    addRow = document.createElement("div");
-    addRow.className = "flex items-center gap-3 mt-2";
-    const addBtn = document.createElement("button");
-    addBtn.type = "button";
-    addBtn.className = "add-text-btn px-3 py-1 rounded";
-    addBtn.style.cssText = `
-      color: var(--fb-primary-color);
-      border: var(--fb-border-width) solid var(--fb-primary-color);
-      background-color: transparent;
-      font-size: var(--fb-font-size);
-      transition: all var(--fb-transition-duration);
-    `;
-    addBtn.textContent = "+";
-    addBtn.addEventListener("mouseenter", () => {
-      addBtn.style.backgroundColor = "var(--fb-background-hover-color)";
-    });
-    addBtn.addEventListener("mouseleave", () => {
-      addBtn.style.backgroundColor = "transparent";
-    });
-    addBtn.onclick = () => {
-      values.push(element.default || "");
-      addTextItem(element.default || "");
-      updateAddButton();
-      updateRemoveButtons();
-    };
-    countDisplay = document.createElement("span");
-    countDisplay.className = "text-sm text-gray-500";
-    addRow.appendChild(addBtn);
-    addRow.appendChild(countDisplay);
-    wrapper.appendChild(addRow);
+    const handle = createAddItemRow(
+      "text",
+      () => {
+        values.push(element.default || "");
+        addTextItem(element.default || "");
+        updateAddButton();
+        updateRemoveButtons();
+      },
+      { label: element.addLabel }
+    );
+    addUpdate = handle.update;
+    mountCounterInLabel(wrapper, handle.counter);
+    wrapper.appendChild(handle.row);
   }
   function updateAddButton() {
-    if (!addRow || !countDisplay) return;
-    const addBtn = addRow.querySelector(".add-text-btn");
-    if (addBtn) {
-      const disabled = values.length >= maxCount;
-      addBtn.disabled = disabled;
-      addBtn.style.opacity = disabled ? "0.5" : "1";
-      addBtn.style.pointerEvents = disabled ? "none" : "auto";
-    }
-    countDisplay.textContent = `${values.length}/${maxCount === Infinity ? "\u221E" : maxCount}`;
+    if (addUpdate) addUpdate(values.length, maxCount);
   }
   values.forEach((value) => addTextItem(value));
   updateAddButton();
@@ -840,8 +989,12 @@ function renderTextareaElement(element, ctx, wrapper, pathKey) {
   const textareaWrapper = document.createElement("div");
   textareaWrapper.style.cssText = "position: relative;";
   const textareaInput = document.createElement("textarea");
-  textareaInput.className = "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none";
-  textareaInput.style.cssText = "padding-bottom: 24px;";
+  textareaInput.className = "w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none";
+  textareaInput.style.cssText = `
+    padding: var(--fb-input-padding-y) var(--fb-input-padding-x) 24px var(--fb-input-padding-x);
+    font-size: var(--fb-font-size);
+    font-family: var(--fb-font-family);
+  `;
   textareaInput.name = pathKey;
   textareaInput.placeholder = element.placeholder || "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442";
   textareaInput.rows = element.rows || 4;
@@ -893,8 +1046,12 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
     const textareaContainer = document.createElement("div");
     textareaContainer.style.cssText = "position: relative;";
     const textareaInput = document.createElement("textarea");
-    textareaInput.className = "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none";
-    textareaInput.style.cssText = "padding-bottom: 24px;";
+    textareaInput.className = "w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none";
+    textareaInput.style.cssText = `
+      padding: var(--fb-input-padding-y) var(--fb-input-padding-x) 24px var(--fb-input-padding-x);
+      font-size: var(--fb-font-size);
+      font-family: var(--fb-font-family);
+    `;
     textareaInput.placeholder = element.placeholder || t("placeholderText", state);
     textareaInput.rows = element.rows || 4;
     textareaInput.value = value;
@@ -957,52 +1114,24 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
       removeBtn.style.pointerEvents = disabled ? "none" : "auto";
     });
   }
-  let addRow = null;
-  let countDisplay = null;
+  let addUpdate = null;
   if (!readonly) {
-    addRow = document.createElement("div");
-    addRow.className = "flex items-center gap-3 mt-2";
-    const addBtn = document.createElement("button");
-    addBtn.type = "button";
-    addBtn.className = "add-textarea-btn px-3 py-1 rounded";
-    addBtn.style.cssText = `
-      color: var(--fb-primary-color);
-      border: var(--fb-border-width) solid var(--fb-primary-color);
-      background-color: transparent;
-      font-size: var(--fb-font-size);
-      transition: all var(--fb-transition-duration);
-    `;
-    addBtn.textContent = "+";
-    addBtn.addEventListener("mouseenter", () => {
-      addBtn.style.backgroundColor = "var(--fb-background-hover-color)";
-    });
-    addBtn.addEventListener("mouseleave", () => {
-      addBtn.style.backgroundColor = "transparent";
-    });
-    addBtn.onclick = () => {
-      values.push(element.default || "");
-      addTextareaItem(element.default || "");
-      updateAddButton();
-      updateRemoveButtons();
-    };
-    countDisplay = document.createElement("span");
-    countDisplay.className = "text-sm text-gray-500";
-    addRow.appendChild(addBtn);
-    addRow.appendChild(countDisplay);
-    wrapper.appendChild(addRow);
+    const handle = createAddItemRow(
+      "textarea",
+      () => {
+        values.push(element.default || "");
+        addTextareaItem(element.default || "");
+        updateAddButton();
+        updateRemoveButtons();
+      },
+      { label: element.addLabel }
+    );
+    addUpdate = handle.update;
+    mountCounterInLabel(wrapper, handle.counter);
+    wrapper.appendChild(handle.row);
   }
   function updateAddButton() {
-    if (!addRow || !countDisplay) return;
-    const addBtn = addRow.querySelector(
-      ".add-textarea-btn"
-    );
-    if (addBtn) {
-      const disabled = values.length >= maxCount;
-      addBtn.disabled = disabled;
-      addBtn.style.opacity = disabled ? "0.5" : "1";
-      addBtn.style.pointerEvents = disabled ? "none" : "auto";
-    }
-    countDisplay.textContent = `${values.length}/${maxCount === Infinity ? "\u221E" : maxCount}`;
+    if (addUpdate) addUpdate(values.length, maxCount);
   }
   values.forEach((value) => addTextareaItem(value));
   updateAddButton();
@@ -1080,8 +1209,14 @@ function renderNumberElement(element, ctx, wrapper, pathKey) {
   inputWrapper.style.cssText = "position: relative;";
   const numberInput = document.createElement("input");
   numberInput.type = "number";
-  numberInput.className = "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
-  numberInput.style.cssText = "padding-right: 60px; width: 100%; box-sizing: border-box;";
+  numberInput.className = "w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
+  numberInput.style.cssText = `
+    padding: var(--fb-input-padding-y) 60px var(--fb-input-padding-y) var(--fb-input-padding-x);
+    font-size: var(--fb-font-size);
+    font-family: var(--fb-font-family);
+    width: 100%;
+    box-sizing: border-box;
+  `;
   numberInput.name = pathKey;
   numberInput.placeholder = element.placeholder || "0";
   if (element.min !== void 0) numberInput.min = element.min.toString();
@@ -1133,8 +1268,14 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
     inputContainer.style.cssText = "position: relative; flex: 1;";
     const numberInput = document.createElement("input");
     numberInput.type = "number";
-    numberInput.className = "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
-    numberInput.style.cssText = "padding-right: 60px; width: 100%; box-sizing: border-box;";
+    numberInput.className = "w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
+    numberInput.style.cssText = `
+      padding: var(--fb-input-padding-y) 60px var(--fb-input-padding-y) var(--fb-input-padding-x);
+      font-size: var(--fb-font-size);
+      font-family: var(--fb-font-family);
+      width: 100%;
+      box-sizing: border-box;
+    `;
     numberInput.placeholder = element.placeholder || "0";
     if (element.min !== void 0) numberInput.min = element.min.toString();
     if (element.max !== void 0) numberInput.max = element.max.toString();
@@ -1196,50 +1337,24 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
       removeBtn.style.pointerEvents = disabled ? "none" : "auto";
     });
   }
-  let addRow = null;
-  let countDisplay = null;
+  let addUpdate = null;
   if (!readonly) {
-    addRow = document.createElement("div");
-    addRow.className = "flex items-center gap-3 mt-2";
-    const addBtn = document.createElement("button");
-    addBtn.type = "button";
-    addBtn.className = "add-number-btn px-3 py-1 rounded";
-    addBtn.style.cssText = `
-      color: var(--fb-primary-color);
-      border: var(--fb-border-width) solid var(--fb-primary-color);
-      background-color: transparent;
-      font-size: var(--fb-font-size);
-      transition: all var(--fb-transition-duration);
-    `;
-    addBtn.textContent = "+";
-    addBtn.addEventListener("mouseenter", () => {
-      addBtn.style.backgroundColor = "var(--fb-background-hover-color)";
-    });
-    addBtn.addEventListener("mouseleave", () => {
-      addBtn.style.backgroundColor = "transparent";
-    });
-    addBtn.onclick = () => {
-      values.push(element.default || "");
-      addNumberItem(element.default || "");
-      updateAddButton();
-      updateRemoveButtons();
-    };
-    countDisplay = document.createElement("span");
-    countDisplay.className = "text-sm text-gray-500";
-    addRow.appendChild(addBtn);
-    addRow.appendChild(countDisplay);
-    wrapper.appendChild(addRow);
+    const handle = createAddItemRow(
+      "number",
+      () => {
+        values.push(element.default || "");
+        addNumberItem(element.default || "");
+        updateAddButton();
+        updateRemoveButtons();
+      },
+      { label: element.addLabel }
+    );
+    addUpdate = handle.update;
+    mountCounterInLabel(wrapper, handle.counter);
+    wrapper.appendChild(handle.row);
   }
   function updateAddButton() {
-    if (!addRow || !countDisplay) return;
-    const addBtn = addRow.querySelector(".add-number-btn");
-    if (addBtn) {
-      const disabled = values.length >= maxCount;
-      addBtn.disabled = disabled;
-      addBtn.style.opacity = disabled ? "0.5" : "1";
-      addBtn.style.pointerEvents = disabled ? "none" : "auto";
-    }
-    countDisplay.textContent = `${values.length}/${maxCount === Infinity ? "\u221E" : maxCount}`;
+    if (addUpdate) addUpdate(values.length, maxCount);
   }
   values.forEach((value) => addNumberItem(value));
   updateAddButton();
@@ -1405,7 +1520,12 @@ 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.className = "w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
+  selectInput.style.cssText = `
+    padding: var(--fb-input-padding-y) var(--fb-input-padding-x);
+    font-size: var(--fb-font-size);
+    font-family: var(--fb-font-family);
+  `;
   selectInput.name = pathKey;
   selectInput.disabled = readonly;
   (element.options || []).forEach((option) => {
@@ -1457,7 +1577,12 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
     const itemWrapper = document.createElement("div");
     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.className = "flex-1 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
+    selectInput.style.cssText = `
+      padding: var(--fb-input-padding-y) var(--fb-input-padding-x);
+      font-size: var(--fb-font-size);
+      font-family: var(--fb-font-family);
+    `;
     selectInput.disabled = readonly;
     (element.options || []).forEach((option) => {
       const optionElement = document.createElement("option");
@@ -1514,51 +1639,25 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
       removeBtn.style.pointerEvents = disabled ? "none" : "auto";
     });
   }
-  let addRow = null;
-  let countDisplay = null;
+  let addUpdate = null;
   if (!readonly) {
-    addRow = document.createElement("div");
-    addRow.className = "flex items-center gap-3 mt-2";
-    const addBtn = document.createElement("button");
-    addBtn.type = "button";
-    addBtn.className = "add-select-btn px-3 py-1 rounded";
-    addBtn.style.cssText = `
-      color: var(--fb-primary-color);
-      border: var(--fb-border-width) solid var(--fb-primary-color);
-      background-color: transparent;
-      font-size: var(--fb-font-size);
-      transition: all var(--fb-transition-duration);
-    `;
-    addBtn.textContent = "+";
-    addBtn.addEventListener("mouseenter", () => {
-      addBtn.style.backgroundColor = "var(--fb-background-hover-color)";
-    });
-    addBtn.addEventListener("mouseleave", () => {
-      addBtn.style.backgroundColor = "transparent";
-    });
-    addBtn.onclick = () => {
-      const defaultValue = element.default || element.options?.[0]?.value || "";
-      values.push(defaultValue);
-      addSelectItem(defaultValue);
-      updateAddButton();
-      updateRemoveButtons();
-    };
-    countDisplay = document.createElement("span");
-    countDisplay.className = "text-sm text-gray-500";
-    addRow.appendChild(addBtn);
-    addRow.appendChild(countDisplay);
-    wrapper.appendChild(addRow);
+    const handle = createAddItemRow(
+      "select",
+      () => {
+        const defaultValue = element.default || element.options?.[0]?.value || "";
+        values.push(defaultValue);
+        addSelectItem(defaultValue);
+        updateAddButton();
+        updateRemoveButtons();
+      },
+      { label: element.addLabel }
+    );
+    addUpdate = handle.update;
+    mountCounterInLabel(wrapper, handle.counter);
+    wrapper.appendChild(handle.row);
   }
   function updateAddButton() {
-    if (!addRow || !countDisplay) return;
-    const addBtn = addRow.querySelector(".add-select-btn");
-    if (addBtn) {
-      const disabled = values.length >= maxCount;
-      addBtn.disabled = disabled;
-      addBtn.style.opacity = disabled ? "0.5" : "1";
-      addBtn.style.pointerEvents = disabled ? "none" : "auto";
-    }
-    countDisplay.textContent = `${values.length}/${maxCount === Infinity ? "\u221E" : maxCount}`;
+    if (addUpdate) addUpdate(values.length, maxCount);
   }
   values.forEach((value) => addSelectItem(value));
   updateAddButton();
@@ -1901,53 +2000,25 @@ function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
       removeBtn.style.pointerEvents = disabled ? "none" : "auto";
     });
   }
-  let addRow = null;
-  let countDisplay = null;
+  let addUpdate = null;
   if (!readonly) {
-    addRow = document.createElement("div");
-    addRow.className = "flex items-center gap-3 mt-2";
-    const addBtn = document.createElement("button");
-    addBtn.type = "button";
-    addBtn.className = "add-switcher-btn px-3 py-1 rounded";
-    addBtn.style.cssText = `
-      color: var(--fb-primary-color);
-      border: var(--fb-border-width) solid var(--fb-primary-color);
-      background-color: transparent;
-      font-size: var(--fb-font-size);
-      transition: all var(--fb-transition-duration);
-    `;
-    addBtn.textContent = "+";
-    addBtn.addEventListener("mouseenter", () => {
-      addBtn.style.backgroundColor = "var(--fb-background-hover-color)";
-    });
-    addBtn.addEventListener("mouseleave", () => {
-      addBtn.style.backgroundColor = "transparent";
-    });
-    addBtn.onclick = () => {
-      const defaultValue = element.default || element.options?.[0]?.value || "";
-      values.push(defaultValue);
-      addSwitcherItem(defaultValue);
-      updateAddButton();
-      updateRemoveButtons();
-    };
-    countDisplay = document.createElement("span");
-    countDisplay.className = "text-sm text-gray-500";
-    addRow.appendChild(addBtn);
-    addRow.appendChild(countDisplay);
-    wrapper.appendChild(addRow);
+    const handle = createAddItemRow(
+      "switcher",
+      () => {
+        const defaultValue = element.default || element.options?.[0]?.value || "";
+        values.push(defaultValue);
+        addSwitcherItem(defaultValue);
+        updateAddButton();
+        updateRemoveButtons();
+      },
+      { label: element.addLabel }
+    );
+    addUpdate = handle.update;
+    mountCounterInLabel(wrapper, handle.counter);
+    wrapper.appendChild(handle.row);
   }
   function updateAddButton() {
-    if (!addRow || !countDisplay) return;
-    const addBtn = addRow.querySelector(
-      ".add-switcher-btn"
-    );
-    if (addBtn) {
-      const disabled = values.length >= maxCount;
-      addBtn.disabled = disabled;
-      addBtn.style.opacity = disabled ? "0.5" : "1";
-      addBtn.style.pointerEvents = disabled ? "none" : "auto";
-    }
-    countDisplay.textContent = `${values.length}/${maxCount === Infinity ? "\u221E" : maxCount}`;
+    if (addUpdate) addUpdate(values.length, maxCount);
   }
   values.forEach((value) => addSwitcherItem(value));
   updateAddButton();
@@ -2192,7 +2263,13 @@ function ensureFileStyles() {
   style.textContent = `
 @keyframes fb-spin { to { transform: rotate(360deg); } }
 
-/* Spinner used during single-file and multi-file upload */
+/* \u2500\u2500\u2500 Checker background utility \u2500\u2500\u2500 */
+/* Neutral diagonal-stripe background for image previews (never crops) */
+.fb-checker {
+  background-image: repeating-linear-gradient(45deg, #fafafa 0 6px, #f3f4f6 6px 12px);
+}
+
+/* \u2500\u2500\u2500 Spinner \u2500\u2500\u2500 */
 .fb-spinner {
   width: 36px;
   height: 36px;
@@ -2203,207 +2280,271 @@ function ensureFileStyles() {
   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;
+/* \u2500\u2500\u2500 Wide single-file add tile (empty state) \u2500\u2500\u2500 */
+.fb-wide-tile {
+  width: 100%;
+  border-radius: 0.75rem;
+  border: 1px dashed #60a5fa;
+  background: rgba(239,246,255,0.5);
+  display: flex;
   overflow: hidden;
-  border-radius: var(--fb-border-radius, 0.5rem);
-  background: var(--fb-file-upload-bg-color, #f3f4f6);
+  height: 180px;
+  transition: border-color 150ms, background 150ms, box-shadow 150ms;
+  cursor: pointer;
 }
-
-/* Uploaded resource tile \u2014 adds a visible border */
-.fb-tile-resource {
-  border: 1px solid var(--fb-file-upload-border-color, #d1d5db);
+.fb-wide-tile:hover {
+  background: #eff6ff;
 }
-
-/* Uploading placeholder tile \u2014 dashed border, uploading indicator */
-.fb-tile-uploading {
-  border: 2px dashed var(--fb-file-upload-border-color, #d1d5db);
+.fb-wide-tile.fb-drag-over {
+  border-color: #3b82f6;
+  border-width: 2px;
+  background: #eff6ff;
+  box-shadow: 0 0 0 4px rgba(191,219,254,0.7);
 }
 
-/* "+" add-more tile */
-.fb-tile-add {
-  border: 2px dashed var(--fb-file-upload-border-color, #d1d5db);
+/* Upload zone inside wide tile */
+.fb-wide-tile-upload {
+  flex: 1;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: 8px;
+  color: #2563eb;
+  padding: 16px;
+  transition: background 150ms;
   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);
+  background: transparent;
+  border: none;
+  font-family: inherit;
 }
-.fb-tile-add:hover {
-  border-color: var(--fb-file-upload-hover-border-color, #3b82f6);
-  color: var(--fb-text-color, #1f2937);
+.fb-wide-tile-upload:hover {
+  background: rgba(191,219,254,0.25);
 }
 
-/* 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;
+/* Vertical dashed divider between upload and library zones */
+.fb-wide-tile-divider {
+  width: 1px;
+  margin: 16px 0;
+  border-left: 1px dashed rgba(96,165,250,0.5);
+  background: transparent;
+  flex-shrink: 0;
 }
 
-/* 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);
+/* Library zone inside wide tile */
+.fb-wide-tile-library {
+  width: 176px;
+  flex-shrink: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+  gap: 8px;
+  color: #2563eb;
+  padding: 12px;
+  transition: background 150ms;
   cursor: pointer;
-  transition:
-    border-color var(--fb-transition-duration, 200ms),
-    background var(--fb-transition-duration, 200ms);
+  background: transparent;
+  border: none;
+  font-family: inherit;
 }
-.fb-file-dropzone:hover {
-  border-color: var(--fb-file-upload-hover-border-color, #3b82f6);
-  background: var(--fb-background-hover-color, #f9fafb);
+.fb-wide-tile-library:hover {
+  background: rgba(191,219,254,0.25);
 }
 
-/* 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;
+/* \u2500\u2500\u2500 Multi-file outer grid container \u2500\u2500\u2500 */
+.fb-multi-outer {
+  border-radius: 0.75rem;
+  border: 1px dashed #cbd5e1;
+  background: rgba(248,250,252,0.4);
+  padding: 12px;
+  transition: border-color 150ms, background 150ms, box-shadow 150ms;
+}
+.fb-multi-outer.fb-drag-over {
+  border-width: 2px;
+  border-color: #3b82f6;
+  background: rgba(239,246,255,0.4);
+  box-shadow: 0 0 0 4px rgba(191,219,254,0.7);
 }
-.fb-tile-uploading-text {
-  font-size: 8px;
-  color: var(--fb-file-upload-text-color, #9ca3af);
+
+/* With files present: white solid border */
+.fb-multi-outer.fb-multi-has-files {
+  border-style: solid;
+  border-color: #e2e8f0;
+  background: #fff;
 }
-.fb-tile-hint {
-  font-size: 11px;
-  color: var(--fb-file-upload-text-color, #9ca3af);
-  margin-top: 4px;
+
+/* The CSS grid inside */
+.fb-multi-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 10px;
 }
-.fb-tile-empty-text {
-  font-size: 12px;
-  color: var(--fb-text-secondary-color, #6b7280);
-  padding: 4px 0;
+
+/* \u2500\u2500\u2500 Multi square add-tile (combined upload + library) \u2500\u2500\u2500 */
+.fb-multi-add-tile {
+  aspect-ratio: 1 / 1;
+  border-radius: 0.5rem;
+  border: 1px dashed #60a5fa;
+  background: rgba(239,246,255,0.5);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: background 150ms;
 }
-.fb-dropzone-primary-text {
-  font-size: 13px;
-  color: var(--fb-text-secondary-color, #6b7280);
+.fb-multi-add-tile:hover {
+  background: #eff6ff;
 }
-.fb-dropzone-hint-text {
-  font-size: 11px;
-  color: var(--fb-file-upload-text-color, #9ca3af);
+.fb-multi-add-tile.fb-drag-over-tile {
+  border-width: 2px;
+  border-color: #3b82f6;
+  background: rgba(255,255,255,0.8);
 }
 
-/* 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;
+/* Upload half of add-tile */
+.fb-multi-add-upload {
+  flex: 1;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  opacity: 0;
-  transition: opacity var(--fb-transition-duration, 200ms);
+  gap: 4px;
+  color: #2563eb;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  font-family: inherit;
+  width: 100%;
+  transition: background 150ms;
 }
-.fb-tile-resource:hover .fb-tile-x-btn {
-  opacity: 1;
+.fb-multi-add-upload:hover {
+  background: rgba(191,219,254,0.35);
 }
 
-/* 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));
+/* Horizontal dashed divider inside add-tile */
+.fb-multi-add-divider {
+  border-top: 1px dashed rgba(96,165,250,0.5);
+  margin: 0;
+  flex-shrink: 0;
 }
-.fb-play-btn {
-  background: var(--fb-file-bg-color, rgba(255,255,255,0.9));
-  border-radius: 50%;
+
+/* Library strip at bottom of add-tile */
+.fb-multi-add-library {
+  padding: 6px 0;
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 4px;
+  color: #2563eb;
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  font-family: inherit;
+  width: 100%;
+  transition: background 150ms;
+  flex-shrink: 0;
+}
+.fb-multi-add-library:hover {
+  background: rgba(191,219,254,0.35);
 }
 
-/* Edit-mode local video preview wrapper */
-.fb-video-preview-wrap {
+/* \u2500\u2500\u2500 Capacity placeholder squares \u2500\u2500\u2500 */
+.fb-multi-placeholder {
+  aspect-ratio: 1 / 1;
+  border-radius: 0.5rem;
+  border: 1px solid #e2e8f0;
+}
+.fb-multi-placeholder.fb-drag-over {
+  border-width: 2px;
+  border-style: dashed;
+  border-color: #93c5fd;
+  background: rgba(219,234,254,0.6);
+}
+
+/* \u2500\u2500\u2500 Filled preview tile \u2500\u2500\u2500 */
+.fb-preview-tile {
+  aspect-ratio: 1 / 1;
+  border-radius: 0.5rem;
+  border: 1px solid #e2e8f0;
+  overflow: hidden;
   position: relative;
+  cursor: pointer;
+}
+.fb-preview-tile img {
   width: 100%;
   height: 100%;
+  object-fit: contain;
+  display: block;
 }
 
-/* Hover overlay for edit-mode local video (Remove / Change buttons) */
-.fb-video-btn-overlay {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 10;
+/* \u2500\u2500\u2500 Uploading placeholder tile \u2500\u2500\u2500 */
+.fb-uploading-tile {
+  aspect-ratio: 1 / 1;
+  border-radius: 0.5rem;
+  border: 2px dashed #d1d5db;
   display: flex;
-  gap: 4px;
-  opacity: 0;
-  transition: opacity var(--fb-transition-duration, 200ms);
-  pointer-events: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 6px;
 }
-.fb-video-preview-wrap:hover .fb-video-btn-overlay {
-  opacity: 1;
-  pointer-events: auto;
+
+/* \u2500\u2500\u2500 Meta line below multi grid \u2500\u2500\u2500 */
+.fb-meta-line {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex-wrap: wrap;
 }
-.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-meta-text {
+  font-size: 12px;
+  color: #94a3b8;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
 }
-.fb-video-btn-delete {
-  background: rgba(220, 38, 38, 0.85);
+.fb-meta-dot {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: #cbd5e1;
+  flex-shrink: 0;
 }
-.fb-video-btn-delete:hover {
-  background: rgba(185, 28, 28, 0.95);
+.fb-meta-mono {
+  font-family: ui-monospace, 'JetBrains Mono', monospace;
+  font-size: 11px;
+  letter-spacing: -0.02em;
+}
+.fb-clear-all-btn {
+  font-size: 12px;
+  color: #94a3b8;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  font-family: inherit;
+  transition: color 150ms;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
-.fb-video-btn-change {
-  background: rgba(31, 41, 55, 0.85);
+.fb-clear-all-btn:hover {
+  color: #dc2626;
 }
-.fb-video-btn-change:hover {
-  background: rgba(17, 24, 39, 0.95);
+
+/* \u2500\u2500\u2500 Empty text (readonly) \u2500\u2500\u2500 */
+.fb-tile-empty-text {
+  font-size: 11px;
+  color: var(--fb-text-secondary-color, #6b7280);
+  padding: 4px 0;
 }
 
-/* Tile action icon buttons (download / open / remove) \u2014 shown on tile hover */
+/* \u2500\u2500\u2500 Tile action buttons (for zoom popup, compat) \u2500\u2500\u2500 */
 .fb-tile-actions {
   position: absolute;
   top: 3px;
@@ -2415,37 +2556,35 @@ function ensureFileStyles() {
   transition: opacity var(--fb-transition-duration, 200ms);
   z-index: 10;
 }
-.fb-tile-resource:hover .fb-tile-actions {
+.fb-preview-tile:hover .fb-tile-actions {
   opacity: 1;
 }
 .fb-tile-action-btn {
-  width: 28px;
-  height: 28px;
+  width: 24px;
+  height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border: none;
-  border-radius: 50%;
+  border: 1px solid rgba(15,23,42,0.08);
+  border-radius: 0.375rem;
   cursor: pointer;
-  background: rgba(31, 41, 55, 0.75);
-  color: #fff;
+  background: rgba(255,255,255,0.92);
+  color: #374151;
   padding: 0;
   flex-shrink: 0;
-  transition:
-    background var(--fb-transition-duration, 200ms),
-    opacity var(--fb-transition-duration, 200ms);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
+  transition: background var(--fb-transition-duration, 200ms),
+    color 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);
+  background: #ffffff;
+  color: #0f172a;
 }
 .fb-tile-action-remove:hover {
-  background: rgba(185, 28, 28, 0.95);
+  color: #dc2626;
 }
 
-/* Actions row inside zoom popup \u2014 always visible while popup is shown */
+/* Zoom popup action buttons always visible */
 .fb-tile-zoom-preview .fb-tile-actions {
   position: absolute;
   top: 6px;
@@ -2454,116 +2593,145 @@ function ensureFileStyles() {
   z-index: 10000;
 }
 
-/* Two-card empty-state layout (upload card + library card) */
-.fb-file-card-row {
-  display: flex;
-  gap: 8px;
-  align-items: stretch;
+/* \u2500\u2500\u2500 Hover zoom preview popup \u2500\u2500\u2500 */
+.fb-tile-zoom-preview {
+  position: fixed;
+  z-index: 9999;
+  background: var(--fb-background-color, #fff);
+  border: 1px solid #e2e8f0;
+  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-file-card-row .fb-file-dropzone,
-.fb-file-card-row .fb-file-library-card {
-  flex: 1;
-  min-width: 0;
+.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;
+  border-radius: calc(0.5rem - 2px);
 }
 
-/* Library picker card \u2014 mirrors .fb-file-dropzone styling */
-.fb-file-library-card {
-  height: 128px;
-  border: 2px dashed var(--fb-file-upload-border-color, #d1d5db);
-  border-radius: var(--fb-border-radius, 0.5rem);
+/* \u2500\u2500\u2500 Single-file uploading state \u2500\u2500\u2500 */
+.fb-single-uploading {
+  height: 180px;
+  border-radius: 0.75rem;
+  border: 1px dashed #60a5fa;
+  background: rgba(239,246,255,0.5);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 4px;
-  cursor: pointer;
-  background: none;
-  padding: 0;
-  transition:
-    border-color var(--fb-transition-duration, 200ms),
-    background var(--fb-transition-duration, 200ms);
-  width: 100%;
+  gap: 8px;
 }
-.fb-file-library-card:hover,
-.fb-file-library-card:focus-visible {
-  border-color: var(--fb-file-upload-hover-border-color, #3b82f6);
-  background: var(--fb-background-hover-color, #f9fafb);
-  outline: none;
+
+/* \u2500\u2500\u2500 Video overlays \u2500\u2500\u2500 */
+.fb-video-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0,0,0,0.25);
 }
-.fb-file-library-card-icon {
-  font-size: 24px;
-  line-height: 1;
-  flex-shrink: 0;
+.fb-play-btn {
+  background: rgba(255,255,255,0.9);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-.fb-file-library-card-label {
-  font-size: 13px;
-  color: var(--fb-text-secondary-color, #6b7280);
+.fb-video-preview-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.fb-video-btn-overlay {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 10;
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 150ms;
+  pointer-events: none;
+}
+.fb-video-preview-wrap:hover .fb-video-btn-overlay {
+  opacity: 1;
+  pointer-events: auto;
 }
-.fb-file-library-card-hint {
+.fb-video-btn {
+  border: none;
+  border-radius: 4px;
   font-size: 11px;
-  color: var(--fb-file-upload-text-color, #9ca3af);
+  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); }
 
-/* Library "\u{1F4DA}" add-tile \u2014 same size/style as the "+" add tile */
-.fb-tile-add-library {
-  border: 2px dashed var(--fb-file-upload-border-color, #d1d5db);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  font-size: 24px;
-  color: var(--fb-file-upload-text-color, #9ca3af);
-  transition:
-    border-color var(--fb-transition-duration, 200ms),
-    color var(--fb-transition-duration, 200ms);
-  background: none;
-  padding: 0;
-  width: var(--fb-tile-size, 160px);
-  height: var(--fb-tile-size, 160px);
-  flex-shrink: 0;
-  position: relative;
+/* \u2500\u2500\u2500 Readonly readonly tile \u2500\u2500\u2500 */
+.fb-readonly-tile {
+  aspect-ratio: 1 / 1;
+  border-radius: 0.5rem;
+  border: 1px solid #e2e8f0;
   overflow: hidden;
-  border-radius: var(--fb-border-radius, 0.5rem);
+  position: relative;
+  cursor: pointer;
 }
-.fb-tile-add-library:hover,
-.fb-tile-add-library:focus-visible {
-  border-color: var(--fb-file-upload-hover-border-color, #3b82f6);
-  color: var(--fb-text-color, #1f2937);
-  outline: none;
+.fb-readonly-tile img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
 }
-
-/* 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;
+.fb-readonly-tile .fb-tile-actions {
   opacity: 0;
-  transition: opacity 150ms ease;
 }
-.fb-tile-zoom-preview.fb-tile-zoom-preview--visible {
+.fb-readonly-tile:hover .fb-tile-actions {
   opacity: 1;
 }
-.fb-tile-zoom-preview-img {
+
+/* \u2500\u2500\u2500 Readonly single-file filled \u2500\u2500\u2500 */
+.fb-single-readonly-filled {
+  position: relative;
+  border-radius: 0.75rem;
+  border: 1px solid #e2e8f0;
+  overflow: hidden;
+  height: 220px;
+  display: block;
+  cursor: pointer;
+}
+.fb-single-readonly-filled 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);
+}
+
+/* \u2500\u2500\u2500 Readonly multi grid \u2500\u2500\u2500 */
+.fb-multi-readonly-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 10px;
 }
 `;
   document.head.appendChild(style);
 }
 
 // src/components/file/dom.ts
-var TILE_SIZE = "160px";
 function createFileTile() {
   ensureFileStyles();
   const tile = document.createElement("div");
@@ -2571,7 +2739,7 @@ function createFileTile() {
   return tile;
 }
 function showFileError(container, message) {
-  const existing = container.closest(".space-y-2")?.querySelector(".file-error-message");
+  const existing = container.closest("[data-files-wrapper]")?.querySelector(".file-error-message");
   if (existing) existing.remove();
   const errorEl = document.createElement("div");
   errorEl.className = "file-error-message error-message";
@@ -2581,10 +2749,10 @@ function showFileError(container, message) {
     margin-top: 0.25rem;
   `;
   errorEl.textContent = message;
-  container.closest(".space-y-2")?.appendChild(errorEl);
+  container.closest("[data-files-wrapper]")?.appendChild(errorEl);
 }
 function clearFileError(container) {
-  const existing = container.closest(".space-y-2")?.querySelector(".file-error-message");
+  const existing = container.closest("[data-files-wrapper]")?.querySelector(".file-error-message");
   if (existing) existing.remove();
 }
 function addDeleteButton(container, state, onDelete) {
@@ -2602,13 +2770,6 @@ function addDeleteButton(container, state, 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();
@@ -2624,10 +2785,13 @@ function createUploadingTile(fileName, state) {
   return tile;
 }
 function ensureTilesWrap(list) {
+  const existingGrid = list.querySelector(".fb-multi-grid");
+  if (existingGrid) return existingGrid;
   const existing = list.querySelector(".fb-tiles-wrap");
   if (existing) return existing;
-  const dropzone = list.querySelector(".fb-file-dropzone");
-  if (dropzone) dropzone.remove();
+  list.querySelector(".fb-file-dropzone")?.remove();
+  list.querySelector(".fb-wide-tile")?.remove();
+  list.querySelector(".fb-multi-outer")?.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;";
@@ -2639,7 +2803,7 @@ function ensureTilesWrap(list) {
   return tilesWrap;
 }
 function setEmptyFileContainer(fileContainer, state, hint) {
-  const hintHtml = hint ? `<div class="text-xs text-gray-500 mt-1">${escapeHtml(hint)}</div>` : "";
+  const hintHtml = "";
   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">
@@ -2681,9 +2845,11 @@ function setupDragAndDrop(element, dropHandler) {
 }
 
 // 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>`;
+var ICON_DOWNLOAD = `<svg width="16" height="16" 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="16" height="16" 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="16" height="16" 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>`;
+var ICON_REPLACE = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 18a4 4 0 000-8 6 6 0 00-11.5 2A4 4 0 006 20h11M12 12v7M12 12l-3 3M12 12l3 3"/></svg>`;
+var ICON_LIBRARY = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h4v16H4z"/><path d="M10 4h4v16h-4z"/><path d="M16 5l3.5 1-3 14L13 19"/></svg>`;
 function canDownload(state, meta) {
   return Boolean(
     state.config.downloadFile || state.config.getDownloadUrl || state.config.getThumbnail || meta?.file
@@ -2695,7 +2861,16 @@ function canOpenInTab(state, meta) {
   );
 }
 function createTileActions(options) {
-  const { canRemove, removeHandler, state, resourceId, fileName, meta } = options;
+  const {
+    canRemove,
+    removeHandler,
+    state,
+    resourceId,
+    fileName,
+    meta,
+    replaceHandler,
+    libraryHandler
+  } = options;
   const group = document.createElement("div");
   group.className = "fb-tile-actions";
   const makeBtn = (icon, label, cls) => {
@@ -2710,15 +2885,41 @@ function createTileActions(options) {
     });
     return btn;
   };
+  if (replaceHandler) {
+    const replaceBtn = makeBtn(
+      ICON_REPLACE,
+      t("replaceFile", state),
+      "fb-tile-action-replace"
+    );
+    replaceBtn.addEventListener("click", () => replaceHandler());
+    group.appendChild(replaceBtn);
+  }
+  if (libraryHandler) {
+    const libBtn = makeBtn(
+      ICON_LIBRARY,
+      t("fromLibrary", state),
+      "fb-tile-action-library"
+    );
+    libBtn.addEventListener("click", () => libraryHandler());
+    group.appendChild(libBtn);
+  }
   if (canDownload(state, meta)) {
-    const dlBtn = makeBtn(ICON_DOWNLOAD, t("downloadFile", state), "fb-tile-action-download");
+    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");
+    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);
@@ -2727,7 +2928,11 @@ function createTileActions(options) {
     group.appendChild(openBtn);
   }
   if (canRemove && removeHandler) {
-    const rmBtn = makeBtn(ICON_REMOVE, t("removeElement", state), "fb-tile-action-remove");
+    const rmBtn = makeBtn(
+      ICON_REMOVE,
+      t("removeElement", state),
+      "fb-tile-action-remove"
+    );
     rmBtn.addEventListener("click", () => {
       removeHandler();
     });
@@ -2805,11 +3010,17 @@ function positionZoomPopup(popup, tile) {
   } 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));
+    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));
+  left = Math.max(
+    padding,
+    Math.min(window.innerWidth - popupSize - padding, left)
+  );
   popup.style.top = `${top}px`;
   popup.style.left = `${left}px`;
 }
@@ -2853,7 +3064,9 @@ function attachZoomHover(tile, src, alt, actionsEl) {
       const popup = getOrCreateZoomPopup();
       const existingActions = popup.querySelector(".fb-tile-actions");
       if (existingActions) existingActions.remove();
-      const img = popup.querySelector(".fb-tile-zoom-preview-img");
+      const img = popup.querySelector(
+        ".fb-tile-zoom-preview-img"
+      );
       img.src = src;
       img.alt = alt;
       if (actionsEl) {
@@ -2881,7 +3094,9 @@ function attachZoomHover(tile, src, alt, actionsEl) {
   });
 }
 function attachClonedActionListeners(cloned, original) {
-  const originalBtns = Array.from(original.querySelectorAll(".fb-tile-action-btn"));
+  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];
@@ -2895,8 +3110,7 @@ function attachClonedActionListeners(cloned, original) {
 }
 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.style.cssText = "width:100%;height:100%;object-fit:contain;background:var(--fb-file-upload-bg-color,#f3f4f6);";
   img.alt = fileName || t("previewAlt", state);
   const reader = new FileReader();
   reader.onload = (e) => {
@@ -2918,7 +3132,7 @@ function renderLocalVideoPreview(container, file, videoType, resourceId, state,
   const newContainer = setupDragDropless(container);
   newContainer.innerHTML = `
     <div class="fb-video-preview-wrap">
-      <video class="w-full h-full object-contain" controls preload="auto" muted src="${videoUrl}">
+      <video style="width:100%;height:100%;object-fit:contain;" controls preload="auto" muted src="${videoUrl}">
         ${escapeHtml(t("videoNotSupported", state))}
       </video>
       <div class="fb-video-btn-overlay">
@@ -2935,14 +3149,18 @@ 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();
       deps?.picker?.click();
     };
   }
-  const deleteBtn = container.querySelector(".delete-file-btn");
+  const deleteBtn = container.querySelector(
+    ".delete-file-btn"
+  );
   if (deleteBtn) {
     deleteBtn.onclick = (e) => {
       e.stopPropagation();
@@ -2962,11 +3180,11 @@ function handleVideoDelete(container, resourceId, state, deps) {
     container.onclick = deps.fileUploadHandler;
   }
   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">
+    <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--fb-text-secondary-color,#9ca3af);">
+      <svg style="width:1.5rem;height:1.5rem;margin-bottom:0.5rem;" 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>
+      <div style="font-size:0.875rem;text-align:center;">${escapeHtml(t("clickDragText", state))}</div>
     </div>
   `;
   if (deps?.setupDrop) {
@@ -2983,11 +3201,11 @@ function renderDeleteButton(container, resourceId, state) {
       hiddenInput.value = "";
     }
     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">
+      <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--fb-text-secondary-color,#9ca3af);">
+        <svg style="width:1.5rem;height:1.5rem;margin-bottom:0.5rem;" 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>
+        <div style="font-size:0.875rem;text-align:center;">${escapeHtml(t("clickDragText", state))}</div>
       </div>
     `;
   });
@@ -3006,7 +3224,7 @@ async function renderLocalFilePreview(container, meta, fileName, resourceId, isR
       deps
     );
   } else {
-    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>`;
+    container.innerHTML = `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--fb-text-secondary-color,#9ca3af);"><div style="font-size:36px;margin-bottom:0.5rem;">\u{1F4C1}</div><div style="font-size:0.875rem;">${escapeHtml(fileName)}</div></div>`;
   }
   if (!isReadonly && !meta.type?.startsWith("video/")) {
     renderDeleteButton(container, resourceId, state);
@@ -3014,7 +3232,7 @@ async function renderLocalFilePreview(container, meta, fileName, resourceId, isR
 }
 function renderUploadedVideoPreview(container, thumbnailUrl, state) {
   const video = document.createElement("video");
-  video.className = "w-full h-full object-contain";
+  video.style.cssText = "width:100%;height:100%;object-fit:contain;";
   video.controls = true;
   video.preload = "metadata";
   video.muted = true;
@@ -3035,8 +3253,7 @@ async function renderUploadedFilePreview(container, resourceId, fileName, meta,
         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.style.cssText = "width:100%;height:100%;object-fit:contain;background:var(--fb-file-upload-bg-color,#f3f4f6);";
         img.alt = fileName || t("previewAlt", state);
         img.src = thumbnailUrl;
         container.appendChild(img);
@@ -3047,11 +3264,11 @@ async function renderUploadedFilePreview(container, resourceId, fileName, meta,
   } catch (error) {
     console.error("Failed to get thumbnail:", error);
     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">
+      <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--fb-text-secondary-color,#9ca3af);">
+        <svg style="width:1.5rem;height:1.5rem;margin-bottom:0.5rem;" 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(fileName || t("previewUnavailable", state))}</div>
+        <div style="font-size:0.875rem;text-align:center;">${escapeHtml(fileName || t("previewUnavailable", state))}</div>
       </div>
     `;
   }
@@ -3076,7 +3293,13 @@ 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);
@@ -3103,7 +3326,8 @@ async function renderFilePreviewReadonly(resourceId, state, fileName, options =
   }
   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.getDownloadUrl)
+      return state.config.getDownloadUrl(resourceId);
     if (state.config.getThumbnail) return state.config.getThumbnail(resourceId);
     return localFileUrl;
   };
@@ -3225,13 +3449,9 @@ async function fillTileContent(tile, rid, meta, state, actionsEl) {
       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 = 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);
+      img.src = getLocalFileUrl(meta.file);
       tile.appendChild(img);
+      attachZoomHover(tile, img.src, meta.name, actionsEl ?? null);
     } else if (state.config.getThumbnail) {
       try {
         const url = await state.config.getThumbnail(rid);
@@ -3247,7 +3467,8 @@ async function fillTileContent(tile, rid, meta, state, actionsEl) {
         }
       } catch (error) {
         const err = error instanceof Error ? error : new Error(String(error));
-        if (state.config.onThumbnailError) state.config.onThumbnailError(err, rid);
+        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 {
@@ -3280,7 +3501,8 @@ async function fillTileContent(tile, rid, meta, state, actionsEl) {
         }
       } catch (error) {
         const err = error instanceof Error ? error : new Error(String(error));
-        if (state.config.onThumbnailError) state.config.onThumbnailError(err, rid);
+        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 {
@@ -3288,17 +3510,20 @@ async function fillTileContent(tile, rid, meta, state, actionsEl) {
     }
     if (actionsEl) tile.appendChild(actionsEl);
   } else {
-    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);
+    fillDocumentFallback(tile, rid, meta, actionsEl);
   }
 }
+function fillDocumentFallback(tile, rid, meta, actionsEl) {
+  const fileName = meta?.name ?? rid.split("/").pop() ?? "";
+  if (fileName) tile.title = fileName;
+  const labelHtml = fileName ? `<div style="font-size:11px;line-height:1.2;text-align:center;color:var(--fb-text-secondary-color,#6b7280);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${escapeHtml(fileName)}</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>
+      ${labelHtml}
+    </div>`;
+  if (actionsEl) tile.appendChild(actionsEl);
+}
 async function forceDownload(resourceId, fileName, state) {
   try {
     let fileUrl = null;
@@ -3310,7 +3535,8 @@ async function forceDownload(resourceId, fileName, state) {
     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}`);
+      if (!response.ok)
+        throw new Error(`HTTP error! status: ${response.status}`);
       const blob = await response.blob();
       downloadBlob(blob, fileName);
     } else {
@@ -3359,7 +3585,9 @@ async function uploadSingleFile(file, state) {
   } 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}`);
+    const wrapped = new Error(`File upload failed: ${err.message}`);
+    wrapped.cause = err;
+    throw wrapped;
   }
 }
 async function handleFileSelect(opts) {
@@ -3398,6 +3626,10 @@ async function handleFileSelect(opts) {
     return;
   }
   clearFileError(container);
+  const existingHiddenInput = container.parentElement?.querySelector(
+    'input[type="hidden"]'
+  );
+  const previousRid = existingHiddenInput?.value || null;
   ensureFileStyles();
   container.innerHTML = `
     <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:6px;padding:6px;">
@@ -3408,7 +3640,13 @@ async function handleFileSelect(opts) {
   try {
     rid = await uploadSingleFile(file, state);
   } catch (error) {
-    setEmptyFileContainer(container, state);
+    if (previousRid && deps?.onAfterUpload) {
+      deps.onAfterUpload(container, previousRid);
+    } else if (deps?.onRemove) {
+      deps.onRemove();
+    } else {
+      setEmptyFileContainer(container, state);
+    }
     throw error;
   }
   state.resourceIndex.set(rid, {
@@ -3418,9 +3656,10 @@ async function handleFileSelect(opts) {
     uploadedAt: /* @__PURE__ */ new Date(),
     file
   });
-  let hiddenInput = container.parentElement?.querySelector(
-    'input[type="hidden"]'
-  );
+  if (previousRid && previousRid !== rid) {
+    releaseLocalFileUrl(state.resourceIndex.get(previousRid)?.file);
+  }
+  let hiddenInput = existingHiddenInput;
   if (!hiddenInput) {
     hiddenInput = document.createElement("input");
     hiddenInput.type = "hidden";
@@ -3429,7 +3668,9 @@ async function handleFileSelect(opts) {
   }
   hiddenInput.value = rid;
   const isVideo = file.type.startsWith("video/");
-  if (!isVideo && deps) {
+  if (!isVideo && deps?.onAfterUpload) {
+    deps.onAfterUpload(container, rid);
+  } else if (!isVideo && deps) {
     renderSingleFileEditTile(container, rid, state, deps).catch(console.error);
   } else {
     renderFilePreview(container, rid, state, {
@@ -3458,7 +3699,9 @@ function filterAndSlice(allFiles, currentCount, constraints, state) {
   const rejectedBySize = afterMime.filter(
     (f) => !isFileSizeAllowed(f, constraints.maxSize)
   );
-  const valid = afterMime.filter((f) => isFileSizeAllowed(f, constraints.maxSize));
+  const valid = afterMime.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;
@@ -3471,7 +3714,13 @@ function filterAndSlice(allFiles, currentCount, constraints, state) {
   if (rejectedByMime.length > 0) {
     const mimes = constraints.allowedMimes.join(", ");
     const names = rejectedByMime.map((f) => f.name).join(", ");
-    errorParts.push(t("invalidFileMime", state, { name: names, type: rejectedByMime.map((f) => f.type).join(", "), mimes }));
+    errorParts.push(
+      t("invalidFileMime", state, {
+        name: names,
+        type: rejectedByMime.map((f) => f.type).join(", "),
+        mimes
+      })
+    );
   }
   if (rejectedBySize.length > 0) {
     const names = rejectedBySize.map((f) => f.name).join(", ");
@@ -3490,17 +3739,18 @@ function filterAndSlice(allFiles, currentCount, constraints, state) {
   return { accepted, errorMessage: errorParts.join(" \u2022 ") };
 }
 async function uploadBatch(accepted, resourceIds, listEl, state) {
-  await Promise.all(
+  if (listEl) {
+    const tilesWrap = ensureTilesWrap(listEl);
+    const addTile = tilesWrap.querySelector(".fb-multi-add-tile-js") ?? tilesWrap.querySelector(".fb-tile-add");
+    if (addTile) addTile.style.display = "none";
+  }
+  const failures = [];
+  await Promise.allSettled(
     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);
-        }
+        tilesWrap.appendChild(placeholder);
       }
       try {
         const rid = await uploadSingleFile(file, state);
@@ -3512,11 +3762,27 @@ async function uploadBatch(accepted, resourceIds, listEl, state) {
           file: void 0
         });
         resourceIds.push(rid);
+      } catch (err) {
+        const wrapped = err instanceof Error ? err : new Error(String(err));
+        const cause = wrapped.cause;
+        const root = cause instanceof Error ? cause : cause !== void 0 ? new Error(String(cause)) : wrapped;
+        failures.push({ file, error: root });
       } finally {
         placeholder.remove();
       }
     })
   );
+  return { failures };
+}
+function buildBatchErrorMessage(filterError, failures, state) {
+  if (failures.length === 0) return filterError;
+  const uploadMsg = failures.map(
+    (f) => t("uploadFailed", state, {
+      name: f.file.name,
+      error: f.error.message
+    })
+  ).join(" \u2022 ");
+  return filterError ? `${filterError} \u2022 ${uploadMsg}` : uploadMsg;
 }
 function setupFilesDropHandler(filesContainer, resourceIds, state, updateCallback, constraints, pathKey, instance) {
   setupDragAndDrop(filesContainer, async (files) => {
@@ -3532,7 +3798,13 @@ function setupFilesDropHandler(filesContainer, resourceIds, state, updateCallbac
       clearFileError(filesContainer);
     }
     const list = filesContainer.querySelector(".files-list") ?? filesContainer;
-    await uploadBatch(accepted, resourceIds, list, state);
+    const { failures } = await uploadBatch(accepted, resourceIds, list, state);
+    const combined = buildBatchErrorMessage(errorMessage, failures, state);
+    if (combined) {
+      showFileError(filesContainer, combined);
+    } else {
+      clearFileError(filesContainer);
+    }
     updateCallback();
     if (instance && pathKey && !state.config.readonly) {
       instance.triggerOnChange(pathKey, resourceIds);
@@ -3542,7 +3814,7 @@ function setupFilesDropHandler(filesContainer, resourceIds, state, updateCallbac
 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 wrapperEl = filesPicker.closest("[data-files-wrapper]") || filesPicker.parentElement;
     const { accepted, errorMessage } = filterAndSlice(
       Array.from(filesPicker.files),
       resourceIds.length,
@@ -3555,7 +3827,20 @@ function setupFilesPickerHandler(filesPicker, resourceIds, state, updateCallback
       clearFileError(wrapperEl);
     }
     const listEl = wrapperEl?.querySelector(".files-list");
-    await uploadBatch(accepted, resourceIds, listEl ?? null, state);
+    const { failures } = await uploadBatch(
+      accepted,
+      resourceIds,
+      listEl ?? null,
+      state
+    );
+    if (wrapperEl) {
+      const combined = buildBatchErrorMessage(errorMessage, failures, state);
+      if (combined) {
+        showFileError(wrapperEl, combined);
+      } else {
+        clearFileError(wrapperEl);
+      }
+    }
     updateCallback();
     filesPicker.value = "";
     if (instance && pathKey && !state.config.readonly) {
@@ -3587,10 +3872,17 @@ function validatePickedResource(resource, allowedExtensions, allowedMimes, maxSi
   }
   if (!isMimeAllowed(resource.type, allowedMimes)) {
     const mimes = allowedMimes.join(", ");
-    return t("invalidFileMime", state, { name: resource.name, type: resource.type, mimes });
+    return t("invalidFileMime", state, {
+      name: resource.name,
+      type: resource.type,
+      mimes
+    });
   }
   if (!isSizeWithinLimit(resource.size, maxSizeMB)) {
-    return t("fileTooLarge", state, { name: resource.name, maxSize: maxSizeMB });
+    return t("fileTooLarge", state, {
+      name: resource.name,
+      maxSize: maxSizeMB
+    });
   }
   return null;
 }
@@ -3649,7 +3941,13 @@ async function handleLibraryPickMulti(state, element, wrapper, fieldPath, resour
     return true;
   });
   const validItems = deduped.filter((r) => {
-    const err = validatePickedResource(r, allowedExtensions, allowedMimes, maxSizeMB, state);
+    const err = validatePickedResource(
+      r,
+      allowedExtensions,
+      allowedMimes,
+      maxSizeMB,
+      state
+    );
     return err === null;
   });
   const freshRemaining = maxCount === Infinity ? validItems.length : Math.max(0, maxCount - resourceIds.length);
@@ -3693,20 +3991,32 @@ async function handleLibraryPickSingle(state, element, container, fileWrapper, p
   }
   if (picked.length === 0) return;
   const first = picked[0];
-  const validationError = validatePickedResource(first, allowedExtensions, allowedMimes, maxSizeMB, state);
+  const validationError = validatePickedResource(
+    first,
+    allowedExtensions,
+    allowedMimes,
+    maxSizeMB,
+    state
+  );
   if (validationError !== null) {
     showFileError(container, validationError);
     return;
   }
   clearFileError(container);
   registerPickedResource(first, state);
-  let hiddenInput = fileWrapper.querySelector('input[type="hidden"]');
+  let hiddenInput = fileWrapper.querySelector(
+    'input[type="hidden"]'
+  );
   if (!hiddenInput) {
     hiddenInput = document.createElement("input");
     hiddenInput.type = "hidden";
     hiddenInput.name = pathKey;
     fileWrapper.appendChild(hiddenInput);
   }
+  const previousRid = hiddenInput.value || null;
+  if (previousRid && previousRid !== first.resourceId) {
+    releaseLocalFileUrl(state.resourceIndex.get(previousRid)?.file);
+  }
   hiddenInput.value = first.resourceId;
   await renderCallback(first.resourceId);
   if (!state.config.readonly) {
@@ -3715,7 +4025,9 @@ async function handleLibraryPickSingle(state, element, container, fileWrapper, p
 }
 
 // src/components/file/render-edit.ts
-function handleInitialFileData(initial, fileContainer, pathKey, fileWrapper, state, deps) {
+var ICON_CLOUD = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 18a4 4 0 000-8 6 6 0 00-11.5 2A4 4 0 006 20h11M12 12v7M12 12l-3 3M12 12l3 3"/></svg>`;
+var ICON_LIBRARY2 = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h4v16H4z"/><path d="M10 4h4v16h-4z"/><path d="M16 5l3.5 1-3 14L13 19"/></svg>`;
+function handleInitialFileData(initial, fileContainer, pathKey, fileWrapper, state, deps, extras) {
   seedInferredResource(initial, state.resourceIndex);
   const meta = state.resourceIndex.get(initial);
   const isVideo = meta?.type?.startsWith("video/");
@@ -3726,7 +4038,7 @@ function handleInitialFileData(initial, fileContainer, pathKey, fileWrapper, sta
       deps
     }).catch(console.error);
   } else {
-    renderSingleFileEditTile(fileContainer, initial, state, deps).catch(console.error);
+    renderSingleFileFilled(fileContainer, initial, state, deps, extras);
   }
   const hiddenInput = document.createElement("input");
   hiddenInput.type = "hidden";
@@ -3734,161 +4046,426 @@ function handleInitialFileData(initial, fileContainer, pathKey, fileWrapper, sta
   hiddenInput.value = initial;
   fileWrapper.appendChild(hiddenInput);
 }
-var UPLOAD_SVG = `<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>`;
-function buildEmptyDropzone(state, primaryText, subHint, openPicker) {
-  const dropzone = document.createElement("div");
-  dropzone.className = "fb-file-dropzone";
-  dropzone.innerHTML = `
-    ${UPLOAD_SVG}
-    <div class="fb-dropzone-primary-text">${escapeHtml(primaryText)}</div>
-    ${subHint ? `<div class="fb-dropzone-hint-text">${escapeHtml(subHint)}</div>` : ""}
-  `;
-  dropzone.onclick = openPicker;
-  return dropzone;
+function buildWideTile(state, hasLibrary, onUploadClick, onLibraryClick, isDragOver = false, constraintHint = "") {
+  ensureFileStyles();
+  const outer = document.createElement("div");
+  outer.className = `fb-wide-tile${hasLibrary ? " fb-file-card-row" : ""}${isDragOver ? " fb-drag-over" : ""}`;
+  const uploadBtn = document.createElement("button");
+  uploadBtn.type = "button";
+  uploadBtn.className = "fb-wide-tile-upload fb-file-dropzone";
+  const cloudIcon = document.createElement("span");
+  cloudIcon.style.cssText = "width:36px;height:36px;display:block;flex-shrink:0;";
+  cloudIcon.innerHTML = ICON_CLOUD;
+  uploadBtn.appendChild(cloudIcon);
+  const primaryText = document.createElement("div");
+  primaryText.className = "fb-wide-tile-label";
+  primaryText.style.cssText = "font-size:14px;font-weight:600;";
+  primaryText.textContent = isDragOver ? t("dropToUpload", state) : t("clickDragText", state);
+  uploadBtn.appendChild(primaryText);
+  if (constraintHint) {
+    const hintEl = document.createElement("div");
+    hintEl.style.cssText = "font-size:11px;opacity:0.65;margin-top:2px;";
+    hintEl.textContent = constraintHint;
+    uploadBtn.appendChild(hintEl);
+  }
+  uploadBtn.onclick = (e) => {
+    e.stopPropagation();
+    onUploadClick();
+  };
+  outer.appendChild(uploadBtn);
+  if (hasLibrary && onLibraryClick) {
+    const divider = document.createElement("div");
+    divider.className = "fb-wide-tile-divider";
+    outer.appendChild(divider);
+    const libBtn = document.createElement("button");
+    libBtn.type = "button";
+    libBtn.className = "fb-wide-tile-library fb-file-library-card";
+    const libIcon = document.createElement("span");
+    libIcon.style.cssText = "width:28px;height:28px;display:block;flex-shrink:0;";
+    libIcon.innerHTML = ICON_LIBRARY2;
+    libBtn.appendChild(libIcon);
+    const libLabel = document.createElement("div");
+    libLabel.style.cssText = "font-size:13px;font-weight:600;text-align:center;";
+    libLabel.textContent = t("fromLibrary", state);
+    libBtn.appendChild(libLabel);
+    const libHint = document.createElement("div");
+    libHint.style.cssText = "font-size:11px;opacity:0.75;text-align:center;";
+    libHint.textContent = t("libraryHint", state);
+    libBtn.appendChild(libHint);
+    libBtn.onclick = (e) => {
+      e.stopPropagation();
+      onLibraryClick();
+    };
+    outer.appendChild(libBtn);
+  }
+  attachDragOverFeedback(outer, {
+    onEnter: () => {
+      const primaryText2 = outer.querySelector(".fb-wide-tile-label");
+      if (primaryText2) primaryText2.textContent = t("dropToUpload", state);
+    },
+    onLeave: () => {
+      const primaryText2 = outer.querySelector(".fb-wide-tile-label");
+      if (primaryText2) primaryText2.textContent = t("clickDragText", state);
+    },
+    activeClass: "fb-drag-over"
+  });
+  return outer;
 }
-function buildLibraryButton(variant, state, onClick) {
-  const btn = document.createElement("button");
-  btn.type = "button";
-  btn.className = variant === "card" ? "fb-file-library-card" : "fb-tile fb-tile-add-library";
-  if (variant === "card") {
-    btn.innerHTML = `
-      <span class="fb-file-library-card-icon" aria-hidden="true">\u{1F4DA}</span>
-      <span class="fb-file-library-card-label">${escapeHtml(t("fromLibrary", state))}</span>
-      <span class="fb-file-library-card-hint">${escapeHtml(t("libraryHint", state))}</span>
-    `;
+function attachDragOverFeedback(el, hooks) {
+  let depth = 0;
+  el.addEventListener("dragover", (e) => {
+    e.preventDefault();
+  });
+  el.addEventListener("dragenter", (e) => {
+    e.preventDefault();
+    depth++;
+    if (depth === 1) {
+      el.classList.add(hooks.activeClass);
+      hooks.onEnter();
+    }
+  });
+  el.addEventListener("dragleave", (e) => {
+    e.preventDefault();
+    depth = Math.max(0, depth - 1);
+    if (depth === 0) {
+      el.classList.remove(hooks.activeClass);
+      hooks.onLeave();
+    }
+  });
+  el.addEventListener("drop", () => {
+    depth = 0;
+    el.classList.remove(hooks.activeClass);
+    hooks.onLeave();
+  });
+}
+function renderSingleFileFilled(fileContainer, resourceId, state, deps, extras) {
+  const meta = state.resourceIndex.get(resourceId);
+  const isVideo = meta?.type?.startsWith("video/");
+  if (isVideo) {
+    renderFilePreview(fileContainer, resourceId, state, {
+      fileName: meta?.name ?? "",
+      isReadonly: false,
+      deps
+    }).catch(console.error);
+    return;
+  }
+  ensureFileStyles();
+  const outer = document.createElement("div");
+  outer.className = "fb-multi-outer fb-multi-has-files";
+  const grid = document.createElement("div");
+  grid.className = "fb-multi-grid fb-tiles-wrap";
+  outer.appendChild(grid);
+  const tile = buildPreviewTile(
+    resourceId,
+    state,
+    Boolean(deps.onRemove),
+    deps.onRemove ? () => deps.onRemove?.() : null,
+    extras
+  );
+  grid.appendChild(tile);
+  fileContainer.className = "file-preview-container";
+  fileContainer.removeAttribute("style");
+  while (fileContainer.firstChild)
+    fileContainer.removeChild(fileContainer.firstChild);
+  fileContainer.appendChild(outer);
+}
+function buildMultiAddTile(state, hasLibrary, onUploadClick, onLibraryClick, isDragOver = false) {
+  const tile = document.createElement("div");
+  tile.className = `fb-multi-add-tile fb-multi-add-tile-js${isDragOver ? " fb-drag-over-tile" : ""}`;
+  const uploadBtn = document.createElement("button");
+  uploadBtn.type = "button";
+  uploadBtn.className = "fb-multi-add-upload fb-tile-add fb-file-dropzone";
+  const cloudIcon = document.createElement("span");
+  cloudIcon.style.cssText = "width:28px;height:28px;display:block;flex-shrink:0;";
+  cloudIcon.innerHTML = ICON_CLOUD;
+  uploadBtn.appendChild(cloudIcon);
+  const uploadLabel = document.createElement("span");
+  uploadLabel.className = "fb-multi-add-label";
+  uploadLabel.style.cssText = "font-size:11px;font-weight:600;";
+  uploadLabel.textContent = isDragOver ? t("dropToUpload", state) : t("clickDragTextMultiple", state);
+  uploadBtn.appendChild(uploadLabel);
+  uploadBtn.onclick = (e) => {
+    e.stopPropagation();
+    onUploadClick();
+  };
+  tile.appendChild(uploadBtn);
+  if (hasLibrary && onLibraryClick) {
+    const divider = document.createElement("div");
+    divider.className = "fb-multi-add-divider";
+    tile.appendChild(divider);
+    const libBtn = document.createElement("button");
+    libBtn.type = "button";
+    libBtn.className = "fb-multi-add-library fb-tile-add-library fb-file-library-card";
+    libBtn.setAttribute("aria-label", t("fromLibrary", state));
+    const libIcon = document.createElement("span");
+    libIcon.style.cssText = "width:14px;height:14px;display:block;flex-shrink:0;";
+    libIcon.innerHTML = ICON_LIBRARY2;
+    libBtn.appendChild(libIcon);
+    libBtn.appendChild(document.createTextNode(t("fromLibrary", state)));
+    libBtn.onclick = (e) => {
+      e.stopPropagation();
+      onLibraryClick();
+    };
+    tile.appendChild(libBtn);
+  }
+  return tile;
+}
+function buildPreviewTile(rid, state, canRemove, onRemove, extras) {
+  ensureFileStyles();
+  const meta = state.resourceIndex.get(rid);
+  const tile = document.createElement("div");
+  tile.className = "fb-preview-tile fb-checker fb-tile-resource resource-pill";
+  tile.dataset.resourceId = rid;
+  const actionsEl = createTileActions({
+    canRemove: canRemove && onRemove !== null,
+    removeHandler: onRemove,
+    state,
+    resourceId: rid,
+    fileName: meta?.name ?? "",
+    meta,
+    replaceHandler: extras?.replaceHandler ?? null,
+    libraryHandler: extras?.libraryHandler ?? null
+  });
+  fillTileContent(tile, rid, meta, state, actionsEl).catch((err) => {
+    console.error("Failed to render tile:", err);
+  });
+  return tile;
+}
+function buildPlaceholderTile(isDragOver = false) {
+  const div = document.createElement("div");
+  div.className = `fb-multi-placeholder fb-checker${isDragOver ? " fb-drag-over" : ""}`;
+  return div;
+}
+function buildMetaLine(state, element, ridCount, maxCount, canClearAll, onClearAll) {
+  const line = document.createElement("div");
+  line.className = "fb-meta-line";
+  const metaText = document.createElement("div");
+  metaText.className = "fb-meta-text";
+  if (element.maxSize && element.maxSize !== Infinity) {
+    const sizeSpan = document.createElement("span");
+    sizeSpan.textContent = t("hintMaxSize", state, { size: element.maxSize });
+    metaText.appendChild(sizeSpan);
+    metaText.appendChild(buildMetaDot());
+  }
+  const exts = getAllowedExtensions(
+    element.accept
+  );
+  if (exts.length > 0) {
+    const fmtSpan = document.createElement("span");
+    fmtSpan.className = "fb-meta-mono";
+    fmtSpan.textContent = exts.map((e) => e.toUpperCase()).join(", ");
+    metaText.appendChild(fmtSpan);
+    metaText.appendChild(buildMetaDot());
+  }
+  const countSpan = document.createElement("span");
+  if (maxCount < Infinity) {
+    countSpan.textContent = t("fileCountWithMax", state, {
+      count: ridCount,
+      max: maxCount
+    });
   } else {
-    btn.innerHTML = `<span aria-hidden="true">\u{1F4DA}</span>`;
-    btn.title = t("fromLibrary", state);
-    btn.setAttribute("aria-label", t("fromLibrary", state));
+    const countKey = ridCount === 1 ? "fileCountSingle" : "fileCountPlural";
+    countSpan.textContent = t(countKey, state, { count: ridCount });
+  }
+  metaText.appendChild(countSpan);
+  line.appendChild(metaText);
+  if (canClearAll && ridCount > 1) {
+    const clearBtn = document.createElement("button");
+    clearBtn.type = "button";
+    clearBtn.className = "fb-clear-all-btn";
+    clearBtn.textContent = t("clearAll", state);
+    clearBtn.onclick = (e) => {
+      e.stopPropagation();
+      if (window.confirm(t("clearAll", state) + "?")) {
+        onClearAll();
+      }
+    };
+    line.appendChild(clearBtn);
   }
-  btn.addEventListener("click", onClick);
-  return btn;
+  return line;
+}
+function buildMetaDot() {
+  const dot = document.createElement("span");
+  dot.className = "fb-meta-dot";
+  return dot;
 }
+var gridResizeObservers = /* @__PURE__ */ new WeakMap();
 function renderResourcePills(opts) {
   const {
     container,
     rids,
     state,
     onRemove,
-    hint,
-    countInfo,
     maxCount,
     isReadonly = false,
-    onLibraryPick
+    onLibraryPick,
+    element,
+    onClearAll,
+    openPicker: openPickerProp
   } = opts;
   ensureFileStyles();
   const wrapper = container.closest("[data-files-wrapper]");
   if (wrapper) {
     wrapper.dataset.resourceIds = JSON.stringify(rids ?? []);
   }
+  const previousObserver = gridResizeObservers.get(container);
+  if (previousObserver) {
+    previousObserver.disconnect();
+    gridResizeObservers.delete(container);
+  }
   while (container.firstChild) container.removeChild(container.firstChild);
   const ridList = rids ?? [];
-  const atMax = maxCount !== void 0 && ridList.length >= maxCount;
+  const effectiveMax = maxCount ?? Infinity;
+  const atMax = effectiveMax !== Infinity && ridList.length >= effectiveMax;
   const hasLibrary = !isReadonly && typeof onLibraryPick === "function";
-  const buildSubHint = () => {
-    const parts = [];
-    if (hint) parts.push(hint);
-    if (countInfo) parts.push(countInfo);
-    return parts.join(" \u2022 ");
-  };
-  const openPicker = () => {
-    const picker = findFilePicker(container);
-    if (picker) picker.click();
-  };
-  if (ridList.length === 0) {
-    if (isReadonly) {
+  const openPicker = openPickerProp ?? (() => {
+    const pickerEl = container.closest("[data-files-wrapper]")?.querySelector('input[type="file"]');
+    if (pickerEl) pickerEl.click();
+  });
+  if (isReadonly) {
+    if (ridList.length === 0) {
       const emptyEl = document.createElement("div");
       emptyEl.className = "fb-tile-empty-text";
       emptyEl.textContent = t("noFilesSelected", state);
       container.appendChild(emptyEl);
-    } else if (hasLibrary) {
-      const row = document.createElement("div");
-      row.className = "fb-file-card-row";
-      const dropzone = buildEmptyDropzone(
-        state,
-        t("clickDragTextMultiple", state),
-        buildSubHint(),
-        openPicker
-      );
-      const libraryBtn = buildLibraryButton("card", state, onLibraryPick);
-      row.appendChild(dropzone);
-      row.appendChild(libraryBtn);
-      container.appendChild(row);
     } else {
-      const dropzone = buildEmptyDropzone(
-        state,
-        t("clickDragTextMultiple", state),
-        buildSubHint(),
-        openPicker
-      );
-      container.appendChild(dropzone);
+      const grid2 = document.createElement("div");
+      grid2.className = "fb-multi-readonly-grid";
+      container.appendChild(grid2);
+      for (const rid of ridList) {
+        const meta = state.resourceIndex.get(rid);
+        const tile = document.createElement("div");
+        tile.className = "fb-readonly-tile fb-checker fb-tile fb-tile-resource";
+        tile.dataset.resourceId = rid;
+        const actionsEl = createTileActions({
+          canRemove: false,
+          removeHandler: null,
+          state,
+          resourceId: rid,
+          fileName: meta?.name ?? "",
+          meta
+        });
+        fillTileContent(tile, rid, meta, state, actionsEl).catch(console.error);
+        tile.onclick = async () => {
+          let url = null;
+          if (state.config.getDownloadUrl) {
+            url = state.config.getDownloadUrl(rid);
+          } else if (state.config.getThumbnail) {
+            url = await state.config.getThumbnail(rid);
+          } else if (meta?.file instanceof File) {
+            url = URL.createObjectURL(meta.file);
+          }
+          if (url) {
+            window.open(url, "_blank");
+          } else if (state.config.downloadFile) {
+            state.config.downloadFile(rid, meta?.name ?? "");
+          }
+        };
+        grid2.appendChild(tile);
+      }
     }
     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,
+  const outerDiv = document.createElement("div");
+  outerDiv.className = `fb-multi-outer${ridList.length > 0 ? " fb-multi-has-files" : ""}`;
+  const grid = document.createElement("div");
+  grid.className = "fb-multi-grid fb-tiles-wrap";
+  outerDiv.appendChild(grid);
+  container.appendChild(outerDiv);
+  for (let i = 0; i < ridList.length; i++) {
+    const rid = ridList[i];
+    const tile = buildPreviewTile(
+      rid,
       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);
-    if (hasLibrary) {
-      const libraryTile = buildLibraryButton("tile", state, onLibraryPick);
-      tilesWrap.appendChild(libraryTile);
-    }
-  } 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);
+      onRemove !== null,
+      onRemove ? () => onRemove(rid) : null
+    );
+    grid.appendChild(tile);
   }
-  container.appendChild(tilesWrap);
-  const subHint = buildSubHint();
-  if (subHint) {
-    const hintEl = document.createElement("div");
-    hintEl.className = "fb-tile-hint";
-    hintEl.textContent = subHint;
-    container.appendChild(hintEl);
+  if (!atMax) {
+    const addTile = buildMultiAddTile(
+      state,
+      hasLibrary,
+      openPicker,
+      onLibraryPick ?? null
+    );
+    grid.appendChild(addTile);
+  }
+  const occupied = ridList.length + (atMax ? 0 : 1);
+  const adjustPlaceholders = () => {
+    const tpl = getComputedStyle(grid).gridTemplateColumns;
+    const cols = tpl ? tpl.split(" ").filter(Boolean).length : 0;
+    if (!cols) return;
+    const remainder = occupied % cols;
+    const rowFill = remainder === 0 ? 0 : cols - remainder;
+    const capacityRemaining = effectiveMax === Infinity ? rowFill : Math.max(0, effectiveMax - occupied);
+    const needed = Math.min(rowFill, capacityRemaining);
+    const existing = grid.querySelectorAll(".fb-multi-placeholder");
+    if (existing.length > needed) {
+      for (let i = existing.length - 1; i >= needed; i--) existing[i].remove();
+    } else if (existing.length < needed) {
+      for (let i = existing.length; i < needed; i++) {
+        grid.appendChild(buildPlaceholderTile());
+      }
+    }
+  };
+  if (effectiveMax === Infinity || effectiveMax > occupied) {
+    grid.appendChild(buildPlaceholderTile());
+  }
+  requestAnimationFrame(adjustPlaceholders);
+  if (typeof ResizeObserver !== "undefined") {
+    const ro = new ResizeObserver(() => adjustPlaceholders());
+    ro.observe(grid);
+    gridResizeObservers.set(container, ro);
+  }
+  attachDragOverFeedback(outerDiv, {
+    activeClass: "fb-drag-over",
+    onEnter: () => {
+      grid.querySelectorAll(".fb-multi-placeholder").forEach((p) => {
+        p.classList.add("fb-drag-over");
+      });
+      const addTile = grid.querySelector(".fb-multi-add-tile-js");
+      if (addTile) {
+        addTile.classList.add("fb-drag-over-tile");
+        const label = addTile.querySelector(".fb-multi-add-label");
+        if (label) label.textContent = t("dropToUpload", state);
+      }
+    },
+    onLeave: () => {
+      grid.querySelectorAll(".fb-multi-placeholder").forEach((p) => {
+        p.classList.remove("fb-drag-over");
+      });
+      const addTile = grid.querySelector(".fb-multi-add-tile-js");
+      if (addTile) {
+        addTile.classList.remove("fb-drag-over-tile");
+        const label = addTile.querySelector(".fb-multi-add-label");
+        if (label) label.textContent = t("clickDragTextMultiple", state);
+      }
+    }
+  });
+  if (element) {
+    const metaLine = buildMetaLine(
+      state,
+      element,
+      ridList.length,
+      effectiveMax,
+      Boolean(onClearAll),
+      onClearAll ?? (() => {
+      })
+    );
+    container.appendChild(metaLine);
   }
 }
 function renderFileElementEdit(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
   const fileWrapper = document.createElement("div");
   fileWrapper.className = "space-y-2";
+  fileWrapper.dataset.filesWrapper = pathKey;
   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}`) ?? [],
-      ...element.accept.mime ?? []
-    ].join(",") || "";
-  }
+  picker.accept = buildAcceptAttribute(element.accept);
   const fileContainer = document.createElement("div");
   fileContainer.className = "file-preview-container";
   const initial = ctx.prefill[element.key];
@@ -3917,16 +4494,10 @@ function renderFileElementEdit(element, ctx, wrapper, pathKey) {
     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 hiddenInput = fileWrapper.querySelector(
+        'input[type="hidden"]'
+      );
       const currentRid = hiddenInput?.value;
       if (currentRid) {
         releaseLocalFileUrl(state.resourceIndex.get(currentRid)?.file);
@@ -3935,34 +4506,13 @@ function renderFileElementEdit(element, ctx, wrapper, pathKey) {
       renderEmptySingleState();
     }
   };
-  const buildDeps = () => ({
-    picker,
-    fileUploadHandler: handlers.fileUploadHandler,
-    dragHandler: handlers.dragHandler,
-    setupDrop: handlers.setupDrop,
-    onRemove: handlers.onRemove
-  });
-  const renderEmptySingleState = () => {
-    if (state.config.pickExistingFiles && !element.disableLibrary) {
-      fileContainer.className = "file-preview-container";
-      fileContainer.removeAttribute("style");
-      fileContainer.onclick = null;
-      while (fileContainer.firstChild) {
-        fileContainer.removeChild(fileContainer.firstChild);
-      }
-      const row = document.createElement("div");
-      row.className = "fb-file-card-row";
-      row.style.cssText = "display:flex;gap:8px;align-items:stretch;";
-      const hint = makeFieldHint(element, state);
-      const uploadCard = buildEmptyDropzone(
-        state,
-        t("clickDragText", state),
-        hint,
-        handlers.fileUploadHandler
-      );
-      uploadCard.style.cssText = "flex:1;min-width:0;height:128px;";
-      setupDragAndDrop(uploadCard, handlers.dragHandler);
-      const libraryBtn = buildLibraryButton("card", state, () => {
+  const buildSingleExtras = () => {
+    const hasLibrary = Boolean(
+      state.config.pickExistingFiles && !element.disableLibrary
+    );
+    return {
+      replaceHandler: state.config.uploadFile ? () => picker.click() : null,
+      libraryHandler: hasLibrary ? () => {
         handleLibraryPickSingle(
           state,
           element,
@@ -3971,20 +4521,54 @@ function renderFileElementEdit(element, ctx, wrapper, pathKey) {
           pathKey,
           pathKey,
           async (rid) => {
-            await renderSingleFileEditTile(fileContainer, rid, state, buildDeps());
+            renderSingleFileFilled(
+              fileContainer,
+              rid,
+              state,
+              buildDeps(),
+              buildSingleExtras()
+            );
           },
           ctx.instance
         ).catch((err) => {
           console.error("Library pick failed:", err);
         });
-      });
-      libraryBtn.style.cssText = "flex:1;min-width:0;";
-      row.appendChild(uploadCard);
-      row.appendChild(libraryBtn);
-      fileContainer.appendChild(row);
-    } else {
-      handlers.restoreDropzone();
+      } : null
+    };
+  };
+  const buildDeps = () => ({
+    picker,
+    fileUploadHandler: handlers.fileUploadHandler,
+    dragHandler: handlers.dragHandler,
+    setupDrop: handlers.setupDrop,
+    onRemove: handlers.onRemove,
+    onAfterUpload: (container, rid) => {
+      renderSingleFileFilled(
+        container,
+        rid,
+        state,
+        buildDeps(),
+        buildSingleExtras()
+      );
     }
+  });
+  const renderEmptySingleState = () => {
+    ensureFileStyles();
+    fileContainer.className = "file-preview-container";
+    fileContainer.removeAttribute("style");
+    while (fileContainer.firstChild)
+      fileContainer.removeChild(fileContainer.firstChild);
+    const onLibraryClick = buildSingleExtras().libraryHandler;
+    const wideTile = buildWideTile(
+      state,
+      onLibraryClick !== null,
+      handlers.fileUploadHandler,
+      onLibraryClick,
+      false,
+      makeFieldHint(element, state)
+    );
+    fileContainer.appendChild(wideTile);
+    setupDragAndDrop(fileContainer, handlers.dragHandler);
   };
   if (initial) {
     handleInitialFileData(
@@ -3993,11 +4577,11 @@ function renderFileElementEdit(element, ctx, wrapper, pathKey) {
       pathKey,
       fileWrapper,
       state,
-      buildDeps()
+      buildDeps(),
+      buildSingleExtras()
     );
     const prefillMeta = state.resourceIndex.get(initial);
     if (prefillMeta?.type?.startsWith("video/")) {
-      fileContainer.onclick = handlers.fileUploadHandler;
       setupDragAndDrop(fileContainer, handlers.dragHandler);
     }
   } else {
@@ -4005,113 +4589,23 @@ function renderFileElementEdit(element, ctx, wrapper, pathKey) {
   }
   picker.onchange = () => {
     if (picker.files && picker.files.length > 0) {
-      handleFileSelect({
-        file: picker.files[0],
-        container: fileContainer,
-        fieldName: pathKey,
-        state,
-        deps: buildDeps(),
-        instance: ctx.instance,
-        allowedExtensions: allowedExts,
-        allowedMimes,
-        maxSizeMB
-      });
+      handlers.dragHandler(picker.files);
     }
   };
   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}`) ?? [],
-      ...element.accept.mime ?? []
-    ].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),
-    allowedMimes: getAllowedMimes(element.accept),
-    maxSize: element.maxSize ?? Infinity
-  };
-  filesContainer.appendChild(list);
-  filesWrapper.appendChild(filesPicker);
-  filesWrapper.appendChild(filesContainer);
-  wrapper.appendChild(filesWrapper);
-  const onLibraryPickFiles = state.config.pickExistingFiles && !element.disableLibrary ? () => {
-    handleLibraryPickMulti(
-      state,
-      element,
-      filesWrapper,
-      pathKey,
-      initialFiles,
-      Infinity,
-      updateFilesList,
-      ctx.instance
-    ).catch((err) => {
-      console.error("Library pick failed:", err);
-    });
-  } : null;
-  function updateFilesList() {
-    const currentlyReadonly = isElementReadonly(element, state);
-    renderResourcePills({
-      container: list,
-      rids: initialFiles,
-      state,
-      onRemove: currentlyReadonly ? null : (ridToRemove) => {
-        releaseLocalFileUrl(state.resourceIndex.get(ridToRemove)?.file);
-        const index = initialFiles.indexOf(ridToRemove);
-        if (index > -1) initialFiles.splice(index, 1);
-        updateFilesList();
-      },
-      hint: filesFieldHint,
-      isReadonly: currentlyReadonly,
-      onLibraryPick: currentlyReadonly ? null : onLibraryPickFiles
-    });
-  }
-  updateFilesList();
-  setupFilesDropHandler(
-    filesContainer,
-    initialFiles,
-    state,
-    updateFilesList,
-    filesConstraints,
-    pathKey,
-    ctx.instance
-  );
-  setupFilesPickerHandler(
-    filesPicker,
-    initialFiles,
-    state,
-    updateFilesList,
-    filesConstraints,
-    pathKey,
-    ctx.instance
-  );
+function buildAcceptAttribute(accept) {
+  if (!accept) return "";
+  if (typeof accept === "string") return accept;
+  return [
+    ...accept.extensions?.map((ext) => `.${ext}`) ?? [],
+    ...accept.mime ?? []
+  ].join(",");
 }
-function renderMultipleFileElementEdit(element, ctx, wrapper, pathKey) {
+function setupMultiFileEditMode(element, ctx, wrapper, pathKey, maxFiles) {
   const state = ctx.state;
-  const minFiles = element.minCount ?? 0;
-  const maxFiles = element.maxCount ?? Infinity;
   const filesWrapper = document.createElement("div");
   filesWrapper.className = "space-y-2";
   filesWrapper.dataset.filesWrapper = pathKey;
@@ -4120,15 +4614,9 @@ function renderMultipleFileElementEdit(element, ctx, wrapper, pathKey) {
   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}`) ?? [],
-      ...element.accept.mime ?? []
-    ].join(",") || "";
-  }
+  filesPicker.accept = buildAcceptAttribute(element.accept);
   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);
@@ -4137,19 +4625,18 @@ function renderMultipleFileElementEdit(element, ctx, wrapper, pathKey) {
   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 = {
+  const constraints = {
     maxCount: maxFiles,
     allowedExtensions: getAllowedExtensions(element.accept),
     allowedMimes: getAllowedMimes(element.accept),
-    maxSize: element.maxSize ?? Infinity
+    // Prefer schema's `maxSize`; fall back to legacy `maxSizeMB` for
+    // backward compatibility (matches addFileSizeHint in validation.ts).
+    maxSize: element.maxSize ?? element.maxSizeMB ?? 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 openPicker = () => {
+    filesPicker.click();
   };
-  const onLibraryPickMultiple = state.config.pickExistingFiles && !element.disableLibrary ? () => {
+  const onLibraryPick = state.config.pickExistingFiles && !element.disableLibrary ? () => {
     handleLibraryPickMulti(
       state,
       element,
@@ -4163,30 +4650,35 @@ function renderMultipleFileElementEdit(element, ctx, wrapper, pathKey) {
       console.error("Library pick failed:", err);
     });
   } : null;
-  const updateFilesDisplay = () => {
+  function updateFilesDisplay() {
     const currentlyReadonly = isElementReadonly(element, state);
     renderResourcePills({
       container: list,
       rids: initialFiles,
       state,
-      onRemove: currentlyReadonly ? null : (index) => {
-        releaseLocalFileUrl(state.resourceIndex.get(index)?.file);
-        initialFiles.splice(initialFiles.indexOf(index), 1);
+      onRemove: currentlyReadonly ? null : (ridToRemove) => {
+        releaseLocalFileUrl(state.resourceIndex.get(ridToRemove)?.file);
+        const index = initialFiles.indexOf(ridToRemove);
+        if (index > -1) initialFiles.splice(index, 1);
         updateFilesDisplay();
       },
-      hint: multipleFilesHint,
-      countInfo: buildCountInfo(),
       maxCount: maxFiles < Infinity ? maxFiles : void 0,
       isReadonly: currentlyReadonly,
-      onLibraryPick: currentlyReadonly ? null : onLibraryPickMultiple
+      onLibraryPick: currentlyReadonly ? null : onLibraryPick,
+      element,
+      onClearAll: currentlyReadonly ? void 0 : () => {
+        initialFiles.splice(0);
+        updateFilesDisplay();
+      },
+      openPicker
     });
-  };
+  }
   setupFilesDropHandler(
     filesContainer,
     initialFiles,
     state,
     updateFilesDisplay,
-    multipleConstraints,
+    constraints,
     pathKey,
     ctx.instance
   );
@@ -4195,13 +4687,25 @@ function renderMultipleFileElementEdit(element, ctx, wrapper, pathKey) {
     initialFiles,
     state,
     updateFilesDisplay,
-    multipleConstraints,
+    constraints,
     pathKey,
     ctx.instance
   );
   updateFilesDisplay();
   wrapper.appendChild(filesWrapper);
 }
+function renderFilesElementEdit(element, ctx, wrapper, pathKey) {
+  setupMultiFileEditMode(element, ctx, wrapper, pathKey, Infinity);
+}
+function renderMultipleFileElementEdit(element, ctx, wrapper, pathKey) {
+  setupMultiFileEditMode(
+    element,
+    ctx,
+    wrapper,
+    pathKey,
+    element.maxCount ?? Infinity
+  );
+}
 
 // src/components/file/validate.ts
 function readMultiFileResourceIds(scopeRoot, fullKey) {
@@ -4324,33 +4828,36 @@ function renderFileElementReadonly(element, ctx, wrapper, pathKey) {
     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));
-    });
+    renderFilePreviewReadonly(initial, state).then((tile) => {
+      tile.classList.add(
+        "fb-single-readonly-filled",
+        "fb-readonly-tile",
+        "fb-checker"
+      );
+      wrapper.appendChild(tile);
+    }).catch(console.error);
   } else {
     wrapper.appendChild(buildEmptyReadonlyTile(state));
   }
 }
 function buildEmptyReadonlyTile(state) {
+  ensureFileStyles();
   const emptyState = document.createElement("div");
   emptyState.style.cssText = `
-    width:${TILE_SIZE};
-    height:${TILE_SIZE};
+    height: 220px;
     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);
+    background: repeating-linear-gradient(45deg, #fafafa 0 6px, #f3f4f6 6px 12px);
+    border-radius:0.75rem;
+    border:1px solid #e2e8f0;
   `;
   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) {
+function renderMultiFileReadonly(rids, state, wrapper, pathKey, _marginTop) {
   addPrefillFilesToIndex(rids, state.resourceIndex);
+  ensureFileStyles();
   const filesWrapper = document.createElement("div");
   filesWrapper.dataset.filesWrapper = pathKey;
   filesWrapper.dataset.resourceIds = JSON.stringify(rids);
@@ -4362,22 +4869,32 @@ function renderMultiFileReadonly(rids, state, wrapper, pathKey, marginTop) {
     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 grid = document.createElement("div");
+  grid.className = "fb-multi-readonly-grid";
+  filesWrapper.appendChild(grid);
   const placeholders = rids.map(() => {
-    const placeholder = document.createElement("div");
-    placeholder.style.cssText = `width:${TILE_SIZE};height:${TILE_SIZE};`;
-    tilesWrap.appendChild(placeholder);
-    return placeholder;
+    const ph = document.createElement("div");
+    ph.className = "fb-readonly-tile fb-checker fb-tile";
+    grid.appendChild(ph);
+    return ph;
   });
   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);
+    const meta = state.resourceIndex.get(resourceId);
+    renderFilePreviewReadonly(resourceId, state, meta?.name).then((tile) => {
+      tile.classList.add(
+        "fb-readonly-tile",
+        "fb-checker",
+        "fb-tile-resource"
+      );
+      tile.dataset.resourceId = resourceId;
+      placeholder.replaceWith(tile);
+    }).catch(() => {
+      const tile = document.createElement("div");
+      tile.className = "fb-readonly-tile fb-checker fb-tile fb-tile-resource";
+      tile.dataset.resourceId = resourceId;
+      placeholder.replaceWith(tile);
     });
   }
 }
@@ -4389,7 +4906,7 @@ function renderFilesElementReadonly(element, ctx, 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");
+  renderMultiFileReadonly(initialFiles, ctx.state, wrapper, pathKey);
 }
 
 // src/components/file.ts
@@ -4720,51 +5237,25 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
       removeBtn.style.pointerEvents = disabled ? "none" : "auto";
     });
   }
-  let addRow = null;
-  let countDisplay = null;
+  let addUpdate = null;
   if (!readonly) {
-    addRow = document.createElement("div");
-    addRow.className = "flex items-center gap-3 mt-2";
-    const addBtn = document.createElement("button");
-    addBtn.type = "button";
-    addBtn.className = "add-colour-btn px-3 py-1 rounded";
-    addBtn.style.cssText = `
-      color: var(--fb-primary-color);
-      border: var(--fb-border-width) solid var(--fb-primary-color);
-      background-color: transparent;
-      font-size: var(--fb-font-size);
-      transition: all var(--fb-transition-duration);
-    `;
-    addBtn.textContent = "+";
-    addBtn.addEventListener("mouseenter", () => {
-      addBtn.style.backgroundColor = "var(--fb-background-hover-color)";
-    });
-    addBtn.addEventListener("mouseleave", () => {
-      addBtn.style.backgroundColor = "transparent";
-    });
-    addBtn.onclick = () => {
-      const defaultColour = element.default || "#000000";
-      values.push(defaultColour);
-      addColourItem(defaultColour);
-      updateAddButton();
-      updateRemoveButtons();
-    };
-    countDisplay = document.createElement("span");
-    countDisplay.className = "text-sm text-gray-500";
-    addRow.appendChild(addBtn);
-    addRow.appendChild(countDisplay);
-    wrapper.appendChild(addRow);
+    const handle = createAddItemRow(
+      "colour",
+      () => {
+        const defaultColour = element.default || "#000000";
+        values.push(defaultColour);
+        addColourItem(defaultColour);
+        updateAddButton();
+        updateRemoveButtons();
+      },
+      { label: element.addLabel }
+    );
+    addUpdate = handle.update;
+    mountCounterInLabel(wrapper, handle.counter);
+    wrapper.appendChild(handle.row);
   }
   function updateAddButton() {
-    if (!addRow || !countDisplay) return;
-    const addBtn = addRow.querySelector(".add-colour-btn");
-    if (addBtn) {
-      const disabled = values.length >= maxCount;
-      addBtn.disabled = disabled;
-      addBtn.style.opacity = disabled ? "0.5" : "1";
-      addBtn.style.pointerEvents = disabled ? "none" : "auto";
-    }
-    countDisplay.textContent = `${values.length}/${maxCount === Infinity ? "\u221E" : maxCount}`;
+    if (addUpdate) addUpdate(values.length, maxCount);
   }
   values.forEach((value) => addColourItem(value));
   updateAddButton();
@@ -5200,50 +5691,24 @@ function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
       removeBtn.style.pointerEvents = disabled ? "none" : "auto";
     });
   }
-  let addRow = null;
-  let countDisplay = null;
+  let addUpdate = null;
   if (!readonly) {
-    addRow = document.createElement("div");
-    addRow.className = "flex items-center gap-3 mt-2";
-    const addBtn = document.createElement("button");
-    addBtn.type = "button";
-    addBtn.className = "add-slider-btn px-3 py-1 rounded";
-    addBtn.style.cssText = `
-      color: var(--fb-primary-color);
-      border: var(--fb-border-width) solid var(--fb-primary-color);
-      background-color: transparent;
-      font-size: var(--fb-font-size);
-      transition: all var(--fb-transition-duration);
-    `;
-    addBtn.textContent = "+";
-    addBtn.addEventListener("mouseenter", () => {
-      addBtn.style.backgroundColor = "var(--fb-background-hover-color)";
-    });
-    addBtn.addEventListener("mouseleave", () => {
-      addBtn.style.backgroundColor = "transparent";
-    });
-    addBtn.onclick = () => {
-      values.push(defaultValue);
-      addSliderItem(defaultValue);
-      updateAddButton();
-      updateRemoveButtons();
-    };
-    countDisplay = document.createElement("span");
-    countDisplay.className = "text-sm text-gray-500";
-    addRow.appendChild(addBtn);
-    addRow.appendChild(countDisplay);
-    wrapper.appendChild(addRow);
+    const handle = createAddItemRow(
+      "slider",
+      () => {
+        values.push(defaultValue);
+        addSliderItem(defaultValue);
+        updateAddButton();
+        updateRemoveButtons();
+      },
+      { label: element.addLabel }
+    );
+    addUpdate = handle.update;
+    mountCounterInLabel(wrapper, handle.counter);
+    wrapper.appendChild(handle.row);
   }
   function updateAddButton() {
-    if (!addRow || !countDisplay) return;
-    const addBtn = addRow.querySelector(".add-slider-btn");
-    if (addBtn) {
-      const disabled = values.length >= maxCount;
-      addBtn.disabled = disabled;
-      addBtn.style.opacity = disabled ? "0.5" : "1";
-      addBtn.style.pointerEvents = disabled ? "none" : "auto";
-    }
-    countDisplay.textContent = `${values.length}/${maxCount === Infinity ? "\u221E" : maxCount}`;
+    if (addUpdate) addUpdate(values.length, maxCount);
   }
   values.forEach((value) => addSliderItem(value));
   updateAddButton();
@@ -5527,7 +5992,7 @@ function createPrefillHints(element, pathKey) {
     return null;
   }
   const hintsContainer = document.createElement("div");
-  hintsContainer.className = "fb-prefill-hints flex flex-wrap gap-2 mb-4";
+  hintsContainer.className = "fb-prefill-hints flex flex-wrap gap-2 mb-2";
   element.prefillHints.forEach((hint, index) => {
     const hintButton = document.createElement("button");
     hintButton.type = "button";
@@ -5542,14 +6007,14 @@ function createPrefillHints(element, pathKey) {
 }
 function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
   const containerWrap = document.createElement("div");
-  containerWrap.className = "border border-gray-200 rounded-lg p-4 bg-gray-50";
+  containerWrap.className = "border border-gray-200 rounded-lg p-2 bg-gray-50";
   containerWrap.setAttribute("data-container", pathKey);
   const itemsWrap = document.createElement("div");
   const columns = element.columns || 1;
   if (columns === 1) {
-    itemsWrap.className = "space-y-4";
+    itemsWrap.className = "space-y-2";
   } else {
-    itemsWrap.className = `grid grid-cols-${columns} gap-4`;
+    itemsWrap.className = `grid grid-cols-${columns} gap-2`;
   }
   const containerIsReadonly = isElementReadonly(element, ctx.state, ctx);
   if (!containerIsReadonly) {
@@ -5583,16 +6048,70 @@ function renderSingleContainerElement(element, ctx, wrapper, pathKey) {
   containerWrap.appendChild(itemsWrap);
   wrapper.appendChild(containerWrap);
 }
+function getChildWrapperClass(isSlides, columns) {
+  if (isSlides) {
+    return "space-y-2";
+  }
+  const cols = columns || 1;
+  return cols === 1 ? "space-y-2" : `grid grid-cols-${cols} gap-2`;
+}
+function mountRemoveButton(item, onRemove) {
+  const rem = document.createElement("button");
+  rem.type = "button";
+  rem.className = "fb-item-remove";
+  rem.style.cssText = `
+    width: 22px;
+    height: 22px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    line-height: 1;
+    font-size: 14px;
+    color: var(--fb-error-color);
+    background-color: transparent;
+    border: 0;
+    border-radius: 4px;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background-color var(--fb-transition-duration);
+  `;
+  rem.textContent = "\u2715";
+  rem.addEventListener("mouseenter", () => {
+    rem.style.backgroundColor = "var(--fb-background-hover-color)";
+  });
+  rem.addEventListener("mouseleave", () => {
+    rem.style.backgroundColor = "transparent";
+  });
+  rem.onclick = onRemove;
+  const labelRow = item.querySelector("[data-fb-label-row]");
+  if (labelRow) {
+    rem.style.marginLeft = "auto";
+    labelRow.appendChild(rem);
+    return;
+  }
+  rem.style.position = "absolute";
+  rem.style.top = "8px";
+  rem.style.right = "8px";
+  item.style.position = "relative";
+  item.appendChild(rem);
+}
 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";
+  containerWrap.className = "border border-gray-200 rounded-lg p-2 bg-gray-50";
   const itemsWrap = document.createElement("div");
-  itemsWrap.className = "space-y-4";
+  const isSlides = element.displayMode === "slides";
+  if (isSlides) {
+    itemsWrap.className = "fb-container-slides";
+    const slideCols = element.columns;
+    const gridTemplateColumns = typeof slideCols === "number" && slideCols > 0 ? `repeat(${slideCols}, 1fr)` : "repeat(auto-fit, minmax(280px, 1fr))";
+    itemsWrap.style.cssText = `display:grid;grid-template-columns:${gridTemplateColumns};gap:8px;align-items:start;`;
+  } else {
+    itemsWrap.className = "space-y-2";
+  }
   if (!containerIsReadonly) {
     const hintsElement = createPrefillHints(element, element.key);
     if (hintsElement) {
@@ -5604,97 +6123,64 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
   const pre = Array.isArray(ctx.prefill?.[element.key]) ? ctx.prefill[element.key] : null;
   const childDefaults = extractChildDefaults(element.elements);
   const countItems = () => itemsWrap.querySelectorAll(":scope > .containerItem").length;
-  const createAddButton = () => {
-    const add = document.createElement("button");
-    add.type = "button";
-    add.className = "add-container-btn px-3 py-1 rounded";
-    add.style.cssText = `
-      color: var(--fb-primary-color);
-      border: var(--fb-border-width) solid var(--fb-primary-color);
-      background-color: transparent;
-      font-size: var(--fb-font-size);
-      transition: all var(--fb-transition-duration);
-    `;
-    add.textContent = "+";
-    add.addEventListener("mouseenter", () => {
-      add.style.backgroundColor = "var(--fb-background-hover-color)";
-    });
-    add.addEventListener("mouseleave", () => {
-      add.style.backgroundColor = "transparent";
-    });
-    add.onclick = () => {
-      if (countItems() < max) {
-        const idx = countItems();
-        const currentFormData = state.formRoot ? extractRootFormData(state.formRoot) : {};
-        const subCtx = {
-          state: ctx.state,
-          path: pathJoin(ctx.path, `${element.key}[${idx}]`),
-          prefill: childDefaults,
-          // Defaults for enableIf evaluation
-          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";
-        item.setAttribute("data-container-item", `${element.key}[${idx}]`);
-        const childWrapper = document.createElement("div");
-        const columns = element.columns || 1;
-        if (columns === 1) {
-          childWrapper.className = "space-y-4";
-        } else {
-          childWrapper.className = `grid grid-cols-${columns} gap-4`;
-        }
-        element.elements.forEach((child) => {
-          if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
-            childWrapper.appendChild(
-              createHiddenInput(
-                pathJoin(subCtx.path, child.key),
-                ("default" in child ? child.default : null) ?? null
-              )
-            );
-          } else {
-            childWrapper.appendChild(renderElement(child, subCtx));
-          }
-        });
-        item.appendChild(childWrapper);
-        if (!containerIsReadonly) {
-          const rem = document.createElement("button");
-          rem.type = "button";
-          rem.className = "absolute top-2 right-2 px-2 py-1 rounded";
-          rem.style.cssText = `
-            color: var(--fb-error-color);
-            background-color: transparent;
-            transition: background-color var(--fb-transition-duration);
-          `;
-          rem.textContent = "\u2715";
-          rem.addEventListener("mouseenter", () => {
-            rem.style.backgroundColor = "var(--fb-background-hover-color)";
-          });
-          rem.addEventListener("mouseleave", () => {
-            rem.style.backgroundColor = "transparent";
-          });
-          rem.onclick = () => handleRemoveItem(item);
-          item.style.position = "relative";
-          item.appendChild(rem);
-        }
-        itemsWrap.appendChild(item);
-        updateAddButton();
-      }
+  const handleAddItem = () => {
+    if (countItems() >= max) return;
+    const idx = countItems();
+    const currentFormData = state.formRoot ? extractRootFormData(state.formRoot) : {};
+    const subCtx = {
+      state: ctx.state,
+      path: pathJoin(ctx.path, `${element.key}[${idx}]`),
+      prefill: childDefaults,
+      // Defaults for enableIf evaluation
+      formData: currentFormData,
+      // Current root data from DOM for enableIf
+      inheritedReadonly: childInheritedReadonly
     };
-    return add;
+    const item = document.createElement("div");
+    item.className = "containerItem border border-gray-300 rounded-lg p-2 bg-white";
+    item.setAttribute("data-container-item", `${element.key}[${idx}]`);
+    const childWrapper = document.createElement("div");
+    childWrapper.className = getChildWrapperClass(isSlides, element.columns);
+    element.elements.forEach((child) => {
+      if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
+        childWrapper.appendChild(
+          createHiddenInput(
+            pathJoin(subCtx.path, child.key),
+            ("default" in child ? child.default : null) ?? null
+          )
+        );
+      } else {
+        childWrapper.appendChild(renderElement(child, subCtx));
+      }
+    });
+    item.appendChild(childWrapper);
+    if (!containerIsReadonly) {
+      mountRemoveButton(item, () => handleRemoveItem(item));
+    }
+    if (slideAddTile && slideAddTile.parentElement === itemsWrap) {
+      itemsWrap.insertBefore(item, slideAddTile);
+    } else {
+      itemsWrap.appendChild(item);
+    }
+    updateAddButton();
   };
-  const updateAddButton = () => {
-    const currentCount = countItems();
-    const existingAddBtn = containerWrap.querySelector(
-      ".add-container-btn"
+  let slideAddTile = null;
+  let slideAddUpdate = null;
+  let pillAddUpdate = null;
+  const syncSlideTileSize = () => {
+    if (!slideAddTile) return;
+    const firstSlide = itemsWrap.querySelector(
+      ":scope > .containerItem"
     );
-    if (existingAddBtn) {
-      existingAddBtn.disabled = currentCount >= max;
-      existingAddBtn.style.opacity = currentCount >= max ? "0.5" : "1";
-      existingAddBtn.style.pointerEvents = currentCount >= max ? "none" : "auto";
+    if (firstSlide && firstSlide.offsetHeight > 0) {
+      slideAddTile.style.minHeight = `${firstSlide.offsetHeight}px`;
     }
-    countDisplay.textContent = `${currentCount}/${max === Infinity ? "\u221E" : max}`;
+  };
+  const updateAddButton = () => {
+    const currentCount = countItems();
+    if (slideAddUpdate) slideAddUpdate(currentCount, max);
+    if (pillAddUpdate) pillAddUpdate(currentCount, max);
+    if (slideAddTile) syncSlideTileSize();
   };
   const handleRemoveItem = (item) => {
     item.remove();
@@ -5713,14 +6199,18 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         inheritedReadonly: childInheritedReadonly
       };
       const item = document.createElement("div");
-      item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
+      item.className = "containerItem border border-gray-300 rounded-lg p-2 bg-white";
       item.setAttribute("data-container-item", `${element.key}[${idx}]`);
       const childWrapper = document.createElement("div");
-      const columns = element.columns || 1;
-      if (columns === 1) {
-        childWrapper.className = "space-y-4";
+      if (isSlides) {
+        childWrapper.className = "space-y-2";
       } else {
-        childWrapper.className = `grid grid-cols-${columns} gap-4`;
+        const columns = element.columns || 1;
+        if (columns === 1) {
+          childWrapper.className = "space-y-2";
+        } else {
+          childWrapper.className = `grid grid-cols-${columns} gap-2`;
+        }
       }
       element.elements.forEach((child) => {
         if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
@@ -5734,24 +6224,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       });
       item.appendChild(childWrapper);
       if (!containerIsReadonly) {
-        const rem = document.createElement("button");
-        rem.type = "button";
-        rem.className = "absolute top-2 right-2 px-2 py-1 rounded";
-        rem.style.cssText = `
-          color: var(--fb-error-color);
-          background-color: transparent;
-          transition: background-color var(--fb-transition-duration);
-        `;
-        rem.textContent = "\u2715";
-        rem.addEventListener("mouseenter", () => {
-          rem.style.backgroundColor = "var(--fb-background-hover-color)";
-        });
-        rem.addEventListener("mouseleave", () => {
-          rem.style.backgroundColor = "transparent";
-        });
-        rem.onclick = () => handleRemoveItem(item);
-        item.style.position = "relative";
-        item.appendChild(rem);
+        mountRemoveButton(item, () => handleRemoveItem(item));
       }
       itemsWrap.appendChild(item);
     });
@@ -5769,14 +6242,18 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         inheritedReadonly: childInheritedReadonly
       };
       const item = document.createElement("div");
-      item.className = "containerItem border border-gray-300 rounded-lg p-4 bg-white";
+      item.className = "containerItem border border-gray-300 rounded-lg p-2 bg-white";
       item.setAttribute("data-container-item", `${element.key}[${idx}]`);
       const childWrapper = document.createElement("div");
-      const columns = element.columns || 1;
-      if (columns === 1) {
-        childWrapper.className = "space-y-4";
+      if (isSlides) {
+        childWrapper.className = "space-y-2";
       } else {
-        childWrapper.className = `grid grid-cols-${columns} gap-4`;
+        const columns = element.columns || 1;
+        if (columns === 1) {
+          childWrapper.className = "space-y-2";
+        } else {
+          childWrapper.className = `grid grid-cols-${columns} gap-2`;
+        }
       }
       element.elements.forEach((child) => {
         if (child.type !== "markdown" && (child.hidden || child.type === "hidden")) {
@@ -5791,41 +6268,43 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         }
       });
       item.appendChild(childWrapper);
-      const rem = document.createElement("button");
-      rem.type = "button";
-      rem.className = "absolute top-2 right-2 px-2 py-1 rounded";
-      rem.style.cssText = `
-        color: var(--fb-error-color);
-        background-color: transparent;
-        transition: background-color var(--fb-transition-duration);
-      `;
-      rem.textContent = "\u2715";
-      rem.addEventListener("mouseenter", () => {
-        rem.style.backgroundColor = "var(--fb-background-hover-color)";
-      });
-      rem.addEventListener("mouseleave", () => {
-        rem.style.backgroundColor = "transparent";
-      });
-      rem.onclick = () => {
+      mountRemoveButton(item, () => {
         if (countItems() > min) {
           handleRemoveItem(item);
         }
-      };
-      item.style.position = "relative";
-      item.appendChild(rem);
+      });
       itemsWrap.appendChild(item);
     }
   }
   containerWrap.appendChild(itemsWrap);
   if (!containerIsReadonly) {
-    const addRow = document.createElement("div");
-    addRow.className = "flex items-center gap-3 mt-2";
-    addRow.appendChild(createAddButton());
-    addRow.appendChild(countDisplay);
-    containerWrap.appendChild(addRow);
+    if (isSlides) {
+      itemsWrap.style.alignItems = "stretch";
+      const handle = createSlideAddTile(handleAddItem, {
+        label: element.addLabel
+      });
+      slideAddTile = handle.tile;
+      slideAddUpdate = handle.update;
+      mountCounterInLabel(wrapper, handle.counter);
+      itemsWrap.appendChild(handle.tile);
+    } else {
+      const handle = createAddItemRow("container", handleAddItem, {
+        label: element.addLabel
+      });
+      pillAddUpdate = handle.update;
+      mountCounterInLabel(wrapper, handle.counter);
+      containerWrap.appendChild(handle.row);
+    }
   }
   updateAddButton();
   wrapper.appendChild(containerWrap);
+  if (slideAddTile) {
+    if (typeof requestAnimationFrame === "function") {
+      requestAnimationFrame(syncSlideTileSize);
+    } else {
+      syncSlideTileSize();
+    }
+  }
 }
 var validateElementFunc = null;
 function setValidateElement(fn) {
@@ -7804,7 +8283,7 @@ function filterFilesForDropdown(query, files, labels) {
   });
 }
 var TEXTAREA_FONT = "font-size: var(--fb-font-size, 14px); font-family: var(--fb-font-family, inherit); line-height: 1.6;";
-var TEXTAREA_PADDING = "padding: 12px 52px 12px 14px;";
+var TEXTAREA_PADDING = "padding: 8px 40px 8px 10px;";
 function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
   const state = ctx.state;
   const files = [...initialValue.files];
@@ -7851,7 +8330,7 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
   });
   const errorEl = document.createElement("div");
   errorEl.className = "fb-richinput-error";
-  errorEl.style.cssText = "display: none; color: var(--fb-error-color, #ef4444); font-size: var(--fb-font-size-small, 12px); padding: 4px 14px 8px;";
+  errorEl.style.cssText = "display: none; color: var(--fb-error-color, #ef4444); font-size: var(--fb-font-size-small, 12px); padding: 4px 10px 6px;";
   let errorTimer = null;
   function showUploadError(message) {
     errorEl.textContent = message;
@@ -7927,7 +8406,7 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
   });
   const filesRow = document.createElement("div");
   filesRow.className = "fb-richinput-files";
-  filesRow.style.cssText = "display: none; flex-wrap: wrap; gap: 6px; padding: 10px 14px 0; align-items: center;";
+  filesRow.style.cssText = "display: none; flex-wrap: wrap; gap: 4px; padding: 6px 10px 0; align-items: center;";
   const fileInput = document.createElement("input");
   fileInput.type = "file";
   fileInput.multiple = true;
@@ -8057,13 +8536,13 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
   paperclipBtn.title = t("richinputAttachFile", state);
   paperclipBtn.style.cssText = `
     position: absolute;
-    right: 10px;
-    bottom: 10px;
+    right: 6px;
+    bottom: 6px;
     z-index: 2;
-    width: 32px;
-    height: 32px;
+    width: 28px;
+    height: 28px;
     border: none;
-    border-radius: 8px;
+    border-radius: 6px;
     background: transparent;
     cursor: pointer;
     display: flex;
@@ -8417,7 +8896,7 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
   outerDiv.appendChild(errorEl);
   if (element.minLength != null || element.maxLength != null) {
     const counterRow = document.createElement("div");
-    counterRow.style.cssText = "position: relative; padding: 2px 14px 6px; text-align: right;";
+    counterRow.style.cssText = "position: relative; padding: 2px 10px 4px; text-align: right;";
     const counter = createCharCounter(element, textarea, false);
     counter.style.cssText = `
       position: static;
@@ -8720,10 +9199,7 @@ var TAGS = {
   "-": ["<hr />"]
 };
 function outdent(str) {
-  return str.replace(
-    RegExp("^" + (str.match(/^(\t| )+/) || "")[0], "gm"),
-    ""
-  );
+  return str.replace(RegExp("^" + (str.match(/^(\t| )+/) || "")[0], "gm"), "");
 }
 function encodeAttr(str) {
   return (str + "").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -8886,12 +9362,7 @@ function ensureMarkdownStyles() {
 `;
   document.head.appendChild(style);
 }
-var ANCHOR_DANGEROUS_SCHEMES = [
-  "javascript:",
-  "data:",
-  "vbscript:",
-  "blob:"
-];
+var ANCHOR_DANGEROUS_SCHEMES = ["javascript:", "data:", "vbscript:", "blob:"];
 var IMG_DANGEROUS_SCHEMES = ["javascript:", "vbscript:", "blob:"];
 function isImgSrcDangerous(normalized) {
   if (IMG_DANGEROUS_SCHEMES.some((scheme) => normalized.startsWith(scheme))) {
@@ -9211,7 +9682,8 @@ function createInfoButton(element) {
 }
 function createLabelContainer(element) {
   const label = document.createElement("div");
-  label.className = "flex items-center mb-2";
+  label.className = "flex items-center mb-1";
+  label.dataset.fbLabelRow = "";
   const title = createFieldLabel(element);
   label.appendChild(title);
   if (element.description || element.hint) {
@@ -9318,7 +9790,7 @@ function renderElement2(element, ctx) {
     }
     const initiallyDisabled2 = shouldDisableElement(element, ctx);
     const outerWrapper = document.createElement("div");
-    outerWrapper.className = "mb-6 fb-field-wrapper fb-markdown-wrapper";
+    outerWrapper.className = "mb-2 fb-field-wrapper fb-markdown-wrapper";
     outerWrapper.setAttribute(
       "data-field-key",
       getElementLookupKey(element, ctx.state)
@@ -9334,7 +9806,7 @@ function renderElement2(element, ctx) {
   }
   const initiallyDisabled = shouldDisableElement(element, ctx);
   const wrapper = document.createElement("div");
-  wrapper.className = "mb-6 fb-field-wrapper";
+  wrapper.className = "mb-2 fb-field-wrapper";
   wrapper.setAttribute("data-field-key", element.key);
   const label = createLabelContainer(element);
   wrapper.appendChild(label);
@@ -9401,12 +9873,16 @@ var defaultConfig = {
       hintPattern: "Format: {pattern}",
       fileCountSingle: "{count} file",
       fileCountPlural: "{count} files",
+      fileCountWithMax: "{count} / {max} files",
       fileCountRange: "({min}-{max})",
       uploadingFile: "Uploading\u2026",
       filesCounter: "{count}/{max}",
       fromLibrary: "From library",
       libraryEmpty: "Library is empty",
       libraryHint: "Choose from previously uploaded files",
+      dropToUpload: "Release to upload",
+      replaceFile: "Replace",
+      clearAll: "Clear all",
       pickerError: "Failed to load files from library",
       // Validation errors
       required: "Required",
@@ -9425,6 +9901,7 @@ var defaultConfig = {
       invalidFileExtension: 'File "{name}" has unsupported format. Allowed: {formats}',
       invalidFileMime: 'File "{name}": file type {type} not allowed (allowed: {mimes})',
       fileTooLarge: 'File "{name}" exceeds maximum size of {maxSize}MB',
+      uploadFailed: 'Failed to upload "{name}": {error}',
       filesLimitExceeded: "{skipped} file(s) skipped: maximum {max} files allowed",
       unsupportedFieldType: "Unsupported field type: {type}",
       invalidOption: "Invalid option",
@@ -9472,12 +9949,16 @@ var defaultConfig = {
       hintPattern: "\u0424\u043E\u0440\u043C\u0430\u0442: {pattern}",
       fileCountSingle: "{count} \u0444\u0430\u0439\u043B",
       fileCountPlural: "{count} \u0444\u0430\u0439\u043B\u043E\u0432",
+      fileCountWithMax: "{count} / {max} \u0444\u0430\u0439\u043B\u043E\u0432",
       fileCountRange: "({min}-{max})",
       uploadingFile: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430\u2026",
       filesCounter: "{count}/{max}",
       fromLibrary: "\u0418\u0437 \u0431\u0438\u0431\u043B\u0438\u043E\u0442\u0435\u043A\u0438",
       libraryEmpty: "\u0411\u0438\u0431\u043B\u0438\u043E\u0442\u0435\u043A\u0430 \u043F\u0443\u0441\u0442\u0430",
       libraryHint: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0438\u0437 \u0440\u0430\u043D\u0435\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043D\u044B\u0445 \u0444\u0430\u0439\u043B\u043E\u0432",
+      dropToUpload: "\u041E\u0442\u043F\u0443\u0441\u0442\u0438\u0442\u0435, \u0447\u0442\u043E\u0431\u044B \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C",
+      replaceFile: "\u0417\u0430\u043C\u0435\u043D\u0438\u0442\u044C",
+      clearAll: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0432\u0441\u0435",
       pickerError: "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0444\u0430\u0439\u043B\u044B \u0438\u0437 \u0431\u0438\u0431\u043B\u0438\u043E\u0442\u0435\u043A\u0438",
       // Validation errors
       required: "\u041E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E\u0435 \u043F\u043E\u043B\u0435",
@@ -9496,6 +9977,7 @@ var defaultConfig = {
       invalidFileExtension: '\u0424\u0430\u0439\u043B "{name}" \u0438\u043C\u0435\u0435\u0442 \u043D\u0435\u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043C\u044B\u0439 \u0444\u043E\u0440\u043C\u0430\u0442. \u0414\u043E\u043F\u0443\u0441\u0442\u0438\u043C\u044B\u0435: {formats}',
       invalidFileMime: '\u0424\u0430\u0439\u043B "{name}": \u0442\u0438\u043F \u0444\u0430\u0439\u043B\u0430 {type} \u043D\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0451\u043D (\u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043D\u044B: {mimes})',
       fileTooLarge: '\u0424\u0430\u0439\u043B "{name}" \u043F\u0440\u0435\u0432\u044B\u0448\u0430\u0435\u0442 \u043C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u044B\u0439 \u0440\u0430\u0437\u043C\u0435\u0440 {maxSize}\u041C\u0411',
+      uploadFailed: '\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C "{name}": {error}',
       filesLimitExceeded: "{skipped} \u0444\u0430\u0439\u043B(\u043E\u0432) \u043F\u0440\u043E\u043F\u0443\u0449\u0435\u043D\u043E: \u043C\u0430\u043A\u0441\u0438\u043C\u0443\u043C {max} \u0444\u0430\u0439\u043B\u043E\u0432",
       unsupportedFieldType: "\u041D\u0435\u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043C\u044B\u0439 \u0442\u0438\u043F \u043F\u043E\u043B\u044F: {type}",
       invalidOption: "\u041D\u0435\u0434\u043E\u043F\u0443\u0441\u0442\u0438\u043C\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435",
@@ -9618,10 +10100,10 @@ var defaultTheme = {
   fileUploadHoverBorderColor: "#3b82f6",
   // blue-500
   // Spacing
-  inputPaddingX: "0.75rem",
-  // 3 (12px)
-  inputPaddingY: "0.5rem",
-  // 2 (8px)
+  inputPaddingX: "0.5rem",
+  // 8px (compact density v2)
+  inputPaddingY: "0.25rem",
+  // 4px (compact density v2)
   borderRadius: "0.5rem",
   // rounded-lg (8px)
   borderWidth: "1px",
@@ -9718,29 +10200,6 @@ var exampleThemes = {
   }
 };
 
-// src/utils/styles.ts
-function applyActionButtonStyles(button, isFormLevel = false) {
-  button.style.cssText = `
-    background-color: var(--fb-action-bg-color);
-    color: var(--fb-action-text-color);
-    border: var(--fb-border-width) solid var(--fb-action-border-color);
-    padding: ${isFormLevel ? "0.5rem 1rem" : "0.5rem 0.75rem"};
-    font-size: var(--fb-font-size);
-    font-weight: var(--fb-font-weight-medium);
-    border-radius: var(--fb-border-radius);
-    transition: all var(--fb-transition-duration);
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  `;
-  button.addEventListener("mouseenter", () => {
-    button.style.backgroundColor = "var(--fb-action-hover-bg-color)";
-    button.style.borderColor = "var(--fb-action-hover-border-color)";
-  });
-  button.addEventListener("mouseleave", () => {
-    button.style.backgroundColor = "var(--fb-action-bg-color)";
-    button.style.borderColor = "var(--fb-action-border-color)";
-  });
-}
-
 // src/components/registry.ts
 function validateHiddenElement(element, key, context) {
   const { scopeRoot } = context;
@@ -10066,7 +10525,7 @@ var FormBuilderInstance = class {
       existingContainer.remove();
     }
     const actionsContainer = document.createElement("div");
-    actionsContainer.className = "form-level-actions-container mt-6 pt-4 flex flex-wrap gap-3 justify-center";
+    actionsContainer.className = "form-level-actions-container mt-3 pt-2 flex flex-wrap gap-2 justify-center";
     actionsContainer.style.cssText = `
       border-top: var(--fb-border-width) solid var(--fb-border-color);
     `;
@@ -10207,7 +10666,7 @@ var FormBuilderInstance = class {
    */
   createRootPrefillHints(hints) {
     const hintsContainer = document.createElement("div");
-    hintsContainer.className = "fb-prefill-hints flex flex-wrap gap-2 mb-4";
+    hintsContainer.className = "fb-prefill-hints flex flex-wrap gap-2 mb-2";
     hints.forEach((hint) => {
       const hintButton = document.createElement("button");
       hintButton.type = "button";
@@ -10240,7 +10699,7 @@ var FormBuilderInstance = class {
     root.setAttribute("data-fb-root", "true");
     injectThemeVariables(root, this.state.config.theme);
     const rootContainer = document.createElement("div");
-    rootContainer.className = "space-y-6";
+    rootContainer.className = "space-y-2";
     if (schema.prefillHints && !this.state.config.readonly) {
       const hintsContainer = this.createRootPrefillHints(schema.prefillHints);
       rootContainer.appendChild(hintsContainer);
@@ -10248,9 +10707,9 @@ var FormBuilderInstance = class {
     const fieldsWrapper = document.createElement("div");
     const columns = schema.columns || 1;
     if (columns === 1) {
-      fieldsWrapper.className = "space-y-4";
+      fieldsWrapper.className = "space-y-2";
     } else {
-      fieldsWrapper.className = `grid grid-cols-${columns} gap-4`;
+      fieldsWrapper.className = `grid grid-cols-${columns} gap-2`;
     }
     schema.elements.forEach((element) => {
       if (element.type !== "markdown" && (element.hidden || element.type === "hidden")) {