npm - @usefillo/react - Versions diffs - 0.9.0 → 0.10.0 - Mend

@usefillo/react 0.9.0 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md +25 -18
package/dist/index.d.ts +32 -1
package/dist/index.js +674 -382
package/dist/styles.css +55 -0
package/dist/styles.unlayered.css +55 -0
package/package.json +2 -2

package/dist/index.js CHANGED Viewed

@@ -1,12 +1,22 @@
 "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 useRef7,
+  useState as useState6,
+  useSyncExternalStore as useSyncExternalStore2
+} from "react";
 import {
   FilloError as FilloError2,
   createClient,
   formSchemasEqual,
+  isBuildTimeDevEnv as isBuildTimeDevEnv2,
   isFilloError as isFilloError2,
+  isLikelyDevEnv,
   needsExplicitSubmit,
   normalizeFormSchema,
   normalizeFormTheme,
@@ -61,11 +71,90 @@ 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);
+}
 function useFilloInstanceId() {
   const instanceId = useContext2(FilloInstanceIdContext);
   const fallbackId = useId().replace(/:/g, "");
@@ -128,6 +217,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 +259,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 +274,7 @@ function useDraftFlush(api) {
       window.removeEventListener("pagehide", onPageHide);
       document.removeEventListener("visibilitychange", onVisibility);
     };
-  }, [enabled, flush]);
+  }, [active, flush]);
 }
 // src/define.ts
@@ -230,8 +325,14 @@ function useCodeFormSync(form, client, onError, options) {
         error: null,
         noticeError: null,
         staged: false,
+        accepting: void 0,
+        acceptingReason: void 0,
+        uploadsAvailable: 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 +387,21 @@ function useCodeFormSync(form, client, onError, options) {
         error: null,
         noticeError,
         staged: Boolean(r.staged),
+        accepting: r.accepting,
+        acceptingReason: r.acceptingReason,
+        uploadsAvailable: r.uploadsAvailable,
         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 +448,14 @@ 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,
     resolvedSchema: synced.resolvedSchema,
-    resolvedTheme: synced.resolvedTheme
+    resolvedTheme: synced.resolvedTheme,
+    warning: synced.warning,
+    warningCode: synced.warningCode,
+    warningUrl: synced.warningUrl
   } : {
     formId: null,
     status: null,
@@ -366,7 +483,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 || "";
@@ -449,15 +566,15 @@ function PhoneField({ field, value, error, setValue, ids: providedIds }) {
     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 +593,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, role: "alert", children: error })
   ] });
 }
 function CountrySelect({
@@ -552,8 +669,8 @@ function CountrySelect({
       triggerRef.current?.focus();
     }
   }
-  return /* @__PURE__ */ jsxs("div", { className: "fillo-phone-country", ref: rootRef, children: [
-    /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2("div", { className: "fillo-phone-country", ref: rootRef, children: [
+    /* @__PURE__ */ jsxs2(
       "button",
       {
         ref: triggerRef,
@@ -565,17 +682,17 @@ function CountrySelect({
         "aria-label": `Country: ${country.name} (+${country.dialCode})`,
         onClick: () => setOpen((o) => !o),
         children: [
-          /* @__PURE__ */ jsx("span", { className: "fillo-phone-flag-emoji", "aria-hidden": "true", children: flagEmoji(country.iso2) }),
-          /* @__PURE__ */ jsxs("span", { className: "fillo-phone-dial", children: [
+          /* @__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 +713,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 +727,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 +737,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", children: "No matches" })
       ] })
     ] })
   ] });
@@ -628,7 +745,7 @@ 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);
@@ -733,21 +850,21 @@ function SignatureField({ field, value, error, setValue, ids: providedIds }) {
     setValue(null);
   }
   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,
@@ -760,12 +877,12 @@ 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,
@@ -787,13 +904,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, role: "alert", 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;
@@ -813,6 +930,7 @@ 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([]);
@@ -836,7 +954,9 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
   const maxFiles = schema.maxFiles ?? 1;
   const maxMb = schema.maxFileSizeMb ?? 500;
   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) {
@@ -898,13 +1018,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 +1055,7 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
           }
         },
         children: [
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(
             "input",
             {
               ref: inputRef,
@@ -948,14 +1068,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 +1091,11 @@ 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(
           "button",
           {
             type: "button",
@@ -980,7 +1106,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,10 +1118,10 @@ 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(
+            /* @__PURE__ */ jsx4("span", { className: "fillo-file-name", children: f.name }),
+            f.error ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+              /* @__PURE__ */ jsx4("span", { className: "fillo-file-meta", children: f.error }),
+              f.file && !f.tooLarge && remaining > 0 && /* @__PURE__ */ jsx4(
                 "button",
                 {
                   type: "button",
@@ -1010,7 +1136,7 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
                   children: strings.uploadRetry
                 }
               ),
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(
                 "button",
                 {
                   type: "button",
@@ -1020,14 +1146,14 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
                   children: "\xD7"
                 }
               )
-            ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-              /* @__PURE__ */ jsxs3("span", { className: "fillo-file-meta", children: [
+            ] }) : /* @__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 +1169,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, role: "alert", 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,
@@ -1095,7 +1221,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 +1231,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, role: "alert", children: error })
       ]
     }
   );
@@ -1120,7 +1246,7 @@ 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 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,
@@ -1139,7 +1265,7 @@ function TextInput({ field, value, error, setValue, ids: providedIds }) {
 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 +1302,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 +1313,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 +1327,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 +1336,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,
@@ -1228,7 +1354,7 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
               setValue(opt.id);
             },
             children: [
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx5(
                 "input",
                 {
                   type: "radio",
@@ -1241,15 +1367,15 @@ 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 }),
+              /* @__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(
+        /* @__PURE__ */ jsxs5(
           "div",
           {
             "data-fillo": "option",
@@ -1260,8 +1386,8 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
               otherActive
             ),
             children: [
-              /* @__PURE__ */ jsxs4("label", { className: "fillo-option-main", children: [
-                /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsxs5("label", { className: "fillo-option-main", children: [
+                /* @__PURE__ */ jsx5(
                   "input",
                   {
                     type: "radio",
@@ -1274,9 +1400,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 +1434,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 +1443,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,
@@ -1334,7 +1460,7 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
               toggle(opt.id);
             },
             children: [
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx5(
                 "input",
                 {
                   type: "checkbox",
@@ -1343,15 +1469,15 @@ 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 }),
+              /* @__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(
+        /* @__PURE__ */ jsxs5(
           "div",
           {
             "data-fillo": "option",
@@ -1362,8 +1488,8 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
               otherActive
             ),
             children: [
-              /* @__PURE__ */ jsxs4("label", { className: "fillo-option-main", children: [
-                /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsxs5("label", { className: "fillo-option-main", children: [
+                /* @__PURE__ */ jsx5(
                   "input",
                   {
                     type: "checkbox",
@@ -1379,9 +1505,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 +1545,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 +1564,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,19 +1593,19 @@ 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,
@@ -1492,23 +1618,23 @@ function Checkbox({ field, value, error, setValue, ids: providedIds }) {
                 ...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, role: "alert", 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,13 +1645,13 @@ 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, role: "alert", children: error })
       ]
     }
   );
@@ -1564,7 +1690,7 @@ 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",
     {
       ...control,
@@ -1572,7 +1698,7 @@ function Rating({ field, value, error, setValue, ids: providedIds }) {
       "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",
@@ -1615,8 +1741,8 @@ 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",
       {
         ...control,
@@ -1626,7 +1752,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",
@@ -1649,9 +1775,9 @@ function LinearScale({ field, value, error, setValue, ids: providedIds }) {
         ))
       }
     ),
-    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 })
     ] })
   ] });
 }
@@ -1671,21 +1797,21 @@ function Ranking({ field, value, error, setValue, ids: providedIds }) {
     [next[index], next[target]] = [next[target], next[index]];
     setValue(next);
   }
-  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",
@@ -1696,7 +1822,7 @@ function Ranking({ field, value, error, setValue, ids: providedIds }) {
                 children: "\u2191"
               }
             ),
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx5(
               "button",
               {
                 type: "button",
@@ -1717,7 +1843,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 +1851,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 +1867,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-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", { children: /* @__PURE__ */ jsx5(
                 "input",
                 {
                   id: radioId(col),
@@ -1798,11 +1924,11 @@ var DEFAULT_COMPONENTS = {
 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 +1967,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 +1985,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 +2022,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,
@@ -1909,7 +2035,7 @@ function FormField({
 // src/turnstile.tsx
 import { useEffect as useEffect7, useRef as useRef6 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+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;
@@ -2016,7 +2142,7 @@ function TurnstileWidget({
       onTokenRef.current(void 0);
     };
   }, [siteKey]);
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       ref: containerRef,
@@ -2027,7 +2153,7 @@ 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);
   if (!safeTheme) return {};
@@ -2044,16 +2170,6 @@ 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");
@@ -2094,6 +2210,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,14 +2224,19 @@ function FilloForm(props) {
     noticeError: syncNoticeError,
     syncing: codeFormSyncing,
     staged: codeChangesStaged,
+    accepting: syncedAccepting,
+    acceptingReason: syncedAcceptingReason,
+    uploadsAvailable: syncedUploadsAvailable,
     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);
   useEffect8(() => {
@@ -2135,6 +2259,9 @@ function FilloForm(props) {
         schema: published.schema,
         theme: published.theme,
         closed: Boolean(published.closed),
+        accepting: published.accepting,
+        acceptingReason: published.acceptingReason,
+        uploadsAvailable: published.uploadsAvailable,
         branding: published.branding ?? null,
         challenge: published.challenge ?? null
       });
@@ -2158,25 +2285,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 +2343,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 +2386,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,57 +2400,80 @@ function FilloForm(props) {
       draftNotice: notPublished,
       stagedNotice: codeChangesStaged,
       syncErrorNotice: syncError ?? syncNoticeError ?? void 0,
+      uploadsAvailable: codeForm ? syncedUploadsAvailable : currentLoaded?.uploadsAvailable,
+      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 devEnv = useIsDevEnv();
+  const devChrome = !displayOnly && (props.preview === true || devEnv);
   const hpRef = useRef7(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 [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);
@@ -2295,6 +2491,11 @@ function ResolvedForm(props) {
       async () => {
         try {
           const result = await syncCodeForm2(client, codeForm, { bypassCache: true });
+          setResyncWarning({
+            code: result.warningCode,
+            url: result.warningUrl,
+            uploadsAvailable: result.uploadsAvailable
+          });
           if (result.status === "draft") {
             throw new FilloError2(
               "This form is no longer published. Submission was stopped before sending answers.",
@@ -2303,6 +2504,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 +2541,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 +2569,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 +2580,20 @@ function ResolvedForm(props) {
       resetChallengeRef.current?.();
     }
   });
-  useDraftFlush(api);
+  useDraftFlush(api, !displayOnly);
   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 chromeValue = useMemo5(
+    () => ({
+      devChrome,
+      uploadsAvailable,
+      warningCode,
+      warningUrl
+    }),
+    [devChrome, uploadsAvailable, warningCode, warningUrl]
+  );
   const settings = schema.settings;
   const submitted = api.status === "submitted";
   const liveSubmit = submitted && !api.restoredSubmission;
@@ -2390,7 +2616,7 @@ function ResolvedForm(props) {
   const appearance = props.appearance;
   const strings = resolveStrings(props.strings);
   if (api.status === "submitted") {
-    return /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs6(
       "div",
       {
         ref: successRef,
@@ -2406,19 +2632,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", children: "\u2713" }),
+                /* @__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 +2660,162 @@ 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 rootClass = slotClass3(`fillo-form ${props.className ?? ""}`, appearance, {
+    slot: "root",
+    status: api.status
+  });
+  const formBody = /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    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
+      }
+    ),
+    (api.resumedDraft || api.editingPrevious) && /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: slotClass3("fillo-resume", appearance, { slot: "resume" }),
+        "data-fillo": "resume",
+        role: "status",
+        children: [
+          /* @__PURE__ */ jsx7("span", { className: "fillo-resume-text", children: api.editingPrevious ? strings.editNotice : strings.resumeNotice }),
+          /* @__PURE__ */ jsx7("button", { type: "button", className: "fillo-resume-clear", onClick: api.resetDraft, children: strings.resumeStartOver })
+        ]
+      }
+    ),
+    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 }),
+    /* @__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(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,
@@ -2458,134 +2833,9 @@ function ResolvedForm(props) {
           focusFirstInvalid(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
@@ -2593,17 +2843,18 @@ import { useRef as useRef8 } 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()) {
+  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 +2862,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) {
@@ -2655,7 +2906,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 +2915,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 +2925,30 @@ 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,
+    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 +2958,11 @@ 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
+        });
         if (result.status === "draft") {
           throw new FilloError3(
             "This form is no longer published. Submission was stopped before sending answers.",
@@ -2705,6 +2971,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 +3026,43 @@ 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 chromeValue = useMemo6(
+    () => ({
+      devChrome,
+      uploadsAvailable: freshUploadsAvailable,
+      warningCode: freshWarningCode,
+      warningUrl: freshWarningUrl
+    }),
+    [devChrome, freshUploadsAvailable, 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