@dmitryvim/form-builder 0.2.32 → 0.2.34

package/dist/esm/index.js

@@ -398,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");
@@ -450,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)"};
@@ -500,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);
   }
@@ -511,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) {
@@ -537,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)"};
@@ -581,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);
     }
@@ -638,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();
@@ -977,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();
@@ -1228,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();
@@ -1556,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();
@@ -1943,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();
@@ -2857,24 +2886,40 @@ function createTileActions(options) {
     return btn;
   };
   if (replaceHandler) {
-    const replaceBtn = makeBtn(ICON_REPLACE, t("replaceFile", state), "fb-tile-action-replace");
+    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");
+    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);
@@ -2883,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();
     });
@@ -2961,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`;
 }
@@ -3009,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) {
@@ -3037,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];
@@ -3090,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();
@@ -3230,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);
@@ -3257,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;
   };
@@ -3397,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 {
@@ -3430,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 {
@@ -3463,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 {
@@ -3512,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) {
@@ -3624,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;
@@ -3637,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(", ");
@@ -3661,7 +3744,8 @@ async function uploadBatch(accepted, resourceIds, listEl, state) {
     const addTile = tilesWrap.querySelector(".fb-multi-add-tile-js") ?? tilesWrap.querySelector(".fb-tile-add");
     if (addTile) addTile.style.display = "none";
   }
-  await Promise.all(
+  const failures = [];
+  await Promise.allSettled(
     accepted.map(async (file) => {
       const placeholder = createUploadingTile(file.name, state);
       if (listEl) {
@@ -3678,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) => {
@@ -3698,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);
@@ -3721,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) {
@@ -3753,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;
 }
@@ -3815,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);
@@ -3859,14 +3991,22 @@ 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";
@@ -4025,7 +4165,8 @@ function renderSingleFileFilled(fileContainer, resourceId, state, deps, extras)
   grid.appendChild(tile);
   fileContainer.className = "file-preview-container";
   fileContainer.removeAttribute("style");
-  while (fileContainer.firstChild) fileContainer.removeChild(fileContainer.firstChild);
+  while (fileContainer.firstChild)
+    fileContainer.removeChild(fileContainer.firstChild);
   fileContainer.appendChild(outer);
 }
 function buildMultiAddTile(state, hasLibrary, onUploadClick, onLibraryClick, isDragOver = false) {
@@ -4106,7 +4247,9 @@ function buildMetaLine(state, element, ridCount, maxCount, canClearAll, onClearA
     metaText.appendChild(sizeSpan);
     metaText.appendChild(buildMetaDot());
   }
-  const exts = getAllowedExtensions(element.accept);
+  const exts = getAllowedExtensions(
+    element.accept
+  );
   if (exts.length > 0) {
     const fmtSpan = document.createElement("span");
     fmtSpan.className = "fb-meta-mono";
@@ -4352,7 +4495,9 @@ function renderFileElementEdit(element, ctx, wrapper, pathKey) {
       setupDragAndDrop(container, 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);
@@ -4362,7 +4507,9 @@ function renderFileElementEdit(element, ctx, wrapper, pathKey) {
     }
   };
   const buildSingleExtras = () => {
-    const hasLibrary = Boolean(state.config.pickExistingFiles && !element.disableLibrary);
+    const hasLibrary = Boolean(
+      state.config.pickExistingFiles && !element.disableLibrary
+    );
     return {
       replaceHandler: state.config.uploadFile ? () => picker.click() : null,
       libraryHandler: hasLibrary ? () => {
@@ -4374,7 +4521,13 @@ function renderFileElementEdit(element, ctx, wrapper, pathKey) {
           pathKey,
           pathKey,
           async (rid) => {
-            renderSingleFileFilled(fileContainer, rid, state, buildDeps(), buildSingleExtras());
+            renderSingleFileFilled(
+              fileContainer,
+              rid,
+              state,
+              buildDeps(),
+              buildSingleExtras()
+            );
           },
           ctx.instance
         ).catch((err) => {
@@ -4390,14 +4543,21 @@ function renderFileElementEdit(element, ctx, wrapper, pathKey) {
     setupDrop: handlers.setupDrop,
     onRemove: handlers.onRemove,
     onAfterUpload: (container, rid) => {
-      renderSingleFileFilled(container, rid, state, buildDeps(), buildSingleExtras());
+      renderSingleFileFilled(
+        container,
+        rid,
+        state,
+        buildDeps(),
+        buildSingleExtras()
+      );
     }
   });
   const renderEmptySingleState = () => {
     ensureFileStyles();
     fileContainer.className = "file-preview-container";
     fileContainer.removeAttribute("style");
-    while (fileContainer.firstChild) fileContainer.removeChild(fileContainer.firstChild);
+    while (fileContainer.firstChild)
+      fileContainer.removeChild(fileContainer.firstChild);
     const onLibraryClick = buildSingleExtras().libraryHandler;
     const wideTile = buildWideTile(
       state,
@@ -4538,7 +4698,13 @@ 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);
+  setupMultiFileEditMode(
+    element,
+    ctx,
+    wrapper,
+    pathKey,
+    element.maxCount ?? Infinity
+  );
 }
 
 // src/components/file/validate.ts
@@ -4717,7 +4883,11 @@ function renderMultiFileReadonly(rids, state, wrapper, pathKey, _marginTop) {
     const placeholder = placeholders[i];
     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.classList.add(
+        "fb-readonly-tile",
+        "fb-checker",
+        "fb-tile-resource"
+      );
       tile.dataset.resourceId = resourceId;
       placeholder.replaceWith(tile);
     }).catch(() => {
@@ -5067,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();
@@ -5547,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();
@@ -5937,14 +6055,53 @@ function getChildWrapperClass(isSlides, columns) {
   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-2 bg-gray-50";
-  const countDisplay = document.createElement("span");
-  countDisplay.className = "text-sm text-gray-500";
   const itemsWrap = document.createElement("div");
   const isSlides = element.displayMode === "slides";
   if (isSlides) {
@@ -5966,92 +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-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) {
-          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();
@@ -6095,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);
     });
@@ -6156,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) {
@@ -9085,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;");
@@ -9251,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))) {
@@ -9577,6 +9683,7 @@ function createInfoButton(element) {
 function createLabelContainer(element) {
   const label = document.createElement("div");
   label.className = "flex items-center mb-1";
+  label.dataset.fbLabelRow = "";
   const title = createFieldLabel(element);
   label.appendChild(title);
   if (element.description || element.hint) {
@@ -9794,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",
@@ -9869,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",
@@ -10091,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;