@usefillo/dom 0.6.2 → 0.8.0

package/dist/index.js

@@ -10,13 +10,16 @@ import {
   defineForm,
   digitsOnly,
   flagEmoji,
+  formSchemasEqual,
   formatNational,
   isCodeForm,
   isField,
+  isFilloError,
   normalizeFormSchema,
   normalizeFormTheme,
   parsePhone,
   pipeBlock,
+  positionPhonePopover,
   provisionWorkspace,
   needsExplicitSubmit,
   shouldAutoSubmit,
@@ -111,15 +114,31 @@ function applyFieldAria(node, field, error, ids) {
   ].filter(Boolean).join(" ");
   if (describedBy) node.setAttribute("aria-describedby", describedBy);
 }
+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 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 value = values[next];
+    if (value === void 0) return;
+    select(value);
+    group.querySelectorAll('[role="radio"]')[next]?.focus();
+  });
+}
 function shell(field, error, child, ids) {
   const wrap = el("div", {
     className: `fillo-field fillo-field--${field.kind}${error ? " fillo-field--error" : ""}`,
-    attrs: { "data-field": field.id }
+    attrs: { "data-fillo": "field", "data-field": field.id, "data-kind": field.kind }
   });
+  wrap.toggleAttribute("data-invalid", Boolean(error));
+  wrap.toggleAttribute("data-required", Boolean(field.required));
   const label = el("label", {
     className: "fillo-label",
     text: field.label,
-    attrs: { id: ids.labelId, for: ids.inputId }
+    attrs: { id: ids.labelId, for: ids.inputId, "data-fillo": "label" }
   });
   if (!field.required)
     label.appendChild(el("span", { className: "fillo-optional", text: " (optional)" }));
@@ -129,7 +148,7 @@ function shell(field, error, child, ids) {
       el("p", {
         className: "fillo-description",
         text: field.description,
-        attrs: { id: ids.descriptionId }
+        attrs: { id: ids.descriptionId, "data-fillo": "fieldDescription" }
       })
     );
   wrap.appendChild(child);
@@ -138,7 +157,7 @@ function shell(field, error, child, ids) {
       el("p", {
         className: "fillo-error",
         text: error,
-        attrs: { role: "alert", id: ids.errorId }
+        attrs: { role: "alert", id: ids.errorId, "data-fillo": "error" }
       })
     );
   return wrap;
@@ -146,10 +165,17 @@ function shell(field, error, child, ids) {
 function textInput(type, context) {
   const input = el("input", {
     className: "fillo-input",
-    attrs: { id: context.ids.inputId, type }
+    attrs: { id: context.ids.inputId, 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 (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);
+  }
   input.addEventListener("input", () => context.setValue(input.value, { render: false }));
   input.addEventListener("change", () => context.setValue(input.value));
   applyFieldAria(input, context.field, context.error, context.ids);
@@ -183,31 +209,6 @@ function setCaretAfterDigits(input, target) {
   }
   input.setSelectionRange(pos, pos);
 }
-var PHONE_POPOVER_VIEWPORT_GAP = 8;
-function positionPhonePopover(anchor, popover) {
-  if (typeof window === "undefined") return "below";
-  const gap = PHONE_POPOVER_VIEWPORT_GAP;
-  const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
-  const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
-  const anchorRect = anchor.getBoundingClientRect();
-  const spaceBelow = Math.max(0, viewportHeight - anchorRect.bottom - gap);
-  const spaceAbove = Math.max(0, anchorRect.top - gap);
-  const placement = spaceBelow < popover.scrollHeight && spaceAbove > spaceBelow ? "above" : "below";
-  const availableHeight = placement === "above" ? spaceAbove : spaceBelow;
-  const maxHeight = Math.max(0, Math.min(availableHeight, viewportHeight - gap * 2));
-  const maxWidth = Math.max(0, viewportWidth - gap * 2);
-  popover.style.setProperty("--fillo-phone-popover-max-height", `${Math.floor(maxHeight)}px`);
-  popover.style.setProperty("--fillo-phone-popover-max-width", `${Math.floor(maxWidth)}px`);
-  popover.style.setProperty("--fillo-phone-popover-offset-x", "0px");
-  const width = Math.min(popover.offsetWidth, maxWidth);
-  let offsetX = 0;
-  const rightOverflow = anchorRect.left + width - (viewportWidth - gap);
-  if (rightOverflow > 0) offsetX -= rightOverflow;
-  const leftOverflow = gap - (anchorRect.left + offsetX);
-  if (leftOverflow > 0) offsetX += leftOverflow;
-  popover.style.setProperty("--fillo-phone-popover-offset-x", `${Math.round(offsetX)}px`);
-  return placement;
-}
 function phoneInput(context) {
   const schema = context.field;
   let country = parsePhone(inputValue(context.value)).country ?? countryByIso(schema.defaultCountry) ?? countryByTimeZone(domBrowserTimeZone()) ?? countryByIso(domLocaleCountry()) ?? PHONE_COUNTRIES[0];
@@ -227,7 +228,13 @@ function phoneInput(context) {
   appendChildren(countryWrap, [flagBtn]);
   const input = el("input", {
     className: "fillo-input fillo-phone-input",
-    attrs: { id: context.ids.inputId, type: "tel", inputmode: "tel", autocomplete: "tel-national" }
+    attrs: {
+      id: context.ids.inputId,
+      type: "tel",
+      inputmode: "tel",
+      autocomplete: "tel-national",
+      "data-fillo": "control"
+    }
   });
   applyFieldAria(input, context.field, context.error, context.ids);
   const nationalFromValue = () => {
@@ -413,10 +420,13 @@ function phoneInput(context) {
 function longText(context) {
   const textarea = el("textarea", {
     className: "fillo-input fillo-textarea",
-    attrs: { id: context.ids.inputId, rows: "4" }
+    attrs: { id: context.ids.inputId, rows: "4", "data-fillo": "control" }
   });
   textarea.value = typeof context.value === "string" ? context.value : "";
   if (context.field.placeholder) textarea.placeholder = context.field.placeholder;
+  if ("maxLength" in context.field && context.field.maxLength !== void 0) {
+    textarea.maxLength = context.field.maxLength;
+  }
   textarea.addEventListener("input", () => context.setValue(textarea.value, { render: false }));
   textarea.addEventListener("change", () => context.setValue(textarea.value));
   applyFieldAria(textarea, context.field, context.error, context.ids);
@@ -431,14 +441,15 @@ function singleChoice(context) {
   const otherActive = isOther || value === "" && activeOtherFields?.has(field.id) === true;
   const wrap = el("div", {
     className: "fillo-options",
-    attrs: { role: "radiogroup", "aria-labelledby": context.ids.labelId }
+    attrs: { role: "radiogroup", "aria-labelledby": context.ids.labelId, "data-fillo": "options" }
   });
   applyFieldAria(wrap, field, context.error, context.ids);
   for (const option of options) {
     const label = el("label", {
       className: `fillo-option${option.icon ? " fillo-option--has-icon" : ""}${value === option.id ? " fillo-option--selected" : ""}`,
-      attrs: { "data-option": option.id }
+      attrs: { "data-option": option.id, "data-fillo": "option" }
     });
+    label.toggleAttribute("data-selected", value === option.id);
     const input = el("input", { className: "fillo-option-input", attrs: { type: "radio", name: context.ids.name } });
     input.checked = value === option.id;
     input.addEventListener("change", () => {
@@ -448,14 +459,16 @@ function singleChoice(context) {
     appendChildren(label, [
       input,
       optionIcon(option.icon),
-      el("span", { className: "fillo-option-label", text: option.label })
+      el("span", { className: "fillo-option-label", text: option.label, attrs: { "data-fillo": "optionLabel" } })
     ]);
     wrap.appendChild(label);
   }
   if (field.allowOther) {
     const label = el("label", {
-      className: `fillo-option fillo-option--other${otherActive ? " fillo-option--selected fillo-option--with-other" : ""}`
+      className: `fillo-option fillo-option--other${otherActive ? " fillo-option--selected fillo-option--with-other" : ""}`,
+      attrs: { "data-fillo": "option" }
     });
+    label.toggleAttribute("data-selected", otherActive);
     const input = el("input", { className: "fillo-option-input", attrs: { type: "radio", name: context.ids.name } });
     input.checked = otherActive;
     input.addEventListener("change", () => {
@@ -465,7 +478,7 @@ function singleChoice(context) {
     appendChildren(label, [
       appendChildren(el("span", { className: "fillo-option-main" }), [
         input,
-        el("span", { className: "fillo-option-label", text: "Other" })
+        el("span", { className: "fillo-option-label", text: "Other", attrs: { "data-fillo": "optionLabel" } })
       ])
     ]);
     if (otherActive) {
@@ -500,15 +513,16 @@ function multiChoice(context) {
   };
   const wrap = el("div", {
     className: "fillo-options",
-    attrs: { role: "group", "aria-labelledby": context.ids.labelId }
+    attrs: { role: "group", "aria-labelledby": context.ids.labelId, "data-fillo": "options" }
   });
   applyFieldAria(wrap, field, context.error, context.ids);
   const setSelected = (next) => context.setValue(next);
   for (const option of options) {
     const label = el("label", {
       className: `fillo-option${option.icon ? " fillo-option--has-icon" : ""}${selected.includes(option.id) ? " fillo-option--selected" : ""}`,
-      attrs: { "data-option": option.id }
+      attrs: { "data-option": option.id, "data-fillo": "option" }
     });
+    label.toggleAttribute("data-selected", selected.includes(option.id));
     const input = el("input", { className: "fillo-option-input", attrs: { type: "checkbox" } });
     input.checked = selected.includes(option.id);
     input.addEventListener("change", () => {
@@ -518,15 +532,17 @@ function multiChoice(context) {
     appendChildren(label, [
       input,
       optionIcon(option.icon),
-      el("span", { className: "fillo-option-label", text: option.label })
+      el("span", { className: "fillo-option-label", text: option.label, attrs: { "data-fillo": "optionLabel" } })
     ]);
     wrap.appendChild(label);
   }
   if (field.allowOther) {
     const active = otherText !== void 0 || activeOtherFields?.has(field.id) === true;
     const label = el("label", {
-      className: `fillo-option fillo-option--other${active ? " fillo-option--selected fillo-option--with-other" : ""}`
+      className: `fillo-option fillo-option--other${active ? " fillo-option--selected fillo-option--with-other" : ""}`,
+      attrs: { "data-fillo": "option" }
     });
+    label.toggleAttribute("data-selected", active);
     const input = el("input", { className: "fillo-option-input", attrs: { type: "checkbox" } });
     input.checked = active;
     input.addEventListener("change", () => {
@@ -542,7 +558,7 @@ function multiChoice(context) {
     appendChildren(label, [
       appendChildren(el("span", { className: "fillo-option-main" }), [
         input,
-        el("span", { className: "fillo-option-label", text: "Other" })
+        el("span", { className: "fillo-option-label", text: "Other", attrs: { "data-fillo": "optionLabel" } })
       ])
     ]);
     if (active) {
@@ -566,10 +582,16 @@ function multiChoice(context) {
   }
   return shell(field, context.error, wrap, context.ids);
 }
-var OTHER_VALUE = "__fillo_other__";
+function otherValue(field) {
+  let value = "__fillo_other__";
+  const ids = new Set(field.options.map((option) => option.id));
+  while (ids.has(value)) value += "_";
+  return value;
+}
 function dropdown(context) {
   const field = context.field;
   const value = typeof context.value === "string" ? context.value : "";
+  const other = otherValue(field);
   const activeOtherFields = context.activeOtherFields;
   const isOther = value !== "" && !field.options.some((option) => option.id === value);
   const otherActive = isOther || value === "" && activeOtherFields?.has(field.id) === true;
@@ -577,16 +599,16 @@ function dropdown(context) {
   const selectWrap = el("div", { className: "fillo-select-wrap" });
   const select = el("select", {
     className: "fillo-input fillo-select",
-    attrs: { id: context.ids.inputId }
+    attrs: { id: context.ids.inputId, "data-fillo": "control" }
   });
   select.appendChild(el("option", { text: field.placeholder ?? "Choose...", attrs: { value: "" } }));
   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_VALUE } }));
-  select.value = otherActive ? OTHER_VALUE : value;
+  if (field.allowOther) select.appendChild(el("option", { text: "Other...", attrs: { value: other } }));
+  select.value = otherActive ? other : value;
   select.addEventListener("change", () => {
-    if (select.value === OTHER_VALUE) {
+    if (select.value === other) {
       activeOtherFields?.add(field.id);
       context.setValue("", { render: true });
     } else {
@@ -598,22 +620,22 @@ function dropdown(context) {
   appendChildren(selectWrap, [select, el("span", { className: "fillo-select-icon", attrs: { "aria-hidden": "true" } })]);
   wrap.appendChild(selectWrap);
   if (otherActive) {
-    const other = el("input", {
+    const other2 = el("input", {
       className: "fillo-input fillo-other-input fillo-other-input--block",
       attrs: { type: "text" }
     });
-    other.value = isOther ? value : "";
-    other.placeholder = "Your answer";
-    other.addEventListener("input", () => {
+    other2.value = isOther ? value : "";
+    other2.placeholder = "Your answer";
+    other2.addEventListener("input", () => {
       activeOtherFields?.add(field.id);
-      context.setValue(other.value, { render: false });
+      context.setValue(other2.value, { render: false });
     });
-    other.addEventListener("change", () => {
+    other2.addEventListener("change", () => {
       activeOtherFields?.add(field.id);
-      context.setValue(other.value);
+      context.setValue(other2.value);
     });
-    wrap.appendChild(other);
-    if (!isOther) queueMicrotask(() => other.focus());
+    wrap.appendChild(other2);
+    if (!isOther) queueMicrotask(() => other2.focus());
   }
   return shell(field, context.error, wrap, context.ids);
 }
@@ -621,10 +643,21 @@ function checkbox(context) {
   if (context.field.kind === "checkbox" && context.field.appearance === "toggle") {
     const wrap2 = el("div", {
       className: `fillo-field fillo-field--checkbox fillo-field--toggle${context.error ? " fillo-field--error" : ""}`,
-      attrs: { "data-field": context.field.id }
+      attrs: {
+        "data-fillo": "field",
+        "data-field": context.field.id,
+        "data-kind": context.field.kind
+      }
+    });
+    wrap2.toggleAttribute("data-invalid", Boolean(context.error));
+    wrap2.toggleAttribute("data-required", Boolean(context.field.required));
+    const label2 = el("label", { className: "fillo-toggle", attrs: { "data-fillo": "option" } });
+    label2.toggleAttribute("data-checked", context.value === true);
+    const labelText2 = el("span", {
+      className: "fillo-option-label",
+      text: context.field.label,
+      attrs: { "data-fillo": "optionLabel" }
     });
-    const label2 = el("label", { className: "fillo-toggle" });
-    const labelText2 = el("span", { className: "fillo-option-label", text: context.field.label });
     if (!context.field.required)
       labelText2.appendChild(el("span", { className: "fillo-optional", text: " (optional)" }));
     const copy = el("span", { className: "fillo-toggle-copy" });
@@ -657,7 +690,7 @@ function checkbox(context) {
         el("p", {
           className: "fillo-description",
           text: context.field.description,
-          attrs: { id: context.ids.descriptionId }
+          attrs: { id: context.ids.descriptionId, "data-fillo": "fieldDescription" }
         })
       );
     if (context.error)
@@ -665,16 +698,23 @@ function checkbox(context) {
         el("p", {
           className: "fillo-error",
           text: context.error,
-          attrs: { role: "alert", id: context.ids.errorId }
+          attrs: { role: "alert", id: context.ids.errorId, "data-fillo": "error" }
         })
       );
     return wrap2;
   }
   const wrap = el("div", {
     className: `fillo-field fillo-field--checkbox${context.error ? " fillo-field--error" : ""}`,
-    attrs: { "data-field": context.field.id }
+    attrs: {
+      "data-fillo": "field",
+      "data-field": context.field.id,
+      "data-kind": context.field.kind
+    }
   });
-  const label = el("label", { className: "fillo-option" });
+  wrap.toggleAttribute("data-invalid", Boolean(context.error));
+  wrap.toggleAttribute("data-required", Boolean(context.field.required));
+  const label = el("label", { className: "fillo-option", attrs: { "data-fillo": "option" } });
+  label.toggleAttribute("data-checked", context.value === true);
   const input = el("input", {
     className: "fillo-option-input",
     attrs: { id: context.ids.inputId, type: "checkbox" }
@@ -682,7 +722,11 @@ function checkbox(context) {
   input.checked = context.value === true;
   input.addEventListener("change", () => context.setValue(input.checked));
   applyFieldAria(input, context.field, context.error, context.ids);
-  const labelText = el("span", { className: "fillo-option-label", text: context.field.label });
+  const labelText = el("span", {
+    className: "fillo-option-label",
+    text: context.field.label,
+    attrs: { "data-fillo": "optionLabel" }
+  });
   if (!context.field.required)
     labelText.appendChild(el("span", { className: "fillo-optional", text: " (optional)" }));
   appendChildren(label, [input, labelText]);
@@ -692,7 +736,7 @@ function checkbox(context) {
       el("p", {
         className: "fillo-description",
         text: context.field.description,
-        attrs: { id: context.ids.descriptionId }
+        attrs: { id: context.ids.descriptionId, "data-fillo": "fieldDescription" }
       })
     );
   if (context.error)
@@ -700,7 +744,7 @@ function checkbox(context) {
       el("p", {
         className: "fillo-error",
         text: context.error,
-        attrs: { role: "alert", id: context.ids.errorId }
+        attrs: { role: "alert", id: context.ids.errorId, "data-fillo": "error" }
       })
     );
   return wrap;
@@ -709,41 +753,89 @@ function rating(context) {
   if (context.field.kind !== "rating") return el("div");
   const max = typeof context.field.max === "number" ? context.field.max : 5;
   const current = typeof context.value === "number" ? context.value : 0;
-  const wrap = el("div", { className: "fillo-rating", attrs: { role: "group", "aria-label": context.field.label } });
+  const values = Array.from({ length: max }, (_, index) => index + 1);
+  const selected = current > 0 ? current : null;
+  const tabbable = selected === null ? 0 : Math.max(0, values.indexOf(selected));
+  const wrap = el("div", {
+    className: "fillo-rating",
+    attrs: {
+      id: context.ids.inputId,
+      role: "radiogroup",
+      "aria-labelledby": context.ids.labelId,
+      "data-fillo": "control"
+    }
+  });
   applyFieldAria(wrap, context.field, context.error, context.ids);
-  for (let n = 1; n <= max; n++) {
+  for (const [index, n] of values.entries()) {
     const button = el("button", {
       className: `fillo-star${n <= current ? " fillo-star--active" : ""}`,
-      text: "*",
-      attrs: { type: "button", "aria-label": `${n} of ${max}`, "aria-pressed": String(n === current) }
+      text: "\u2605",
+      attrs: {
+        type: "button",
+        role: "radio",
+        "aria-label": `${n} of ${max}`,
+        "aria-checked": String(n === current),
+        tabindex: String(index === tabbable ? 0 : -1),
+        "data-fillo": "option"
+      }
     });
+    button.toggleAttribute("data-selected", n <= current);
     button.addEventListener("click", () => context.setValue(n === current ? null : n));
     wrap.appendChild(button);
   }
+  bindRadioKeys(wrap, values, selected, (value) => context.setValue(value));
   return shell(context.field, context.error, wrap, context.ids);
 }
 function linearScale(context) {
   if (context.field.kind !== "linear_scale") return el("div");
   const min = typeof context.field.min === "number" ? context.field.min : 1;
   const max = typeof context.field.max === "number" ? context.field.max : 10;
+  const current = typeof context.value === "number" ? context.value : null;
+  const values = Array.from({ length: max - min + 1 }, (_, index) => min + index);
+  const tabbable = current === null ? 0 : Math.max(0, values.indexOf(current));
+  const minLabelId = `${context.ids.inputId}-min`;
+  const maxLabelId = `${context.ids.inputId}-max`;
   const wrap = el("div");
-  const steps = el("div", { className: "fillo-scale", attrs: { role: "group", "aria-label": context.field.label } });
+  const steps = el("div", {
+    className: "fillo-scale",
+    attrs: {
+      id: context.ids.inputId,
+      role: "radiogroup",
+      "aria-labelledby": context.ids.labelId,
+      "data-fillo": "control"
+    }
+  });
   applyFieldAria(steps, context.field, context.error, context.ids);
-  for (let n = min; n <= max; n++) {
+  const describedBy = [
+    context.field.minLabel ? minLabelId : null,
+    context.field.maxLabel ? maxLabelId : null,
+    steps.getAttribute("aria-describedby")
+  ].filter(Boolean).join(" ");
+  if (describedBy) steps.setAttribute("aria-describedby", describedBy);
+  for (const [index, n] of values.entries()) {
     const button = el("button", {
       className: `fillo-scale-step${context.value === n ? " fillo-scale-step--active" : ""}`,
       text: String(n),
-      attrs: { type: "button", "aria-pressed": String(context.value === n) }
+      attrs: {
+        type: "button",
+        role: "radio",
+        "aria-label": String(n),
+        "aria-checked": String(context.value === n),
+        tabindex: String(index === tabbable ? 0 : -1),
+        "data-fillo": "option"
+      }
     });
+    button.toggleAttribute("data-selected", context.value === n);
     button.addEventListener("click", () => context.setValue(context.value === n ? null : n));
     steps.appendChild(button);
   }
+  bindRadioKeys(steps, values, current, (value) => context.setValue(value));
   wrap.appendChild(steps);
   if ("minLabel" in context.field || "maxLabel" in context.field) {
     appendChildren(wrap, [
       appendChildren(el("div", { className: "fillo-scale-labels" }), [
-        el("span", { text: String(context.field.minLabel ?? "") }),
-        el("span", { text: String(context.field.maxLabel ?? "") })
+        el("span", { text: String(context.field.minLabel ?? ""), attrs: { id: minLabelId } }),
+        el("span", { text: String(context.field.maxLabel ?? ""), attrs: { id: maxLabelId } })
       ])
     ]);
   }
@@ -757,6 +849,15 @@ function ranking(context) {
     ...answered.filter((id) => field.options.some((option) => option.id === id)),
     ...field.options.map((option) => option.id).filter((id) => !answered.includes(id))
   ];
+  const group = el("div", {
+    attrs: {
+      id: context.ids.inputId,
+      role: "group",
+      "aria-labelledby": context.ids.labelId,
+      "data-fillo": "control"
+    }
+  });
+  applyFieldAria(group, context.field, context.error, context.ids);
   const list = el("ol", { className: "fillo-ranking" });
   for (const [index, id] of order.entries()) {
     const option = field.options.find((item2) => item2.id === id);
@@ -792,7 +893,8 @@ function ranking(context) {
     ]);
     list.appendChild(item);
   }
-  return shell(context.field, context.error, list, context.ids);
+  group.appendChild(list);
+  return shell(context.field, context.error, group, context.ids);
 }
 function matrix(context) {
   const field = context.field;
@@ -823,11 +925,22 @@ function matrix(context) {
     tbody.appendChild(tr);
   }
   table.appendChild(tbody);
-  return shell(context.field, context.error, appendChildren(el("div", { className: "fillo-matrix-wrap" }), [table]), context.ids);
+  const group = el("div", {
+    className: "fillo-matrix-wrap",
+    attrs: {
+      id: context.ids.inputId,
+      role: "group",
+      "aria-labelledby": context.ids.labelId,
+      "data-fillo": "control"
+    }
+  });
+  applyFieldAria(group, context.field, context.error, context.ids);
+  group.appendChild(table);
+  return shell(context.field, context.error, group, context.ids);
 }
 function signature(context) {
   const wrap = el("div", { className: "fillo-signature-field" });
-  const pad = el("div", { className: "fillo-signature" });
+  const pad = el("div", { className: "fillo-signature", attrs: { "data-fillo": "control" } });
   const canvas = el("canvas", {
     className: "fillo-signature-canvas",
     attrs: { "aria-hidden": "true" }
@@ -929,10 +1042,12 @@ function fileUpload(context) {
   if (field.kind !== "file_upload") return null;
   const input = el("input", {
     className: "fillo-input",
-    attrs: { id: context.ids.inputId, type: "file" }
+    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;
   applyFieldAria(input, field, context.error, context.ids);
   input.addEventListener("change", () => {
     const files = Array.from(input.files ?? []);
@@ -940,9 +1055,17 @@ function fileUpload(context) {
   });
   const wrap = el("div");
   wrap.appendChild(input);
-  const progress = context.uploadProgress?.get(field.id);
   if (progress !== void 0) {
-    const meter = el("div", { className: "fillo-upload-progress" });
+    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))
+      }
+    });
     meter.appendChild(el("div", { className: "fillo-upload-progress-fill" }));
     meter.firstElementChild?.style.setProperty("width", `${Math.round(progress * 100)}%`);
     wrap.appendChild(meter);
@@ -1027,8 +1150,10 @@ var DomFormController = class {
   destroyed = false;
   renderQueued = false;
   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).
   uploadNotices = /* @__PURE__ */ new Map();
   // Where to move focus on the next render: "error" after a failed submit/next,
@@ -1076,40 +1201,131 @@ var DomFormController = class {
   resolveFormIdFn;
   /** Prod-only: the code form is an unpublished draft — submissions would 404. */
   notLive = false;
+  /** Exact integration failure retained for custom error/dev surfaces. */
+  fatalError = null;
+  genericUnavailable = false;
+  syncErrorNotice = null;
+  stagedNotice = false;
   async resolve() {
     try {
       const codeForm = isCodeForm(this.options.form) ? this.options.form : null;
       if (codeForm) {
         const client = this.options.client;
         if (client?.key) {
-          this.resolveFormIdFn = () => syncCodeForm(client, codeForm, { bypassCache: true }).then((r) => r.formId);
-        }
-        this.setSchema(codeForm.schema, this.options.theme ?? codeForm.theme, this.options.formId);
-        if (client?.key) {
-          syncCodeForm(client, codeForm).then(({ formId, branding, staged, status, warning }) => {
-            this.formId = formId;
-            this.engine?.setContext({ formId });
-            if (warning) console.warn(`[fillo] ${warning}`);
-            if (staged) {
-              console.info(`[fillo] "${codeForm.id}" changes staged as a draft \u2014 publish them in your Fillo dashboard`);
-            } else if (status === "draft") {
-              console.info(`[fillo] "${codeForm.id}" is a draft \u2014 it renders here but won't accept responses until published`);
-              if (!isDevEnv()) {
-                this.notLive = true;
-                this.render();
+          this.resolveFormIdFn = async () => {
+            try {
+              const result = await syncCodeForm(client, codeForm, { bypassCache: true });
+              if (result.status === "draft") {
+                throw new FilloError(
+                  "This form is no longer published. Submission was stopped before sending answers.",
+                  403,
+                  void 0,
+                  "form_not_published"
+                );
               }
+              const authoritative = normalizeFormSchema(result.resolvedSchema ?? codeForm.schema);
+              if (!authoritative.ok) {
+                throw new FilloError(
+                  `The canonical form schema was invalid: ${authoritative.error}`,
+                  502,
+                  void 0,
+                  "invalid_sync_schema"
+                );
+              }
+              if (this.schema && !formSchemasEqual(this.schema, authoritative.schema)) {
+                throw new FilloError(
+                  "The live form changed after this page loaded. Submission stopped before incompatible answers were sent. Reload to use the published schema.",
+                  409,
+                  void 0,
+                  "form_schema_changed"
+                );
+              }
+              if (result.syncError) {
+                this.reportSyncNotice(
+                  new FilloError(
+                    result.syncError.message,
+                    403,
+                    void 0,
+                    result.syncError.code
+                  )
+                );
+              }
+              return result.formId;
+            } catch (error) {
+              const failure = toFilloError(error);
+              this.reportSubmitSyncFailure(failure);
+              throw failure;
             }
-            if (branding) {
-              this.fetchedPoweredBy = branding.poweredBy;
-              this.fetchedBrandLabel = branding.label;
-              this.fetchedBrandHref = branding.href;
-              this.render();
-            }
-          }).catch((error) => {
-            const err = toFilloError(error);
-            console.warn("[fillo] form sync failed:", err.message);
-            this.options.onError?.(err);
-          });
+          };
+        }
+        if (!client?.key) {
+          this.setSchema(codeForm.schema, this.options.theme ?? codeForm.theme, this.options.formId);
+        }
+        if (client && !client.key && !this.options.formId) {
+          this.reportSyncFailure(
+            new FilloError(
+              'Code forms need createClient({ key: "pk_\u2026" }) to resolve the live form. Pass a publishable key or a published formId.',
+              401,
+              void 0,
+              "sync_key_required"
+            )
+          );
+          return;
+        }
+        if (!client?.key) return;
+        if (isDevEnv()) {
+          this.setSchema(codeForm.schema, this.options.theme ?? codeForm.theme, this.options.formId);
+        } else {
+          this.theme = this.options.theme ?? codeForm.theme;
+          this.render();
+        }
+        try {
+          const result = await syncCodeForm(client, codeForm);
+          if (this.destroyed) return;
+          if ((result.staged || result.syncError) && !result.resolvedSchema) {
+            throw new FilloError(
+              "Sync did not return the live schema needed to render safely. Publish changes before deploy, and update @usefillo/* or your API.",
+              409,
+              void 0,
+              "sync_snapshot_required"
+            );
+          }
+          const development = isDevEnv();
+          this.notLive = result.status === "draft" && !development;
+          this.stagedNotice = Boolean(result.staged);
+          if (result.branding) {
+            this.fetchedPoweredBy = result.branding.poweredBy;
+            this.fetchedBrandLabel = result.branding.label;
+            this.fetchedBrandHref = result.branding.href;
+          }
+          if (development && result.resolvedSchema) {
+            this.formId = result.formId;
+            this.engine?.setContext({ formId: result.formId });
+            this.render();
+          } else {
+            const safeSchema = result.resolvedSchema ?? codeForm.schema;
+            const safeTheme = this.options.theme ?? (result.resolvedSchema ? result.resolvedTheme ?? void 0 : codeForm.theme);
+            this.applyCanonicalSchema(safeSchema, safeTheme, result.formId);
+          }
+          if (result.warning) console.warn(`[fillo] ${result.warning}`);
+          if (result.syncError) {
+            this.reportSyncNotice(
+              new FilloError(
+                result.syncError.message,
+                403,
+                void 0,
+                result.syncError.code
+              )
+            );
+          }
+          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`);
+          } else if (result.status === "draft") {
+            console.info(`[fillo] "${codeForm.id}" is a draft \u2014 it renders here but won't accept responses until published`);
+          }
+        } catch (error) {
+          if (this.destroyed) return;
+          this.reportSyncFailure(toFilloError(error));
         }
         return;
       }
@@ -1124,17 +1340,20 @@ var DomFormController = class {
       this.options.client ??= createClient();
       this.render();
       const published = await this.options.client.getForm(this.options.formId);
+      if (this.destroyed) return;
       this.closed = Boolean(published.closed);
       this.fetchedPoweredBy = published.branding?.poweredBy ?? null;
       this.fetchedBrandLabel = published.branding?.label;
       this.fetchedBrandHref = published.branding?.href;
       this.setSchema(published.schema, this.options.theme ?? published.theme ?? void 0, published.id);
     } catch (error) {
+      if (this.destroyed) return;
       this.handleError(toFilloError(error));
     }
   }
   /** Bind the resolved schema, create the engine, and render. */
   setSchema(schema, theme, formId) {
+    if (this.destroyed) return;
     const normalized = normalizeFormSchema(schema);
     if (!normalized.ok) throw new FilloError(`This form could not be rendered: ${normalized.error}`, 422);
     const normalizedSchema = normalized.schema;
@@ -1148,21 +1367,73 @@ var DomFormController = class {
       initialData: this.options.initialData,
       onChange: this.options.onChange,
       onSubmitted: this.options.onSubmitted,
-      getHoneypot: () => this.hpValue,
+      getHoneypot: () => this.element.querySelector('input[name="fillo_hp_field"]')?.value ?? this.hpValue,
       surface: "default",
-      resolveFormId: this.resolveFormIdFn
+      resolveFormId: this.resolveFormIdFn,
+      respondent: this.options.respondent
     });
     let lastStatus = this.engine.getState().status;
+    let lastResumed = this.engine.getState().resumedDraft;
+    let lastEditing = this.engine.getState().editingPrevious;
     this.engine.subscribe(() => {
-      const status = this.engine?.getState().status;
-      if (status !== void 0 && status !== lastStatus) {
-        lastStatus = status;
+      const state = this.engine?.getState();
+      if (!state) return;
+      if (state.status !== lastStatus || state.resumedDraft !== lastResumed || state.editingPrevious !== lastEditing) {
+        lastStatus = state.status;
+        lastResumed = state.resumedDraft;
+        lastEditing = state.editingPrevious;
         this.queueRender();
       }
     });
+    this.configureDraftFlush(normalizedSchema);
+    this.phase = this.closed ? "closed" : "ready";
+    this.render();
+  }
+  /** Swap dev-local content for the server-authoritative live snapshot without losing answers. */
+  applyCanonicalSchema(schema, theme, formId) {
+    if (!this.engine) {
+      this.setSchema(schema, theme, formId);
+      return;
+    }
+    const normalized = normalizeFormSchema(schema);
+    if (!normalized.ok) {
+      throw new FilloError(`This form could not be rendered: ${normalized.error}`, 422);
+    }
+    const normalizedSchema = normalized.schema;
+    this.schema = normalizedSchema;
+    this.theme = theme;
+    this.formId = formId;
+    this.engine.setContext({ form: normalizedSchema, formId });
+    this.configureDraftFlush(normalizedSchema);
     this.phase = this.closed ? "closed" : "ready";
     this.render();
   }
+  draftFlushWired = false;
+  flushDraftBound = () => this.engine?.flushDraft();
+  visibilityFlushBound = () => {
+    if (document.visibilityState === "hidden") this.engine?.flushDraft();
+  };
+  configureDraftFlush(schema) {
+    this.teardownDraftFlush();
+    if (schema.settings.saveProgress && typeof window !== "undefined") {
+      window.addEventListener("pagehide", this.flushDraftBound);
+      document.addEventListener("visibilitychange", this.visibilityFlushBound);
+      this.draftFlushWired = true;
+    }
+  }
+  teardownDraftFlush() {
+    if (!this.draftFlushWired || typeof window === "undefined") return;
+    window.removeEventListener("pagehide", this.flushDraftBound);
+    document.removeEventListener("visibilitychange", this.visibilityFlushBound);
+    this.draftFlushWired = false;
+  }
+  flushDraft() {
+    this.engine?.flushDraft();
+  }
+  resetDraft() {
+    this.engine?.resetDraft();
+    this.queueRender();
+  }
   setValue(fieldId, value) {
     this.setValueInternal(fieldId, value);
   }
@@ -1214,17 +1485,42 @@ var DomFormController = class {
     this.engine?.setContext({ client });
     this.render();
   }
+  /** Late-bind identify() context once the host session loads. No re-render
+   *  needed — identity changes what's recorded, never what's shown. */
+  setRespondent(respondent) {
+    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.queueRender();
+      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 selected = files.slice(0, room);
-    const dropped = files.length - selected.length;
-    if (dropped > 0) {
+    const withinLimit = files.slice(0, room);
+    const maxBytes = (field.maxFileSizeMb ?? 500) * 1024 * 1024;
+    const selected = withinLimit.filter((file) => file.size <= maxBytes);
+    const dropped = files.length - withinLimit.length;
+    const oversized = withinLimit.length - selected.length;
+    if (dropped > 0 || oversized > 0) {
+      const notices = [];
+      if (dropped > 0) {
+        notices.push(
+          `You can attach up to ${maxFiles} file${maxFiles === 1 ? "" : "s"}. ${dropped} ${dropped === 1 ? "file was" : "files were"} not added.`
+        );
+      }
+      if (oversized > 0) {
+        notices.push(
+          `${oversized} ${oversized === 1 ? "file exceeds" : "files exceed"} the ${field.maxFileSizeMb ?? 500} MB limit.`
+        );
+      }
       this.uploadNotices.set(
         field.id,
-        `You can attach up to ${maxFiles} file${maxFiles === 1 ? "" : "s"}. ${dropped} ${dropped === 1 ? "file was" : "files were"} not added.`
+        notices.join(" ")
       );
     } else {
       this.uploadNotices.delete(field.id);
@@ -1233,7 +1529,10 @@ 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 = [];
@@ -1242,6 +1541,7 @@ var DomFormController = class {
           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();
@@ -1257,16 +1557,32 @@ var DomFormController = class {
           });
         }
       }
-      this.uploadProgress.delete(field.id);
+      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.handleError(toFilloError(error));
+      this.engine?.setUploading(field.id, false);
+      this.queueRender();
     }
   }
   destroy() {
     this.destroyed = true;
+    this.teardownDraftFlush();
     this.closeOverlays();
+    this.uploadControllers.forEach((controller) => controller.abort());
+    this.uploadControllers.clear();
+    this.uploadProgress.clear();
+    this.engine?.destroy();
+    this.engine = null;
     this.target.replaceChildren();
   }
   /** Add/return the phone popover teardown; called back on re-render or destroy. */
@@ -1341,7 +1657,9 @@ var DomFormController = class {
   applyFocus(intent, captured) {
     if (typeof document === "undefined") return;
     if (intent === "error") {
-      this.element.querySelector('[aria-invalid="true"]')?.focus?.();
+      const invalid = this.element.querySelector('[aria-invalid="true"]');
+      const target = invalid?.matches(FOCUSABLE_SELECTOR) ? invalid : invalid?.querySelector(FOCUSABLE_SELECTOR);
+      target?.focus?.();
       return;
     }
     if (intent === "page") {
@@ -1356,10 +1674,46 @@ var DomFormController = class {
     if (captured) this.restoreFocus(captured);
   }
   handleError(error) {
+    if (this.destroyed) return;
+    this.fatalError = error;
     this.phase = "error";
     this.options.onError?.(error);
     this.render(error);
   }
+  /** Bounded sync exhausted: production fails closed; dev keeps local iteration. */
+  reportSyncFailure(error) {
+    if (this.destroyed) return;
+    console.warn(
+      `[fillo] form sync failed${error.code ? ` (${error.code})` : ""}: ${error.message}`
+    );
+    this.syncErrorNotice = error;
+    const development = isDevEnv();
+    if (!development || this.options.renderError) {
+      this.genericUnavailable = !development;
+      this.handleError(error);
+      return;
+    }
+    this.options.onError?.(error);
+    if (development) this.render();
+  }
+  /** A resolved live snapshot stays available while developers get remediation. */
+  reportSyncNotice(error) {
+    if (this.destroyed) return;
+    console.warn(
+      `[fillo] form sync needs attention${error.code ? ` (${error.code})` : ""}: ${error.message}`
+    );
+    this.syncErrorNotice = error;
+    this.options.onError?.(error);
+    if (isDevEnv()) this.render();
+  }
+  /** Submit-time verification failed: keep the form/answers for a safe retry. */
+  reportSubmitSyncFailure(error) {
+    if (this.destroyed) return;
+    console.warn(
+      `[fillo] form sync failed${error.code ? ` (${error.code})` : ""}: ${error.message}`
+    );
+    this.syncErrorNotice = error;
+  }
   queueRender() {
     if (this.renderQueued || this.destroyed) return;
     this.renderQueued = true;
@@ -1376,7 +1730,10 @@ var DomFormController = class {
     this.closeOverlays();
     this.element.replaceChildren();
     if (this.phase === "loading") {
-      const loading = el("div", { className: `fillo-form fillo-form--loading ${this.options.className ?? ""}`, attrs: { "aria-busy": "true" } });
+      const loading = el("div", {
+        className: `fillo-form fillo-form--loading ${this.options.className ?? ""}`,
+        attrs: { "aria-busy": "true", "data-fillo": "root", "data-state": "loading" }
+      });
       themeStyle(loading, this.theme);
       appendChildren(loading, [
         el("div", { className: "fillo-skeleton" }),
@@ -1386,19 +1743,34 @@ var DomFormController = class {
       this.element.appendChild(loading);
       return;
     }
-    if (this.phase === "error" && error) {
-      this.element.appendChild(this.options.renderError?.(error) ?? el("div", { className: "fillo-form fillo-form--error", text: error.message }));
+    const activeError = error ?? this.fatalError;
+    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
+      });
+      if (!errorView.hasAttribute("data-fillo")) errorView.setAttribute("data-fillo", "root");
+      if (!errorView.hasAttribute("data-state")) errorView.setAttribute("data-state", "error");
+      if (!errorView.hasAttribute("role")) errorView.setAttribute("role", "alert");
+      themeStyle(errorView, this.theme);
+      this.element.appendChild(errorView);
       return;
     }
     if (this.phase === "closed") {
-      const closed = el("div", { className: `fillo-form fillo-form--closed ${this.options.className ?? ""}` });
+      const closed = el("div", {
+        className: `fillo-form fillo-form--closed ${this.options.className ?? ""}`,
+        attrs: { "data-fillo": "root", "data-state": "closed" }
+      });
       themeStyle(closed, this.theme);
       closed.appendChild(el("p", { className: "fillo-closed", text: "This form is no longer accepting responses." }));
       this.element.appendChild(closed);
       return;
     }
     if (this.notLive) {
-      const panel = el("div", { className: `fillo-form fillo-form--closed ${this.options.className ?? ""}` });
+      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);
@@ -1407,13 +1779,29 @@ var DomFormController = class {
     if (!this.schema) return;
     if (this.engine?.getState().status === "submitted") {
       const api = this.api();
+      const state = this.engine.getState();
       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);
       if (this.brandingVisible()) this.element.appendChild(poweredByEl(this.fetchedBrandLabel, this.fetchedBrandHref));
+      if (!state.restoredSubmission && !this.liveSubmissionHandled) {
+        this.liveSubmissionHandled = true;
+        const redirect = safeHttpUrl(this.schema.settings.redirectUrl);
+        if (redirect && typeof window !== "undefined") window.location.assign(redirect);
+        else success.focus();
+      }
       return;
     }
     if (!this.options.client && isDevEnv()) this.element.appendChild(devNoClientEl());
+    if (this.syncErrorNotice && isDevEnv()) {
+      this.element.appendChild(devSyncErrorEl(this.syncErrorNotice));
+    }
+    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);
@@ -1424,7 +1812,15 @@ var DomFormController = class {
   }
   renderForm() {
     const api = this.api();
-    const form = el("form", { className: `fillo-form ${this.options.className ?? ""}` });
+    const form = el("form", {
+      className: `fillo-form ${this.options.className ?? ""}`,
+      attrs: {
+        "data-fillo": "root",
+        "data-state": api.status,
+        "data-page": String(api.pageIndex + 1)
+      }
+    });
+    form.toggleAttribute("data-last-page", api.isLastPage);
     themeStyle(form, this.theme);
     form.noValidate = true;
     const advance = () => {
@@ -1435,17 +1831,42 @@ var DomFormController = class {
       event.preventDefault();
       advance();
     });
+    const restoreState = this.engine?.getState();
+    if (restoreState?.resumedDraft || restoreState?.editingPrevious) {
+      const resume = el("div", {
+        className: "fillo-resume",
+        attrs: { role: "status", "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."
+        })
+      );
+      const clear = el("button", {
+        className: "fillo-resume-clear",
+        text: "Start over",
+        attrs: { type: "button" }
+      });
+      clear.addEventListener("click", () => this.resetDraft());
+      resume.appendChild(clear);
+      form.appendChild(resume);
+    }
     if (api.pageCount > 1 && this.schema?.settings.showProgress !== false) {
       const progress = el("div", {
         className: "fillo-progress-track",
         attrs: {
           role: "progressbar",
-          "aria-valuemin": "0",
+          "data-fillo": "progress",
+          "aria-label": api.form.title || "Form progress",
+          "aria-valuemin": "1",
           "aria-valuemax": String(api.pageCount),
           "aria-valuenow": String(api.pageIndex + 1)
         }
       });
-      progress.appendChild(el("div", { className: "fillo-progress-fill" }));
+      progress.appendChild(
+        el("div", { className: "fillo-progress-fill", attrs: { "data-fillo": "progressFill" } })
+      );
       progress.firstElementChild?.style.setProperty(
         "--fillo-progress-value",
         `${(api.pageIndex + 1) / api.pageCount * 100}%`
@@ -1453,14 +1874,32 @@ var DomFormController = class {
       form.appendChild(progress);
     }
     if (api.pageIndex === 0) {
-      const header = el("header", { className: "fillo-header" });
-      header.appendChild(el("h1", { className: "fillo-title", text: api.form.title }));
-      if (api.form.description) header.appendChild(el("p", { className: "fillo-form-description", text: api.form.description }));
+      const header = el("header", { className: "fillo-header", attrs: { "data-fillo": "header" } });
+      if (api.form.title) {
+        header.appendChild(
+          el("h1", { className: "fillo-title", text: api.form.title, attrs: { "data-fillo": "title" } })
+        );
+      }
+      if (api.form.description) {
+        header.appendChild(
+          el("p", {
+            className: "fillo-form-description",
+            text: api.form.description,
+            attrs: { "data-fillo": "description" }
+          })
+        );
+      }
       form.appendChild(header);
     } else if (api.page.title) {
-      form.appendChild(el("h2", { className: "fillo-page-title", text: api.page.title }));
+      form.appendChild(
+        el("h2", {
+          className: "fillo-page-title",
+          text: api.page.title,
+          attrs: { "data-fillo": "pageTitle" }
+        })
+      );
     }
-    const blocks = el("div", { className: "fillo-blocks" });
+    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);
@@ -1489,9 +1928,13 @@ var DomFormController = class {
     const showPrimaryButton = !autoSubmit || !api.isLastPage || needsExplicitSubmit(visibleFields(api.form, api.data));
     const showFooter = showPrimaryButton || api.pageCount > 1 && !api.isFirstPage;
     if (showFooter) {
-      const footer = el("footer", { className: "fillo-footer" });
+      const footer = el("footer", { className: "fillo-footer", attrs: { "data-fillo": "footer" } });
       if (api.pageCount > 1 && !api.isFirstPage) {
-        const back = el("button", { className: "fillo-button fillo-button--ghost", text: "Back", attrs: { type: "button" } });
+        const back = el("button", {
+          className: "fillo-button fillo-button--ghost",
+          text: "Back",
+          attrs: { type: "button", "data-fillo": "button" }
+        });
         back.addEventListener("click", () => this.back());
         footer.appendChild(back);
       }
@@ -1499,7 +1942,7 @@ var DomFormController = class {
         const submit = el("button", {
           className: "fillo-button fillo-button--primary",
           text: api.status === "submitting" ? "Submitting..." : api.isLastPage ? api.form.settings.submitLabel ?? "Submit" : "Next",
-          attrs: { type: "submit" }
+          attrs: { type: "submit", "data-fillo": "button" }
         });
         submit.toggleAttribute("disabled", api.status === "submitting" || this.uploadProgress.size > 0);
         submit.addEventListener("click", (event) => {
@@ -1584,8 +2027,22 @@ function devNoClientEl() {
     attrs: { role: "alert" }
   });
 }
+function devSyncErrorEl(error) {
+  return el("div", {
+    className: "fillo-devwarning",
+    text: `Form sync needs attention${error.code ? ` (${error.code})` : ""}: ${error.message} The safe form remains available for development.`,
+    attrs: { role: "alert" }
+  });
+}
+function devStagedEl() {
+  return el("div", {
+    className: "fillo-devwarning",
+    text: "Code changes are staged. Local preview only. Publish in Fillo before deploying for respondents.",
+    attrs: { role: "alert" }
+  });
+}
 function toFilloError(error) {
-  if (error instanceof FilloError) return error;
+  if (isFilloError(error)) return error;
   return new FilloError(error instanceof Error ? error.message : String(error), 0);
 }
 function renderForm(target, options) {