@usefillo/react 0.10.0 → 0.12.0

package/dist/index.js

@@ -6,7 +6,7 @@ import {
   useEffect as useEffect8,
   useId as useId2,
   useMemo as useMemo5,
-  useRef as useRef7,
+  useRef as useRef8,
   useState as useState6,
   useSyncExternalStore as useSyncExternalStore2
 } from "react";
@@ -15,15 +15,17 @@ import {
   createClient,
   formSchemasEqual,
   isBuildTimeDevEnv as isBuildTimeDevEnv2,
+  isField as isField2,
   isFilloError as isFilloError2,
   isLikelyDevEnv,
   needsExplicitSubmit,
   normalizeFormSchema,
   normalizeFormTheme,
   reachableFields,
-  reachablePageSequence
+  reachablePageSequence,
+  resolveThemeAppearance
 } from "@usefillo/core";
-import { resolveStrings, slotClass as slotClass3 } from "@usefillo/core";
+import { REQUIRED_FIELD_MESSAGE as REQUIRED_FIELD_MESSAGE2, resolveStrings, slotClass as slotClass3 } from "@usefillo/core";
 
 // src/appearance.tsx
 import { createContext, useContext } from "react";
@@ -155,6 +157,12 @@ var FilloChromeContext = createContext2(null);
 function useFilloChrome() {
   return useContext2(FilloChromeContext);
 }
+var noopAnnounce = () => {
+};
+var FilloAnnounceContext = createContext2(noopAnnounce);
+function useFilloAnnounce() {
+  return useContext2(FilloAnnounceContext);
+}
 function useFilloInstanceId() {
   const instanceId = useContext2(FilloInstanceIdContext);
   const fallbackId = useId().replace(/:/g, "");
@@ -328,6 +336,7 @@ function useCodeFormSync(form, client, onError, options) {
         accepting: void 0,
         acceptingReason: void 0,
         uploadsAvailable: void 0,
+        uploadFileSizeLimitMb: void 0,
         resolvedSchema: void 0,
         resolvedTheme: void 0,
         warning: void 0,
@@ -390,6 +399,7 @@ function useCodeFormSync(form, client, onError, options) {
         accepting: r.accepting,
         acceptingReason: r.acceptingReason,
         uploadsAvailable: r.uploadsAvailable,
+        uploadFileSizeLimitMb: r.uploadFileSizeLimitMb,
         resolvedSchema: r.resolvedSchema,
         resolvedTheme: r.resolvedTheme,
         warning: r.warning,
@@ -451,6 +461,7 @@ function useCodeFormSync(form, client, onError, options) {
     accepting: synced.accepting,
     acceptingReason: synced.acceptingReason,
     uploadsAvailable: synced.uploadsAvailable,
+    uploadFileSizeLimitMb: synced.uploadFileSizeLimitMb,
     resolvedSchema: synced.resolvedSchema,
     resolvedTheme: synced.resolvedTheme,
     warning: synced.warning,
@@ -467,12 +478,26 @@ function useCodeFormSync(form, client, onError, options) {
 }
 
 // src/fields.tsx
-import { isField, pipeBlock, REQUIRED_FIELD_MESSAGE, shouldAutoSubmit, slotClass as slotClass2, visibleFields } from "@usefillo/core";
-import { memo, useEffect as useEffect6, useMemo as useMemo4, useState as useState5 } from "react";
+import {
+  formatAnswer,
+  formatGroupedNumber,
+  isField,
+  isValidPartialNumberText,
+  localeForNotation,
+  parseGroupedNumber,
+  pipeBlock,
+  radioGroupStep,
+  REQUIRED_FIELD_MESSAGE,
+  shouldAutoSubmit,
+  slotClass as slotClass2,
+  visibleFields
+} from "@usefillo/core";
+import { memo, useEffect as useEffect6, useLayoutEffect as useLayoutEffect2, useMemo as useMemo4, useRef as useRef6, useState as useState5 } from "react";
 
 // src/phone.tsx
 import {
   PHONE_COUNTRIES,
+  PHONE_PICKER_COUNTRIES,
   countryByIso,
   countryByTimeZone,
   digitsOnly,
@@ -524,8 +549,9 @@ function PhoneField({ field, value, error, setValue, ids: providedIds }) {
     const guess = countryByTimeZone(browserTimeZone()) ?? countryByIso(localeCountry());
     if (guess) setCountry(guess);
   }, []);
+  const [pendingRaw, setPendingRaw] = useState2(null);
   const national = nationalFor(stored, country);
-  const display = formatNational(country, national);
+  const display = pendingRaw ?? formatNational(country, national);
   const inputRef = useRef3(null);
   const caretDigits = useRef3(null);
   useLayoutEffect(() => {
@@ -552,15 +578,23 @@ function PhoneField({ field, value, error, setValue, ids: providedIds }) {
     const caret = el.selectionStart ?? raw.length;
     caretDigits.current = digitsOnly(raw.slice(0, caret)).length;
     if (raw.trimStart().startsWith("+")) {
-      const p = parsePhone(raw);
+      const p = parsePhone(raw, country, { previousDigits: national });
+      if (p.pending) {
+        setPendingRaw(p.raw ?? raw);
+        setValue(p.raw ?? raw);
+        return;
+      }
+      setPendingRaw(null);
       if (p.country) setCountry(p.country);
       commit(p.country ?? country, p.country ? p.national : digitsOnly(raw));
       return;
     }
+    setPendingRaw(null);
     commit(country, digitsOnly(raw));
   }
   function pickCountry(c) {
     touched.current = true;
+    setPendingRaw(null);
     setCountry(c);
     commit(c, national);
     inputRef.current?.focus();
@@ -593,7 +627,7 @@ function PhoneField({ field, value, error, setValue, ids: providedIds }) {
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx2("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, role: "alert", children: error })
+    error && /* @__PURE__ */ jsx2("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, children: error })
   ] });
 }
 function CountrySelect({
@@ -601,6 +635,8 @@ function CountrySelect({
   onPick,
   labelledBy
 }) {
+  const strings = useStrings();
+  const announce = useFilloAnnounce();
   const [open, setOpen] = useState2(false);
   const [query, setQuery] = useState2("");
   const [active, setActive] = useState2(0);
@@ -609,19 +645,22 @@ function CountrySelect({
   const triggerRef = useRef3(null);
   const popoverRef = useRef3(null);
   const searchRef = useRef3(null);
+  const seedRef = useRef3(null);
   const listId = `${labelledBy}-countries`;
   const matches = useMemo3(() => {
     const q = query.trim().toLowerCase();
-    if (!q) return PHONE_COUNTRIES;
+    if (!q) return PHONE_PICKER_COUNTRIES;
     const qDigits = q.replace(/[^\d]/g, "");
-    return PHONE_COUNTRIES.filter(
+    return PHONE_PICKER_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 seed = seedRef.current ?? "";
+    seedRef.current = null;
+    setQuery(seed);
+    setActive(seed ? 0 : Math.max(0, PHONE_PICKER_COUNTRIES.indexOf(country)));
     const id = requestAnimationFrame(() => searchRef.current?.focus());
     return () => cancelAnimationFrame(id);
   }, [open, country]);
@@ -648,8 +687,15 @@ function CountrySelect({
     if (!open) return;
     document.getElementById(`${listId}-opt-${active}`)?.scrollIntoView({ block: "nearest" });
   }, [active, open, listId]);
+  const resultsAnnouncement = strings.phoneResultsCount(matches.length);
+  useEffect3(() => {
+    if (!open || !query.trim()) return;
+    const id = setTimeout(() => announce(resultsAnnouncement), 300);
+    return () => clearTimeout(id);
+  }, [open, query, resultsAnnouncement, announce]);
   function choose(c) {
     if (!c) return;
+    announce(strings.phoneCountrySelected(c.name));
     onPick(c);
     setOpen(false);
   }
@@ -669,7 +715,30 @@ function CountrySelect({
       triggerRef.current?.focus();
     }
   }
-  return /* @__PURE__ */ jsxs2("div", { className: "fillo-phone-country", ref: rootRef, children: [
+  function onTriggerKeyDown(e) {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      setOpen(true);
+      return;
+    }
+    if (e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.altKey && !e.metaKey) {
+      e.preventDefault();
+      seedRef.current = e.key;
+      setOpen(true);
+    }
+  }
+  function onCompositeBlur(e) {
+    if (!open) return;
+    const next = e.relatedTarget;
+    if (next) {
+      if (!rootRef.current?.contains(next)) setOpen(false);
+      return;
+    }
+    queueMicrotask(() => {
+      if (!rootRef.current?.contains(document.activeElement)) setOpen(false);
+    });
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: "fillo-phone-country", ref: rootRef, onBlur: onCompositeBlur, children: [
     /* @__PURE__ */ jsxs2(
       "button",
       {
@@ -681,6 +750,7 @@ function CountrySelect({
         "aria-controls": open ? listId : void 0,
         "aria-label": `Country: ${country.name} (+${country.dialCode})`,
         onClick: () => setOpen((o) => !o),
+        onKeyDown: onTriggerKeyDown,
         children: [
           /* @__PURE__ */ jsx2("span", { className: "fillo-phone-flag-emoji", "aria-hidden": "true", children: flagEmoji(country.iso2) }),
           /* @__PURE__ */ jsxs2("span", { className: "fillo-phone-dial", children: [
@@ -737,7 +807,7 @@ function CountrySelect({
           },
           c.iso2
         )),
-        matches.length === 0 && /* @__PURE__ */ jsx2("li", { className: "fillo-phone-empty", children: "No matches" })
+        matches.length === 0 && /* @__PURE__ */ jsx2("li", { className: "fillo-phone-empty", role: "option", "aria-disabled": "true", children: "No matches" })
       ] })
     ] })
   ] });
@@ -752,6 +822,7 @@ function SignatureField({ field, value, error, setValue, ids: providedIds }) {
   const strings = useStrings();
   const typedInputId = `${ids.inputId}-typed`;
   const canvasRef = useRef4(null);
+  const typedInputRef = useRef4(null);
   const drawing = useRef4(false);
   const [hasInk, setHasInk] = useState3(Boolean(value));
   const [typedName, setTypedName] = useState3("");
@@ -848,6 +919,7 @@ function SignatureField({ field, value, error, setValue, ids: providedIds }) {
     setHasInk(false);
     setTypedName("");
     setValue(null);
+    typedInputRef.current?.focus();
   }
   const describedBy = [field.description ? ids.descriptionId : null, error ? ids.errorId : null].filter(Boolean).join(" ") || void 0;
   return /* @__PURE__ */ jsxs3("div", { ...slots.wrapperProps(`fillo-field fillo-field--signature${error ? " fillo-field--error" : ""}`), children: [
@@ -869,7 +941,8 @@ function SignatureField({ field, value, error, setValue, ids: providedIds }) {
               {
                 ref: canvasRef,
                 className: "fillo-signature-canvas",
-                "aria-hidden": "true",
+                role: "img",
+                "aria-label": hasInk ? strings.signatureSigned : strings.signatureEmpty,
                 onPointerDown: start,
                 onPointerMove: move,
                 onPointerUp: end,
@@ -886,6 +959,7 @@ function SignatureField({ field, value, error, setValue, ids: providedIds }) {
               "input",
               {
                 id: typedInputId,
+                ref: typedInputRef,
                 type: "text",
                 className: "fillo-input fillo-signature-type-input",
                 autoComplete: "name",
@@ -904,7 +978,7 @@ function SignatureField({ field, value, error, setValue, ids: providedIds }) {
         ]
       }
     ),
-    error && /* @__PURE__ */ jsx3("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, role: "alert", children: error })
+    error && /* @__PURE__ */ jsx3("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, children: error })
   ] });
 }
 
@@ -926,7 +1000,22 @@ function formatBytes(bytes) {
   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, ids: providedIds }) {
+function uploadFailureMessage(error, strings) {
+  if (error instanceof Error && error.name === "FilloError") {
+    const status = error.status;
+    if (status !== void 0 && status >= 500) return strings.uploadUnavailable;
+    return error.message || strings.uploadFailed;
+  }
+  return strings.uploadFailed;
+}
+function FileUploadField({
+  field,
+  value,
+  error,
+  setValue,
+  api,
+  ids: providedIds
+}) {
   const ids = useFilloFieldIds(field.id, providedIds);
   const slots = useFieldSlots(field, error);
   const strings = useStrings();
@@ -952,11 +1041,13 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
   const filesRef = useRef5(files);
   filesRef.current = files;
   const maxFiles = schema.maxFiles ?? 1;
-  const maxMb = schema.maxFileSizeMb ?? 500;
+  const configuredMaxMb = schema.maxFileSizeMb ?? 500;
+  const maxMb = chrome?.uploadFileSizeLimitMb ? Math.min(configuredMaxMb, chrome.uploadFileSizeLimitMb) : configuredMaxMb;
   const maxBytes = maxMb * 1024 * 1024;
+  const renderOnly = chrome?.renderOnly === true;
   const storageBlocked = chrome?.uploadsAvailable === false;
   const storageUrl = storageBlocked && chrome?.devChrome ? safeHttpUrl(chrome.warningUrl) : null;
-  const canUpload = Boolean(api.client && api.formId) && !storageBlocked;
+  const canUpload = !renderOnly && Boolean(api.client && api.formId) && !storageBlocked;
   const activeInFlight = inFlight.filter((f) => !f.error).length;
   const remaining = maxFiles - files.length - activeInFlight;
   async function startUpload(file) {
@@ -965,7 +1056,15 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
     if (file.size > maxBytes) {
       setInFlight((prev) => [
         ...prev,
-        { key, name: file.name, size: file.size, fraction: 0, file, tooLarge: true, error: strings.fileTooLarge(maxMb) }
+        {
+          key,
+          name: file.name,
+          size: file.size,
+          fraction: 0,
+          file,
+          tooLarge: true,
+          error: strings.fileTooLarge(maxMb)
+        }
       ]);
       return;
     }
@@ -991,10 +1090,8 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
       setValue(next);
     } catch (err) {
       if (mountedRef.current) {
-        const message = err instanceof Error && err.name === "FilloError" && err.message ? err.message : strings.uploadFailed;
-        setInFlight(
-          (prev) => prev.map((f) => f.key === key ? { ...f, error: message } : f)
-        );
+        const message = uploadFailureMessage(err, strings);
+        setInFlight((prev) => prev.map((f) => f.key === key ? { ...f, error: message } : f));
       }
     } finally {
       controllers.current.delete(key);
@@ -1018,171 +1115,190 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
     setValue(next);
   }
   const describedBy = [field.description ? ids.descriptionId : null, error ? ids.errorId : null].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ jsxs4("div", { ...slots.wrapperProps(`fillo-field fillo-field--file_upload${error ? " fillo-field--error" : ""}`), children: [
-    /* @__PURE__ */ jsxs4("label", { className: slots.label, "data-fillo": "label", id: ids.labelId, htmlFor: ids.inputId, children: [
-      field.label,
-      !field.required && /* @__PURE__ */ jsx4("span", { className: "fillo-optional", children: strings.optional })
-    ] }),
-    field.description && /* @__PURE__ */ jsx4("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
-    remaining > 0 && /* @__PURE__ */ jsxs4(
-      "div",
-      {
-        "data-fillo": "control",
-        "data-drag-over": dragOver ? "" : void 0,
-        className: slots.control(`fillo-dropzone${dragOver ? " fillo-dropzone--over" : ""}${canUpload ? "" : " fillo-dropzone--disabled"}`),
-        onDragOver: (e) => {
-          e.preventDefault();
-          setDragOver(true);
-        },
-        onDragLeave: () => setDragOver(false),
-        onDrop: (e) => {
-          e.preventDefault();
-          setDragOver(false);
-          if (canUpload) handleFiles(e.dataTransfer.files);
-        },
-        onClick: () => canUpload && inputRef.current?.click(),
-        role: "button",
-        tabIndex: 0,
-        "aria-disabled": !canUpload || void 0,
-        "aria-labelledby": ids.labelId,
-        "aria-required": field.required ? true : void 0,
-        "aria-invalid": error ? true : void 0,
-        "aria-describedby": describedBy,
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            if (canUpload) inputRef.current?.click();
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      ...slots.wrapperProps(
+        `fillo-field fillo-field--file_upload${error ? " fillo-field--error" : ""}`
+      ),
+      children: [
+        /* @__PURE__ */ jsxs4("label", { className: slots.label, "data-fillo": "label", id: ids.labelId, htmlFor: ids.inputId, children: [
+          field.label,
+          !field.required && /* @__PURE__ */ jsx4("span", { className: "fillo-optional", children: strings.optional })
+        ] }),
+        field.description && /* @__PURE__ */ jsx4("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
+        remaining > 0 && /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            "data-fillo": "control",
+            "data-drag-over": dragOver ? "" : void 0,
+            className: slots.control(
+              `fillo-dropzone${dragOver ? " fillo-dropzone--over" : ""}${canUpload ? "" : " fillo-dropzone--disabled"}`
+            ),
+            onDragOver: (e) => {
+              e.preventDefault();
+              setDragOver(true);
+            },
+            onDragLeave: () => setDragOver(false),
+            onDrop: (e) => {
+              e.preventDefault();
+              setDragOver(false);
+              if (canUpload) handleFiles(e.dataTransfer.files);
+            },
+            onClick: () => canUpload && inputRef.current?.click(),
+            role: "button",
+            tabIndex: 0,
+            "aria-disabled": !canUpload || void 0,
+            "aria-labelledby": ids.labelId,
+            "aria-invalid": error ? true : void 0,
+            "aria-describedby": describedBy,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                if (canUpload) inputRef.current?.click();
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx4(
+                "input",
+                {
+                  ref: inputRef,
+                  id: ids.inputId,
+                  type: "file",
+                  hidden: true,
+                  disabled: !canUpload,
+                  multiple: maxFiles > 1,
+                  accept: schema.accept?.join(","),
+                  onChange: (e) => canUpload && handleFiles(e.target.files)
+                }
+              ),
+              canUpload ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                /* @__PURE__ */ jsx4("span", { className: "fillo-dropzone-title", children: strings.dropzoneTitle(maxFiles > 1) }),
+                /* @__PURE__ */ jsx4("span", { className: "fillo-dropzone-hint", children: strings.dropzoneHint(maxMb) })
+              ] }) : storageBlocked && chrome?.devChrome ? /* @__PURE__ */ jsxs4("span", { className: "fillo-dropzone-hint", children: [
+                "Connect file storage to enable uploads",
+                storageUrl && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                  " \u2014 ",
+                  /* @__PURE__ */ jsx4("a", { href: storageUrl, target: "_blank", rel: "noopener noreferrer", children: storageUrl })
+                ] })
+              ] }) : /* @__PURE__ */ jsx4("span", { className: "fillo-dropzone-hint", children: renderOnly ? strings.uploadsRenderOnly : storageBlocked ? strings.uploadsUnavailable : strings.uploadsDisabled })
+            ]
           }
-        },
-        children: [
-          /* @__PURE__ */ jsx4(
-            "input",
-            {
-              ref: inputRef,
-              id: ids.inputId,
-              type: "file",
-              hidden: true,
-              disabled: !canUpload,
-              multiple: maxFiles > 1,
-              accept: schema.accept?.join(","),
-              onChange: (e) => canUpload && handleFiles(e.target.files)
-            }
-          ),
-          canUpload ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
-            /* @__PURE__ */ jsx4("span", { className: "fillo-dropzone-title", children: strings.dropzoneTitle(maxFiles > 1) }),
-            /* @__PURE__ */ jsx4("span", { className: "fillo-dropzone-hint", children: strings.dropzoneHint(maxMb) })
-          ] }) : storageBlocked && chrome?.devChrome ? /* @__PURE__ */ jsxs4("span", { className: "fillo-dropzone-hint", children: [
-            "Connect file storage to enable uploads",
-            storageUrl && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-              " \u2014 ",
-              /* @__PURE__ */ jsx4("a", { href: storageUrl, target: "_blank", rel: "noopener noreferrer", children: storageUrl })
-            ] })
-          ] }) : /* @__PURE__ */ jsx4("span", { className: "fillo-dropzone-hint", children: storageBlocked ? strings.uploadsUnavailable : strings.uploadsDisabled })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx4(
-      "div",
-      {
-        role: "status",
-        "aria-live": "polite",
-        className: "fillo-sr-only",
-        style: { position: "absolute", left: "-9999px", width: 1, height: 1, overflow: "hidden" },
-        children: uploadStatus(inFlight, files.length, strings)
-      }
-    ),
-    (inFlight.length > 0 || files.length > 0) && /* @__PURE__ */ jsxs4("ul", { className: "fillo-files", children: [
-      files.map((f) => /* @__PURE__ */ jsxs4("li", { className: "fillo-file fillo-file--done", children: [
-        /* @__PURE__ */ jsx4("span", { className: "fillo-file-name", children: f.name }),
-        /* @__PURE__ */ jsx4("span", { className: "fillo-file-meta", children: formatBytes(f.size) }),
+        ),
         /* @__PURE__ */ jsx4(
-          "button",
+          "div",
           {
-            type: "button",
-            className: "fillo-file-remove",
-            "aria-label": `Remove ${f.name}`,
-            onClick: () => removeFile(f.fileId),
-            children: "\xD7"
+            role: "status",
+            "aria-live": "polite",
+            className: "fillo-sr-only",
+            style: { position: "absolute", left: "-9999px", width: 1, height: 1, overflow: "hidden" },
+            children: uploadStatus(inFlight, files.length, strings)
           }
-        )
-      ] }, f.fileId)),
-      inFlight.map((f) => /* @__PURE__ */ jsxs4(
-        "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: [
+        ),
+        (inFlight.length > 0 || files.length > 0) && /* @__PURE__ */ jsxs4("ul", { className: "fillo-files", children: [
+          files.map((f) => /* @__PURE__ */ jsxs4("li", { className: "fillo-file fillo-file--done", children: [
             /* @__PURE__ */ jsx4("span", { className: "fillo-file-name", children: f.name }),
-            f.error ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
-              /* @__PURE__ */ jsx4("span", { className: "fillo-file-meta", children: f.error }),
-              f.file && !f.tooLarge && remaining > 0 && /* @__PURE__ */ jsx4(
-                "button",
-                {
-                  type: "button",
-                  className: "fillo-file-retry",
-                  "aria-label": `${strings.uploadRetry} ${f.name}`,
-                  onClick: () => {
-                    const retryFile = f.file;
-                    if (!retryFile) return;
-                    setInFlight((prev) => prev.filter((x) => x.key !== f.key));
-                    void startUpload(retryFile);
-                  },
-                  children: strings.uploadRetry
-                }
-              ),
-              /* @__PURE__ */ jsx4(
-                "button",
-                {
-                  type: "button",
-                  className: "fillo-file-remove",
-                  "aria-label": "Dismiss",
-                  onClick: () => setInFlight((prev) => prev.filter((x) => x.key !== f.key)),
-                  children: "\xD7"
-                }
-              )
-            ] }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
-              /* @__PURE__ */ jsxs4("span", { className: "fillo-file-meta", children: [
-                Math.round(f.fraction * 100),
-                "% of ",
-                formatBytes(f.size)
-              ] }),
-              /* @__PURE__ */ jsx4("span", { className: "fillo-progress", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("span", { className: "fillo-progress-bar", style: { width: `${f.fraction * 100}%` } }) }),
-              /* @__PURE__ */ jsx4(
-                "button",
-                {
-                  type: "button",
-                  className: "fillo-file-remove",
-                  "aria-label": `Cancel ${f.name}`,
-                  onClick: () => cancelUpload(f.key),
-                  children: "\xD7"
-                }
-              )
-            ] })
-          ]
-        },
-        f.key
-      ))
-    ] }),
-    error && /* @__PURE__ */ jsx4("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, role: "alert", children: error })
-  ] });
+            /* @__PURE__ */ jsx4("span", { className: "fillo-file-meta", children: formatBytes(f.size) }),
+            /* @__PURE__ */ jsx4("span", { className: "fillo-sr-only", children: "Uploaded" }),
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                className: "fillo-file-remove",
+                "aria-label": `Remove ${f.name}`,
+                onClick: () => removeFile(f.fileId),
+                children: "\xD7"
+              }
+            )
+          ] }, f.fileId)),
+          inFlight.map((f) => /* @__PURE__ */ jsxs4(
+            "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__ */ jsx4("span", { className: "fillo-file-name", children: f.name }),
+                f.error ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                  /* @__PURE__ */ jsxs4("span", { className: "fillo-file-actions", children: [
+                    f.file && !f.tooLarge && remaining > 0 && /* @__PURE__ */ jsx4(
+                      "button",
+                      {
+                        type: "button",
+                        className: "fillo-file-retry",
+                        "aria-label": `${strings.uploadRetry} ${f.name}`,
+                        onClick: () => {
+                          const retryFile = f.file;
+                          if (!retryFile) return;
+                          setInFlight((prev) => prev.filter((x) => x.key !== f.key));
+                          void startUpload(retryFile);
+                        },
+                        children: strings.uploadRetry
+                      }
+                    ),
+                    /* @__PURE__ */ jsx4(
+                      "button",
+                      {
+                        type: "button",
+                        className: "fillo-file-remove",
+                        "aria-label": "Dismiss",
+                        onClick: () => setInFlight((prev) => prev.filter((x) => x.key !== f.key)),
+                        children: "\xD7"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx4("span", { className: "fillo-file-error", role: "alert", children: f.error })
+                ] }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                  /* @__PURE__ */ jsxs4("span", { className: "fillo-file-meta", children: [
+                    Math.round(f.fraction * 100),
+                    "% of ",
+                    formatBytes(f.size)
+                  ] }),
+                  /* @__PURE__ */ jsx4(
+                    "button",
+                    {
+                      type: "button",
+                      className: "fillo-file-remove",
+                      "aria-label": `Cancel ${f.name}`,
+                      onClick: () => cancelUpload(f.key),
+                      children: "\xD7"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4("span", { className: "fillo-progress", "aria-hidden": "true", children: /* @__PURE__ */ jsx4(
+                    "span",
+                    {
+                      className: "fillo-progress-bar",
+                      style: { width: `${f.fraction * 100}%` }
+                    }
+                  ) })
+                ] })
+              ]
+            },
+            f.key
+          ))
+        ] }),
+        error && /* @__PURE__ */ jsx4("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, children: error })
+      ]
+    }
+  );
 }
 
 // src/fields.tsx
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-function fieldAria(field, error, ids) {
+function fieldAria(field, error, ids, opts = {}) {
   const describedBy = [
     field.description ? ids.descriptionId : null,
     error ? ids.errorId : null
   ].filter(Boolean);
+  const requiredSupported = opts.required ?? true;
   return {
     "aria-invalid": error ? true : void 0,
-    "aria-required": field.required ? true : void 0,
+    "aria-required": requiredSupported && field.required ? true : void 0,
     "aria-describedby": describedBy.length ? describedBy.join(" ") : void 0
   };
 }
@@ -1198,9 +1314,6 @@ function useControl(base, field, error) {
     "data-fillo": "control"
   };
 }
-function isNativeControlTarget(target) {
-  return target instanceof HTMLElement && Boolean(target.closest("input, textarea, select, button"));
-}
 function FieldShell({
   field,
   error,
@@ -1237,7 +1350,7 @@ function FieldShell({
         ] }),
         field.description && /* @__PURE__ */ jsx5("p", { className: descriptionCls, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
         children,
-        error && /* @__PURE__ */ jsx5("p", { className: errorCls, "data-fillo": "error", id: ids.errorId, role: "alert", children: error })
+        error && /* @__PURE__ */ jsx5("p", { className: errorCls, "data-fillo": "error", id: ids.errorId, children: error })
       ]
     }
   );
@@ -1245,6 +1358,7 @@ function FieldShell({
 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";
+  const autoComplete = field.kind === "email" ? "email" : field.kind === "url" ? "url" : void 0;
   const control = useControl("fillo-input", field, error);
   return /* @__PURE__ */ jsx5(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx5(
     "input",
@@ -1252,6 +1366,7 @@ function TextInput({ field, value, error, setValue, ids: providedIds }) {
       id: ids.inputId,
       ...control,
       type,
+      autoComplete,
       value: typeof value === "string" || typeof value === "number" ? String(value) : "",
       placeholder: field.placeholder,
       maxLength: "maxLength" in field ? field.maxLength : void 0,
@@ -1262,6 +1377,72 @@ function TextInput({ field, value, error, setValue, ids: providedIds }) {
     }
   ) });
 }
+function NumberInput({ field, value, error, setValue, api, ids: providedIds }) {
+  const ids = useFilloFieldIds(field.id, providedIds);
+  const control = useControl("fillo-input", field, error);
+  const [draft, setDraft] = useState5(null);
+  const inputRef = useRef6(null);
+  const pendingCaret = useRef6(null);
+  const [, setRevertTick] = useState5(0);
+  useLayoutEffect2(() => {
+    if (pendingCaret.current === null) return;
+    const pos = pendingCaret.current;
+    pendingCaret.current = null;
+    inputRef.current?.setSelectionRange(pos, pos);
+  });
+  const num = field;
+  const grouped = num.notation !== void 0;
+  const locale = localeForNotation(num.notation);
+  const hasAffix = Boolean(num.prefix) || Boolean(num.suffix);
+  if (!grouped && !hasAffix) {
+    return /* @__PURE__ */ jsx5(
+      TextInput,
+      {
+        field,
+        value,
+        error,
+        setValue,
+        api,
+        ids: providedIds
+      }
+    );
+  }
+  const stored = typeof value === "string" || typeof value === "number" ? String(value) : "";
+  const n = Number(stored);
+  const display = draft !== null ? draft : grouped && stored !== "" && Number.isFinite(n) ? formatGroupedNumber(n, { locale, decimals: num.decimals }) : stored;
+  const input = /* @__PURE__ */ jsx5(
+    "input",
+    {
+      ref: inputRef,
+      id: ids.inputId,
+      ...control,
+      type: "text",
+      inputMode: "decimal",
+      value: display,
+      placeholder: field.placeholder,
+      onBlur: grouped ? () => setDraft(null) : void 0,
+      onChange: (e) => {
+        if (!isValidPartialNumberText(e.target.value, locale)) {
+          pendingCaret.current = e.target.selectionStart ?? e.target.value.length;
+          setRevertTick((t) => t + 1);
+          return;
+        }
+        if (grouped) {
+          setDraft(e.target.value);
+          setValue(parseGroupedNumber(e.target.value, locale));
+        } else {
+          setValue(e.target.value);
+        }
+      },
+      ...fieldAria(field, error, ids)
+    }
+  );
+  return /* @__PURE__ */ jsx5(FieldShell, { field, error, ids, children: hasAffix ? /* @__PURE__ */ jsxs5("div", { className: "fillo-number", children: [
+    num.prefix && /* @__PURE__ */ jsx5("span", { className: "fillo-number-prefix", children: num.prefix }),
+    input,
+    num.suffix && /* @__PURE__ */ jsx5("span", { className: "fillo-number-suffix", children: num.suffix })
+  ] }) : input });
+}
 function LongText({ field, value, error, setValue, ids: providedIds }) {
   const ids = useFilloFieldIds(field.id, providedIds);
   const control = useControl("fillo-input fillo-textarea", field, error);
@@ -1347,12 +1528,6 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
               opt.id,
               value === opt.id
             ),
-            onClick: (event) => {
-              if (isNativeControlTarget(event.target)) return;
-              event.preventDefault();
-              setOtherOn(false);
-              setValue(opt.id);
-            },
             children: [
               /* @__PURE__ */ jsx5(
                 "input",
@@ -1368,15 +1543,21 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
                 }
               ),
               /* @__PURE__ */ jsx5(ChoiceIcon, { icon: opt.icon }),
+              opt.icon && value === opt.id && // Icon-mode hides the native input, so its check state is
+              // otherwise color-only (forfeits forced-colors' own indicator).
+              /* @__PURE__ */ jsx5("span", { className: "fillo-option-check", "aria-hidden": "true", children: "\u2713" }),
               /* @__PURE__ */ jsx5("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: opt.label })
             ]
           },
           opt.id
         )),
-        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>.
+        choice.allowOther && // The outer element is a <label> so the whole row is a pointer
+        // target (native label click-forwarding), same as every other
+        // option row above. The free-text input below is its own labelable
+        // descendant, so it handles its own clicks without re-toggling the
+        // radio (dom's proven pattern).
         /* @__PURE__ */ jsxs5(
-          "div",
+          "label",
           {
             "data-fillo": "option",
             "data-selected": otherActive ? "" : void 0,
@@ -1386,7 +1567,7 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
               otherActive
             ),
             children: [
-              /* @__PURE__ */ jsxs5("label", { className: "fillo-option-main", children: [
+              /* @__PURE__ */ jsxs5("span", { className: "fillo-option-main", children: [
                 /* @__PURE__ */ jsx5(
                   "input",
                   {
@@ -1441,7 +1622,7 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
       "data-fillo": "options",
       role: "group",
       "aria-labelledby": ids.labelId,
-      ...fieldAria(field, error, ids),
+      ...fieldAria(field, error, ids, { required: false }),
       children: [
         options.map((opt) => /* @__PURE__ */ jsxs5(
           "label",
@@ -1454,11 +1635,6 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
               opt.id,
               selected.includes(opt.id)
             ),
-            onClick: (event) => {
-              if (isNativeControlTarget(event.target)) return;
-              event.preventDefault();
-              toggle(opt.id);
-            },
             children: [
               /* @__PURE__ */ jsx5(
                 "input",
@@ -1470,15 +1646,21 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
                 }
               ),
               /* @__PURE__ */ jsx5(ChoiceIcon, { icon: opt.icon }),
+              opt.icon && selected.includes(opt.id) && // Icon-mode hides the native input, so its check state is
+              // otherwise color-only (forfeits forced-colors' own indicator).
+              /* @__PURE__ */ jsx5("span", { className: "fillo-option-check", "aria-hidden": "true", children: "\u2713" }),
               /* @__PURE__ */ jsx5("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: opt.label })
             ]
           },
           opt.id
         )),
-        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>.
+        choice.allowOther && // The outer element is a <label> so the whole row is a pointer
+        // target (native label click-forwarding), same as every other
+        // option row above. The free-text input below is its own labelable
+        // descendant, so it handles its own clicks without re-toggling the
+        // checkbox (dom's proven pattern).
         /* @__PURE__ */ jsxs5(
-          "div",
+          "label",
           {
             "data-fillo": "option",
             "data-selected": otherActive ? "" : void 0,
@@ -1488,7 +1670,7 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
               otherActive
             ),
             children: [
-              /* @__PURE__ */ jsxs5("label", { className: "fillo-option-main", children: [
+              /* @__PURE__ */ jsxs5("span", { className: "fillo-option-main", children: [
                 /* @__PURE__ */ jsx5(
                   "input",
                   {
@@ -1610,18 +1792,16 @@ function Checkbox({ field, value, error, setValue, ids: providedIds }) {
               {
                 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__ */ jsx5("span", { className: "fillo-toggle-track", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("span", { className: "fillo-toggle-thumb" }) })
           ] }),
           field.description && /* @__PURE__ */ jsx5("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
-          error && /* @__PURE__ */ jsx5("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, role: "alert", children: error })
+          error && /* @__PURE__ */ jsx5("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, children: error })
         ]
       }
     );
@@ -1651,28 +1831,21 @@ function Checkbox({ field, value, error, setValue, ids: providedIds }) {
           ] })
         ] }),
         field.description && /* @__PURE__ */ jsx5("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
-        error && /* @__PURE__ */ jsx5("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, role: "alert", children: error })
+        error && /* @__PURE__ */ jsx5("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, children: error })
       ]
     }
   );
 }
 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;
+  const group = e.currentTarget;
+  const rtl = getComputedStyle(group).direction === "rtl";
+  const index = rovingIndex(steps, current);
+  const next = radioGroupStep(e.key, index, steps.length, { rtl });
+  if (next == null) 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();
 }
@@ -1693,6 +1866,7 @@ function Rating({ field, value, error, setValue, ids: providedIds }) {
   return /* @__PURE__ */ jsx5(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx5(
     "div",
     {
+      id: ids.inputId,
       ...control,
       role: "radiogroup",
       "aria-labelledby": ids.labelId,
@@ -1714,8 +1888,11 @@ function Rating({ field, value, error, setValue, ids: providedIds }) {
           "aria-label": `${n} of ${max}`,
           "aria-checked": n === current,
           tabIndex: i === tabbable ? 0 : -1,
-          onClick: () => setValue(n === current ? null : n),
-          children: "\u2605"
+          onClick: (event) => {
+            if (event.detail === 0 && n === current) return;
+            setValue(n === current ? null : n);
+          },
+          children: n <= current ? "\u2605" : "\u2606"
         },
         n
       ))
@@ -1745,6 +1922,7 @@ function LinearScale({ field, value, error, setValue, ids: providedIds }) {
     /* @__PURE__ */ jsx5(
       "div",
       {
+        id: ids.inputId,
         ...control,
         role: "radiogroup",
         "aria-labelledby": ids.labelId,
@@ -1768,7 +1946,10 @@ function LinearScale({ field, value, error, setValue, ids: providedIds }) {
             "aria-label": String(n),
             "aria-checked": value === n,
             tabIndex: i === tabbable ? 0 : -1,
-            onClick: () => setValue(value === n ? null : n),
+            onClick: (event) => {
+              if (event.detail === 0 && n === current) return;
+              setValue(value === n ? null : n);
+            },
             children: n
           },
           n
@@ -1783,19 +1964,34 @@ function LinearScale({ field, value, error, setValue, ids: providedIds }) {
 }
 function Ranking({ field, value, error, setValue, ids: providedIds }) {
   const ids = useFilloFieldIds(field.id, providedIds);
+  const strings = useStrings();
+  const announce = useFilloAnnounce();
   const ranking = field;
   const answered = Array.isArray(value) ? value : [];
   const order = [
     ...answered.filter((id) => ranking.options.some((o) => o.id === id)),
     ...ranking.options.map((o) => o.id).filter((id) => !answered.includes(id))
   ];
-  function move(id, delta) {
+  const pressedRef = useRef6(null);
+  useEffect6(() => {
+    const pressed = pressedRef.current;
+    pressedRef.current = null;
+    if (!pressed || !pressed.disabled) return;
+    const sibling = pressed.parentElement?.querySelector(
+      ".fillo-ranking-move:not(:disabled)"
+    );
+    sibling?.focus();
+  }, [value]);
+  function move(id, delta, button) {
     const index = order.indexOf(id);
     const target = index + delta;
     if (target < 0 || target >= order.length) return;
+    pressedRef.current = button;
     const next = [...order];
     [next[index], next[target]] = [next[target], next[index]];
     setValue(next);
+    const moved = ranking.options.find((o) => o.id === id);
+    if (moved) announce(strings.rankingPosition(moved.label, target + 1, order.length));
   }
   return /* @__PURE__ */ jsx5(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx5(
     "div",
@@ -1803,7 +1999,7 @@ function Ranking({ field, value, error, setValue, ids: providedIds }) {
       id: ids.inputId,
       role: "group",
       "aria-labelledby": ids.labelId,
-      ...fieldAria(field, error, ids),
+      ...fieldAria(field, error, ids, { required: false }),
       children: /* @__PURE__ */ jsx5("ol", { className: "fillo-ranking", children: order.map((id, index) => {
         const option = ranking.options.find((o) => o.id === id);
         if (!option) return null;
@@ -1818,7 +2014,7 @@ function Ranking({ field, value, error, setValue, ids: providedIds }) {
                 className: "fillo-ranking-move",
                 "aria-label": `Move ${option.label} up`,
                 disabled: index === 0,
-                onClick: () => move(id, -1),
+                onClick: (e) => move(id, -1, e.currentTarget),
                 children: "\u2191"
               }
             ),
@@ -1829,7 +2025,7 @@ function Ranking({ field, value, error, setValue, ids: providedIds }) {
                 className: "fillo-ranking-move",
                 "aria-label": `Move ${option.label} down`,
                 disabled: index === order.length - 1,
-                onClick: () => move(id, 1),
+                onClick: (e) => move(id, 1, e.currentTarget),
                 children: "\u2193"
               }
             )
@@ -1850,10 +2046,10 @@ function Matrix({ field, value, error, setValue, ids: providedIds }) {
       className: "fillo-matrix-wrap",
       role: "group",
       "aria-labelledby": ids.labelId,
-      ...fieldAria(field, error, ids),
+      ...fieldAria(field, error, ids, { required: false }),
       children: /* @__PURE__ */ jsxs5("table", { className: "fillo-matrix", children: [
         /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs5("tr", { children: [
-          /* @__PURE__ */ jsx5("th", {}),
+          /* @__PURE__ */ jsx5("td", {}),
           matrix.columns.map((col) => /* @__PURE__ */ jsx5("th", { scope: "col", children: col.label }, col.id))
         ] }) }),
         /* @__PURE__ */ jsx5("tbody", { children: matrix.rows.map((row) => {
@@ -1872,12 +2068,12 @@ function Matrix({ field, value, error, setValue, ids: providedIds }) {
                 "div",
                 {
                   role: "radiogroup",
-                  "aria-labelledby": rowLabelId,
+                  "aria-labelledby": `${ids.labelId} ${rowLabelId}`,
                   "aria-owns": matrix.columns.map(radioId).join(" "),
                   children: /* @__PURE__ */ jsx5("span", { id: rowLabelId, children: row.label })
                 }
               ) }),
-              matrix.columns.map((col) => /* @__PURE__ */ jsx5("td", { children: /* @__PURE__ */ jsx5(
+              matrix.columns.map((col) => /* @__PURE__ */ jsx5("td", { "data-label": col.label, children: /* @__PURE__ */ jsx5("label", { className: "fillo-matrix-cell", children: /* @__PURE__ */ jsx5(
                 "input",
                 {
                   id: radioId(col),
@@ -1890,7 +2086,7 @@ function Matrix({ field, value, error, setValue, ids: providedIds }) {
                   checked: answers[row.id] === col.id,
                   onChange: () => setValue({ ...answers, [row.id]: col.id })
                 }
-              ) }, col.id))
+              ) }) }, col.id))
             ] }, row.id)
           );
         }) })
@@ -1901,12 +2097,45 @@ function Matrix({ field, value, error, setValue, ids: providedIds }) {
 function Hidden() {
   return null;
 }
+function Calculated({ field, value, ids: providedIds }) {
+  const ids = useFilloFieldIds(field.id, providedIds);
+  const state = { kind: field.kind, fieldId: field.id, invalid: false, required: false };
+  const rootCls = useSlotClass("fillo-field fillo-field--calculated fillo-calculated", {
+    slot: "calculated",
+    ...state
+  });
+  const labelCls = useSlotClass("fillo-label", { slot: "label", ...state });
+  const descriptionCls = useSlotClass("fillo-description", { slot: "fieldDescription", ...state });
+  const answered = value !== void 0 && value !== null && value !== "";
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: rootCls,
+      "data-fillo": "calculated",
+      "data-field": field.id,
+      "data-kind": field.kind,
+      children: [
+        /* @__PURE__ */ jsx5("label", { className: labelCls, "data-fillo": "label", id: ids.labelId, htmlFor: ids.inputId, children: field.label }),
+        field.description && /* @__PURE__ */ jsx5("p", { className: descriptionCls, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
+        /* @__PURE__ */ jsx5(
+          "output",
+          {
+            id: ids.inputId,
+            className: `fillo-calculated-value${answered ? "" : " fillo-calculated-value--empty"}`,
+            "aria-describedby": field.description ? ids.descriptionId : void 0,
+            children: answered ? formatAnswer(field, value) : "\u2014"
+          }
+        )
+      ]
+    }
+  );
+}
 var DEFAULT_COMPONENTS = {
   short_text: TextInput,
   email: TextInput,
   url: TextInput,
   phone: PhoneField,
-  number: TextInput,
+  number: NumberInput,
   date: TextInput,
   long_text: LongText,
   select: SingleChoice,
@@ -1919,7 +2148,8 @@ var DEFAULT_COMPONENTS = {
   matrix: Matrix,
   signature: SignatureField,
   file_upload: FileUploadField,
-  hidden: Hidden
+  hidden: Hidden,
+  calculated: Calculated
 };
 function ContentRenderer({ block }) {
   switch (block.kind) {
@@ -2034,7 +2264,7 @@ function FormField({
 }
 
 // src/turnstile.tsx
-import { useEffect as useEffect7, useRef as useRef6 } from "react";
+import { useEffect as useEffect7, useRef as useRef7 } from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var SCRIPT_SRC = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
 var SCRIPT_ID = "fillo-turnstile-script";
@@ -2093,13 +2323,13 @@ function TurnstileWidget({
   registerReset,
   className
 }) {
-  const containerRef = useRef6(null);
-  const widgetIdRef = useRef6(null);
-  const onTokenRef = useRef6(onToken);
+  const containerRef = useRef7(null);
+  const widgetIdRef = useRef7(null);
+  const onTokenRef = useRef7(onToken);
   onTokenRef.current = onToken;
-  const onErrorRef = useRef6(onError);
+  const onErrorRef = useRef7(onError);
   onErrorRef.current = onError;
-  const registerResetRef = useRef6(registerReset);
+  const registerResetRef = useRef7(registerReset);
   registerResetRef.current = registerReset;
   useEffect7(() => {
     let cancelled = false;
@@ -2155,7 +2385,7 @@ function TurnstileWidget({
 // src/FilloForm.tsx
 import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function themeProps(theme) {
-  const safeTheme = normalizeFormTheme(theme);
+  const safeTheme = resolveThemeAppearance(normalizeFormTheme(theme));
   if (!safeTheme) return {};
   const style = {};
   if (safeTheme.primary) style["--fillo-primary"] = safeTheme.primary;
@@ -2175,17 +2405,25 @@ function badgeUrl(href) {
   url.searchParams.set("utm_source", "form_badge");
   return url.toString();
 }
-function focusFirstInvalid(formEl) {
-  if (!formEl || typeof window === "undefined") return;
-  const run = () => {
-    const invalid = formEl.querySelector('[aria-invalid="true"]');
-    const focusable = 'input:not([disabled]), textarea:not([disabled]), select:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"])';
-    const target = invalid?.matches(focusable) ? invalid : invalid?.querySelector(focusable);
-    target?.focus?.();
-  };
+var FOCUSABLE_SELECTOR = 'input:not([disabled]), textarea:not([disabled]), select:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function resolveFocusable(el) {
+  if (!el) return null;
+  return el.matches(FOCUSABLE_SELECTOR) ? el : el.querySelector(FOCUSABLE_SELECTOR);
+}
+function nextFrame(run) {
   if (typeof requestAnimationFrame === "function") requestAnimationFrame(run);
   else setTimeout(run, 0);
 }
+function focusErrorSummary(formEl) {
+  if (!formEl || typeof window === "undefined") return;
+  nextFrame(() => {
+    formEl.querySelector(".fillo-error-summary")?.focus();
+  });
+}
+function focusField(inputId) {
+  if (typeof document === "undefined") return;
+  resolveFocusable(document.getElementById(inputId))?.focus();
+}
 var HP_STYLE = {
   position: "absolute",
   left: "-9999px",
@@ -2204,12 +2442,15 @@ function assertHpHidden(el) {
 }
 function FilloForm(props) {
   const { form, formId } = props;
+  const renderOnly = props.renderOnly === true || props.skipValidation === true;
   const client = useMemo5(
-    () => props.client ?? (formId ? createClient() : void 0),
-    [props.client, formId]
+    () => renderOnly ? void 0 : props.client ?? (formId ? createClient() : void 0),
+    [renderOnly, props.client, formId]
   );
   const [loaded, setLoaded] = useState6(null);
-  const [loadFailure, setLoadFailure] = useState6(null);
+  const [loadFailure, setLoadFailure] = useState6(
+    null
+  );
   const devEnv = useIsDevEnv();
   const devChrome = props.preview === true || devEnv;
   if (props.preview === true) warnPreviewInProduction();
@@ -2227,6 +2468,7 @@ function FilloForm(props) {
     accepting: syncedAccepting,
     acceptingReason: syncedAcceptingReason,
     uploadsAvailable: syncedUploadsAvailable,
+    uploadFileSizeLimitMb: syncedUploadFileSizeLimitMb,
     resolvedSchema,
     resolvedTheme,
     warningCode: syncedWarningCode,
@@ -2238,10 +2480,22 @@ function FilloForm(props) {
   });
   const renderResolvedSnapshot = Boolean(resolvedSchema && !devChrome);
   const inlineSchema = codeForm ? renderResolvedSnapshot ? resolvedSchema : codeForm.schema : form;
-  const onErrorRef = useRef7(onError);
+  const onErrorRef = useRef8(onError);
   useEffect8(() => {
     onErrorRef.current = onError;
   });
+  const targetError = useMemo5(
+    () => form && !formId && !renderOnly && (!isCodeForm2(form) || !props.client) ? new FilloError2(
+      "This form has no Fillo target. Pass formId with the schema, use a defineForm() value with client, or set renderOnly for a non-submitting preview.",
+      422,
+      void 0,
+      "form_target_required"
+    ) : null,
+    [form, formId, props.client, renderOnly]
+  );
+  useEffect8(() => {
+    if (targetError) onErrorRef.current?.(targetError);
+  }, [targetError]);
   const needsFetch = !inlineSchema && Boolean(client && formId);
   useEffect8(() => {
     if (!needsFetch || !client || !formId) {
@@ -2262,6 +2516,7 @@ function FilloForm(props) {
         accepting: published.accepting,
         acceptingReason: published.acceptingReason,
         uploadsAvailable: published.uploadsAvailable,
+        uploadFileSizeLimitMb: published.uploadFileSizeLimitMb,
         branding: published.branding ?? null,
         challenge: published.challenge ?? null
       });
@@ -2279,10 +2534,28 @@ function FilloForm(props) {
   const currentLoaded = needsFetch && loaded?.formId === formId ? loaded : null;
   const loadError = needsFetch && loadFailure && loadFailure.formId === formId ? loadFailure.error : null;
   const rawSchema = inlineSchema ?? currentLoaded?.schema ?? null;
-  const normalized = useMemo5(() => rawSchema ? normalizeFormSchema(rawSchema) : null, [rawSchema]);
+  const normalized = useMemo5(
+    () => rawSchema ? normalizeFormSchema(rawSchema) : null,
+    [rawSchema]
+  );
   const schema = normalized?.ok ? normalized.schema : null;
   const resolvedCodeTheme = renderResolvedSnapshot ? resolvedTheme ?? void 0 : codeForm?.theme;
   const theme = props.appearance?.theme ?? props.theme ?? resolvedCodeTheme ?? currentLoaded?.theme ?? void 0;
+  if (targetError) {
+    if (props.renderError) return /* @__PURE__ */ jsx7(Fragment3, { children: props.renderError(targetError) });
+    return /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: `fillo-form fillo-form--error ${props.className ?? ""}`,
+        role: "alert",
+        "data-fillo": "root",
+        "data-state": "error",
+        "data-error-code": "form_target_required",
+        ...themeProps(theme),
+        children: devChrome ? `${targetError.message} (${targetError.code})` : strings.loadFailed
+      }
+    );
+  }
   if (normalized && !normalized.ok) {
     const error = new FilloError2(`This form could not be rendered: ${normalized.error}`, 422);
     if (props.renderError) return /* @__PURE__ */ jsx7(Fragment3, { children: props.renderError(error) });
@@ -2323,7 +2596,14 @@ function FilloForm(props) {
     );
   }
   if (currentLoaded?.closed) {
-    return /* @__PURE__ */ jsx7("div", { className: `fillo-form fillo-form--closed ${props.className ?? ""}`, ...themeProps(theme), children: /* @__PURE__ */ jsx7("p", { className: "fillo-closed", children: strings.closed }) });
+    return /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: `fillo-form fillo-form--closed ${props.className ?? ""}`,
+        ...themeProps(theme),
+        children: /* @__PURE__ */ jsx7("p", { className: "fillo-closed", children: strings.closed })
+      }
+    );
   }
   const canonicalSyncError = codeForm && syncError && !props.skipValidation ? syncError : null;
   if (canonicalSyncError && props.renderError) {
@@ -2365,7 +2645,14 @@ function FilloForm(props) {
         }
       );
     }
-    return /* @__PURE__ */ jsx7("div", { className: `fillo-form fillo-form--closed ${props.className ?? ""}`, ...themeProps(theme), children: /* @__PURE__ */ jsx7("p", { className: "fillo-closed", children: variant === "closed" ? strings.closed : strings.notLive }) });
+    return /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: `fillo-form fillo-form--closed ${props.className ?? ""}`,
+        ...themeProps(theme),
+        children: /* @__PURE__ */ jsx7("p", { className: "fillo-closed", children: variant === "closed" ? strings.closed : strings.notLive })
+      }
+    );
   }
   const awaitingCanonical = Boolean(codeForm && codeFormSyncing && !props.skipValidation);
   if (!devChrome && awaitingCanonical || !schema) {
@@ -2390,10 +2677,12 @@ function FilloForm(props) {
     ResolvedForm,
     {
       ...props,
-      client,
+      client: renderOnly ? void 0 : client,
       schema,
       theme,
-      formId: syncedFormId ?? formId,
+      formId: renderOnly ? void 0 : syncedFormId ?? formId,
+      renderOnly,
+      skipValidation: renderOnly ? true : props.skipValidation,
       poweredBy,
       brandLabel: branding?.label,
       brandHref: branding?.href,
@@ -2401,6 +2690,7 @@ function FilloForm(props) {
       stagedNotice: codeChangesStaged,
       syncErrorNotice: syncError ?? syncNoticeError ?? void 0,
       uploadsAvailable: codeForm ? syncedUploadsAvailable : currentLoaded?.uploadsAvailable,
+      uploadFileSizeLimitMb: codeForm ? syncedUploadFileSizeLimitMb : currentLoaded?.uploadFileSizeLimitMb ?? props.uploadFileSizeLimitMb,
       syncWarningCode: codeForm ? syncedWarningCode : void 0,
       syncWarningUrl: syncedWarningUrl,
       challenge
@@ -2463,20 +2753,21 @@ function useIsDevEnv() {
 function ResolvedForm(props) {
   const { schema, theme } = props;
   const displayOnly = props.displayOnly === true;
+  const renderOnly = props.renderOnly === true;
   const instanceId = useId2().replace(/:/g, "");
   const devEnv = useIsDevEnv();
   const devChrome = !displayOnly && (props.preview === true || devEnv);
-  const hpRef = useRef7(null);
+  const hpRef = useRef8(null);
   const codeForm = isCodeForm2(props.form) ? props.form : null;
   const client = props.client;
-  const challenge = props.challenge;
+  const challenge = renderOnly ? void 0 : props.challenge;
   const challengeRequired = Boolean(challenge);
-  const challengeTokenRef = useRef7(void 0);
+  const challengeTokenRef = useRef8(void 0);
   const [resyncWarning, setResyncWarning] = useState6(null);
   const [resolutionFailureCode, setResolutionFailureCode] = useState6(null);
   const [challengeToken, setChallengeToken] = useState6(void 0);
   const [challengeError, setChallengeError] = useState6(false);
-  const resetChallengeRef = useRef7(void 0);
+  const resetChallengeRef = useRef8(void 0);
   const handleChallengeToken = useCallback((token) => {
     challengeTokenRef.current = token;
     setChallengeToken(token);
@@ -2494,7 +2785,8 @@ function ResolvedForm(props) {
           setResyncWarning({
             code: result.warningCode,
             url: result.warningUrl,
-            uploadsAvailable: result.uploadsAvailable
+            uploadsAvailable: result.uploadsAvailable,
+            uploadFileSizeLimitMb: result.uploadFileSizeLimitMb
           });
           if (result.status === "draft") {
             throw new FilloError2(
@@ -2580,19 +2872,44 @@ function ResolvedForm(props) {
       resetChallengeRef.current?.();
     }
   });
-  useDraftFlush(api, !displayOnly);
+  useDraftFlush(api, !displayOnly && !renderOnly);
+  const strings = resolveStrings(props.strings);
+  const announceRef = useRef8(null);
+  const announce = useCallback((text) => {
+    const el = announceRef.current;
+    if (!el) return;
+    if (el.textContent === text) {
+      el.textContent = "";
+      nextFrame(() => {
+        if (announceRef.current) announceRef.current.textContent = text;
+      });
+      return;
+    }
+    el.textContent = text;
+  }, []);
+  useEffect8(() => {
+    if (api.status === "submitting") announce(strings.submittingAnnouncement);
+  }, [api.status, announce, strings.submittingAnnouncement]);
+  const resuming = api.resumedDraft || api.editingPrevious;
+  const resumeAnnouncement = api.editingPrevious ? strings.editNotice : strings.resumeNotice;
+  useEffect8(() => {
+    if (resuming) announce(resumeAnnouncement);
+  }, [resuming, resumeAnnouncement, announce]);
   const themed = useMemo5(() => themeProps(theme), [theme]);
   const warningCode = resyncWarning ? resyncWarning.code : props.syncWarningCode;
   const warningUrl = resyncWarning ? resyncWarning.url : props.syncWarningUrl;
   const uploadsAvailable = resyncWarning ? resyncWarning.uploadsAvailable : props.uploadsAvailable;
+  const uploadFileSizeLimitMb = resyncWarning ? resyncWarning.uploadFileSizeLimitMb : props.uploadFileSizeLimitMb;
   const chromeValue = useMemo5(
     () => ({
       devChrome,
+      renderOnly,
       uploadsAvailable,
+      uploadFileSizeLimitMb,
       warningCode,
       warningUrl
     }),
-    [devChrome, uploadsAvailable, warningCode, warningUrl]
+    [devChrome, renderOnly, uploadsAvailable, uploadFileSizeLimitMb, warningCode, warningUrl]
   );
   const settings = schema.settings;
   const submitted = api.status === "submitted";
@@ -2602,19 +2919,23 @@ function ResolvedForm(props) {
     const url = safeHttpUrl(settings.redirectUrl);
     if (url) window.location.assign(url);
   }, [liveSubmit, settings.redirectUrl]);
-  const successRef = useRef7(null);
+  const successRef = useRef8(null);
   useEffect8(() => {
     if (liveSubmit) successRef.current?.focus();
   }, [liveSubmit]);
-  const blocksRef = useRef7(null);
-  const prevPageIndex = useRef7(api.pageIndex);
+  const blocksRef = useRef8(null);
+  const prevPageIndex = useRef8(api.pageIndex);
   useEffect8(() => {
     if (prevPageIndex.current === api.pageIndex) return;
     prevPageIndex.current = api.pageIndex;
-    blocksRef.current?.focus();
+    const container = blocksRef.current?.parentElement;
+    const heading = container?.querySelector(".fillo-page-title, .fillo-title");
+    const target = heading ?? blocksRef.current;
+    if (!target) return;
+    if (!target.hasAttribute("tabindex")) target.setAttribute("tabindex", "-1");
+    target.focus();
   }, [api.pageIndex]);
   const appearance = props.appearance;
-  const strings = resolveStrings(props.strings);
   if (api.status === "submitted") {
     return /* @__PURE__ */ jsxs6(
       "div",
@@ -2629,16 +2950,20 @@ function ResolvedForm(props) {
           { slot: "root", status: "submitted" }
         ),
         "data-fillo": "root",
+        "data-fillo-form-id": props.formId,
         "data-state": "submitted",
         ...themed,
         children: [
           props.renderSuccess ? props.renderSuccess() : /* @__PURE__ */ jsxs6(
             "div",
             {
-              className: slotClass3("fillo-success", appearance, { slot: "success", status: "submitted" }),
+              className: slotClass3("fillo-success", appearance, {
+                slot: "success",
+                status: "submitted"
+              }),
               "data-fillo": "success",
               children: [
-                /* @__PURE__ */ jsx7("div", { className: "fillo-success-mark", "aria-hidden": "true", children: "\u2713" }),
+                /* @__PURE__ */ jsx7("div", { className: "fillo-success-mark", "aria-hidden": "true" }),
                 /* @__PURE__ */ jsx7("h2", { className: "fillo-success-title", children: settings.successTitle ?? strings.successTitle }),
                 /* @__PURE__ */ jsx7("p", { className: "fillo-success-message", children: api.duplicateSubmission ? strings.alreadyAnswered : settings.successMessage ?? strings.successMessage })
               ]
@@ -2661,11 +2986,32 @@ function ResolvedForm(props) {
   const progressPos = progressSeq.indexOf(api.page.id);
   const progressStep = progressPos >= 0 ? progressPos + 1 : Math.min(api.pageIndex + 1, progressTotal);
   const submitFixUrl = devChrome && resolutionFailureCode === "form_not_published" && warningCode === "storage_required" ? safeHttpUrl(warningUrl) : null;
+  const invalidFields = [];
+  for (const block of api.blocks) {
+    if (!isField2(block)) continue;
+    const raw = api.errors[block.id];
+    if (!raw) continue;
+    invalidFields.push({
+      field: block,
+      error: raw === REQUIRED_FIELD_MESSAGE2 ? strings.required : raw,
+      inputId: createFilloFieldIds(instanceId, block.id).inputId
+    });
+  }
   const rootClass = slotClass3(`fillo-form ${props.className ?? ""}`, appearance, {
     slot: "root",
     status: api.status
   });
   const formBody = /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx7(
+      "span",
+      {
+        ref: announceRef,
+        className: "fillo-sr-only",
+        role: "status",
+        "aria-live": "polite",
+        "data-fillo": "announce"
+      }
+    ),
     devChrome && /* @__PURE__ */ jsx7(
       DevChrome,
       {
@@ -2675,15 +3021,14 @@ function ResolvedForm(props) {
         staged: props.stagedNotice,
         draft: props.draftNotice,
         warningUrl: props.syncWarningUrl,
-        noClient: !props.client && !props.skipValidation
+        noClient: !props.client && !props.skipValidation && !renderOnly
       }
     ),
-    (api.resumedDraft || api.editingPrevious) && /* @__PURE__ */ jsxs6(
+    resuming && /* @__PURE__ */ jsxs6(
       "div",
       {
         className: slotClass3("fillo-resume", appearance, { slot: "resume" }),
         "data-fillo": "resume",
-        role: "status",
         children: [
           /* @__PURE__ */ jsx7("span", { className: "fillo-resume-text", children: api.editingPrevious ? strings.editNotice : strings.resumeNotice }),
           /* @__PURE__ */ jsx7("button", { type: "button", className: "fillo-resume-clear", onClick: api.resetDraft, children: strings.resumeStartOver })
@@ -2693,7 +3038,9 @@ function ResolvedForm(props) {
     api.resumeLinkFailed && !api.resumedDraft && !api.editingPrevious && /* @__PURE__ */ jsx7(
       "div",
       {
-        className: slotClass3("fillo-resume fillo-resume--expired", appearance, { slot: "resume" }),
+        className: slotClass3("fillo-resume fillo-resume--expired", appearance, {
+          slot: "resume"
+        }),
         "data-fillo": "resume",
         role: "status",
         children: /* @__PURE__ */ jsx7("span", { className: "fillo-resume-text", children: strings.resumeLinkExpired })
@@ -2714,33 +3061,83 @@ function ResolvedForm(props) {
           {
             className: slotClass3("fillo-progress-fill", appearance, { slot: "progressFill" }),
             "data-fillo": "progressFill",
-            style: { "--fillo-progress-value": `${progressStep / progressTotal * 100}%` }
+            style: {
+              "--fillo-progress-value": `${progressStep / progressTotal * 100}%`
+            }
           }
         )
       }
     ),
-    api.pageIndex === 0 && props.showTitle !== false && /* @__PURE__ */ jsxs6("header", { className: slotClass3("fillo-header", appearance, { slot: "header" }), "data-fillo": "header", children: [
-      schema.title && /* @__PURE__ */ jsx7("h1", { className: slotClass3("fillo-title", appearance, { slot: "title" }), "data-fillo": "title", children: schema.title }),
-      schema.description && /* @__PURE__ */ jsx7(
-        "p",
+    api.pageIndex === 0 && props.showTitle !== false && /* @__PURE__ */ jsxs6(
+      "header",
+      {
+        className: slotClass3("fillo-header", appearance, { slot: "header" }),
+        "data-fillo": "header",
+        children: [
+          schema.title && /* @__PURE__ */ jsx7(
+            "h1",
+            {
+              className: slotClass3("fillo-title", appearance, { slot: "title" }),
+              "data-fillo": "title",
+              children: schema.title
+            }
+          ),
+          schema.description && /* @__PURE__ */ jsx7(
+            "p",
+            {
+              className: slotClass3("fillo-form-description", appearance, { slot: "description" }),
+              "data-fillo": "description",
+              children: schema.description
+            }
+          )
+        ]
+      }
+    ),
+    multiPage && api.page.title && api.pageIndex > 0 && /* @__PURE__ */ jsx7(
+      "h2",
+      {
+        className: slotClass3("fillo-page-title", appearance, { slot: "pageTitle" }),
+        "data-fillo": "pageTitle",
+        children: api.page.title
+      }
+    ),
+    invalidFields.length > 0 && /* @__PURE__ */ jsxs6("div", { className: "fillo-error-summary", role: "alert", tabIndex: -1, "data-fillo": "error-summary", children: [
+      /* @__PURE__ */ jsx7("p", { className: "fillo-error-summary-title", children: strings.errorSummaryTitle }),
+      /* @__PURE__ */ jsx7("ul", { children: invalidFields.map(({ field, error, inputId }) => /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsxs6(
+        "a",
         {
-          className: slotClass3("fillo-form-description", appearance, { slot: "description" }),
-          "data-fillo": "description",
-          children: schema.description
+          href: `#${inputId}`,
+          onClick: (e) => {
+            e.preventDefault();
+            focusField(inputId);
+          },
+          children: [
+            field.label,
+            ": ",
+            error
+          ]
         }
-      )
+      ) }, field.id)) })
     ] }),
-    multiPage && api.page.title && api.pageIndex > 0 && /* @__PURE__ */ jsx7("h2", { className: slotClass3("fillo-page-title", appearance, { slot: "pageTitle" }), "data-fillo": "pageTitle", children: api.page.title }),
-    /* @__PURE__ */ jsx7("div", { className: slotClass3("fillo-blocks", appearance, { slot: "blocks" }), "data-fillo": "blocks", ref: blocksRef, tabIndex: -1, children: api.blocks.map((block) => /* @__PURE__ */ jsx7(
-      BlockRenderer,
+    /* @__PURE__ */ jsx7(
+      "div",
       {
-        block,
-        api,
-        components: props.components,
-        customComponents: props.customComponents
-      },
-      block.id
-    )) }),
+        className: slotClass3("fillo-blocks", appearance, { slot: "blocks" }),
+        "data-fillo": "blocks",
+        ref: blocksRef,
+        tabIndex: -1,
+        children: api.blocks.map((block) => /* @__PURE__ */ jsx7(
+          BlockRenderer,
+          {
+            block,
+            api,
+            components: props.components,
+            customComponents: props.customComponents
+          },
+          block.id
+        ))
+      }
+    ),
     !displayOnly && /* @__PURE__ */ jsx7(
       "input",
       {
@@ -2780,43 +3177,66 @@ function ResolvedForm(props) {
         /* @__PURE__ */ jsx7("a", { href: submitFixUrl, target: "_blank", rel: "noopener noreferrer", children: submitFixUrl })
       ] })
     ] }),
-    showFooter && /* @__PURE__ */ jsxs6("footer", { className: slotClass3("fillo-footer", appearance, { slot: "footer" }), "data-fillo": "footer", children: [
-      multiPage && !api.isFirstPage && /* @__PURE__ */ jsx7(
-        "button",
-        {
-          type: "button",
-          className: slotClass3("fillo-button fillo-button--ghost", appearance, { slot: "button", variant: "ghost" }),
-          "data-fillo": "button",
-          onClick: api.back,
-          children: strings.back
-        }
-      ),
-      showPrimaryButton && /* @__PURE__ */ jsx7(
-        "button",
-        {
-          type: "submit",
-          className: slotClass3("fillo-button fillo-button--primary", appearance, { slot: "button", variant: "primary" }),
-          "data-fillo": "button",
-          disabled: api.status === "submitting" || api.uploading || // Wait for the human check before enabling submit (never
-          // "Next"). The server rejects a tokenless submit regardless —
-          // this is UX only.
-          showChallenge && !challengeToken,
-          children: api.uploading ? strings.uploading : api.status === "submitting" ? strings.submitting : api.isLastPage ? settings.submitLabel ?? strings.submit : strings.next
-        }
-      )
-    ] }),
+    showFooter && /* @__PURE__ */ jsxs6(
+      "footer",
+      {
+        className: slotClass3("fillo-footer", appearance, { slot: "footer" }),
+        "data-fillo": "footer",
+        children: [
+          multiPage && !api.isFirstPage && /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "button",
+              className: slotClass3("fillo-button fillo-button--ghost", appearance, {
+                slot: "button",
+                variant: "ghost"
+              }),
+              "data-fillo": "button",
+              onClick: api.back,
+              children: strings.back
+            }
+          ),
+          showPrimaryButton && /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "submit",
+              className: slotClass3("fillo-button fillo-button--primary", appearance, {
+                slot: "button",
+                variant: "primary"
+              }),
+              "data-fillo": "button",
+              disabled: api.status === "submitting" || api.uploading || // Wait for the human check before enabling submit (never
+              // "Next"). The server rejects a tokenless submit regardless —
+              // this is UX only.
+              showChallenge && !challengeToken,
+              children: api.uploading ? strings.uploading : api.status === "submitting" ? strings.submitting : api.isLastPage ? settings.submitLabel ?? strings.submit : strings.next
+            }
+          )
+        ]
+      }
+    ),
     props.poweredBy && /* @__PURE__ */ jsx7(PoweredBy, { label: props.brandLabel, href: props.brandHref })
   ] });
-  return /* @__PURE__ */ jsx7(FilloContext.Provider, { value: api, children: /* @__PURE__ */ jsx7(FilloChromeContext.Provider, { value: chromeValue, children: /* @__PURE__ */ jsx7(FilloStringsContext.Provider, { value: strings, children: /* @__PURE__ */ jsx7(FilloAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx7(FilloInstanceIdContext.Provider, { value: instanceId, children: displayOnly ? (
+  return /* @__PURE__ */ jsx7(FilloContext.Provider, { value: api, children: /* @__PURE__ */ jsx7(FilloChromeContext.Provider, { value: chromeValue, children: /* @__PURE__ */ jsx7(FilloAnnounceContext.Provider, { value: announce, children: /* @__PURE__ */ jsx7(FilloStringsContext.Provider, { value: strings, children: /* @__PURE__ */ jsx7(FilloAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx7(FilloInstanceIdContext.Provider, { value: instanceId, children: displayOnly ? (
     // Display-only preview: a plain div (no form element to submit) with
     // every control inside a natively disabled fieldset — unfocusable
     // and unfillable even without the stylesheet or inert support.
-    /* @__PURE__ */ jsx7("div", { className: rootClass, "data-fillo": "preview-form", "data-state": "preview", ...themed, children: /* @__PURE__ */ jsx7("fieldset", { disabled: true, className: "fillo-not-open-fields", children: formBody }) })
+    /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: rootClass,
+        "data-fillo": "preview-form",
+        "data-state": "preview",
+        ...themed,
+        children: /* @__PURE__ */ jsx7("fieldset", { disabled: true, className: "fillo-not-open-fields", children: formBody })
+      }
+    )
   ) : /* @__PURE__ */ jsx7(
     "form",
     {
       className: rootClass,
       "data-fillo": "root",
+      "data-fillo-form-id": props.formId,
       "data-state": api.status,
       "data-page": api.pageIndex + 1,
       "data-last-page": api.isLastPage ? "" : void 0,
@@ -2826,20 +3246,20 @@ function ResolvedForm(props) {
         e.preventDefault();
         const formEl = e.currentTarget;
         if (api.isLastPage) {
-          void api.submit().then(() => focusFirstInvalid(formEl)).catch(() => {
+          void api.submit().then(() => focusErrorSummary(formEl)).catch(() => {
           });
         } else {
           api.next();
-          focusFirstInvalid(formEl);
+          focusErrorSummary(formEl);
         }
       },
       children: formBody
     }
-  ) }) }) }) }) });
+  ) }) }) }) }) }) });
 }
 
 // src/jsx.tsx
-import { useRef as useRef8 } from "react";
+import { useRef as useRef9 } from "react";
 import {
   codeFormFromJsx,
   FilloJsxError,
@@ -2853,7 +3273,7 @@ function JsxForm(props) {
   const { id, title, description, settings, theme, client, children, ...rest } = props;
   const compiled = codeFormFromJsx({ id, title, description, settings, theme }, children);
   const json = JSON.stringify(compiled.schema) + JSON.stringify(compiled.theme ?? null);
-  const memo2 = useRef8(null);
+  const memo2 = useRef9(null);
   if (memo2.current && memo2.current.json !== json && isDevEnv()) {
     console.warn(
       `[fillo] "${id}": form structure changed between renders. If you just edited the form, ignore this. Otherwise: conditional questions are visibleIf={when(\u2026)\u2026}, never {cond && <Fillo.\u2026/>} \u2014 a per-visitor schema churns drafts in your workspace.`
@@ -2862,7 +3282,7 @@ function JsxForm(props) {
   if (!memo2.current || memo2.current.json !== json) {
     memo2.current = { json, form: compiled };
   }
-  return /* @__PURE__ */ jsx8(FilloForm, { form: memo2.current.form, client, ...rest });
+  return /* @__PURE__ */ jsx8(FilloForm, { ...{ form: memo2.current.form, client, ...rest } });
 }
 function defineFormFromJsx(element) {
   if (!element || element.type !== JsxForm) {
@@ -2897,6 +3317,7 @@ var Fillo = {
   Date: B.Date,
   FileUpload: B.FileUpload,
   Hidden: B.Hidden,
+  Calculated: B.Calculated,
   Custom: B.Custom,
   Heading: B.Heading,
   Paragraph: B.Paragraph,
@@ -2906,9 +3327,10 @@ var Fillo = {
 };
 
 // src/provider.tsx
-import { useId as useId3, useMemo as useMemo6, useState as useState7 } from "react";
+import { useEffect as useEffect9, useId as useId3, useMemo as useMemo6, useState as useState7 } from "react";
 import {
   FilloError as FilloError3,
+  createClient as createClient2,
   formSchemasEqual as formSchemasEqual2,
   isFilloError as isFilloError3,
   normalizeFormSchema as normalizeFormSchema2,
@@ -2926,13 +3348,33 @@ function FilloProvider({
   onError,
   renderError,
   preview,
+  renderOnly,
+  skipValidation,
   ...options
 }) {
+  const localPreview = renderOnly === true || skipValidation === true;
+  const activeClient = useMemo6(
+    () => localPreview ? void 0 : client ?? (formId ? createClient2() : void 0),
+    [client, formId, localPreview]
+  );
+  const activeFormId = localPreview ? void 0 : formId;
   const instanceId = useId3().replace(/:/g, "");
   const devEnv = useIsDevEnv();
   const devChrome = preview === true || devEnv;
   if (preview === true) warnPreviewInProduction();
   const codeForm = isCodeForm2(form) ? form : null;
+  const targetError = useMemo6(
+    () => !formId && !localPreview && (!codeForm || !client) ? new FilloError3(
+      "This form has no Fillo target. Pass formId with the schema, use a defineForm() value with client, or set renderOnly for a non-submitting preview.",
+      422,
+      void 0,
+      "form_target_required"
+    ) : null,
+    [client, codeForm, formId, localPreview]
+  );
+  useEffect9(() => {
+    if (targetError) onError?.(targetError);
+  }, [onError, targetError]);
   const {
     formId: syncedFormId,
     status: syncedStatus,
@@ -2942,10 +3384,11 @@ function FilloProvider({
     accepting: syncedAccepting,
     acceptingReason: syncedAcceptingReason,
     uploadsAvailable,
+    uploadFileSizeLimitMb,
     warningCode,
     warningUrl
-  } = useCodeFormSync(form, client, onError, {
-    allowUnsynced: Boolean(!client || formId || options.skipValidation)
+  } = useCodeFormSync(form, activeClient, onError, {
+    allowUnsynced: Boolean(!activeClient || activeFormId || localPreview)
   });
   const [resyncWarning, setResyncWarning] = useState7(null);
   const rawSchema = codeForm ? resolvedSchema && !devChrome ? resolvedSchema : codeForm.schema : form;
@@ -2955,13 +3398,14 @@ function FilloProvider({
   }
   const schema = normalized.schema;
   const resolveFormId = useMemo6(
-    () => codeForm && client?.key ? async () => {
+    () => codeForm && activeClient?.key ? async () => {
       try {
-        const result = await syncCodeForm3(client, codeForm, { bypassCache: true });
+        const result = await syncCodeForm3(activeClient, codeForm, { bypassCache: true });
         setResyncWarning({
           code: result.warningCode,
           url: result.warningUrl,
-          uploadsAvailable: result.uploadsAvailable
+          uploadsAvailable: result.uploadsAvailable,
+          uploadFileSizeLimitMb: result.uploadFileSizeLimitMb
         });
         if (result.status === "draft") {
           throw new FilloError3(
@@ -3018,13 +3462,14 @@ function FilloProvider({
         throw failure;
       }
     } : void 0,
-    [client, codeForm, onError, schema]
+    [activeClient, codeForm, onError, schema]
   );
   const api = useFilloController({
     ...options,
-    client,
+    client: activeClient,
     form: schema,
-    formId: syncedFormId ?? formId,
+    formId: syncedFormId ?? activeFormId ?? void 0,
+    skipValidation: localPreview,
     resolveFormId,
     // Dev chrome (preview or dev env) surfaces the developer-grade resolution
     // failure (message + code); an explicit option wins.
@@ -3033,26 +3478,40 @@ function FilloProvider({
     // method; recorded per response so usage stays measurable.
     surface: "headless"
   });
-  useDraftFlush(api);
+  useDraftFlush(api, !localPreview);
   const freshWarningCode = resyncWarning ? resyncWarning.code : warningCode;
   const freshWarningUrl = resyncWarning ? resyncWarning.url : warningUrl;
   const freshUploadsAvailable = resyncWarning ? resyncWarning.uploadsAvailable : uploadsAvailable;
+  const freshUploadFileSizeLimitMb = resyncWarning ? resyncWarning.uploadFileSizeLimitMb : uploadFileSizeLimitMb;
   const chromeValue = useMemo6(
     () => ({
       devChrome,
+      renderOnly: localPreview,
       uploadsAvailable: freshUploadsAvailable,
+      uploadFileSizeLimitMb: freshUploadFileSizeLimitMb,
       warningCode: freshWarningCode,
       warningUrl: freshWarningUrl
     }),
-    [devChrome, freshUploadsAvailable, freshWarningCode, freshWarningUrl]
+    [
+      devChrome,
+      localPreview,
+      freshUploadsAvailable,
+      freshUploadFileSizeLimitMb,
+      freshWarningCode,
+      freshWarningUrl
+    ]
   );
   const resolvedStrings = resolveStrings2(strings);
-  const canonicalSyncError = syncError && !options.skipValidation ? syncError : null;
+  if (targetError) {
+    if (renderError) return /* @__PURE__ */ jsx9(Fragment4, { children: renderError(targetError) });
+    throw targetError;
+  }
+  const canonicalSyncError = syncError && !localPreview ? syncError : null;
   if (canonicalSyncError && renderError) return /* @__PURE__ */ jsx9(Fragment4, { children: renderError(canonicalSyncError) });
   if (canonicalSyncError && !devChrome) return null;
-  if (codeFormSyncing && !options.skipValidation && !devChrome) return null;
-  const notPublished = Boolean(codeForm) && syncedStatus === "draft" && !options.skipValidation;
-  const notAccepting = Boolean(codeForm) && syncedStatus === "published" && syncedAccepting === false && !options.skipValidation;
+  if (codeFormSyncing && !localPreview && !devChrome) return null;
+  const notPublished = Boolean(codeForm) && syncedStatus === "draft" && !localPreview;
+  const notAccepting = Boolean(codeForm) && syncedStatus === "published" && syncedAccepting === false && !localPreview;
   if ((notPublished || notAccepting) && !devChrome) {
     const error = notPublished ? new FilloError3("This form isn't published yet.", 403, void 0, "form_not_published") : new FilloError3(
       "This form is no longer accepting responses.",
@@ -3067,7 +3526,7 @@ function FilloProvider({
 
 // src/index.ts
 import {
-  createClient as createClient2,
+  createClient as createClient3,
   provisionWorkspace,
   when,
   FilloJsxError as FilloJsxError2,
@@ -3094,7 +3553,7 @@ export {
   FilloJsxError2 as FilloJsxError,
   FilloProvider,
   FormField,
-  createClient2 as createClient,
+  createClient3 as createClient,
   defineForm,
   provisionWorkspace,
   useField,