@usefillo/core 0.5.1 → 0.6.0

package/dist/index.js

@@ -381,18 +381,18 @@ function isEmpty(value) {
   if (typeof value === "object") return Object.keys(value).length === 0;
   return false;
 }
-function validateField(field, value) {
+function validateField(field2, value) {
   if (isEmpty(value)) {
-    return field.required ? "This field is required" : null;
+    return field2.required ? "This field is required" : null;
   }
-  switch (field.kind) {
+  switch (field2.kind) {
     case "short_text":
     case "long_text": {
       if (typeof value !== "string") return "Expected text";
-      if (field.maxLength && value.length > field.maxLength)
-        return `Must be at most ${field.maxLength} characters`;
-      const hardCap = field.kind === "long_text" ? 2e4 : 2e3;
-      if (!field.maxLength && value.length > hardCap) return "Answer is too long";
+      if (field2.maxLength && value.length > field2.maxLength)
+        return `Must be at most ${field2.maxLength} characters`;
+      const hardCap = field2.kind === "long_text" ? 2e4 : 2e3;
+      if (!field2.maxLength && value.length > hardCap) return "Answer is too long";
       return null;
     }
     case "email": {
@@ -419,25 +419,25 @@ function validateField(field, value) {
     case "number": {
       const n = typeof value === "string" ? Number(value) : value;
       if (typeof n !== "number" || !Number.isFinite(n)) return "Enter a number";
-      if (field.min !== void 0 && n < field.min) return `Must be at least ${field.min}`;
-      if (field.max !== void 0 && n > field.max) return `Must be at most ${field.max}`;
+      if (field2.min !== void 0 && n < field2.min) return `Must be at least ${field2.min}`;
+      if (field2.max !== void 0 && n > field2.max) return `Must be at most ${field2.max}`;
       return null;
     }
     case "select":
     case "dropdown": {
       if (typeof value !== "string" || value === "") return "Pick an option";
-      if (field.options.some((o) => o.id === value)) return null;
-      if (field.allowOther && value.length <= 500) return null;
+      if (field2.options.some((o) => o.id === value)) return null;
+      if (field2.allowOther && value.length <= 500) return null;
       return "Pick a valid option";
     }
     case "multi_select": {
       if (!Array.isArray(value)) return "Pick at least one option";
-      const ids = new Set(field.options.map((o) => o.id));
+      const ids = new Set(field2.options.map((o) => o.id));
       const arr = value;
       let others = 0;
       for (const v of arr) {
         if (ids.has(v)) continue;
-        if (field.allowOther !== true || typeof v !== "string" || v.length === 0 || v.length > 500)
+        if (field2.allowOther !== true || typeof v !== "string" || v.length === 0 || v.length > 500)
           return "Pick valid options";
         if (++others > 1) return "Only one 'Other' answer is allowed";
       }
@@ -447,15 +447,15 @@ function validateField(field, value) {
       return typeof value === "boolean" ? null : "Invalid value";
     }
     case "rating": {
-      const max = field.max ?? 5;
+      const max = field2.max ?? 5;
       const n = typeof value === "string" ? Number(value) : value;
       if (typeof n !== "number" || !Number.isInteger(n) || n < 1 || n > max)
         return `Pick a rating between 1 and ${max}`;
       return null;
     }
     case "linear_scale": {
-      const min = field.min ?? 1;
-      const max = field.max ?? 10;
+      const min = field2.min ?? 1;
+      const max = field2.max ?? 10;
       const n = typeof value === "string" ? Number(value) : value;
       if (typeof n !== "number" || !Number.isInteger(n) || n < min || n > max)
         return `Pick a value between ${min} and ${max}`;
@@ -463,7 +463,7 @@ function validateField(field, value) {
     }
     case "ranking": {
       if (!Array.isArray(value)) return "Drag the options into order";
-      const ids = field.options.map((o) => o.id).sort();
+      const ids = field2.options.map((o) => o.id).sort();
       const got = [...value].sort();
       if (ids.length !== got.length || ids.some((id, i) => id !== got[i]))
         return "Rank every option";
@@ -473,12 +473,12 @@ function validateField(field, value) {
       if (typeof value !== "object" || value === null || Array.isArray(value))
         return "Answer the grid";
       const answers = value;
-      const columnIds = new Set(field.columns.map((c) => c.id));
-      const rowIds = new Set(field.rows.map((r) => r.id));
+      const columnIds = new Set(field2.columns.map((c) => c.id));
+      const rowIds = new Set(field2.rows.map((r) => r.id));
       for (const [rowId, columnId] of Object.entries(answers)) {
         if (!rowIds.has(rowId) || !columnIds.has(columnId)) return "Invalid grid answer";
       }
-      if (field.required && Object.keys(answers).length < field.rows.length)
+      if (field2.required && Object.keys(answers).length < field2.rows.length)
         return "Answer every row";
       return null;
     }
@@ -505,7 +505,7 @@ function validateField(field, value) {
     case "file_upload": {
       const r = z.array(fileValueSchema).safeParse(value);
       if (!r.success) return "Upload did not complete";
-      const maxFiles = field.maxFiles ?? 1;
+      const maxFiles = field2.maxFiles ?? 1;
       if (r.data.length > maxFiles)
         return `At most ${maxFiles} file${maxFiles === 1 ? "" : "s"}`;
       return null;
@@ -516,24 +516,24 @@ function validateResponse(form, data) {
   const fields = visibleFields(form, data);
   const errors = {};
   const cleaned = {};
-  for (const field of fields) {
-    const value = normalizeValue(field, data[field.id]);
-    const error = validateField(field, value);
+  for (const field2 of fields) {
+    const value = normalizeValue(field2, data[field2.id]);
+    const error = validateField(field2, value);
     if (error) {
-      errors[field.id] = error;
+      errors[field2.id] = error;
     } else if (!isEmpty(value)) {
-      cleaned[field.id] = value;
+      cleaned[field2.id] = value;
     }
   }
   return { ok: Object.keys(errors).length === 0, errors, data: cleaned };
 }
-function normalizeValue(field, value) {
+function normalizeValue(field2, value) {
   if (value === void 0 || value === null) return value;
-  if (field.kind === "number" && typeof value === "string" && value.trim() !== "") {
+  if (field2.kind === "number" && typeof value === "string" && value.trim() !== "") {
     const n = Number(value);
     return Number.isNaN(n) ? value : n;
   }
-  if ((field.kind === "rating" || field.kind === "linear_scale") && typeof value === "string") {
+  if ((field2.kind === "rating" || field2.kind === "linear_scale") && typeof value === "string") {
     const n = Number(value);
     return Number.isNaN(n) ? value : n;
   }
@@ -869,26 +869,26 @@ function normalizeFormTheme(input) {
 function assertNever(x) {
   throw new Error(`Unhandled field kind: ${JSON.stringify(x)}`);
 }
-function formatAnswer(field, value) {
+function formatAnswer(field2, value) {
   if (value === null || value === void 0 || value === "") return "";
-  switch (field.kind) {
+  switch (field2.kind) {
     case "file_upload":
       if (!Array.isArray(value)) return String(value);
       return value.map((f) => f.name).join(", ");
     case "select":
     case "dropdown":
-      return field.options.find((o) => o.id === value)?.label ?? String(value);
+      return field2.options.find((o) => o.id === value)?.label ?? String(value);
     case "multi_select":
       if (!Array.isArray(value)) return String(value);
-      return value.map((id) => field.options.find((o) => o.id === id)?.label ?? id).join(", ");
+      return value.map((id) => field2.options.find((o) => o.id === id)?.label ?? id).join(", ");
     case "ranking":
       if (!Array.isArray(value)) return String(value);
-      return value.map((id, i) => `${i + 1}. ${field.options.find((o) => o.id === id)?.label ?? id}`).join(", ");
+      return value.map((id, i) => `${i + 1}. ${field2.options.find((o) => o.id === id)?.label ?? id}`).join(", ");
     case "matrix": {
       if (typeof value !== "object" || value === null || Array.isArray(value))
         return String(value);
       const answers = value;
-      return field.rows.filter((row) => answers[row.id]).map((row) => `${row.label}: ${field.columns.find((c) => c.id === answers[row.id])?.label ?? ""}`).join(", ");
+      return field2.rows.filter((row) => answers[row.id]).map((row) => `${row.label}: ${field2.columns.find((c) => c.id === answers[row.id])?.label ?? ""}`).join(", ");
     }
     case "signature":
       return typeof value === "string" && value.startsWith("data:image/") ? "\u270D signed" : "";
@@ -915,7 +915,7 @@ function formatAnswer(field, value) {
     case "custom":
       return typeof value === "object" ? JSON.stringify(value) : String(value);
     default:
-      return assertNever(field);
+      return assertNever(field2);
   }
 }
 
@@ -1255,13 +1255,30 @@ var sha1Base64 = (bytes) => bytesToBase64(new Sha1().update(bytes).digest());
 
 // src/client.ts
 var FilloError = class extends Error {
-  constructor(message, status) {
+  constructor(message, status, retryAfterSec2) {
     super(message);
     this.status = status;
+    this.retryAfterSec = retryAfterSec2;
     this.name = "FilloError";
   }
   status;
+  retryAfterSec;
 };
+function isFilloError(err) {
+  return err instanceof Error && err.name === "FilloError";
+}
+async function errorMessage(res, fallback) {
+  try {
+    const body = await res.json();
+    if (typeof body.error === "string" && body.error) return body.error;
+  } catch {
+  }
+  return fallback;
+}
+function retryAfterSec(res) {
+  const raw = Number(res.headers.get("retry-after"));
+  return Number.isFinite(raw) && raw > 0 ? raw : void 0;
+}
 var MAX_CHUNK_RETRIES = 3;
 var DEFAULT_TIMEOUT_MS = 3e4;
 function isRetryableStatus(status) {
@@ -1311,6 +1328,7 @@ async function digestPartBase64(bytes) {
   return sha1Base64(bytes);
 }
 var DEFAULT_BASE_URL = "https://fillo.so";
+var CLIENT_HEADER = { "X-Fillo-Client": `@usefillo/core@${FILLO_SDK_VERSION}` };
 var FilloClient = class {
   /** Server origin this client targets, normalized (no trailing slash). */
   baseUrl;
@@ -1318,7 +1336,7 @@ var FilloClient = class {
   /** Publishable workspace key, when configured. */
   key;
   constructor(options2 = {}) {
-    this.baseUrl = options2.sameOrigin ? "" : DEFAULT_BASE_URL;
+    this.baseUrl = options2.baseUrl ? options2.baseUrl.replace(/\/$/, "") : options2.sameOrigin ? "" : DEFAULT_BASE_URL;
     this.key = options2.key;
     this.fetch = options2.fetch ?? ((...args) => globalThis.fetch(...args));
   }
@@ -1326,7 +1344,7 @@ var FilloClient = class {
     return `${this.baseUrl}/api/v1${path}`;
   }
   async json(path, init) {
-    const headers = init?.body != null ? { "Content-Type": "application/json", ...init?.headers } : init?.headers;
+    const headers = init?.body != null ? { "Content-Type": "application/json", ...CLIENT_HEADER, ...init?.headers } : init?.headers;
     let res;
     try {
       res = await this.fetch(this.url(path), {
@@ -1338,8 +1356,8 @@ var FilloClient = class {
       throw asRequestError(err);
     }
     if (!res.ok) {
-      const body = await res.text().catch(() => "");
-      throw new FilloError(body || `Request failed: ${res.status}`, res.status);
+      const message = await errorMessage(res, `Request failed: ${res.status}`);
+      throw new FilloError(message, res.status, retryAfterSec(res));
     }
     return await res.json();
   }
@@ -1379,7 +1397,7 @@ var FilloClient = class {
     try {
       res = await this.fetch(this.url(`/forms/${encodeURIComponent(formId)}/responses`), {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
+        headers: { "Content-Type": "application/json", ...CLIENT_HEADER },
         body: JSON.stringify({ data, meta }),
         signal: AbortSignal.timeout(DEFAULT_TIMEOUT_MS)
       });
@@ -1391,7 +1409,8 @@ var FilloClient = class {
       return { ok: false, errors: body2.errors };
     }
     if (!res.ok) {
-      throw new FilloError(`Submit failed: ${res.status}`, res.status);
+      const message = await errorMessage(res, `Submit failed: ${res.status}`);
+      throw new FilloError(message, res.status, retryAfterSec(res));
     }
     const body = await res.json();
     return { ok: true, responseId: body.id, duplicate: body.duplicate };
@@ -1722,6 +1741,68 @@ async function provisionWorkspace(options2) {
   return await res.json();
 }
 
+// src/prefill.ts
+function parseDecimal(raw) {
+  const s = raw.trim();
+  if (!/^-?\d*\.?\d+$/.test(s)) return null;
+  const n = Number(s);
+  return Number.isFinite(n) ? n : null;
+}
+function prefillFromParams(form, params) {
+  const data = {};
+  for (const field2 of allFields(form)) {
+    const raw = field2.kind === "hidden" ? params[field2.paramName ?? field2.id] ?? field2.defaultValue : params[field2.id];
+    if (raw === void 0 || raw === "") continue;
+    switch (field2.kind) {
+      case "number": {
+        const n = parseDecimal(raw);
+        if (n === null) break;
+        if (field2.min !== void 0 && n < field2.min) break;
+        if (field2.max !== void 0 && n > field2.max) break;
+        data[field2.id] = n;
+        break;
+      }
+      case "rating": {
+        const n = parseDecimal(raw);
+        if (n !== null && Number.isInteger(n) && n >= 1 && n <= (field2.max ?? 5))
+          data[field2.id] = n;
+        break;
+      }
+      case "linear_scale": {
+        const n = parseDecimal(raw);
+        const min = field2.min ?? 1;
+        const max = field2.max ?? 10;
+        if (n !== null && Number.isInteger(n) && n >= min && n <= max) data[field2.id] = n;
+        break;
+      }
+      case "checkbox":
+        data[field2.id] = raw === "true" || raw === "1" || raw === "yes";
+        break;
+      case "select":
+      case "dropdown": {
+        if (field2.options.some((o) => o.id === raw)) data[field2.id] = raw;
+        break;
+      }
+      case "multi_select": {
+        const ids = new Set(field2.options.map((o) => o.id));
+        const picked = raw.split(",").filter((v) => ids.has(v));
+        if (picked.length > 0) data[field2.id] = picked;
+        break;
+      }
+      case "file_upload":
+      case "ranking":
+      case "matrix":
+      case "signature":
+      case "custom":
+        break;
+      // not prefillable from a URL
+      default:
+        data[field2.id] = raw;
+    }
+  }
+  return data;
+}
+
 // src/controller.ts
 var EMPTY_PAGE = { id: "empty", blocks: [] };
 var warnedNoClient = false;
@@ -1791,6 +1872,10 @@ function hasSubmittedOnce(form, formId) {
   if (form.settings.submissionLimit !== "once_per_visitor" || !formId) return false;
   return Boolean(readStoredSubmission(formId)?.submittedAt);
 }
+function submitFailureMessage(err) {
+  if (isFilloError(err) && err.status && err.status > 0 && err.message) return err.message;
+  return "Couldn't reach the server \u2014 check your connection and try again. If this keeps happening, a browser extension, firewall, or the site's Content-Security-Policy may be blocking the request.";
+}
 function createFormController(options2) {
   const { onChange, onSubmitted } = options2;
   const initial = normalizeFormSchema(options2.form);
@@ -1801,7 +1886,28 @@ function createFormController(options2) {
   let data = { ...options2.initialData ?? {} };
   let errors = {};
   let pageIndex = 0;
-  let status = hasSubmittedOnce(form, formId) ? "submitted" : "idle";
+  let status = "idle";
+  queueMicrotask(() => {
+    if (status === "idle" && hasSubmittedOnce(form, formId)) {
+      status = "submitted";
+      notify();
+    }
+    if (typeof location !== "undefined" && location.search) {
+      const params = Object.fromEntries(new URLSearchParams(location.search));
+      let merged = null;
+      for (const [key, value] of Object.entries(prefillFromParams(form, params))) {
+        if (data[key] === void 0) {
+          merged = merged ?? { ...data };
+          merged[key] = value;
+        }
+      }
+      if (merged && status === "idle") {
+        data = merged;
+        notify();
+      }
+    }
+  });
+  let submitError;
   const uploadingFields = /* @__PURE__ */ new Set();
   const listeners = /* @__PURE__ */ new Set();
   const mountedAt = Date.now();
@@ -1822,7 +1928,8 @@ function createFormController(options2) {
       blocks: visibleBlocks(page, data),
       isFirstPage: clamped === 0,
       isLastPage: clamped === pageCount - 1,
-      uploading: uploadingFields.size > 0
+      uploading: uploadingFields.size > 0,
+      submitError
     };
   }
   let snapshot = computeSnapshot();
@@ -1855,6 +1962,7 @@ function createFormController(options2) {
     }
     data = { ...data, [fieldId]: value };
     onChange?.(data);
+    submitError = void 0;
     if (fieldId in errors) {
       errors = Object.fromEntries(Object.entries(errors).filter(([k]) => k !== fieldId));
     }
@@ -1897,10 +2005,24 @@ function createFormController(options2) {
       notify();
       return;
     }
+    if (client && !formId && options2.resolveFormId) {
+      status = "submitting";
+      submitError = void 0;
+      notify();
+      try {
+        formId = await options2.resolveFormId();
+      } catch (err) {
+        status = "idle";
+        submitError = submitFailureMessage(err);
+        notify();
+        throw err;
+      }
+    }
     if (client && formId) {
       const visitorKey = form.settings.submissionLimit === "once_per_visitor" ? ensureSubmissionKey(formId) : void 0;
       const submissionKey = visitorKey ?? idempotencyKey;
       status = "submitting";
+      submitError = void 0;
       notify();
       let res;
       try {
@@ -1912,6 +2034,7 @@ function createFormController(options2) {
         });
       } catch (err) {
         status = "idle";
+        submitError = submitFailureMessage(err);
         notify();
         throw err;
       }
@@ -1968,6 +2091,122 @@ function createFormController(options2) {
   };
 }
 
+// src/auto-submit.ts
+function isAutoSubmitBlock(block) {
+  return isField(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) => !(isField(b) && b.kind === "hidden"));
+  if (interactive.length === 0) return false;
+  if (interactive.length > 1) return true;
+  return !isAutoSubmitBlock(interactive[0]);
+}
+function shouldAutoSubmit(field2, value, ctx) {
+  if (ctx.form.settings.submitMode !== "auto") return false;
+  if (!ctx.isLastPage || ctx.status !== "idle" || ctx.uploading) return false;
+  const hasDiscreteAnswer = (() => {
+    switch (field2.kind) {
+      case "select":
+      case "dropdown":
+        return typeof value === "string" && field2.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 === ctx.data[field2.id]) return false;
+  const nextData = { ...ctx.data, [field2.id]: value };
+  const interactive = visibleFields(ctx.form, nextData).filter((f) => f.kind !== "hidden");
+  if (interactive.length !== 1 || interactive[0]?.id !== field2.id) return false;
+  return validateResponse(ctx.form, nextData).ok;
+}
+
+// src/appearance.ts
+var FILLO_SLOTS = [
+  "root",
+  "header",
+  "title",
+  "description",
+  "pageTitle",
+  "progress",
+  "progressFill",
+  "blocks",
+  "field",
+  "label",
+  "fieldDescription",
+  "control",
+  "options",
+  "option",
+  "optionLabel",
+  "error",
+  "footer",
+  "button",
+  "success"
+];
+var FILLO_DATA_ATTRS = {
+  /** Slot name, on every slot element: `data-fillo="control"`. */
+  slot: "data-fillo",
+  /** Field kind, on the field wrapper: `data-kind="email"`. */
+  kind: "data-kind",
+  /** Field id, on the field wrapper (pre-existing). */
+  field: "data-field",
+  invalid: "data-invalid",
+  required: "data-required",
+  /** Selected option row / active scale step / active star. */
+  selected: "data-selected",
+  /** Checkbox / toggle checked state. */
+  checked: "data-checked",
+  dragOver: "data-drag-over",
+  /** Engine status on the root: idle | submitting | submitted | error. */
+  state: "data-state",
+  page: "data-page",
+  lastPage: "data-last-page"
+};
+function resolveSlotClass(appearance, state) {
+  if (!appearance?.classNames && !appearance?.fields) return "";
+  const parts = [];
+  const general = appearance.classNames?.[state.slot];
+  if (general) parts.push(typeof general === "function" ? general(state) : general);
+  const field2 = state.fieldId ? appearance.fields?.[state.fieldId]?.[state.slot] : void 0;
+  if (field2) parts.push(typeof field2 === "function" ? field2(state) : field2);
+  return parts.filter(Boolean).join(" ");
+}
+function slotClass(base, appearance, state) {
+  const extra = resolveSlotClass(appearance, state);
+  return extra ? `${base} ${extra}` : base;
+}
+
+// src/strings.ts
+var DEFAULT_STRINGS = {
+  back: "Back",
+  next: "Next",
+  submit: "Submit",
+  submitting: "Submitting\u2026",
+  uploading: "Uploading\u2026",
+  optional: " (optional)",
+  other: "Other",
+  otherPrompt: "Other \u2014 please specify",
+  otherPlaceholder: "Your answer",
+  choosePlaceholder: "Choose\u2026",
+  successTitle: "Thanks!",
+  successMessage: "Your response has been recorded.",
+  closed: "This form is no longer accepting responses.",
+  notLive: "This form isn't live yet.",
+  submitFailed: "This form can't submit right now. Please try again in a moment.",
+  loadFailedNotFound: "Form not found \u2014 check the form id and that it's published.",
+  loadFailedNetwork: "Couldn't reach the server \u2014 check your connection or CORS.",
+  loadFailed: "This form could not be loaded.",
+  renderFailed: "This form could not be rendered."
+};
+function resolveStrings(overrides) {
+  return overrides ? { ...DEFAULT_STRINGS, ...overrides } : DEFAULT_STRINGS;
+}
+
 // src/define.ts
 function defineForm(def) {
   return {
@@ -1987,83 +2226,376 @@ function isCodeForm(form) {
   return typeof form === "object" && form !== null && "__filloCodeForm" in form;
 }
 var syncCache = /* @__PURE__ */ new Map();
+var sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+async function syncWithRetry(client, form) {
+  let delay = 800;
+  for (let attempt = 0; ; attempt++) {
+    try {
+      return await client.syncForm(form.id, form.schema, form.theme ?? null);
+    } catch (err) {
+      const status = isFilloError(err) ? err.status ?? 0 : 0;
+      const retryable = !isFilloError(err) || status === 0 || status === 408 || status === 429 || status >= 500;
+      if (!retryable || attempt >= 2) throw err;
+      const hinted = isFilloError(err) ? err.retryAfterSec : void 0;
+      await sleep(Math.min(hinted ? hinted * 1e3 : delay * (1 + Math.random() * 0.5), 15e3));
+      delay *= 2;
+    }
+  }
+}
 function contentHash(input) {
   let h = 5381;
   for (let i = 0; i < input.length; i++) h = (h << 5) + h + input.charCodeAt(i) | 0;
   return (h >>> 0).toString(36);
 }
-function syncCodeForm(client, form) {
-  const content = JSON.stringify(form.schema) + JSON.stringify(form.theme ?? null);
-  const key = `${client.baseUrl}:${client.key}:${form.id}:${contentHash(content)}`;
-  let pending = syncCache.get(key);
-  if (!pending) {
-    pending = client.syncForm(form.id, form.schema, form.theme ?? null);
-    syncCache.set(key, pending);
-    pending.catch(() => syncCache.delete(key));
+function storageKey(client, handle) {
+  return `fillo:sync:${client.baseUrl}|${client.key}|${handle}`;
+}
+function readStoredSync(client, handle, hash) {
+  try {
+    const raw = globalThis.localStorage?.getItem(storageKey(client, handle));
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (typeof parsed.formId !== "string" || parsed.hash !== hash || typeof parsed.ts !== "number")
+      return null;
+    const ttl = parsed.status === "published" ? 36e5 : 6e4;
+    if (Date.now() - parsed.ts > ttl) return null;
+    return parsed;
+  } catch {
+    return null;
   }
+}
+function writeStoredSync(client, handle, hash, r) {
+  try {
+    globalThis.localStorage?.setItem(
+      storageKey(client, handle),
+      JSON.stringify({
+        formId: r.formId,
+        slug: r.slug,
+        status: r.status,
+        hash,
+        ts: Date.now()
+      })
+    );
+  } catch {
+  }
+}
+function syncCodeForm(client, form, opts) {
+  const content2 = JSON.stringify(form.schema) + JSON.stringify(form.theme ?? null);
+  const hash = contentHash(content2);
+  const key = `${client.baseUrl}:${client.key}:${form.id}:${hash}`;
+  let pending = syncCache.get(key);
+  if (pending && !opts?.bypassCache) return pending;
+  if (!opts?.bypassCache) {
+    const stored = readStoredSync(client, form.id, hash);
+    if (stored) {
+      pending = Promise.resolve({ formId: stored.formId, slug: stored.slug, status: stored.status });
+      syncCache.set(key, pending);
+      return pending;
+    }
+  }
+  pending = syncWithRetry(client, form).then((r) => {
+    writeStoredSync(client, form.id, hash, r);
+    return r;
+  });
+  syncCache.set(key, pending);
+  pending.catch(() => syncCache.delete(key));
   return pending;
 }
 
-// src/prefill.ts
-function parseDecimal(raw) {
-  const s = raw.trim();
-  if (!/^-?\d*\.?\d+$/.test(s)) return null;
-  const n = Number(s);
-  return Number.isFinite(n) ? n : null;
+// src/jsx.ts
+var FilloJsxError = class extends Error {
+  constructor(code, message) {
+    super(`[fillo] ${message} \u2014 https://fillo.so/docs/troubleshooting#jsx-${code.toLowerCase()}`);
+    this.code = code;
+    this.name = "FilloJsxError";
+  }
+  code;
+};
+var BRAND = /* @__PURE__ */ Symbol.for("fillo.block");
+var REACT_FRAGMENT = /* @__PURE__ */ Symbol.for("react.fragment");
+var FIELD_BASE = ["label", "description", "required", "placeholder"];
+var field = (name, kind, extra, opts = {}) => ({
+  name,
+  kind,
+  props: [...FIELD_BASE, ...extra],
+  ...opts
+});
+var content = (name, kind, textChildren) => ({
+  name,
+  kind,
+  props: textChildren ? ["text"] : [],
+  textChildren,
+  content: true
+});
+var CHOICE_EXTRA = ["options", "allowOther", "shuffleOptions"];
+var JSX_BLOCK_SPECS = [
+  field("Text", "short_text", ["maxLength"]),
+  field("LongText", "long_text", ["maxLength"]),
+  field("Email", "email", ["maxLength"]),
+  field("Url", "url", ["maxLength"]),
+  field("Phone", "phone", ["defaultCountry"]),
+  field("Number", "number", ["min", "max"]),
+  field("Select", "select", CHOICE_EXTRA, { optionChildren: true }),
+  field("MultiSelect", "multi_select", CHOICE_EXTRA, { optionChildren: true }),
+  field("Dropdown", "dropdown", CHOICE_EXTRA, { optionChildren: true }),
+  field("Checkbox", "checkbox", ["appearance"]),
+  field("Rating", "rating", ["max"]),
+  field("Scale", "linear_scale", ["min", "max", "minLabel", "maxLabel"]),
+  field("Ranking", "ranking", ["options"], { optionChildren: true }),
+  field("Matrix", "matrix", ["rows", "columns"]),
+  field("Signature", "signature", []),
+  field("Date", "date", []),
+  field("FileUpload", "file_upload", ["maxFiles", "maxFileSizeMb", "accept"]),
+  field("Hidden", "hidden", ["paramName", "defaultValue"]),
+  field("Custom", "custom", ["component", "config"]),
+  content("Heading", "heading", true),
+  content("Paragraph", "paragraph", true),
+  { name: "Divider", kind: "divider", props: [], content: true }
+];
+var PAGE_SPEC = { name: "Page", kind: "__page", props: ["title"] };
+var OPTION_SPEC = { name: "Option", kind: "__option", props: ["label", "icon"] };
+function makeInert(spec) {
+  const component = () => {
+    throw new FilloJsxError(
+      "RENDERED_INERT",
+      `<Fillo.${spec.name}> was rendered by React. Fillo fields are schema declarations, valid only inside <Fillo.Form> or Fillo.defineForm(). If this form lives in a server component, move it to a client module ("use client")`
+    );
+  };
+  component[BRAND] = spec;
+  return component;
+}
+var JSX_BLOCK_COMPONENTS = Object.fromEntries([
+  ...JSX_BLOCK_SPECS.map((spec) => [spec.name, makeInert(spec)]),
+  ["Page", makeInert(PAGE_SPEC)],
+  ["Option", makeInert(OPTION_SPEC)]
+]);
+var isElement = (v) => typeof v === "object" && v !== null && "type" in v && "props" in v;
+var brandOf = (type) => typeof type === "function" ? type[BRAND] : void 0;
+function flatten(children, out = []) {
+  if (children === null || children === void 0 || typeof children === "boolean") return out;
+  if (Array.isArray(children)) {
+    for (const child of children) flatten(child, out);
+    return out;
+  }
+  if (isElement(children)) {
+    if (children.type === REACT_FRAGMENT) return flatten(children.props.children, out);
+    out.push(children);
+    return out;
+  }
+  throw new FilloJsxError(
+    "NON_FILLO_CHILD",
+    `Unexpected ${typeof children} child inside <Fillo.Form> \u2014 children define the schema; put text in <Fillo.Paragraph> and layout outside the form`
+  );
 }
-function prefillFromParams(form, params) {
-  const data = {};
-  for (const field of allFields(form)) {
-    const raw = field.kind === "hidden" ? params[field.paramName ?? field.id] ?? field.defaultValue : params[field.id];
-    if (raw === void 0 || raw === "") continue;
-    switch (field.kind) {
-      case "number": {
-        const n = parseDecimal(raw);
-        if (n === null) break;
-        if (field.min !== void 0 && n < field.min) break;
-        if (field.max !== void 0 && n > field.max) break;
-        data[field.id] = n;
-        break;
-      }
-      case "rating": {
-        const n = parseDecimal(raw);
-        if (n !== null && Number.isInteger(n) && n >= 1 && n <= (field.max ?? 5))
-          data[field.id] = n;
-        break;
-      }
-      case "linear_scale": {
-        const n = parseDecimal(raw);
-        const min = field.min ?? 1;
-        const max = field.max ?? 10;
-        if (n !== null && Number.isInteger(n) && n >= min && n <= max) data[field.id] = n;
-        break;
-      }
-      case "checkbox":
-        data[field.id] = raw === "true" || raw === "1" || raw === "yes";
-        break;
-      case "select":
-      case "dropdown": {
-        if (field.options.some((o) => o.id === raw)) data[field.id] = raw;
-        break;
+function classify(el) {
+  const spec = brandOf(el.type);
+  if (spec) return spec;
+  const t = el.type;
+  if (typeof t === "string") {
+    throw new FilloJsxError(
+      "NON_FILLO_CHILD",
+      `<${t}> is layout, and <Fillo.Form> children define the schema only. Put markup outside the form, or compose your own layout with FilloProvider (headless)`
+    );
+  }
+  if (typeof t === "object" && t !== null) {
+    throw new FilloJsxError(
+      "OPAQUE_TYPE",
+      `A child of <Fillo.Form> has an opaque component type (lazy/memo or a server-component boundary). Define the form in a client module ("use client") and pass the form VALUE across boundaries instead`
+    );
+  }
+  const name = typeof t === "function" && t.name ? ` (${t.name})` : "";
+  throw new FilloJsxError(
+    "WRAPPER_COMPONENT",
+    `A plain component${name} is not a Fillo field \u2014 <Fillo.Form> never renders children, so wrappers are invisible to it. For reuse, call a plain function that RETURNS Fillo elements: {contactFields()}`
+  );
+}
+function buildProps(spec, el) {
+  const props = el.props;
+  const allowed = /* @__PURE__ */ new Set([...spec.props, "id", "visibleIf", "children"]);
+  for (const key of Object.keys(props)) {
+    if (props[key] === void 0) continue;
+    if (!allowed.has(key)) {
+      const hint = key === "className" || key === "style" ? `styling lives on <Fillo.Form appearance={\u2026}>, never in the schema` : `schema props for Fillo.${spec.name}: ${[...spec.props].join(", ")}`;
+      throw new FilloJsxError("UNKNOWN_PROP", `Fillo.${spec.name} has no prop "${key}" \u2014 ${hint}`);
+    }
+  }
+  const id = props.id;
+  if (typeof id !== "string" || id.length === 0 || id.length > 128) {
+    throw new FilloJsxError(
+      "MISSING_ID",
+      `Every Fillo.${spec.name} needs a stable string id (1-128 chars) \u2014 ids key responses, logic, piping, and sync; never derive them from position`
+    );
+  }
+  const out = { id, kind: spec.kind };
+  if (spec.optionChildren && props.children !== void 0) {
+    if (props.options !== void 0) {
+      throw new FilloJsxError(
+        "OPTION_PROP_CONFLICT",
+        `Fillo.${spec.name} "${id}" has both an options prop and <Fillo.Option> children \u2014 pick one`
+      );
+    }
+    out.__childOptions = flatten(props.children).map((child) => buildOption(child, spec, id));
+  } else if (spec.textChildren && props.children !== void 0) {
+    const parts = Array.isArray(props.children) ? props.children : [props.children];
+    if (!parts.every((p) => typeof p === "string" || typeof p === "number")) {
+      throw new FilloJsxError(
+        "TEXT_CHILD_REQUIRED",
+        `Fillo.${spec.name} children must be plain text (piping tokens like {{name}} included) \u2014 expressions and elements can't serialize into the schema`
+      );
+    }
+    if (props.text !== void 0) {
+      throw new FilloJsxError(
+        "OPTION_PROP_CONFLICT",
+        `Fillo.${spec.name} "${id}" has both a text prop and children \u2014 pick one`
+      );
+    }
+    out.__childText = parts.join("");
+  } else if (props.children !== void 0) {
+    throw new FilloJsxError(
+      "NON_FILLO_CHILD",
+      `Fillo.${spec.name} takes no children \u2014 its configuration is props-only`
+    );
+  }
+  for (const key of spec.props) {
+    if (key === "options" && out.__childOptions !== void 0) {
+      out.options = out.__childOptions;
+      continue;
+    }
+    if (key === "text" && out.__childText !== void 0) {
+      out.text = out.__childText;
+      continue;
+    }
+    if (props[key] !== void 0) out[key] = props[key];
+  }
+  delete out.__childOptions;
+  delete out.__childText;
+  if (spec.textChildren && out.text === void 0) {
+    throw new FilloJsxError("TEXT_CHILD_REQUIRED", `Fillo.${spec.name} "${id}" has no text`);
+  }
+  if (props.visibleIf !== void 0) {
+    const conditions2 = Array.isArray(props.visibleIf) ? props.visibleIf : [props.visibleIf];
+    out.visibleIf = conditions2;
+  }
+  return out;
+}
+function buildOption(el, parent, parentId) {
+  const spec = classify(el);
+  if (spec.kind !== "__option") {
+    throw new FilloJsxError(
+      "NON_FILLO_CHILD",
+      `Fillo.${parent.name} "${parentId}" children must be <Fillo.Option> elements, found Fillo.${spec.name}`
+    );
+  }
+  const props = el.props;
+  for (const key of Object.keys(props)) {
+    if (props[key] !== void 0 && key !== "id" && key !== "label" && key !== "icon") {
+      throw new FilloJsxError("UNKNOWN_PROP", `Fillo.Option has no prop "${key}" \u2014 it takes id, label, icon`);
+    }
+  }
+  if (typeof props.id !== "string" || props.id.length === 0) {
+    throw new FilloJsxError(
+      "MISSING_ID",
+      `Every <Fillo.Option> in "${parentId}" needs a stable string id \u2014 it's the stored answer value`
+    );
+  }
+  if (typeof props.label !== "string") {
+    throw new FilloJsxError("MISSING_ID", `<Fillo.Option id="${props.id}"> needs a label`);
+  }
+  const option = { id: props.id, label: props.label };
+  if (props.icon !== void 0) option.icon = props.icon;
+  return option;
+}
+function schemaFromJsx(children, meta) {
+  const elements = flatten(children);
+  const pageSpecs = elements.map((el) => ({ el, spec: classify(el) }));
+  const pages = [];
+  const isPage = (s) => s.kind === "__page";
+  if (pageSpecs.some(({ spec }) => isPage(spec))) {
+    if (!pageSpecs.every(({ spec }) => isPage(spec))) {
+      throw new FilloJsxError(
+        "PAGE_MIX",
+        `<Fillo.Form> children must be EITHER all <Fillo.Page> elements or all blocks \u2014 wrap the loose blocks in a page`
+      );
+    }
+    for (const { el } of pageSpecs) {
+      const built = buildProps(PAGE_SPEC, { type: el.type, props: { ...el.props, children: void 0 } });
+      const blocks = flatten(el.props.children).map((child) => {
+        const spec = classify(child);
+        if (isPage(spec) || spec.kind === "__option") {
+          throw new FilloJsxError("PAGE_MIX", `<Fillo.${spec.name}> can't appear inside <Fillo.Page>`);
+        }
+        return buildProps(spec, child);
+      });
+      pages.push({
+        id: built.id,
+        ...built.title !== void 0 ? { title: built.title } : {},
+        blocks
+      });
+    }
+  } else {
+    const blocks = pageSpecs.map(({ el, spec }) => {
+      if (spec.kind === "__option") {
+        throw new FilloJsxError(
+          "NON_FILLO_CHILD",
+          `<Fillo.Option> only makes sense inside a choice field (Select/MultiSelect/Dropdown/Ranking)`
+        );
       }
-      case "multi_select": {
-        const ids = new Set(field.options.map((o) => o.id));
-        const picked = raw.split(",").filter((v) => ids.has(v));
-        if (picked.length > 0) data[field.id] = picked;
-        break;
+      return buildProps(spec, el);
+    });
+    pages.push({ id: "main", blocks });
+  }
+  const seen = /* @__PURE__ */ new Set();
+  for (const page of pages) {
+    for (const block of page.blocks) {
+      if (seen.has(block.id)) {
+        throw new FilloJsxError(
+          "DUPLICATE_ID",
+          `Two blocks share the id "${block.id}" \u2014 ids key responses and must be unique across the whole form`
+        );
       }
-      case "file_upload":
-      case "ranking":
-      case "matrix":
-      case "signature":
-      case "custom":
-        break;
-      // not prefillable from a URL
-      default:
-        data[field.id] = raw;
+      seen.add(block.id);
     }
   }
-  return data;
+  return {
+    version: 1,
+    title: meta.title ?? "",
+    ...meta.description !== void 0 ? { description: meta.description } : {},
+    pages,
+    settings: meta.settings ?? {}
+  };
+}
+function codeFormFromJsx(meta, children) {
+  if (typeof meta.id !== "string" || meta.id.length === 0) {
+    throw new FilloJsxError("MISSING_ID", `<Fillo.Form> needs an id \u2014 it names the form in your workspace`);
+  }
+  const schema = schemaFromJsx(children, {
+    id: meta.id,
+    title: meta.title,
+    description: meta.description,
+    settings: meta.settings
+  });
+  return defineForm({
+    id: meta.id,
+    title: schema.title,
+    description: schema.description,
+    pages: schema.pages,
+    settings: schema.settings,
+    theme: meta.theme
+  });
+}
+
+// src/when.ts
+function when(fieldId) {
+  const cond = (op, value) => Object.freeze(value === void 0 ? { fieldId, op } : { fieldId, op, value });
+  return {
+    eq: (value) => cond("eq", value),
+    neq: (value) => cond("neq", value),
+    contains: (value) => cond("contains", value),
+    gt: (value) => cond("gt", value),
+    lt: (value) => cond("lt", value),
+    answered: () => cond("answered"),
+    notAnswered: () => cond("not_answered")
+  };
 }
 
 // src/piping.ts
@@ -2072,10 +2604,10 @@ function resolveText(text, data, form) {
   if (!text.includes("{{")) return text;
   const fields = allFields(form);
   return text.replace(TOKEN, (_, id) => {
-    const field = fields.find((f) => f.id === id);
+    const field2 = fields.find((f) => f.id === id);
     const value = data[id];
     if (value === null || value === void 0 || value === "") return "";
-    const label = (optionId) => field && "options" in field ? field.options.find((o) => o.id === optionId)?.label ?? optionId : optionId;
+    const label = (optionId) => field2 && "options" in field2 ? field2.options.find((o) => o.id === optionId)?.label ?? optionId : optionId;
     if (Array.isArray(value)) return value.map((v) => label(String(v))).join(", ");
     if (typeof value === "string") return label(value);
     return String(value);
@@ -2096,15 +2628,22 @@ function pipeBlock(block, data, form) {
 export {
   BLOCK_KIND_META,
   CONTENT_KINDS,
+  DEFAULT_STRINGS,
   DRAFT_KINDS,
+  FILLO_DATA_ATTRS,
   FILLO_SCHEMA_VERSION,
   FILLO_SDK_VERSION,
+  FILLO_SLOTS,
   FilloClient,
   FilloError,
+  FilloJsxError,
+  JSX_BLOCK_COMPONENTS,
+  JSX_BLOCK_SPECS,
   PHONE_COUNTRIES,
   Sha1,
   allFields,
   assembleForm,
+  codeFormFromJsx,
   contentHash,
   countryByDialCode,
   countryByIso,
@@ -2119,23 +2658,32 @@ export {
   flagEmoji,
   formatAnswer,
   formatNational,
+  isAutoSubmitBlock,
   isBlockVisible,
   isCodeForm,
   isField,
+  isFilloError,
   isPossiblePhone,
+  needsExplicitSubmit,
   normalizeFormSchema,
   normalizeFormTheme,
   parsePhone,
   pipeBlock,
   prefillFromParams,
   provisionWorkspace,
+  resolveSlotClass,
+  resolveStrings,
   resolveText,
+  schemaFromJsx,
   sha1Base64,
+  shouldAutoSubmit,
+  slotClass,
   syncCodeForm,
   toE164,
   validateField,
   validateFormSchema,
   validateResponse,
   visibleBlocks,
-  visibleFields
+  visibleFields,
+  when
 };