@usefillo/dom 0.2.0

package/dist/index.js

@@ -0,0 +1,920 @@
+// src/index.ts
+import {
+  FilloClient,
+  FilloError,
+  createClient,
+  createFormController,
+  defineForm,
+  isCodeForm,
+  isField,
+  pipeBlock,
+  syncCodeForm
+} from "@usefillo/core";
+var FIELD_INPUT_PREFIX = "fillo-";
+function el(tag, options = {}) {
+  const node = document.createElement(tag);
+  if (options.className) node.className = options.className;
+  if (options.text !== void 0) node.textContent = options.text;
+  for (const [name, value] of Object.entries(options.attrs ?? {})) node.setAttribute(name, value);
+  return node;
+}
+function themeStyle(node, theme) {
+  if (!theme) return;
+  if (theme.primary) node.style.setProperty("--fillo-primary", theme.primary);
+  if (theme.background) node.style.setProperty("--fillo-bg", theme.background);
+  if (theme.text) node.style.setProperty("--fillo-text", theme.text);
+  if (theme.radius) node.style.setProperty("--fillo-radius", theme.radius);
+  if (theme.fontFamily) node.style.setProperty("--fillo-font", theme.fontFamily);
+}
+function inputValue(value) {
+  return typeof value === "string" || typeof value === "number" ? String(value) : "";
+}
+function appendChildren(parent, children) {
+  for (const child of children) {
+    if (child) parent.appendChild(child);
+  }
+  return parent;
+}
+function applyFieldAria(node, field, error) {
+  if (error) node.setAttribute("aria-invalid", "true");
+  if (field.required) node.setAttribute("aria-required", "true");
+  const describedBy = [
+    field.description ? `${FIELD_INPUT_PREFIX}${field.id}-desc` : null,
+    error ? `${FIELD_INPUT_PREFIX}${field.id}-error` : null
+  ].filter(Boolean).join(" ");
+  if (describedBy) node.setAttribute("aria-describedby", describedBy);
+}
+function shell(field, error, child) {
+  const wrap = el("div", {
+    className: `fillo-field fillo-field--${field.kind}${error ? " fillo-field--error" : ""}`,
+    attrs: { "data-field": field.id }
+  });
+  const label = el("label", {
+    className: "fillo-label",
+    text: field.label,
+    attrs: { id: `${FIELD_INPUT_PREFIX}${field.id}-label`, for: `${FIELD_INPUT_PREFIX}${field.id}` }
+  });
+  if (field.required)
+    label.appendChild(el("span", { className: "fillo-required", text: " *", attrs: { "aria-hidden": "true" } }));
+  wrap.appendChild(label);
+  if (field.description)
+    wrap.appendChild(
+      el("p", {
+        className: "fillo-description",
+        text: field.description,
+        attrs: { id: `${FIELD_INPUT_PREFIX}${field.id}-desc` }
+      })
+    );
+  wrap.appendChild(child);
+  if (error)
+    wrap.appendChild(
+      el("p", {
+        className: "fillo-error",
+        text: error,
+        attrs: { role: "alert", id: `${FIELD_INPUT_PREFIX}${field.id}-error` }
+      })
+    );
+  return wrap;
+}
+function textInput(type, context) {
+  const input = el("input", {
+    className: "fillo-input",
+    attrs: { id: `${FIELD_INPUT_PREFIX}${context.field.id}`, type }
+  });
+  input.value = inputValue(context.value);
+  if (context.field.placeholder) input.placeholder = context.field.placeholder;
+  input.addEventListener("input", () => context.setValue(input.value, { render: false }));
+  input.addEventListener("change", () => context.setValue(input.value));
+  applyFieldAria(input, context.field, context.error);
+  return shell(context.field, context.error, input);
+}
+function longText(context) {
+  const textarea = el("textarea", {
+    className: "fillo-input fillo-textarea",
+    attrs: { id: `${FIELD_INPUT_PREFIX}${context.field.id}`, rows: "4" }
+  });
+  textarea.value = typeof context.value === "string" ? context.value : "";
+  if (context.field.placeholder) textarea.placeholder = context.field.placeholder;
+  textarea.addEventListener("input", () => context.setValue(textarea.value, { render: false }));
+  textarea.addEventListener("change", () => context.setValue(textarea.value));
+  applyFieldAria(textarea, context.field, context.error);
+  return shell(context.field, context.error, textarea);
+}
+function singleChoice(context) {
+  const field = context.field;
+  const options = displayOptions(field);
+  const value = typeof context.value === "string" ? context.value : "";
+  const isOther = value !== "" && !field.options.some((option) => option.id === value);
+  const wrap = el("div", {
+    className: "fillo-options",
+    attrs: { role: "radiogroup", "aria-labelledby": `${FIELD_INPUT_PREFIX}${field.id}-label` }
+  });
+  applyFieldAria(wrap, field, context.error);
+  for (const option of options) {
+    const label = el("label", {
+      className: `fillo-option${value === option.id ? " fillo-option--selected" : ""}`,
+      attrs: { "data-option": option.id }
+    });
+    const input = el("input", { className: "fillo-option-input", attrs: { type: "radio", name: `fillo-${field.id}` } });
+    input.checked = value === option.id;
+    input.addEventListener("change", () => context.setValue(option.id));
+    appendChildren(label, [input, el("span", { className: "fillo-option-label", text: option.label })]);
+    wrap.appendChild(label);
+  }
+  if (field.allowOther) {
+    const label = el("label", { className: `fillo-option${isOther ? " fillo-option--selected" : ""}` });
+    const input = el("input", { className: "fillo-option-input", attrs: { type: "radio", name: `fillo-${field.id}` } });
+    input.checked = isOther;
+    input.addEventListener("change", () => context.setValue("", { render: true }));
+    label.appendChild(input);
+    label.appendChild(el("span", { className: "fillo-option-label", text: "Other" }));
+    if (isOther) {
+      const other = el("input", { className: "fillo-input fillo-other-input", attrs: { type: "text" } });
+      other.value = value;
+      other.placeholder = "Your answer";
+      other.addEventListener("input", () => context.setValue(other.value, { render: false }));
+      other.addEventListener("change", () => context.setValue(other.value));
+      label.appendChild(other);
+    }
+    wrap.appendChild(label);
+  }
+  return shell(field, context.error, wrap);
+}
+function multiChoice(context) {
+  const field = context.field;
+  const options = displayOptions(field);
+  const selected = Array.isArray(context.value) ? context.value : [];
+  const knownIds = new Set(field.options.map((option) => option.id));
+  const otherText = selected.find((value) => !knownIds.has(value));
+  const wrap = el("div", {
+    className: "fillo-options",
+    attrs: { role: "group", "aria-labelledby": `${FIELD_INPUT_PREFIX}${field.id}-label` }
+  });
+  applyFieldAria(wrap, field, context.error);
+  const setSelected = (next) => context.setValue(next);
+  for (const option of options) {
+    const label = el("label", {
+      className: `fillo-option${selected.includes(option.id) ? " fillo-option--selected" : ""}`,
+      attrs: { "data-option": option.id }
+    });
+    const input = el("input", { className: "fillo-option-input", attrs: { type: "checkbox" } });
+    input.checked = selected.includes(option.id);
+    input.addEventListener("change", () => {
+      setSelected(input.checked ? [...selected, option.id] : selected.filter((id) => id !== option.id));
+    });
+    appendChildren(label, [input, el("span", { className: "fillo-option-label", text: option.label })]);
+    wrap.appendChild(label);
+  }
+  if (field.allowOther) {
+    const active = otherText !== void 0;
+    const label = el("label", { className: `fillo-option${active ? " fillo-option--selected" : ""}` });
+    const input = el("input", { className: "fillo-option-input", attrs: { type: "checkbox" } });
+    input.checked = active;
+    input.addEventListener("change", () => {
+      const rest = selected.filter((value) => knownIds.has(value));
+      setSelected(input.checked ? [...rest, otherText ?? ""] : rest);
+    });
+    appendChildren(label, [input, el("span", { className: "fillo-option-label", text: "Other" })]);
+    if (active) {
+      const other = el("input", { className: "fillo-input fillo-other-input", attrs: { type: "text" } });
+      other.value = otherText ?? "";
+      other.placeholder = "Your answer";
+      other.addEventListener("input", () => {
+        const rest = selected.filter((value) => knownIds.has(value));
+        context.setValue(other.value ? [...rest, other.value] : rest, { render: false });
+      });
+      other.addEventListener("change", () => {
+        const rest = selected.filter((value) => knownIds.has(value));
+        context.setValue(other.value ? [...rest, other.value] : rest);
+      });
+      label.appendChild(other);
+    }
+    wrap.appendChild(label);
+  }
+  return shell(field, context.error, wrap);
+}
+var OTHER_VALUE = "__fw_other__";
+function dropdown(context) {
+  const field = context.field;
+  const value = typeof context.value === "string" ? context.value : "";
+  const isOther = value !== "" && !field.options.some((option) => option.id === value);
+  const wrap = el("div");
+  const select = el("select", {
+    className: "fillo-input fillo-select",
+    attrs: { id: `${FIELD_INPUT_PREFIX}${field.id}` }
+  });
+  select.appendChild(el("option", { text: field.placeholder ?? "Choose...", attrs: { value: "" } }));
+  for (const option of displayOptions(field)) {
+    select.appendChild(el("option", { text: option.label, attrs: { value: option.id } }));
+  }
+  if (field.allowOther) select.appendChild(el("option", { text: "Other...", attrs: { value: OTHER_VALUE } }));
+  select.value = isOther ? OTHER_VALUE : value;
+  select.addEventListener("change", () => {
+    context.setValue(select.value === OTHER_VALUE ? "" : select.value || null);
+  });
+  applyFieldAria(select, field, context.error);
+  wrap.appendChild(select);
+  if (isOther) {
+    const other = el("input", {
+      className: "fillo-input fillo-other-input fillo-other-input--block",
+      attrs: { type: "text" }
+    });
+    other.value = value;
+    other.placeholder = "Your answer";
+    other.addEventListener("input", () => context.setValue(other.value, { render: false }));
+    other.addEventListener("change", () => context.setValue(other.value));
+    wrap.appendChild(other);
+  }
+  return shell(field, context.error, wrap);
+}
+function checkbox(context) {
+  const wrap = el("div", {
+    className: `fillo-field fillo-field--checkbox${context.error ? " fillo-field--error" : ""}`,
+    attrs: { "data-field": context.field.id }
+  });
+  const label = el("label", { className: "fillo-option" });
+  const input = el("input", {
+    className: "fillo-option-input",
+    attrs: { id: `${FIELD_INPUT_PREFIX}${context.field.id}`, type: "checkbox" }
+  });
+  input.checked = context.value === true;
+  input.addEventListener("change", () => context.setValue(input.checked));
+  applyFieldAria(input, context.field, context.error);
+  const labelText = el("span", { className: "fillo-option-label", text: context.field.label });
+  if (context.field.required)
+    labelText.appendChild(el("span", { className: "fillo-required", text: " *", attrs: { "aria-hidden": "true" } }));
+  appendChildren(label, [input, labelText]);
+  wrap.appendChild(label);
+  if (context.field.description)
+    wrap.appendChild(
+      el("p", {
+        className: "fillo-description",
+        text: context.field.description,
+        attrs: { id: `${FIELD_INPUT_PREFIX}${context.field.id}-desc` }
+      })
+    );
+  if (context.error)
+    wrap.appendChild(
+      el("p", {
+        className: "fillo-error",
+        text: context.error,
+        attrs: { role: "alert", id: `${FIELD_INPUT_PREFIX}${context.field.id}-error` }
+      })
+    );
+  return wrap;
+}
+function rating(context) {
+  if (context.field.kind !== "rating") return el("div");
+  const max = typeof context.field.max === "number" ? context.field.max : 5;
+  const current = typeof context.value === "number" ? context.value : 0;
+  const wrap = el("div", { className: "fillo-rating", attrs: { role: "radiogroup", "aria-label": context.field.label } });
+  applyFieldAria(wrap, context.field, context.error);
+  for (let n = 1; n <= max; n++) {
+    const button = el("button", {
+      className: `fillo-star${n <= current ? " fillo-star--active" : ""}`,
+      text: "*",
+      attrs: { type: "button", "aria-label": `${n} of ${max}`, "aria-pressed": String(n === current) }
+    });
+    button.addEventListener("click", () => context.setValue(n === current ? null : n));
+    wrap.appendChild(button);
+  }
+  return shell(context.field, context.error, wrap);
+}
+function linearScale(context) {
+  if (context.field.kind !== "linear_scale") return el("div");
+  const min = typeof context.field.min === "number" ? context.field.min : 1;
+  const max = typeof context.field.max === "number" ? context.field.max : 10;
+  const wrap = el("div");
+  const steps = el("div", { className: "fillo-scale", attrs: { role: "radiogroup", "aria-label": context.field.label } });
+  applyFieldAria(steps, context.field, context.error);
+  for (let n = min; n <= max; n++) {
+    const button = el("button", {
+      className: `fillo-scale-step${context.value === n ? " fillo-scale-step--active" : ""}`,
+      text: String(n),
+      attrs: { type: "button", "aria-pressed": String(context.value === n) }
+    });
+    button.addEventListener("click", () => context.setValue(context.value === n ? null : n));
+    steps.appendChild(button);
+  }
+  wrap.appendChild(steps);
+  if ("minLabel" in context.field || "maxLabel" in context.field) {
+    appendChildren(wrap, [
+      appendChildren(el("div", { className: "fillo-scale-labels" }), [
+        el("span", { text: String(context.field.minLabel ?? "") }),
+        el("span", { text: String(context.field.maxLabel ?? "") })
+      ])
+    ]);
+  }
+  return shell(context.field, context.error, wrap);
+}
+function ranking(context) {
+  const field = context.field;
+  if (field.kind !== "ranking") return null;
+  const answered = Array.isArray(context.value) ? context.value : [];
+  const order = [
+    ...answered.filter((id) => field.options.some((option) => option.id === id)),
+    ...field.options.map((option) => option.id).filter((id) => !answered.includes(id))
+  ];
+  const list = el("ol", { className: "fillo-ranking" });
+  for (const [index, id] of order.entries()) {
+    const option = field.options.find((item2) => item2.id === id);
+    if (!option) continue;
+    const item = el("li", { className: "fillo-ranking-item" });
+    const controls = el("span", { className: "fillo-ranking-controls" });
+    const move = (delta) => {
+      const target = index + delta;
+      if (target < 0 || target >= order.length) return;
+      const next = [...order];
+      [next[index], next[target]] = [next[target], next[index]];
+      context.setValue(next);
+    };
+    const up = el("button", { className: "fillo-ranking-move", text: "Up", attrs: { type: "button" } });
+    up.toggleAttribute("disabled", index === 0);
+    up.addEventListener("click", () => move(-1));
+    const down = el("button", { className: "fillo-ranking-move", text: "Down", attrs: { type: "button" } });
+    down.toggleAttribute("disabled", index === order.length - 1);
+    down.addEventListener("click", () => move(1));
+    appendChildren(controls, [up, down]);
+    appendChildren(item, [
+      el("span", { className: "fillo-ranking-index", text: String(index + 1) }),
+      el("span", { className: "fillo-ranking-label", text: option.label }),
+      controls
+    ]);
+    list.appendChild(item);
+  }
+  return shell(context.field, context.error, list);
+}
+function matrix(context) {
+  const field = context.field;
+  if (field.kind !== "matrix") return null;
+  const answers = context.value && typeof context.value === "object" && !Array.isArray(context.value) ? context.value : {};
+  const table = el("table", { className: "fillo-matrix" });
+  const thead = document.createElement("thead");
+  const headRow = document.createElement("tr");
+  headRow.appendChild(document.createElement("th"));
+  for (const col of field.columns) headRow.appendChild(el("th", { text: col.label, attrs: { scope: "col" } }));
+  thead.appendChild(headRow);
+  table.appendChild(thead);
+  const tbody = document.createElement("tbody");
+  for (const row of field.rows) {
+    const tr = document.createElement("tr");
+    tr.appendChild(el("th", { text: row.label, attrs: { scope: "row" } }));
+    for (const col of field.columns) {
+      const td = document.createElement("td");
+      const input = el("input", {
+        className: "fillo-option-input",
+        attrs: { type: "radio", name: `fillo-${field.id}-${row.id}`, "aria-label": `${row.label}: ${col.label}` }
+      });
+      input.checked = answers[row.id] === col.id;
+      input.addEventListener("change", () => context.setValue({ ...answers, [row.id]: col.id }));
+      td.appendChild(input);
+      tr.appendChild(td);
+    }
+    tbody.appendChild(tr);
+  }
+  table.appendChild(tbody);
+  return shell(context.field, context.error, appendChildren(el("div", { className: "fillo-matrix-wrap" }), [table]));
+}
+function signature(context) {
+  const wrap = el("div", { className: "fillo-signature" });
+  const canvas = el("canvas", {
+    className: "fillo-signature-canvas",
+    attrs: { id: `${FIELD_INPUT_PREFIX}${context.field.id}` }
+  });
+  applyFieldAria(canvas, context.field, context.error);
+  const clear = el("button", {
+    className: "fillo-signature-clear",
+    text: "Clear",
+    attrs: { type: "button" }
+  });
+  const hint = el("div", { className: "fillo-signature-hint", text: "Sign here" });
+  canvas.width = 720;
+  canvas.height = 220;
+  const ctx = canvas.getContext("2d");
+  let drawing = false;
+  let hasInk = typeof context.value === "string" && context.value.startsWith("data:image/");
+  if (hasInk && ctx) {
+    const image = new Image();
+    image.onload = () => ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+    image.src = String(context.value);
+    hint.style.display = "none";
+  }
+  const point = (event) => {
+    const rect = canvas.getBoundingClientRect();
+    return {
+      x: (event.clientX - rect.left) / rect.width * canvas.width,
+      y: (event.clientY - rect.top) / rect.height * canvas.height
+    };
+  };
+  canvas.addEventListener("pointerdown", (event) => {
+    if (!ctx) return;
+    drawing = true;
+    hasInk = true;
+    hint.style.display = "none";
+    canvas.setPointerCapture(event.pointerId);
+    const p = point(event);
+    ctx.beginPath();
+    ctx.moveTo(p.x, p.y);
+  });
+  canvas.addEventListener("pointermove", (event) => {
+    if (!drawing || !ctx) return;
+    const p = point(event);
+    ctx.lineWidth = 2.4;
+    ctx.lineCap = "round";
+    ctx.strokeStyle = getComputedStyle(canvas).color || "#18181b";
+    ctx.lineTo(p.x, p.y);
+    ctx.stroke();
+  });
+  const finish = () => {
+    if (!drawing) return;
+    drawing = false;
+    if (hasInk) context.setValue(canvas.toDataURL("image/png"));
+  };
+  canvas.addEventListener("pointerup", finish);
+  canvas.addEventListener("pointercancel", finish);
+  clear.addEventListener("click", () => {
+    ctx?.clearRect(0, 0, canvas.width, canvas.height);
+    hasInk = false;
+    hint.style.display = "";
+    context.setValue(null);
+  });
+  appendChildren(wrap, [canvas, hint, clear]);
+  return shell(context.field, context.error, wrap);
+}
+function fileUpload(context) {
+  const field = context.field;
+  if (field.kind !== "file_upload") return null;
+  const input = el("input", {
+    className: "fillo-input",
+    attrs: { id: `${FIELD_INPUT_PREFIX}${field.id}`, type: "file" }
+  });
+  if ((field.maxFiles ?? 1) > 1) input.multiple = true;
+  if (field.accept?.length) input.accept = field.accept.join(",");
+  applyFieldAria(input, field, context.error);
+  input.addEventListener("change", () => {
+    const files = Array.from(input.files ?? []);
+    void context.uploadFiles?.(field, files);
+  });
+  const wrap = el("div");
+  wrap.appendChild(input);
+  const progress = context.uploadProgress?.get(field.id);
+  if (progress !== void 0) {
+    const meter = el("div", { className: "fillo-upload-progress" });
+    meter.appendChild(el("div", { className: "fillo-upload-progress-fill" }));
+    meter.firstElementChild?.style.setProperty("width", `${Math.round(progress * 100)}%`);
+    wrap.appendChild(meter);
+  }
+  const value = Array.isArray(context.value) ? context.value : [];
+  for (const file of value) {
+    wrap.appendChild(el("p", { className: "fillo-description", text: `${file.name} (${Math.round(file.size / 1024)} KB)` }));
+  }
+  return shell(field, context.error, wrap);
+}
+function displayOptions(field) {
+  if (!field.shuffleOptions) return field.options;
+  const options = [...field.options];
+  for (let i = options.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [options[i], options[j]] = [options[j], options[i]];
+  }
+  return options;
+}
+var DEFAULT_COMPONENTS = {
+  short_text: (ctx) => textInput("text", ctx),
+  email: (ctx) => textInput("email", ctx),
+  url: (ctx) => textInput("url", ctx),
+  phone: (ctx) => textInput("tel", ctx),
+  number: (ctx) => textInput("number", ctx),
+  date: (ctx) => textInput("date", ctx),
+  long_text: longText,
+  select: singleChoice,
+  multi_select: multiChoice,
+  dropdown,
+  checkbox,
+  rating,
+  linear_scale: linearScale,
+  ranking,
+  matrix,
+  signature,
+  file_upload: fileUpload
+};
+function defaultFieldRenderer(context) {
+  if (context.field.kind === "hidden") return null;
+  if (context.field.kind === "custom") return null;
+  const renderer = DEFAULT_COMPONENTS[context.field.kind];
+  return renderer ? renderer(context) : null;
+}
+var DomFormController = class {
+  constructor(target, options) {
+    this.target = target;
+    this.options = options;
+    this.element.className = "fillo-dom-root";
+    target.replaceChildren(this.element);
+    void this.resolve();
+  }
+  target;
+  options;
+  element = el("div");
+  schema = null;
+  theme;
+  formId;
+  closed = false;
+  // The renderer owns its lifecycle phase; all field state, validation,
+  // conditional logic, paging, spam signals, funnel tracking, and submission
+  // live in the shared core engine.
+  phase = "loading";
+  engine = null;
+  destroyed = false;
+  renderQueued = false;
+  hpValue = "";
+  uploadProgress = /* @__PURE__ */ new Map();
+  get status() {
+    if (this.phase === "ready") return this.engine?.getState().status ?? "idle";
+    return this.phase;
+  }
+  get data() {
+    return this.engine?.getState().data ?? this.options.initialData ?? {};
+  }
+  get form() {
+    return this.schema;
+  }
+  get mutableData() {
+    return this.engine?.getState().data ?? this.options.initialData ?? {};
+  }
+  api() {
+    const form = this.schema ?? { version: 1, title: "", pages: [], settings: {} };
+    const state = this.engine?.getState();
+    const pageCount = state?.pageCount ?? form.pages.length;
+    return {
+      form,
+      formId: this.formId,
+      client: this.options.client,
+      data: state?.data ?? this.mutableData,
+      errors: state?.errors ?? {},
+      status: this.status,
+      pageIndex: state?.pageIndex ?? 0,
+      pageCount,
+      page: state?.page ?? form.pages[0] ?? { id: "empty", blocks: [] },
+      blocks: state?.blocks ?? [],
+      isFirstPage: state?.isFirstPage ?? true,
+      isLastPage: state?.isLastPage ?? pageCount <= 1,
+      setValue: (fieldId, value, opts) => this.setValueInternal(fieldId, value, opts),
+      next: () => this.next(),
+      back: () => this.back(),
+      submit: () => this.submit()
+    };
+  }
+  async resolve() {
+    try {
+      const codeForm = isCodeForm(this.options.form) ? this.options.form : null;
+      if (codeForm) {
+        this.setSchema(codeForm.schema, this.options.theme ?? codeForm.theme, this.options.formId);
+        if (this.options.client?.key) {
+          syncCodeForm(this.options.client, codeForm).then(({ formId }) => {
+            this.formId = formId;
+            this.engine?.setContext({ formId });
+          }).catch((error) => this.handleError(toFilloError(error)));
+        }
+        return;
+      }
+      const schema = this.options.form && !isCodeForm(this.options.form) ? this.options.form : null;
+      if (schema) {
+        this.setSchema(schema, this.options.theme, this.options.formId);
+        return;
+      }
+      if (!this.options.client || !this.options.formId) {
+        throw new FilloError("Provide either `form`, or `client` with `formId`.", 0);
+      }
+      this.render();
+      const published = await this.options.client.getForm(this.options.formId);
+      this.closed = Boolean(published.closed);
+      this.setSchema(published.schema, this.options.theme ?? published.theme ?? void 0, published.id);
+    } catch (error) {
+      this.handleError(toFilloError(error));
+    }
+  }
+  /** Bind the resolved schema, create the engine, and render. */
+  setSchema(schema, theme, formId) {
+    this.schema = schema;
+    this.theme = theme;
+    this.formId = formId;
+    this.engine = createFormController({
+      form: schema,
+      formId,
+      client: this.options.client,
+      initialData: this.options.initialData,
+      onChange: this.options.onChange,
+      onSubmitted: this.options.onSubmitted,
+      onSubmit: this.options.onSubmit,
+      getHoneypot: () => this.hpValue
+    });
+    this.phase = this.closed ? "closed" : "ready";
+    this.render();
+  }
+  setValue(fieldId, value) {
+    this.setValueInternal(fieldId, value);
+  }
+  setValueInternal(fieldId, value, opts = {}) {
+    this.engine?.setValue(fieldId, value);
+    if (opts.render !== false) this.queueRender();
+  }
+  next() {
+    if (!this.engine) return;
+    this.engine.next();
+    this.render();
+  }
+  back() {
+    if (!this.engine) return;
+    this.engine.back();
+    this.render();
+  }
+  async submit() {
+    if (!this.engine || this.phase !== "ready") return;
+    const pending = this.engine.submit();
+    this.render();
+    try {
+      await pending;
+    } catch (error) {
+      this.handleError(toFilloError(error));
+      return;
+    }
+    this.render();
+  }
+  async uploadFiles(field, files) {
+    if (!this.schema) return;
+    const maxFiles = field.maxFiles ?? 1;
+    const selected = files.slice(0, maxFiles);
+    this.uploadProgress.set(field.id, 0);
+    this.queueRender();
+    try {
+      const values = [];
+      for (const [index, file] of selected.entries()) {
+        if (this.options.client && this.formId) {
+          values.push(
+            await this.options.client.uploadFile(this.formId, file, {
+              fieldId: field.id,
+              onProgress: (progress) => {
+                this.uploadProgress.set(field.id, (index + progress.fraction) / selected.length);
+                this.queueRender();
+              }
+            })
+          );
+        } else {
+          values.push({
+            fileId: `local:${file.name}:${file.size}`,
+            name: file.name,
+            size: file.size,
+            mime: file.type || "application/octet-stream"
+          });
+        }
+      }
+      this.uploadProgress.delete(field.id);
+      this.setValueInternal(field.id, values);
+    } catch (error) {
+      this.uploadProgress.delete(field.id);
+      this.handleError(toFilloError(error));
+    }
+  }
+  destroy() {
+    this.destroyed = true;
+    this.target.replaceChildren();
+  }
+  handleError(error) {
+    this.phase = "error";
+    this.options.onError?.(error);
+    this.render(error);
+  }
+  queueRender() {
+    if (this.renderQueued || this.destroyed) return;
+    this.renderQueued = true;
+    queueMicrotask(() => {
+      this.renderQueued = false;
+      this.render();
+    });
+  }
+  render(error) {
+    if (this.destroyed) return;
+    this.element.replaceChildren();
+    if (this.phase === "loading") {
+      const loading = el("div", { className: `fillo-form fillo-form--loading ${this.options.className ?? ""}`, attrs: { "aria-busy": "true" } });
+      themeStyle(loading, this.theme);
+      appendChildren(loading, [
+        el("div", { className: "fillo-skeleton" }),
+        el("div", { className: "fillo-skeleton" }),
+        el("div", { className: "fillo-skeleton fillo-skeleton--short" })
+      ]);
+      this.element.appendChild(loading);
+      return;
+    }
+    if (this.phase === "error" && error) {
+      this.element.appendChild(this.options.renderError?.(error) ?? el("div", { className: "fillo-form fillo-form--error", text: error.message }));
+      return;
+    }
+    if (this.phase === "closed") {
+      const closed = el("div", { className: `fillo-form fillo-form--closed ${this.options.className ?? ""}` });
+      themeStyle(closed, this.theme);
+      closed.appendChild(el("p", { className: "fillo-closed", text: "This form is no longer accepting responses." }));
+      this.element.appendChild(closed);
+      return;
+    }
+    if (!this.schema) return;
+    if (this.engine?.getState().status === "submitted") {
+      const api = this.api();
+      const success = this.options.renderSuccess?.(api) ?? defaultSuccess(this.schema);
+      themeStyle(success, this.theme);
+      this.element.appendChild(success);
+      return;
+    }
+    this.element.appendChild(this.renderForm());
+  }
+  renderForm() {
+    const api = this.api();
+    const form = el("form", { className: `fillo-form ${this.options.className ?? ""}` });
+    themeStyle(form, this.theme);
+    form.noValidate = true;
+    const advance = () => {
+      if (api.isLastPage) void this.submit();
+      else this.next();
+    };
+    form.addEventListener("submit", (event) => {
+      event.preventDefault();
+      advance();
+    });
+    if (api.pageCount > 1 && this.schema?.settings.showProgress !== false) {
+      const progress = el("div", {
+        className: "fillo-progress-track",
+        attrs: {
+          role: "progressbar",
+          "aria-valuemin": "0",
+          "aria-valuemax": String(api.pageCount),
+          "aria-valuenow": String(api.pageIndex + 1)
+        }
+      });
+      progress.appendChild(el("div", { className: "fillo-progress-fill" }));
+      progress.firstElementChild?.style.setProperty(
+        "width",
+        `${(api.pageIndex + 1) / api.pageCount * 100}%`
+      );
+      form.appendChild(progress);
+    }
+    if (api.pageIndex === 0) {
+      const header = el("header", { className: "fillo-header" });
+      header.appendChild(el("h1", { className: "fillo-title", text: api.form.title }));
+      if (api.form.description) header.appendChild(el("p", { className: "fillo-form-description", text: api.form.description }));
+      form.appendChild(header);
+    } else if (api.page.title) {
+      form.appendChild(el("h2", { className: "fillo-page-title", text: api.page.title }));
+    }
+    const blocks = el("div", { className: "fillo-blocks" });
+    for (const block of api.blocks) {
+      const rendered = this.renderBlock(pipeBlock(block, this.mutableData, api.form), api);
+      if (rendered) blocks.appendChild(rendered);
+    }
+    form.appendChild(blocks);
+    const hp = el("input", { className: "fillo-hp", attrs: { type: "text", name: "fw_hp_field", tabindex: "-1", autocomplete: "off", "aria-hidden": "true" } });
+    hp.addEventListener("input", () => {
+      this.hpValue = hp.value;
+    });
+    form.appendChild(hp);
+    const footer = el("footer", { className: "fillo-footer" });
+    if (api.pageCount > 1 && !api.isFirstPage) {
+      const back = el("button", { className: "fillo-button fillo-button--ghost", text: "Back", attrs: { type: "button" } });
+      back.addEventListener("click", () => this.back());
+      footer.appendChild(back);
+    }
+    const submit = el("button", {
+      className: "fillo-button fillo-button--primary",
+      text: api.status === "submitting" ? "Submitting..." : api.isLastPage ? api.form.settings.submitLabel ?? "Submit" : "Next",
+      attrs: { type: "submit" }
+    });
+    submit.toggleAttribute("disabled", api.status === "submitting" || this.uploadProgress.size > 0);
+    submit.addEventListener("click", (event) => {
+      event.preventDefault();
+      advance();
+    });
+    footer.appendChild(submit);
+    form.appendChild(footer);
+    return form;
+  }
+  renderBlock(block, api) {
+    if (!isField(block)) return renderContent(block);
+    const setValue = (value, options) => this.setValueInternal(block.id, value, options);
+    const context = {
+      field: block,
+      value: api.data[block.id],
+      error: api.errors[block.id],
+      api,
+      setValue,
+      uploadFiles: (field, files) => this.uploadFiles(field, files),
+      uploadProgress: this.uploadProgress
+    };
+    const renderer = block.kind === "custom" ? this.options.customComponents?.[block.component] ?? this.options.components?.custom : this.options.components?.[block.kind] ?? defaultFieldRenderer;
+    return renderer?.(context) ?? null;
+  }
+};
+function renderContent(block) {
+  switch (block.kind) {
+    case "heading":
+      return el("h3", { className: "fillo-heading", text: block.text });
+    case "paragraph":
+      return el("p", { className: "fillo-paragraph", text: block.text });
+    case "divider":
+      return el("hr", { className: "fillo-divider" });
+  }
+  return el("div");
+}
+function defaultSuccess(schema) {
+  const success = el("div", { className: "fillo-form fillo-form--success" });
+  const inner = el("div", { className: "fillo-success" });
+  appendChildren(inner, [
+    el("div", { className: "fillo-success-mark", text: "\u2713", attrs: { "aria-hidden": "true" } }),
+    el("h2", { className: "fillo-success-title", text: schema.settings.successTitle ?? "Thanks!" }),
+    el("p", { className: "fillo-success-message", text: schema.settings.successMessage ?? "Your response has been recorded." })
+  ]);
+  success.appendChild(inner);
+  return success;
+}
+function toFilloError(error) {
+  if (error instanceof FilloError) return error;
+  return new FilloError(error instanceof Error ? error.message : String(error), 0);
+}
+function renderForm(target, options) {
+  const element = typeof target === "string" ? document.querySelector(target) : target;
+  if (!element) throw new FilloError(`Fillo mount target not found: ${String(target)}`, 0);
+  return new DomFormController(element, { ...options, initialData: options.initialData ?? {} });
+}
+function createFormElement(options) {
+  const host = el("div");
+  renderForm(host, options);
+  return host;
+}
+var FilloFormElement = class extends HTMLElement {
+  instance = null;
+  assignedForm;
+  assignedClient;
+  assignedTheme;
+  assignedInitialData;
+  static get observedAttributes() {
+    return ["base-url", "publishable-key", "form-id"];
+  }
+  connectedCallback() {
+    this.mount();
+  }
+  disconnectedCallback() {
+    this.instance?.destroy();
+    this.instance = null;
+  }
+  attributeChangedCallback() {
+    if (this.isConnected) this.mount();
+  }
+  set form(value) {
+    this.assignedForm = value;
+    if (this.isConnected) this.mount();
+  }
+  get form() {
+    return this.assignedForm;
+  }
+  set client(value) {
+    this.assignedClient = value;
+    if (this.isConnected) this.mount();
+  }
+  set theme(value) {
+    this.assignedTheme = value;
+    if (this.isConnected) this.mount();
+  }
+  set initialData(value) {
+    this.assignedInitialData = value;
+    if (this.isConnected) this.mount();
+  }
+  mount() {
+    this.instance?.destroy();
+    const baseUrl = this.getAttribute("base-url");
+    const key = this.getAttribute("publishable-key") ?? void 0;
+    const formId = this.getAttribute("form-id") ?? void 0;
+    const client = this.assignedClient ?? (baseUrl ? createClient({ baseUrl, key }) : void 0);
+    this.instance = renderForm(this, {
+      form: this.assignedForm,
+      client,
+      formId,
+      theme: this.assignedTheme,
+      initialData: this.assignedInitialData,
+      onChange: (data) => this.dispatchEvent(new CustomEvent("fillo-change", { detail: { data } })),
+      onSubmitted: (responseId, data) => this.dispatchEvent(new CustomEvent("fillo-submit", { detail: { responseId, data } })),
+      onError: (error) => this.dispatchEvent(new CustomEvent("fillo-error", { detail: { error } }))
+    });
+  }
+};
+function registerFilloElement(name = "fillo-form") {
+  if (!customElements.get(name)) customElements.define(name, FilloFormElement);
+}
+export {
+  FilloClient,
+  FilloError,
+  FilloFormElement,
+  createClient,
+  createFormController,
+  createFormElement,
+  defineForm,
+  registerFilloElement,
+  renderForm
+};