@usefillo/dom 0.9.0 → 0.11.0

package/dist/index.js

@@ -1,8 +1,11 @@
 // src/index.ts
 import {
+  DEFAULT_STRINGS,
+  DEFAULT_FIELD_STRINGS,
   FilloClient,
   FilloError,
   PHONE_COUNTRIES,
+  PHONE_PICKER_COUNTRIES,
   countryByIso,
   countryByTimeZone,
   createClient,
@@ -11,17 +14,26 @@ import {
   digitsOnly,
   flagEmoji,
   formSchemasEqual,
+  formatAnswer,
+  formatGroupedNumber,
   formatNational,
+  isBuildTimeDevEnv,
   isCodeForm,
   isField,
   isFilloError,
+  isLikelyDevEnv,
+  isValidPartialNumberText,
   normalizeFormSchema,
   normalizeFormTheme,
+  parseGroupedNumber,
   parsePhone,
   pipeBlock,
   positionPhonePopover,
   provisionWorkspace,
   needsExplicitSubmit,
+  radioGroupStep,
+  reachablePageSequence,
+  resolveThemeAppearance,
   shouldAutoSubmit,
   syncCodeForm,
   toE164,
@@ -30,6 +42,9 @@ import {
 var FIELD_INPUT_PREFIX = "fillo-";
 var domInstanceCounter = 0;
 var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function focusableWithin(node) {
+  return node.matches(FOCUSABLE_SELECTOR) ? node : node.querySelector(FOCUSABLE_SELECTOR);
+}
 function fieldIds(instanceId, fieldId) {
   const base = `${FIELD_INPUT_PREFIX}${instanceId}-${fieldId}`;
   return {
@@ -48,7 +63,7 @@ function el(tag, options = {}) {
   return node;
 }
 function themeStyle(node, theme) {
-  const safeTheme = normalizeFormTheme(theme);
+  const safeTheme = resolveThemeAppearance(normalizeFormTheme(theme));
   if (!safeTheme) return;
   if (safeTheme.colorScheme) node.setAttribute("data-fillo-color-scheme", safeTheme.colorScheme);
   if (safeTheme.primary) node.style.setProperty("--fillo-primary", safeTheme.primary);
@@ -78,6 +93,12 @@ function badgeUrl(href) {
 function inputValue(value) {
   return typeof value === "string" || typeof value === "number" ? String(value) : "";
 }
+function groupedInputValue(value, decimals) {
+  const raw = inputValue(value);
+  if (raw === "") return raw;
+  const n = Number(raw);
+  return Number.isFinite(n) ? formatGroupedNumber(n, { decimals }) : raw;
+}
 function appendChildren(parent, children) {
   for (const child of children) {
     if (child) parent.appendChild(child);
@@ -116,12 +137,11 @@ function applyFieldAria(node, field, error, ids) {
 }
 function bindRadioKeys(group, values, current, select) {
   group.addEventListener("keydown", (event) => {
-    const forward = event.key === "ArrowRight" || event.key === "ArrowDown";
-    const backward = event.key === "ArrowLeft" || event.key === "ArrowUp";
-    if (!forward && !backward) return;
-    event.preventDefault();
+    const rtl = getComputedStyle(group).direction === "rtl";
     const index = current === null ? -1 : values.indexOf(current);
-    const next = index === -1 ? forward ? 0 : values.length - 1 : (index + (forward ? 1 : -1) + values.length) % values.length;
+    const next = radioGroupStep(event.key, index, values.length, { rtl });
+    if (next === null) return;
+    event.preventDefault();
     const value = values[next];
     if (value === void 0) return;
     select(value);
@@ -157,29 +177,84 @@ function shell(field, error, child, ids) {
       el("p", {
         className: "fillo-error",
         text: error,
-        attrs: { role: "alert", id: ids.errorId, "data-fillo": "error" }
+        attrs: { id: ids.errorId, "data-fillo": "error" }
       })
     );
   return wrap;
 }
 function textInput(type, context) {
+  const field = context.field;
+  const numberField = field.kind === "number" ? field : void 0;
+  const grouped = numberField?.notation === "grouped";
+  const formatted = grouped || Boolean(numberField?.prefix) || Boolean(numberField?.suffix);
   const input = el("input", {
     className: "fillo-input",
-    attrs: { id: context.ids.inputId, type, "data-fillo": "control" }
+    attrs: { id: context.ids.inputId, type: formatted ? "text" : type, "data-fillo": "control" }
   });
-  input.value = inputValue(context.value);
-  if (context.field.placeholder) input.placeholder = context.field.placeholder;
-  if ("maxLength" in context.field && context.field.maxLength !== void 0) {
-    input.maxLength = context.field.maxLength;
+  if (formatted) input.setAttribute("inputmode", "decimal");
+  if (type === "email") input.setAttribute("autocomplete", "email");
+  else if (type === "url") input.setAttribute("autocomplete", "url");
+  input.value = grouped ? groupedInputValue(context.value, numberField?.decimals) : inputValue(context.value);
+  if (field.placeholder) input.placeholder = field.placeholder;
+  if ("maxLength" in field && field.maxLength !== void 0) {
+    input.maxLength = field.maxLength;
+  }
+  if (numberField && !formatted) {
+    if (numberField.min !== void 0) input.min = String(numberField.min);
+    if (numberField.max !== void 0) input.max = String(numberField.max);
+  }
+  if (formatted) {
+    let lastValid = input.value;
+    let lastCaret = input.value.length;
+    const rejectEdit = () => {
+      input.value = lastValid;
+      input.setSelectionRange(lastCaret, lastCaret);
+    };
+    if (grouped) {
+      input.addEventListener("input", () => {
+        if (!isValidPartialNumberText(input.value)) return rejectEdit();
+        lastValid = input.value;
+        lastCaret = input.selectionStart ?? input.value.length;
+        context.setValue(parseGroupedNumber(input.value), { render: false });
+      });
+      input.addEventListener("change", () => {
+        if (!isValidPartialNumberText(input.value)) return rejectEdit();
+        lastValid = input.value;
+        context.setValue(parseGroupedNumber(input.value));
+      });
+      input.addEventListener("blur", () => {
+        const live = context.getValue?.() ?? context.value;
+        input.value = groupedInputValue(live, numberField?.decimals);
+        lastValid = input.value;
+        lastCaret = input.value.length;
+      });
+    } else {
+      input.addEventListener("input", () => {
+        if (!isValidPartialNumberText(input.value)) return rejectEdit();
+        lastValid = input.value;
+        lastCaret = input.selectionStart ?? input.value.length;
+        context.setValue(input.value, { render: false });
+      });
+      input.addEventListener("change", () => {
+        if (!isValidPartialNumberText(input.value)) return rejectEdit();
+        lastValid = input.value;
+        context.setValue(input.value);
+      });
+    }
+  } else {
+    input.addEventListener("input", () => context.setValue(input.value, { render: false }));
+    input.addEventListener("change", () => context.setValue(input.value));
   }
-  if (context.field.kind === "number") {
-    if (context.field.min !== void 0) input.min = String(context.field.min);
-    if (context.field.max !== void 0) input.max = String(context.field.max);
+  applyFieldAria(input, field, context.error, context.ids);
+  let control = input;
+  if (numberField && (numberField.prefix || numberField.suffix)) {
+    control = appendChildren(el("div", { className: "fillo-number" }), [
+      numberField.prefix ? el("span", { className: "fillo-number-prefix", text: numberField.prefix }) : null,
+      input,
+      numberField.suffix ? el("span", { className: "fillo-number-suffix", text: numberField.suffix }) : null
+    ]);
   }
-  input.addEventListener("input", () => context.setValue(input.value, { render: false }));
-  input.addEventListener("change", () => context.setValue(input.value));
-  applyFieldAria(input, context.field, context.error, context.ids);
-  return shell(context.field, context.error, input, context.ids);
+  return shell(field, context.error, control, context.ids);
 }
 function domLocaleCountry() {
   if (typeof navigator === "undefined") return void 0;
@@ -237,8 +312,9 @@ function phoneInput(context) {
     }
   });
   applyFieldAria(input, context.field, context.error, context.ids);
+  const liveValue = () => context.getValue?.() ?? context.value;
   const nationalFromValue = () => {
-    const digits = digitsOnly(inputValue(context.value));
+    const digits = digitsOnly(inputValue(liveValue()));
     return digits.startsWith(country.dialCode) ? digits.slice(country.dialCode.length) : digits;
   };
   const syncFlag = () => {
@@ -251,6 +327,7 @@ function phoneInput(context) {
     input.placeholder = formatNational(country, country.example);
   };
   const commit = (nat) => context.setValue(nat ? toE164(country, nat) : "", { render: false });
+  const commitRaw = (raw) => context.setValue(raw, { render: false });
   syncFlag();
   syncInput();
   input.addEventListener("input", () => {
@@ -258,7 +335,11 @@ function phoneInput(context) {
     const caret = input.selectionStart ?? raw.length;
     const before = digitsOnly(raw.slice(0, caret)).length;
     if (raw.trimStart().startsWith("+")) {
-      const p = parsePhone(raw);
+      const p = parsePhone(raw, country, { previousDigits: nationalFromValue() });
+      if (p.pending) {
+        commitRaw(p.raw ?? raw);
+        return;
+      }
       if (p.country) {
         country = p.country;
         syncFlag();
@@ -271,11 +352,13 @@ function phoneInput(context) {
     setCaretAfterDigits(input, before);
   });
   const registerOverlay = context.registerOverlay;
+  const announce = context.announce;
   let popover = null;
   let active = 0;
-  let matches = PHONE_COUNTRIES;
+  let matches = PHONE_PICKER_COUNTRIES;
   let stopPopoverLayout = null;
   let unregisterOverlay = null;
+  let resultsTimer;
   const listId = `${context.ids.inputId}-countries`;
   const syncPopoverLayout = () => {
     if (!popover) return;
@@ -294,13 +377,26 @@ function phoneInput(context) {
       window.removeEventListener("scroll", update, true);
     };
   };
+  const onFocusOut = (event) => {
+    const related = event.relatedTarget;
+    if (related) {
+      if (!countryWrap.contains(related)) closePopover();
+      return;
+    }
+    queueMicrotask(() => {
+      if (popover && !countryWrap.contains(document.activeElement)) closePopover();
+    });
+  };
   const closePopover = () => {
+    clearTimeout(resultsTimer);
     stopPopoverLayout?.();
     stopPopoverLayout = null;
     popover?.remove();
     popover = null;
     flagBtn.setAttribute("aria-expanded", "false");
+    flagBtn.removeAttribute("aria-controls");
     document.removeEventListener("mousedown", onOutside);
+    countryWrap.removeEventListener("focusout", onFocusOut);
     unregisterOverlay?.();
     unregisterOverlay = null;
   };
@@ -314,9 +410,10 @@ function phoneInput(context) {
     commit(nationalFromValue());
     syncInput();
     closePopover();
+    announce?.(DEFAULT_FIELD_STRINGS.phoneCountrySelected(c.name));
     input.focus();
   };
-  const openPopover = () => {
+  const openPopover = (seed) => {
     const pop = el("div", { className: "fillo-phone-popover fillo-phone-popover--below" });
     const search = el("input", {
       className: "fillo-phone-search",
@@ -326,9 +423,11 @@ function phoneInput(context) {
         "aria-expanded": "true",
         "aria-controls": listId,
         "aria-autocomplete": "list",
+        "aria-label": "Search country or code",
         placeholder: "Search country or code"
       }
     });
+    if (seed) search.value = seed;
     const list = el("ul", {
       className: "fillo-phone-list",
       attrs: { role: "listbox", id: listId, "aria-label": "Country" }
@@ -336,7 +435,14 @@ function phoneInput(context) {
     const renderList = () => {
       list.replaceChildren();
       if (matches.length === 0) {
-        list.appendChild(el("li", { className: "fillo-phone-empty", text: "No matches" }));
+        list.appendChild(
+          el("li", {
+            className: "fillo-phone-empty",
+            text: "No matches",
+            attrs: { role: "option", "aria-disabled": "true" }
+          })
+        );
+        search.removeAttribute("aria-activedescendant");
         syncPopoverLayout();
         return;
       }
@@ -373,21 +479,28 @@ function phoneInput(context) {
     const filter = (q) => {
       const query = q.trim().toLowerCase();
       const qDigits = query.replace(/[^\d]/g, "");
-      matches = !query ? PHONE_COUNTRIES : PHONE_COUNTRIES.filter(
+      matches = !query ? PHONE_PICKER_COUNTRIES : PHONE_PICKER_COUNTRIES.filter(
         (c) => c.name.toLowerCase().includes(query) || c.iso2.toLowerCase() === query || qDigits.length > 0 && c.dialCode.startsWith(qDigits)
       );
       active = 0;
       renderList();
+      clearTimeout(resultsTimer);
+      resultsTimer = setTimeout(
+        () => announce?.(DEFAULT_FIELD_STRINGS.phoneResultsCount(matches.length)),
+        300
+      );
     };
     search.addEventListener("input", () => filter(search.value));
     search.addEventListener("keydown", (e) => {
       if (e.key === "ArrowDown") {
         e.preventDefault();
+        if (matches.length === 0) return;
         active = Math.min(active + 1, matches.length - 1);
         syncActive();
         search.setAttribute("aria-activedescendant", `${listId}-opt-${active}`);
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
+        if (matches.length === 0) return;
         active = Math.max(active - 1, 0);
         syncActive();
         search.setAttribute("aria-activedescendant", `${listId}-opt-${active}`);
@@ -404,16 +517,40 @@ function phoneInput(context) {
     popover = pop;
     countryWrap.appendChild(pop);
     flagBtn.setAttribute("aria-expanded", "true");
-    matches = PHONE_COUNTRIES;
-    active = Math.max(0, PHONE_COUNTRIES.indexOf(country));
-    renderList();
+    flagBtn.setAttribute("aria-controls", listId);
+    if (seed) {
+      filter(seed);
+    } else {
+      matches = PHONE_PICKER_COUNTRIES;
+      active = Math.max(0, PHONE_PICKER_COUNTRIES.indexOf(country));
+      renderList();
+    }
     bindPopoverLayout();
     syncActive();
     document.addEventListener("mousedown", onOutside);
+    countryWrap.addEventListener("focusout", onFocusOut);
     unregisterOverlay = registerOverlay?.(closePopover) ?? null;
-    requestAnimationFrame(() => search.focus());
+    requestAnimationFrame(() => {
+      search.focus();
+      if (seed) {
+        const end = search.value.length;
+        search.setSelectionRange(end, end);
+      }
+    });
   };
   flagBtn.addEventListener("click", () => popover ? closePopover() : openPopover());
+  flagBtn.addEventListener("keydown", (event) => {
+    if (popover) return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      openPopover();
+      return;
+    }
+    if (event.key.length === 1 && event.key !== " " && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      event.preventDefault();
+      openPopover(event.key);
+    }
+  });
   appendChildren(wrap, [countryWrap, input]);
   return shell(context.field, context.error, wrap, context.ids);
 }
@@ -459,7 +596,12 @@ function singleChoice(context) {
     appendChildren(label, [
       input,
       optionIcon(option.icon),
-      el("span", { className: "fillo-option-label", text: option.label, attrs: { "data-fillo": "optionLabel" } })
+      el("span", { className: "fillo-option-label", text: option.label, attrs: { "data-fillo": "optionLabel" } }),
+      // Icon-mode hides the native input visually (CSS), so an SVG recolor
+      // was the only selected-state signal — add a decorative shape signal
+      // that survives forced-colors (audit P1.2; state still lives on the
+      // input, this marker is non-authoritative).
+      option.icon && value === option.id ? el("span", { className: "fillo-option-check", text: "\u2713", attrs: { "aria-hidden": "true" } }) : null
     ]);
     wrap.appendChild(label);
   }
@@ -478,13 +620,16 @@ function singleChoice(context) {
     appendChildren(label, [
       appendChildren(el("span", { className: "fillo-option-main" }), [
         input,
-        el("span", { className: "fillo-option-label", text: "Other", attrs: { "data-fillo": "optionLabel" } })
+        el("span", { className: "fillo-option-label", text: DEFAULT_STRINGS.other, attrs: { "data-fillo": "optionLabel" } })
       ])
     ]);
     if (otherActive) {
-      const other = el("input", { className: "fillo-input fillo-other-input", attrs: { type: "text" } });
+      const other = el("input", {
+        className: "fillo-input fillo-other-input",
+        attrs: { type: "text", "aria-label": DEFAULT_STRINGS.otherPrompt }
+      });
       other.value = isOther ? value : "";
-      other.placeholder = "Your answer";
+      other.placeholder = DEFAULT_STRINGS.otherPlaceholder;
       other.addEventListener("input", () => {
         activeOtherFields?.add(field.id);
         context.setValue(other.value, { render: false });
@@ -532,7 +677,8 @@ function multiChoice(context) {
     appendChildren(label, [
       input,
       optionIcon(option.icon),
-      el("span", { className: "fillo-option-label", text: option.label, attrs: { "data-fillo": "optionLabel" } })
+      el("span", { className: "fillo-option-label", text: option.label, attrs: { "data-fillo": "optionLabel" } }),
+      option.icon && selected.includes(option.id) ? el("span", { className: "fillo-option-check", text: "\u2713", attrs: { "aria-hidden": "true" } }) : null
     ]);
     wrap.appendChild(label);
   }
@@ -558,13 +704,16 @@ function multiChoice(context) {
     appendChildren(label, [
       appendChildren(el("span", { className: "fillo-option-main" }), [
         input,
-        el("span", { className: "fillo-option-label", text: "Other", attrs: { "data-fillo": "optionLabel" } })
+        el("span", { className: "fillo-option-label", text: DEFAULT_STRINGS.other, attrs: { "data-fillo": "optionLabel" } })
       ])
     ]);
     if (active) {
-      const other = el("input", { className: "fillo-input fillo-other-input", attrs: { type: "text" } });
+      const other = el("input", {
+        className: "fillo-input fillo-other-input",
+        attrs: { type: "text", "aria-label": DEFAULT_STRINGS.otherPrompt }
+      });
       other.value = otherText ?? "";
-      other.placeholder = "Your answer";
+      other.placeholder = DEFAULT_STRINGS.otherPlaceholder;
       other.addEventListener("input", () => {
         activeOtherFields?.add(field.id);
         const rest = getSelected().filter((value) => knownIds.has(value));
@@ -605,7 +754,7 @@ function dropdown(context) {
   for (const option of displayOptions(field)) {
     select.appendChild(el("option", { text: option.label, attrs: { value: option.id } }));
   }
-  if (field.allowOther) select.appendChild(el("option", { text: "Other...", attrs: { value: other } }));
+  if (field.allowOther) select.appendChild(el("option", { text: `${DEFAULT_STRINGS.other}\u2026`, attrs: { value: other } }));
   select.value = otherActive ? other : value;
   select.addEventListener("change", () => {
     if (select.value === other) {
@@ -622,10 +771,10 @@ function dropdown(context) {
   if (otherActive) {
     const other2 = el("input", {
       className: "fillo-input fillo-other-input fillo-other-input--block",
-      attrs: { type: "text" }
+      attrs: { type: "text", "aria-label": DEFAULT_STRINGS.otherPrompt }
     });
     other2.value = isOther ? value : "";
-    other2.placeholder = "Your answer";
+    other2.placeholder = DEFAULT_STRINGS.otherPlaceholder;
     other2.addEventListener("input", () => {
       activeOtherFields?.add(field.id);
       context.setValue(other2.value, { render: false });
@@ -666,14 +815,11 @@ function checkbox(context) {
       className: "fillo-toggle-input",
       attrs: {
         id: context.ids.inputId,
-        type: "checkbox",
-        role: "switch",
-        "aria-checked": String(context.value === true)
+        type: "checkbox"
       }
     });
     input2.checked = context.value === true;
     input2.addEventListener("change", () => {
-      input2.setAttribute("aria-checked", String(input2.checked));
       context.setValue(input2.checked);
     });
     applyFieldAria(input2, context.field, context.error, context.ids);
@@ -698,7 +844,7 @@ function checkbox(context) {
         el("p", {
           className: "fillo-error",
           text: context.error,
-          attrs: { role: "alert", id: context.ids.errorId, "data-fillo": "error" }
+          attrs: { id: context.ids.errorId, "data-fillo": "error" }
         })
       );
     return wrap2;
@@ -769,7 +915,10 @@ function rating(context) {
   for (const [index, n] of values.entries()) {
     const button = el("button", {
       className: `fillo-star${n <= current ? " fillo-star--active" : ""}`,
-      text: "\u2605",
+      // Shape signal, not just color, so the selected state survives
+      // forced-colors (audit P1.2): filled "★" once selected, hollow "☆"
+      // otherwise.
+      text: n <= current ? "\u2605" : "\u2606",
       attrs: {
         type: "button",
         role: "radio",
@@ -780,7 +929,10 @@ function rating(context) {
       }
     });
     button.toggleAttribute("data-selected", n <= current);
-    button.addEventListener("click", () => context.setValue(n === current ? null : n));
+    button.addEventListener("click", (event) => {
+      if (event.detail === 0 && n === current) return;
+      context.setValue(n === current ? null : n);
+    });
     wrap.appendChild(button);
   }
   bindRadioKeys(wrap, values, selected, (value) => context.setValue(value));
@@ -826,7 +978,10 @@ function linearScale(context) {
       }
     });
     button.toggleAttribute("data-selected", context.value === n);
-    button.addEventListener("click", () => context.setValue(context.value === n ? null : n));
+    button.addEventListener("click", (event) => {
+      if (event.detail === 0 && context.value === n) return;
+      context.setValue(context.value === n ? null : n);
+    });
     steps.appendChild(button);
   }
   bindRadioKeys(steps, values, current, (value) => context.setValue(value));
@@ -844,6 +999,7 @@ function linearScale(context) {
 function ranking(context) {
   const field = context.field;
   if (field.kind !== "ranking") return null;
+  const announce = context.announce;
   const answered = Array.isArray(context.value) ? context.value : [];
   const order = [
     ...answered.filter((id) => field.options.some((option) => option.id === id)),
@@ -870,18 +1026,31 @@ function ranking(context) {
       const next = [...order];
       [next[index], next[target]] = [next[target], next[index]];
       context.setValue(next);
+      announce?.(DEFAULT_FIELD_STRINGS.rankingPosition(option.label, target + 1, order.length));
     };
     const up = el("button", {
       className: "fillo-ranking-move",
-      text: "Up",
-      attrs: { type: "button", "data-fillo-rank-opt": id, "data-fillo-rank-dir": "up" }
+      text: "\u2191",
+      attrs: {
+        type: "button",
+        "data-fillo-rank-opt": id,
+        "data-fillo-rank-dir": "up",
+        // Per-row label (audit P1.5 [D]: every row read "Up"/"Down" alike);
+        // wording matches @usefillo/react's.
+        "aria-label": `Move ${option.label} up`
+      }
     });
     up.toggleAttribute("disabled", index === 0);
     up.addEventListener("click", () => move(-1));
     const down = el("button", {
       className: "fillo-ranking-move",
-      text: "Down",
-      attrs: { type: "button", "data-fillo-rank-opt": id, "data-fillo-rank-dir": "down" }
+      text: "\u2193",
+      attrs: {
+        type: "button",
+        "data-fillo-rank-opt": id,
+        "data-fillo-rank-dir": "down",
+        "aria-label": `Move ${option.label} down`
+      }
     });
     down.toggleAttribute("disabled", index === order.length - 1);
     down.addEventListener("click", () => move(1));
@@ -909,17 +1078,40 @@ function matrix(context) {
   table.appendChild(thead);
   const tbody = document.createElement("tbody");
   for (const row of field.rows) {
+    const rowLabelId = `${context.ids.inputId}-${row.id}`;
+    const answered = answers[row.id] !== void 0;
+    const rowInvalid = Boolean(context.error) && Boolean(field.required) && !answered;
+    const radioId = (col) => `${context.ids.inputId}-${row.id}-${col.id}`;
     const tr = document.createElement("tr");
-    tr.appendChild(el("th", { text: row.label, attrs: { scope: "row" } }));
+    const th = el("th", { attrs: { scope: "row" } });
+    const rowGroup = el("div", {
+      attrs: {
+        role: "radiogroup",
+        "aria-labelledby": `${context.ids.labelId} ${rowLabelId}`,
+        "aria-owns": field.columns.map(radioId).join(" ")
+      }
+    });
+    rowGroup.appendChild(el("span", { text: row.label, attrs: { id: rowLabelId } }));
+    th.appendChild(rowGroup);
+    tr.appendChild(th);
     for (const col of field.columns) {
-      const td = document.createElement("td");
+      const td = el("td", { attrs: { "data-label": col.label } });
+      const cellLabel = el("label", { className: "fillo-matrix-cell" });
       const input = el("input", {
         className: "fillo-option-input",
-        attrs: { type: "radio", name: `${context.ids.name}-${row.id}`, "aria-label": `${row.label}: ${col.label}` }
+        attrs: {
+          id: radioId(col),
+          type: "radio",
+          name: `${context.ids.name}-${row.id}`,
+          "aria-label": `${row.label}: ${col.label}`
+        }
       });
+      if (field.required) input.setAttribute("aria-required", "true");
+      if (rowInvalid) input.setAttribute("aria-invalid", "true");
       input.checked = answers[row.id] === col.id;
       input.addEventListener("change", () => context.setValue({ ...answers, [row.id]: col.id }));
-      td.appendChild(input);
+      cellLabel.appendChild(input);
+      td.appendChild(cellLabel);
       tr.appendChild(td);
     }
     tbody.appendChild(tr);
@@ -943,7 +1135,7 @@ function signature(context) {
   const pad = el("div", { className: "fillo-signature", attrs: { "data-fillo": "control" } });
   const canvas = el("canvas", {
     className: "fillo-signature-canvas",
-    attrs: { "aria-hidden": "true" }
+    attrs: { role: "img" }
   });
   const clear = el("button", {
     className: "fillo-signature-clear",
@@ -956,6 +1148,13 @@ function signature(context) {
   const ctx = canvas.getContext("2d");
   let drawing = false;
   let hasInk = typeof context.value === "string" && context.value.startsWith("data:image/");
+  const syncSignatureLabel = () => {
+    canvas.setAttribute(
+      "aria-label",
+      hasInk ? DEFAULT_FIELD_STRINGS.signatureSigned : DEFAULT_FIELD_STRINGS.signatureEmpty
+    );
+  };
+  syncSignatureLabel();
   if (hasInk && ctx) {
     const image = new Image();
     image.onload = () => ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
@@ -967,8 +1166,7 @@ function signature(context) {
     attrs: {
       id: context.ids.inputId,
       type: "text",
-      autocomplete: "name",
-      placeholder: "Type your full name to sign"
+      autocomplete: "name"
     }
   });
   applyFieldAria(typed, context.field, context.error, context.ids);
@@ -988,6 +1186,7 @@ function signature(context) {
       hint.style.display = "";
       context.setValue(null, { render: false });
     }
+    syncSignatureLabel();
   };
   typed.addEventListener("input", () => drawTyped(typed.value));
   const point = (event) => {
@@ -1002,6 +1201,7 @@ function signature(context) {
     drawing = true;
     hasInk = true;
     hint.style.display = "none";
+    syncSignatureLabel();
     if (typed.value) typed.value = "";
     canvas.setPointerCapture(event.pointerId);
     const p = point(event);
@@ -1029,57 +1229,164 @@ function signature(context) {
     hasInk = false;
     hint.style.display = "";
     typed.value = "";
+    syncSignatureLabel();
     context.setValue(null, { render: false });
   });
   appendChildren(pad, [canvas, hint, clear]);
   const typeWrap = el("div", { className: "fillo-signature-type" });
-  typeWrap.appendChild(typed);
+  const typeLabel = el("label", {
+    className: "fillo-signature-type-label",
+    text: "Or type your full name to sign",
+    attrs: { for: context.ids.inputId }
+  });
+  appendChildren(typeWrap, [typeLabel, typed]);
   appendChildren(wrap, [pad, typeWrap]);
   return shell(context.field, context.error, wrap, context.ids);
 }
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 ** 2) return `${(bytes / 1024).toFixed(0)} KB`;
+  if (bytes < 1024 ** 3) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
+  return `${(bytes / 1024 ** 3).toFixed(2)} GB`;
+}
+function fileActionBtn(className, label, text, onClick) {
+  const btn = el("button", { className, text, attrs: { type: "button", "aria-label": label } });
+  btn.addEventListener("click", onClick);
+  return btn;
+}
 function fileUpload(context) {
   const field = context.field;
   if (field.kind !== "file_upload") return null;
+  const internal = context;
+  const storageBlocked = internal.storageBlocked === true;
   const input = el("input", {
     className: "fillo-input",
     attrs: { id: context.ids.inputId, type: "file", "data-fillo": "control" }
   });
   if ((field.maxFiles ?? 1) > 1) input.multiple = true;
   if (field.accept?.length) input.accept = field.accept.join(",");
-  const progress = context.uploadProgress?.get(field.id);
-  input.disabled = progress !== void 0;
+  input.disabled = storageBlocked;
   applyFieldAria(input, field, context.error, context.ids);
   input.addEventListener("change", () => {
+    if (storageBlocked) return;
     const files = Array.from(input.files ?? []);
+    input.value = "";
     void context.uploadFiles?.(field, files);
   });
   const wrap = el("div");
   wrap.appendChild(input);
-  if (progress !== void 0) {
-    const meter = el("div", {
-      className: "fillo-upload-progress",
-      attrs: {
-        role: "progressbar",
-        "aria-label": `Uploading ${field.label}`,
-        "aria-valuemin": "0",
-        "aria-valuemax": "100",
-        "aria-valuenow": String(Math.round(progress * 100))
-      }
+  if (storageBlocked) {
+    const hint = el("p", {
+      className: "fillo-upload-notice",
+      text: internal.storageFixUrl ? "Connect file storage to enable uploads" : DEFAULT_FIELD_STRINGS.uploadsUnavailable
     });
-    meter.appendChild(el("div", { className: "fillo-upload-progress-fill" }));
-    meter.firstElementChild?.style.setProperty("width", `${Math.round(progress * 100)}%`);
-    wrap.appendChild(meter);
-  }
-  const value = Array.isArray(context.value) ? context.value : [];
-  for (const file of value) {
-    wrap.appendChild(el("p", { className: "fillo-description", text: `${file.name} (${Math.round(file.size / 1024)} KB)` }));
-  }
-  const notice = context.uploadNotice;
-  if (notice) {
-    wrap.appendChild(el("p", { className: "fillo-upload-notice", text: notice, attrs: { role: "status" } }));
+    if (internal.storageFixUrl) {
+      hint.append(" \u2014 ");
+      hint.appendChild(
+        el("a", {
+          text: internal.storageFixUrl,
+          attrs: { href: internal.storageFixUrl, target: "_blank", rel: "noopener noreferrer" }
+        })
+      );
+    }
+    wrap.appendChild(hint);
+  }
+  const done = Array.isArray(context.value) ? context.value : [];
+  const rows = internal.uploadRows ?? [];
+  const maxFiles = field.maxFiles ?? 1;
+  const remaining = maxFiles - done.length - rows.filter((row) => row.error === void 0).length;
+  if (done.length > 0 || rows.length > 0) {
+    const list = el("ul", { className: "fillo-files" });
+    for (const file of done) {
+      const li = el("li", { className: "fillo-file fillo-file--done" });
+      appendChildren(li, [
+        el("span", { className: "fillo-file-name", text: file.name }),
+        el("span", { className: "fillo-file-meta", text: formatBytes(file.size) }),
+        el("span", { className: "fillo-sr-only", text: "Uploaded" }),
+        fileActionBtn(
+          "fillo-file-remove",
+          `Remove ${file.name}`,
+          "\xD7",
+          () => context.setValue(done.filter((f) => f.fileId !== file.fileId))
+        )
+      ]);
+      list.appendChild(li);
+    }
+    for (const row of rows) {
+      const failed = row.error !== void 0;
+      const li = el("li", {
+        className: `fillo-file${failed ? " fillo-file--failed" : ""}`,
+        attrs: failed ? {} : {
+          role: "progressbar",
+          "aria-label": `Uploading ${row.name}`,
+          "aria-valuemin": "0",
+          "aria-valuemax": "100",
+          "aria-valuenow": String(Math.round(row.fraction * 100))
+        }
+      });
+      li.appendChild(el("span", { className: "fillo-file-name", text: row.name }));
+      if (failed) {
+        li.appendChild(el("span", { className: "fillo-file-meta", text: row.error ?? "" }));
+        if (remaining > 0) {
+          li.appendChild(
+            fileActionBtn(
+              "fillo-file-retry",
+              `${DEFAULT_FIELD_STRINGS.uploadRetry} ${row.name}`,
+              DEFAULT_FIELD_STRINGS.uploadRetry,
+              () => internal.uploadAction?.(row.key, "retry")
+            )
+          );
+        }
+        li.appendChild(fileActionBtn("fillo-file-remove", "Dismiss", "\xD7", () => internal.uploadAction?.(row.key, "dismiss")));
+      } else {
+        const bar = el("span", { className: "fillo-progress-bar" });
+        bar.style.width = `${row.fraction * 100}%`;
+        appendChildren(li, [
+          el("span", { className: "fillo-file-meta", text: `${Math.round(row.fraction * 100)}% of ${formatBytes(row.size)}` }),
+          appendChildren(el("span", { className: "fillo-progress", attrs: { "aria-hidden": "true" } }), [bar]),
+          fileActionBtn("fillo-file-remove", `Cancel ${row.name}`, "\xD7", () => internal.uploadAction?.(row.key, "cancel"))
+        ]);
+      }
+      list.appendChild(li);
+    }
+    wrap.appendChild(list);
   }
+  const notice = internal.uploadNotice;
+  if (notice) wrap.appendChild(el("p", { className: "fillo-upload-notice", text: notice }));
   return shell(field, context.error, wrap, context.ids);
 }
+function calculated(context) {
+  const field = context.field;
+  const wrap = el("div", {
+    className: "fillo-field fillo-field--calculated fillo-calculated",
+    attrs: { "data-fillo": "calculated", "data-field": field.id, "data-kind": field.kind }
+  });
+  wrap.appendChild(
+    el("label", {
+      className: "fillo-label",
+      text: field.label,
+      attrs: { id: context.ids.labelId, for: context.ids.inputId, "data-fillo": "label" }
+    })
+  );
+  if (field.description)
+    wrap.appendChild(
+      el("p", {
+        className: "fillo-description",
+        text: field.description,
+        attrs: { id: context.ids.descriptionId, "data-fillo": "fieldDescription" }
+      })
+    );
+  const value = context.value;
+  const answered = value !== void 0 && value !== null && value !== "";
+  const output = el("output", {
+    className: `fillo-calculated-value${answered ? "" : " fillo-calculated-value--empty"}`,
+    text: answered ? formatAnswer(field, value) : "\u2014",
+    attrs: { id: context.ids.inputId }
+  });
+  if (field.description) output.setAttribute("aria-describedby", context.ids.descriptionId);
+  wrap.appendChild(output);
+  return wrap;
+}
 var shuffleCache = /* @__PURE__ */ new Map();
 function displayOptions(field) {
   if (!field.shuffleOptions) return field.options;
@@ -1114,7 +1421,8 @@ var DEFAULT_COMPONENTS = {
   ranking,
   matrix,
   signature,
-  file_upload: fileUpload
+  file_upload: fileUpload,
+  calculated
 };
 function defaultFieldRenderer(context) {
   if (context.field.kind === "hidden") return null;
@@ -1122,17 +1430,82 @@ function defaultFieldRenderer(context) {
   const renderer = DEFAULT_COMPONENTS[context.field.kind];
   return renderer ? renderer(context) : null;
 }
+var TURNSTILE_SCRIPT_SRC = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+var TURNSTILE_SCRIPT_ID = "fillo-turnstile-script";
+var turnstileScriptPromise = null;
+function turnstileGlobal() {
+  return globalThis.turnstile;
+}
+function loadTurnstileScript() {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return Promise.reject(new Error("Turnstile needs a browser"));
+  }
+  if (turnstileGlobal()) return Promise.resolve();
+  if (turnstileScriptPromise) return turnstileScriptPromise;
+  turnstileScriptPromise = new Promise((resolve, reject) => {
+    const onReady = () => {
+      if (turnstileGlobal()) resolve();
+      else reject(new Error("Turnstile loaded without its global"));
+    };
+    const existing = document.getElementById(TURNSTILE_SCRIPT_ID);
+    if (existing) {
+      if (turnstileGlobal()) {
+        resolve();
+        return;
+      }
+      existing.addEventListener("load", onReady, { once: true });
+      existing.addEventListener(
+        "error",
+        () => reject(new Error("Turnstile script failed to load")),
+        { once: true }
+      );
+      return;
+    }
+    const script = document.createElement("script");
+    script.id = TURNSTILE_SCRIPT_ID;
+    script.src = TURNSTILE_SCRIPT_SRC;
+    script.async = true;
+    script.defer = true;
+    script.addEventListener("load", onReady, { once: true });
+    script.addEventListener(
+      "error",
+      () => {
+        script.remove();
+        turnstileScriptPromise = null;
+        reject(new Error("Turnstile script failed to load"));
+      },
+      { once: true }
+    );
+    document.head.appendChild(script);
+  });
+  return turnstileScriptPromise;
+}
+function newTurnstileContainer() {
+  return el("div", { className: "fillo-turnstile", attrs: { "data-fillo": "turnstile" } });
+}
 var DomFormController = class {
   constructor(target, options) {
     this.target = target;
     this.options = options;
     this.element.className = "fillo-dom-root";
-    target.replaceChildren(this.element);
+    if (options.preview === true) warnPreviewInProduction();
+    target.replaceChildren(this.element, this.statusEl, this.alertEl);
     void this.resolve();
   }
   target;
   options;
   element = el("div");
+  // Persistent live-region channels (audit P2.1): siblings of `element`
+  // (never inside it), so the full-tree `element.replaceChildren()` every
+  // render() does can never tear them down or recreate them.
+  statusEl = el("span", {
+    className: "fillo-sr-only",
+    attrs: { role: "status", "aria-live": "polite", "data-fillo": "announce" }
+  });
+  alertEl = el("span", {
+    className: "fillo-sr-only",
+    attrs: { role: "alert", "data-fillo": "announce-alert" }
+  });
   instanceId = `d${++domInstanceCounter}`;
   schema = null;
   theme;
@@ -1152,9 +1525,12 @@ var DomFormController = class {
   hpValue = "";
   liveSubmissionHandled = false;
   activeOtherFields = /* @__PURE__ */ new Set();
-  uploadProgress = /* @__PURE__ */ new Map();
-  uploadControllers = /* @__PURE__ */ new Map();
-  // Per-field "some files weren't added" notices (over-limit selections).
+  // Per-file upload tracking (audit P0.3), keyed by a synthetic per-file key —
+  // replaces the old per-field aggregate progress number. Concurrent uploads
+  // within one field are independent rows, each cancellable/retryable alone.
+  inFlight = /* @__PURE__ */ new Map();
+  // Per-field soft capacity/busy notices ("N files weren't added", "N files
+  // exceed the limit") — plain text; announce() carries the live semantics.
   uploadNotices = /* @__PURE__ */ new Map();
   // Where to move focus on the next render: "error" after a failed submit/next,
   // "page" after navigating, null → restore the pre-render active control.
@@ -1162,6 +1538,44 @@ var DomFormController = class {
   // Teardown callbacks for open overlays (phone country popover) whose listeners
   // live on window/document and would otherwise leak past a re-render/unmount.
   overlays = /* @__PURE__ */ new Set();
+  // Human-verification challenge (Turnstile). Token read lazily by the
+  // engine's getChallengeToken at submit time (react's ref, equivalent
+  // freshest-solve contract). `turnstileContainer` is the node Cloudflare
+  // renders its iframe into — created once and RE-ATTACHED (moved, never
+  // recreated) into the tree every render, same hoist precedent as
+  // statusEl/alertEl above, so the iframe survives replaceChildren() instead
+  // of reloading on every keystroke.
+  challenge;
+  challengeToken;
+  challengeError = false;
+  turnstileContainer = newTurnstileContainer();
+  turnstileWidgetId = null;
+  turnstileSiteKey;
+  turnstileLoadInFlight = false;
+  // Invalidated on teardown so a stale load/render callback can't land after
+  // a later attempt replaced the container (or double-render into it).
+  turnstileAttempt = 0;
+  // Clear-then-set (one frame apart) so an identical repeat still re-fires —
+  // a same-tick ""→text write can collapse into a no-op net change for AT.
+  announce = (text) => {
+    this.statusEl.textContent = "";
+    requestAnimationFrame(() => {
+      this.statusEl.textContent = text;
+    });
+  };
+  announceAlert = (text) => {
+    this.alertEl.textContent = "";
+    requestAnimationFrame(() => {
+      this.alertEl.textContent = text;
+    });
+  };
+  /** Dev chrome = every developer-facing surface below (inline schema render,
+   * notices, verbose submit errors, upload pre-emption). `preview` forces it
+   * on off-localhost surfaces — cosmetic only, so correctness (where
+   * submissions go, whether they are accepted) never depends on it. */
+  devChrome() {
+    return this.options.preview === true || isDevEnv();
+  }
   get status() {
     if (this.phase === "ready") return this.engine?.getState().status ?? "idle";
     return this.phase;
@@ -1199,15 +1613,34 @@ var DomFormController = class {
     };
   }
   resolveFormIdFn;
-  /** Prod-only: the code form is an unpublished draft — submissions would 404. */
-  notLive = false;
+  /** The server refuses submissions right now — render a not-open state backed
+   *  by the real form in display-only mode ("notOpen" for a draft /
+   *  storage-blocked form, "closed" for an expired/capped workspace). Doubles
+   *  as the display-only gate: while set, the engine is created without a
+   *  client/formId/resolver and every interactive entry point no-ops. */
+  notOpenVariant = null;
   /** Exact integration failure retained for custom error/dev surfaces. */
   fatalError = null;
   genericUnavailable = false;
   syncErrorNotice = null;
   stagedNotice = false;
+  /** Dev chrome: the code form is a draft — a visible banner, not console-only. */
+  draftNotice = false;
+  /** Sync's owner-facing storage advisory + dashboard deep-link. It never
+   *  substitutes for the explicit uploadsAvailable control state. */
+  syncWarningCode;
+  syncWarningUrl;
+  /** Server-authoritative ability to start a new file upload. */
+  uploadsAvailable;
+  /** Server-authoritative per-file ceiling for the active storage lane. */
+  uploadFileSizeLimitMb;
+  /** Code of the last submit-time resolution failure (form_not_published,
+   *  form_schema_changed, …) — the connect-storage deep-link renders only with
+   *  the failure it explains, never glued onto transport/challenge errors. */
+  resolutionFailureCode = null;
   async resolve() {
     try {
+      this.challenge = this.options.challenge;
       const codeForm = isCodeForm(this.options.form) ? this.options.form : null;
       if (codeForm) {
         const client = this.options.client;
@@ -1215,6 +1648,10 @@ var DomFormController = class {
           this.resolveFormIdFn = async () => {
             try {
               const result = await syncCodeForm(client, codeForm, { bypassCache: true });
+              this.syncWarningCode = result.warningCode;
+              this.syncWarningUrl = result.warningUrl;
+              this.uploadsAvailable = result.uploadsAvailable;
+              this.uploadFileSizeLimitMb = result.uploadFileSizeLimitMb;
               if (result.status === "draft") {
                 throw new FilloError(
                   "This form is no longer published. Submission was stopped before sending answers.",
@@ -1223,6 +1660,14 @@ var DomFormController = class {
                   "form_not_published"
                 );
               }
+              if (result.accepting === false) {
+                throw new FilloError(
+                  "This form is no longer accepting responses. Submission was stopped before sending answers.",
+                  403,
+                  void 0,
+                  result.acceptingReason ?? "form_not_accepting"
+                );
+              }
               const authoritative = normalizeFormSchema(result.resolvedSchema ?? codeForm.schema);
               if (!authoritative.ok) {
                 throw new FilloError(
@@ -1250,9 +1695,11 @@ var DomFormController = class {
                   )
                 );
               }
+              this.resolutionFailureCode = null;
               return result.formId;
             } catch (error) {
               const failure = toFilloError(error);
+              this.resolutionFailureCode = failure.code ?? "sync_failed";
               this.reportSubmitSyncFailure(failure);
               throw failure;
             }
@@ -1273,7 +1720,7 @@ var DomFormController = class {
           return;
         }
         if (!client?.key) return;
-        if (isDevEnv()) {
+        if (this.devChrome()) {
           this.setSchema(codeForm.schema, this.options.theme ?? codeForm.theme, this.options.formId);
         } else {
           this.theme = this.options.theme ?? codeForm.theme;
@@ -1290,9 +1737,15 @@ var DomFormController = class {
               "sync_snapshot_required"
             );
           }
-          const development = isDevEnv();
-          this.notLive = result.status === "draft" && !development;
+          const development = this.devChrome();
+          this.notOpenVariant = development ? null : result.status === "draft" ? "notOpen" : result.accepting === false ? overlayVariant(result.acceptingReason) : null;
           this.stagedNotice = Boolean(result.staged);
+          this.draftNotice = result.status === "draft";
+          this.syncWarningCode = result.warningCode;
+          this.syncWarningUrl = result.warningUrl;
+          this.uploadsAvailable = result.uploadsAvailable;
+          this.uploadFileSizeLimitMb = result.uploadFileSizeLimitMb;
+          this.challenge = this.options.challenge ?? result.challenge;
           if (result.branding) {
             this.fetchedPoweredBy = result.branding.poweredBy;
             this.fetchedBrandLabel = result.branding.label;
@@ -1318,10 +1771,11 @@ var DomFormController = class {
               )
             );
           }
+          const connectStorage = result.warningUrl ? ` \u2014 connect storage to publish: ${result.warningUrl}` : "";
           if (result.staged) {
-            console.info(`[fillo] "${codeForm.id}" changes staged as a draft \u2014 rendering the live version until you publish them in your Fillo dashboard`);
+            console.info(`[fillo] "${codeForm.id}" changes staged as a draft \u2014 rendering the live version until you publish them in your Fillo dashboard${connectStorage}`);
           } else if (result.status === "draft") {
-            console.info(`[fillo] "${codeForm.id}" is a draft \u2014 it renders here but won't accept responses until published`);
+            console.info(`[fillo] "${codeForm.id}" is a draft \u2014 it renders here but won't accept responses until published${connectStorage}`);
           }
         } catch (error) {
           if (this.destroyed) return;
@@ -1341,10 +1795,24 @@ var DomFormController = class {
       this.render();
       const published = await this.options.client.getForm(this.options.formId);
       if (this.destroyed) return;
-      this.closed = Boolean(published.closed);
+      if (published.accepting === false) {
+        this.notOpenVariant = overlayVariant(published.acceptingReason);
+      } else {
+        this.closed = Boolean(published.closed);
+      }
+      this.uploadsAvailable = published.uploadsAvailable;
+      this.uploadFileSizeLimitMb = published.uploadFileSizeLimitMb;
       this.fetchedPoweredBy = published.branding?.poweredBy ?? null;
       this.fetchedBrandLabel = published.branding?.label;
       this.fetchedBrandHref = published.branding?.href;
+      this.challenge = this.options.challenge ?? published.challenge;
+      if (published.accepting === false && this.options.renderError) {
+        const message = this.notOpenVariant === "closed" ? "This form is no longer accepting responses." : "This form isn't accepting responses yet.";
+        this.fatalError = new FilloError(message, 403, void 0, published.acceptingReason);
+        this.phase = "error";
+        this.render(this.fatalError);
+        return;
+      }
       this.setSchema(published.schema, this.options.theme ?? published.theme ?? void 0, published.id);
     } catch (error) {
       if (this.destroyed) return;
@@ -1360,17 +1828,28 @@ var DomFormController = class {
     this.schema = normalizedSchema;
     this.theme = theme;
     this.formId = formId;
+    const displayOnly = this.notOpenVariant !== null;
     this.engine = coreCreateFormController({
       form: normalizedSchema,
-      formId,
-      client: this.options.client,
+      formId: displayOnly ? void 0 : formId,
+      client: displayOnly ? void 0 : this.options.client,
       initialData: this.options.initialData,
-      onChange: this.options.onChange,
-      onSubmitted: this.options.onSubmitted,
+      onChange: displayOnly ? void 0 : this.options.onChange,
+      onSubmitted: displayOnly ? void 0 : this.options.onSubmitted,
       getHoneypot: () => this.element.querySelector('input[name="fillo_hp_field"]')?.value ?? this.hpValue,
       surface: "default",
-      resolveFormId: this.resolveFormIdFn,
-      respondent: this.options.respondent
+      resolveFormId: displayOnly ? void 0 : this.resolveFormIdFn,
+      // Dev chrome gets the developer-grade resolution failure (message +
+      // machine code) instead of the respondent-safe "unavailable" fallback.
+      verboseResolutionErrors: this.devChrome(),
+      respondent: displayOnly ? void 0 : this.options.respondent,
+      // Challenge (Turnstile) — wired as react's useFilloController wires the
+      // core controller: challengeRequired captured once here (forced off for
+      // a not-open preview, which never submits regardless);
+      // getChallengeToken/onChallengeFailed stay live via `this`.
+      challengeRequired: displayOnly ? false : Boolean(this.challenge),
+      getChallengeToken: () => this.challengeToken,
+      onChallengeFailed: () => this.resetChallengeWidget()
     });
     let lastStatus = this.engine.getState().status;
     let lastResumed = this.engine.getState().resumedDraft;
@@ -1379,13 +1858,15 @@ var DomFormController = class {
       const state = this.engine?.getState();
       if (!state) return;
       if (state.status !== lastStatus || state.resumedDraft !== lastResumed || state.editingPrevious !== lastEditing) {
+        if (state.editingPrevious && !lastEditing) this.announce(DEFAULT_STRINGS.editNotice);
+        else if (state.resumedDraft && !lastResumed) this.announce(DEFAULT_STRINGS.resumeNotice);
         lastStatus = state.status;
         lastResumed = state.resumedDraft;
         lastEditing = state.editingPrevious;
         this.queueRender();
       }
     });
-    this.configureDraftFlush(normalizedSchema);
+    if (!displayOnly) this.configureDraftFlush(normalizedSchema);
     this.phase = this.closed ? "closed" : "ready";
     this.render();
   }
@@ -1404,7 +1885,7 @@ var DomFormController = class {
     this.theme = theme;
     this.formId = formId;
     this.engine.setContext({ form: normalizedSchema, formId });
-    this.configureDraftFlush(normalizedSchema);
+    if (this.notOpenVariant === null) this.configureDraftFlush(normalizedSchema);
     this.phase = this.closed ? "closed" : "ready";
     this.render();
   }
@@ -1438,26 +1919,31 @@ var DomFormController = class {
     this.setValueInternal(fieldId, value);
   }
   setValueInternal(fieldId, value, opts = {}) {
+    if (this.notOpenVariant) return;
     this.engine?.setValue(fieldId, value);
     if (opts.render !== false) this.queueRender();
   }
   next() {
-    if (!this.engine) return;
+    if (!this.engine || this.notOpenVariant) return;
     const before = this.engine.getState().pageIndex;
     this.engine.next();
     this.focusIntent = this.engine.getState().pageIndex !== before ? "page" : "error";
     this.render();
   }
   back() {
-    if (!this.engine) return;
+    if (!this.engine || this.notOpenVariant) return;
     this.engine.back();
     this.focusIntent = "page";
     this.render();
   }
   async submit() {
-    if (!this.engine || this.phase !== "ready") return;
+    if (!this.engine || this.phase !== "ready" || this.notOpenVariant) return;
     const pending = this.engine.submit();
-    if (this.hasErrors()) this.focusIntent = "error";
+    if (this.hasErrors()) {
+      this.focusIntent = "error";
+    } else if (this.engine.getState().status === "submitting") {
+      this.announce(DEFAULT_FIELD_STRINGS.submittingAnnouncement);
+    }
     this.render();
     try {
       await pending;
@@ -1491,18 +1977,87 @@ var DomFormController = class {
     this.options.respondent = respondent;
     this.engine?.setContext({ respondent });
   }
-  async uploadFiles(field, files) {
-    if (!this.schema) return;
-    if (this.uploadProgress.has(field.id)) {
-      this.uploadNotices.set(field.id, "Wait for the current upload to finish before adding more files.");
+  /** This field's active (non-failed) in-flight count — room math and the
+   *  setUploading(field, …) flip both key off it. A failed row holds no slot
+   *  (it must not strand the field at permanently-full). */
+  fieldActive(fieldId) {
+    let n = 0;
+    for (const row of this.inFlight.values()) if (row.fieldId === fieldId && row.error === void 0) n++;
+    return n;
+  }
+  uploadRowsFor(fieldId) {
+    const rows = [];
+    for (const [key, row] of this.inFlight) {
+      if (row.fieldId === fieldId) rows.push({ key, name: row.name, size: row.size, fraction: row.fraction, error: row.error });
+    }
+    return rows;
+  }
+  /** Cancel/retry/dismiss one row by its per-file key (audit P0.3) — the
+   *  per-file counterpart of setValueInternal, called from the rendered
+   *  Cancel/Retry/Dismiss buttons via InternalFieldRenderContext. */
+  uploadAction = (key, action) => {
+    const row = this.inFlight.get(key);
+    if (!row) return;
+    if (action === "cancel") {
+      row.controller.abort();
+      this.inFlight.delete(key);
+    } else if (action === "dismiss") {
+      this.inFlight.delete(key);
+    } else {
+      this.inFlight.delete(key);
+      void this.startUpload(row.fieldId, row.file, row.maxFiles);
+    }
+    if (this.fieldActive(row.fieldId) === 0) this.engine?.setUploading(row.fieldId, false);
+    this.queueRender();
+  };
+  async startUpload(fieldId, file, maxFiles) {
+    const key = `${file.name}-${file.size}-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+    const controller = new AbortController();
+    this.inFlight.set(key, { fieldId, name: file.name, size: file.size, fraction: 0, file, controller, maxFiles });
+    this.engine?.setUploading(fieldId, true);
+    this.queueRender();
+    try {
+      const value = this.options.client && this.formId ? await this.options.client.uploadFile(this.formId, file, {
+        fieldId,
+        signal: controller.signal,
+        onProgress: (progress) => {
+          const row = this.inFlight.get(key);
+          if (!row) return;
+          row.fraction = progress.fraction;
+          this.queueRender();
+        }
+      }) : {
+        fileId: `local:${file.name}:${file.size}`,
+        name: file.name,
+        size: file.size,
+        mime: file.type || "application/octet-stream"
+      };
+      if (this.destroyed) return;
+      this.inFlight.delete(key);
+      const current = maxFiles > 1 && Array.isArray(this.mutableData[fieldId]) ? this.mutableData[fieldId] : [];
+      this.setValueInternal(fieldId, [...current, value]);
+    } catch (error) {
+      if (this.destroyed || controller.signal.aborted) return;
+      const uploadError = toFilloError(error);
+      const message = uploadError.status !== void 0 && uploadError.status >= 500 ? DEFAULT_FIELD_STRINGS.uploadUnavailable : uploadError.message || DEFAULT_FIELD_STRINGS.uploadFailed;
+      const row = this.inFlight.get(key);
+      if (row) row.error = message;
+      this.announceAlert(message);
+      this.options.onError?.(uploadError);
+    } finally {
+      if (this.fieldActive(fieldId) === 0) this.engine?.setUploading(fieldId, false);
       this.queueRender();
-      return;
     }
+  }
+  async uploadFiles(field, files) {
+    if (!this.schema || this.notOpenVariant) return;
     const maxFiles = field.maxFiles ?? 1;
-    const existing = maxFiles > 1 && Array.isArray(this.mutableData[field.id]) ? [...this.mutableData[field.id]] : [];
-    const room = Math.max(0, maxFiles - existing.length);
+    const existingCount = maxFiles > 1 && Array.isArray(this.mutableData[field.id]) ? this.mutableData[field.id].length : 0;
+    const room = Math.max(0, maxFiles - existingCount - this.fieldActive(field.id));
     const withinLimit = files.slice(0, room);
-    const maxBytes = (field.maxFileSizeMb ?? 500) * 1024 * 1024;
+    const configuredMaxMb = field.maxFileSizeMb ?? 500;
+    const maxFileSizeMb = this.uploadFileSizeLimitMb ? Math.min(configuredMaxMb, this.uploadFileSizeLimitMb) : configuredMaxMb;
+    const maxBytes = maxFileSizeMb * 1024 * 1024;
     const selected = withinLimit.filter((file) => file.size <= maxBytes);
     const dropped = files.length - withinLimit.length;
     const oversized = withinLimit.length - selected.length;
@@ -1515,13 +2070,12 @@ var DomFormController = class {
       }
       if (oversized > 0) {
         notices.push(
-          `${oversized} ${oversized === 1 ? "file exceeds" : "files exceed"} the ${field.maxFileSizeMb ?? 500} MB limit.`
+          `${oversized} ${oversized === 1 ? "file exceeds" : "files exceed"} the ${maxFileSizeMb} MB limit.`
         );
       }
-      this.uploadNotices.set(
-        field.id,
-        notices.join(" ")
-      );
+      const text = notices.join(" ");
+      this.uploadNotices.set(field.id, text);
+      this.announce(text);
     } else {
       this.uploadNotices.delete(field.id);
     }
@@ -1529,62 +2083,24 @@ var DomFormController = class {
       this.queueRender();
       return;
     }
-    const controller = new AbortController();
-    this.uploadControllers.set(field.id, controller);
-    this.uploadProgress.set(field.id, 0);
-    this.engine?.setUploading(field.id, true);
-    this.queueRender();
-    try {
-      const values = [];
-      for (const [index, file] of selected.entries()) {
-        if (this.options.client && this.formId) {
-          values.push(
-            await this.options.client.uploadFile(this.formId, file, {
-              fieldId: field.id,
-              signal: controller.signal,
-              onProgress: (progress) => {
-                this.uploadProgress.set(field.id, (index + progress.fraction) / selected.length);
-                this.queueRender();
-              }
-            })
-          );
-        } else {
-          values.push({
-            fileId: `local:${file.name}:${file.size}`,
-            name: file.name,
-            size: file.size,
-            mime: file.type || "application/octet-stream"
-          });
-        }
-      }
-      if (this.destroyed) return;
-      this.setValueInternal(field.id, [...existing, ...values]);
-    } catch (error) {
-      if (!this.destroyed && !controller.signal.aborted) {
-        const uploadError = toFilloError(error);
-        this.uploadNotices.set(field.id, uploadError.message || "Upload failed \u2014 try again");
-        this.options.onError?.(uploadError);
-      }
-    } finally {
-      if (this.uploadControllers.get(field.id) === controller) {
-        this.uploadControllers.delete(field.id);
-      }
-      this.uploadProgress.delete(field.id);
-      this.engine?.setUploading(field.id, false);
-      this.queueRender();
-    }
+    await Promise.all(selected.map((file) => this.startUpload(field.id, file, maxFiles)));
   }
   destroy() {
     this.destroyed = true;
     this.teardownDraftFlush();
     this.closeOverlays();
-    this.uploadControllers.forEach((controller) => controller.abort());
-    this.uploadControllers.clear();
-    this.uploadProgress.clear();
+    this.teardownTurnstileWidget();
+    for (const row of this.inFlight.values()) row.controller.abort();
+    this.inFlight.clear();
     this.engine?.destroy();
     this.engine = null;
     this.target.replaceChildren();
   }
+  /** Keep an optional-upload form accepting while pre-empting only file
+   * controls the current definition envelope says the server will refuse. */
+  storageBlocked() {
+    return this.uploadsAvailable === false;
+  }
   /** Add/return the phone popover teardown; called back on re-render or destroy. */
   registerOverlay = (close) => {
     this.overlays.add(close);
@@ -1600,6 +2116,83 @@ var DomFormController = class {
     }
     this.overlays.clear();
   }
+  /** Idempotent: at most one load+render per armed container (guarded by
+   *  widget id / in-flight / already-failed); re-arms on a changed site key
+   *  (mirrors react's effect, keyed on siteKey). */
+  ensureTurnstileWidget(siteKey) {
+    if (this.turnstileSiteKey !== siteKey) {
+      this.teardownTurnstileWidget();
+      this.turnstileSiteKey = siteKey;
+    }
+    if (this.turnstileWidgetId !== null || this.turnstileLoadInFlight || this.challengeError) return;
+    this.turnstileLoadInFlight = true;
+    const attempt = ++this.turnstileAttempt;
+    loadTurnstileScript().then(() => {
+      if (this.destroyed || attempt !== this.turnstileAttempt) return;
+      const api = turnstileGlobal();
+      if (!api) {
+        this.turnstileLoadInFlight = false;
+        this.handleChallengeError();
+        return;
+      }
+      this.turnstileWidgetId = api.render(this.turnstileContainer, {
+        sitekey: siteKey,
+        theme: "auto",
+        callback: (token) => this.handleChallengeToken(token),
+        "error-callback": () => {
+          this.handleChallengeToken(void 0);
+          this.handleChallengeError();
+        },
+        "expired-callback": () => this.resetChallengeWidget(),
+        "timeout-callback": () => this.resetChallengeWidget()
+      });
+      this.turnstileLoadInFlight = false;
+    }).catch(() => {
+      if (this.destroyed || attempt !== this.turnstileAttempt) return;
+      this.turnstileLoadInFlight = false;
+      this.handleChallengeError();
+    });
+  }
+  handleChallengeToken(token) {
+    this.challengeToken = token;
+    if (token) this.challengeError = false;
+    this.queueRender();
+  }
+  /** Surfaces via `.fillo-turnstile-error` AND the assertive channel — the
+   *  paragraph mounts fresh with the tree, and a live region announces
+   *  mutations, not initial content (same reasoning as the announce channels). */
+  handleChallengeError() {
+    this.challengeError = true;
+    this.announceAlert(DEFAULT_STRINGS.challengeUnavailable);
+    this.queueRender();
+  }
+  /** Re-arm the SAME widget instance for a fresh solve (server rejection,
+   *  expiry, or timeout) — not a teardown, the widget stays mounted. */
+  resetChallengeWidget() {
+    this.challengeToken = void 0;
+    if (this.turnstileWidgetId) turnstileGlobal()?.reset(this.turnstileWidgetId);
+    this.queueRender();
+  }
+  /** Fully remove any active/pending widget (mirrors react's unmount effect):
+   *  the script stays cached, but the widget and its token are gone, and a
+   *  fresh container replaces the old one for a pristine next mount. Safe to
+   *  call when nothing is active. */
+  teardownTurnstileWidget() {
+    if (this.turnstileWidgetId === null && !this.turnstileLoadInFlight) return;
+    this.turnstileAttempt++;
+    const api = turnstileGlobal();
+    if (this.turnstileWidgetId && api) {
+      try {
+        api.remove(this.turnstileWidgetId);
+      } catch {
+      }
+    }
+    this.turnstileWidgetId = null;
+    this.turnstileLoadInFlight = false;
+    this.challengeError = false;
+    this.turnstileContainer = newTurnstileContainer();
+    this.challengeToken = void 0;
+  }
   captureFocus() {
     if (typeof document === "undefined") return null;
     const active = document.activeElement;
@@ -1657,9 +2250,13 @@ var DomFormController = class {
   applyFocus(intent, captured) {
     if (typeof document === "undefined") return;
     if (intent === "error") {
+      const summary = this.element.querySelector(".fillo-error-summary");
+      if (summary) {
+        summary.focus();
+        return;
+      }
       const invalid = this.element.querySelector('[aria-invalid="true"]');
-      const target = invalid?.matches(FOCUSABLE_SELECTOR) ? invalid : invalid?.querySelector(FOCUSABLE_SELECTOR);
-      target?.focus?.();
+      invalid && focusableWithin(invalid)?.focus();
       return;
     }
     if (intent === "page") {
@@ -1687,7 +2284,7 @@ var DomFormController = class {
       `[fillo] form sync failed${error.code ? ` (${error.code})` : ""}: ${error.message}`
     );
     this.syncErrorNotice = error;
-    const development = isDevEnv();
+    const development = this.devChrome();
     if (!development || this.options.renderError) {
       this.genericUnavailable = !development;
       this.handleError(error);
@@ -1704,7 +2301,7 @@ var DomFormController = class {
     );
     this.syncErrorNotice = error;
     this.options.onError?.(error);
-    if (isDevEnv()) this.render();
+    if (this.devChrome()) this.render();
   }
   /** Submit-time verification failed: keep the form/answers for a safe retry. */
   reportSubmitSyncFailure(error) {
@@ -1728,6 +2325,8 @@ var DomFormController = class {
     this.focusIntent = null;
     const captured = intent ? null : this.captureFocus();
     this.closeOverlays();
+    const willRenderForm = this.phase === "ready" && this.engine?.getState().status !== "submitted";
+    if (!willRenderForm) this.teardownTurnstileWidget();
     this.element.replaceChildren();
     if (this.phase === "loading") {
       const loading = el("div", {
@@ -1747,7 +2346,7 @@ var DomFormController = class {
     if (this.phase === "error" && activeError) {
       const errorView = this.options.renderError?.(activeError) ?? el("div", {
         className: "fillo-form fillo-form--error",
-        text: this.genericUnavailable ? "This form is unavailable." : activeError.message
+        text: this.genericUnavailable ? "This form is unavailable." : loadFailureMessage(activeError)
       });
       if (!errorView.hasAttribute("data-fillo")) errorView.setAttribute("data-fillo", "root");
       if (!errorView.hasAttribute("data-state")) errorView.setAttribute("data-state", "error");
@@ -1766,14 +2365,9 @@ var DomFormController = class {
       this.element.appendChild(closed);
       return;
     }
-    if (this.notLive) {
-      const panel = el("div", {
-        className: `fillo-form fillo-form--closed ${this.options.className ?? ""}`,
-        attrs: { "data-fillo": "root", "data-state": "closed" }
-      });
-      themeStyle(panel, this.theme);
-      panel.appendChild(el("p", { className: "fillo-closed", text: "This form isn't live yet." }));
-      this.element.appendChild(panel);
+    if (this.notOpenVariant && this.schema) {
+      this.element.appendChild(this.renderNotOpen(this.notOpenVariant));
+      if (this.brandingVisible()) this.element.appendChild(poweredByEl(this.fetchedBrandLabel, this.fetchedBrandHref));
       return;
     }
     if (!this.schema) return;
@@ -1783,8 +2377,6 @@ var DomFormController = class {
       const success = this.options.renderSuccess?.(api) ?? defaultSuccess(this.schema);
       success.setAttribute("data-fillo", success.getAttribute("data-fillo") ?? "root");
       success.setAttribute("data-state", success.getAttribute("data-state") ?? "submitted");
-      success.setAttribute("role", success.getAttribute("role") ?? "status");
-      success.setAttribute("aria-live", success.getAttribute("aria-live") ?? "polite");
       if (!success.hasAttribute("tabindex")) success.setAttribute("tabindex", "-1");
       themeStyle(success, this.theme);
       this.element.appendChild(success);
@@ -1793,15 +2385,27 @@ var DomFormController = class {
         this.liveSubmissionHandled = true;
         const redirect = safeHttpUrl(this.schema.settings.redirectUrl);
         if (redirect && typeof window !== "undefined") window.location.assign(redirect);
-        else success.focus();
+        else {
+          success.focus();
+          this.announce(success.textContent ?? "");
+        }
       }
       return;
     }
-    if (!this.options.client && isDevEnv()) this.element.appendChild(devNoClientEl());
-    if (this.syncErrorNotice && isDevEnv()) {
-      this.element.appendChild(devSyncErrorEl(this.syncErrorNotice));
+    if (this.devChrome()) {
+      appendChildren(
+        this.element,
+        devChromeEls({
+          preview: this.options.preview === true,
+          devNotices: this.options.devNotices,
+          syncError: this.syncErrorNotice,
+          staged: this.stagedNotice,
+          draft: this.draftNotice,
+          warningUrl: this.syncWarningUrl,
+          noClient: !this.options.client
+        })
+      );
     }
-    if (this.stagedNotice && isDevEnv()) this.element.appendChild(devStagedEl());
     this.element.appendChild(this.renderForm());
     if (this.brandingVisible()) this.element.appendChild(poweredByEl(this.fetchedBrandLabel, this.fetchedBrandHref));
     this.applyFocus(intent, captured);
@@ -1810,49 +2414,100 @@ var DomFormController = class {
   brandingVisible() {
     return this.fetchedPoweredBy ?? true;
   }
+  /** Production not-accepting chrome: a calm state backed by the real form
+   * rendered display-only — honest about the state and impossible to fill.
+   * The default CSS hides the preview; hosts without it still get the layered
+   * safety contract. The wrapper is inert + aria-hidden +
+   * pointer-events:none, the preview markup nests every control in a natively
+   * disabled fieldset (see renderForm), and the engine behind it was created
+   * without a client/formId/resolver — so nothing inside can focus, submit,
+   * start an upload session, or touch saved-progress drafts. */
+  renderNotOpen(variant) {
+    const root = el("div", {
+      className: `fillo-form fillo-form--not-open ${this.options.className ?? ""}`,
+      attrs: { "data-fillo": "root", "data-state": "closed" }
+    });
+    themeStyle(root, this.theme);
+    const preview = el("div", {
+      className: "fillo-not-open-preview",
+      attrs: { "aria-hidden": "true", inert: "" }
+    });
+    preview.appendChild(this.renderForm());
+    const card = el("div", {
+      className: "fillo-not-open-card",
+      attrs: { role: "status", "data-fillo": "not-open-card" }
+    });
+    card.appendChild(
+      el("h2", {
+        className: "fillo-not-open-title",
+        text: variant === "closed" ? DEFAULT_STRINGS.closedTitle : DEFAULT_STRINGS.notOpenTitle
+      })
+    );
+    card.appendChild(
+      el("p", {
+        className: "fillo-not-open-body",
+        text: variant === "closed" ? DEFAULT_STRINGS.closed : DEFAULT_STRINGS.notOpenBody
+      })
+    );
+    appendChildren(root, [preview, card]);
+    return root;
+  }
   renderForm() {
     const api = this.api();
-    const form = el("form", {
+    const displayOnly = this.notOpenVariant !== null;
+    const challengeRequired = Boolean(this.challenge);
+    const showChallenge = !displayOnly && challengeRequired && api.isLastPage;
+    const form = el(displayOnly ? "div" : "form", {
       className: `fillo-form ${this.options.className ?? ""}`,
       attrs: {
-        "data-fillo": "root",
-        "data-state": api.status,
+        "data-fillo": displayOnly ? "preview-form" : "root",
+        "data-state": displayOnly ? "preview" : api.status,
         "data-page": String(api.pageIndex + 1)
       }
     });
     form.toggleAttribute("data-last-page", api.isLastPage);
     themeStyle(form, this.theme);
-    form.noValidate = true;
     const advance = () => {
       if (api.isLastPage) void this.submit();
       else this.next();
     };
-    form.addEventListener("submit", (event) => {
-      event.preventDefault();
-      advance();
-    });
+    if (!displayOnly) {
+      const formEl = form;
+      formEl.noValidate = true;
+      formEl.addEventListener("submit", (event) => {
+        event.preventDefault();
+        advance();
+      });
+    }
+    const content = displayOnly ? form.appendChild(
+      el("fieldset", { className: "fillo-not-open-fields", attrs: { disabled: "" } })
+    ) : form;
     const restoreState = this.engine?.getState();
     if (restoreState?.resumedDraft || restoreState?.editingPrevious) {
       const resume = el("div", {
         className: "fillo-resume",
-        attrs: { role: "status", "data-fillo": "resume" }
+        attrs: { "data-fillo": "resume" }
       });
       resume.appendChild(
         el("span", {
           className: "fillo-resume-text",
-          text: restoreState.editingPrevious ? "You're updating your earlier response." : "Picked up where you left off."
+          text: restoreState.editingPrevious ? DEFAULT_STRINGS.editNotice : DEFAULT_STRINGS.resumeNotice
         })
       );
       const clear = el("button", {
         className: "fillo-resume-clear",
-        text: "Start over",
+        text: DEFAULT_STRINGS.resumeStartOver,
         attrs: { type: "button" }
       });
       clear.addEventListener("click", () => this.resetDraft());
       resume.appendChild(clear);
-      form.appendChild(resume);
+      content.appendChild(resume);
     }
     if (api.pageCount > 1 && this.schema?.settings.showProgress !== false) {
+      const seq = reachablePageSequence(api.form, api.data);
+      const total = Math.max(seq.length, 1);
+      const pos = seq.indexOf(api.page.id);
+      const step = pos >= 0 ? pos + 1 : Math.min(api.pageIndex + 1, total);
       const progress = el("div", {
         className: "fillo-progress-track",
         attrs: {
@@ -1860,8 +2515,8 @@ var DomFormController = class {
           "data-fillo": "progress",
           "aria-label": api.form.title || "Form progress",
           "aria-valuemin": "1",
-          "aria-valuemax": String(api.pageCount),
-          "aria-valuenow": String(api.pageIndex + 1)
+          "aria-valuemax": String(total),
+          "aria-valuenow": String(step)
         }
       });
       progress.appendChild(
@@ -1869,9 +2524,9 @@ var DomFormController = class {
       );
       progress.firstElementChild?.style.setProperty(
         "--fillo-progress-value",
-        `${(api.pageIndex + 1) / api.pageCount * 100}%`
+        `${step / total * 100}%`
       );
-      form.appendChild(progress);
+      content.appendChild(progress);
     }
     if (api.pageIndex === 0) {
       const header = el("header", { className: "fillo-header", attrs: { "data-fillo": "header" } });
@@ -1889,9 +2544,9 @@ var DomFormController = class {
           })
         );
       }
-      form.appendChild(header);
+      content.appendChild(header);
     } else if (api.page.title) {
-      form.appendChild(
+      content.appendChild(
         el("h2", {
           className: "fillo-page-title",
           text: api.page.title,
@@ -1899,33 +2554,65 @@ var DomFormController = class {
         })
       );
     }
+    const summary = this.renderErrorSummary(api);
+    if (summary) content.appendChild(summary);
     const blocks = el("div", { className: "fillo-blocks", attrs: { "data-fillo": "blocks" } });
     for (const block of api.blocks) {
       const rendered = this.renderBlock(pipeBlock(block, this.mutableData, api.form), api);
       if (rendered) blocks.appendChild(rendered);
     }
-    form.appendChild(blocks);
-    const hp = el("input", { className: "fillo-hp", attrs: { type: "text", name: "fillo_hp_field", tabindex: "-1", autocomplete: "off", "aria-hidden": "true" } });
-    hp.style.position = "absolute";
-    hp.style.left = "-9999px";
-    hp.style.top = "auto";
-    hp.style.width = "1px";
-    hp.style.height = "1px";
-    hp.style.opacity = "0";
-    hp.style.overflow = "hidden";
-    hp.style.pointerEvents = "none";
-    hp.addEventListener("input", () => {
-      this.hpValue = hp.value;
-    });
-    form.appendChild(hp);
+    content.appendChild(blocks);
+    if (!displayOnly) {
+      const hp = el("input", { className: "fillo-hp", attrs: { type: "text", name: "fillo_hp_field", tabindex: "-1", autocomplete: "off", "aria-hidden": "true" } });
+      hp.style.position = "absolute";
+      hp.style.left = "-9999px";
+      hp.style.top = "auto";
+      hp.style.width = "1px";
+      hp.style.height = "1px";
+      hp.style.opacity = "0";
+      hp.style.overflow = "hidden";
+      hp.style.pointerEvents = "none";
+      hp.addEventListener("input", () => {
+        this.hpValue = hp.value;
+      });
+      content.appendChild(hp);
+    }
+    if (showChallenge) {
+      const slot = el("div", {
+        className: "fillo-turnstile-slot",
+        attrs: { "data-fillo": "turnstile-slot" }
+      });
+      slot.appendChild(this.turnstileContainer);
+      if (this.challengeError) {
+        slot.appendChild(
+          el("p", {
+            className: "fillo-turnstile-error",
+            attrs: { role: "alert" },
+            text: DEFAULT_STRINGS.challengeUnavailable
+          })
+        );
+      }
+      content.appendChild(slot);
+      this.ensureTurnstileWidget(this.challenge.siteKey);
+    } else if (this.turnstileWidgetId !== null || this.turnstileLoadInFlight) {
+      this.teardownTurnstileWidget();
+    }
     const submitError = api.status === "error" ? "This form can't submit right now. Please try again in a moment." : this.engine?.getState().submitError;
     if (submitError) {
-      form.appendChild(
-        el("p", { className: "fillo-submit-error", attrs: { role: "alert" }, text: submitError })
-      );
+      const alert = el("p", { className: "fillo-submit-error", attrs: { role: "alert" }, text: submitError });
+      const fixUrl = this.devChrome() && this.resolutionFailureCode === "form_not_published" && this.syncWarningCode === "storage_required" ? safeHttpUrl(this.syncWarningUrl) : null;
+      if (fixUrl) {
+        alert.append(" Connect storage: ");
+        alert.appendChild(
+          el("a", { text: fixUrl, attrs: { href: fixUrl, target: "_blank", rel: "noopener noreferrer" } })
+        );
+      }
+      content.appendChild(alert);
     }
     const autoSubmit = api.form.settings.submitMode === "auto";
-    const showPrimaryButton = !autoSubmit || !api.isLastPage || needsExplicitSubmit(visibleFields(api.form, api.data));
+    const showPrimaryButton = !autoSubmit || !api.isLastPage || needsExplicitSubmit(visibleFields(api.form, api.data)) || // A challenge needs an explicit Submit even on an otherwise button-less
+    // auto-submit form — you can't one-tap past a human check.
+    showChallenge;
     const showFooter = showPrimaryButton || api.pageCount > 1 && !api.isFirstPage;
     if (showFooter) {
       const footer = el("footer", { className: "fillo-footer", attrs: { "data-fillo": "footer" } });
@@ -1944,17 +2631,58 @@ var DomFormController = class {
           text: api.status === "submitting" ? "Submitting..." : api.isLastPage ? api.form.settings.submitLabel ?? "Submit" : "Next",
           attrs: { type: "submit", "data-fillo": "button" }
         });
-        submit.toggleAttribute("disabled", api.status === "submitting" || this.uploadProgress.size > 0);
+        submit.toggleAttribute(
+          "disabled",
+          api.status === "submitting" || this.engine?.getState().uploading === true || // Wait for the human check before enabling submit (never "Next").
+          // The server rejects a tokenless submit regardless — this is UX only.
+          showChallenge && !this.challengeToken
+        );
         submit.addEventListener("click", (event) => {
           event.preventDefault();
           advance();
         });
         footer.appendChild(submit);
       }
-      form.appendChild(footer);
+      content.appendChild(footer);
     }
     return form;
   }
+  /** GOV.UK error summary (audit P2.8): scoped to the CURRENTLY RENDERED
+   *  page — a failed submit already jumps to the first page with a visible
+   *  error, so every link resolves to something in the live tree. Per-field
+   *  messages lose their own role="alert"; this is the one alert. */
+  renderErrorSummary(api) {
+    const fields = api.blocks.filter(isField).filter((field) => api.errors[field.id]);
+    if (fields.length === 0) return null;
+    const box = el("div", {
+      className: "fillo-error-summary",
+      attrs: { role: "alert", tabindex: "-1", "data-fillo": "error-summary" }
+    });
+    box.appendChild(
+      el("p", { className: "fillo-error-summary-title", text: DEFAULT_FIELD_STRINGS.errorSummaryTitle })
+    );
+    const list = el("ul");
+    for (const field of fields) {
+      const link = el("a", {
+        text: `${field.label}: ${api.errors[field.id]}`,
+        attrs: { href: `#${fieldIds(this.instanceId, field.id).inputId}` }
+      });
+      link.addEventListener("click", (event) => {
+        event.preventDefault();
+        const fieldEl = Array.from(this.element.querySelectorAll("[data-field]")).find(
+          (node) => node.getAttribute("data-field") === field.id
+        );
+        if (!fieldEl) return;
+        const invalid = fieldEl.querySelector('[aria-invalid="true"]') ?? fieldEl;
+        focusableWithin(invalid)?.focus();
+      });
+      const item = el("li");
+      item.appendChild(link);
+      list.appendChild(item);
+    }
+    box.appendChild(list);
+    return box;
+  }
   renderBlock(block, api) {
     if (!isField(block)) return renderContent(block);
     const setValue = (value, options) => {
@@ -1966,7 +2694,7 @@ var DomFormController = class {
         // dom's status union adds render phases; non-"idle" is a no anyway.
         status: api.status,
         isLastPage: api.isLastPage,
-        uploading: this.uploadProgress.size > 0
+        uploading: this.engine?.getState().uploading === true
       };
       if (shouldAutoSubmit(block, value, autoCtx)) void this.submit();
     };
@@ -1978,11 +2706,16 @@ var DomFormController = class {
       api,
       setValue,
       uploadFiles: (field, files) => this.uploadFiles(field, files),
-      uploadProgress: this.uploadProgress,
+      uploadRows: this.uploadRowsFor(block.id),
+      uploadAction: this.uploadAction,
       activeOtherFields: this.activeOtherFields,
       getValue: () => this.engine?.getState().data[block.id],
       registerOverlay: this.registerOverlay,
-      uploadNotice: this.uploadNotices.get(block.id)
+      uploadNotice: this.uploadNotices.get(block.id),
+      storageBlocked: this.storageBlocked(),
+      storageFixUrl: this.storageBlocked() && this.devChrome() ? safeHttpUrl(this.syncWarningUrl) : null,
+      announce: this.announce,
+      announceAlert: this.announceAlert
     };
     const renderer = block.kind === "custom" ? this.options.customComponents?.[block.component] ?? this.options.components?.custom : this.options.components?.[block.kind] ?? defaultFieldRenderer;
     return renderer?.(context) ?? null;
@@ -2003,7 +2736,7 @@ function defaultSuccess(schema) {
   const success = el("div", { className: "fillo-form fillo-form--success" });
   const inner = el("div", { className: "fillo-success" });
   appendChildren(inner, [
-    el("div", { className: "fillo-success-mark", text: "\u2713", attrs: { "aria-hidden": "true" } }),
+    el("div", { className: "fillo-success-mark", attrs: { "aria-hidden": "true" } }),
     el("h2", { className: "fillo-success-title", text: schema.settings.successTitle ?? "Thanks!" }),
     el("p", { className: "fillo-success-message", text: schema.settings.successMessage ?? "Your response has been recorded." })
   ]);
@@ -2017,13 +2750,16 @@ function poweredByEl(label, href) {
     attrs: { href: badgeUrl(href), target: "_blank", rel: "noopener noreferrer" }
   });
 }
+function overlayVariant(reason) {
+  return reason === "expired" || reason === "capped" || reason === "storage_full" ? "closed" : "notOpen";
+}
 function isDevEnv() {
-  return typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
+  return isLikelyDevEnv();
 }
 function devNoClientEl() {
   return el("div", {
     className: "fillo-devwarning",
-    text: "No Fillo client connected \u2014 this form is render-only and won't save responses. Pass a client to collect them in Fillo, or forward with webhooks. (Shown only in development.)",
+    text: "No Fillo client connected \u2014 this form is render-only and won't save responses. Pass a client to collect them in Fillo, or forward with webhooks. (Shown only in development and preview.)",
     attrs: { role: "alert" }
   });
 }
@@ -2041,6 +2777,53 @@ function devStagedEl() {
     attrs: { role: "alert" }
   });
 }
+function devDraftEl(warningUrl) {
+  const node = el("div", { className: "fillo-devwarning", attrs: { role: "alert" } });
+  node.append(
+    "Draft form \u2014 it renders here, but it won't accept responses until you publish it in your Fillo dashboard. "
+  );
+  const safeUrl = safeHttpUrl(warningUrl);
+  if (safeUrl) {
+    node.append("Connect storage to publish: ");
+    node.appendChild(
+      el("a", { text: safeUrl, attrs: { href: safeUrl, target: "_blank", rel: "noopener noreferrer" } })
+    );
+    node.append(". ");
+  }
+  node.append("(Shown only in development and preview.)");
+  return node;
+}
+function previewBadgeEl() {
+  return el("span", {
+    className: "fillo-preview-badge",
+    text: "Preview",
+    attrs: { "data-fillo": "preview-badge" }
+  });
+}
+var warnedPreviewInProduction = false;
+function warnPreviewInProduction() {
+  if (warnedPreviewInProduction || isBuildTimeDevEnv()) return;
+  warnedPreviewInProduction = true;
+  console.warn(
+    "[fillo] `preview` is enabled in a production build. Preview is cosmetic only \u2014 it shows developer chrome and never changes where submissions go or whether they are accepted \u2014 but remove it before respondents see this page."
+  );
+}
+function devChromeEls(state) {
+  const nodes = [];
+  if (state.preview) nodes.push(previewBadgeEl());
+  if (state.devNotices === false) return nodes;
+  if (state.syncError) nodes.push(devSyncErrorEl(state.syncError));
+  else if (state.staged) nodes.push(devStagedEl());
+  else if (state.draft) nodes.push(devDraftEl(state.warningUrl));
+  else if (state.noClient) nodes.push(devNoClientEl());
+  return nodes;
+}
+function loadFailureMessage(error) {
+  if (error.status === 404) return DEFAULT_STRINGS.loadFailedNotFound;
+  if (error.status === 0) return DEFAULT_STRINGS.loadFailedNetwork;
+  if (error.status === 422) return DEFAULT_STRINGS.renderFailed;
+  return DEFAULT_STRINGS.loadFailed;
+}
 function toFilloError(error) {
   if (isFilloError(error)) return error;
   return new FilloError(error instanceof Error ? error.message : String(error), 0);
@@ -2066,7 +2849,7 @@ var FilloFormElement = class extends HTMLElementBase {
   mounted = false;
   mountScheduled = false;
   static get observedAttributes() {
-    return ["publishable-key", "form-id"];
+    return ["publishable-key", "form-id", "data-preview"];
   }
   connectedCallback() {
     this.scheduleMount();
@@ -2115,6 +2898,14 @@ var FilloFormElement = class extends HTMLElementBase {
       if (this.isConnected) this.mount();
     });
   }
+  /** data-preview is on when present UNLESS its value says off ("false"/"0"):
+   *  frameworks stringify booleans onto data-* attributes rather than omitting
+   *  them, and a stringified `false` must never enable dev chrome for real
+   *  respondents. Disable by removing the attribute or setting it to "false". */
+  previewAttrEnabled() {
+    const value = this.getAttribute("data-preview");
+    return value !== null && value !== "false" && value !== "0";
+  }
   mount() {
     this.instance?.destroy();
     const key = this.getAttribute("publishable-key") ?? void 0;
@@ -2126,6 +2917,12 @@ var FilloFormElement = class extends HTMLElementBase {
       formId,
       theme: this.assignedTheme,
       initialData: this.assignedInitialData,
+      // Same cosmetic-only contract as renderForm's `preview` option: forces
+      // the dev chrome + a visible Preview badge on off-localhost surfaces,
+      // and never changes where submissions go or whether they are accepted.
+      // Value-aware: frameworks stringify booleans onto data-* attributes, so
+      // data-preview="false"/"0" must mean OFF, not presence-implies-on.
+      preview: this.previewAttrEnabled() ? true : void 0,
       onChange: (data) => this.dispatchEvent(new CustomEvent("fillo-change", { detail: { data } })),
       onSubmitted: (responseId, data) => this.dispatchEvent(new CustomEvent("fillo-submit", { detail: { responseId, data } })),
       onError: (error) => this.dispatchEvent(new CustomEvent("fillo-error", { detail: { error } }))