@dmitryvim/form-builder 0.6.4 → 0.7.0

package/dist/cjs/index.cjs

@@ -100,467 +100,201 @@ function createHiddenInput(name, value) {
   return input;
 }
 
-// src/utils/validation.ts
-function addLengthHint(element, parts, state) {
-  if (element.minLength != null || element.maxLength != null) {
-    if (element.minLength != null && element.maxLength != null) {
-      parts.push(
-        t("hintLengthRange", state, {
-          min: element.minLength,
-          max: element.maxLength
-        })
-      );
-    } else if (element.maxLength != null) {
-      parts.push(t("hintMaxLength", state, { max: element.maxLength }));
-    } else if (element.minLength != null) {
-      parts.push(t("hintMinLength", state, { min: element.minLength }));
+// src/utils/styles.ts
+function findErrorAnchor(input) {
+  var _a, _b, _c, _d;
+  return (_d = (_c = (_a = input.closest) == null ? void 0 : _a.call(input, ".fb-chip")) != null ? _c : (_b = input.closest) == null ? void 0 : _b.call(input, ".slider-container")) != null ? _d : input;
+}
+function findErrorNode(input) {
+  const anchor = findErrorAnchor(input);
+  const name = input.getAttribute("name");
+  const parent = anchor.parentElement;
+  if (name && parent) {
+    for (const child of Array.from(parent.children)) {
+      if (isInputErrorNode(child) && child.getAttribute("data-error-for") === name) {
+        return child;
+      }
     }
   }
+  const sibling = anchor.nextElementSibling;
+  return sibling && isInputErrorNode(sibling) ? sibling : null;
 }
-function addRangeHint(element, parts, state) {
-  if (element.min != null || element.max != null) {
-    if (element.min != null && element.max != null) {
-      parts.push(
-        t("hintValueRange", state, { min: element.min, max: element.max })
-      );
-    } else if (element.max != null) {
-      parts.push(t("hintMaxValue", state, { max: element.max }));
-    } else if (element.min != null) {
-      parts.push(t("hintMinValue", state, { min: element.min }));
-    }
+function isInputErrorNode(node) {
+  return node.classList.contains("error-message") && !node.classList.contains("fb-field-error");
+}
+function resolveMark(target, message, scope) {
+  const reported = scope.state.reportedInvalid;
+  if (message === null || scope.readonly) {
+    reported.delete(target);
+    return null;
   }
+  if (scope.draftMarks && !reported.has(target)) return void 0;
+  reported.add(target);
+  return message;
 }
-function addFileSizeHint(element, parts, state) {
+function joinErrorMessages(messages) {
+  return messages.length > 0 ? messages.join(" \u2022 ") : null;
+}
+function createErrorNode(state, className) {
+  const node = document.createElement("div");
+  node.className = className;
+  node.id = nextDomId(state, "error");
+  node.style.cssText = `
+    display: block;
+    color: var(--fb-error-color);
+    font-size: var(--fb-font-size-small);
+    margin-top: 0.25rem;
+  `;
+  return node;
+}
+function setAttr(el, name, value) {
+  if (el.getAttribute(name) !== value) el.setAttribute(name, value);
+}
+function nextDomId(state, kind) {
+  return `${state.instanceId}-${kind}-${++state.domIdCounter}`;
+}
+function describedByTokens(target) {
   var _a;
-  const sizeMB = (_a = element.maxSize) != null ? _a : element.maxSizeMB;
-  if (sizeMB && sizeMB !== Infinity) {
-    parts.push(t("hintMaxSize", state, { size: sizeMB }));
-  }
+  return ((_a = target.getAttribute("aria-describedby")) != null ? _a : "").split(/\s+/).filter(Boolean);
 }
-function addFormatHint(element, parts, state) {
+var FORM_CONTROL = "input, select, textarea, button";
+var ADDED_ATTRS = "data-fb-mark-added";
+function fieldLabelOf(target) {
   var _a;
-  if ((_a = element.accept) == null ? void 0 : _a.extensions) {
-    parts.push(
-      t("hintFormats", state, {
-        formats: element.accept.extensions.map((ext) => ext.toUpperCase()).join(",")
-      })
+  const field = target.closest(".fb-field-wrapper");
+  const labelRow = field ? Array.from(field.children).find(
+    (child) => child.hasAttribute("data-fb-label-row")
+  ) : void 0;
+  return (_a = labelRow == null ? void 0 : labelRow.querySelector("label")) != null ? _a : null;
+}
+function exposeAsGroup(target, state) {
+  if (target.matches(FORM_CONTROL) || target.hasAttribute(ADDED_ATTRS)) return;
+  const added = [];
+  if (!target.hasAttribute("tabindex")) {
+    target.tabIndex = -1;
+    added.push("tabindex");
+  }
+  if (!target.hasAttribute("role")) {
+    target.setAttribute("role", "group");
+    added.push("role");
+  }
+  const label = fieldLabelOf(target);
+  if (label && !target.hasAttribute("aria-labelledby")) {
+    if (!label.id) label.id = nextDomId(state, "label");
+    target.setAttribute("aria-labelledby", label.id);
+    added.push("aria-labelledby");
+  }
+  target.setAttribute(ADDED_ATTRS, added.join(" "));
+}
+function linkDescription(target, node) {
+  if (!describedByTokens(target).includes(node.id)) {
+    target.setAttribute(
+      "aria-describedby",
+      [...describedByTokens(target), node.id].join(" ")
     );
   }
 }
-function addPatternHint(element, parts, state) {
-  if (element.pattern) {
-    parts.push(t("hintPattern", state, { pattern: element.pattern }));
-  }
-}
-function makeFieldHint(element, state) {
-  const parts = [];
-  addLengthHint(element, parts, state);
-  if (element.type !== "slider") {
-    addRangeHint(element, parts, state);
-  }
-  addFileSizeHint(element, parts, state);
-  addFormatHint(element, parts, state);
-  addPatternHint(element, parts, state);
-  return parts.join(" \u2022 ");
+function setInvalidMark(target, node, state) {
+  setAttr(target, "aria-invalid", "true");
+  exposeAsGroup(target, state);
+  if (node) linkDescription(target, node);
 }
-function validateSchema(schema) {
-  const errors = [];
-  if (!schema || typeof schema !== "object") {
-    errors.push("Schema must be an object");
-    return errors;
-  }
-  if (!Array.isArray(schema.elements)) {
-    errors.push("Schema missing elements array");
-    return errors;
-  }
-  if ("columns" in schema && schema.columns !== void 0) {
-    const columns = schema.columns;
-    const validColumns = [1, 2, 3, 4];
-    if (!Number.isInteger(columns) || !validColumns.includes(columns)) {
-      errors.push(`schema.columns must be 1, 2, 3, or 4 (got ${columns})`);
+function unsetInvalidState(target) {
+  target.removeAttribute("aria-invalid");
+  const added = target.getAttribute(ADDED_ATTRS);
+  if (added !== null) {
+    for (const attr of added.split(" ").filter(Boolean)) {
+      target.removeAttribute(attr);
     }
+    target.removeAttribute(ADDED_ATTRS);
   }
-  if ("prefillHints" in schema && schema.prefillHints) {
-    const prefillHints = schema.prefillHints;
-    if (Array.isArray(prefillHints)) {
-      prefillHints.forEach((hint, hintIndex) => {
-        if (!hint.label || typeof hint.label !== "string") {
-          errors.push(
-            `schema.prefillHints[${hintIndex}] must have a 'label' property of type string`
-          );
-        }
-        if (!hint.values || typeof hint.values !== "object") {
-          errors.push(
-            `schema.prefillHints[${hintIndex}] must have a 'values' property of type object`
-          );
-        } else {
-          for (const fieldKey in hint.values) {
-            const fieldExists = schema.elements.some(
-              (element) => element.key === fieldKey
-            );
-            if (!fieldExists) {
-              errors.push(
-                `schema.prefillHints[${hintIndex}] references non-existent field "${fieldKey}"`
-              );
-            }
-          }
-        }
-      });
-    }
+}
+function clearInvalidMark(target, node) {
+  unsetInvalidState(target);
+  if (node) {
+    const rest = describedByTokens(target).filter((id) => id !== node.id);
+    if (rest.length > 0) setAttr(target, "aria-describedby", rest.join(" "));
+    else target.removeAttribute("aria-describedby");
+    node.remove();
   }
-  function validateContainerProps(element, elementPath, errors2) {
-    if ("columns" in element && element.columns !== void 0) {
-      const columns = element.columns;
-      const validColumns = [1, 2, 3, 4];
-      if (!Number.isInteger(columns) || !validColumns.includes(columns)) {
-        errors2.push(
-          `${elementPath}: columns must be 1, 2, 3, or 4 (got ${columns})`
-        );
-      }
-    }
-    if ("displayMode" in element && element.displayMode !== void 0) {
-      const displayMode = element.displayMode;
-      if (displayMode !== "stack" && displayMode !== "slides") {
-        errors2.push(
-          `${elementPath}: displayMode must be "stack" or "slides" (got ${JSON.stringify(displayMode)})`
-        );
-      }
-    }
+}
+function drawMark(target, message, existing, createNode, state) {
+  if (message === "") {
+    if (existing) clearInvalidMark(target, existing);
+    setInvalidMark(target, null, state);
+    return;
   }
-  function checkFlatOutputCollisions(elements, scopePath) {
-    var _a, _b;
-    const allOutputKeys = /* @__PURE__ */ new Set();
-    for (const el of elements) {
-      if (el.type === "richinput" && el.flatOutput) {
-        const richEl = el;
-        const textKey = (_a = richEl.textKey) != null ? _a : "text";
-        const filesKey = (_b = richEl.filesKey) != null ? _b : "files";
-        for (const otherEl of elements) {
-          if (otherEl === el) continue;
-          if (otherEl.key === textKey) {
-            errors.push(
-              `${scopePath}: RichInput "${el.key}" flatOutput textKey "${textKey}" collides with element key "${otherEl.key}"`
-            );
-          }
-          if (otherEl.key === filesKey) {
-            errors.push(
-              `${scopePath}: RichInput "${el.key}" flatOutput filesKey "${filesKey}" collides with element key "${otherEl.key}"`
-            );
-          }
-        }
-        if (allOutputKeys.has(textKey)) {
-          errors.push(
-            `${scopePath}: RichInput "${el.key}" flatOutput textKey "${textKey}" collides with another flatOutput key`
-          );
-        }
-        if (allOutputKeys.has(filesKey)) {
-          errors.push(
-            `${scopePath}: RichInput "${el.key}" flatOutput filesKey "${filesKey}" collides with another flatOutput key`
-          );
-        }
-        allOutputKeys.add(textKey);
-        allOutputKeys.add(filesKey);
-      } else {
-        if (el.key) {
-          if (allOutputKeys.has(el.key)) {
-            errors.push(
-              `${scopePath}: Element key "${el.key}" collides with a flatOutput richinput key`
-            );
-          }
-          allOutputKeys.add(el.key);
-        }
-      }
-    }
+  const node = existing != null ? existing : createNode();
+  if (node.textContent !== message) node.textContent = message;
+  setInvalidMark(target, node, state);
+}
+function markFieldValidity(input, errorMessage, scope) {
+  var _a;
+  if (!input) return;
+  const mark = resolveMark(input, errorMessage, scope);
+  if (mark === void 0) return;
+  if (mark === null) {
+    clearFieldError(input);
+    return;
   }
-  function validateCountBounds(element, elementPath, errors2) {
-    var _a, _b;
-    const el = element;
-    if (el.type === "group") {
-      if (!isPlainObject(el.repeat)) return;
-      checkBounds(
-        elementPath,
-        (_a = el.repeat) == null ? void 0 : _a.min,
-        (_b = el.repeat) == null ? void 0 : _b.max,
-        "repeat.min",
-        "repeat.max",
-        el.required === true,
-        errors2
-      );
-      return;
-    }
-    const isMultiple = el.multiple === true || el.type === "files";
-    if (!isMultiple) return;
-    checkBounds(
-      elementPath,
-      el.minCount,
-      el.maxCount,
-      "minCount",
-      "maxCount",
-      el.required === true,
-      errors2
+  if (!input.classList.contains("invalid")) input.classList.add("invalid");
+  if (input.title !== mark) input.title = mark;
+  const errorFor = (_a = input.getAttribute("name")) != null ? _a : "";
+  const existing = findErrorNode(input);
+  if (existing) setAttr(existing, "data-error-for", errorFor);
+  drawMark(
+    input,
+    mark,
+    existing,
+    () => {
+      var _a2;
+      const node = createErrorNode(scope.state, "error-message");
+      node.setAttribute("data-error-for", errorFor);
+      const anchor = findErrorAnchor(input);
+      (_a2 = anchor.parentNode) == null ? void 0 : _a2.insertBefore(node, anchor.nextSibling);
+      return node;
+    },
+    scope.state
+  );
+}
+function clearFieldError(input) {
+  if (input.classList.contains("invalid")) input.classList.remove("invalid");
+  if (input.title !== "") input.title = "";
+  clearInvalidMark(input, findErrorNode(input));
+}
+function markFieldGroupValidity(scopeRoot, fieldPath, errorMessage, scope) {
+  var _a;
+  const wrapper = scopeRoot.querySelector(
+    `[data-field-path="${fieldPath}"]`
+  );
+  if (!wrapper) {
+    throw new Error(
+      `markFieldGroupValidity: no [data-field-path="${fieldPath}"] in scope`
     );
   }
-  function checkBounds(elementPath, minCount, maxCount, minName, maxName, requiredImpliesFloor, errors2) {
-    for (const [name, bound] of [
-      [minName, minCount],
-      [maxName, maxCount]
-    ]) {
-      if (bound !== void 0 && typeof bound !== "number") {
-        errors2.push(
-          `${elementPath}: ${name} must be a number (got ${typeof bound})`
-        );
-      }
-    }
-    const min = typeof minCount === "number" ? minCount : void 0;
-    const max = typeof maxCount === "number" ? maxCount : void 0;
-    if (max !== void 0 && (max < 0 || Number.isNaN(max))) {
-      errors2.push(
-        `${elementPath}: ${maxName} must be a non-negative number or Infinity (got ${max})`
-      );
-    }
-    if (min !== void 0 && (min < 0 || !Number.isFinite(min))) {
-      errors2.push(
-        `${elementPath}: ${minName} must be a finite non-negative number (got ${min})`
-      );
-    }
-    const effectiveMin = min != null ? min : requiredImpliesFloor ? 1 : void 0;
-    if (effectiveMin !== void 0 && max !== void 0 && effectiveMin > max) {
-      const shown = min !== void 0 ? `${minName} (${min})` : `required: true (implies ${minName} 1)`;
-      errors2.push(
-        `${elementPath}: ${shown} cannot be greater than ${maxName} (${max})`
-      );
-    }
+  if (wrapper.getAttribute("data-conditionally-disabled") === "true") return;
+  const mark = resolveMark(wrapper, errorMessage, scope);
+  if (mark === void 0) return;
+  const existing = (_a = Array.from(wrapper.children).find(
+    (child) => child instanceof HTMLElement && child.classList.contains("fb-field-error")
+  )) != null ? _a : null;
+  if (mark === null) {
+    clearInvalidMark(wrapper, existing);
+    return;
   }
-  function validateElements(elements, path) {
-    const seenKeys = /* @__PURE__ */ new Set();
-    elements.forEach((element, index) => {
-      if (!element.key) return;
-      if (seenKeys.has(element.key)) {
-        errors.push(`${path}[${index}]: duplicate key "${element.key}"`);
-      }
-      seenKeys.add(element.key);
-    });
-    elements.forEach((element, index) => {
-      const elementPath = `${path}[${index}]`;
-      if (!element.type) {
-        errors.push(`${elementPath}: missing type`);
-      }
-      if (!element.key && element.type !== "markdown") {
-        errors.push(`${elementPath}: missing key`);
-      }
-      validateCountBounds(element, elementPath, errors);
-      if (element.type === "number" && "decimals" in element) {
-        const decimals = element.decimals;
-        if (decimals !== void 0 && (!Number.isInteger(decimals) || decimals < 0)) {
-          errors.push(
-            `${elementPath}: decimals must be a non-negative integer (got ${JSON.stringify(decimals)})`
-          );
-        }
-      }
-      if (element.type === "markdown") {
-        const content = element.content;
-        if (typeof content !== "string") {
-          errors.push(
-            `${elementPath}: markdown element requires "content" to be a string (got ${content === null ? "null" : typeof content})`
-          );
-        }
-      }
-      if (element.enableIf) {
-        const enableIf = element.enableIf;
-        if (!enableIf.key || typeof enableIf.key !== "string") {
-          errors.push(
-            `${elementPath}: enableIf must have a 'key' property of type string`
-          );
-        }
-        const hasOperator = "equals" in enableIf;
-        if (!hasOperator) {
-          errors.push(
-            `${elementPath}: enableIf must have at least one operator (equals, etc.)`
-          );
-        }
-      }
-      if (element.type === "group" && "elements" in element && element.elements) {
-        validateElements(element.elements, `${elementPath}.elements`);
-      }
-      if (element.type === "container" && element.elements) {
-        validateContainerProps(element, elementPath, errors);
-        if ("prefillHints" in element && element.prefillHints) {
-          const prefillHints = element.prefillHints;
-          if (Array.isArray(prefillHints)) {
-            prefillHints.forEach((hint, hintIndex) => {
-              if (!hint.label || typeof hint.label !== "string") {
-                errors.push(
-                  `${elementPath}: prefillHints[${hintIndex}] must have a 'label' property of type string`
-                );
-              }
-              if (!hint.values || typeof hint.values !== "object") {
-                errors.push(
-                  `${elementPath}: prefillHints[${hintIndex}] must have a 'values' property of type object`
-                );
-              } else {
-                for (const fieldKey in hint.values) {
-                  const fieldExists = element.elements.some(
-                    (childElement) => childElement.key === fieldKey
-                  );
-                  if (!fieldExists) {
-                    errors.push(
-                      `container "${element.key}": prefillHints[${hintIndex}] references non-existent field "${fieldKey}"`
-                    );
-                  }
-                }
-              }
-            });
-          }
-        }
-        validateElements(element.elements, `${elementPath}.elements`);
-        checkFlatOutputCollisions(element.elements, `${elementPath}.elements`);
-      }
-      if (element.type === "select" && element.options) {
-        const defaultValue = element.default;
-        if (defaultValue !== void 0 && defaultValue !== null && defaultValue !== "") {
-          const hasMatchingOption = element.options.some(
-            (opt) => opt.value === defaultValue
-          );
-          if (!hasMatchingOption) {
-            errors.push(
-              `${elementPath}: default "${defaultValue}" not in options`
-            );
-          }
-        }
-      }
-    });
-  }
-  if (Array.isArray(schema.elements)) {
-    validateElements(schema.elements, "elements");
-    checkFlatOutputCollisions(schema.elements, "elements");
-  }
-  return errors;
-}
-
-// src/utils/enable-conditions.ts
-function getValueByPath(data, path) {
-  if (!data || typeof data !== "object") {
-    return void 0;
-  }
-  const segments = path.match(/[^.[\]]+|\[\d+\]/g);
-  if (!segments || segments.length === 0) {
-    return void 0;
-  }
-  let current = data;
-  for (const segment of segments) {
-    if (current === void 0 || current === null) {
-      return void 0;
-    }
-    if (segment.startsWith("[") && segment.endsWith("]")) {
-      const index = parseInt(segment.slice(1, -1), 10);
-      if (!Array.isArray(current) || isNaN(index)) {
-        return void 0;
-      }
-      current = current[index];
-    } else {
-      current = current[segment];
-    }
-  }
-  return current;
-}
-function evaluateEnableCondition(condition, formData, containerData) {
-  var _a;
-  if (!condition || !condition.key) {
-    throw new Error("Invalid enableIf condition: must have a 'key' property");
-  }
-  const scope = (_a = condition.scope) != null ? _a : "relative";
-  let dataSource;
-  if (scope === "relative") {
-    dataSource = containerData != null ? containerData : formData;
-  } else if (scope === "absolute") {
-    dataSource = formData;
-  } else {
-    throw new Error(
-      `Invalid enableIf scope: must be "relative" or "absolute" (got "${scope}")`
-    );
-  }
-  const actualValue = getValueByPath(dataSource, condition.key);
-  if ("equals" in condition) {
-    return deepEqual(actualValue, condition.equals);
-  }
-  throw new Error(
-    `Invalid enableIf condition: no recognized operator (equals, etc.)`
+  drawMark(
+    wrapper,
+    mark,
+    existing,
+    () => {
+      const node = createErrorNode(scope.state, "error-message fb-field-error");
+      node.setAttribute("data-error-for", fieldPath);
+      wrapper.appendChild(node);
+      return node;
+    },
+    scope.state
   );
 }
-function deepEqual(a, b) {
-  if (a === b) return true;
-  if (a == null || b == null) return a === b;
-  if (typeof a !== typeof b) return false;
-  if (typeof a === "object" && typeof b === "object") {
-    try {
-      return JSON.stringify(a) === JSON.stringify(b);
-    } catch (e) {
-      if (e instanceof TypeError && (e.message.includes("circular") || e.message.includes("cyclic"))) {
-        console.warn(
-          "deepEqual: Circular reference detected in enableIf comparison, using reference equality"
-        );
-        return a === b;
-      }
-      throw e;
-    }
-  }
-  return a === b;
-}
-
-// src/utils/styles.ts
-function findErrorAnchor(input) {
-  var _a, _b, _c, _d;
-  return (_d = (_c = (_a = input.closest) == null ? void 0 : _a.call(input, ".fb-chip")) != null ? _c : (_b = input.closest) == null ? void 0 : _b.call(input, ".slider-container")) != null ? _d : input;
-}
-function findErrorNode(input) {
-  const anchor = findErrorAnchor(input);
-  const name = input.getAttribute("name");
-  const parent = anchor.parentElement;
-  if (name && parent) {
-    for (const child of Array.from(parent.children)) {
-      if (child.classList.contains("error-message") && child.getAttribute("data-error-for") === name) {
-        return child;
-      }
-    }
-  }
-  const sibling = anchor.nextElementSibling;
-  return sibling && sibling.classList.contains("error-message") ? sibling : null;
-}
-function markFieldValidity(input, errorMessage) {
-  var _a, _b, _c, _d;
-  if (!input) return;
-  if (errorMessage == null) {
-    input.classList.remove("invalid");
-    input.title = "";
-    (_a = findErrorNode(input)) == null ? void 0 : _a.remove();
-    return;
-  }
-  input.classList.add("invalid");
-  input.title = errorMessage;
-  if (errorMessage === "") {
-    (_b = findErrorNode(input)) == null ? void 0 : _b.remove();
-    return;
-  }
-  let errorElement = findErrorNode(input);
-  if (!errorElement) {
-    const anchor = findErrorAnchor(input);
-    errorElement = document.createElement("div");
-    errorElement.className = "error-message";
-    errorElement.style.cssText = `
-      color: var(--fb-error-color);
-      font-size: var(--fb-font-size-small);
-      margin-top: 0.25rem;
-    `;
-    (_c = anchor.parentNode) == null ? void 0 : _c.insertBefore(errorElement, anchor.nextSibling);
-  }
-  errorElement.setAttribute("data-error-for", (_d = input.getAttribute("name")) != null ? _d : "");
-  errorElement.textContent = errorMessage;
-  errorElement.style.display = "block";
-}
-function clearFieldError(input) {
-  var _a;
-  (_a = findErrorNode(input)) == null ? void 0 : _a.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;
@@ -678,6 +412,13 @@ function ensureThemingHooks(doc) {
 /* .fb-size-md uses defaults \u2014 no override needed */
 .fb-size-lg { --fb-input-padding-y: 2px;  --fb-input-padding-x: 8px;  --fb-font-size: 16px; --fb-font-size-small: 13px; --fb-file-wide-min: 128px; --fb-file-zone-min: 96px; --fb-file-zone-padding: 12px; }
 .fb-size-xl { --fb-input-padding-y: 3px;  --fb-input-padding-x: 8px;  --fb-font-size: 18px; --fb-font-size-small: 14px; --fb-file-wide-min: 160px; --fb-file-zone-min: 120px; --fb-file-zone-padding: 14px; }
+/* !important: controls carry their border inline and JS focus/hover
+   handlers rewrite it, so no weaker rule would ever show the mark. */
+[data-fb-root] input[aria-invalid="true"],
+[data-fb-root] select[aria-invalid="true"],
+[data-fb-root] textarea[aria-invalid="true"] {
+  border-color: var(--fb-error-color) !important;
+}
 `;
   doc.head.appendChild(style);
 }
@@ -725,188 +466,615 @@ function applyAutoExpand(textarea, options) {
   ro.observe(textarea);
   (_b = options.observers) == null ? void 0 : _b.add(ro);
 }
-function applySingleLineMode(textarea) {
-  textarea.addEventListener("keydown", (e) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
+function applySingleLineMode(textarea) {
+  textarea.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+    }
+  });
+  textarea.addEventListener("paste", (e) => {
+    var _a, _b, _c, _d;
+    const pasted = (_b = (_a = e.clipboardData) == null ? void 0 : _a.getData("text")) != null ? _b : "";
+    if (!/[\r\n]/.test(pasted)) return;
+    e.preventDefault();
+    const cleaned = pasted.replace(/[\r\n]+/g, " ");
+    const start = (_c = textarea.selectionStart) != null ? _c : textarea.value.length;
+    const end = (_d = textarea.selectionEnd) != null ? _d : textarea.value.length;
+    const before = textarea.value.slice(0, start);
+    const after = textarea.value.slice(end);
+    textarea.value = before + cleaned + after;
+    const pos = start + cleaned.length;
+    textarea.setSelectionRange(pos, pos);
+    textarea.dispatchEvent(new Event("input", { bubbles: true }));
+  });
+}
+function mountCounterInLabel(wrapper, counter) {
+  const labelRow = wrapper.querySelector(
+    ":scope > [data-fb-label-row]"
+  );
+  if (labelRow) labelRow.appendChild(counter);
+}
+function createAddItemRow(classNameSuffix, onClick, options = {}) {
+  var _a;
+  const label = (_a = options.label) != null ? _a : "";
+  const showCounter = options.showCounter !== false;
+  const row = document.createElement("div");
+  row.className = "fb-add-row";
+  row.style.cssText = "display:flex;align-items:stretch;width:100%;margin-top:4px;";
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = `add-${classNameSuffix}-btn`;
+  button.style.cssText = `
+    flex: 1 1 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    padding: 3px 10px;
+    border: 1px dashed var(--fb-primary-color);
+    border-radius: var(--fb-border-radius);
+    background: transparent;
+    color: var(--fb-primary-color);
+    font-size: var(--fb-font-size-small, var(--fb-font-size));
+    font-weight: 500;
+    font-family: var(--fb-font-family);
+    cursor: pointer;
+    transition: border-color var(--fb-transition-duration), color var(--fb-transition-duration), background-color var(--fb-transition-duration);
+  `;
+  button.textContent = label ? `+ ${label}` : "+";
+  button.addEventListener("mouseenter", () => {
+    if (button.disabled) return;
+    button.style.borderStyle = "solid";
+    button.style.backgroundColor = "var(--fb-background-hover-color)";
+  });
+  button.addEventListener("mouseleave", () => {
+    button.style.borderStyle = "dashed";
+    button.style.backgroundColor = "transparent";
+  });
+  button.onclick = onClick;
+  const counter = document.createElement("span");
+  counter.className = "fb-add-counter";
+  counter.style.cssText = `
+    margin-left: auto;
+    font-size: var(--fb-font-size-small, 0.875rem);
+    color: var(--fb-text-secondary-color);
+    font-weight: 400;
+  `;
+  if (!showCounter) counter.style.display = "none";
+  row.appendChild(button);
+  const update = (current, max) => {
+    const reached = current >= max;
+    row.style.display = reached ? "none" : "flex";
+    button.style.display = reached ? "none" : "inline-flex";
+    button.disabled = reached;
+    if (showCounter) {
+      counter.textContent = `${current}/${max === Infinity ? "\u221E" : max}`;
+    }
+  };
+  return { row, button, counter, update };
+}
+function createSlideAddTile(onClick, options = {}) {
+  var _a;
+  const label = (_a = options.label) != null ? _a : "";
+  const tile = document.createElement("button");
+  tile.type = "button";
+  tile.className = "add-container-btn fb-slide-add";
+  tile.style.cssText = `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    width: 100%;
+    min-height: 180px;
+    align-self: stretch;
+    padding: 24px 16px;
+    border: 1.5px dashed var(--fb-primary-color);
+    border-radius: var(--fb-border-radius);
+    background: transparent;
+    color: var(--fb-primary-color);
+    font-size: var(--fb-font-size-small, var(--fb-font-size));
+    font-weight: 500;
+    font-family: var(--fb-font-family);
+    cursor: pointer;
+    transition: border-color var(--fb-transition-duration), color var(--fb-transition-duration), background-color var(--fb-transition-duration);
+  `;
+  const circle = document.createElement("span");
+  circle.className = "fb-slide-add-circle";
+  circle.style.cssText = `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border: 1px solid var(--fb-primary-color);
+    border-radius: 50%;
+    background: var(--fb-background-color);
+    font-size: 20px;
+    line-height: 1;
+    color: inherit;
+    transition: inherit;
+  `;
+  circle.textContent = "+";
+  tile.appendChild(circle);
+  if (label) {
+    const text = document.createElement("span");
+    text.textContent = label;
+    tile.appendChild(text);
+  }
+  tile.addEventListener("mouseenter", () => {
+    if (tile.disabled) return;
+    tile.style.borderStyle = "solid";
+    tile.style.backgroundColor = "var(--fb-background-hover-color)";
+  });
+  tile.addEventListener("mouseleave", () => {
+    tile.style.borderStyle = "dashed";
+    tile.style.backgroundColor = "transparent";
+  });
+  tile.onclick = onClick;
+  const counter = document.createElement("span");
+  counter.className = "fb-add-counter";
+  counter.style.cssText = `
+    margin-left: auto;
+    font-size: var(--fb-font-size-small, 0.875rem);
+    color: var(--fb-text-secondary-color);
+    font-weight: 400;
+  `;
+  const update = (current, max) => {
+    const reached = current >= max;
+    tile.style.display = reached ? "none" : "flex";
+    tile.disabled = reached;
+    counter.textContent = `${current}/${max === Infinity ? "\u221E" : max}`;
+  };
+  return { tile, counter, update };
+}
+function applyActionButtonStyles(button, isFormLevel = false) {
+  button.style.cssText = `
+    background-color: var(--fb-action-bg-color);
+    color: var(--fb-action-text-color);
+    border: var(--fb-border-width) solid var(--fb-action-border-color);
+    padding: ${isFormLevel ? "0.5rem 1rem" : "0.5rem 0.75rem"};
+    font-size: var(--fb-font-size);
+    font-weight: var(--fb-font-weight-medium);
+    border-radius: var(--fb-border-radius);
+    transition: all var(--fb-transition-duration);
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  `;
+  button.addEventListener("mouseenter", () => {
+    button.style.backgroundColor = "var(--fb-action-hover-bg-color)";
+    button.style.borderColor = "var(--fb-action-hover-border-color)";
+  });
+  button.addEventListener("mouseleave", () => {
+    button.style.backgroundColor = "var(--fb-action-bg-color)";
+    button.style.borderColor = "var(--fb-action-border-color)";
+  });
+}
+
+// src/utils/validation.ts
+function countRuleMessages(element, count, state, keys = { min: "minItems", max: "maxItems" }) {
+  var _a, _b;
+  const minCount = "minCount" in element ? (_a = element.minCount) != null ? _a : 0 : 0;
+  const maxCount = "maxCount" in element ? (_b = element.maxCount) != null ? _b : Infinity : Infinity;
+  const messages = [];
+  if (element.required && count === 0) messages.push(t("required", state));
+  if (count < minCount) messages.push(t(keys.min, state, { min: minCount }));
+  if (count > maxCount) messages.push(t(keys.max, state, { max: maxCount }));
+  return messages;
+}
+function validateItemCount(element, key, filledCount, context, errors) {
+  const messages = countRuleMessages(element, filledCount, context.state);
+  errors.push(...messages.map((message) => `${key}: ${message}`));
+  markFieldGroupValidity(
+    context.scopeRoot,
+    key,
+    joinErrorMessages(messages),
+    context
+  );
+}
+function addLengthHint(element, parts, state) {
+  if (element.minLength != null || element.maxLength != null) {
+    if (element.minLength != null && element.maxLength != null) {
+      parts.push(
+        t("hintLengthRange", state, {
+          min: element.minLength,
+          max: element.maxLength
+        })
+      );
+    } else if (element.maxLength != null) {
+      parts.push(t("hintMaxLength", state, { max: element.maxLength }));
+    } else if (element.minLength != null) {
+      parts.push(t("hintMinLength", state, { min: element.minLength }));
+    }
+  }
+}
+function addRangeHint(element, parts, state) {
+  if (element.min != null || element.max != null) {
+    if (element.min != null && element.max != null) {
+      parts.push(
+        t("hintValueRange", state, { min: element.min, max: element.max })
+      );
+    } else if (element.max != null) {
+      parts.push(t("hintMaxValue", state, { max: element.max }));
+    } else if (element.min != null) {
+      parts.push(t("hintMinValue", state, { min: element.min }));
+    }
+  }
+}
+function addFileSizeHint(element, parts, state) {
+  var _a;
+  const sizeMB = (_a = element.maxSize) != null ? _a : element.maxSizeMB;
+  if (sizeMB && sizeMB !== Infinity) {
+    parts.push(t("hintMaxSize", state, { size: sizeMB }));
+  }
+}
+function addFormatHint(element, parts, state) {
+  var _a;
+  if ((_a = element.accept) == null ? void 0 : _a.extensions) {
+    parts.push(
+      t("hintFormats", state, {
+        formats: element.accept.extensions.map((ext) => ext.toUpperCase()).join(",")
+      })
+    );
+  }
+}
+function addPatternHint(element, parts, state) {
+  if (element.pattern) {
+    parts.push(t("hintPattern", state, { pattern: element.pattern }));
+  }
+}
+function makeFieldHint(element, state) {
+  const parts = [];
+  addLengthHint(element, parts, state);
+  if (element.type !== "slider") {
+    addRangeHint(element, parts, state);
+  }
+  addFileSizeHint(element, parts, state);
+  addFormatHint(element, parts, state);
+  addPatternHint(element, parts, state);
+  return parts.join(" \u2022 ");
+}
+function validateSchema(schema) {
+  const errors = [];
+  if (!schema || typeof schema !== "object") {
+    errors.push("Schema must be an object");
+    return errors;
+  }
+  if (!Array.isArray(schema.elements)) {
+    errors.push("Schema missing elements array");
+    return errors;
+  }
+  if ("columns" in schema && schema.columns !== void 0) {
+    const columns = schema.columns;
+    const validColumns = [1, 2, 3, 4];
+    if (!Number.isInteger(columns) || !validColumns.includes(columns)) {
+      errors.push(`schema.columns must be 1, 2, 3, or 4 (got ${columns})`);
+    }
+  }
+  if ("prefillHints" in schema && schema.prefillHints) {
+    const prefillHints = schema.prefillHints;
+    if (Array.isArray(prefillHints)) {
+      prefillHints.forEach((hint, hintIndex) => {
+        if (!hint.label || typeof hint.label !== "string") {
+          errors.push(
+            `schema.prefillHints[${hintIndex}] must have a 'label' property of type string`
+          );
+        }
+        if (!hint.values || typeof hint.values !== "object") {
+          errors.push(
+            `schema.prefillHints[${hintIndex}] must have a 'values' property of type object`
+          );
+        } else {
+          for (const fieldKey in hint.values) {
+            const fieldExists = schema.elements.some(
+              (element) => element.key === fieldKey
+            );
+            if (!fieldExists) {
+              errors.push(
+                `schema.prefillHints[${hintIndex}] references non-existent field "${fieldKey}"`
+              );
+            }
+          }
+        }
+      });
+    }
+  }
+  function validateContainerProps(element, elementPath, errors2) {
+    if ("columns" in element && element.columns !== void 0) {
+      const columns = element.columns;
+      const validColumns = [1, 2, 3, 4];
+      if (!Number.isInteger(columns) || !validColumns.includes(columns)) {
+        errors2.push(
+          `${elementPath}: columns must be 1, 2, 3, or 4 (got ${columns})`
+        );
+      }
+    }
+    if ("displayMode" in element && element.displayMode !== void 0) {
+      const displayMode = element.displayMode;
+      if (displayMode !== "stack" && displayMode !== "slides") {
+        errors2.push(
+          `${elementPath}: displayMode must be "stack" or "slides" (got ${JSON.stringify(displayMode)})`
+        );
+      }
+    }
+  }
+  function checkFlatOutputCollisions(elements, scopePath) {
+    var _a, _b;
+    const allOutputKeys = /* @__PURE__ */ new Set();
+    for (const el of elements) {
+      if (el.type === "richinput" && el.flatOutput) {
+        const richEl = el;
+        const textKey = (_a = richEl.textKey) != null ? _a : "text";
+        const filesKey = (_b = richEl.filesKey) != null ? _b : "files";
+        for (const otherEl of elements) {
+          if (otherEl === el) continue;
+          if (otherEl.key === textKey) {
+            errors.push(
+              `${scopePath}: RichInput "${el.key}" flatOutput textKey "${textKey}" collides with element key "${otherEl.key}"`
+            );
+          }
+          if (otherEl.key === filesKey) {
+            errors.push(
+              `${scopePath}: RichInput "${el.key}" flatOutput filesKey "${filesKey}" collides with element key "${otherEl.key}"`
+            );
+          }
+        }
+        if (allOutputKeys.has(textKey)) {
+          errors.push(
+            `${scopePath}: RichInput "${el.key}" flatOutput textKey "${textKey}" collides with another flatOutput key`
+          );
+        }
+        if (allOutputKeys.has(filesKey)) {
+          errors.push(
+            `${scopePath}: RichInput "${el.key}" flatOutput filesKey "${filesKey}" collides with another flatOutput key`
+          );
+        }
+        allOutputKeys.add(textKey);
+        allOutputKeys.add(filesKey);
+      } else {
+        if (el.key) {
+          if (allOutputKeys.has(el.key)) {
+            errors.push(
+              `${scopePath}: Element key "${el.key}" collides with a flatOutput richinput key`
+            );
+          }
+          allOutputKeys.add(el.key);
+        }
+      }
+    }
+  }
+  function validateCountBounds(element, elementPath, errors2) {
+    var _a, _b;
+    const el = element;
+    if (el.type === "group") {
+      if (!isPlainObject(el.repeat)) return;
+      checkBounds(
+        elementPath,
+        (_a = el.repeat) == null ? void 0 : _a.min,
+        (_b = el.repeat) == null ? void 0 : _b.max,
+        "repeat.min",
+        "repeat.max",
+        el.required === true,
+        errors2
+      );
+      return;
+    }
+    const isMultiple = el.multiple === true || el.type === "files";
+    if (!isMultiple) return;
+    checkBounds(
+      elementPath,
+      el.minCount,
+      el.maxCount,
+      "minCount",
+      "maxCount",
+      el.required === true,
+      errors2
+    );
+  }
+  function checkBounds(elementPath, minCount, maxCount, minName, maxName, requiredImpliesFloor, errors2) {
+    for (const [name, bound] of [
+      [minName, minCount],
+      [maxName, maxCount]
+    ]) {
+      if (bound !== void 0 && typeof bound !== "number") {
+        errors2.push(
+          `${elementPath}: ${name} must be a number (got ${typeof bound})`
+        );
+      }
+    }
+    const min = typeof minCount === "number" ? minCount : void 0;
+    const max = typeof maxCount === "number" ? maxCount : void 0;
+    if (max !== void 0 && (max < 0 || Number.isNaN(max))) {
+      errors2.push(
+        `${elementPath}: ${maxName} must be a non-negative number or Infinity (got ${max})`
+      );
+    }
+    if (min !== void 0 && (min < 0 || !Number.isFinite(min))) {
+      errors2.push(
+        `${elementPath}: ${minName} must be a finite non-negative number (got ${min})`
+      );
+    }
+    const effectiveMin = min != null ? min : requiredImpliesFloor ? 1 : void 0;
+    if (effectiveMin !== void 0 && max !== void 0 && effectiveMin > max) {
+      const shown = min !== void 0 ? `${minName} (${min})` : `required: true (implies ${minName} 1)`;
+      errors2.push(
+        `${elementPath}: ${shown} cannot be greater than ${maxName} (${max})`
+      );
+    }
+  }
+  function validateElements(elements, path) {
+    const seenKeys = /* @__PURE__ */ new Set();
+    elements.forEach((element, index) => {
+      if (!element.key) return;
+      if (seenKeys.has(element.key)) {
+        errors.push(`${path}[${index}]: duplicate key "${element.key}"`);
+      }
+      seenKeys.add(element.key);
+    });
+    elements.forEach((element, index) => {
+      const elementPath = `${path}[${index}]`;
+      if (!element.type) {
+        errors.push(`${elementPath}: missing type`);
+      }
+      if (!element.key && element.type !== "markdown") {
+        errors.push(`${elementPath}: missing key`);
+      }
+      validateCountBounds(element, elementPath, errors);
+      if (element.type === "number" && "decimals" in element) {
+        const decimals = element.decimals;
+        if (decimals !== void 0 && (!Number.isInteger(decimals) || decimals < 0)) {
+          errors.push(
+            `${elementPath}: decimals must be a non-negative integer (got ${JSON.stringify(decimals)})`
+          );
+        }
+      }
+      if (element.type === "markdown") {
+        const content = element.content;
+        if (typeof content !== "string") {
+          errors.push(
+            `${elementPath}: markdown element requires "content" to be a string (got ${content === null ? "null" : typeof content})`
+          );
+        }
+      }
+      if (element.enableIf) {
+        const enableIf = element.enableIf;
+        if (!enableIf.key || typeof enableIf.key !== "string") {
+          errors.push(
+            `${elementPath}: enableIf must have a 'key' property of type string`
+          );
+        }
+        const hasOperator = "equals" in enableIf;
+        if (!hasOperator) {
+          errors.push(
+            `${elementPath}: enableIf must have at least one operator (equals, etc.)`
+          );
+        }
+      }
+      if (element.type === "group" && "elements" in element && element.elements) {
+        validateElements(element.elements, `${elementPath}.elements`);
+      }
+      if (element.type === "container" && element.elements) {
+        validateContainerProps(element, elementPath, errors);
+        if ("prefillHints" in element && element.prefillHints) {
+          const prefillHints = element.prefillHints;
+          if (Array.isArray(prefillHints)) {
+            prefillHints.forEach((hint, hintIndex) => {
+              if (!hint.label || typeof hint.label !== "string") {
+                errors.push(
+                  `${elementPath}: prefillHints[${hintIndex}] must have a 'label' property of type string`
+                );
+              }
+              if (!hint.values || typeof hint.values !== "object") {
+                errors.push(
+                  `${elementPath}: prefillHints[${hintIndex}] must have a 'values' property of type object`
+                );
+              } else {
+                for (const fieldKey in hint.values) {
+                  const fieldExists = element.elements.some(
+                    (childElement) => childElement.key === fieldKey
+                  );
+                  if (!fieldExists) {
+                    errors.push(
+                      `container "${element.key}": prefillHints[${hintIndex}] references non-existent field "${fieldKey}"`
+                    );
+                  }
+                }
+              }
+            });
+          }
+        }
+        validateElements(element.elements, `${elementPath}.elements`);
+        checkFlatOutputCollisions(element.elements, `${elementPath}.elements`);
+      }
+      if (element.type === "select" && element.options) {
+        const defaultValue = element.default;
+        if (defaultValue !== void 0 && defaultValue !== null && defaultValue !== "") {
+          const hasMatchingOption = element.options.some(
+            (opt) => opt.value === defaultValue
+          );
+          if (!hasMatchingOption) {
+            errors.push(
+              `${elementPath}: default "${defaultValue}" not in options`
+            );
+          }
+        }
+      }
+    });
+  }
+  if (Array.isArray(schema.elements)) {
+    validateElements(schema.elements, "elements");
+    checkFlatOutputCollisions(schema.elements, "elements");
+  }
+  return errors;
+}
+
+// src/utils/enable-conditions.ts
+function getValueByPath(data, path) {
+  if (!data || typeof data !== "object") {
+    return void 0;
+  }
+  const segments = path.match(/[^.[\]]+|\[\d+\]/g);
+  if (!segments || segments.length === 0) {
+    return void 0;
+  }
+  let current = data;
+  for (const segment of segments) {
+    if (current === void 0 || current === null) {
+      return void 0;
     }
-  });
-  textarea.addEventListener("paste", (e) => {
-    var _a, _b, _c, _d;
-    const pasted = (_b = (_a = e.clipboardData) == null ? void 0 : _a.getData("text")) != null ? _b : "";
-    if (!/[\r\n]/.test(pasted)) return;
-    e.preventDefault();
-    const cleaned = pasted.replace(/[\r\n]+/g, " ");
-    const start = (_c = textarea.selectionStart) != null ? _c : textarea.value.length;
-    const end = (_d = textarea.selectionEnd) != null ? _d : textarea.value.length;
-    const before = textarea.value.slice(0, start);
-    const after = textarea.value.slice(end);
-    textarea.value = before + cleaned + after;
-    const pos = start + cleaned.length;
-    textarea.setSelectionRange(pos, pos);
-    textarea.dispatchEvent(new Event("input", { bubbles: true }));
-  });
-}
-function mountCounterInLabel(wrapper, counter) {
-  const labelRow = wrapper.querySelector(
-    ":scope > [data-fb-label-row]"
-  );
-  if (labelRow) labelRow.appendChild(counter);
-}
-function createAddItemRow(classNameSuffix, onClick, options = {}) {
-  var _a;
-  const label = (_a = options.label) != null ? _a : "";
-  const showCounter = options.showCounter !== false;
-  const row = document.createElement("div");
-  row.className = "fb-add-row";
-  row.style.cssText = "display:flex;align-items:stretch;width:100%;margin-top:4px;";
-  const button = document.createElement("button");
-  button.type = "button";
-  button.className = `add-${classNameSuffix}-btn`;
-  button.style.cssText = `
-    flex: 1 1 auto;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    padding: 3px 10px;
-    border: 1px dashed var(--fb-primary-color);
-    border-radius: var(--fb-border-radius);
-    background: transparent;
-    color: var(--fb-primary-color);
-    font-size: var(--fb-font-size-small, var(--fb-font-size));
-    font-weight: 500;
-    font-family: var(--fb-font-family);
-    cursor: pointer;
-    transition: border-color var(--fb-transition-duration), color var(--fb-transition-duration), background-color var(--fb-transition-duration);
-  `;
-  button.textContent = label ? `+ ${label}` : "+";
-  button.addEventListener("mouseenter", () => {
-    if (button.disabled) return;
-    button.style.borderStyle = "solid";
-    button.style.backgroundColor = "var(--fb-background-hover-color)";
-  });
-  button.addEventListener("mouseleave", () => {
-    button.style.borderStyle = "dashed";
-    button.style.backgroundColor = "transparent";
-  });
-  button.onclick = onClick;
-  const counter = document.createElement("span");
-  counter.className = "fb-add-counter";
-  counter.style.cssText = `
-    margin-left: auto;
-    font-size: var(--fb-font-size-small, 0.875rem);
-    color: var(--fb-text-secondary-color);
-    font-weight: 400;
-  `;
-  if (!showCounter) counter.style.display = "none";
-  row.appendChild(button);
-  const update = (current, max) => {
-    const reached = current >= max;
-    row.style.display = reached ? "none" : "flex";
-    button.style.display = reached ? "none" : "inline-flex";
-    button.disabled = reached;
-    if (showCounter) {
-      counter.textContent = `${current}/${max === Infinity ? "\u221E" : max}`;
+    if (segment.startsWith("[") && segment.endsWith("]")) {
+      const index = parseInt(segment.slice(1, -1), 10);
+      if (!Array.isArray(current) || isNaN(index)) {
+        return void 0;
+      }
+      current = current[index];
+    } else {
+      current = current[segment];
     }
-  };
-  return { row, button, counter, update };
+  }
+  return current;
 }
-function createSlideAddTile(onClick, options = {}) {
+function evaluateEnableCondition(condition, formData, containerData) {
   var _a;
-  const label = (_a = options.label) != null ? _a : "";
-  const tile = document.createElement("button");
-  tile.type = "button";
-  tile.className = "add-container-btn fb-slide-add";
-  tile.style.cssText = `
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-    width: 100%;
-    min-height: 180px;
-    align-self: stretch;
-    padding: 24px 16px;
-    border: 1.5px dashed var(--fb-primary-color);
-    border-radius: var(--fb-border-radius);
-    background: transparent;
-    color: var(--fb-primary-color);
-    font-size: var(--fb-font-size-small, var(--fb-font-size));
-    font-weight: 500;
-    font-family: var(--fb-font-family);
-    cursor: pointer;
-    transition: border-color var(--fb-transition-duration), color var(--fb-transition-duration), background-color var(--fb-transition-duration);
-  `;
-  const circle = document.createElement("span");
-  circle.className = "fb-slide-add-circle";
-  circle.style.cssText = `
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    border: 1px solid var(--fb-primary-color);
-    border-radius: 50%;
-    background: var(--fb-background-color);
-    font-size: 20px;
-    line-height: 1;
-    color: inherit;
-    transition: inherit;
-  `;
-  circle.textContent = "+";
-  tile.appendChild(circle);
-  if (label) {
-    const text = document.createElement("span");
-    text.textContent = label;
-    tile.appendChild(text);
+  if (!condition || !condition.key) {
+    throw new Error("Invalid enableIf condition: must have a 'key' property");
   }
-  tile.addEventListener("mouseenter", () => {
-    if (tile.disabled) return;
-    tile.style.borderStyle = "solid";
-    tile.style.backgroundColor = "var(--fb-background-hover-color)";
-  });
-  tile.addEventListener("mouseleave", () => {
-    tile.style.borderStyle = "dashed";
-    tile.style.backgroundColor = "transparent";
-  });
-  tile.onclick = onClick;
-  const counter = document.createElement("span");
-  counter.className = "fb-add-counter";
-  counter.style.cssText = `
-    margin-left: auto;
-    font-size: var(--fb-font-size-small, 0.875rem);
-    color: var(--fb-text-secondary-color);
-    font-weight: 400;
-  `;
-  const update = (current, max) => {
-    const reached = current >= max;
-    tile.style.display = reached ? "none" : "flex";
-    tile.disabled = reached;
-    counter.textContent = `${current}/${max === Infinity ? "\u221E" : max}`;
-  };
-  return { tile, counter, update };
+  const scope = (_a = condition.scope) != null ? _a : "relative";
+  let dataSource;
+  if (scope === "relative") {
+    dataSource = containerData != null ? containerData : formData;
+  } else if (scope === "absolute") {
+    dataSource = formData;
+  } else {
+    throw new Error(
+      `Invalid enableIf scope: must be "relative" or "absolute" (got "${scope}")`
+    );
+  }
+  const actualValue = getValueByPath(dataSource, condition.key);
+  if ("equals" in condition) {
+    return deepEqual(actualValue, condition.equals);
+  }
+  throw new Error(
+    `Invalid enableIf condition: no recognized operator (equals, etc.)`
+  );
 }
-function applyActionButtonStyles(button, isFormLevel = false) {
-  button.style.cssText = `
-    background-color: var(--fb-action-bg-color);
-    color: var(--fb-action-text-color);
-    border: var(--fb-border-width) solid var(--fb-action-border-color);
-    padding: ${isFormLevel ? "0.5rem 1rem" : "0.5rem 0.75rem"};
-    font-size: var(--fb-font-size);
-    font-weight: var(--fb-font-weight-medium);
-    border-radius: var(--fb-border-radius);
-    transition: all var(--fb-transition-duration);
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  `;
-  button.addEventListener("mouseenter", () => {
-    button.style.backgroundColor = "var(--fb-action-hover-bg-color)";
-    button.style.borderColor = "var(--fb-action-hover-border-color)";
-  });
-  button.addEventListener("mouseleave", () => {
-    button.style.backgroundColor = "var(--fb-action-bg-color)";
-    button.style.borderColor = "var(--fb-action-border-color)";
-  });
+function deepEqual(a, b) {
+  if (a === b) return true;
+  if (a == null || b == null) return a === b;
+  if (typeof a !== typeof b) return false;
+  if (typeof a === "object" && typeof b === "object") {
+    try {
+      return JSON.stringify(a) === JSON.stringify(b);
+    } catch (e) {
+      if (e instanceof TypeError && (e.message.includes("circular") || e.message.includes("cyclic"))) {
+        console.warn(
+          "deepEqual: Circular reference detected in enableIf comparison, using reference equality"
+        );
+        return a === b;
+      }
+      throw e;
+    }
+  }
+  return a === b;
 }
 
 // src/components/text.ts
@@ -1195,78 +1363,53 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
   updateRemoveButtons();
 }
 function validateTextElement(element, key, context) {
-  var _a, _b, _c;
+  var _a;
   const errors = [];
-  const { scopeRoot, skipValidation } = context;
-  const validateTextInput = (input, val, fieldKey) => {
-    let hasError = false;
-    const { state } = context;
-    if (!skipValidation && val) {
-      if (element.minLength !== void 0 && element.minLength !== null && val.length < element.minLength) {
-        const msg = t("minLength", state, { min: element.minLength });
-        errors.push(`${fieldKey}: ${msg}`);
-        markFieldValidity(input, msg);
-        hasError = true;
-      } else if (element.maxLength !== void 0 && element.maxLength !== null && val.length > element.maxLength) {
-        const msg = t("maxLength", state, { max: element.maxLength });
-        errors.push(`${fieldKey}: ${msg}`);
-        markFieldValidity(input, msg);
-        hasError = true;
-      } else if (element.pattern) {
-        try {
-          const re = new RegExp(element.pattern);
-          if (!re.test(val)) {
-            const msg = t("patternMismatch", state);
-            errors.push(`${fieldKey}: ${msg}`);
-            markFieldValidity(input, msg);
-            hasError = true;
-          }
-        } catch {
-          const msg = t("invalidPattern", state);
-          errors.push(`${fieldKey}: ${msg}`);
-          markFieldValidity(input, msg);
-          hasError = true;
+  const { scopeRoot, state } = context;
+  const lengthOrPatternError = (val) => {
+    if (!val) return null;
+    if (element.minLength != null && val.length < element.minLength) {
+      return t("minLength", state, { min: element.minLength });
+    }
+    if (element.maxLength != null && val.length > element.maxLength) {
+      return t("maxLength", state, { max: element.maxLength });
+    }
+    if (element.pattern) {
+      try {
+        if (!new RegExp(element.pattern).test(val)) {
+          return t("patternMismatch", state);
         }
+      } catch {
+        return t("invalidPattern", state);
       }
     }
-    if (!hasError) {
-      markFieldValidity(input, null);
-    }
+    return null;
+  };
+  const validateTextInput = (input, val, fieldKey) => {
+    const msg = lengthOrPatternError(val);
+    if (msg !== null) errors.push(`${fieldKey}: ${msg}`);
+    markFieldValidity(input, msg, context);
   };
   if (element.multiple) {
     const inputs = scopeRoot.querySelectorAll(`[name^="${key}\\["]`);
     const values = [];
-    const rawValues = [];
+    let filledCount = 0;
     inputs.forEach((input, index) => {
       var _a2;
       const val = (_a2 = input == null ? void 0 : input.value) != null ? _a2 : "";
-      rawValues.push(val);
       values.push(val === "" ? null : val);
+      if (val.trim() !== "") filledCount++;
       validateTextInput(input, val, `${key}[${index}]`);
     });
-    if (!skipValidation) {
-      const { state } = context;
-      const minCount = (_a = element.minCount) != null ? _a : 0;
-      const maxCount = (_b = element.maxCount) != null ? _b : Infinity;
-      const filteredValues = rawValues.filter((v) => v.trim() !== "");
-      if (element.required && filteredValues.length === 0) {
-        errors.push(`${key}: ${t("required", state)}`);
-      }
-      if (filteredValues.length < minCount) {
-        errors.push(`${key}: ${t("minItems", state, { min: minCount })}`);
-      }
-      if (filteredValues.length > maxCount) {
-        errors.push(`${key}: ${t("maxItems", state, { max: maxCount })}`);
-      }
-    }
+    validateItemCount(element, key, filledCount, context, errors);
     return { value: values, errors };
   } else {
     const input = scopeRoot.querySelector(`[name="${key}"]`);
-    const val = (_c = input == null ? void 0 : input.value) != null ? _c : "";
-    if (!skipValidation && element.required && val === "") {
-      const msg = t("required", context.state);
+    const val = (_a = input == null ? void 0 : input.value) != null ? _a : "";
+    if (element.required && val === "") {
+      const msg = t("required", state);
       errors.push(`${key}: ${msg}`);
-      markFieldValidity(input, msg);
+      markFieldValidity(input, msg, context);
       return { value: null, errors };
     }
     if (input) {
@@ -1288,8 +1431,6 @@ function updateTextField(element, fieldPath, value, context) {
     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 }));
       }
@@ -1303,8 +1444,6 @@ function updateTextField(element, fieldPath, value, context) {
     const input = scopeRoot.querySelector(`[name="${fieldPath}"]`);
     if (input) {
       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 }));
@@ -1810,26 +1949,29 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
   updateRemoveButtons();
 }
 function validateNumberElement(element, key, context) {
-  var _a, _b, _c;
+  var _a;
   const errors = [];
-  const { scopeRoot, skipValidation } = context;
-  const validateNumberInput = (input, v, fieldKey) => {
-    let hasError = false;
-    const { state } = context;
-    if (!skipValidation && element.min !== void 0 && element.min !== null && v < element.min) {
-      const msg = t("minValue", state, { min: element.min });
-      errors.push(`${fieldKey}: ${msg}`);
-      markFieldValidity(input, msg);
-      hasError = true;
-    } else if (!skipValidation && element.max !== void 0 && element.max !== null && v > element.max) {
-      const msg = t("maxValue", state, { max: element.max });
-      errors.push(`${fieldKey}: ${msg}`);
-      markFieldValidity(input, msg);
-      hasError = true;
-    }
-    if (!hasError) {
-      markFieldValidity(input, null);
+  const { scopeRoot, state } = context;
+  const rangeError = (v) => {
+    if (element.min != null && v < element.min) {
+      return t("minValue", state, { min: element.min });
+    }
+    if (element.max != null && v > element.max) {
+      return t("maxValue", state, { max: element.max });
+    }
+    return null;
+  };
+  const validateNumberInput = (input, fieldKey) => {
+    const raw = input.value;
+    if (raw === "") {
+      markFieldValidity(input, null, context);
+      return null;
     }
+    const v = parseFloat(raw);
+    const msg = Number.isFinite(v) ? rangeError(v) : t("notANumber", state);
+    if (msg !== null) errors.push(`${fieldKey}: ${msg}`);
+    markFieldValidity(input, msg, context);
+    return Number.isFinite(v) ? applyDecimals(v, element.decimals) : null;
   };
   if (element.multiple) {
     const inputs = scopeRoot.querySelectorAll(
@@ -1837,63 +1979,21 @@ function validateNumberElement(element, key, context) {
     );
     const values = [];
     inputs.forEach((input, index) => {
-      var _a2;
-      const raw = (_a2 = input == null ? void 0 : input.value) != null ? _a2 : "";
-      if (raw === "") {
-        values.push(null);
-        markFieldValidity(input, null);
-        return;
-      }
-      const v = parseFloat(raw);
-      if (!skipValidation && !Number.isFinite(v)) {
-        const msg = t("notANumber", context.state);
-        errors.push(`${key}[${index}]: ${msg}`);
-        markFieldValidity(input, msg);
-        values.push(null);
-        return;
-      }
-      validateNumberInput(input, v, `${key}[${index}]`);
-      values.push(applyDecimals(v, element.decimals));
+      values.push(validateNumberInput(input, `${key}[${index}]`));
     });
-    if (!skipValidation) {
-      const { state } = context;
-      const minCount = (_a = element.minCount) != null ? _a : 0;
-      const maxCount = (_b = element.maxCount) != null ? _b : Infinity;
-      const filteredValues = values.filter((v) => v !== null);
-      if (element.required && filteredValues.length === 0) {
-        errors.push(`${key}: ${t("required", state)}`);
-      }
-      if (filteredValues.length < minCount) {
-        errors.push(`${key}: ${t("minItems", state, { min: minCount })}`);
-      }
-      if (filteredValues.length > maxCount) {
-        errors.push(`${key}: ${t("maxItems", state, { max: maxCount })}`);
-      }
-    }
+    const filledCount = values.filter((v) => v !== null).length;
+    validateItemCount(element, key, filledCount, context, errors);
     return { value: values, errors };
   } else {
     const input = scopeRoot.querySelector(`[name="${key}"]`);
-    const raw = (_c = input == null ? void 0 : input.value) != null ? _c : "";
-    const { state } = context;
-    if (!skipValidation && element.required && raw === "") {
+    if (element.required && ((_a = input == null ? void 0 : input.value) != null ? _a : "") === "") {
       const msg = t("required", state);
       errors.push(`${key}: ${msg}`);
-      markFieldValidity(input, msg);
-      return { value: null, errors };
-    }
-    if (raw === "") {
-      markFieldValidity(input, null);
-      return { value: null, errors };
-    }
-    const v = parseFloat(raw);
-    if (!skipValidation && !Number.isFinite(v)) {
-      const msg = t("notANumber", state);
-      errors.push(`${key}: ${msg}`);
-      markFieldValidity(input, msg);
+      markFieldValidity(input, msg, context);
       return { value: null, errors };
     }
-    validateNumberInput(input, v, key);
-    return { value: applyDecimals(v, element.decimals), errors };
+    if (!input) return { value: null, errors };
+    return { value: validateNumberInput(input, key), errors };
   }
 }
 function applyDecimals(v, decimals) {
@@ -1915,8 +2015,6 @@ function updateNumberField(element, fieldPath, value, context) {
     inputs.forEach((input, index) => {
       if (index < value.length) {
         input.value = value[index] != null ? String(value[index]) : "";
-        input.classList.remove("invalid");
-        input.title = "";
         clearFieldError(input);
       }
     });
@@ -1931,8 +2029,6 @@ function updateNumberField(element, fieldPath, value, context) {
     );
     if (input) {
       input.value = value != null ? String(value) : "";
-      input.classList.remove("invalid");
-      input.title = "";
       clearFieldError(input);
     }
   }
@@ -2126,24 +2222,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
 function validateSelectElement(element, key, context) {
   var _a;
   const errors = [];
-  const { scopeRoot, skipValidation } = context;
-  const validateMultipleCount = (key2, values, element2, filterFn) => {
-    var _a2, _b;
-    if (skipValidation) return;
-    const { state } = context;
-    const filteredValues = values.filter(filterFn);
-    const minCount = "minCount" in element2 ? (_a2 = element2.minCount) != null ? _a2 : 0 : 0;
-    const maxCount = "maxCount" in element2 ? (_b = element2.maxCount) != null ? _b : Infinity : Infinity;
-    if (element2.required && filteredValues.length === 0) {
-      errors.push(`${key2}: ${t("required", state)}`);
-    }
-    if (filteredValues.length < minCount) {
-      errors.push(`${key2}: ${t("minItems", state, { min: minCount })}`);
-    }
-    if (filteredValues.length > maxCount) {
-      errors.push(`${key2}: ${t("maxItems", state, { max: maxCount })}`);
-    }
-  };
+  const { scopeRoot } = context;
   if ("multiple" in element && element.multiple) {
     const inputs = scopeRoot.querySelectorAll(
       `[name^="${key}\\["]`
@@ -2153,21 +2232,21 @@ function validateSelectElement(element, key, context) {
       var _a2;
       const val = (_a2 = input == null ? void 0 : input.value) != null ? _a2 : "";
       values.push(val === "" ? null : val);
-      markFieldValidity(input, null);
+      markFieldValidity(input, null, context);
     });
-    validateMultipleCount(key, values, element, (v) => v != null);
+    const filledCount = values.filter((v) => v != null).length;
+    validateItemCount(element, key, filledCount, context, errors);
     return { value: values, errors };
   } else {
     const input = scopeRoot.querySelector(`[name="${key}"]`);
     const val = (_a = input == null ? void 0 : input.value) != null ? _a : "";
-    if (!skipValidation && element.required && val === "") {
+    if (element.required && val === "") {
       const msg = t("required", context.state);
       errors.push(`${key}: ${msg}`);
-      markFieldValidity(input, msg);
+      markFieldValidity(input, msg, context);
       return { value: null, errors };
-    } else {
-      markFieldValidity(input, null);
     }
+    markFieldValidity(input, null, context);
     return { value: val === "" ? null : val, errors };
   }
 }
@@ -2208,8 +2287,6 @@ function updateSelectField(element, fieldPath, value, context) {
         options.forEach((option) => {
           option.selected = option.value === strValue;
         });
-        select.classList.remove("invalid");
-        select.title = "";
         clearFieldError(select);
       }
     });
@@ -2230,8 +2307,6 @@ function updateSelectField(element, fieldPath, value, context) {
       options.forEach((option) => {
         option.selected = option.value === strValue;
       });
-      select.classList.remove("invalid");
-      select.title = "";
       clearFieldError(select);
     }
   }
@@ -2558,27 +2633,11 @@ function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
 function validateSwitcherElement(element, key, context) {
   var _a;
   const errors = [];
-  const { scopeRoot, skipValidation } = context;
-  const validateMultipleCount = (fieldKey, values, el, filterFn) => {
-    var _a2, _b;
-    if (skipValidation) return;
-    const { state } = context;
-    const filteredValues = values.filter(filterFn);
-    const minCount = "minCount" in el ? (_a2 = el.minCount) != null ? _a2 : 0 : 0;
-    const maxCount = "maxCount" in el ? (_b = el.maxCount) != null ? _b : Infinity : Infinity;
-    if (el.required && filteredValues.length === 0) {
-      errors.push(`${fieldKey}: ${t("required", state)}`);
-    }
-    if (filteredValues.length < minCount) {
-      errors.push(`${fieldKey}: ${t("minItems", state, { min: minCount })}`);
-    }
-    if (filteredValues.length > maxCount) {
-      errors.push(`${fieldKey}: ${t("maxItems", state, { max: maxCount })}`);
-    }
-  };
+  const { scopeRoot, state } = context;
   const validOptionValues = new Set(
     "options" in element ? element.options.map((o) => o.value) : []
   );
+  const optionError = (val) => val !== "" && !validOptionValues.has(val) ? t("invalidOption", state) : null;
   if ("multiple" in element && element.multiple) {
     const inputs = scopeRoot.querySelectorAll(
       `input[type="hidden"][name^="${key}\\["]`
@@ -2588,37 +2647,37 @@ function validateSwitcherElement(element, key, context) {
       var _a2;
       const val = (_a2 = input == null ? void 0 : input.value) != null ? _a2 : "";
       values.push(val === "" ? null : val);
-      if (!skipValidation && val !== "" && !validOptionValues.has(val)) {
-        const msg = t("invalidOption", context.state);
-        markFieldValidity(input, msg);
-        errors.push(`${key}: ${msg}`);
-      } else {
-        markFieldValidity(input, null);
-      }
+      const msg = optionError(val);
+      if (msg !== null) errors.push(`${key}: ${msg}`);
+      markFieldValidity(switcherGroupOf(input), msg, context);
     });
-    validateMultipleCount(key, values, element, (v) => v != null);
+    const filledCount = values.filter((v) => v != null).length;
+    validateItemCount(element, key, filledCount, context, errors);
     return { value: values, errors };
   } else {
     const input = scopeRoot.querySelector(
       `input[type="hidden"][name="${key}"]`
     );
     const val = (_a = input == null ? void 0 : input.value) != null ? _a : "";
-    if (!skipValidation && element.required && val === "") {
-      const msg = t("required", context.state);
-      errors.push(`${key}: ${msg}`);
-      markFieldValidity(input, msg);
-      return { value: null, errors };
-    }
-    if (!skipValidation && val !== "" && !validOptionValues.has(val)) {
-      const msg = t("invalidOption", context.state);
+    const msg = element.required && val === "" ? t("required", state) : optionError(val);
+    if (input) markFieldValidity(switcherGroupOf(input), msg, context);
+    if (msg !== null) {
       errors.push(`${key}: ${msg}`);
-      markFieldValidity(input, msg);
       return { value: null, errors };
     }
-    markFieldValidity(input, null);
     return { value: val === "" ? null : val, errors };
   }
 }
+function switcherGroupOf(input) {
+  var _a;
+  const group = (_a = input.parentElement) == null ? void 0 : _a.querySelector(".fb-switcher-group");
+  if (!group) {
+    throw new Error(
+      `switcher "${input.name}": no .fb-switcher-group next to its hidden input`
+    );
+  }
+  return group;
+}
 function updateSwitcherField(element, fieldPath, value, context) {
   var _a;
   const { scopeRoot } = context;
@@ -2648,9 +2707,7 @@ function updateSwitcherField(element, fieldPath, value, context) {
             }
           });
         }
-        input.classList.remove("invalid");
-        input.title = "";
-        clearFieldError(input);
+        clearFieldError(switcherGroupOf(input));
       }
     });
     if (value.length !== inputs.length) {
@@ -2676,9 +2733,7 @@ function updateSwitcherField(element, fieldPath, value, context) {
           }
         });
       }
-      input.classList.remove("invalid");
-      input.title = "";
-      clearFieldError(input);
+      clearFieldError(switcherGroupOf(input));
     }
   }
 }
@@ -3206,14 +3261,20 @@ function ensureFileStyles() {
   padding: 6px;
 }
 
-/* \u2500\u2500\u2500 Clear-all row below multi grid \u2500\u2500\u2500 */
-.fb-clear-all-row {
+/* \u2500\u2500\u2500 Footer row below multi grid: N/max counter + clear-all \u2500\u2500\u2500 */
+.fb-multi-footer {
   margin-top: 10px;
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  gap: 8px;
+}
+.fb-files-counter {
+  font-size: var(--fb-font-size-small, 12px);
+  color: var(--fb-text-secondary-color, #6b7280);
+  font-variant-numeric: tabular-nums;
 }
 .fb-clear-all-btn {
+  margin-left: auto;
   font-size: 12px;
   color: #94a3b8;
   background: none;
@@ -3463,24 +3524,55 @@ function createFileTile() {
   tile.className = "fb-tile";
   return tile;
 }
-function showFileError(container, message) {
-  var _a, _b;
-  const existing = (_a = container.closest("[data-files-wrapper]")) == null ? void 0 : _a.querySelector(".file-error-message");
-  if (existing) existing.remove();
-  const errorEl = document.createElement("div");
-  errorEl.className = "file-error-message error-message";
-  errorEl.style.cssText = `
-    color: var(--fb-error-color);
-    font-size: var(--fb-font-size-small);
-    margin-top: 0.25rem;
-  `;
-  errorEl.textContent = message;
-  (_b = container.closest("[data-files-wrapper]")) == null ? void 0 : _b.appendChild(errorEl);
-}
-function clearFileError(container) {
+function fileErrorSlot(container) {
   var _a;
-  const existing = (_a = container.closest("[data-files-wrapper]")) == null ? void 0 : _a.querySelector(".file-error-message");
-  if (existing) existing.remove();
+  const wrapper = container.closest("[data-files-wrapper]");
+  const node = wrapper ? (_a = Array.from(wrapper.children).find(
+    (child) => child instanceof HTMLElement && child.classList.contains("file-error-message")
+  )) != null ? _a : null : null;
+  return { wrapper, node };
+}
+function showFileError(container, message, state, kind = "action") {
+  const { wrapper, node: existing } = fileErrorSlot(container);
+  if (!wrapper) return;
+  let node = existing;
+  if (!node) {
+    node = createErrorNode(state, "file-error-message error-message");
+    wrapper.appendChild(node);
+  }
+  setAttr(node, "data-error-kind", kind);
+  if (node.textContent !== message) node.textContent = message;
+  if (kind === "action") {
+    setAttr(node, "role", "alert");
+    unsetInvalidState(wrapper);
+    linkDescription(wrapper, node);
+  } else {
+    node.removeAttribute("role");
+    setInvalidMark(wrapper, node, state);
+  }
+}
+function clearFileError(container, kind = "action") {
+  const { wrapper, node } = fileErrorSlot(container);
+  if (wrapper && (node == null ? void 0 : node.dataset.errorKind) === kind) {
+    clearInvalidMark(wrapper, node);
+  }
+}
+function markFileValidity(wrapper, message, scope) {
+  const mark = resolveMark(wrapper, message, scope);
+  if (mark === void 0) return;
+  const { node } = fileErrorSlot(wrapper);
+  if (scope.readonly) {
+    clearInvalidMark(wrapper, node);
+    return;
+  }
+  if (mark === null) {
+    clearFileError(wrapper, "validation");
+    return;
+  }
+  if (scope.draftMarks && node && node.dataset.errorKind !== "validation") {
+    return;
+  }
+  showFileError(wrapper, mark, scope.state, "validation");
 }
 function addDeleteButton(container, state, onDelete) {
   const existingOverlay = container.querySelector(".delete-overlay");
@@ -4350,7 +4442,8 @@ async function handleFileSelect(opts) {
     const formats = allowedExtensions.join(", ");
     showFileError(
       container,
-      t("invalidFileExtension", state, { name: file.name, formats })
+      t("invalidFileExtension", state, { name: file.name, formats }),
+      state
     );
     return;
   }
@@ -4358,14 +4451,16 @@ async function handleFileSelect(opts) {
     const mimes = allowedMimes.join(", ");
     showFileError(
       container,
-      t("invalidFileMime", state, { name: file.name, type: file.type, mimes })
+      t("invalidFileMime", state, { name: file.name, type: file.type, mimes }),
+      state
     );
     return;
   }
   if (!isFileSizeAllowed(file, maxSizeMB)) {
     showFileError(
       container,
-      t("fileTooLarge", state, { name: file.name, maxSize: maxSizeMB })
+      t("fileTooLarge", state, { name: file.name, maxSize: maxSizeMB }),
+      state
     );
     return;
   }
@@ -4562,7 +4657,7 @@ async function runMultiFileBatch(opts, files, listEl, errorTarget) {
     state
   );
   if (errorTarget) {
-    if (errorMessage) showFileError(errorTarget, errorMessage);
+    if (errorMessage) showFileError(errorTarget, errorMessage, state);
     else clearFileError(errorTarget);
   }
   const handle = coordinator.beginBatch(accepted.length);
@@ -4581,11 +4676,8 @@ async function runMultiFileBatch(opts, files, listEl, errorTarget) {
   }
   const { wasLast } = handle.end();
   if (wasLast) updateCallback();
-  if (errorTarget) {
-    const combined = buildBatchErrorMessage(errorMessage, failures, state);
-    if (combined) showFileError(errorTarget, combined);
-    else clearFileError(errorTarget);
-  }
+  const combined = buildBatchErrorMessage(errorMessage, failures, state);
+  if (errorTarget && combined) showFileError(errorTarget, combined, state);
 }
 function setupFilesDropHandler(opts) {
   const { filesContainer } = opts;
@@ -4700,7 +4792,7 @@ async function handleLibraryPickMulti(opts) {
       selectedResourceIds: knownRids
     });
   } catch (error) {
-    showFileError(wrapper, extractPickerError(error, state));
+    showFileError(wrapper, extractPickerError(error, state), state);
     return;
   }
   if (picked.length === 0) return;
@@ -4728,7 +4820,8 @@ async function handleLibraryPickMulti(opts) {
     if (skipped > 0) {
       showFileError(
         wrapper,
-        t("filesLimitExceeded", state, { skipped, max: maxCount })
+        t("filesLimitExceeded", state, { skipped, max: maxCount }),
+        state
       );
     }
     return;
@@ -4737,7 +4830,8 @@ async function handleLibraryPickMulti(opts) {
   if (skipped > 0) {
     showFileError(
       wrapper,
-      t("filesLimitExceeded", state, { skipped, max: maxCount })
+      t("filesLimitExceeded", state, { skipped, max: maxCount }),
+      state
     );
   }
   for (const resource of accepted) {
@@ -4775,7 +4869,7 @@ async function handleLibraryPickSingle(state, element, container, fileWrapper, p
       selectedResourceIds: []
     });
   } catch (error) {
-    showFileError(container, extractPickerError(error, state));
+    showFileError(container, extractPickerError(error, state), state);
     return;
   }
   if (picked.length === 0) return;
@@ -4788,7 +4882,7 @@ async function handleLibraryPickSingle(state, element, container, fileWrapper, p
     state
   );
   if (validationError !== null) {
-    showFileError(container, validationError);
+    showFileError(container, validationError, state);
     return;
   }
   clearFileError(container);
@@ -5031,10 +5125,7 @@ function buildPlaceholderTile(isDragOver = false) {
   div.className = `fb-multi-placeholder fb-checker${isDragOver ? " fb-drag-over" : ""}`;
   return div;
 }
-function buildClearAllRow(state, ridCount, onClearAll) {
-  if (ridCount <= 1) return null;
-  const row = document.createElement("div");
-  row.className = "fb-clear-all-row";
+function buildClearAllButton(state, onClearAll) {
   const clearBtn = document.createElement("button");
   clearBtn.type = "button";
   clearBtn.className = "fb-clear-all-btn";
@@ -5045,9 +5136,38 @@ function buildClearAllRow(state, ridCount, onClearAll) {
       onClearAll();
     }
   };
-  row.appendChild(clearBtn);
+  return clearBtn;
+}
+function buildFooterRow(state, ridCount, maxCount, onClearAll) {
+  const showCounter = maxCount !== Infinity;
+  const showClearAll = onClearAll !== void 0 && ridCount > 1;
+  if (!showCounter && !showClearAll) return null;
+  const row = document.createElement("div");
+  row.className = "fb-multi-footer";
+  if (showCounter) {
+    const counter = document.createElement("span");
+    counter.className = "fb-files-counter";
+    counter.textContent = t("filesCounter", state, {
+      count: ridCount,
+      max: maxCount
+    });
+    row.appendChild(counter);
+  }
+  if (showClearAll) row.appendChild(buildClearAllButton(state, onClearAll));
   return row;
 }
+function syncOverLimitError(container, ridCount, maxCount, state) {
+  if (ridCount > maxCount) {
+    showFileError(
+      container,
+      t("maxFiles", state, { max: maxCount }),
+      state,
+      "limit"
+    );
+  } else {
+    clearFileError(container, "limit");
+  }
+}
 var gridResizeObservers = /* @__PURE__ */ new WeakMap();
 var gridMeasureFrames = /* @__PURE__ */ new WeakMap();
 function cancelPendingMeasure(container) {
@@ -5143,6 +5263,7 @@ function renderResourcePills(opts) {
         grid2.appendChild(tile);
       }
     }
+    clearFileError(container, "limit");
     return;
   }
   const outerDiv = document.createElement("div");
@@ -5222,10 +5343,14 @@ function renderResourcePills(opts) {
       }
     }
   });
-  if (onClearAll) {
-    const row = buildClearAllRow(state, ridList.length, onClearAll);
-    if (row) container.appendChild(row);
-  }
+  const footer = buildFooterRow(
+    state,
+    ridList.length,
+    effectiveMax,
+    onClearAll
+  );
+  if (footer) container.appendChild(footer);
+  syncOverLimitError(container, ridList.length, effectiveMax, state);
 }
 function renderFileElementEdit(element, ctx, wrapper, pathKey) {
   var _a, _b;
@@ -5378,9 +5503,10 @@ function buildAcceptAttribute(accept) {
     ...(_c = accept.mime) != null ? _c : []
   ].join(",");
 }
-function setupMultiFileEditMode(element, ctx, wrapper, pathKey, maxFiles) {
-  var _a, _b;
+function renderMultiFileElementEdit(element, ctx, wrapper, pathKey) {
+  var _a, _b, _c;
   const state = ctx.state;
+  const maxFiles = (_a = element.maxCount) != null ? _a : Infinity;
   const filesWrapper = document.createElement("div");
   filesWrapper.className = "fb-row";
   filesWrapper.dataset.filesWrapper = pathKey;
@@ -5406,7 +5532,7 @@ function setupMultiFileEditMode(element, ctx, wrapper, pathKey, maxFiles) {
     allowedMimes: getAllowedMimes(element.accept),
     // Prefer schema's `maxSize`; fall back to legacy `maxSizeMB` for
     // backward compatibility (matches addFileSizeHint in validation.ts).
-    maxSize: (_b = (_a = element.maxSize) != null ? _a : element.maxSizeMB) != null ? _b : Infinity
+    maxSize: (_c = (_b = element.maxSize) != null ? _b : element.maxSizeMB) != null ? _c : Infinity
   };
   const openPicker = () => {
     filesPicker.click();
@@ -5549,7 +5675,7 @@ function setupMultiFileEditMode(element, ctx, wrapper, pathKey, maxFiles) {
       state,
       !currentlyReadonly,
       currentlyReadonly ? null : () => {
-        var _a2, _b2, _c;
+        var _a2, _b2, _c2;
         releaseLocalFileUrl((_a2 = state.resourceIndex.get(rid)) == null ? void 0 : _a2.file);
         const idx = initialFiles.indexOf(rid);
         if (idx > -1) {
@@ -5567,7 +5693,7 @@ function setupMultiFileEditMode(element, ctx, wrapper, pathKey, maxFiles) {
           return;
         }
         pendingRemovals.add(rid);
-        (_c = list.querySelector(`[data-resource-id="${rid}"]`)) == null ? void 0 : _c.remove();
+        (_c2 = list.querySelector(`[data-resource-id="${rid}"]`)) == null ? void 0 : _c2.remove();
         if (ctx.instance && pathKey && !state.config.readonly) {
           ctx.instance.triggerOnChange(pathKey, initialFiles);
         }
@@ -5588,22 +5714,24 @@ function setupMultiFileEditMode(element, ctx, wrapper, pathKey, maxFiles) {
   };
   setupFilesDropHandler({ ...sharedHandlerOpts, filesContainer });
   setupFilesPickerHandler({ ...sharedHandlerOpts, filesPicker });
+  state.multiFileSetters.set(filesWrapper, (resourceIds) => {
+    var _a2;
+    if (coordinator.hasInFlightBatches()) {
+      throw new Error(
+        `setFormData/updateField: file field "${pathKey}" has uploads in flight; set its value after they settle`
+      );
+    }
+    for (const rid of initialFiles) {
+      if (!resourceIds.includes(rid)) {
+        releaseLocalFileUrl((_a2 = state.resourceIndex.get(rid)) == null ? void 0 : _a2.file);
+      }
+    }
+    initialFiles.splice(0, initialFiles.length, ...resourceIds);
+    updateFilesDisplay();
+  });
   updateFilesDisplay();
   wrapper.appendChild(filesWrapper);
 }
-function renderFilesElementEdit(element, ctx, wrapper, pathKey) {
-  setupMultiFileEditMode(element, ctx, wrapper, pathKey, Infinity);
-}
-function renderMultipleFileElementEdit(element, ctx, wrapper, pathKey) {
-  var _a;
-  setupMultiFileEditMode(
-    element,
-    ctx,
-    wrapper,
-    pathKey,
-    (_a = element.maxCount) != null ? _a : Infinity
-  );
-}
 
 // src/components/file/validate.ts
 function readMultiFileResourceIds(scopeRoot, fullKey) {
@@ -5625,90 +5753,103 @@ function readMultiFileResourceIds(scopeRoot, fullKey) {
   }
   return parsed;
 }
-function validateFileCount(key, resourceIds, element, state, errors) {
-  var _a, _b;
-  const minFiles = "minCount" in element ? (_a = element.minCount) != null ? _a : 0 : 0;
-  const maxFiles = "maxCount" in element ? (_b = element.maxCount) != null ? _b : Infinity : Infinity;
-  if (element.required && resourceIds.length === 0) {
-    errors.push(`${key}: ${t("required", state)}`);
-  }
-  if (resourceIds.length < minFiles) {
-    errors.push(`${key}: ${t("minFiles", state, { min: minFiles })}`);
-  }
-  if (resourceIds.length > maxFiles) {
-    errors.push(`${key}: ${t("maxFiles", state, { max: maxFiles })}`);
-  }
-}
-function validateFileTypes(key, resourceIds, element, state, errors) {
+function validateFileTypes(resourceIds, element, state) {
   var _a, _b;
+  const messages = [];
   const acceptField = "accept" in element ? element.accept : void 0;
   const allowedExtensions = getAllowedExtensions(acceptField);
   const allowedMimes = getAllowedMimes(acceptField);
-  if (allowedExtensions.length === 0 && allowedMimes.length === 0) return;
+  if (allowedExtensions.length === 0 && allowedMimes.length === 0) {
+    return messages;
+  }
   const formats = allowedExtensions.join(", ");
   const mimes = allowedMimes.join(", ");
   for (const rid of resourceIds) {
     const meta = state.resourceIndex.get(rid);
     const fileName = (_a = meta == null ? void 0 : meta.name) != null ? _a : rid;
     if (allowedExtensions.length > 0 && !isFileExtensionAllowed(fileName, allowedExtensions)) {
-      errors.push(
-        `${key}: ${t("invalidFileExtension", state, { name: fileName, formats })}`
+      messages.push(
+        t("invalidFileExtension", state, { name: fileName, formats })
       );
       continue;
     }
     if (allowedMimes.length > 0 && !(meta == null ? void 0 : meta.inferredFromExtension)) {
       const mimeType = (_b = meta == null ? void 0 : meta.type) != null ? _b : "";
       if (!isMimeAllowed(mimeType, allowedMimes)) {
-        errors.push(
-          `${key}: ${t("invalidFileMime", state, { name: fileName, type: mimeType, mimes })}`
+        messages.push(
+          t("invalidFileMime", state, {
+            name: fileName,
+            type: mimeType,
+            mimes
+          })
         );
       }
     }
   }
+  return messages;
 }
-function validateFileSizes(key, resourceIds, element, state, errors) {
+function validateFileSizes(resourceIds, element, state) {
   var _a;
+  const messages = [];
   const maxSizeMB = "maxSize" in element ? (_a = element.maxSize) != null ? _a : Infinity : Infinity;
-  if (maxSizeMB === Infinity) return;
+  if (maxSizeMB === Infinity) return messages;
   for (const rid of resourceIds) {
     const meta = state.resourceIndex.get(rid);
     if (!meta) continue;
     if (meta.size > maxSizeMB * 1024 * 1024) {
-      errors.push(
-        `${key}: ${t("fileTooLarge", state, { name: meta.name, maxSize: maxSizeMB })}`
+      messages.push(
+        t("fileTooLarge", state, { name: meta.name, maxSize: maxSizeMB })
       );
     }
   }
+  return messages;
+}
+function reportFileMessages(scopeRoot, wrapperKey, key, messages, context) {
+  const wrapper = scopeRoot.querySelector(
+    `[data-files-wrapper="${wrapperKey}"]`
+  );
+  if (wrapper) {
+    markFileValidity(wrapper, joinErrorMessages(messages), context);
+  }
+  return messages.map((message) => `${key}: ${message}`);
 }
 function validateMultiFile(element, key, context) {
-  const { scopeRoot, skipValidation, path, state } = context;
-  const errors = [];
+  const { scopeRoot, path, state } = context;
   const fullKey = pathJoin(path, key);
   const resourceIds = readMultiFileResourceIds(scopeRoot, fullKey);
-  if (!skipValidation) {
-    validateFileCount(key, resourceIds, element, state, errors);
-    validateFileTypes(key, resourceIds, element, state, errors);
-    validateFileSizes(key, resourceIds, element, state, errors);
-  }
-  return { value: resourceIds, errors };
+  const messages = [
+    ...countRuleMessages(element, resourceIds.length, state, {
+      min: "minFiles",
+      max: "maxFiles"
+    }),
+    ...validateFileTypes(resourceIds, element, state),
+    ...validateFileSizes(resourceIds, element, state)
+  ];
+  return {
+    value: resourceIds,
+    errors: reportFileMessages(scopeRoot, fullKey, key, messages, context)
+  };
 }
 function validateSingleFile(element, key, context) {
   var _a;
-  const { scopeRoot, skipValidation, state } = context;
-  const errors = [];
+  const { scopeRoot, state } = context;
   const input = scopeRoot.querySelector(
     `input[name="${key}"][type="hidden"]`
   );
   const rid = (_a = input == null ? void 0 : input.value) != null ? _a : "";
-  if (!skipValidation && element.required && rid === "") {
-    errors.push(`${key}: ${t("required", state)}`);
-    return { value: null, errors };
-  }
-  if (!skipValidation && rid !== "") {
-    validateFileTypes(key, [rid], element, state, errors);
-    validateFileSizes(key, [rid], element, state, errors);
+  let messages = [];
+  if (element.required && rid === "") {
+    messages = [t("required", state)];
+  } else if (rid !== "") {
+    messages = [
+      ...validateFileTypes([rid], element, state),
+      ...validateFileSizes([rid], element, state)
+    ];
   }
-  return { value: rid || null, errors };
+  return {
+    value: rid || null,
+    errors: reportFileMessages(scopeRoot, key, key, messages, context)
+  };
 }
 function validateFileElement(element, key, context) {
   const isMultipleField = element.type === "files" || "multiple" in element && Boolean(element.multiple);
@@ -5758,12 +5899,20 @@ function buildEmptyReadonlyTile(state) {
   return emptyState;
 }
 function renderMultiFileReadonly(rids, state, wrapper, pathKey, _marginTop) {
-  addPrefillFilesToIndex(rids, state.resourceIndex);
-  ensureFileStyles();
   const filesWrapper = document.createElement("div");
   filesWrapper.dataset.filesWrapper = pathKey;
-  filesWrapper.dataset.resourceIds = JSON.stringify(rids);
   wrapper.appendChild(filesWrapper);
+  state.multiFileSetters.set(
+    filesWrapper,
+    (resourceIds) => fillReadonlyGrid(resourceIds, state, filesWrapper)
+  );
+  fillReadonlyGrid(rids, state, filesWrapper);
+}
+function fillReadonlyGrid(rids, state, filesWrapper) {
+  addPrefillFilesToIndex(rids, state.resourceIndex);
+  ensureFileStyles();
+  filesWrapper.dataset.resourceIds = JSON.stringify(rids);
+  filesWrapper.replaceChildren();
   if (rids.length === 0) {
     const emptyEl = document.createElement("div");
     emptyEl.className = "fb-tile-empty-text";
@@ -5823,14 +5972,14 @@ function renderFilesElement(element, ctx, wrapper, pathKey) {
   if (isElementReadonly(element, ctx.state, ctx)) {
     renderFilesElementReadonly(element, ctx, wrapper, pathKey);
   } else {
-    renderFilesElementEdit(element, ctx, wrapper, pathKey);
+    renderMultiFileElementEdit(element, ctx, wrapper, pathKey);
   }
 }
 function renderMultipleFileElement(element, ctx, wrapper, pathKey) {
   if (isElementReadonly(element, ctx.state, ctx)) {
     renderMultipleFileElementReadonly(element, ctx, wrapper, pathKey);
   } else {
-    renderMultipleFileElementEdit(element, ctx, wrapper, pathKey);
+    renderMultiFileElementEdit(element, ctx, wrapper, pathKey);
   }
 }
 function updateFileField(element, fieldPath, value, context) {
@@ -5850,13 +5999,19 @@ function updateFileField(element, fieldPath, value, context) {
     const filesWrapper = scopeRoot.querySelector(
       `[data-files-wrapper="${fieldPath}"]`
     );
-    if (filesWrapper) {
-      filesWrapper.dataset.resourceIds = JSON.stringify(value);
-    } else {
+    if (!filesWrapper) {
       console.warn(
         `updateFileField: [data-files-wrapper="${fieldPath}"] not found in DOM; data-resource-ids not updated`
       );
+      return;
+    }
+    const setFiles = state.multiFileSetters.get(filesWrapper);
+    if (!setFiles) {
+      throw new Error(
+        `updateFileField: [data-files-wrapper="${fieldPath}"] has no registered setter; this is a render bug`
+      );
     }
+    setFiles(value);
   } else {
     const hiddenInput = scopeRoot.querySelector(
       `input[name="${fieldPath}"][type="hidden"]`
@@ -6191,30 +6346,20 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
   }
 }
 function validateColourElement(element, key, context) {
-  var _a, _b, _c;
+  var _a;
   const errors = [];
-  const { scopeRoot, skipValidation } = context;
+  const { scopeRoot, state } = context;
   const validateColourValue = (input, val, fieldKey) => {
-    const { state } = context;
+    const normalized = val ? normalizeColourValue(val) : "";
+    let msg = null;
     if (!val) {
-      if (!skipValidation && element.required) {
-        const msg = t("required", state);
-        errors.push(`${fieldKey}: ${msg}`);
-        markFieldValidity(input, msg);
-        return "";
-      }
-      markFieldValidity(input, null);
-      return "";
-    }
-    const normalized = normalizeColourValue(val);
-    if (!skipValidation && !isValidHexColour(normalized)) {
-      const msg = t("invalidHexColour", state);
-      errors.push(`${fieldKey}: ${msg}`);
-      markFieldValidity(input, msg);
-      return val;
-    }
-    markFieldValidity(input, null);
-    return normalized;
+      if (element.required) msg = t("required", state);
+    } else if (!isValidHexColour(normalized)) {
+      msg = t("invalidHexColour", state);
+    }
+    if (msg !== null) errors.push(`${fieldKey}: ${msg}`);
+    markFieldValidity(input, msg, context);
+    return val && msg !== null ? val : normalized;
   };
   if (element.multiple) {
     const hexInputs = scopeRoot.querySelectorAll(
@@ -6224,38 +6369,17 @@ function validateColourElement(element, key, context) {
     hexInputs.forEach((input, index) => {
       var _a2;
       const val = (_a2 = input == null ? void 0 : input.value) != null ? _a2 : "";
-      const validated = validateColourValue(input, val, `${key}[${index}]`);
-      values.push(validated);
+      values.push(validateColourValue(input, val, `${key}[${index}]`));
     });
-    if (!skipValidation) {
-      const { state } = context;
-      const minCount = (_a = element.minCount) != null ? _a : 0;
-      const maxCount = (_b = element.maxCount) != null ? _b : Infinity;
-      const filteredValues = values.filter((v) => v !== "");
-      if (element.required && filteredValues.length === 0) {
-        errors.push(`${key}: ${t("required", state)}`);
-      }
-      if (filteredValues.length < minCount) {
-        errors.push(`${key}: ${t("minItems", state, { min: minCount })}`);
-      }
-      if (filteredValues.length > maxCount) {
-        errors.push(`${key}: ${t("maxItems", state, { max: maxCount })}`);
-      }
-    }
+    const filledCount = values.filter((v) => v !== "").length;
+    validateItemCount(element, key, filledCount, context, errors);
     return { value: values, errors };
   } else {
     const hexInput = scopeRoot.querySelector(
       `[name="${key}"].colour-hex-input`
     );
-    const val = (_c = hexInput == null ? void 0 : hexInput.value) != null ? _c : "";
-    if (!skipValidation && element.required && val === "") {
-      const msg = t("required", context.state);
-      errors.push(`${key}: ${msg}`);
-      markFieldValidity(hexInput, msg);
-      return { value: "", errors };
-    }
-    const validated = validateColourValue(hexInput, val, key);
-    return { value: validated, errors };
+    const val = (_a = hexInput == null ? void 0 : hexInput.value) != null ? _a : "";
+    return { value: validateColourValue(hexInput, val, key), errors };
   }
 }
 function updateColourField(element, fieldPath, value, context) {
@@ -6274,8 +6398,6 @@ function updateColourField(element, fieldPath, value, context) {
       if (index < value.length) {
         const normalized = normalizeColourValue(value[index]);
         hexInput.value = normalized;
-        hexInput.classList.remove("invalid");
-        hexInput.title = "";
         clearFieldError(hexInput);
         const wrapper = hexInput.closest(".colour-picker-wrapper");
         if (wrapper) {
@@ -6304,8 +6426,6 @@ function updateColourField(element, fieldPath, value, context) {
     if (hexInput) {
       const normalized = normalizeColourValue(value);
       hexInput.value = normalized;
-      hexInput.classList.remove("invalid");
-      hexInput.title = "";
       clearFieldError(hexInput);
       const wrapper = hexInput.closest(".colour-picker-wrapper");
       if (wrapper) {
@@ -6623,9 +6743,9 @@ function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
   }
 }
 function validateSliderElement(element, key, context) {
-  var _a, _b, _c;
+  var _a;
   const errors = [];
-  const { scopeRoot, skipValidation } = context;
+  const { scopeRoot } = context;
   if (element.min === void 0 || element.min === null) {
     throw new Error(
       `Slider validation: field "${key}" requires "min" property`
@@ -6644,39 +6764,20 @@ function validateSliderElement(element, key, context) {
     const { state } = context;
     const rawValue = slider.value;
     if (!rawValue) {
-      if (!skipValidation && element.required) {
-        const msg = t("required", state);
-        errors.push(`${fieldKey}: ${msg}`);
-        markFieldValidity(slider, msg);
-        return null;
-      }
-      markFieldValidity(slider, null);
+      const msg2 = element.required ? t("required", state) : null;
+      if (msg2 !== null) errors.push(`${fieldKey}: ${msg2}`);
+      markFieldValidity(slider, msg2, context);
       return null;
     }
-    let value;
-    if (scale === "exponential") {
-      const position = parseFloat(rawValue) / 1e3;
-      value = positionToExponential(position, min, max);
-      value = alignToStep(value, step);
-    } else {
-      value = parseFloat(rawValue);
-      value = alignToStep(value, step);
-    }
-    if (!skipValidation) {
-      if (value < min) {
-        const msg = t("minValue", state, { min });
-        errors.push(`${fieldKey}: ${msg}`);
-        markFieldValidity(slider, msg);
-        return value;
-      }
-      if (value > max) {
-        const msg = t("maxValue", state, { max });
-        errors.push(`${fieldKey}: ${msg}`);
-        markFieldValidity(slider, msg);
-        return value;
-      }
-    }
-    markFieldValidity(slider, null);
+    const value = scale === "exponential" ? alignToStep(
+      positionToExponential(parseFloat(rawValue) / 1e3, min, max),
+      step
+    ) : alignToStep(parseFloat(rawValue), step);
+    let msg = null;
+    if (value < min) msg = t("minValue", state, { min });
+    else if (value > max) msg = t("maxValue", state, { max });
+    if (msg !== null) errors.push(`${fieldKey}: ${msg}`);
+    markFieldValidity(slider, msg, context);
     return value;
   };
   if (element.multiple) {
@@ -6685,31 +6786,17 @@ function validateSliderElement(element, key, context) {
     );
     const values = [];
     sliders.forEach((slider, index) => {
-      const value = validateSliderValue(slider, `${key}[${index}]`);
-      values.push(value);
+      values.push(validateSliderValue(slider, `${key}[${index}]`));
     });
-    if (!skipValidation) {
-      const { state } = context;
-      const minCount = (_b = element.minCount) != null ? _b : 0;
-      const maxCount = (_c = element.maxCount) != null ? _c : Infinity;
-      const filteredValues = values.filter((v) => v !== null);
-      if (element.required && filteredValues.length === 0) {
-        errors.push(`${key}: ${t("required", state)}`);
-      }
-      if (filteredValues.length < minCount) {
-        errors.push(`${key}: ${t("minItems", state, { min: minCount })}`);
-      }
-      if (filteredValues.length > maxCount) {
-        errors.push(`${key}: ${t("maxItems", state, { max: maxCount })}`);
-      }
-    }
+    const filledCount = values.filter((v) => v !== null).length;
+    validateItemCount(element, key, filledCount, context, errors);
     return { value: values, errors };
   } else {
     const slider = scopeRoot.querySelector(
       `input[type="range"][name="${key}"]`
     );
     if (!slider) {
-      if (!skipValidation && element.required) {
+      if (element.required) {
         errors.push(`${key}: ${t("required", context.state)}`);
       }
       return { value: null, errors };
@@ -6759,8 +6846,6 @@ function updateSliderField(element, fieldPath, value, context) {
             var(--fb-border-color) 100%
           )`;
         }
-        slider.classList.remove("invalid");
-        slider.title = "";
         clearFieldError(slider);
       }
     });
@@ -6796,8 +6881,6 @@ function updateSliderField(element, fieldPath, value, context) {
           var(--fb-border-color) 100%
         )`;
       }
-      slider.classList.remove("invalid");
-      slider.title = "";
       clearFieldError(slider);
     }
   }
@@ -7124,26 +7207,10 @@ function requireValidateElement(context) {
 function validateContainerElement(element, key, context) {
   const validateChild = requireValidateElement(context);
   const errors = [];
-  const { scopeRoot, skipValidation, path } = context;
+  const { scopeRoot, path } = context;
   if (!("elements" in element)) {
     return { value: null, errors };
   }
-  const validateContainerCount = (key2, items, element2) => {
-    var _a, _b;
-    if (skipValidation) return;
-    const { state } = context;
-    const minItems = "minCount" in element2 ? (_a = element2.minCount) != null ? _a : 0 : 0;
-    const maxItems = "maxCount" in element2 ? (_b = element2.maxCount) != null ? _b : Infinity : Infinity;
-    if (element2.required && items.length === 0) {
-      errors.push(`${key2}: ${t("required", state)}`);
-    }
-    if (items.length < minItems) {
-      errors.push(`${key2}: ${t("minItems", state, { min: minItems })}`);
-    }
-    if (items.length > maxItems) {
-      errors.push(`${key2}: ${t("maxItems", state, { max: maxItems })}`);
-    }
-  };
   if ("multiple" in element && element.multiple) {
     const items = [];
     const containerWrappers = findDirectContainerRows(scopeRoot, key);
@@ -7177,7 +7244,7 @@ function validateContainerElement(element, key, context) {
         const childKey = `${key}[${domIndex}].${child.key}`;
         const childResult = validateChild(
           { ...child, key: childKey },
-          { path },
+          { path, inheritedReadonly: context.readonly },
           itemContainer
         );
         if (childResult.spread && childResult.value !== null && typeof childResult.value === "object") {
@@ -7188,7 +7255,7 @@ function validateContainerElement(element, key, context) {
       });
       items.push(itemData);
     });
-    validateContainerCount(key, items, element);
+    validateItemCount(element, key, items.length, context, errors);
     return { value: items, errors };
   } else {
     const containerData = {};
@@ -7219,7 +7286,7 @@ function validateContainerElement(element, key, context) {
         const childKey = `${key}.${child.key}`;
         const childResult = validateChild(
           { ...child, key: childKey },
-          { path },
+          { path, inheritedReadonly: context.readonly },
           containerContainer
         );
         if (childResult.spread && childResult.value !== null && typeof childResult.value === "object") {
@@ -8616,9 +8683,25 @@ function renderTableElement(element, ctx, wrapper, pathKey) {
     renderEditTable(element, initialData, pathKey, ctx, wrapper);
   }
 }
+function parseTableValue(raw, cellsKey) {
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return null;
+  }
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+    return null;
+  }
+  const cells = parsed[cellsKey];
+  const isGrid = Array.isArray(cells) && cells.every(
+    (row) => Array.isArray(row) && row.every((cell) => typeof cell === "string")
+  );
+  return isGrid ? parsed : null;
+}
 function validateTableElement(element, key, context) {
   var _a, _b;
-  const { scopeRoot, skipValidation } = context;
+  const { scopeRoot } = context;
   const errors = [];
   const cellsKey = (_b = (_a = element.fieldNames) == null ? void 0 : _a.cells) != null ? _b : "cells";
   const hiddenInput = scopeRoot.querySelector(
@@ -8627,22 +8710,20 @@ function validateTableElement(element, key, context) {
   if (!hiddenInput) {
     return { value: null, errors };
   }
-  let value;
-  try {
-    value = JSON.parse(hiddenInput.value);
-  } catch {
-    errors.push(`${key}: invalid table data`);
+  const value = parseTableValue(hiddenInput.value, cellsKey);
+  if (value === null) {
+    const msg2 = "invalid table data";
+    errors.push(`${key}: ${msg2}`);
+    markFieldGroupValidity(scopeRoot, key, msg2, context);
     return { value: null, errors };
   }
-  if (!skipValidation && element.required) {
-    const cells = value[cellsKey];
-    const hasContent = cells == null ? void 0 : cells.some(
-      (row) => row.some((cell) => cell.trim() !== "")
-    );
-    if (!hasContent) {
-      errors.push(`${key}: ${t("required", context.state)}`);
-    }
-  }
+  const cells = value[cellsKey];
+  const hasContent = cells.some(
+    (row) => row.some((cell) => cell.trim() !== "")
+  );
+  const msg = element.required && !hasContent ? t("required", context.state) : null;
+  if (msg !== null) errors.push(`${key}: ${msg}`);
+  markFieldGroupValidity(scopeRoot, key, msg, context);
   return { value, errors };
 }
 function updateTableField(element, fieldPath, value, context) {
@@ -9984,9 +10065,17 @@ function renderRichInputElement(element, ctx, wrapper, pathKey) {
     renderEditMode(element, ctx, wrapper, pathKey, initialValue);
   }
 }
+function parseRichInputValue(raw) {
+  try {
+    const parsed = JSON.parse(raw);
+    return parsed && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
 function validateRichInputElement(element, key, context) {
   var _a, _b;
-  const { scopeRoot, state, skipValidation } = context;
+  const { scopeRoot, state } = context;
   const errors = [];
   const textKey = (_a = element.textKey) != null ? _a : "text";
   const filesKey = (_b = element.filesKey) != null ? _b : "files";
@@ -9996,17 +10085,11 @@ function validateRichInputElement(element, key, context) {
   if (!hiddenInput) {
     return { value: null, errors };
   }
-  let rawValue;
-  try {
-    const parsed = JSON.parse(hiddenInput.value);
-    if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
-      rawValue = parsed;
-    } else {
-      errors.push(`${key}: invalid richinput data`);
-      return { value: null, errors };
-    }
-  } catch {
-    errors.push(`${key}: invalid richinput data`);
+  const rawValue = parseRichInputValue(hiddenInput.value);
+  if (rawValue === null) {
+    const msg = "invalid richinput data";
+    errors.push(`${key}: ${msg}`);
+    markFieldGroupValidity(scopeRoot, key, msg, context);
     return { value: null, errors };
   }
   const textVal = rawValue[textKey];
@@ -10017,28 +10100,24 @@ function validateRichInputElement(element, key, context) {
     [textKey]: text != null ? text : null,
     [filesKey]: files
   };
-  if (!skipValidation) {
-    const textEmpty = !text || text.trim() === "";
-    const filesEmpty = files.length === 0;
-    if (element.required && textEmpty && filesEmpty) {
-      errors.push(`${key}: ${t("required", state)}`);
-    }
-    if (!textEmpty && text) {
-      if (element.minLength != null && text.length < element.minLength) {
-        errors.push(
-          `${key}: ${t("minLength", state, { min: element.minLength })}`
-        );
-      }
-      if (element.maxLength != null && text.length > element.maxLength) {
-        errors.push(
-          `${key}: ${t("maxLength", state, { max: element.maxLength })}`
-        );
-      }
+  const textEmpty = !text || text.trim() === "";
+  const messages = [];
+  if (element.required && textEmpty && files.length === 0) {
+    messages.push(t("required", state));
+  }
+  if (!textEmpty && text) {
+    if (element.minLength != null && text.length < element.minLength) {
+      messages.push(t("minLength", state, { min: element.minLength }));
     }
-    if (element.maxFiles != null && files.length > element.maxFiles) {
-      errors.push(`${key}: ${t("maxFiles", state, { max: element.maxFiles })}`);
+    if (element.maxLength != null && text.length > element.maxLength) {
+      messages.push(t("maxLength", state, { max: element.maxLength }));
     }
   }
+  if (element.maxFiles != null && files.length > element.maxFiles) {
+    messages.push(t("maxFiles", state, { max: element.maxFiles }));
+  }
+  errors.push(...messages.map((message) => `${key}: ${message}`));
+  markFieldGroupValidity(scopeRoot, key, joinErrorMessages(messages), context);
   return { value, errors, spread: !!element.flatOutput };
 }
 function updateRichInputField(element, fieldPath, value, context) {
@@ -10809,12 +10888,13 @@ function renderElement2(element, ctx) {
   wrapper.className = `fb-field-wrapper fb-size-${element.size || "md"}`;
   wrapper.setAttribute("data-field-key", element.key);
   wrapper.setAttribute("data-fb-width", element.width || "full");
+  const pathKey = pathJoin(ctx.path, element.key);
+  wrapper.setAttribute("data-field-path", pathKey);
   const ops = getComponentOperations(element.type);
   if (!(ops == null ? void 0 : ops.ownsLabel)) {
     const label = createLabelContainer(element, ctx.state);
     wrapper.appendChild(label);
   }
-  const pathKey = pathJoin(ctx.path, element.key);
   dispatchToRenderer(element, ctx, wrapper, pathKey);
   if (initiallyDisabled) {
     wrapper.style.display = "none";
@@ -11021,6 +11101,9 @@ function createInstanceState(config) {
     config == null ? void 0 : config.translations
   );
   return {
+    instanceId: generateInstanceId(),
+    domIdCounter: 0,
+    reportedInvalid: /* @__PURE__ */ new WeakSet(),
     schema: null,
     formRoot: null,
     resourceIndex: /* @__PURE__ */ new Map(),
@@ -11035,6 +11118,7 @@ function createInstanceState(config) {
     prefill: {},
     syntheticElementIds: /* @__PURE__ */ new WeakMap(),
     syntheticElementIdCounter: 0,
+    multiFileSetters: /* @__PURE__ */ new WeakMap(),
     enableIfObservers: /* @__PURE__ */ new Set(),
     autoExpandObservers: /* @__PURE__ */ new Set(),
     tooltipElements: /* @__PURE__ */ new Set()
@@ -11343,8 +11427,8 @@ var FormBuilderInstance = class {
     // stacked listeners (hint clicks applied values N times) and destroy()
     // left the last one on the host-owned root, retaining the instance.
     this.prefillHintHandler = null;
-    this.instanceId = generateInstanceId();
     this.state = createInstanceState(config);
+    this.instanceId = this.state.instanceId;
     if (this.state.config.verboseErrors) {
       if (!globalThis.__formBuilderInstances) {
         globalThis.__formBuilderInstances = /* @__PURE__ */ new Set();
@@ -11842,11 +11926,21 @@ var FormBuilderInstance = class {
     }
   }
   /**
-   * Validate form and extract data
-   * This is a complete copy of the validateForm logic from form-builder.ts
-   * but uses instance state instead of global state
+   * Validate the form and extract its data. `skipValidation` is the draft
+   * contract of saveDraft() and the onChange payload: marks are only
+   * refreshed or cleared, and the result reports `valid: true, errors: []`.
    */
   validateForm(skipValidation = false) {
+    if (!skipValidation) return this.runValidation("full");
+    return { ...this.runValidation("draft"), valid: true, errors: [] };
+  }
+  /**
+   * Run every rule and return the real result. `marks` decides only what is
+   * painted: "full" raises and clears marks and records reported fields;
+   * "draft" refreshes or clears marks of reported fields and raises none
+   * (see ValidityScope in utils/styles.ts).
+   */
+  runValidation(marks) {
     if (!this.state.schema || !this.state.formRoot)
       return { valid: true, errors: [], data: {} };
     const errors = [];
@@ -11860,7 +11954,8 @@ var FormBuilderInstance = class {
         state: this.state,
         instance: this,
         path: ctx.path,
-        skipValidation,
+        draftMarks: marks === "draft",
+        readonly: isElementReadonly(element, this.state, ctx),
         // Containers recurse into their children through this — threaded per
         // pass, never module state (see ComponentContext.validateElement).
         validateElement
@@ -11913,10 +12008,56 @@ var FormBuilderInstance = class {
     };
   }
   /**
-   * Get form data
+   * Read the form: every rule runs and the result is the real
+   * `{valid, errors, data}`. Safe to poll — it never paints a new error
+   * mark (so a pristine form never turns red), it only refreshes or clears
+   * marks that showErrors()/submitForm() drew, and a repeated call on
+   * unchanged state touches no DOM at all.
    */
   getFormData() {
-    return this.validateForm(false);
+    return this.runValidation("draft");
+  }
+  /**
+   * Paint every validation error next to its field (and clear marks of
+   * fields that are now valid), then return the same result as
+   * getFormData(). Call it when the user asks to submit, followed by
+   * focusFirstError() to take them to the first problem.
+   */
+  showErrors() {
+    return this.runValidation("full");
+  }
+  /**
+   * Focus the first field marked invalid, in DOM order, and scroll it into
+   * view. A marked group (container, multi-value field, file field) gets
+   * focus on its first focusable control, else on the group itself.
+   * Does not validate: marks are drawn by showErrors() (or submitForm()),
+   * so call showErrors() first. Fields hidden by enableIf are skipped, as is
+   * any field that cannot take focus (e.g. inside a hidden slide).
+   * @returns true only when focus actually landed on an invalid field
+   */
+  focusFirstError() {
+    const root = this.state.formRoot;
+    if (!root) return false;
+    const marked = root.querySelectorAll('[aria-invalid="true"]');
+    for (const target of Array.from(marked)) {
+      if (target.closest('[data-conditionally-disabled="true"]')) continue;
+      const candidates = target.matches("input, select, textarea, button") ? [target] : [
+        ...Array.from(
+          target.querySelectorAll(
+            "input, select, textarea, button, [tabindex]"
+          )
+        ),
+        target
+      ];
+      for (const candidate of candidates) {
+        candidate.focus({ preventScroll: true });
+        if (document.activeElement === candidate) {
+          candidate.scrollIntoView({ block: "center" });
+          return true;
+        }
+      }
+    }
+    return false;
   }
   /**
    * Submit form with validation
@@ -12159,6 +12300,7 @@ var FormBuilderInstance = class {
           getElementLookupKey(element, this.state)
         );
         disabledWrapper.setAttribute("data-conditionally-disabled", "true");
+        disabledWrapper.setAttribute("data-field-path", fullDomPath);
         (_c = wrapper.parentNode) == null ? void 0 : _c.replaceChild(disabledWrapper, wrapper);
       }
     } catch (error) {