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

package/dist/fields/builtin.js

@@ -0,0 +1,167 @@
+import { defineFormField } from "./define.js";
+import { fitPathToOptions, fitToOptions } from "./options.js";
+import { AlertField, CheckboxField, CheckboxGroupField, DividerField, RadioField, TextField, normalizeOptions } from "./components.js";
+import { ColorValue, FilesValue, formatDate, formatNumber, formatOptions, formatPath, formatRange, formatText, formatToggle } from "./format.js";
+import { DouCascader, DouColorPicker, DouDatePicker, DouInput, DouInputNumber, DouInputOtp, DouInputTag, DouRate, DouSegmentedControl, DouSelect, DouSlider, DouSwitch, DouTextarea, DouTimePicker, DouTreeSelect, DouUpload } from "dou-ui";
+// src/fields/builtin.ts
+var text = () => "";
+var none = () => null;
+var list = () => [];
+var listWhen = (key) => (props) => props[key] ? [] : null;
+/**
+* The field types every renderer and builder knows. Each one is named
+* after the component it renders, in kebab case without the `Dou`
+* prefix: `input-number` renders `DouInputNumber`.
+*/
+var builtinFields = [
+	defineFormField({
+		type: "input",
+		component: DouInput,
+		empty: text,
+		format: formatText
+	}),
+	defineFormField({
+		type: "textarea",
+		component: DouTextarea,
+		empty: text
+	}),
+	defineFormField({
+		type: "input-number",
+		component: DouInputNumber,
+		format: formatNumber
+	}),
+	defineFormField({
+		type: "select",
+		optionsProp: "options",
+		fitValue: fitToOptions,
+		component: DouSelect,
+		defaultProps: { options: [] },
+		empty: listWhen("multiple")
+	}),
+	defineFormField({
+		type: "radio-group",
+		component: RadioField,
+		optionsProp: "options",
+		fitValue: fitToOptions,
+		empty: none
+	}),
+	defineFormField({
+		type: "checkbox-group",
+		component: CheckboxGroupField,
+		optionsProp: "options",
+		fitValue: fitToOptions,
+		empty: list
+	}),
+	defineFormField({
+		type: "checkbox",
+		component: CheckboxField,
+		empty: () => false,
+		format: formatToggle
+	}),
+	defineFormField({
+		type: "switch",
+		component: DouSwitch,
+		empty: () => false,
+		format: formatToggle
+	}),
+	defineFormField({
+		type: "segmented-control",
+		component: DouSegmentedControl,
+		optionsProp: "options",
+		fitValue: fitToOptions,
+		defaultProps: { options: [] },
+		empty: (props) => normalizeOptions(props.options)[0]?.value ?? null
+	}),
+	defineFormField({
+		type: "slider",
+		component: DouSlider,
+		format: formatRange,
+		empty: (props) => {
+			const min = props.min ?? 0;
+			return props.range ? [min, props.max ?? 100] : min;
+		}
+	}),
+	defineFormField({
+		type: "rate",
+		component: DouRate,
+		empty: () => 0,
+		readonlyComponent: DouRate
+	}),
+	defineFormField({
+		type: "date-picker",
+		component: DouDatePicker,
+		empty: none,
+		format: formatDate
+	}),
+	defineFormField({
+		type: "time-picker",
+		component: DouTimePicker,
+		empty: none,
+		format: formatRange
+	}),
+	defineFormField({
+		type: "color-picker",
+		component: DouColorPicker,
+		empty: none,
+		readonlyComponent: ColorValue
+	}),
+	defineFormField({
+		type: "cascader",
+		optionsProp: "options",
+		fitValue: fitPathToOptions,
+		component: DouCascader,
+		format: formatPath,
+		defaultProps: { options: [] },
+		empty: none
+	}),
+	defineFormField({
+		type: "tree-select",
+		optionsProp: "data",
+		fitValue: fitToOptions,
+		component: DouTreeSelect,
+		format: formatOptions("data"),
+		defaultProps: { data: [] },
+		empty: listWhen("multiple")
+	}),
+	defineFormField({
+		type: "input-tag",
+		component: DouInputTag,
+		empty: list
+	}),
+	defineFormField({
+		type: "input-otp",
+		component: DouInputOtp,
+		empty: text
+	}),
+	defineFormField({
+		type: "upload",
+		component: DouUpload,
+		empty: list,
+		readonlyComponent: FilesValue
+	}),
+	defineFormField({
+		type: "text",
+		kind: "display",
+		component: TextField
+	}),
+	defineFormField({
+		type: "divider",
+		kind: "display",
+		component: DividerField
+	}),
+	defineFormField({
+		type: "alert",
+		kind: "display",
+		component: AlertField
+	})
+];
+/** The built-in types, then `extra` on top: a type of the same name replaces the built-in one. */
+function resolveFields(extra = []) {
+	const map = /* @__PURE__ */ new Map();
+	for (const spec of builtinFields) map.set(spec.type, spec);
+	for (const spec of extra) map.set(spec.type, spec);
+	return map;
+}
+export { builtinFields, resolveFields };
+
+//# sourceMappingURL=builtin.js.map

package/dist/fields/builtin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"builtin.js","names":[],"sources":["../../src/fields/builtin.ts"],"sourcesContent":["import {\n  DouCascader,\n  DouColorPicker,\n  DouDatePicker,\n  DouInput,\n  DouInputNumber,\n  DouInputOtp,\n  DouInputTag,\n  DouRate,\n  DouSegmentedControl,\n  DouSelect,\n  DouSlider,\n  DouSwitch,\n  DouTextarea,\n  DouTimePicker,\n  DouTreeSelect,\n  DouUpload,\n} from 'dou-ui'\nimport { defineFormField } from './define'\nimport { fitPathToOptions, fitToOptions } from './options'\nimport type { FormFieldType } from './define'\nimport {\n  AlertField,\n  CheckboxField,\n  CheckboxGroupField,\n  DividerField,\n  normalizeOptions,\n  RadioField,\n  TextField,\n} from './components'\nimport type { FormOption } from './components'\nimport {\n  ColorValue,\n  FilesValue,\n  formatDate,\n  formatNumber,\n  formatOptions,\n  formatPath,\n  formatRange,\n  formatText,\n  formatToggle,\n} from './format'\n\nconst text = () => ''\nconst none = () => null\nconst list = () => []\nconst listWhen = (key: string) => (props: Record<string, unknown>) => (props[key] ? [] : null)\n\n/**\n * The field types every renderer and builder knows. Each one is named\n * after the component it renders, in kebab case without the `Dou`\n * prefix: `input-number` renders `DouInputNumber`.\n */\nexport const builtinFields: FormFieldType<any>[] = [\n  defineFormField({ type: 'input', component: DouInput, empty: text, format: formatText }),\n  defineFormField({ type: 'textarea', component: DouTextarea, empty: text }),\n  defineFormField({ type: 'input-number', component: DouInputNumber, format: formatNumber }),\n  defineFormField({\n    type: 'select',\n    optionsProp: 'options',\n    fitValue: fitToOptions,\n    component: DouSelect,\n    defaultProps: { options: [] },\n    empty: listWhen('multiple'),\n  }),\n  defineFormField({\n    type: 'radio-group',\n    component: RadioField,\n    optionsProp: 'options',\n    fitValue: fitToOptions,\n    empty: none,\n  }),\n  defineFormField({\n    type: 'checkbox-group',\n    component: CheckboxGroupField,\n    optionsProp: 'options',\n    fitValue: fitToOptions,\n    empty: list,\n  }),\n  defineFormField({\n    type: 'checkbox',\n    component: CheckboxField,\n    empty: () => false,\n    format: formatToggle,\n  }),\n  defineFormField({\n    type: 'switch',\n    component: DouSwitch,\n    empty: () => false,\n    format: formatToggle,\n  }),\n  defineFormField({\n    type: 'segmented-control',\n    component: DouSegmentedControl,\n    optionsProp: 'options',\n    fitValue: fitToOptions,\n    defaultProps: { options: [] },\n    empty: (props: { options?: FormOption[] }) => normalizeOptions(props.options)[0]?.value ?? null,\n  }),\n  defineFormField({\n    type: 'slider',\n    component: DouSlider,\n    format: formatRange,\n    empty: (props: { range?: boolean; min?: number; max?: number }) => {\n      const min = props.min ?? 0\n      return props.range ? [min, props.max ?? 100] : min\n    },\n  }),\n  defineFormField({ type: 'rate', component: DouRate, empty: () => 0, readonlyComponent: DouRate }),\n  defineFormField({\n    type: 'date-picker',\n    component: DouDatePicker,\n    empty: none,\n    format: formatDate,\n  }),\n  defineFormField({\n    type: 'time-picker',\n    component: DouTimePicker,\n    empty: none,\n    format: formatRange,\n  }),\n  defineFormField({\n    type: 'color-picker',\n    component: DouColorPicker,\n    empty: none,\n    readonlyComponent: ColorValue,\n  }),\n  defineFormField({\n    type: 'cascader',\n    optionsProp: 'options',\n    fitValue: fitPathToOptions,\n    component: DouCascader,\n    format: formatPath,\n    defaultProps: { options: [] },\n    empty: none,\n  }),\n  defineFormField({\n    type: 'tree-select',\n    optionsProp: 'data',\n    fitValue: fitToOptions,\n    component: DouTreeSelect,\n    format: formatOptions('data'),\n    defaultProps: { data: [] },\n    empty: listWhen('multiple'),\n  }),\n  defineFormField({ type: 'input-tag', component: DouInputTag, empty: list }),\n  defineFormField({ type: 'input-otp', component: DouInputOtp, empty: text }),\n  defineFormField({\n    type: 'upload',\n    component: DouUpload,\n    empty: list,\n    readonlyComponent: FilesValue,\n  }),\n  defineFormField({ type: 'text', kind: 'display', component: TextField }),\n  defineFormField({ type: 'divider', kind: 'display', component: DividerField }),\n  defineFormField({ type: 'alert', kind: 'display', component: AlertField }),\n]\n\n/** The built-in types, then `extra` on top: a type of the same name replaces the built-in one. */\nexport function resolveFields(extra: readonly FormFieldType<any>[] = []) {\n  const map = new Map<string, FormFieldType>()\n  for (const spec of builtinFields) map.set(spec.type, spec)\n  for (const spec of extra) map.set(spec.type, spec)\n  return map\n}\n"],"mappings":"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"}

package/dist/fields/components.js

@@ -0,0 +1,155 @@
+import { DouAlert, DouCheckbox, DouCheckboxGroup, DouDivider, DouRadio, DouRadioGroup, DouText } from "dou-ui";
+import { defineComponent, h } from "vue";
+// src/fields/components.ts
+function normalizeOptions(options) {
+	return (options ?? []).map((option) => typeof option === "object" ? {
+		value: option.value,
+		label: option.label ?? String(option.value),
+		disabled: option.disabled
+	} : {
+		value: option,
+		label: String(option),
+		disabled: false
+	});
+}
+var optionProps = {
+	options: {
+		type: Array,
+		default: () => []
+	},
+	direction: {
+		type: String,
+		default: "horizontal"
+	},
+	disabled: Boolean
+};
+/** One choice out of a few, all in view. */
+var RadioField = defineComponent({
+	name: "DouFormRadioField",
+	props: {
+		...optionProps,
+		modelValue: {
+			type: [
+				String,
+				Number,
+				Boolean
+			],
+			default: void 0
+		}
+	},
+	emits: { "update:modelValue": (_value) => true },
+	setup(props, { emit }) {
+		return () => h(DouRadioGroup, {
+			modelValue: props.modelValue ?? void 0,
+			direction: props.direction,
+			disabled: props.disabled,
+			"onUpdate:modelValue": (value) => value !== void 0 && emit("update:modelValue", value)
+		}, () => normalizeOptions(props.options).map((option) => h(DouRadio, {
+			key: String(option.value),
+			value: option.value,
+			disabled: option.disabled
+		}, () => option.label)));
+	}
+});
+/** Any number of choices out of a few, all in view. */
+var CheckboxGroupField = defineComponent({
+	name: "DouFormCheckboxGroupField",
+	props: {
+		...optionProps,
+		modelValue: {
+			type: Array,
+			default: void 0
+		}
+	},
+	emits: { "update:modelValue": (_value) => true },
+	setup(props, { emit }) {
+		return () => h(DouCheckboxGroup, {
+			modelValue: props.modelValue ?? [],
+			direction: props.direction,
+			disabled: props.disabled,
+			"onUpdate:modelValue": (value) => emit("update:modelValue", value)
+		}, () => normalizeOptions(props.options).map((option) => h(DouCheckbox, {
+			key: String(option.value),
+			value: option.value,
+			disabled: option.disabled
+		}, () => option.label)));
+	}
+});
+/** A single box, e.g. to agree to terms; its text sits beside it. */
+var CheckboxField = defineComponent({
+	name: "DouFormCheckboxField",
+	props: {
+		modelValue: {
+			type: Boolean,
+			default: false
+		},
+		text: String,
+		disabled: Boolean
+	},
+	emits: { "update:modelValue": (_value) => true },
+	setup(props, { emit }) {
+		return () => h(DouCheckbox, {
+			modelValue: props.modelValue,
+			disabled: props.disabled,
+			"onUpdate:modelValue": (value) => emit("update:modelValue", value === true)
+		}, props.text ? () => props.text : void 0);
+	}
+});
+/** A heading or a paragraph between fields. */
+var TextField = defineComponent({
+	name: "DouFormTextField",
+	props: {
+		content: {
+			type: String,
+			default: ""
+		},
+		/** `title` for a heading, `body` for a paragraph, `caption` for small print. */
+		variant: {
+			type: String,
+			default: "body"
+		}
+	},
+	setup(props) {
+		return () => props.variant === "title" ? h(DouText, {
+			as: "h3",
+			size: "lg",
+			weight: "medium",
+			class: "dou-form-renderer__title"
+		}, () => props.content) : h(DouText, {
+			as: "p",
+			size: props.variant === "caption" ? "sm" : "md",
+			variant: "secondary",
+			class: "dou-form-renderer__paragraph"
+		}, () => props.content);
+	}
+});
+var DividerField = defineComponent({
+	name: "DouFormDividerField",
+	props: {
+		text: String,
+		dashed: Boolean
+	},
+	setup(props) {
+		return () => h(DouDivider, { dashed: props.dashed }, props.text ? () => props.text : void 0);
+	}
+});
+var AlertField = defineComponent({
+	name: "DouFormAlertField",
+	props: {
+		tone: {
+			type: String,
+			default: "neutral"
+		},
+		title: String,
+		content: String
+	},
+	setup(props) {
+		return () => h(DouAlert, {
+			tone: props.tone,
+			title: props.title
+		}, props.content ? () => props.content : void 0);
+	}
+});
+export { AlertField, CheckboxField, CheckboxGroupField, DividerField, RadioField, TextField, normalizeOptions };
+
+//# sourceMappingURL=components.js.map

package/dist/fields/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","names":[],"sources":["../../src/fields/components.ts"],"sourcesContent":["import { defineComponent, h } from 'vue'\nimport type { PropType } from 'vue'\nimport {\n  DouAlert,\n  DouCheckbox,\n  DouCheckboxGroup,\n  DouDivider,\n  DouRadio,\n  DouRadioGroup,\n  DouText,\n} from 'dou-ui'\nimport type { CheckboxValue, RadioValue, Tone } from 'dou-ui'\n\n/** A choice as written in a document: a plain value is both value and label. */\nexport type FormOption =\n  string | number | { value: string | number | boolean; label?: string; disabled?: boolean }\n\nexport function normalizeOptions(options: readonly FormOption[] | undefined) {\n  return (options ?? []).map((option) =>\n    typeof option === 'object'\n      ? {\n          value: option.value,\n          label: option.label ?? String(option.value),\n          disabled: option.disabled,\n        }\n      : { value: option, label: String(option), disabled: false },\n  )\n}\n\nconst optionProps = {\n  options: { type: Array as PropType<FormOption[]>, default: () => [] },\n  direction: { type: String as PropType<'horizontal' | 'vertical'>, default: 'horizontal' },\n  disabled: Boolean,\n}\n\n/** One choice out of a few, all in view. */\nexport const RadioField = defineComponent({\n  name: 'DouFormRadioField',\n  props: {\n    ...optionProps,\n    modelValue: { type: [String, Number, Boolean] as PropType<RadioValue>, default: undefined },\n  },\n  emits: { 'update:modelValue': (_value: RadioValue) => true },\n  setup(props, { emit }) {\n    return () =>\n      h(\n        DouRadioGroup,\n        {\n          modelValue: props.modelValue ?? undefined,\n          direction: props.direction,\n          disabled: props.disabled,\n          'onUpdate:modelValue': (value: RadioValue | undefined) =>\n            value !== undefined && emit('update:modelValue', value),\n        },\n        () =>\n          normalizeOptions(props.options).map((option) =>\n            h(\n              DouRadio,\n              { key: String(option.value), value: option.value, disabled: option.disabled },\n              () => option.label,\n            ),\n          ),\n      )\n  },\n})\n\n/** Any number of choices out of a few, all in view. */\nexport const CheckboxGroupField = defineComponent({\n  name: 'DouFormCheckboxGroupField',\n  props: {\n    ...optionProps,\n    modelValue: { type: Array as PropType<CheckboxValue[]>, default: undefined },\n  },\n  emits: { 'update:modelValue': (_value: CheckboxValue[]) => true },\n  setup(props, { emit }) {\n    return () =>\n      h(\n        DouCheckboxGroup,\n        {\n          modelValue: props.modelValue ?? [],\n          direction: props.direction,\n          disabled: props.disabled,\n          'onUpdate:modelValue': (value: CheckboxValue[]) => emit('update:modelValue', value),\n        },\n        () =>\n          normalizeOptions(props.options).map((option) =>\n            h(\n              DouCheckbox,\n              {\n                key: String(option.value),\n                value: option.value as CheckboxValue,\n                disabled: option.disabled,\n              },\n              () => option.label,\n            ),\n          ),\n      )\n  },\n})\n\n/** A single box, e.g. to agree to terms; its text sits beside it. */\nexport const CheckboxField = defineComponent({\n  name: 'DouFormCheckboxField',\n  props: {\n    modelValue: { type: Boolean, default: false },\n    text: String,\n    disabled: Boolean,\n  },\n  emits: { 'update:modelValue': (_value: boolean) => true },\n  setup(props, { emit }) {\n    return () =>\n      h(\n        DouCheckbox,\n        {\n          modelValue: props.modelValue,\n          disabled: props.disabled,\n          'onUpdate:modelValue': (value: unknown) => emit('update:modelValue', value === true),\n        },\n        props.text ? () => props.text : undefined,\n      )\n  },\n})\n\n/** A heading or a paragraph between fields. */\nexport const TextField = defineComponent({\n  name: 'DouFormTextField',\n  props: {\n    content: { type: String, default: '' },\n    /** `title` for a heading, `body` for a paragraph, `caption` for small print. */\n    variant: { type: String as PropType<'title' | 'body' | 'caption'>, default: 'body' },\n  },\n  setup(props) {\n    return () =>\n      props.variant === 'title'\n        ? h(\n            DouText,\n            { as: 'h3', size: 'lg', weight: 'medium', class: 'dou-form-renderer__title' },\n            () => props.content,\n          )\n        : h(\n            DouText,\n            {\n              as: 'p',\n              size: props.variant === 'caption' ? 'sm' : 'md',\n              variant: 'secondary',\n              class: 'dou-form-renderer__paragraph',\n            },\n            () => props.content,\n          )\n  },\n})\n\nexport const DividerField = defineComponent({\n  name: 'DouFormDividerField',\n  props: { text: String, dashed: Boolean },\n  setup(props) {\n    return () => h(DouDivider, { dashed: props.dashed }, props.text ? () => props.text : undefined)\n  },\n})\n\nexport const AlertField = defineComponent({\n  name: 'DouFormAlertField',\n  props: {\n    tone: { type: String as PropType<Tone>, default: 'neutral' },\n    title: String,\n    content: String,\n  },\n  setup(props) {\n    return () =>\n      h(\n        DouAlert,\n        { tone: props.tone, title: props.title },\n        props.content ? () => props.content : undefined,\n      )\n  },\n})\n"],"mappings":"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"}

package/dist/fields/define.js

@@ -0,0 +1,44 @@
+import { inject, markRaw } from "vue";
+// src/fields/define.ts
+/** Declare a field type. Gives the spec its types and leaves it as is otherwise. */
+function defineFormField(spec) {
+	const result = {
+		...spec,
+		component: markRaw(spec.component)
+	};
+	if (spec.icon) result.icon = markRaw(spec.icon);
+	if (spec.readonlyComponent) result.readonlyComponent = markRaw(spec.readonlyComponent);
+	return result;
+}
+/** Settings of a node: its type's `defaultProps` with its own `props` on top. */
+function fieldProps(type, node) {
+	const base = type?.defaultProps;
+	if (!base) return node.props ?? {};
+	return node.props ? {
+		...base,
+		...node.props
+	} : base;
+}
+var formFieldKey = Symbol("DouFormField");
+/**
+* Inside a field type's component: the node it renders, its type and
+* settings. The properties stay current when the node changes.
+*/
+function useFormField() {
+	const get = inject(formFieldKey, void 0);
+	if (!get) throw new Error("[@dou-ui/form-builder] useFormField() must be called inside a form field");
+	return {
+		get node() {
+			return get().node;
+		},
+		get type() {
+			return get().type;
+		},
+		get props() {
+			return get().props;
+		}
+	};
+}
+export { defineFormField, fieldProps, formFieldKey, useFormField };
+
+//# sourceMappingURL=define.js.map

package/dist/fields/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/fields/define.ts"],"sourcesContent":["import { inject, markRaw } from 'vue'\nimport type { Component, InjectionKey } from 'vue'\nimport type { FormFieldNode, FormNode } from '../core/types'\nimport type { FormFormatContext } from './format'\n\nexport type FormFieldProps = Record<string, unknown>\n\n/**\n * What a field type is: how it renders, what it starts with, and which\n * settings it takes. The renderer and the builder share the same list.\n */\nexport interface FormFieldType<P extends FormFieldProps = FormFieldProps> {\n  /** The name nodes refer to it by in `type`. A type of the same name as a built-in one replaces it. */\n  type: string\n  /** Shown to people building the form. */\n  label?: string\n  /**\n   * - `value`: holds a value at the node's `name`, wrapped in a form item\n   *   with its label, help and checks.\n   * - `display`: only shows something, such as text or a divider.\n   */\n  kind?: 'value' | 'display'\n  /** Settings a node starts with, below its own `props`. */\n  defaultProps?: Partial<P>\n  /**\n   * The type's empty value, which a field starts with when its node sets\n   * no `default`, e.g. `[]` for a list of choices. Defaults to `null`.\n   */\n  empty?: (props: P) => unknown\n  /**\n   * Renders the field. A `value` field gets `modelValue`, listens to\n   * `update:modelValue`, and receives the settings as props (after\n   * `toProps`). Call `useFormField()` inside it for the node itself.\n   */\n  component: Component\n  /**\n   * The prop that takes the list of options, for a type whose options can\n   * come from a source (a node's `source`), e.g. `options` or `data`.\n   */\n  optionsProp?: string\n  /**\n   * Narrows a value to what new options offer, e.g. drops a city once the\n   * province changes. Called when a source loads different options; the\n   * value stays as it is when the type has none.\n   */\n  fitValue?: (value: unknown, options: readonly unknown[]) => unknown\n  /**\n   * The value as text, for a renderer that is `readonly`. Gets the\n   * settings (with options loaded from a source). Not called for an empty\n   * value, which shows as the renderer's `noValue` text. Defaults to the\n   * labels of the chosen options for a type with `optionsProp`, else to\n   * the value as plain text: lists joined, booleans as yes and no.\n   */\n  format?: (value: unknown, props: P, context: FormFormatContext) => string\n  /**\n   * Shows the value in a `readonly` renderer instead of `format`'s text,\n   * e.g. a swatch for a color. Gets `modelValue` and the same props as\n   * `component`, and `readonly` when it takes one.\n   */\n  readonlyComponent?: Component\n  /** Turns the settings into the component's props, when they differ. */\n  toProps?: (props: P, node: FormFieldNode) => Record<string, unknown>\n  /** The builder's palette: the type's icon, e.g. one of `@dou-ui/icons`. */\n  icon?: Component\n  /**\n   * The palette group the type is listed in: `input`, `choice`, `more`\n   * (the default), `display`, or a name of your own, shown as it is.\n   */\n  group?: string\n  /**\n   * The settings the builder's inspector shows for the type, as nodes of\n   * a form whose values are the node's `props`: a field named\n   * `placeholder` edits `props.placeholder`, and expressions read the\n   * other settings as `values`. A setting left at its `default` is not\n   * written to the node.\n   */\n  settings?: FormNode[]\n}\n\n/** Declare a field type. Gives the spec its types and leaves it as is otherwise. */\nexport function defineFormField<P extends FormFieldProps = FormFieldProps>(\n  spec: FormFieldType<P>,\n): FormFieldType<P> {\n  const result = { ...spec, component: markRaw(spec.component) }\n  if (spec.icon) result.icon = markRaw(spec.icon)\n  if (spec.readonlyComponent) result.readonlyComponent = markRaw(spec.readonlyComponent)\n  return result\n}\n\n/** Settings of a node: its type's `defaultProps` with its own `props` on top. */\nexport function fieldProps(type: FormFieldType | undefined, node: FormFieldNode): FormFieldProps {\n  const base = type?.defaultProps as FormFieldProps | undefined\n  if (!base) return node.props ?? {}\n  return node.props ? { ...base, ...node.props } : base\n}\n\nexport interface FormFieldContext {\n  /** The node being rendered. */\n  node: FormFieldNode\n  /** Its type. */\n  type: FormFieldType\n  /** Its settings, with the type's `defaultProps` filled in. */\n  props: FormFieldProps\n}\n\nexport const formFieldKey: InjectionKey<() => FormFieldContext> = Symbol('DouFormField')\n\n/**\n * Inside a field type's component: the node it renders, its type and\n * settings. The properties stay current when the node changes.\n */\nexport function useFormField(): Readonly<FormFieldContext> {\n  const get = inject(formFieldKey, undefined)\n  if (!get)\n    throw new Error('[@dou-ui/form-builder] useFormField() must be called inside a form field')\n  return {\n    get node() {\n      return get().node\n    },\n    get type() {\n      return get().type\n    },\n    get props() {\n      return get().props\n    },\n  }\n}\n"],"mappings":";;;AAgFA,SAAgB,gBACd,MACkB;CAClB,MAAM,SAAS;EAAE,GAAG;EAAM,WAAW,QAAQ,KAAK,SAAS;CAAE;CAC7D,IAAI,KAAK,MAAM,OAAO,OAAO,QAAQ,KAAK,IAAI;CAC9C,IAAI,KAAK,mBAAmB,OAAO,oBAAoB,QAAQ,KAAK,iBAAiB;CACrF,OAAO;AACT;;AAGA,SAAgB,WAAW,MAAiC,MAAqC;CAC/F,MAAM,OAAO,MAAM;CACnB,IAAI,CAAC,MAAM,OAAO,KAAK,SAAS,CAAC;CACjC,OAAO,KAAK,QAAQ;EAAE,GAAG;EAAM,GAAG,KAAK;CAAM,IAAI;AACnD;AAWA,IAAa,eAAqD,OAAO,cAAc;;;;;AAMvF,SAAgB,eAA2C;CACzD,MAAM,MAAM,OAAO,cAAc,KAAA,CAAS;CAC1C,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,0EAA0E;CAC5F,OAAO;EACL,IAAI,OAAO;GACT,OAAO,IAAI,CAAC,CAAC;EACf;EACA,IAAI,OAAO;GACT,OAAO,IAAI,CAAC,CAAC;EACf;EACA,IAAI,QAAQ;GACV,OAAO,IAAI,CAAC,CAAC;EACf;CACF;AACF"}

package/dist/fields/format.js

@@ -0,0 +1,125 @@
+import { DouLink, formatDateValue } from "dou-ui";
+import { defineComponent, h } from "vue";
+// src/fields/format.ts
+/** The label of each value the options offer, through groups (`options`) and levels (`children`). */
+function labelsOf(options, into = /* @__PURE__ */ new Map()) {
+	if (!Array.isArray(options)) return into;
+	for (const option of options) {
+		if (option === null || typeof option !== "object") {
+			if (!into.has(option)) into.set(option, String(option));
+			continue;
+		}
+		const record = option;
+		const value = "value" in record ? record.value : record.key;
+		if (value !== void 0 && !into.has(value)) into.set(value, typeof record.label === "string" ? record.label : String(value));
+		labelsOf(record.options, into);
+		labelsOf(record.children, into);
+	}
+	return into;
+}
+var warnedTypes = /* @__PURE__ */ new Set();
+function warnObject(type) {
+	if (process.env.NODE_ENV === "production" || warnedTypes.has(type)) return;
+	warnedTypes.add(type);
+	console.warn(`[@dou-ui/form-builder] a value of field type "${type}" is an object and shows as JSON when read-only; give the type a \`format\` or \`readonlyComponent\``);
+}
+/** Plain text of any value: lists joined, `true` and `false` as yes and no. */
+function formatValue(value, context) {
+	if (value === null || value === void 0) return "";
+	if (Array.isArray(value)) return value.map((item) => formatValue(item, context)).filter(Boolean).join(context.messages.separator);
+	if (typeof value === "boolean") return value ? context.messages.yes : context.messages.no;
+	if (value instanceof Date) return value.toLocaleString(context.locale.name);
+	if (typeof value === "object") {
+		const record = value;
+		if (typeof record.label === "string") return record.label;
+		if (typeof record.name === "string") return record.name;
+		warnObject(context.node.type);
+		return JSON.stringify(value);
+	}
+	return String(value);
+}
+/** The labels of the chosen options, from the setting that holds them (`options` by default). */
+var formatOptions = (prop = "options") => (value, props, context) => {
+	const labels = labelsOf(props[prop]);
+	const label = (item) => labels.get(item) ?? formatValue(item, context);
+	return Array.isArray(value) ? value.map(label).join(context.messages.separator) : label(value);
+};
+/**
+* A path through levels of options as their labels, or a list of such
+* paths; only the last label with `showLastOnly`, as the cascader shows it.
+*/
+function formatPath(value, props, context) {
+	if (!Array.isArray(value)) return formatValue(value, context);
+	const separator = typeof props.separator === "string" ? props.separator : " / ";
+	const one = (path) => {
+		const labels = [];
+		let level = props.options;
+		for (const step of path) {
+			const option = Array.isArray(level) ? level.find((entry) => entry !== null && typeof entry === "object" && entry.value === step) : void 0;
+			labels.push(option?.label ?? formatValue(step, context));
+			level = option?.children;
+		}
+		return props.showLastOnly ? labels[labels.length - 1] ?? "" : labels.join(separator);
+	};
+	return Array.isArray(value[0]) ? value.map(one).join(context.messages.separator) : one(value);
+}
+/** A switch or a single box: yes or no, by its `checkedValue` when it has one. */
+function formatToggle(value, props, context) {
+	return value === ("checkedValue" in props && props.checkedValue !== void 0 ? props.checkedValue : true) ? context.messages.yes : context.messages.no;
+}
+/** Text typed into an input, hidden for a password. */
+function formatText(value, props) {
+	const text = String(value);
+	return props.type === "password" ? "•".repeat(Math.min(text.length, 8)) : text;
+}
+/** A number, with `precision` decimals when it sets them. */
+function formatNumber(value, props) {
+	if (typeof value !== "number") return String(value);
+	const precision = typeof props.precision === "number" ? props.precision : void 0;
+	return precision === void 0 ? String(value) : value.toFixed(precision);
+}
+/** One number or time, or both ends of a range. */
+function formatRange(value, _props, context) {
+	return Array.isArray(value) ? value.map((item) => formatValue(item, context)).join(context.messages.rangeSeparator) : formatValue(value, context);
+}
+/** A date written the way the date picker writes it (`displayFormat`, else the locale's); a range as both ends. */
+function formatDate(value, props, context) {
+	if (Array.isArray(value)) return value.map((item) => formatDate(item, props, context)).join(context.messages.rangeSeparator);
+	if (typeof value !== "string") return formatValue(value, context);
+	return formatDateValue(value, {
+		locale: context.locale,
+		type: typeof props.type === "string" ? props.type : void 0,
+		displayFormat: typeof props.displayFormat === "string" ? props.displayFormat : void 0
+	});
+}
+/** A color, with a swatch before its text. */
+var ColorValue = defineComponent({
+	name: "DouFormColorValue",
+	props: { modelValue: {
+		type: String,
+		default: null
+	} },
+	setup(props) {
+		return () => h("span", { class: "dou-form-renderer__color" }, [h("span", {
+			class: "dou-form-renderer__swatch",
+			"aria-hidden": "true"
+		}, [h("span", { style: { background: props.modelValue ?? void 0 } })]), props.modelValue]);
+	}
+});
+/** Uploaded files, each a link when it has a `url`. */
+var FilesValue = defineComponent({
+	name: "DouFormFilesValue",
+	props: { modelValue: {
+		type: Array,
+		default: () => []
+	} },
+	setup(props) {
+		return () => h("ul", { class: "dou-form-renderer__files" }, props.modelValue.map((file, index) => h("li", { key: file.uid ?? index }, [file.url ? h(DouLink, {
+			href: file.url,
+			external: true
+		}, () => file.name) : file.name])));
+	}
+});
+export { ColorValue, FilesValue, formatDate, formatNumber, formatOptions, formatPath, formatRange, formatText, formatToggle, formatValue };
+
+//# sourceMappingURL=format.js.map

package/dist/fields/format.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.js","names":[],"sources":["../../src/fields/format.ts"],"sourcesContent":["import { defineComponent, h } from 'vue'\nimport type { PropType } from 'vue'\nimport { DouLink, formatDateValue } from 'dou-ui'\nimport type { DatePickerType, Locale } from 'dou-ui'\nimport type { FormFieldNode } from '../core/types'\nimport type { FormRendererMessages } from '../locale'\n\n/** What a field type's `format` gets besides the value and the settings. */\nexport interface FormFormatContext {\n  /** The node being shown. */\n  node: FormFieldNode\n  /** The renderer's texts, e.g. `yes` and `no`. */\n  messages: FormRendererMessages\n  /** DouUI's current locale, e.g. for its date patterns. */\n  locale: Locale\n}\n\n/** The label of each value the options offer, through groups (`options`) and levels (`children`). */\nfunction labelsOf(options: unknown, into = new Map<unknown, string>()) {\n  if (!Array.isArray(options)) return into\n  for (const option of options) {\n    if (option === null || typeof option !== 'object') {\n      if (!into.has(option)) into.set(option, String(option))\n      continue\n    }\n    const record = option as {\n      value?: unknown\n      key?: unknown\n      label?: unknown\n      options?: unknown\n      children?: unknown\n    }\n    const value = 'value' in record ? record.value : record.key\n    if (value !== undefined && !into.has(value))\n      into.set(value, typeof record.label === 'string' ? record.label : String(value))\n    labelsOf(record.options, into)\n    labelsOf(record.children, into)\n  }\n  return into\n}\n\nconst warnedTypes = new Set<string>()\nfunction warnObject(type: string) {\n  if (process.env.NODE_ENV === 'production' || warnedTypes.has(type)) return\n  warnedTypes.add(type)\n  console.warn(\n    `[@dou-ui/form-builder] a value of field type \"${type}\" is an object and shows as JSON when read-only; give the type a \\`format\\` or \\`readonlyComponent\\``,\n  )\n}\n\n/** Plain text of any value: lists joined, `true` and `false` as yes and no. */\nexport function formatValue(value: unknown, context: FormFormatContext): string {\n  if (value === null || value === undefined) return ''\n  if (Array.isArray(value))\n    return value\n      .map((item) => formatValue(item, context))\n      .filter(Boolean)\n      .join(context.messages.separator)\n  if (typeof value === 'boolean') return value ? context.messages.yes : context.messages.no\n  if (value instanceof Date) return value.toLocaleString(context.locale.name)\n  if (typeof value === 'object') {\n    const record = value as { label?: unknown; name?: unknown }\n    if (typeof record.label === 'string') return record.label\n    if (typeof record.name === 'string') return record.name\n    warnObject(context.node.type)\n    return JSON.stringify(value)\n  }\n  return String(value)\n}\n\n/** The labels of the chosen options, from the setting that holds them (`options` by default). */\nexport const formatOptions =\n  (prop = 'options') =>\n  (value: unknown, props: Record<string, unknown>, context: FormFormatContext) => {\n    const labels = labelsOf(props[prop])\n    const label = (item: unknown) => labels.get(item) ?? formatValue(item, context)\n    return Array.isArray(value) ? value.map(label).join(context.messages.separator) : label(value)\n  }\n\n/**\n * A path through levels of options as their labels, or a list of such\n * paths; only the last label with `showLastOnly`, as the cascader shows it.\n */\nexport function formatPath(\n  value: unknown,\n  props: Record<string, unknown>,\n  context: FormFormatContext,\n) {\n  if (!Array.isArray(value)) return formatValue(value, context)\n  const separator = typeof props.separator === 'string' ? props.separator : ' / '\n  const one = (path: unknown[]) => {\n    const labels: string[] = []\n    let level: unknown = props.options\n    for (const step of path) {\n      const option = Array.isArray(level)\n        ? (level.find(\n            (entry) =>\n              entry !== null &&\n              typeof entry === 'object' &&\n              (entry as { value?: unknown }).value === step,\n          ) as { label?: string; children?: unknown } | undefined)\n        : undefined\n      labels.push(option?.label ?? formatValue(step, context))\n      level = option?.children\n    }\n    return props.showLastOnly ? (labels[labels.length - 1] ?? '') : labels.join(separator)\n  }\n  return Array.isArray(value[0])\n    ? (value as unknown[][]).map(one).join(context.messages.separator)\n    : one(value)\n}\n\n/** A switch or a single box: yes or no, by its `checkedValue` when it has one. */\nexport function formatToggle(\n  value: unknown,\n  props: Record<string, unknown>,\n  context: FormFormatContext,\n) {\n  const on = 'checkedValue' in props && props.checkedValue !== undefined ? props.checkedValue : true\n  return value === on ? context.messages.yes : context.messages.no\n}\n\n/** Text typed into an input, hidden for a password. */\nexport function formatText(value: unknown, props: Record<string, unknown>) {\n  const text = String(value)\n  return props.type === 'password' ? '•'.repeat(Math.min(text.length, 8)) : text\n}\n\n/** A number, with `precision` decimals when it sets them. */\nexport function formatNumber(value: unknown, props: Record<string, unknown>) {\n  if (typeof value !== 'number') return String(value)\n  const precision = typeof props.precision === 'number' ? props.precision : undefined\n  return precision === undefined ? String(value) : value.toFixed(precision)\n}\n\n/** One number or time, or both ends of a range. */\nexport function formatRange(\n  value: unknown,\n  _props: Record<string, unknown>,\n  context: FormFormatContext,\n) {\n  return Array.isArray(value)\n    ? value.map((item) => formatValue(item, context)).join(context.messages.rangeSeparator)\n    : formatValue(value, context)\n}\n\n/** A date written the way the date picker writes it (`displayFormat`, else the locale's); a range as both ends. */\nexport function formatDate(\n  value: unknown,\n  props: Record<string, unknown>,\n  context: FormFormatContext,\n): string {\n  if (Array.isArray(value))\n    return value\n      .map((item) => formatDate(item, props, context))\n      .join(context.messages.rangeSeparator)\n  if (typeof value !== 'string') return formatValue(value, context)\n  return formatDateValue(value, {\n    locale: context.locale,\n    type: typeof props.type === 'string' ? (props.type as DatePickerType) : undefined,\n    displayFormat: typeof props.displayFormat === 'string' ? props.displayFormat : undefined,\n  })\n}\n\n/** A color, with a swatch before its text. */\nexport const ColorValue = defineComponent({\n  name: 'DouFormColorValue',\n  props: { modelValue: { type: String as PropType<string | null>, default: null } },\n  setup(props) {\n    return () =>\n      h('span', { class: 'dou-form-renderer__color' }, [\n        h('span', { class: 'dou-form-renderer__swatch', 'aria-hidden': 'true' }, [\n          h('span', { style: { background: props.modelValue ?? undefined } }),\n        ]),\n        props.modelValue,\n      ])\n  },\n})\n\n/** Uploaded files, each a link when it has a `url`. */\nexport const FilesValue = defineComponent({\n  name: 'DouFormFilesValue',\n  props: {\n    modelValue: {\n      type: Array as PropType<{ uid?: string; name: string; url?: string }[]>,\n      default: () => [],\n    },\n  },\n  setup(props) {\n    return () =>\n      h(\n        'ul',\n        { class: 'dou-form-renderer__files' },\n        props.modelValue.map((file, index) =>\n          h('li', { key: file.uid ?? index }, [\n            file.url ? h(DouLink, { href: file.url, external: true }, () => file.name) : file.name,\n          ]),\n        ),\n      )\n  },\n})\n"],"mappings":"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"}

package/dist/fields/options.js

@@ -0,0 +1,54 @@
+// src/fields/options.ts
+/** The values a list of options offers, through groups (`options`) and levels (`children`). */
+function valuesOf(options, into = /* @__PURE__ */ new Set()) {
+	for (const option of options) {
+		if (option === null || typeof option !== "object") {
+			into.add(option);
+			continue;
+		}
+		const record = option;
+		if ("value" in record) into.add(record.value);
+		if (Array.isArray(record.options)) valuesOf(record.options, into);
+		if (Array.isArray(record.children)) valuesOf(record.children, into);
+	}
+	return into;
+}
+/**
+* A value narrowed to what the options offer: a single value the options
+* lack becomes `null`, and a list keeps only the items they have. The
+* same value comes back when nothing is lost.
+*/
+function fitToOptions(value, options) {
+	if (value === null || value === void 0) return value;
+	const offered = valuesOf(options);
+	if (Array.isArray(value)) {
+		const kept = value.filter((item) => offered.has(item));
+		return kept.length === value.length ? value : kept;
+	}
+	return offered.has(value) ? value : null;
+}
+/** Whether a path of values, one per level, runs through the options' `children`. */
+function hasPath(path, options) {
+	let level = options;
+	for (const step of path) {
+		const option = level.find((entry) => entry !== null && typeof entry === "object" && entry.value === step);
+		if (!option) return false;
+		level = Array.isArray(option.children) ? option.children : [];
+	}
+	return true;
+}
+/**
+* Like `fitToOptions`, for a value that is a path through levels of
+* options, or a list of such paths.
+*/
+function fitPathToOptions(value, options) {
+	if (!Array.isArray(value) || value.length === 0) return value;
+	if (Array.isArray(value[0])) {
+		const kept = value.filter((path) => Array.isArray(path) && hasPath(path, options));
+		return kept.length === value.length ? value : kept;
+	}
+	return hasPath(value, options) ? value : null;
+}
+export { fitPathToOptions, fitToOptions };
+
+//# sourceMappingURL=options.js.map

package/dist/fields/options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.js","names":[],"sources":["../../src/fields/options.ts"],"sourcesContent":["/** The values a list of options offers, through groups (`options`) and levels (`children`). */\nfunction valuesOf(options: readonly unknown[], into = new Set<unknown>()) {\n  for (const option of options) {\n    if (option === null || typeof option !== 'object') {\n      into.add(option)\n      continue\n    }\n    const record = option as { value?: unknown; options?: unknown; children?: unknown }\n    if ('value' in record) into.add(record.value)\n    if (Array.isArray(record.options)) valuesOf(record.options, into)\n    if (Array.isArray(record.children)) valuesOf(record.children, into)\n  }\n  return into\n}\n\n/**\n * A value narrowed to what the options offer: a single value the options\n * lack becomes `null`, and a list keeps only the items they have. The\n * same value comes back when nothing is lost.\n */\nexport function fitToOptions(value: unknown, options: readonly unknown[]): unknown {\n  if (value === null || value === undefined) return value\n  const offered = valuesOf(options)\n  if (Array.isArray(value)) {\n    const kept = value.filter((item) => offered.has(item))\n    return kept.length === value.length ? value : kept\n  }\n  return offered.has(value) ? value : null\n}\n\n/** Whether a path of values, one per level, runs through the options' `children`. */\nfunction hasPath(path: readonly unknown[], options: readonly unknown[]): boolean {\n  let level: readonly unknown[] = options\n  for (const step of path) {\n    const option = level.find(\n      (entry) =>\n        entry !== null &&\n        typeof entry === 'object' &&\n        (entry as { value?: unknown }).value === step,\n    ) as { children?: unknown } | undefined\n    if (!option) return false\n    level = Array.isArray(option.children) ? option.children : []\n  }\n  return true\n}\n\n/**\n * Like `fitToOptions`, for a value that is a path through levels of\n * options, or a list of such paths.\n */\nexport function fitPathToOptions(value: unknown, options: readonly unknown[]): unknown {\n  if (!Array.isArray(value) || value.length === 0) return value\n  if (Array.isArray(value[0])) {\n    const kept = value.filter((path) => Array.isArray(path) && hasPath(path, options))\n    return kept.length === value.length ? value : kept\n  }\n  return hasPath(value, options) ? value : null\n}\n"],"mappings":";;AACA,SAAS,SAAS,SAA6B,uBAAO,IAAI,IAAa,GAAG;CACxE,KAAK,MAAM,UAAU,SAAS;EAC5B,IAAI,WAAW,QAAQ,OAAO,WAAW,UAAU;GACjD,KAAK,IAAI,MAAM;GACf;EACF;EACA,MAAM,SAAS;EACf,IAAI,WAAW,QAAQ,KAAK,IAAI,OAAO,KAAK;EAC5C,IAAI,MAAM,QAAQ,OAAO,OAAO,GAAG,SAAS,OAAO,SAAS,IAAI;EAChE,IAAI,MAAM,QAAQ,OAAO,QAAQ,GAAG,SAAS,OAAO,UAAU,IAAI;CACpE;CACA,OAAO;AACT;;;;;;AAOA,SAAgB,aAAa,OAAgB,SAAsC;CACjF,IAAI,UAAU,QAAQ,UAAU,KAAA,GAAW,OAAO;CAClD,MAAM,UAAU,SAAS,OAAO;CAChC,IAAI,MAAM,QAAQ,KAAK,GAAG;EACxB,MAAM,OAAO,MAAM,QAAQ,SAAS,QAAQ,IAAI,IAAI,CAAC;EACrD,OAAO,KAAK,WAAW,MAAM,SAAS,QAAQ;CAChD;CACA,OAAO,QAAQ,IAAI,KAAK,IAAI,QAAQ;AACtC;;AAGA,SAAS,QAAQ,MAA0B,SAAsC;CAC/E,IAAI,QAA4B;CAChC,KAAK,MAAM,QAAQ,MAAM;EACvB,MAAM,SAAS,MAAM,MAClB,UACC,UAAU,QACV,OAAO,UAAU,YAChB,MAA8B,UAAU,IAC7C;EACA,IAAI,CAAC,QAAQ,OAAO;EACpB,QAAQ,MAAM,QAAQ,OAAO,QAAQ,IAAI,OAAO,WAAW,CAAC;CAC9D;CACA,OAAO;AACT;;;;;AAMA,SAAgB,iBAAiB,OAAgB,SAAsC;CACrF,IAAI,CAAC,MAAM,QAAQ,KAAK,KAAK,MAAM,WAAW,GAAG,OAAO;CACxD,IAAI,MAAM,QAAQ,MAAM,EAAE,GAAG;EAC3B,MAAM,OAAO,MAAM,QAAQ,SAAS,MAAM,QAAQ,IAAI,KAAK,QAAQ,MAAM,OAAO,CAAC;EACjF,OAAO,KAAK,WAAW,MAAM,SAAS,QAAQ;CAChD;CACA,OAAO,QAAQ,OAAO,OAAO,IAAI,QAAQ;AAC3C"}

package/dist/index.js

@@ -0,0 +1,20 @@
+import { cloneValue, createId, emptyDocument, fieldNodes, findNode, getPath, isContainer, isField, isList, isPage, isSection, isSteps, isTabs, setPath, unsetPath, valueNodes, walkNodes } from "./core/document.js";
+import { ExpressionError, builtinFunctions, checkExpression, compileExpression, equalValues, evaluateExpression, isEmptyValue, parseExpression, truthy } from "./core/expression.js";
+import { defineFormField, fieldProps, useFormField } from "./fields/define.js";
+import { emptyItem, fillValues, startValue, visibleValues } from "./core/values.js";
+import { fitPathToOptions, fitToOptions } from "./fields/options.js";
+import { normalizeOptions } from "./fields/components.js";
+import { formatValue } from "./fields/format.js";
+import { builtinFields, resolveFields } from "./fields/builtin.js";
+import { formRendererLocales, formatMessage, useFormRendererMessages } from "./locale.js";
+import { findFormulaCycles } from "./core/formulas.js";
+import { rulesOf, toFormRule } from "./core/rules.js";
+import { checkDocument, checkDocumentShape, migrateDocument } from "./core/check.js";
+import { DouFormRenderer } from "./renderer/index.js";
+import { FormBuilderTransaction, applyFormSteps, canContainFormNode, compactFormSteps, formNodePlaces } from "./builder/core/transaction.js";
+import { FormBuilderHistory } from "./builder/core/history.js";
+import { useFormBuilder } from "./builder/context.js";
+import { defineFormBuilderExtension, resolveFormBuilderExtensions, resolveFormBuilderFields } from "./builder/extension.js";
+import { formBuilderLocales, useFormBuilderMessages } from "./builder/locale.js";
+import { DouFormBuilder, DouFormBuilderCanvas, DouFormBuilderInspector, DouFormBuilderOutline, DouFormBuilderPalette, DouFormBuilderPreview } from "./builder/index.js";
+export { DouFormBuilder, DouFormBuilderCanvas, DouFormBuilderInspector, DouFormBuilderOutline, DouFormBuilderPalette, DouFormBuilderPreview, DouFormRenderer, ExpressionError, FormBuilderHistory, FormBuilderTransaction, applyFormSteps, builtinFields, builtinFunctions, canContainFormNode, checkDocument, checkDocumentShape, checkExpression, cloneValue, compactFormSteps, compileExpression, createId, DouFormRenderer as default, defineFormBuilderExtension, defineFormField, emptyDocument, emptyItem, equalValues, evaluateExpression, fieldNodes, fieldProps, fillValues, findFormulaCycles, findNode, fitPathToOptions, fitToOptions, formBuilderLocales, formNodePlaces, formRendererLocales, formatMessage, formatValue, getPath, isContainer, isEmptyValue, isField, isList, isPage, isSection, isSteps, isTabs, migrateDocument, normalizeOptions, parseExpression, resolveFields, resolveFormBuilderExtensions, resolveFormBuilderFields, rulesOf, setPath, startValue, toFormRule, truthy, unsetPath, useFormBuilder, useFormBuilderMessages, useFormField, useFormRendererMessages, valueNodes, visibleValues, walkNodes };