@usefillo/react 0.9.0 → 0.11.0

package/dist/index.js

@@ -1,19 +1,31 @@
 "use client";
 
 // src/FilloForm.tsx
-import { useCallback, useEffect as useEffect8, useId as useId2, useMemo as useMemo5, useRef as useRef7, useState as useState6 } from "react";
+import {
+  useCallback,
+  useEffect as useEffect8,
+  useId as useId2,
+  useMemo as useMemo5,
+  useRef as useRef8,
+  useState as useState6,
+  useSyncExternalStore as useSyncExternalStore2
+} from "react";
 import {
   FilloError as FilloError2,
   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";
@@ -61,11 +73,96 @@ function useStrings() {
   return useContext(FilloStringsContext);
 }
 
+// src/chrome.tsx
+import { isBuildTimeDevEnv } from "@usefillo/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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;
+  }
+}
+var warnedPreviewInProduction = false;
+function warnPreviewInProduction() {
+  if (warnedPreviewInProduction || isBuildTimeDevEnv()) return;
+  warnedPreviewInProduction = true;
+  console.warn(
+    "[fillo] `preview` is enabled in a production build. Preview is cosmetic only \u2014 it shows developer chrome and never changes where submissions go or whether they are accepted \u2014 but remove it before respondents see this page."
+  );
+}
+function PreviewBadge() {
+  return /* @__PURE__ */ jsx("span", { className: "fillo-preview-badge", "data-fillo": "preview-badge", children: "Preview" });
+}
+function DevNoClientNotice() {
+  return /* @__PURE__ */ jsxs("div", { className: "fillo-devwarning", role: "alert", children: [
+    /* @__PURE__ */ jsx("strong", { children: "No Fillo client connected." }),
+    " This form is render-only and won\u2019t save responses. Pass a ",
+    /* @__PURE__ */ jsx("code", { children: "client" }),
+    " to collect them in Fillo, or forward them with webhooks. (This notice only appears in development and preview.)"
+  ] });
+}
+function DevDraftNotice({ warningUrl }) {
+  const safeUrl = safeHttpUrl(warningUrl);
+  return /* @__PURE__ */ jsxs("div", { className: "fillo-devwarning", role: "alert", children: [
+    /* @__PURE__ */ jsx("strong", { children: "Draft form." }),
+    " It renders here, but it won\u2019t accept responses until you publish it in your Fillo dashboard.",
+    " ",
+    safeUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
+      "Connect storage to publish:",
+      " ",
+      /* @__PURE__ */ jsx("a", { href: safeUrl, target: "_blank", rel: "noopener noreferrer", children: safeUrl }),
+      ".",
+      " "
+    ] }),
+    "(This notice only appears in development and preview.)"
+  ] });
+}
+function DevStagedNotice() {
+  return /* @__PURE__ */ jsxs("div", { className: "fillo-devwarning", role: "alert", children: [
+    /* @__PURE__ */ jsx("strong", { children: "Code changes are staged." }),
+    " This local preview is not the live form yet. Publish the changes in Fillo before deploying them for respondents."
+  ] });
+}
+function DevSyncErrorNotice({ error }) {
+  return /* @__PURE__ */ jsxs("div", { className: "fillo-devwarning", role: "alert", children: [
+    /* @__PURE__ */ jsxs("strong", { children: [
+      "Form sync needs attention",
+      error.code ? ` (${error.code})` : "",
+      "."
+    ] }),
+    " ",
+    error.message,
+    " The safe form remains available for development."
+  ] });
+}
+function DevChrome(props) {
+  const notice = props.devNotices === false ? null : props.syncError ? /* @__PURE__ */ jsx(DevSyncErrorNotice, { error: props.syncError }) : props.staged ? /* @__PURE__ */ jsx(DevStagedNotice, {}) : props.draft ? /* @__PURE__ */ jsx(DevDraftNotice, { warningUrl: props.warningUrl }) : props.noClient ? /* @__PURE__ */ jsx(DevNoClientNotice, {}) : null;
+  if (!props.preview && !notice) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    props.preview && /* @__PURE__ */ jsx(PreviewBadge, {}),
+    notice
+  ] });
+}
+
 // src/context.ts
 import { allFields } from "@usefillo/core";
 import { createContext as createContext2, useContext as useContext2, useId, useMemo } from "react";
 var FilloContext = createContext2(null);
 var FilloInstanceIdContext = createContext2(null);
+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, "");
@@ -128,6 +225,12 @@ function useFilloController(options) {
       surface: options.surface ?? "headless",
       // Wrapped so the engine (created once) always calls the latest resolver.
       resolveFormId: options.resolveFormId ? () => optsRef.current.resolveFormId() : void 0,
+      // A getter, not a captured boolean: the dev-chrome gate upgrades right
+      // after hydration (build-time snapshot → hostname-aware check), but the
+      // engine is created once at mount and reads this at submit time.
+      get verboseResolutionErrors() {
+        return optsRef.current.verboseResolutionErrors;
+      },
       respondent: options.respondent,
       // Challenge wiring read through optsRef so the engine (created once) sees
       // the latest token/reset each submit — the widget solves after mount.
@@ -164,11 +267,11 @@ function useFilloController(options) {
     [store, state, options.form, options.formId, options.client]
   );
 }
-function useDraftFlush(api) {
-  const enabled = Boolean(api.form.settings.saveProgress);
+function useDraftFlush(api, enabled = true) {
+  const active = enabled && Boolean(api.form.settings.saveProgress);
   const flush = api.flushDraft;
   useEffect(() => {
-    if (!enabled || typeof window === "undefined") return;
+    if (!active || typeof window === "undefined") return;
     const onPageHide = () => flush();
     const onVisibility = () => {
       if (document.visibilityState === "hidden") flush();
@@ -179,7 +282,7 @@ function useDraftFlush(api) {
       window.removeEventListener("pagehide", onPageHide);
       document.removeEventListener("visibilitychange", onVisibility);
     };
-  }, [enabled, flush]);
+  }, [active, flush]);
 }
 
 // src/define.ts
@@ -230,8 +333,15 @@ function useCodeFormSync(form, client, onError, options) {
         error: null,
         noticeError: null,
         staged: false,
+        accepting: void 0,
+        acceptingReason: void 0,
+        uploadsAvailable: void 0,
+        uploadFileSizeLimitMb: void 0,
         resolvedSchema: void 0,
-        resolvedTheme: void 0
+        resolvedTheme: void 0,
+        warning: void 0,
+        warningCode: void 0,
+        warningUrl: void 0
       } : {
         key: syncKey,
         client,
@@ -286,11 +396,22 @@ function useCodeFormSync(form, client, onError, options) {
         error: null,
         noticeError,
         staged: Boolean(r.staged),
+        accepting: r.accepting,
+        acceptingReason: r.acceptingReason,
+        uploadsAvailable: r.uploadsAvailable,
+        uploadFileSizeLimitMb: r.uploadFileSizeLimitMb,
         resolvedSchema: r.resolvedSchema,
-        resolvedTheme: r.resolvedTheme
+        resolvedTheme: r.resolvedTheme,
+        warning: r.warning,
+        warningCode: r.warningCode,
+        warningUrl: r.warningUrl
       });
       const dashboardUrl = `${client.baseUrl || "https://fillo.so"}/forms/${r.formId}`;
-      if (r.warning) console.warn(`[fillo] ${r.warning}`);
+      if (r.warning) {
+        console.warn(
+          `[fillo] ${r.warning}${r.warningUrl ? ` Connect storage to publish: ${r.warningUrl}` : ""}`
+        );
+      }
       if (noticeError) {
         console.warn(
           `[fillo] form sync needs attention (${noticeError.code}): ${noticeError.message}`
@@ -337,8 +458,15 @@ function useCodeFormSync(form, client, onError, options) {
     noticeError: synced.noticeError,
     syncing: Boolean(syncKey) && !synced.settled,
     staged: synced.staged,
+    accepting: synced.accepting,
+    acceptingReason: synced.acceptingReason,
+    uploadsAvailable: synced.uploadsAvailable,
+    uploadFileSizeLimitMb: synced.uploadFileSizeLimitMb,
     resolvedSchema: synced.resolvedSchema,
-    resolvedTheme: synced.resolvedTheme
+    resolvedTheme: synced.resolvedTheme,
+    warning: synced.warning,
+    warningCode: synced.warningCode,
+    warningUrl: synced.warningUrl
   } : {
     formId: null,
     status: null,
@@ -350,12 +478,25 @@ 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,
+  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,
@@ -366,7 +507,7 @@ import {
   toE164
 } from "@usefillo/core";
 import { useEffect as useEffect3, useLayoutEffect, useMemo as useMemo3, useRef as useRef3, useState as useState2 } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function localeCountry() {
   if (typeof navigator === "undefined") return void 0;
   const tag = navigator.languages?.[0] || navigator.language || "";
@@ -407,8 +548,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(() => {
@@ -435,29 +577,37 @@ 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();
   }
   const describedBy = [field.description ? ids.descriptionId : null, error ? ids.errorId : null].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ jsxs("div", { ...slots.wrapperProps(`fillo-field fillo-field--phone${error ? " fillo-field--error" : ""}`), children: [
-    /* @__PURE__ */ jsxs("label", { className: slots.label, "data-fillo": "label", id: ids.labelId, htmlFor: ids.inputId, children: [
+  return /* @__PURE__ */ jsxs2("div", { ...slots.wrapperProps(`fillo-field fillo-field--phone${error ? " fillo-field--error" : ""}`), children: [
+    /* @__PURE__ */ jsxs2("label", { className: slots.label, "data-fillo": "label", id: ids.labelId, htmlFor: ids.inputId, children: [
       field.label,
-      !field.required && /* @__PURE__ */ jsx("span", { className: "fillo-optional", children: strings.optional })
+      !field.required && /* @__PURE__ */ jsx2("span", { className: "fillo-optional", children: strings.optional })
     ] }),
-    field.description && /* @__PURE__ */ jsx("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
-    /* @__PURE__ */ jsxs("div", { className: "fillo-phone", children: [
-      /* @__PURE__ */ jsx(CountrySelect, { country, onPick: pickCountry, labelledBy: ids.labelId }),
-      /* @__PURE__ */ jsx(
+    field.description && /* @__PURE__ */ jsx2("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
+    /* @__PURE__ */ jsxs2("div", { className: "fillo-phone", children: [
+      /* @__PURE__ */ jsx2(CountrySelect, { country, onPick: pickCountry, labelledBy: ids.labelId }),
+      /* @__PURE__ */ jsx2(
         "input",
         {
           ref: inputRef,
@@ -476,7 +626,7 @@ function PhoneField({ field, value, error, setValue, ids: providedIds }) {
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx("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({
@@ -484,6 +634,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);
@@ -492,19 +644,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]);
@@ -531,8 +686,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);
   }
@@ -552,8 +714,31 @@ function CountrySelect({
       triggerRef.current?.focus();
     }
   }
-  return /* @__PURE__ */ jsxs("div", { className: "fillo-phone-country", ref: rootRef, children: [
-    /* @__PURE__ */ jsxs(
+  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",
       {
         ref: triggerRef,
@@ -564,18 +749,19 @@ function CountrySelect({
         "aria-controls": open ? listId : void 0,
         "aria-label": `Country: ${country.name} (+${country.dialCode})`,
         onClick: () => setOpen((o) => !o),
+        onKeyDown: onTriggerKeyDown,
         children: [
-          /* @__PURE__ */ jsx("span", { className: "fillo-phone-flag-emoji", "aria-hidden": "true", children: flagEmoji(country.iso2) }),
-          /* @__PURE__ */ jsxs("span", { className: "fillo-phone-dial", children: [
+          /* @__PURE__ */ jsx2("span", { className: "fillo-phone-flag-emoji", "aria-hidden": "true", children: flagEmoji(country.iso2) }),
+          /* @__PURE__ */ jsxs2("span", { className: "fillo-phone-dial", children: [
             "+",
             country.dialCode
           ] }),
-          /* @__PURE__ */ jsx("span", { className: "fillo-phone-caret", "aria-hidden": "true", children: "\u25BE" })
+          /* @__PURE__ */ jsx2("span", { className: "fillo-phone-caret", "aria-hidden": "true", children: "\u25BE" })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs("div", { ref: popoverRef, className: `fillo-phone-popover fillo-phone-popover--${placement}`, children: [
-      /* @__PURE__ */ jsx(
+    open && /* @__PURE__ */ jsxs2("div", { ref: popoverRef, className: `fillo-phone-popover fillo-phone-popover--${placement}`, children: [
+      /* @__PURE__ */ jsx2(
         "input",
         {
           ref: searchRef,
@@ -596,8 +782,8 @@ function CountrySelect({
           onKeyDown: onSearchKey
         }
       ),
-      /* @__PURE__ */ jsxs("ul", { className: "fillo-phone-list", role: "listbox", id: listId, "aria-label": "Country", children: [
-        matches.map((c, i) => /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsxs2("ul", { className: "fillo-phone-list", role: "listbox", id: listId, "aria-label": "Country", children: [
+        matches.map((c, i) => /* @__PURE__ */ jsxs2(
           "li",
           {
             id: `${listId}-opt-${i}`,
@@ -610,9 +796,9 @@ function CountrySelect({
               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: [
+              /* @__PURE__ */ jsx2("span", { className: "fillo-phone-flag-emoji", "aria-hidden": "true", children: flagEmoji(c.iso2) }),
+              /* @__PURE__ */ jsx2("span", { className: "fillo-phone-option-name", children: c.name }),
+              /* @__PURE__ */ jsxs2("span", { className: "fillo-phone-option-dial", children: [
                 "+",
                 c.dialCode
               ] })
@@ -620,7 +806,7 @@ function CountrySelect({
           },
           c.iso2
         )),
-        matches.length === 0 && /* @__PURE__ */ jsx("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" })
       ] })
     ] })
   ] });
@@ -628,13 +814,14 @@ function CountrySelect({
 
 // src/signature.tsx
 import { useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function SignatureField({ field, value, error, setValue, ids: providedIds }) {
   const ids = useFilloFieldIds(field.id, providedIds);
   const slots = useFieldSlots(field, error);
   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("");
@@ -731,28 +918,30 @@ 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__ */ jsxs2("div", { ...slots.wrapperProps(`fillo-field fillo-field--signature${error ? " fillo-field--error" : ""}`), children: [
-    /* @__PURE__ */ jsxs2("span", { className: slots.label, "data-fillo": "label", id: ids.labelId, children: [
+  return /* @__PURE__ */ jsxs3("div", { ...slots.wrapperProps(`fillo-field fillo-field--signature${error ? " fillo-field--error" : ""}`), children: [
+    /* @__PURE__ */ jsxs3("span", { className: slots.label, "data-fillo": "label", id: ids.labelId, children: [
       field.label,
-      !field.required && /* @__PURE__ */ jsx2("span", { className: "fillo-optional", children: strings.optional })
+      !field.required && /* @__PURE__ */ jsx3("span", { className: "fillo-optional", children: strings.optional })
     ] }),
-    field.description && /* @__PURE__ */ jsx2("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
-    /* @__PURE__ */ jsxs2(
+    field.description && /* @__PURE__ */ jsx3("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
+    /* @__PURE__ */ jsxs3(
       "div",
       {
         role: "group",
         "aria-labelledby": ids.labelId,
         "aria-describedby": describedBy,
         children: [
-          /* @__PURE__ */ jsxs2("div", { className: slots.control("fillo-signature"), "data-fillo": "control", children: [
-            /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsxs3("div", { className: slots.control("fillo-signature"), "data-fillo": "control", children: [
+            /* @__PURE__ */ jsx3(
               "canvas",
               {
                 ref: canvasRef,
                 className: "fillo-signature-canvas",
-                "aria-hidden": "true",
+                role: "img",
+                "aria-label": hasInk ? strings.signatureSigned : strings.signatureEmpty,
                 onPointerDown: start,
                 onPointerMove: move,
                 onPointerUp: end,
@@ -760,15 +949,16 @@ function SignatureField({ field, value, error, setValue, ids: providedIds }) {
                 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" })
+            hasInk && /* @__PURE__ */ jsx3("button", { type: "button", className: "fillo-signature-clear", onClick: clear, children: "Clear" }),
+            !hasInk && /* @__PURE__ */ jsx3("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(
+          /* @__PURE__ */ jsxs3("div", { className: "fillo-signature-type", children: [
+            /* @__PURE__ */ jsx3("label", { className: "fillo-signature-type-label", htmlFor: typedInputId, children: "Or type your full name to sign" }),
+            /* @__PURE__ */ jsx3(
               "input",
               {
                 id: typedInputId,
+                ref: typedInputRef,
                 type: "text",
                 className: "fillo-input fillo-signature-type-input",
                 autoComplete: "name",
@@ -787,13 +977,13 @@ function SignatureField({ 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__ */ jsx3("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, children: error })
   ] });
 }
 
 // src/upload.tsx
 import { useEffect as useEffect5, useRef as useRef5, useState as useState4 } from "react";
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function uploadStatus(inFlight, doneCount, strings) {
   const failed = inFlight.filter((f) => f.error).length;
   const active = inFlight.length - failed;
@@ -809,10 +999,19 @@ function formatBytes(bytes) {
   if (bytes < 1024 ** 3) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
   return `${(bytes / 1024 ** 3).toFixed(2)} GB`;
 }
+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();
+  const chrome = useFilloChrome();
   const schema = field;
   const inputRef = useRef5(null);
   const [inFlight, setInFlight] = useState4([]);
@@ -834,9 +1033,12 @@ 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 canUpload = Boolean(api.client && api.formId);
+  const storageBlocked = chrome?.uploadsAvailable === false;
+  const storageUrl = storageBlocked && chrome?.devChrome ? safeHttpUrl(chrome.warningUrl) : null;
+  const canUpload = Boolean(api.client && api.formId) && !storageBlocked;
   const activeInFlight = inFlight.filter((f) => !f.error).length;
   const remaining = maxFiles - files.length - activeInFlight;
   async function startUpload(file) {
@@ -871,7 +1073,7 @@ 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;
+        const message = uploadFailureMessage(err, strings);
         setInFlight(
           (prev) => prev.map((f) => f.key === key ? { ...f, error: message } : f)
         );
@@ -898,13 +1100,13 @@ 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__ */ jsxs3("div", { ...slots.wrapperProps(`fillo-field fillo-field--file_upload${error ? " fillo-field--error" : ""}`), children: [
-    /* @__PURE__ */ jsxs3("label", { className: slots.label, "data-fillo": "label", id: ids.labelId, htmlFor: ids.inputId, children: [
+  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__ */ jsx3("span", { className: "fillo-optional", children: strings.optional })
+      !field.required && /* @__PURE__ */ jsx4("span", { className: "fillo-optional", children: strings.optional })
     ] }),
-    field.description && /* @__PURE__ */ jsx3("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
-    remaining > 0 && /* @__PURE__ */ jsxs3(
+    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",
@@ -935,7 +1137,7 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
           }
         },
         children: [
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(
             "input",
             {
               ref: inputRef,
@@ -948,14 +1150,20 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
               onChange: (e) => canUpload && handleFiles(e.target.files)
             }
           ),
-          canUpload ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-            /* @__PURE__ */ jsx3("span", { className: "fillo-dropzone-title", children: strings.dropzoneTitle(maxFiles > 1) }),
-            /* @__PURE__ */ jsx3("span", { className: "fillo-dropzone-hint", children: strings.dropzoneHint(maxMb) })
-          ] }) : /* @__PURE__ */ jsx3("span", { className: "fillo-dropzone-hint", children: strings.uploadsDisabled })
+          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__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       "div",
       {
         role: "status",
@@ -965,11 +1173,12 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
         children: uploadStatus(inFlight, files.length, strings)
       }
     ),
-    (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(
+    (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("span", { className: "fillo-sr-only", children: "Uploaded" }),
+        /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
@@ -980,7 +1189,7 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
           }
         )
       ] }, f.fileId)),
-      inFlight.map((f) => /* @__PURE__ */ jsxs3(
+      inFlight.map((f) => /* @__PURE__ */ jsxs4(
         "li",
         {
           className: `fillo-file${f.error ? " fillo-file--failed" : ""}`,
@@ -992,42 +1201,44 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
             "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 }),
-              f.file && !f.tooLarge && remaining > 0 && /* @__PURE__ */ jsx3(
-                "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__ */ 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: [
+            /* @__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__ */ jsx3("span", { className: "fillo-progress", "aria-hidden": "true", children: /* @__PURE__ */ jsx3("span", { className: "fillo-progress-bar", style: { width: `${f.fraction * 100}%` } }) }),
-              /* @__PURE__ */ jsx3(
+              /* @__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",
@@ -1043,12 +1254,12 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
         f.key
       ))
     ] }),
-    error && /* @__PURE__ */ jsx3("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, role: "alert", children: error })
+    error && /* @__PURE__ */ jsx4("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, children: error })
   ] });
 }
 
 // src/fields.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function fieldAria(field, error, ids) {
   const describedBy = [
     field.description ? ids.descriptionId : null,
@@ -1072,9 +1283,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,
@@ -1095,7 +1303,7 @@ function FieldShell({
   const descriptionCls = useSlotClass("fillo-description", { slot: "fieldDescription", ...state });
   const errorCls = useSlotClass("fillo-error", { slot: "error", ...state });
   const strings = useStrings();
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       className: fieldCls,
@@ -1105,13 +1313,13 @@ function FieldShell({
       "data-invalid": error ? "" : void 0,
       "data-required": field.required ? "" : void 0,
       children: [
-        /* @__PURE__ */ jsxs4("label", { className: labelCls, "data-fillo": "label", id: ids.labelId, htmlFor: ids.inputId, children: [
+        /* @__PURE__ */ jsxs5("label", { className: labelCls, "data-fillo": "label", id: ids.labelId, htmlFor: ids.inputId, children: [
           field.label,
-          !field.required && /* @__PURE__ */ jsx4("span", { className: "fillo-optional", children: strings.optional })
+          !field.required && /* @__PURE__ */ jsx5("span", { className: "fillo-optional", children: strings.optional })
         ] }),
-        field.description && /* @__PURE__ */ jsx4("p", { className: descriptionCls, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
+        field.description && /* @__PURE__ */ jsx5("p", { className: descriptionCls, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
         children,
-        error && /* @__PURE__ */ jsx4("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 })
       ]
     }
   );
@@ -1119,13 +1327,15 @@ 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__ */ jsx4(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx5(
     "input",
     {
       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,
@@ -1136,10 +1346,75 @@ 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 === "grouped";
+  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, { 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)) {
+          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));
+        } 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);
-  return /* @__PURE__ */ jsx4(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx5(
     "textarea",
     {
       id: ids.inputId,
@@ -1176,7 +1451,7 @@ var OPTION_ICON_PATHS = {
 };
 function ChoiceIcon({ icon }) {
   if (!icon) return null;
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "svg",
     {
       className: "fillo-option-icon",
@@ -1187,7 +1462,7 @@ function ChoiceIcon({ icon }) {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx4("path", { d: OPTION_ICON_PATHS[icon] })
+      children: /* @__PURE__ */ jsx5("path", { d: OPTION_ICON_PATHS[icon] })
     }
   );
 }
@@ -1201,7 +1476,7 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
   const isOtherValue = typeof value === "string" && value !== "" && !choice.options.some((o) => o.id === value);
   const [otherOn, setOtherOn] = useState5(isOtherValue);
   const otherActive = isOtherValue || value === "" && otherOn;
-  return /* @__PURE__ */ jsx4(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx5(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsxs5(
     "div",
     {
       className: slotClass2("fillo-options", appearance, { slot: "options", kind: field.kind, fieldId: field.id }),
@@ -1210,7 +1485,7 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
       "aria-labelledby": ids.labelId,
       ...fieldAria(field, error, ids),
       children: [
-        options.map((opt) => /* @__PURE__ */ jsxs4(
+        options.map((opt) => /* @__PURE__ */ jsxs5(
           "label",
           {
             "data-option": opt.id,
@@ -1221,14 +1496,8 @@ 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__ */ jsx4(
+              /* @__PURE__ */ jsx5(
                 "input",
                 {
                   type: "radio",
@@ -1241,16 +1510,22 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
                   }
                 }
               ),
-              /* @__PURE__ */ jsx4(ChoiceIcon, { icon: opt.icon }),
-              /* @__PURE__ */ jsx4("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: opt.label })
+              /* @__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>.
-        /* @__PURE__ */ jsxs4(
-          "div",
+        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(
+          "label",
           {
             "data-fillo": "option",
             "data-selected": otherActive ? "" : void 0,
@@ -1260,8 +1535,8 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
               otherActive
             ),
             children: [
-              /* @__PURE__ */ jsxs4("label", { className: "fillo-option-main", children: [
-                /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsxs5("span", { className: "fillo-option-main", children: [
+                /* @__PURE__ */ jsx5(
                   "input",
                   {
                     type: "radio",
@@ -1274,9 +1549,9 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx4("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: strings.other })
+                /* @__PURE__ */ jsx5("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: strings.other })
               ] }),
-              otherActive && /* @__PURE__ */ jsx4(
+              otherActive && /* @__PURE__ */ jsx5(
                 "input",
                 {
                   type: "text",
@@ -1308,7 +1583,7 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
   const toggle = (id) => setValue(selected.includes(id) ? selected.filter((v) => v !== id) : [...selected, id]);
   const appearance = useFilloAppearance();
   const optionCls = (base, optionId, isSelected) => slotClass2(base, appearance, { slot: "option", kind: field.kind, fieldId: field.id, optionId, selected: isSelected });
-  return /* @__PURE__ */ jsx4(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx5(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsxs5(
     "div",
     {
       className: slotClass2("fillo-options", appearance, { slot: "options", kind: field.kind, fieldId: field.id }),
@@ -1317,7 +1592,7 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
       "aria-labelledby": ids.labelId,
       ...fieldAria(field, error, ids),
       children: [
-        options.map((opt) => /* @__PURE__ */ jsxs4(
+        options.map((opt) => /* @__PURE__ */ jsxs5(
           "label",
           {
             "data-option": opt.id,
@@ -1328,13 +1603,8 @@ 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__ */ jsx4(
+              /* @__PURE__ */ jsx5(
                 "input",
                 {
                   type: "checkbox",
@@ -1343,16 +1613,22 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
                   onChange: () => toggle(opt.id)
                 }
               ),
-              /* @__PURE__ */ jsx4(ChoiceIcon, { icon: opt.icon }),
-              /* @__PURE__ */ jsx4("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: opt.label })
+              /* @__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>.
-        /* @__PURE__ */ jsxs4(
-          "div",
+        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(
+          "label",
           {
             "data-fillo": "option",
             "data-selected": otherActive ? "" : void 0,
@@ -1362,8 +1638,8 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
               otherActive
             ),
             children: [
-              /* @__PURE__ */ jsxs4("label", { className: "fillo-option-main", children: [
-                /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsxs5("span", { className: "fillo-option-main", children: [
+                /* @__PURE__ */ jsx5(
                   "input",
                   {
                     type: "checkbox",
@@ -1379,9 +1655,9 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx4("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: strings.other })
+                /* @__PURE__ */ jsx5("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: strings.other })
               ] }),
-              otherActive && /* @__PURE__ */ jsx4(
+              otherActive && /* @__PURE__ */ jsx5(
                 "input",
                 {
                   type: "text",
@@ -1419,9 +1695,9 @@ function Dropdown({ field, value, error, setValue, ids: providedIds }) {
   const [otherOn, setOtherOn] = useState5(isOtherValue);
   const otherActive = isOtherValue || value === "" && otherOn;
   const control = useControl("fillo-input fillo-select", field, error);
-  return /* @__PURE__ */ jsxs4(FieldShell, { field, error, ids, children: [
-    /* @__PURE__ */ jsxs4("div", { className: "fillo-select-wrap", children: [
-      /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(FieldShell, { field, error, ids, children: [
+    /* @__PURE__ */ jsxs5("div", { className: "fillo-select-wrap", children: [
+      /* @__PURE__ */ jsxs5(
         "select",
         {
           id: ids.inputId,
@@ -1438,15 +1714,15 @@ function Dropdown({ field, value, error, setValue, ids: providedIds }) {
             }
           },
           children: [
-            /* @__PURE__ */ jsx4("option", { value: "", children: field.placeholder ?? strings.choosePlaceholder }),
-            options.map((opt) => /* @__PURE__ */ jsx4("option", { value: opt.id, children: opt.label }, opt.id)),
-            choice.allowOther && /* @__PURE__ */ jsx4("option", { value: otherValue, children: `${strings.other}\u2026` })
+            /* @__PURE__ */ jsx5("option", { value: "", children: field.placeholder ?? strings.choosePlaceholder }),
+            options.map((opt) => /* @__PURE__ */ jsx5("option", { value: opt.id, children: opt.label }, opt.id)),
+            choice.allowOther && /* @__PURE__ */ jsx5("option", { value: otherValue, children: `${strings.other}\u2026` })
           ]
         }
       ),
-      /* @__PURE__ */ jsx4("span", { className: "fillo-select-icon", "aria-hidden": "true" })
+      /* @__PURE__ */ jsx5("span", { className: "fillo-select-icon", "aria-hidden": "true" })
     ] }),
-    otherActive && /* @__PURE__ */ jsx4(
+    otherActive && /* @__PURE__ */ jsx5(
       "input",
       {
         type: "text",
@@ -1467,48 +1743,46 @@ function Checkbox({ field, value, error, setValue, ids: providedIds }) {
   const slots = useFieldSlots(field, error);
   const checkbox = field;
   if (checkbox.appearance === "toggle") {
-    return /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs5(
       "div",
       {
         ...slots.wrapperProps(
           `fillo-field fillo-field--checkbox fillo-field--toggle${error ? " fillo-field--error" : ""}`
         ),
         children: [
-          /* @__PURE__ */ jsxs4("label", { className: "fillo-toggle", "data-fillo": "option", "data-checked": value === true ? "" : void 0, children: [
-            /* @__PURE__ */ jsx4("span", { className: "fillo-toggle-copy", children: /* @__PURE__ */ jsxs4("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: [
+          /* @__PURE__ */ jsxs5("label", { className: "fillo-toggle", "data-fillo": "option", "data-checked": value === true ? "" : void 0, children: [
+            /* @__PURE__ */ jsx5("span", { className: "fillo-toggle-copy", children: /* @__PURE__ */ jsxs5("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: [
               field.label,
-              !field.required && /* @__PURE__ */ jsx4("span", { className: "fillo-optional", children: strings.optional })
+              !field.required && /* @__PURE__ */ jsx5("span", { className: "fillo-optional", children: strings.optional })
             ] }) }),
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx5(
               "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" }) })
+            /* @__PURE__ */ jsx5("span", { className: "fillo-toggle-track", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("span", { className: "fillo-toggle-thumb" }) })
           ] }),
-          field.description && /* @__PURE__ */ jsx4("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
-          error && /* @__PURE__ */ jsx4("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, role: "alert", children: error })
+          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, children: error })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       ...slots.wrapperProps(
         `fillo-field fillo-field--checkbox${error ? " fillo-field--error" : ""}`
       ),
       children: [
-        /* @__PURE__ */ jsxs4("label", { className: "fillo-option", "data-fillo": "option", "data-checked": value === true ? "" : void 0, children: [
-          /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsxs5("label", { className: "fillo-option", "data-fillo": "option", "data-checked": value === true ? "" : void 0, children: [
+          /* @__PURE__ */ jsx5(
             "input",
             {
               id: ids.inputId,
@@ -1519,34 +1793,27 @@ function Checkbox({ field, value, error, setValue, ids: providedIds }) {
               ...fieldAria(field, error, ids)
             }
           ),
-          /* @__PURE__ */ jsxs4("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: [
+          /* @__PURE__ */ jsxs5("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: [
             field.label,
-            !field.required && /* @__PURE__ */ jsx4("span", { className: "fillo-optional", children: strings.optional })
+            !field.required && /* @__PURE__ */ jsx5("span", { className: "fillo-optional", children: strings.optional })
           ] })
         ] }),
-        field.description && /* @__PURE__ */ jsx4("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
-        error && /* @__PURE__ */ jsx4("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, role: "alert", children: error })
+        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, 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();
 }
@@ -1564,15 +1831,16 @@ function Rating({ field, value, error, setValue, ids: providedIds }) {
   const tabbable = rovingIndex(steps, selected);
   const appearance = useFilloAppearance();
   const control = useControl("fillo-rating", field, error);
-  return /* @__PURE__ */ jsx4(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx5(
     "div",
     {
+      id: ids.inputId,
       ...control,
       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(
+      children: steps.map((n, i) => /* @__PURE__ */ jsx5(
         "button",
         {
           type: "button",
@@ -1588,8 +1856,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
       ))
@@ -1615,10 +1886,11 @@ function LinearScale({ field, value, error, setValue, ids: providedIds }) {
   ].filter(Boolean).join(" ") || void 0;
   const appearance = useFilloAppearance();
   const control = useControl("fillo-scale", field, error);
-  return /* @__PURE__ */ jsxs4(FieldShell, { field, error, ids, children: [
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5(FieldShell, { field, error, ids, children: [
+    /* @__PURE__ */ jsx5(
       "div",
       {
+        id: ids.inputId,
         ...control,
         role: "radiogroup",
         "aria-labelledby": ids.labelId,
@@ -1626,7 +1898,7 @@ function LinearScale({ field, value, error, setValue, ids: providedIds }) {
         "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(
+        children: steps.map((n, i) => /* @__PURE__ */ jsx5(
           "button",
           {
             type: "button",
@@ -1642,68 +1914,86 @@ 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
         ))
       }
     ),
-    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 })
+    hasLabels && /* @__PURE__ */ jsxs5("div", { className: "fillo-scale-labels", children: [
+      /* @__PURE__ */ jsx5("span", { id: minLabelId, children: scale.minLabel }),
+      /* @__PURE__ */ jsx5("span", { id: maxLabelId, children: scale.maxLabel })
     ] })
   ] });
 }
 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__ */ jsx4(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx5(
     "div",
     {
       id: ids.inputId,
       role: "group",
       "aria-labelledby": ids.labelId,
       ...fieldAria(field, error, ids),
-      children: /* @__PURE__ */ jsx4("ol", { className: "fillo-ranking", children: order.map((id, index) => {
+      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;
-        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(
+        return /* @__PURE__ */ jsxs5("li", { className: "fillo-ranking-item", children: [
+          /* @__PURE__ */ jsx5("span", { className: "fillo-ranking-index", children: index + 1 }),
+          /* @__PURE__ */ jsx5("span", { className: "fillo-ranking-label", children: option.label }),
+          /* @__PURE__ */ jsxs5("span", { className: "fillo-ranking-controls", children: [
+            /* @__PURE__ */ jsx5(
               "button",
               {
                 type: "button",
                 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"
               }
             ),
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx5(
               "button",
               {
                 type: "button",
                 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"
               }
             )
@@ -1717,7 +2007,7 @@ 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__ */ jsx4(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx5(
     "div",
     {
       id: ids.inputId,
@@ -1725,12 +2015,12 @@ function Matrix({ field, value, error, setValue, ids: providedIds }) {
       role: "group",
       "aria-labelledby": ids.labelId,
       ...fieldAria(field, error, ids),
-      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))
+      children: /* @__PURE__ */ jsxs5("table", { className: "fillo-matrix", children: [
+        /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs5("tr", { children: [
+          /* @__PURE__ */ jsx5("th", {}),
+          matrix.columns.map((col) => /* @__PURE__ */ jsx5("th", { scope: "col", children: col.label }, col.id))
         ] }) }),
-        /* @__PURE__ */ jsx4("tbody", { children: matrix.rows.map((row) => {
+        /* @__PURE__ */ jsx5("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;
@@ -1741,17 +2031,17 @@ function Matrix({ field, value, error, setValue, ids: providedIds }) {
             // radiogroup lives on an inner element that aria-owns the radios
             // scattered across the cells (they can't be DOM-nested inside a
             // single element within a table row).
-            /* @__PURE__ */ jsxs4("tr", { children: [
-              /* @__PURE__ */ jsx4("th", { scope: "row", children: /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsxs5("tr", { children: [
+              /* @__PURE__ */ jsx5("th", { scope: "row", children: /* @__PURE__ */ jsx5(
                 "div",
                 {
                   role: "radiogroup",
-                  "aria-labelledby": rowLabelId,
+                  "aria-labelledby": `${ids.labelId} ${rowLabelId}`,
                   "aria-owns": matrix.columns.map(radioId).join(" "),
-                  children: /* @__PURE__ */ jsx4("span", { id: rowLabelId, children: row.label })
+                  children: /* @__PURE__ */ jsx5("span", { id: rowLabelId, children: row.label })
                 }
               ) }),
-              matrix.columns.map((col) => /* @__PURE__ */ jsx4("td", { children: /* @__PURE__ */ jsx4(
+              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),
@@ -1764,7 +2054,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)
           );
         }) })
@@ -1775,12 +2065,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,
@@ -1793,16 +2116,17 @@ var DEFAULT_COMPONENTS = {
   matrix: Matrix,
   signature: SignatureField,
   file_upload: FileUploadField,
-  hidden: Hidden
+  hidden: Hidden,
+  calculated: Calculated
 };
 function ContentRenderer({ block }) {
   switch (block.kind) {
     case "heading":
-      return /* @__PURE__ */ jsx4("h3", { className: "fillo-heading", children: block.text });
+      return /* @__PURE__ */ jsx5("h3", { className: "fillo-heading", children: block.text });
     case "paragraph":
-      return /* @__PURE__ */ jsx4("p", { className: "fillo-paragraph", children: block.text });
+      return /* @__PURE__ */ jsx5("p", { className: "fillo-paragraph", children: block.text });
     case "divider":
-      return /* @__PURE__ */ jsx4("hr", { className: "fillo-divider" });
+      return /* @__PURE__ */ jsx5("hr", { className: "fillo-divider" });
   }
 }
 function blockHasPiping(block) {
@@ -1841,7 +2165,7 @@ function BlockRendererInner({ block, api, components, customComponents }) {
   block = pipeBlock(block, api.data, api.form);
   const ids = useFilloFieldIds(block.id);
   const strings = useStrings();
-  if (!isField(block)) return /* @__PURE__ */ jsx4(ContentRenderer, { block });
+  if (!isField(block)) return /* @__PURE__ */ jsx5(ContentRenderer, { block });
   let Component;
   if (block.kind === "custom") {
     Component = customComponents?.[block.component] ?? components?.custom;
@@ -1859,7 +2183,7 @@ function BlockRendererInner({ block, api, components, customComponents }) {
   }
   const rawError = api.errors[block.id];
   const error = rawError === REQUIRED_FIELD_MESSAGE ? strings.required : rawError;
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     Component,
     {
       field: block,
@@ -1896,7 +2220,7 @@ function FormField({
   const block = api.form.pages.flatMap((p) => p.blocks).find((b) => b.id === id);
   if (!block) return null;
   if (isField(block) && !visibleIds.has(block.id)) return null;
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     BlockRenderer,
     {
       block,
@@ -1908,8 +2232,8 @@ function FormField({
 }
 
 // src/turnstile.tsx
-import { useEffect as useEffect7, useRef as useRef6 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+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";
 var scriptPromise = null;
@@ -1967,13 +2291,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;
@@ -2016,7 +2340,7 @@ function TurnstileWidget({
       onTokenRef.current(void 0);
     };
   }, [siteKey]);
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       ref: containerRef,
@@ -2027,9 +2351,9 @@ function TurnstileWidget({
 }
 
 // src/FilloForm.tsx
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+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;
@@ -2044,32 +2368,30 @@ function themeProps(theme) {
     ...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 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",
@@ -2094,6 +2416,9 @@ function FilloForm(props) {
   );
   const [loaded, setLoaded] = useState6(null);
   const [loadFailure, setLoadFailure] = useState6(null);
+  const devEnv = useIsDevEnv();
+  const devChrome = props.preview === true || devEnv;
+  if (props.preview === true) warnPreviewInProduction();
   const codeForm = isCodeForm2(form) ? form : null;
   const onError = props.onError;
   const {
@@ -2105,16 +2430,22 @@ function FilloForm(props) {
     noticeError: syncNoticeError,
     syncing: codeFormSyncing,
     staged: codeChangesStaged,
+    accepting: syncedAccepting,
+    acceptingReason: syncedAcceptingReason,
+    uploadsAvailable: syncedUploadsAvailable,
+    uploadFileSizeLimitMb: syncedUploadFileSizeLimitMb,
     resolvedSchema,
-    resolvedTheme
+    resolvedTheme,
+    warningCode: syncedWarningCode,
+    warningUrl: syncedWarningUrl
   } = useCodeFormSync(form, client, onError, {
     // An absent client is intentional render-only use. Builder previews and an
     // explicit canonical id also do not need publishable-key resolution.
     allowUnsynced: Boolean(!client || props.skipValidation || formId)
   });
-  const renderResolvedSnapshot = Boolean(resolvedSchema && !isDevEnv());
+  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;
   });
@@ -2135,6 +2466,10 @@ function FilloForm(props) {
         schema: published.schema,
         theme: published.theme,
         closed: Boolean(published.closed),
+        accepting: published.accepting,
+        acceptingReason: published.acceptingReason,
+        uploadsAvailable: published.uploadsAvailable,
+        uploadFileSizeLimitMb: published.uploadFileSizeLimitMb,
         branding: published.branding ?? null,
         challenge: published.challenge ?? null
       });
@@ -2158,25 +2493,52 @@ function FilloForm(props) {
   const theme = props.appearance?.theme ?? props.theme ?? resolvedCodeTheme ?? currentLoaded?.theme ?? void 0;
   if (normalized && !normalized.ok) {
     const error = new FilloError2(`This form could not be rendered: ${normalized.error}`, 422);
-    if (props.renderError) return /* @__PURE__ */ jsx6(Fragment2, { children: props.renderError(error) });
-    return /* @__PURE__ */ jsx6("div", { className: `fillo-form fillo-form--error ${props.className ?? ""}`, children: strings.renderFailed });
+    if (props.renderError) return /* @__PURE__ */ jsx7(Fragment3, { children: props.renderError(error) });
+    return /* @__PURE__ */ jsx7("div", { className: `fillo-form fillo-form--error ${props.className ?? ""}`, children: strings.renderFailed });
   }
   if (loadError) {
     if (props.renderError) {
-      return /* @__PURE__ */ jsx6(Fragment2, { children: props.renderError(loadError) });
+      return /* @__PURE__ */ jsx7(Fragment3, { children: props.renderError(loadError) });
     }
     const message = loadError.status === 404 ? strings.loadFailedNotFound : loadError.status === 0 ? strings.loadFailedNetwork : strings.loadFailed;
-    return /* @__PURE__ */ jsx6("div", { className: `fillo-form fillo-form--error ${props.className ?? ""}`, children: message });
+    return /* @__PURE__ */ jsx7("div", { className: `fillo-form fillo-form--error ${props.className ?? ""}`, children: message });
+  }
+  if (currentLoaded?.accepting === false && schema) {
+    const variant = overlayVariant(currentLoaded.acceptingReason);
+    if (props.renderError) {
+      const error = variant === "closed" ? new FilloError2(
+        "This form is no longer accepting responses.",
+        403,
+        void 0,
+        currentLoaded.acceptingReason
+      ) : new FilloError2(
+        "This form isn't accepting responses yet.",
+        403,
+        void 0,
+        currentLoaded.acceptingReason
+      );
+      return /* @__PURE__ */ jsx7(Fragment3, { children: props.renderError(error) });
+    }
+    return /* @__PURE__ */ jsx7(
+      NotOpenOverlay,
+      {
+        ...props,
+        variant,
+        schema,
+        theme,
+        branding: currentLoaded.branding
+      }
+    );
   }
   if (currentLoaded?.closed) {
-    return /* @__PURE__ */ jsx6("div", { className: `fillo-form fillo-form--closed ${props.className ?? ""}`, ...themeProps(theme), children: /* @__PURE__ */ jsx6("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) {
-    return /* @__PURE__ */ jsx6(Fragment2, { children: props.renderError(canonicalSyncError) });
+    return /* @__PURE__ */ jsx7(Fragment3, { children: props.renderError(canonicalSyncError) });
   }
-  if (canonicalSyncError && !isDevEnv()) {
-    return /* @__PURE__ */ jsx6(
+  if (canonicalSyncError && !devChrome) {
+    return /* @__PURE__ */ jsx7(
       "div",
       {
         className: `fillo-form fillo-form--error ${props.className ?? ""}`,
@@ -2189,23 +2551,42 @@ function FilloForm(props) {
     );
   }
   const notPublished = Boolean(codeForm) && syncedStatus === "draft" && !props.skipValidation;
-  if (notPublished && !isDevEnv()) {
-    const error = new FilloError2("This form isn't published yet.", 403);
-    if (props.renderError) return /* @__PURE__ */ jsx6(Fragment2, { children: props.renderError(error) });
-    return /* @__PURE__ */ jsx6("div", { className: `fillo-form fillo-form--closed ${props.className ?? ""}`, ...themeProps(theme), children: /* @__PURE__ */ jsx6("p", { className: "fillo-closed", children: strings.notLive }) });
+  const syncNotAccepting = Boolean(codeForm) && !props.skipValidation && syncedStatus === "published" && syncedAccepting === false;
+  if ((notPublished || syncNotAccepting) && !devChrome) {
+    const variant = notPublished ? "notOpen" : overlayVariant(syncedAcceptingReason);
+    const error = variant === "closed" ? new FilloError2(
+      "This form is no longer accepting responses.",
+      403,
+      void 0,
+      syncedAcceptingReason
+    ) : new FilloError2("This form isn't published yet.", 403);
+    if (props.renderError) return /* @__PURE__ */ jsx7(Fragment3, { children: props.renderError(error) });
+    if (schema) {
+      return /* @__PURE__ */ jsx7(
+        NotOpenOverlay,
+        {
+          ...props,
+          variant,
+          schema,
+          theme,
+          branding: syncedBranding
+        }
+      );
+    }
+    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 (!isDevEnv() && awaitingCanonical || !schema) {
-    return /* @__PURE__ */ jsxs5(
+  if (!devChrome && awaitingCanonical || !schema) {
+    return /* @__PURE__ */ jsxs6(
       "div",
       {
         className: `fillo-form fillo-form--loading ${props.className ?? ""}`,
         "aria-busy": "true",
         ...themeProps(theme),
         children: [
-          /* @__PURE__ */ jsx6("div", { className: "fillo-skeleton" }),
-          /* @__PURE__ */ jsx6("div", { className: "fillo-skeleton" }),
-          /* @__PURE__ */ jsx6("div", { className: "fillo-skeleton fillo-skeleton--short" })
+          /* @__PURE__ */ jsx7("div", { className: "fillo-skeleton" }),
+          /* @__PURE__ */ jsx7("div", { className: "fillo-skeleton" }),
+          /* @__PURE__ */ jsx7("div", { className: "fillo-skeleton fillo-skeleton--short" })
         ]
       }
     );
@@ -2213,7 +2594,7 @@ function FilloForm(props) {
   const branding = codeForm ? syncedBranding : currentLoaded?.branding;
   const poweredBy = branding?.poweredBy ?? true;
   const challenge = props.challenge ?? (codeForm ? syncedChallenge : currentLoaded?.challenge) ?? void 0;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     ResolvedForm,
     {
       ...props,
@@ -2227,60 +2608,84 @@ function FilloForm(props) {
       draftNotice: notPublished,
       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
     }
   );
 }
 function PoweredBy({ label, href }) {
-  return /* @__PURE__ */ jsx6("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__ */ jsxs5("div", { className: "fillo-devwarning", role: "alert", children: [
-    /* @__PURE__ */ jsx6("strong", { children: "No Fillo client connected." }),
-    " This form is render-only and won\u2019t save responses. Pass a ",
-    /* @__PURE__ */ jsx6("code", { children: "client" }),
-    " to collect them in Fillo, or forward them with webhooks. (This notice only appears in development.)"
-  ] });
+  return /* @__PURE__ */ jsx7("a", { className: "fillo-powered", href: badgeUrl(href), target: "_blank", rel: "noopener noreferrer", children: label ?? "Powered by Fillo" });
 }
-function DevDraftNotice() {
-  return /* @__PURE__ */ jsxs5("div", { className: "fillo-devwarning", role: "alert", children: [
-    /* @__PURE__ */ jsx6("strong", { children: "Draft form." }),
-    " It renders here, but it won\u2019t accept responses until you publish it in your Fillo dashboard. (This notice only appears in development.)"
-  ] });
+function overlayVariant(reason) {
+  return reason === "expired" || reason === "capped" || reason === "storage_full" ? "closed" : "notOpen";
 }
-function DevStagedNotice() {
-  return /* @__PURE__ */ jsxs5("div", { className: "fillo-devwarning", role: "alert", children: [
-    /* @__PURE__ */ jsx6("strong", { children: "Code changes are staged." }),
-    " This local preview is not the live form yet. Publish the changes in Fillo before deploying them for respondents."
-  ] });
+function NotOpenOverlay(props) {
+  const strings = resolveStrings(props.strings);
+  const closedFlavor = props.variant === "closed";
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: `fillo-form fillo-form--not-open ${props.className ?? ""}`,
+      "data-fillo": "root",
+      "data-state": "closed",
+      ...themeProps(props.theme),
+      children: [
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            className: "fillo-not-open-preview",
+            "aria-hidden": "true",
+            ref: (node) => node?.setAttribute("inert", ""),
+            children: /* @__PURE__ */ jsx7(
+              ResolvedForm,
+              {
+                schema: props.schema,
+                theme: props.theme,
+                appearance: props.appearance,
+                strings: props.strings,
+                components: props.components,
+                customComponents: props.customComponents,
+                initialData: props.initialData,
+                showTitle: props.showTitle,
+                displayOnly: true
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs6("div", { className: "fillo-not-open-card", "data-fillo": "not-open-card", role: "status", children: [
+          /* @__PURE__ */ jsx7("h2", { className: "fillo-not-open-title", children: closedFlavor ? strings.closedTitle : strings.notOpenTitle }),
+          /* @__PURE__ */ jsx7("p", { className: "fillo-not-open-body", children: closedFlavor ? strings.closed : strings.notOpenBody })
+        ] }),
+        (props.branding?.poweredBy ?? true) && /* @__PURE__ */ jsx7(PoweredBy, { label: props.branding?.label, href: props.branding?.href })
+      ]
+    }
+  );
 }
-function DevSyncErrorNotice({ error }) {
-  return /* @__PURE__ */ jsxs5("div", { className: "fillo-devwarning", role: "alert", children: [
-    /* @__PURE__ */ jsxs5("strong", { children: [
-      "Form sync needs attention",
-      error.code ? ` (${error.code})` : "",
-      "."
-    ] }),
-    " ",
-    error.message,
-    " The safe form remains available for development."
-  ] });
+var noopSubscribe = () => () => {
+};
+function useIsDevEnv() {
+  return useSyncExternalStore2(noopSubscribe, isLikelyDevEnv, isBuildTimeDevEnv2);
 }
 function ResolvedForm(props) {
   const { schema, theme } = props;
+  const displayOnly = props.displayOnly === true;
   const instanceId = useId2().replace(/:/g, "");
-  const hpRef = useRef7(null);
+  const devEnv = useIsDevEnv();
+  const devChrome = !displayOnly && (props.preview === true || devEnv);
+  const hpRef = useRef8(null);
   const codeForm = isCodeForm2(props.form) ? props.form : null;
   const client = props.client;
   const challenge = 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);
@@ -2295,6 +2700,12 @@ function ResolvedForm(props) {
       async () => {
         try {
           const result = await syncCodeForm2(client, codeForm, { bypassCache: true });
+          setResyncWarning({
+            code: result.warningCode,
+            url: result.warningUrl,
+            uploadsAvailable: result.uploadsAvailable,
+            uploadFileSizeLimitMb: result.uploadFileSizeLimitMb
+          });
           if (result.status === "draft") {
             throw new FilloError2(
               "This form is no longer published. Submission was stopped before sending answers.",
@@ -2303,6 +2714,14 @@ function ResolvedForm(props) {
               "form_not_published"
             );
           }
+          if (result.accepting === false) {
+            throw new FilloError2(
+              "This form is no longer accepting responses. Submission was stopped before sending answers.",
+              403,
+              void 0,
+              result.acceptingReason ?? "form_not_accepting"
+            );
+          }
           const authoritative = normalizeFormSchema(result.resolvedSchema ?? codeForm.schema);
           if (!authoritative.ok) {
             throw new FilloError2(
@@ -2332,9 +2751,11 @@ function ResolvedForm(props) {
             );
             props.onError?.(notice);
           }
+          setResolutionFailureCode(null);
           return result.formId;
         } catch (error) {
           const failure = isFilloError2(error) ? error : new FilloError2(error instanceof Error ? error.message : String(error), 0);
+          setResolutionFailureCode(failure.code ?? "sync_failed");
           console.warn(
             `[fillo] form sync failed${failure.code ? ` (${failure.code})` : ""}: ${failure.message}`
           );
@@ -2358,6 +2779,9 @@ function ResolvedForm(props) {
     // "default", never the bare-engine "headless".
     surface: "default",
     resolveFormId,
+    // Dev chrome gets the developer-grade resolution failure (message + code)
+    // instead of the respondent-safe "unavailable" fallback.
+    verboseResolutionErrors: devChrome,
     respondent: props.respondent,
     challengeRequired,
     getChallengeToken: () => challengeTokenRef.current,
@@ -2366,8 +2790,44 @@ function ResolvedForm(props) {
       resetChallengeRef.current?.();
     }
   });
-  useDraftFlush(api);
+  useDraftFlush(api, !displayOnly);
+  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,
+      uploadsAvailable,
+      uploadFileSizeLimitMb,
+      warningCode,
+      warningUrl
+    }),
+    [devChrome, uploadsAvailable, uploadFileSizeLimitMb, warningCode, warningUrl]
+  );
   const settings = schema.settings;
   const submitted = api.status === "submitted";
   const liveSubmit = submitted && !api.restoredSubmission;
@@ -2376,21 +2836,25 @@ 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__ */ jsxs5(
+    return /* @__PURE__ */ jsxs6(
       "div",
       {
         ref: successRef,
@@ -2406,19 +2870,19 @@ function ResolvedForm(props) {
         "data-state": "submitted",
         ...themed,
         children: [
-          props.renderSuccess ? props.renderSuccess() : /* @__PURE__ */ jsxs5(
+          props.renderSuccess ? props.renderSuccess() : /* @__PURE__ */ jsxs6(
             "div",
             {
               className: slotClass3("fillo-success", appearance, { slot: "success", status: "submitted" }),
               "data-fillo": "success",
               children: [
-                /* @__PURE__ */ jsx6("div", { className: "fillo-success-mark", "aria-hidden": "true", children: "\u2713" }),
-                /* @__PURE__ */ jsx6("h2", { className: "fillo-success-title", children: settings.successTitle ?? strings.successTitle }),
-                /* @__PURE__ */ jsx6("p", { className: "fillo-success-message", children: api.duplicateSubmission ? strings.alreadyAnswered : settings.successMessage ?? strings.successMessage })
+                /* @__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 })
               ]
             }
           ),
-          props.poweredBy && /* @__PURE__ */ jsx6(PoweredBy, { label: props.brandLabel, href: props.brandHref })
+          props.poweredBy && /* @__PURE__ */ jsx7(PoweredBy, { label: props.brandLabel, href: props.brandHref })
         ]
       }
     );
@@ -2434,13 +2898,200 @@ function ResolvedForm(props) {
   const progressTotal = Math.max(progressSeq.length, 1);
   const progressPos = progressSeq.indexOf(api.page.id);
   const progressStep = progressPos >= 0 ? progressPos + 1 : Math.min(api.pageIndex + 1, progressTotal);
-  return /* @__PURE__ */ jsx6(FilloContext.Provider, { value: api, children: /* @__PURE__ */ jsx6(FilloStringsContext.Provider, { value: strings, children: /* @__PURE__ */ jsx6(FilloAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx6(FilloInstanceIdContext.Provider, { value: instanceId, children: /* @__PURE__ */ jsxs5(
+  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,
+      {
+        preview: props.preview,
+        devNotices: props.devNotices,
+        syncError: props.syncErrorNotice,
+        staged: props.stagedNotice,
+        draft: props.draftNotice,
+        warningUrl: props.syncWarningUrl,
+        noClient: !props.client && !props.skipValidation
+      }
+    ),
+    resuming && /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: slotClass3("fillo-resume", appearance, { slot: "resume" }),
+        "data-fillo": "resume",
+        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 })
+        ]
+      }
+    ),
+    api.resumeLinkFailed && !api.resumedDraft && !api.editingPrevious && /* @__PURE__ */ jsx7(
+      "div",
+      {
+        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 })
+      }
+    ),
+    multiPage && settings.showProgress !== false && /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: slotClass3("fillo-progress-track", appearance, { slot: "progress" }),
+        "data-fillo": "progress",
+        role: "progressbar",
+        "aria-label": schema.title || "Form progress",
+        "aria-valuemin": 1,
+        "aria-valuemax": progressTotal,
+        "aria-valuenow": progressStep,
+        children: /* @__PURE__ */ jsx7(
+          "div",
+          {
+            className: slotClass3("fillo-progress-fill", appearance, { slot: "progressFill" }),
+            "data-fillo": "progressFill",
+            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",
+        {
+          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",
+        {
+          href: `#${inputId}`,
+          onClick: (e) => {
+            e.preventDefault();
+            focusField(inputId);
+          },
+          children: [
+            field.label,
+            ": ",
+            error
+          ]
+        }
+      ) }, field.id)) })
+    ] }),
+    /* @__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,
+      {
+        block,
+        api,
+        components: props.components,
+        customComponents: props.customComponents
+      },
+      block.id
+    )) }),
+    !displayOnly && /* @__PURE__ */ jsx7(
+      "input",
+      {
+        type: "text",
+        name: "fillo_hp_field",
+        className: "fillo-hp",
+        tabIndex: -1,
+        autoComplete: "off",
+        "aria-hidden": "true",
+        defaultValue: "",
+        style: HP_STYLE,
+        ref: (element) => {
+          hpRef.current = element;
+          assertHpHidden(element);
+        }
+      }
+    ),
+    challenge && showChallenge && /* @__PURE__ */ jsxs6("div", { className: "fillo-turnstile-slot", "data-fillo": "turnstile-slot", children: [
+      /* @__PURE__ */ jsx7(
+        TurnstileWidget,
+        {
+          siteKey: challenge.siteKey,
+          className: slotClass3("fillo-turnstile", appearance, { slot: "turnstile" }),
+          onToken: handleChallengeToken,
+          onError: () => setChallengeError(true),
+          registerReset: registerChallengeReset
+        }
+      ),
+      challengeError && /* @__PURE__ */ jsx7("p", { className: "fillo-turnstile-error", role: "alert", children: strings.challengeUnavailable })
+    ] }),
+    (api.status === "error" || api.submitError) && /* @__PURE__ */ jsxs6("p", { className: "fillo-submit-error", role: "alert", children: [
+      api.submitError ?? strings.submitFailed,
+      submitFixUrl && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+        " ",
+        "Connect storage:",
+        " ",
+        /* @__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
+        }
+      )
+    ] }),
+    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(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(
     "form",
     {
-      className: slotClass3(`fillo-form ${props.className ?? ""}`, appearance, {
-        slot: "root",
-        status: api.status
-      }),
+      className: rootClass,
       "data-fillo": "root",
       "data-state": api.status,
       "data-page": api.pageIndex + 1,
@@ -2451,159 +3102,35 @@ 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: [
-        !props.client && !props.skipValidation && isDevEnv() && /* @__PURE__ */ jsx6(DevNoClientNotice, {}),
-        props.draftNotice && isDevEnv() && /* @__PURE__ */ jsx6(DevDraftNotice, {}),
-        props.stagedNotice && isDevEnv() && /* @__PURE__ */ jsx6(DevStagedNotice, {}),
-        props.syncErrorNotice && isDevEnv() && /* @__PURE__ */ jsx6(DevSyncErrorNotice, { error: props.syncErrorNotice }),
-        (api.resumedDraft || api.editingPrevious) && /* @__PURE__ */ jsxs5(
-          "div",
-          {
-            className: slotClass3("fillo-resume", appearance, { slot: "resume" }),
-            "data-fillo": "resume",
-            role: "status",
-            children: [
-              /* @__PURE__ */ jsx6("span", { className: "fillo-resume-text", children: api.editingPrevious ? strings.editNotice : strings.resumeNotice }),
-              /* @__PURE__ */ jsx6("button", { type: "button", className: "fillo-resume-clear", onClick: api.resetDraft, children: strings.resumeStartOver })
-            ]
-          }
-        ),
-        api.resumeLinkFailed && !api.resumedDraft && !api.editingPrevious && /* @__PURE__ */ jsx6(
-          "div",
-          {
-            className: slotClass3("fillo-resume fillo-resume--expired", appearance, { slot: "resume" }),
-            "data-fillo": "resume",
-            role: "status",
-            children: /* @__PURE__ */ jsx6("span", { className: "fillo-resume-text", children: strings.resumeLinkExpired })
-          }
-        ),
-        multiPage && settings.showProgress !== false && /* @__PURE__ */ jsx6(
-          "div",
-          {
-            className: slotClass3("fillo-progress-track", appearance, { slot: "progress" }),
-            "data-fillo": "progress",
-            role: "progressbar",
-            "aria-label": schema.title || "Form progress",
-            "aria-valuemin": 1,
-            "aria-valuemax": progressTotal,
-            "aria-valuenow": progressStep,
-            children: /* @__PURE__ */ jsx6(
-              "div",
-              {
-                className: slotClass3("fillo-progress-fill", appearance, { slot: "progressFill" }),
-                "data-fillo": "progressFill",
-                style: { "--fillo-progress-value": `${progressStep / progressTotal * 100}%` }
-              }
-            )
-          }
-        ),
-        api.pageIndex === 0 && props.showTitle !== false && /* @__PURE__ */ jsxs5("header", { className: slotClass3("fillo-header", appearance, { slot: "header" }), "data-fillo": "header", children: [
-          schema.title && /* @__PURE__ */ jsx6("h1", { className: slotClass3("fillo-title", appearance, { slot: "title" }), "data-fillo": "title", children: schema.title }),
-          schema.description && /* @__PURE__ */ jsx6(
-            "p",
-            {
-              className: slotClass3("fillo-form-description", appearance, { slot: "description" }),
-              "data-fillo": "description",
-              children: schema.description
-            }
-          )
-        ] }),
-        multiPage && api.page.title && api.pageIndex > 0 && /* @__PURE__ */ jsx6("h2", { className: slotClass3("fillo-page-title", appearance, { slot: "pageTitle" }), "data-fillo": "pageTitle", children: api.page.title }),
-        /* @__PURE__ */ jsx6("div", { className: slotClass3("fillo-blocks", appearance, { slot: "blocks" }), "data-fillo": "blocks", ref: blocksRef, tabIndex: -1, children: api.blocks.map((block) => /* @__PURE__ */ jsx6(
-          BlockRenderer,
-          {
-            block,
-            api,
-            components: props.components,
-            customComponents: props.customComponents
-          },
-          block.id
-        )) }),
-        /* @__PURE__ */ jsx6(
-          "input",
-          {
-            type: "text",
-            name: "fillo_hp_field",
-            className: "fillo-hp",
-            tabIndex: -1,
-            autoComplete: "off",
-            "aria-hidden": "true",
-            defaultValue: "",
-            style: HP_STYLE,
-            ref: (element) => {
-              hpRef.current = element;
-              assertHpHidden(element);
-            }
-          }
-        ),
-        challenge && showChallenge && /* @__PURE__ */ jsxs5("div", { className: "fillo-turnstile-slot", "data-fillo": "turnstile-slot", children: [
-          /* @__PURE__ */ jsx6(
-            TurnstileWidget,
-            {
-              siteKey: challenge.siteKey,
-              className: slotClass3("fillo-turnstile", appearance, { slot: "turnstile" }),
-              onToken: handleChallengeToken,
-              onError: () => setChallengeError(true),
-              registerReset: registerChallengeReset
-            }
-          ),
-          challengeError && /* @__PURE__ */ jsx6("p", { className: "fillo-turnstile-error", role: "alert", children: strings.challengeUnavailable })
-        ] }),
-        (api.status === "error" || api.submitError) && /* @__PURE__ */ jsx6("p", { className: "fillo-submit-error", role: "alert", children: api.submitError ?? strings.submitFailed }),
-        showFooter && /* @__PURE__ */ jsxs5("footer", { className: slotClass3("fillo-footer", appearance, { slot: "footer" }), "data-fillo": "footer", children: [
-          multiPage && !api.isFirstPage && /* @__PURE__ */ jsx6(
-            "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__ */ jsx6(
-            "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__ */ jsx6(PoweredBy, { label: props.brandLabel, href: props.brandHref })
-      ]
+      children: formBody
     }
-  ) }) }) }) });
+  ) }) }) }) }) }) });
 }
 
 // src/jsx.tsx
-import { useRef as useRef8 } from "react";
+import { useRef as useRef9 } from "react";
 import {
   codeFormFromJsx,
   FilloJsxError,
+  isLikelyDevEnv as isLikelyDevEnv2,
   JSX_BLOCK_COMPONENTS
 } from "@usefillo/core";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var B = JSX_BLOCK_COMPONENTS;
-var isDevEnv2 = () => typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
+var isDevEnv = () => isLikelyDevEnv2();
 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);
-  if (memo2.current && memo2.current.json !== json && isDevEnv2()) {
+  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.`
     );
@@ -2611,7 +3138,7 @@ function JsxForm(props) {
   if (!memo2.current || memo2.current.json !== json) {
     memo2.current = { json, form: compiled };
   }
-  return /* @__PURE__ */ jsx7(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) {
@@ -2646,6 +3173,7 @@ var Fillo = {
   Date: B.Date,
   FileUpload: B.FileUpload,
   Hidden: B.Hidden,
+  Calculated: B.Calculated,
   Custom: B.Custom,
   Heading: B.Heading,
   Paragraph: B.Paragraph,
@@ -2655,7 +3183,7 @@ var Fillo = {
 };
 
 // src/provider.tsx
-import { useId as useId3, useMemo as useMemo6 } from "react";
+import { useId as useId3, useMemo as useMemo6, useState as useState7 } from "react";
 import {
   FilloError as FilloError3,
   formSchemasEqual as formSchemasEqual2,
@@ -2664,7 +3192,7 @@ import {
   resolveStrings as resolveStrings2,
   syncCodeForm as syncCodeForm3
 } from "@usefillo/core";
-import { Fragment as Fragment3, jsx as jsx8 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx9 } from "react/jsx-runtime";
 function FilloProvider({
   children,
   form,
@@ -2674,20 +3202,31 @@ function FilloProvider({
   strings,
   onError,
   renderError,
+  preview,
   ...options
 }) {
   const instanceId = useId3().replace(/:/g, "");
+  const devEnv = useIsDevEnv();
+  const devChrome = preview === true || devEnv;
+  if (preview === true) warnPreviewInProduction();
   const codeForm = isCodeForm2(form) ? form : null;
   const {
     formId: syncedFormId,
     status: syncedStatus,
     error: syncError,
     syncing: codeFormSyncing,
-    resolvedSchema
+    resolvedSchema,
+    accepting: syncedAccepting,
+    acceptingReason: syncedAcceptingReason,
+    uploadsAvailable,
+    uploadFileSizeLimitMb,
+    warningCode,
+    warningUrl
   } = useCodeFormSync(form, client, onError, {
     allowUnsynced: Boolean(!client || formId || options.skipValidation)
   });
-  const rawSchema = codeForm ? resolvedSchema && !isDevEnv3() ? resolvedSchema : codeForm.schema : form;
+  const [resyncWarning, setResyncWarning] = useState7(null);
+  const rawSchema = codeForm ? resolvedSchema && !devChrome ? resolvedSchema : codeForm.schema : form;
   const normalized = useMemo6(() => normalizeFormSchema2(rawSchema), [rawSchema]);
   if (!normalized.ok) {
     throw new FilloError3(`This form could not be rendered: ${normalized.error}`, 422);
@@ -2697,6 +3236,12 @@ function FilloProvider({
     () => codeForm && client?.key ? async () => {
       try {
         const result = await syncCodeForm3(client, codeForm, { bypassCache: true });
+        setResyncWarning({
+          code: result.warningCode,
+          url: result.warningUrl,
+          uploadsAvailable: result.uploadsAvailable,
+          uploadFileSizeLimitMb: result.uploadFileSizeLimitMb
+        });
         if (result.status === "draft") {
           throw new FilloError3(
             "This form is no longer published. Submission was stopped before sending answers.",
@@ -2705,6 +3250,14 @@ function FilloProvider({
             "form_not_published"
           );
         }
+        if (result.accepting === false) {
+          throw new FilloError3(
+            "This form is no longer accepting responses. Submission was stopped before sending answers.",
+            403,
+            void 0,
+            result.acceptingReason ?? "form_not_accepting"
+          );
+        }
         const authoritative = normalizeFormSchema2(result.resolvedSchema ?? codeForm.schema);
         if (!authoritative.ok) {
           throw new FilloError3(
@@ -2752,25 +3305,45 @@ function FilloProvider({
     form: schema,
     formId: syncedFormId ?? formId,
     resolveFormId,
+    // Dev chrome (preview or dev env) surfaces the developer-grade resolution
+    // failure (message + code); an explicit option wins.
+    verboseResolutionErrors: options.verboseResolutionErrors ?? devChrome,
     // Headless = your markup, no Fillo-rendered layout. Free like every embed
     // method; recorded per response so usage stays measurable.
     surface: "headless"
   });
   useDraftFlush(api);
+  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,
+      uploadsAvailable: freshUploadsAvailable,
+      uploadFileSizeLimitMb: freshUploadFileSizeLimitMb,
+      warningCode: freshWarningCode,
+      warningUrl: freshWarningUrl
+    }),
+    [devChrome, freshUploadsAvailable, freshUploadFileSizeLimitMb, freshWarningCode, freshWarningUrl]
+  );
   const resolvedStrings = resolveStrings2(strings);
   const canonicalSyncError = syncError && !options.skipValidation ? syncError : null;
-  if (canonicalSyncError && renderError) return /* @__PURE__ */ jsx8(Fragment3, { children: renderError(canonicalSyncError) });
-  if (canonicalSyncError && !isDevEnv3()) return null;
-  if (codeFormSyncing && !options.skipValidation && !isDevEnv3()) return 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;
-  if (notPublished && !isDevEnv3()) {
-    const error = new FilloError3("This form isn't published yet.", 403, void 0, "form_not_published");
-    return renderError ? /* @__PURE__ */ jsx8(Fragment3, { children: renderError(error) }) : null;
+  const notAccepting = Boolean(codeForm) && syncedStatus === "published" && syncedAccepting === false && !options.skipValidation;
+  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.",
+      403,
+      void 0,
+      syncedAcceptingReason ?? "form_not_accepting"
+    );
+    return renderError ? /* @__PURE__ */ jsx9(Fragment4, { children: renderError(error) }) : null;
   }
-  return /* @__PURE__ */ jsx8(FilloContext.Provider, { value: api, children: /* @__PURE__ */ jsx8(FilloStringsContext.Provider, { value: resolvedStrings, children: /* @__PURE__ */ jsx8(FilloAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx8(FilloInstanceIdContext.Provider, { value: instanceId, children }) }) }) });
-}
-function isDevEnv3() {
-  return typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
+  return /* @__PURE__ */ jsx9(FilloContext.Provider, { value: api, children: /* @__PURE__ */ jsx9(FilloChromeContext.Provider, { value: chromeValue, children: /* @__PURE__ */ jsx9(FilloStringsContext.Provider, { value: resolvedStrings, children: /* @__PURE__ */ jsx9(FilloAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx9(FilloInstanceIdContext.Provider, { value: instanceId, children }) }) }) }) });
 }
 
 // src/index.ts