formlift 0.1.0 → 0.2.0

package/dist/react/index.cjs

@@ -23,8 +23,7 @@
 
 
 
-
-var _chunk5VHPTLLVcjs = require('../chunk-5VHPTLLV.cjs');
+var _chunk33XWO4KBcjs = require('../chunk-33XWO4KB.cjs');
 
 
 
@@ -56,15 +55,11 @@ var _chunk7NZPYWL3cjs = require('../chunk-7NZPYWL3.cjs');
 
 
 var _lucidereact = require('lucide-react');
+var _react = require('react');
 
+// src/react/ui/slots.tsx
 
 
-
-
-
-
-var _react = require('react');
-
 // src/react/ui/Button.tsx
 var _jsxruntime = require('react/jsx-runtime');
 var variants = {
@@ -103,6 +98,143 @@ function Button({
   );
 }
 
+// src/react/ui/Checkbox.tsx
+
+function Checkbox({
+  label,
+  className = "",
+  ...rest
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "input",
+    {
+      type: "checkbox",
+      "aria-label": label,
+      className: `h-[18px] w-[18px] flex-none cursor-pointer accent-primary ${className}`,
+      ...rest
+    }
+  );
+}
+
+// src/react/ui/Chip.tsx
+
+
+function Chip({
+  label,
+  count,
+  active,
+  onClick
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "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__ */ _jsxruntime.jsx.call(void 0, 
+          "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__ */ _jsxruntime.jsxs.call(void 0, "div", { role: "group", "aria-label": title, className: "flex flex-wrap items-center gap-1.5", children: [
+    title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, 
+      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__ */ _jsxruntime.jsxs.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, 
+      "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__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, { size: 12 })
+      }
+    )
+  ] });
+}
+
+// src/react/ui/FormField.tsx
+
+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__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "block text-[13.5px]", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "mb-1 block font-semibold", children: [
+      label,
+      " ",
+      required && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-danger", children: "*" })
+    ] }),
+    children,
+    error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "small", { className: "text-danger", children: error })
+  ] });
+}
+var TextInput = ({ className = "", ...rest }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { className: `${inputClass} ${className}`, ...rest });
+var Select = ({ className = "", ...rest }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "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__ */ _jsxruntime.jsx.call(void 0, "textarea", { className: `${inputClass} resize-none ${className}`, ...rest });
+
+// src/react/ui/IconButton.tsx
+
+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__ */ _jsxruntime.jsx.call(void 0, 
+    "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__ */ _jsxruntime.jsx.call(void 0, Icon, { size: iconSize })
+    }
+  );
+}
+
 // src/react/ui/Modal.tsx
 
 function Modal({ children, onClose, width }) {
@@ -154,31 +286,6 @@ function ConfirmModal({
   ] });
 }
 
-// src/react/ui/IconButton.tsx
-
-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__ */ _jsxruntime.jsx.call(void 0, 
-    "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__ */ _jsxruntime.jsx.call(void 0, Icon, { size: iconSize })
-    }
-  );
-}
-
 // src/react/ui/Panel.tsx
 
 var PanelHeading = ({ children, actions }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-between bg-heading px-3.5 py-[11px] text-[13px] font-bold tracking-[0.02em] text-white", children: [
@@ -187,6 +294,65 @@ var PanelHeading = ({ children, actions }) => /* @__PURE__ */ _jsxruntime.jsxs.c
 ] });
 var EmptyText = ({ children, className = "" }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: `m-0 px-3.5 py-3 text-[13px] text-muted ${className}`, children });
 
+// src/react/ui/Popover.tsx
+
+
+// src/react/ui/useOutsideClose.ts
+
+function useOutsideClose(ref, open, onClose) {
+  _react.useEffect.call(void 0, () => {
+    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
+
+function Popover({
+  label,
+  icon: Icon,
+  badge,
+  align = "left",
+  children
+}) {
+  const [open, setOpen] = _react.useState.call(void 0, false);
+  const box2 = _react.useRef.call(void 0, null);
+  useOutsideClose(box2, open, () => setOpen(false));
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref: box2, className: "relative", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "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__ */ _jsxruntime.jsx.call(void 0, Icon, { size: 15 }),
+          label,
+          !!badge && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, 
+      "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
 
 function SegmentedTabs({
@@ -209,52 +375,156 @@ function SegmentedTabs({
   )) });
 }
 
-// src/react/ui/Checkbox.tsx
-
-function Checkbox({
-  label,
-  className = "",
-  ...rest
-}) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "input",
-    {
-      type: "checkbox",
-      "aria-label": label,
-      className: `h-[18px] w-[18px] flex-none cursor-pointer accent-primary ${className}`,
-      ...rest
-    }
-  );
-}
+// src/react/ui/SignaturePad.tsx
+
+
+function SignaturePad({
+  onSave,
+  onCancel,
+  maxWidth = 600
+}) {
+  const canvas = _react.useRef.call(void 0, null);
+  const last = _react.useRef.call(void 0, null);
+  const [empty, setEmpty] = _react.useState.call(void 0, 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 = _optionalChain([canvas, 'access', _2 => _2.current, 'optionalAccess', _3 => _3.getContext, 'call', _4 => _4("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;
+    _optionalChain([c, 'optionalAccess', _5 => _5.getContext, 'call', _6 => _6("2d"), 'optionalAccess', _7 => _7.clearRect, 'call', _8 => _8(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);
+    _optionalChain([out, 'access', _9 => _9.getContext, 'call', _10 => _10("2d"), 'optionalAccess', _11 => _11.drawImage, 'call', _12 => _12(c, 0, 0, out.width, out.height)]);
+    onSave(out.toDataURL("image/png"));
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-3", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "secondary", onClick: clear, children: "Clear" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "secondary", onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { disabled: empty, onClick: save, children: "Use signature" })
+    ] })
+  ] });
+}
+
+// src/react/ui/Tag.tsx
 
-// src/react/ui/FormField.tsx
+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__ */ _jsxruntime.jsx.call(void 0, 
+  "span",
+  {
+    className: `inline-block rounded-full px-2.5 py-0.5 text-[11px] font-semibold whitespace-nowrap ${tones[tone]}`,
+    children
+  }
+);
 
-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,
+// src/react/ui/slots.tsx
+
+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 = _react.createContext.call(void 0, {});
+function FormliftProvider({
+  components,
   children
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "block text-[13.5px]", children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "mb-1 block font-semibold", children: [
-      label,
-      " ",
-      required && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-danger", children: "*" })
-    ] }),
-    children,
-    error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "small", { className: "text-danger", children: error })
-  ] });
+  const outer = _react.useContext.call(void 0, UIContext);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UIContext.Provider, { value: components ? { ...outer, ...components } : outer, children });
 }
-var TextInput = ({ className = "", ...rest }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { className: `${inputClass} ${className}`, ...rest });
-var Select = ({ className = "", ...rest }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  "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__ */ _jsxruntime.jsx.call(void 0, "textarea", { className: `${inputClass} resize-none ${className}`, ...rest });
+function slot(name) {
+  const Slot = (props) => {
+    const C = _nullishCoalesce(_react.useContext.call(void 0, UIContext)[name], () => ( base[name]));
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 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
 
@@ -270,7 +540,7 @@ function ColorField({
   onChange,
   allowNone
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField, { label, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField2, { label, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "input",
       {
@@ -283,7 +553,7 @@ function ColorField({
     ),
     allowNone && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "inline-flex items-center gap-1.5 text-[12.5px]", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        Checkbox,
+        Checkbox2,
         {
           label: `No ${label.toLowerCase()}`,
           checked: !value,
@@ -307,7 +577,7 @@ function ElementProperties({
     if (e.type === "line")
       set({ position: { ...p, width: Math.min(p.width, 1 - p.x), height: Math.min(p.height, 1 - p.y) } });
     else {
-      const { page: _page, ...fitted } = _chunk5VHPTLLVcjs.fitInPage.call(void 0, { page: e.page, ...p });
+      const { page: _page, ...fitted } = _chunk33XWO4KBcjs.fitInPage.call(void 0, { page: e.page, ...p });
       void _page;
       set({ position: fitted });
     }
@@ -320,7 +590,7 @@ function ElementProperties({
         "\u201D"
       ] }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        TextArea,
+        TextArea2,
         {
           rows: 4,
           "aria-label": "Text",
@@ -331,8 +601,8 @@ function ElementProperties({
         }
       ),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid grid-cols-2 gap-2", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField, { label: "Font", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          Select,
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField2, { label: "Font", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          Select2,
           {
             className: "w-full",
             value: _nullishCoalesce(e.font, () => ( "sans")),
@@ -340,8 +610,8 @@ function ElementProperties({
             children: _chunk7NZPYWL3cjs.FONTS.map((f) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: f, children: { sans: "Sans (Helvetica)", serif: "Serif (Times)", mono: "Mono (Courier)" }[f] }, f))
           }
         ) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField, { label: "Size (pt)", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          TextInput,
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField2, { label: "Size (pt)", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          TextInput2,
           {
             type: "number",
             min: 3,
@@ -357,11 +627,11 @@ function ElementProperties({
       ] }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-wrap items-center gap-4", children: [
         ["bold", "italic"].map((k) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "inline-flex items-center gap-1.5", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Checkbox, { label: k, checked: !!e[k], onChange: (ev) => set({ [k]: ev.target.checked || void 0 }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Checkbox2, { label: k, checked: !!e[k], onChange: (ev) => set({ [k]: ev.target.checked || void 0 }) }),
           k === "bold" ? "Bold" : "Italic"
         ] }, k)),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-          Select,
+          Select2,
           {
             "aria-label": "Alignment",
             value: _nullishCoalesce(e.align, () => ( "left")),
@@ -388,8 +658,8 @@ function ElementProperties({
             onChange: (v) => set({ stroke: v })
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField, { label: "Line width (pt)", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          TextInput,
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField2, { label: "Line width (pt)", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          TextInput2,
           {
             type: "number",
             min: 0,
@@ -406,8 +676,8 @@ function ElementProperties({
       e.fill === "#ffffff" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "m-0 text-[12px] text-muted", children: "A white background hides the original under it." })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Section, { title: "Position (% of page)", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid grid-cols-2 gap-2", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField, { label: "Page", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        TextInput,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField2, { label: "Page", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        TextInput2,
         {
           type: "number",
           min: 1,
@@ -420,8 +690,8 @@ function ElementProperties({
         }
       ) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {}),
-      ["x", "y", "width", "height"].map((k) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField, { label: { x: "Left", y: "Top", width: "Width", height: "Height" }[k], children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        TextInput,
+      ["x", "y", "width", "height"].map((k) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField2, { label: { x: "Left", y: "Top", width: "Width", height: "Height" }[k], children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        TextInput2,
         {
           type: "number",
           step: 0.1,
@@ -437,80 +707,6 @@ function ElementProperties({
 
 
 
-// src/react/ui/SignaturePad.tsx
-
-
-function SignaturePad({
-  onSave,
-  onCancel,
-  maxWidth = 600
-}) {
-  const canvas = _react.useRef.call(void 0, null);
-  const last = _react.useRef.call(void 0, null);
-  const [empty, setEmpty] = _react.useState.call(void 0, 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 = _optionalChain([canvas, 'access', _2 => _2.current, 'optionalAccess', _3 => _3.getContext, 'call', _4 => _4("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;
-    _optionalChain([c, 'optionalAccess', _5 => _5.getContext, 'call', _6 => _6("2d"), 'optionalAccess', _7 => _7.clearRect, 'call', _8 => _8(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);
-    _optionalChain([out, 'access', _9 => _9.getContext, 'call', _10 => _10("2d"), 'optionalAccess', _11 => _11.drawImage, 'call', _12 => _12(c, 0, 0, out.width, out.height)]);
-    onSave(out.toDataURL("image/png"));
-  };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-3", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex justify-end gap-2", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "secondary", onClick: clear, children: "Clear" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "secondary", onClick: onCancel, children: "Cancel" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { disabled: empty, onClick: save, children: "Use signature" })
-    ] })
-  ] });
-}
-
-// src/react/components/FieldControl.tsx
-
 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));
@@ -616,14 +812,14 @@ function FieldControl({
           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: `min-w-0 ${field.type === "textarea" ? "line-clamp-[8] whitespace-pre-wrap" : "truncate"}`, children: text || /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-faint", children: field.placeholder || "" }) })
         }
       ),
-      editing && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Modal, { onClose: () => setEditing(false), width: "w-[480px]", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalHeader, { title: name, onClose: () => setEditing(false) }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ModalBody, { children: [
+      editing && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Modal2, { onClose: () => setEditing(false), width: "w-[480px]", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalHeader2, { title: name, onClose: () => setEditing(false) }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ModalBody2, { children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SheetInput, { field, text, onChange, onDone: () => setEditing(false) }),
           field.helpText && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mt-2 mb-0 text-[13px] text-muted", children: field.helpText }),
           error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mt-2 mb-0 text-[13px] text-danger", children: error })
         ] }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalFooter, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { onClick: () => setEditing(false), children: "Done" }) })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalFooter2, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button2, { onClick: () => setEditing(false), children: "Done" }) })
       ] })
     ] });
   }
@@ -707,10 +903,10 @@ function FieldControl({
             ] })
           }
         ),
-        signing && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Modal, { onClose: () => setSigning(false), width: "w-[640px]", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalHeader, { title: `Sign: ${field.label || field.key}`, onClose: () => setSigning(false) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalBody, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            SignaturePad,
+        signing && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Modal2, { onClose: () => setSigning(false), width: "w-[640px]", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalHeader2, { title: `Sign: ${field.label || field.key}`, onClose: () => setSigning(false) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalBody2, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            SignaturePad2,
             {
               onCancel: () => setSigning(false),
               onSave: (url) => {
@@ -780,6 +976,10 @@ function FieldControl({
     }
   }
 }
+function AnswerControl({ components, ...props }) {
+  const C = _nullishCoalesce(_nullishCoalesce(_optionalChain([components, 'optionalAccess', _20 => _20.fields, 'optionalAccess', _21 => _21[props.field.type]]), () => ( _optionalChain([components, 'optionalAccess', _22 => _22.FieldControl]))), () => ( FieldControl));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, C, { ...props });
+}
 
 // src/react/components/FieldProperties.tsx
 
@@ -825,12 +1025,12 @@ 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: _nullishCoalesce(_optionalChain([fields, 'access', _20 => _20[0], 'optionalAccess', _21 => _21.key]), () => ( "")), op: "equals", value: "" });
+  const newRule = () => ({ fieldKey: _nullishCoalesce(_optionalChain([fields, 'access', _23 => _23[0], 'optionalAccess', _24 => _24.key]), () => ( "")), op: "equals", value: "" });
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `space-y-2 ${depth ? "rounded-md border border-line bg-surface p-2" : ""}`, children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 text-[12px]", children: [
       "Match",
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-        Select,
+        Select2,
         {
           "aria-label": "Match all or any",
           value: value.logic,
@@ -845,10 +1045,10 @@ function ConditionBuilder({
     value.rules.map(
       (r, i) => isGroup(r) ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-start gap-1", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ConditionBuilder, { value: r, onChange: (c) => setRule(i, c), fields, depth: depth + 1 }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, IconButton, { icon: _lucidereact.X, title: "Remove group", danger: true, iconSize: 14, onClick: () => remove(i) })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, IconButton2, { icon: _lucidereact.X, title: "Remove group", danger: true, iconSize: 14, onClick: () => remove(i) })
       ] }, i) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-wrap items-center gap-1", children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-          Select,
+          Select2,
           {
             "aria-label": "Field",
             value: r.fieldKey,
@@ -860,7 +1060,7 @@ function ConditionBuilder({
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          Select,
+          Select2,
           {
             "aria-label": "Operator",
             value: r.op,
@@ -869,7 +1069,7 @@ function ConditionBuilder({
           }
         ),
         r.op !== "isEmpty" && r.op !== "isNotEmpty" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          TextInput,
+          TextInput2,
           {
             "aria-label": "Value",
             className: "!w-24 !py-1",
@@ -878,7 +1078,7 @@ function ConditionBuilder({
           }
         ),
         r.op === "between" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          TextInput,
+          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__ */ _jsxruntime.jsx.call(void 0, IconButton, { icon: _lucidereact.X, title: "Remove rule", danger: true, iconSize: 14, onClick: () => remove(i) })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, IconButton2, { icon: _lucidereact.X, title: "Remove rule", danger: true, iconSize: 14, onClick: () => remove(i) })
       ] }, i)
     ),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-2", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        Button,
+        Button2,
         {
           size: "sm",
           variant: "secondary",
@@ -902,7 +1102,7 @@ function ConditionBuilder({
         }
       ),
       depth < 2 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        Button,
+        Button2,
         {
           size: "sm",
           variant: "secondary",
@@ -942,7 +1142,7 @@ function FieldProperties({
   const textual = !["checkbox", "file", "signature", "dropdown", "radio"].includes(field.type);
   const setPos = (k, v) => {
     const n = num2(v);
-    if (n != null) set({ position: _chunk5VHPTLLVcjs.fitInPage.call(void 0, { ...field.position, [k]: n / 100 }) });
+    if (n != null) set({ position: _chunk33XWO4KBcjs.fitInPage.call(void 0, { ...field.position, [k]: n / 100 }) });
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "text-[13px]", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Section2, { title: "Field", children: [
@@ -955,38 +1155,38 @@ function FieldProperties({
         "ID ",
         field.id
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField, { label: "Label", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextInput, { value: field.label, onChange: (e) => set({ label: e.target.value }) }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField, { label: "Key (automatic, from the label)", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextInput, { value: field.key, readOnly: true, className: "text-faint" }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField, { label: "Type", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select, { className: "w-full", value: field.type, onChange: (e) => set({ type: e.target.value }), children: _chunk7NZPYWL3cjs.FIELD_TYPES.map((t) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: t, children: TYPE_LABEL[t] }, t)) }) }),
-      textual && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField, { label: "Placeholder", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        TextInput,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField2, { label: "Label", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextInput2, { value: field.label, onChange: (e) => set({ label: e.target.value }) }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField2, { label: "Key (automatic, from the label)", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextInput2, { value: field.key, readOnly: true, className: "text-faint" }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField2, { label: "Type", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Select2, { className: "w-full", value: field.type, onChange: (e) => set({ type: e.target.value }), children: _chunk7NZPYWL3cjs.FIELD_TYPES.map((t) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: t, children: TYPE_LABEL[t] }, t)) }) }),
+      textual && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField2, { label: "Placeholder", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        TextInput2,
         {
           value: _nullishCoalesce(field.placeholder, () => ( "")),
           onChange: (e) => set({ placeholder: e.target.value || void 0 })
         }
       ) }),
-      field.type !== "file" && field.type !== "signature" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField, { label: field.type === "checkbox" ? "Checked by default" : "Default value", children: field.type === "checkbox" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        Checkbox,
+      field.type !== "file" && field.type !== "signature" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField2, { label: field.type === "checkbox" ? "Checked by default" : "Default value", children: field.type === "checkbox" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        Checkbox2,
         {
           label: "Checked by default",
           checked: field.defaultValue === "true",
           onChange: (e) => set({ defaultValue: e.target.checked ? "true" : void 0 })
         }
       ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        TextInput,
+        TextInput2,
         {
           value: _nullishCoalesce(field.defaultValue, () => ( "")),
           onChange: (e) => set({ defaultValue: e.target.value || void 0 })
         }
       ) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField, { label: "Help text (shown as tooltip)", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextInput, { value: _nullishCoalesce(field.helpText, () => ( "")), onChange: (e) => set({ helpText: e.target.value || void 0 }) }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField2, { label: "Help text (shown as tooltip)", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextInput2, { value: _nullishCoalesce(field.helpText, () => ( "")), onChange: (e) => set({ helpText: e.target.value || void 0 }) }) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex flex-wrap gap-4", children: ["required", "readOnly", "hidden"].map((k) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "inline-flex items-center gap-1.5", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Checkbox, { label: k, checked: !!field[k], onChange: (e) => set({ [k]: e.target.checked || void 0 }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 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__ */ _jsxruntime.jsx.call(void 0, Section2, { title: "Options (one per line)", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      TextArea,
+      TextArea2,
       {
         rows: 4,
         value: optionsText,
@@ -1004,8 +1204,8 @@ function FieldProperties({
     ) }),
     textual && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Section2, { title: "Validation", children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid grid-cols-2 gap-2", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField, { label: "Min length", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          TextInput,
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField2, { label: "Min length", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          TextInput2,
           {
             type: "number",
             min: 0,
@@ -1013,8 +1213,8 @@ function FieldProperties({
             onChange: (e) => set({ minLength: num2(e.target.value) })
           }
         ) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField, { label: "Max length", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          TextInput,
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField2, { label: "Max length", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          TextInput2,
           {
             type: "number",
             min: 0,
@@ -1023,16 +1223,16 @@ function FieldProperties({
           }
         ) }),
         field.type === "number" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField, { label: "Min value", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            TextInput,
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField2, { label: "Min value", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            TextInput2,
             {
               type: "number",
               value: _nullishCoalesce(field.min, () => ( "")),
               onChange: (e) => set({ min: num2(e.target.value) })
             }
           ) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField, { label: "Max value", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            TextInput,
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField2, { label: "Max value", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            TextInput2,
             {
               type: "number",
               value: _nullishCoalesce(field.max, () => ( "")),
@@ -1041,8 +1241,8 @@ function FieldProperties({
           ) })
         ] })
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField, { label: "Regex (whole value must match)", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        TextInput,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField2, { label: "Regex (whole value must match)", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        TextInput2,
         {
           className: "font-mono",
           value: _nullishCoalesce(field.pattern, () => ( "")),
@@ -1071,8 +1271,8 @@ function FieldProperties({
       ) }, key);
     }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Section2, { title: "Position (% of page)", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid grid-cols-2 gap-2", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField, { label: "Page", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        TextInput,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField2, { label: "Page", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        TextInput2,
         {
           type: "number",
           min: 1,
@@ -1086,8 +1286,8 @@ function FieldProperties({
         }
       ) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {}),
-      ["x", "y", "width", "height"].map((k) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField, { label: { x: "Left", y: "Top", width: "Width", height: "Height" }[k], children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        TextInput,
+      ["x", "y", "width", "height"].map((k) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormField2, { label: { x: "Left", y: "Top", width: "Width", height: "Height" }[k], children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        TextInput2,
         {
           type: "number",
           step: 0.1,
@@ -1114,9 +1314,9 @@ function LayoutElementView({
   style
 }) {
   const stroke = ptToCqh(_nullishCoalesce(e.strokeWidth, () => ( 1)), pageHeight);
-  const base = { ..._chunk5VHPTLLVcjs.boxStyle.call(void 0, { page: e.page, ...e.position }), ...style };
+  const base2 = { ..._chunk33XWO4KBcjs.boxStyle.call(void 0, { page: e.page, ...e.position }), ...style };
   if (e.type === "line")
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: `absolute overflow-visible ${className}`, style: base, "aria-hidden": true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: `absolute overflow-visible ${className}`, style: base2, "aria-hidden": true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "line",
       {
         x1: "0",
@@ -1132,7 +1332,7 @@ function LayoutElementView({
     {
       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: _nullishCoalesce(e.color, () => ( "#000000")),
@@ -1198,7 +1398,7 @@ function PagesPanel({
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          IconButton,
+          IconButton2,
           {
             icon: _lucidereact.ArrowUp,
             title: "Move page up",
@@ -1208,7 +1408,7 @@ function PagesPanel({
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          IconButton,
+          IconButton2,
           {
             icon: _lucidereact.ArrowDown,
             title: "Move page down",
@@ -1218,7 +1418,7 @@ function PagesPanel({
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          IconButton,
+          IconButton2,
           {
             icon: _lucidereact.FilePlus2,
             title: "Add blank page after",
@@ -1227,7 +1427,7 @@ function PagesPanel({
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          IconButton,
+          IconButton2,
           {
             icon: _lucidereact.Trash2,
             title: "Delete page",
@@ -1302,11 +1502,11 @@ function PdfPages({
       if (!live) return;
       setSizes(list);
       setDoc(pdf);
-      _optionalChain([callbacks, 'access', _22 => _22.current, 'access', _23 => _23.onLoaded, 'optionalCall', _24 => _24(list, pdf)]);
-    }).catch((err) => live && _optionalChain([callbacks, 'access', _25 => _25.current, 'access', _26 => _26.onError, 'optionalCall', _27 => _27(err)]));
+      _optionalChain([callbacks, 'access', _25 => _25.current, 'access', _26 => _26.onLoaded, 'optionalCall', _27 => _27(list, pdf)]);
+    }).catch((err) => live && _optionalChain([callbacks, 'access', _28 => _28.current, 'access', _29 => _29.onError, 'optionalCall', _30 => _30(err)]));
     return () => {
       live = false;
-      void _optionalChain([opened, 'optionalAccess', _28 => _28.destroy, 'call', _29 => _29()]);
+      void _optionalChain([opened, 'optionalAccess', _31 => _31.destroy, 'call', _32 => _32()]);
     };
   }, []);
   if (!doc) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "p-6 text-center text-[13px] text-muted", children: "Loading document\u2026" });
@@ -1367,22 +1567,22 @@ function PdfPage({
     });
     return () => {
       live = false;
-      _optionalChain([task, 'optionalAccess', _30 => _30.cancel, 'call', _31 => _31()]);
+      _optionalChain([task, 'optionalAccess', _33 => _33.cancel, 'call', _34 => _34()]);
     };
   }, [doc, source, visible, zoom]);
   _react.useEffect.call(void 0, () => {
-    if (!withText || !visible || !source || _optionalChain([lines, 'optionalAccess', _32 => _32.source]) === source) return;
+    if (!withText || !visible || !source || _optionalChain([lines, 'optionalAccess', _35 => _35.source]) === source) return;
     let live = true;
     void doc.getPage(source).then(async (page) => {
       const content = await page.getTextContent();
       const fontOf = (id) => {
         try {
-          return page.commonObjs.has(id) ? _optionalChain([page, 'access', _33 => _33.commonObjs, 'access', _34 => _34.get, 'call', _35 => _35(id), 'optionalAccess', _36 => _36.name]) : void 0;
+          return page.commonObjs.has(id) ? _optionalChain([page, 'access', _36 => _36.commonObjs, 'access', _37 => _37.get, 'call', _38 => _38(id), 'optionalAccess', _39 => _39.name]) : void 0;
         } catch (e2) {
           return void 0;
         }
       };
-      if (live) setLines({ source, lines: _chunk5VHPTLLVcjs.toLines.call(void 0, content.items, page.view, fontOf) });
+      if (live) setLines({ source, lines: _chunk33XWO4KBcjs.toLines.call(void 0, content.items, page.view, fontOf) });
     }).catch(() => live && setLines({ source, lines: [] }));
     return () => {
       live = false;
@@ -1397,7 +1597,7 @@ function PdfPage({
       style: { width, height },
       children: [
         source && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "canvas", { ref: canvas, className: "absolute inset-0 h-full w-full", "aria-label": `Page ${pageNo}` }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute inset-0 [container-type:size]", children: _optionalChain([overlay, 'optionalCall', _37 => _37(pageNo, withText && _optionalChain([lines, 'optionalAccess', _38 => _38.source]) === source ? lines.lines : void 0)]) })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute inset-0 [container-type:size]", children: _optionalChain([overlay, 'optionalCall', _40 => _40(pageNo, withText && _optionalChain([lines, 'optionalAccess', _41 => _41.source]) === source ? lines.lines : void 0)]) })
       ]
     }
   );
@@ -1410,12 +1610,12 @@ 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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "inline-flex items-center gap-1 text-[13px]", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, IconButton, { icon: _lucidereact.Minus, title: "Zoom out", disabled: lower == null, onClick: () => onChange(lower) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, IconButton2, { icon: _lucidereact.Minus, title: "Zoom out", disabled: lower == null, onClick: () => onChange(lower) }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "w-12 text-center tabular-nums", children: [
       Math.round(zoom * 100),
       "%"
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, IconButton, { icon: _lucidereact.Plus, title: "Zoom in", disabled: higher == null, onClick: () => onChange(higher) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, IconButton2, { icon: _lucidereact.Plus, title: "Zoom in", disabled: higher == null, onClick: () => onChange(higher) })
   ] });
 }
 
@@ -1442,10 +1642,10 @@ function useFitZoom(pageWidthPt) {
 }
 function useCompact() {
   const query = "(max-width: 767px), (pointer: coarse)";
-  const get = () => typeof window !== "undefined" && !!_optionalChain([window, 'access', _39 => _39.matchMedia, 'optionalCall', _40 => _40(query), 'access', _41 => _41.matches]);
+  const get = () => typeof window !== "undefined" && !!_optionalChain([window, 'access', _42 => _42.matchMedia, 'optionalCall', _43 => _43(query), 'access', _44 => _44.matches]);
   const [compact, setCompact] = _react.useState.call(void 0, get);
   _react.useEffect.call(void 0, () => {
-    const m = _optionalChain([window, 'access', _42 => _42.matchMedia, 'optionalCall', _43 => _43(query)]);
+    const m = _optionalChain([window, 'access', _45 => _45.matchMedia, 'optionalCall', _46 => _46(query)]);
     if (!m) return;
     const on = () => setCompact(m.matches);
     m.addEventListener("change", on);
@@ -1454,6 +1654,9 @@ function useCompact() {
   return compact;
 }
 
+// src/react/hooks/useFormEditor.ts
+
+
 // src/react/hooks/useUndo.ts
 
 var LIMIT = 100;
@@ -1495,57 +1698,45 @@ function useUndo(initial) {
   };
 }
 
-// src/react/FormEditor.tsx
-
+// 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 = _chunk7NZPYWL3cjs.FIELD_TYPES,
+  elementTools = Object.keys(_chunk33XWO4KBcjs.ELEMENT_TOOLS),
   notify = () => {
   },
-  onError: notifyError = (e) => console.error(e),
-  className = "h-full",
-  ref
+  onError: notifyError = (e) => console.error(e)
 }) {
   const [sizes2, setSizes] = _react.useState.call(void 0, null);
   const history = useUndo(initialValue);
   const { value: doc, set } = history;
   const [saved, setSaved] = _react.useState.call(void 0, initialValue);
   const [selection, setSelection] = _react.useState.call(void 0, null);
-  const [tab, setTab] = _react.useState.call(void 0, "props");
-  const [drawer, setDrawer] = _react.useState.call(void 0, null);
   const [armed, setArmed] = _react.useState.call(void 0, null);
-  const compact = useCompact();
   const [snapOn, setSnapOn] = _react.useState.call(void 0, true);
   const [editText, setEditText] = _react.useState.call(void 0, false);
-  const [preview, setPreview] = _react.useState.call(void 0, false);
+  const [preview, setPreviewState] = _react.useState.call(void 0, false);
   const [previewAnswers, setPreviewAnswers] = _react.useState.call(void 0, {});
   const [busy, setBusy] = _react.useState.call(void 0, false);
-  const [confirmDeletePage, setConfirmDeletePage] = _react.useState.call(void 0, null);
-  const [loadError, setLoadError] = _react.useState.call(void 0, "");
   const [pdf, setPdf] = _react.useState.call(void 0, null);
   const [detecting, setDetecting] = _react.useState.call(void 0, null);
   const autoDetected = _react.useRef.call(void 0, false);
   const drag = _react.useRef.call(void 0, null);
-  const scroller = _react.useRef.call(void 0, null);
-  const { zoom, setZoom, ref: fitRef } = useFitZoom(Math.max(...(_nullishCoalesce(sizes2, () => ( [{ width: 595 }]))).map((p) => p.width)));
   const { fields } = doc;
   const layout = _nullishCoalesce(doc.layout, () => ( (sizes2 ? _chunk7NZPYWL3cjs.defaultLayout.call(void 0, sizes2) : null)));
-  const pageCount = _nullishCoalesce(_optionalChain([layout, 'optionalAccess', _44 => _44.pages, 'access', _45 => _45.length]), () => ( 1));
+  const pageCount = _nullishCoalesce(_optionalChain([layout, 'optionalAccess', _47 => _47.pages, 'access', _48 => _48.length]), () => ( 1));
   const grid = snapOn ? GRID : 0;
-  const selectedField = _optionalChain([selection, 'optionalAccess', _46 => _46.kind]) === "field" ? _nullishCoalesce(fields.find((f) => f.id === selection.id), () => ( null)) : null;
-  const selectedElement = _optionalChain([selection, 'optionalAccess', _47 => _47.kind]) === "element" ? _nullishCoalesce(_optionalChain([layout, 'optionalAccess', _48 => _48.elements, 'access', _49 => _49.find, 'call', _50 => _50((e) => e.id === selection.id)]), () => ( null)) : null;
+  const selectedField = _optionalChain([selection, 'optionalAccess', _49 => _49.kind]) === "field" ? _nullishCoalesce(fields.find((f) => f.id === selection.id), () => ( null)) : null;
+  const selectedElement = _optionalChain([selection, 'optionalAccess', _50 => _50.kind]) === "element" ? _nullishCoalesce(_optionalChain([layout, 'optionalAccess', _51 => _51.elements, 'access', _52 => _52.find, 'call', _53 => _53((e) => e.id === selection.id)]), () => ( null)) : null;
   const dirty = JSON.stringify(doc) !== JSON.stringify(saved);
   const problems = _react.useMemo.call(void 0, 
     () => sizes2 ? [...doc.layout ? _chunk7NZPYWL3cjs.validateLayout.call(void 0, doc.layout, sizes2.length) : [], ..._chunk7NZPYWL3cjs.validateFields.call(void 0, fields, pageCount)] : [],
@@ -1558,13 +1749,13 @@ function FormEditor({
   const first = _react.useRef.call(void 0, true);
   _react.useEffect.call(void 0, () => {
     if (first.current) first.current = false;
-    else _optionalChain([onChangeRef, 'access', _51 => _51.current, 'optionalCall', _52 => _52(doc)]);
+    else _optionalChain([onChangeRef, 'access', _54 => _54.current, 'optionalCall', _55 => _55(doc)]);
   }, [doc]);
   const withDoc = _react.useCallback.call(void 0, 
     (fn, record = true) => set((cur) => {
-      const base = _nullishCoalesce(cur.layout, () => ( (sizes2 ? _chunk7NZPYWL3cjs.defaultLayout.call(void 0, sizes2) : null)));
-      if (!base) return cur;
-      return fn({ fields: cur.fields, layout: base });
+      const base2 = _nullishCoalesce(cur.layout, () => ( (sizes2 ? _chunk7NZPYWL3cjs.defaultLayout.call(void 0, sizes2) : null)));
+      if (!base2) return cur;
+      return fn({ fields: cur.fields, layout: base2 });
     }, record),
     [set, sizes2]
   );
@@ -1576,15 +1767,11 @@ 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 = _react.useCallback.call(void 0, (f) => setFields((l) => _chunk5VHPTLLVcjs.withField.call(void 0, l, f)), [setFields]);
+  const updateField = _react.useCallback.call(void 0, (f) => setFields((l) => _chunk33XWO4KBcjs.withField.call(void 0, l, f)), [setFields]);
   const updateElement = _react.useCallback.call(void 0, 
     (e) => {
-      const pageWidth = _nullishCoalesce(_optionalChain([layout, 'optionalAccess', _53 => _53.pages, 'access', _54 => _54[e.page - 1], 'optionalAccess', _55 => _55.width]), () => ( 595));
-      setElements((l) => l.map((x) => x.id === e.id ? _chunk5VHPTLLVcjs.fitTextWidth.call(void 0, e, pageWidth) : x));
+      const pageWidth = _nullishCoalesce(_optionalChain([layout, 'optionalAccess', _56 => _56.pages, 'access', _57 => _57[e.page - 1], 'optionalAccess', _58 => _58.width]), () => ( 595));
+      setElements((l) => l.map((x) => x.id === e.id ? _chunk33XWO4KBcjs.fitTextWidth.call(void 0, e, pageWidth) : x));
     },
     [setElements, layout]
   );
@@ -1596,16 +1783,28 @@ function FormEditor({
   }, [selection, setFields, setElements]);
   const duplicateSelected = _react.useCallback.call(void 0, () => {
     if (selectedField) {
-      const copy = _chunk5VHPTLLVcjs.duplicate.call(void 0, selectedField, fields);
+      const copy = _chunk33XWO4KBcjs.duplicate.call(void 0, selectedField, fields);
       setFields((l) => [...l, copy]);
       setSelection({ kind: "field", id: copy.id });
     } else if (selectedElement) {
-      const copy = _chunk5VHPTLLVcjs.duplicateElement.call(void 0, selectedElement);
+      const copy = _chunk33XWO4KBcjs.duplicateElement.call(void 0, selectedElement);
       setElements((l) => [...l, copy]);
       setSelection({ kind: "element", id: copy.id });
     }
   }, [selectedField, selectedElement, fields, setFields, setElements]);
+  const nudge = _react.useCallback.call(void 0, 
+    (dx, dy) => {
+      if (selectedField) updateField({ ...selectedField, position: _chunk33XWO4KBcjs.moveBy.call(void 0, selectedField.position, dx, dy) });
+      if (selectedElement) {
+        const { page: _p, ...position } = _chunk33XWO4KBcjs.moveBy.call(void 0, { page: selectedElement.page, ...selectedElement.position }, dx, dy);
+        void _p;
+        updateElement({ ...selectedElement, position });
+      }
+    },
+    [selectedField, selectedElement, updateField, updateElement]
+  );
   _react.useEffect.call(void 0, () => {
+    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: _chunk5VHPTLLVcjs.moveBy.call(void 0, selectedField.position, dx, dy) });
-        if (selectedElement) {
-          const { page: _p, ...position } = _chunk5VHPTLLVcjs.moveBy.call(void 0, { 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
-  ]);
+  }, [keyboard, preview, armed, selection, history, removeSelected, duplicateSelected, nudge]);
   _react.useEffect.call(void 0, () => {
-    if (!dirty) return;
+    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);
@@ -1673,7 +1857,7 @@ function FormEditor({
     const dx = (e.clientX - d.x) / d.rect.width;
     const dy = (e.clientY - d.y) / d.rect.height;
     if (d.sel.kind === "field") {
-      const position = d.mode === "move" ? _chunk5VHPTLLVcjs.moveBy.call(void 0, d.start, dx, dy, grid) : _chunk5VHPTLLVcjs.resizeBy.call(void 0, d.start, dx, dy, grid);
+      const position = d.mode === "move" ? _chunk33XWO4KBcjs.moveBy.call(void 0, d.start, dx, dy, grid) : _chunk33XWO4KBcjs.resizeBy.call(void 0, d.start, dx, dy, grid);
       setFields((l) => l.map((x) => x.id === d.sel.id ? { ...x, position } : x), false);
       return;
     }
@@ -1681,48 +1865,52 @@ function FormEditor({
       (l) => l.map((x) => {
         if (x.id !== d.sel.id) return x;
         if (d.mode === "move") {
-          const { page: _p2, ...position2 } = _chunk5VHPTLLVcjs.moveBy.call(void 0, d.start, dx, dy, grid);
+          const { page: _p2, ...position2 } = _chunk33XWO4KBcjs.moveBy.call(void 0, d.start, dx, dy, grid);
           void _p2;
           return { ...x, position: position2 };
         }
         if (x.type === "line") {
           const flat = (n) => n < 4e-3 ? 0 : n;
-          const width = flat(Math.min(1 - d.start.x, Math.max(0, _chunk5VHPTLLVcjs.snap.call(void 0, d.start.width + dx, grid))));
-          const height = flat(Math.min(1 - d.start.y, Math.max(0, _chunk5VHPTLLVcjs.snap.call(void 0, d.start.height + dy, grid))));
+          const width = flat(Math.min(1 - d.start.x, Math.max(0, _chunk33XWO4KBcjs.snap.call(void 0, d.start.width + dx, grid))));
+          const height = flat(Math.min(1 - d.start.y, Math.max(0, _chunk33XWO4KBcjs.snap.call(void 0, d.start.height + dy, grid))));
           return { ...x, position: { ...x.position, width, height } };
         }
-        const { page: _p, ...position } = _chunk5VHPTLLVcjs.resizeBy.call(void 0, d.start, dx, dy, grid);
+        const { page: _p, ...position } = _chunk33XWO4KBcjs.resizeBy.call(void 0, d.start, dx, dy, grid);
         void _p;
         return { ...x, position };
       }),
       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 } = _chunk5VHPTLLVcjs.toPage.call(void 0, clientX, clientY, rect);
-    if (kind === "field" && _chunk7NZPYWL3cjs.FIELD_TYPES.includes(what)) {
-      const f = _chunk5VHPTLLVcjs.newField.call(void 0, what, page, x, y, fields);
+    const { x, y } = _chunk33XWO4KBcjs.toPage.call(void 0, clientX, clientY, rect);
+    if (kind === "field" && fieldTypes.includes(what)) {
+      const f = _chunk33XWO4KBcjs.newField.call(void 0, 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 _chunk5VHPTLLVcjs.ELEMENT_TOOLS) {
-      const el = _chunk5VHPTLLVcjs.newElement.call(void 0, what, page, x, y);
+    if (kind === "element" && elementTools.includes(what)) {
+      const el = _chunk33XWO4KBcjs.newElement.call(void 0, 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) {
-    _optionalChain([scroller, 'access', _56 => _56.current, 'optionalAccess', _57 => _57.querySelector, 'call', _58 => _58(`[data-page="${n}"]`), 'optionalAccess', _59 => _59.scrollIntoView, 'call', _60 => _60({ block: "start" })]);
+  function editLine(line, page) {
+    const el = _chunk33XWO4KBcjs.replaceLine.call(void 0, line, page);
+    setElements((l) => [...l, el]);
+    setSelection({ kind: "element", id: el.id });
   }
+  const onDetectedRef = _react.useRef.call(void 0, onDetected);
+  _react.useEffect.call(void 0, () => {
+    onDetectedRef.current = onDetected;
+  });
   const detect = _react.useCallback.call(void 0, 
     async (auto = false) => {
       if (!pdf || !layout || detecting) return;
@@ -1730,7 +1918,7 @@ function FormEditor({
       setDetecting({ done: 0, total: layout.pages.length, stop });
       try {
         const lib = await loadPdfJs();
-        const found = await _chunk5VHPTLLVcjs.detectDocument.call(void 0, 
+        const found = await _chunk33XWO4KBcjs.detectDocument.call(void 0, 
           pdf,
           lib.OPS,
           layout.pages,
@@ -1740,7 +1928,7 @@ function FormEditor({
         );
         if (found.length) {
           setFields((l) => [...l, ...found]);
-          setTab("fields");
+          _optionalChain([onDetectedRef, 'access', _59 => _59.current, 'optionalCall', _60 => _60(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"
@@ -1786,25 +1974,144 @@ function FormEditor({
       setBusy(false);
     }
   }
-  const saveRef = _react.useRef.call(void 0, save);
+  const counts = {};
+  for (const f of fields) counts[f.position.page] = (_nullishCoalesce(counts[f.position.page], () => ( 0))) + 1;
+  for (const el of _nullishCoalesce(_optionalChain([layout, 'optionalAccess', _61 => _61.elements]), () => ( []))) counts[el.page] = (_nullishCoalesce(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) => _nullishCoalesce(_optionalChain([layout, 'optionalAccess', _62 => _62.pages, 'access', _63 => _63[page - 1], 'optionalAccess', _64 => _64.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) => _chunk33XWO4KBcjs.reorder.call(void 0, l, id, step)),
+    movePage: (n, step) => withDoc((d) => _chunk33XWO4KBcjs.movePage.call(void 0, d, n, step)),
+    insertBlankPage: (n) => withDoc((d) => _chunk33XWO4KBcjs.insertBlankPage.call(void 0, d, n)),
+    deletePage: (n) => {
+      setSelection(null);
+      withDoc((d) => _chunk33XWO4KBcjs.deletePage.call(void 0, 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: _chunk7NZPYWL3cjs.fieldStates.call(void 0, 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
+
+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] = _react.useState.call(void 0, _nullishCoalesce(panelTabs[0], () => ( "props")));
+  const setTab = (t) => panelTabs.includes(t) && setTabState(t);
+  const ed = useFormEditor({
+    ...options,
+    onDetected: (found) => {
+      setTab("fields");
+      _optionalChain([options, 'access', _65 => _65.onDetected, 'optionalCall', _66 => _66(found)]);
+    }
+  });
+  const { fields, layout, pageCount, selection, selectedField, selectedElement, preview, armed, snapOn, editText } = ed;
+  const [drawer, setDrawer] = _react.useState.call(void 0, null);
+  const compact = useCompact();
+  const [confirmDeletePage, setConfirmDeletePage] = _react.useState.call(void 0, null);
+  const [loadError, setLoadError] = _react.useState.call(void 0, "");
+  const scroller = _react.useRef.call(void 0, null);
+  const { zoom, setZoom, ref: fitRef } = useFitZoom(Math.max(...(_nullishCoalesce(ed.pageSizes, () => ( [{ width: 595 }]))).map((p) => p.width)));
+  _react.useEffect.call(void 0, () => {
+    if (selection) setTab("props");
+  }, [selection]);
+  function goToPage(n) {
+    _optionalChain([scroller, 'access', _67 => _67.current, 'optionalAccess', _68 => _68.querySelector, 'call', _69 => _69(`[data-page="${n}"]`), 'optionalAccess', _70 => _70.scrollIntoView, 'call', _71 => _71({ block: "start" })]);
+  }
+  const saveRef = _react.useRef.call(void 0, ed.save);
   _react.useEffect.call(void 0, () => {
-    saveRef.current = save;
+    saveRef.current = ed.save;
   });
   _react.useImperativeHandle.call(void 0, 
     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__ */ _jsxruntime.jsx.call(void 0, "p", { className: "fl-root p-6 text-center text-sm text-danger", children: loadError });
-  const previewStates = _chunk7NZPYWL3cjs.fieldStates.call(void 0, fields, previewAnswers);
-  const counts = {};
-  for (const f of fields) counts[f.position.page] = (_nullishCoalesce(counts[f.position.page], () => ( 0))) + 1;
-  for (const el of _nullishCoalesce(_optionalChain([layout, 'optionalAccess', _61 => _61.elements]), () => ( []))) counts[el.page] = (_nullishCoalesce(counts[el.page], () => ( 0))) + 1;
-  const pageHeight = (page) => _nullishCoalesce(_optionalChain([layout, 'optionalAccess', _62 => _62.pages, 'access', _63 => _63[page - 1], 'optionalAccess', _64 => _64.height]), () => ( 842));
+  const { previewStates, previewAnswers, counts, pageHeight } = ed;
   const toolItem = (key, label) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "button",
     {
@@ -1812,7 +2119,7 @@ function FormEditor({
       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,
@@ -1821,12 +2128,12 @@ function FormEditor({
     },
     key
   );
-  const armedLabel = armed ? armed.startsWith("field:") ? TYPE_LABEL[armed.slice(6)] : _optionalChain([_chunk5VHPTLLVcjs.ELEMENT_TOOLS, 'access', _65 => _65[armed.slice(8)], 'optionalAccess', _66 => _66.label]) : "";
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `fl-root flex min-h-[640px] flex-col bg-white text-ink ${className}`, children: [
+  const armedLabel = armed ? armed.startsWith("field:") ? TYPE_LABEL[armed.slice(6)] : _optionalChain([_chunk33XWO4KBcjs.ELEMENT_TOOLS, 'access', _72 => _72[armed.slice(8)], 'optionalAccess', _73 => _73.label]) : "";
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormliftProvider, { components, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `fl-root flex min-h-[640px] flex-col bg-white text-ink ${className}`, children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-wrap items-center gap-2 border-b border-line bg-white px-4 py-2.5", children: [
-      onBack && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "secondary", size: "sm", icon: _lucidereact.ArrowLeft, onClick: onBack, children: "Back" }),
-      !preview && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        Button,
+      onBack && shows("back") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button2, { variant: "secondary", size: "sm", icon: _lucidereact.ArrowLeft, onClick: onBack, children: "Back" }),
+      !preview && shows("tools") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        Button2,
         {
           variant: drawer === "tools" ? "primary" : "secondary",
           size: "sm",
@@ -1836,8 +2143,8 @@ function FormEditor({
           children: "Add"
         }
       ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        Button,
+      shows("panel") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        Button2,
         {
           variant: drawer === "panel" ? "primary" : "secondary",
           size: "sm",
@@ -1847,91 +2154,73 @@ function FormEditor({
           children: selection ? "Properties" : "Panel"
         }
       ),
-      title != null && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "m-0 min-w-0 truncate text-[17px] font-semibold", children: title }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-[12px] text-muted", children: dirty ? "Unsaved changes" : "All changes saved" }),
+      title != null && shows("title") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "m-0 min-w-0 truncate text-[17px] font-semibold", children: title }),
+      shows("status") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-[12px] text-muted", children: ed.dirty ? "Unsaved changes" : "All changes saved" }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "ml-auto flex flex-wrap items-center gap-1.5", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          IconButton,
-          {
-            icon: _lucidereact.Undo2,
-            title: "Undo (Ctrl+Z)",
-            disabled: !history.canUndo || preview,
-            onClick: history.undo
-          }
-        ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          IconButton,
-          {
-            icon: _lucidereact.Redo2,
-            title: "Redo (Ctrl+Y)",
-            disabled: !history.canRedo || preview,
-            onClick: history.redo
-          }
-        ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          IconButton,
+        shows("undo") && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, IconButton2, { icon: _lucidereact.Undo2, title: "Undo (Ctrl+Z)", disabled: !ed.canUndo || preview, onClick: ed.undo }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, IconButton2, { icon: _lucidereact.Redo2, title: "Redo (Ctrl+Y)", disabled: !ed.canRedo || preview, onClick: ed.redo })
+        ] }),
+        shows("snap") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          IconButton2,
           {
             icon: _lucidereact.Grid3x3,
             title: snapOn ? "Snap to grid: on" : "Snap to grid: off",
             className: snapOn ? "!text-primary" : "",
-            onClick: () => setSnapOn((s) => !s)
+            onClick: () => ed.setSnapOn(!snapOn)
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ZoomControls, { zoom, onChange: setZoom }),
-        !preview && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          Button,
+        shows("zoom") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ZoomControls, { zoom, onChange: setZoom }),
+        !preview && shows("editText") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          Button2,
           {
             variant: editText ? "primary" : "secondary",
             size: "sm",
             icon: _lucidereact.Type,
             disabled: !layout,
             title: "Click any line of the document to change its text",
-            onClick: () => setEditText((v) => !v),
+            onClick: () => ed.setEditText(!editText),
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "max-sm:hidden", children: "Edit text" })
           }
         ),
-        !preview && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          Button,
+        !preview && shows("autoDetect") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          Button2,
           {
             variant: "secondary",
             size: "sm",
             icon: _lucidereact.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(),
+            onClick: () => void ed.detect(),
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "max-sm:hidden", children: "Auto-detect" })
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          Button,
+        shows("preview") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          Button2,
           {
             variant: "secondary",
             size: "sm",
             icon: preview ? _lucidereact.Pencil : _lucidereact.Eye,
             title: preview ? "Back to editing" : "Preview",
-            onClick: () => {
-              setPreview((p) => !p);
-              setPreviewAnswers({});
-              setEditText(false);
-            },
+            onClick: () => ed.setPreview(!preview),
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "max-sm:hidden", children: preview ? "Edit" : "Preview" })
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "sm", icon: _lucidereact.Save, title: "Save", disabled: !dirty || busy, onClick: () => void save(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "max-sm:hidden", children: "Save" }) }),
+        shows("save") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button2, { size: "sm", icon: _lucidereact.Save, title: "Save", disabled: !ed.dirty || ed.busy, onClick: () => void ed.save(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "max-sm:hidden", children: "Save" }) }),
         toolbar
       ] })
     ] }),
     banner,
-    detecting && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "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,
+      ed.detecting.total,
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-1.5 w-40 overflow-hidden rounded bg-white", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "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__ */ _jsxruntime.jsx.call(void 0, 
@@ -1939,7 +2228,7 @@ function FormEditor({
         {
           type: "button",
           className: "cursor-pointer text-primary hover:underline",
-          onClick: () => detecting.stop.abort(),
+          onClick: () => _optionalChain([ed, 'access', _74 => _74.detecting, 'optionalAccess', _75 => _75.stop, 'access', _76 => _76.abort, 'call', _77 => _77()]),
           children: "Stop"
         }
       )
@@ -1948,22 +2237,32 @@ function FormEditor({
       "Tap the page where the ",
       armedLabel,
       " should go.",
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { type: "button", className: "cursor-pointer text-primary hover:underline", onClick: () => setArmed(null), children: "Cancel" })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          type: "button",
+          className: "cursor-pointer text-primary hover:underline",
+          onClick: () => ed.setArmed(null),
+          children: "Cancel"
+        }
+      )
     ] }),
     editText && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative flex min-h-0 flex-1", children: [
-      !preview && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      !preview && shows("tools") && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
         "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__ */ _jsxruntime.jsx.call(void 0, PanelHeading, { children: "FIELDS" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "div", { className: "space-y-1 p-2", children: _chunk7NZPYWL3cjs.FIELD_TYPES.map((t) => toolItem(`field:${t}`, TYPE_LABEL[t])) }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PanelHeading, { children: "LAYOUT" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "space-y-1 p-2", children: Object.keys(_chunk5VHPTLLVcjs.ELEMENT_TOOLS).map(
-              (t) => toolItem(`element:${t}`, _chunk5VHPTLLVcjs.ELEMENT_TOOLS[t].label)
-            ) })
+            shows("fieldTools") && ed.fieldTools.length > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PanelHeading2, { children: "FIELDS" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PanelHeading2, { children: "LAYOUT" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "space-y-1 p-2", children: ed.elementTools.map((k) => toolItem(k, _chunk33XWO4KBcjs.ELEMENT_TOOLS[k.slice(8)].label)) })
+            ] })
           ]
         }
       ),
@@ -1976,7 +2275,7 @@ 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__ */ _jsxruntime.jsx.call(void 0, 
@@ -1984,12 +2283,9 @@ function FormEditor({
             {
               load: pdfSource,
               zoom,
-              pages: _optionalChain([layout, 'optionalAccess', _67 => _67.pages]),
+              pages: _optionalChain([layout, 'optionalAccess', _78 => _78.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__ */ _jsxruntime.jsxs.call(void 0, 
                 "div",
@@ -2000,41 +2296,41 @@ 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: [
-                    _optionalChain([lines, 'optionalAccess', _68 => _68.map, 'call', _69 => _69((line, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    _optionalChain([lines, 'optionalAccess', _79 => _79.map, 'call', _80 => _80((line, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                       "button",
                       {
                         type: "button",
                         title: `Edit: ${line.text}`,
                         className: "absolute cursor-text rounded-[1px] outline-1 outline-folder/60 hover:bg-folder/25 hover:outline-folder",
-                        style: _chunk5VHPTLLVcjs.boxStyle.call(void 0, { page, ...line }),
+                        style: _chunk33XWO4KBcjs.boxStyle.call(void 0, { page, ...line }),
                         onPointerDown: (e) => e.stopPropagation(),
-                        onClick: () => {
-                          const el = _chunk5VHPTLLVcjs.replaceLine.call(void 0, line, page);
-                          setElements((l) => [...l, el]);
-                          select({ kind: "element", id: el.id });
-                        }
+                        onClick: () => ed.editLine(line, page)
                       },
                       i
                     ))]),
-                    _optionalChain([layout, 'optionalAccess', _70 => _70.elements, 'access', _71 => _71.filter, 'call', _72 => _72((el) => el.page === page), 'access', _73 => _73.map, 'call', _74 => _74(
+                    _optionalChain([layout, 'optionalAccess', _81 => _81.elements, 'access', _82 => _82.filter, 'call', _83 => _83((el) => el.page === page), 'access', _84 => _84.map, 'call', _85 => _85(
                       (el) => preview ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LayoutElementView, { element: el, pageHeight: pageHeight(page) }, el.id) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                         "div",
                         {
                           role: "button",
                           tabIndex: 0,
                           "aria-label": `${el.type} ${_nullishCoalesce(el.text, () => ( ""))}`,
-                          className: `absolute cursor-move touch-none select-none ${_optionalChain([selection, 'optionalAccess', _75 => _75.id]) === el.id ? "z-10 outline-2 outline-primary" : "hover:outline-1 hover:outline-primary/50"}`,
-                          style: _chunk5VHPTLLVcjs.boxStyle.call(void 0, { 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,
+                          className: `absolute cursor-move touch-none select-none ${_optionalChain([selection, 'optionalAccess', _86 => _86.id]) === el.id ? "z-10 outline-2 outline-primary" : "hover:outline-1 hover:outline-primary/50"}`,
+                          style: _chunk33XWO4KBcjs.boxStyle.call(void 0, { page, ...el.position, height: Math.max(el.position.height, 4e-3) }),
+                          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__ */ _jsxruntime.jsx.call(void 0, 
@@ -2045,14 +2341,14 @@ function FormEditor({
                                 style: { left: 0, top: 0, width: "100%", height: "100%" }
                               }
                             ),
-                            _optionalChain([selection, 'optionalAccess', _76 => _76.id]) === el.id && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                            _optionalChain([selection, 'optionalAccess', _87 => _87.id]) === el.id && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                               "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,14 +2357,15 @@ function FormEditor({
                       )
                     )]),
                     fields.filter((f) => f.position.page === page).map(
-                      (f) => preview ? _optionalChain([previewStates, 'access', _77 => _77[f.key], 'optionalAccess', _78 => _78.visible]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute [container-type:size]", style: _chunk5VHPTLLVcjs.boxStyle.call(void 0, f.position), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        FieldControl,
+                      (f) => preview ? _optionalChain([previewStates, 'access', _88 => _88[f.key], 'optionalAccess', _89 => _89.visible]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute [container-type:size]", style: _chunk33XWO4KBcjs.boxStyle.call(void 0, f.position), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                        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__ */ _jsxruntime.jsxs.call(void 0, 
                         "div",
@@ -2077,25 +2374,25 @@ function FormEditor({
                           tabIndex: 0,
                           "aria-label": `${TYPE_LABEL[f.type]} field ${f.label || f.key}`,
                           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] ${_optionalChain([selection, 'optionalAccess', _79 => _79.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: _chunk5VHPTLLVcjs.boxStyle.call(void 0, f.position),
-                          onPointerDown: (e) => startDrag(e, { kind: "field", id: f.id }, f.position, "move"),
-                          onPointerMove: onDrag,
-                          onPointerUp: endDrag,
+                          className: `absolute cursor-move touch-none rounded-sm border text-[10px] select-none [container-type:size] ${_optionalChain([selection, 'optionalAccess', _90 => _90.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: _chunk33XWO4KBcjs.boxStyle.call(void 0, f.position),
+                          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__ */ _jsxruntime.jsxs.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "b", { className: "text-danger", children: " *" })
                             ] }),
-                            _optionalChain([selection, 'optionalAccess', _80 => _80.id]) === f.id && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                            _optionalChain([selection, 'optionalAccess', _91 => _91.id]) === f.id && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                               "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,42 +2407,51 @@ function FormEditor({
           )
         }
       ),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      shows("panel") && panelTabs.length > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
         "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__ */ _jsxruntime.jsx.call(void 0, "div", { className: "overflow-x-auto border-b border-line p-2 [&_button]:px-2.5", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              SegmentedTabs,
+              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__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "li", { children: p }, p)) }),
+            ed.problems.length > 0 && shows("problems") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "li", { children: p }, p)) }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "min-h-0 flex-1 overflow-y-auto", children: [
               tab === "props" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  PanelHeading,
+                  PanelHeading2,
                   {
                     actions: selection && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
                       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        IconButton,
+                        IconButton2,
                         {
                           icon: _lucidereact.Copy,
                           title: "Duplicate (Ctrl+D)",
                           light: true,
                           iconSize: 16,
-                          onClick: duplicateSelected
+                          onClick: ed.duplicateSelected
                         }
                       ),
-                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, IconButton, { icon: _lucidereact.Trash2, title: "Delete (Del)", light: true, iconSize: 16, onClick: removeSelected })
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                        IconButton2,
+                        {
+                          icon: _lucidereact.Trash2,
+                          title: "Delete (Del)",
+                          light: true,
+                          iconSize: 16,
+                          onClick: ed.removeSelected
+                        }
+                      )
                     ] }),
                     children: selectedField ? "FIELD" : selectedElement ? selectedElement.type.toUpperCase() : "PROPERTIES"
                   }
@@ -2156,7 +2462,7 @@ function FormEditor({
                     field: selectedField,
                     fields,
                     pageCount,
-                    onChange: updateField
+                    onChange: ed.updateField
                   },
                   selectedField.id
                 ) : selectedElement ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -2164,10 +2470,10 @@ function FormEditor({
                   {
                     element: selectedElement,
                     pageCount,
-                    onChange: updateElement
+                    onChange: ed.updateElement
                   },
                   selectedElement.id
-                ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, EmptyText, { children: [
+                ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, EmptyText2, { children: [
                   "Select something on the document, drag a field or layout item in from the left, or use",
                   " ",
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "b", { children: "Edit text" }),
@@ -2175,12 +2481,12 @@ function FormEditor({
                 ] })
               ] }),
               tab === "fields" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PanelHeading, { children: "FILL ORDER" }),
-                !fields.length && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EmptyText, { children: "No fields yet." }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PanelHeading2, { children: "FILL ORDER" }),
+                !fields.length && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EmptyText2, { children: "No fields yet." }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ol", { className: "m-0 list-none p-0", children: fields.map((f, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                   "li",
                   {
-                    className: `flex items-center gap-1 border-b border-line-soft px-2 py-1 text-[12.5px] ${_optionalChain([selection, 'optionalAccess', _81 => _81.id]) === f.id ? "bg-primary-tint" : ""}`,
+                    className: `flex items-center gap-1 border-b border-line-soft px-2 py-1 text-[12.5px] ${_optionalChain([selection, 'optionalAccess', _92 => _92.id]) === f.id ? "bg-primary-tint" : ""}`,
                     children: [
                       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                         "button",
@@ -2188,7 +2494,7 @@ function FormEditor({
                           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: [
@@ -2208,23 +2514,23 @@ function FormEditor({
                         }
                       ),
                       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        IconButton,
+                        IconButton2,
                         {
                           icon: _lucidereact.ArrowUp,
                           title: "Move up",
                           iconSize: 13,
                           disabled: i === 0,
-                          onClick: () => setFields((l) => _chunk5VHPTLLVcjs.reorder.call(void 0, l, f.id, -1))
+                          onClick: () => ed.reorderField(f.id, -1)
                         }
                       ),
                       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        IconButton,
+                        IconButton2,
                         {
                           icon: _lucidereact.ArrowDown,
                           title: "Move down",
                           iconSize: 13,
                           disabled: i === fields.length - 1,
-                          onClick: () => setFields((l) => _chunk5VHPTLLVcjs.reorder.call(void 0, l, f.id, 1))
+                          onClick: () => ed.reorderField(f.id, 1)
                         }
                       )
                     ]
@@ -2238,19 +2544,19 @@ function FormEditor({
                   pages: layout.pages,
                   counts,
                   onGoTo: goToPage,
-                  onMove: (n, step) => withDoc((d) => _chunk5VHPTLLVcjs.movePage.call(void 0, d, n, step)),
-                  onInsertBlank: (n) => withDoc((d) => _chunk5VHPTLLVcjs.insertBlankPage.call(void 0, d, n)),
-                  onDelete: (n) => counts[n] ? setConfirmDeletePage(n) : withDoc((d) => _chunk5VHPTLLVcjs.deletePage.call(void 0, d, n))
+                  onMove: ed.movePage,
+                  onInsertBlank: ed.insertBlankPage,
+                  onDelete: (n) => counts[n] ? setConfirmDeletePage(n) : ed.deletePage(n)
                 }
-              ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EmptyText, { children: "Loading pages\u2026" })),
-              _optionalChain([tabs, 'access', _82 => _82.find, 'call', _83 => _83((t) => t.id === tab), 'optionalAccess', _84 => _84.content])
+              ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EmptyText2, { children: "Loading pages\u2026" })),
+              _optionalChain([tabs, 'access', _93 => _93.find, 'call', _94 => _94((t) => t.id === tab), 'optionalAccess', _95 => _95.content])
             ] })
           ]
         }
       )
     ] }),
     confirmDeletePage != null && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      ConfirmModal,
+      ConfirmModal2,
       {
         danger: true,
         confirmLabel: "Delete page",
@@ -2258,8 +2564,7 @@ function FormEditor({
         onConfirm: () => {
           const n = confirmDeletePage;
           setConfirmDeletePage(null);
-          setSelection(null);
-          withDoc((d) => _chunk5VHPTLLVcjs.deletePage.call(void 0, d, n));
+          ed.deletePage(n);
         },
         children: [
           "Delete page ",
@@ -2270,7 +2575,7 @@ function FormEditor({
         ]
       }
     )
-  ] });
+  ] }) });
 }
 
 // src/react/FormFiller.tsx
@@ -2281,145 +2586,75 @@ function FormEditor({
 
 
 
-// src/react/ui/Chip.tsx
-
+// src/react/hooks/useQuestionFilter.ts
 
-function Chip({
-  label,
-  count,
-  active,
-  onClick
-}) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    "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__ */ _jsxruntime.jsx.call(void 0, 
-          "span",
-          {
-            className: `rounded-full px-1.5 text-[11px] font-semibold ${active ? "bg-primary text-white" : "bg-hover text-muted"}`,
-            children: count
-          }
-        )
-      ]
-    }
+var defaultFilters = _chunk33XWO4KBcjs.builtinFilters.call(void 0, { 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] = _react.useState.call(void 0, _nullishCoalesce(_optionalChain([initial, 'optionalAccess', _96 => _96.values]), () => ( {})));
+  const [search, setSearchState] = _react.useState.call(void 0, _nullishCoalesce(_optionalChain([initial, 'optionalAccess', _97 => _97.search]), () => ( "")));
+  const [seen, setSeen] = _react.useState.call(void 0, answers);
+  const [version, setVersion] = _react.useState.call(void 0, 0);
+  const update = (nextSearch, nextValues) => {
+    setSearchState(nextSearch);
+    setValues(nextValues);
+    setSeen(answers);
+    setVersion((v) => v + 1);
+    _optionalChain([onChange, 'optionalCall', _98 => _98({ search: nextSearch, values: nextValues })]);
+  };
+  const key = filters.map((f) => typeof f === "string" ? f : typeof f === "function" ? "fn" : f.id).join();
+  const defs = _react.useMemo.call(void 0, 
+    () => _chunk33XWO4KBcjs.resolveFilters.call(void 0, 
+      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__ */ _jsxruntime.jsxs.call(void 0, "div", { role: "group", "aria-label": title, className: "flex flex-wrap items-center gap-1.5", children: [
-    title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, 
-      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__ */ _jsxruntime.jsxs.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, 
-      "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__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, { size: 12 })
-      }
-    )
-  ] });
-}
-
-// src/react/ui/Popover.tsx
-
-
-// src/react/ui/useOutsideClose.ts
-
-function useOutsideClose(ref, open, onClose) {
-  _react.useEffect.call(void 0, () => {
-    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 = _react.useMemo.call(void 0, () => {
+    const shown = _chunk33XWO4KBcjs.filterQuestions.call(void 0, 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: _nullishCoalesce(values[d.id], () => ( null)),
+      set: (v) => update(search, { ...values, [d.id]: v })
     };
-  }, [ref, open, onClose]);
-}
-
-// src/react/ui/Popover.tsx
-
-function Popover({
-  label,
-  icon: Icon,
-  badge,
-  align = "left",
-  children
-}) {
-  const [open, setOpen] = _react.useState.call(void 0, false);
-  const box2 = _react.useRef.call(void 0, null);
-  useOutsideClose(box2, open, () => setOpen(false));
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref: box2, className: "relative", children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      "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__ */ _jsxruntime.jsx.call(void 0, Icon, { size: 15 }),
-          label,
-          !!badge && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, 
-      "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}: ${_nullishCoalesce(_optionalChain([g, 'access', _99 => _99.options, 'access', _100 => _100.find, 'call', _101 => _101((o) => o.value === g.value), 'optionalAccess', _102 => _102.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
-
-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__ */ _jsxruntime.jsx.call(void 0, 
-  "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
 
 var PAGE = 100;
@@ -2430,75 +2665,32 @@ var SIZE = {
   file: "h-9 w-full sm:w-72",
   radio: "h-9 w-full"
 };
-var gridSize = (q) => _nullishCoalesce(_optionalChain([q, 'access', _85 => _85.rows, 'optionalAccess', _86 => _86.reduce, 'call', _87 => _87((a, b) => a + b, 0)]), () => ( 0));
+var gridSize = (q) => _nullishCoalesce(_optionalChain([q, 'access', _103 => _103.rows, 'optionalAccess', _104 => _104.reduce, 'call', _105 => _105((a, b) => a + b, 0)]), () => ( 0));
 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] = _react.useState.call(void 0, _chunk5VHPTLLVcjs.NO_FILTER);
+  const own = useQuestionFilter(questions, answers, { filters, search });
+  const fs = _nullishCoalesce(external, () => ( own));
+  const { list } = fs;
   const [shown, setShown] = _react.useState.call(void 0, PAGE);
-  const [seen, setSeen] = _react.useState.call(void 0, answers);
-  const set = (patch) => {
-    setFilter((f) => ({ ...f, ...patch }));
-    setSeen(answers);
-    setShown(PAGE);
-  };
-  const list = _react.useMemo.call(void 0, () => questions.filter((q) => _chunk5VHPTLLVcjs.matches.call(void 0, q, seen, filter)), [questions, seen, filter]);
-  const count = (f) => questions.filter(f).length;
-  const types = _react.useMemo.call(void 0, () => [...new Set(questions.flatMap((q) => q.parts.map((p) => p.field.type)))], [questions]);
-  const categories = _react.useMemo.call(void 0, 
-    () => [...new Set(questions.map((q) => q.category).filter((c) => !!c))],
-    [questions]
-  );
-  const tagValues = _react.useMemo.call(void 0, () => {
-    const m = /* @__PURE__ */ new Map();
-    for (const q of questions)
-      for (const [k, v] of Object.entries(_nullishCoalesce(q.tags, () => ( {})))) m.set(k, (_nullishCoalesce(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 = _react.useMemo.call(void 0, () => {
-    const m = /* @__PURE__ */ new Map();
-    for (const q of questions) for (const c of new Set(_chunk5VHPTLLVcjs.choicesOf.call(void 0, q))) m.set(c, (_nullishCoalesce(m.get(c), () => ( 0))) + 1);
-    return [...m].filter(([, n]) => n >= 2).slice(0, 40);
-  }, [questions]);
-  const [choiceMode, setChoiceMode] = _react.useState.call(void 0, "offered");
-  const choiceValue = choiceMode === "picked" ? filter.picked : filter.choices;
-  const pickedCount = _react.useMemo.call(void 0, () => {
-    const m = /* @__PURE__ */ new Map();
-    for (const q of questions) for (const c of new Set(_chunk5VHPTLLVcjs.pickedOf.call(void 0, q, answers))) m.set(c, (_nullishCoalesce(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(_chunk5VHPTLLVcjs.NO_FILTER);
+  _react.useEffect.call(void 0, () => 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) => _nullishCoalesce(g.section, () => ( ""))))];
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "w-full p-3 sm:p-4 lg:px-6", children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-wrap items-center gap-2", children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "relative min-w-0 flex-1 basis-full sm:basis-72", children: [
+        fs.search != null && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "relative min-w-0 flex-1 basis-full sm:basis-72", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Search, { size: 15, className: "absolute top-1/2 left-3 -translate-y-1/2 text-muted" }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "input",
@@ -2506,132 +2698,62 @@ function QuestionList({
               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__ */ _jsxruntime.jsx.call(void 0, Popover, { label: "Filters", icon: _lucidereact.SlidersHorizontal, badge: inUse.length, align: "right", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-4", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FilterSection, { title: "Progress", children: progress.map(([key, title, yes, no]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            ChipGroup,
-            {
-              title,
-              value: filter[key] === "all" ? null : filter[key],
-              onChange: (v) => set({ [key]: _nullishCoalesce(v, () => ( "all")) }),
-              options: [
-                { value: "filled", label: yes },
-                { value: "empty", label: no }
-              ]
-            },
-            key
-          )) }),
-          choiceCount.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            FilterSection,
-            {
-              title: "Answers",
-              action: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                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__ */ _jsxruntime.jsx.call(void 0, 
-                ChipGroup,
-                {
-                  value: choiceValue === "all" ? null : choiceValue,
-                  onChange: (v) => set(choiceMode === "picked" ? { picked: _nullishCoalesce(v, () => ( "all")) } : { choices: _nullishCoalesce(v, () => ( "all")) }),
-                  options: choiceCount.map(([c, n]) => ({
-                    value: c,
-                    label: c,
-                    count: choiceMode === "picked" ? _nullishCoalesce(pickedCount.get(c), () => ( 0)) : n
-                  }))
-                }
-              )
-            }
-          ),
-          tagValues.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FilterSection, { title: "Question details", children: tagValues.map(([key, values]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            ChipGroup,
-            {
-              title: key,
-              value: _nullishCoalesce(filter.tags[key], () => ( null)),
-              onChange: (v) => setTag(key, v),
-              options: values.map((v) => ({ value: v, label: v, count: count((q) => _optionalChain([q, 'access', _88 => _88.tags, 'optionalAccess', _89 => _89[key]]) === v) }))
-            },
-            key
-          )) }),
-          types.length > 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FilterSection, { title: "Answer type", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            ChipGroup,
-            {
-              value: filter.type === "all" ? null : filter.type,
-              onChange: (v) => set({ type: _nullishCoalesce(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__ */ _jsxruntime.jsx.call(void 0, Popover2, { label: "Filters", icon: _lucidereact.SlidersHorizontal, badge: fs.inUse.length, align: "right", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex flex-col gap-4", children: sections.map((sec) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FilterSection, { title: sec, children: menu.filter((g) => (_nullishCoalesce(g.section, () => ( ""))) === sec).map((g) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          ChipGroup2,
+          {
+            title: g.title,
+            value: g.value,
+            onChange: g.set,
+            options: g.options
+          },
+          g.id
+        )) }, sec)) }) }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "text-[12.5px] text-muted sm:ml-auto", "aria-live": "polite", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "b", { className: "font-semibold text-ink-2", children: list.length }),
           " of ",
-          questions.length,
+          fs.total,
           " questions"
         ] }),
-        active && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "secondary", size: "sm", onClick: () => set(_chunk5VHPTLLVcjs.NO_FILTER), children: "Clear all" })
+        fs.active && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button2, { variant: "secondary", size: "sm", onClick: fs.clear, children: "Clear all" })
       ] }),
-      categories.length > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { role: "group", "aria-label": "Category", className: "flex flex-wrap items-center gap-1.5", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "mr-1 text-[11.5px] font-semibold tracking-wide text-muted uppercase", children: "Category" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          Chip,
-          {
-            label: "All",
-            count: questions.length,
-            active: filter.category === "all",
-            onClick: () => set({ category: "all" })
-          }
-        ),
-        categories.map((c) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          Chip,
+      bar.map((g) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { role: "group", "aria-label": g.title, className: "flex flex-wrap items-center gap-1.5", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "mr-1 text-[11.5px] font-semibold tracking-wide text-muted uppercase", children: g.title }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Chip2, { label: "All", count: fs.total, active: g.value == null, onClick: () => g.set(null) }),
+        g.options.map((o) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          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__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex flex-wrap items-center gap-1.5", children: inUse.map((f) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RemovableChip, { label: f.label, onRemove: f.clear }, f.label)) })
+      ] }, g.id)),
+      fs.inUse.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex flex-wrap items-center gap-1.5", children: fs.inUse.map((f) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RemovableChip2, { label: f.label, onRemove: f.clear }, f.id)) })
     ] }),
-    list.length === 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EmptyText, { children: "No question matches these filters." }),
+    list.length === 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EmptyText2, { children: "No question matches these filters." }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { className: "m-0 flex list-none flex-col gap-2 p-0", children: list.slice(0, shown).map((q, i, all) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
-      q.section && q.section !== _optionalChain([all, 'access', _90 => _90[i - 1], 'optionalAccess', _91 => _91.section]) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { className: "mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 border-b border-line pb-1", children: [
+      q.section && q.section !== _optionalChain([all, 'access', _106 => _106[i - 1], 'optionalAccess', _107 => _107.section]) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { className: "mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 border-b border-line pb-1", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-[13.5px] font-semibold text-primary lg:text-[15px]", children: q.section }),
-        Object.entries(_nullishCoalesce(q.tags, () => ( {}))).map(([k, v]) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Tag, { tone: "muted", children: [
+        Object.entries(_nullishCoalesce(q.tags, () => ( {}))).map(([k, v]) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Tag2, { tone: "muted", children: [
           k,
           ": ",
           v
         ] }, k))
       ] }),
-      q.intro && (q.intro !== _optionalChain([all, 'access', _92 => _92[i - 1], 'optionalAccess', _93 => _93.intro]) || q.section !== _optionalChain([all, 'access', _94 => _94[i - 1], 'optionalAccess', _95 => _95.section])) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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 !== _optionalChain([all, 'access', _108 => _108[i - 1], 'optionalAccess', _109 => _109.intro]) || q.section !== _optionalChain([all, 'access', _110 => _110[i - 1], 'optionalAccess', _111 => _111.section])) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "li", { className: "rounded-lg border border-line bg-white p-3", children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mb-2 flex items-start gap-2", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, Tag, { tone: "muted", children: q.category }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Tag, { tone: "muted", children: [
+          q.category && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Tag2, { tone: "muted", children: q.category }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Tag2, { tone: "muted", children: [
             "p.",
             q.page
           ] })
@@ -2658,7 +2780,7 @@ function QuestionList({
         ] })
       ] })
     ] }, q.id)) }),
-    list.length > shown && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mt-3 text-center", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Button, { variant: "secondary", size: "sm", onClick: () => setShown((n) => n + PAGE), children: [
+    list.length > shown && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mt-3 text-center", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Button2, { variant: "secondary", size: "sm", onClick: () => setShown((n) => n + PAGE), children: [
       "Show more (",
       list.length - shown,
       " left)"
@@ -2686,7 +2808,7 @@ function OptionGrid({
               "span",
               {
                 className: "min-w-0 cursor-pointer break-words",
-                onClick: (e) => _optionalChain([e, 'access', _96 => _96.currentTarget, 'access', _97 => _97.parentElement, 'optionalAccess', _98 => _98.querySelector, 'call', _99 => _99("input"), 'optionalAccess', _100 => _100.click, 'call', _101 => _101()]),
+                onClick: (e) => _optionalChain([e, 'access', _112 => _112.currentTarget, 'access', _113 => _113.parentElement, 'optionalAccess', _114 => _114.querySelector, 'call', _115 => _115("input"), 'optionalAccess', _116 => _116.click, 'call', _117 => _117()]),
                 children: name
               }
             )
@@ -2733,18 +2855,8 @@ function FilterSection({ title, action, children }) {
   ] });
 }
 
-// src/react/FormFiller.tsx
+// src/react/hooks/useFormFiller.ts
 
-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 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,61 +2876,54 @@ function FormFiller({
   autosave = 2500,
   onUpload,
   loadFile,
-  onBack,
-  toolbar,
+  toQuestions: toQuestions2 = _chunk33XWO4KBcjs.toQuestions,
   notify = () => {
   },
-  onError: notifyError = (e) => console.error(e),
-  className = "h-full"
+  onError: notifyError = (e) => console.error(e)
 }) {
   const [answers, setAnswers] = _react.useState.call(void 0, () => _nullishCoalesce(initialAnswers, () => ( _chunk7NZPYWL3cjs.defaultAnswers.call(void 0, fields))));
   const [files, setFiles] = _react.useState.call(void 0, initialFiles);
   const [signatures, setSignatures] = _react.useState.call(void 0, {});
   const [errors, setErrors] = _react.useState.call(void 0, {});
-  const [pdfWidth, setPdfWidth] = _react.useState.call(void 0, 595);
-  const pageWidth = Math.max(..._nullishCoalesce(_optionalChain([layout, 'optionalAccess', _102 => _102.pages, 'access', _103 => _103.map, 'call', _104 => _104((p) => p.width)]), () => ( [pdfWidth])));
-  const { zoom, setZoom, ref: fitRef } = useFitZoom(pageWidth);
-  const compact = useCompact();
   const [saveState, setSaveState] = _react.useState.call(void 0, "saved");
   const [hasSaved, setHasSaved] = _react.useState.call(void 0, !!initialAnswers);
-  const [confirmSubmit, setConfirmSubmit] = _react.useState.call(void 0, false);
-  const [loadError, setLoadError] = _react.useState.call(void 0, "");
+  const [pdf, setPdf] = _react.useState.call(void 0, null);
+  const [pdfSizes, setPdfSizes] = _react.useState.call(void 0, []);
   const queue = _react.useRef.call(void 0, Promise.resolve());
   const latest = _react.useRef.call(void 0, answers);
   _react.useEffect.call(void 0, () => {
     latest.current = answers;
   }, [answers]);
   const states = _react.useMemo.call(void 0, () => _chunk7NZPYWL3cjs.fieldStates.call(void 0, fields, answers), [fields, answers]);
-  const [view, setView] = _react.useState.call(void 0, "document");
-  const [pdf, setPdf] = _react.useState.call(void 0, null);
+  const [wantText, setWantText] = _react.useState.call(void 0, false);
   const [pageText, setPageText] = _react.useState.call(void 0, null);
   _react.useEffect.call(void 0, () => {
-    if (view !== "list" || !pdf || pageText) return;
+    if (!wantText || !pdf || pageText) return;
     let live = true;
     (async () => {
       const out = {};
       for (let i = 1; i <= pdf.numPages; i++) {
         const page = await pdf.getPage(i);
-        out[i] = _chunk5VHPTLLVcjs.toLines.call(void 0, (await page.getTextContent()).items, page.view);
+        out[i] = _chunk33XWO4KBcjs.toLines.call(void 0, (await page.getTextContent()).items, page.view);
       }
       if (live) setPageText(out);
     })().catch(() => live && setPageText({}));
     return () => {
       live = false;
     };
-  }, [view, pdf, pageText]);
-  const visibleKeys = fields.filter((f) => _optionalChain([states, 'access', _105 => _105[f.key], 'optionalAccess', _106 => _106.visible])).map((f) => f.key).join(",");
+  }, [wantText, pdf, pageText]);
+  const visibleKeys = fields.filter((f) => _optionalChain([states, 'access', _118 => _118[f.key], 'optionalAccess', _119 => _119.visible])).map((f) => f.key).join(",");
   const questions = _react.useMemo.call(void 0, () => {
     const keys = new Set(visibleKeys.split(","));
     const textOf = (page) => {
-      const source = layout ? _optionalChain([layout, 'access', _107 => _107.pages, 'access', _108 => _108[page - 1], 'optionalAccess', _109 => _109.source]) : page;
-      return source ? _optionalChain([pageText, 'optionalAccess', _110 => _110[source]]) : void 0;
+      const source = layout ? _optionalChain([layout, 'access', _120 => _120.pages, 'access', _121 => _121[page - 1], 'optionalAccess', _122 => _122.source]) : page;
+      return source ? _optionalChain([pageText, 'optionalAccess', _123 => _123[source]]) : void 0;
     };
-    return _chunk5VHPTLLVcjs.toQuestions.call(void 0, 
+    return toQuestions2(
       fields.filter((f) => keys.has(f.key)),
       textOf
     );
-  }, [fields, layout, visibleKeys, pageText]);
+  }, [fields, layout, visibleKeys, pageText, toQuestions2]);
   const loading = _react.useRef.call(void 0, /* @__PURE__ */ new Set());
   _react.useEffect.call(void 0, () => {
     if (!loadFile) return;
@@ -2849,7 +2952,7 @@ function FormFiller({
           return true;
         } catch (err) {
           setSaveState("error");
-          const fieldErrors = _optionalChain([err, 'optionalAccess', _111 => _111.errors]);
+          const fieldErrors = _optionalChain([err, 'optionalAccess', _124 => _124.errors]);
           if (fieldErrors && typeof fieldErrors === "object") setErrors(fieldErrors);
           notifyError(err);
           return false;
@@ -2869,7 +2972,7 @@ function FormFiller({
     setAnswers((a) => ({ ...a, [f.key]: v }));
     setSaveState("dirty");
     if (errors[f.key]) {
-      const err = _chunk7NZPYWL3cjs.checkAnswer.call(void 0, f, v, _optionalChain([states, 'access', _112 => _112[f.key], 'optionalAccess', _113 => _113.required]));
+      const err = _chunk7NZPYWL3cjs.checkAnswer.call(void 0, f, v, _optionalChain([states, 'access', _125 => _125[f.key], 'optionalAccess', _126 => _126.required]));
       setErrors((all) => {
         const rest = { ...all };
         delete rest[f.key];
@@ -2888,88 +2991,171 @@ function FormFiller({
       notifyError(err);
     }
   }
-  const fetchFile = (id, then) => _optionalChain([loadFile, 'optionalCall', _114 => _114(id), 'access', _115 => _115.then, 'call', _116 => _116(then, () => notifyError("Unable to open the file"))]);
+  const fetchFile = (id, then) => _optionalChain([loadFile, 'optionalCall', _127 => _127(id), 'access', _128 => _128.then, 'call', _129 => _129(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 = _chunk7NZPYWL3cjs.validateAnswers.call(void 0, fields, answers);
     setErrors(found);
-    if (Object.keys(found).length) return notifyError("Some answers need attention");
-    if (await save(true)) {
-      notify("Submitted");
-      _optionalChain([onSubmitted, 'optionalCall', _117 => _117(latest.current)]);
+    if (Object.keys(found).length) {
+      notifyError("Some answers need attention");
+      return false;
     }
+    if (!await save(true)) return false;
+    notify("Submitted");
+    _optionalChain([onSubmitted, 'optionalCall', _130 => _130(latest.current)]);
+    return true;
   }
-  if (loadError) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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
+
+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 = _nullishCoalesce(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(..._nullishCoalesce(_optionalChain([layout, 'optionalAccess', _131 => _131.pages, 'access', _132 => _132.map, 'call', _133 => _133((p) => p.width)]), () => ( [pdfWidth]))));
+  const compact = useCompact();
+  const [confirmSubmit, setConfirmSubmit] = _react.useState.call(void 0, false);
+  const [loadError, setLoadError] = _react.useState.call(void 0, "");
+  const [view, setView] = _react.useState.call(void 0, _nullishCoalesce(views[0], () => ( "document")));
+  const { loadPageText } = ff;
+  _react.useEffect.call(void 0, () => {
+    if (view === "list") loadPageText();
+  }, [view, loadPageText]);
+  if (loadError) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "fl-root p-6 text-center text-sm text-danger", children: loadError });
   const control = (f) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      FieldControl,
+      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: _optionalChain([fileOf, 'call', _118 => _118(answers[f.key]), 'optionalAccess', _119 => _119.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: _optionalChain([ff, 'access', _134 => _134.fileOf, 'call', _135 => _135(answers[f.key]), 'optionalAccess', _136 => _136.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__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "span", { className: "pointer-events-none absolute -top-1.5 -right-1.5 text-[12px] font-bold text-danger", children: "*" })
   ] });
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `fl-root flex min-h-[min(600px,100dvh)] flex-col bg-white text-ink ${className}`, children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormliftProvider, { components, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `fl-root flex min-h-[min(600px,100dvh)] flex-col bg-white text-ink ${className}`, children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-wrap items-center gap-3 border-b border-line bg-white px-4 py-2.5", children: [
-      onBack && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "secondary", size: "sm", icon: _lucidereact.ArrowLeft, onClick: onBack, children: "Back" }),
-      title != null && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "m-0 min-w-0 flex-1 truncate text-[17px] font-semibold max-sm:text-[15px] sm:flex-none", children: title }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        SegmentedTabs,
+      onBack && shows("back") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button2, { variant: "secondary", size: "sm", icon: _lucidereact.ArrowLeft, onClick: onBack, children: "Back" }),
+      title != null && shows("title") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, 
+        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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "ml-auto flex flex-wrap items-center gap-2 max-sm:w-full max-sm:justify-end", children: [
-        view === "document" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ZoomControls, { zoom, onChange: setZoom }),
+        view === "document" && shows("zoom") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ZoomControls, { zoom, onChange: setZoom }),
         !readOnly && onSave && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-right text-[12px] text-muted sm:w-24", "aria-live": "polite", children: {
-            saved: hasSaved ? "Draft saved" : "",
+          shows("saveStatus") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "secondary", size: "sm", icon: _lucidereact.Save, title: "Save draft", onClick: () => void save(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "max-sm:hidden", children: "Save draft" }) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "sm", icon: _lucidereact.Send, onClick: () => setConfirmSubmit(true), children: "Submit" })
+          }[ff.saveState] }),
+          shows("saveDraft") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button2, { variant: "secondary", size: "sm", icon: _lucidereact.Save, title: "Save draft", onClick: () => void ff.save(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "max-sm:hidden", children: "Save draft" }) }),
+          shows("submit") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button2, { size: "sm", icon: _lucidereact.Send, onClick: () => askFirst ? setConfirmSubmit(true) : void ff.submit(), children: "Submit" })
         ] }),
         toolbar
       ] })
     ] }),
-    attachments.length > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "inline-flex items-center gap-1 font-semibold text-ink-2", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Paperclip, { size: 13 }),
         " Attachments"
       ] }),
-      attachments.map((x) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      ff.attachments.map((x) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
         "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__ */ _jsxruntime.jsx.call(void 0, "span", { className: "truncate", children: x.fileName }),
             x.fileSize ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "text-muted", children: [
@@ -2977,39 +3163,58 @@ function FormFiller({
               humanSize(x.fileSize),
               ")"
             ] }) : null,
-            loadFile && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Download, { size: 12 })
+            ff.canLoadFiles && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Download, { size: 12 })
           ]
         },
         x.id
       ))
     ] }),
-    errorList.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "li", { children: [
+    ff.errorList.length > 0 && shows("errors") && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "li", { children: [
       "Page ",
       f.position.page,
       ": ",
       errors[f.key]
     ] }, f.key)) }),
-    view === "list" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 overflow-auto bg-hover", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, QuestionList, { questions, answers, control }) }),
+    view === "list" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 overflow-auto bg-hover", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      QuestionList,
+      {
+        questions: ff.questions,
+        answers,
+        control,
+        filters: listFilters,
+        search: listSearch,
+        hideUnavailable: hideUnavailableFilters,
+        renderToolbar: renderFilters
+      }
+    ) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: fitRef, className: `flex-1 overflow-auto bg-hover ${view === "list" ? "hidden" : ""}`, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       PdfPages,
       {
         load: pdfSource,
         zoom,
-        pages: _optionalChain([layout, 'optionalAccess', _120 => _120.pages]),
-        onLoaded: (sizes2, doc) => {
-          setPdf(doc);
-          if (sizes2.length) setPdfWidth(Math.max(...sizes2.map((p) => p.width)));
-        },
+        pages: _optionalChain([layout, 'optionalAccess', _137 => _137.pages]),
+        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.
-          ...(_nullishCoalesce(_optionalChain([layout, 'optionalAccess', _121 => _121.elements]), () => ( []))).filter((el) => el.page === page).map((el) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LayoutElementView, { element: el, pageHeight: _nullishCoalesce(_optionalChain([layout, 'access', _122 => _122.pages, 'access', _123 => _123[page - 1], 'optionalAccess', _124 => _124.height]), () => ( 842)) }, el.id)),
-          ...fields.filter((f) => f.position.page === page && _optionalChain([states, 'access', _125 => _125[f.key], 'optionalAccess', _126 => _126.visible])).map((f) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute [container-type:size]", style: _chunk5VHPTLLVcjs.boxStyle.call(void 0, f.position), children: control(f) }, f.id))
+          ...(_nullishCoalesce(_optionalChain([layout, 'optionalAccess', _138 => _138.elements]), () => ( []))).filter((el) => el.page === page).map((el) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LayoutElementView, { element: el, pageHeight: _nullishCoalesce(_optionalChain([layout, 'access', _139 => _139.pages, 'access', _140 => _140[page - 1], 'optionalAccess', _141 => _141.height]), () => ( 842)) }, el.id)),
+          ...fields.filter((f) => f.position.page === page && _optionalChain([states, 'access', _142 => _142[f.key], 'optionalAccess', _143 => _143.visible])).map((f) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute [container-type:size]", style: _chunk33XWO4KBcjs.boxStyle.call(void 0, f.position), children: control(f) }, f.id))
         ]
       }
     ) }),
-    confirmSubmit && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ConfirmModal, { confirmLabel: "Submit", onConfirm: () => void submit(), onCancel: () => setConfirmSubmit(false), children: "Submit this form? You cannot change the answers afterwards." })
-  ] });
+    confirmSubmit && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      ConfirmModal2,
+      {
+        confirmLabel: "Submit",
+        onConfirm: () => {
+          setConfirmSubmit(false);
+          void ff.submit();
+        },
+        onCancel: () => setConfirmSubmit(false),
+        children: "Submit this form? You cannot change the answers afterwards."
+      }
+    )
+  ] }) });
 }
 
 
@@ -3019,5 +3224,16 @@ function FormFiller({
 
 
 
-exports.FieldControl = FieldControl; exports.FormEditor = FormEditor; exports.FormFiller = FormFiller; exports.PdfPages = PdfPages; exports.TYPE_LABEL = TYPE_LABEL; exports.readPdf = readPdf; exports.setPdfWorker = setPdfWorker;
+
+
+
+
+
+
+
+
+
+
+
+exports.AnswerControl = AnswerControl; exports.FieldControl = FieldControl; exports.FormEditor = FormEditor; exports.FormFiller = FormFiller; exports.FormliftProvider = FormliftProvider; exports.LayoutElementView = LayoutElementView; exports.PdfPages = PdfPages; exports.QuestionList = QuestionList; exports.TYPE_LABEL = TYPE_LABEL; exports.defaultComponents = defaultComponents; exports.defaultFilters = defaultFilters; exports.readPdf = readPdf; exports.setPdfWorker = setPdfWorker; exports.useFitZoom = useFitZoom; exports.useFormEditor = useFormEditor; exports.useFormFiller = useFormFiller; exports.useQuestionFilter = useQuestionFilter; exports.useUndo = useUndo;
 //# sourceMappingURL=index.cjs.map