@dmitryvim/form-builder 0.2.34 → 0.3.1

package/dist/esm/index.js

@@ -399,6 +399,113 @@ function deepEqual(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);
+}
+/* Prefill-suggestion pills rendered by createPrefillHints. Outline pill at rest,
+   soft-fill on hover, solid-fill when selected. All colors flow from the active
+   theme \u2014 consumers don't need to ship their own CSS. */
+.fb-prefill-hint {
+  padding: 0.25rem 0.625rem;
+  border: var(--fb-border-width) solid var(--fb-primary-color);
+  border-radius: 9999px;
+  background: var(--fb-background-color);
+  color: var(--fb-primary-color);
+  font-size: var(--fb-font-size-small);
+  font-weight: var(--fb-font-weight-medium);
+  font-family: var(--fb-font-family);
+  cursor: pointer;
+  transition: background-color var(--fb-transition-duration), border-color var(--fb-transition-duration), color var(--fb-transition-duration);
+}
+.fb-prefill-hint:hover {
+  background: var(--fb-primary-soft-color);
+  border-color: var(--fb-primary-hover-color);
+  color: var(--fb-primary-hover-color);
+}
+.fb-prefill-hint:focus-visible {
+  outline: var(--fb-focus-ring-width) solid var(--fb-focus-ring-color);
+  outline-offset: 2px;
+}
+.fb-prefill-hint[aria-pressed="true"],
+.fb-prefill-hint.active {
+  background: var(--fb-primary-color);
+  color: #ffffff;
+  border-color: var(--fb-primary-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";
+    const cs = getComputedStyle(textarea);
+    const borderY = parseFloat(cs.borderTopWidth || "0") + parseFloat(cs.borderBottomWidth || "0");
+    textarea.style.height = `${textarea.scrollHeight + borderY}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]"
@@ -560,46 +667,94 @@ function applyActionButtonStyles(button, isFormLevel = false) {
 }
 
 // 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);
@@ -612,26 +767,32 @@ function renderTextElement(element, ctx, wrapper, pathKey) {
   const inputWrapper = document.createElement("div");
   inputWrapper.style.cssText = "position: relative;";
   const hasCharCounter = !readonly && (element.minLength != null || element.maxLength != null);
-  const textInput = document.createElement("input");
-  textInput.type = "text";
+  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);
-    ${hasCharCounter ? "padding-right: 60px;" : ""}
     border: var(--fb-border-width) solid var(--fb-border-color);
     border-radius: var(--fb-border-radius);
     background-color: ${readonly ? "var(--fb-background-readonly-color)" : "var(--fb-background-color)"};
     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)";
@@ -663,7 +824,7 @@ function renderTextElement(element, ctx, wrapper, pathKey) {
   }
   inputWrapper.appendChild(textInput);
   if (hasCharCounter) {
-    const counter = createCharCounter(element, textInput, false);
+    const counter = createCharCounter(element, textInput);
     inputWrapper.appendChild(counter);
   }
   wrapper.appendChild(inputWrapper);
@@ -673,132 +834,83 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
   const readonly = isElementReadonly(element, state, ctx);
   const prefillValues = ctx.prefill[element.key] || [];
   const values = Array.isArray(prefillValues) ? [...prefillValues] : [];
-  const hasCharCounter = !readonly && (element.minLength != null || element.maxLength != null);
   const minCount = element.minCount ?? 1;
   const maxCount = element.maxCount ?? Infinity;
   while (values.length < minCount) {
     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);
-      ${hasCharCounter ? "padding-right: 60px;" : ""}
-      border: var(--fb-border-width) solid var(--fb-border-color);
-      border-radius: var(--fb-border-radius);
-      background-color: ${readonly ? "var(--fb-background-readonly-color)" : "var(--fb-background-color)"};
-      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 (hasCharCounter) {
-      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 addUpdate = null;
@@ -807,7 +919,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
       "text",
       () => {
         values.push(element.default || "");
-        addTextItem(element.default || "");
+        addChip(element.default || "");
         updateAddButton();
         updateRemoveButtons();
       },
@@ -820,7 +932,7 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
   function updateAddButton() {
     if (addUpdate) addUpdate(values.length, maxCount);
   }
-  values.forEach((value) => addTextItem(value));
+  values.forEach((value) => addChip(value));
   updateAddButton();
   updateRemoveButtons();
 }
@@ -843,10 +955,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;
@@ -895,7 +1009,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) => {
@@ -944,12 +1058,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) {
@@ -963,26 +1079,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);
@@ -1013,7 +1118,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);
@@ -1069,7 +1174,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);
@@ -1163,6 +1268,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";
@@ -1209,14 +1397,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();
@@ -1224,6 +1404,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;
@@ -1232,10 +1422,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);
 }
@@ -1489,13 +1683,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) {
@@ -1511,6 +1706,7 @@ function updateNumberField(element, fieldPath, value, context) {
       input.value = value != null ? String(value) : "";
       input.classList.remove("invalid");
       input.title = "";
+      clearFieldError(input);
     }
   }
 }
@@ -1722,7 +1918,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) => {
@@ -1758,7 +1954,7 @@ function updateSelectField(element, fieldPath, value, context) {
       return;
     }
     const selects = scopeRoot.querySelectorAll(
-      `[name^="${fieldPath}["]`
+      `[name^="${fieldPath}\\["]`
     );
     selects.forEach((select, index) => {
       if (index < value.length) {
@@ -1769,6 +1965,7 @@ function updateSelectField(element, fieldPath, value, context) {
         });
         select.classList.remove("invalid");
         select.title = "";
+        clearFieldError(select);
       }
     });
     if (value.length !== selects.length) {
@@ -1788,72 +1985,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) {
@@ -1867,7 +2139,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";
         }
       });
     }
@@ -2086,7 +2358,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) => {
@@ -2133,7 +2405,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) {
@@ -2142,15 +2414,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) {
@@ -2168,16 +2442,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);
   }
 }
 
@@ -2281,14 +2747,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;
 }
@@ -2302,9 +2774,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;
@@ -2317,24 +2792,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;
@@ -2351,6 +2823,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 {
@@ -2729,6 +3205,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
@@ -3738,15 +4247,25 @@ function filterAndSlice(allFiles, currentCount, constraints, state) {
   }
   return { accepted, errorMessage: errorParts.join(" \u2022 ") };
 }
-async function uploadBatch(accepted, resourceIds, listEl, state) {
-  if (listEl) {
+async function uploadBatch(opts) {
+  const {
+    accepted,
+    listEl,
+    state,
+    shouldHideAddTile,
+    buildSuccessTile,
+    prepareForUpload
+  } = opts;
+  if (listEl && shouldHideAddTile) {
     const tilesWrap = ensureTilesWrap(listEl);
     const addTile = tilesWrap.querySelector(".fb-multi-add-tile-js") ?? tilesWrap.querySelector(".fb-tile-add");
     if (addTile) addTile.style.display = "none";
   }
+  prepareForUpload?.();
+  const orderedIds = new Array(accepted.length).fill(null);
   const failures = [];
   await Promise.allSettled(
-    accepted.map(async (file) => {
+    accepted.map(async (file, index) => {
       const placeholder = createUploadingTile(file.name, state);
       if (listEl) {
         const tilesWrap = ensureTilesWrap(listEl);
@@ -3759,20 +4278,24 @@ async function uploadBatch(accepted, resourceIds, listEl, state) {
           type: file.type,
           size: file.size,
           uploadedAt: /* @__PURE__ */ new Date(),
-          file: void 0
+          file
         });
-        resourceIds.push(rid);
+        orderedIds[index] = rid;
+        if (buildSuccessTile && placeholder.parentNode) {
+          placeholder.replaceWith(buildSuccessTile(rid));
+        } else {
+          placeholder.remove();
+        }
       } 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 };
+  return { failures, orderedIds };
 }
 function buildBatchErrorMessage(filterError, failures, state) {
   if (failures.length === 0) return filterError;
@@ -3784,68 +4307,70 @@ function buildBatchErrorMessage(filterError, failures, state) {
   ).join(" \u2022 ");
   return filterError ? `${filterError} \u2022 ${uploadMsg}` : uploadMsg;
 }
-function setupFilesDropHandler(filesContainer, resourceIds, state, updateCallback, constraints, pathKey, instance) {
+async function runMultiFileBatch(opts, files, listEl, errorTarget) {
+  const {
+    resourceIds,
+    state,
+    updateCallback,
+    constraints,
+    pathKey,
+    instance,
+    buildSuccessTile,
+    prepareForUpload,
+    coordinator
+  } = opts;
+  const { accepted, errorMessage } = filterAndSlice(
+    files,
+    coordinator.getOccupiedCount(),
+    constraints,
+    state
+  );
+  if (errorTarget) {
+    if (errorMessage) showFileError(errorTarget, errorMessage);
+    else clearFileError(errorTarget);
+  }
+  const handle = coordinator.beginBatch(accepted.length);
+  const shouldHideAddTile = coordinator.getOccupiedCount() >= constraints.maxCount;
+  const { failures, orderedIds } = await uploadBatch({
+    accepted,
+    listEl,
+    state,
+    shouldHideAddTile,
+    buildSuccessTile,
+    prepareForUpload
+  });
+  handle.setResults(orderedIds);
+  if (instance && pathKey && !state.config.readonly) {
+    instance.triggerOnChange(pathKey, resourceIds);
+  }
+  const { wasLast } = handle.end();
+  if (wasLast) updateCallback();
+  if (errorTarget) {
+    const combined = buildBatchErrorMessage(errorMessage, failures, state);
+    if (combined) showFileError(errorTarget, combined);
+    else clearFileError(errorTarget);
+  }
+}
+function setupFilesDropHandler(opts) {
+  const { filesContainer } = opts;
   setupDragAndDrop(filesContainer, async (files) => {
-    const { accepted, errorMessage } = filterAndSlice(
-      Array.from(files),
-      resourceIds.length,
-      constraints,
-      state
-    );
-    if (errorMessage) {
-      showFileError(filesContainer, errorMessage);
-    } else {
-      clearFileError(filesContainer);
-    }
     const list = filesContainer.querySelector(".files-list") ?? filesContainer;
-    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);
-    }
+    await runMultiFileBatch(opts, Array.from(files), list, filesContainer);
   });
 }
-function setupFilesPickerHandler(filesPicker, resourceIds, state, updateCallback, constraints, pathKey, instance) {
+function setupFilesPickerHandler(opts) {
+  const { filesPicker } = opts;
   filesPicker.onchange = async () => {
     if (!filesPicker.files) return;
-    const wrapperEl = filesPicker.closest("[data-files-wrapper]") || filesPicker.parentElement;
-    const { accepted, errorMessage } = filterAndSlice(
+    const wrapperEl = filesPicker.closest("[data-files-wrapper]") ?? filesPicker.parentElement;
+    const listEl = wrapperEl?.querySelector(".files-list") ?? null;
+    await runMultiFileBatch(
+      opts,
       Array.from(filesPicker.files),
-      resourceIds.length,
-      constraints,
-      state
+      listEl,
+      wrapperEl
     );
-    if (errorMessage && wrapperEl) {
-      showFileError(wrapperEl, errorMessage);
-    } else if (wrapperEl) {
-      clearFileError(wrapperEl);
-    }
-    const listEl = wrapperEl?.querySelector(".files-list");
-    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) {
-      instance.triggerOnChange(pathKey, resourceIds);
-    }
   };
 }
 
@@ -3886,16 +4411,6 @@ function validatePickedResource(resource, allowedExtensions, allowedMimes, maxSi
   }
   return null;
 }
-function readCurrentResourceIds(wrapper) {
-  const raw = wrapper.dataset.resourceIds;
-  if (!raw) return [];
-  try {
-    const parsed = JSON.parse(raw);
-    return Array.isArray(parsed) ? parsed : [];
-  } catch {
-    return [];
-  }
-}
 function registerPickedResource(resource, state) {
   const existing = state.resourceIndex.get(resource.resourceId);
   state.resourceIndex.set(resource.resourceId, {
@@ -3910,13 +4425,27 @@ function extractPickerError(error, state) {
   if (error instanceof Error && error.message) return error.message;
   return t("pickerError", state);
 }
-async function handleLibraryPickMulti(state, element, wrapper, fieldPath, resourceIds, maxCount, updateCallback, instance) {
+async function handleLibraryPickMulti(opts) {
+  const {
+    state,
+    element,
+    wrapper,
+    fieldPath,
+    resourceIds,
+    maxCount,
+    updateCallback,
+    instance,
+    coordinator,
+    list,
+    buildSuccessTile
+  } = opts;
   if (!state.config.pickExistingFiles) return;
   const allowedExtensions = getAllowedExtensions(element.accept);
   const allowedMimes = getAllowedMimes(element.accept);
   const maxSizeMB = element.maxSize ?? Infinity;
-  const currentIds = readCurrentResourceIds(wrapper);
-  const remaining = maxCount === Infinity ? Infinity : Math.max(0, maxCount - currentIds.length);
+  const knownRids = coordinator.getAllKnownRids();
+  const existingSet = new Set(knownRids);
+  const remaining = maxCount === Infinity ? Infinity : Math.max(0, maxCount - coordinator.getOccupiedCount());
   let picked;
   try {
     picked = await state.config.pickExistingFiles({
@@ -3925,14 +4454,15 @@ async function handleLibraryPickMulti(state, element, wrapper, fieldPath, resour
       accept: buildAcceptContext(element),
       maxSizeMB: maxSizeMB === Infinity ? void 0 : maxSizeMB,
       remainingSlots: remaining === Infinity ? void 0 : remaining,
-      selectedResourceIds: [...currentIds]
+      // Hand the host every rid that's already selected (committed or
+      // staged) so it can grey them out or filter them.
+      selectedResourceIds: knownRids
     });
   } catch (error) {
     showFileError(wrapper, extractPickerError(error, state));
     return;
   }
   if (picked.length === 0) return;
-  const existingSet = new Set(currentIds);
   const seen = /* @__PURE__ */ new Set();
   const deduped = picked.filter((r) => {
     if (existingSet.has(r.resourceId)) return false;
@@ -3950,10 +4480,18 @@ async function handleLibraryPickMulti(state, element, wrapper, fieldPath, resour
     );
     return err === null;
   });
-  const freshRemaining = maxCount === Infinity ? validItems.length : Math.max(0, maxCount - resourceIds.length);
+  const freshRemaining = maxCount === Infinity ? validItems.length : Math.max(0, maxCount - coordinator.getOccupiedCount());
   const accepted = validItems.slice(0, freshRemaining);
   const skipped = validItems.length - accepted.length;
-  if (accepted.length === 0) return;
+  if (accepted.length === 0) {
+    if (skipped > 0) {
+      showFileError(
+        wrapper,
+        t("filesLimitExceeded", state, { skipped, max: maxCount })
+      );
+    }
+    return;
+  }
   clearFileError(wrapper);
   if (skipped > 0) {
     showFileError(
@@ -3963,13 +4501,22 @@ async function handleLibraryPickMulti(state, element, wrapper, fieldPath, resour
   }
   for (const resource of accepted) {
     registerPickedResource(resource, state);
-    resourceIds.push(resource.resourceId);
   }
-  wrapper.dataset.resourceIds = JSON.stringify(resourceIds);
-  updateCallback();
+  const acceptedIds = accepted.map((r) => r.resourceId);
+  const handle = coordinator.beginBatch(accepted.length);
+  handle.setResults(acceptedIds);
   if (!state.config.readonly) {
     instance.triggerOnChange(fieldPath, resourceIds);
   }
+  const { wasLast } = handle.end();
+  if (wasLast) {
+    updateCallback();
+  } else {
+    const tilesWrap = ensureTilesWrap(list);
+    for (const rid of acceptedIds) {
+      tilesWrap.appendChild(buildSuccessTile(rid));
+    }
+  }
 }
 async function handleLibraryPickSingle(state, element, container, fileWrapper, pathKey, fieldPath, renderCallback, instance) {
   if (!state.config.pickExistingFiles) return;
@@ -4074,21 +4621,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);
@@ -4290,6 +4837,14 @@ function buildMetaDot() {
   return dot;
 }
 var gridResizeObservers = /* @__PURE__ */ new WeakMap();
+function disposePlaceholdersForUpload(container) {
+  const observer = gridResizeObservers.get(container);
+  if (observer) {
+    observer.disconnect();
+    gridResizeObservers.delete(container);
+  }
+  container.querySelectorAll(".fb-multi-placeholder").forEach((p) => p.remove());
+}
 function renderResourcePills(opts) {
   const {
     container,
@@ -4637,16 +5192,19 @@ function setupMultiFileEditMode(element, ctx, wrapper, pathKey, maxFiles) {
     filesPicker.click();
   };
   const onLibraryPick = state.config.pickExistingFiles && !element.disableLibrary ? () => {
-    handleLibraryPickMulti(
+    handleLibraryPickMulti({
       state,
       element,
-      filesWrapper,
-      pathKey,
-      initialFiles,
-      maxFiles,
-      updateFilesDisplay,
-      ctx.instance
-    ).catch((err) => {
+      wrapper: filesWrapper,
+      fieldPath: pathKey,
+      resourceIds: initialFiles,
+      maxCount: maxFiles,
+      updateCallback: updateFilesDisplay,
+      instance: ctx.instance,
+      coordinator,
+      list,
+      buildSuccessTile
+    }).catch((err) => {
       console.error("Library pick failed:", err);
     });
   } : null;
@@ -4660,37 +5218,153 @@ function setupMultiFileEditMode(element, ctx, wrapper, pathKey, maxFiles) {
         releaseLocalFileUrl(state.resourceIndex.get(ridToRemove)?.file);
         const index = initialFiles.indexOf(ridToRemove);
         if (index > -1) initialFiles.splice(index, 1);
-        updateFilesDisplay();
+        if (coordinator.hasInFlightBatches()) {
+          pendingRemovals.add(ridToRemove);
+          list.querySelector(`[data-resource-id="${ridToRemove}"]`)?.remove();
+          filesWrapper.dataset.resourceIds = JSON.stringify(initialFiles);
+        } else {
+          updateFilesDisplay();
+        }
+        if (ctx.instance && pathKey && !state.config.readonly) {
+          ctx.instance.triggerOnChange(pathKey, initialFiles);
+        }
       },
       maxCount: maxFiles < Infinity ? maxFiles : void 0,
       isReadonly: currentlyReadonly,
       onLibraryPick: currentlyReadonly ? null : onLibraryPick,
       element,
       onClearAll: currentlyReadonly ? void 0 : () => {
+        for (const rid of initialFiles) {
+          releaseLocalFileUrl(state.resourceIndex.get(rid)?.file);
+        }
         initialFiles.splice(0);
-        updateFilesDisplay();
+        if (coordinator.hasInFlightBatches()) {
+          const visibleTiles = list.querySelectorAll("[data-resource-id]");
+          for (const tile of visibleTiles) {
+            const rid = tile.dataset.resourceId;
+            if (rid) {
+              releaseLocalFileUrl(state.resourceIndex.get(rid)?.file);
+              pendingRemovals.add(rid);
+            }
+            tile.remove();
+          }
+          filesWrapper.dataset.resourceIds = JSON.stringify(initialFiles);
+        } else {
+          updateFilesDisplay();
+        }
+        if (ctx.instance && pathKey && !state.config.readonly) {
+          ctx.instance.triggerOnChange(pathKey, initialFiles);
+        }
       },
       openPicker
     });
   }
-  setupFilesDropHandler(
-    filesContainer,
-    initialFiles,
-    state,
-    updateFilesDisplay,
-    constraints,
-    pathKey,
-    ctx.instance
-  );
-  setupFilesPickerHandler(
-    filesPicker,
-    initialFiles,
+  let inFlightFiles = 0;
+  let activeBatches = 0;
+  let nextBatchOrdinal = 0;
+  let nextCommitOrdinal = 0;
+  const stagedResults = /* @__PURE__ */ new Map();
+  const batchReservations = /* @__PURE__ */ new Map();
+  const pendingRemovals = /* @__PURE__ */ new Set();
+  const drainContiguousStagedResults = () => {
+    while (stagedResults.has(nextCommitOrdinal)) {
+      const ordinal = nextCommitOrdinal;
+      const ids = stagedResults.get(ordinal);
+      stagedResults.delete(ordinal);
+      nextCommitOrdinal += 1;
+      const reservation = batchReservations.get(ordinal) ?? 0;
+      batchReservations.delete(ordinal);
+      inFlightFiles -= reservation;
+      for (const rid of ids) {
+        if (rid === null) continue;
+        if (pendingRemovals.has(rid)) {
+          pendingRemovals.delete(rid);
+          continue;
+        }
+        initialFiles.push(rid);
+      }
+    }
+    filesWrapper.dataset.resourceIds = JSON.stringify(initialFiles);
+  };
+  const coordinator = {
+    getOccupiedCount: () => initialFiles.length + inFlightFiles,
+    getAllKnownRids: () => {
+      const out = [...initialFiles];
+      for (const ids of stagedResults.values()) {
+        for (const rid of ids) {
+          if (rid !== null) out.push(rid);
+        }
+      }
+      return out;
+    },
+    hasInFlightBatches: () => activeBatches > 0 || batchReservations.size > 0,
+    wasRemovedDuringBatch: (rid) => pendingRemovals.has(rid),
+    beginBatch: (count) => {
+      inFlightFiles += count;
+      activeBatches += 1;
+      const ordinal = nextBatchOrdinal++;
+      batchReservations.set(ordinal, count);
+      return {
+        setResults: (orderedIds) => {
+          stagedResults.set(ordinal, orderedIds);
+          drainContiguousStagedResults();
+        },
+        end: () => {
+          activeBatches -= 1;
+          const wasLast = activeBatches === 0 && batchReservations.size === 0;
+          if (wasLast) {
+            pendingRemovals.clear();
+          }
+          return { wasLast };
+        }
+      };
+    }
+  };
+  const buildSuccessTile = (rid) => {
+    const currentlyReadonly = isElementReadonly(element, state);
+    return buildPreviewTile(
+      rid,
+      state,
+      !currentlyReadonly,
+      currentlyReadonly ? null : () => {
+        releaseLocalFileUrl(state.resourceIndex.get(rid)?.file);
+        const idx = initialFiles.indexOf(rid);
+        if (idx > -1) {
+          initialFiles.splice(idx, 1);
+          if (coordinator.hasInFlightBatches()) {
+            pendingRemovals.add(rid);
+            list.querySelector(`[data-resource-id="${rid}"]`)?.remove();
+            filesWrapper.dataset.resourceIds = JSON.stringify(initialFiles);
+          } else {
+            updateFilesDisplay();
+          }
+          if (ctx.instance && pathKey && !state.config.readonly) {
+            ctx.instance.triggerOnChange(pathKey, initialFiles);
+          }
+          return;
+        }
+        pendingRemovals.add(rid);
+        list.querySelector(`[data-resource-id="${rid}"]`)?.remove();
+        if (ctx.instance && pathKey && !state.config.readonly) {
+          ctx.instance.triggerOnChange(pathKey, initialFiles);
+        }
+      }
+    );
+  };
+  const prepareForUpload = () => disposePlaceholdersForUpload(list);
+  const sharedHandlerOpts = {
+    resourceIds: initialFiles,
     state,
-    updateFilesDisplay,
+    updateCallback: updateFilesDisplay,
     constraints,
     pathKey,
-    ctx.instance
-  );
+    instance: ctx.instance,
+    buildSuccessTile,
+    prepareForUpload,
+    coordinator
+  };
+  setupFilesDropHandler({ ...sharedHandlerOpts, filesContainer });
+  setupFilesPickerHandler({ ...sharedHandlerOpts, filesPicker });
   updateFilesDisplay();
   wrapper.appendChild(filesWrapper);
 }
@@ -5330,7 +6004,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) => {
@@ -5379,7 +6053,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) {
@@ -5387,6 +6061,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");
@@ -5416,6 +6091,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");
@@ -5818,7 +6494,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) => {
@@ -5869,7 +6545,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) {
@@ -5897,6 +6573,7 @@ function updateSliderField(element, fieldPath, value, context) {
         }
         slider.classList.remove("invalid");
         slider.title = "";
+        clearFieldError(slider);
       }
     });
     if (value.length !== sliders.length) {
@@ -5933,6 +6610,7 @@ function updateSliderField(element, fieldPath, value, context) {
       }
       slider.classList.remove("invalid");
       slider.title = "";
+      clearFieldError(slider);
     }
   }
 }
@@ -6055,34 +6733,24 @@ function getChildWrapperClass(isSlides, columns) {
   const cols = columns || 1;
   return cols === 1 ? "space-y-2" : `grid grid-cols-${cols} gap-2`;
 }
-function mountRemoveButton(item, onRemove) {
+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: 22px;
-    height: 22px;
+    width: 24px;
+    height: 24px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 0;
-    line-height: 1;
-    font-size: 14px;
-    color: var(--fb-error-color);
-    background-color: transparent;
     border: 0;
     border-radius: 4px;
     cursor: pointer;
     flex-shrink: 0;
-    transition: background-color var(--fb-transition-duration);
   `;
-  rem.textContent = "\u2715";
-  rem.addEventListener("mouseenter", () => {
-    rem.style.backgroundColor = "var(--fb-background-hover-color)";
-  });
-  rem.addEventListener("mouseleave", () => {
-    rem.style.backgroundColor = "transparent";
-  });
+  rem.innerHTML = BIN_ICON_SVG;
   rem.onclick = onRemove;
   const labelRow = item.querySelector("[data-fb-label-row]");
   if (labelRow) {
@@ -6108,7 +6776,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
     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";
   }
@@ -6139,6 +6807,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");
     childWrapper.className = getChildWrapperClass(isSlides, element.columns);
     element.elements.forEach((child) => {
@@ -6155,7 +6826,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
     });
     item.appendChild(childWrapper);
     if (!containerIsReadonly) {
-      mountRemoveButton(item, () => handleRemoveItem(item));
+      mountRemoveButton(item, () => handleRemoveItem(item), state);
     }
     if (slideAddTile && slideAddTile.parentElement === itemsWrap) {
       itemsWrap.insertBefore(item, slideAddTile);
@@ -6201,6 +6872,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";
@@ -6224,7 +6898,7 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
       });
       item.appendChild(childWrapper);
       if (!containerIsReadonly) {
-        mountRemoveButton(item, () => handleRemoveItem(item));
+        mountRemoveButton(item, () => handleRemoveItem(item), ctx.state);
       }
       itemsWrap.appendChild(item);
     });
@@ -6244,6 +6918,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";
@@ -6268,11 +6945,15 @@ function renderMultipleContainerElement(element, ctx, wrapper, _pathKey) {
         }
       });
       item.appendChild(childWrapper);
-      mountRemoveButton(item, () => {
-        if (countItems() > min) {
-          handleRemoveItem(item);
-        }
-      });
+      mountRemoveButton(
+        item,
+        () => {
+          if (countItems() > min) {
+            handleRemoveItem(item);
+          }
+        },
+        ctx.state
+      );
       itemsWrap.appendChild(item);
     }
   }
@@ -8897,7 +9578,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;
@@ -9422,6 +10103,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);
@@ -9730,6 +10522,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);
@@ -9808,8 +10603,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) {
@@ -10042,28 +10840,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",
@@ -10106,6 +10928,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",
@@ -10117,13 +10945,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 };
@@ -10135,6 +10981,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]"
@@ -10197,114 +11044,64 @@ var exampleThemes = {
     fontSize: "16px",
     fontSizeSmall: "14px",
     fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif'
-  }
-};
-
-// 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.
+  // Assumes Inter is loaded by the host (e.g. via Google Fonts in index.html).
+  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",
+    // Picaz uses roomier inputs (11/14px) than the defaultTheme compact density.
+    inputPaddingX: "14px",
+    inputPaddingY: "11px",
+    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",
+    // Slide cards: subtle gradient lift, no rest-state shadow (mockup adds it
+    // only on hover, which form-builder doesn't yet differentiate).
+    slideCardBg: "linear-gradient(180deg, #f7f9fc 0%, #dde3ee 100%)",
+    slideCardShadow: "none",
+    slideCardRadius: "16px",
+    // Tiny uppercase captions above grouped lists ("ПРЕИМУЩЕСТВА" in the mockup).
+    labelSectionFontSize: "0.625rem",
+    // 10px
+    labelSectionLetterSpacing: "0.07em",
+    labelSectionTextTransform: "uppercase"
   }
 };
-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 {
@@ -10429,26 +11226,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;
@@ -10657,6 +11465,13 @@ var FormBuilderInstance = class {
         const value = hintValues[fieldKey];
         this.updateField(fullPath, value);
       }
+      const group = target.closest(".fb-prefill-hints");
+      if (group) {
+        group.querySelectorAll(
+          '.fb-prefill-hint[aria-pressed="true"]'
+        ).forEach((el) => el.removeAttribute("aria-pressed"));
+      }
+      target.setAttribute("aria-pressed", "true");
     } catch (error) {
       console.error("Error parsing prefill hint values:", error);
     }