@usefillo/react 0.5.3 → 0.6.0

package/dist/index.js

@@ -1,23 +1,66 @@
 "use client";
 
 // src/FilloForm.tsx
-import { useEffect as useEffect7, useId as useId2, useMemo as useMemo4, useRef as useRef5, useState as useState6 } from "react";
+import { useEffect as useEffect7, useId as useId2, useMemo as useMemo5, useRef as useRef5, useState as useState6 } from "react";
 import {
   FilloError as FilloError2,
   createClient,
-  isField as isField2,
+  needsExplicitSubmit,
   normalizeFormSchema,
   normalizeFormTheme,
   visibleFields as visibleFields2
 } from "@usefillo/core";
+import { resolveStrings, slotClass as slotClass3 } from "@usefillo/core";
+
+// src/appearance.tsx
+import { createContext, useContext } from "react";
+import {
+  DEFAULT_STRINGS,
+  slotClass
+} from "@usefillo/core";
+var FilloAppearanceContext = createContext(void 0);
+function useSlotClass(base, state) {
+  const appearance = useContext(FilloAppearanceContext);
+  return slotClass(base, appearance, state);
+}
+function useFilloAppearance() {
+  return useContext(FilloAppearanceContext);
+}
+function useFieldSlots(field, error) {
+  const appearance = useContext(FilloAppearanceContext);
+  const state = {
+    kind: field.kind,
+    fieldId: field.id,
+    invalid: Boolean(error),
+    required: Boolean(field.required)
+  };
+  return {
+    wrapperProps: (base) => ({
+      className: slotClass(base, appearance, { slot: "field", ...state }),
+      "data-fillo": "field",
+      "data-field": field.id,
+      "data-kind": field.kind,
+      "data-invalid": error ? "" : void 0,
+      "data-required": field.required ? "" : void 0
+    }),
+    label: slotClass("fillo-label", appearance, { slot: "label", ...state }),
+    description: slotClass("fillo-description", appearance, { slot: "fieldDescription", ...state }),
+    error: slotClass("fillo-error", appearance, { slot: "error", ...state }),
+    control: (base) => slotClass(base, appearance, { slot: "control", ...state })
+  };
+}
+var FilloStringsContext = createContext(DEFAULT_STRINGS);
+function useStrings() {
+  return useContext(FilloStringsContext);
+}
 
 // src/context.ts
 import { allFields } from "@usefillo/core";
-import { createContext, useContext, useId, useMemo } from "react";
-var FilloContext = createContext(null);
-var FilloInstanceIdContext = createContext(null);
+import { createContext as createContext2, useContext as useContext2, useId, useMemo } from "react";
+var FilloContext = createContext2(null);
+var FilloInstanceIdContext = createContext2(null);
 function useFilloInstanceId() {
-  const instanceId = useContext(FilloInstanceIdContext);
+  const instanceId = useContext2(FilloInstanceIdContext);
   const fallbackId = useId().replace(/:/g, "");
   return instanceId ?? fallbackId;
 }
@@ -32,7 +75,7 @@ function createFilloFieldIds(instanceId, fieldId) {
   };
 }
 function useFillo() {
-  const api = useContext(FilloContext);
+  const api = useContext2(FilloContext);
   if (!api) throw new Error("useFillo must be used inside <FilloForm> or <FilloProvider>");
   return api;
 }
@@ -75,7 +118,9 @@ function useFilloController(options) {
       onSubmitted: (id, d) => optsRef.current.onSubmitted?.(id, d),
       getHoneypot: () => optsRef.current.getHoneypot?.() ?? "",
       skipValidation: options.skipValidation,
-      surface: options.surface ?? "default"
+      surface: options.surface ?? "headless",
+      // Wrapped so the engine (created once) always calls the latest resolver.
+      resolveFormId: options.resolveFormId ? () => optsRef.current.resolveFormId() : void 0
     });
   }
   const store = storeRef.current;
@@ -109,16 +154,33 @@ import {
 } from "@usefillo/core";
 import { useEffect as useEffect2, useState } from "react";
 import { defineForm, isCodeForm as isCodeForm2, syncCodeForm as syncCodeForm2 } from "@usefillo/core";
+var noticedSync = /* @__PURE__ */ new Set();
+function noticeSync(handle, kind, message) {
+  const key = `${handle}:${kind}`;
+  if (noticedSync.has(key)) return;
+  noticedSync.add(key);
+  console.info(message);
+}
 function useCodeFormSync(form, client, onError) {
   const codeForm = isCodeForm(form) ? form : null;
-  const [syncedFormId, setSyncedFormId] = useState(null);
+  const [synced, setSynced] = useState({ formId: null, status: null });
   const hasKey = Boolean(client?.key);
   const handle = codeForm?.id;
   const contentKey = codeForm ? contentHash(JSON.stringify(codeForm.schema) + JSON.stringify(codeForm.theme ?? null)) : null;
   useEffect2(() => {
     if (!codeForm || !client?.key) return;
     let cancelled = false;
-    syncCodeForm(client, codeForm).then((r) => !cancelled && setSyncedFormId(r.formId)).catch((err) => {
+    syncCodeForm(client, codeForm).then((r) => {
+      if (cancelled) return;
+      setSynced({ formId: r.formId, status: r.status ?? null });
+      const dashboardUrl = `${client.baseUrl || "https://fillo.so"}/forms/${r.formId}`;
+      if (r.warning) console.warn(`[fillo] ${r.warning}`);
+      if (r.staged) {
+        noticeSync(codeForm.id, "staged", `[fillo] "${codeForm.id}": changes staged as a draft \u2014 publish them at ${dashboardUrl}`);
+      } else if (r.status === "draft") {
+        noticeSync(codeForm.id, "draft", `[fillo] "${codeForm.id}" is a draft \u2014 it renders here but won't accept responses until published: ${dashboardUrl}`);
+      }
+    }).catch((err) => {
       const error = err instanceof FilloError ? err : new FilloError(String(err), 0);
       console.warn("[fillo] form sync failed:", error.message);
       if (!cancelled) onError?.(error);
@@ -127,17 +189,18 @@ function useCodeFormSync(form, client, onError) {
       cancelled = true;
     };
   }, [hasKey, handle, contentKey, client, onError]);
-  return syncedFormId;
+  return synced;
 }
 
 // src/fields.tsx
-import { isField, pipeBlock, validateResponse, visibleFields } from "@usefillo/core";
-import { memo, useEffect as useEffect6, useState as useState5 } from "react";
+import { isField, pipeBlock, shouldAutoSubmit, slotClass as slotClass2, visibleFields } from "@usefillo/core";
+import { memo, useEffect as useEffect6, useMemo as useMemo4, useState as useState5 } from "react";
 
 // src/phone.tsx
 import {
   PHONE_COUNTRIES,
   countryByIso,
+  countryByTimeZone,
   digitsOnly,
   flagEmoji,
   formatNational,
@@ -152,17 +215,60 @@ function localeCountry() {
   const region = tag.split("-")[1];
   return region && /^[A-Za-z]{2}$/.test(region) ? region.toUpperCase() : void 0;
 }
+function browserTimeZone() {
+  if (typeof Intl === "undefined") return void 0;
+  try {
+    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    return typeof timeZone === "string" && timeZone ? timeZone : void 0;
+  } catch {
+    return void 0;
+  }
+}
 function nationalFor(stored, country) {
   const digits = digitsOnly(stored);
   return digits.startsWith(country.dialCode) ? digits.slice(country.dialCode.length) : digits;
 }
+var PHONE_POPOVER_VIEWPORT_GAP = 8;
+function positionPhonePopover(anchor, popover) {
+  if (!anchor || !popover || typeof window === "undefined") return "below";
+  const gap = PHONE_POPOVER_VIEWPORT_GAP;
+  const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+  const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+  const anchorRect = anchor.getBoundingClientRect();
+  const spaceBelow = Math.max(0, viewportHeight - anchorRect.bottom - gap);
+  const spaceAbove = Math.max(0, anchorRect.top - gap);
+  const placement = spaceBelow < popover.scrollHeight && spaceAbove > spaceBelow ? "above" : "below";
+  const availableHeight = placement === "above" ? spaceAbove : spaceBelow;
+  const maxHeight = Math.max(0, Math.min(availableHeight, viewportHeight - gap * 2));
+  const maxWidth = Math.max(0, viewportWidth - gap * 2);
+  popover.style.setProperty("--fillo-phone-popover-max-height", `${Math.floor(maxHeight)}px`);
+  popover.style.setProperty("--fillo-phone-popover-max-width", `${Math.floor(maxWidth)}px`);
+  popover.style.setProperty("--fillo-phone-popover-offset-x", "0px");
+  const width = Math.min(popover.offsetWidth, maxWidth);
+  let offsetX = 0;
+  const rightOverflow = anchorRect.left + width - (viewportWidth - gap);
+  if (rightOverflow > 0) offsetX -= rightOverflow;
+  const leftOverflow = gap - (anchorRect.left + offsetX);
+  if (leftOverflow > 0) offsetX += leftOverflow;
+  popover.style.setProperty("--fillo-phone-popover-offset-x", `${Math.round(offsetX)}px`);
+  return placement;
+}
 function PhoneField({ field, value, error, setValue, ids: providedIds }) {
   const ids = useFilloFieldIds(field.id, providedIds);
+  const slots = useFieldSlots(field, error);
+  const strings = useStrings();
   const schema = field;
   const stored = typeof value === "string" ? value : "";
   const [country, setCountry] = useState2(
-    () => parsePhone(stored).country ?? countryByIso(schema.defaultCountry) ?? countryByIso(localeCountry()) ?? PHONE_COUNTRIES[0]
+    () => parsePhone(stored).country ?? countryByIso(schema.defaultCountry) ?? PHONE_COUNTRIES[0]
   );
+  const touched = useRef2(false);
+  useEffect3(() => {
+    if (touched.current) return;
+    if (parsePhone(stored).country || countryByIso(schema.defaultCountry)) return;
+    const guess = countryByTimeZone(browserTimeZone()) ?? countryByIso(localeCountry());
+    if (guess) setCountry(guess);
+  }, []);
   const national = nationalFor(stored, country);
   const display = formatNational(country, national);
   const inputRef = useRef2(null);
@@ -185,6 +291,7 @@ function PhoneField({ field, value, error, setValue, ids: providedIds }) {
   });
   const commit = (c, nat) => setValue(nat ? toE164(c, nat) : "");
   function onInput(e) {
+    touched.current = true;
     const el = e.target;
     const raw = el.value;
     const caret = el.selectionStart ?? raw.length;
@@ -198,17 +305,18 @@ function PhoneField({ field, value, error, setValue, ids: providedIds }) {
     commit(country, digitsOnly(raw));
   }
   function pickCountry(c) {
+    touched.current = true;
     setCountry(c);
     commit(c, national);
     inputRef.current?.focus();
   }
   const describedBy = [field.description ? ids.descriptionId : null, error ? ids.errorId : null].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ jsxs("div", { className: `fillo-field fillo-field--phone${error ? " fillo-field--error" : ""}`, "data-field": field.id, children: [
-    /* @__PURE__ */ jsxs("label", { className: "fillo-label", id: ids.labelId, htmlFor: ids.inputId, children: [
+  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: [
       field.label,
-      !field.required && /* @__PURE__ */ jsx("span", { className: "fillo-optional", children: " (optional)" })
+      !field.required && /* @__PURE__ */ jsx("span", { className: "fillo-optional", children: strings.optional })
     ] }),
-    field.description && /* @__PURE__ */ jsx("p", { className: "fillo-description", id: ids.descriptionId, children: field.description }),
+    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(
@@ -216,7 +324,8 @@ function PhoneField({ field, value, error, setValue, ids: providedIds }) {
         {
           ref: inputRef,
           id: ids.inputId,
-          className: "fillo-input fillo-phone-input",
+          className: slots.control("fillo-input fillo-phone-input"),
+          "data-fillo": "control",
           type: "tel",
           inputMode: "tel",
           autoComplete: "tel-national",
@@ -229,7 +338,7 @@ function PhoneField({ field, value, error, setValue, ids: providedIds }) {
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx("p", { className: "fillo-error", id: ids.errorId, role: "alert", children: error })
+    error && /* @__PURE__ */ jsx("p", { className: slots.error, "data-fillo": "error", id: ids.errorId, role: "alert", children: error })
   ] });
 }
 function CountrySelect({
@@ -240,7 +349,10 @@ function CountrySelect({
   const [open, setOpen] = useState2(false);
   const [query, setQuery] = useState2("");
   const [active, setActive] = useState2(0);
+  const [placement, setPlacement] = useState2("below");
   const rootRef = useRef2(null);
+  const triggerRef = useRef2(null);
+  const popoverRef = useRef2(null);
   const searchRef = useRef2(null);
   const listId = `${labelledBy}-countries`;
   const matches = useMemo3(() => {
@@ -266,6 +378,17 @@ function CountrySelect({
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
+  useLayoutEffect(() => {
+    if (!open) return;
+    const update = () => setPlacement(positionPhonePopover(rootRef.current, popoverRef.current));
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [open, matches.length]);
   useEffect3(() => {
     if (!open) return;
     document.getElementById(`${listId}-opt-${active}`)?.scrollIntoView({ block: "nearest" });
@@ -288,12 +411,14 @@ function CountrySelect({
     } else if (e.key === "Escape") {
       e.preventDefault();
       setOpen(false);
+      triggerRef.current?.focus();
     }
   }
   return /* @__PURE__ */ jsxs("div", { className: "fillo-phone-country", ref: rootRef, children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
+        ref: triggerRef,
         type: "button",
         className: "fillo-phone-flag",
         "aria-haspopup": "listbox",
@@ -310,7 +435,7 @@ function CountrySelect({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs("div", { className: "fillo-phone-popover", children: [
+    open && /* @__PURE__ */ jsxs("div", { ref: popoverRef, className: `fillo-phone-popover fillo-phone-popover--${placement}`, children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -366,6 +491,8 @@ import { useEffect as useEffect4, useRef as useRef3, useState as useState3 } fro
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function SignatureField({ field, value, error, setValue, ids: providedIds }) {
   const ids = useFilloFieldIds(field.id, providedIds);
+  const slots = useFieldSlots(field, error);
+  const strings = useStrings();
   const typedInputId = `${ids.inputId}-typed`;
   const canvasRef = useRef3(null);
   const drawing = useRef3(false);
@@ -447,12 +574,12 @@ 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", { className: `fillo-field fillo-field--signature${error ? " fillo-field--error" : ""}`, children: [
-    /* @__PURE__ */ jsxs2("span", { className: "fillo-label", id: ids.labelId, children: [
+  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: [
       field.label,
-      !field.required && /* @__PURE__ */ jsx2("span", { className: "fillo-optional", children: " (optional)" })
+      !field.required && /* @__PURE__ */ jsx2("span", { className: "fillo-optional", children: strings.optional })
     ] }),
-    field.description && /* @__PURE__ */ jsx2("p", { className: "fillo-description", id: ids.descriptionId, children: field.description }),
+    field.description && /* @__PURE__ */ jsx2("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
     /* @__PURE__ */ jsxs2(
       "div",
       {
@@ -460,7 +587,7 @@ function SignatureField({ field, value, error, setValue, ids: providedIds }) {
         "aria-labelledby": ids.labelId,
         "aria-describedby": describedBy,
         children: [
-          /* @__PURE__ */ jsxs2("div", { className: "fillo-signature", children: [
+          /* @__PURE__ */ jsxs2("div", { className: slots.control("fillo-signature"), "data-fillo": "control", children: [
             /* @__PURE__ */ jsx2(
               "canvas",
               {
@@ -500,7 +627,7 @@ function SignatureField({ field, value, error, setValue, ids: providedIds }) {
         ]
       }
     ),
-    error && /* @__PURE__ */ jsx2("p", { className: "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 })
   ] });
 }
 
@@ -530,6 +657,8 @@ function formatBytes(bytes) {
 }
 function FileUploadField({ field, value, error, setValue, api, ids: providedIds }) {
   const ids = useFilloFieldIds(field.id, providedIds);
+  const slots = useFieldSlots(field, error);
+  const strings = useStrings();
   const schema = field;
   const inputRef = useRef4(null);
   const [inFlight, setInFlight] = useState4([]);
@@ -602,16 +731,18 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
     setValue(files.filter((f) => f.fileId !== fileId));
   }
   const describedBy = [field.description ? ids.descriptionId : null, error ? ids.errorId : null].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ jsxs3("div", { className: `fillo-field fillo-field--file_upload${error ? " fillo-field--error" : ""}`, children: [
-    /* @__PURE__ */ jsxs3("label", { className: "fillo-label", htmlFor: ids.inputId, children: [
+  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: [
       field.label,
-      !field.required && /* @__PURE__ */ jsx3("span", { className: "fillo-optional", children: " (optional)" })
+      !field.required && /* @__PURE__ */ jsx3("span", { className: "fillo-optional", children: strings.optional })
     ] }),
-    field.description && /* @__PURE__ */ jsx3("p", { className: "fillo-description", id: ids.descriptionId, children: field.description }),
+    field.description && /* @__PURE__ */ jsx3("p", { className: slots.description, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
     remaining > 0 && /* @__PURE__ */ jsxs3(
       "div",
       {
-        className: `fillo-dropzone${dragOver ? " fillo-dropzone--over" : ""}${canUpload ? "" : " fillo-dropzone--disabled"}`,
+        "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);
@@ -625,6 +756,10 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
         onClick: () => canUpload && inputRef.current?.click(),
         role: "button",
         tabIndex: 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 === " ") && canUpload) inputRef.current?.click();
         },
@@ -636,9 +771,6 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
               id: ids.inputId,
               type: "file",
               hidden: true,
-              "aria-invalid": error ? true : void 0,
-              "aria-required": field.required ? true : void 0,
-              "aria-describedby": describedBy,
               multiple: maxFiles > 1,
               accept: schema.accept?.join(","),
               onChange: (e) => handleFiles(e.target.files)
@@ -659,7 +791,16 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
         ]
       }
     ),
-    /* @__PURE__ */ jsx3("div", { role: "status", "aria-live": "polite", className: "fillo-sr-only", children: uploadStatus(inFlight, files.length) }),
+    /* @__PURE__ */ jsx3(
+      "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)
+      }
+    ),
     (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 }),
@@ -723,7 +864,7 @@ function FileUploadField({ field, value, error, setValue, api, ids: providedIds
         f.key
       ))
     ] }),
-    error && /* @__PURE__ */ jsx3("p", { className: "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 })
   ] });
 }
 
@@ -740,25 +881,58 @@ function fieldAria(field, error, ids) {
     "aria-describedby": describedBy.length ? describedBy.join(" ") : void 0
   };
 }
+function useControl(base, field, error) {
+  return {
+    className: useSlotClass(base, {
+      slot: "control",
+      kind: field.kind,
+      fieldId: field.id,
+      invalid: Boolean(error),
+      required: Boolean(field.required)
+    }),
+    "data-fillo": "control"
+  };
+}
+function isNativeControlTarget(target) {
+  return target instanceof HTMLElement && Boolean(target.closest("input, textarea, select, button"));
+}
 function FieldShell({
   field,
   error,
   ids,
   children
 }) {
+  const state = {
+    kind: field.kind,
+    fieldId: field.id,
+    invalid: Boolean(error),
+    required: Boolean(field.required)
+  };
+  const fieldCls = useSlotClass(
+    `fillo-field fillo-field--${field.kind}${error ? " fillo-field--error" : ""}`,
+    { slot: "field", ...state }
+  );
+  const labelCls = useSlotClass("fillo-label", { slot: "label", ...state });
+  const descriptionCls = useSlotClass("fillo-description", { slot: "fieldDescription", ...state });
+  const errorCls = useSlotClass("fillo-error", { slot: "error", ...state });
+  const strings = useStrings();
   return /* @__PURE__ */ jsxs4(
     "div",
     {
-      className: `fillo-field fillo-field--${field.kind}${error ? " fillo-field--error" : ""}`,
+      className: fieldCls,
+      "data-fillo": "field",
       "data-field": field.id,
+      "data-kind": field.kind,
+      "data-invalid": error ? "" : void 0,
+      "data-required": field.required ? "" : void 0,
       children: [
-        /* @__PURE__ */ jsxs4("label", { className: "fillo-label", id: ids.labelId, htmlFor: ids.inputId, children: [
+        /* @__PURE__ */ jsxs4("label", { className: labelCls, "data-fillo": "label", id: ids.labelId, htmlFor: ids.inputId, children: [
           field.label,
-          !field.required && /* @__PURE__ */ jsx4("span", { className: "fillo-optional", children: " (optional)" })
+          !field.required && /* @__PURE__ */ jsx4("span", { className: "fillo-optional", children: strings.optional })
         ] }),
-        field.description && /* @__PURE__ */ jsx4("p", { className: "fillo-description", id: ids.descriptionId, children: field.description }),
+        field.description && /* @__PURE__ */ jsx4("p", { className: descriptionCls, "data-fillo": "fieldDescription", id: ids.descriptionId, children: field.description }),
         children,
-        error && /* @__PURE__ */ jsx4("p", { className: "fillo-error", id: ids.errorId, role: "alert", children: error })
+        error && /* @__PURE__ */ jsx4("p", { className: errorCls, "data-fillo": "error", id: ids.errorId, role: "alert", children: error })
       ]
     }
   );
@@ -766,11 +940,12 @@ function FieldShell({
 function TextInput({ field, value, error, setValue, ids: providedIds }) {
   const ids = useFilloFieldIds(field.id, providedIds);
   const type = field.kind === "email" ? "email" : field.kind === "url" ? "url" : field.kind === "number" ? "number" : field.kind === "date" ? "date" : "text";
+  const control = useControl("fillo-input", field, error);
   return /* @__PURE__ */ jsx4(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsx4(
     "input",
     {
       id: ids.inputId,
-      className: "fillo-input",
+      ...control,
       type,
       value: typeof value === "string" || typeof value === "number" ? String(value) : "",
       placeholder: field.placeholder,
@@ -781,11 +956,12 @@ 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(
     "textarea",
     {
       id: ids.inputId,
-      className: "fillo-input fillo-textarea",
+      ...control,
       rows: 4,
       value: typeof value === "string" ? value : "",
       placeholder: field.placeholder,
@@ -834,6 +1010,9 @@ function ChoiceIcon({ icon }) {
 }
 function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
   const ids = useFilloFieldIds(field.id, providedIds);
+  const appearance = useFilloAppearance();
+  const strings = useStrings();
+  const optionCls = (base, optionId, selected) => slotClass2(base, appearance, { slot: "option", kind: field.kind, fieldId: field.id, optionId, selected });
   const choice = field;
   const options = useDisplayOptions(choice);
   const isOtherValue = typeof value === "string" && value !== "" && !choice.options.some((o) => o.id === value);
@@ -842,7 +1021,8 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
   return /* @__PURE__ */ jsx4(FieldShell, { field, error, ids, children: /* @__PURE__ */ jsxs4(
     "div",
     {
-      className: "fillo-options",
+      className: slotClass2("fillo-options", appearance, { slot: "options", kind: field.kind, fieldId: field.id }),
+      "data-fillo": "options",
       role: "radiogroup",
       "aria-labelledby": ids.labelId,
       ...fieldAria(field, error, ids),
@@ -851,7 +1031,19 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
           "label",
           {
             "data-option": opt.id,
-            className: `fillo-option${opt.icon ? " fillo-option--has-icon" : ""}${value === opt.id ? " fillo-option--selected" : ""}`,
+            "data-fillo": "option",
+            "data-selected": value === opt.id ? "" : void 0,
+            className: optionCls(
+              `fillo-option${opt.icon ? " fillo-option--has-icon" : ""}${value === opt.id ? " fillo-option--selected" : ""}`,
+              opt.id,
+              value === opt.id
+            ),
+            onClick: (event) => {
+              if (isNativeControlTarget(event.target)) return;
+              event.preventDefault();
+              setOtherOn(false);
+              setValue(opt.id);
+            },
             children: [
               /* @__PURE__ */ jsx4(
                 "input",
@@ -867,7 +1059,7 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
                 }
               ),
               /* @__PURE__ */ jsx4(ChoiceIcon, { icon: opt.icon }),
-              /* @__PURE__ */ jsx4("span", { className: "fillo-option-label", children: opt.label })
+              /* @__PURE__ */ jsx4("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: opt.label })
             ]
           },
           opt.id
@@ -877,7 +1069,13 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
         /* @__PURE__ */ jsxs4(
           "div",
           {
-            className: `fillo-option fillo-option--other${otherActive ? " fillo-option--selected fillo-option--with-other" : ""}`,
+            "data-fillo": "option",
+            "data-selected": otherActive ? "" : void 0,
+            className: optionCls(
+              `fillo-option fillo-option--other${otherActive ? " fillo-option--selected fillo-option--with-other" : ""}`,
+              "__other",
+              otherActive
+            ),
             children: [
               /* @__PURE__ */ jsxs4("label", { className: "fillo-option-main", children: [
                 /* @__PURE__ */ jsx4(
@@ -893,15 +1091,15 @@ function SingleChoice({ field, value, error, setValue, ids: providedIds }) {
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx4("span", { className: "fillo-option-label", children: "Other" })
+                /* @__PURE__ */ jsx4("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: strings.other })
               ] }),
               otherActive && /* @__PURE__ */ jsx4(
                 "input",
                 {
                   type: "text",
                   className: "fillo-input fillo-other-input",
-                  "aria-label": "Other \u2014 please specify",
-                  placeholder: "Your answer",
+                  "aria-label": strings.otherPrompt,
+                  placeholder: strings.otherPlaceholder,
                   autoFocus: !isOtherValue,
                   value: isOtherValue ? String(value) : "",
                   onChange: (e) => setValue(e.target.value)
@@ -918,16 +1116,20 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
   const ids = useFilloFieldIds(field.id, providedIds);
   const choice = field;
   const options = useDisplayOptions(choice);
+  const strings = useStrings();
   const optionIds = new Set(choice.options.map((o) => o.id));
   const selected = Array.isArray(value) ? value : [];
   const otherText = selected.find((v) => !optionIds.has(v));
   const [otherOn, setOtherOn] = useState5(otherText !== void 0);
   const otherActive = otherText !== void 0 || otherOn;
   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(
     "div",
     {
-      className: "fillo-options",
+      className: slotClass2("fillo-options", appearance, { slot: "options", kind: field.kind, fieldId: field.id }),
+      "data-fillo": "options",
       role: "group",
       "aria-labelledby": ids.labelId,
       ...fieldAria(field, error, ids),
@@ -936,7 +1138,18 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
           "label",
           {
             "data-option": opt.id,
-            className: `fillo-option${opt.icon ? " fillo-option--has-icon" : ""}${selected.includes(opt.id) ? " fillo-option--selected" : ""}`,
+            "data-fillo": "option",
+            "data-selected": selected.includes(opt.id) ? "" : void 0,
+            className: optionCls(
+              `fillo-option${opt.icon ? " fillo-option--has-icon" : ""}${selected.includes(opt.id) ? " fillo-option--selected" : ""}`,
+              opt.id,
+              selected.includes(opt.id)
+            ),
+            onClick: (event) => {
+              if (isNativeControlTarget(event.target)) return;
+              event.preventDefault();
+              toggle(opt.id);
+            },
             children: [
               /* @__PURE__ */ jsx4(
                 "input",
@@ -948,7 +1161,7 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
                 }
               ),
               /* @__PURE__ */ jsx4(ChoiceIcon, { icon: opt.icon }),
-              /* @__PURE__ */ jsx4("span", { className: "fillo-option-label", children: opt.label })
+              /* @__PURE__ */ jsx4("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: opt.label })
             ]
           },
           opt.id
@@ -958,7 +1171,13 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
         /* @__PURE__ */ jsxs4(
           "div",
           {
-            className: `fillo-option fillo-option--other${otherActive ? " fillo-option--selected fillo-option--with-other" : ""}`,
+            "data-fillo": "option",
+            "data-selected": otherActive ? "" : void 0,
+            className: optionCls(
+              `fillo-option fillo-option--other${otherActive ? " fillo-option--selected fillo-option--with-other" : ""}`,
+              "__other",
+              otherActive
+            ),
             children: [
               /* @__PURE__ */ jsxs4("label", { className: "fillo-option-main", children: [
                 /* @__PURE__ */ jsx4(
@@ -977,15 +1196,15 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx4("span", { className: "fillo-option-label", children: "Other" })
+                /* @__PURE__ */ jsx4("span", { className: slotClass2("fillo-option-label", appearance, { slot: "optionLabel", kind: field.kind, fieldId: field.id }), "data-fillo": "optionLabel", children: strings.other })
               ] }),
               otherActive && /* @__PURE__ */ jsx4(
                 "input",
                 {
                   type: "text",
                   className: "fillo-input fillo-other-input",
-                  "aria-label": "Other \u2014 please specify",
-                  placeholder: "Your answer",
+                  "aria-label": strings.otherPrompt,
+                  placeholder: strings.otherPlaceholder,
                   autoFocus: otherText === void 0,
                   value: otherText ?? "",
                   onChange: (e) => {
@@ -1004,18 +1223,20 @@ function MultiChoice({ field, value, error, setValue, ids: providedIds }) {
 var OTHER_SENTINEL = "__fw_other__";
 function Dropdown({ field, value, error, setValue, ids: providedIds }) {
   const ids = useFilloFieldIds(field.id, providedIds);
+  const strings = useStrings();
   const choice = field;
   const options = useDisplayOptions(choice);
   const isOtherValue = typeof value === "string" && value !== "" && !choice.options.some((o) => o.id === value);
   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(
         "select",
         {
           id: ids.inputId,
-          className: "fillo-input fillo-select",
+          ...control,
           ...fieldAria(field, error, ids),
           value: otherActive ? OTHER_SENTINEL : typeof value === "string" ? value : "",
           onChange: (e) => {
@@ -1028,9 +1249,9 @@ function Dropdown({ field, value, error, setValue, ids: providedIds }) {
             }
           },
           children: [
-            /* @__PURE__ */ jsx4("option", { value: "", children: field.placeholder ?? "Choose\u2026" }),
+            /* @__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: OTHER_SENTINEL, children: "Other\u2026" })
+            choice.allowOther && /* @__PURE__ */ jsx4("option", { value: OTHER_SENTINEL, children: `${strings.other}\u2026` })
           ]
         }
       ),
@@ -1041,8 +1262,8 @@ function Dropdown({ field, value, error, setValue, ids: providedIds }) {
       {
         type: "text",
         className: "fillo-input fillo-other-input fillo-other-input--block",
-        "aria-label": "Other \u2014 please specify",
-        placeholder: "Your answer",
+        "aria-label": strings.otherPrompt,
+        placeholder: strings.otherPlaceholder,
         autoFocus: !isOtherValue,
         value: isOtherValue ? String(value) : "",
         onChange: (e) => setValue(e.target.value)
@@ -1052,18 +1273,24 @@ function Dropdown({ field, value, error, setValue, ids: providedIds }) {
 }
 function Checkbox({ field, value, error, setValue, ids: providedIds }) {
   const ids = useFilloFieldIds(field.id, providedIds);
+  const strings = useStrings();
+  const appearance = useFilloAppearance();
   const checkbox = field;
   if (checkbox.appearance === "toggle") {
     return /* @__PURE__ */ jsxs4(
       "div",
       {
         className: `fillo-field fillo-field--checkbox fillo-field--toggle${error ? " fillo-field--error" : ""}`,
+        "data-fillo": "field",
         "data-field": field.id,
+        "data-kind": field.kind,
+        "data-invalid": error ? "" : void 0,
+        "data-required": field.required ? "" : void 0,
         children: [
-          /* @__PURE__ */ jsxs4("label", { className: "fillo-toggle", children: [
-            /* @__PURE__ */ jsx4("span", { className: "fillo-toggle-copy", children: /* @__PURE__ */ jsxs4("span", { className: "fillo-option-label", 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: [
               field.label,
-              !field.required && /* @__PURE__ */ jsx4("span", { className: "fillo-optional", children: " (optional)" })
+              !field.required && /* @__PURE__ */ jsx4("span", { className: "fillo-optional", children: strings.optional })
             ] }) }),
             /* @__PURE__ */ jsx4(
               "input",
@@ -1090,9 +1317,13 @@ function Checkbox({ field, value, error, setValue, ids: providedIds }) {
     "div",
     {
       className: `fillo-field fillo-field--checkbox${error ? " fillo-field--error" : ""}`,
+      "data-fillo": "field",
       "data-field": field.id,
+      "data-kind": field.kind,
+      "data-invalid": error ? "" : void 0,
+      "data-required": field.required ? "" : void 0,
       children: [
-        /* @__PURE__ */ jsxs4("label", { className: "fillo-option", children: [
+        /* @__PURE__ */ jsxs4("label", { className: "fillo-option", "data-fillo": "option", "data-checked": value === true ? "" : void 0, children: [
           /* @__PURE__ */ jsx4(
             "input",
             {
@@ -1104,9 +1335,9 @@ function Checkbox({ field, value, error, setValue, ids: providedIds }) {
               ...fieldAria(field, error, ids)
             }
           ),
-          /* @__PURE__ */ jsxs4("span", { className: "fillo-option-label", children: [
+          /* @__PURE__ */ jsxs4("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: " (optional)" })
+            !field.required && /* @__PURE__ */ jsx4("span", { className: "fillo-optional", children: strings.optional })
           ] })
         ] }),
         field.description && /* @__PURE__ */ jsx4("p", { className: "fillo-description", id: ids.descriptionId, children: field.description }),
@@ -1147,10 +1378,12 @@ function Rating({ field, value, error, setValue, ids: providedIds }) {
   const steps = Array.from({ length: max }, (_, i) => i + 1);
   const selected = current > 0 ? current : null;
   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(
     "div",
     {
-      className: "fillo-rating",
+      ...control,
       role: "radiogroup",
       "aria-labelledby": ids.labelId,
       ...fieldAria(field, error, ids),
@@ -1159,7 +1392,14 @@ function Rating({ field, value, error, setValue, ids: providedIds }) {
         "button",
         {
           type: "button",
-          className: `fillo-star${n <= current ? " fillo-star--active" : ""}`,
+          "data-fillo": "option",
+          "data-selected": n <= current ? "" : void 0,
+          className: slotClass2(`fillo-star${n <= current ? " fillo-star--active" : ""}`, appearance, {
+            slot: "option",
+            kind: field.kind,
+            fieldId: field.id,
+            selected: n <= current
+          }),
           role: "radio",
           "aria-label": `${n} of ${max}`,
           "aria-checked": n === current,
@@ -1189,11 +1429,13 @@ function LinearScale({ field, value, error, setValue, ids: providedIds }) {
     field.description ? ids.descriptionId : null,
     error ? ids.errorId : null
   ].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(
       "div",
       {
-        className: "fillo-scale",
+        ...control,
         role: "radiogroup",
         "aria-labelledby": ids.labelId,
         "aria-invalid": error ? true : void 0,
@@ -1204,7 +1446,14 @@ function LinearScale({ field, value, error, setValue, ids: providedIds }) {
           "button",
           {
             type: "button",
-            className: `fillo-scale-step${value === n ? " fillo-scale-step--active" : ""}`,
+            "data-fillo": "option",
+            "data-selected": value === n ? "" : void 0,
+            className: slotClass2(`fillo-scale-step${value === n ? " fillo-scale-step--active" : ""}`, appearance, {
+              slot: "option",
+              kind: field.kind,
+              fieldId: field.id,
+              selected: value === n
+            }),
             role: "radio",
             "aria-label": String(n),
             "aria-checked": value === n,
@@ -1339,30 +1588,6 @@ function ContentRenderer({ block }) {
       return /* @__PURE__ */ jsx4("hr", { className: "fillo-divider" });
   }
 }
-function shouldAutoSubmit(field, value, api) {
-  if (api.form.settings.submitMode !== "auto") return false;
-  if (!api.isLastPage || api.status !== "idle" || api.uploading) return false;
-  const hasDiscreteAnswer = (() => {
-    switch (field.kind) {
-      case "select":
-      case "dropdown":
-        return typeof value === "string" && field.options.some((option) => option.id === value);
-      case "checkbox":
-        return value === true;
-      case "rating":
-      case "linear_scale":
-        return typeof value === "number";
-      default:
-        return false;
-    }
-  })();
-  if (!hasDiscreteAnswer) return false;
-  if (value === api.data[field.id]) return false;
-  const nextData = { ...api.data, [field.id]: value };
-  const interactive = visibleFields(api.form, nextData).filter((f) => f.kind !== "hidden");
-  if (interactive.length !== 1 || interactive[0]?.id !== field.id) return false;
-  return validateResponse(api.form, nextData).ok;
-}
 function blockHasPiping(block) {
   const has = (s) => typeof s === "string" && s.includes("{{");
   switch (block.kind) {
@@ -1382,8 +1607,12 @@ function blockPropsEqual(prev, next) {
   const id = next.block.id;
   if (prev.api.data[id] !== next.api.data[id]) return false;
   if (prev.api.errors[id] !== next.api.errors[id]) return false;
-  const needsWiderState = next.block.kind === "custom" || blockHasPiping(prev.block) || blockHasPiping(next.block);
-  if (needsWiderState && prev.api.data !== next.api.data) return false;
+  if (next.block.kind === "custom") {
+    return prev.api.data === next.api.data && prev.api.status === next.api.status && prev.api.uploading === next.api.uploading && prev.api.isFirstPage === next.api.isFirstPage && prev.api.isLastPage === next.api.isLastPage && prev.api.pageIndex === next.api.pageIndex;
+  }
+  if ((blockHasPiping(prev.block) || blockHasPiping(next.block)) && prev.api.data !== next.api.data) {
+    return false;
+  }
   if (next.api.form.settings.submitMode === "auto") {
     if (prev.api.data !== next.api.data || prev.api.status !== next.api.status || prev.api.uploading !== next.api.uploading || prev.api.isLastPage !== next.api.isLastPage) {
       return false;
@@ -1418,7 +1647,15 @@ function BlockRendererInner({ block, api, components, customComponents }) {
       error: api.errors[block.id],
       setValue: (v) => {
         api.setValue(block.id, v);
-        if (shouldAutoSubmit(block, v, api)) void api.submit();
+        const ctx = {
+          form: api.form,
+          data: api.data,
+          status: api.status,
+          isLastPage: api.isLastPage,
+          uploading: api.uploading
+        };
+        if (shouldAutoSubmit(block, v, ctx)) void api.submit().catch(() => {
+        });
       },
       api,
       ids
@@ -1432,8 +1669,13 @@ function FormField({
   customComponents
 }) {
   const api = useFillo();
+  const visibleIds = useMemo4(
+    () => new Set(visibleFields(api.form, api.data).map((f) => f.id)),
+    [api.form, api.data]
+  );
   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(
     BlockRenderer,
     {
@@ -1487,18 +1729,25 @@ function focusFirstInvalid(formEl) {
   if (typeof requestAnimationFrame === "function") requestAnimationFrame(run);
   else setTimeout(run, 0);
 }
-function isAutoSubmitBlock(block) {
-  return isField2(block) && (block.kind === "select" || block.kind === "dropdown" || block.kind === "checkbox" || block.kind === "rating" || block.kind === "linear_scale");
-}
-function needsExplicitSubmit(visible) {
-  const interactive = visible.filter((b) => !(isField2(b) && b.kind === "hidden"));
-  if (interactive.length === 0) return false;
-  if (interactive.length > 1) return true;
-  return !isAutoSubmitBlock(interactive[0]);
+var HP_STYLE = {
+  position: "absolute",
+  left: "-9999px",
+  top: "auto",
+  width: "1px",
+  height: "1px",
+  opacity: 0,
+  overflow: "hidden",
+  pointerEvents: "none"
+};
+function assertHpHidden(el) {
+  if (!el) return;
+  for (const [prop, value] of Object.entries(HP_STYLE)) {
+    el.style[prop] = String(value);
+  }
 }
 function FilloForm(props) {
   const { form, formId } = props;
-  const client = useMemo4(
+  const client = useMemo5(
     () => props.client ?? (formId ? createClient() : void 0),
     [props.client, formId]
   );
@@ -1510,7 +1759,11 @@ function FilloForm(props) {
   const codeForm = isCodeForm2(form) ? form : null;
   const inlineSchema = codeForm ? codeForm.schema : form;
   const onError = props.onError;
-  const syncedFormId = useCodeFormSync(form, client, onError);
+  const { formId: syncedFormId, status: syncedStatus } = useCodeFormSync(form, client, onError);
+  const onErrorRef = useRef5(onError);
+  useEffect7(() => {
+    onErrorRef.current = onError;
+  });
   const needsFetch = !inlineSchema && Boolean(client && formId);
   useEffect7(() => {
     if (!needsFetch || !client || !formId) return;
@@ -1527,30 +1780,37 @@ function FilloForm(props) {
       if (cancelled) return;
       const error = err instanceof FilloError2 ? err : new FilloError2("This form could not be loaded.", 0);
       setLoadError(error);
-      onError?.(error);
+      onErrorRef.current?.(error);
     });
     return () => {
       cancelled = true;
     };
-  }, [needsFetch, client, formId, onError]);
+  }, [needsFetch, client, formId]);
+  const strings = resolveStrings(props.strings);
   const rawSchema = inlineSchema ?? fetched;
-  const normalized = useMemo4(() => rawSchema ? normalizeFormSchema(rawSchema) : null, [rawSchema]);
+  const normalized = useMemo5(() => rawSchema ? normalizeFormSchema(rawSchema) : null, [rawSchema]);
   const schema = normalized?.ok ? normalized.schema : null;
-  const theme = props.theme ?? codeForm?.theme ?? fetchedTheme ?? void 0;
+  const theme = props.appearance?.theme ?? props.theme ?? codeForm?.theme ?? fetchedTheme ?? void 0;
   if (normalized && !normalized.ok) {
     const error = new FilloError2(`This form could not be rendered: ${normalized.error}`, 422);
     if (props.renderError) return /* @__PURE__ */ jsx5(Fragment2, { children: props.renderError(error) });
-    return /* @__PURE__ */ jsx5("div", { className: `fillo-form fillo-form--error ${props.className ?? ""}`, children: "This form could not be rendered." });
+    return /* @__PURE__ */ jsx5("div", { className: `fillo-form fillo-form--error ${props.className ?? ""}`, children: strings.renderFailed });
   }
   if (loadError) {
     if (props.renderError) {
       return /* @__PURE__ */ jsx5(Fragment2, { children: props.renderError(loadError) });
     }
-    const message = loadError.status === 404 ? "Form not found \u2014 check the form id and that it's published." : loadError.status === 0 ? "Couldn't reach the server \u2014 check your connection or CORS." : "This form could not be loaded.";
+    const message = loadError.status === 404 ? strings.loadFailedNotFound : loadError.status === 0 ? strings.loadFailedNetwork : strings.loadFailed;
     return /* @__PURE__ */ jsx5("div", { className: `fillo-form fillo-form--error ${props.className ?? ""}`, children: message });
   }
   if (closed) {
-    return /* @__PURE__ */ jsx5("div", { className: `fillo-form fillo-form--closed ${props.className ?? ""}`, ...themeProps(theme), children: /* @__PURE__ */ jsx5("p", { className: "fillo-closed", children: "This form is no longer accepting responses." }) });
+    return /* @__PURE__ */ jsx5("div", { className: `fillo-form fillo-form--closed ${props.className ?? ""}`, ...themeProps(theme), children: /* @__PURE__ */ jsx5("p", { className: "fillo-closed", children: strings.closed }) });
+  }
+  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__ */ jsx5(Fragment2, { children: props.renderError(error) });
+    return /* @__PURE__ */ jsx5("div", { className: `fillo-form fillo-form--closed ${props.className ?? ""}`, ...themeProps(theme), children: /* @__PURE__ */ jsx5("p", { className: "fillo-closed", children: strings.notLive }) });
   }
   if (!schema) {
     return /* @__PURE__ */ jsxs5(
@@ -1578,7 +1838,8 @@ function FilloForm(props) {
       formId: syncedFormId ?? formId,
       poweredBy,
       brandLabel: fetchedBranding?.label,
-      brandHref: fetchedBranding?.href
+      brandHref: fetchedBranding?.href,
+      draftNotice: notPublished
     }
   );
 }
@@ -1596,10 +1857,25 @@ function DevNoClientNotice() {
     " to collect them in Fillo, or forward them with webhooks. (This notice only appears in development.)"
   ] });
 }
+function DevDraftNotice() {
+  return /* @__PURE__ */ jsxs5("div", { className: "fillo-devwarning", role: "alert", children: [
+    /* @__PURE__ */ jsx5("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 ResolvedForm(props) {
   const { schema, theme } = props;
   const instanceId = useId2().replace(/:/g, "");
   const hpRef = useRef5("");
+  const codeForm = isCodeForm2(props.form) ? props.form : null;
+  const client = props.client;
+  const resolveFormId = useMemo5(
+    () => codeForm && client?.key ? (
+      // bypassCache: a stale cached formId must not be trusted at submit time.
+      () => syncCodeForm2(client, codeForm, { bypassCache: true }).then((r) => r.formId)
+    ) : void 0,
+    [codeForm, client]
+  );
   const api = useFilloController({
     form: schema,
     formId: props.formId,
@@ -1608,9 +1884,13 @@ function ResolvedForm(props) {
     onChange: props.onChange,
     onSubmitted: props.onSubmitted,
     skipValidation: props.skipValidation,
-    getHoneypot: () => hpRef.current
+    getHoneypot: () => hpRef.current,
+    // Framed renderer: Fillo draws the layout (and badge), so the surface is
+    // "default", never the bare-engine "headless".
+    surface: "default",
+    resolveFormId
   });
-  const themed = useMemo4(() => themeProps(theme), [theme]);
+  const themed = useMemo5(() => themeProps(theme), [theme]);
   const settings = schema.settings;
   const submitted = api.status === "submitted";
   useEffect7(() => {
@@ -1618,41 +1898,89 @@ function ResolvedForm(props) {
     const url = safeHttpUrl(settings.redirectUrl);
     if (url) window.location.assign(url);
   }, [submitted, settings.redirectUrl]);
+  const successRef = useRef5(null);
+  useEffect7(() => {
+    if (submitted) successRef.current?.focus();
+  }, [submitted]);
+  const blocksRef = useRef5(null);
+  const prevPageIndex = useRef5(api.pageIndex);
+  useEffect7(() => {
+    if (prevPageIndex.current === api.pageIndex) return;
+    prevPageIndex.current = api.pageIndex;
+    blocksRef.current?.focus();
+  }, [api.pageIndex]);
+  const appearance = props.appearance;
+  const strings = resolveStrings(props.strings);
   if (api.status === "submitted") {
-    return /* @__PURE__ */ jsxs5("div", { className: `fillo-form fillo-form--success ${props.className ?? ""}`, ...themed, children: [
-      props.renderSuccess ? props.renderSuccess() : /* @__PURE__ */ jsxs5("div", { className: "fillo-success", children: [
-        /* @__PURE__ */ jsx5("div", { className: "fillo-success-mark", "aria-hidden": "true", children: "\u2713" }),
-        /* @__PURE__ */ jsx5("h2", { className: "fillo-success-title", children: settings.successTitle ?? "Thanks!" }),
-        /* @__PURE__ */ jsx5("p", { className: "fillo-success-message", children: settings.successMessage ?? "Your response has been recorded." })
-      ] }),
-      props.poweredBy && /* @__PURE__ */ jsx5(PoweredBy, { label: props.brandLabel, href: props.brandHref })
-    ] });
+    return /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        ref: successRef,
+        tabIndex: -1,
+        role: "status",
+        "aria-live": "polite",
+        className: slotClass3(
+          `fillo-form fillo-form--success ${props.className ?? ""}`,
+          appearance,
+          { slot: "root", status: "submitted" }
+        ),
+        "data-fillo": "root",
+        "data-state": "submitted",
+        ...themed,
+        children: [
+          props.renderSuccess ? props.renderSuccess() : /* @__PURE__ */ jsxs5(
+            "div",
+            {
+              className: slotClass3("fillo-success", appearance, { slot: "success", status: "submitted" }),
+              "data-fillo": "success",
+              children: [
+                /* @__PURE__ */ jsx5("div", { className: "fillo-success-mark", "aria-hidden": "true", children: "\u2713" }),
+                /* @__PURE__ */ jsx5("h2", { className: "fillo-success-title", children: settings.successTitle ?? strings.successTitle }),
+                /* @__PURE__ */ jsx5("p", { className: "fillo-success-message", children: settings.successMessage ?? strings.successMessage })
+              ]
+            }
+          ),
+          props.poweredBy && /* @__PURE__ */ jsx5(PoweredBy, { label: props.brandLabel, href: props.brandHref })
+        ]
+      }
+    );
   }
   const multiPage = api.pageCount > 1;
   const autoSubmit = settings.submitMode === "auto";
   const showPrimaryButton = !autoSubmit || !api.isLastPage || needsExplicitSubmit(visibleFields2(api.form, api.data));
   const showFooter = showPrimaryButton || multiPage && !api.isFirstPage;
-  return /* @__PURE__ */ jsx5(FilloContext.Provider, { value: api, children: /* @__PURE__ */ jsx5(FilloInstanceIdContext.Provider, { value: instanceId, children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsx5(FilloContext.Provider, { value: api, children: /* @__PURE__ */ jsx5(FilloStringsContext.Provider, { value: strings, children: /* @__PURE__ */ jsx5(FilloAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx5(FilloInstanceIdContext.Provider, { value: instanceId, children: /* @__PURE__ */ jsxs5(
     "form",
     {
-      className: `fillo-form ${props.className ?? ""}`,
+      className: slotClass3(`fillo-form ${props.className ?? ""}`, appearance, {
+        slot: "root",
+        status: api.status
+      }),
+      "data-fillo": "root",
+      "data-state": api.status,
+      "data-page": api.pageIndex + 1,
+      "data-last-page": api.isLastPage ? "" : void 0,
       ...themed,
       noValidate: true,
       onSubmit: (e) => {
         e.preventDefault();
         const formEl = e.currentTarget;
-        if (api.isLastPage) void api.submit().then(() => focusFirstInvalid(formEl));
-        else {
+        if (api.isLastPage) {
+          void api.submit().then(() => focusFirstInvalid(formEl)).catch(() => {
+          });
+        } else {
           api.next();
           focusFirstInvalid(formEl);
         }
       },
       children: [
         !props.client && !props.skipValidation && isDevEnv() && /* @__PURE__ */ jsx5(DevNoClientNotice, {}),
+        props.draftNotice && isDevEnv() && /* @__PURE__ */ jsx5(DevDraftNotice, {}),
         multiPage && settings.showProgress !== false && /* @__PURE__ */ jsx5(
           "div",
           {
-            className: "fillo-progress-track",
+            className: slotClass3("fillo-progress-track", appearance, { slot: "progress" }),
+            "data-fillo": "progress",
             role: "progressbar",
             "aria-valuemin": 0,
             "aria-valuemax": api.pageCount,
@@ -1660,18 +1988,26 @@ function ResolvedForm(props) {
             children: /* @__PURE__ */ jsx5(
               "div",
               {
-                className: "fillo-progress-fill",
-                style: { width: `${(api.pageIndex + 1) / api.pageCount * 100}%` }
+                className: slotClass3("fillo-progress-fill", appearance, { slot: "progressFill" }),
+                "data-fillo": "progressFill",
+                style: { "--fillo-progress-value": `${(api.pageIndex + 1) / api.pageCount * 100}%` }
               }
             )
           }
         ),
-        api.pageIndex === 0 && props.showTitle !== false && /* @__PURE__ */ jsxs5("header", { className: "fillo-header", children: [
-          /* @__PURE__ */ jsx5("h1", { className: "fillo-title", children: schema.title }),
-          schema.description && /* @__PURE__ */ jsx5("p", { className: "fillo-form-description", children: schema.description })
+        api.pageIndex === 0 && props.showTitle !== false && /* @__PURE__ */ jsxs5("header", { className: slotClass3("fillo-header", appearance, { slot: "header" }), "data-fillo": "header", children: [
+          /* @__PURE__ */ jsx5("h1", { className: slotClass3("fillo-title", appearance, { slot: "title" }), "data-fillo": "title", children: schema.title }),
+          schema.description && /* @__PURE__ */ jsx5(
+            "p",
+            {
+              className: slotClass3("fillo-form-description", appearance, { slot: "description" }),
+              "data-fillo": "description",
+              children: schema.description
+            }
+          )
         ] }),
-        multiPage && api.page.title && api.pageIndex > 0 && /* @__PURE__ */ jsx5("h2", { className: "fillo-page-title", children: api.page.title }),
-        /* @__PURE__ */ jsx5("div", { className: "fillo-blocks", children: api.blocks.map((block) => /* @__PURE__ */ jsx5(
+        multiPage && api.page.title && api.pageIndex > 0 && /* @__PURE__ */ jsx5("h2", { className: slotClass3("fillo-page-title", appearance, { slot: "pageTitle" }), "data-fillo": "pageTitle", children: api.page.title }),
+        /* @__PURE__ */ jsx5("div", { className: slotClass3("fillo-blocks", appearance, { slot: "blocks" }), "data-fillo": "blocks", ref: blocksRef, tabIndex: -1, children: api.blocks.map((block) => /* @__PURE__ */ jsx5(
           BlockRenderer,
           {
             block,
@@ -1691,45 +2027,123 @@ function ResolvedForm(props) {
             autoComplete: "off",
             "aria-hidden": "true",
             defaultValue: "",
+            style: HP_STYLE,
+            ref: assertHpHidden,
             onChange: (e) => {
               hpRef.current = e.target.value;
             }
           }
         ),
-        api.status === "error" && /* @__PURE__ */ jsx5("p", { className: "fillo-submit-error", role: "alert", children: "This form can't submit right now. Please try again in a moment." }),
-        showFooter && /* @__PURE__ */ jsxs5("footer", { className: "fillo-footer", children: [
-          multiPage && !api.isFirstPage && /* @__PURE__ */ jsx5("button", { type: "button", className: "fillo-button fillo-button--ghost", onClick: api.back, children: "Back" }),
+        (api.status === "error" || api.submitError) && /* @__PURE__ */ jsx5("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__ */ jsx5(
+            "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__ */ jsx5(
             "button",
             {
               type: "submit",
-              className: "fillo-button fillo-button--primary",
+              className: slotClass3("fillo-button fillo-button--primary", appearance, { slot: "button", variant: "primary" }),
+              "data-fillo": "button",
               disabled: api.status === "submitting" || api.uploading,
-              children: api.uploading ? "Uploading\u2026" : api.status === "submitting" ? "Submitting\u2026" : api.isLastPage ? settings.submitLabel ?? "Submit" : "Next"
+              children: api.uploading ? strings.uploading : api.status === "submitting" ? strings.submitting : api.isLastPage ? settings.submitLabel ?? strings.submit : strings.next
             }
           )
         ] }),
         props.poweredBy && /* @__PURE__ */ jsx5(PoweredBy, { label: props.brandLabel, href: props.brandHref })
       ]
     }
-  ) }) });
+  ) }) }) }) });
 }
 
-// src/provider.tsx
-import { useId as useId3, useMemo as useMemo5 } from "react";
-import { FilloError as FilloError3, normalizeFormSchema as normalizeFormSchema2 } from "@usefillo/core";
+// src/jsx.tsx
+import { useRef as useRef6 } from "react";
+import {
+  codeFormFromJsx,
+  FilloJsxError,
+  JSX_BLOCK_COMPONENTS
+} from "@usefillo/core";
 import { jsx as jsx6 } from "react/jsx-runtime";
-function FilloProvider({ children, form, formId, client, ...options }) {
+var B = JSX_BLOCK_COMPONENTS;
+var isDevEnv2 = () => typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
+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 = useRef6(null);
+  if (memo2.current && memo2.current.json !== json && isDevEnv2()) {
+    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.`
+    );
+  }
+  if (!memo2.current || memo2.current.json !== json) {
+    memo2.current = { json, form: compiled };
+  }
+  return /* @__PURE__ */ jsx6(FilloForm, { form: memo2.current.form, client, ...rest });
+}
+function defineFormFromJsx(element) {
+  if (!element || element.type !== JsxForm) {
+    throw new FilloJsxError(
+      "NON_FILLO_CHILD",
+      "Fillo.defineForm() takes a <Fillo.Form> element: Fillo.defineForm(<Fillo.Form id=\u2026>\u2026</Fillo.Form>)"
+    );
+  }
+  const { id, title, description, settings, theme, children } = element.props;
+  return codeFormFromJsx({ id, title, description, settings, theme }, children);
+}
+var Fillo = {
+  Form: JsxForm,
+  /** Compile a <Fillo.Form> element to a CodeForm at module scope — the same
+   * value FilloProvider (headless) and the CLI consume. */
+  defineForm: defineFormFromJsx,
+  Text: B.Text,
+  LongText: B.LongText,
+  Email: B.Email,
+  Url: B.Url,
+  Phone: B.Phone,
+  Number: B.Number,
+  Select: B.Select,
+  MultiSelect: B.MultiSelect,
+  Dropdown: B.Dropdown,
+  Checkbox: B.Checkbox,
+  Rating: B.Rating,
+  Scale: B.Scale,
+  Ranking: B.Ranking,
+  Matrix: B.Matrix,
+  Signature: B.Signature,
+  Date: B.Date,
+  FileUpload: B.FileUpload,
+  Hidden: B.Hidden,
+  Custom: B.Custom,
+  Heading: B.Heading,
+  Paragraph: B.Paragraph,
+  Divider: B.Divider,
+  Page: B.Page,
+  Option: B.Option
+};
+
+// src/provider.tsx
+import { useId as useId3, useMemo as useMemo6 } from "react";
+import { FilloError as FilloError3, normalizeFormSchema as normalizeFormSchema2, resolveStrings as resolveStrings2 } from "@usefillo/core";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function FilloProvider({ children, form, formId, client, appearance, strings, ...options }) {
   const instanceId = useId3().replace(/:/g, "");
   const codeForm = isCodeForm2(form) ? form : null;
   const rawSchema = codeForm ? codeForm.schema : form;
-  const schemaKey = useMemo5(() => JSON.stringify(rawSchema), [rawSchema]);
-  const normalized = useMemo5(() => normalizeFormSchema2(rawSchema), [rawSchema, schemaKey]);
+  const schemaKey = useMemo6(() => JSON.stringify(rawSchema), [rawSchema]);
+  const normalized = useMemo6(() => normalizeFormSchema2(rawSchema), [rawSchema, schemaKey]);
   if (!normalized.ok) {
     throw new FilloError3(`This form could not be rendered: ${normalized.error}`, 422);
   }
   const schema = normalized.schema;
-  const syncedFormId = useCodeFormSync(form, client);
+  const { formId: syncedFormId } = useCodeFormSync(form, client);
   const api = useFilloController({
     ...options,
     client,
@@ -1739,22 +2153,36 @@ function FilloProvider({ children, form, formId, client, ...options }) {
     // a paid capability the server enforces when these responses are submitted.
     surface: "headless"
   });
-  return /* @__PURE__ */ jsx6(FilloContext.Provider, { value: api, children: /* @__PURE__ */ jsx6(FilloInstanceIdContext.Provider, { value: instanceId, children }) });
+  return /* @__PURE__ */ jsx7(FilloContext.Provider, { value: api, children: /* @__PURE__ */ jsx7(FilloStringsContext.Provider, { value: resolveStrings2(strings), children: /* @__PURE__ */ jsx7(FilloAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx7(FilloInstanceIdContext.Provider, { value: instanceId, children }) }) }) });
 }
 
 // src/index.ts
 import {
   createClient as createClient2,
   provisionWorkspace,
+  when,
+  FilloJsxError as FilloJsxError2,
   FilloClient,
   FilloError as FilloError4
 } from "@usefillo/core";
+if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
+  const key = /* @__PURE__ */ Symbol.for("usefillo.react.instance");
+  const g = globalThis;
+  if (g[key]) {
+    console.error(
+      "[fillo] Two copies of @usefillo/react are loaded \u2014 React context does not cross package copies, so forms will misbehave. Dedupe the dependency (npm dedupe / pnpm why @usefillo/react)."
+    );
+  }
+  g[key] = true;
+}
 export {
   BlockRenderer,
+  Fillo,
   FilloClient,
   FilloError4 as FilloError,
   FileUploadField as FilloFileUpload,
   FilloForm,
+  FilloJsxError2 as FilloJsxError,
   FilloProvider,
   FormField,
   createClient2 as createClient,
@@ -1762,5 +2190,7 @@ export {
   provisionWorkspace,
   useField,
   useFillo,
-  useFilloController
+  useFilloAppearance,
+  useFilloController,
+  when
 };