@usefillo/dom 0.5.3 → 0.6.0

package/dist/index.js

@@ -4,6 +4,7 @@ import {
   FilloError,
   PHONE_COUNTRIES,
   countryByIso,
+  countryByTimeZone,
   createClient,
   createFormController as coreCreateFormController,
   defineForm,
@@ -17,13 +18,15 @@ import {
   parsePhone,
   pipeBlock,
   provisionWorkspace,
+  needsExplicitSubmit,
+  shouldAutoSubmit,
   syncCodeForm,
   toE164,
-  validateResponse,
   visibleFields
 } from "@usefillo/core";
 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 fieldIds(instanceId, fieldId) {
   const base = `${FIELD_INPUT_PREFIX}${instanceId}-${fieldId}`;
   return {
@@ -158,6 +161,15 @@ function domLocaleCountry() {
   const region = tag.split("-")[1];
   return region && /^[A-Za-z]{2}$/.test(region) ? region.toUpperCase() : void 0;
 }
+function domBrowserTimeZone() {
+  if (typeof Intl === "undefined") return void 0;
+  try {
+    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    return typeof timeZone === "string" && timeZone ? timeZone : void 0;
+  } catch {
+    return void 0;
+  }
+}
 function setCaretAfterDigits(input, target) {
   if (target <= 0) return input.setSelectionRange(0, 0);
   const s = input.value;
@@ -171,9 +183,34 @@ 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) ?? countryByIso(domLocaleCountry()) ?? PHONE_COUNTRIES[0];
+  let country = parsePhone(inputValue(context.value)).country ?? countryByIso(schema.defaultCountry) ?? countryByTimeZone(domBrowserTimeZone()) ?? countryByIso(domLocaleCountry()) ?? PHONE_COUNTRIES[0];
   const wrap = el("div", { className: "fillo-phone" });
   const countryWrap = el("div", { className: "fillo-phone-country" });
   const flagBtn = el("button", {
@@ -226,15 +263,39 @@ function phoneInput(context) {
     input.value = formatNational(country, nationalFromValue());
     setCaretAfterDigits(input, before);
   });
+  const registerOverlay = context.registerOverlay;
   let popover = null;
   let active = 0;
   let matches = PHONE_COUNTRIES;
+  let stopPopoverLayout = null;
+  let unregisterOverlay = null;
   const listId = `${context.ids.inputId}-countries`;
+  const syncPopoverLayout = () => {
+    if (!popover) return;
+    const placement = positionPhonePopover(countryWrap, popover);
+    popover.classList.toggle("fillo-phone-popover--above", placement === "above");
+    popover.classList.toggle("fillo-phone-popover--below", placement === "below");
+  };
+  const bindPopoverLayout = () => {
+    stopPopoverLayout?.();
+    const update = () => syncPopoverLayout();
+    syncPopoverLayout();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    stopPopoverLayout = () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  };
   const closePopover = () => {
+    stopPopoverLayout?.();
+    stopPopoverLayout = null;
     popover?.remove();
     popover = null;
     flagBtn.setAttribute("aria-expanded", "false");
     document.removeEventListener("mousedown", onOutside);
+    unregisterOverlay?.();
+    unregisterOverlay = null;
   };
   const onOutside = (e) => {
     if (!countryWrap.contains(e.target)) closePopover();
@@ -249,7 +310,7 @@ function phoneInput(context) {
     input.focus();
   };
   const openPopover = () => {
-    const pop = el("div", { className: "fillo-phone-popover" });
+    const pop = el("div", { className: "fillo-phone-popover fillo-phone-popover--below" });
     const search = el("input", {
       className: "fillo-phone-search",
       attrs: {
@@ -269,6 +330,7 @@ function phoneInput(context) {
       list.replaceChildren();
       if (matches.length === 0) {
         list.appendChild(el("li", { className: "fillo-phone-empty", text: "No matches" }));
+        syncPopoverLayout();
         return;
       }
       matches.forEach((c, i) => {
@@ -293,6 +355,7 @@ function phoneInput(context) {
         list.appendChild(li);
       });
       search.setAttribute("aria-activedescendant", `${listId}-opt-${active}`);
+      syncPopoverLayout();
     };
     const syncActive = () => {
       [...list.children].forEach(
@@ -337,8 +400,10 @@ function phoneInput(context) {
     matches = PHONE_COUNTRIES;
     active = Math.max(0, PHONE_COUNTRIES.indexOf(country));
     renderList();
+    bindPopoverLayout();
     syncActive();
     document.addEventListener("mousedown", onOutside);
+    unregisterOverlay = registerOverlay?.(closePopover) ?? null;
     requestAnimationFrame(() => search.focus());
   };
   flagBtn.addEventListener("click", () => popover ? closePopover() : openPopover());
@@ -705,10 +770,18 @@ function ranking(context) {
       [next[index], next[target]] = [next[target], next[index]];
       context.setValue(next);
     };
-    const up = el("button", { className: "fillo-ranking-move", text: "Up", attrs: { type: "button" } });
+    const up = el("button", {
+      className: "fillo-ranking-move",
+      text: "Up",
+      attrs: { type: "button", "data-fillo-rank-opt": id, "data-fillo-rank-dir": "up" }
+    });
     up.toggleAttribute("disabled", index === 0);
     up.addEventListener("click", () => move(-1));
-    const down = el("button", { className: "fillo-ranking-move", text: "Down", attrs: { type: "button" } });
+    const down = el("button", {
+      className: "fillo-ranking-move",
+      text: "Down",
+      attrs: { type: "button", "data-fillo-rank-opt": id, "data-fillo-rank-dir": "down" }
+    });
     down.toggleAttribute("disabled", index === order.length - 1);
     down.addEventListener("click", () => move(1));
     appendChildren(controls, [up, down]);
@@ -753,18 +826,18 @@ function matrix(context) {
   return shell(context.field, context.error, appendChildren(el("div", { className: "fillo-matrix-wrap" }), [table]), context.ids);
 }
 function signature(context) {
-  const wrap = el("div", { className: "fillo-signature" });
+  const wrap = el("div", { className: "fillo-signature-field" });
+  const pad = el("div", { className: "fillo-signature" });
   const canvas = el("canvas", {
     className: "fillo-signature-canvas",
-    attrs: { id: context.ids.inputId }
+    attrs: { "aria-hidden": "true" }
   });
-  applyFieldAria(canvas, context.field, context.error, context.ids);
   const clear = el("button", {
     className: "fillo-signature-clear",
     text: "Clear",
     attrs: { type: "button" }
   });
-  const hint = el("div", { className: "fillo-signature-hint", text: "Sign here" });
+  const hint = el("div", { className: "fillo-signature-hint", text: "Sign here", attrs: { "aria-hidden": "true" } });
   canvas.width = 720;
   canvas.height = 220;
   const ctx = canvas.getContext("2d");
@@ -776,6 +849,34 @@ function signature(context) {
     image.src = String(context.value);
     hint.style.display = "none";
   }
+  const typed = el("input", {
+    className: "fillo-input fillo-signature-type-input",
+    attrs: {
+      id: context.ids.inputId,
+      type: "text",
+      autocomplete: "name",
+      placeholder: "Type your full name to sign"
+    }
+  });
+  applyFieldAria(typed, context.field, context.error, context.ids);
+  const drawTyped = (text) => {
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    if (text.trim()) {
+      ctx.fillStyle = getComputedStyle(canvas).color || "#18181b";
+      ctx.font = `italic ${Math.min(96, canvas.height * 0.45)}px "Segoe Script", "Brush Script MT", cursive`;
+      ctx.textBaseline = "middle";
+      ctx.fillText(text, 24, canvas.height / 2);
+      hasInk = true;
+      hint.style.display = "none";
+      context.setValue(canvas.toDataURL("image/png"), { render: false });
+    } else {
+      hasInk = false;
+      hint.style.display = "";
+      context.setValue(null, { render: false });
+    }
+  };
+  typed.addEventListener("input", () => drawTyped(typed.value));
   const point = (event) => {
     const rect = canvas.getBoundingClientRect();
     return {
@@ -788,6 +889,7 @@ function signature(context) {
     drawing = true;
     hasInk = true;
     hint.style.display = "none";
+    if (typed.value) typed.value = "";
     canvas.setPointerCapture(event.pointerId);
     const p = point(event);
     ctx.beginPath();
@@ -805,7 +907,7 @@ function signature(context) {
   const finish = () => {
     if (!drawing) return;
     drawing = false;
-    if (hasInk) context.setValue(canvas.toDataURL("image/png"));
+    if (hasInk) context.setValue(canvas.toDataURL("image/png"), { render: false });
   };
   canvas.addEventListener("pointerup", finish);
   canvas.addEventListener("pointercancel", finish);
@@ -813,9 +915,13 @@ function signature(context) {
     ctx?.clearRect(0, 0, canvas.width, canvas.height);
     hasInk = false;
     hint.style.display = "";
-    context.setValue(null);
+    typed.value = "";
+    context.setValue(null, { render: false });
   });
-  appendChildren(wrap, [canvas, hint, clear]);
+  appendChildren(pad, [canvas, hint, clear]);
+  const typeWrap = el("div", { className: "fillo-signature-type" });
+  typeWrap.appendChild(typed);
+  appendChildren(wrap, [pad, typeWrap]);
   return shell(context.field, context.error, wrap, context.ids);
 }
 function fileUpload(context) {
@@ -845,6 +951,10 @@ function fileUpload(context) {
   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" } }));
+  }
   return shell(field, context.error, wrap, context.ids);
 }
 var shuffleCache = /* @__PURE__ */ new Map();
@@ -883,44 +993,12 @@ var DEFAULT_COMPONENTS = {
   signature,
   file_upload: fileUpload
 };
-function isAutoSubmitBlock(block) {
-  return isField(block) && (block.kind === "select" || block.kind === "dropdown" || block.kind === "checkbox" || block.kind === "rating" || block.kind === "linear_scale");
-}
-function needsExplicitSubmit(visible) {
-  const interactive = visible.filter((b) => !(isField(b) && b.kind === "hidden"));
-  if (interactive.length === 0) return false;
-  if (interactive.length > 1) return true;
-  return !isAutoSubmitBlock(interactive[0]);
-}
 function defaultFieldRenderer(context) {
   if (context.field.kind === "hidden") return null;
   if (context.field.kind === "custom") return null;
   const renderer = DEFAULT_COMPONENTS[context.field.kind];
   return renderer ? renderer(context) : null;
 }
-function shouldAutoSubmit(field, value, api, uploading) {
-  if (api.form.settings.submitMode !== "auto") return false;
-  if (!api.isLastPage || api.status !== "idle" || uploading) return false;
-  const hasDiscreteAnswer = (() => {
-    switch (field.kind) {
-      case "select":
-      case "dropdown":
-        return typeof value === "string" && field.options.some((option) => option.id === value);
-      case "checkbox":
-        return value === true;
-      case "rating":
-      case "linear_scale":
-        return typeof value === "number";
-      default:
-        return false;
-    }
-  })();
-  if (!hasDiscreteAnswer) return false;
-  const nextData = { ...api.data, [field.id]: value };
-  const interactive = visibleFields(api.form, nextData).filter((f) => f.kind !== "hidden");
-  if (interactive.length !== 1 || interactive[0]?.id !== field.id) return false;
-  return validateResponse(api.form, nextData).ok;
-}
 var DomFormController = class {
   constructor(target, options) {
     this.target = target;
@@ -951,6 +1029,14 @@ var DomFormController = class {
   hpValue = "";
   activeOtherFields = /* @__PURE__ */ new Set();
   uploadProgress = /* @__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,
+  // "page" after navigating, null → restore the pre-render active control.
+  focusIntent = null;
+  // 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();
   get status() {
     if (this.phase === "ready") return this.engine?.getState().status ?? "idle";
     return this.phase;
@@ -987,22 +1073,43 @@ var DomFormController = class {
       submit: () => this.submit()
     };
   }
+  resolveFormIdFn;
+  /** Prod-only: the code form is an unpublished draft — submissions would 404. */
+  notLive = 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 (this.options.client?.key) {
-          syncCodeForm(this.options.client, codeForm).then(({ formId, branding }) => {
+        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();
+              }
+            }
             if (branding) {
               this.fetchedPoweredBy = branding.poweredBy;
               this.fetchedBrandLabel = branding.label;
               this.fetchedBrandHref = branding.href;
               this.render();
             }
-          }).catch((error) => this.handleError(toFilloError(error)));
+          }).catch((error) => {
+            const err = toFilloError(error);
+            console.warn("[fillo] form sync failed:", err.message);
+            this.options.onError?.(err);
+          });
         }
         return;
       }
@@ -1042,7 +1149,16 @@ var DomFormController = class {
       onChange: this.options.onChange,
       onSubmitted: this.options.onSubmitted,
       getHoneypot: () => this.hpValue,
-      surface: "default"
+      surface: "default",
+      resolveFormId: this.resolveFormIdFn
+    });
+    let lastStatus = this.engine.getState().status;
+    this.engine.subscribe(() => {
+      const status = this.engine?.getState().status;
+      if (status !== void 0 && status !== lastStatus) {
+        lastStatus = status;
+        this.queueRender();
+      }
     });
     this.phase = this.closed ? "closed" : "ready";
     this.render();
@@ -1056,30 +1172,67 @@ var DomFormController = class {
   }
   next() {
     if (!this.engine) 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;
     this.engine.back();
+    this.focusIntent = "page";
     this.render();
   }
   async submit() {
     if (!this.engine || this.phase !== "ready") return;
     const pending = this.engine.submit();
+    if (this.hasErrors()) this.focusIntent = "error";
     this.render();
     try {
       await pending;
     } catch (error) {
-      this.handleError(toFilloError(error));
+      this.options.onError?.(toFilloError(error));
+      this.focusIntent = "error";
+      this.render();
       return;
     }
+    if (this.hasErrors()) this.focusIntent = "error";
+    this.render();
+  }
+  hasErrors() {
+    return Object.keys(this.engine?.getState().errors ?? {}).length > 0;
+  }
+  /** Re-apply a theme to the live instance — no remount, so entered data survives. */
+  setTheme(theme) {
+    this.options.theme = theme;
+    this.theme = theme;
+    this.render();
+  }
+  /** Swap the client in place (late `client` assignment) without a remount. */
+  setClient(client) {
+    this.options.client = client;
+    this.engine?.setContext({ client });
     this.render();
   }
   async uploadFiles(field, files) {
     if (!this.schema) return;
     const maxFiles = field.maxFiles ?? 1;
-    const selected = files.slice(0, maxFiles);
+    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) {
+      this.uploadNotices.set(
+        field.id,
+        `You can attach up to ${maxFiles} file${maxFiles === 1 ? "" : "s"}. ${dropped} ${dropped === 1 ? "file was" : "files were"} not added.`
+      );
+    } else {
+      this.uploadNotices.delete(field.id);
+    }
+    if (selected.length === 0) {
+      this.queueRender();
+      return;
+    }
     this.uploadProgress.set(field.id, 0);
     this.queueRender();
     try {
@@ -1105,7 +1258,7 @@ var DomFormController = class {
         }
       }
       this.uploadProgress.delete(field.id);
-      this.setValueInternal(field.id, values);
+      this.setValueInternal(field.id, [...existing, ...values]);
     } catch (error) {
       this.uploadProgress.delete(field.id);
       this.handleError(toFilloError(error));
@@ -1113,8 +1266,95 @@ var DomFormController = class {
   }
   destroy() {
     this.destroyed = true;
+    this.closeOverlays();
     this.target.replaceChildren();
   }
+  /** Add/return the phone popover teardown; called back on re-render or destroy. */
+  registerOverlay = (close) => {
+    this.overlays.add(close);
+    return () => this.overlays.delete(close);
+  };
+  closeOverlays() {
+    if (this.overlays.size === 0) return;
+    for (const close of Array.from(this.overlays)) {
+      try {
+        close();
+      } catch {
+      }
+    }
+    this.overlays.clear();
+  }
+  captureFocus() {
+    if (typeof document === "undefined") return null;
+    const active = document.activeElement;
+    if (!active || !this.element.contains(active)) return null;
+    const desc = {};
+    if (active.id) desc.id = active.id;
+    const rankOpt = active.getAttribute("data-fillo-rank-opt");
+    if (rankOpt) {
+      desc.rankOpt = rankOpt;
+      desc.rankDir = active.getAttribute("data-fillo-rank-dir") ?? void 0;
+    }
+    const fieldEl = active.closest("[data-field]");
+    if (fieldEl) {
+      desc.fieldId = fieldEl.getAttribute("data-field") ?? void 0;
+      desc.controlIndex = Array.from(
+        fieldEl.querySelectorAll(FOCUSABLE_SELECTOR)
+      ).indexOf(active);
+    }
+    if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement) {
+      try {
+        desc.selStart = active.selectionStart;
+        desc.selEnd = active.selectionEnd;
+      } catch {
+      }
+    }
+    return desc.id || desc.rankOpt || desc.fieldId ? desc : null;
+  }
+  restoreFocus(desc) {
+    if (typeof document === "undefined") return;
+    let target = null;
+    if (desc.rankOpt) {
+      const buttons = Array.from(
+        this.element.querySelectorAll("[data-fillo-rank-opt]")
+      ).filter((b) => b.getAttribute("data-fillo-rank-opt") === desc.rankOpt);
+      target = buttons.find((b) => b.getAttribute("data-fillo-rank-dir") === desc.rankDir && !b.disabled) ?? buttons.find((b) => !b.disabled) ?? null;
+    }
+    if (!target && desc.id) target = document.getElementById(desc.id);
+    if (!target && desc.fieldId != null && desc.controlIndex != null && desc.controlIndex >= 0) {
+      const fieldEl = Array.from(this.element.querySelectorAll("[data-field]")).find(
+        (e) => e.getAttribute("data-field") === desc.fieldId
+      );
+      if (fieldEl) {
+        target = Array.from(fieldEl.querySelectorAll(FOCUSABLE_SELECTOR))[desc.controlIndex] ?? null;
+      }
+    }
+    if (!target || typeof target.focus !== "function") return;
+    target.focus();
+    if ((target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) && desc.selStart != null) {
+      try {
+        target.setSelectionRange(desc.selStart, desc.selEnd ?? desc.selStart);
+      } catch {
+      }
+    }
+  }
+  applyFocus(intent, captured) {
+    if (typeof document === "undefined") return;
+    if (intent === "error") {
+      this.element.querySelector('[aria-invalid="true"]')?.focus?.();
+      return;
+    }
+    if (intent === "page") {
+      const heading = this.element.querySelector(".fillo-page-title, .fillo-title");
+      const target = heading ?? this.element.querySelector(".fillo-blocks");
+      if (target) {
+        if (!target.hasAttribute("tabindex")) target.setAttribute("tabindex", "-1");
+        target.focus?.();
+      }
+      return;
+    }
+    if (captured) this.restoreFocus(captured);
+  }
   handleError(error) {
     this.phase = "error";
     this.options.onError?.(error);
@@ -1130,6 +1370,10 @@ var DomFormController = class {
   }
   render(error) {
     if (this.destroyed) return;
+    const intent = this.focusIntent;
+    this.focusIntent = null;
+    const captured = intent ? null : this.captureFocus();
+    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" } });
@@ -1153,6 +1397,13 @@ var DomFormController = class {
       this.element.appendChild(closed);
       return;
     }
+    if (this.notLive) {
+      const panel = el("div", { className: `fillo-form fillo-form--closed ${this.options.className ?? ""}` });
+      themeStyle(panel, this.theme);
+      panel.appendChild(el("p", { className: "fillo-closed", text: "This form isn't live yet." }));
+      this.element.appendChild(panel);
+      return;
+    }
     if (!this.schema) return;
     if (this.engine?.getState().status === "submitted") {
       const api = this.api();
@@ -1165,6 +1416,7 @@ var DomFormController = class {
     if (!this.options.client && isDevEnv()) this.element.appendChild(devNoClientEl());
     this.element.appendChild(this.renderForm());
     if (this.brandingVisible()) this.element.appendChild(poweredByEl(this.fetchedBrandLabel, this.fetchedBrandHref));
+    this.applyFocus(intent, captured);
   }
   /** Server-driven and not client-removable; defaults on until the server says. */
   brandingVisible() {
@@ -1195,7 +1447,7 @@ var DomFormController = class {
       });
       progress.appendChild(el("div", { className: "fillo-progress-fill" }));
       progress.firstElementChild?.style.setProperty(
-        "width",
+        "--fillo-progress-value",
         `${(api.pageIndex + 1) / api.pageCount * 100}%`
       );
       form.appendChild(progress);
@@ -1215,10 +1467,24 @@ var DomFormController = class {
     }
     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);
+    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 autoSubmit = api.form.settings.submitMode === "auto";
     const showPrimaryButton = !autoSubmit || !api.isLastPage || needsExplicitSubmit(visibleFields(api.form, api.data));
     const showFooter = showPrimaryButton || api.pageCount > 1 && !api.isFirstPage;
@@ -1251,7 +1517,15 @@ var DomFormController = class {
     const setValue = (value, options) => {
       this.setValueInternal(block.id, value, options);
       if (options?.render === false) return;
-      if (shouldAutoSubmit(block, value, api, this.uploadProgress.size > 0)) void this.submit();
+      const autoCtx = {
+        form: api.form,
+        data: api.data,
+        // dom's status union adds render phases; non-"idle" is a no anyway.
+        status: api.status,
+        isLastPage: api.isLastPage,
+        uploading: this.uploadProgress.size > 0
+      };
+      if (shouldAutoSubmit(block, value, autoCtx)) void this.submit();
     };
     const context = {
       field: block,
@@ -1263,7 +1537,9 @@ var DomFormController = class {
       uploadFiles: (field, files) => this.uploadFiles(field, files),
       uploadProgress: this.uploadProgress,
       activeOtherFields: this.activeOtherFields,
-      getValue: () => this.engine?.getState().data[block.id]
+      getValue: () => this.engine?.getState().data[block.id],
+      registerOverlay: this.registerOverlay,
+      uploadNotice: this.uploadNotices.get(block.id)
     };
     const renderer = block.kind === "custom" ? this.options.customComponents?.[block.component] ?? this.options.components?.custom : this.options.components?.[block.kind] ?? defaultFieldRenderer;
     return renderer?.(context) ?? null;
@@ -1322,43 +1598,65 @@ function createFormElement(options) {
   renderForm(host, options);
   return host;
 }
-var FilloFormElement = class extends HTMLElement {
+var HTMLElementBase = typeof HTMLElement !== "undefined" ? HTMLElement : class {
+};
+var FilloFormElement = class extends HTMLElementBase {
   instance = null;
   assignedForm;
   assignedClient;
   assignedTheme;
   assignedInitialData;
+  mounted = false;
+  mountScheduled = false;
   static get observedAttributes() {
     return ["publishable-key", "form-id"];
   }
   connectedCallback() {
-    this.mount();
+    this.scheduleMount();
   }
   disconnectedCallback() {
     this.instance?.destroy();
     this.instance = null;
+    this.mounted = false;
   }
+  // On upgrade, attributeChangedCallback fires once per observed attribute
+  // *before* connectedCallback; remounting on each would run (and tear down)
+  // several getForm fetches. The first mount is owned by connectedCallback — only
+  // remount here once we're already mounted, and coalesce it.
   attributeChangedCallback() {
-    if (this.isConnected) this.mount();
+    if (this.mounted && this.isConnected) this.scheduleMount();
   }
   set form(value) {
     this.assignedForm = value;
-    if (this.isConnected) this.mount();
+    if (this.mounted) this.scheduleMount();
   }
   get form() {
     return this.assignedForm;
   }
+  // Client swaps in place — a late `client` assignment (common when a host sets
+  // properties after appending the element) must not wipe entered data.
   set client(value) {
     this.assignedClient = value;
-    if (this.isConnected) this.mount();
+    if (this.mounted && this.instance instanceof DomFormController) this.instance.setClient(value);
   }
+  // Theme is re-applied to the live instance — no remount, no data loss.
   set theme(value) {
     this.assignedTheme = value;
-    if (this.isConnected) this.mount();
+    if (this.mounted && this.instance instanceof DomFormController) this.instance.setTheme(value);
   }
   set initialData(value) {
     this.assignedInitialData = value;
-    if (this.isConnected) this.mount();
+    if (this.mounted) this.scheduleMount();
+  }
+  // Coalesce a burst of attribute/property changes in one tick into a single
+  // mount so concurrent renders (and duplicate fetches) can't happen.
+  scheduleMount() {
+    if (this.mountScheduled) return;
+    this.mountScheduled = true;
+    queueMicrotask(() => {
+      this.mountScheduled = false;
+      if (this.isConnected) this.mount();
+    });
   }
   mount() {
     this.instance?.destroy();
@@ -1375,9 +1673,11 @@ var FilloFormElement = class extends HTMLElement {
       onSubmitted: (responseId, data) => this.dispatchEvent(new CustomEvent("fillo-submit", { detail: { responseId, data } })),
       onError: (error) => this.dispatchEvent(new CustomEvent("fillo-error", { detail: { error } }))
     });
+    this.mounted = true;
   }
 };
 function registerFilloElement(name = "fillo-form") {
+  if (typeof customElements === "undefined") return;
   if (!customElements.get(name)) customElements.define(name, FilloFormElement);
 }
 function createFormController(options) {