@dmitryvim/form-builder 0.6.4 → 0.7.0

package/dist/esm/index.js

@@ -95,459 +95,195 @@ 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) {
+  return input.closest?.(".fb-chip") ?? input.closest?.(".slider-container") ?? input;
 }
-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 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 addFileSizeHint(element, parts, state) {
-  const sizeMB = element.maxSize ?? element.maxSizeMB;
-  if (sizeMB && sizeMB !== Infinity) {
-    parts.push(t("hintMaxSize", state, { size: sizeMB }));
-  }
+function isInputErrorNode(node) {
+  return node.classList.contains("error-message") && !node.classList.contains("fb-field-error");
 }
-function addFormatHint(element, parts, state) {
-  if (element.accept?.extensions) {
-    parts.push(
-      t("hintFormats", state, {
-        formats: element.accept.extensions.map((ext) => ext.toUpperCase()).join(",")
-      })
-    );
+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 addPatternHint(element, parts, state) {
-  if (element.pattern) {
-    parts.push(t("hintPattern", state, { pattern: element.pattern }));
-  }
+function joinErrorMessages(messages) {
+  return messages.length > 0 ? messages.join(" \u2022 ") : null;
 }
-function makeFieldHint(element, state) {
-  const parts = [];
-  addLengthHint(element, parts, state);
-  if (element.type !== "slider") {
-    addRangeHint(element, parts, state);
+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) {
+  return (target.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean);
+}
+var FORM_CONTROL = "input, select, textarea, button";
+var ADDED_ATTRS = "data-fb-mark-added";
+function fieldLabelOf(target) {
+  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 labelRow?.querySelector("label") ?? 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(" ")
+    );
   }
-  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})`);
+function setInvalidMark(target, node, state) {
+  setAttr(target, "aria-invalid", "true");
+  exposeAsGroup(target, state);
+  if (node) linkDescription(target, node);
+}
+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) {
-    const allOutputKeys = /* @__PURE__ */ new Set();
-    for (const el of elements) {
-      if (el.type === "richinput" && el.flatOutput) {
-        const richEl = el;
-        const textKey = richEl.textKey ?? "text";
-        const filesKey = richEl.filesKey ?? "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 ?? createNode();
+  if (node.textContent !== message) node.textContent = message;
+  setInvalidMark(target, node, state);
+}
+function markFieldValidity(input, errorMessage, scope) {
+  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) {
-    const el = element;
-    if (el.type === "group") {
-      if (!isPlainObject(el.repeat)) return;
-      checkBounds(
-        elementPath,
-        el.repeat?.min,
-        el.repeat?.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 = input.getAttribute("name") ?? "";
+  const existing = findErrorNode(input);
+  if (existing) setAttr(existing, "data-error-for", errorFor);
+  drawMark(
+    input,
+    mark,
+    existing,
+    () => {
+      const node = createErrorNode(scope.state, "error-message");
+      node.setAttribute("data-error-for", errorFor);
+      const anchor = findErrorAnchor(input);
+      anchor.parentNode?.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) {
+  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 ?? (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 = Array.from(wrapper.children).find(
+    (child) => child instanceof HTMLElement && child.classList.contains("fb-field-error")
+  ) ?? 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) {
-  if (!condition || !condition.key) {
-    throw new Error("Invalid enableIf condition: must have a 'key' property");
-  }
-  const scope = condition.scope ?? "relative";
-  let dataSource;
-  if (scope === "relative") {
-    dataSource = 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) {
-  return input.closest?.(".fb-chip") ?? input.closest?.(".slider-container") ?? 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) {
-  if (!input) return;
-  if (errorMessage == null) {
-    input.classList.remove("invalid");
-    input.title = "";
-    findErrorNode(input)?.remove();
-    return;
-  }
-  input.classList.add("invalid");
-  input.title = errorMessage;
-  if (errorMessage === "") {
-    findErrorNode(input)?.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;
-    `;
-    anchor.parentNode?.insertBefore(errorElement, anchor.nextSibling);
-  }
-  errorElement.setAttribute("data-error-for", input.getAttribute("name") ?? "");
-  errorElement.textContent = errorMessage;
-  errorElement.style.display = "block";
-}
-function clearFieldError(input) {
-  findErrorNode(input)?.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;
@@ -665,6 +401,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);
 }
@@ -891,6 +634,427 @@ function applyActionButtonStyles(button, isFormLevel = false) {
   });
 }
 
+// src/utils/validation.ts
+function countRuleMessages(element, count, state, keys = { min: "minItems", max: "maxItems" }) {
+  const minCount = "minCount" in element ? element.minCount ?? 0 : 0;
+  const maxCount = "maxCount" in element ? element.maxCount ?? 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) {
+  const sizeMB = element.maxSize ?? element.maxSizeMB;
+  if (sizeMB && sizeMB !== Infinity) {
+    parts.push(t("hintMaxSize", state, { size: sizeMB }));
+  }
+}
+function addFormatHint(element, parts, state) {
+  if (element.accept?.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) {
+    const allOutputKeys = /* @__PURE__ */ new Set();
+    for (const el of elements) {
+      if (el.type === "richinput" && el.flatOutput) {
+        const richEl = el;
+        const textKey = richEl.textKey ?? "text";
+        const filesKey = richEl.filesKey ?? "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) {
+    const el = element;
+    if (el.type === "group") {
+      if (!isPlainObject(el.repeat)) return;
+      checkBounds(
+        elementPath,
+        el.repeat?.min,
+        el.repeat?.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 ?? (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;
+    }
+    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) {
+  if (!condition || !condition.key) {
+    throw new Error("Invalid enableIf condition: must have a 'key' property");
+  }
+  const scope = condition.scope ?? "relative";
+  let dataSource;
+  if (scope === "relative") {
+    dataSource = 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 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
 function ensureChipStyles(doc) {
   if (doc.head.querySelector("[data-fb-chip-styles]")) return;
@@ -1173,75 +1337,50 @@ function renderMultipleTextElement(element, ctx, wrapper, pathKey) {
 }
 function validateTextElement(element, key, context) {
   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) => {
       const val = input?.value ?? "";
-      rawValues.push(val);
       values.push(val === "" ? null : val);
+      if (val.trim() !== "") filledCount++;
       validateTextInput(input, val, `${key}[${index}]`);
     });
-    if (!skipValidation) {
-      const { state } = context;
-      const minCount = element.minCount ?? 0;
-      const maxCount = element.maxCount ?? 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 = input?.value ?? "";
-    if (!skipValidation && element.required && val === "") {
-      const msg = t("required", context.state);
+    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) {
@@ -1263,8 +1402,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 }));
       }
@@ -1278,8 +1415,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 }));
@@ -1774,24 +1909,27 @@ function renderMultipleNumberElement(element, ctx, wrapper, pathKey) {
 }
 function validateNumberElement(element, key, context) {
   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(
@@ -1799,62 +1937,21 @@ function validateNumberElement(element, key, context) {
     );
     const values = [];
     inputs.forEach((input, index) => {
-      const raw = input?.value ?? "";
-      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 = element.minCount ?? 0;
-      const maxCount = element.maxCount ?? 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 = input?.value ?? "";
-    const { state } = context;
-    if (!skipValidation && element.required && raw === "") {
+    if (element.required && (input?.value ?? "") === "") {
       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) {
@@ -1876,8 +1973,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);
       }
     });
@@ -1892,8 +1987,6 @@ function updateNumberField(element, fieldPath, value, context) {
     );
     if (input) {
       input.value = value != null ? String(value) : "";
-      input.classList.remove("invalid");
-      input.title = "";
       clearFieldError(input);
     }
   }
@@ -2081,23 +2174,7 @@ function renderMultipleSelectElement(element, ctx, wrapper, pathKey) {
 }
 function validateSelectElement(element, key, context) {
   const errors = [];
-  const { scopeRoot, skipValidation } = context;
-  const validateMultipleCount = (key2, values, element2, filterFn) => {
-    if (skipValidation) return;
-    const { state } = context;
-    const filteredValues = values.filter(filterFn);
-    const minCount = "minCount" in element2 ? element2.minCount ?? 0 : 0;
-    const maxCount = "maxCount" in element2 ? element2.maxCount ?? 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}\\["]`
@@ -2106,21 +2183,21 @@ function validateSelectElement(element, key, context) {
     inputs.forEach((input) => {
       const val = input?.value ?? "";
       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 = input?.value ?? "";
-    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 };
   }
 }
@@ -2161,8 +2238,6 @@ function updateSelectField(element, fieldPath, value, context) {
         options.forEach((option) => {
           option.selected = option.value === strValue;
         });
-        select.classList.remove("invalid");
-        select.title = "";
         clearFieldError(select);
       }
     });
@@ -2183,8 +2258,6 @@ function updateSelectField(element, fieldPath, value, context) {
       options.forEach((option) => {
         option.selected = option.value === strValue;
       });
-      select.classList.remove("invalid");
-      select.title = "";
       clearFieldError(select);
     }
   }
@@ -2506,26 +2579,11 @@ function renderMultipleSwitcherElement(element, ctx, wrapper, pathKey) {
 }
 function validateSwitcherElement(element, key, context) {
   const errors = [];
-  const { scopeRoot, skipValidation } = context;
-  const validateMultipleCount = (fieldKey, values, el, filterFn) => {
-    if (skipValidation) return;
-    const { state } = context;
-    const filteredValues = values.filter(filterFn);
-    const minCount = "minCount" in el ? el.minCount ?? 0 : 0;
-    const maxCount = "maxCount" in el ? el.maxCount ?? 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}\\["]`
@@ -2534,37 +2592,36 @@ function validateSwitcherElement(element, key, context) {
     inputs.forEach((input) => {
       const val = input?.value ?? "";
       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 = input?.value ?? "";
-    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) {
+  const group = input.parentElement?.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) {
   const { scopeRoot } = context;
   if ("multiple" in element && element.multiple) {
@@ -2592,9 +2649,7 @@ function updateSwitcherField(element, fieldPath, value, context) {
             }
           });
         }
-        input.classList.remove("invalid");
-        input.title = "";
-        clearFieldError(input);
+        clearFieldError(switcherGroupOf(input));
       }
     });
     if (value.length !== inputs.length) {
@@ -2620,9 +2675,7 @@ function updateSwitcherField(element, fieldPath, value, context) {
           }
         });
       }
-      input.classList.remove("invalid");
-      input.title = "";
-      clearFieldError(input);
+      clearFieldError(switcherGroupOf(input));
     }
   }
 }
@@ -3144,14 +3197,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;
@@ -3401,22 +3460,54 @@ function createFileTile() {
   tile.className = "fb-tile";
   return tile;
 }
-function showFileError(container, message) {
-  const existing = container.closest("[data-files-wrapper]")?.querySelector(".file-error-message");
-  if (existing) existing.remove();
-  const errorEl = document.createElement("div");
-  errorEl.className = "file-error-message error-message";
-  errorEl.style.cssText = `
-    color: var(--fb-error-color);
-    font-size: var(--fb-font-size-small);
-    margin-top: 0.25rem;
-  `;
-  errorEl.textContent = message;
-  container.closest("[data-files-wrapper]")?.appendChild(errorEl);
+function fileErrorSlot(container) {
+  const wrapper = container.closest("[data-files-wrapper]");
+  const node = wrapper ? Array.from(wrapper.children).find(
+    (child) => child instanceof HTMLElement && child.classList.contains("file-error-message")
+  ) ?? 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?.dataset.errorKind === kind) {
+    clearInvalidMark(wrapper, node);
+  }
 }
-function clearFileError(container) {
-  const existing = container.closest("[data-files-wrapper]")?.querySelector(".file-error-message");
-  if (existing) existing.remove();
+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");
@@ -4271,7 +4362,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;
   }
@@ -4279,14 +4371,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;
   }
@@ -4482,7 +4576,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);
@@ -4501,11 +4595,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;
@@ -4615,7 +4706,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;
@@ -4643,7 +4734,8 @@ async function handleLibraryPickMulti(opts) {
     if (skipped > 0) {
       showFileError(
         wrapper,
-        t("filesLimitExceeded", state, { skipped, max: maxCount })
+        t("filesLimitExceeded", state, { skipped, max: maxCount }),
+        state
       );
     }
     return;
@@ -4652,7 +4744,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) {
@@ -4689,7 +4782,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;
@@ -4702,7 +4795,7 @@ async function handleLibraryPickSingle(state, element, container, fileWrapper, p
     state
   );
   if (validationError !== null) {
-    showFileError(container, validationError);
+    showFileError(container, validationError, state);
     return;
   }
   clearFileError(container);
@@ -4939,10 +5032,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";
@@ -4953,9 +5043,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) {
@@ -5048,6 +5167,7 @@ function renderResourcePills(opts) {
         grid2.appendChild(tile);
       }
     }
+    clearFileError(container, "limit");
     return;
   }
   const outerDiv = document.createElement("div");
@@ -5127,10 +5247,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) {
   const state = ctx.state;
@@ -5280,8 +5404,9 @@ function buildAcceptAttribute(accept) {
     ...accept.mime ?? []
   ].join(",");
 }
-function setupMultiFileEditMode(element, ctx, wrapper, pathKey, maxFiles) {
+function renderMultiFileElementEdit(element, ctx, wrapper, pathKey) {
   const state = ctx.state;
+  const maxFiles = element.maxCount ?? Infinity;
   const filesWrapper = document.createElement("div");
   filesWrapper.className = "fb-row";
   filesWrapper.dataset.filesWrapper = pathKey;
@@ -5485,21 +5610,23 @@ function setupMultiFileEditMode(element, ctx, wrapper, pathKey, maxFiles) {
   };
   setupFilesDropHandler({ ...sharedHandlerOpts, filesContainer });
   setupFilesPickerHandler({ ...sharedHandlerOpts, filesPicker });
+  state.multiFileSetters.set(filesWrapper, (resourceIds) => {
+    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(state.resourceIndex.get(rid)?.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) {
-  setupMultiFileEditMode(
-    element,
-    ctx,
-    wrapper,
-    pathKey,
-    element.maxCount ?? Infinity
-  );
-}
 
 // src/components/file/validate.ts
 function readMultiFileResourceIds(scopeRoot, fullKey) {
@@ -5521,86 +5648,100 @@ function readMultiFileResourceIds(scopeRoot, fullKey) {
   }
   return parsed;
 }
-function validateFileCount(key, resourceIds, element, state, errors) {
-  const minFiles = "minCount" in element ? element.minCount ?? 0 : 0;
-  const maxFiles = "maxCount" in element ? element.maxCount ?? 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) {
+  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 = meta?.name ?? 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?.inferredFromExtension) {
       const mimeType = meta?.type ?? "";
       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) {
+  const messages = [];
   const maxSizeMB = "maxSize" in element ? element.maxSize ?? 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) {
-  const { scopeRoot, skipValidation, state } = context;
-  const errors = [];
+  const { scopeRoot, state } = context;
   const input = scopeRoot.querySelector(
     `input[name="${key}"][type="hidden"]`
   );
   const rid = input?.value ?? "";
-  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);
@@ -5650,12 +5791,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";
@@ -5715,14 +5864,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) {
@@ -5742,13 +5891,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"]`
@@ -6080,28 +6235,18 @@ function renderMultipleColourElement(element, ctx, wrapper, pathKey) {
 }
 function validateColourElement(element, key, context) {
   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(
@@ -6110,38 +6255,17 @@ function validateColourElement(element, key, context) {
     const values = [];
     hexInputs.forEach((input, index) => {
       const val = input?.value ?? "";
-      const validated = validateColourValue(input, val, `${key}[${index}]`);
-      values.push(validated);
+      values.push(validateColourValue(input, val, `${key}[${index}]`));
     });
-    if (!skipValidation) {
-      const { state } = context;
-      const minCount = element.minCount ?? 0;
-      const maxCount = element.maxCount ?? 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 = hexInput?.value ?? "";
-    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 };
+    return { value: validateColourValue(hexInput, val, key), errors };
   }
 }
 function updateColourField(element, fieldPath, value, context) {
@@ -6160,8 +6284,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) {
@@ -6190,8 +6312,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) {
@@ -6505,7 +6625,7 @@ function renderMultipleSliderElement(element, ctx, wrapper, pathKey) {
 }
 function validateSliderElement(element, key, context) {
   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`
@@ -6524,39 +6644,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) {
@@ -6565,31 +6666,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 = element.minCount ?? 0;
-      const maxCount = element.maxCount ?? 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 };
@@ -6638,8 +6725,6 @@ function updateSliderField(element, fieldPath, value, context) {
             var(--fb-border-color) 100%
           )`;
         }
-        slider.classList.remove("invalid");
-        slider.title = "";
         clearFieldError(slider);
       }
     });
@@ -6675,8 +6760,6 @@ function updateSliderField(element, fieldPath, value, context) {
           var(--fb-border-color) 100%
         )`;
       }
-      slider.classList.remove("invalid");
-      slider.title = "";
       clearFieldError(slider);
     }
   }
@@ -6996,25 +7079,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) => {
-    if (skipValidation) return;
-    const { state } = context;
-    const minItems = "minCount" in element2 ? element2.minCount ?? 0 : 0;
-    const maxItems = "maxCount" in element2 ? element2.maxCount ?? 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);
@@ -7047,7 +7115,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") {
@@ -7058,7 +7126,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 = {};
@@ -7088,7 +7156,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") {
@@ -8457,8 +8525,24 @@ 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) {
-  const { scopeRoot, skipValidation } = context;
+  const { scopeRoot } = context;
   const errors = [];
   const cellsKey = element.fieldNames?.cells ?? "cells";
   const hiddenInput = scopeRoot.querySelector(
@@ -8467,22 +8551,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?.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) {
@@ -9783,8 +9865,16 @@ 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) {
-  const { scopeRoot, state, skipValidation } = context;
+  const { scopeRoot, state } = context;
   const errors = [];
   const textKey = element.textKey ?? "text";
   const filesKey = element.filesKey ?? "files";
@@ -9794,17 +9884,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];
@@ -9815,28 +9899,24 @@ function validateRichInputElement(element, key, context) {
     [textKey]: 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) {
@@ -10599,12 +10679,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?.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";
@@ -10811,6 +10892,9 @@ function createInstanceState(config) {
     config?.translations
   );
   return {
+    instanceId: generateInstanceId(),
+    domIdCounter: 0,
+    reportedInvalid: /* @__PURE__ */ new WeakSet(),
     schema: null,
     formRoot: null,
     resourceIndex: /* @__PURE__ */ new Map(),
@@ -10825,6 +10909,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()
@@ -11133,8 +11218,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();
@@ -11631,11 +11716,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 = [];
@@ -11648,7 +11743,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
@@ -11701,10 +11797,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
@@ -11945,6 +12087,7 @@ var FormBuilderInstance = class {
           getElementLookupKey(element, this.state)
         );
         disabledWrapper.setAttribute("data-conditionally-disabled", "true");
+        disabledWrapper.setAttribute("data-field-path", fullDomPath);
         wrapper.parentNode?.replaceChild(disabledWrapper, wrapper);
       }
     } catch (error) {