@usefillo/dom 0.8.0 → 0.10.0

package/dist/index.js

@@ -1,5 +1,7 @@
 // src/index.ts
 import {
+  DEFAULT_STRINGS,
+  DEFAULT_FIELD_STRINGS,
   FilloClient,
   FilloError,
   PHONE_COUNTRIES,
@@ -12,9 +14,11 @@ import {
   flagEmoji,
   formSchemasEqual,
   formatNational,
+  isBuildTimeDevEnv,
   isCodeForm,
   isField,
   isFilloError,
+  isLikelyDevEnv,
   normalizeFormSchema,
   normalizeFormTheme,
   parsePhone,
@@ -1040,6 +1044,8 @@ function signature(context) {
 function fileUpload(context) {
   const field = context.field;
   if (field.kind !== "file_upload") return null;
+  const internal = context;
+  const storageBlocked = internal.storageBlocked === true;
   const input = el("input", {
     className: "fillo-input",
     attrs: { id: context.ids.inputId, type: "file", "data-fillo": "control" }
@@ -1047,14 +1053,32 @@ function fileUpload(context) {
   if ((field.maxFiles ?? 1) > 1) input.multiple = true;
   if (field.accept?.length) input.accept = field.accept.join(",");
   const progress = context.uploadProgress?.get(field.id);
-  input.disabled = progress !== void 0;
+  input.disabled = progress !== void 0 || storageBlocked;
   applyFieldAria(input, field, context.error, context.ids);
   input.addEventListener("change", () => {
+    if (storageBlocked) return;
     const files = Array.from(input.files ?? []);
     void context.uploadFiles?.(field, files);
   });
   const wrap = el("div");
   wrap.appendChild(input);
+  if (storageBlocked) {
+    const hint = el("p", {
+      className: "fillo-upload-notice",
+      text: internal.storageFixUrl ? "Connect file storage to enable uploads" : DEFAULT_FIELD_STRINGS.uploadsUnavailable,
+      attrs: { role: "status" }
+    });
+    if (internal.storageFixUrl) {
+      hint.append(" \u2014 ");
+      hint.appendChild(
+        el("a", {
+          text: internal.storageFixUrl,
+          attrs: { href: internal.storageFixUrl, target: "_blank", rel: "noopener noreferrer" }
+        })
+      );
+    }
+    wrap.appendChild(hint);
+  }
   if (progress !== void 0) {
     const meter = el("div", {
       className: "fillo-upload-progress",
@@ -1127,6 +1151,7 @@ var DomFormController = class {
     this.target = target;
     this.options = options;
     this.element.className = "fillo-dom-root";
+    if (options.preview === true) warnPreviewInProduction();
     target.replaceChildren(this.element);
     void this.resolve();
   }
@@ -1162,6 +1187,13 @@ var DomFormController = class {
   // Teardown callbacks for open overlays (phone country popover) whose listeners
   // live on window/document and would otherwise leak past a re-render/unmount.
   overlays = /* @__PURE__ */ new Set();
+  /** Dev chrome = every developer-facing surface below (inline schema render,
+   * notices, verbose submit errors, upload pre-emption). `preview` forces it
+   * on off-localhost surfaces — cosmetic only, so correctness (where
+   * submissions go, whether they are accepted) never depends on it. */
+  devChrome() {
+    return this.options.preview === true || isDevEnv();
+  }
   get status() {
     if (this.phase === "ready") return this.engine?.getState().status ?? "idle";
     return this.phase;
@@ -1199,13 +1231,29 @@ var DomFormController = class {
     };
   }
   resolveFormIdFn;
-  /** Prod-only: the code form is an unpublished draft — submissions would 404. */
-  notLive = false;
+  /** The server refuses submissions right now — render the real form blurred
+   *  and display-only beneath the not-open card ("notOpen" for a draft /
+   *  storage-blocked form, "closed" for an expired/capped workspace). Doubles
+   *  as the display-only gate: while set, the engine is created without a
+   *  client/formId/resolver and every interactive entry point no-ops. */
+  notOpenVariant = null;
   /** Exact integration failure retained for custom error/dev surfaces. */
   fatalError = null;
   genericUnavailable = false;
   syncErrorNotice = null;
   stagedNotice = false;
+  /** Dev chrome: the code form is a draft — a visible banner, not console-only. */
+  draftNotice = false;
+  /** Sync's owner-facing storage advisory + dashboard deep-link. It never
+   *  substitutes for the explicit uploadsAvailable control state. */
+  syncWarningCode;
+  syncWarningUrl;
+  /** Server-authoritative ability to start a new file upload. */
+  uploadsAvailable;
+  /** Code of the last submit-time resolution failure (form_not_published,
+   *  form_schema_changed, …) — the connect-storage deep-link renders only with
+   *  the failure it explains, never glued onto transport/challenge errors. */
+  resolutionFailureCode = null;
   async resolve() {
     try {
       const codeForm = isCodeForm(this.options.form) ? this.options.form : null;
@@ -1215,6 +1263,9 @@ var DomFormController = class {
           this.resolveFormIdFn = async () => {
             try {
               const result = await syncCodeForm(client, codeForm, { bypassCache: true });
+              this.syncWarningCode = result.warningCode;
+              this.syncWarningUrl = result.warningUrl;
+              this.uploadsAvailable = result.uploadsAvailable;
               if (result.status === "draft") {
                 throw new FilloError(
                   "This form is no longer published. Submission was stopped before sending answers.",
@@ -1223,6 +1274,14 @@ var DomFormController = class {
                   "form_not_published"
                 );
               }
+              if (result.accepting === false) {
+                throw new FilloError(
+                  "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 FilloError(
@@ -1250,9 +1309,11 @@ var DomFormController = class {
                   )
                 );
               }
+              this.resolutionFailureCode = null;
               return result.formId;
             } catch (error) {
               const failure = toFilloError(error);
+              this.resolutionFailureCode = failure.code ?? "sync_failed";
               this.reportSubmitSyncFailure(failure);
               throw failure;
             }
@@ -1273,7 +1334,7 @@ var DomFormController = class {
           return;
         }
         if (!client?.key) return;
-        if (isDevEnv()) {
+        if (this.devChrome()) {
           this.setSchema(codeForm.schema, this.options.theme ?? codeForm.theme, this.options.formId);
         } else {
           this.theme = this.options.theme ?? codeForm.theme;
@@ -1290,9 +1351,13 @@ var DomFormController = class {
               "sync_snapshot_required"
             );
           }
-          const development = isDevEnv();
-          this.notLive = result.status === "draft" && !development;
+          const development = this.devChrome();
+          this.notOpenVariant = development ? null : result.status === "draft" ? "notOpen" : result.accepting === false ? overlayVariant(result.acceptingReason) : null;
           this.stagedNotice = Boolean(result.staged);
+          this.draftNotice = result.status === "draft";
+          this.syncWarningCode = result.warningCode;
+          this.syncWarningUrl = result.warningUrl;
+          this.uploadsAvailable = result.uploadsAvailable;
           if (result.branding) {
             this.fetchedPoweredBy = result.branding.poweredBy;
             this.fetchedBrandLabel = result.branding.label;
@@ -1318,10 +1383,11 @@ var DomFormController = class {
               )
             );
           }
+          const connectStorage = result.warningUrl ? ` \u2014 connect storage to publish: ${result.warningUrl}` : "";
           if (result.staged) {
-            console.info(`[fillo] "${codeForm.id}" changes staged as a draft \u2014 rendering the live version until you publish them in your Fillo dashboard`);
+            console.info(`[fillo] "${codeForm.id}" changes staged as a draft \u2014 rendering the live version until you publish them in your Fillo dashboard${connectStorage}`);
           } else if (result.status === "draft") {
-            console.info(`[fillo] "${codeForm.id}" is a draft \u2014 it renders here but won't accept responses until published`);
+            console.info(`[fillo] "${codeForm.id}" is a draft \u2014 it renders here but won't accept responses until published${connectStorage}`);
           }
         } catch (error) {
           if (this.destroyed) return;
@@ -1341,10 +1407,22 @@ var DomFormController = class {
       this.render();
       const published = await this.options.client.getForm(this.options.formId);
       if (this.destroyed) return;
-      this.closed = Boolean(published.closed);
+      if (published.accepting === false) {
+        this.notOpenVariant = overlayVariant(published.acceptingReason);
+      } else {
+        this.closed = Boolean(published.closed);
+      }
+      this.uploadsAvailable = published.uploadsAvailable;
       this.fetchedPoweredBy = published.branding?.poweredBy ?? null;
       this.fetchedBrandLabel = published.branding?.label;
       this.fetchedBrandHref = published.branding?.href;
+      if (published.accepting === false && this.options.renderError) {
+        const message = this.notOpenVariant === "closed" ? "This form is no longer accepting responses." : "This form isn't accepting responses yet.";
+        this.fatalError = new FilloError(message, 403, void 0, published.acceptingReason);
+        this.phase = "error";
+        this.render(this.fatalError);
+        return;
+      }
       this.setSchema(published.schema, this.options.theme ?? published.theme ?? void 0, published.id);
     } catch (error) {
       if (this.destroyed) return;
@@ -1360,17 +1438,21 @@ var DomFormController = class {
     this.schema = normalizedSchema;
     this.theme = theme;
     this.formId = formId;
+    const displayOnly = this.notOpenVariant !== null;
     this.engine = coreCreateFormController({
       form: normalizedSchema,
-      formId,
-      client: this.options.client,
+      formId: displayOnly ? void 0 : formId,
+      client: displayOnly ? void 0 : this.options.client,
       initialData: this.options.initialData,
-      onChange: this.options.onChange,
-      onSubmitted: this.options.onSubmitted,
+      onChange: displayOnly ? void 0 : this.options.onChange,
+      onSubmitted: displayOnly ? void 0 : this.options.onSubmitted,
       getHoneypot: () => this.element.querySelector('input[name="fillo_hp_field"]')?.value ?? this.hpValue,
       surface: "default",
-      resolveFormId: this.resolveFormIdFn,
-      respondent: this.options.respondent
+      resolveFormId: displayOnly ? void 0 : this.resolveFormIdFn,
+      // Dev chrome gets the developer-grade resolution failure (message +
+      // machine code) instead of the respondent-safe "unavailable" fallback.
+      verboseResolutionErrors: this.devChrome(),
+      respondent: displayOnly ? void 0 : this.options.respondent
     });
     let lastStatus = this.engine.getState().status;
     let lastResumed = this.engine.getState().resumedDraft;
@@ -1385,7 +1467,7 @@ var DomFormController = class {
         this.queueRender();
       }
     });
-    this.configureDraftFlush(normalizedSchema);
+    if (!displayOnly) this.configureDraftFlush(normalizedSchema);
     this.phase = this.closed ? "closed" : "ready";
     this.render();
   }
@@ -1404,7 +1486,7 @@ var DomFormController = class {
     this.theme = theme;
     this.formId = formId;
     this.engine.setContext({ form: normalizedSchema, formId });
-    this.configureDraftFlush(normalizedSchema);
+    if (this.notOpenVariant === null) this.configureDraftFlush(normalizedSchema);
     this.phase = this.closed ? "closed" : "ready";
     this.render();
   }
@@ -1438,24 +1520,25 @@ var DomFormController = class {
     this.setValueInternal(fieldId, value);
   }
   setValueInternal(fieldId, value, opts = {}) {
+    if (this.notOpenVariant) return;
     this.engine?.setValue(fieldId, value);
     if (opts.render !== false) this.queueRender();
   }
   next() {
-    if (!this.engine) return;
+    if (!this.engine || this.notOpenVariant) return;
     const before = this.engine.getState().pageIndex;
     this.engine.next();
     this.focusIntent = this.engine.getState().pageIndex !== before ? "page" : "error";
     this.render();
   }
   back() {
-    if (!this.engine) return;
+    if (!this.engine || this.notOpenVariant) return;
     this.engine.back();
     this.focusIntent = "page";
     this.render();
   }
   async submit() {
-    if (!this.engine || this.phase !== "ready") return;
+    if (!this.engine || this.phase !== "ready" || this.notOpenVariant) return;
     const pending = this.engine.submit();
     if (this.hasErrors()) this.focusIntent = "error";
     this.render();
@@ -1492,7 +1575,7 @@ var DomFormController = class {
     this.engine?.setContext({ respondent });
   }
   async uploadFiles(field, files) {
-    if (!this.schema) return;
+    if (!this.schema || this.notOpenVariant) return;
     if (this.uploadProgress.has(field.id)) {
       this.uploadNotices.set(field.id, "Wait for the current upload to finish before adding more files.");
       this.queueRender();
@@ -1585,6 +1668,11 @@ var DomFormController = class {
     this.engine = null;
     this.target.replaceChildren();
   }
+  /** Keep an optional-upload form accepting while pre-empting only file
+   * controls the current definition envelope says the server will refuse. */
+  storageBlocked() {
+    return this.uploadsAvailable === false;
+  }
   /** Add/return the phone popover teardown; called back on re-render or destroy. */
   registerOverlay = (close) => {
     this.overlays.add(close);
@@ -1687,7 +1775,7 @@ var DomFormController = class {
       `[fillo] form sync failed${error.code ? ` (${error.code})` : ""}: ${error.message}`
     );
     this.syncErrorNotice = error;
-    const development = isDevEnv();
+    const development = this.devChrome();
     if (!development || this.options.renderError) {
       this.genericUnavailable = !development;
       this.handleError(error);
@@ -1704,7 +1792,7 @@ var DomFormController = class {
     );
     this.syncErrorNotice = error;
     this.options.onError?.(error);
-    if (isDevEnv()) this.render();
+    if (this.devChrome()) this.render();
   }
   /** Submit-time verification failed: keep the form/answers for a safe retry. */
   reportSubmitSyncFailure(error) {
@@ -1747,7 +1835,7 @@ var DomFormController = class {
     if (this.phase === "error" && activeError) {
       const errorView = this.options.renderError?.(activeError) ?? el("div", {
         className: "fillo-form fillo-form--error",
-        text: this.genericUnavailable ? "This form is unavailable." : activeError.message
+        text: this.genericUnavailable ? "This form is unavailable." : loadFailureMessage(activeError)
       });
       if (!errorView.hasAttribute("data-fillo")) errorView.setAttribute("data-fillo", "root");
       if (!errorView.hasAttribute("data-state")) errorView.setAttribute("data-state", "error");
@@ -1766,14 +1854,9 @@ var DomFormController = class {
       this.element.appendChild(closed);
       return;
     }
-    if (this.notLive) {
-      const panel = el("div", {
-        className: `fillo-form fillo-form--closed ${this.options.className ?? ""}`,
-        attrs: { "data-fillo": "root", "data-state": "closed" }
-      });
-      themeStyle(panel, this.theme);
-      panel.appendChild(el("p", { className: "fillo-closed", text: "This form isn't live yet." }));
-      this.element.appendChild(panel);
+    if (this.notOpenVariant && this.schema) {
+      this.element.appendChild(this.renderNotOpen(this.notOpenVariant));
+      if (this.brandingVisible()) this.element.appendChild(poweredByEl(this.fetchedBrandLabel, this.fetchedBrandHref));
       return;
     }
     if (!this.schema) return;
@@ -1797,11 +1880,20 @@ var DomFormController = class {
       }
       return;
     }
-    if (!this.options.client && isDevEnv()) this.element.appendChild(devNoClientEl());
-    if (this.syncErrorNotice && isDevEnv()) {
-      this.element.appendChild(devSyncErrorEl(this.syncErrorNotice));
+    if (this.devChrome()) {
+      appendChildren(
+        this.element,
+        devChromeEls({
+          preview: this.options.preview === true,
+          devNotices: this.options.devNotices,
+          syncError: this.syncErrorNotice,
+          staged: this.stagedNotice,
+          draft: this.draftNotice,
+          warningUrl: this.syncWarningUrl,
+          noClient: !this.options.client
+        })
+      );
     }
-    if (this.stagedNotice && isDevEnv()) this.element.appendChild(devStagedEl());
     this.element.appendChild(this.renderForm());
     if (this.brandingVisible()) this.element.appendChild(poweredByEl(this.fetchedBrandLabel, this.fetchedBrandHref));
     this.applyFocus(intent, captured);
@@ -1810,27 +1902,71 @@ var DomFormController = class {
   brandingVisible() {
     return this.fetchedPoweredBy ?? true;
   }
+  /** Production not-accepting chrome: the REAL form rendered blurred and
+   * display-only beneath a small card — honest about the state without a dead
+   * grey panel, and impossible to fill. The wrapper is inert + aria-hidden +
+   * pointer-events:none, the preview markup nests every control in a natively
+   * disabled fieldset (see renderForm), and the engine behind it was created
+   * without a client/formId/resolver — so nothing inside can focus, submit,
+   * start an upload session, or touch saved-progress drafts. */
+  renderNotOpen(variant) {
+    const root = el("div", {
+      className: `fillo-form fillo-form--not-open ${this.options.className ?? ""}`,
+      attrs: { "data-fillo": "root", "data-state": "closed" }
+    });
+    themeStyle(root, this.theme);
+    const preview = el("div", {
+      className: "fillo-not-open-preview",
+      attrs: { "aria-hidden": "true", inert: "" }
+    });
+    preview.appendChild(this.renderForm());
+    const card = el("div", {
+      className: "fillo-not-open-card",
+      attrs: { role: "status", "data-fillo": "not-open-card" }
+    });
+    card.appendChild(
+      el("h2", {
+        className: "fillo-not-open-title",
+        text: variant === "closed" ? DEFAULT_STRINGS.closedTitle : DEFAULT_STRINGS.notOpenTitle
+      })
+    );
+    card.appendChild(
+      el("p", {
+        className: "fillo-not-open-body",
+        text: variant === "closed" ? DEFAULT_STRINGS.closed : DEFAULT_STRINGS.notOpenBody
+      })
+    );
+    appendChildren(root, [preview, card]);
+    return root;
+  }
   renderForm() {
     const api = this.api();
-    const form = el("form", {
+    const displayOnly = this.notOpenVariant !== null;
+    const form = el(displayOnly ? "div" : "form", {
       className: `fillo-form ${this.options.className ?? ""}`,
       attrs: {
-        "data-fillo": "root",
-        "data-state": api.status,
+        "data-fillo": displayOnly ? "preview-form" : "root",
+        "data-state": displayOnly ? "preview" : api.status,
         "data-page": String(api.pageIndex + 1)
       }
     });
     form.toggleAttribute("data-last-page", api.isLastPage);
     themeStyle(form, this.theme);
-    form.noValidate = true;
     const advance = () => {
       if (api.isLastPage) void this.submit();
       else this.next();
     };
-    form.addEventListener("submit", (event) => {
-      event.preventDefault();
-      advance();
-    });
+    if (!displayOnly) {
+      const formEl = form;
+      formEl.noValidate = true;
+      formEl.addEventListener("submit", (event) => {
+        event.preventDefault();
+        advance();
+      });
+    }
+    const content = displayOnly ? form.appendChild(
+      el("fieldset", { className: "fillo-not-open-fields", attrs: { disabled: "" } })
+    ) : form;
     const restoreState = this.engine?.getState();
     if (restoreState?.resumedDraft || restoreState?.editingPrevious) {
       const resume = el("div", {
@@ -1850,7 +1986,7 @@ var DomFormController = class {
       });
       clear.addEventListener("click", () => this.resetDraft());
       resume.appendChild(clear);
-      form.appendChild(resume);
+      content.appendChild(resume);
     }
     if (api.pageCount > 1 && this.schema?.settings.showProgress !== false) {
       const progress = el("div", {
@@ -1871,7 +2007,7 @@ var DomFormController = class {
         "--fillo-progress-value",
         `${(api.pageIndex + 1) / api.pageCount * 100}%`
       );
-      form.appendChild(progress);
+      content.appendChild(progress);
     }
     if (api.pageIndex === 0) {
       const header = el("header", { className: "fillo-header", attrs: { "data-fillo": "header" } });
@@ -1889,9 +2025,9 @@ var DomFormController = class {
           })
         );
       }
-      form.appendChild(header);
+      content.appendChild(header);
     } else if (api.page.title) {
-      form.appendChild(
+      content.appendChild(
         el("h2", {
           className: "fillo-page-title",
           text: api.page.title,
@@ -1904,25 +2040,33 @@ var DomFormController = class {
       const rendered = this.renderBlock(pipeBlock(block, this.mutableData, api.form), api);
       if (rendered) blocks.appendChild(rendered);
     }
-    form.appendChild(blocks);
-    const hp = el("input", { className: "fillo-hp", attrs: { type: "text", name: "fillo_hp_field", tabindex: "-1", autocomplete: "off", "aria-hidden": "true" } });
-    hp.style.position = "absolute";
-    hp.style.left = "-9999px";
-    hp.style.top = "auto";
-    hp.style.width = "1px";
-    hp.style.height = "1px";
-    hp.style.opacity = "0";
-    hp.style.overflow = "hidden";
-    hp.style.pointerEvents = "none";
-    hp.addEventListener("input", () => {
-      this.hpValue = hp.value;
-    });
-    form.appendChild(hp);
+    content.appendChild(blocks);
+    if (!displayOnly) {
+      const hp = el("input", { className: "fillo-hp", attrs: { type: "text", name: "fillo_hp_field", tabindex: "-1", autocomplete: "off", "aria-hidden": "true" } });
+      hp.style.position = "absolute";
+      hp.style.left = "-9999px";
+      hp.style.top = "auto";
+      hp.style.width = "1px";
+      hp.style.height = "1px";
+      hp.style.opacity = "0";
+      hp.style.overflow = "hidden";
+      hp.style.pointerEvents = "none";
+      hp.addEventListener("input", () => {
+        this.hpValue = hp.value;
+      });
+      content.appendChild(hp);
+    }
     const submitError = api.status === "error" ? "This form can't submit right now. Please try again in a moment." : this.engine?.getState().submitError;
     if (submitError) {
-      form.appendChild(
-        el("p", { className: "fillo-submit-error", attrs: { role: "alert" }, text: submitError })
-      );
+      const alert = el("p", { className: "fillo-submit-error", attrs: { role: "alert" }, text: submitError });
+      const fixUrl = this.devChrome() && this.resolutionFailureCode === "form_not_published" && this.syncWarningCode === "storage_required" ? safeHttpUrl(this.syncWarningUrl) : null;
+      if (fixUrl) {
+        alert.append(" Connect storage: ");
+        alert.appendChild(
+          el("a", { text: fixUrl, attrs: { href: fixUrl, target: "_blank", rel: "noopener noreferrer" } })
+        );
+      }
+      content.appendChild(alert);
     }
     const autoSubmit = api.form.settings.submitMode === "auto";
     const showPrimaryButton = !autoSubmit || !api.isLastPage || needsExplicitSubmit(visibleFields(api.form, api.data));
@@ -1951,7 +2095,7 @@ var DomFormController = class {
         });
         footer.appendChild(submit);
       }
-      form.appendChild(footer);
+      content.appendChild(footer);
     }
     return form;
   }
@@ -1982,7 +2126,9 @@ var DomFormController = class {
       activeOtherFields: this.activeOtherFields,
       getValue: () => this.engine?.getState().data[block.id],
       registerOverlay: this.registerOverlay,
-      uploadNotice: this.uploadNotices.get(block.id)
+      uploadNotice: this.uploadNotices.get(block.id),
+      storageBlocked: this.storageBlocked(),
+      storageFixUrl: this.storageBlocked() && this.devChrome() ? safeHttpUrl(this.syncWarningUrl) : null
     };
     const renderer = block.kind === "custom" ? this.options.customComponents?.[block.component] ?? this.options.components?.custom : this.options.components?.[block.kind] ?? defaultFieldRenderer;
     return renderer?.(context) ?? null;
@@ -2017,13 +2163,16 @@ function poweredByEl(label, href) {
     attrs: { href: badgeUrl(href), target: "_blank", rel: "noopener noreferrer" }
   });
 }
+function overlayVariant(reason) {
+  return reason === "expired" || reason === "capped" || reason === "storage_full" ? "closed" : "notOpen";
+}
 function isDevEnv() {
-  return typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
+  return isLikelyDevEnv();
 }
 function devNoClientEl() {
   return el("div", {
     className: "fillo-devwarning",
-    text: "No Fillo client connected \u2014 this form is render-only and won't save responses. Pass a client to collect them in Fillo, or forward with webhooks. (Shown only in development.)",
+    text: "No Fillo client connected \u2014 this form is render-only and won't save responses. Pass a client to collect them in Fillo, or forward with webhooks. (Shown only in development and preview.)",
     attrs: { role: "alert" }
   });
 }
@@ -2041,6 +2190,53 @@ function devStagedEl() {
     attrs: { role: "alert" }
   });
 }
+function devDraftEl(warningUrl) {
+  const node = el("div", { className: "fillo-devwarning", attrs: { role: "alert" } });
+  node.append(
+    "Draft form \u2014 it renders here, but it won't accept responses until you publish it in your Fillo dashboard. "
+  );
+  const safeUrl = safeHttpUrl(warningUrl);
+  if (safeUrl) {
+    node.append("Connect storage to publish: ");
+    node.appendChild(
+      el("a", { text: safeUrl, attrs: { href: safeUrl, target: "_blank", rel: "noopener noreferrer" } })
+    );
+    node.append(". ");
+  }
+  node.append("(Shown only in development and preview.)");
+  return node;
+}
+function previewBadgeEl() {
+  return el("span", {
+    className: "fillo-preview-badge",
+    text: "Preview",
+    attrs: { "data-fillo": "preview-badge" }
+  });
+}
+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 devChromeEls(state) {
+  const nodes = [];
+  if (state.preview) nodes.push(previewBadgeEl());
+  if (state.devNotices === false) return nodes;
+  if (state.syncError) nodes.push(devSyncErrorEl(state.syncError));
+  else if (state.staged) nodes.push(devStagedEl());
+  else if (state.draft) nodes.push(devDraftEl(state.warningUrl));
+  else if (state.noClient) nodes.push(devNoClientEl());
+  return nodes;
+}
+function loadFailureMessage(error) {
+  if (error.status === 404) return DEFAULT_STRINGS.loadFailedNotFound;
+  if (error.status === 0) return DEFAULT_STRINGS.loadFailedNetwork;
+  if (error.status === 422) return DEFAULT_STRINGS.renderFailed;
+  return DEFAULT_STRINGS.loadFailed;
+}
 function toFilloError(error) {
   if (isFilloError(error)) return error;
   return new FilloError(error instanceof Error ? error.message : String(error), 0);
@@ -2066,7 +2262,7 @@ var FilloFormElement = class extends HTMLElementBase {
   mounted = false;
   mountScheduled = false;
   static get observedAttributes() {
-    return ["publishable-key", "form-id"];
+    return ["publishable-key", "form-id", "data-preview"];
   }
   connectedCallback() {
     this.scheduleMount();
@@ -2115,6 +2311,14 @@ var FilloFormElement = class extends HTMLElementBase {
       if (this.isConnected) this.mount();
     });
   }
+  /** data-preview is on when present UNLESS its value says off ("false"/"0"):
+   *  frameworks stringify booleans onto data-* attributes rather than omitting
+   *  them, and a stringified `false` must never enable dev chrome for real
+   *  respondents. Disable by removing the attribute or setting it to "false". */
+  previewAttrEnabled() {
+    const value = this.getAttribute("data-preview");
+    return value !== null && value !== "false" && value !== "0";
+  }
   mount() {
     this.instance?.destroy();
     const key = this.getAttribute("publishable-key") ?? void 0;
@@ -2126,6 +2330,12 @@ var FilloFormElement = class extends HTMLElementBase {
       formId,
       theme: this.assignedTheme,
       initialData: this.assignedInitialData,
+      // Same cosmetic-only contract as renderForm's `preview` option: forces
+      // the dev chrome + a visible Preview badge on off-localhost surfaces,
+      // and never changes where submissions go or whether they are accepted.
+      // Value-aware: frameworks stringify booleans onto data-* attributes, so
+      // data-preview="false"/"0" must mean OFF, not presence-implies-on.
+      preview: this.previewAttrEnabled() ? true : void 0,
       onChange: (data) => this.dispatchEvent(new CustomEvent("fillo-change", { detail: { data } })),
       onSubmitted: (responseId, data) => this.dispatchEvent(new CustomEvent("fillo-submit", { detail: { responseId, data } })),
       onError: (error) => this.dispatchEvent(new CustomEvent("fillo-error", { detail: { error } }))