@dou-ui/form-builder 0.0.0-stage → 0.1.0-alpha.0

package/dist/types/builder/condition-editor.vue.d.ts

@@ -0,0 +1,17 @@
+import type { LogicTarget } from './logic';
+type __VLS_Props = {
+    modelValue?: string | null;
+    /** The fields the rows can read. */
+    targets?: LogicTarget[];
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    modelValue: string | null;
+    targets: LogicTarget[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/builder/condition.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Conditions as the condition editor shows them: rows of "field, how,
+ * value", all of which must hold (`and`) or one of which (`or`). They are
+ * written to the node as expression text, and read back from it when the
+ * text has that shape; other expressions are edited as text.
+ */
+export type ConditionOperator = 'eq' | 'ne' | 'gt' | 'ge' | 'lt' | 'le' | 'in' | 'contains' | 'empty' | 'filled';
+export type ConditionLiteral = string | number | boolean | null;
+export interface ConditionRow {
+    /** What the row reads: the form's values, or the list item around the node. */
+    scope: 'values' | 'item';
+    /** The path read, e.g. `contact.phone`; empty while no field is picked. */
+    path: string;
+    op: ConditionOperator;
+    /** A literal, or a list of them for `in`. Unused by `empty` and `filled`. */
+    value?: ConditionLiteral | ConditionLiteral[];
+}
+export interface Condition {
+    join: 'and' | 'or';
+    rows: ConditionRow[];
+}
+/** Operators that need no value. */
+export declare const unaryOperators: ReadonlySet<ConditionOperator>;
+/** A literal as expression text. */
+export declare function literalSource(value: ConditionLiteral): string;
+/** `values.contact.phone`, with brackets for keys that are not plain names. */
+export declare function referenceSource(scope: 'values' | 'item', path: string): string;
+/** Whether a row says enough to be written. */
+export declare function rowComplete(entry: ConditionRow): boolean;
+/** The condition as expression text, leaving out rows that are not filled in; `''` for none. */
+export declare function printCondition(condition: Condition): string;
+/**
+ * The condition an expression says, when it is rows joined by one of
+ * `&&` and `||`; `undefined` for any other expression, or one that does
+ * not parse. Empty text is a condition without rows.
+ */
+export declare function parseCondition(source: string | undefined): Condition | undefined;

package/dist/types/builder/context.d.ts

@@ -0,0 +1,149 @@
+import type { ComputedRef, InjectionKey, Ref } from 'vue';
+import type { FormContainerNode, FormDocument, FormNode, FormPageNode, FormValidator } from '../core/types';
+import type { FormFunction } from '../core/expression';
+import type { FormFieldType } from '../fields/define';
+import type { FormOptionsLoader } from '../renderer/context';
+import type { ResolvedFormBuilderExtensions } from './extension';
+import type { FormBuilderMessages } from './locale';
+import { FormBuilderTransaction } from './core/transaction';
+import type { FormBuilderInsertPlace } from './core/commands';
+import type { DragController } from './drag';
+/** What the builder shows: the canvas to edit on, or the form to fill in as people will. */
+export type FormBuilderMode = 'design' | 'preview';
+/** How a click changes the selection: replace it, add or take away the node, or extend it. */
+export type FormBuilderSelectMode = 'replace' | 'toggle' | 'extend';
+export interface FormBuilderDispatchOptions {
+    /** The selection after the change. Defaults to the current one, without nodes that are gone. */
+    selection?: readonly string[];
+    /** Read out to screen readers once the change is made. */
+    announce?: string;
+}
+/**
+ * What the builder and its parts share, from `useFormBuilder()` inside a
+ * builder, e.g. in a panel of your own or a field type's component.
+ */
+export interface FormBuilderContext {
+    /** The document as it is now. */
+    readonly document: FormDocument;
+    /** The ids of the selected nodes, the last one selected last. */
+    readonly selection: readonly string[];
+    /** Every field type, built-in and given. */
+    readonly fields: ReadonlyMap<string, FormFieldType>;
+    readonly messages: FormBuilderMessages;
+    readonly canUndo: boolean;
+    readonly canRedo: boolean;
+    /**
+     * Whether the builder only shows the form: nodes can be selected and
+     * their settings read, but the commands below change nothing. A
+     * transaction handed to `dispatch` still applies.
+     */
+    readonly readonly: boolean;
+    readonly mode: FormBuilderMode;
+    /** Show the canvas or the preview. */
+    setMode: (mode: FormBuilderMode) => void;
+    /** A transaction on the document as it is now, to `dispatch`. */
+    transaction: () => FormBuilderTransaction;
+    /** Make the changes of a transaction, as one undo step (or part of one, by `meta.group`). */
+    dispatch: (tr: FormBuilderTransaction, options?: FormBuilderDispatchOptions) => void;
+    /** Select nodes; `null` or `[]` selects the form itself. */
+    select: (ids: string | readonly string[] | null, mode?: FormBuilderSelectMode) => void;
+    /**
+     * Add a new node of a type (a field type or `section`, `tabs`, `steps`,
+     * `list`) and select it. It goes into the selected container, else
+     * after the selected node, else at the end, unless `place` says where.
+     * Returns its id.
+     */
+    add: (type: string, place?: FormBuilderInsertPlace) => string | undefined;
+    /** Delete nodes, the selected ones by default. */
+    remove: (ids?: readonly string[]) => void;
+    /** Put a copy of each node after it, the selected ones by default, and select the copies. */
+    duplicate: (ids?: readonly string[]) => void;
+    /** Move nodes, the selected ones by default, one place up (`-1`) or down (`1`). */
+    moveBy: (delta: -1 | 1, ids?: readonly string[]) => void;
+    /**
+     * Move nodes, the selected ones by default, into a container (`null`:
+     * the top) to start at `index` of its children as they are now.
+     */
+    moveTo: (place: FormBuilderInsertPlace, ids?: readonly string[]) => void;
+    /** Replace the whole form with another, e.g. one imported as JSON, as one undo step. */
+    replace: (document: FormDocument) => void;
+    /** Put nodes of one container into a new section, the selected ones by default. */
+    wrap: (ids?: readonly string[]) => void;
+    /** Add a page to tabs or steps (the selected ones, or the ones around the selection). */
+    addPage: (id?: string) => void;
+    /** Select the container around the last selected node, or the form. */
+    selectParent: () => void;
+    undo: () => void;
+    redo: () => void;
+    /** The page of tabs or steps the canvas shows. */
+    shownPage: (container: FormContainerNode) => FormPageNode | undefined;
+}
+/** What the builder's own parts read besides the public context. */
+export interface BuilderState extends FormBuilderContext {
+    /** The id of a node's element on the canvas or in the outline. */
+    domId: (id: string, view: 'canvas' | 'outline') => string;
+    announce: (text: string) => void;
+    live: Ref<string>;
+    /** Keys pressed on the canvas or the outline; `order` is the nodes as they are listed there. */
+    keydown: (event: KeyboardEvent, view: BuilderView) => void;
+    /** Ask the inspector to focus its first setting. */
+    focusInspector: () => void;
+    inspector: Ref<HTMLElement | null>;
+    /** The canvas's focusable tree, to take focus back. */
+    canvas: Ref<HTMLElement | null>;
+    /** Taps add to the selection or take from it, for touch screens without Shift or ⌘. */
+    tapToggles: Ref<boolean>;
+    /**
+     * A press on a node in a view: Shift selects the range from the last
+     * plain press, ⌘ / Ctrl (or `tapToggles`) adds or removes, else replaces.
+     */
+    pick: (id: string, event: MouseEvent, view: BuilderView) => void;
+    /** Drags on the canvas, set by the canvas once it is mounted. */
+    dragger: Ref<DragController | null>;
+    /** Opens the menu of the selected nodes at a point of the viewport, set by the canvas. */
+    openMenu: Ref<((x: number, y: number) => void) | null>;
+    /** The names of the functions given to the builder, for checks and completions. */
+    functionNames: ComputedRef<string[]>;
+    /** The functions given to the builder, for the preview. */
+    functions: () => Record<string, FormFunction> | undefined;
+    sources: () => Record<string, FormOptionsLoader> | undefined;
+    /** The validators given to the builder, for the preview and the rules editor. */
+    validators: () => Record<string, FormValidator> | undefined;
+    extensions: () => ResolvedFormBuilderExtensions;
+    /** The selection, as a set, for views checking many nodes. */
+    selected: ComputedRef<ReadonlySet<string>>;
+    /** The node the inspector and the action bar are for: the last selected one. */
+    focused: ComputedRef<FormNode | undefined>;
+}
+/** A list of nodes as a view shows them, for the arrow keys. */
+export interface BuilderView {
+    name: 'canvas' | 'outline';
+    /** The nodes in the order they are listed. */
+    order: () => string[];
+    /** `ArrowRight` on a node: return `true` when the view handled it, e.g. by expanding it. */
+    expand?: (id: string) => boolean;
+    collapse?: (id: string) => boolean;
+}
+export declare const builderKey: InjectionKey<BuilderState>;
+/** Inside a builder: its document, selection and commands. */
+export declare function useFormBuilder(): FormBuilderContext;
+export declare function useBuilderState(): BuilderState;
+export interface CreateBuilderOptions {
+    uid: string;
+    document: () => FormDocument;
+    selection: () => readonly string[] | undefined;
+    fields: () => Map<string, FormFieldType>;
+    messages: () => FormBuilderMessages;
+    emitDocument: (document: FormDocument, tr: FormBuilderTransaction) => void;
+    emitSelection: (ids: string[]) => void;
+    mode: () => FormBuilderMode;
+    emitMode: (mode: FormBuilderMode) => void;
+    functions: () => Record<string, FormFunction> | undefined;
+    sources: () => Record<string, FormOptionsLoader> | undefined;
+    validators: () => Record<string, FormValidator> | undefined;
+    readonly: () => boolean;
+    extensions: () => ResolvedFormBuilderExtensions;
+}
+export declare function createBuilderState(options: CreateBuilderOptions): BuilderState;
+/** Every node in the order the canvas lists them: only the shown page of tabs and steps is open. */
+export declare function canvasOrder(state: BuilderState): string[];

package/dist/types/builder/core/commands.d.ts

@@ -0,0 +1,74 @@
+import type { FormContainerNode, FormDocument, FormListNode, FormNode, FormPageNode } from '../../core/types';
+import type { FormFieldType } from '../../fields/define';
+import type { FormBuilderMessages } from '../locale';
+import type { FormBuilderTransaction } from './transaction';
+/** Where a new node goes: into a container (`null`: the top) at an index. */
+export interface FormBuilderInsertPlace {
+    parent: string | null;
+    index: number;
+}
+/** The list a node's name is a key of, or `null` for names at the top of the form. */
+export declare function scopeOf(document: FormDocument, parent: string | null): FormListNode | null;
+/** The names already used in a scope: fields and lists, not the fields of nested lists. */
+export declare function namesIn(document: FormDocument, scope: FormListNode | null): Set<string>;
+/** `select3` after `select` and `select2`: the type in camel case and the first free number. */
+export declare function uniqueName(base: string, taken: ReadonlySet<string>): string;
+/** A new node of a type, with an id, a free name and texts to start from. */
+export declare function createNode(type: string, context: {
+    fields: Map<string, FormFieldType>;
+    messages: FormBuilderMessages;
+    taken: ReadonlySet<string>;
+}): FormNode;
+/** The page of tabs or steps the builder shows, given which ones are open. */
+export type ShownPage = (container: FormContainerNode) => FormPageNode | undefined;
+/**
+ * Where a node of `type` goes when added from the palette: inside the
+ * last selected container (the shown page of tabs and steps), else after
+ * the last selected node, else at the end of the form.
+ */
+export declare function insertPlace(document: FormDocument, selection: readonly string[], type: string, shown: ShownPage): FormBuilderInsertPlace;
+/** The selected nodes without the ones inside other selected nodes, in document order. */
+export declare function topmost(document: FormDocument, ids: readonly string[]): string[];
+/** A copy of a node with new ids, and a free name for the copy itself. */
+export declare function copyNode(node: FormNode, taken: Set<string>): FormNode;
+/** What the commands below read besides the document. */
+export interface CommandContext {
+    fields: Map<string, FormFieldType>;
+    messages: FormBuilderMessages;
+}
+/** Remove nodes; the node to select afterwards: the next one, else the one before, else the parent. */
+export declare function removeNodes(tr: FormBuilderTransaction, ids: readonly string[]): {
+    removed: number;
+    next: string | undefined;
+};
+/** Put a copy of each node right after it; the ids of the copies. */
+export declare function duplicateNodes(tr: FormBuilderTransaction, ids: readonly string[]): string[];
+/**
+ * Move each node one place up (`-1`) or down (`1`) among its siblings.
+ * Nodes already at the edge stay, and so do the selected ones next to
+ * them, so a selection keeps its shape. Returns whether anything moved.
+ */
+export declare function moveNodes(tr: FormBuilderTransaction, ids: readonly string[], delta: -1 | 1): boolean;
+/** Put nodes of one container into a new section where the first of them was; its id. */
+export declare function wrapNodes(tr: FormBuilderTransaction, ids: readonly string[], context: CommandContext): string | undefined;
+/**
+ * Move nodes, in document order, into a container (`null`: the top) so
+ * that they start at `index` of its children as they are now (the moved
+ * nodes counted). Returns whether anything changed.
+ */
+export declare function moveNodesTo(tr: FormBuilderTransaction, ids: readonly string[], parent: string | null, index: number): boolean;
+/**
+ * Every place nodes can be moved to, in reading order: before each child
+ * of each container and at its end. Places inside the moved nodes, in
+ * pages not shown, or in containers that cannot hold them are left out.
+ */
+export declare function dropPlaces(document: FormDocument, ids: readonly string[], shown: ShownPage): FormBuilderInsertPlace[];
+/**
+ * Turn the document into another, e.g. one imported as JSON or one changed
+ * by another person, in as few steps as it takes: nodes only the old one
+ * has go, nodes only the new one has come in, nodes in both move where the
+ * new one has them and take its keys, and the settings follow. Nodes that
+ * did not change stay the same objects. As steps of a transaction, so undo
+ * brings the old document back.
+ */
+export declare function replaceDocument(tr: FormBuilderTransaction, next: FormDocument): void;

package/dist/types/builder/core/history.d.ts

@@ -0,0 +1,23 @@
+import type { FormDocument } from '../../core/types';
+import type { FormBuilderTransaction } from './transaction';
+/** Undo and redo of a builder: the steps of each transaction and the selection around it. */
+export declare class FormBuilderHistory {
+    private depth;
+    private done;
+    private undone;
+    constructor(depth?: number);
+    get canUndo(): boolean;
+    get canRedo(): boolean;
+    record(tr: FormBuilderTransaction, selectionBefore: string[], selectionAfter: string[], now?: number): void;
+    /** End the current group, so the next change starts a new undo step. */
+    close(): void;
+    undo(document: FormDocument): {
+        tr: FormBuilderTransaction;
+        selection: string[];
+    } | null;
+    redo(document: FormDocument): {
+        tr: FormBuilderTransaction;
+        selection: string[];
+    } | null;
+    clear(): void;
+}

package/dist/types/builder/core/transaction.d.ts

@@ -0,0 +1,108 @@
+import type { FormContainerNode, FormDocument, FormNode } from '../../core/types';
+/**
+ * The settings of a document besides its nodes, e.g. `layout` or
+ * `columns`. `undefined` in a patch removes the setting.
+ */
+export type FormDocumentPatch = {
+    [K in Exclude<keyof FormDocument, 'nodes' | 'version'>]?: FormDocument[K] | undefined;
+};
+/**
+ * Keys of a node to set; `undefined` removes the key. `id`, `type` and
+ * `children` cannot be set: insert, remove and move nodes instead.
+ */
+export type FormNodePatch = Record<string, unknown>;
+/**
+ * One change to a document. `parent` is the id of a container, or `null`
+ * for the document's own nodes; `index` counts in that list, after the
+ * node moved out of its old place.
+ */
+export type FormBuilderStep = {
+    type: 'insert';
+    node: FormNode;
+    parent: string | null;
+    index: number;
+} | {
+    type: 'remove';
+    id: string;
+} | {
+    type: 'update';
+    id: string;
+    patch: FormNodePatch;
+} | {
+    type: 'move';
+    id: string;
+    parent: string | null;
+    index: number;
+} | {
+    type: 'updateDocument';
+    patch: FormDocumentPatch;
+};
+export interface FormBuilderTransactionMeta {
+    /** `false` keeps the change out of undo, e.g. a change from another person. */
+    history?: boolean;
+    /**
+     * Changes of the same group within a second become one undo step, e.g.
+     * the keys typed into one setting.
+     */
+    group?: string;
+    /** Where the change comes from, e.g. `inspector`, `keyboard` or an extension's name. */
+    origin?: string;
+    [key: string]: unknown;
+}
+/** Where a node sits: its container (`null` at the top) and position. */
+export interface FormNodePlace {
+    node: FormNode;
+    parent: FormContainerNode | null;
+    index: number;
+    /** How deep it sits, from 1 for the document's own nodes. */
+    depth: number;
+}
+/**
+ * Where every node of a document sits, by id. Worked out once per
+ * document object, which a transaction replaces on every change.
+ */
+export declare function formNodePlaces(document: FormDocument): Map<string, FormNodePlace>;
+/**
+ * Whether a container (`null`: the top of the form) can hold `node`:
+ * pages go in tabs and steps, and only pages do.
+ */
+export declare function canContainFormNode(parent: FormNode | null, node: FormNode): boolean;
+/**
+ * Changes to a form document, made step by step. Each step returns a new
+ * document that shares every node it did not touch with the one before,
+ * so views of untouched nodes do not render again. The builder records
+ * the steps for undo; extensions and code dispatch them through
+ * `useFormBuilder().dispatch`.
+ */
+export declare class FormBuilderTransaction {
+    /** The document the transaction starts from. */
+    readonly before: FormDocument;
+    /** The document after the steps so far. */
+    doc: FormDocument;
+    readonly steps: FormBuilderStep[];
+    /** The steps that undo the ones so far, last one first. */
+    readonly inverse: FormBuilderStep[];
+    readonly meta: FormBuilderTransactionMeta;
+    constructor(
+    /** The document the transaction starts from. */
+    before: FormDocument);
+    /** Whether any step was made. */
+    get changed(): boolean;
+    /** Apply a step as it is. */
+    step(step: FormBuilderStep): this;
+    /** Put a node, and what it holds, into a container (`null`: the top), at `index` (the end by default). */
+    insert(node: FormNode, parent?: string | null, index?: number): this;
+    /** Take a node, and what it holds, out of the document. */
+    remove(id: string): this;
+    /** Set keys of a node; `undefined` removes a key. */
+    update(id: string, patch: FormNodePatch): this;
+    /** Move a node into a container (`null`: the top), at `index` of the list without it. */
+    move(id: string, parent: string | null, index: number): this;
+    /** Change the settings of the document, e.g. `{ layout: 'horizontal' }`. */
+    updateDocument(patch: FormDocumentPatch): this;
+    setMeta(key: string, value: unknown): this;
+}
+/** Run steps on a document, e.g. ones from undo or from another person. */
+export declare function applyFormSteps(document: FormDocument, steps: readonly FormBuilderStep[]): FormBuilderTransaction;
+/** Merge updates of the same node that follow each other, for steps kept by undo. */
+export declare function compactFormSteps(steps: readonly FormBuilderStep[]): FormBuilderStep[];

package/dist/types/builder/drag.d.ts

@@ -0,0 +1,52 @@
+import type { BuilderState } from './context';
+import type { FormBuilderInsertPlace } from './core/commands';
+/** A rectangle in the coordinates of the canvas's content, so scrolling does not change it. */
+interface Box {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+/** Where a drop goes, and how to draw it. */
+export interface DropTarget extends FormBuilderInsertPlace {
+    /** The line between nodes, in the canvas's content coordinates. */
+    line: {
+        left: number;
+        top: number;
+        length: number;
+        vertical: boolean;
+    };
+    /** The grid the node goes into. */
+    holder: Box;
+}
+/** What is being dragged: nodes of the canvas, or a new node of a type from the palette. */
+export type DragSource = {
+    kind: 'nodes';
+    ids: string[];
+} | {
+    kind: 'type';
+    type: string;
+};
+/** The parts the canvas draws for a drag; the controller moves them without rendering. */
+export interface DragLayer {
+    indicator: HTMLElement | null;
+    holder: HTMLElement | null;
+    ghost: HTMLElement | null;
+}
+export interface DragController {
+    /** A press on a node of the canvas: becomes a drag after a move (mouse) or a rest (touch). */
+    pressNode: (event: PointerEvent, id: string) => void;
+    /** A press on an entry of the palette. */
+    pressType: (event: PointerEvent, type: string, label: string) => void;
+    /** Whether the click that ends a drag should be ignored. */
+    swallowClick: () => boolean;
+    /** Pick up the selected nodes to move them with the keyboard. */
+    pickUp: () => boolean;
+    /** Keys while nodes are picked up; returns whether the key was used. */
+    keydown: (event: KeyboardEvent) => boolean;
+    /** Whether nodes are picked up with the keyboard. */
+    readonly carrying: boolean;
+    stop: () => void;
+}
+export declare function createDragController(state: BuilderState, scroller: () => HTMLElement | null, layer: DragLayer): DragController;
+export {};

package/dist/types/builder/expression-box.d.ts

@@ -0,0 +1,8 @@
+import ExpressionInput from './expression-input.vue';
+/**
+ * The text box for an expression: an extension's `expressionInput`, else the built-in one.
+ * It is read-only while the builder is. Everything given to it goes on to that box, so it
+ * takes what the built-in one takes.
+ */
+declare const _default: typeof ExpressionInput;
+export default _default;

package/dist/types/builder/expression-input.vue.d.ts

@@ -0,0 +1,29 @@
+interface Name {
+    path: string;
+    label?: string;
+}
+type __VLS_Props = {
+    modelValue?: string | null;
+    /** The paths `values` can read. */
+    names?: Name[];
+    /** The paths `item` can read; left out where there is no list item. */
+    itemNames?: Name[];
+    /** Whether the expression can read `value`, as a check can. */
+    readsValue?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Shown and selectable, but not changed; also when the form around is read-only. */
+    readonly?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    modelValue: string | null;
+    placeholder: string;
+    names: Name[];
+    itemNames: Name[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/builder/extension.d.ts

@@ -0,0 +1,149 @@
+import type { Component } from 'vue';
+import type { FormNode } from '../core/types';
+import type { FormFieldType } from '../fields/define';
+import type { FormBuilderContext } from './context';
+import type { FormBuilderTransaction } from './core/transaction';
+/** What an extension's hooks receive; the same as `useFormBuilder()`. */
+export type FormBuilderExtensionContext = FormBuilderContext;
+/**
+ * A key handler: return `false` to let the key through to the next handler
+ * and the builder's own keys; anything else means it was handled.
+ */
+export type FormBuilderKeyHandler = (event: KeyboardEvent) => boolean | void;
+/** A button of the toolbar over the canvas. */
+export interface FormBuilderToolbarItem {
+    key: string;
+    /** Read out, and shown as the tooltip; shown beside the icon when there is no icon. */
+    label: string;
+    icon?: Component;
+    run: () => void;
+    disabled?: boolean;
+    /** For a button that turns something on and off: whether it is on. */
+    pressed?: boolean;
+    /**
+     * The key that does the same, as a hotkey like `alt+r`: shown in the
+     * tooltip and given to screen readers as `aria-keyshortcuts`. It is only
+     * a hint; bind the key with `keymap`.
+     */
+    shortcut?: string;
+}
+/** An item of a node's menu: its "more" button and the right-click menu. */
+export interface FormBuilderMenuItem {
+    key: string;
+    label: string;
+    icon?: Component;
+    run: () => void;
+    disabled?: boolean;
+    tone?: 'neutral' | 'danger';
+    /** The key that does the same, as a hotkey like `alt+r`, shown at the end of the item. */
+    shortcut?: string;
+}
+/**
+ * A mark on a node of the canvas and the outline, e.g. who else has it
+ * selected: an outline in its color and a tag with its label.
+ */
+export interface FormBuilderNodeMark {
+    key: string;
+    label: string;
+    /** Any CSS color; the text color when left out. */
+    color?: string;
+}
+/** An undo history that replaces the builder's own, e.g. one that only undoes this user's changes. */
+export interface FormBuilderHistoryHandler {
+    /** `false` when there was nothing to undo. */
+    undo: () => boolean;
+    redo: () => boolean;
+    canUndo: () => boolean;
+    canRedo: () => boolean;
+}
+/** A part of the inspector, under the built-in settings. */
+export interface FormBuilderInspectorSection {
+    key: string;
+    /** The heading over it. */
+    title: string;
+    /**
+     * Rendered with `props`; it can call `useFormBuilder()`. It is not made
+     * read-only for you: read `useFormBuilder().readonly` and do not change
+     * the form while it is `true`.
+     */
+    component: Component;
+    props?: Record<string, unknown>;
+}
+/**
+ * A piece of the builder: field types, keys, toolbar buttons, menu items,
+ * parts of the inspector, and a say in every change.
+ */
+export interface FormBuilderExtension {
+    name: string;
+    /** Higher runs first: its keys and hooks come before others. Defaults to 100. */
+    priority?: number;
+    /**
+     * Field types for the palette, besides the `fields` prop. Give the
+     * renderer the same types (`resolveFormBuilderFields` collects them).
+     */
+    fields?: FormFieldType<any>[];
+    /**
+     * Replaces the text box for expressions (formulas, checks, conditions
+     * written as text), e.g. with the code input of
+     * `@dou-ui/form-builder/code`. It gets the built-in box's props:
+     * `modelValue`, `names`, `itemNames`, `readsValue`, `placeholder`,
+     * `disabled`, `readonly` (the builder's `readonly`), and emits
+     * `update:modelValue`. The first one by priority
+     * is used.
+     */
+    expressionInput?: Component;
+    /**
+     * Keys, written as in `useHotkey` (e.g. `mod+e`, `shift+t`), while the
+     * canvas or the outline has focus. They come before the builder's own.
+     */
+    keymap?: (context: FormBuilderExtensionContext) => Record<string, FormBuilderKeyHandler>;
+    /** Buttons after undo and redo, before the `toolbar` slot. */
+    toolbar?: (context: FormBuilderExtensionContext) => FormBuilderToolbarItem[];
+    /** Items for the menu of the selected nodes, after the built-in ones. */
+    menu?: (context: FormBuilderExtensionContext, nodes: FormNode[]) => FormBuilderMenuItem[];
+    /**
+     * Parts of the inspector for a node, or the form when `node` is
+     * `undefined`, after the built-in settings.
+     */
+    inspector?: (context: FormBuilderExtensionContext, node: FormNode | undefined) => FormBuilderInspectorSection[];
+    /**
+     * Marks for a node, read while the node renders: reactive state read
+     * here updates them.
+     */
+    marks?: (context: FormBuilderExtensionContext, node: FormNode) => FormBuilderNodeMark[];
+    /** Replaces the builder's undo history; the first extension that has one wins. */
+    history?: (context: FormBuilderExtensionContext) => FormBuilderHistoryHandler;
+    /** Runs once the builder is mounted. Return a function to run when it unmounts. */
+    setup?: (context: FormBuilderExtensionContext) => void | (() => void);
+    /**
+     * Sees every change before it reaches the document, in priority order,
+     * and may add steps to it, e.g. to name new fields by a rule of the app.
+     * Undo and redo do not come through here: they put back what was there.
+     */
+    transaction?: (tr: FormBuilderTransaction, context: FormBuilderExtensionContext) => void;
+}
+/** Declares an extension; only gives it a type. */
+export declare function defineFormBuilderExtension(extension: FormBuilderExtension): FormBuilderExtension;
+/** Everything the extensions contribute, gathered once per list. */
+export interface ResolvedFormBuilderExtensions {
+    extensions: FormBuilderExtension[];
+    fields: FormFieldType<any>[];
+    keymaps: NonNullable<FormBuilderExtension['keymap']>[];
+    toolbars: NonNullable<FormBuilderExtension['toolbar']>[];
+    menus: NonNullable<FormBuilderExtension['menu']>[];
+    inspectors: NonNullable<FormBuilderExtension['inspector']>[];
+    setups: NonNullable<FormBuilderExtension['setup']>[];
+    marks: NonNullable<FormBuilderExtension['marks']>[];
+    history: FormBuilderExtension['history'];
+    expressionInput: FormBuilderExtension['expressionInput'];
+    transactions: NonNullable<FormBuilderExtension['transaction']>[];
+}
+type ExtensionList = readonly (FormBuilderExtension | readonly FormBuilderExtension[])[];
+/** Sorts the extensions by priority and collects what they add. */
+export declare function resolveFormBuilderExtensions(list?: ExtensionList): ResolvedFormBuilderExtensions;
+/**
+ * The field types of a builder with extensions, for the renderer that
+ * shows its forms: the given ones, then the extensions'.
+ */
+export declare function resolveFormBuilderFields(fields?: readonly FormFieldType<any>[], extensions?: ExtensionList): FormFieldType<any>[];
+export {};