@usefillo/react 0.11.0 → 0.12.0

package/dist/index.js

@@ -483,6 +483,7 @@ import {
   formatGroupedNumber,
   isField,
   isValidPartialNumberText,
+  localeForNotation,
   parseGroupedNumber,
   pipeBlock,
   radioGroupStep,
@@ -1007,7 +1008,14 @@ function uploadFailureMessage(error, strings) {
   }
   return strings.uploadFailed;
 }
-function FileUploadField({ field, value, error, setValue, api, ids: providedIds }) {
+function FileUploadField({
+  field,
+  value,
+  error,
+  setValue,
+  api,
+  ids: providedIds
+}) {
   const ids = useFilloFieldIds(field.id, providedIds);
   const slots = useFieldSlots(field, error);
   const strings = useStrings();
@@ -1036,9 +1044,10 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
   const configuredMaxMb = schema.maxFileSizeMb ?? 500;
   const maxMb = chrome?.uploadFileSizeLimitMb ? Math.min(configuredMaxMb, chrome.uploadFileSizeLimitMb) : configuredMaxMb;
   const maxBytes = maxMb * 1024 * 1024;
+  const renderOnly = chrome?.renderOnly === true;
   const storageBlocked = chrome?.uploadsAvailable === false;
   const storageUrl = storageBlocked && chrome?.devChrome ? safeHttpUrl(chrome.warningUrl) : null;
-  const canUpload = Boolean(api.client && api.formId) && !storageBlocked;
+  const canUpload = !renderOnly && Boolean(api.client && api.formId) && !storageBlocked;
   const activeInFlight = inFlight.filter((f) => !f.error).length;
   const remaining = maxFiles - files.length - activeInFlight;
   async function startUpload(file) {
@@ -1047,7 +1056,15 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
     if (file.size > maxBytes) {
       setInFlight((prev) => [
         ...prev,
-        { key, name: file.name, size: file.size, fraction: 0, file, tooLarge: true, error: strings.fileTooLarge(maxMb) }
+        {
+          key,
+          name: file.name,
+          size: file.size,
+          fraction: 0,
+          file,
+          tooLarge: true,
+          error: strings.fileTooLarge(maxMb)
+        }
       ]);
       return;
     }
@@ -1074,9 +1091,7 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
     } catch (err) {
       if (mountedRef.current) {
         const message = uploadFailureMessage(err, strings);
-        setInFlight(
-          (prev) => prev.map((f) => f.key === key ? { ...f, error: message } : f)
-        );
+        setInFlight((prev) => prev.map((f) => f.key === key ? { ...f, error: message } : f));
       }
     } finally {
       controllers.current.delete(key);
@@ -1100,174 +1115,190 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
     setValue(next);
   }
   const describedBy = [field.description ? ids.descriptionId : null, error ? ids.errorId : null].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ jsxs4("div", { ...slots.wrapperProps(`fillo-field fillo-field--file_upload${error ? " fillo-field--error" : ""}`), children: [
-    /* @__PURE__ */ jsxs4("label", { className: slots.label, "data-fillo": "label", id: ids.labelId, htmlFor: ids.inputId, children: [
-      field.label,
-      !field.required && /* @__PURE__ */ jsx4("span", { className: "fillo-optional", children: strings.optional })
-    ] }),
-    field.description && /* @__PURE__ */ jsx4("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
-    remaining > 0 && /* @__PURE__ */ jsxs4(
-      "div",
-      {
-        "data-fillo": "control",
-        "data-drag-over": dragOver ? "" : void 0,
-        className: slots.control(`fillo-dropzone${dragOver ? " fillo-dropzone--over" : ""}${canUpload ? "" : " fillo-dropzone--disabled"}`),
-        onDragOver: (e) => {
-          e.preventDefault();
-          setDragOver(true);
-        },
-        onDragLeave: () => setDragOver(false),
-        onDrop: (e) => {
-          e.preventDefault();
-          setDragOver(false);
-          if (canUpload) handleFiles(e.dataTransfer.files);
-        },
-        onClick: () => canUpload && inputRef.current?.click(),
-        role: "button",
-        tabIndex: 0,
-        "aria-disabled": !canUpload || void 0,
-        "aria-labelledby": ids.labelId,
-        "aria-required": field.required ? true : void 0,
-        "aria-invalid": error ? true : void 0,
-        "aria-describedby": describedBy,
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            if (canUpload) inputRef.current?.click();
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      ...slots.wrapperProps(
+        `fillo-field fillo-field--file_upload${error ? " fillo-field--error" : ""}`
+      ),
+      children: [
+        /* @__PURE__ */ jsxs4("label", { className: slots.label, "data-fillo": "label", id: ids.labelId, htmlFor: ids.inputId, children: [
+          field.label,
+          !field.required && /* @__PURE__ */ jsx4("span", { className: "fillo-optional", children: strings.optional })
+        ] }),
+        field.description && /* @__PURE__ */ jsx4("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
+        remaining > 0 && /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            "data-fillo": "control",
+            "data-drag-over": dragOver ? "" : void 0,
+            className: slots.control(
+              `fillo-dropzone${dragOver ? " fillo-dropzone--over" : ""}${canUpload ? "" : " fillo-dropzone--disabled"}`
+            ),
+            onDragOver: (e) => {
+              e.preventDefault();
+              setDragOver(true);
+            },
+            onDragLeave: () => setDragOver(false),
+            onDrop: (e) => {
+              e.preventDefault();
+              setDragOver(false);
+              if (canUpload) handleFiles(e.dataTransfer.files);
+            },
+            onClick: () => canUpload && inputRef.current?.click(),
+            role: "button",
+            tabIndex: 0,
+            "aria-disabled": !canUpload || void 0,
+            "aria-labelledby": ids.labelId,
+            "aria-invalid": error ? true : void 0,
+            "aria-describedby": describedBy,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                if (canUpload) inputRef.current?.click();
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx4(
+                "input",
+                {
+                  ref: inputRef,
+                  id: ids.inputId,
+                  type: "file",
+                  hidden: true,
+                  disabled: !canUpload,
+                  multiple: maxFiles > 1,
+                  accept: schema.accept?.join(","),
+                  onChange: (e) => canUpload && handleFiles(e.target.files)
+                }
+              ),
+              canUpload ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                /* @__PURE__ */ jsx4("span", { className: "fillo-dropzone-title", children: strings.dropzoneTitle(maxFiles > 1) }),
+                /* @__PURE__ */ jsx4("span", { className: "fillo-dropzone-hint", children: strings.dropzoneHint(maxMb) })
+              ] }) : storageBlocked && chrome?.devChrome ? /* @__PURE__ */ jsxs4("span", { className: "fillo-dropzone-hint", children: [
+                "Connect file storage to enable uploads",
+                storageUrl && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                  " \u2014 ",
+                  /* @__PURE__ */ jsx4("a", { href: storageUrl, target: "_blank", rel: "noopener noreferrer", children: storageUrl })
+                ] })
+              ] }) : /* @__PURE__ */ jsx4("span", { className: "fillo-dropzone-hint", children: renderOnly ? strings.uploadsRenderOnly : storageBlocked ? strings.uploadsUnavailable : strings.uploadsDisabled })
+            ]
           }
-        },
-        children: [
-          /* @__PURE__ */ jsx4(
-            "input",
-            {
-              ref: inputRef,
-              id: ids.inputId,
-              type: "file",
-              hidden: true,
-              disabled: !canUpload,
-              multiple: maxFiles > 1,
-              accept: schema.accept?.join(","),
-              onChange: (e) => canUpload && handleFiles(e.target.files)
-            }
-          ),
-          canUpload ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
-            /* @__PURE__ */ jsx4("span", { className: "fillo-dropzone-title", children: strings.dropzoneTitle(maxFiles > 1) }),
-            /* @__PURE__ */ jsx4("span", { className: "fillo-dropzone-hint", children: strings.dropzoneHint(maxMb) })
-          ] }) : storageBlocked && chrome?.devChrome ? /* @__PURE__ */ jsxs4("span", { className: "fillo-dropzone-hint", children: [
-            "Connect file storage to enable uploads",
-            storageUrl && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-              " \u2014 ",
-              /* @__PURE__ */ jsx4("a", { href: storageUrl, target: "_blank", rel: "noopener noreferrer", children: storageUrl })
-            ] })
-          ] }) : /* @__PURE__ */ jsx4("span", { className: "fillo-dropzone-hint", children: storageBlocked ? strings.uploadsUnavailable : strings.uploadsDisabled })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx4(
-      "div",
-      {
-        role: "status",
-        "aria-live": "polite",
-        className: "fillo-sr-only",
-        style: { position: "absolute", left: "-9999px", width: 1, height: 1, overflow: "hidden" },
-        children: uploadStatus(inFlight, files.length, strings)
-      }
-    ),
-    (inFlight.length > 0 || files.length > 0) && /* @__PURE__ */ jsxs4("ul", { className: "fillo-files", children: [
-      files.map((f) => /* @__PURE__ */ jsxs4("li", { className: "fillo-file fillo-file--done", children: [
-        /* @__PURE__ */ jsx4("span", { className: "fillo-file-name", children: f.name }),
-        /* @__PURE__ */ jsx4("span", { className: "fillo-file-meta", children: formatBytes(f.size) }),
-        /* @__PURE__ */ jsx4("span", { className: "fillo-sr-only", children: "Uploaded" }),
+        ),
         /* @__PURE__ */ jsx4(
-          "button",
+          "div",
           {
-            type: "button",
-            className: "fillo-file-remove",
-            "aria-label": `Remove ${f.name}`,
-            onClick: () => removeFile(f.fileId),
-            children: "\xD7"
+            role: "status",
+            "aria-live": "polite",
+            className: "fillo-sr-only",
+            style: { position: "absolute", left: "-9999px", width: 1, height: 1, overflow: "hidden" },
+            children: uploadStatus(inFlight, files.length, strings)
           }
-        )
-      ] }, f.fileId)),
-      inFlight.map((f) => /* @__PURE__ */ jsxs4(
-        "li",
-        {
-          className: `fillo-file${f.error ? " fillo-file--failed" : ""}`,
-          ...f.error ? {} : {
-            role: "progressbar",
-            "aria-label": `Uploading ${f.name}`,
-            "aria-valuemin": 0,
-            "aria-valuemax": 100,
-            "aria-valuenow": Math.round(f.fraction * 100)
-          },
-          children: [
+        ),
+        (inFlight.length > 0 || files.length > 0) && /* @__PURE__ */ jsxs4("ul", { className: "fillo-files", children: [
+          files.map((f) => /* @__PURE__ */ jsxs4("li", { className: "fillo-file fillo-file--done", children: [
             /* @__PURE__ */ jsx4("span", { className: "fillo-file-name", children: f.name }),
-            f.error ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
-              /* @__PURE__ */ jsxs4("span", { className: "fillo-file-actions", children: [
-                f.file && !f.tooLarge && remaining > 0 && /* @__PURE__ */ jsx4(
-                  "button",
-                  {
-                    type: "button",
-                    className: "fillo-file-retry",
-                    "aria-label": `${strings.uploadRetry} ${f.name}`,
-                    onClick: () => {
-                      const retryFile = f.file;
-                      if (!retryFile) return;
-                      setInFlight((prev) => prev.filter((x) => x.key !== f.key));
-                      void startUpload(retryFile);
-                    },
-                    children: strings.uploadRetry
-                  }
-                ),
-                /* @__PURE__ */ jsx4(
-                  "button",
-                  {
-                    type: "button",
-                    className: "fillo-file-remove",
-                    "aria-label": "Dismiss",
-                    onClick: () => setInFlight((prev) => prev.filter((x) => x.key !== f.key)),
-                    children: "\xD7"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx4("span", { className: "fillo-file-error", role: "alert", children: f.error })
-            ] }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
-              /* @__PURE__ */ jsxs4("span", { className: "fillo-file-meta", children: [
-                Math.round(f.fraction * 100),
-                "% of ",
-                formatBytes(f.size)
-              ] }),
-              /* @__PURE__ */ jsx4("span", { className: "fillo-progress", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("span", { className: "fillo-progress-bar", style: { width: `${f.fraction * 100}%` } }) }),
-              /* @__PURE__ */ jsx4(
-                "button",
-                {
-                  type: "button",
-                  className: "fillo-file-remove",
-                  "aria-label": `Cancel ${f.name}`,
-                  onClick: () => cancelUpload(f.key),
-                  children: "\xD7"
-                }
-              )
-            ] })
-          ]
-        },
-        f.key
-      ))
-    ] }),
-    error && /* @__PURE__ */ jsx4("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, children: error })
-  ] });
+            /* @__PURE__ */ jsx4("span", { className: "fillo-file-meta", children: formatBytes(f.size) }),
+            /* @__PURE__ */ jsx4("span", { className: "fillo-sr-only", children: "Uploaded" }),
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                className: "fillo-file-remove",
+                "aria-label": `Remove ${f.name}`,
+                onClick: () => removeFile(f.fileId),
+                children: "\xD7"
+              }
+            )
+          ] }, f.fileId)),
+          inFlight.map((f) => /* @__PURE__ */ jsxs4(
+            "li",
+            {
+              className: `fillo-file${f.error ? " fillo-file--failed" : ""}`,
+              ...f.error ? {} : {
+                role: "progressbar",
+                "aria-label": `Uploading ${f.name}`,
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-valuenow": Math.round(f.fraction * 100)
+              },
+              children: [
+                /* @__PURE__ */ jsx4("span", { className: "fillo-file-name", children: f.name }),
+                f.error ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                  /* @__PURE__ */ jsxs4("span", { className: "fillo-file-actions", children: [
+                    f.file && !f.tooLarge && remaining > 0 && /* @__PURE__ */ jsx4(
+                      "button",
+                      {
+                        type: "button",
+                        className: "fillo-file-retry",
+                        "aria-label": `${strings.uploadRetry} ${f.name}`,
+                        onClick: () => {
+                          const retryFile = f.file;
+                          if (!retryFile) return;
+                          setInFlight((prev) => prev.filter((x) => x.key !== f.key));
+                          void startUpload(retryFile);
+                        },
+                        children: strings.uploadRetry
+                      }
+                    ),
+                    /* @__PURE__ */ jsx4(
+                      "button",
+                      {
+                        type: "button",
+                        className: "fillo-file-remove",
+                        "aria-label": "Dismiss",
+                        onClick: () => setInFlight((prev) => prev.filter((x) => x.key !== f.key)),
+                        children: "\xD7"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx4("span", { className: "fillo-file-error", role: "alert", children: f.error })
+                ] }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                  /* @__PURE__ */ jsxs4("span", { className: "fillo-file-meta", children: [
+                    Math.round(f.fraction * 100),
+                    "% of ",
+                    formatBytes(f.size)
+                  ] }),
+                  /* @__PURE__ */ jsx4(
+                    "button",
+                    {
+                      type: "button",
+                      className: "fillo-file-remove",
+                      "aria-label": `Cancel ${f.name}`,
+                      onClick: () => cancelUpload(f.key),
+                      children: "\xD7"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4("span", { className: "fillo-progress", "aria-hidden": "true", children: /* @__PURE__ */ jsx4(
+                    "span",
+                    {
+                      className: "fillo-progress-bar",
+                      style: { width: `${f.fraction * 100}%` }
+                    }
+                  ) })
+                ] })
+              ]
+            },
+            f.key
+          ))
+        ] }),
+        error && /* @__PURE__ */ jsx4("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, children: error })
+      ]
+    }
+  );
 }
 
 // src/fields.tsx
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-function fieldAria(field, error, ids) {
+function fieldAria(field, error, ids, opts = {}) {
   const describedBy = [
     field.description ? ids.descriptionId : null,
     error ? ids.errorId : null
   ].filter(Boolean);
+  const requiredSupported = opts.required ?? true;
   return {
     "aria-invalid": error ? true : void 0,
-    "aria-required": field.required ? true : void 0,
+    "aria-required": requiredSupported && field.required ? true : void 0,
     "aria-describedby": describedBy.length ? describedBy.join(" ") : void 0
   };
 }
@@ -1360,7 +1391,8 @@ function NumberInput({ field, value, error, setValue, api, ids: providedIds }) {
     inputRef.current?.setSelectionRange(pos, pos);
   });
   const num = field;
-  const grouped = num.notation === "grouped";
+  const grouped = num.notation !== void 0;
+  const locale = localeForNotation(num.notation);
   const hasAffix = Boolean(num.prefix) || Boolean(num.suffix);
   if (!grouped && !hasAffix) {
     return /* @__PURE__ */ jsx5(
@@ -1377,7 +1409,7 @@ function NumberInput({ field, value, error, setValue, api, ids: providedIds }) {
   }
   const stored = typeof value === "string" || typeof value === "number" ? String(value) : "";
   const n = Number(stored);
-  const display = draft !== null ? draft : grouped && stored !== "" && Number.isFinite(n) ? formatGroupedNumber(n, { decimals: num.decimals }) : stored;
+  const display = draft !== null ? draft : grouped && stored !== "" && Number.isFinite(n) ? formatGroupedNumber(n, { locale, decimals: num.decimals }) : stored;
   const input = /* @__PURE__ */ jsx5(
     "input",
     {
@@ -1390,14 +1422,14 @@ function NumberInput({ field, value, error, setValue, api, ids: providedIds }) {
       placeholder: field.placeholder,
       onBlur: grouped ? () => setDraft(null) : void 0,
       onChange: (e) => {
-        if (!isValidPartialNumberText(e.target.value)) {
+        if (!isValidPartialNumberText(e.target.value, locale)) {
           pendingCaret.current = e.target.selectionStart ?? e.target.value.length;
           setRevertTick((t) => t + 1);
           return;
         }
         if (grouped) {
           setDraft(e.target.value);
-          setValue(parseGroupedNumber(e.target.value));
+          setValue(parseGroupedNumber(e.target.value, locale));
         } else {
           setValue(e.target.value);
         }
@@ -1590,7 +1622,7 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
       "data-fillo": "options",
       role: "group",
       "aria-labelledby": ids.labelId,
-      ...fieldAria(field, error, ids),
+      ...fieldAria(field, error, ids, { required: false }),
       children: [
         options.map((opt) => /* @__PURE__ */ jsxs5(
           "label",
@@ -1967,7 +1999,7 @@ function Ranking({ field, value, error, setValue, ids: providedIds }) {
       id: ids.inputId,
       role: "group",
       "aria-labelledby": ids.labelId,
-      ...fieldAria(field, error, ids),
+      ...fieldAria(field, error, ids, { required: false }),
       children: /* @__PURE__ */ jsx5("ol", { className: "fillo-ranking", children: order.map((id, index) => {
         const option = ranking.options.find((o) => o.id === id);
         if (!option) return null;
@@ -2014,10 +2046,10 @@ function Matrix({ field, value, error, setValue, ids: providedIds }) {
       className: "fillo-matrix-wrap",
       role: "group",
       "aria-labelledby": ids.labelId,
-      ...fieldAria(field, error, ids),
+      ...fieldAria(field, error, ids, { required: false }),
       children: /* @__PURE__ */ jsxs5("table", { className: "fillo-matrix", children: [
         /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs5("tr", { children: [
-          /* @__PURE__ */ jsx5("th", {}),
+          /* @__PURE__ */ jsx5("td", {}),
           matrix.columns.map((col) => /* @__PURE__ */ jsx5("th", { scope: "col", children: col.label }, col.id))
         ] }) }),
         /* @__PURE__ */ jsx5("tbody", { children: matrix.rows.map((row) => {
@@ -2410,12 +2442,15 @@ function assertHpHidden(el) {
 }
 function FilloForm(props) {
   const { form, formId } = props;
+  const renderOnly = props.renderOnly === true || props.skipValidation === true;
   const client = useMemo5(
-    () => props.client ?? (formId ? createClient() : void 0),
-    [props.client, formId]
+    () => renderOnly ? void 0 : props.client ?? (formId ? createClient() : void 0),
+    [renderOnly, props.client, formId]
   );
   const [loaded, setLoaded] = useState6(null);
-  const [loadFailure, setLoadFailure] = useState6(null);
+  const [loadFailure, setLoadFailure] = useState6(
+    null
+  );
   const devEnv = useIsDevEnv();
   const devChrome = props.preview === true || devEnv;
   if (props.preview === true) warnPreviewInProduction();
@@ -2449,6 +2484,18 @@ function FilloForm(props) {
   useEffect8(() => {
     onErrorRef.current = onError;
   });
+  const targetError = useMemo5(
+    () => form && !formId && !renderOnly && (!isCodeForm2(form) || !props.client) ? new FilloError2(
+      "This form has no Fillo target. Pass formId with the schema, use a defineForm() value with client, or set renderOnly for a non-submitting preview.",
+      422,
+      void 0,
+      "form_target_required"
+    ) : null,
+    [form, formId, props.client, renderOnly]
+  );
+  useEffect8(() => {
+    if (targetError) onErrorRef.current?.(targetError);
+  }, [targetError]);
   const needsFetch = !inlineSchema && Boolean(client && formId);
   useEffect8(() => {
     if (!needsFetch || !client || !formId) {
@@ -2487,10 +2534,28 @@ function FilloForm(props) {
   const currentLoaded = needsFetch && loaded?.formId === formId ? loaded : null;
   const loadError = needsFetch && loadFailure && loadFailure.formId === formId ? loadFailure.error : null;
   const rawSchema = inlineSchema ?? currentLoaded?.schema ?? null;
-  const normalized = useMemo5(() => rawSchema ? normalizeFormSchema(rawSchema) : null, [rawSchema]);
+  const normalized = useMemo5(
+    () => rawSchema ? normalizeFormSchema(rawSchema) : null,
+    [rawSchema]
+  );
   const schema = normalized?.ok ? normalized.schema : null;
   const resolvedCodeTheme = renderResolvedSnapshot ? resolvedTheme ?? void 0 : codeForm?.theme;
   const theme = props.appearance?.theme ?? props.theme ?? resolvedCodeTheme ?? currentLoaded?.theme ?? void 0;
+  if (targetError) {
+    if (props.renderError) return /* @__PURE__ */ jsx7(Fragment3, { children: props.renderError(targetError) });
+    return /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: `fillo-form fillo-form--error ${props.className ?? ""}`,
+        role: "alert",
+        "data-fillo": "root",
+        "data-state": "error",
+        "data-error-code": "form_target_required",
+        ...themeProps(theme),
+        children: devChrome ? `${targetError.message} (${targetError.code})` : strings.loadFailed
+      }
+    );
+  }
   if (normalized && !normalized.ok) {
     const error = new FilloError2(`This form could not be rendered: ${normalized.error}`, 422);
     if (props.renderError) return /* @__PURE__ */ jsx7(Fragment3, { children: props.renderError(error) });
@@ -2531,7 +2596,14 @@ function FilloForm(props) {
     );
   }
   if (currentLoaded?.closed) {
-    return /* @__PURE__ */ jsx7("div", { className: `fillo-form fillo-form--closed ${props.className ?? ""}`, ...themeProps(theme), children: /* @__PURE__ */ jsx7("p", { className: "fillo-closed", children: strings.closed }) });
+    return /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: `fillo-form fillo-form--closed ${props.className ?? ""}`,
+        ...themeProps(theme),
+        children: /* @__PURE__ */ jsx7("p", { className: "fillo-closed", children: strings.closed })
+      }
+    );
   }
   const canonicalSyncError = codeForm && syncError && !props.skipValidation ? syncError : null;
   if (canonicalSyncError && props.renderError) {
@@ -2573,7 +2645,14 @@ function FilloForm(props) {
         }
       );
     }
-    return /* @__PURE__ */ jsx7("div", { className: `fillo-form fillo-form--closed ${props.className ?? ""}`, ...themeProps(theme), children: /* @__PURE__ */ jsx7("p", { className: "fillo-closed", children: variant === "closed" ? strings.closed : strings.notLive }) });
+    return /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: `fillo-form fillo-form--closed ${props.className ?? ""}`,
+        ...themeProps(theme),
+        children: /* @__PURE__ */ jsx7("p", { className: "fillo-closed", children: variant === "closed" ? strings.closed : strings.notLive })
+      }
+    );
   }
   const awaitingCanonical = Boolean(codeForm && codeFormSyncing && !props.skipValidation);
   if (!devChrome && awaitingCanonical || !schema) {
@@ -2598,10 +2677,12 @@ function FilloForm(props) {
     ResolvedForm,
     {
       ...props,
-      client,
+      client: renderOnly ? void 0 : client,
       schema,
       theme,
-      formId: syncedFormId ?? formId,
+      formId: renderOnly ? void 0 : syncedFormId ?? formId,
+      renderOnly,
+      skipValidation: renderOnly ? true : props.skipValidation,
       poweredBy,
       brandLabel: branding?.label,
       brandHref: branding?.href,
@@ -2672,13 +2753,14 @@ function useIsDevEnv() {
 function ResolvedForm(props) {
   const { schema, theme } = props;
   const displayOnly = props.displayOnly === true;
+  const renderOnly = props.renderOnly === true;
   const instanceId = useId2().replace(/:/g, "");
   const devEnv = useIsDevEnv();
   const devChrome = !displayOnly && (props.preview === true || devEnv);
   const hpRef = useRef8(null);
   const codeForm = isCodeForm2(props.form) ? props.form : null;
   const client = props.client;
-  const challenge = props.challenge;
+  const challenge = renderOnly ? void 0 : props.challenge;
   const challengeRequired = Boolean(challenge);
   const challengeTokenRef = useRef8(void 0);
   const [resyncWarning, setResyncWarning] = useState6(null);
@@ -2790,7 +2872,7 @@ function ResolvedForm(props) {
       resetChallengeRef.current?.();
     }
   });
-  useDraftFlush(api, !displayOnly);
+  useDraftFlush(api, !displayOnly && !renderOnly);
   const strings = resolveStrings(props.strings);
   const announceRef = useRef8(null);
   const announce = useCallback((text) => {
@@ -2821,12 +2903,13 @@ function ResolvedForm(props) {
   const chromeValue = useMemo5(
     () => ({
       devChrome,
+      renderOnly,
       uploadsAvailable,
       uploadFileSizeLimitMb,
       warningCode,
       warningUrl
     }),
-    [devChrome, uploadsAvailable, uploadFileSizeLimitMb, warningCode, warningUrl]
+    [devChrome, renderOnly, uploadsAvailable, uploadFileSizeLimitMb, warningCode, warningUrl]
   );
   const settings = schema.settings;
   const submitted = api.status === "submitted";
@@ -2867,13 +2950,17 @@ function ResolvedForm(props) {
           { slot: "root", status: "submitted" }
         ),
         "data-fillo": "root",
+        "data-fillo-form-id": props.formId,
         "data-state": "submitted",
         ...themed,
         children: [
           props.renderSuccess ? props.renderSuccess() : /* @__PURE__ */ jsxs6(
             "div",
             {
-              className: slotClass3("fillo-success", appearance, { slot: "success", status: "submitted" }),
+              className: slotClass3("fillo-success", appearance, {
+                slot: "success",
+                status: "submitted"
+              }),
               "data-fillo": "success",
               children: [
                 /* @__PURE__ */ jsx7("div", { className: "fillo-success-mark", "aria-hidden": "true" }),
@@ -2934,7 +3021,7 @@ function ResolvedForm(props) {
         staged: props.stagedNotice,
         draft: props.draftNotice,
         warningUrl: props.syncWarningUrl,
-        noClient: !props.client && !props.skipValidation
+        noClient: !props.client && !props.skipValidation && !renderOnly
       }
     ),
     resuming && /* @__PURE__ */ jsxs6(
@@ -2951,7 +3038,9 @@ function ResolvedForm(props) {
     api.resumeLinkFailed && !api.resumedDraft && !api.editingPrevious && /* @__PURE__ */ jsx7(
       "div",
       {
-        className: slotClass3("fillo-resume fillo-resume--expired", appearance, { slot: "resume" }),
+        className: slotClass3("fillo-resume fillo-resume--expired", appearance, {
+          slot: "resume"
+        }),
         "data-fillo": "resume",
         role: "status",
         children: /* @__PURE__ */ jsx7("span", { className: "fillo-resume-text", children: strings.resumeLinkExpired })
@@ -2972,23 +3061,46 @@ function ResolvedForm(props) {
           {
             className: slotClass3("fillo-progress-fill", appearance, { slot: "progressFill" }),
             "data-fillo": "progressFill",
-            style: { "--fillo-progress-value": `${progressStep / progressTotal * 100}%` }
+            style: {
+              "--fillo-progress-value": `${progressStep / progressTotal * 100}%`
+            }
           }
         )
       }
     ),
-    api.pageIndex === 0 && props.showTitle !== false && /* @__PURE__ */ jsxs6("header", { className: slotClass3("fillo-header", appearance, { slot: "header" }), "data-fillo": "header", children: [
-      schema.title && /* @__PURE__ */ jsx7("h1", { className: slotClass3("fillo-title", appearance, { slot: "title" }), "data-fillo": "title", children: schema.title }),
-      schema.description && /* @__PURE__ */ jsx7(
-        "p",
-        {
-          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 }),
+    api.pageIndex === 0 && props.showTitle !== false && /* @__PURE__ */ jsxs6(
+      "header",
+      {
+        className: slotClass3("fillo-header", appearance, { slot: "header" }),
+        "data-fillo": "header",
+        children: [
+          schema.title && /* @__PURE__ */ jsx7(
+            "h1",
+            {
+              className: slotClass3("fillo-title", appearance, { slot: "title" }),
+              "data-fillo": "title",
+              children: schema.title
+            }
+          ),
+          schema.description && /* @__PURE__ */ jsx7(
+            "p",
+            {
+              className: slotClass3("fillo-form-description", appearance, { slot: "description" }),
+              "data-fillo": "description",
+              children: schema.description
+            }
+          )
+        ]
+      }
+    ),
+    multiPage && api.page.title && api.pageIndex > 0 && /* @__PURE__ */ jsx7(
+      "h2",
+      {
+        className: slotClass3("fillo-page-title", appearance, { slot: "pageTitle" }),
+        "data-fillo": "pageTitle",
+        children: api.page.title
+      }
+    ),
     invalidFields.length > 0 && /* @__PURE__ */ jsxs6("div", { className: "fillo-error-summary", role: "alert", tabIndex: -1, "data-fillo": "error-summary", children: [
       /* @__PURE__ */ jsx7("p", { className: "fillo-error-summary-title", children: strings.errorSummaryTitle }),
       /* @__PURE__ */ jsx7("ul", { children: invalidFields.map(({ field, error, inputId }) => /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsxs6(
@@ -3007,16 +3119,25 @@ function ResolvedForm(props) {
         }
       ) }, field.id)) })
     ] }),
-    /* @__PURE__ */ jsx7("div", { className: slotClass3("fillo-blocks", appearance, { slot: "blocks" }), "data-fillo": "blocks", ref: blocksRef, tabIndex: -1, children: api.blocks.map((block) => /* @__PURE__ */ jsx7(
-      BlockRenderer,
+    /* @__PURE__ */ jsx7(
+      "div",
       {
-        block,
-        api,
-        components: props.components,
-        customComponents: props.customComponents
-      },
-      block.id
-    )) }),
+        className: slotClass3("fillo-blocks", appearance, { slot: "blocks" }),
+        "data-fillo": "blocks",
+        ref: blocksRef,
+        tabIndex: -1,
+        children: api.blocks.map((block) => /* @__PURE__ */ jsx7(
+          BlockRenderer,
+          {
+            block,
+            api,
+            components: props.components,
+            customComponents: props.customComponents
+          },
+          block.id
+        ))
+      }
+    ),
     !displayOnly && /* @__PURE__ */ jsx7(
       "input",
       {
@@ -3056,43 +3177,66 @@ function ResolvedForm(props) {
         /* @__PURE__ */ jsx7("a", { href: submitFixUrl, target: "_blank", rel: "noopener noreferrer", children: submitFixUrl })
       ] })
     ] }),
-    showFooter && /* @__PURE__ */ jsxs6("footer", { className: slotClass3("fillo-footer", appearance, { slot: "footer" }), "data-fillo": "footer", children: [
-      multiPage && !api.isFirstPage && /* @__PURE__ */ jsx7(
-        "button",
-        {
-          type: "button",
-          className: slotClass3("fillo-button fillo-button--ghost", appearance, { slot: "button", variant: "ghost" }),
-          "data-fillo": "button",
-          onClick: api.back,
-          children: strings.back
-        }
-      ),
-      showPrimaryButton && /* @__PURE__ */ jsx7(
-        "button",
-        {
-          type: "submit",
-          className: slotClass3("fillo-button fillo-button--primary", appearance, { slot: "button", variant: "primary" }),
-          "data-fillo": "button",
-          disabled: api.status === "submitting" || api.uploading || // Wait for the human check before enabling submit (never
-          // "Next"). The server rejects a tokenless submit regardless —
-          // this is UX only.
-          showChallenge && !challengeToken,
-          children: api.uploading ? strings.uploading : api.status === "submitting" ? strings.submitting : api.isLastPage ? settings.submitLabel ?? strings.submit : strings.next
-        }
-      )
-    ] }),
+    showFooter && /* @__PURE__ */ jsxs6(
+      "footer",
+      {
+        className: slotClass3("fillo-footer", appearance, { slot: "footer" }),
+        "data-fillo": "footer",
+        children: [
+          multiPage && !api.isFirstPage && /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "button",
+              className: slotClass3("fillo-button fillo-button--ghost", appearance, {
+                slot: "button",
+                variant: "ghost"
+              }),
+              "data-fillo": "button",
+              onClick: api.back,
+              children: strings.back
+            }
+          ),
+          showPrimaryButton && /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "submit",
+              className: slotClass3("fillo-button fillo-button--primary", appearance, {
+                slot: "button",
+                variant: "primary"
+              }),
+              "data-fillo": "button",
+              disabled: api.status === "submitting" || api.uploading || // Wait for the human check before enabling submit (never
+              // "Next"). The server rejects a tokenless submit regardless —
+              // this is UX only.
+              showChallenge && !challengeToken,
+              children: api.uploading ? strings.uploading : api.status === "submitting" ? strings.submitting : api.isLastPage ? settings.submitLabel ?? strings.submit : strings.next
+            }
+          )
+        ]
+      }
+    ),
     props.poweredBy && /* @__PURE__ */ jsx7(PoweredBy, { label: props.brandLabel, href: props.brandHref })
   ] });
   return /* @__PURE__ */ jsx7(FilloContext.Provider, { value: api, children: /* @__PURE__ */ jsx7(FilloChromeContext.Provider, { value: chromeValue, children: /* @__PURE__ */ jsx7(FilloAnnounceContext.Provider, { value: announce, children: /* @__PURE__ */ jsx7(FilloStringsContext.Provider, { value: strings, children: /* @__PURE__ */ jsx7(FilloAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx7(FilloInstanceIdContext.Provider, { value: instanceId, children: displayOnly ? (
     // Display-only preview: a plain div (no form element to submit) with
     // every control inside a natively disabled fieldset — unfocusable
     // and unfillable even without the stylesheet or inert support.
-    /* @__PURE__ */ jsx7("div", { className: rootClass, "data-fillo": "preview-form", "data-state": "preview", ...themed, children: /* @__PURE__ */ jsx7("fieldset", { disabled: true, className: "fillo-not-open-fields", children: formBody }) })
+    /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: rootClass,
+        "data-fillo": "preview-form",
+        "data-state": "preview",
+        ...themed,
+        children: /* @__PURE__ */ jsx7("fieldset", { disabled: true, className: "fillo-not-open-fields", children: formBody })
+      }
+    )
   ) : /* @__PURE__ */ jsx7(
     "form",
     {
       className: rootClass,
       "data-fillo": "root",
+      "data-fillo-form-id": props.formId,
       "data-state": api.status,
       "data-page": api.pageIndex + 1,
       "data-last-page": api.isLastPage ? "" : void 0,
@@ -3138,7 +3282,7 @@ function JsxForm(props) {
   if (!memo2.current || memo2.current.json !== json) {
     memo2.current = { json, form: compiled };
   }
-  return /* @__PURE__ */ jsx8(FilloForm, { form: memo2.current.form, client, ...rest });
+  return /* @__PURE__ */ jsx8(FilloForm, { ...{ form: memo2.current.form, client, ...rest } });
 }
 function defineFormFromJsx(element) {
   if (!element || element.type !== JsxForm) {
@@ -3183,9 +3327,10 @@ var Fillo = {
 };
 
 // src/provider.tsx
-import { useId as useId3, useMemo as useMemo6, useState as useState7 } from "react";
+import { useEffect as useEffect9, useId as useId3, useMemo as useMemo6, useState as useState7 } from "react";
 import {
   FilloError as FilloError3,
+  createClient as createClient2,
   formSchemasEqual as formSchemasEqual2,
   isFilloError as isFilloError3,
   normalizeFormSchema as normalizeFormSchema2,
@@ -3203,13 +3348,33 @@ function FilloProvider({
   onError,
   renderError,
   preview,
+  renderOnly,
+  skipValidation,
   ...options
 }) {
+  const localPreview = renderOnly === true || skipValidation === true;
+  const activeClient = useMemo6(
+    () => localPreview ? void 0 : client ?? (formId ? createClient2() : void 0),
+    [client, formId, localPreview]
+  );
+  const activeFormId = localPreview ? void 0 : formId;
   const instanceId = useId3().replace(/:/g, "");
   const devEnv = useIsDevEnv();
   const devChrome = preview === true || devEnv;
   if (preview === true) warnPreviewInProduction();
   const codeForm = isCodeForm2(form) ? form : null;
+  const targetError = useMemo6(
+    () => !formId && !localPreview && (!codeForm || !client) ? new FilloError3(
+      "This form has no Fillo target. Pass formId with the schema, use a defineForm() value with client, or set renderOnly for a non-submitting preview.",
+      422,
+      void 0,
+      "form_target_required"
+    ) : null,
+    [client, codeForm, formId, localPreview]
+  );
+  useEffect9(() => {
+    if (targetError) onError?.(targetError);
+  }, [onError, targetError]);
   const {
     formId: syncedFormId,
     status: syncedStatus,
@@ -3222,8 +3387,8 @@ function FilloProvider({
     uploadFileSizeLimitMb,
     warningCode,
     warningUrl
-  } = useCodeFormSync(form, client, onError, {
-    allowUnsynced: Boolean(!client || formId || options.skipValidation)
+  } = useCodeFormSync(form, activeClient, onError, {
+    allowUnsynced: Boolean(!activeClient || activeFormId || localPreview)
   });
   const [resyncWarning, setResyncWarning] = useState7(null);
   const rawSchema = codeForm ? resolvedSchema && !devChrome ? resolvedSchema : codeForm.schema : form;
@@ -3233,9 +3398,9 @@ function FilloProvider({
   }
   const schema = normalized.schema;
   const resolveFormId = useMemo6(
-    () => codeForm && client?.key ? async () => {
+    () => codeForm && activeClient?.key ? async () => {
       try {
-        const result = await syncCodeForm3(client, codeForm, { bypassCache: true });
+        const result = await syncCodeForm3(activeClient, codeForm, { bypassCache: true });
         setResyncWarning({
           code: result.warningCode,
           url: result.warningUrl,
@@ -3297,13 +3462,14 @@ function FilloProvider({
         throw failure;
       }
     } : void 0,
-    [client, codeForm, onError, schema]
+    [activeClient, codeForm, onError, schema]
   );
   const api = useFilloController({
     ...options,
-    client,
+    client: activeClient,
     form: schema,
-    formId: syncedFormId ?? formId,
+    formId: syncedFormId ?? activeFormId ?? void 0,
+    skipValidation: localPreview,
     resolveFormId,
     // Dev chrome (preview or dev env) surfaces the developer-grade resolution
     // failure (message + code); an explicit option wins.
@@ -3312,7 +3478,7 @@ function FilloProvider({
     // method; recorded per response so usage stays measurable.
     surface: "headless"
   });
-  useDraftFlush(api);
+  useDraftFlush(api, !localPreview);
   const freshWarningCode = resyncWarning ? resyncWarning.code : warningCode;
   const freshWarningUrl = resyncWarning ? resyncWarning.url : warningUrl;
   const freshUploadsAvailable = resyncWarning ? resyncWarning.uploadsAvailable : uploadsAvailable;
@@ -3320,20 +3486,32 @@ function FilloProvider({
   const chromeValue = useMemo6(
     () => ({
       devChrome,
+      renderOnly: localPreview,
       uploadsAvailable: freshUploadsAvailable,
       uploadFileSizeLimitMb: freshUploadFileSizeLimitMb,
       warningCode: freshWarningCode,
       warningUrl: freshWarningUrl
     }),
-    [devChrome, freshUploadsAvailable, freshUploadFileSizeLimitMb, freshWarningCode, freshWarningUrl]
+    [
+      devChrome,
+      localPreview,
+      freshUploadsAvailable,
+      freshUploadFileSizeLimitMb,
+      freshWarningCode,
+      freshWarningUrl
+    ]
   );
   const resolvedStrings = resolveStrings2(strings);
-  const canonicalSyncError = syncError && !options.skipValidation ? syncError : null;
+  if (targetError) {
+    if (renderError) return /* @__PURE__ */ jsx9(Fragment4, { children: renderError(targetError) });
+    throw targetError;
+  }
+  const canonicalSyncError = syncError && !localPreview ? syncError : null;
   if (canonicalSyncError && renderError) return /* @__PURE__ */ jsx9(Fragment4, { children: renderError(canonicalSyncError) });
   if (canonicalSyncError && !devChrome) return null;
-  if (codeFormSyncing && !options.skipValidation && !devChrome) return null;
-  const notPublished = Boolean(codeForm) && syncedStatus === "draft" && !options.skipValidation;
-  const notAccepting = Boolean(codeForm) && syncedStatus === "published" && syncedAccepting === false && !options.skipValidation;
+  if (codeFormSyncing && !localPreview && !devChrome) return null;
+  const notPublished = Boolean(codeForm) && syncedStatus === "draft" && !localPreview;
+  const notAccepting = Boolean(codeForm) && syncedStatus === "published" && syncedAccepting === false && !localPreview;
   if ((notPublished || notAccepting) && !devChrome) {
     const error = notPublished ? new FilloError3("This form isn't published yet.", 403, void 0, "form_not_published") : new FilloError3(
       "This form is no longer accepting responses.",
@@ -3348,7 +3526,7 @@ function FilloProvider({
 
 // src/index.ts
 import {
-  createClient as createClient2,
+  createClient as createClient3,
   provisionWorkspace,
   when,
   FilloJsxError as FilloJsxError2,
@@ -3375,7 +3553,7 @@ export {
   FilloJsxError2 as FilloJsxError,
   FilloProvider,
   FormField,
-  createClient2 as createClient,
+  createClient3 as createClient,
   defineForm,
   provisionWorkspace,
   useField,