@usefillo/react 0.3.2 → 0.5.0

package/dist/index.js

@@ -1,21 +1,52 @@
 "use client";
 
 // src/FilloForm.tsx
-import { useEffect as useEffect6, useMemo, useRef as useRef4, useState as useState5 } from "react";
-import { FilloError as FilloError2, createClient } from "@usefillo/core";
+import { useEffect as useEffect7, useId as useId2, useMemo as useMemo4, useRef as useRef5, useState as useState6 } from "react";
+import {
+  FilloError as FilloError2,
+  createClient,
+  isField as isField2,
+  normalizeFormSchema,
+  normalizeFormTheme
+} from "@usefillo/core";
 
 // src/context.ts
 import { allFields } from "@usefillo/core";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useId, useMemo } from "react";
 var FilloContext = createContext(null);
+var FilloInstanceIdContext = createContext(null);
+function useFilloInstanceId() {
+  const instanceId = useContext(FilloInstanceIdContext);
+  const fallbackId = useId().replace(/:/g, "");
+  return instanceId ?? fallbackId;
+}
+function createFilloFieldIds(instanceId, fieldId) {
+  const base = `fillo-${instanceId}-${fieldId}`;
+  return {
+    inputId: base,
+    labelId: `${base}-label`,
+    descriptionId: `${base}-desc`,
+    errorId: `${base}-error`,
+    name: base
+  };
+}
 function useFillo() {
   const api = useContext(FilloContext);
   if (!api) throw new Error("useFillo must be used inside <FilloForm> or <FilloProvider>");
   return api;
 }
+function useFilloFieldIds(fieldId, ids) {
+  const instanceId = useFilloInstanceId();
+  return ids ?? createFilloFieldIds(instanceId, fieldId);
+}
 function useField(fieldId) {
   const api = useFillo();
-  const field = allFields(api.form).find((f) => f.id === fieldId);
+  const fieldsById = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const f of allFields(api.form)) map.set(f.id, f);
+    return map;
+  }, [api.form]);
+  const field = fieldsById.get(fieldId);
   return {
     field,
     value: api.data[fieldId],
@@ -25,7 +56,7 @@ function useField(fieldId) {
 }
 
 // src/controller.ts
-import { useEffect, useRef, useSyncExternalStore } from "react";
+import { useEffect, useMemo as useMemo2, useRef, useSyncExternalStore } from "react";
 import {
   createFormController
 } from "@usefillo/core";
@@ -52,17 +83,20 @@ function useFilloController(options) {
   }, [store, options.form, options.formId, options.client]);
   useEffect(() => () => store.destroy(), [store]);
   const state = useSyncExternalStore(store.subscribe, store.getState, store.getState);
-  return {
-    form: options.form,
-    formId: options.formId,
-    client: options.client,
-    ...state,
-    setValue: store.setValue,
-    setUploading: store.setUploading,
-    next: store.next,
-    back: store.back,
-    submit: store.submit
-  };
+  return useMemo2(
+    () => ({
+      form: options.form,
+      formId: options.formId,
+      client: options.client,
+      ...state,
+      setValue: store.setValue,
+      setUploading: store.setUploading,
+      next: store.next,
+      back: store.back,
+      submit: store.submit
+    }),
+    [store, state, options.form, options.formId, options.client]
+  );
 }
 
 // src/define.ts
@@ -96,17 +130,247 @@ function useCodeFormSync(form, client, onError) {
 }
 
 // src/fields.tsx
-import { isField, pipeBlock } from "@usefillo/core";
-import { useEffect as useEffect5, useState as useState4 } from "react";
+import { isField, pipeBlock, validateResponse } from "@usefillo/core";
+import { memo, useEffect as useEffect6, useState as useState5 } from "react";
 
-// src/signature.tsx
-import { useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
+// src/phone.tsx
+import {
+  PHONE_COUNTRIES,
+  countryByIso,
+  digitsOnly,
+  flagEmoji,
+  formatNational,
+  parsePhone,
+  toE164
+} from "@usefillo/core";
+import { useEffect as useEffect3, useLayoutEffect, useMemo as useMemo3, useRef as useRef2, useState as useState2 } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-function SignatureField({ field, value, error, setValue }) {
-  const canvasRef = useRef2(null);
-  const drawing = useRef2(false);
-  const [hasInk, setHasInk] = useState2(Boolean(value));
+function localeCountry() {
+  if (typeof navigator === "undefined") return void 0;
+  const tag = navigator.languages?.[0] || navigator.language || "";
+  const region = tag.split("-")[1];
+  return region && /^[A-Za-z]{2}$/.test(region) ? region.toUpperCase() : void 0;
+}
+function nationalFor(stored, country) {
+  const digits = digitsOnly(stored);
+  return digits.startsWith(country.dialCode) ? digits.slice(country.dialCode.length) : digits;
+}
+function PhoneField({ field, value, error, setValue, ids: providedIds }) {
+  const ids = useFilloFieldIds(field.id, providedIds);
+  const schema = field;
+  const stored = typeof value === "string" ? value : "";
+  const [country, setCountry] = useState2(
+    () => parsePhone(stored).country ?? countryByIso(schema.defaultCountry) ?? countryByIso(localeCountry()) ?? PHONE_COUNTRIES[0]
+  );
+  const national = nationalFor(stored, country);
+  const display = formatNational(country, national);
+  const inputRef = useRef2(null);
+  const caretDigits = useRef2(null);
+  useLayoutEffect(() => {
+    const el = inputRef.current;
+    if (!el || caretDigits.current == null) return;
+    const target = caretDigits.current;
+    caretDigits.current = null;
+    if (target === 0) return el.setSelectionRange(0, 0);
+    let seen = 0;
+    let pos = display.length;
+    for (let i = 0; i < display.length; i++) {
+      if (/\d/.test(display[i]) && ++seen === target) {
+        pos = i + 1;
+        break;
+      }
+    }
+    el.setSelectionRange(pos, pos);
+  });
+  const commit = (c, nat) => setValue(nat ? toE164(c, nat) : "");
+  function onInput(e) {
+    const el = e.target;
+    const raw = el.value;
+    const caret = el.selectionStart ?? raw.length;
+    caretDigits.current = digitsOnly(raw.slice(0, caret)).length;
+    if (raw.trimStart().startsWith("+")) {
+      const p = parsePhone(raw);
+      if (p.country) setCountry(p.country);
+      commit(p.country ?? country, p.country ? p.national : digitsOnly(raw));
+      return;
+    }
+    commit(country, digitsOnly(raw));
+  }
+  function pickCountry(c) {
+    setCountry(c);
+    commit(c, national);
+    inputRef.current?.focus();
+  }
+  const describedBy = [field.description ? ids.descriptionId : null, error ? ids.errorId : null].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxs("div", { className: `fillo-field fillo-field--phone${error ? " fillo-field--error" : ""}`, "data-field": field.id, children: [
+    /* @__PURE__ */ jsxs("label", { className: "fillo-label", id: ids.labelId, htmlFor: ids.inputId, children: [
+      field.label,
+      !field.required && /* @__PURE__ */ jsx("span", { className: "fillo-optional", children: " (optional)" })
+    ] }),
+    field.description && /* @__PURE__ */ jsx("p", { className: "fillo-description", id: ids.descriptionId, children: field.description }),
+    /* @__PURE__ */ jsxs("div", { className: "fillo-phone", children: [
+      /* @__PURE__ */ jsx(CountrySelect, { country, onPick: pickCountry, labelledBy: ids.labelId }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          id: ids.inputId,
+          className: "fillo-input fillo-phone-input",
+          type: "tel",
+          inputMode: "tel",
+          autoComplete: "tel-national",
+          value: display,
+          placeholder: formatNational(country, country.example),
+          onChange: onInput,
+          "aria-invalid": error ? true : void 0,
+          "aria-required": field.required ? true : void 0,
+          "aria-describedby": describedBy
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { className: "fillo-error", id: ids.errorId, role: "alert", children: error })
+  ] });
+}
+function CountrySelect({
+  country,
+  onPick,
+  labelledBy
+}) {
+  const [open, setOpen] = useState2(false);
+  const [query, setQuery] = useState2("");
+  const [active, setActive] = useState2(0);
+  const rootRef = useRef2(null);
+  const searchRef = useRef2(null);
+  const listId = `${labelledBy}-countries`;
+  const matches = useMemo3(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return PHONE_COUNTRIES;
+    const qDigits = q.replace(/[^\d]/g, "");
+    return PHONE_COUNTRIES.filter(
+      (c) => c.name.toLowerCase().includes(q) || c.iso2.toLowerCase() === q || qDigits.length > 0 && c.dialCode.startsWith(qDigits)
+    );
+  }, [query]);
+  useEffect3(() => {
+    if (!open) return;
+    setQuery("");
+    setActive(Math.max(0, PHONE_COUNTRIES.indexOf(country)));
+    const id = requestAnimationFrame(() => searchRef.current?.focus());
+    return () => cancelAnimationFrame(id);
+  }, [open, country]);
   useEffect3(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      if (!rootRef.current?.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    return () => document.removeEventListener("mousedown", onDown);
+  }, [open]);
+  useEffect3(() => {
+    if (!open) return;
+    document.getElementById(`${listId}-opt-${active}`)?.scrollIntoView({ block: "nearest" });
+  }, [active, open, listId]);
+  function choose(c) {
+    if (!c) return;
+    onPick(c);
+    setOpen(false);
+  }
+  function onSearchKey(e) {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActive((i) => Math.min(i + 1, matches.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActive((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      choose(matches[active]);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setOpen(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "fillo-phone-country", ref: rootRef, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "fillo-phone-flag",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-label": `Country: ${country.name} (+${country.dialCode})`,
+        onClick: () => setOpen((o) => !o),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "fillo-phone-flag-emoji", "aria-hidden": "true", children: flagEmoji(country.iso2) }),
+          /* @__PURE__ */ jsxs("span", { className: "fillo-phone-dial", children: [
+            "+",
+            country.dialCode
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "fillo-phone-caret", "aria-hidden": "true", children: "\u25BE" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs("div", { className: "fillo-phone-popover", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: searchRef,
+          className: "fillo-phone-search",
+          type: "text",
+          role: "combobox",
+          "aria-expanded": "true",
+          "aria-controls": listId,
+          "aria-autocomplete": "list",
+          "aria-activedescendant": matches[active] ? `${listId}-opt-${active}` : void 0,
+          placeholder: "Search country or code",
+          value: query,
+          onChange: (e) => {
+            setQuery(e.target.value);
+            setActive(0);
+          },
+          onKeyDown: onSearchKey
+        }
+      ),
+      /* @__PURE__ */ jsxs("ul", { className: "fillo-phone-list", role: "listbox", id: listId, "aria-label": "Country", children: [
+        matches.map((c, i) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            id: `${listId}-opt-${i}`,
+            role: "option",
+            "aria-selected": c.iso2 === country.iso2,
+            className: `fillo-phone-option${i === active ? " fillo-phone-option--active" : ""}`,
+            onMouseEnter: () => setActive(i),
+            onMouseDown: (e) => {
+              e.preventDefault();
+              choose(c);
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "fillo-phone-flag-emoji", "aria-hidden": "true", children: flagEmoji(c.iso2) }),
+              /* @__PURE__ */ jsx("span", { className: "fillo-phone-option-name", children: c.name }),
+              /* @__PURE__ */ jsxs("span", { className: "fillo-phone-option-dial", children: [
+                "+",
+                c.dialCode
+              ] })
+            ]
+          },
+          c.iso2
+        )),
+        matches.length === 0 && /* @__PURE__ */ jsx("li", { className: "fillo-phone-empty", children: "No matches" })
+      ] })
+    ] })
+  ] });
+}
+
+// src/signature.tsx
+import { useEffect as useEffect4, useRef as useRef3, useState as useState3 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function SignatureField({ field, value, error, setValue, ids: providedIds }) {
+  const ids = useFilloFieldIds(field.id, providedIds);
+  const typedInputId = `${ids.inputId}-typed`;
+  const canvasRef = useRef3(null);
+  const drawing = useRef3(false);
+  const [hasInk, setHasInk] = useState3(Boolean(value));
+  const [typedName, setTypedName] = useState3("");
+  useEffect4(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const scale = window.devicePixelRatio || 1;
@@ -133,12 +397,31 @@ function SignatureField({ field, value, error, setValue }) {
   function start(e) {
     drawing.current = true;
     e.currentTarget.setPointerCapture(e.pointerId);
+    if (typedName) setTypedName("");
     const ctx = e.currentTarget.getContext("2d");
     if (!ctx) return;
     const { x, y } = point(e);
     ctx.beginPath();
     ctx.moveTo(x, y);
   }
+  function drawTypedName(text) {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (!canvas || !ctx) return;
+    const rect = canvas.getBoundingClientRect();
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    if (text.trim()) {
+      ctx.fillStyle = getComputedStyle(canvas).color;
+      ctx.font = `italic ${Math.min(40, rect.height * 0.45)}px "Segoe Script", "Brush Script MT", cursive`;
+      ctx.textBaseline = "middle";
+      ctx.fillText(text, 12, rect.height / 2);
+      setHasInk(true);
+      setValue(canvas.toDataURL("image/png"));
+    } else {
+      setHasInk(false);
+      setValue(null);
+    }
+  }
   function move(e) {
     if (!drawing.current) return;
     const ctx = e.currentTarget.getContext("2d");
@@ -159,55 +442,101 @@ function SignatureField({ field, value, error, setValue }) {
     if (!canvas || !ctx) return;
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     setHasInk(false);
+    setTypedName("");
     setValue(null);
   }
-  const describedBy = [field.description ? `fillo-${field.id}-desc` : null, error ? `fillo-${field.id}-error` : null].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ jsxs("div", { className: `fillo-field fillo-field--signature${error ? " fillo-field--error" : ""}`, children: [
-    /* @__PURE__ */ jsxs("label", { className: "fillo-label", htmlFor: `fillo-${field.id}`, children: [
+  const describedBy = [field.description ? ids.descriptionId : null, error ? ids.errorId : null].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxs2("div", { className: `fillo-field fillo-field--signature${error ? " fillo-field--error" : ""}`, children: [
+    /* @__PURE__ */ jsxs2("span", { className: "fillo-label", id: ids.labelId, children: [
       field.label,
-      !field.required && /* @__PURE__ */ jsx("span", { className: "fillo-optional", children: " (optional)" })
-    ] }),
-    field.description && /* @__PURE__ */ jsx("p", { className: "fillo-description", id: `fillo-${field.id}-desc`, children: field.description }),
-    /* @__PURE__ */ jsxs("div", { className: "fillo-signature", children: [
-      /* @__PURE__ */ jsx(
-        "canvas",
-        {
-          ref: canvasRef,
-          id: `fillo-${field.id}`,
-          className: "fillo-signature-canvas",
-          "aria-invalid": error ? true : void 0,
-          "aria-describedby": describedBy,
-          onPointerDown: start,
-          onPointerMove: move,
-          onPointerUp: end,
-          onPointerLeave: end
-        }
-      ),
-      hasInk && /* @__PURE__ */ jsx("button", { type: "button", className: "fillo-signature-clear", onClick: clear, children: "Clear" }),
-      !hasInk && /* @__PURE__ */ jsx("span", { className: "fillo-signature-hint", children: "Sign here" })
+      !field.required && /* @__PURE__ */ jsx2("span", { className: "fillo-optional", children: " (optional)" })
     ] }),
-    error && /* @__PURE__ */ jsx("p", { className: "fillo-error", id: `fillo-${field.id}-error`, role: "alert", children: error })
+    field.description && /* @__PURE__ */ jsx2("p", { className: "fillo-description", id: ids.descriptionId, children: field.description }),
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        role: "group",
+        "aria-labelledby": ids.labelId,
+        "aria-describedby": describedBy,
+        children: [
+          /* @__PURE__ */ jsxs2("div", { className: "fillo-signature", children: [
+            /* @__PURE__ */ jsx2(
+              "canvas",
+              {
+                ref: canvasRef,
+                className: "fillo-signature-canvas",
+                "aria-hidden": "true",
+                onPointerDown: start,
+                onPointerMove: move,
+                onPointerUp: end,
+                onPointerLeave: end
+              }
+            ),
+            hasInk && /* @__PURE__ */ jsx2("button", { type: "button", className: "fillo-signature-clear", onClick: clear, children: "Clear" }),
+            !hasInk && /* @__PURE__ */ jsx2("span", { className: "fillo-signature-hint", "aria-hidden": "true", children: "Sign here" })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "fillo-signature-type", children: [
+            /* @__PURE__ */ jsx2("label", { className: "fillo-signature-type-label", htmlFor: typedInputId, children: "Or type your full name to sign" }),
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                id: typedInputId,
+                type: "text",
+                className: "fillo-input fillo-signature-type-input",
+                autoComplete: "name",
+                value: typedName,
+                required: field.required || void 0,
+                "aria-required": field.required || void 0,
+                "aria-invalid": error ? true : void 0,
+                "aria-describedby": describedBy,
+                onChange: (e) => {
+                  setTypedName(e.target.value);
+                  drawTypedName(e.target.value);
+                }
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx2("p", { className: "fillo-error", id: ids.errorId, role: "alert", children: error })
   ] });
 }
 
 // src/upload.tsx
-import { useEffect as useEffect4, useRef as useRef3, useState as useState3 } from "react";
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useEffect as useEffect5, useRef as useRef4, useState as useState4 } from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function uploadStatus(inFlight, doneCount) {
+  const failed = inFlight.filter((f) => f.error).length;
+  const active = inFlight.length - failed;
+  const parts = [];
+  if (active > 0) {
+    parts.push(`Uploading ${active} ${active === 1 ? "file" : "files"}, please wait\u2026`);
+  }
+  if (failed > 0) {
+    parts.push(`${failed} ${failed === 1 ? "upload" : "uploads"} failed.`);
+  }
+  if (active === 0 && doneCount > 0) {
+    parts.push(`${doneCount} ${doneCount === 1 ? "file" : "files"} uploaded.`);
+  }
+  return parts.join(" ");
+}
 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 FileUploadField({ field, value, error, setValue, api }) {
+function FileUploadField({ field, value, error, setValue, api, ids: providedIds }) {
+  const ids = useFilloFieldIds(field.id, providedIds);
   const schema = field;
-  const inputRef = useRef3(null);
-  const [inFlight, setInFlight] = useState3([]);
-  const [dragOver, setDragOver] = useState3(false);
-  const mountedRef = useRef3(true);
-  const controllers = useRef3(/* @__PURE__ */ new Map());
-  const inFlightCount = useRef3(0);
-  useEffect4(
+  const inputRef = useRef4(null);
+  const [inFlight, setInFlight] = useState4([]);
+  const [dragOver, setDragOver] = useState4(false);
+  const mountedRef = useRef4(true);
+  const controllers = useRef4(/* @__PURE__ */ new Map());
+  const inFlightCount = useRef4(0);
+  useEffect5(
     () => () => {
       mountedRef.current = false;
       controllers.current.forEach((c) => c.abort());
@@ -271,14 +600,14 @@ function FileUploadField({ field, value, error, setValue, api }) {
   function removeFile(fileId) {
     setValue(files.filter((f) => f.fileId !== fileId));
   }
-  const describedBy = [field.description ? `fillo-${field.id}-desc` : null, error ? `fillo-${field.id}-error` : null].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ jsxs2("div", { className: `fillo-field fillo-field--file_upload${error ? " fillo-field--error" : ""}`, children: [
-    /* @__PURE__ */ jsxs2("label", { className: "fillo-label", htmlFor: `fillo-${field.id}`, children: [
+  const describedBy = [field.description ? ids.descriptionId : null, error ? ids.errorId : null].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxs3("div", { className: `fillo-field fillo-field--file_upload${error ? " fillo-field--error" : ""}`, children: [
+    /* @__PURE__ */ jsxs3("label", { className: "fillo-label", htmlFor: ids.inputId, children: [
       field.label,
-      !field.required && /* @__PURE__ */ jsx2("span", { className: "fillo-optional", children: " (optional)" })
+      !field.required && /* @__PURE__ */ jsx3("span", { className: "fillo-optional", children: " (optional)" })
     ] }),
-    field.description && /* @__PURE__ */ jsx2("p", { className: "fillo-description", id: `fillo-${field.id}-desc`, children: field.description }),
-    remaining > 0 && /* @__PURE__ */ jsxs2(
+    field.description && /* @__PURE__ */ jsx3("p", { className: "fillo-description", id: ids.descriptionId, children: field.description }),
+    remaining > 0 && /* @__PURE__ */ jsxs3(
       "div",
       {
         className: `fillo-dropzone${dragOver ? " fillo-dropzone--over" : ""}${canUpload ? "" : " fillo-dropzone--disabled"}`,
@@ -299,11 +628,11 @@ function FileUploadField({ field, value, error, setValue, api }) {
           if ((e.key === "Enter" || e.key === " ") && canUpload) inputRef.current?.click();
         },
         children: [
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx3(
             "input",
             {
               ref: inputRef,
-              id: `fillo-${field.id}`,
+              id: ids.inputId,
               type: "file",
               hidden: true,
               "aria-invalid": error ? true : void 0,
@@ -314,26 +643,27 @@ function FileUploadField({ field, value, error, setValue, api }) {
               onChange: (e) => handleFiles(e.target.files)
             }
           ),
-          canUpload ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-            /* @__PURE__ */ jsxs2("span", { className: "fillo-dropzone-title", children: [
+          canUpload ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+            /* @__PURE__ */ jsxs3("span", { className: "fillo-dropzone-title", children: [
               "Drop ",
               maxFiles > 1 ? "files" : "a file",
               " here or click to browse"
             ] }),
-            /* @__PURE__ */ jsxs2("span", { className: "fillo-dropzone-hint", children: [
+            /* @__PURE__ */ jsxs3("span", { className: "fillo-dropzone-hint", children: [
               "Up to ",
               schema.maxFileSizeMb ?? 500,
               " MB per file \xB7 resumable"
             ] })
-          ] }) : /* @__PURE__ */ jsx2("span", { className: "fillo-dropzone-hint", children: "Uploads are disabled in preview" })
+          ] }) : /* @__PURE__ */ jsx3("span", { className: "fillo-dropzone-hint", children: "Uploads are disabled in preview" })
         ]
       }
     ),
-    (inFlight.length > 0 || files.length > 0) && /* @__PURE__ */ jsxs2("ul", { className: "fillo-files", children: [
-      files.map((f) => /* @__PURE__ */ jsxs2("li", { className: "fillo-file fillo-file--done", children: [
-        /* @__PURE__ */ jsx2("span", { className: "fillo-file-name", children: f.name }),
-        /* @__PURE__ */ jsx2("span", { className: "fillo-file-meta", children: formatBytes(f.size) }),
-        /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx3("div", { role: "status", "aria-live": "polite", className: "fillo-sr-only", children: uploadStatus(inFlight, files.length) }),
+    (inFlight.length > 0 || files.length > 0) && /* @__PURE__ */ jsxs3("ul", { className: "fillo-files", children: [
+      files.map((f) => /* @__PURE__ */ jsxs3("li", { className: "fillo-file fillo-file--done", children: [
+        /* @__PURE__ */ jsx3("span", { className: "fillo-file-name", children: f.name }),
+        /* @__PURE__ */ jsx3("span", { className: "fillo-file-meta", children: formatBytes(f.size) }),
+        /* @__PURE__ */ jsx3(
           "button",
           {
             type: "button",
@@ -344,50 +674,64 @@ function FileUploadField({ field, value, error, setValue, api }) {
           }
         )
       ] }, f.fileId)),
-      inFlight.map((f) => /* @__PURE__ */ jsxs2("li", { className: `fillo-file${f.error ? " fillo-file--failed" : ""}`, children: [
-        /* @__PURE__ */ jsx2("span", { className: "fillo-file-name", children: f.name }),
-        f.error ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx2("span", { className: "fillo-file-meta", children: f.error }),
-          /* @__PURE__ */ jsx2(
-            "button",
-            {
-              type: "button",
-              className: "fillo-file-remove",
-              "aria-label": "Dismiss",
-              onClick: () => setInFlight((prev) => prev.filter((x) => x.key !== f.key)),
-              children: "\xD7"
-            }
-          )
-        ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsxs2("span", { className: "fillo-file-meta", children: [
-            Math.round(f.fraction * 100),
-            "% of ",
-            formatBytes(f.size)
-          ] }),
-          /* @__PURE__ */ jsx2("span", { className: "fillo-progress", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("span", { className: "fillo-progress-bar", style: { width: `${f.fraction * 100}%` } }) }),
-          /* @__PURE__ */ jsx2(
-            "button",
-            {
-              type: "button",
-              className: "fillo-file-remove",
-              "aria-label": `Cancel ${f.name}`,
-              onClick: () => cancelUpload(f.key),
-              children: "\xD7"
-            }
-          )
-        ] })
-      ] }, f.key))
+      inFlight.map((f) => /* @__PURE__ */ jsxs3(
+        "li",
+        {
+          className: `fillo-file${f.error ? " fillo-file--failed" : ""}`,
+          ...f.error ? {} : {
+            role: "progressbar",
+            "aria-label": `Uploading ${f.name}`,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuenow": Math.round(f.fraction * 100)
+          },
+          children: [
+            /* @__PURE__ */ jsx3("span", { className: "fillo-file-name", children: f.name }),
+            f.error ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+              /* @__PURE__ */ jsx3("span", { className: "fillo-file-meta", children: f.error }),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  className: "fillo-file-remove",
+                  "aria-label": "Dismiss",
+                  onClick: () => setInFlight((prev) => prev.filter((x) => x.key !== f.key)),
+                  children: "\xD7"
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+              /* @__PURE__ */ jsxs3("span", { className: "fillo-file-meta", children: [
+                Math.round(f.fraction * 100),
+                "% of ",
+                formatBytes(f.size)
+              ] }),
+              /* @__PURE__ */ jsx3("span", { className: "fillo-progress", "aria-hidden": "true", children: /* @__PURE__ */ jsx3("span", { className: "fillo-progress-bar", style: { width: `${f.fraction * 100}%` } }) }),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  className: "fillo-file-remove",
+                  "aria-label": `Cancel ${f.name}`,
+                  onClick: () => cancelUpload(f.key),
+                  children: "\xD7"
+                }
+              )
+            ] })
+          ]
+        },
+        f.key
+      ))
     ] }),
-    error && /* @__PURE__ */ jsx2("p", { className: "fillo-error", id: `fillo-${field.id}-error`, role: "alert", children: error })
+    error && /* @__PURE__ */ jsx3("p", { className: "fillo-error", id: ids.errorId, role: "alert", children: error })
   ] });
 }
 
 // src/fields.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function fieldAria(field, error) {
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function fieldAria(field, error, ids) {
   const describedBy = [
-    field.description ? `fillo-${field.id}-desc` : null,
-    error ? `fillo-${field.id}-error` : null
+    field.description ? ids.descriptionId : null,
+    error ? ids.errorId : null
   ].filter(Boolean);
   return {
     "aria-invalid": error ? true : void 0,
@@ -398,58 +742,61 @@ function fieldAria(field, error) {
 function FieldShell({
   field,
   error,
+  ids,
   children
 }) {
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: `fillo-field fillo-field--${field.kind}${error ? " fillo-field--error" : ""}`,
       "data-field": field.id,
       children: [
-        /* @__PURE__ */ jsxs3("label", { className: "fillo-label", id: `fillo-${field.id}-label`, htmlFor: `fillo-${field.id}`, children: [
+        /* @__PURE__ */ jsxs4("label", { className: "fillo-label", id: ids.labelId, htmlFor: ids.inputId, children: [
           field.label,
-          !field.required && /* @__PURE__ */ jsx3("span", { className: "fillo-optional", children: " (optional)" })
+          !field.required && /* @__PURE__ */ jsx4("span", { className: "fillo-optional", children: " (optional)" })
         ] }),
-        field.description && /* @__PURE__ */ jsx3("p", { className: "fillo-description", id: `fillo-${field.id}-desc`, children: field.description }),
+        field.description && /* @__PURE__ */ jsx4("p", { className: "fillo-description", id: ids.descriptionId, children: field.description }),
         children,
-        error && /* @__PURE__ */ jsx3("p", { className: "fillo-error", id: `fillo-${field.id}-error`, role: "alert", children: error })
+        error && /* @__PURE__ */ jsx4("p", { className: "fillo-error", id: ids.errorId, role: "alert", children: error })
       ]
     }
   );
 }
-function TextInput({ field, value, error, setValue }) {
-  const type = field.kind === "email" ? "email" : field.kind === "url" ? "url" : field.kind === "phone" ? "tel" : field.kind === "number" ? "number" : field.kind === "date" ? "date" : "text";
-  return /* @__PURE__ */ jsx3(FieldShell, { field, error, children: /* @__PURE__ */ jsx3(
+function TextInput({ field, value, error, setValue, ids: providedIds }) {
+  const ids = useFilloFieldIds(field.id, providedIds);
+  const type = field.kind === "email" ? "email" : field.kind === "url" ? "url" : field.kind === "number" ? "number" : field.kind === "date" ? "date" : "text";
+  return /* @__PURE__ */ jsx4(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx4(
     "input",
     {
-      id: `fillo-${field.id}`,
+      id: ids.inputId,
       className: "fillo-input",
       type,
       value: typeof value === "string" || typeof value === "number" ? String(value) : "",
       placeholder: field.placeholder,
       onChange: (e) => setValue(e.target.value),
-      ...fieldAria(field, error)
+      ...fieldAria(field, error, ids)
     }
   ) });
 }
-function LongText({ field, value, error, setValue }) {
-  return /* @__PURE__ */ jsx3(FieldShell, { field, error, children: /* @__PURE__ */ jsx3(
+function LongText({ field, value, error, setValue, ids: providedIds }) {
+  const ids = useFilloFieldIds(field.id, providedIds);
+  return /* @__PURE__ */ jsx4(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx4(
     "textarea",
     {
-      id: `fillo-${field.id}`,
+      id: ids.inputId,
       className: "fillo-input fillo-textarea",
       rows: 4,
       value: typeof value === "string" ? value : "",
       placeholder: field.placeholder,
       onChange: (e) => setValue(e.target.value),
-      ...fieldAria(field, error)
+      ...fieldAria(field, error, ids)
     }
   ) });
 }
 function useDisplayOptions(choice) {
   const idsKey = choice.options.map((o) => o.id).join("\0");
-  const [order, setOrder] = useState4(null);
-  useEffect5(() => {
+  const [order, setOrder] = useState5(null);
+  useEffect6(() => {
     if (!choice.shuffleOptions) return;
     const ids = idsKey === "" ? [] : idsKey.split("\0");
     for (let i = ids.length - 1; i > 0; i--) {
@@ -463,32 +810,54 @@ function useDisplayOptions(choice) {
   const shuffled = order.flatMap((id) => byId.get(id) ?? []);
   return shuffled.length === choice.options.length ? shuffled : choice.options;
 }
-function SingleChoice({ field, value, error, setValue }) {
+var OPTION_ICON_PATHS = {
+  thumbs_up: "M7 10v10M7 10l4.8-6.1a2 2 0 0 1 3.5 1.7L14.6 10h4.8a2.1 2.1 0 0 1 2 2.5l-1.1 5.4A3 3 0 0 1 17.4 20H7M3 10h4v10H3z",
+  thumbs_down: "M7 14V4M7 14l4.8 6.1a2 2 0 0 0 3.5-1.7L14.6 14h4.8a2.1 2.1 0 0 0 2-2.5l-1.1-5.4A3 3 0 0 0 17.4 4H7M3 4h4v10H3z"
+};
+function ChoiceIcon({ icon }) {
+  if (!icon) return null;
+  return /* @__PURE__ */ jsx4(
+    "svg",
+    {
+      className: "fillo-option-icon",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx4("path", { d: OPTION_ICON_PATHS[icon] })
+    }
+  );
+}
+function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
+  const ids = useFilloFieldIds(field.id, providedIds);
   const choice = field;
   const options = useDisplayOptions(choice);
   const isOtherValue = typeof value === "string" && value !== "" && !choice.options.some((o) => o.id === value);
-  const [otherOn, setOtherOn] = useState4(isOtherValue);
-  const otherActive = otherOn || isOtherValue;
-  return /* @__PURE__ */ jsx3(FieldShell, { field, error, children: /* @__PURE__ */ jsxs3(
+  const [otherOn, setOtherOn] = useState5(isOtherValue);
+  const otherActive = isOtherValue || value === "" && otherOn;
+  return /* @__PURE__ */ jsx4(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsxs4(
     "div",
     {
       className: "fillo-options",
       role: "radiogroup",
-      "aria-labelledby": `fillo-${field.id}-label`,
-      ...fieldAria(field, error),
+      "aria-labelledby": ids.labelId,
+      ...fieldAria(field, error, ids),
       children: [
-        options.map((opt) => /* @__PURE__ */ jsxs3(
+        options.map((opt) => /* @__PURE__ */ jsxs4(
           "label",
           {
             "data-option": opt.id,
-            className: `fillo-option${value === opt.id ? " fillo-option--selected" : ""}`,
+            className: `fillo-option${opt.icon ? " fillo-option--has-icon" : ""}${value === opt.id ? " fillo-option--selected" : ""}`,
             children: [
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(
                 "input",
                 {
                   type: "radio",
                   className: "fillo-option-input",
-                  name: `fillo-${field.id}`,
+                  name: ids.name,
                   checked: value === opt.id,
                   onChange: () => {
                     setOtherOn(false);
@@ -496,66 +865,79 @@ function SingleChoice({ field, value, error, setValue }) {
                   }
                 }
               ),
-              /* @__PURE__ */ jsx3("span", { className: "fillo-option-label", children: opt.label })
+              /* @__PURE__ */ jsx4(ChoiceIcon, { icon: opt.icon }),
+              /* @__PURE__ */ jsx4("span", { className: "fillo-option-label", children: opt.label })
             ]
           },
           opt.id
         )),
-        choice.allowOther && /* @__PURE__ */ jsxs3("label", { className: `fillo-option${otherActive ? " fillo-option--selected" : ""}`, children: [
-          /* @__PURE__ */ jsx3(
-            "input",
-            {
-              type: "radio",
-              className: "fillo-option-input",
-              name: `fillo-${field.id}`,
-              checked: otherActive,
-              onChange: () => {
-                setOtherOn(true);
-                setValue("");
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx3("span", { className: "fillo-option-label", children: "Other" }),
-          otherActive && /* @__PURE__ */ jsx3(
-            "input",
-            {
-              type: "text",
-              className: "fillo-input fillo-other-input",
-              placeholder: "Your answer",
-              autoFocus: !isOtherValue,
-              value: isOtherValue ? String(value) : "",
-              onChange: (e) => setValue(e.target.value)
-            }
-          )
-        ] })
+        choice.allowOther && // A <div>, not a <label>, so editing the free-text input below can't
+        // toggle the radio. The radio + "Other" text keep their own <label>.
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: `fillo-option fillo-option--other${otherActive ? " fillo-option--selected fillo-option--with-other" : ""}`,
+            children: [
+              /* @__PURE__ */ jsxs4("label", { className: "fillo-option-main", children: [
+                /* @__PURE__ */ jsx4(
+                  "input",
+                  {
+                    type: "radio",
+                    className: "fillo-option-input",
+                    name: ids.name,
+                    checked: otherActive,
+                    onChange: () => {
+                      setOtherOn(true);
+                      setValue("");
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx4("span", { className: "fillo-option-label", children: "Other" })
+              ] }),
+              otherActive && /* @__PURE__ */ jsx4(
+                "input",
+                {
+                  type: "text",
+                  className: "fillo-input fillo-other-input",
+                  "aria-label": "Other \u2014 please specify",
+                  placeholder: "Your answer",
+                  autoFocus: !isOtherValue,
+                  value: isOtherValue ? String(value) : "",
+                  onChange: (e) => setValue(e.target.value)
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   ) });
 }
-function MultiChoice({ field, value, error, setValue }) {
+function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
+  const ids = useFilloFieldIds(field.id, providedIds);
   const choice = field;
   const options = useDisplayOptions(choice);
-  const ids = new Set(choice.options.map((o) => o.id));
+  const optionIds = new Set(choice.options.map((o) => o.id));
   const selected = Array.isArray(value) ? value : [];
-  const otherText = selected.find((v) => !ids.has(v));
-  const [otherOn, setOtherOn] = useState4(otherText !== void 0);
-  const otherActive = otherOn || otherText !== void 0;
+  const otherText = selected.find((v) => !optionIds.has(v));
+  const [otherOn, setOtherOn] = useState5(otherText !== void 0);
+  const otherActive = otherText !== void 0 || otherOn;
   const toggle = (id) => setValue(selected.includes(id) ? selected.filter((v) => v !== id) : [...selected, id]);
-  return /* @__PURE__ */ jsx3(FieldShell, { field, error, children: /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsx4(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsxs4(
     "div",
     {
       className: "fillo-options",
       role: "group",
-      "aria-labelledby": `fillo-${field.id}-label`,
-      ...fieldAria(field, error),
+      "aria-labelledby": ids.labelId,
+      ...fieldAria(field, error, ids),
       children: [
-        options.map((opt) => /* @__PURE__ */ jsxs3(
+        options.map((opt) => /* @__PURE__ */ jsxs4(
           "label",
           {
             "data-option": opt.id,
-            className: `fillo-option${selected.includes(opt.id) ? " fillo-option--selected" : ""}`,
+            className: `fillo-option${opt.icon ? " fillo-option--has-icon" : ""}${selected.includes(opt.id) ? " fillo-option--selected" : ""}`,
             children: [
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(
                 "input",
                 {
                   type: "checkbox",
@@ -564,84 +946,101 @@ function MultiChoice({ field, value, error, setValue }) {
                   onChange: () => toggle(opt.id)
                 }
               ),
-              /* @__PURE__ */ jsx3("span", { className: "fillo-option-label", children: opt.label })
+              /* @__PURE__ */ jsx4(ChoiceIcon, { icon: opt.icon }),
+              /* @__PURE__ */ jsx4("span", { className: "fillo-option-label", children: opt.label })
             ]
           },
           opt.id
         )),
-        choice.allowOther && /* @__PURE__ */ jsxs3("label", { className: `fillo-option${otherActive ? " fillo-option--selected" : ""}`, children: [
-          /* @__PURE__ */ jsx3(
-            "input",
-            {
-              type: "checkbox",
-              className: "fillo-option-input",
-              checked: otherActive,
-              onChange: () => {
-                if (otherActive) {
-                  setOtherOn(false);
-                  setValue(selected.filter((v) => ids.has(v)));
-                } else {
-                  setOtherOn(true);
+        choice.allowOther && // A <div>, not a <label>, so editing the free-text input below can't
+        // toggle the checkbox. The checkbox + "Other" text keep their own <label>.
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: `fillo-option fillo-option--other${otherActive ? " fillo-option--selected fillo-option--with-other" : ""}`,
+            children: [
+              /* @__PURE__ */ jsxs4("label", { className: "fillo-option-main", children: [
+                /* @__PURE__ */ jsx4(
+                  "input",
+                  {
+                    type: "checkbox",
+                    className: "fillo-option-input",
+                    checked: otherActive,
+                    onChange: () => {
+                      if (otherActive) {
+                        setOtherOn(false);
+                        setValue(selected.filter((v) => optionIds.has(v)));
+                      } else {
+                        setOtherOn(true);
+                      }
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx4("span", { className: "fillo-option-label", children: "Other" })
+              ] }),
+              otherActive && /* @__PURE__ */ jsx4(
+                "input",
+                {
+                  type: "text",
+                  className: "fillo-input fillo-other-input",
+                  "aria-label": "Other \u2014 please specify",
+                  placeholder: "Your answer",
+                  autoFocus: otherText === void 0,
+                  value: otherText ?? "",
+                  onChange: (e) => {
+                    const rest = selected.filter((v) => optionIds.has(v));
+                    setValue(e.target.value ? [...rest, e.target.value] : rest);
+                  }
                 }
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx3("span", { className: "fillo-option-label", children: "Other" }),
-          otherActive && /* @__PURE__ */ jsx3(
-            "input",
-            {
-              type: "text",
-              className: "fillo-input fillo-other-input",
-              placeholder: "Your answer",
-              autoFocus: otherText === void 0,
-              value: otherText ?? "",
-              onChange: (e) => {
-                const rest = selected.filter((v) => ids.has(v));
-                setValue(e.target.value ? [...rest, e.target.value] : rest);
-              }
-            }
-          )
-        ] })
+              )
+            ]
+          }
+        )
       ]
     }
   ) });
 }
 var OTHER_SENTINEL = "__fw_other__";
-function Dropdown({ field, value, error, setValue }) {
+function Dropdown({ field, value, error, setValue, ids: providedIds }) {
+  const ids = useFilloFieldIds(field.id, providedIds);
   const choice = field;
   const options = useDisplayOptions(choice);
   const isOtherValue = typeof value === "string" && value !== "" && !choice.options.some((o) => o.id === value);
-  const [otherOn, setOtherOn] = useState4(isOtherValue);
-  const otherActive = otherOn || isOtherValue;
-  return /* @__PURE__ */ jsxs3(FieldShell, { field, error, children: [
-    /* @__PURE__ */ jsxs3(
-      "select",
-      {
-        id: `fillo-${field.id}`,
-        className: "fillo-input fillo-select",
-        ...fieldAria(field, error),
-        value: otherActive ? OTHER_SENTINEL : typeof value === "string" ? value : "",
-        onChange: (e) => {
-          if (e.target.value === OTHER_SENTINEL) {
-            setOtherOn(true);
-            setValue("");
-          } else {
-            setOtherOn(false);
-            setValue(e.target.value || null);
-          }
-        },
-        children: [
-          /* @__PURE__ */ jsx3("option", { value: "", children: field.placeholder ?? "Choose\u2026" }),
-          options.map((opt) => /* @__PURE__ */ jsx3("option", { value: opt.id, children: opt.label }, opt.id)),
-          choice.allowOther && /* @__PURE__ */ jsx3("option", { value: OTHER_SENTINEL, children: "Other\u2026" })
-        ]
-      }
-    ),
-    otherActive && /* @__PURE__ */ jsx3(
+  const [otherOn, setOtherOn] = useState5(isOtherValue);
+  const otherActive = isOtherValue || value === "" && otherOn;
+  return /* @__PURE__ */ jsxs4(FieldShell, { field, error, ids, children: [
+    /* @__PURE__ */ jsxs4("div", { className: "fillo-select-wrap", children: [
+      /* @__PURE__ */ jsxs4(
+        "select",
+        {
+          id: ids.inputId,
+          className: "fillo-input fillo-select",
+          ...fieldAria(field, error, ids),
+          value: otherActive ? OTHER_SENTINEL : typeof value === "string" ? value : "",
+          onChange: (e) => {
+            if (e.target.value === OTHER_SENTINEL) {
+              setOtherOn(true);
+              setValue("");
+            } else {
+              setOtherOn(false);
+              setValue(e.target.value || null);
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx4("option", { value: "", children: field.placeholder ?? "Choose\u2026" }),
+            options.map((opt) => /* @__PURE__ */ jsx4("option", { value: opt.id, children: opt.label }, opt.id)),
+            choice.allowOther && /* @__PURE__ */ jsx4("option", { value: OTHER_SENTINEL, children: "Other\u2026" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx4("span", { className: "fillo-select-icon", "aria-hidden": "true" })
+    ] }),
+    otherActive && /* @__PURE__ */ jsx4(
       "input",
       {
         type: "text",
         className: "fillo-input fillo-other-input fillo-other-input--block",
+        "aria-label": "Other \u2014 please specify",
         placeholder: "Your answer",
         autoFocus: !isOtherValue,
         value: isOtherValue ? String(value) : "",
@@ -650,76 +1049,180 @@ function Dropdown({ field, value, error, setValue }) {
     )
   ] });
 }
-function Checkbox({ field, value, error, setValue }) {
-  return /* @__PURE__ */ jsxs3(
+function Checkbox({ field, value, error, setValue, ids: providedIds }) {
+  const ids = useFilloFieldIds(field.id, providedIds);
+  const checkbox = field;
+  if (checkbox.appearance === "toggle") {
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: `fillo-field fillo-field--checkbox fillo-field--toggle${error ? " fillo-field--error" : ""}`,
+        "data-field": field.id,
+        children: [
+          /* @__PURE__ */ jsxs4("label", { className: "fillo-toggle", children: [
+            /* @__PURE__ */ jsx4("span", { className: "fillo-toggle-copy", children: /* @__PURE__ */ jsxs4("span", { className: "fillo-option-label", children: [
+              field.label,
+              !field.required && /* @__PURE__ */ jsx4("span", { className: "fillo-optional", children: " (optional)" })
+            ] }) }),
+            /* @__PURE__ */ jsx4(
+              "input",
+              {
+                id: ids.inputId,
+                type: "checkbox",
+                role: "switch",
+                className: "fillo-toggle-input",
+                checked: value === true,
+                onChange: (e) => setValue(e.target.checked),
+                "aria-checked": value === true,
+                ...fieldAria(field, error, ids)
+              }
+            ),
+            /* @__PURE__ */ jsx4("span", { className: "fillo-toggle-track", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("span", { className: "fillo-toggle-thumb" }) })
+          ] }),
+          field.description && /* @__PURE__ */ jsx4("p", { className: "fillo-description", id: ids.descriptionId, children: field.description }),
+          error && /* @__PURE__ */ jsx4("p", { className: "fillo-error", id: ids.errorId, role: "alert", children: error })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: `fillo-field fillo-field--checkbox${error ? " fillo-field--error" : ""}`,
       "data-field": field.id,
       children: [
-        /* @__PURE__ */ jsxs3("label", { className: "fillo-option", children: [
-          /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsxs4("label", { className: "fillo-option", children: [
+          /* @__PURE__ */ jsx4(
             "input",
             {
-              id: `fillo-${field.id}`,
+              id: ids.inputId,
               type: "checkbox",
               className: "fillo-option-input",
               checked: value === true,
               onChange: (e) => setValue(e.target.checked),
-              ...fieldAria(field, error)
+              ...fieldAria(field, error, ids)
             }
           ),
-          /* @__PURE__ */ jsxs3("span", { className: "fillo-option-label", children: [
+          /* @__PURE__ */ jsxs4("span", { className: "fillo-option-label", children: [
             field.label,
-            !field.required && /* @__PURE__ */ jsx3("span", { className: "fillo-optional", children: " (optional)" })
+            !field.required && /* @__PURE__ */ jsx4("span", { className: "fillo-optional", children: " (optional)" })
           ] })
         ] }),
-        field.description && /* @__PURE__ */ jsx3("p", { className: "fillo-description", id: `fillo-${field.id}-desc`, children: field.description }),
-        error && /* @__PURE__ */ jsx3("p", { className: "fillo-error", id: `fillo-${field.id}-error`, role: "alert", children: error })
+        field.description && /* @__PURE__ */ jsx4("p", { className: "fillo-description", id: ids.descriptionId, children: field.description }),
+        error && /* @__PURE__ */ jsx4("p", { className: "fillo-error", id: ids.errorId, role: "alert", children: error })
       ]
     }
   );
 }
-function Rating({ field, value, error, setValue }) {
+function radiogroupKeyDown(e, steps, current, setValue) {
+  const forward = e.key === "ArrowRight" || e.key === "ArrowDown";
+  const backward = e.key === "ArrowLeft" || e.key === "ArrowUp";
+  if (!forward && !backward) return;
+  e.preventDefault();
+  const index = current == null ? -1 : steps.indexOf(current);
+  let next;
+  if (index === -1) {
+    next = forward ? 0 : steps.length - 1;
+  } else {
+    next = forward ? index + 1 : index - 1;
+    next = (next + steps.length) % steps.length;
+  }
+  const value = steps[next];
+  if (value === void 0) return;
+  setValue(value);
+  const group = e.currentTarget;
+  const buttons = group.querySelectorAll('[role="radio"]');
+  buttons[next]?.focus();
+}
+function rovingIndex(steps, current) {
+  if (current == null) return 0;
+  const i = steps.indexOf(current);
+  return i === -1 ? 0 : i;
+}
+function Rating({ field, value, error, setValue, ids: providedIds }) {
+  const ids = useFilloFieldIds(field.id, providedIds);
   const max = field.max ?? 5;
   const current = typeof value === "number" ? value : 0;
-  return /* @__PURE__ */ jsx3(FieldShell, { field, error, children: /* @__PURE__ */ jsx3("div", { className: "fillo-rating", role: "radiogroup", "aria-label": field.label, ...fieldAria(field, error), children: Array.from({ length: max }, (_, i) => i + 1).map((n) => /* @__PURE__ */ jsx3(
-    "button",
+  const steps = Array.from({ length: max }, (_, i) => i + 1);
+  const selected = current > 0 ? current : null;
+  const tabbable = rovingIndex(steps, selected);
+  return /* @__PURE__ */ jsx4(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx4(
+    "div",
     {
-      type: "button",
-      className: `fillo-star${n <= current ? " fillo-star--active" : ""}`,
-      "aria-label": `${n} of ${max}`,
-      "aria-pressed": n === current,
-      onClick: () => setValue(n === current ? null : n),
-      children: "\u2605"
-    },
-    n
-  )) }) });
+      className: "fillo-rating",
+      role: "radiogroup",
+      "aria-labelledby": ids.labelId,
+      ...fieldAria(field, error, ids),
+      onKeyDown: (e) => radiogroupKeyDown(e, steps, selected, (n) => setValue(n)),
+      children: steps.map((n, i) => /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: `fillo-star${n <= current ? " fillo-star--active" : ""}`,
+          role: "radio",
+          "aria-label": `${n} of ${max}`,
+          "aria-checked": n === current,
+          tabIndex: i === tabbable ? 0 : -1,
+          onClick: () => setValue(n === current ? null : n),
+          children: "\u2605"
+        },
+        n
+      ))
+    }
+  ) });
 }
-function LinearScale({ field, value, error, setValue }) {
+function LinearScale({ field, value, error, setValue, ids: providedIds }) {
+  const ids = useFilloFieldIds(field.id, providedIds);
   const scale = field;
   const min = scale.min ?? 1;
   const max = scale.max ?? 10;
   const steps = Array.from({ length: max - min + 1 }, (_, i) => min + i);
-  return /* @__PURE__ */ jsxs3(FieldShell, { field, error, children: [
-    /* @__PURE__ */ jsx3("div", { className: "fillo-scale", role: "radiogroup", "aria-label": field.label, ...fieldAria(field, error), children: steps.map((n) => /* @__PURE__ */ jsx3(
-      "button",
+  const current = typeof value === "number" ? value : null;
+  const tabbable = rovingIndex(steps, current);
+  const hasLabels = Boolean(scale.minLabel || scale.maxLabel);
+  const minLabelId = `${ids.inputId}-min`;
+  const maxLabelId = `${ids.inputId}-max`;
+  const describedBy = [
+    scale.minLabel ? minLabelId : null,
+    scale.maxLabel ? maxLabelId : null,
+    field.description ? ids.descriptionId : null,
+    error ? ids.errorId : null
+  ].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxs4(FieldShell, { field, error, ids, children: [
+    /* @__PURE__ */ jsx4(
+      "div",
       {
-        type: "button",
-        className: `fillo-scale-step${value === n ? " fillo-scale-step--active" : ""}`,
-        "aria-pressed": value === n,
-        onClick: () => setValue(value === n ? null : n),
-        children: n
-      },
-      n
-    )) }),
-    (scale.minLabel || scale.maxLabel) && /* @__PURE__ */ jsxs3("div", { className: "fillo-scale-labels", children: [
-      /* @__PURE__ */ jsx3("span", { children: scale.minLabel }),
-      /* @__PURE__ */ jsx3("span", { children: scale.maxLabel })
+        className: "fillo-scale",
+        role: "radiogroup",
+        "aria-labelledby": ids.labelId,
+        "aria-invalid": error ? true : void 0,
+        "aria-required": field.required ? true : void 0,
+        "aria-describedby": describedBy,
+        onKeyDown: (e) => radiogroupKeyDown(e, steps, current, (n) => setValue(n)),
+        children: steps.map((n, i) => /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            className: `fillo-scale-step${value === n ? " fillo-scale-step--active" : ""}`,
+            role: "radio",
+            "aria-label": String(n),
+            "aria-checked": value === n,
+            tabIndex: i === tabbable ? 0 : -1,
+            onClick: () => setValue(value === n ? null : n),
+            children: n
+          },
+          n
+        ))
+      }
+    ),
+    hasLabels && /* @__PURE__ */ jsxs4("div", { className: "fillo-scale-labels", children: [
+      /* @__PURE__ */ jsx4("span", { id: minLabelId, children: scale.minLabel }),
+      /* @__PURE__ */ jsx4("span", { id: maxLabelId, children: scale.maxLabel })
     ] })
   ] });
 }
-function Ranking({ field, value, error, setValue }) {
+function Ranking({ field, value, error, setValue, ids: providedIds }) {
+  const ids = useFilloFieldIds(field.id, providedIds);
   const ranking = field;
   const answered = Array.isArray(value) ? value : [];
   const order = [
@@ -734,14 +1237,14 @@ function Ranking({ field, value, error, setValue }) {
     [next[index], next[target]] = [next[target], next[index]];
     setValue(next);
   }
-  return /* @__PURE__ */ jsx3(FieldShell, { field, error, children: /* @__PURE__ */ jsx3("ol", { className: "fillo-ranking", children: order.map((id, index) => {
+  return /* @__PURE__ */ jsx4(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx4("ol", { className: "fillo-ranking", children: order.map((id, index) => {
     const option = ranking.options.find((o) => o.id === id);
     if (!option) return null;
-    return /* @__PURE__ */ jsxs3("li", { className: "fillo-ranking-item", children: [
-      /* @__PURE__ */ jsx3("span", { className: "fillo-ranking-index", children: index + 1 }),
-      /* @__PURE__ */ jsx3("span", { className: "fillo-ranking-label", children: option.label }),
-      /* @__PURE__ */ jsxs3("span", { className: "fillo-ranking-controls", children: [
-        /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsxs4("li", { className: "fillo-ranking-item", children: [
+      /* @__PURE__ */ jsx4("span", { className: "fillo-ranking-index", children: index + 1 }),
+      /* @__PURE__ */ jsx4("span", { className: "fillo-ranking-label", children: option.label }),
+      /* @__PURE__ */ jsxs4("span", { className: "fillo-ranking-controls", children: [
+        /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
@@ -752,7 +1255,7 @@ function Ranking({ field, value, error, setValue }) {
             children: "\u2191"
           }
         ),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
@@ -767,28 +1270,39 @@ function Ranking({ field, value, error, setValue }) {
     ] }, id);
   }) }) });
 }
-function Matrix({ field, value, error, setValue }) {
+function Matrix({ field, value, error, setValue, ids: providedIds }) {
+  const ids = useFilloFieldIds(field.id, providedIds);
   const matrix = field;
   const answers = value && typeof value === "object" && !Array.isArray(value) ? value : {};
-  return /* @__PURE__ */ jsx3(FieldShell, { field, error, children: /* @__PURE__ */ jsx3("div", { className: "fillo-matrix-wrap", children: /* @__PURE__ */ jsxs3("table", { className: "fillo-matrix", children: [
-    /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsxs3("tr", { children: [
-      /* @__PURE__ */ jsx3("th", {}),
-      matrix.columns.map((col) => /* @__PURE__ */ jsx3("th", { scope: "col", children: col.label }, col.id))
+  return /* @__PURE__ */ jsx4(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx4("div", { className: "fillo-matrix-wrap", children: /* @__PURE__ */ jsxs4("table", { className: "fillo-matrix", children: [
+    /* @__PURE__ */ jsx4("thead", { children: /* @__PURE__ */ jsxs4("tr", { children: [
+      /* @__PURE__ */ jsx4("th", {}),
+      matrix.columns.map((col) => /* @__PURE__ */ jsx4("th", { scope: "col", children: col.label }, col.id))
     ] }) }),
-    /* @__PURE__ */ jsx3("tbody", { children: matrix.rows.map((row) => /* @__PURE__ */ jsxs3("tr", { children: [
-      /* @__PURE__ */ jsx3("th", { scope: "row", children: row.label }),
-      matrix.columns.map((col) => /* @__PURE__ */ jsx3("td", { children: /* @__PURE__ */ jsx3(
-        "input",
-        {
-          type: "radio",
-          className: "fillo-option-input",
-          name: `fillo-${field.id}-${row.id}`,
-          "aria-label": `${row.label}: ${col.label}`,
-          checked: answers[row.id] === col.id,
-          onChange: () => setValue({ ...answers, [row.id]: col.id })
-        }
-      ) }, col.id))
-    ] }, row.id)) })
+    /* @__PURE__ */ jsx4("tbody", { children: matrix.rows.map((row) => {
+      const rowLabelId = `${ids.inputId}-${row.id}`;
+      const answered = answers[row.id] !== void 0;
+      const rowInvalid = Boolean(error) && field.required && !answered;
+      return (
+        // Each row is its own radiogroup, labelled by the row question.
+        /* @__PURE__ */ jsxs4("tr", { role: "radiogroup", "aria-labelledby": rowLabelId, children: [
+          /* @__PURE__ */ jsx4("th", { scope: "row", id: rowLabelId, children: row.label }),
+          matrix.columns.map((col) => /* @__PURE__ */ jsx4("td", { children: /* @__PURE__ */ jsx4(
+            "input",
+            {
+              type: "radio",
+              className: "fillo-option-input",
+              name: `${ids.name}-${row.id}`,
+              "aria-label": `${row.label}: ${col.label}`,
+              "aria-required": field.required ? true : void 0,
+              "aria-invalid": rowInvalid ? true : void 0,
+              checked: answers[row.id] === col.id,
+              onChange: () => setValue({ ...answers, [row.id]: col.id })
+            }
+          ) }, col.id))
+        ] }, row.id)
+      );
+    }) })
   ] }) }) });
 }
 function Hidden() {
@@ -798,7 +1312,7 @@ var DEFAULT_COMPONENTS = {
   short_text: TextInput,
   email: TextInput,
   url: TextInput,
-  phone: TextInput,
+  phone: PhoneField,
   number: TextInput,
   date: TextInput,
   long_text: LongText,
@@ -817,21 +1331,66 @@ var DEFAULT_COMPONENTS = {
 function ContentRenderer({ block }) {
   switch (block.kind) {
     case "heading":
-      return /* @__PURE__ */ jsx3("h3", { className: "fillo-heading", children: block.text });
+      return /* @__PURE__ */ jsx4("h3", { className: "fillo-heading", children: block.text });
     case "paragraph":
-      return /* @__PURE__ */ jsx3("p", { className: "fillo-paragraph", children: block.text });
+      return /* @__PURE__ */ jsx4("p", { className: "fillo-paragraph", children: block.text });
     case "divider":
-      return /* @__PURE__ */ jsx3("hr", { className: "fillo-divider" });
+      return /* @__PURE__ */ jsx4("hr", { className: "fillo-divider" });
   }
 }
-function BlockRenderer({
-  block,
-  api,
-  components,
-  customComponents
-}) {
+function shouldAutoSubmit(field, value, api) {
+  if (api.form.settings.submitMode !== "auto") return false;
+  if (!api.isLastPage || api.status !== "idle" || api.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;
+  if (value === api.data[field.id]) return false;
+  return validateResponse(api.form, { ...api.data, [field.id]: value }).ok;
+}
+function blockHasPiping(block) {
+  const has = (s) => typeof s === "string" && s.includes("{{");
+  switch (block.kind) {
+    case "heading":
+    case "paragraph":
+      return has(block.text);
+    case "divider":
+      return false;
+    default:
+      return has(block.label) || has(block.description);
+  }
+}
+function blockPropsEqual(prev, next) {
+  if (prev.block !== next.block || prev.components !== next.components || prev.customComponents !== next.customComponents) {
+    return false;
+  }
+  const id = next.block.id;
+  if (prev.api.data[id] !== next.api.data[id]) return false;
+  if (prev.api.errors[id] !== next.api.errors[id]) return false;
+  const needsWiderState = next.block.kind === "custom" || blockHasPiping(prev.block) || blockHasPiping(next.block);
+  if (needsWiderState && prev.api.data !== next.api.data) return false;
+  if (next.api.form.settings.submitMode === "auto") {
+    if (prev.api.data !== next.api.data || prev.api.status !== next.api.status || prev.api.uploading !== next.api.uploading || prev.api.isLastPage !== next.api.isLastPage) {
+      return false;
+    }
+  }
+  return true;
+}
+function BlockRendererInner({ block, api, components, customComponents }) {
   block = pipeBlock(block, api.data, api.form);
-  if (!isField(block)) return /* @__PURE__ */ jsx3(ContentRenderer, { block });
+  const ids = useFilloFieldIds(block.id);
+  if (!isField(block)) return /* @__PURE__ */ jsx4(ContentRenderer, { block });
   let Component;
   if (block.kind === "custom") {
     Component = customComponents?.[block.component] ?? components?.custom;
@@ -847,17 +1406,22 @@ function BlockRenderer({
   } else {
     Component = components?.[block.kind] ?? DEFAULT_COMPONENTS[block.kind];
   }
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     Component,
     {
       field: block,
       value: api.data[block.id],
       error: api.errors[block.id],
-      setValue: (v) => api.setValue(block.id, v),
-      api
+      setValue: (v) => {
+        api.setValue(block.id, v);
+        if (shouldAutoSubmit(block, v, api)) void api.submit();
+      },
+      api,
+      ids
     }
   );
 }
+var BlockRenderer = memo(BlockRendererInner, blockPropsEqual);
 function FormField({
   id,
   components,
@@ -866,7 +1430,7 @@ function FormField({
   const api = useFillo();
   const block = api.form.pages.flatMap((p) => p.blocks).find((b) => b.id === id);
   if (!block) return null;
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     BlockRenderer,
     {
       block,
@@ -878,34 +1442,70 @@ function FormField({
 }
 
 // src/FilloForm.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function themeStyle(theme) {
-  if (!theme) return void 0;
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function themeProps(theme) {
+  const safeTheme = normalizeFormTheme(theme);
+  if (!safeTheme) return {};
   const style = {};
-  if (theme.primary) style["--fillo-primary"] = theme.primary;
-  if (theme.background) style["--fillo-bg"] = theme.background;
-  if (theme.text) style["--fillo-text"] = theme.text;
-  if (theme.radius) style["--fillo-radius"] = theme.radius;
-  if (theme.fontFamily) style["--fillo-font"] = theme.fontFamily;
-  return style;
+  if (safeTheme.primary) style["--fillo-primary"] = safeTheme.primary;
+  if (safeTheme.background) style["--fillo-bg"] = safeTheme.background;
+  if (safeTheme.text) style["--fillo-text"] = safeTheme.text;
+  if (safeTheme.radius) style["--fillo-radius"] = safeTheme.radius;
+  if (safeTheme.fontFamily) style["--fillo-font"] = safeTheme.fontFamily;
+  const hasColorTheme = Boolean(safeTheme.primary || safeTheme.background || safeTheme.text);
+  return {
+    ...Object.keys(style).length ? { style } : {},
+    ...safeTheme.colorScheme ? { "data-fillo-color-scheme": safeTheme.colorScheme } : {},
+    ...hasColorTheme ? { "data-fillo-has-color-theme": "" } : {}
+  };
+}
+function safeHttpUrl(href) {
+  try {
+    if (!href) return null;
+    const url = new URL(href);
+    if (url.protocol !== "http:" && url.protocol !== "https:") return null;
+    return url.toString();
+  } catch {
+    return null;
+  }
+}
+function badgeUrl(href) {
+  const url = new URL(safeHttpUrl(href) ?? "https://fillo.so");
+  url.searchParams.set("utm_source", "form_badge");
+  return url.toString();
+}
+function focusFirstInvalid(formEl) {
+  if (!formEl || typeof window === "undefined") return;
+  const run = () => {
+    const target = formEl.querySelector('[aria-invalid="true"]');
+    target?.focus?.();
+  };
+  if (typeof requestAnimationFrame === "function") requestAnimationFrame(run);
+  else setTimeout(run, 0);
+}
+function isAutoSubmitBlock(block) {
+  return isField2(block) && (block.kind === "select" || block.kind === "dropdown" || block.kind === "checkbox" || block.kind === "rating" || block.kind === "linear_scale");
+}
+function needsExplicitSubmit(blocks) {
+  return blocks.some((block) => isField2(block) && block.kind !== "hidden" && !isAutoSubmitBlock(block));
 }
 function FilloForm(props) {
   const { form, formId } = props;
-  const client = useMemo(
+  const client = useMemo4(
     () => props.client ?? (formId ? createClient() : void 0),
     [props.client, formId]
   );
-  const [fetched, setFetched] = useState5(null);
-  const [fetchedTheme, setFetchedTheme] = useState5(null);
-  const [loadError, setLoadError] = useState5(null);
-  const [closed, setClosed] = useState5(false);
-  const [fetchedBranding, setFetchedBranding] = useState5(null);
+  const [fetched, setFetched] = useState6(null);
+  const [fetchedTheme, setFetchedTheme] = useState6(null);
+  const [loadError, setLoadError] = useState6(null);
+  const [closed, setClosed] = useState6(false);
+  const [fetchedBranding, setFetchedBranding] = useState6(null);
   const codeForm = isCodeForm2(form) ? form : null;
   const inlineSchema = codeForm ? codeForm.schema : form;
   const onError = props.onError;
   const syncedFormId = useCodeFormSync(form, client, onError);
   const needsFetch = !inlineSchema && Boolean(client && formId);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!needsFetch || !client || !formId) return;
     let cancelled = false;
     setFetched(null);
@@ -926,35 +1526,42 @@ function FilloForm(props) {
       cancelled = true;
     };
   }, [needsFetch, client, formId, onError]);
-  const schema = inlineSchema ?? fetched;
+  const rawSchema = inlineSchema ?? fetched;
+  const normalized = useMemo4(() => rawSchema ? normalizeFormSchema(rawSchema) : null, [rawSchema]);
+  const schema = normalized?.ok ? normalized.schema : null;
   const theme = props.theme ?? codeForm?.theme ?? fetchedTheme ?? void 0;
+  if (normalized && !normalized.ok) {
+    const error = new FilloError2(`This form could not be rendered: ${normalized.error}`, 422);
+    if (props.renderError) return /* @__PURE__ */ jsx5(Fragment2, { children: props.renderError(error) });
+    return /* @__PURE__ */ jsx5("div", { className: `fillo-form fillo-form--error ${props.className ?? ""}`, children: "This form could not be rendered." });
+  }
   if (loadError) {
     if (props.renderError) {
-      return /* @__PURE__ */ jsx4(Fragment2, { children: props.renderError(loadError) });
+      return /* @__PURE__ */ jsx5(Fragment2, { children: props.renderError(loadError) });
     }
     const message = loadError.status === 404 ? "Form not found \u2014 check the form id and that it's published." : loadError.status === 0 ? "Couldn't reach the server \u2014 check your connection or CORS." : "This form could not be loaded.";
-    return /* @__PURE__ */ jsx4("div", { className: `fillo-form fillo-form--error ${props.className ?? ""}`, children: message });
+    return /* @__PURE__ */ jsx5("div", { className: `fillo-form fillo-form--error ${props.className ?? ""}`, children: message });
   }
   if (closed) {
-    return /* @__PURE__ */ jsx4("div", { className: `fillo-form fillo-form--closed ${props.className ?? ""}`, style: themeStyle(theme), children: /* @__PURE__ */ jsx4("p", { className: "fillo-closed", children: "This form is no longer accepting responses." }) });
+    return /* @__PURE__ */ jsx5("div", { className: `fillo-form fillo-form--closed ${props.className ?? ""}`, ...themeProps(theme), children: /* @__PURE__ */ jsx5("p", { className: "fillo-closed", children: "This form is no longer accepting responses." }) });
   }
   if (!schema) {
-    return /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs5(
       "div",
       {
         className: `fillo-form fillo-form--loading ${props.className ?? ""}`,
         "aria-busy": "true",
-        style: themeStyle(theme),
+        ...themeProps(theme),
         children: [
-          /* @__PURE__ */ jsx4("div", { className: "fillo-skeleton" }),
-          /* @__PURE__ */ jsx4("div", { className: "fillo-skeleton" }),
-          /* @__PURE__ */ jsx4("div", { className: "fillo-skeleton fillo-skeleton--short" })
+          /* @__PURE__ */ jsx5("div", { className: "fillo-skeleton" }),
+          /* @__PURE__ */ jsx5("div", { className: "fillo-skeleton" }),
+          /* @__PURE__ */ jsx5("div", { className: "fillo-skeleton fillo-skeleton--short" })
         ]
       }
     );
   }
-  const poweredBy = props.skipValidation ? false : props.poweredBy ?? fetchedBranding?.poweredBy ?? true;
-  return /* @__PURE__ */ jsx4(
+  const poweredBy = fetchedBranding?.poweredBy ?? true;
+  return /* @__PURE__ */ jsx5(
     ResolvedForm,
     {
       ...props,
@@ -969,24 +1576,23 @@ function FilloForm(props) {
   );
 }
 function PoweredBy({ label, href }) {
-  const base = href ?? "https://fillo.so";
-  const url = `${base}${base.includes("?") ? "&" : "?"}utm_source=form_badge`;
-  return /* @__PURE__ */ jsx4("a", { className: "fillo-powered", href: url, target: "_blank", rel: "noopener", children: label ?? "Powered by Fillo" });
+  return /* @__PURE__ */ jsx5("a", { className: "fillo-powered", href: badgeUrl(href), target: "_blank", rel: "noopener noreferrer", children: label ?? "Powered by Fillo" });
 }
 function isDevEnv() {
   return typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
 }
 function DevNoClientNotice() {
-  return /* @__PURE__ */ jsxs4("div", { className: "fillo-devwarning", role: "alert", children: [
-    /* @__PURE__ */ jsx4("strong", { children: "No Fillo client connected." }),
+  return /* @__PURE__ */ jsxs5("div", { className: "fillo-devwarning", role: "alert", children: [
+    /* @__PURE__ */ jsx5("strong", { children: "No Fillo client connected." }),
     " This form is render-only and won\u2019t save responses. Pass a ",
-    /* @__PURE__ */ jsx4("code", { children: "client" }),
+    /* @__PURE__ */ jsx5("code", { children: "client" }),
     " to collect them in Fillo, or forward them with webhooks. (This notice only appears in development.)"
   ] });
 }
 function ResolvedForm(props) {
   const { schema, theme } = props;
-  const hpRef = useRef4("");
+  const instanceId = useId2().replace(/:/g, "");
+  const hpRef = useRef5("");
   const api = useFilloController({
     form: schema,
     formId: props.formId,
@@ -997,40 +1603,46 @@ function ResolvedForm(props) {
     skipValidation: props.skipValidation,
     getHoneypot: () => hpRef.current
   });
-  const style = useMemo(() => themeStyle(theme), [theme]);
+  const themed = useMemo4(() => themeProps(theme), [theme]);
   const settings = schema.settings;
   const submitted = api.status === "submitted";
-  useEffect6(() => {
+  useEffect7(() => {
     if (!submitted || !settings.redirectUrl || typeof window === "undefined") return;
-    if (/^https?:\/\//i.test(settings.redirectUrl)) {
-      window.location.assign(settings.redirectUrl);
-    }
+    const url = safeHttpUrl(settings.redirectUrl);
+    if (url) window.location.assign(url);
   }, [submitted, settings.redirectUrl]);
   if (api.status === "submitted") {
-    return /* @__PURE__ */ jsxs4("div", { className: `fillo-form fillo-form--success ${props.className ?? ""}`, style, children: [
-      props.renderSuccess ? props.renderSuccess() : /* @__PURE__ */ jsxs4("div", { className: "fillo-success", children: [
-        /* @__PURE__ */ jsx4("div", { className: "fillo-success-mark", "aria-hidden": "true", children: "\u2713" }),
-        /* @__PURE__ */ jsx4("h2", { className: "fillo-success-title", children: settings.successTitle ?? "Thanks!" }),
-        /* @__PURE__ */ jsx4("p", { className: "fillo-success-message", children: settings.successMessage ?? "Your response has been recorded." })
+    return /* @__PURE__ */ jsxs5("div", { className: `fillo-form fillo-form--success ${props.className ?? ""}`, ...themed, children: [
+      props.renderSuccess ? props.renderSuccess() : /* @__PURE__ */ jsxs5("div", { className: "fillo-success", children: [
+        /* @__PURE__ */ jsx5("div", { className: "fillo-success-mark", "aria-hidden": "true", children: "\u2713" }),
+        /* @__PURE__ */ jsx5("h2", { className: "fillo-success-title", children: settings.successTitle ?? "Thanks!" }),
+        /* @__PURE__ */ jsx5("p", { className: "fillo-success-message", children: settings.successMessage ?? "Your response has been recorded." })
       ] }),
-      props.poweredBy && /* @__PURE__ */ jsx4(PoweredBy, { label: props.brandLabel, href: props.brandHref })
+      props.poweredBy && /* @__PURE__ */ jsx5(PoweredBy, { label: props.brandLabel, href: props.brandHref })
     ] });
   }
   const multiPage = api.pageCount > 1;
-  return /* @__PURE__ */ jsx4(FilloContext.Provider, { value: api, children: /* @__PURE__ */ jsxs4(
+  const autoSubmit = settings.submitMode === "auto";
+  const showPrimaryButton = !autoSubmit || !api.isLastPage || needsExplicitSubmit(api.blocks);
+  const showFooter = showPrimaryButton || multiPage && !api.isFirstPage;
+  return /* @__PURE__ */ jsx5(FilloContext.Provider, { value: api, children: /* @__PURE__ */ jsx5(FilloInstanceIdContext.Provider, { value: instanceId, children: /* @__PURE__ */ jsxs5(
     "form",
     {
       className: `fillo-form ${props.className ?? ""}`,
-      style,
+      ...themed,
       noValidate: true,
       onSubmit: (e) => {
         e.preventDefault();
-        if (api.isLastPage) void api.submit();
-        else api.next();
+        const formEl = e.currentTarget;
+        if (api.isLastPage) void api.submit().then(() => focusFirstInvalid(formEl));
+        else {
+          api.next();
+          focusFirstInvalid(formEl);
+        }
       },
       children: [
-        !props.client && !props.skipValidation && isDevEnv() && /* @__PURE__ */ jsx4(DevNoClientNotice, {}),
-        multiPage && settings.showProgress !== false && /* @__PURE__ */ jsx4(
+        !props.client && !props.skipValidation && isDevEnv() && /* @__PURE__ */ jsx5(DevNoClientNotice, {}),
+        multiPage && settings.showProgress !== false && /* @__PURE__ */ jsx5(
           "div",
           {
             className: "fillo-progress-track",
@@ -1038,7 +1650,7 @@ function ResolvedForm(props) {
             "aria-valuemin": 0,
             "aria-valuemax": api.pageCount,
             "aria-valuenow": api.pageIndex + 1,
-            children: /* @__PURE__ */ jsx4(
+            children: /* @__PURE__ */ jsx5(
               "div",
               {
                 className: "fillo-progress-fill",
@@ -1047,12 +1659,12 @@ function ResolvedForm(props) {
             )
           }
         ),
-        api.pageIndex === 0 && props.showTitle !== false && /* @__PURE__ */ jsxs4("header", { className: "fillo-header", children: [
-          /* @__PURE__ */ jsx4("h1", { className: "fillo-title", children: schema.title }),
-          schema.description && /* @__PURE__ */ jsx4("p", { className: "fillo-form-description", children: schema.description })
+        api.pageIndex === 0 && props.showTitle !== false && /* @__PURE__ */ jsxs5("header", { className: "fillo-header", children: [
+          /* @__PURE__ */ jsx5("h1", { className: "fillo-title", children: schema.title }),
+          schema.description && /* @__PURE__ */ jsx5("p", { className: "fillo-form-description", children: schema.description })
         ] }),
-        multiPage && api.page.title && api.pageIndex > 0 && /* @__PURE__ */ jsx4("h2", { className: "fillo-page-title", children: api.page.title }),
-        /* @__PURE__ */ jsx4("div", { className: "fillo-blocks", children: api.blocks.map((block) => /* @__PURE__ */ jsx4(
+        multiPage && api.page.title && api.pageIndex > 0 && /* @__PURE__ */ jsx5("h2", { className: "fillo-page-title", children: api.page.title }),
+        /* @__PURE__ */ jsx5("div", { className: "fillo-blocks", children: api.blocks.map((block) => /* @__PURE__ */ jsx5(
           BlockRenderer,
           {
             block,
@@ -1062,7 +1674,7 @@ function ResolvedForm(props) {
           },
           block.id
         )) }),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "input",
           {
             type: "text",
@@ -1077,9 +1689,10 @@ function ResolvedForm(props) {
             }
           }
         ),
-        /* @__PURE__ */ jsxs4("footer", { className: "fillo-footer", children: [
-          multiPage && !api.isFirstPage && /* @__PURE__ */ jsx4("button", { type: "button", className: "fillo-button fillo-button--ghost", onClick: api.back, children: "Back" }),
-          /* @__PURE__ */ jsx4(
+        api.status === "error" && /* @__PURE__ */ jsx5("p", { className: "fillo-submit-error", role: "alert", children: "This form can't submit right now. Please try again in a moment." }),
+        showFooter && /* @__PURE__ */ jsxs5("footer", { className: "fillo-footer", children: [
+          multiPage && !api.isFirstPage && /* @__PURE__ */ jsx5("button", { type: "button", className: "fillo-button fillo-button--ghost", onClick: api.back, children: "Back" }),
+          showPrimaryButton && /* @__PURE__ */ jsx5(
             "button",
             {
               type: "submit",
@@ -1089,17 +1702,26 @@ function ResolvedForm(props) {
             }
           )
         ] }),
-        props.poweredBy && /* @__PURE__ */ jsx4(PoweredBy, { label: props.brandLabel, href: props.brandHref })
+        props.poweredBy && /* @__PURE__ */ jsx5(PoweredBy, { label: props.brandLabel, href: props.brandHref })
       ]
     }
-  ) });
+  ) }) });
 }
 
 // src/provider.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { useId as useId3, useMemo as useMemo5 } from "react";
+import { FilloError as FilloError3, normalizeFormSchema as normalizeFormSchema2 } from "@usefillo/core";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function FilloProvider({ children, form, formId, client, ...options }) {
+  const instanceId = useId3().replace(/:/g, "");
   const codeForm = isCodeForm2(form) ? form : null;
-  const schema = codeForm ? codeForm.schema : form;
+  const rawSchema = codeForm ? codeForm.schema : form;
+  const schemaKey = useMemo5(() => JSON.stringify(rawSchema), [rawSchema]);
+  const normalized = useMemo5(() => normalizeFormSchema2(rawSchema), [rawSchema, schemaKey]);
+  if (!normalized.ok) {
+    throw new FilloError3(`This form could not be rendered: ${normalized.error}`, 422);
+  }
+  const schema = normalized.schema;
   const syncedFormId = useCodeFormSync(form, client);
   const api = useFilloController({
     ...options,
@@ -1110,7 +1732,7 @@ function FilloProvider({ children, form, formId, client, ...options }) {
     // a paid capability the server enforces when these responses are submitted.
     surface: "headless"
   });
-  return /* @__PURE__ */ jsx5(FilloContext.Provider, { value: api, children });
+  return /* @__PURE__ */ jsx6(FilloContext.Provider, { value: api, children: /* @__PURE__ */ jsx6(FilloInstanceIdContext.Provider, { value: instanceId, children }) });
 }
 
 // src/index.ts
@@ -1118,12 +1740,12 @@ import {
   createClient as createClient2,
   provisionWorkspace,
   FilloClient,
-  FilloError as FilloError3
+  FilloError as FilloError4
 } from "@usefillo/core";
 export {
   BlockRenderer,
   FilloClient,
-  FilloError3 as FilloError,
+  FilloError4 as FilloError,
   FileUploadField as FilloFileUpload,
   FilloForm,
   FilloProvider,