formlift 0.1.0 → 0.2.0

package/dist/react/index.d.ts

@@ -1,8 +1,10 @@
 import * as react from 'react';
-import { ReactNode, Ref } from 'react';
+import { ReactNode, PointerEvent, ButtonHTMLAttributes, InputHTMLAttributes, ComponentType, Ref, CSSProperties } from 'react';
 import { PDFDocumentProxy } from 'pdfjs-dist';
-import { g as LayoutPage, F as FieldDef, L as Layout, b as Answers, A as AnswerValue, a as FieldType } from '../form-logic-DT9Bfwfz.js';
-import { T as TextLine } from '../layout-ExhBeO6b.js';
+import { g as LayoutPage, F as FieldDef, L as Layout, a as FieldType, f as LayoutElement, P as Position, b as Answers, A as AnswerValue } from '../form-logic-DT9Bfwfz.js';
+import { T as TextLine, E as ElementTool, P as PageText, Q as Question, F as FilterOption, a as FilterSource, b as FilterValues } from '../filters-Yzd4tG8r.js';
+import * as pdfjs_dist_types_src_display_api from 'pdfjs-dist/types/src/display/api';
+import { LucideIcon } from 'lucide-react';
 
 /** A PDF: URL, Blob / File, bytes, or a (possibly async) function returning one of those. */
 type PdfBytes = string | URL | Blob | ArrayBuffer | Uint8Array;
@@ -31,11 +33,321 @@ declare function PdfPages({ load, zoom, pages, overlay, withText, onLoaded, onEr
     onError?: (err: unknown) => void;
 }): react.JSX.Element;
 
+type Selection = {
+    kind: 'field' | 'element';
+    id: string;
+} | null;
 /** The editor's document: fields + layout (null = the original pages untouched, nothing drawn). */
 type FormDoc = {
     fields: FieldDef[];
     layout: Layout | null;
 };
+interface UseFormEditorOptions {
+    /** Saved fields + layout to start from (omit for a new form). Remount (`key`) to load another. */
+    initialValue?: FormDoc;
+    /** Called by save() with the document. A rejected promise keeps the changes unsaved. */
+    onSave: (doc: FormDoc) => unknown;
+    /** Every change (also undo / redo). */
+    onChange?: (doc: FormDoc) => void;
+    /** Run auto-detect when the PDF opens. Default: only when there are no fields and no layout yet. */
+    autoDetect?: boolean;
+    /** Called with the suggested fields after a detect that found some. */
+    onDetected?: (found: FieldDef[]) => void;
+    /** Delete, Ctrl+Z / Ctrl+Y, Ctrl+D, arrows, Escape on window. Default true. */
+    keyboard?: boolean;
+    /** Field types that can be added. Default: all (FIELD_TYPES). */
+    fieldTypes?: readonly FieldType[];
+    /** Layout tools that can be added. Default: all. */
+    elementTools?: readonly ElementTool[];
+    /** Browser warning when leaving with unsaved changes. Default true. */
+    warnUnsaved?: boolean;
+    notify?: (message: string) => void;
+    onError?: (error: unknown) => void;
+}
+/**
+ * Everything FormEditor does, without its UI: the document with undo / redo, selection, placing / moving / resizing
+ * fields and layout items, pages, auto-detect, preview answers, validation and save. Render the pages with
+ * PdfPages (`onLoaded={ed.onPdfLoaded}`) and draw your own boxes, panels and toolbars around it.
+ */
+declare function useFormEditor({ initialValue, onSave, onChange, autoDetect, onDetected, keyboard, warnUnsaved, fieldTypes, elementTools, notify, onError: notifyError, }: UseFormEditorOptions): {
+    doc: FormDoc;
+    fields: FieldDef[];
+    /** The layout as shown (the original pages until changed); null until the PDF has loaded. */
+    layout: Layout | null;
+    pageCount: number;
+    /** Page size in PDF points, for drawing layout text at the right size. */
+    pageHeight: (page: number) => number;
+    /** Fields + layout items per page. */
+    counts: Record<number, number>;
+    dirty: boolean;
+    /** Validation messages; save() refuses while there are any. */
+    problems: string[];
+    busy: boolean;
+    save: () => Promise<boolean>;
+    undo: () => void;
+    redo: () => void;
+    canUndo: boolean;
+    canRedo: boolean;
+    /** Changes the document; `record: false` = no undo step (live drags). */
+    setFields: (fn: (f: FieldDef[]) => FieldDef[], record?: boolean) => void;
+    setElements: (fn: (e: LayoutElement[]) => LayoutElement[], record?: boolean) => void;
+    updateField: (f: FieldDef) => void;
+    updateElement: (e: LayoutElement) => void;
+    reorderField: (id: string, step: -1 | 1) => void;
+    movePage: (n: number, step: -1 | 1) => void;
+    insertBlankPage: (n: number) => void;
+    deletePage: (n: number) => void;
+    selection: Selection;
+    setSelection: react.Dispatch<react.SetStateAction<Selection>>;
+    selectedField: FieldDef | null;
+    selectedElement: LayoutElement | null;
+    removeSelected: () => void;
+    duplicateSelected: () => void;
+    nudge: (dx: number, dy: number) => void;
+    startDrag: (e: PointerEvent, sel: NonNullable<Selection>, start: Position, mode: "move" | "resize") => void;
+    onDrag: (e: PointerEvent) => void;
+    endDrag: () => void;
+    /** Tools for a palette: drag with `dataTransfer` / tap to arm, then placeNew. */
+    fieldTools: string[];
+    elementTools: string[];
+    armed: string | null;
+    setArmed: react.Dispatch<react.SetStateAction<string | null>>;
+    placeNew: (key: string, page: number, clientX: number, clientY: number, rect: DOMRect) => boolean;
+    editText: boolean;
+    setEditText: react.Dispatch<react.SetStateAction<boolean>>;
+    editLine: (line: TextLine, page: number) => void;
+    snapOn: boolean;
+    setSnapOn: react.Dispatch<react.SetStateAction<boolean>>;
+    preview: boolean;
+    /** Preview starts with empty answers; leaving it ends Edit text. */
+    setPreview: (on: boolean) => void;
+    previewAnswers: Answers;
+    setPreviewAnswers: react.Dispatch<react.SetStateAction<Answers>>;
+    previewStates: Record<string, {
+        visible: boolean;
+        required: boolean;
+        readOnly: boolean;
+    }>;
+    pdf: pdfjs_dist_types_src_display_api.PDFDocumentProxy | null;
+    /** Pass to PdfPages' onLoaded. */
+    onPdfLoaded: (s: PageSize[], d: PDFDocumentProxy) => void;
+    pageSizes: PageSize[] | null;
+    detect: (auto?: boolean) => Promise<void>;
+    /** Progress while detecting; `stop.abort()` keeps what was found so far. */
+    detecting: {
+        done: number;
+        total: number;
+        stop: AbortController;
+    } | null;
+};
+type FormEditorState = ReturnType<typeof useFormEditor>;
+
+declare const variants: {
+    primary: string;
+    secondary: string;
+    outline: string;
+    light: string;
+    heading: string;
+    success: string;
+    brand: string;
+    danger: string;
+};
+declare const sizes: {
+    sm: string;
+    md: string;
+};
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: keyof typeof variants;
+    size?: keyof typeof sizes;
+    /** Icon before the label. */
+    icon?: LucideIcon;
+}
+/** The app's button. `type` defaults to "button" so it never submits a form by accident. */
+declare function Button({ variant, size, icon: Icon, className, type, children, ...rest }: ButtonProps): react.JSX.Element;
+
+/** The app's checkbox (theme colour). `label` = accessible name when there is no visible text. */
+declare function Checkbox({ label, className, ...rest }: InputHTMLAttributes<HTMLInputElement> & {
+    label: string;
+}): react.JSX.Element;
+
+interface ChipOption {
+    value: string;
+    label: string;
+    /** How many items have it, shown after the label. */
+    count?: number;
+}
+/** A pill that can be switched on and off (a filter value). */
+declare function Chip({ label, count, active, onClick, }: {
+    label: string;
+    count?: number;
+    active?: boolean;
+    onClick: () => void;
+}): react.JSX.Element;
+/** One pick out of a few pills; a click on the picked one clears it. Optional title before them. */
+declare function ChipGroup({ title, options, value, onChange, }: {
+    title?: string;
+    options: ChipOption[];
+    value: string | null;
+    onChange: (value: string | null) => void;
+}): react.JSX.Element;
+/** A filter in use, with × to take it off. */
+declare function RemovableChip({ label, onRemove }: {
+    label: string;
+    onRemove: () => void;
+}): react.JSX.Element;
+
+/** Label, the control, and its error under it. */
+declare function FormField({ label, required, error, children, }: {
+    label: string;
+    required?: boolean;
+    error?: string;
+    children: ReactNode;
+}): react.JSX.Element;
+
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Tooltip and accessible name. */
+    title: string;
+    icon: LucideIcon;
+    /** Red on hover (delete). */
+    danger?: boolean;
+    iconSize?: number;
+    /** On a coloured background (panel headings): white icon. */
+    light?: boolean;
+}
+/** Icon-only button: view, download, delete, edit, expand… */
+declare function IconButton({ title, icon: Icon, danger, iconSize, light, className, ...rest }: IconButtonProps): react.JSX.Element;
+
+interface ModalProps {
+    children: ReactNode;
+    onClose: () => void;
+    /** Tailwind width class, e.g. 'w-[560px]' */
+    width: string;
+}
+declare function Modal({ children, onClose, width }: ModalProps): react.JSX.Element;
+/** "Are you sure…?" with Yes / No. */
+declare function ConfirmModal({ children, confirmLabel, cancelLabel, danger, onConfirm, onCancel, }: {
+    children: ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Red confirm button (deletes). */
+    danger?: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+}): react.JSX.Element;
+
+/** A button that opens a panel under it (closes on a click outside or Escape). `badge`: a count on the button. */
+declare function Popover({ label, icon: Icon, badge, align, children, }: {
+    label: string;
+    icon?: LucideIcon;
+    badge?: number;
+    align?: 'left' | 'right';
+    children: ReactNode;
+}): react.JSX.Element;
+
+/** Pill toggle between a few views ("Chats | New Chats"). `sm`: a small one inside a panel. */
+declare function SegmentedTabs<T extends string>({ options, value, onChange, size, }: {
+    options: {
+        value: T;
+        label: string;
+    }[];
+    value: T;
+    onChange: (value: T) => void;
+    size?: 'sm' | 'md';
+}): react.JSX.Element;
+
+/**
+ * Draw a signature with mouse, pen or finger. onSave gets a PNG data URL (transparent background).
+ * Scaled down to at most `maxWidth` pixels wide so it stays small enough to send.
+ */
+declare function SignaturePad({ onSave, onCancel, maxWidth, }: {
+    onSave: (dataUrl: string) => void;
+    onCancel: () => void;
+    maxWidth?: number;
+}): react.JSX.Element;
+
+interface FieldControlProps {
+    field: FieldDef;
+    value: AnswerValue | undefined;
+    onChange: (v: AnswerValue) => void;
+    readOnly?: boolean;
+    error?: string;
+    fileName?: string;
+    onFile?: (file: File) => void;
+    onOpenFile?: () => void;
+    /** Image of a stored signature (the answer is its file id); signatures from before are data URLs. */
+    signatureSrc?: string;
+    /** Phone / touch: typed answers open in a full-size box (the page's boxes are too small to type in). */
+    compact?: boolean;
+}
+/**
+ * One answer control drawn inside its box on the page. `error` outlines it red; the message shows as a tooltip
+ * and in the page's error list.
+ */
+declare function FieldControl({ field, value, onChange, readOnly, error, fileName, onFile, onOpenFile, signatureSrc, compact, }: FieldControlProps): react.JSX.Element;
+/** FieldControl, or the replacement from `components` (per field type first, then FieldControl). */
+declare function AnswerControl({ components, ...props }: FieldControlProps & {
+    components?: FormliftComponents;
+}): react.JSX.Element;
+
+declare const base: {
+    Button: typeof Button;
+    IconButton: typeof IconButton;
+    Checkbox: typeof Checkbox;
+    FormField: typeof FormField;
+    TextInput: ({ className, ...rest }: react.InputHTMLAttributes<HTMLInputElement>) => react.JSX.Element;
+    Select: ({ className, ...rest }: react.SelectHTMLAttributes<HTMLSelectElement>) => react.JSX.Element;
+    TextArea: ({ className, ...rest }: react.TextareaHTMLAttributes<HTMLTextAreaElement>) => react.JSX.Element;
+    Modal: typeof Modal;
+    ModalHeader: ({ title, onClose, disabled, }: {
+        title: string;
+        onClose: () => void;
+        disabled?: boolean;
+    }) => react.JSX.Element;
+    ModalBody: ({ children }: {
+        children: ReactNode;
+    }) => react.JSX.Element;
+    ModalFooter: ({ children }: {
+        children: ReactNode;
+    }) => react.JSX.Element;
+    ConfirmModal: typeof ConfirmModal;
+    PanelHeading: ({ children, actions }: {
+        children: ReactNode;
+        actions?: ReactNode;
+    }) => react.JSX.Element;
+    EmptyText: ({ children, className }: {
+        children: ReactNode;
+        className?: string;
+    }) => react.JSX.Element;
+    SegmentedTabs: typeof SegmentedTabs;
+    Chip: typeof Chip;
+    ChipGroup: typeof ChipGroup;
+    RemovableChip: typeof RemovableChip;
+    Popover: typeof Popover;
+    Tag: ({ tone, children }: {
+        tone?: "success" | "info" | "muted";
+        children: ReactNode;
+    }) => react.JSX.Element;
+    SignaturePad: typeof SignaturePad;
+};
+/** The built-in UI primitives. A replacement takes the same props: `ComponentProps<UIComponents['Button']>`. */
+type UIComponents = typeof base;
+declare const defaultComponents: UIComponents;
+/** Replaces formlift's UI primitives for everything under it. Nested providers merge (inner wins). */
+declare function FormliftProvider({ components, children, }: {
+    components?: Partial<UIComponents>;
+    children: ReactNode;
+}): react.JSX.Element;
+/**
+ * What `components` on FormEditor / FormFiller takes: UI primitives, the answer control for every field
+ * (`FieldControl`), or one per field type (`fields: { date: MyDatePicker }`; wins over FieldControl).
+ */
+type FormliftComponents = Partial<UIComponents> & {
+    FieldControl?: ComponentType<FieldControlProps>;
+    fields?: Partial<Record<FieldType, ComponentType<FieldControlProps>>>;
+};
+
+/** Parts of the FormEditor screen that can be hidden with `hide`. */
+type EditorPart = 'back' | 'title' | 'status' | 'undo' | 'snap' | 'zoom' | 'editText' | 'autoDetect' | 'preview' | 'save' | 'tools' | 'fieldTools' | 'layoutTools' | 'panel' | 'propertiesTab' | 'fieldsTab' | 'pagesTab' | 'problems';
 /** Imperative handle (`ref`): save from outside, e.g. before a workflow step. */
 interface FormEditorHandle {
     /** Saves if there are changes. false = invalid or onSave failed. */
@@ -43,15 +355,9 @@ interface FormEditorHandle {
     readonly dirty: boolean;
     readonly value: FormDoc;
 }
-interface FormEditorProps {
+interface FormEditorProps extends UseFormEditorOptions {
     /** The PDF: URL, Blob / File, bytes, or a function returning one. Never modified. */
     pdf: PdfSource;
-    /** Saved fields + layout to start from (omit for a new form). Remount (`key`) to load another. */
-    initialValue?: FormDoc;
-    /** Called by Save with the document. A rejected promise keeps the changes unsaved. */
-    onSave: (doc: FormDoc) => unknown;
-    /** Every change (also undo / redo). */
-    onChange?: (doc: FormDoc) => void;
     title?: ReactNode;
     /** Back button in the toolbar (hidden when omitted). */
     onBack?: () => void;
@@ -65,10 +371,10 @@ interface FormEditorProps {
         label: string;
         content: ReactNode;
     }[];
-    /** Run auto-detect when the PDF opens. Default: only when there are no fields and no layout yet. */
-    autoDetect?: boolean;
-    notify?: (message: string) => void;
-    onError?: (error: unknown) => void;
+    /** Replace any UI primitive (Button, Modal, …), or the answer controls used in preview (FieldControl / `fields`). */
+    components?: FormliftComponents;
+    /** Parts of the screen to leave out (the logic still runs: hide 'save' and call `ref.save()` yourself). */
+    hide?: EditorPart[];
     /** Extra classes on the root. It fills its container's height (`h-full`) by default: give the container a height. */
     className?: string;
     ref?: Ref<FormEditorHandle>;
@@ -79,8 +385,9 @@ interface FormEditorProps {
  * clickable: a click covers it with an editable copy. Right: properties of the selection, the field list, pages
  * (reorder, delete, add blank) and history. Nothing changes the uploaded PDF; all of it is saved in the version.
  * Keyboard: Delete, Ctrl+Z / Ctrl+Y, Ctrl+D duplicate, arrows nudge (Shift = bigger steps).
+ * All the logic lives in useFormEditor: use that hook directly for a completely custom UI.
  */
-declare function FormEditor({ pdf: pdfSource, initialValue, onSave, onChange, title, onBack, toolbar, banner, tabs, autoDetect, notify, onError: notifyError, className, ref, }: FormEditorProps): react.JSX.Element;
+declare function FormEditor({ pdf: pdfSource, title, onBack, toolbar, banner, tabs, components, hide, className, ref, ...options }: FormEditorProps): react.JSX.Element;
 
 /** A file answer (upload or signature PNG) as your storage knows it. The answer's value is its `id`. */
 interface AnswerFileInfo {
@@ -90,17 +397,15 @@ interface AnswerFileInfo {
     /** Bytes, for the size shown next to the name. */
     fileSize?: number;
 }
-interface FormFillerProps {
-    /** The PDF: URL, Blob / File, bytes, or a function returning one. */
-    pdf: PdfSource;
+type SaveState = 'saved' | 'dirty' | 'saving' | 'error';
+interface UseFormFillerOptions {
     fields: FieldDef[];
     layout?: Layout | null;
-    title?: ReactNode;
     /** A draft to continue. Default: each field's default value. */
     initialAnswers?: Answers;
     /** Files already attached to these answers. */
     files?: AnswerFileInfo[];
-    /** View only (a submitted form): no Save / Submit. */
+    /** View only: no saving, no autosave. */
     readOnly?: boolean;
     /**
      * Save a draft (`submit: false`, also autosave) or submit (answers already pass validateAnswers — check again on
@@ -113,42 +418,164 @@ interface FormFillerProps {
     onSubmitted?: (answers: Answers) => void;
     /** Autosave delay in ms after the last change; false = off. Default 2500. */
     autosave?: number | false;
-    /** Store a file / signature PNG; resolve with its id. Without it, file fields are read-only and signatures are kept as PNG data URLs in the answer. */
+    /** Store a file / signature PNG; resolve with its id. */
     onUpload?: (field: FieldDef, file: File) => Promise<AnswerFileInfo>;
-    /** The bytes of a stored file (shows stored signatures, opens / downloads attachments). */
+    /** The bytes of a stored file (stored signatures, opening / downloading attachments). */
     loadFile?: (id: string) => Promise<Blob>;
+    /**
+     * Groups the visible fields into questions for the list. Default: formlift's toQuestions. Wrap it to change
+     * them, e.g. `(f, t) => toQuestions(f, t, { categoryCode: false }).map(setMyCategory)`.
+     */
+    toQuestions?: (fields: FieldDef[], textOf: PageText) => Question[];
+    notify?: (message: string) => void;
+    onError?: (error: unknown) => void;
+}
+/**
+ * Everything FormFiller does, without its UI: answers, conditions, validation, queued saves + autosave, uploads,
+ * signatures and the question list. Draw the fields yourself (`boxStyle(field.position)` over each page, or a
+ * plain list of `questions`) and call `change`, `save`, `submit`.
+ */
+declare function useFormFiller({ fields, layout, initialAnswers, files: initialFiles, readOnly, onSave, onSubmitted, autosave, onUpload, loadFile, toQuestions, notify, onError: notifyError, }: UseFormFillerOptions): {
+    answers: Answers;
+    /** Visible / required / readOnly per field key, from the conditions and current answers. */
+    states: Record<string, {
+        visible: boolean;
+        required: boolean;
+        readOnly: boolean;
+    }>;
+    /** Field key → message. */
+    errors: Record<string, string>;
+    setErrors: react.Dispatch<react.SetStateAction<Record<string, string>>>;
+    /** Fields with an error, in form order. */
+    errorList: FieldDef[];
+    change: (f: FieldDef, v: AnswerValue) => void;
+    save: (submit?: boolean) => Promise<boolean>;
+    submit: () => Promise<boolean>;
+    saveState: SaveState;
+    hasSaved: boolean;
+    readOnly: boolean;
+    files: AnswerFileInfo[];
+    fileOf: (id: AnswerValue | undefined) => AnswerFileInfo | undefined;
+    /** Files of upload fields that are answers now. */
+    attachments: AnswerFileInfo[];
+    attach: (f: FieldDef, file: File) => Promise<void>;
+    canUpload: boolean;
+    canLoadFiles: boolean;
+    openFile: (id: string) => Promise<void> | undefined;
+    downloadFile: (id: string, name: string) => Promise<void> | undefined;
+    /** Image src of a signature answer (stored file or data URL). */
+    signatureSrc: (f: FieldDef) => string;
+    /** Visible fields grouped as questions (tables, option groups), titled from the PDF text once loaded. */
+    questions: Question[];
+    /** Reads the PDF text so `questions` get real titles (call when you first show them). */
+    loadPageText: () => void;
+    pdf: pdfjs_dist_types_src_display_api.PDFDocumentProxy | null;
+    pdfSizes: PageSize[];
+    /** Pass to PdfPages' onLoaded. */
+    onPdfLoaded: (sizes: PageSize[], doc: PDFDocumentProxy) => void;
+};
+type FormFillerState = ReturnType<typeof useFormFiller>;
+
+/** The built-in filters (labels from formlift's UI). Pick from it by id, reorder it, add your own. */
+declare const defaultFilters: FilterSource[];
+/** One filter, ready to draw: its options for this form, the picked value, and set(). */
+interface FilterGroup {
+    id: string;
+    title: string;
+    section?: string;
+    options: FilterOption[];
+    /** false = this form has nothing to filter on here (no options). Show it or not: your call. */
+    available: boolean;
+    value: string | null;
+    /** Picks a value; null clears it. */
+    set: (value: string | null) => void;
+}
+interface UseQuestionFilterOptions {
+    /**
+     * The filters, in order: filter objects / sources (see `formlift` core: categoryFilter, partFilter,
+     * customFilter…) or ids of defaultFilters ('answered', 'remarks', 'comments', 'choices', 'picked', 'tags',
+     * 'type', 'category'). Default: defaultFilters.
+     */
+    filters?: (FilterSource | string)[];
+    /** Text search. Default true. */
+    search?: boolean;
+    /** Starting state (e.g. restored from the URL). */
+    initial?: {
+        search?: string;
+        values?: FilterValues;
+    };
+    /** Your own rule, applied after the filters. */
+    predicate?: (q: Question, answers: Answers) => boolean;
+    /** Every change (e.g. to keep it in the URL). */
+    onChange?: (state: {
+        search: string;
+        values: FilterValues;
+    }) => void;
+}
+/**
+ * Search and filters over questions, as data. formlift decides nothing about what to show: every filter you
+ * pass comes back as a group with `available` (does this form have anything to filter on?); you draw the ones
+ * you want, the way you want. QuestionList uses the same hook.
+ * While the filter stays the same, answers typed meanwhile do not make questions vanish mid-word.
+ */
+declare function useQuestionFilter(questions: Question[], answers: Answers, { filters, search: searchOn, initial, predicate, onChange }?: UseQuestionFilterOptions): {
+    groups: FilterGroup[];
+    /** One group by id (undefined when not in `filters`). */
+    group: (id: string) => FilterGroup | undefined;
+    /** The search text; null when search is off. */
+    search: string | null;
+    setSearch: (text: string) => void;
+    values: FilterValues;
+    /** Filters in use, as chips to take off one by one. */
+    inUse: {
+        id: string;
+        label: string;
+        clear: () => void;
+    }[];
+    active: boolean;
+    clear: () => void;
+    /** The questions that match, in form order. */
+    list: Question[];
+    total: number;
+    /** Bumps on every change (reset paging / scroll on it). */
+    version: number;
+};
+type QuestionFilterState = ReturnType<typeof useQuestionFilter>;
+
+/** Parts of the FormFiller screen that can be hidden with `hide`. */
+type FillerPart = 'back' | 'title' | 'views' | 'zoom' | 'saveStatus' | 'saveDraft' | 'submit' | 'attachments' | 'errors' | 'requiredMark';
+interface FormFillerProps extends UseFormFillerOptions {
+    /** The PDF: URL, Blob / File, bytes, or a function returning one. */
+    pdf: PdfSource;
+    title?: ReactNode;
     onBack?: () => void;
     /** Your own items at the end of the toolbar (e.g. "Download completed PDF"). */
     toolbar?: ReactNode;
-    notify?: (message: string) => void;
-    onError?: (error: unknown) => void;
+    /** Replace any UI primitive (Button, Modal, …), the answer control (FieldControl) or one per type (`fields`). */
+    components?: FormliftComponents;
+    /** Parts of the screen to leave out. */
+    hide?: FillerPart[];
+    /** The views offered, the first one shown first. Default ['document', 'list']. */
+    views?: ('document' | 'list')[];
+    /** The list view's filters, in order: filter objects or ids of defaultFilters. Default: defaultFilters. */
+    listFilters?: UseQuestionFilterOptions['filters'];
+    /** Search box over the list. Default true. */
+    listSearch?: boolean;
+    /** Leave out filters this form has nothing for (e.g. Category on a form without category codes). Default true. */
+    hideUnavailableFilters?: boolean;
+    /** Your own search / filter bar over the list instead of the built-in one; `fs` has every filter as data. */
+    renderFilters?: (fs: QuestionFilterState) => ReactNode;
+    /** Ask "Submit this form?" first. Default true. */
+    confirmSubmit?: boolean;
     /** Extra classes on the root. It fills its container's height (`h-full`) by default: give the container a height. */
     className?: string;
 }
 /**
  * The PDF with the form's fields on it. The user fills them in place (or as a searchable list); answers autosave
  * through onSave, Submit checks them with the same rules as validateAnswers on your server.
+ * All the logic lives in useFormFiller: use that hook directly for a completely custom UI.
  */
-declare function FormFiller({ pdf: pdfSource, fields, layout, title, initialAnswers, files: initialFiles, readOnly, onSave, onSubmitted, autosave, onUpload, loadFile, onBack, toolbar, notify, onError: notifyError, className, }: FormFillerProps): react.JSX.Element;
-
-/**
- * One answer control drawn inside its box on the page. `error` outlines it red; the message shows as a tooltip
- * and in the page's error list.
- */
-declare function FieldControl({ field, value, onChange, readOnly, error, fileName, onFile, onOpenFile, signatureSrc, compact, }: {
-    field: FieldDef;
-    value: AnswerValue | undefined;
-    onChange: (v: AnswerValue) => void;
-    readOnly?: boolean;
-    error?: string;
-    fileName?: string;
-    onFile?: (file: File) => void;
-    onOpenFile?: () => void;
-    /** Image of a stored signature (the answer is its file id); signatures from before are data URLs. */
-    signatureSrc?: string;
-    /** Phone / touch: typed answers open in a full-size box (the page's boxes are too small to type in). */
-    compact?: boolean;
-}): react.JSX.Element;
+declare function FormFiller({ pdf: pdfSource, title, onBack, toolbar, components, hide, views, listFilters, listSearch, hideUnavailableFilters, renderFilters, confirmSubmit: askFirst, className, ...options }: FormFillerProps): react.JSX.Element;
 
 /**
  * Where pdf.js loads its worker from. Call once before the first document opens, e.g. with Vite:
@@ -159,4 +586,60 @@ declare function setPdfWorker(src: string | Worker): void;
 
 declare const TYPE_LABEL: Record<FieldType, string>;
 
-export { type AnswerFileInfo, FieldControl, type FormDoc, FormEditor, type FormEditorHandle, type FormEditorProps, FormFiller, type FormFillerProps, type PageSize, type PdfBytes, PdfPages, type PdfSource, TYPE_LABEL, readPdf, setPdfWorker };
+/**
+ * Undo / redo over one value. `set(next, false)` changes it without a history step (during a drag; call
+ * `checkpoint()` when the drag starts so the whole drag undoes in one step).
+ */
+declare function useUndo<T>(initial: T): {
+    value: T;
+    set: (next: T | ((v: T) => T), record?: boolean) => void;
+    checkpoint: () => void;
+    undo: () => void;
+    redo: () => void;
+    reset: (v: T) => void;
+    canUndo: boolean;
+    canRedo: boolean;
+};
+
+/**
+ * Zoom that fits a page `pageWidthPt` points wide into the scroll panel (a big screen gets a big page, up to the
+ * highest zoom), following the
+ * panel's size (phone, tablet, a resized window) until the user picks a zoom. Pass `ref` to the scroll panel.
+ */
+declare function useFitZoom(pageWidthPt: number): {
+    zoom: number;
+    setZoom: react.Dispatch<react.SetStateAction<number | null>>;
+    ref: react.Dispatch<react.SetStateAction<HTMLElement | null>>;
+};
+
+/**
+ * One of the admin's items drawn on its page: text (with optional background that hides the original under it),
+ * box, or line. Purely visual; the editor wraps it for selecting and dragging.
+ */
+declare function LayoutElementView({ element: e, pageHeight, className, style, }: {
+    element: LayoutElement;
+    pageHeight: number;
+    className?: string;
+    style?: CSSProperties;
+}): react.JSX.Element;
+
+/**
+ * The form as questions with search and filters: only the questions that match are shown. Answers are the
+ * same as on the document; `control(field)` draws a field's answer control. Filters come from useQuestionFilter:
+ * `filters` / `search` choose them, `filter` drives the list from your own useQuestionFilter, `renderToolbar`
+ * draws your own bar, `toolbar={false}` none. Filters with nothing to offer in this form are left out unless
+ * `hideUnavailable={false}`.
+ */
+declare function QuestionList({ questions, answers, control, filter: external, filters, search, hideUnavailable, toolbar, renderToolbar, }: {
+    questions: Question[];
+    answers: Answers;
+    control: (f: FieldDef) => ReactNode;
+    filter?: QuestionFilterState;
+    filters?: UseQuestionFilterOptions['filters'];
+    search?: boolean;
+    hideUnavailable?: boolean;
+    toolbar?: boolean;
+    renderToolbar?: (fs: QuestionFilterState) => ReactNode;
+}): react.JSX.Element;
+
+export { AnswerControl, type AnswerFileInfo, type EditorPart, FieldControl, type FieldControlProps, type FillerPart, type FilterGroup, type FormDoc, FormEditor, type FormEditorHandle, type FormEditorProps, type FormEditorState, FormFiller, type FormFillerProps, type FormFillerState, type FormliftComponents, FormliftProvider, LayoutElementView, type PageSize, type PdfBytes, PdfPages, type PdfSource, type QuestionFilterState, QuestionList, type SaveState, type Selection, TYPE_LABEL, type UIComponents, type UseFormEditorOptions, type UseFormFillerOptions, type UseQuestionFilterOptions, defaultComponents, defaultFilters, readPdf, setPdfWorker, useFitZoom, useFormEditor, useFormFiller, useQuestionFilter, useUndo };