formlift 0.1.0 → 0.2.0

package/dist/react/index.js

@@ -1,30 +1,29 @@
 import {
   ELEMENT_TOOLS,
-  NO_FILTER,
   boxStyle,
-  choicesOf,
+  builtinFilters,
   deletePage,
   detectDocument,
   duplicate,
   duplicateElement,
+  filterQuestions,
   fitInPage,
   fitTextWidth,
   insertBlankPage,
-  matches,
   moveBy,
   movePage,
   newElement,
   newField,
-  pickedOf,
   reorder,
   replaceLine,
   resizeBy,
+  resolveFilters,
   snap,
   toLines,
   toPage,
   toQuestions,
   withField
-} from "../chunk-BQAVPA7Q.js";
+} from "../chunk-NUKLGHKS.js";
 import {
   FIELD_TYPES,
   FONTS,
@@ -56,14 +55,10 @@ import {
   Undo2,
   Wand2
 } from "lucide-react";
-import {
-  useCallback as useCallback2,
-  useEffect as useEffect3,
-  useImperativeHandle,
-  useMemo,
-  useRef as useRef4,
-  useState as useState7
-} from "react";
+import { useEffect as useEffect5, useImperativeHandle, useRef as useRef6, useState as useState9 } from "react";
+
+// src/react/ui/slots.tsx
+import { createContext, useContext } from "react";
 
 // src/react/ui/Button.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -103,10 +98,147 @@ function Button({
   );
 }
 
+// src/react/ui/Checkbox.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Checkbox({
+  label,
+  className = "",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx2(
+    "input",
+    {
+      type: "checkbox",
+      "aria-label": label,
+      className: `h-[18px] w-[18px] flex-none cursor-pointer accent-primary ${className}`,
+      ...rest
+    }
+  );
+}
+
+// src/react/ui/Chip.tsx
+import { X } from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function Chip({
+  label,
+  count,
+  active,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": !!active,
+      onClick,
+      className: `inline-flex cursor-pointer items-center gap-1.5 rounded-full border px-3 py-1 text-[12.5px] whitespace-nowrap transition-colors ${active ? "border-primary bg-primary-tint font-semibold text-primary" : "border-line-strong bg-white text-ink-2 hover:border-faint hover:bg-surface"}`,
+      children: [
+        label,
+        count != null && /* @__PURE__ */ jsx3(
+          "span",
+          {
+            className: `rounded-full px-1.5 text-[11px] font-semibold ${active ? "bg-primary text-white" : "bg-hover text-muted"}`,
+            children: count
+          }
+        )
+      ]
+    }
+  );
+}
+function ChipGroup({
+  title,
+  options,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs2("div", { role: "group", "aria-label": title, className: "flex flex-wrap items-center gap-1.5", children: [
+    title && /* @__PURE__ */ jsx3("span", { className: "mr-1 min-w-28 text-[11.5px] max-sm:basis-full font-semibold tracking-wide text-muted uppercase", children: title }),
+    options.map((o) => /* @__PURE__ */ jsx3(
+      Chip,
+      {
+        label: o.label,
+        count: o.count,
+        active: value === o.value,
+        onClick: () => onChange(value === o.value ? null : o.value)
+      },
+      o.value
+    ))
+  ] });
+}
+function RemovableChip({ label, onRemove }) {
+  return /* @__PURE__ */ jsxs2("span", { className: "inline-flex items-center gap-1 rounded-full bg-primary-tint py-0.5 pr-1 pl-2.5 text-[12px] font-medium text-primary", children: [
+    label,
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Remove ${label}`,
+        onClick: onRemove,
+        className: "inline-flex h-4.5 w-4.5 cursor-pointer items-center justify-center rounded-full hover:bg-primary hover:text-white",
+        children: /* @__PURE__ */ jsx3(X, { size: 12 })
+      }
+    )
+  ] });
+}
+
+// src/react/ui/FormField.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var inputClass = "w-full rounded-md border border-line-strong bg-white px-3 py-2 text-[13.5px] outline-none focus:border-primary";
+function FormField({
+  label,
+  required,
+  error,
+  children
+}) {
+  return /* @__PURE__ */ jsxs3("label", { className: "block text-[13.5px]", children: [
+    /* @__PURE__ */ jsxs3("span", { className: "mb-1 block font-semibold", children: [
+      label,
+      " ",
+      required && /* @__PURE__ */ jsx4("span", { className: "text-danger", children: "*" })
+    ] }),
+    children,
+    error && /* @__PURE__ */ jsx4("small", { className: "text-danger", children: error })
+  ] });
+}
+var TextInput = ({ className = "", ...rest }) => /* @__PURE__ */ jsx4("input", { className: `${inputClass} ${className}`, ...rest });
+var Select = ({ className = "", ...rest }) => /* @__PURE__ */ jsx4(
+  "select",
+  {
+    className: `rounded-md border border-line-strong bg-white px-2.5 py-1.5 text-[13px] outline-none ${className}`,
+    ...rest
+  }
+);
+var TextArea = ({ className = "", ...rest }) => /* @__PURE__ */ jsx4("textarea", { className: `${inputClass} resize-none ${className}`, ...rest });
+
+// src/react/ui/IconButton.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function IconButton({
+  title,
+  icon: Icon,
+  danger,
+  iconSize = 18,
+  light,
+  className = "",
+  ...rest
+}) {
+  const tone = light ? "text-white opacity-90 hover:bg-white/15 hover:opacity-100" : `text-muted hover:bg-line-soft ${danger ? "hover:text-danger" : "hover:text-primary"}`;
+  return /* @__PURE__ */ jsx5(
+    "button",
+    {
+      type: "button",
+      title,
+      "aria-label": title,
+      className: `inline-flex cursor-pointer items-center justify-center rounded p-1.5 transition disabled:cursor-not-allowed disabled:opacity-40 ${tone} ${className}`,
+      ...rest,
+      children: /* @__PURE__ */ jsx5(Icon, { size: iconSize })
+    }
+  );
+}
+
 // src/react/ui/Modal.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function Modal({ children, onClose, width }) {
-  return /* @__PURE__ */ jsx2("div", { className: "fixed inset-0 z-[1200] flex items-center justify-center bg-[rgba(15,23,42,0.45)]", onClick: onClose, children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx6("div", { className: "fixed inset-0 z-[1200] flex items-center justify-center bg-[rgba(15,23,42,0.45)]", onClick: onClose, children: /* @__PURE__ */ jsx6(
     "div",
     {
       role: "dialog",
@@ -121,9 +253,9 @@ var ModalHeader = ({
   title,
   onClose,
   disabled
-}) => /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between border-b border-line px-5 py-4", children: [
-  /* @__PURE__ */ jsx2("h3", { className: "m-0 text-[17px] font-semibold", children: title }),
-  /* @__PURE__ */ jsx2(
+}) => /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between border-b border-line px-5 py-4", children: [
+  /* @__PURE__ */ jsx6("h3", { className: "m-0 text-[17px] font-semibold", children: title }),
+  /* @__PURE__ */ jsx6(
     "button",
     {
       type: "button",
@@ -135,8 +267,8 @@ var ModalHeader = ({
     }
   )
 ] });
-var ModalBody = ({ children }) => /* @__PURE__ */ jsx2("div", { className: "space-y-4 px-5 py-4 text-[13.5px]", children });
-var ModalFooter = ({ children }) => /* @__PURE__ */ jsx2("div", { className: "flex justify-end gap-2 border-t border-line px-5 py-3", children });
+var ModalBody = ({ children }) => /* @__PURE__ */ jsx6("div", { className: "space-y-4 px-5 py-4 text-[13.5px]", children });
+var ModalFooter = ({ children }) => /* @__PURE__ */ jsx6("div", { className: "flex justify-end gap-2 border-t border-line px-5 py-3", children });
 function ConfirmModal({
   children,
   confirmLabel = "Yes",
@@ -145,57 +277,91 @@ function ConfirmModal({
   onConfirm,
   onCancel
 }) {
-  return /* @__PURE__ */ jsxs2(Modal, { onClose: onCancel, width: "w-[420px]", children: [
-    /* @__PURE__ */ jsx2("div", { className: "px-6 pt-7 pb-6 text-sm", children }),
-    /* @__PURE__ */ jsxs2(ModalFooter, { children: [
-      /* @__PURE__ */ jsx2(Button, { variant: "secondary", onClick: onCancel, children: cancelLabel }),
-      /* @__PURE__ */ jsx2(Button, { variant: danger ? "danger" : "primary", onClick: onConfirm, children: confirmLabel })
+  return /* @__PURE__ */ jsxs4(Modal, { onClose: onCancel, width: "w-[420px]", children: [
+    /* @__PURE__ */ jsx6("div", { className: "px-6 pt-7 pb-6 text-sm", children }),
+    /* @__PURE__ */ jsxs4(ModalFooter, { children: [
+      /* @__PURE__ */ jsx6(Button, { variant: "secondary", onClick: onCancel, children: cancelLabel }),
+      /* @__PURE__ */ jsx6(Button, { variant: danger ? "danger" : "primary", onClick: onConfirm, children: confirmLabel })
     ] })
   ] });
 }
 
-// src/react/ui/IconButton.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-function IconButton({
-  title,
-  icon: Icon,
-  danger,
-  iconSize = 18,
-  light,
-  className = "",
-  ...rest
-}) {
-  const tone = light ? "text-white opacity-90 hover:bg-white/15 hover:opacity-100" : `text-muted hover:bg-line-soft ${danger ? "hover:text-danger" : "hover:text-primary"}`;
-  return /* @__PURE__ */ jsx3(
-    "button",
-    {
-      type: "button",
-      title,
-      "aria-label": title,
-      className: `inline-flex cursor-pointer items-center justify-center rounded p-1.5 transition disabled:cursor-not-allowed disabled:opacity-40 ${tone} ${className}`,
-      ...rest,
-      children: /* @__PURE__ */ jsx3(Icon, { size: iconSize })
-    }
-  );
-}
-
 // src/react/ui/Panel.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var PanelHeading = ({ children, actions }) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between bg-heading px-3.5 py-[11px] text-[13px] font-bold tracking-[0.02em] text-white", children: [
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var PanelHeading = ({ children, actions }) => /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between bg-heading px-3.5 py-[11px] text-[13px] font-bold tracking-[0.02em] text-white", children: [
   children,
-  actions && /* @__PURE__ */ jsx4("span", { className: "flex items-center gap-1 tracking-normal", children: actions })
+  actions && /* @__PURE__ */ jsx7("span", { className: "flex items-center gap-1 tracking-normal", children: actions })
 ] });
-var EmptyText = ({ children, className = "" }) => /* @__PURE__ */ jsx4("div", { className: `m-0 px-3.5 py-3 text-[13px] text-muted ${className}`, children });
+var EmptyText = ({ children, className = "" }) => /* @__PURE__ */ jsx7("div", { className: `m-0 px-3.5 py-3 text-[13px] text-muted ${className}`, children });
+
+// src/react/ui/Popover.tsx
+import { useRef, useState } from "react";
+
+// src/react/ui/useOutsideClose.ts
+import { useEffect } from "react";
+function useOutsideClose(ref, open, onClose) {
+  useEffect(() => {
+    if (!open) return;
+    const onClick = (e) => ref.current && e.composedPath().includes(ref.current) || onClose();
+    const onKey = (e) => e.key === "Escape" && onClose();
+    document.addEventListener("mousedown", onClick);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onClick);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [ref, open, onClose]);
+}
+
+// src/react/ui/Popover.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function Popover({
+  label,
+  icon: Icon,
+  badge,
+  align = "left",
+  children
+}) {
+  const [open, setOpen] = useState(false);
+  const box2 = useRef(null);
+  useOutsideClose(box2, open, () => setOpen(false));
+  return /* @__PURE__ */ jsxs6("div", { ref: box2, className: "relative", children: [
+    /* @__PURE__ */ jsxs6(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": open,
+        "aria-haspopup": "dialog",
+        onClick: () => setOpen((o) => !o),
+        className: `inline-flex cursor-pointer items-center gap-1.5 rounded-md border px-3 py-1.5 text-[13px] font-medium ${open || badge ? "border-primary bg-primary-soft text-primary" : "border-line-strong bg-white text-ink-2 hover:border-faint"}`,
+        children: [
+          Icon && /* @__PURE__ */ jsx8(Icon, { size: 15 }),
+          label,
+          !!badge && /* @__PURE__ */ jsx8("span", { className: "inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[11px] font-bold text-white", children: badge })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx8(
+      "div",
+      {
+        role: "dialog",
+        "aria-label": label,
+        className: `absolute z-30 mt-1.5 w-[min(560px,calc(100vw-24px))] max-sm:fixed max-sm:inset-x-3 max-sm:max-h-[70dvh] max-sm:w-auto max-sm:overflow-y-auto rounded-lg border border-line bg-white p-4 shadow-xl ${align === "right" ? "right-0" : "left-0"}`,
+        children
+      }
+    )
+  ] });
+}
 
 // src/react/ui/SegmentedTabs.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function SegmentedTabs({
   options,
   value,
   onChange,
   size = "md"
 }) {
-  return /* @__PURE__ */ jsx5("div", { role: "tablist", className: "inline-flex rounded-full border border-brand p-0.5", children: options.map((o) => /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx9("div", { role: "tablist", className: "inline-flex rounded-full border border-brand p-0.5", children: options.map((o) => /* @__PURE__ */ jsx9(
     "button",
     {
       type: "button",
@@ -209,59 +375,163 @@ function SegmentedTabs({
   )) });
 }
 
-// src/react/ui/Checkbox.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-function Checkbox({
-  label,
-  className = "",
-  ...rest
-}) {
-  return /* @__PURE__ */ jsx6(
-    "input",
-    {
-      type: "checkbox",
-      "aria-label": label,
-      className: `h-[18px] w-[18px] flex-none cursor-pointer accent-primary ${className}`,
-      ...rest
-    }
-  );
-}
-
-// src/react/ui/FormField.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-var inputClass = "w-full rounded-md border border-line-strong bg-white px-3 py-2 text-[13.5px] outline-none focus:border-primary";
-function FormField({
-  label,
-  required,
-  error,
-  children
+// src/react/ui/SignaturePad.tsx
+import { useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function SignaturePad({
+  onSave,
+  onCancel,
+  maxWidth = 600
 }) {
-  return /* @__PURE__ */ jsxs4("label", { className: "block text-[13.5px]", children: [
-    /* @__PURE__ */ jsxs4("span", { className: "mb-1 block font-semibold", children: [
-      label,
-      " ",
-      required && /* @__PURE__ */ jsx7("span", { className: "text-danger", children: "*" })
-    ] }),
-    children,
-    error && /* @__PURE__ */ jsx7("small", { className: "text-danger", children: error })
+  const canvas = useRef2(null);
+  const last = useRef2(null);
+  const [empty, setEmpty] = useState2(true);
+  const point = (e) => {
+    const r = e.currentTarget.getBoundingClientRect();
+    return {
+      x: (e.clientX - r.left) / r.width * e.currentTarget.width,
+      y: (e.clientY - r.top) / r.height * e.currentTarget.height
+    };
+  };
+  const draw = (e) => {
+    const ctx = canvas.current?.getContext("2d");
+    if (!ctx || !last.current) return;
+    const p = point(e);
+    ctx.lineWidth = 3;
+    ctx.lineCap = "round";
+    ctx.strokeStyle = "#111827";
+    ctx.beginPath();
+    ctx.moveTo(last.current.x, last.current.y);
+    ctx.lineTo(p.x, p.y);
+    ctx.stroke();
+    last.current = p;
+    setEmpty(false);
+  };
+  const clear = () => {
+    const c = canvas.current;
+    c?.getContext("2d")?.clearRect(0, 0, c.width, c.height);
+    setEmpty(true);
+  };
+  const save = () => {
+    const c = canvas.current;
+    if (!c) return;
+    const scale = Math.min(1, maxWidth / c.width);
+    const out = document.createElement("canvas");
+    out.width = Math.round(c.width * scale);
+    out.height = Math.round(c.height * scale);
+    out.getContext("2d")?.drawImage(c, 0, 0, out.width, out.height);
+    onSave(out.toDataURL("image/png"));
+  };
+  return /* @__PURE__ */ jsxs7("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx10(
+      "canvas",
+      {
+        ref: canvas,
+        width: 800,
+        height: 260,
+        "aria-label": "Signature drawing area",
+        className: "h-[200px] w-full touch-none rounded-md border border-dashed border-line-strong bg-surface",
+        onPointerDown: (e) => {
+          e.currentTarget.setPointerCapture(e.pointerId);
+          last.current = point(e);
+        },
+        onPointerMove: draw,
+        onPointerUp: () => last.current = null
+      }
+    ),
+    /* @__PURE__ */ jsxs7("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsx10(Button, { variant: "secondary", onClick: clear, children: "Clear" }),
+      /* @__PURE__ */ jsx10(Button, { variant: "secondary", onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx10(Button, { disabled: empty, onClick: save, children: "Use signature" })
+    ] })
   ] });
 }
-var TextInput = ({ className = "", ...rest }) => /* @__PURE__ */ jsx7("input", { className: `${inputClass} ${className}`, ...rest });
-var Select = ({ className = "", ...rest }) => /* @__PURE__ */ jsx7(
-  "select",
+
+// src/react/ui/Tag.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var tones = {
+  success: "bg-success/15 text-success",
+  info: "bg-heading/20 text-primary",
+  muted: "bg-hover text-muted"
+};
+var Tag = ({ tone = "info", children }) => /* @__PURE__ */ jsx11(
+  "span",
   {
-    className: `rounded-md border border-line-strong bg-white px-2.5 py-1.5 text-[13px] outline-none ${className}`,
-    ...rest
+    className: `inline-block rounded-full px-2.5 py-0.5 text-[11px] font-semibold whitespace-nowrap ${tones[tone]}`,
+    children
   }
 );
-var TextArea = ({ className = "", ...rest }) => /* @__PURE__ */ jsx7("textarea", { className: `${inputClass} resize-none ${className}`, ...rest });
+
+// src/react/ui/slots.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var base = {
+  Button,
+  IconButton,
+  Checkbox,
+  FormField,
+  TextInput,
+  Select,
+  TextArea,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  ConfirmModal,
+  PanelHeading,
+  EmptyText,
+  SegmentedTabs,
+  Chip,
+  ChipGroup,
+  RemovableChip,
+  Popover,
+  Tag,
+  SignaturePad
+};
+var defaultComponents = base;
+var UIContext = createContext({});
+function FormliftProvider({
+  components,
+  children
+}) {
+  const outer = useContext(UIContext);
+  return /* @__PURE__ */ jsx12(UIContext.Provider, { value: components ? { ...outer, ...components } : outer, children });
+}
+function slot(name) {
+  const Slot = (props) => {
+    const C = useContext(UIContext)[name] ?? base[name];
+    return /* @__PURE__ */ jsx12(C, { ...props });
+  };
+  Slot.displayName = `formlift.${name}`;
+  return Slot;
+}
+var Button2 = slot("Button");
+var IconButton2 = slot("IconButton");
+var Checkbox2 = slot("Checkbox");
+var FormField2 = slot("FormField");
+var TextInput2 = slot("TextInput");
+var Select2 = slot("Select");
+var TextArea2 = slot("TextArea");
+var Modal2 = slot("Modal");
+var ModalHeader2 = slot("ModalHeader");
+var ModalBody2 = slot("ModalBody");
+var ModalFooter2 = slot("ModalFooter");
+var ConfirmModal2 = slot("ConfirmModal");
+var PanelHeading2 = slot("PanelHeading");
+var EmptyText2 = slot("EmptyText");
+var SegmentedTabs2 = slot("SegmentedTabs");
+var Chip2 = slot("Chip");
+var ChipGroup2 = slot("ChipGroup");
+var RemovableChip2 = slot("RemovableChip");
+var Popover2 = slot("Popover");
+var Tag2 = slot("Tag");
+var SignaturePad2 = slot("SignaturePad");
 
 // src/react/components/ElementProperties.tsx
-import { Fragment, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var num = (s) => s.trim() === "" || !Number.isFinite(Number(s)) ? void 0 : Number(s);
 var pct = (n) => Math.round(n * 1e3) / 10;
-var Section = ({ title, children }) => /* @__PURE__ */ jsxs5("section", { className: "space-y-3 border-b border-line px-3.5 py-3", children: [
-  /* @__PURE__ */ jsx8("h4", { className: "m-0 text-[12px] font-bold tracking-wide text-muted uppercase", children: title }),
+var Section = ({ title, children }) => /* @__PURE__ */ jsxs8("section", { className: "space-y-3 border-b border-line px-3.5 py-3", children: [
+  /* @__PURE__ */ jsx13("h4", { className: "m-0 text-[12px] font-bold tracking-wide text-muted uppercase", children: title }),
   children
 ] });
 function ColorField({
@@ -270,8 +540,8 @@ function ColorField({
   onChange,
   allowNone
 }) {
-  return /* @__PURE__ */ jsx8(FormField, { label, children: /* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx13(FormField2, { label, children: /* @__PURE__ */ jsxs8("span", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx13(
       "input",
       {
         type: "color",
@@ -281,9 +551,9 @@ function ColorField({
         onChange: (e) => onChange(e.target.value)
       }
     ),
-    allowNone && /* @__PURE__ */ jsxs5("label", { className: "inline-flex items-center gap-1.5 text-[12.5px]", children: [
-      /* @__PURE__ */ jsx8(
-        Checkbox,
+    allowNone && /* @__PURE__ */ jsxs8("label", { className: "inline-flex items-center gap-1.5 text-[12.5px]", children: [
+      /* @__PURE__ */ jsx13(
+        Checkbox2,
         {
           label: `No ${label.toLowerCase()}`,
           checked: !value,
@@ -312,15 +582,15 @@ function ElementProperties({
       set({ position: fitted });
     }
   };
-  return /* @__PURE__ */ jsxs5("div", { className: "text-[13px]", children: [
-    e.type === "text" && /* @__PURE__ */ jsxs5(Section, { title: "Text", children: [
-      e.replaces != null && /* @__PURE__ */ jsxs5("p", { className: "m-0 rounded bg-primary-soft px-2 py-1 text-[12px] text-ink-2", children: [
+  return /* @__PURE__ */ jsxs8("div", { className: "text-[13px]", children: [
+    e.type === "text" && /* @__PURE__ */ jsxs8(Section, { title: "Text", children: [
+      e.replaces != null && /* @__PURE__ */ jsxs8("p", { className: "m-0 rounded bg-primary-soft px-2 py-1 text-[12px] text-ink-2", children: [
         "Replaces the original: \u201C",
         e.replaces,
         "\u201D"
       ] }),
-      /* @__PURE__ */ jsx8(
-        TextArea,
+      /* @__PURE__ */ jsx13(
+        TextArea2,
         {
           rows: 4,
           "aria-label": "Text",
@@ -330,18 +600,18 @@ function ElementProperties({
           onChange: (ev) => set({ text: ev.target.value })
         }
       ),
-      /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-2 gap-2", children: [
-        /* @__PURE__ */ jsx8(FormField, { label: "Font", children: /* @__PURE__ */ jsx8(
-          Select,
+      /* @__PURE__ */ jsxs8("div", { className: "grid grid-cols-2 gap-2", children: [
+        /* @__PURE__ */ jsx13(FormField2, { label: "Font", children: /* @__PURE__ */ jsx13(
+          Select2,
           {
             className: "w-full",
             value: e.font ?? "sans",
             onChange: (ev) => set({ font: ev.target.value }),
-            children: FONTS.map((f) => /* @__PURE__ */ jsx8("option", { value: f, children: { sans: "Sans (Helvetica)", serif: "Serif (Times)", mono: "Mono (Courier)" }[f] }, f))
+            children: FONTS.map((f) => /* @__PURE__ */ jsx13("option", { value: f, children: { sans: "Sans (Helvetica)", serif: "Serif (Times)", mono: "Mono (Courier)" }[f] }, f))
           }
         ) }),
-        /* @__PURE__ */ jsx8(FormField, { label: "Size (pt)", children: /* @__PURE__ */ jsx8(
-          TextInput,
+        /* @__PURE__ */ jsx13(FormField2, { label: "Size (pt)", children: /* @__PURE__ */ jsx13(
+          TextInput2,
           {
             type: "number",
             min: 3,
@@ -355,31 +625,31 @@ function ElementProperties({
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap items-center gap-4", children: [
-        ["bold", "italic"].map((k) => /* @__PURE__ */ jsxs5("label", { className: "inline-flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx8(Checkbox, { label: k, checked: !!e[k], onChange: (ev) => set({ [k]: ev.target.checked || void 0 }) }),
+      /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap items-center gap-4", children: [
+        ["bold", "italic"].map((k) => /* @__PURE__ */ jsxs8("label", { className: "inline-flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx13(Checkbox2, { label: k, checked: !!e[k], onChange: (ev) => set({ [k]: ev.target.checked || void 0 }) }),
           k === "bold" ? "Bold" : "Italic"
         ] }, k)),
-        /* @__PURE__ */ jsxs5(
-          Select,
+        /* @__PURE__ */ jsxs8(
+          Select2,
           {
             "aria-label": "Alignment",
             value: e.align ?? "left",
             onChange: (ev) => set({ align: ev.target.value }),
             children: [
-              /* @__PURE__ */ jsx8("option", { value: "left", children: "Left" }),
-              /* @__PURE__ */ jsx8("option", { value: "center", children: "Centre" }),
-              /* @__PURE__ */ jsx8("option", { value: "right", children: "Right" })
+              /* @__PURE__ */ jsx13("option", { value: "left", children: "Left" }),
+              /* @__PURE__ */ jsx13("option", { value: "center", children: "Centre" }),
+              /* @__PURE__ */ jsx13("option", { value: "right", children: "Right" })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ jsx8(ColorField, { label: "Text colour", value: e.color ?? "#000000", onChange: (v) => set({ color: v }) })
+      /* @__PURE__ */ jsx13(ColorField, { label: "Text colour", value: e.color ?? "#000000", onChange: (v) => set({ color: v }) })
     ] }),
-    /* @__PURE__ */ jsxs5(Section, { title: "Colours", children: [
-      e.type !== "line" && /* @__PURE__ */ jsx8(ColorField, { label: "Background", allowNone: true, value: e.fill, onChange: (v) => set({ fill: v }) }),
-      e.type !== "text" && /* @__PURE__ */ jsxs5(Fragment, { children: [
-        /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsxs8(Section, { title: "Colours", children: [
+      e.type !== "line" && /* @__PURE__ */ jsx13(ColorField, { label: "Background", allowNone: true, value: e.fill, onChange: (v) => set({ fill: v }) }),
+      e.type !== "text" && /* @__PURE__ */ jsxs8(Fragment, { children: [
+        /* @__PURE__ */ jsx13(
           ColorField,
           {
             label: e.type === "line" ? "Line colour" : "Border",
@@ -388,8 +658,8 @@ function ElementProperties({
             onChange: (v) => set({ stroke: v })
           }
         ),
-        /* @__PURE__ */ jsx8(FormField, { label: "Line width (pt)", children: /* @__PURE__ */ jsx8(
-          TextInput,
+        /* @__PURE__ */ jsx13(FormField2, { label: "Line width (pt)", children: /* @__PURE__ */ jsx13(
+          TextInput2,
           {
             type: "number",
             min: 0,
@@ -403,11 +673,11 @@ function ElementProperties({
           }
         ) })
       ] }),
-      e.fill === "#ffffff" && /* @__PURE__ */ jsx8("p", { className: "m-0 text-[12px] text-muted", children: "A white background hides the original under it." })
+      e.fill === "#ffffff" && /* @__PURE__ */ jsx13("p", { className: "m-0 text-[12px] text-muted", children: "A white background hides the original under it." })
     ] }),
-    /* @__PURE__ */ jsx8(Section, { title: "Position (% of page)", children: /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-2 gap-2", children: [
-      /* @__PURE__ */ jsx8(FormField, { label: "Page", children: /* @__PURE__ */ jsx8(
-        TextInput,
+    /* @__PURE__ */ jsx13(Section, { title: "Position (% of page)", children: /* @__PURE__ */ jsxs8("div", { className: "grid grid-cols-2 gap-2", children: [
+      /* @__PURE__ */ jsx13(FormField2, { label: "Page", children: /* @__PURE__ */ jsx13(
+        TextInput2,
         {
           type: "number",
           min: 1,
@@ -419,9 +689,9 @@ function ElementProperties({
           }
         }
       ) }),
-      /* @__PURE__ */ jsx8("span", {}),
-      ["x", "y", "width", "height"].map((k) => /* @__PURE__ */ jsx8(FormField, { label: { x: "Left", y: "Top", width: "Width", height: "Height" }[k], children: /* @__PURE__ */ jsx8(
-        TextInput,
+      /* @__PURE__ */ jsx13("span", {}),
+      ["x", "y", "width", "height"].map((k) => /* @__PURE__ */ jsx13(FormField2, { label: { x: "Left", y: "Top", width: "Width", height: "Height" }[k], children: /* @__PURE__ */ jsx13(
+        TextInput2,
         {
           type: "number",
           step: 0.1,
@@ -435,82 +705,8 @@ function ElementProperties({
 
 // src/react/components/FieldControl.tsx
 import { Paperclip, PenLine } from "lucide-react";
-import { useRef as useRef2, useState as useState2 } from "react";
-
-// src/react/ui/SignaturePad.tsx
-import { useRef, useState } from "react";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-function SignaturePad({
-  onSave,
-  onCancel,
-  maxWidth = 600
-}) {
-  const canvas = useRef(null);
-  const last = useRef(null);
-  const [empty, setEmpty] = useState(true);
-  const point = (e) => {
-    const r = e.currentTarget.getBoundingClientRect();
-    return {
-      x: (e.clientX - r.left) / r.width * e.currentTarget.width,
-      y: (e.clientY - r.top) / r.height * e.currentTarget.height
-    };
-  };
-  const draw = (e) => {
-    const ctx = canvas.current?.getContext("2d");
-    if (!ctx || !last.current) return;
-    const p = point(e);
-    ctx.lineWidth = 3;
-    ctx.lineCap = "round";
-    ctx.strokeStyle = "#111827";
-    ctx.beginPath();
-    ctx.moveTo(last.current.x, last.current.y);
-    ctx.lineTo(p.x, p.y);
-    ctx.stroke();
-    last.current = p;
-    setEmpty(false);
-  };
-  const clear = () => {
-    const c = canvas.current;
-    c?.getContext("2d")?.clearRect(0, 0, c.width, c.height);
-    setEmpty(true);
-  };
-  const save = () => {
-    const c = canvas.current;
-    if (!c) return;
-    const scale = Math.min(1, maxWidth / c.width);
-    const out = document.createElement("canvas");
-    out.width = Math.round(c.width * scale);
-    out.height = Math.round(c.height * scale);
-    out.getContext("2d")?.drawImage(c, 0, 0, out.width, out.height);
-    onSave(out.toDataURL("image/png"));
-  };
-  return /* @__PURE__ */ jsxs6("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsx9(
-      "canvas",
-      {
-        ref: canvas,
-        width: 800,
-        height: 260,
-        "aria-label": "Signature drawing area",
-        className: "h-[200px] w-full touch-none rounded-md border border-dashed border-line-strong bg-surface",
-        onPointerDown: (e) => {
-          e.currentTarget.setPointerCapture(e.pointerId);
-          last.current = point(e);
-        },
-        onPointerMove: draw,
-        onPointerUp: () => last.current = null
-      }
-    ),
-    /* @__PURE__ */ jsxs6("div", { className: "flex justify-end gap-2", children: [
-      /* @__PURE__ */ jsx9(Button, { variant: "secondary", onClick: clear, children: "Clear" }),
-      /* @__PURE__ */ jsx9(Button, { variant: "secondary", onClick: onCancel, children: "Cancel" }),
-      /* @__PURE__ */ jsx9(Button, { disabled: empty, onClick: save, children: "Use signature" })
-    ] })
-  ] });
-}
-
-// src/react/components/FieldControl.tsx
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useRef as useRef3, useState as useState3 } from "react";
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var box = "h-full w-full rounded-sm border bg-primary-soft/70 px-1 text-[clamp(8px,62cqh,15px)] text-navy outline-none focus:border-primary focus:bg-white disabled:cursor-not-allowed";
 function pngFile(dataUrl, name) {
   const bin = atob(dataUrl.slice(dataUrl.indexOf(",") + 1));
@@ -527,12 +723,12 @@ function SheetInput({
   onDone
 }) {
   if (field.type === "radio")
-    return /* @__PURE__ */ jsx10("div", { role: "radiogroup", "aria-label": field.label || field.key, className: "flex flex-col gap-1", children: (field.options ?? []).map((o) => /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsx14("div", { role: "radiogroup", "aria-label": field.label || field.key, className: "flex flex-col gap-1", children: (field.options ?? []).map((o) => /* @__PURE__ */ jsxs9(
       "label",
       {
         className: "flex min-h-11 cursor-pointer items-center gap-3 rounded-md border border-line px-3 text-base",
         children: [
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx14(
             "input",
             {
               type: "radio",
@@ -551,7 +747,7 @@ function SheetInput({
       o
     )) });
   if (field.type === "textarea")
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx14(
       "textarea",
       {
         autoFocus: true,
@@ -563,7 +759,7 @@ function SheetInput({
         onChange: (e) => onChange(e.target.value)
       }
     );
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx14(
     "input",
     {
       autoFocus: true,
@@ -592,9 +788,9 @@ function FieldControl({
   signatureSrc,
   compact
 }) {
-  const [signing, setSigning] = useState2(false);
-  const [editing, setEditing] = useState2(false);
-  const fileInput = useRef2(null);
+  const [signing, setSigning] = useState3(false);
+  const [editing, setEditing] = useState3(false);
+  const fileInput = useRef3(null);
   const border = error ? "border-danger" : "border-primary/40";
   const common = {
     "aria-label": field.label || field.key,
@@ -605,31 +801,31 @@ function FieldControl({
   const text = typeof value === "string" ? value : "";
   if (compact && !readOnly && SHEET_TYPES.includes(field.type)) {
     const name = field.label || field.key;
-    return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-      /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsxs9(Fragment2, { children: [
+      /* @__PURE__ */ jsx14(
         "button",
         {
           type: "button",
           ...common,
           onClick: () => setEditing(true),
           className: `${box} ${border} flex cursor-pointer overflow-hidden text-left leading-tight ${field.type === "textarea" ? "items-start py-0.5 text-[clamp(8px,14cqh,15px)]" : "items-center"}`,
-          children: /* @__PURE__ */ jsx10("span", { className: `min-w-0 ${field.type === "textarea" ? "line-clamp-[8] whitespace-pre-wrap" : "truncate"}`, children: text || /* @__PURE__ */ jsx10("span", { className: "text-faint", children: field.placeholder || "" }) })
+          children: /* @__PURE__ */ jsx14("span", { className: `min-w-0 ${field.type === "textarea" ? "line-clamp-[8] whitespace-pre-wrap" : "truncate"}`, children: text || /* @__PURE__ */ jsx14("span", { className: "text-faint", children: field.placeholder || "" }) })
         }
       ),
-      editing && /* @__PURE__ */ jsxs7(Modal, { onClose: () => setEditing(false), width: "w-[480px]", children: [
-        /* @__PURE__ */ jsx10(ModalHeader, { title: name, onClose: () => setEditing(false) }),
-        /* @__PURE__ */ jsxs7(ModalBody, { children: [
-          /* @__PURE__ */ jsx10(SheetInput, { field, text, onChange, onDone: () => setEditing(false) }),
-          field.helpText && /* @__PURE__ */ jsx10("p", { className: "mt-2 mb-0 text-[13px] text-muted", children: field.helpText }),
-          error && /* @__PURE__ */ jsx10("p", { className: "mt-2 mb-0 text-[13px] text-danger", children: error })
+      editing && /* @__PURE__ */ jsxs9(Modal2, { onClose: () => setEditing(false), width: "w-[480px]", children: [
+        /* @__PURE__ */ jsx14(ModalHeader2, { title: name, onClose: () => setEditing(false) }),
+        /* @__PURE__ */ jsxs9(ModalBody2, { children: [
+          /* @__PURE__ */ jsx14(SheetInput, { field, text, onChange, onDone: () => setEditing(false) }),
+          field.helpText && /* @__PURE__ */ jsx14("p", { className: "mt-2 mb-0 text-[13px] text-muted", children: field.helpText }),
+          error && /* @__PURE__ */ jsx14("p", { className: "mt-2 mb-0 text-[13px] text-danger", children: error })
         ] }),
-        /* @__PURE__ */ jsx10(ModalFooter, { children: /* @__PURE__ */ jsx10(Button, { onClick: () => setEditing(false), children: "Done" }) })
+        /* @__PURE__ */ jsx14(ModalFooter2, { children: /* @__PURE__ */ jsx14(Button2, { onClick: () => setEditing(false), children: "Done" }) })
       ] })
     ] });
   }
   switch (field.type) {
     case "textarea":
-      return /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsx14(
         "textarea",
         {
           ...common,
@@ -641,19 +837,19 @@ function FieldControl({
         }
       );
     case "dropdown":
-      return /* @__PURE__ */ jsxs7("select", { ...common, className: `${box} ${border}`, value: text, onChange: (e) => onChange(e.target.value), children: [
-        /* @__PURE__ */ jsx10("option", { value: "", children: field.placeholder || "" }),
-        (field.options ?? []).map((o) => /* @__PURE__ */ jsx10("option", { children: o }, o))
+      return /* @__PURE__ */ jsxs9("select", { ...common, className: `${box} ${border}`, value: text, onChange: (e) => onChange(e.target.value), children: [
+        /* @__PURE__ */ jsx14("option", { value: "", children: field.placeholder || "" }),
+        (field.options ?? []).map((o) => /* @__PURE__ */ jsx14("option", { children: o }, o))
       ] });
     case "radio":
-      return /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsx14(
         "div",
         {
           role: "radiogroup",
           ...common,
           className: `flex h-full w-full flex-wrap items-center gap-x-3 rounded-sm border px-1 text-[clamp(8px,55cqh,14px)] ${border} bg-primary-soft/50`,
-          children: (field.options ?? []).map((o) => /* @__PURE__ */ jsxs7("label", { className: "inline-flex cursor-pointer items-center gap-1", children: [
-            /* @__PURE__ */ jsx10(
+          children: (field.options ?? []).map((o) => /* @__PURE__ */ jsxs9("label", { className: "inline-flex cursor-pointer items-center gap-1", children: [
+            /* @__PURE__ */ jsx14(
               "input",
               {
                 type: "radio",
@@ -669,11 +865,11 @@ function FieldControl({
         }
       );
     case "checkbox":
-      return /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsx14(
         "label",
         {
           className: `flex h-full w-full items-center justify-center rounded-sm border ${border} bg-primary-soft/50`,
-          children: /* @__PURE__ */ jsx10(
+          children: /* @__PURE__ */ jsx14(
             "input",
             {
               type: "checkbox",
@@ -686,31 +882,31 @@ function FieldControl({
         }
       );
     case "signature":
-      return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-        /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsxs9(Fragment2, { children: [
+        /* @__PURE__ */ jsx14(
           "button",
           {
             type: "button",
             ...common,
             onClick: () => setSigning(true),
             className: `flex h-full w-full cursor-pointer items-center justify-center rounded-sm border ${border} bg-primary-soft/50 disabled:cursor-default`,
-            children: text ? /* @__PURE__ */ jsx10(
+            children: text ? /* @__PURE__ */ jsx14(
               "img",
               {
                 src: text.startsWith("data:") ? text : signatureSrc,
                 alt: "Signature",
                 className: "max-h-full max-w-full object-contain"
               }
-            ) : /* @__PURE__ */ jsxs7("span", { className: "inline-flex items-center gap-1 text-[clamp(8px,45cqh,13px)] text-primary", children: [
-              /* @__PURE__ */ jsx10(PenLine, { size: 12 }),
+            ) : /* @__PURE__ */ jsxs9("span", { className: "inline-flex items-center gap-1 text-[clamp(8px,45cqh,13px)] text-primary", children: [
+              /* @__PURE__ */ jsx14(PenLine, { size: 12 }),
               " Sign"
             ] })
           }
         ),
-        signing && /* @__PURE__ */ jsxs7(Modal, { onClose: () => setSigning(false), width: "w-[640px]", children: [
-          /* @__PURE__ */ jsx10(ModalHeader, { title: `Sign: ${field.label || field.key}`, onClose: () => setSigning(false) }),
-          /* @__PURE__ */ jsx10(ModalBody, { children: /* @__PURE__ */ jsx10(
-            SignaturePad,
+        signing && /* @__PURE__ */ jsxs9(Modal2, { onClose: () => setSigning(false), width: "w-[640px]", children: [
+          /* @__PURE__ */ jsx14(ModalHeader2, { title: `Sign: ${field.label || field.key}`, onClose: () => setSigning(false) }),
+          /* @__PURE__ */ jsx14(ModalBody2, { children: /* @__PURE__ */ jsx14(
+            SignaturePad2,
             {
               onCancel: () => setSigning(false),
               onSave: (url) => {
@@ -723,8 +919,8 @@ function FieldControl({
         ] })
       ] });
     case "file":
-      return /* @__PURE__ */ jsxs7("div", { className: `flex h-full w-full items-center gap-1 rounded-sm border px-1 ${border} bg-primary-soft/50`, children: [
-        /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsxs9("div", { className: `flex h-full w-full items-center gap-1 rounded-sm border px-1 ${border} bg-primary-soft/50`, children: [
+        /* @__PURE__ */ jsx14(
           "input",
           {
             ref: fileInput,
@@ -737,7 +933,7 @@ function FieldControl({
             }
           }
         ),
-        value && /* @__PURE__ */ jsx10(
+        value && /* @__PURE__ */ jsx14(
           "button",
           {
             type: "button",
@@ -746,7 +942,7 @@ function FieldControl({
             children: fileName || "Attached file"
           }
         ),
-        !readOnly && /* @__PURE__ */ jsxs7(
+        !readOnly && /* @__PURE__ */ jsxs9(
           "button",
           {
             type: "button",
@@ -754,7 +950,7 @@ function FieldControl({
             onClick: () => fileInput.current?.click(),
             className: "inline-flex flex-none cursor-pointer items-center gap-1 text-[clamp(8px,50cqh,13px)] text-primary",
             children: [
-              /* @__PURE__ */ jsx10(Paperclip, { size: 12 }),
+              /* @__PURE__ */ jsx14(Paperclip, { size: 12 }),
               " ",
               value ? "Replace" : "Attach"
             ]
@@ -763,7 +959,7 @@ function FieldControl({
       ] });
     default: {
       const type = INPUT_TYPE[field.type] ?? "text";
-      return /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsx14(
         "input",
         {
           ...common,
@@ -780,9 +976,13 @@ function FieldControl({
     }
   }
 }
+function AnswerControl({ components, ...props }) {
+  const C = components?.fields?.[props.field.type] ?? components?.FieldControl ?? FieldControl;
+  return /* @__PURE__ */ jsx14(C, { ...props });
+}
 
 // src/react/components/FieldProperties.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 
 // src/react/constants.ts
 var TYPE_LABEL = {
@@ -802,8 +1002,8 @@ var ZOOMS = [0.5, 0.75, 1, 1.25, 1.5, 2];
 var BASE_SCALE = 96 / 72;
 
 // src/react/components/ConditionBuilder.tsx
-import { Plus, X } from "lucide-react";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Plus, X as X2 } from "lucide-react";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var OP_LABEL = {
   equals: "equals",
   notEquals: "does not equal",
@@ -826,50 +1026,50 @@ function ConditionBuilder({
   const setRule = (i, r) => onChange({ ...value, rules: value.rules.map((x, j) => j === i ? r : x) });
   const remove = (i) => onChange({ ...value, rules: value.rules.filter((_, j) => j !== i) });
   const newRule = () => ({ fieldKey: fields[0]?.key ?? "", op: "equals", value: "" });
-  return /* @__PURE__ */ jsxs8("div", { className: `space-y-2 ${depth ? "rounded-md border border-line bg-surface p-2" : ""}`, children: [
-    /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2 text-[12px]", children: [
+  return /* @__PURE__ */ jsxs10("div", { className: `space-y-2 ${depth ? "rounded-md border border-line bg-surface p-2" : ""}`, children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 text-[12px]", children: [
       "Match",
-      /* @__PURE__ */ jsxs8(
-        Select,
+      /* @__PURE__ */ jsxs10(
+        Select2,
         {
           "aria-label": "Match all or any",
           value: value.logic,
           onChange: (e) => onChange({ ...value, logic: e.target.value }),
           children: [
-            /* @__PURE__ */ jsx11("option", { value: "and", children: "ALL (AND)" }),
-            /* @__PURE__ */ jsx11("option", { value: "or", children: "ANY (OR)" })
+            /* @__PURE__ */ jsx15("option", { value: "and", children: "ALL (AND)" }),
+            /* @__PURE__ */ jsx15("option", { value: "or", children: "ANY (OR)" })
           ]
         }
       )
     ] }),
     value.rules.map(
-      (r, i) => isGroup(r) ? /* @__PURE__ */ jsxs8("div", { className: "flex items-start gap-1", children: [
-        /* @__PURE__ */ jsx11("div", { className: "flex-1", children: /* @__PURE__ */ jsx11(ConditionBuilder, { value: r, onChange: (c) => setRule(i, c), fields, depth: depth + 1 }) }),
-        /* @__PURE__ */ jsx11(IconButton, { icon: X, title: "Remove group", danger: true, iconSize: 14, onClick: () => remove(i) })
-      ] }, i) : /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap items-center gap-1", children: [
-        /* @__PURE__ */ jsxs8(
-          Select,
+      (r, i) => isGroup(r) ? /* @__PURE__ */ jsxs10("div", { className: "flex items-start gap-1", children: [
+        /* @__PURE__ */ jsx15("div", { className: "flex-1", children: /* @__PURE__ */ jsx15(ConditionBuilder, { value: r, onChange: (c) => setRule(i, c), fields, depth: depth + 1 }) }),
+        /* @__PURE__ */ jsx15(IconButton2, { icon: X2, title: "Remove group", danger: true, iconSize: 14, onClick: () => remove(i) })
+      ] }, i) : /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap items-center gap-1", children: [
+        /* @__PURE__ */ jsxs10(
+          Select2,
           {
             "aria-label": "Field",
             value: r.fieldKey,
             onChange: (e) => setRule(i, { ...r, fieldKey: e.target.value }),
             children: [
-              !fields.some((f) => f.key === r.fieldKey) && /* @__PURE__ */ jsx11("option", { value: r.fieldKey, children: r.fieldKey || "\u2014" }),
-              fields.map((f) => /* @__PURE__ */ jsx11("option", { value: f.key, children: f.label || f.key }, f.id))
+              !fields.some((f) => f.key === r.fieldKey) && /* @__PURE__ */ jsx15("option", { value: r.fieldKey, children: r.fieldKey || "\u2014" }),
+              fields.map((f) => /* @__PURE__ */ jsx15("option", { value: f.key, children: f.label || f.key }, f.id))
             ]
           }
         ),
-        /* @__PURE__ */ jsx11(
-          Select,
+        /* @__PURE__ */ jsx15(
+          Select2,
           {
             "aria-label": "Operator",
             value: r.op,
             onChange: (e) => setRule(i, { ...r, op: e.target.value }),
-            children: OPERATORS.map((op) => /* @__PURE__ */ jsx11("option", { value: op, children: OP_LABEL[op] }, op))
+            children: OPERATORS.map((op) => /* @__PURE__ */ jsx15("option", { value: op, children: OP_LABEL[op] }, op))
           }
         ),
-        r.op !== "isEmpty" && r.op !== "isNotEmpty" && /* @__PURE__ */ jsx11(
-          TextInput,
+        r.op !== "isEmpty" && r.op !== "isNotEmpty" && /* @__PURE__ */ jsx15(
+          TextInput2,
           {
             "aria-label": "Value",
             className: "!w-24 !py-1",
@@ -877,8 +1077,8 @@ function ConditionBuilder({
             onChange: (e) => setRule(i, { ...r, value: e.target.value })
           }
         ),
-        r.op === "between" && /* @__PURE__ */ jsx11(
-          TextInput,
+        r.op === "between" && /* @__PURE__ */ jsx15(
+          TextInput2,
           {
             "aria-label": "Upper value",
             className: "!w-24 !py-1",
@@ -886,12 +1086,12 @@ function ConditionBuilder({
             onChange: (e) => setRule(i, { ...r, value2: e.target.value })
           }
         ),
-        /* @__PURE__ */ jsx11(IconButton, { icon: X, title: "Remove rule", danger: true, iconSize: 14, onClick: () => remove(i) })
+        /* @__PURE__ */ jsx15(IconButton2, { icon: X2, title: "Remove rule", danger: true, iconSize: 14, onClick: () => remove(i) })
       ] }, i)
     ),
-    /* @__PURE__ */ jsxs8("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsx11(
-        Button,
+    /* @__PURE__ */ jsxs10("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx15(
+        Button2,
         {
           size: "sm",
           variant: "secondary",
@@ -901,8 +1101,8 @@ function ConditionBuilder({
           children: "Rule"
         }
       ),
-      depth < 2 && /* @__PURE__ */ jsx11(
-        Button,
+      depth < 2 && /* @__PURE__ */ jsx15(
+        Button2,
         {
           size: "sm",
           variant: "secondary",
@@ -917,11 +1117,11 @@ function ConditionBuilder({
 }
 
 // src/react/components/FieldProperties.tsx
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var num2 = (s) => s.trim() === "" || !Number.isFinite(Number(s)) ? void 0 : Number(s);
 var pct2 = (n) => Math.round(n * 1e3) / 10;
-var Section2 = ({ title, children }) => /* @__PURE__ */ jsxs9("section", { className: "space-y-3 border-b border-line px-3.5 py-3", children: [
-  /* @__PURE__ */ jsx12("h4", { className: "m-0 text-[12px] font-bold tracking-wide text-muted uppercase", children: title }),
+var Section2 = ({ title, children }) => /* @__PURE__ */ jsxs11("section", { className: "space-y-3 border-b border-line px-3.5 py-3", children: [
+  /* @__PURE__ */ jsx16("h4", { className: "m-0 text-[12px] font-bold tracking-wide text-muted uppercase", children: title }),
   children
 ] });
 var CONDITIONS = [
@@ -937,56 +1137,56 @@ function FieldProperties({
 }) {
   const set = (patch) => onChange({ ...field, ...patch });
   const others = fields.filter((f) => f.id !== field.id);
-  const [optionsText, setOptionsText] = useState3((field.options ?? []).join("\n"));
+  const [optionsText, setOptionsText] = useState4((field.options ?? []).join("\n"));
   const hasOptions = field.type === "dropdown" || field.type === "radio";
   const textual = !["checkbox", "file", "signature", "dropdown", "radio"].includes(field.type);
   const setPos = (k, v) => {
     const n = num2(v);
     if (n != null) set({ position: fitInPage({ ...field.position, [k]: n / 100 }) });
   };
-  return /* @__PURE__ */ jsxs9("div", { className: "text-[13px]", children: [
-    /* @__PURE__ */ jsxs9(Section2, { title: "Field", children: [
-      field.source === "ai" && /* @__PURE__ */ jsxs9("p", { className: "m-0 rounded bg-folder/15 px-2 py-1 text-[12px]", children: [
+  return /* @__PURE__ */ jsxs11("div", { className: "text-[13px]", children: [
+    /* @__PURE__ */ jsxs11(Section2, { title: "Field", children: [
+      field.source === "ai" && /* @__PURE__ */ jsxs11("p", { className: "m-0 rounded bg-folder/15 px-2 py-1 text-[12px]", children: [
         "Suggested automatically",
         field.confidence != null && ` (${Math.round(field.confidence * 100)}% sure)`,
         ". Check it."
       ] }),
-      /* @__PURE__ */ jsxs9("p", { className: "m-0 font-mono text-[11px] text-faint", children: [
+      /* @__PURE__ */ jsxs11("p", { className: "m-0 font-mono text-[11px] text-faint", children: [
         "ID ",
         field.id
       ] }),
-      /* @__PURE__ */ jsx12(FormField, { label: "Label", children: /* @__PURE__ */ jsx12(TextInput, { value: field.label, onChange: (e) => set({ label: e.target.value }) }) }),
-      /* @__PURE__ */ jsx12(FormField, { label: "Key (automatic, from the label)", children: /* @__PURE__ */ jsx12(TextInput, { value: field.key, readOnly: true, className: "text-faint" }) }),
-      /* @__PURE__ */ jsx12(FormField, { label: "Type", children: /* @__PURE__ */ jsx12(Select, { className: "w-full", value: field.type, onChange: (e) => set({ type: e.target.value }), children: FIELD_TYPES.map((t) => /* @__PURE__ */ jsx12("option", { value: t, children: TYPE_LABEL[t] }, t)) }) }),
-      textual && /* @__PURE__ */ jsx12(FormField, { label: "Placeholder", children: /* @__PURE__ */ jsx12(
-        TextInput,
+      /* @__PURE__ */ jsx16(FormField2, { label: "Label", children: /* @__PURE__ */ jsx16(TextInput2, { value: field.label, onChange: (e) => set({ label: e.target.value }) }) }),
+      /* @__PURE__ */ jsx16(FormField2, { label: "Key (automatic, from the label)", children: /* @__PURE__ */ jsx16(TextInput2, { value: field.key, readOnly: true, className: "text-faint" }) }),
+      /* @__PURE__ */ jsx16(FormField2, { label: "Type", children: /* @__PURE__ */ jsx16(Select2, { className: "w-full", value: field.type, onChange: (e) => set({ type: e.target.value }), children: FIELD_TYPES.map((t) => /* @__PURE__ */ jsx16("option", { value: t, children: TYPE_LABEL[t] }, t)) }) }),
+      textual && /* @__PURE__ */ jsx16(FormField2, { label: "Placeholder", children: /* @__PURE__ */ jsx16(
+        TextInput2,
         {
           value: field.placeholder ?? "",
           onChange: (e) => set({ placeholder: e.target.value || void 0 })
         }
       ) }),
-      field.type !== "file" && field.type !== "signature" && /* @__PURE__ */ jsx12(FormField, { label: field.type === "checkbox" ? "Checked by default" : "Default value", children: field.type === "checkbox" ? /* @__PURE__ */ jsx12(
-        Checkbox,
+      field.type !== "file" && field.type !== "signature" && /* @__PURE__ */ jsx16(FormField2, { label: field.type === "checkbox" ? "Checked by default" : "Default value", children: field.type === "checkbox" ? /* @__PURE__ */ jsx16(
+        Checkbox2,
         {
           label: "Checked by default",
           checked: field.defaultValue === "true",
           onChange: (e) => set({ defaultValue: e.target.checked ? "true" : void 0 })
         }
-      ) : /* @__PURE__ */ jsx12(
-        TextInput,
+      ) : /* @__PURE__ */ jsx16(
+        TextInput2,
         {
           value: field.defaultValue ?? "",
           onChange: (e) => set({ defaultValue: e.target.value || void 0 })
         }
       ) }),
-      /* @__PURE__ */ jsx12(FormField, { label: "Help text (shown as tooltip)", children: /* @__PURE__ */ jsx12(TextInput, { value: field.helpText ?? "", onChange: (e) => set({ helpText: e.target.value || void 0 }) }) }),
-      /* @__PURE__ */ jsx12("div", { className: "flex flex-wrap gap-4", children: ["required", "readOnly", "hidden"].map((k) => /* @__PURE__ */ jsxs9("label", { className: "inline-flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx12(Checkbox, { label: k, checked: !!field[k], onChange: (e) => set({ [k]: e.target.checked || void 0 }) }),
+      /* @__PURE__ */ jsx16(FormField2, { label: "Help text (shown as tooltip)", children: /* @__PURE__ */ jsx16(TextInput2, { value: field.helpText ?? "", onChange: (e) => set({ helpText: e.target.value || void 0 }) }) }),
+      /* @__PURE__ */ jsx16("div", { className: "flex flex-wrap gap-4", children: ["required", "readOnly", "hidden"].map((k) => /* @__PURE__ */ jsxs11("label", { className: "inline-flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx16(Checkbox2, { label: k, checked: !!field[k], onChange: (e) => set({ [k]: e.target.checked || void 0 }) }),
         { required: "Required", readOnly: "Read-only", hidden: "Hidden" }[k]
       ] }, k)) })
     ] }),
-    hasOptions && /* @__PURE__ */ jsx12(Section2, { title: "Options (one per line)", children: /* @__PURE__ */ jsx12(
-      TextArea,
+    hasOptions && /* @__PURE__ */ jsx16(Section2, { title: "Options (one per line)", children: /* @__PURE__ */ jsx16(
+      TextArea2,
       {
         rows: 4,
         value: optionsText,
@@ -1002,10 +1202,10 @@ function FieldProperties({
         }
       }
     ) }),
-    textual && /* @__PURE__ */ jsxs9(Section2, { title: "Validation", children: [
-      /* @__PURE__ */ jsxs9("div", { className: "grid grid-cols-2 gap-2", children: [
-        /* @__PURE__ */ jsx12(FormField, { label: "Min length", children: /* @__PURE__ */ jsx12(
-          TextInput,
+    textual && /* @__PURE__ */ jsxs11(Section2, { title: "Validation", children: [
+      /* @__PURE__ */ jsxs11("div", { className: "grid grid-cols-2 gap-2", children: [
+        /* @__PURE__ */ jsx16(FormField2, { label: "Min length", children: /* @__PURE__ */ jsx16(
+          TextInput2,
           {
             type: "number",
             min: 0,
@@ -1013,8 +1213,8 @@ function FieldProperties({
             onChange: (e) => set({ minLength: num2(e.target.value) })
           }
         ) }),
-        /* @__PURE__ */ jsx12(FormField, { label: "Max length", children: /* @__PURE__ */ jsx12(
-          TextInput,
+        /* @__PURE__ */ jsx16(FormField2, { label: "Max length", children: /* @__PURE__ */ jsx16(
+          TextInput2,
           {
             type: "number",
             min: 0,
@@ -1022,17 +1222,17 @@ function FieldProperties({
             onChange: (e) => set({ maxLength: num2(e.target.value) })
           }
         ) }),
-        field.type === "number" && /* @__PURE__ */ jsxs9(Fragment3, { children: [
-          /* @__PURE__ */ jsx12(FormField, { label: "Min value", children: /* @__PURE__ */ jsx12(
-            TextInput,
+        field.type === "number" && /* @__PURE__ */ jsxs11(Fragment3, { children: [
+          /* @__PURE__ */ jsx16(FormField2, { label: "Min value", children: /* @__PURE__ */ jsx16(
+            TextInput2,
             {
               type: "number",
               value: field.min ?? "",
               onChange: (e) => set({ min: num2(e.target.value) })
             }
           ) }),
-          /* @__PURE__ */ jsx12(FormField, { label: "Max value", children: /* @__PURE__ */ jsx12(
-            TextInput,
+          /* @__PURE__ */ jsx16(FormField2, { label: "Max value", children: /* @__PURE__ */ jsx16(
+            TextInput2,
             {
               type: "number",
               value: field.max ?? "",
@@ -1041,8 +1241,8 @@ function FieldProperties({
           ) })
         ] })
       ] }),
-      /* @__PURE__ */ jsx12(FormField, { label: "Regex (whole value must match)", children: /* @__PURE__ */ jsx12(
-        TextInput,
+      /* @__PURE__ */ jsx16(FormField2, { label: "Regex (whole value must match)", children: /* @__PURE__ */ jsx16(
+        TextInput2,
         {
           className: "font-mono",
           value: field.pattern ?? "",
@@ -1052,14 +1252,14 @@ function FieldProperties({
     ] }),
     CONDITIONS.map(([key, title]) => {
       const cond = field[key];
-      return /* @__PURE__ */ jsx12(Section2, { title, children: cond ? /* @__PURE__ */ jsx12(
+      return /* @__PURE__ */ jsx16(Section2, { title, children: cond ? /* @__PURE__ */ jsx16(
         ConditionBuilder,
         {
           value: cond,
           fields: others,
           onChange: (c) => set({ [key]: c.rules.length ? c : void 0 })
         }
-      ) : /* @__PURE__ */ jsx12(
+      ) : /* @__PURE__ */ jsx16(
         "button",
         {
           type: "button",
@@ -1070,9 +1270,9 @@ function FieldProperties({
         }
       ) }, key);
     }),
-    /* @__PURE__ */ jsx12(Section2, { title: "Position (% of page)", children: /* @__PURE__ */ jsxs9("div", { className: "grid grid-cols-2 gap-2", children: [
-      /* @__PURE__ */ jsx12(FormField, { label: "Page", children: /* @__PURE__ */ jsx12(
-        TextInput,
+    /* @__PURE__ */ jsx16(Section2, { title: "Position (% of page)", children: /* @__PURE__ */ jsxs11("div", { className: "grid grid-cols-2 gap-2", children: [
+      /* @__PURE__ */ jsx16(FormField2, { label: "Page", children: /* @__PURE__ */ jsx16(
+        TextInput2,
         {
           type: "number",
           min: 1,
@@ -1085,9 +1285,9 @@ function FieldProperties({
           }
         }
       ) }),
-      /* @__PURE__ */ jsx12("span", {}),
-      ["x", "y", "width", "height"].map((k) => /* @__PURE__ */ jsx12(FormField, { label: { x: "Left", y: "Top", width: "Width", height: "Height" }[k], children: /* @__PURE__ */ jsx12(
-        TextInput,
+      /* @__PURE__ */ jsx16("span", {}),
+      ["x", "y", "width", "height"].map((k) => /* @__PURE__ */ jsx16(FormField2, { label: { x: "Left", y: "Top", width: "Width", height: "Height" }[k], children: /* @__PURE__ */ jsx16(
+        TextInput2,
         {
           type: "number",
           step: 0.1,
@@ -1100,7 +1300,7 @@ function FieldProperties({
 }
 
 // src/react/components/LayoutElementView.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var FAMILY = {
   sans: "Helvetica, Arial, sans-serif",
   serif: '"Times New Roman", Times, serif',
@@ -1114,9 +1314,9 @@ function LayoutElementView({
   style
 }) {
   const stroke = ptToCqh(e.strokeWidth ?? 1, pageHeight);
-  const base = { ...boxStyle({ page: e.page, ...e.position }), ...style };
+  const base2 = { ...boxStyle({ page: e.page, ...e.position }), ...style };
   if (e.type === "line")
-    return /* @__PURE__ */ jsx13("svg", { className: `absolute overflow-visible ${className}`, style: base, "aria-hidden": true, children: /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx17("svg", { className: `absolute overflow-visible ${className}`, style: base2, "aria-hidden": true, children: /* @__PURE__ */ jsx17(
       "line",
       {
         x1: "0",
@@ -1127,12 +1327,12 @@ function LayoutElementView({
         style: { strokeWidth: stroke }
       }
     ) });
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       className: `absolute overflow-hidden whitespace-pre-wrap ${className}`,
       style: {
-        ...base,
+        ...base2,
         background: e.fill,
         border: e.type === "box" && e.stroke ? `${stroke} solid ${e.stroke}` : void 0,
         color: e.color ?? "#000000",
@@ -1151,7 +1351,7 @@ function LayoutElementView({
 
 // src/react/components/PagesPanel.tsx
 import { ArrowDown, ArrowUp, FilePlus2, Trash2 } from "lucide-react";
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 function PagesPanel({
   pages,
   counts,
@@ -1160,36 +1360,36 @@ function PagesPanel({
   onInsertBlank,
   onGoTo
 }) {
-  return /* @__PURE__ */ jsxs10("div", { className: "text-[12.5px]", children: [
-    /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs12("div", { className: "text-[12.5px]", children: [
+    /* @__PURE__ */ jsxs12(
       "button",
       {
         type: "button",
         className: "flex w-full cursor-pointer items-center gap-1.5 border-b border-line-soft px-3 py-2 text-primary hover:bg-primary-soft",
         onClick: () => onInsertBlank(0),
         children: [
-          /* @__PURE__ */ jsx14(FilePlus2, { size: 14 }),
+          /* @__PURE__ */ jsx18(FilePlus2, { size: 14 }),
           " Blank page at the start"
         ]
       }
     ),
-    /* @__PURE__ */ jsx14("ol", { className: "m-0 list-none p-0", children: pages.map((p, i) => {
+    /* @__PURE__ */ jsx18("ol", { className: "m-0 list-none p-0", children: pages.map((p, i) => {
       const n = i + 1;
-      return /* @__PURE__ */ jsxs10("li", { className: "flex items-center gap-1 border-b border-line-soft px-2 py-1", children: [
-        /* @__PURE__ */ jsxs10(
+      return /* @__PURE__ */ jsxs12("li", { className: "flex items-center gap-1 border-b border-line-soft px-2 py-1", children: [
+        /* @__PURE__ */ jsxs12(
           "button",
           {
             type: "button",
             className: "min-w-0 flex-1 cursor-pointer truncate text-left",
             onClick: () => onGoTo(n),
             children: [
-              /* @__PURE__ */ jsxs10("b", { children: [
+              /* @__PURE__ */ jsxs12("b", { children: [
                 "Page ",
                 n
               ] }),
               " ",
-              /* @__PURE__ */ jsx14("span", { className: "text-muted", children: p.source ? `\xB7 original p.${p.source}` : "\xB7 blank" }),
-              counts[n] ? /* @__PURE__ */ jsxs10("span", { className: "text-faint", children: [
+              /* @__PURE__ */ jsx18("span", { className: "text-muted", children: p.source ? `\xB7 original p.${p.source}` : "\xB7 blank" }),
+              counts[n] ? /* @__PURE__ */ jsxs12("span", { className: "text-faint", children: [
                 " \xB7 ",
                 counts[n],
                 " items"
@@ -1197,8 +1397,8 @@ function PagesPanel({
             ]
           }
         ),
-        /* @__PURE__ */ jsx14(
-          IconButton,
+        /* @__PURE__ */ jsx18(
+          IconButton2,
           {
             icon: ArrowUp,
             title: "Move page up",
@@ -1207,8 +1407,8 @@ function PagesPanel({
             onClick: () => onMove(n, -1)
           }
         ),
-        /* @__PURE__ */ jsx14(
-          IconButton,
+        /* @__PURE__ */ jsx18(
+          IconButton2,
           {
             icon: ArrowDown,
             title: "Move page down",
@@ -1217,8 +1417,8 @@ function PagesPanel({
             onClick: () => onMove(n, 1)
           }
         ),
-        /* @__PURE__ */ jsx14(
-          IconButton,
+        /* @__PURE__ */ jsx18(
+          IconButton2,
           {
             icon: FilePlus2,
             title: "Add blank page after",
@@ -1226,8 +1426,8 @@ function PagesPanel({
             onClick: () => onInsertBlank(n)
           }
         ),
-        /* @__PURE__ */ jsx14(
-          IconButton,
+        /* @__PURE__ */ jsx18(
+          IconButton2,
           {
             icon: Trash2,
             title: "Delete page",
@@ -1243,7 +1443,7 @@ function PagesPanel({
 }
 
 // src/react/components/PdfPages.tsx
-import { useEffect, useRef as useRef3, useState as useState4 } from "react";
+import { useEffect as useEffect2, useRef as useRef4, useState as useState5 } from "react";
 
 // src/react/pdfjs.ts
 var workerSrc;
@@ -1263,7 +1463,7 @@ var loadPdfJs = () => pdfjs ??= import("pdfjs-dist").then((lib) => {
 });
 
 // src/react/components/PdfPages.tsx
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 async function readPdf(src) {
   const v = typeof src === "function" ? await src() : src;
   if (typeof v === "string" || v instanceof URL) {
@@ -1282,14 +1482,14 @@ function PdfPages({
   onLoaded,
   onError
 }) {
-  const [doc, setDoc] = useState4(null);
-  const [sizes2, setSizes] = useState4([]);
-  const loadRef = useRef3(load);
-  const callbacks = useRef3({ onLoaded, onError });
-  useEffect(() => {
+  const [doc, setDoc] = useState5(null);
+  const [sizes2, setSizes] = useState5([]);
+  const loadRef = useRef4(load);
+  const callbacks = useRef4({ onLoaded, onError });
+  useEffect2(() => {
     callbacks.current = { onLoaded, onError };
   });
-  useEffect(() => {
+  useEffect2(() => {
     let live = true;
     let opened = null;
     Promise.all([loadPdfJs(), readPdf(loadRef.current)]).then(([lib, data]) => lib.getDocument({ data, ...{ isEvalSupported: false } }).promise).then(async (pdf) => {
@@ -1309,11 +1509,11 @@ function PdfPages({
       void opened?.destroy();
     };
   }, []);
-  if (!doc) return /* @__PURE__ */ jsx15("p", { className: "p-6 text-center text-[13px] text-muted", children: "Loading document\u2026" });
+  if (!doc) return /* @__PURE__ */ jsx19("p", { className: "p-6 text-center text-[13px] text-muted", children: "Loading document\u2026" });
   const shown = pages ?? sizes2.map((s, i) => ({ source: i + 1, ...s }));
   return (
     // min-w-full + w-max: centred when narrower than the panel, fully scrollable (left edge too) when wider.
-    /* @__PURE__ */ jsx15("div", { className: "flex w-max min-w-full flex-col gap-4 p-4", children: shown.map((p, i) => /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx19("div", { className: "flex w-max min-w-full flex-col gap-4 p-4", children: shown.map((p, i) => /* @__PURE__ */ jsx19(
       PdfPage,
       {
         doc,
@@ -1337,20 +1537,20 @@ function PdfPage({
   withText,
   overlay
 }) {
-  const box2 = useRef3(null);
-  const canvas = useRef3(null);
-  const [visible, setVisible] = useState4(false);
-  const [lines, setLines] = useState4(null);
+  const box2 = useRef4(null);
+  const canvas = useRef4(null);
+  const [visible, setVisible] = useState5(false);
+  const [lines, setLines] = useState5(null);
   const width = size.width * BASE_SCALE * zoom;
   const height = size.height * BASE_SCALE * zoom;
-  useEffect(() => {
+  useEffect2(() => {
     const el = box2.current;
     if (!el || typeof IntersectionObserver === "undefined") return setVisible(true);
     const io = new IntersectionObserver(([e]) => e.isIntersecting && setVisible(true), { rootMargin: "600px" });
     io.observe(el);
     return () => io.disconnect();
   }, []);
-  useEffect(() => {
+  useEffect2(() => {
     if (!visible || !source || !canvas.current) return;
     let task = null;
     let live = true;
@@ -1370,7 +1570,7 @@ function PdfPage({
       task?.cancel();
     };
   }, [doc, source, visible, zoom]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!withText || !visible || !source || lines?.source === source) return;
     let live = true;
     void doc.getPage(source).then(async (page) => {
@@ -1388,7 +1588,7 @@ function PdfPage({
       live = false;
     };
   }, [doc, source, visible, withText, lines]);
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       ref: box2,
@@ -1396,8 +1596,8 @@ function PdfPage({
       className: "relative mx-auto flex-none bg-white shadow-[0_1px_6px_rgba(15,23,42,0.18)]",
       style: { width, height },
       children: [
-        source && /* @__PURE__ */ jsx15("canvas", { ref: canvas, className: "absolute inset-0 h-full w-full", "aria-label": `Page ${pageNo}` }),
-        /* @__PURE__ */ jsx15("div", { className: "absolute inset-0 [container-type:size]", children: overlay?.(pageNo, withText && lines?.source === source ? lines.lines : void 0) })
+        source && /* @__PURE__ */ jsx19("canvas", { ref: canvas, className: "absolute inset-0 h-full w-full", "aria-label": `Page ${pageNo}` }),
+        /* @__PURE__ */ jsx19("div", { className: "absolute inset-0 [container-type:size]", children: overlay?.(pageNo, withText && lines?.source === source ? lines.lines : void 0) })
       ]
     }
   );
@@ -1405,28 +1605,28 @@ function PdfPage({
 
 // src/react/components/ZoomControls.tsx
 import { Minus, Plus as Plus2 } from "lucide-react";
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 function ZoomControls({ zoom, onChange }) {
   const lower = [...ZOOMS].reverse().find((z) => z < zoom - 0.01);
   const higher = ZOOMS.find((z) => z > zoom + 0.01);
-  return /* @__PURE__ */ jsxs12("div", { className: "inline-flex items-center gap-1 text-[13px]", children: [
-    /* @__PURE__ */ jsx16(IconButton, { icon: Minus, title: "Zoom out", disabled: lower == null, onClick: () => onChange(lower) }),
-    /* @__PURE__ */ jsxs12("span", { className: "w-12 text-center tabular-nums", children: [
+  return /* @__PURE__ */ jsxs14("div", { className: "inline-flex items-center gap-1 text-[13px]", children: [
+    /* @__PURE__ */ jsx20(IconButton2, { icon: Minus, title: "Zoom out", disabled: lower == null, onClick: () => onChange(lower) }),
+    /* @__PURE__ */ jsxs14("span", { className: "w-12 text-center tabular-nums", children: [
       Math.round(zoom * 100),
       "%"
     ] }),
-    /* @__PURE__ */ jsx16(IconButton, { icon: Plus2, title: "Zoom in", disabled: higher == null, onClick: () => onChange(higher) })
+    /* @__PURE__ */ jsx20(IconButton2, { icon: Plus2, title: "Zoom in", disabled: higher == null, onClick: () => onChange(higher) })
   ] });
 }
 
 // src/react/hooks/useFitZoom.ts
-import { useEffect as useEffect2, useState as useState5 } from "react";
+import { useEffect as useEffect3, useState as useState6 } from "react";
 var PADDING = 32;
 function useFitZoom(pageWidthPt) {
-  const [el, ref] = useState5(null);
-  const [fit, setFit] = useState5(1);
-  const [chosen, setZoom] = useState5(null);
-  useEffect2(() => {
+  const [el, ref] = useState6(null);
+  const [fit, setFit] = useState6(1);
+  const [chosen, setZoom] = useState6(null);
+  useEffect3(() => {
     if (!el) return;
     const measure = () => {
       const room = el.clientWidth - PADDING;
@@ -1443,8 +1643,8 @@ function useFitZoom(pageWidthPt) {
 function useCompact() {
   const query = "(max-width: 767px), (pointer: coarse)";
   const get = () => typeof window !== "undefined" && !!window.matchMedia?.(query).matches;
-  const [compact, setCompact] = useState5(get);
-  useEffect2(() => {
+  const [compact, setCompact] = useState6(get);
+  useEffect3(() => {
     const m = window.matchMedia?.(query);
     if (!m) return;
     const on = () => setCompact(m.matches);
@@ -1454,11 +1654,14 @@ function useCompact() {
   return compact;
 }
 
+// src/react/hooks/useFormEditor.ts
+import { useCallback as useCallback2, useEffect as useEffect4, useMemo, useRef as useRef5, useState as useState8 } from "react";
+
 // src/react/hooks/useUndo.ts
-import { useCallback, useState as useState6 } from "react";
+import { useCallback, useState as useState7 } from "react";
 var LIMIT = 100;
 function useUndo(initial) {
-  const [state, setState] = useState6({ past: [], present: initial, future: [] });
+  const [state, setState] = useState7({ past: [], present: initial, future: [] });
   const set = useCallback((next, record = true) => {
     setState((s) => {
       const value = typeof next === "function" ? next(s.present) : next;
@@ -1495,51 +1698,39 @@ function useUndo(initial) {
   };
 }
 
-// src/react/FormEditor.tsx
-import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+// src/react/hooks/useFormEditor.ts
 var GRID = 5e-3;
-var DRAG_TYPE = "application/x-doc-item";
 var EMPTY = { fields: [], layout: null };
 var isDefault = (l, sizes2) => !l.elements.length && l.pages.length === sizes2.length && l.pages.every((p, i) => p.source === i + 1);
-function FormEditor({
-  pdf: pdfSource,
+function useFormEditor({
   initialValue = EMPTY,
   onSave,
   onChange,
-  title,
-  onBack,
-  toolbar,
-  banner,
-  tabs = [],
   autoDetect,
+  onDetected,
+  keyboard = true,
+  warnUnsaved = true,
+  fieldTypes = FIELD_TYPES,
+  elementTools = Object.keys(ELEMENT_TOOLS),
   notify = () => {
   },
-  onError: notifyError = (e) => console.error(e),
-  className = "h-full",
-  ref
+  onError: notifyError = (e) => console.error(e)
 }) {
-  const [sizes2, setSizes] = useState7(null);
+  const [sizes2, setSizes] = useState8(null);
   const history = useUndo(initialValue);
   const { value: doc, set } = history;
-  const [saved, setSaved] = useState7(initialValue);
-  const [selection, setSelection] = useState7(null);
-  const [tab, setTab] = useState7("props");
-  const [drawer, setDrawer] = useState7(null);
-  const [armed, setArmed] = useState7(null);
-  const compact = useCompact();
-  const [snapOn, setSnapOn] = useState7(true);
-  const [editText, setEditText] = useState7(false);
-  const [preview, setPreview] = useState7(false);
-  const [previewAnswers, setPreviewAnswers] = useState7({});
-  const [busy, setBusy] = useState7(false);
-  const [confirmDeletePage, setConfirmDeletePage] = useState7(null);
-  const [loadError, setLoadError] = useState7("");
-  const [pdf, setPdf] = useState7(null);
-  const [detecting, setDetecting] = useState7(null);
-  const autoDetected = useRef4(false);
-  const drag = useRef4(null);
-  const scroller = useRef4(null);
-  const { zoom, setZoom, ref: fitRef } = useFitZoom(Math.max(...(sizes2 ?? [{ width: 595 }]).map((p) => p.width)));
+  const [saved, setSaved] = useState8(initialValue);
+  const [selection, setSelection] = useState8(null);
+  const [armed, setArmed] = useState8(null);
+  const [snapOn, setSnapOn] = useState8(true);
+  const [editText, setEditText] = useState8(false);
+  const [preview, setPreviewState] = useState8(false);
+  const [previewAnswers, setPreviewAnswers] = useState8({});
+  const [busy, setBusy] = useState8(false);
+  const [pdf, setPdf] = useState8(null);
+  const [detecting, setDetecting] = useState8(null);
+  const autoDetected = useRef5(false);
+  const drag = useRef5(null);
   const { fields } = doc;
   const layout = doc.layout ?? (sizes2 ? defaultLayout(sizes2) : null);
   const pageCount = layout?.pages.length ?? 1;
@@ -1551,20 +1742,20 @@ function FormEditor({
     () => sizes2 ? [...doc.layout ? validateLayout(doc.layout, sizes2.length) : [], ...validateFields(fields, pageCount)] : [],
     [sizes2, doc.layout, fields, pageCount]
   );
-  const onChangeRef = useRef4(onChange);
-  useEffect3(() => {
+  const onChangeRef = useRef5(onChange);
+  useEffect4(() => {
     onChangeRef.current = onChange;
   });
-  const first = useRef4(true);
-  useEffect3(() => {
+  const first = useRef5(true);
+  useEffect4(() => {
     if (first.current) first.current = false;
     else onChangeRef.current?.(doc);
   }, [doc]);
   const withDoc = useCallback2(
     (fn, record = true) => set((cur) => {
-      const base = cur.layout ?? (sizes2 ? defaultLayout(sizes2) : null);
-      if (!base) return cur;
-      return fn({ fields: cur.fields, layout: base });
+      const base2 = cur.layout ?? (sizes2 ? defaultLayout(sizes2) : null);
+      if (!base2) return cur;
+      return fn({ fields: cur.fields, layout: base2 });
     }, record),
     [set, sizes2]
   );
@@ -1576,10 +1767,6 @@ function FormEditor({
     (fn, record = true) => withDoc((d) => ({ ...d, layout: { ...d.layout, elements: fn(d.layout.elements) } }), record),
     [withDoc]
   );
-  const select = (s) => {
-    setSelection(s);
-    if (s) setTab("props");
-  };
   const updateField = useCallback2((f) => setFields((l) => withField(l, f)), [setFields]);
   const updateElement = useCallback2(
     (e) => {
@@ -1605,7 +1792,19 @@ function FormEditor({
       setSelection({ kind: "element", id: copy.id });
     }
   }, [selectedField, selectedElement, fields, setFields, setElements]);
-  useEffect3(() => {
+  const nudge = useCallback2(
+    (dx, dy) => {
+      if (selectedField) updateField({ ...selectedField, position: moveBy(selectedField.position, dx, dy) });
+      if (selectedElement) {
+        const { page: _p, ...position } = moveBy({ page: selectedElement.page, ...selectedElement.position }, dx, dy);
+        void _p;
+        updateElement({ ...selectedElement, position });
+      }
+    },
+    [selectedField, selectedElement, updateField, updateElement]
+  );
+  useEffect4(() => {
+    if (!keyboard) return;
     const onKey = (e) => {
       const t = e.target;
       if (preview || t.closest("input, textarea, select, [contenteditable]")) return;
@@ -1627,42 +1826,27 @@ function FormEditor({
       else if (e.key.startsWith("Arrow")) {
         e.preventDefault();
         const step = e.shiftKey ? 0.01 : 2e-3;
-        const dx = e.key === "ArrowLeft" ? -step : e.key === "ArrowRight" ? step : 0;
-        const dy = e.key === "ArrowUp" ? -step : e.key === "ArrowDown" ? step : 0;
-        if (selectedField) updateField({ ...selectedField, position: moveBy(selectedField.position, dx, dy) });
-        if (selectedElement) {
-          const { page: _p, ...position } = moveBy({ page: selectedElement.page, ...selectedElement.position }, dx, dy);
-          void _p;
-          updateElement({ ...selectedElement, position });
-        }
+        nudge(
+          e.key === "ArrowLeft" ? -step : e.key === "ArrowRight" ? step : 0,
+          e.key === "ArrowUp" ? -step : e.key === "ArrowDown" ? step : 0
+        );
       }
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
-  }, [
-    preview,
-    armed,
-    selection,
-    selectedField,
-    selectedElement,
-    history,
-    removeSelected,
-    duplicateSelected,
-    updateField,
-    updateElement
-  ]);
-  useEffect3(() => {
-    if (!dirty) return;
+  }, [keyboard, preview, armed, selection, history, removeSelected, duplicateSelected, nudge]);
+  useEffect4(() => {
+    if (!dirty || !warnUnsaved) return;
     const warn = (e) => e.preventDefault();
     window.addEventListener("beforeunload", warn);
     return () => window.removeEventListener("beforeunload", warn);
-  }, [dirty]);
+  }, [dirty, warnUnsaved]);
   function startDrag(e, sel, start, mode) {
     if (e.button !== 0) return;
     e.stopPropagation();
     const pageEl = e.currentTarget.closest("[data-page]");
     if (!pageEl) return;
-    select(sel);
+    setSelection(sel);
     history.checkpoint();
     drag.current = { sel, mode, x: e.clientX, y: e.clientY, start, rect: pageEl.getBoundingClientRect() };
     e.currentTarget.setPointerCapture(e.pointerId);
@@ -1698,31 +1882,35 @@ function FormEditor({
       false
     );
   }
-  const endDrag = () => drag.current = null;
+  const endDrag = () => {
+    drag.current = null;
+  };
   function placeNew(key, page, clientX, clientY, rect) {
     const [kind, what] = key.split(":");
     const { x, y } = toPage(clientX, clientY, rect);
-    if (kind === "field" && FIELD_TYPES.includes(what)) {
+    if (kind === "field" && fieldTypes.includes(what)) {
       const f = newField(what, page, x, y, fields);
       setFields((l) => [...l, f]);
-      select({ kind: "field", id: f.id });
+      setSelection({ kind: "field", id: f.id });
       return true;
     }
-    if (kind === "element" && what in ELEMENT_TOOLS) {
+    if (kind === "element" && elementTools.includes(what)) {
       const el = newElement(what, page, x, y);
       setElements((l) => [...l, el]);
-      select({ kind: "element", id: el.id });
+      setSelection({ kind: "element", id: el.id });
       return true;
     }
     return false;
   }
-  function dropNew(e, page) {
-    const key = e.dataTransfer.getData(DRAG_TYPE);
-    if (placeNew(key, page, e.clientX, e.clientY, e.currentTarget.getBoundingClientRect())) e.preventDefault();
-  }
-  function goToPage(n) {
-    scroller.current?.querySelector(`[data-page="${n}"]`)?.scrollIntoView({ block: "start" });
+  function editLine(line, page) {
+    const el = replaceLine(line, page);
+    setElements((l) => [...l, el]);
+    setSelection({ kind: "element", id: el.id });
   }
+  const onDetectedRef = useRef5(onDetected);
+  useEffect4(() => {
+    onDetectedRef.current = onDetected;
+  });
   const detect = useCallback2(
     async (auto = false) => {
       if (!pdf || !layout || detecting) return;
@@ -1740,7 +1928,7 @@ function FormEditor({
         );
         if (found.length) {
           setFields((l) => [...l, ...found]);
-          setTab("fields");
+          onDetectedRef.current?.(found);
         }
         notify(
           found.length ? `${found.length} fields suggested${stop.signal.aborted ? " (stopped early)" : ""}. Check the dashed ones, then Save.` : auto ? "No fields found automatically. Drag them in from the left." : "No new fields found"
@@ -1753,7 +1941,7 @@ function FormEditor({
     },
     [pdf, layout, detecting, fields, setFields, notify, notifyError]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     if (autoDetected.current || !pdf || !layout) return;
     const fresh = autoDetect ?? (!initialValue.fields.length && !initialValue.layout);
     if (!fresh) {
@@ -1786,33 +1974,152 @@ function FormEditor({
       setBusy(false);
     }
   }
-  const saveRef = useRef4(save);
-  useEffect3(() => {
-    saveRef.current = save;
+  const counts = {};
+  for (const f of fields) counts[f.position.page] = (counts[f.position.page] ?? 0) + 1;
+  for (const el of layout?.elements ?? []) counts[el.page] = (counts[el.page] ?? 0) + 1;
+  return {
+    doc,
+    fields,
+    /** The layout as shown (the original pages until changed); null until the PDF has loaded. */
+    layout,
+    pageCount,
+    /** Page size in PDF points, for drawing layout text at the right size. */
+    pageHeight: (page) => layout?.pages[page - 1]?.height ?? 842,
+    /** Fields + layout items per page. */
+    counts,
+    dirty,
+    /** Validation messages; save() refuses while there are any. */
+    problems,
+    busy,
+    save,
+    undo: history.undo,
+    redo: history.redo,
+    canUndo: history.canUndo,
+    canRedo: history.canRedo,
+    /** Changes the document; `record: false` = no undo step (live drags). */
+    setFields,
+    setElements,
+    updateField,
+    updateElement,
+    reorderField: (id, step) => setFields((l) => reorder(l, id, step)),
+    movePage: (n, step) => withDoc((d) => movePage(d, n, step)),
+    insertBlankPage: (n) => withDoc((d) => insertBlankPage(d, n)),
+    deletePage: (n) => {
+      setSelection(null);
+      withDoc((d) => deletePage(d, n));
+    },
+    selection,
+    setSelection,
+    selectedField,
+    selectedElement,
+    removeSelected,
+    duplicateSelected,
+    nudge,
+    startDrag,
+    onDrag,
+    endDrag,
+    /** Tools for a palette: drag with `dataTransfer` / tap to arm, then placeNew. */
+    fieldTools: fieldTypes.map((t) => `field:${t}`),
+    elementTools: elementTools.map((t) => `element:${t}`),
+    armed,
+    setArmed,
+    placeNew,
+    editText,
+    setEditText,
+    editLine,
+    snapOn,
+    setSnapOn,
+    preview,
+    /** Preview starts with empty answers; leaving it ends Edit text. */
+    setPreview: (on) => {
+      setPreviewState(on);
+      setPreviewAnswers({});
+      setEditText(false);
+    },
+    previewAnswers,
+    setPreviewAnswers,
+    previewStates: fieldStates(fields, previewAnswers),
+    pdf,
+    /** Pass to PdfPages' onLoaded. */
+    onPdfLoaded: (s, d) => {
+      setSizes(s);
+      setPdf(d);
+    },
+    pageSizes: sizes2,
+    detect,
+    /** Progress while detecting; `stop.abort()` keeps what was found so far. */
+    detecting
+  };
+}
+
+// src/react/FormEditor.tsx
+import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+var DRAG_TYPE = "application/x-doc-item";
+function FormEditor({
+  pdf: pdfSource,
+  title,
+  onBack,
+  toolbar,
+  banner,
+  tabs = [],
+  components,
+  hide = [],
+  className = "h-full",
+  ref,
+  ...options
+}) {
+  const shows = (p) => !hide.includes(p);
+  const panelTabs = [
+    ...shows("propertiesTab") ? ["props"] : [],
+    ...shows("fieldsTab") ? ["fields"] : [],
+    ...shows("pagesTab") ? ["pages"] : [],
+    ...tabs.map((t) => t.id)
+  ];
+  const [tab, setTabState] = useState9(panelTabs[0] ?? "props");
+  const setTab = (t) => panelTabs.includes(t) && setTabState(t);
+  const ed = useFormEditor({
+    ...options,
+    onDetected: (found) => {
+      setTab("fields");
+      options.onDetected?.(found);
+    }
+  });
+  const { fields, layout, pageCount, selection, selectedField, selectedElement, preview, armed, snapOn, editText } = ed;
+  const [drawer, setDrawer] = useState9(null);
+  const compact = useCompact();
+  const [confirmDeletePage, setConfirmDeletePage] = useState9(null);
+  const [loadError, setLoadError] = useState9("");
+  const scroller = useRef6(null);
+  const { zoom, setZoom, ref: fitRef } = useFitZoom(Math.max(...(ed.pageSizes ?? [{ width: 595 }]).map((p) => p.width)));
+  useEffect5(() => {
+    if (selection) setTab("props");
+  }, [selection]);
+  function goToPage(n) {
+    scroller.current?.querySelector(`[data-page="${n}"]`)?.scrollIntoView({ block: "start" });
+  }
+  const saveRef = useRef6(ed.save);
+  useEffect5(() => {
+    saveRef.current = ed.save;
   });
   useImperativeHandle(
     ref,
     () => ({
-      save: () => dirty ? saveRef.current() : Promise.resolve(problems.length === 0),
-      dirty,
-      value: doc
+      save: () => ed.dirty ? saveRef.current() : Promise.resolve(ed.problems.length === 0),
+      dirty: ed.dirty,
+      value: ed.doc
     }),
-    [dirty, doc, problems]
+    [ed.dirty, ed.doc, ed.problems]
   );
-  if (loadError) return /* @__PURE__ */ jsx17("p", { className: "fl-root p-6 text-center text-sm text-danger", children: loadError });
-  const previewStates = fieldStates(fields, previewAnswers);
-  const counts = {};
-  for (const f of fields) counts[f.position.page] = (counts[f.position.page] ?? 0) + 1;
-  for (const el of layout?.elements ?? []) counts[el.page] = (counts[el.page] ?? 0) + 1;
-  const pageHeight = (page) => layout?.pages[page - 1]?.height ?? 842;
-  const toolItem = (key, label) => /* @__PURE__ */ jsx17(
+  if (loadError) return /* @__PURE__ */ jsx21("p", { className: "fl-root p-6 text-center text-sm text-danger", children: loadError });
+  const { previewStates, previewAnswers, counts, pageHeight } = ed;
+  const toolItem = (key, label) => /* @__PURE__ */ jsx21(
     "button",
     {
       type: "button",
       draggable: true,
       onDragStart: (e) => e.dataTransfer.setData(DRAG_TYPE, key),
       onClick: () => {
-        setArmed((a) => a === key ? null : key);
+        ed.setArmed(armed === key ? null : key);
         setDrawer(null);
       },
       "aria-pressed": armed === key,
@@ -1822,11 +2129,11 @@ function FormEditor({
     key
   );
   const armedLabel = armed ? armed.startsWith("field:") ? TYPE_LABEL[armed.slice(6)] : ELEMENT_TOOLS[armed.slice(8)]?.label : "";
-  return /* @__PURE__ */ jsxs13("div", { className: `fl-root flex min-h-[640px] flex-col bg-white text-ink ${className}`, children: [
-    /* @__PURE__ */ jsxs13("div", { className: "flex flex-wrap items-center gap-2 border-b border-line bg-white px-4 py-2.5", children: [
-      onBack && /* @__PURE__ */ jsx17(Button, { variant: "secondary", size: "sm", icon: ArrowLeft, onClick: onBack, children: "Back" }),
-      !preview && /* @__PURE__ */ jsx17(
-        Button,
+  return /* @__PURE__ */ jsx21(FormliftProvider, { components, children: /* @__PURE__ */ jsxs15("div", { className: `fl-root flex min-h-[640px] flex-col bg-white text-ink ${className}`, children: [
+    /* @__PURE__ */ jsxs15("div", { className: "flex flex-wrap items-center gap-2 border-b border-line bg-white px-4 py-2.5", children: [
+      onBack && shows("back") && /* @__PURE__ */ jsx21(Button2, { variant: "secondary", size: "sm", icon: ArrowLeft, onClick: onBack, children: "Back" }),
+      !preview && shows("tools") && /* @__PURE__ */ jsx21(
+        Button2,
         {
           variant: drawer === "tools" ? "primary" : "secondary",
           size: "sm",
@@ -1836,8 +2143,8 @@ function FormEditor({
           children: "Add"
         }
       ),
-      /* @__PURE__ */ jsx17(
-        Button,
+      shows("panel") && /* @__PURE__ */ jsx21(
+        Button2,
         {
           variant: drawer === "panel" ? "primary" : "secondary",
           size: "sm",
@@ -1847,127 +2154,119 @@ function FormEditor({
           children: selection ? "Properties" : "Panel"
         }
       ),
-      title != null && /* @__PURE__ */ jsx17("h2", { className: "m-0 min-w-0 truncate text-[17px] font-semibold", children: title }),
-      /* @__PURE__ */ jsx17("span", { className: "text-[12px] text-muted", children: dirty ? "Unsaved changes" : "All changes saved" }),
-      /* @__PURE__ */ jsxs13("div", { className: "ml-auto flex flex-wrap items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx17(
-          IconButton,
-          {
-            icon: Undo2,
-            title: "Undo (Ctrl+Z)",
-            disabled: !history.canUndo || preview,
-            onClick: history.undo
-          }
-        ),
-        /* @__PURE__ */ jsx17(
-          IconButton,
-          {
-            icon: Redo2,
-            title: "Redo (Ctrl+Y)",
-            disabled: !history.canRedo || preview,
-            onClick: history.redo
-          }
-        ),
-        /* @__PURE__ */ jsx17(
-          IconButton,
+      title != null && shows("title") && /* @__PURE__ */ jsx21("h2", { className: "m-0 min-w-0 truncate text-[17px] font-semibold", children: title }),
+      shows("status") && /* @__PURE__ */ jsx21("span", { className: "text-[12px] text-muted", children: ed.dirty ? "Unsaved changes" : "All changes saved" }),
+      /* @__PURE__ */ jsxs15("div", { className: "ml-auto flex flex-wrap items-center gap-1.5", children: [
+        shows("undo") && /* @__PURE__ */ jsxs15(Fragment4, { children: [
+          /* @__PURE__ */ jsx21(IconButton2, { icon: Undo2, title: "Undo (Ctrl+Z)", disabled: !ed.canUndo || preview, onClick: ed.undo }),
+          /* @__PURE__ */ jsx21(IconButton2, { icon: Redo2, title: "Redo (Ctrl+Y)", disabled: !ed.canRedo || preview, onClick: ed.redo })
+        ] }),
+        shows("snap") && /* @__PURE__ */ jsx21(
+          IconButton2,
           {
             icon: Grid3x3,
             title: snapOn ? "Snap to grid: on" : "Snap to grid: off",
             className: snapOn ? "!text-primary" : "",
-            onClick: () => setSnapOn((s) => !s)
+            onClick: () => ed.setSnapOn(!snapOn)
           }
         ),
-        /* @__PURE__ */ jsx17(ZoomControls, { zoom, onChange: setZoom }),
-        !preview && /* @__PURE__ */ jsx17(
-          Button,
+        shows("zoom") && /* @__PURE__ */ jsx21(ZoomControls, { zoom, onChange: setZoom }),
+        !preview && shows("editText") && /* @__PURE__ */ jsx21(
+          Button2,
           {
             variant: editText ? "primary" : "secondary",
             size: "sm",
             icon: Type,
             disabled: !layout,
             title: "Click any line of the document to change its text",
-            onClick: () => setEditText((v) => !v),
-            children: /* @__PURE__ */ jsx17("span", { className: "max-sm:hidden", children: "Edit text" })
+            onClick: () => ed.setEditText(!editText),
+            children: /* @__PURE__ */ jsx21("span", { className: "max-sm:hidden", children: "Edit text" })
           }
         ),
-        !preview && /* @__PURE__ */ jsx17(
-          Button,
+        !preview && shows("autoDetect") && /* @__PURE__ */ jsx21(
+          Button2,
           {
             variant: "secondary",
             size: "sm",
             icon: Wand2,
-            disabled: !pdf || !layout || !!detecting,
+            disabled: !ed.pdf || !layout || !!ed.detecting,
             title: "Find answer lines, checkboxes and table cells and suggest fields for them",
-            onClick: () => void detect(),
-            children: /* @__PURE__ */ jsx17("span", { className: "max-sm:hidden", children: "Auto-detect" })
+            onClick: () => void ed.detect(),
+            children: /* @__PURE__ */ jsx21("span", { className: "max-sm:hidden", children: "Auto-detect" })
           }
         ),
-        /* @__PURE__ */ jsx17(
-          Button,
+        shows("preview") && /* @__PURE__ */ jsx21(
+          Button2,
           {
             variant: "secondary",
             size: "sm",
             icon: preview ? Pencil : Eye,
             title: preview ? "Back to editing" : "Preview",
-            onClick: () => {
-              setPreview((p) => !p);
-              setPreviewAnswers({});
-              setEditText(false);
-            },
-            children: /* @__PURE__ */ jsx17("span", { className: "max-sm:hidden", children: preview ? "Edit" : "Preview" })
+            onClick: () => ed.setPreview(!preview),
+            children: /* @__PURE__ */ jsx21("span", { className: "max-sm:hidden", children: preview ? "Edit" : "Preview" })
           }
         ),
-        /* @__PURE__ */ jsx17(Button, { size: "sm", icon: Save, title: "Save", disabled: !dirty || busy, onClick: () => void save(), children: /* @__PURE__ */ jsx17("span", { className: "max-sm:hidden", children: "Save" }) }),
+        shows("save") && /* @__PURE__ */ jsx21(Button2, { size: "sm", icon: Save, title: "Save", disabled: !ed.dirty || ed.busy, onClick: () => void ed.save(), children: /* @__PURE__ */ jsx21("span", { className: "max-sm:hidden", children: "Save" }) }),
         toolbar
       ] })
     ] }),
     banner,
-    detecting && /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3 bg-folder/15 px-4 py-1.5 text-[12.5px] text-ink-2", role: "status", children: [
+    ed.detecting && /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-3 bg-folder/15 px-4 py-1.5 text-[12.5px] text-ink-2", role: "status", children: [
       "Detecting fields\u2026 page ",
-      detecting.done,
+      ed.detecting.done,
       " of ",
-      detecting.total,
-      /* @__PURE__ */ jsx17("div", { className: "h-1.5 w-40 overflow-hidden rounded bg-white", children: /* @__PURE__ */ jsx17(
+      ed.detecting.total,
+      /* @__PURE__ */ jsx21("div", { className: "h-1.5 w-40 overflow-hidden rounded bg-white", children: /* @__PURE__ */ jsx21(
         "div",
         {
           className: "h-full bg-folder",
-          style: { width: `${100 * detecting.done / Math.max(1, detecting.total)}%` }
+          style: { width: `${100 * ed.detecting.done / Math.max(1, ed.detecting.total)}%` }
         }
       ) }),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx21(
         "button",
         {
           type: "button",
           className: "cursor-pointer text-primary hover:underline",
-          onClick: () => detecting.stop.abort(),
+          onClick: () => ed.detecting?.stop.abort(),
           children: "Stop"
         }
       )
     ] }),
-    armed && !preview && /* @__PURE__ */ jsxs13("p", { className: "m-0 flex items-center gap-3 bg-primary-soft px-4 py-1.5 text-[12.5px] text-ink-2", role: "status", children: [
+    armed && !preview && /* @__PURE__ */ jsxs15("p", { className: "m-0 flex items-center gap-3 bg-primary-soft px-4 py-1.5 text-[12.5px] text-ink-2", role: "status", children: [
       "Tap the page where the ",
       armedLabel,
       " should go.",
-      /* @__PURE__ */ jsx17("button", { type: "button", className: "cursor-pointer text-primary hover:underline", onClick: () => setArmed(null), children: "Cancel" })
+      /* @__PURE__ */ jsx21(
+        "button",
+        {
+          type: "button",
+          className: "cursor-pointer text-primary hover:underline",
+          onClick: () => ed.setArmed(null),
+          children: "Cancel"
+        }
+      )
     ] }),
-    editText && /* @__PURE__ */ jsx17("p", { className: "m-0 bg-folder/15 px-4 py-1.5 text-[12.5px] text-ink-2", children: "Edit text: click a line of the document to replace it with an editable copy (same place and size). The uploaded file itself never changes." }),
-    /* @__PURE__ */ jsxs13("div", { className: "relative flex min-h-0 flex-1", children: [
-      !preview && /* @__PURE__ */ jsxs13(
+    editText && /* @__PURE__ */ jsx21("p", { className: "m-0 bg-folder/15 px-4 py-1.5 text-[12.5px] text-ink-2", children: "Edit text: click a line of the document to replace it with an editable copy (same place and size). The uploaded file itself never changes." }),
+    /* @__PURE__ */ jsxs15("div", { className: "relative flex min-h-0 flex-1", children: [
+      !preview && shows("tools") && /* @__PURE__ */ jsxs15(
         "aside",
         {
           className: `w-[170px] flex-none overflow-y-auto border-r border-line bg-white max-lg:absolute max-lg:inset-y-0 max-lg:left-0 max-lg:z-30 max-lg:w-[220px] max-lg:shadow-xl ${drawer === "tools" ? "" : "max-lg:hidden"}`,
           children: [
-            /* @__PURE__ */ jsx17(PanelHeading, { children: "FIELDS" }),
-            /* @__PURE__ */ jsx17("p", { className: "m-0 px-3 pt-2 text-[11.5px] text-muted", children: "Drag onto the document, or tap one, then the page" }),
-            /* @__PURE__ */ jsx17("div", { className: "space-y-1 p-2", children: FIELD_TYPES.map((t) => toolItem(`field:${t}`, TYPE_LABEL[t])) }),
-            /* @__PURE__ */ jsx17(PanelHeading, { children: "LAYOUT" }),
-            /* @__PURE__ */ jsx17("div", { className: "space-y-1 p-2", children: Object.keys(ELEMENT_TOOLS).map(
-              (t) => toolItem(`element:${t}`, ELEMENT_TOOLS[t].label)
-            ) })
+            shows("fieldTools") && ed.fieldTools.length > 0 && /* @__PURE__ */ jsxs15(Fragment4, { children: [
+              /* @__PURE__ */ jsx21(PanelHeading2, { children: "FIELDS" }),
+              /* @__PURE__ */ jsx21("p", { className: "m-0 px-3 pt-2 text-[11.5px] text-muted", children: "Drag onto the document, or tap one, then the page" }),
+              /* @__PURE__ */ jsx21("div", { className: "space-y-1 p-2", children: ed.fieldTools.map((k) => toolItem(k, TYPE_LABEL[k.slice(6)])) })
+            ] }),
+            shows("layoutTools") && ed.elementTools.length > 0 && /* @__PURE__ */ jsxs15(Fragment4, { children: [
+              /* @__PURE__ */ jsx21(PanelHeading2, { children: "LAYOUT" }),
+              /* @__PURE__ */ jsx21("div", { className: "space-y-1 p-2", children: ed.elementTools.map((k) => toolItem(k, ELEMENT_TOOLS[k.slice(8)].label)) })
+            ] })
           ]
         }
       ),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx21(
         "div",
         {
           ref: (n) => {
@@ -1976,22 +2275,19 @@ function FormEditor({
           },
           className: "min-w-0 flex-1 overflow-auto bg-hover",
           onPointerDown: () => {
-            if (!preview) setSelection(null);
+            if (!preview) ed.setSelection(null);
             setDrawer(null);
           },
-          children: /* @__PURE__ */ jsx17(
+          children: /* @__PURE__ */ jsx21(
             PdfPages,
             {
               load: pdfSource,
               zoom,
               pages: layout?.pages,
               withText: editText && !preview,
-              onLoaded: (s, doc2) => {
-                setSizes(s);
-                setPdf(doc2);
-              },
+              onLoaded: ed.onPdfLoaded,
               onError: () => setLoadError("The document could not be shown"),
-              overlay: (page, lines) => /* @__PURE__ */ jsxs13(
+              overlay: (page, lines) => /* @__PURE__ */ jsxs15(
                 "div",
                 {
                   className: "absolute inset-0",
@@ -2000,14 +2296,18 @@ function FormEditor({
                     backgroundSize: "2% 2%"
                   } : void 0,
                   onDragOver: (e) => !preview && e.preventDefault(),
-                  onDrop: (e) => dropNew(e, page),
+                  onDrop: (e) => {
+                    const key = e.dataTransfer.getData(DRAG_TYPE);
+                    if (ed.placeNew(key, page, e.clientX, e.clientY, e.currentTarget.getBoundingClientRect()))
+                      e.preventDefault();
+                  },
                   onClick: (e) => {
                     if (!armed || preview) return;
-                    placeNew(armed, page, e.clientX, e.clientY, e.currentTarget.getBoundingClientRect());
-                    setArmed(null);
+                    ed.placeNew(armed, page, e.clientX, e.clientY, e.currentTarget.getBoundingClientRect());
+                    ed.setArmed(null);
                   },
                   children: [
-                    lines?.map((line, i) => /* @__PURE__ */ jsx17(
+                    lines?.map((line, i) => /* @__PURE__ */ jsx21(
                       "button",
                       {
                         type: "button",
@@ -2015,16 +2315,12 @@ function FormEditor({
                         className: "absolute cursor-text rounded-[1px] outline-1 outline-folder/60 hover:bg-folder/25 hover:outline-folder",
                         style: boxStyle({ page, ...line }),
                         onPointerDown: (e) => e.stopPropagation(),
-                        onClick: () => {
-                          const el = replaceLine(line, page);
-                          setElements((l) => [...l, el]);
-                          select({ kind: "element", id: el.id });
-                        }
+                        onClick: () => ed.editLine(line, page)
                       },
                       i
                     )),
                     layout?.elements.filter((el) => el.page === page).map(
-                      (el) => preview ? /* @__PURE__ */ jsx17(LayoutElementView, { element: el, pageHeight: pageHeight(page) }, el.id) : /* @__PURE__ */ jsxs13(
+                      (el) => preview ? /* @__PURE__ */ jsx21(LayoutElementView, { element: el, pageHeight: pageHeight(page) }, el.id) : /* @__PURE__ */ jsxs15(
                         "div",
                         {
                           role: "button",
@@ -2032,12 +2328,12 @@ function FormEditor({
                           "aria-label": `${el.type} ${el.text ?? ""}`,
                           className: `absolute cursor-move touch-none select-none ${selection?.id === el.id ? "z-10 outline-2 outline-primary" : "hover:outline-1 hover:outline-primary/50"}`,
                           style: boxStyle({ page, ...el.position, height: Math.max(el.position.height, 4e-3) }),
-                          onPointerDown: (e) => startDrag(e, { kind: "element", id: el.id }, { page, ...el.position }, "move"),
-                          onPointerMove: onDrag,
-                          onPointerUp: endDrag,
+                          onPointerDown: (e) => ed.startDrag(e, { kind: "element", id: el.id }, { page, ...el.position }, "move"),
+                          onPointerMove: ed.onDrag,
+                          onPointerUp: ed.endDrag,
                           onClick: (e) => e.stopPropagation(),
                           children: [
-                            /* @__PURE__ */ jsx17(
+                            /* @__PURE__ */ jsx21(
                               LayoutElementView,
                               {
                                 element: el,
@@ -2045,14 +2341,14 @@ function FormEditor({
                                 style: { left: 0, top: 0, width: "100%", height: "100%" }
                               }
                             ),
-                            selection?.id === el.id && /* @__PURE__ */ jsx17(
+                            selection?.id === el.id && /* @__PURE__ */ jsx21(
                               "span",
                               {
                                 "aria-label": "Resize",
                                 className: "absolute -right-1 -bottom-1 h-2.5 w-2.5 cursor-se-resize rounded-sm border border-white bg-primary",
-                                onPointerDown: (e) => startDrag(e, { kind: "element", id: el.id }, { page, ...el.position }, "resize"),
-                                onPointerMove: onDrag,
-                                onPointerUp: endDrag
+                                onPointerDown: (e) => ed.startDrag(e, { kind: "element", id: el.id }, { page, ...el.position }, "resize"),
+                                onPointerMove: ed.onDrag,
+                                onPointerUp: ed.endDrag
                               }
                             )
                           ]
@@ -2061,16 +2357,17 @@ function FormEditor({
                       )
                     ),
                     fields.filter((f) => f.position.page === page).map(
-                      (f) => preview ? previewStates[f.key]?.visible && /* @__PURE__ */ jsx17("div", { className: "absolute [container-type:size]", style: boxStyle(f.position), children: /* @__PURE__ */ jsx17(
-                        FieldControl,
+                      (f) => preview ? previewStates[f.key]?.visible && /* @__PURE__ */ jsx21("div", { className: "absolute [container-type:size]", style: boxStyle(f.position), children: /* @__PURE__ */ jsx21(
+                        AnswerControl,
                         {
+                          components,
                           field: f,
                           value: previewAnswers[f.key],
                           readOnly: previewStates[f.key].readOnly,
                           compact,
-                          onChange: (v) => setPreviewAnswers((a) => ({ ...a, [f.key]: v }))
+                          onChange: (v) => ed.setPreviewAnswers((a) => ({ ...a, [f.key]: v }))
                         }
-                      ) }, f.id) : /* @__PURE__ */ jsxs13(
+                      ) }, f.id) : /* @__PURE__ */ jsxs15(
                         "div",
                         {
                           role: "button",
@@ -2079,23 +2376,23 @@ function FormEditor({
                           title: `${f.label || f.key} (${TYPE_LABEL[f.type]})`,
                           className: `absolute cursor-move touch-none rounded-sm border text-[10px] select-none [container-type:size] ${selection?.id === f.id ? "z-10 border-primary bg-primary/20 ring-2 ring-primary/40" : f.source === "ai" ? "border-dashed border-folder bg-folder/15" : "border-primary/60 bg-primary/10 hover:bg-primary/15"}`,
                           style: boxStyle(f.position),
-                          onPointerDown: (e) => startDrag(e, { kind: "field", id: f.id }, f.position, "move"),
-                          onPointerMove: onDrag,
-                          onPointerUp: endDrag,
+                          onPointerDown: (e) => ed.startDrag(e, { kind: "field", id: f.id }, f.position, "move"),
+                          onPointerMove: ed.onDrag,
+                          onPointerUp: ed.endDrag,
                           onClick: (e) => e.stopPropagation(),
                           children: [
-                            /* @__PURE__ */ jsxs13("span", { className: "pointer-events-none block truncate px-0.5 text-[clamp(7px,55cqh,12px)] leading-tight text-primary", children: [
+                            /* @__PURE__ */ jsxs15("span", { className: "pointer-events-none block truncate px-0.5 text-[clamp(7px,55cqh,12px)] leading-tight text-primary", children: [
                               f.label || f.key,
-                              f.required && /* @__PURE__ */ jsx17("b", { className: "text-danger", children: " *" })
+                              f.required && /* @__PURE__ */ jsx21("b", { className: "text-danger", children: " *" })
                             ] }),
-                            selection?.id === f.id && /* @__PURE__ */ jsx17(
+                            selection?.id === f.id && /* @__PURE__ */ jsx21(
                               "span",
                               {
                                 "aria-label": "Resize",
                                 className: "absolute -right-1 -bottom-1 h-2.5 w-2.5 cursor-se-resize rounded-sm border border-white bg-primary",
-                                onPointerDown: (e) => startDrag(e, { kind: "field", id: f.id }, f.position, "resize"),
-                                onPointerMove: onDrag,
-                                onPointerUp: endDrag
+                                onPointerDown: (e) => ed.startDrag(e, { kind: "field", id: f.id }, f.position, "resize"),
+                                onPointerMove: ed.onDrag,
+                                onPointerUp: ed.endDrag
                               }
                             )
                           ]
@@ -2110,121 +2407,130 @@ function FormEditor({
           )
         }
       ),
-      /* @__PURE__ */ jsxs13(
+      shows("panel") && panelTabs.length > 0 && /* @__PURE__ */ jsxs15(
         "aside",
         {
           className: `flex w-[350px] flex-none flex-col border-l border-line bg-white max-lg:absolute max-lg:inset-y-0 max-lg:right-0 max-lg:z-30 max-lg:w-[min(350px,92vw)] max-lg:shadow-xl ${drawer === "panel" ? "" : "max-lg:hidden"}`,
           children: [
-            /* @__PURE__ */ jsx17("div", { className: "overflow-x-auto border-b border-line p-2 [&_button]:px-2.5", children: /* @__PURE__ */ jsx17(
-              SegmentedTabs,
+            /* @__PURE__ */ jsx21("div", { className: "overflow-x-auto border-b border-line p-2 [&_button]:px-2.5", children: /* @__PURE__ */ jsx21(
+              SegmentedTabs2,
               {
                 options: [
                   { value: "props", label: "Properties" },
                   { value: "fields", label: `Fields (${fields.length})` },
                   { value: "pages", label: `Pages (${pageCount})` },
                   ...tabs.map((t) => ({ value: t.id, label: t.label }))
-                ],
+                ].filter((o) => panelTabs.includes(o.value)),
                 value: tab,
                 onChange: setTab
               }
             ) }),
-            problems.length > 0 && /* @__PURE__ */ jsx17("ul", { className: "m-0 border-b border-danger/30 bg-danger/5 py-2 pr-3 pl-7 text-[12px] text-danger", children: problems.slice(0, 6).map((p) => /* @__PURE__ */ jsx17("li", { children: p }, p)) }),
-            /* @__PURE__ */ jsxs13("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [
-              tab === "props" && /* @__PURE__ */ jsxs13(Fragment4, { children: [
-                /* @__PURE__ */ jsx17(
-                  PanelHeading,
+            ed.problems.length > 0 && shows("problems") && /* @__PURE__ */ jsx21("ul", { className: "m-0 border-b border-danger/30 bg-danger/5 py-2 pr-3 pl-7 text-[12px] text-danger", children: ed.problems.slice(0, 6).map((p) => /* @__PURE__ */ jsx21("li", { children: p }, p)) }),
+            /* @__PURE__ */ jsxs15("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [
+              tab === "props" && /* @__PURE__ */ jsxs15(Fragment4, { children: [
+                /* @__PURE__ */ jsx21(
+                  PanelHeading2,
                   {
-                    actions: selection && /* @__PURE__ */ jsxs13(Fragment4, { children: [
-                      /* @__PURE__ */ jsx17(
-                        IconButton,
+                    actions: selection && /* @__PURE__ */ jsxs15(Fragment4, { children: [
+                      /* @__PURE__ */ jsx21(
+                        IconButton2,
                         {
                           icon: Copy,
                           title: "Duplicate (Ctrl+D)",
                           light: true,
                           iconSize: 16,
-                          onClick: duplicateSelected
+                          onClick: ed.duplicateSelected
                         }
                       ),
-                      /* @__PURE__ */ jsx17(IconButton, { icon: Trash22, title: "Delete (Del)", light: true, iconSize: 16, onClick: removeSelected })
+                      /* @__PURE__ */ jsx21(
+                        IconButton2,
+                        {
+                          icon: Trash22,
+                          title: "Delete (Del)",
+                          light: true,
+                          iconSize: 16,
+                          onClick: ed.removeSelected
+                        }
+                      )
                     ] }),
                     children: selectedField ? "FIELD" : selectedElement ? selectedElement.type.toUpperCase() : "PROPERTIES"
                   }
                 ),
-                selectedField ? /* @__PURE__ */ jsx17(
+                selectedField ? /* @__PURE__ */ jsx21(
                   FieldProperties,
                   {
                     field: selectedField,
                     fields,
                     pageCount,
-                    onChange: updateField
+                    onChange: ed.updateField
                   },
                   selectedField.id
-                ) : selectedElement ? /* @__PURE__ */ jsx17(
+                ) : selectedElement ? /* @__PURE__ */ jsx21(
                   ElementProperties,
                   {
                     element: selectedElement,
                     pageCount,
-                    onChange: updateElement
+                    onChange: ed.updateElement
                   },
                   selectedElement.id
-                ) : /* @__PURE__ */ jsxs13(EmptyText, { children: [
+                ) : /* @__PURE__ */ jsxs15(EmptyText2, { children: [
                   "Select something on the document, drag a field or layout item in from the left, or use",
                   " ",
-                  /* @__PURE__ */ jsx17("b", { children: "Edit text" }),
+                  /* @__PURE__ */ jsx21("b", { children: "Edit text" }),
                   " to change the document's own text."
                 ] })
               ] }),
-              tab === "fields" && /* @__PURE__ */ jsxs13(Fragment4, { children: [
-                /* @__PURE__ */ jsx17(PanelHeading, { children: "FILL ORDER" }),
-                !fields.length && /* @__PURE__ */ jsx17(EmptyText, { children: "No fields yet." }),
-                /* @__PURE__ */ jsx17("ol", { className: "m-0 list-none p-0", children: fields.map((f, i) => /* @__PURE__ */ jsxs13(
+              tab === "fields" && /* @__PURE__ */ jsxs15(Fragment4, { children: [
+                /* @__PURE__ */ jsx21(PanelHeading2, { children: "FILL ORDER" }),
+                !fields.length && /* @__PURE__ */ jsx21(EmptyText2, { children: "No fields yet." }),
+                /* @__PURE__ */ jsx21("ol", { className: "m-0 list-none p-0", children: fields.map((f, i) => /* @__PURE__ */ jsxs15(
                   "li",
                   {
                     className: `flex items-center gap-1 border-b border-line-soft px-2 py-1 text-[12.5px] ${selection?.id === f.id ? "bg-primary-tint" : ""}`,
                     children: [
-                      /* @__PURE__ */ jsxs13(
+                      /* @__PURE__ */ jsxs15(
                         "button",
                         {
                           type: "button",
                           className: "min-w-0 flex-1 cursor-pointer truncate text-left",
                           onClick: () => {
-                            select({ kind: "field", id: f.id });
+                            ed.setSelection({ kind: "field", id: f.id });
                             goToPage(f.position.page);
                           },
                           children: [
-                            /* @__PURE__ */ jsxs13("span", { className: "text-faint", children: [
+                            /* @__PURE__ */ jsxs15("span", { className: "text-faint", children: [
                               "p",
                               f.position.page
                             ] }),
                             " ",
                             f.label || f.key,
                             " ",
-                            /* @__PURE__ */ jsxs13("span", { className: "text-muted", children: [
+                            /* @__PURE__ */ jsxs15("span", { className: "text-muted", children: [
                               "\xB7 ",
                               TYPE_LABEL[f.type]
                             ] }),
-                            f.source === "ai" && /* @__PURE__ */ jsx17("span", { className: "text-folder", children: " \xB7 AI" })
+                            f.source === "ai" && /* @__PURE__ */ jsx21("span", { className: "text-folder", children: " \xB7 AI" })
                           ]
                         }
                       ),
-                      /* @__PURE__ */ jsx17(
-                        IconButton,
+                      /* @__PURE__ */ jsx21(
+                        IconButton2,
                         {
                           icon: ArrowUp2,
                           title: "Move up",
                           iconSize: 13,
                           disabled: i === 0,
-                          onClick: () => setFields((l) => reorder(l, f.id, -1))
+                          onClick: () => ed.reorderField(f.id, -1)
                         }
                       ),
-                      /* @__PURE__ */ jsx17(
-                        IconButton,
+                      /* @__PURE__ */ jsx21(
+                        IconButton2,
                         {
                           icon: ArrowDown2,
                           title: "Move down",
                           iconSize: 13,
                           disabled: i === fields.length - 1,
-                          onClick: () => setFields((l) => reorder(l, f.id, 1))
+                          onClick: () => ed.reorderField(f.id, 1)
                         }
                       )
                     ]
@@ -2232,25 +2538,25 @@ function FormEditor({
                   f.id
                 )) })
               ] }),
-              tab === "pages" && (layout ? /* @__PURE__ */ jsx17(
+              tab === "pages" && (layout ? /* @__PURE__ */ jsx21(
                 PagesPanel,
                 {
                   pages: layout.pages,
                   counts,
                   onGoTo: goToPage,
-                  onMove: (n, step) => withDoc((d) => movePage(d, n, step)),
-                  onInsertBlank: (n) => withDoc((d) => insertBlankPage(d, n)),
-                  onDelete: (n) => counts[n] ? setConfirmDeletePage(n) : withDoc((d) => deletePage(d, n))
+                  onMove: ed.movePage,
+                  onInsertBlank: ed.insertBlankPage,
+                  onDelete: (n) => counts[n] ? setConfirmDeletePage(n) : ed.deletePage(n)
                 }
-              ) : /* @__PURE__ */ jsx17(EmptyText, { children: "Loading pages\u2026" })),
+              ) : /* @__PURE__ */ jsx21(EmptyText2, { children: "Loading pages\u2026" })),
               tabs.find((t) => t.id === tab)?.content
             ] })
           ]
         }
       )
     ] }),
-    confirmDeletePage != null && /* @__PURE__ */ jsxs13(
-      ConfirmModal,
+    confirmDeletePage != null && /* @__PURE__ */ jsxs15(
+      ConfirmModal2,
       {
         danger: true,
         confirmLabel: "Delete page",
@@ -2258,8 +2564,7 @@ function FormEditor({
         onConfirm: () => {
           const n = confirmDeletePage;
           setConfirmDeletePage(null);
-          setSelection(null);
-          withDoc((d) => deletePage(d, n));
+          ed.deletePage(n);
         },
         children: [
           "Delete page ",
@@ -2270,158 +2575,88 @@ function FormEditor({
         ]
       }
     )
-  ] });
+  ] }) });
 }
 
 // src/react/FormFiller.tsx
 import { ArrowLeft as ArrowLeft2, Download, Paperclip as Paperclip2, Save as Save2, Send } from "lucide-react";
-import { useCallback as useCallback3, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef6, useState as useState10 } from "react";
+import { useEffect as useEffect8, useState as useState13 } from "react";
 
 // src/react/components/QuestionList.tsx
 import { Search, SlidersHorizontal } from "lucide-react";
-import { Fragment as Fragment5, useMemo as useMemo2, useState as useState9 } from "react";
+import { Fragment as Fragment5, useEffect as useEffect6, useState as useState11 } from "react";
 
-// src/react/ui/Chip.tsx
-import { X as X2 } from "lucide-react";
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
-function Chip({
-  label,
-  count,
-  active,
-  onClick
-}) {
-  return /* @__PURE__ */ jsxs14(
-    "button",
-    {
-      type: "button",
-      "aria-pressed": !!active,
-      onClick,
-      className: `inline-flex cursor-pointer items-center gap-1.5 rounded-full border px-3 py-1 text-[12.5px] whitespace-nowrap transition-colors ${active ? "border-primary bg-primary-tint font-semibold text-primary" : "border-line-strong bg-white text-ink-2 hover:border-faint hover:bg-surface"}`,
-      children: [
-        label,
-        count != null && /* @__PURE__ */ jsx18(
-          "span",
-          {
-            className: `rounded-full px-1.5 text-[11px] font-semibold ${active ? "bg-primary text-white" : "bg-hover text-muted"}`,
-            children: count
-          }
-        )
-      ]
-    }
+// src/react/hooks/useQuestionFilter.ts
+import { useMemo as useMemo2, useState as useState10 } from "react";
+var defaultFilters = builtinFilters({ type: (t) => TYPE_LABEL[t] });
+var byId = (id) => {
+  if (id === "tags") return defaultFilters.find((s) => typeof s === "function");
+  return defaultFilters.find((s) => typeof s !== "function" && s.id === id);
+};
+function useQuestionFilter(questions, answers, { filters = defaultFilters, search: searchOn = true, initial, predicate, onChange } = {}) {
+  const [values, setValues] = useState10(initial?.values ?? {});
+  const [search, setSearchState] = useState10(initial?.search ?? "");
+  const [seen, setSeen] = useState10(answers);
+  const [version, setVersion] = useState10(0);
+  const update = (nextSearch, nextValues) => {
+    setSearchState(nextSearch);
+    setValues(nextValues);
+    setSeen(answers);
+    setVersion((v) => v + 1);
+    onChange?.({ search: nextSearch, values: nextValues });
+  };
+  const key = filters.map((f) => typeof f === "string" ? f : typeof f === "function" ? "fn" : f.id).join();
+  const defs = useMemo2(
+    () => resolveFilters(
+      filters.map((f) => typeof f === "string" ? byId(f) : f).filter((f) => !!f),
+      questions
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- re-resolve when the list's ids change, not on every render
+    [key, questions]
   );
-}
-function ChipGroup({
-  title,
-  options,
-  value,
-  onChange
-}) {
-  return /* @__PURE__ */ jsxs14("div", { role: "group", "aria-label": title, className: "flex flex-wrap items-center gap-1.5", children: [
-    title && /* @__PURE__ */ jsx18("span", { className: "mr-1 min-w-28 text-[11.5px] max-sm:basis-full font-semibold tracking-wide text-muted uppercase", children: title }),
-    options.map((o) => /* @__PURE__ */ jsx18(
-      Chip,
-      {
-        label: o.label,
-        count: o.count,
-        active: value === o.value,
-        onClick: () => onChange(value === o.value ? null : o.value)
-      },
-      o.value
-    ))
-  ] });
-}
-function RemovableChip({ label, onRemove }) {
-  return /* @__PURE__ */ jsxs14("span", { className: "inline-flex items-center gap-1 rounded-full bg-primary-tint py-0.5 pr-1 pl-2.5 text-[12px] font-medium text-primary", children: [
-    label,
-    /* @__PURE__ */ jsx18(
-      "button",
-      {
-        type: "button",
-        "aria-label": `Remove ${label}`,
-        onClick: onRemove,
-        className: "inline-flex h-4.5 w-4.5 cursor-pointer items-center justify-center rounded-full hover:bg-primary hover:text-white",
-        children: /* @__PURE__ */ jsx18(X2, { size: 12 })
-      }
-    )
-  ] });
-}
-
-// src/react/ui/Popover.tsx
-import { useRef as useRef5, useState as useState8 } from "react";
-
-// src/react/ui/useOutsideClose.ts
-import { useEffect as useEffect4 } from "react";
-function useOutsideClose(ref, open, onClose) {
-  useEffect4(() => {
-    if (!open) return;
-    const onClick = (e) => ref.current && e.composedPath().includes(ref.current) || onClose();
-    const onKey = (e) => e.key === "Escape" && onClose();
-    document.addEventListener("mousedown", onClick);
-    document.addEventListener("keydown", onKey);
-    return () => {
-      document.removeEventListener("mousedown", onClick);
-      document.removeEventListener("keydown", onKey);
+  const list = useMemo2(() => {
+    const shown = filterQuestions(questions, seen, defs, values, searchOn ? search : "");
+    return predicate ? shown.filter((q) => predicate(q, seen)) : shown;
+  }, [questions, seen, defs, values, search, searchOn, predicate]);
+  const groups = defs.map((d) => {
+    const options = d.options(questions, answers);
+    return {
+      id: d.id,
+      title: d.title,
+      section: d.section,
+      options,
+      available: options.length > 0,
+      value: values[d.id] ?? null,
+      set: (v) => update(search, { ...values, [d.id]: v })
     };
-  }, [ref, open, onClose]);
-}
-
-// src/react/ui/Popover.tsx
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
-function Popover({
-  label,
-  icon: Icon,
-  badge,
-  align = "left",
-  children
-}) {
-  const [open, setOpen] = useState8(false);
-  const box2 = useRef5(null);
-  useOutsideClose(box2, open, () => setOpen(false));
-  return /* @__PURE__ */ jsxs15("div", { ref: box2, className: "relative", children: [
-    /* @__PURE__ */ jsxs15(
-      "button",
-      {
-        type: "button",
-        "aria-expanded": open,
-        "aria-haspopup": "dialog",
-        onClick: () => setOpen((o) => !o),
-        className: `inline-flex cursor-pointer items-center gap-1.5 rounded-md border px-3 py-1.5 text-[13px] font-medium ${open || badge ? "border-primary bg-primary-soft text-primary" : "border-line-strong bg-white text-ink-2 hover:border-faint"}`,
-        children: [
-          Icon && /* @__PURE__ */ jsx19(Icon, { size: 15 }),
-          label,
-          !!badge && /* @__PURE__ */ jsx19("span", { className: "inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[11px] font-bold text-white", children: badge })
-        ]
-      }
-    ),
-    open && /* @__PURE__ */ jsx19(
-      "div",
-      {
-        role: "dialog",
-        "aria-label": label,
-        className: `absolute z-30 mt-1.5 w-[min(560px,calc(100vw-24px))] max-sm:fixed max-sm:inset-x-3 max-sm:max-h-[70dvh] max-sm:w-auto max-sm:overflow-y-auto rounded-lg border border-line bg-white p-4 shadow-xl ${align === "right" ? "right-0" : "left-0"}`,
-        children
-      }
-    )
-  ] });
+  });
+  const picked = groups.filter((g) => g.value != null);
+  return {
+    groups,
+    /** One group by id (undefined when not in `filters`). */
+    group: (id) => groups.find((g) => g.id === id),
+    /** The search text; null when search is off. */
+    search: searchOn ? search : null,
+    setSearch: (text) => update(text, values),
+    values,
+    /** Filters in use, as chips to take off one by one. */
+    inUse: picked.map((g) => ({
+      id: g.id,
+      label: `${g.title}: ${g.options.find((o) => o.value === g.value)?.label ?? g.value}`,
+      clear: () => g.set(null)
+    })),
+    active: !!search || picked.length > 0,
+    clear: () => update("", {}),
+    /** The questions that match, in form order. */
+    list,
+    total: questions.length,
+    /** Bumps on every change (reset paging / scroll on it). */
+    version
+  };
 }
 
-// src/react/ui/Tag.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
-var tones = {
-  success: "bg-success/15 text-success",
-  info: "bg-heading/20 text-primary",
-  muted: "bg-hover text-muted"
-};
-var Tag = ({ tone = "info", children }) => /* @__PURE__ */ jsx20(
-  "span",
-  {
-    className: `inline-block rounded-full px-2.5 py-0.5 text-[11px] font-semibold whitespace-nowrap ${tones[tone]}`,
-    children
-  }
-);
-
 // src/react/components/QuestionList.tsx
-import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 var PAGE = 100;
 var SIZE = {
   checkbox: "h-7 w-7 lg:h-8 lg:w-8",
@@ -2435,216 +2670,103 @@ var wide = (t) => t === "textarea" || t === "radio" || t === "file";
 function QuestionList({
   questions,
   answers,
-  control
+  control,
+  filter: external,
+  filters,
+  search,
+  hideUnavailable = true,
+  toolbar = true,
+  renderToolbar
 }) {
-  const [filter, setFilter] = useState9(NO_FILTER);
-  const [shown, setShown] = useState9(PAGE);
-  const [seen, setSeen] = useState9(answers);
-  const set = (patch) => {
-    setFilter((f) => ({ ...f, ...patch }));
-    setSeen(answers);
-    setShown(PAGE);
-  };
-  const list = useMemo2(() => questions.filter((q) => matches(q, seen, filter)), [questions, seen, filter]);
-  const count = (f) => questions.filter(f).length;
-  const types = useMemo2(() => [...new Set(questions.flatMap((q) => q.parts.map((p) => p.field.type)))], [questions]);
-  const categories = useMemo2(
-    () => [...new Set(questions.map((q) => q.category).filter((c) => !!c))],
-    [questions]
-  );
-  const tagValues = useMemo2(() => {
-    const m = /* @__PURE__ */ new Map();
-    for (const q of questions)
-      for (const [k, v] of Object.entries(q.tags ?? {})) m.set(k, (m.get(k) ?? /* @__PURE__ */ new Set()).add(v));
-    return [...m].map(
-      ([k, vs]) => [k, [...vs].sort((a, b) => a.localeCompare(b, void 0, { numeric: true }))]
-    );
-  }, [questions]);
-  const has = (re) => questions.some((q) => q.parts.some((p) => re.test(p.name) || re.test(p.field.label)));
-  const progress = [
-    ["answered", "Answered", "Answered", "Not answered"],
-    ["remarks", "Remarks", "Written", "Empty"],
-    ["comments", "Comments", "Written", "Empty"]
-  ].filter(([key]) => key === "answered" || has(key === "remarks" ? /remark/i : /comment/i));
-  const setTag = (key, value) => {
-    const tags = { ...filter.tags };
-    if (value == null) delete tags[key];
-    else tags[key] = value;
-    set({ tags });
-  };
-  const choiceCount = useMemo2(() => {
-    const m = /* @__PURE__ */ new Map();
-    for (const q of questions) for (const c of new Set(choicesOf(q))) m.set(c, (m.get(c) ?? 0) + 1);
-    return [...m].filter(([, n]) => n >= 2).slice(0, 40);
-  }, [questions]);
-  const [choiceMode, setChoiceMode] = useState9("offered");
-  const choiceValue = choiceMode === "picked" ? filter.picked : filter.choices;
-  const pickedCount = useMemo2(() => {
-    const m = /* @__PURE__ */ new Map();
-    for (const q of questions) for (const c of new Set(pickedOf(q, answers))) m.set(c, (m.get(c) ?? 0) + 1);
-    return m;
-  }, [questions, answers]);
-  const inUse = [
-    ...progress.filter(([key]) => filter[key] !== "all").map(([key, title, yes, no]) => ({
-      label: `${title}: ${filter[key] === "filled" ? yes : no}`,
-      clear: () => set({ [key]: "all" })
-    })),
-    ...filter.type !== "all" ? [{ label: `Type: ${TYPE_LABEL[filter.type]}`, clear: () => set({ type: "all" }) }] : [],
-    ...Object.entries(filter.tags).map(([k, v]) => ({ label: `${k}: ${v}`, clear: () => setTag(k, null) })),
-    ...filter.choices !== "all" ? [{ label: `Has option: ${filter.choices}`, clear: () => set({ choices: "all" }) }] : [],
-    ...filter.picked !== "all" ? [{ label: `Answered: ${filter.picked}`, clear: () => set({ picked: "all" }) }] : []
-  ];
-  const active = JSON.stringify(filter) !== JSON.stringify(NO_FILTER);
+  const own = useQuestionFilter(questions, answers, { filters, search });
+  const fs = external ?? own;
+  const { list } = fs;
+  const [shown, setShown] = useState11(PAGE);
+  useEffect6(() => setShown(PAGE), [fs.version]);
+  const groups = fs.groups.filter((g) => g.available || !hideUnavailable);
+  const bar = groups.filter((g) => g.section === "bar");
+  const menu = groups.filter((g) => g.section !== "bar");
+  const sections = [...new Set(menu.map((g) => g.section ?? ""))];
   return /* @__PURE__ */ jsxs16("div", { className: "w-full p-3 sm:p-4 lg:px-6", children: [
-    /* @__PURE__ */ jsxs16("div", { className: "sticky top-0 z-10 -mx-3 mb-3 flex flex-col gap-2 border-b border-line bg-white/95 px-3 py-2.5 shadow-sm backdrop-blur sm:-mx-4 sm:px-4 lg:-mx-6 lg:px-6", children: [
+    renderToolbar ? renderToolbar(fs) : toolbar && /* @__PURE__ */ jsxs16("div", { className: "sticky top-0 z-10 -mx-3 mb-3 flex flex-col gap-2 border-b border-line bg-white/95 px-3 py-2.5 shadow-sm backdrop-blur sm:-mx-4 sm:px-4 lg:-mx-6 lg:px-6", children: [
       /* @__PURE__ */ jsxs16("div", { className: "flex flex-wrap items-center gap-2", children: [
-        /* @__PURE__ */ jsxs16("label", { className: "relative min-w-0 flex-1 basis-full sm:basis-72", children: [
-          /* @__PURE__ */ jsx21(Search, { size: 15, className: "absolute top-1/2 left-3 -translate-y-1/2 text-muted" }),
-          /* @__PURE__ */ jsx21(
+        fs.search != null && /* @__PURE__ */ jsxs16("label", { className: "relative min-w-0 flex-1 basis-full sm:basis-72", children: [
+          /* @__PURE__ */ jsx22(Search, { size: 15, className: "absolute top-1/2 left-3 -translate-y-1/2 text-muted" }),
+          /* @__PURE__ */ jsx22(
             "input",
             {
               type: "search",
               "aria-label": "Search questions",
               placeholder: "Search questions, sections, answers\u2026",
-              value: filter.search,
-              onChange: (e) => set({ search: e.target.value }),
+              value: fs.search,
+              onChange: (e) => fs.setSearch(e.target.value),
               className: "w-full rounded-full border border-line-strong bg-surface py-1.5 pr-3 pl-9 text-[13px] outline-none focus:border-primary focus:bg-white max-sm:text-base"
             }
           )
         ] }),
-        /* @__PURE__ */ jsx21(Popover, { label: "Filters", icon: SlidersHorizontal, badge: inUse.length, align: "right", children: /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-4", children: [
-          /* @__PURE__ */ jsx21(FilterSection, { title: "Progress", children: progress.map(([key, title, yes, no]) => /* @__PURE__ */ jsx21(
-            ChipGroup,
-            {
-              title,
-              value: filter[key] === "all" ? null : filter[key],
-              onChange: (v) => set({ [key]: v ?? "all" }),
-              options: [
-                { value: "filled", label: yes },
-                { value: "empty", label: no }
-              ]
-            },
-            key
-          )) }),
-          choiceCount.length > 0 && /* @__PURE__ */ jsx21(
-            FilterSection,
-            {
-              title: "Answers",
-              action: /* @__PURE__ */ jsx21(
-                SegmentedTabs,
-                {
-                  size: "sm",
-                  value: choiceMode,
-                  onChange: (m) => {
-                    setChoiceMode(m);
-                    const c = filter.choices !== "all" ? filter.choices : filter.picked;
-                    if (c !== "all")
-                      set(m === "picked" ? { picked: c, choices: "all" } : { choices: c, picked: "all" });
-                  },
-                  options: [
-                    { value: "offered", label: "Has option" },
-                    { value: "picked", label: "Answered" }
-                  ]
-                }
-              ),
-              children: /* @__PURE__ */ jsx21(
-                ChipGroup,
-                {
-                  value: choiceValue === "all" ? null : choiceValue,
-                  onChange: (v) => set(choiceMode === "picked" ? { picked: v ?? "all" } : { choices: v ?? "all" }),
-                  options: choiceCount.map(([c, n]) => ({
-                    value: c,
-                    label: c,
-                    count: choiceMode === "picked" ? pickedCount.get(c) ?? 0 : n
-                  }))
-                }
-              )
-            }
-          ),
-          tagValues.length > 0 && /* @__PURE__ */ jsx21(FilterSection, { title: "Question details", children: tagValues.map(([key, values]) => /* @__PURE__ */ jsx21(
-            ChipGroup,
-            {
-              title: key,
-              value: filter.tags[key] ?? null,
-              onChange: (v) => setTag(key, v),
-              options: values.map((v) => ({ value: v, label: v, count: count((q) => q.tags?.[key] === v) }))
-            },
-            key
-          )) }),
-          types.length > 1 && /* @__PURE__ */ jsx21(FilterSection, { title: "Answer type", children: /* @__PURE__ */ jsx21(
-            ChipGroup,
-            {
-              value: filter.type === "all" ? null : filter.type,
-              onChange: (v) => set({ type: v ?? "all" }),
-              options: types.map((t) => ({
-                value: t,
-                label: TYPE_LABEL[t],
-                count: count((q) => q.parts.some((p) => p.field.type === t))
-              }))
-            }
-          ) })
-        ] }) }),
+        menu.length > 0 && /* @__PURE__ */ jsx22(Popover2, { label: "Filters", icon: SlidersHorizontal, badge: fs.inUse.length, align: "right", children: /* @__PURE__ */ jsx22("div", { className: "flex flex-col gap-4", children: sections.map((sec) => /* @__PURE__ */ jsx22(FilterSection, { title: sec, children: menu.filter((g) => (g.section ?? "") === sec).map((g) => /* @__PURE__ */ jsx22(
+          ChipGroup2,
+          {
+            title: g.title,
+            value: g.value,
+            onChange: g.set,
+            options: g.options
+          },
+          g.id
+        )) }, sec)) }) }),
         /* @__PURE__ */ jsxs16("span", { className: "text-[12.5px] text-muted sm:ml-auto", "aria-live": "polite", children: [
-          /* @__PURE__ */ jsx21("b", { className: "font-semibold text-ink-2", children: list.length }),
+          /* @__PURE__ */ jsx22("b", { className: "font-semibold text-ink-2", children: list.length }),
           " of ",
-          questions.length,
+          fs.total,
           " questions"
         ] }),
-        active && /* @__PURE__ */ jsx21(Button, { variant: "secondary", size: "sm", onClick: () => set(NO_FILTER), children: "Clear all" })
+        fs.active && /* @__PURE__ */ jsx22(Button2, { variant: "secondary", size: "sm", onClick: fs.clear, children: "Clear all" })
       ] }),
-      categories.length > 0 && /* @__PURE__ */ jsxs16("div", { role: "group", "aria-label": "Category", className: "flex flex-wrap items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx21("span", { className: "mr-1 text-[11.5px] font-semibold tracking-wide text-muted uppercase", children: "Category" }),
-        /* @__PURE__ */ jsx21(
-          Chip,
-          {
-            label: "All",
-            count: questions.length,
-            active: filter.category === "all",
-            onClick: () => set({ category: "all" })
-          }
-        ),
-        categories.map((c) => /* @__PURE__ */ jsx21(
-          Chip,
+      bar.map((g) => /* @__PURE__ */ jsxs16("div", { role: "group", "aria-label": g.title, className: "flex flex-wrap items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx22("span", { className: "mr-1 text-[11.5px] font-semibold tracking-wide text-muted uppercase", children: g.title }),
+        /* @__PURE__ */ jsx22(Chip2, { label: "All", count: fs.total, active: g.value == null, onClick: () => g.set(null) }),
+        g.options.map((o) => /* @__PURE__ */ jsx22(
+          Chip2,
           {
-            label: c,
-            count: count((q) => q.category === c),
-            active: filter.category === c,
-            onClick: () => set({ category: filter.category === c ? "all" : c })
+            label: o.label,
+            count: o.count,
+            active: g.value === o.value,
+            onClick: () => g.set(g.value === o.value ? null : o.value)
           },
-          c
+          o.value
         ))
-      ] }),
-      inUse.length > 0 && /* @__PURE__ */ jsx21("div", { className: "flex flex-wrap items-center gap-1.5", children: inUse.map((f) => /* @__PURE__ */ jsx21(RemovableChip, { label: f.label, onRemove: f.clear }, f.label)) })
+      ] }, g.id)),
+      fs.inUse.length > 0 && /* @__PURE__ */ jsx22("div", { className: "flex flex-wrap items-center gap-1.5", children: fs.inUse.map((f) => /* @__PURE__ */ jsx22(RemovableChip2, { label: f.label, onRemove: f.clear }, f.id)) })
     ] }),
-    list.length === 0 && /* @__PURE__ */ jsx21(EmptyText, { children: "No question matches these filters." }),
-    /* @__PURE__ */ jsx21("ul", { className: "m-0 flex list-none flex-col gap-2 p-0", children: list.slice(0, shown).map((q, i, all) => /* @__PURE__ */ jsxs16(Fragment5, { children: [
+    list.length === 0 && /* @__PURE__ */ jsx22(EmptyText2, { children: "No question matches these filters." }),
+    /* @__PURE__ */ jsx22("ul", { className: "m-0 flex list-none flex-col gap-2 p-0", children: list.slice(0, shown).map((q, i, all) => /* @__PURE__ */ jsxs16(Fragment5, { children: [
       q.section && q.section !== all[i - 1]?.section && /* @__PURE__ */ jsxs16("li", { className: "mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 border-b border-line pb-1", children: [
-        /* @__PURE__ */ jsx21("span", { className: "text-[13.5px] font-semibold text-primary lg:text-[15px]", children: q.section }),
-        Object.entries(q.tags ?? {}).map(([k, v]) => /* @__PURE__ */ jsxs16(Tag, { tone: "muted", children: [
+        /* @__PURE__ */ jsx22("span", { className: "text-[13.5px] font-semibold text-primary lg:text-[15px]", children: q.section }),
+        Object.entries(q.tags ?? {}).map(([k, v]) => /* @__PURE__ */ jsxs16(Tag2, { tone: "muted", children: [
           k,
           ": ",
           v
         ] }, k))
       ] }),
-      q.intro && (q.intro !== all[i - 1]?.intro || q.section !== all[i - 1]?.section) && /* @__PURE__ */ jsx21("li", { className: "rounded-md border-l-4 border-primary bg-primary-soft px-3 py-2 text-[13px] font-medium text-ink-2 lg:text-[14px]", children: q.intro }),
+      q.intro && (q.intro !== all[i - 1]?.intro || q.section !== all[i - 1]?.section) && /* @__PURE__ */ jsx22("li", { className: "rounded-md border-l-4 border-primary bg-primary-soft px-3 py-2 text-[13px] font-medium text-ink-2 lg:text-[14px]", children: q.intro }),
       /* @__PURE__ */ jsxs16("li", { className: "rounded-lg border border-line bg-white p-3", children: [
         /* @__PURE__ */ jsxs16("div", { className: "mb-2 flex items-start gap-2", children: [
-          /* @__PURE__ */ jsx21("p", { className: "m-0 min-w-0 flex-1 text-[13.5px] font-semibold whitespace-pre-line text-ink-2 lg:text-[15px]", children: q.title }),
-          q.category && /* @__PURE__ */ jsx21(Tag, { tone: "muted", children: q.category }),
-          /* @__PURE__ */ jsxs16(Tag, { tone: "muted", children: [
+          /* @__PURE__ */ jsx22("p", { className: "m-0 min-w-0 flex-1 text-[13.5px] font-semibold whitespace-pre-line text-ink-2 lg:text-[15px]", children: q.title }),
+          q.category && /* @__PURE__ */ jsx22(Tag2, { tone: "muted", children: q.category }),
+          /* @__PURE__ */ jsxs16(Tag2, { tone: "muted", children: [
             "p.",
             q.page
           ] })
         ] }),
-        q.columns ? /* @__PURE__ */ jsx21(TableGrid, { q, control }) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
-          q.rows && /* @__PURE__ */ jsx21(OptionGrid, { rows: q.rows, parts: q.parts.slice(0, gridSize(q)), control }),
-          q.parts.length > gridSize(q) && /* @__PURE__ */ jsx21("div", { className: `flex flex-wrap items-end gap-x-4 gap-y-2 ${q.rows ? "mt-3" : ""}`, children: q.parts.slice(gridSize(q)).map(({ field, name }) => /* @__PURE__ */ jsxs16(
+        q.columns ? /* @__PURE__ */ jsx22(TableGrid, { q, control }) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
+          q.rows && /* @__PURE__ */ jsx22(OptionGrid, { rows: q.rows, parts: q.parts.slice(0, gridSize(q)), control }),
+          q.parts.length > gridSize(q) && /* @__PURE__ */ jsx22("div", { className: `flex flex-wrap items-end gap-x-4 gap-y-2 ${q.rows ? "mt-3" : ""}`, children: q.parts.slice(gridSize(q)).map(({ field, name }) => /* @__PURE__ */ jsxs16(
             "div",
             {
               className: `flex min-w-0 flex-col gap-1 ${wide(field.type) ? "basis-full" : ""} ${field.type === "checkbox" ? "flex-row-reverse items-center justify-end gap-2" : "max-sm:basis-full"}`,
               children: [
-                name && /* @__PURE__ */ jsx21("span", { className: "text-[12px] text-muted lg:text-[13.5px]", children: name }),
-                /* @__PURE__ */ jsx21(
+                name && /* @__PURE__ */ jsx22("span", { className: "text-[12px] text-muted lg:text-[13.5px]", children: name }),
+                /* @__PURE__ */ jsx22(
                   "div",
                   {
                     className: `relative [container-type:size] ${SIZE[field.type] ?? "h-9 w-full sm:w-80 lg:h-10 lg:w-96"}`,
@@ -2658,7 +2780,7 @@ function QuestionList({
         ] })
       ] })
     ] }, q.id)) }),
-    list.length > shown && /* @__PURE__ */ jsx21("div", { className: "mt-3 text-center", children: /* @__PURE__ */ jsxs16(Button, { variant: "secondary", size: "sm", onClick: () => setShown((n) => n + PAGE), children: [
+    list.length > shown && /* @__PURE__ */ jsx22("div", { className: "mt-3 text-center", children: /* @__PURE__ */ jsxs16(Button2, { variant: "secondary", size: "sm", onClick: () => setShown((n) => n + PAGE), children: [
       "Show more (",
       list.length - shown,
       " left)"
@@ -2671,7 +2793,7 @@ function OptionGrid({
   control
 }) {
   const starts = new Set(rows.map((_, i) => rows.slice(0, i).reduce((a, b) => a + b, 0)));
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "div",
     {
       className: "grid grid-cols-2 gap-x-4 gap-y-2 sm:grid-cols-[repeat(var(--cols),minmax(0,1fr))]",
@@ -2681,8 +2803,8 @@ function OptionGrid({
         {
           className: `flex min-w-0 items-center gap-2 text-[13px] text-ink-2 lg:text-[14.5px] ${starts.has(i) ? "sm:col-start-1" : ""}`,
           children: [
-            /* @__PURE__ */ jsx21("div", { className: "relative h-6 w-6 shrink-0 [container-type:size] lg:h-7 lg:w-7", children: control(field) }),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx22("div", { className: "relative h-6 w-6 shrink-0 [container-type:size] lg:h-7 lg:w-7", children: control(field) }),
+            /* @__PURE__ */ jsx22(
               "span",
               {
                 className: "min-w-0 cursor-pointer break-words",
@@ -2699,13 +2821,13 @@ function OptionGrid({
 }
 function TableGrid({ q, control }) {
   const rows = q.rows.map((n, i) => q.parts.slice(q.rows.slice(0, i).reduce((a, b) => a + b, 0)).slice(0, n));
-  return /* @__PURE__ */ jsx21("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs16("table", { className: "w-full border-separate border-spacing-x-2 border-spacing-y-1.5 text-left", children: [
-    /* @__PURE__ */ jsx21("thead", { className: q.columns.some(Boolean) ? "" : "sr-only", children: /* @__PURE__ */ jsxs16("tr", { children: [
-      q.rowNames && /* @__PURE__ */ jsx21("th", {}),
-      q.columns.map((c, i) => /* @__PURE__ */ jsx21("th", { scope: "col", className: "min-w-32 px-0 text-[12px] font-medium text-muted lg:text-[13.5px]", children: c }, i))
+  return /* @__PURE__ */ jsx22("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs16("table", { className: "w-full border-separate border-spacing-x-2 border-spacing-y-1.5 text-left", children: [
+    /* @__PURE__ */ jsx22("thead", { className: q.columns.some(Boolean) ? "" : "sr-only", children: /* @__PURE__ */ jsxs16("tr", { children: [
+      q.rowNames && /* @__PURE__ */ jsx22("th", {}),
+      q.columns.map((c, i) => /* @__PURE__ */ jsx22("th", { scope: "col", className: "min-w-32 px-0 text-[12px] font-medium text-muted lg:text-[13.5px]", children: c }, i))
     ] }) }),
-    /* @__PURE__ */ jsx21("tbody", { children: rows.map((row, r) => /* @__PURE__ */ jsxs16("tr", { children: [
-      q.rowNames && /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22("tbody", { children: rows.map((row, r) => /* @__PURE__ */ jsxs16("tr", { children: [
+      q.rowNames && /* @__PURE__ */ jsx22(
         "th",
         {
           scope: "row",
@@ -2713,7 +2835,7 @@ function TableGrid({ q, control }) {
           children: q.rowNames[r]
         }
       ),
-      row.map(({ field }) => /* @__PURE__ */ jsx21("td", { className: "p-0 align-middle", children: /* @__PURE__ */ jsx21(
+      row.map(({ field }) => /* @__PURE__ */ jsx22("td", { className: "p-0 align-middle", children: /* @__PURE__ */ jsx22(
         "div",
         {
           className: `relative [container-type:size] ${field.type === "checkbox" ? "h-7 w-7" : `${field.type === "textarea" ? "h-16" : "h-9 lg:h-10"} w-full min-w-32`}`,
@@ -2726,25 +2848,15 @@ function TableGrid({ q, control }) {
 function FilterSection({ title, action, children }) {
   return /* @__PURE__ */ jsxs16("section", { className: "flex flex-col gap-2 border-b border-line-soft pb-3 last:border-0 last:pb-0", children: [
     /* @__PURE__ */ jsxs16("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsx21("h4", { className: "m-0 text-[13px] font-semibold text-ink", children: title }),
+      /* @__PURE__ */ jsx22("h4", { className: "m-0 text-[13px] font-semibold text-ink", children: title }),
       action
     ] }),
     children
   ] });
 }
 
-// src/react/FormFiller.tsx
-import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
-var humanSize = (n) => {
-  if (!n) return "";
-  const units = ["B", "KB", "MB", "GB"];
-  let i = 0;
-  while (n >= 1024 && i < units.length - 1) {
-    n /= 1024;
-    i++;
-  }
-  return `${n.toFixed(i ? 1 : 0)} ${units[i]}`;
-};
+// src/react/hooks/useFormFiller.ts
+import { useCallback as useCallback3, useEffect as useEffect7, useMemo as useMemo3, useRef as useRef7, useState as useState12 } from "react";
 function download(blob, name) {
   const url = URL.createObjectURL(blob);
   const a = document.createElement("a");
@@ -2753,11 +2865,9 @@ function download(blob, name) {
   a.click();
   setTimeout(() => URL.revokeObjectURL(url), 1e3);
 }
-function FormFiller({
-  pdf: pdfSource,
+function useFormFiller({
   fields,
   layout = null,
-  title,
   initialAnswers,
   files: initialFiles = [],
   readOnly = false,
@@ -2766,36 +2876,29 @@ function FormFiller({
   autosave = 2500,
   onUpload,
   loadFile,
-  onBack,
-  toolbar,
+  toQuestions: toQuestions2 = toQuestions,
   notify = () => {
   },
-  onError: notifyError = (e) => console.error(e),
-  className = "h-full"
+  onError: notifyError = (e) => console.error(e)
 }) {
-  const [answers, setAnswers] = useState10(() => initialAnswers ?? defaultAnswers(fields));
-  const [files, setFiles] = useState10(initialFiles);
-  const [signatures, setSignatures] = useState10({});
-  const [errors, setErrors] = useState10({});
-  const [pdfWidth, setPdfWidth] = useState10(595);
-  const pageWidth = Math.max(...layout?.pages.map((p) => p.width) ?? [pdfWidth]);
-  const { zoom, setZoom, ref: fitRef } = useFitZoom(pageWidth);
-  const compact = useCompact();
-  const [saveState, setSaveState] = useState10("saved");
-  const [hasSaved, setHasSaved] = useState10(!!initialAnswers);
-  const [confirmSubmit, setConfirmSubmit] = useState10(false);
-  const [loadError, setLoadError] = useState10("");
-  const queue = useRef6(Promise.resolve());
-  const latest = useRef6(answers);
-  useEffect5(() => {
+  const [answers, setAnswers] = useState12(() => initialAnswers ?? defaultAnswers(fields));
+  const [files, setFiles] = useState12(initialFiles);
+  const [signatures, setSignatures] = useState12({});
+  const [errors, setErrors] = useState12({});
+  const [saveState, setSaveState] = useState12("saved");
+  const [hasSaved, setHasSaved] = useState12(!!initialAnswers);
+  const [pdf, setPdf] = useState12(null);
+  const [pdfSizes, setPdfSizes] = useState12([]);
+  const queue = useRef7(Promise.resolve());
+  const latest = useRef7(answers);
+  useEffect7(() => {
     latest.current = answers;
   }, [answers]);
   const states = useMemo3(() => fieldStates(fields, answers), [fields, answers]);
-  const [view, setView] = useState10("document");
-  const [pdf, setPdf] = useState10(null);
-  const [pageText, setPageText] = useState10(null);
-  useEffect5(() => {
-    if (view !== "list" || !pdf || pageText) return;
+  const [wantText, setWantText] = useState12(false);
+  const [pageText, setPageText] = useState12(null);
+  useEffect7(() => {
+    if (!wantText || !pdf || pageText) return;
     let live = true;
     (async () => {
       const out = {};
@@ -2808,7 +2911,7 @@ function FormFiller({
     return () => {
       live = false;
     };
-  }, [view, pdf, pageText]);
+  }, [wantText, pdf, pageText]);
   const visibleKeys = fields.filter((f) => states[f.key]?.visible).map((f) => f.key).join(",");
   const questions = useMemo3(() => {
     const keys = new Set(visibleKeys.split(","));
@@ -2816,13 +2919,13 @@ function FormFiller({
       const source = layout ? layout.pages[page - 1]?.source : page;
       return source ? pageText?.[source] : void 0;
     };
-    return toQuestions(
+    return toQuestions2(
       fields.filter((f) => keys.has(f.key)),
       textOf
     );
-  }, [fields, layout, visibleKeys, pageText]);
-  const loading = useRef6(/* @__PURE__ */ new Set());
-  useEffect5(() => {
+  }, [fields, layout, visibleKeys, pageText, toQuestions2]);
+  const loading = useRef7(/* @__PURE__ */ new Set());
+  useEffect7(() => {
     if (!loadFile) return;
     for (const f of fields) {
       const v = answers[f.key];
@@ -2832,11 +2935,11 @@ function FormFiller({
       loadFile(v).then((blob) => setSignatures((m) => ({ ...m, [v]: URL.createObjectURL(blob) }))).catch(() => loading.current.delete(v));
     }
   }, [fields, answers, signatures, loadFile]);
-  const urls = useRef6(signatures);
-  useEffect5(() => {
+  const urls = useRef7(signatures);
+  useEffect7(() => {
     urls.current = signatures;
   }, [signatures]);
-  useEffect5(() => () => Object.values(urls.current).forEach((u) => URL.revokeObjectURL(u)), []);
+  useEffect7(() => () => Object.values(urls.current).forEach((u) => URL.revokeObjectURL(u)), []);
   const save = useCallback3(
     (submit2 = false) => {
       if (!onSave) return Promise.resolve(true);
@@ -2860,7 +2963,7 @@ function FormFiller({
     },
     [onSave, notifyError]
   );
-  useEffect5(() => {
+  useEffect7(() => {
     if (readOnly || autosave === false || !onSave || saveState !== "dirty") return;
     const t = setTimeout(() => void save(), autosave);
     return () => clearTimeout(t);
@@ -2889,135 +2992,248 @@ function FormFiller({
     }
   }
   const fetchFile = (id, then) => loadFile?.(id).then(then, () => notifyError("Unable to open the file"));
+  const openFile = (id) => fetchFile(id, (blob) => {
+    const url = URL.createObjectURL(blob);
+    window.open(url, "_blank");
+    setTimeout(() => URL.revokeObjectURL(url), 6e4);
+  });
+  const downloadFile = (id, name) => fetchFile(id, (blob) => download(blob, name));
   async function submit() {
-    setConfirmSubmit(false);
     const found = validateAnswers(fields, answers);
     setErrors(found);
-    if (Object.keys(found).length) return notifyError("Some answers need attention");
-    if (await save(true)) {
-      notify("Submitted");
-      onSubmitted?.(latest.current);
+    if (Object.keys(found).length) {
+      notifyError("Some answers need attention");
+      return false;
     }
+    if (!await save(true)) return false;
+    notify("Submitted");
+    onSubmitted?.(latest.current);
+    return true;
   }
-  if (loadError) return /* @__PURE__ */ jsx22("p", { className: "fl-root p-6 text-center text-sm text-danger", children: loadError });
   const fileOf = (id) => files.find((x) => x.id === id);
-  const attachments = files.filter(
-    (x) => fields.some((f) => f.type === "file" && f.key === x.fieldKey && answers[f.key] === x.id)
-  );
-  const errorList = fields.filter((f) => errors[f.key]);
+  return {
+    answers,
+    /** Visible / required / readOnly per field key, from the conditions and current answers. */
+    states,
+    /** Field key → message. */
+    errors,
+    setErrors,
+    /** Fields with an error, in form order. */
+    errorList: fields.filter((f) => errors[f.key]),
+    change,
+    save,
+    submit,
+    saveState,
+    hasSaved,
+    readOnly,
+    files,
+    fileOf,
+    /** Files of upload fields that are answers now. */
+    attachments: files.filter(
+      (x) => fields.some((f) => f.type === "file" && f.key === x.fieldKey && answers[f.key] === x.id)
+    ),
+    attach,
+    canUpload: !!onUpload,
+    canLoadFiles: !!loadFile,
+    openFile,
+    downloadFile,
+    /** Image src of a signature answer (stored file or data URL). */
+    signatureSrc: (f) => signatures[String(answers[f.key])],
+    /** Visible fields grouped as questions (tables, option groups), titled from the PDF text once loaded. */
+    questions,
+    /** Reads the PDF text so `questions` get real titles (call when you first show them). */
+    loadPageText: () => setWantText(true),
+    pdf,
+    pdfSizes,
+    /** Pass to PdfPages' onLoaded. */
+    onPdfLoaded: (sizes2, doc) => {
+      setPdf(doc);
+      setPdfSizes(sizes2);
+    }
+  };
+}
+
+// src/react/FormFiller.tsx
+import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+var humanSize = (n) => {
+  if (!n) return "";
+  const units = ["B", "KB", "MB", "GB"];
+  let i = 0;
+  while (n >= 1024 && i < units.length - 1) {
+    n /= 1024;
+    i++;
+  }
+  return `${n.toFixed(i ? 1 : 0)} ${units[i]}`;
+};
+function FormFiller({
+  pdf: pdfSource,
+  title,
+  onBack,
+  toolbar,
+  components,
+  hide = [],
+  views = ["document", "list"],
+  listFilters,
+  listSearch,
+  hideUnavailableFilters,
+  renderFilters,
+  confirmSubmit: askFirst = true,
+  className = "h-full",
+  ...options
+}) {
+  const shows = (p) => !hide.includes(p);
+  const ff = useFormFiller(options);
+  const { fields, readOnly = false, onSave } = options;
+  const layout = options.layout ?? null;
+  const { answers, states, errors } = ff;
+  const pdfWidth = ff.pdfSizes.length ? Math.max(...ff.pdfSizes.map((p) => p.width)) : 595;
+  const { zoom, setZoom, ref: fitRef } = useFitZoom(Math.max(...layout?.pages.map((p) => p.width) ?? [pdfWidth]));
+  const compact = useCompact();
+  const [confirmSubmit, setConfirmSubmit] = useState13(false);
+  const [loadError, setLoadError] = useState13("");
+  const [view, setView] = useState13(views[0] ?? "document");
+  const { loadPageText } = ff;
+  useEffect8(() => {
+    if (view === "list") loadPageText();
+  }, [view, loadPageText]);
+  if (loadError) return /* @__PURE__ */ jsx23("p", { className: "fl-root p-6 text-center text-sm text-danger", children: loadError });
   const control = (f) => /* @__PURE__ */ jsxs17(Fragment7, { children: [
-    /* @__PURE__ */ jsx22(
-      FieldControl,
+    /* @__PURE__ */ jsx23(
+      AnswerControl,
       {
+        components,
         field: f,
         value: answers[f.key],
-        readOnly: readOnly || states[f.key].readOnly || f.type === "file" && !onUpload,
+        readOnly: readOnly || states[f.key].readOnly || f.type === "file" && !ff.canUpload,
         compact,
         error: errors[f.key],
-        onChange: (v) => change(f, v),
-        fileName: fileOf(answers[f.key])?.fileName,
-        signatureSrc: signatures[String(answers[f.key])],
-        onFile: onUpload ? (file) => void attach(f, file) : void 0,
-        onOpenFile: () => fetchFile(String(answers[f.key]), (blob) => {
-          const url = URL.createObjectURL(blob);
-          window.open(url, "_blank");
-          setTimeout(() => URL.revokeObjectURL(url), 6e4);
-        })
+        onChange: (v) => ff.change(f, v),
+        fileName: ff.fileOf(answers[f.key])?.fileName,
+        signatureSrc: ff.signatureSrc(f),
+        onFile: ff.canUpload ? (file) => void ff.attach(f, file) : void 0,
+        onOpenFile: () => ff.openFile(String(answers[f.key]))
       }
     ),
-    states[f.key].required && !readOnly && /* @__PURE__ */ jsx22("span", { className: "pointer-events-none absolute -top-1.5 -right-1.5 text-[12px] font-bold text-danger", children: "*" })
+    states[f.key].required && !readOnly && shows("requiredMark") && /* @__PURE__ */ jsx23("span", { className: "pointer-events-none absolute -top-1.5 -right-1.5 text-[12px] font-bold text-danger", children: "*" })
   ] });
-  return /* @__PURE__ */ jsxs17("div", { className: `fl-root flex min-h-[min(600px,100dvh)] flex-col bg-white text-ink ${className}`, children: [
+  return /* @__PURE__ */ jsx23(FormliftProvider, { components, children: /* @__PURE__ */ jsxs17("div", { className: `fl-root flex min-h-[min(600px,100dvh)] flex-col bg-white text-ink ${className}`, children: [
     /* @__PURE__ */ jsxs17("div", { className: "flex flex-wrap items-center gap-3 border-b border-line bg-white px-4 py-2.5", children: [
-      onBack && /* @__PURE__ */ jsx22(Button, { variant: "secondary", size: "sm", icon: ArrowLeft2, onClick: onBack, children: "Back" }),
-      title != null && /* @__PURE__ */ jsx22("h2", { className: "m-0 min-w-0 flex-1 truncate text-[17px] font-semibold max-sm:text-[15px] sm:flex-none", children: title }),
-      /* @__PURE__ */ jsx22(
-        SegmentedTabs,
+      onBack && shows("back") && /* @__PURE__ */ jsx23(Button2, { variant: "secondary", size: "sm", icon: ArrowLeft2, onClick: onBack, children: "Back" }),
+      title != null && shows("title") && /* @__PURE__ */ jsx23("h2", { className: "m-0 min-w-0 flex-1 truncate text-[17px] font-semibold max-sm:text-[15px] sm:flex-none", children: title }),
+      views.length > 1 && shows("views") && /* @__PURE__ */ jsx23(
+        SegmentedTabs2,
         {
-          options: [
-            { value: "document", label: "Document" },
-            { value: "list", label: "List" }
-          ],
+          options: views.map((v) => ({ value: v, label: v === "document" ? "Document" : "List" })),
           value: view,
           onChange: setView
         }
       ),
       /* @__PURE__ */ jsxs17("div", { className: "ml-auto flex flex-wrap items-center gap-2 max-sm:w-full max-sm:justify-end", children: [
-        view === "document" && /* @__PURE__ */ jsx22(ZoomControls, { zoom, onChange: setZoom }),
+        view === "document" && shows("zoom") && /* @__PURE__ */ jsx23(ZoomControls, { zoom, onChange: setZoom }),
         !readOnly && onSave && /* @__PURE__ */ jsxs17(Fragment7, { children: [
-          /* @__PURE__ */ jsx22("span", { className: "text-right text-[12px] text-muted sm:w-24", "aria-live": "polite", children: {
-            saved: hasSaved ? "Draft saved" : "",
+          shows("saveStatus") && /* @__PURE__ */ jsx23("span", { className: "text-right text-[12px] text-muted sm:w-24", "aria-live": "polite", children: {
+            saved: ff.hasSaved ? "Draft saved" : "",
             dirty: "Unsaved",
             saving: "Saving\u2026",
             error: "Not saved"
-          }[saveState] }),
-          /* @__PURE__ */ jsx22(Button, { variant: "secondary", size: "sm", icon: Save2, title: "Save draft", onClick: () => void save(), children: /* @__PURE__ */ jsx22("span", { className: "max-sm:hidden", children: "Save draft" }) }),
-          /* @__PURE__ */ jsx22(Button, { size: "sm", icon: Send, onClick: () => setConfirmSubmit(true), children: "Submit" })
+          }[ff.saveState] }),
+          shows("saveDraft") && /* @__PURE__ */ jsx23(Button2, { variant: "secondary", size: "sm", icon: Save2, title: "Save draft", onClick: () => void ff.save(), children: /* @__PURE__ */ jsx23("span", { className: "max-sm:hidden", children: "Save draft" }) }),
+          shows("submit") && /* @__PURE__ */ jsx23(Button2, { size: "sm", icon: Send, onClick: () => askFirst ? setConfirmSubmit(true) : void ff.submit(), children: "Submit" })
         ] }),
         toolbar
       ] })
     ] }),
-    attachments.length > 0 && /* @__PURE__ */ jsxs17("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 border-b border-line bg-white px-4 py-1.5 text-[12.5px]", children: [
+    ff.attachments.length > 0 && shows("attachments") && /* @__PURE__ */ jsxs17("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 border-b border-line bg-white px-4 py-1.5 text-[12.5px]", children: [
       /* @__PURE__ */ jsxs17("span", { className: "inline-flex items-center gap-1 font-semibold text-ink-2", children: [
-        /* @__PURE__ */ jsx22(Paperclip2, { size: 13 }),
+        /* @__PURE__ */ jsx23(Paperclip2, { size: 13 }),
         " Attachments"
       ] }),
-      attachments.map((x) => /* @__PURE__ */ jsxs17(
+      ff.attachments.map((x) => /* @__PURE__ */ jsxs17(
         "button",
         {
           type: "button",
           title: `Download ${x.fileName}`,
-          disabled: !loadFile,
+          disabled: !ff.canLoadFiles,
           className: "inline-flex max-w-full cursor-pointer items-center gap-1 text-primary hover:underline disabled:cursor-default",
-          onClick: () => fetchFile(x.id, (blob) => download(blob, x.fileName)),
+          onClick: () => ff.downloadFile(x.id, x.fileName),
           children: [
-            /* @__PURE__ */ jsx22("span", { className: "truncate", children: x.fileName }),
+            /* @__PURE__ */ jsx23("span", { className: "truncate", children: x.fileName }),
             x.fileSize ? /* @__PURE__ */ jsxs17("span", { className: "text-muted", children: [
               "(",
               humanSize(x.fileSize),
               ")"
             ] }) : null,
-            loadFile && /* @__PURE__ */ jsx22(Download, { size: 12 })
+            ff.canLoadFiles && /* @__PURE__ */ jsx23(Download, { size: 12 })
           ]
         },
         x.id
       ))
     ] }),
-    errorList.length > 0 && /* @__PURE__ */ jsx22("ul", { className: "m-0 border-b border-danger/30 bg-danger/5 px-6 py-2 text-[13px] text-danger", children: errorList.map((f) => /* @__PURE__ */ jsxs17("li", { children: [
+    ff.errorList.length > 0 && shows("errors") && /* @__PURE__ */ jsx23("ul", { className: "m-0 border-b border-danger/30 bg-danger/5 px-6 py-2 text-[13px] text-danger", children: ff.errorList.map((f) => /* @__PURE__ */ jsxs17("li", { children: [
       "Page ",
       f.position.page,
       ": ",
       errors[f.key]
     ] }, f.key)) }),
-    view === "list" && /* @__PURE__ */ jsx22("div", { className: "flex-1 overflow-auto bg-hover", children: /* @__PURE__ */ jsx22(QuestionList, { questions, answers, control }) }),
-    /* @__PURE__ */ jsx22("div", { ref: fitRef, className: `flex-1 overflow-auto bg-hover ${view === "list" ? "hidden" : ""}`, children: /* @__PURE__ */ jsx22(
+    view === "list" && /* @__PURE__ */ jsx23("div", { className: "flex-1 overflow-auto bg-hover", children: /* @__PURE__ */ jsx23(
+      QuestionList,
+      {
+        questions: ff.questions,
+        answers,
+        control,
+        filters: listFilters,
+        search: listSearch,
+        hideUnavailable: hideUnavailableFilters,
+        renderToolbar: renderFilters
+      }
+    ) }),
+    /* @__PURE__ */ jsx23("div", { ref: fitRef, className: `flex-1 overflow-auto bg-hover ${view === "list" ? "hidden" : ""}`, children: /* @__PURE__ */ jsx23(
       PdfPages,
       {
         load: pdfSource,
         zoom,
         pages: layout?.pages,
-        onLoaded: (sizes2, doc) => {
-          setPdf(doc);
-          if (sizes2.length) setPdfWidth(Math.max(...sizes2.map((p) => p.width)));
-        },
+        onLoaded: ff.onPdfLoaded,
         onError: () => setLoadError("The document could not be shown"),
         overlay: (page) => [
           // The admin's text / boxes / lines first, the answer controls on top.
-          ...(layout?.elements ?? []).filter((el) => el.page === page).map((el) => /* @__PURE__ */ jsx22(LayoutElementView, { element: el, pageHeight: layout.pages[page - 1]?.height ?? 842 }, el.id)),
-          ...fields.filter((f) => f.position.page === page && states[f.key]?.visible).map((f) => /* @__PURE__ */ jsx22("div", { className: "absolute [container-type:size]", style: boxStyle(f.position), children: control(f) }, f.id))
+          ...(layout?.elements ?? []).filter((el) => el.page === page).map((el) => /* @__PURE__ */ jsx23(LayoutElementView, { element: el, pageHeight: layout.pages[page - 1]?.height ?? 842 }, el.id)),
+          ...fields.filter((f) => f.position.page === page && states[f.key]?.visible).map((f) => /* @__PURE__ */ jsx23("div", { className: "absolute [container-type:size]", style: boxStyle(f.position), children: control(f) }, f.id))
         ]
       }
     ) }),
-    confirmSubmit && /* @__PURE__ */ jsx22(ConfirmModal, { confirmLabel: "Submit", onConfirm: () => void submit(), onCancel: () => setConfirmSubmit(false), children: "Submit this form? You cannot change the answers afterwards." })
-  ] });
+    confirmSubmit && /* @__PURE__ */ jsx23(
+      ConfirmModal2,
+      {
+        confirmLabel: "Submit",
+        onConfirm: () => {
+          setConfirmSubmit(false);
+          void ff.submit();
+        },
+        onCancel: () => setConfirmSubmit(false),
+        children: "Submit this form? You cannot change the answers afterwards."
+      }
+    )
+  ] }) });
 }
 export {
+  AnswerControl,
   FieldControl,
   FormEditor,
   FormFiller,
+  FormliftProvider,
+  LayoutElementView,
   PdfPages,
+  QuestionList,
   TYPE_LABEL,
+  defaultComponents,
+  defaultFilters,
   readPdf,
-  setPdfWorker
+  setPdfWorker,
+  useFitZoom,
+  useFormEditor,
+  useFormFiller,
+  useQuestionFilter,
+  useUndo
 };
 //# sourceMappingURL=index.js.map