@dmitryvim/form-builder 0.2.32 → 0.3.0

package/dist/esm/index.js

@@ -398,47 +398,331 @@ function deepEqual(a, b) {
   return a === b;
 }
 
+// src/utils/styles.ts
+function clearFieldError(input) {
+  const name = input.getAttribute("name");
+  if (!name) return;
+  const doc = input.ownerDocument || document;
+  const errorNode = doc.getElementById(`error-${name}`);
+  if (errorNode) errorNode.remove();
+}
+var BIN_ICON_SVG = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>';
+function ensureThemingHooks(doc) {
+  if (doc.head.querySelector("[data-fb-theming-hooks]")) return;
+  const style = doc.createElement("style");
+  style.setAttribute("data-fb-theming-hooks", "");
+  style.textContent = `
+[data-fb-slide-card] {
+  background: var(--fb-slide-card-bg);
+  box-shadow: var(--fb-slide-card-shadow);
+  border-radius: var(--fb-slide-card-radius);
+  min-height: var(--fb-slide-card-min-height);
+  padding: var(--fb-slide-card-padding);
+}
+[data-fb-label-row] > label {
+  font-size: var(--fb-label-section-font-size);
+  letter-spacing: var(--fb-label-section-letter-spacing);
+  text-transform: var(--fb-label-section-text-transform);
+}
+/* Per-item remove (trash) button used by multi-container items. Shares the
+   same faint-on-rest, error-on-hover palette as .fb-chip-remove. */
+.fb-item-remove {
+  color: var(--fb-text-faint-color, #94a3b8);
+  background-color: transparent;
+  transition: color var(--fb-transition-duration), background-color var(--fb-transition-duration);
+}
+.fb-item-remove:hover {
+  color: var(--fb-error-color);
+  background-color: var(--fb-background-hover-color);
+}
+`;
+  doc.head.appendChild(style);
+}
+function applyAutoExpand(textarea) {
+  textarea.style.overflow = "hidden";
+  textarea.style.resize = "none";
+  const lineCount = (textarea.value.match(/\n/g) || []).length + 1;
+  textarea.rows = Math.max(1, lineCount);
+  const resize = () => {
+    if (!textarea.isConnected) return;
+    textarea.style.height = "0";
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  };
+  textarea.addEventListener("input", resize);
+  setTimeout(() => {
+    if (textarea.isConnected) resize();
+  }, 0);
+}
+function applySingleLineMode(textarea) {
+  textarea.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+    }
+  });
+  textarea.addEventListener("paste", (e) => {
+    const pasted = e.clipboardData?.getData("text") ?? "";
+    if (!/[\r\n]/.test(pasted)) return;
+    e.preventDefault();
+    const cleaned = pasted.replace(/[\r\n]+/g, " ");
+    const start = textarea.selectionStart ?? textarea.value.length;
+    const end = textarea.selectionEnd ?? textarea.value.length;
+    const before = textarea.value.slice(0, start);
+    const after = textarea.value.slice(end);
+    textarea.value = before + cleaned + after;
+    const pos = start + cleaned.length;
+    textarea.setSelectionRange(pos, pos);
+    textarea.dispatchEvent(new Event("input", { bubbles: true }));
+  });
+}
+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) {
+function ensureChipStyles(doc) {
+  if (doc.head.querySelector("[data-fb-chip-styles]")) return;
+  const style = doc.createElement("style");
+  style.setAttribute("data-fb-chip-styles", "");
+  style.textContent = `
+.fb-chip-list { display: flex; flex-direction: column; gap: 4px; }
+.fb-chip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 6px 5px 10px;
+  background: var(--fb-chip-bg, var(--fb-background-color, #fff));
+  border: 1px solid var(--fb-chip-border, var(--fb-border-color, #e2e8f0));
+  border-radius: 6px;
+  position: relative;
+  transition: border-color var(--fb-transition-duration, 0.15s);
+}
+.fb-chip:hover { border-color: var(--fb-border-hover-color, var(--fb-border-color, #cbd5e1)); }
+.fb-chip:focus-within { border-color: var(--fb-border-focus-color, var(--fb-primary-color, #2f5bea)); }
+.fb-chip-dot {
+  flex: 0 0 6px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--fb-chip-dot, var(--fb-primary-color, #2f5bea));
+}
+.fb-chip-input {
+  flex: 1;
+  min-width: 0;
+  padding: 2px 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--fb-chip-text, var(--fb-text-color, inherit));
+  font-size: var(--fb-font-size, 14px);
+  font-family: var(--fb-font-family, inherit);
+  line-height: 1.4;
+}
+.fb-chip-input::placeholder { color: var(--fb-text-placeholder-color, #94a3b8); }
+.fb-chip-input:read-only { color: var(--fb-text-secondary-color, #475569); }
+.fb-chip-remove {
+  flex: 0 0 auto;
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--fb-text-faint-color, #94a3b8);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.12s, color 0.12s, background-color 0.12s;
+}
+.fb-chip:hover .fb-chip-remove,
+.fb-chip-remove:focus-visible { opacity: 1; }
+.fb-chip-remove:hover {
+  color: var(--fb-error-color, #dc2626);
+  background: var(--fb-background-hover-color, #f1f5f9);
+}
+.fb-chip-remove:disabled { opacity: 0 !important; pointer-events: none; }
+`;
+  doc.head.appendChild(style);
+}
+function createCharCounter(element, input) {
   const counter = document.createElement("span");
   counter.className = "char-counter";
   counter.style.cssText = `
-    position: absolute;
-    ${isTextarea ? "bottom: 8px" : "top: 50%; transform: translateY(-50%)"};
-    right: 10px;
+    margin-top: 4px;
+    padding-right: 12px;
+    text-align: right;
     font-size: var(--fb-font-size-small);
-    color: var(--fb-text-secondary-color);
+    line-height: 1;
+    color: var(--fb-error-color);
     pointer-events: none;
-    background: var(--fb-background-color);
-    padding: 0 4px;
+    display: none;
   `;
   const updateCounter = () => {
     const len = input.value.length;
-    const min = element.minLength;
     const max = element.maxLength;
-    if (min == null && max == null) {
-      counter.textContent = "";
-      return;
-    }
-    if (len === 0 || min != null && len < min) {
-      if (min != null && max != null) {
-        counter.textContent = `${min}-${max}`;
-      } else if (max != null) {
-        counter.textContent = `\u2264${max}`;
-      } else if (min != null) {
-        counter.textContent = `\u2265${min}`;
-      }
-      counter.style.color = "var(--fb-text-secondary-color)";
-    } else if (max != null && len > max) {
+    if (max != null && len > max) {
       counter.textContent = `${len}/${max}`;
-      counter.style.color = "var(--fb-error-color)";
+      counter.style.display = "block";
     } else {
-      if (max != null) {
-        counter.textContent = `${len}/${max}`;
-      } else {
-        counter.textContent = `${len}`;
-      }
-      counter.style.color = "var(--fb-text-secondary-color)";
+      counter.textContent = "";
+      counter.style.display = "none";
     }
   };
   input.addEventListener("input", updateCounter);
@@ -450,26 +734,33 @@ function renderTextElement(element, ctx, wrapper, pathKey) {
   const readonly = isElementReadonly(element, state, ctx);
   const inputWrapper = document.createElement("div");
   inputWrapper.style.cssText = "position: relative;";
-  const textInput = document.createElement("input");
-  textInput.type = "text";
+  const hasCharCounter = !readonly && (element.minLength != null || element.maxLength != null);
+  const textInput = document.createElement("textarea");
+  textInput.rows = 1;
   textInput.className = "w-full rounded-lg";
   textInput.style.cssText = `
     padding: var(--fb-input-padding-y) var(--fb-input-padding-x);
-    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)"};
     color: var(--fb-text-color);
     font-size: var(--fb-font-size);
     font-family: var(--fb-font-family);
+    line-height: var(--fb-line-height, 1.5);
     transition: all var(--fb-transition-duration) ease-in-out;
     width: 100%;
     box-sizing: border-box;
+    resize: none;
+    overflow: hidden;
+    word-break: break-word;
+    overflow-wrap: anywhere;
   `;
   textInput.name = pathKey;
   textInput.placeholder = element.placeholder || "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0442\u0435\u043A\u0441\u0442";
   textInput.value = ctx.prefill[element.key] || element.default || "";
   textInput.readOnly = readonly;
+  applySingleLineMode(textInput);
+  applyAutoExpand(textInput);
   if (!readonly) {
     textInput.addEventListener("focus", () => {
       textInput.style.borderColor = "var(--fb-border-focus-color)";
@@ -500,8 +791,8 @@ function renderTextElement(element, ctx, wrapper, pathKey) {
     textInput.addEventListener("input", handleChange);
   }
   inputWrapper.appendChild(textInput);
-  if (!readonly && (element.minLength != null || element.maxLength != null)) {
-    const counter = createCharCounter(element, textInput, false);
+  if (hasCharCounter) {
+    const counter = createCharCounter(element, textInput);
     inputWrapper.appendChild(counter);
   }
   wrapper.appendChild(inputWrapper);
@@ -516,174 +807,100 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
   while (values.length < minCount) {
     values.push(element.default || "");
   }
-  const container = document.createElement("div");
-  container.className = "space-y-2";
-  wrapper.appendChild(container);
+  ensureChipStyles(document);
+  const list = document.createElement("div");
+  list.className = "fb-chip-list";
+  wrapper.appendChild(list);
   function updateIndices() {
-    const items = container.querySelectorAll(".multiple-text-item");
-    items.forEach((item, index) => {
-      const input = item.querySelector("input");
-      if (input) {
-        input.name = `${pathKey}[${index}]`;
+    const items = list.querySelectorAll(".fb-chip-input");
+    items.forEach((input, index) => {
+      input.name = `${pathKey}[${index}]`;
+      const chip = input.closest(".fb-chip");
+      const sib = chip?.nextElementSibling;
+      if (sib && sib.classList.contains("error-message")) {
+        sib.id = `error-${input.name}`;
       }
     });
   }
-  function addTextItem(value = "", index = -1) {
-    const itemWrapper = document.createElement("div");
-    itemWrapper.className = "multiple-text-item flex items-center gap-2";
-    const inputContainer = document.createElement("div");
-    inputContainer.style.cssText = "position: relative; flex: 1;";
-    const textInput = document.createElement("input");
-    textInput.type = "text";
-    textInput.style.cssText = `
-      padding: var(--fb-input-padding-y) var(--fb-input-padding-x);
-      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)"};
-      color: var(--fb-text-color);
-      font-size: var(--fb-font-size);
-      font-family: var(--fb-font-family);
-      transition: all var(--fb-transition-duration) ease-in-out;
-      width: 100%;
-      box-sizing: border-box;
-    `;
-    textInput.placeholder = element.placeholder || t("placeholderText", state);
-    textInput.value = value;
-    textInput.readOnly = readonly;
-    if (!readonly) {
-      textInput.addEventListener("focus", () => {
-        textInput.style.borderColor = "var(--fb-border-focus-color)";
-        textInput.style.outline = `var(--fb-focus-ring-width) solid var(--fb-focus-ring-color)`;
-        textInput.style.outlineOffset = "0";
-      });
-      textInput.addEventListener("blur", () => {
-        textInput.style.borderColor = "var(--fb-border-color)";
-        textInput.style.outline = "none";
-      });
-      textInput.addEventListener("mouseenter", () => {
-        if (document.activeElement !== textInput) {
-          textInput.style.borderColor = "var(--fb-border-hover-color)";
-        }
-      });
-      textInput.addEventListener("mouseleave", () => {
-        if (document.activeElement !== textInput) {
-          textInput.style.borderColor = "var(--fb-border-color)";
-        }
-      });
-    }
+  function addChip(value = "") {
+    const chip = document.createElement("div");
+    chip.className = "fb-chip";
+    const dot = document.createElement("span");
+    dot.className = "fb-chip-dot";
+    dot.setAttribute("aria-hidden", "true");
+    chip.appendChild(dot);
+    const input = document.createElement("input");
+    input.type = "text";
+    input.className = "fb-chip-input";
+    input.value = value;
+    input.placeholder = element.placeholder || t("placeholderText", state);
+    input.readOnly = readonly;
+    chip.appendChild(input);
     if (!readonly && ctx.instance) {
       const handleChange = () => {
-        const value2 = textInput.value === "" ? null : textInput.value;
-        ctx.instance.triggerOnChange(textInput.name, value2);
+        ctx.instance.triggerOnChange(
+          input.name,
+          input.value === "" ? null : input.value
+        );
       };
-      textInput.addEventListener("blur", handleChange);
-      textInput.addEventListener("input", handleChange);
-    }
-    inputContainer.appendChild(textInput);
-    if (!readonly && (element.minLength != null || element.maxLength != null)) {
-      const counter = createCharCounter(element, textInput, false);
-      inputContainer.appendChild(counter);
+      input.addEventListener("blur", handleChange);
+      input.addEventListener("input", handleChange);
     }
-    itemWrapper.appendChild(inputContainer);
-    if (index === -1) {
-      container.appendChild(itemWrapper);
-    } else {
-      container.insertBefore(itemWrapper, container.children[index]);
+    if (!readonly) {
+      const rem = document.createElement("button");
+      rem.type = "button";
+      rem.className = "fb-chip-remove";
+      rem.setAttribute("aria-label", t("removeElement", state));
+      rem.innerHTML = BIN_ICON_SVG;
+      rem.onclick = () => {
+        const chips = list.querySelectorAll(".fb-chip");
+        const idx = Array.prototype.indexOf.call(chips, chip);
+        if (idx < 0) return;
+        if (chips.length <= minCount) return;
+        values.splice(idx, 1);
+        const trailingError = chip.nextElementSibling;
+        if (trailingError && trailingError.classList.contains("error-message")) {
+          trailingError.remove();
+        }
+        chip.remove();
+        updateIndices();
+        updateAddButton();
+        updateRemoveButtons();
+      };
+      chip.appendChild(rem);
     }
+    list.appendChild(chip);
     updateIndices();
-    return itemWrapper;
+    return chip;
   }
   function updateRemoveButtons() {
     if (readonly) return;
-    const items = container.querySelectorAll(".multiple-text-item");
-    const currentCount = items.length;
-    items.forEach((item) => {
-      let removeBtn = item.querySelector(
-        ".remove-item-btn"
-      );
-      if (!removeBtn) {
-        removeBtn = document.createElement("button");
-        removeBtn.type = "button";
-        removeBtn.className = "remove-item-btn px-2 py-1 rounded";
-        removeBtn.style.cssText = `
-          color: var(--fb-error-color);
-          background-color: transparent;
-          transition: background-color var(--fb-transition-duration);
-        `;
-        removeBtn.innerHTML = "\u2715";
-        removeBtn.addEventListener("mouseenter", () => {
-          removeBtn.style.backgroundColor = "var(--fb-background-hover-color)";
-        });
-        removeBtn.addEventListener("mouseleave", () => {
-          removeBtn.style.backgroundColor = "transparent";
-        });
-        removeBtn.onclick = () => {
-          const currentIndex = Array.from(container.children).indexOf(
-            item
-          );
-          if (container.children.length > minCount) {
-            values.splice(currentIndex, 1);
-            item.remove();
-            updateIndices();
-            updateAddButton();
-            updateRemoveButtons();
-          }
-        };
-        item.appendChild(removeBtn);
-      }
-      const disabled = currentCount <= minCount;
-      removeBtn.disabled = disabled;
-      removeBtn.style.opacity = disabled ? "0.5" : "1";
-      removeBtn.style.pointerEvents = disabled ? "none" : "auto";
+    const chipCount = list.querySelectorAll(".fb-chip").length;
+    const disabled = chipCount <= minCount;
+    list.querySelectorAll(".fb-chip-remove").forEach((btn) => {
+      btn.disabled = disabled;
     });
   }
-  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 || "");
+        addChip(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));
+  values.forEach((value) => addChip(value));
   updateAddButton();
   updateRemoveButtons();
 }
@@ -706,10 +923,12 @@ function validateTextElement(element, key, context) {
           font-size: var(--fb-font-size-small);
           margin-top: 0.25rem;
         `;
-        if (input.nextSibling) {
-          input.parentNode?.insertBefore(errorElement, input.nextSibling);
+        const chipAncestor = input.closest?.(".fb-chip");
+        const anchor = chipAncestor || input;
+        if (anchor.nextSibling) {
+          anchor.parentNode?.insertBefore(errorElement, anchor.nextSibling);
         } else {
-          input.parentNode?.appendChild(errorElement);
+          anchor.parentNode?.appendChild(errorElement);
         }
       }
       errorElement.textContent = errorMessage;
@@ -758,7 +977,7 @@ function validateTextElement(element, key, context) {
     }
   };
   if (element.multiple) {
-    const inputs = scopeRoot.querySelectorAll(`[name^="${key}["]`);
+    const inputs = scopeRoot.querySelectorAll(`[name^="${key}\\["]`);
     const values = [];
     const rawValues = [];
     inputs.forEach((input, index) => {
@@ -807,12 +1026,14 @@ function updateTextField(element, fieldPath, value, context) {
       );
       return;
     }
-    const inputs = scopeRoot.querySelectorAll(`[name^="${fieldPath}["]`);
+    const inputs = scopeRoot.querySelectorAll(`[name^="${fieldPath}\\["]`);
     inputs.forEach((input, index) => {
       if (index < value.length) {
         input.value = value[index] != null ? String(value[index]) : "";
         input.classList.remove("invalid");
         input.title = "";
+        clearFieldError(input);
+        input.dispatchEvent(new Event("input", { bubbles: true }));
       }
     });
     if (value.length !== inputs.length) {
@@ -826,26 +1047,15 @@ function updateTextField(element, fieldPath, value, context) {
       input.value = value != null ? String(value) : "";
       input.classList.remove("invalid");
       input.title = "";
+      clearFieldError(input);
+      if (input instanceof HTMLTextAreaElement) {
+        input.dispatchEvent(new Event("input", { bubbles: true }));
+      }
     }
   }
 }
 
 // src/components/textarea.ts
-function applyAutoExpand(textarea) {
-  textarea.style.overflow = "hidden";
-  textarea.style.resize = "none";
-  const lineCount = (textarea.value.match(/\n/g) || []).length + 1;
-  textarea.rows = Math.max(1, lineCount);
-  const resize = () => {
-    if (!textarea.isConnected) return;
-    textarea.style.height = "0";
-    textarea.style.height = `${textarea.scrollHeight}px`;
-  };
-  textarea.addEventListener("input", resize);
-  setTimeout(() => {
-    if (textarea.isConnected) resize();
-  }, 0);
-}
 function renderTextareaElement(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
   const readonly = isElementReadonly(element, state, ctx);
@@ -876,7 +1086,7 @@ function renderTextareaElement(element, ctx, wrapper, pathKey) {
   }
   textareaWrapper.appendChild(textareaInput);
   if (!readonly && (element.minLength != null || element.maxLength != null)) {
-    const counter = createCharCounter(element, textareaInput, true);
+    const counter = createCharCounter(element, textareaInput);
     textareaWrapper.appendChild(counter);
   }
   wrapper.appendChild(textareaWrapper);
@@ -932,7 +1142,7 @@ function renderMultipleTextareaElement(element, ctx, wrapper, pathKey) {
     }
     textareaContainer.appendChild(textareaInput);
     if (!readonly && (element.minLength != null || element.maxLength != null)) {
-      const counter = createCharCounter(element, textareaInput, true);
+      const counter = createCharCounter(element, textareaInput);
       textareaContainer.appendChild(counter);
     }
     itemWrapper.appendChild(textareaContainer);
@@ -977,52 +1187,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();
@@ -1054,6 +1236,89 @@ function updateTextareaField(element, fieldPath, value, context) {
 }
 
 // src/components/number.ts
+function ensureStepperStyles(doc) {
+  const ID = "fb-number-stepper-styles";
+  if (doc.getElementById(ID)) return;
+  const style = doc.createElement("style");
+  style.id = ID;
+  style.textContent = `
+    .fb-stepper-input::-webkit-outer-spin-button,
+    .fb-stepper-input::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+    .fb-stepper-input { -moz-appearance: textfield; }
+  `;
+  doc.head.appendChild(style);
+}
+function buildStepper(input, element, readonly) {
+  ensureStepperStyles(input.ownerDocument);
+  const step = element.step ?? 1;
+  const min = element.min;
+  const max = element.max;
+  const wrap = document.createElement("div");
+  wrap.className = "fb-stepper";
+  wrap.style.cssText = `
+    display: inline-flex;
+    align-items: stretch;
+    border: var(--fb-border-width) solid var(--fb-border-color);
+    border-radius: var(--fb-border-radius);
+    overflow: hidden;
+    background: var(--fb-background-color);
+  `;
+  const makeBtn = (label, delta) => {
+    const b = document.createElement("button");
+    b.type = "button";
+    b.textContent = label;
+    b.tabIndex = -1;
+    b.style.cssText = `
+      width: 32px;
+      border: none;
+      background: transparent;
+      color: var(--fb-text-color);
+      font-size: var(--fb-font-size);
+      font-family: var(--fb-font-family);
+      cursor: ${readonly ? "default" : "pointer"};
+      user-select: none;
+    `;
+    if (readonly) {
+      b.disabled = true;
+      b.style.opacity = "0.5";
+    } else {
+      b.addEventListener("click", (e) => {
+        e.preventDefault();
+        const current = parseFloat(input.value);
+        const base = Number.isFinite(current) ? current : min ?? element.default ?? 0;
+        let next = parseFloat((base + delta * step).toPrecision(12));
+        if (min != null) next = Math.max(min, next);
+        if (max != null) next = Math.min(max, next);
+        input.value = String(next);
+        input.dispatchEvent(new Event("input", { bubbles: true }));
+        input.dispatchEvent(new Event("change", { bubbles: true }));
+      });
+    }
+    return b;
+  };
+  input.classList.add("fb-stepper-input");
+  input.style.cssText = `
+    width: 56px;
+    border: none;
+    border-left: var(--fb-border-width) solid var(--fb-border-color);
+    border-right: var(--fb-border-width) solid var(--fb-border-color);
+    padding: var(--fb-input-padding-y) 0;
+    font-size: var(--fb-font-size);
+    font-family: var(--fb-font-family);
+    text-align: center;
+    background: transparent;
+    color: var(--fb-text-color);
+    -moz-appearance: textfield;
+    box-sizing: border-box;
+  `;
+  wrap.appendChild(makeBtn("\u2212", -1));
+  wrap.appendChild(input);
+  wrap.appendChild(makeBtn("+", 1));
+  return wrap;
+}
 function createNumberRangeHint(element, input) {
   const hint = document.createElement("span");
   hint.className = "number-range-hint";
@@ -1100,14 +1365,6 @@ function renderNumberElement(element, ctx, wrapper, pathKey) {
   inputWrapper.style.cssText = "position: relative;";
   const numberInput = document.createElement("input");
   numberInput.type = "number";
-  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();
@@ -1115,6 +1372,16 @@ function renderNumberElement(element, ctx, wrapper, pathKey) {
   if (element.step !== void 0) numberInput.step = element.step.toString();
   numberInput.value = ctx.prefill[element.key] || element.default || "";
   numberInput.readOnly = readonly;
+  if (!element.stepper) {
+    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;
+    `;
+  }
   if (!readonly && ctx.instance) {
     const handleChange = () => {
       const value = numberInput.value ? parseFloat(numberInput.value) : null;
@@ -1123,10 +1390,14 @@ function renderNumberElement(element, ctx, wrapper, pathKey) {
     numberInput.addEventListener("blur", handleChange);
     numberInput.addEventListener("input", handleChange);
   }
-  inputWrapper.appendChild(numberInput);
-  if (!readonly && (element.min != null || element.max != null)) {
-    const counter = createNumberRangeHint(element, numberInput);
-    inputWrapper.appendChild(counter);
+  if (element.stepper) {
+    inputWrapper.appendChild(buildStepper(numberInput, element, readonly));
+  } else {
+    inputWrapper.appendChild(numberInput);
+    if (!readonly && (element.min != null || element.max != null)) {
+      const counter = createNumberRangeHint(element, numberInput);
+      inputWrapper.appendChild(counter);
+    }
   }
   wrapper.appendChild(inputWrapper);
 }
@@ -1228,50 +1499,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();
@@ -1406,13 +1651,14 @@ function updateNumberField(element, fieldPath, value, context) {
       return;
     }
     const inputs = scopeRoot.querySelectorAll(
-      `[name^="${fieldPath}["]`
+      `[name^="${fieldPath}\\["]`
     );
     inputs.forEach((input, index) => {
       if (index < value.length) {
         input.value = value[index] != null ? String(value[index]) : "";
         input.classList.remove("invalid");
         input.title = "";
+        clearFieldError(input);
       }
     });
     if (value.length !== inputs.length) {
@@ -1428,6 +1674,7 @@ function updateNumberField(element, fieldPath, value, context) {
       input.value = value != null ? String(value) : "";
       input.classList.remove("invalid");
       input.title = "";
+      clearFieldError(input);
     }
   }
 }
@@ -1556,51 +1803,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();
@@ -1665,7 +1886,7 @@ function validateSelectElement(element, key, context) {
   };
   if ("multiple" in element && element.multiple) {
     const inputs = scopeRoot.querySelectorAll(
-      `[name^="${key}["]`
+      `[name^="${key}\\["]`
     );
     const values = [];
     inputs.forEach((input) => {
@@ -1701,7 +1922,7 @@ function updateSelectField(element, fieldPath, value, context) {
       return;
     }
     const selects = scopeRoot.querySelectorAll(
-      `[name^="${fieldPath}["]`
+      `[name^="${fieldPath}\\["]`
     );
     selects.forEach((select, index) => {
       if (index < value.length) {
@@ -1712,6 +1933,7 @@ function updateSelectField(element, fieldPath, value, context) {
         });
         select.classList.remove("invalid");
         select.title = "";
+        clearFieldError(select);
       }
     });
     if (value.length !== selects.length) {
@@ -1731,72 +1953,147 @@ function updateSelectField(element, fieldPath, value, context) {
       });
       select.classList.remove("invalid");
       select.title = "";
+      clearFieldError(select);
     }
   }
 }
 
 // src/components/switcher.ts
-function applySelectedStyle(btn) {
-  btn.style.backgroundColor = "var(--fb-primary-color)";
-  btn.style.color = "#ffffff";
-  btn.style.borderColor = "var(--fb-primary-color)";
+function applySelectedStyle(btn, isPreset) {
+  if (isPreset) {
+    btn.style.backgroundColor = "var(--fb-primary-soft-color)";
+    btn.style.color = "var(--fb-primary-color)";
+    btn.style.borderColor = "var(--fb-primary-color)";
+  } else {
+    btn.style.backgroundColor = "var(--fb-primary-color)";
+    btn.style.color = "#ffffff";
+    btn.style.borderColor = "var(--fb-primary-color)";
+  }
 }
-function applyUnselectedStyle(btn) {
-  btn.style.backgroundColor = "transparent";
+function applyUnselectedStyle(btn, isPreset) {
+  btn.style.backgroundColor = isPreset ? "var(--fb-background-color)" : "transparent";
   btn.style.color = "var(--fb-text-color)";
   btn.style.borderColor = "var(--fb-border-color)";
 }
+function isPresetButton(btn) {
+  return btn.classList.contains("fb-switcher-preset");
+}
+function buildPresetCard(option, readonly) {
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.className = "fb-switcher-btn fb-switcher-preset";
+  btn.dataset.value = option.value;
+  btn.style.cssText = `
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 12px 7px 10px;
+    border-width: var(--fb-border-width);
+    border-style: solid;
+    border-radius: 999px;
+    background: var(--fb-background-color);
+    font-size: var(--fb-font-size);
+    font-family: var(--fb-font-family);
+    line-height: 1.25;
+    cursor: ${readonly ? "default" : "pointer"};
+    transition: background-color var(--fb-transition-duration), color var(--fb-transition-duration), border-color var(--fb-transition-duration);
+    outline: none;
+  `;
+  if (option.iconUrl) {
+    const icon = document.createElement("img");
+    icon.className = "fb-switcher-icon";
+    icon.src = option.iconUrl;
+    icon.alt = "";
+    icon.setAttribute("aria-hidden", "true");
+    icon.style.cssText = `
+      display: block;
+      flex: 0 0 auto;
+      width: 20px;
+      height: 20px;
+      object-fit: contain;
+    `;
+    btn.appendChild(icon);
+  }
+  const name = document.createElement("span");
+  name.className = "fb-switcher-name";
+  name.textContent = option.label;
+  name.style.cssText = "font-weight: 600;";
+  btn.appendChild(name);
+  if (option.subtitle) {
+    const sub = document.createElement("span");
+    sub.className = "fb-switcher-subtitle";
+    sub.textContent = option.subtitle;
+    sub.style.cssText = `
+      font-size: var(--fb-font-size-small);
+      opacity: 0.7;
+      font-variant-numeric: tabular-nums;
+    `;
+    btn.appendChild(sub);
+  }
+  return btn;
+}
 function buildSegmentedGroup(element, currentValue, hiddenInput, readonly, onChange) {
   const options = element.options || [];
+  const isPresetMode = options.some((o) => o.subtitle || o.iconUrl);
   const group = document.createElement("div");
   group.className = "fb-switcher-group";
-  group.style.cssText = `
-    display: inline-flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-  `;
+  group.style.cssText = isPresetMode ? `
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 6px;
+    ` : `
+      display: inline-flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+    `;
   const buttons = [];
   options.forEach((option, index) => {
-    const btn = document.createElement("button");
-    btn.type = "button";
-    btn.className = "fb-switcher-btn";
-    btn.dataset.value = option.value;
-    btn.textContent = option.label;
-    btn.style.cssText = `
-      padding: var(--fb-input-padding-y) var(--fb-input-padding-x);
-      font-size: var(--fb-font-size);
-      border-width: var(--fb-border-width);
-      border-style: solid;
-      cursor: ${readonly ? "default" : "pointer"};
-      transition: background-color var(--fb-transition-duration), color var(--fb-transition-duration), border-color var(--fb-transition-duration);
-      white-space: nowrap;
-      line-height: 1.25;
-      outline: none;
-    `;
-    if (options.length === 1) {
-      btn.style.borderRadius = "var(--fb-border-radius)";
-    } else if (index === 0) {
-      btn.style.borderRadius = "var(--fb-border-radius) 0 0 var(--fb-border-radius)";
-      btn.style.borderRightWidth = "0";
-    } else if (index === options.length - 1) {
-      btn.style.borderRadius = "0 var(--fb-border-radius) var(--fb-border-radius) 0";
+    let btn;
+    if (isPresetMode) {
+      btn = buildPresetCard(option, readonly);
     } else {
-      btn.style.borderRadius = "0";
-      btn.style.borderRightWidth = "0";
+      btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "fb-switcher-btn";
+      btn.dataset.value = option.value;
+      btn.textContent = option.label;
+      btn.style.cssText = `
+        padding: var(--fb-input-padding-y) var(--fb-input-padding-x);
+        font-size: var(--fb-font-size);
+        border-width: var(--fb-border-width);
+        border-style: solid;
+        cursor: ${readonly ? "default" : "pointer"};
+        transition: background-color var(--fb-transition-duration), color var(--fb-transition-duration), border-color var(--fb-transition-duration);
+        white-space: nowrap;
+        line-height: 1.25;
+        outline: none;
+      `;
+      if (options.length === 1) {
+        btn.style.borderRadius = "var(--fb-border-radius)";
+      } else if (index === 0) {
+        btn.style.borderRadius = "var(--fb-border-radius) 0 0 var(--fb-border-radius)";
+        btn.style.borderRightWidth = "0";
+      } else if (index === options.length - 1) {
+        btn.style.borderRadius = "0 var(--fb-border-radius) var(--fb-border-radius) 0";
+      } else {
+        btn.style.borderRadius = "0";
+        btn.style.borderRightWidth = "0";
+      }
     }
     if (option.value === currentValue) {
-      applySelectedStyle(btn);
+      applySelectedStyle(btn, isPresetMode);
     } else {
-      applyUnselectedStyle(btn);
+      applyUnselectedStyle(btn, isPresetMode);
     }
     if (!readonly) {
       btn.addEventListener("click", () => {
         hiddenInput.value = option.value;
         buttons.forEach((b) => {
           if (b.dataset.value === option.value) {
-            applySelectedStyle(b);
+            applySelectedStyle(b, isPresetMode);
           } else {
-            applyUnselectedStyle(b);
+            applyUnselectedStyle(b, isPresetMode);
           }
         });
         if (onChange) {
@@ -1810,7 +2107,7 @@ function buildSegmentedGroup(element, currentValue, hiddenInput, readonly, onCha
       });
       btn.addEventListener("mouseleave", () => {
         if (hiddenInput.value !== option.value) {
-          btn.style.backgroundColor = "transparent";
+          btn.style.backgroundColor = isPresetMode ? "var(--fb-background-color)" : "transparent";
         }
       });
     }
@@ -1943,53 +2240,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();
@@ -2057,7 +2326,7 @@ function validateSwitcherElement(element, key, context) {
   );
   if ("multiple" in element && element.multiple) {
     const inputs = scopeRoot.querySelectorAll(
-      `input[type="hidden"][name^="${key}["]`
+      `input[type="hidden"][name^="${key}\\["]`
     );
     const values = [];
     inputs.forEach((input) => {
@@ -2104,7 +2373,7 @@ function updateSwitcherField(element, fieldPath, value, context) {
       return;
     }
     const inputs = scopeRoot.querySelectorAll(
-      `input[type="hidden"][name^="${fieldPath}["]`
+      `input[type="hidden"][name^="${fieldPath}\\["]`
     );
     inputs.forEach((input, index) => {
       if (index < value.length) {
@@ -2113,15 +2382,17 @@ function updateSwitcherField(element, fieldPath, value, context) {
         const group = input.parentElement?.querySelector(".fb-switcher-group");
         if (group) {
           group.querySelectorAll(".fb-switcher-btn").forEach((btn) => {
+            const isPreset = isPresetButton(btn);
             if (btn.dataset.value === newVal) {
-              applySelectedStyle(btn);
+              applySelectedStyle(btn, isPreset);
             } else {
-              applyUnselectedStyle(btn);
+              applyUnselectedStyle(btn, isPreset);
             }
           });
         }
         input.classList.remove("invalid");
         input.title = "";
+        clearFieldError(input);
       }
     });
     if (value.length !== inputs.length) {
@@ -2139,16 +2410,208 @@ function updateSwitcherField(element, fieldPath, value, context) {
       const group = input.parentElement?.querySelector(".fb-switcher-group");
       if (group) {
         group.querySelectorAll(".fb-switcher-btn").forEach((btn) => {
+          const isPreset = isPresetButton(btn);
           if (btn.dataset.value === newVal) {
-            applySelectedStyle(btn);
+            applySelectedStyle(btn, isPreset);
           } else {
-            applyUnselectedStyle(btn);
+            applyUnselectedStyle(btn, isPreset);
           }
         });
       }
       input.classList.remove("invalid");
       input.title = "";
+      clearFieldError(input);
+    }
+  }
+}
+
+// src/components/boolean.ts
+var TOGGLE_W = 36;
+var TOGGLE_H = 20;
+var KNOB = 16;
+function ensureStyles(doc) {
+  const ID = "fb-boolean-styles";
+  if (doc.getElementById(ID)) return;
+  const style = doc.createElement("style");
+  style.id = ID;
+  style.textContent = `
+    .fb-toggle {
+      position: relative;
+      display: inline-block;
+      width: ${TOGGLE_W}px;
+      height: ${TOGGLE_H}px;
+      border-radius: ${TOGGLE_H}px;
+      background: var(--fb-border-color);
+      transition: background-color var(--fb-transition-duration);
+      flex-shrink: 0;
+    }
+    .fb-toggle::after {
+      content: "";
+      position: absolute;
+      top: ${(TOGGLE_H - KNOB) / 2}px;
+      left: ${(TOGGLE_H - KNOB) / 2}px;
+      width: ${KNOB}px;
+      height: ${KNOB}px;
+      border-radius: 50%;
+      background: #ffffff;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+      transition: transform var(--fb-transition-duration);
+    }
+    .fb-toggle.fb-on {
+      background: var(--fb-primary-color);
+    }
+    .fb-toggle.fb-on::after {
+      transform: translateX(${TOGGLE_W - KNOB - (TOGGLE_H - KNOB)}px);
+    }
+    .fb-toggle-row {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 14px;
+      background: var(--fb-surface-soft-color);
+      border: var(--fb-border-width) solid var(--fb-border-color);
+      border-radius: var(--fb-border-radius);
+      cursor: pointer;
+      user-select: none;
+    }
+    .fb-toggle-row[aria-disabled="true"] {
+      cursor: default;
+      opacity: 0.7;
+    }
+    .fb-toggle-row:focus-visible {
+      outline: var(--fb-focus-ring-width) solid var(--fb-focus-ring-color);
+      outline-offset: var(--fb-focus-ring-offset);
+    }
+    .fb-toggle-text { flex: 1; min-width: 0; }
+    .fb-toggle-title {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: var(--fb-font-size);
+      font-weight: 500;
+      color: var(--fb-text-color);
+      line-height: 1.3;
+    }
+    .fb-toggle-subtitle {
+      font-size: var(--fb-font-size-small);
+      color: var(--fb-text-secondary-color);
+      margin-top: 2px;
+      line-height: 1.35;
+    }
+    .fb-toggle-info {
+      flex: 0 0 14px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background: var(--fb-border-color);
+      color: #fff;
+      font-size: 10px;
+      font-weight: 700;
+      font-style: italic;
+      font-family: serif;
+      cursor: help;
     }
+  `;
+  doc.head.appendChild(style);
+}
+function parseBool(v) {
+  if (typeof v === "boolean") return v;
+  if (typeof v === "string") return v === "true" || v === "on" || v === "1";
+  return false;
+}
+function renderBooleanElement(element, ctx, wrapper, pathKey) {
+  ensureStyles(document);
+  const state = ctx.state;
+  const readonly = isElementReadonly(element, state, ctx);
+  const prefillRaw = ctx.prefill[element.key];
+  const initial = prefillRaw !== void 0 ? parseBool(prefillRaw) : parseBool(element.default);
+  const hiddenInput = document.createElement("input");
+  hiddenInput.type = "hidden";
+  hiddenInput.name = pathKey;
+  hiddenInput.value = initial ? "true" : "false";
+  const row = document.createElement("div");
+  row.className = "fb-toggle-row";
+  row.setAttribute("role", "switch");
+  row.setAttribute("aria-checked", initial ? "true" : "false");
+  if (readonly) {
+    row.setAttribute("aria-disabled", "true");
+  } else {
+    row.tabIndex = 0;
+  }
+  const pill = document.createElement("span");
+  pill.className = "fb-toggle" + (initial ? " fb-on" : "");
+  pill.setAttribute("aria-hidden", "true");
+  row.appendChild(pill);
+  const textBlock = document.createElement("div");
+  textBlock.className = "fb-toggle-text";
+  const titleEl = document.createElement("div");
+  titleEl.className = "fb-toggle-title";
+  titleEl.appendChild(document.createTextNode(element.label ?? ""));
+  if (element.description) {
+    const info = document.createElement("span");
+    info.className = "fb-toggle-info";
+    info.textContent = "i";
+    info.title = element.description;
+    titleEl.appendChild(info);
+  }
+  textBlock.appendChild(titleEl);
+  if (element.hint) {
+    const subtitle = document.createElement("div");
+    subtitle.className = "fb-toggle-subtitle";
+    subtitle.textContent = element.hint;
+    textBlock.appendChild(subtitle);
+  }
+  row.appendChild(textBlock);
+  if (!readonly) {
+    const toggle = () => {
+      const next = hiddenInput.value !== "true";
+      hiddenInput.value = next ? "true" : "false";
+      pill.classList.toggle("fb-on", next);
+      row.setAttribute("aria-checked", next ? "true" : "false");
+      if (ctx.instance) ctx.instance.triggerOnChange(pathKey, next);
+    };
+    row.addEventListener("click", (e) => {
+      if (e.target?.classList.contains("fb-toggle-info")) {
+        return;
+      }
+      toggle();
+    });
+    row.addEventListener("keydown", (e) => {
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        toggle();
+      }
+    });
+  }
+  wrapper.appendChild(hiddenInput);
+  wrapper.appendChild(row);
+}
+function validateBooleanElement(element, key, context) {
+  const { scopeRoot } = context;
+  const input = scopeRoot.querySelector(
+    `input[type="hidden"][name="${key}"]`
+  );
+  const raw = input?.value ?? "";
+  const value = parseBool(raw);
+  const errors = [];
+  return { value, errors };
+}
+function updateBooleanField(_element, fieldPath, value, context) {
+  const { scopeRoot } = context;
+  const input = scopeRoot.querySelector(
+    `input[type="hidden"][name="${fieldPath}"]`
+  );
+  if (!input) return;
+  const bool = parseBool(value);
+  input.value = bool ? "true" : "false";
+  const row = input.parentElement?.querySelector(".fb-toggle-row");
+  if (row) {
+    row.setAttribute("aria-checked", bool ? "true" : "false");
+    const pill = row.querySelector(".fb-toggle");
+    if (pill) pill.classList.toggle("fb-on", bool);
   }
 }
 
@@ -2252,14 +2715,20 @@ function ensureFileStyles() {
 }
 
 /* \u2500\u2500\u2500 Wide single-file add tile (empty state) \u2500\u2500\u2500 */
+/* Flex-wraps: side-by-side when wide enough, stacks upload/library
+   vertically when narrow (e.g. inside a 50/50 container column). */
 .fb-wide-tile {
   width: 100%;
+  box-sizing: border-box;
   border-radius: 0.75rem;
   border: 1px dashed #60a5fa;
   background: rgba(239,246,255,0.5);
   display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  gap: 0;
   overflow: hidden;
-  height: 180px;
+  min-height: 180px;
   transition: border-color 150ms, background 150ms, box-shadow 150ms;
   cursor: pointer;
 }
@@ -2273,9 +2742,12 @@ function ensureFileStyles() {
   box-shadow: 0 0 0 4px rgba(191,219,254,0.7);
 }
 
-/* Upload zone inside wide tile */
+/* Upload zone inside wide tile.
+   flex: 1 1 220px \u2014 wants at least 220px; if the container can't fit
+   upload + library on one row (~220 + 176), library wraps below. */
 .fb-wide-tile-upload {
-  flex: 1;
+  flex: 1 1 220px;
+  min-height: 140px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -2288,24 +2760,21 @@ function ensureFileStyles() {
   background: transparent;
   border: none;
   font-family: inherit;
+  /* Dashed separator from library: right side when in a row, bottom when
+     wrapped (the line then sits between the two stacked cards). */
+  border-right: 1px dashed rgba(96,165,250,0.5);
 }
 .fb-wide-tile-upload:hover {
   background: rgba(191,219,254,0.25);
 }
-
-/* 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;
-}
-
-/* Library zone inside wide tile */
+/* Library zone inside wide tile.
+   flex: 0 0 176px \u2014 fixed 176px, never grows. Upload fills the rest in
+   row layout. When the tile wraps to two rows on narrow containers,
+   library stays 176px wide on its own row (left-aligned), preserving the
+   visual hierarchy "upload > library" in both layouts. */
 .fb-wide-tile-library {
-  width: 176px;
-  flex-shrink: 0;
+  flex: 0 0 176px;
+  min-height: 120px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -2322,6 +2791,10 @@ function ensureFileStyles() {
 .fb-wide-tile-library:hover {
   background: rgba(191,219,254,0.25);
 }
+/* Narrow-tile mode lives in a separate <style> tag (see below) \u2014 the
+   @container rule is appended only when the runtime actually supports
+   container queries, so jsdom (which doesn't) never sees it and stays
+   quiet in test logs. */
 
 /* \u2500\u2500\u2500 Multi-file outer grid container \u2500\u2500\u2500 */
 .fb-multi-outer {
@@ -2700,6 +3173,39 @@ function ensureFileStyles() {
 }
 `;
   document.head.appendChild(style);
+  if (typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("container-type", "inline-size")) {
+    const cq = document.createElement("style");
+    cq.setAttribute("data-fb-file-styles-cq", "true");
+    cq.textContent = `
+.fb-wide-tile { container-type: inline-size; }
+@container (max-width: 408px) {
+  .fb-wide-tile-upload {
+    border-right: none;
+    border-bottom: 1px dashed rgba(96,165,250,0.5);
+  }
+  .fb-wide-tile-library {
+    flex: 1 0 100%;
+    min-height: 0;
+    flex-direction: row;
+    gap: 6px;
+    padding: 8px 12px;
+    font-size: 12px;
+  }
+  .fb-wide-tile-library .fb-wide-tile-library-icon {
+    width: 16px;
+    height: 16px;
+  }
+  .fb-wide-tile-library .fb-wide-tile-library-label {
+    font-size: 12px;
+    font-weight: 500;
+  }
+  .fb-wide-tile-library .fb-wide-tile-library-hint {
+    display: none;
+  }
+}
+`;
+    document.head.appendChild(cq);
+  }
 }
 
 // src/components/file/dom.ts
@@ -2857,24 +3363,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 +3405,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 +3487,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 +3541,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 +3571,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 +3626,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 +3770,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 +3803,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 +3944,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 +3978,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 +4012,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 +4062,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 +4176,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 +4191,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 +4221,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 +4239,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 +4275,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 +4304,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 +4349,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 +4418,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 +4468,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";
@@ -3934,21 +4551,21 @@ function buildWideTile(state, hasLibrary, onUploadClick, onLibraryClick, isDragO
   };
   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.className = "fb-wide-tile-library-icon";
     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.className = "fb-wide-tile-library-label";
     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.className = "fb-wide-tile-library-hint";
     libHint.style.cssText = "font-size:11px;opacity:0.75;text-align:center;";
     libHint.textContent = t("libraryHint", state);
     libBtn.appendChild(libHint);
@@ -4025,7 +4642,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 +4724,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 +4972,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 +4984,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 +4998,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 +5020,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 +5175,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 +5360,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 +5714,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();
@@ -5186,7 +5807,7 @@ function validateColourElement(element, key, context) {
   };
   if (element.multiple) {
     const hexInputs = scopeRoot.querySelectorAll(
-      `[name^="${key}["].colour-hex-input`
+      `[name^="${key}\\["].colour-hex-input`
     );
     const values = [];
     hexInputs.forEach((input, index) => {
@@ -5235,7 +5856,7 @@ function updateColourField(element, fieldPath, value, context) {
       return;
     }
     const hexInputs = scopeRoot.querySelectorAll(
-      `[name^="${fieldPath}["].colour-hex-input`
+      `[name^="${fieldPath}\\["].colour-hex-input`
     );
     hexInputs.forEach((hexInput, index) => {
       if (index < value.length) {
@@ -5243,6 +5864,7 @@ function updateColourField(element, fieldPath, value, context) {
         hexInput.value = normalized;
         hexInput.classList.remove("invalid");
         hexInput.title = "";
+        clearFieldError(hexInput);
         const wrapper = hexInput.closest(".colour-picker-wrapper");
         if (wrapper) {
           const swatch = wrapper.querySelector(".colour-swatch");
@@ -5272,6 +5894,7 @@ function updateColourField(element, fieldPath, value, context) {
       hexInput.value = normalized;
       hexInput.classList.remove("invalid");
       hexInput.title = "";
+      clearFieldError(hexInput);
       const wrapper = hexInput.closest(".colour-picker-wrapper");
       if (wrapper) {
         const swatch = wrapper.querySelector(".colour-swatch");
@@ -5547,50 +6170,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();
@@ -5700,7 +6297,7 @@ function validateSliderElement(element, key, context) {
   };
   if (element.multiple) {
     const sliders = scopeRoot.querySelectorAll(
-      `input[type="range"][name^="${key}["]`
+      `input[type="range"][name^="${key}\\["]`
     );
     const values = [];
     sliders.forEach((slider, index) => {
@@ -5751,7 +6348,7 @@ function updateSliderField(element, fieldPath, value, context) {
       return;
     }
     const sliders = scopeRoot.querySelectorAll(
-      `input[type="range"][name^="${fieldPath}["]`
+      `input[type="range"][name^="${fieldPath}\\["]`
     );
     sliders.forEach((slider, index) => {
       if (index < value.length && value[index] !== null) {
@@ -5779,6 +6376,7 @@ function updateSliderField(element, fieldPath, value, context) {
         }
         slider.classList.remove("invalid");
         slider.title = "";
+        clearFieldError(slider);
       }
     });
     if (value.length !== sliders.length) {
@@ -5815,6 +6413,7 @@ function updateSliderField(element, fieldPath, value, context) {
       }
       slider.classList.remove("invalid");
       slider.title = "";
+      clearFieldError(slider);
     }
   }
 }
@@ -5937,21 +6536,50 @@ function getChildWrapperClass(isSlides, columns) {
   const cols = columns || 1;
   return cols === 1 ? "space-y-2" : `grid grid-cols-${cols} gap-2`;
 }
+function mountRemoveButton(item, onRemove, state) {
+  const rem = document.createElement("button");
+  rem.type = "button";
+  rem.className = "fb-item-remove";
+  rem.setAttribute("aria-label", t("removeElement", state));
+  rem.style.cssText = `
+    width: 24px;
+    height: 24px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    border-radius: 4px;
+    cursor: pointer;
+    flex-shrink: 0;
+  `;
+  rem.innerHTML = BIN_ICON_SVG;
+  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) {
     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;`;
+    itemsWrap.style.cssText = `display:grid;grid-template-columns:${gridTemplateColumns};gap:var(--fb-slides-gap, 14px);align-items:start;`;
   } else {
     itemsWrap.className = "space-y-2";
   }
@@ -5966,92 +6594,67 @@ 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}]`);
+    if (isSlides) {
+      item.setAttribute("data-fb-slide-card", "");
+    }
+    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), state);
+    }
+    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();
@@ -6072,6 +6675,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       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}]`);
+      if (isSlides) {
+        item.setAttribute("data-fb-slide-card", "");
+      }
       const childWrapper = document.createElement("div");
       if (isSlides) {
         childWrapper.className = "space-y-2";
@@ -6095,24 +6701,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), ctx.state);
       }
       itemsWrap.appendChild(item);
     });
@@ -6132,6 +6721,9 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       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}]`);
+      if (isSlides) {
+        item.setAttribute("data-fb-slide-card", "");
+      }
       const childWrapper = document.createElement("div");
       if (isSlides) {
         childWrapper.className = "space-y-2";
@@ -6156,41 +6748,47 @@ 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)";
+      mountRemoveButton(
+        item,
+        () => {
+          if (countItems() > min) {
+            handleRemoveItem(item);
+          }
+        },
+        ctx.state
+      );
+      itemsWrap.appendChild(item);
+    }
+  }
+  containerWrap.appendChild(itemsWrap);
+  if (!containerIsReadonly) {
+    if (isSlides) {
+      itemsWrap.style.alignItems = "stretch";
+      const handle = createSlideAddTile(handleAddItem, {
+        label: element.addLabel
       });
-      rem.addEventListener("mouseleave", () => {
-        rem.style.backgroundColor = "transparent";
+      slideAddTile = handle.tile;
+      slideAddUpdate = handle.update;
+      mountCounterInLabel(wrapper, handle.counter);
+      itemsWrap.appendChild(handle.tile);
+    } else {
+      const handle = createAddItemRow("container", handleAddItem, {
+        label: element.addLabel
       });
-      rem.onclick = () => {
-        if (countItems() > min) {
-          handleRemoveItem(item);
-        }
-      };
-      item.style.position = "relative";
-      item.appendChild(rem);
-      itemsWrap.appendChild(item);
+      pillAddUpdate = handle.update;
+      mountCounterInLabel(wrapper, handle.counter);
+      containerWrap.appendChild(handle.row);
     }
   }
-  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);
-  }
   updateAddButton();
   wrapper.appendChild(containerWrap);
+  if (slideAddTile) {
+    if (typeof requestAnimationFrame === "function") {
+      requestAnimationFrame(syncSlideTileSize);
+    } else {
+      syncSlideTileSize();
+    }
+  }
 }
 var validateElementFunc = null;
 function setValidateElement(fn) {
@@ -8783,7 +9381,7 @@ function renderEditMode(element, ctx, wrapper, pathKey, initialValue) {
   if (element.minLength != null || element.maxLength != null) {
     const counterRow = document.createElement("div");
     counterRow.style.cssText = "position: relative; padding: 2px 10px 4px; text-align: right;";
-    const counter = createCharCounter(element, textarea, false);
+    const counter = createCharCounter(element, textarea);
     counter.style.cssText = `
       position: static;
       display: inline-block;
@@ -9085,10 +9683,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 +9846,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))) {
@@ -9316,6 +9906,117 @@ function validateMarkdown(_element, _key, _context) {
 function updateMarkdown(_element, _fieldPath, _value, _context) {
 }
 
+// src/components/registry.ts
+function validateHiddenElement(element, key, context) {
+  const { scopeRoot } = context;
+  const input = scopeRoot.querySelector(
+    `input[type="hidden"][data-hidden-field="true"][name="${key}"]`
+  );
+  const raw = input?.value ?? "";
+  if (raw === "") {
+    const defaultVal = "default" in element ? element.default : null;
+    return { value: defaultVal !== void 0 ? defaultVal : null, errors: [] };
+  }
+  return { value: deserializeHiddenValue(raw), errors: [] };
+}
+function updateHiddenField(_element, fieldPath, value, context) {
+  const { scopeRoot } = context;
+  const input = scopeRoot.querySelector(
+    `input[type="hidden"][data-hidden-field="true"][name="${fieldPath}"]`
+  );
+  if (!input) return;
+  input.value = serializeHiddenValue(value);
+}
+var componentRegistry = {
+  text: {
+    validate: validateTextElement,
+    update: updateTextField
+  },
+  textarea: {
+    validate: validateTextareaElement,
+    update: updateTextareaField
+  },
+  number: {
+    validate: validateNumberElement,
+    update: updateNumberField
+  },
+  select: {
+    validate: validateSelectElement,
+    update: updateSelectField
+  },
+  switcher: {
+    validate: validateSwitcherElement,
+    update: updateSwitcherField
+  },
+  boolean: {
+    validate: validateBooleanElement,
+    update: updateBooleanField,
+    ownsLabel: true
+  },
+  file: {
+    validate: validateFileElement,
+    update: updateFileField
+  },
+  files: {
+    // Legacy type - delegates to file
+    validate: validateFileElement,
+    update: updateFileField
+  },
+  colour: {
+    validate: validateColourElement,
+    update: updateColourField
+  },
+  slider: {
+    validate: validateSliderElement,
+    update: updateSliderField
+  },
+  container: {
+    validate: validateContainerElement,
+    update: updateContainerField
+  },
+  group: {
+    // Deprecated type - delegates to container
+    validate: validateGroupElement,
+    update: updateGroupField
+  },
+  table: {
+    validate: validateTableElement,
+    update: updateTableField
+  },
+  richinput: {
+    validate: validateRichInputElement,
+    update: updateRichInputField
+  },
+  hidden: {
+    // Legacy type: `type: "hidden"` — reads/writes DOM <input type="hidden"> element
+    validate: validateHiddenElement,
+    update: updateHiddenField
+  },
+  markdown: {
+    // Display-only element — no value, no errors, skip from form data
+    validate: validateMarkdown,
+    update: updateMarkdown
+  }
+};
+function getComponentOperations(elementType) {
+  return componentRegistry[elementType] || null;
+}
+function validateElementWithComponent(element, key, context) {
+  const ops = getComponentOperations(element.type);
+  if (ops && ops.validate) {
+    return ops.validate(element, key, context);
+  }
+  return null;
+}
+function updateElementWithComponent(element, fieldPath, value, context) {
+  const ops = getComponentOperations(element.type);
+  if (ops && ops.update) {
+    ops.update(element, fieldPath, value, context);
+    return true;
+  }
+  return false;
+}
+
 // src/components/index.ts
 function showTooltip(tooltipId, button) {
   const tooltip = document.getElementById(tooltipId);
@@ -9577,6 +10278,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) {
@@ -9623,6 +10325,9 @@ function dispatchToRenderer(element, ctx, wrapper, pathKey) {
         renderSwitcherElement(element, ctx, wrapper, pathKey);
       }
       break;
+    case "boolean":
+      renderBooleanElement(element, ctx, wrapper, pathKey);
+      break;
     case "file":
       if (isMultiple) {
         renderMultipleFileElement(element, ctx, wrapper, pathKey);
@@ -9701,8 +10406,11 @@ function renderElement2(element, ctx) {
   const wrapper = document.createElement("div");
   wrapper.className = "mb-2 fb-field-wrapper";
   wrapper.setAttribute("data-field-key", element.key);
-  const label = createLabelContainer(element);
-  wrapper.appendChild(label);
+  const ops = getComponentOperations(element.type);
+  if (!ops?.ownsLabel) {
+    const label = createLabelContainer(element);
+    wrapper.appendChild(label);
+  }
   const pathKey = pathJoin(ctx.path, element.key);
   dispatchToRenderer(element, ctx, wrapper, pathKey);
   if (initiallyDisabled) {
@@ -9794,6 +10502,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 +10578,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",
@@ -9933,28 +10643,52 @@ var defaultTheme = {
   // blue-500
   primaryHoverColor: "#2563eb",
   // blue-600
+  primarySoftColor: "#dbeafe",
+  // blue-100
+  primarySoftHoverColor: "#bfdbfe",
+  // blue-200
   errorColor: "#ef4444",
   // red-500
   errorHoverColor: "#dc2626",
   // red-600
   successColor: "#10b981",
   // green-500
+  accentColor: "#f59e0b",
+  // amber-500
+  accentSoftColor: "#fef3c7",
+  // amber-100
+  accentBorderColor: "#fde68a",
+  // amber-200
+  accentTextColor: "#92400e",
+  // amber-800
   borderColor: "#d1d5db",
   // gray-300
   borderHoverColor: "#9ca3af",
   // gray-400
   borderFocusColor: "#3b82f6",
   // blue-500
+  borderStrongColor: "#9ca3af",
+  // gray-400
   backgroundColor: "#ffffff",
   // white
   backgroundHoverColor: "#f9fafb",
   // gray-50
   backgroundReadonlyColor: "#f3f4f6",
   // gray-100
+  pageBackgroundColor: "#f9fafb",
+  // gray-50
+  surfaceSoftColor: "#eff6ff",
+  // blue-50
+  surfaceTintColor: "#f8fafc",
+  // slate-50
   textColor: "#1f2937",
   // gray-800
   textSecondaryColor: "#6b7280",
   // gray-500
+  textMutedColor: "#9ca3af",
+  // gray-400
+  textFaintColor: "#cbd5e1",
+  // slate-300
   textPlaceholderColor: "#9ca3af",
   // gray-400
   textDisabledColor: "#d1d5db",
@@ -9997,6 +10731,12 @@ var defaultTheme = {
   // 4px (compact density v2)
   borderRadius: "0.5rem",
   // rounded-lg (8px)
+  borderRadiusSmall: "0.375rem",
+  // 6px
+  borderRadiusLarge: "0.75rem",
+  // 12px
+  borderRadiusXLarge: "1rem",
+  // 16px
   borderWidth: "1px",
   // Typography
   fontSize: "0.875rem",
@@ -10008,13 +10748,31 @@ var defaultTheme = {
   fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
   fontWeightNormal: "400",
   fontWeightMedium: "500",
+  lineHeight: "1.5",
+  // Shadows
+  shadowCard: "0 1px 2px rgba(15,23,42,.04), 0 1px 0 rgba(15,23,42,.02)",
+  shadowPopover: "0 12px 32px -12px rgba(15,23,42,.18), 0 4px 12px -6px rgba(15,23,42,.08)",
   // Focus ring
   focusRingWidth: "2px",
   focusRingColor: "#3b82f6",
   // blue-500
   focusRingOpacity: "0.5",
   // Transitions
-  transitionDuration: "200ms"
+  transitionDuration: "200ms",
+  // Slide-card defaults — flat-white to match every other item card. The
+  // Picaz theme overrides this with a gradient + shadow to lift the slides.
+  slideCardBg: "#ffffff",
+  slideCardShadow: "0 1px 2px rgba(15,23,42,.04), 0 1px 0 rgba(15,23,42,.02)",
+  slideCardRadius: "0.5rem",
+  // matches borderRadius
+  slideCardMinHeight: "0",
+  slideCardPadding: "12px",
+  // Section-label defaults — same look as the regular field label. Themes
+  // that want the "ПРЕИМУЩЕСТВА" caps style override these three vars.
+  labelSectionFontSize: "0.875rem",
+  // matches fontSize
+  labelSectionLetterSpacing: "normal",
+  labelSectionTextTransform: "none"
 };
 function generateCSSVariables(theme) {
   const mergedTheme = { ...defaultTheme, ...theme };
@@ -10026,6 +10784,7 @@ function generateCSSVariables(theme) {
   return cssVars.join("\n");
 }
 function injectThemeVariables(container, theme) {
+  ensureThemingHooks(container.ownerDocument || document);
   const cssVariables = generateCSSVariables(theme);
   let styleTag = container.querySelector(
     "style[data-fb-theme]"
@@ -10088,137 +10847,50 @@ var exampleThemes = {
     fontSize: "16px",
     fontSizeSmall: "14px",
     fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif'
-  }
-};
-
-// 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;
-  const input = scopeRoot.querySelector(
-    `input[type="hidden"][data-hidden-field="true"][name="${key}"]`
-  );
-  const raw = input?.value ?? "";
-  if (raw === "") {
-    const defaultVal = "default" in element ? element.default : null;
-    return { value: defaultVal !== void 0 ? defaultVal : null, errors: [] };
-  }
-  return { value: deserializeHiddenValue(raw), errors: [] };
-}
-function updateHiddenField(_element, fieldPath, value, context) {
-  const { scopeRoot } = context;
-  const input = scopeRoot.querySelector(
-    `input[type="hidden"][data-hidden-field="true"][name="${fieldPath}"]`
-  );
-  if (!input) return;
-  input.value = serializeHiddenValue(value);
-}
-var componentRegistry = {
-  text: {
-    validate: validateTextElement,
-    update: updateTextField
-  },
-  textarea: {
-    validate: validateTextareaElement,
-    update: updateTextareaField
-  },
-  number: {
-    validate: validateNumberElement,
-    update: updateNumberField
-  },
-  select: {
-    validate: validateSelectElement,
-    update: updateSelectField
-  },
-  switcher: {
-    validate: validateSwitcherElement,
-    update: updateSwitcherField
-  },
-  file: {
-    validate: validateFileElement,
-    update: updateFileField
-  },
-  files: {
-    // Legacy type - delegates to file
-    validate: validateFileElement,
-    update: updateFileField
-  },
-  colour: {
-    validate: validateColourElement,
-    update: updateColourField
-  },
-  slider: {
-    validate: validateSliderElement,
-    update: updateSliderField
-  },
-  container: {
-    validate: validateContainerElement,
-    update: updateContainerField
-  },
-  group: {
-    // Deprecated type - delegates to container
-    validate: validateGroupElement,
-    update: updateGroupField
-  },
-  table: {
-    validate: validateTableElement,
-    update: updateTableField
-  },
-  richinput: {
-    validate: validateRichInputElement,
-    update: updateRichInputField
-  },
-  hidden: {
-    // Legacy type: `type: "hidden"` — reads/writes DOM <input type="hidden"> element
-    validate: validateHiddenElement,
-    update: updateHiddenField
   },
-  markdown: {
-    // Display-only element — no value, no errors, skip from form data
-    validate: validateMarkdown,
-    update: updateMarkdown
+  // Picaz wizard design tokens — derived from the Picaz Wizard mockups.
+  // Pairs with the host-side .card / .section-num / .lede chrome that wraps the form.
+  picaz: {
+    ...defaultTheme,
+    primaryColor: "#2f5bea",
+    primaryHoverColor: "#2349c8",
+    primarySoftColor: "#eaf0ff",
+    primarySoftHoverColor: "#d6e0ff",
+    errorColor: "#ef4444",
+    successColor: "#16a34a",
+    accentColor: "#ffb020",
+    accentSoftColor: "#fff7e6",
+    accentBorderColor: "#fde7b5",
+    accentTextColor: "#92400e",
+    borderColor: "#e3e8f0",
+    borderHoverColor: "#cdd6e3",
+    borderFocusColor: "#2f5bea",
+    borderStrongColor: "#cdd6e3",
+    backgroundColor: "#ffffff",
+    backgroundHoverColor: "#f3f7ff",
+    pageBackgroundColor: "#f6f8fb",
+    surfaceSoftColor: "#eef4ff",
+    surfaceTintColor: "#f3f7ff",
+    textColor: "#0f172a",
+    textSecondaryColor: "#334155",
+    textMutedColor: "#64748b",
+    textFaintColor: "#94a3b8",
+    textPlaceholderColor: "#94a3b8",
+    buttonBgColor: "#2f5bea",
+    buttonHoverBgColor: "#2349c8",
+    fileUploadBgColor: "#fafcff",
+    fileUploadBorderColor: "#cdd6e3",
+    fileUploadHoverBorderColor: "#2f5bea",
+    borderRadius: "12px",
+    borderRadiusSmall: "8px",
+    borderRadiusLarge: "16px",
+    borderRadiusXLarge: "22px",
+    fontFamily: '"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
+    shadowCard: "0 1px 2px rgba(15,23,42,.04), 0 1px 0 rgba(15,23,42,.02)",
+    shadowPopover: "0 12px 32px -12px rgba(15,23,42,.18), 0 4px 12px -6px rgba(15,23,42,.08)",
+    focusRingColor: "#2f5bea"
   }
 };
-function getComponentOperations(elementType) {
-  return componentRegistry[elementType] || null;
-}
-function validateElementWithComponent(element, key, context) {
-  const ops = getComponentOperations(element.type);
-  if (ops && ops.validate) {
-    return ops.validate(element, key, context);
-  }
-  return null;
-}
-function updateElementWithComponent(element, fieldPath, value, context) {
-  const ops = getComponentOperations(element.type);
-  if (ops && ops.update) {
-    ops.update(element, fieldPath, value, context);
-    return true;
-  }
-  return false;
-}
 
 // src/instance/FormBuilderInstance.ts
 var FormBuilderInstance = class {
@@ -10343,26 +11015,37 @@ var FormBuilderInstance = class {
     }
   }
   /**
-   * Find the DOM element corresponding to a field path (instance-scoped)
+   * Find the DOM element corresponding to a field path (instance-scoped).
+   *
+   * Strategy:
+   *  1. Try a `[name="…"]` lookup first — works for any field that renders
+   *     an input/hidden with the path as its name, in either mode. Some
+   *     readonly renderers still emit a hidden input (boolean, switcher),
+   *     so this path must run regardless of `state.config.readonly`. A
+   *     prior version gated this on edit mode only, which made
+   *     `updateField` / `setFormData` silently miss readonly boolean
+   *     fields whose component also opts out of the standard label row
+   *     (`ownsLabel: true`).
+   *  2. If no input matched, fall back to locating the field wrapper by
+   *     its visible label text — needed for readonly previews that don't
+   *     emit any `name=` attribute (e.g. file/markdown previews).
    */
   findFormElementByFieldPath(fieldPath) {
     if (!this.state.formRoot) return null;
-    if (!this.state.config.readonly) {
-      let element = this.state.formRoot.querySelector(
-        `[name="${fieldPath}"]`
+    let element = this.state.formRoot.querySelector(
+      `[name="${fieldPath}"]`
+    );
+    if (element) return element;
+    const variations = [
+      fieldPath,
+      fieldPath.replace(/\[(\d+)\]/g, "[$1]"),
+      fieldPath.replace(/\./g, "[") + "]".repeat((fieldPath.match(/\./g) || []).length)
+    ];
+    for (const variation of variations) {
+      element = this.state.formRoot.querySelector(
+        `[name="${variation}"]`
       );
       if (element) return element;
-      const variations = [
-        fieldPath,
-        fieldPath.replace(/\[(\d+)\]/g, "[$1]"),
-        fieldPath.replace(/\./g, "[") + "]".repeat((fieldPath.match(/\./g) || []).length)
-      ];
-      for (const variation of variations) {
-        element = this.state.formRoot.querySelector(
-          `[name="${variation}"]`
-        );
-        if (element) return element;
-      }
     }
     const schemaElement = this.findSchemaElement(fieldPath);
     if (!schemaElement) return null;