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

package/dist/renderer/node-view.js

@@ -0,0 +1,385 @@
+import { cloneValue, getPath, isContainer, isField, isList, isPage, isSteps, isTabs, setPath } from "../core/document.js";
+import { equalValues, isEmptyValue, related, truthy, tryCompileExpression } from "../core/expression.js";
+import { fieldProps, formFieldKey } from "../fields/define.js";
+import { formatOptions, formatValue } from "../fields/format.js";
+import { disabledKey, pathIn, rendererKey, rootScope, scopeKey } from "./context.js";
+import { rulesOf } from "../core/rules.js";
+import { listView, stepsView, tabsView } from "./containers.js";
+import { DouFormItem, useLocale } from "dou-ui";
+import { computed, defineComponent, h, inject, onScopeDispose, provide, shallowRef, useId, watch } from "vue";
+// src/renderer/node-view.ts
+var breakpoints = [
+	"base",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+/** `--dou-form-span` for `base`, `--dou-form-span-md` for the others. */
+var spanVar = (key) => key === "base" ? "--dou-form-span" : `--dou-form-span-${key}`;
+/** The span of a node at each breakpoint it sets, clamped to the grid. */
+function spanStyle(span, columns) {
+	const style = {};
+	const clamp = (value) => Math.min(Math.max(1, Math.round(value)), columns);
+	if (span === void 0) style[spanVar("base")] = columns;
+	else if (typeof span === "number") style[spanVar("base")] = clamp(span);
+	else {
+		style[spanVar("base")] = clamp(span.base ?? columns);
+		for (const key of breakpoints.slice(1)) {
+			const value = span[key];
+			if (value !== void 0) style[spanVar(key)] = clamp(value);
+		}
+	}
+	return style;
+}
+var warned = /* @__PURE__ */ new Set();
+function warnUnknown(type) {
+	if (warned.has(type)) return;
+	warned.add(type);
+	console.warn(`[@dou-ui/form-builder] form field type "${type}" is not registered; pass it in \`fields\``);
+}
+/** The nodes of one grid: the document's, a group's, a page's or a list item's. */
+function renderNodes(nodes, columns, inset = 0) {
+	return nodes.map((node) => h(FormNodeView, {
+		key: nodeKey(node),
+		node,
+		columns,
+		inset
+	}));
+}
+/** The key of a node's view: by kind too, so a node that turns into another kind gets a new view. */
+var nodeKey = (node) => `${node.id}/${isField(node) ? "field" : node.type}`;
+/** A page's description and its own grid. */
+function renderPage(page, columns, inset) {
+	const own = page.columns ?? columns;
+	return [page.description ? h("div", { class: "dou-form-renderer__page-description" }, page.description) : null, h("div", {
+		class: "dou-form-renderer__grid",
+		style: { "--dou-form-columns": own }
+	}, renderNodes(page.children, own, inset))];
+}
+/** Whether a component takes a prop, so it is only passed to ones that do. */
+function declares(component, prop) {
+	const props = component.props;
+	if (Array.isArray(props)) return props.includes(prop);
+	return !!props && typeof props === "object" && prop in props;
+}
+/**
+* One node and its grid cell. A node re-renders only when its own object
+* changes or a value it reads does, so typing in one field leaves the
+* others alone. A hidden node renders nothing: no cell, no form item to
+* check and no options to load.
+*/
+var FormNodeView = defineComponent({
+	name: "DouFormNode",
+	props: {
+		node: {
+			type: Object,
+			required: true
+		},
+		columns: {
+			type: Number,
+			required: true
+		},
+		/** How many bordered sections and list items the node sits in; their padding comes off the label column. */
+		inset: {
+			type: Number,
+			default: 0
+		},
+		/** A page drawn by its tabs or steps: no cell and no title of its own. */
+		asPage: Boolean
+	},
+	setup(props) {
+		const renderer = inject(rendererKey);
+		const scope = inject(scopeKey, rootScope);
+		const parentDisabled = inject(disabledKey, void 0);
+		/**
+		* An expression of a node (this one by default), run against the form;
+		* `fallback` when it is unset or does not parse.
+		*/
+		const condition = (source, fallback, node = props.node) => {
+			if (!source) return fallback;
+			const expression = tryCompileExpression(source);
+			if (!expression) return fallback;
+			const model = renderer.model();
+			const name = isList(node) || isField(node) ? node.name : void 0;
+			return truthy(expression.evaluate({
+				values: model,
+				value: name ? getPath(model, pathIn(scope, name)) : null,
+				item: scope.item(),
+				functions: renderer.functions()
+			}));
+		};
+		const visible = computed(() => condition(props.node.visibleWhen, true));
+		const disabled = computed(() => !!parentDisabled?.() || condition(props.node.disabledWhen, false));
+		const node = props.node;
+		let render;
+		if (isTabs(node)) render = tabsView(kit, props, renderer, scope, disabled, condition);
+		else if (isSteps(node)) render = stepsView(kit, props, renderer, scope, disabled, condition);
+		else if (isList(node)) render = listView(kit, props, renderer, scope, disabled);
+		else if (props.asPage && isPage(node)) render = pageView(props, disabled);
+		else if (isContainer(node)) render = sectionView(props, disabled);
+		else render = fieldView(props, renderer, scope, visible, disabled, condition);
+		return () => {
+			if (!visible.value) return null;
+			if (props.asPage) return render();
+			const current = props.node;
+			return h("div", {
+				class: "dou-form-renderer__cell",
+				style: spanStyle(current.span, props.columns),
+				"data-node": current.id
+			}, [render()]);
+		};
+	}
+});
+/** A page of tabs or steps. */
+function pageView(props, disabled) {
+	provide(disabledKey, () => disabled.value);
+	return () => {
+		const page = props.node;
+		return h("div", {
+			class: "dou-form-renderer__page",
+			"data-node": page.id
+		}, renderPage(page, props.columns, props.inset));
+	};
+}
+/** A section, or a page outside tabs and steps, drawn the same way. */
+var kit = {
+	view: FormNodeView,
+	renderNodes
+};
+function sectionView(props, disabled) {
+	provide(disabledKey, () => disabled.value);
+	const uid = useId();
+	return () => {
+		const node = props.node;
+		const columns = node.columns ?? props.columns;
+		const title = node.title;
+		const bordered = !isPage(node) && node.bordered;
+		const titleId = title ? `dou-form-section-${uid}` : void 0;
+		return h("div", {
+			class: ["dou-form-renderer__section", bordered && "is-bordered"],
+			role: "group",
+			"aria-labelledby": titleId,
+			"aria-disabled": disabled.value || void 0
+		}, [title || node.description ? h("div", { class: "dou-form-renderer__section-header" }, [title && h("div", {
+			id: titleId,
+			class: "dou-form-renderer__section-title"
+		}, title), node.description && h("div", { class: "dou-form-renderer__section-description" }, node.description)]) : null, h("div", {
+			class: "dou-form-renderer__grid",
+			style: { "--dou-form-columns": columns }
+		}, renderNodes(node.children, columns, props.inset + (bordered ? 1 : 0)))]);
+	};
+}
+function fieldView(props, renderer, scope, visible, disabled, condition) {
+	const field = () => props.node;
+	/** The field's path in the form, e.g. `guests.2.phone` inside a list. */
+	const path = () => {
+		const name = field().name;
+		return name ? pathIn(scope, name) : void 0;
+	};
+	const fullPath = () => path() ?? "";
+	const type = computed(() => renderer.fields().get(field().type));
+	const item = shallowRef();
+	onScopeDispose(renderer.trackError(path, () => item.value?.error));
+	const request = computed(() => {
+		const source = field().source;
+		const prop = type.value?.optionsProp;
+		if (!source?.name || !prop || !visible.value) return void 0;
+		let arg = null;
+		if (source.arg) {
+			const expression = tryCompileExpression(source.arg);
+			if (expression) arg = expression.evaluate({
+				values: renderer.model(),
+				item: scope.item(),
+				functions: renderer.functions()
+			});
+		}
+		const version = renderer.sourceVersion(source.name);
+		return {
+			name: source.name,
+			arg,
+			key: `${source.name}\u0000${JSON.stringify(arg)}#${version}`
+		};
+	});
+	const options = shallowRef();
+	const loading = shallowRef(false);
+	/** The request the shown options answer; a value is only fitted to options that replace others. */
+	let shown;
+	watch(() => request.value?.key, (_key, _old, onCleanup) => {
+		const current = request.value;
+		if (!current) {
+			loading.value = false;
+			return;
+		}
+		let stale = false;
+		onCleanup(() => stale = true);
+		loading.value = true;
+		renderer.load(current.name, current.arg).then((list) => {
+			if (stale) return;
+			options.value = list;
+			loading.value = false;
+			const replaced = shown !== void 0 && shown !== current.key;
+			shown = current.key;
+			if (replaced) fit(list);
+		}, () => {
+			if (stale) return;
+			options.value = [];
+			loading.value = false;
+		});
+	}, { immediate: true });
+	/** Drop a value the new options no longer offer, e.g. a city of the province before. */
+	function fit(list) {
+		const name = path();
+		const fitValue = type.value?.fitValue;
+		if (!fitValue || !name || field().source?.keep || renderer.readonly()) return;
+		const model = renderer.model();
+		const value = getPath(model, name);
+		const fitted = fitValue(value, list);
+		if (fitted !== value) setPath(model, name, fitted);
+	}
+	const settings = computed(() => {
+		const base = fieldProps(type.value, field());
+		const prop = field().source?.name && type.value?.optionsProp;
+		return prop ? {
+			...base,
+			[prop]: options.value ?? []
+		} : base;
+	});
+	provide(formFieldKey, () => ({
+		node: field(),
+		type: type.value,
+		props: settings.value
+	}));
+	const required = computed(() => {
+		const node = field();
+		return condition(node.requiredWhen, node.required ?? false);
+	});
+	const rules = computed(() => rulesOf(field(), {
+		required: required.value,
+		functions: renderer.functions(),
+		validators: renderer.validators(),
+		item: scope.prefix() ? scope.item : void 0,
+		path: fullPath
+	}));
+	if (scope.prefix() && !renderer.readonly()) watch(() => {
+		const node = field();
+		if (!node.formula || !node.name || renderer.blockedFormulas().has(node.id)) return void 0;
+		const expression = tryCompileExpression(node.formula);
+		return expression ? { result: expression.evaluate({
+			values: renderer.model(),
+			item: scope.item(),
+			functions: renderer.functions()
+		}) } : void 0;
+	}, (next) => {
+		const name = path();
+		if (!next || !name) return;
+		const model = renderer.model();
+		if (!equalValues(next.result, getPath(model, name))) setPath(model, name, cloneValue(next.result));
+	}, {
+		immediate: true,
+		flush: "sync"
+	});
+	const checked = computed(() => {
+		const name = path();
+		const paths = [];
+		for (const spec of field().rules ?? []) {
+			if (!spec.check) continue;
+			const expression = tryCompileExpression(spec.check);
+			if (!expression) continue;
+			for (const read of expression.fields) if (read === "" || !name || !related(name, read)) paths.push(read);
+			const own = field().name;
+			for (const read of expression.itemFields) if (scope.prefix() && (read === "" || !own || !related(own, read))) paths.push(read ? pathIn(scope, read) : scope.prefix().slice(0, -1));
+		}
+		return paths;
+	});
+	watch(() => {
+		const paths = checked.value;
+		if (!paths.length) return void 0;
+		const model = renderer.model();
+		return paths.map((read) => read ? getPath(model, read) : model);
+	}, () => {
+		if (item.value?.error) item.value.validate();
+	}, { deep: true });
+	function labelWidth() {
+		const width = renderer.labelWidth();
+		if (width === void 0 || !props.inset) return width;
+		return `calc(${width}px - ${props.inset} * (var(--dou-space-lg) + 1px))`;
+	}
+	const { locale } = useLocale();
+	/**
+	* What a read-only field shows: a formula's result is worked out, since
+	* nothing writes it, from the values with every formula worked out, so a
+	* total reads the items' results too.
+	*/
+	function shownValue(node, name) {
+		if (node.formula && !renderer.blockedFormulas().has(node.id)) return getPath(renderer.settled(), name);
+		return getPath(renderer.model(), name);
+	}
+	function readonlyView(node, spec, bound) {
+		const name = path();
+		const value = shownValue(node, name);
+		let content;
+		if (isEmptyValue(value)) content = h("span", { class: "dou-form-renderer__value is-empty" }, renderer.messages().noValue);
+		else if (spec.readonlyComponent) {
+			const extra = { modelValue: value };
+			if (declares(spec.readonlyComponent, "readonly")) extra.readonly = true;
+			content = h(spec.readonlyComponent, {
+				...bound,
+				...extra
+			});
+		} else {
+			const context = {
+				node,
+				messages: renderer.messages(),
+				locale: locale.value
+			};
+			const format = spec.format ?? (spec.optionsProp ? formatOptions(spec.optionsProp) : void 0);
+			const text = format ? format(value, settings.value, context) : formatValue(value, context);
+			content = text ? h("span", { class: "dou-form-renderer__value" }, text) : h("span", { class: "dou-form-renderer__value is-empty" }, renderer.messages().noValue);
+		}
+		return h(DouFormItem, {
+			ref: item,
+			label: node.label,
+			prop: name,
+			labelWidth: labelWidth()
+		}, () => content);
+	}
+	return () => {
+		const node = field();
+		const spec = type.value;
+		if (!spec) {
+			warnUnknown(node.type);
+			return null;
+		}
+		const bound = spec.toProps ? { ...spec.toProps(settings.value, node) } : { ...settings.value };
+		if (renderer.readonly() && spec.kind !== "display" && node.name) return readonlyView(node, spec, bound);
+		if (request.value && declares(spec.component, "loading")) bound.loading = loading.value;
+		if (disabled.value) bound.disabled = true;
+		if (spec.kind === "display" || !node.name) return h(spec.component, bound);
+		if (node.formula && !renderer.blockedFormulas().has(node.id)) {
+			if (declares(spec.component, "readonly")) bound.readonly = true;
+			else bound.disabled = true;
+			if (declares(spec.component, "controls")) bound.controls = false;
+		}
+		const name = path();
+		const model = renderer.model();
+		return h(DouFormItem, {
+			ref: item,
+			label: node.label,
+			prop: name,
+			help: node.help,
+			rules: rules.value,
+			labelWidth: labelWidth()
+		}, () => h(spec.component, {
+			...bound,
+			modelValue: getPath(model, name),
+			"onUpdate:modelValue": (value) => {
+				setPath(model, name, value);
+				renderer.changed(name, value);
+			}
+		}));
+	};
+}
+export { FormNodeView, nodeKey, renderNodes, renderPage, spanStyle };
+
+//# sourceMappingURL=node-view.js.map

package/dist/renderer/node-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"node-view.js","names":[],"sources":["../../src/renderer/node-view.ts"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  h,\n  inject,\n  onScopeDispose,\n  provide,\n  shallowRef,\n  useId,\n  watch,\n} from 'vue'\nimport type { Component, CSSProperties, PropType, VNode, VNodeChild } from 'vue'\nimport { DouFormItem, useLocale } from 'dou-ui'\nimport type { FormItemExpose } from 'dou-ui'\nimport {\n  cloneValue,\n  getPath,\n  isContainer,\n  isField,\n  isList,\n  isPage,\n  isSteps,\n  isTabs,\n  setPath,\n} from '../core/document'\nimport {\n  equalValues,\n  isEmptyValue,\n  related,\n  truthy,\n  tryCompileExpression,\n} from '../core/expression'\nimport { rulesOf } from '../core/rules'\nimport type {\n  FormFieldNode,\n  FormNode,\n  FormPageNode,\n  FormResponsive,\n  FormSectionNode,\n} from '../core/types'\nimport { fieldProps, formFieldKey } from '../fields/define'\nimport type { FormFieldType } from '../fields/define'\nimport { formatOptions, formatValue } from '../fields/format'\nimport type { FormFormatContext } from '../fields/format'\nimport { disabledKey, pathIn, rendererKey, rootScope, scopeKey } from './context'\nimport type { Condition, NodeKit, NodeProps, NodeScope, RendererContext } from './context'\nimport { listView, stepsView, tabsView } from './containers'\n\nconst breakpoints = ['base', 'sm', 'md', 'lg', 'xl'] as const\n\n/** `--dou-form-span` for `base`, `--dou-form-span-md` for the others. */\nconst spanVar = (key: (typeof breakpoints)[number]) =>\n  key === 'base' ? '--dou-form-span' : `--dou-form-span-${key}`\n\n/** The span of a node at each breakpoint it sets, clamped to the grid. */\nexport function spanStyle(span: FormResponsive<number> | undefined, columns: number) {\n  const style: Record<string, number> = {}\n  const clamp = (value: number) => Math.min(Math.max(1, Math.round(value)), columns)\n  if (span === undefined) style[spanVar('base')] = columns\n  else if (typeof span === 'number') style[spanVar('base')] = clamp(span)\n  else {\n    style[spanVar('base')] = clamp(span.base ?? columns)\n    for (const key of breakpoints.slice(1)) {\n      const value = span[key]\n      if (value !== undefined) style[spanVar(key)] = clamp(value)\n    }\n  }\n  return style as CSSProperties\n}\n\nconst warned = new Set<string>()\nfunction warnUnknown(type: string) {\n  if (warned.has(type)) return\n  warned.add(type)\n  console.warn(\n    `[@dou-ui/form-builder] form field type \"${type}\" is not registered; pass it in \\`fields\\``,\n  )\n}\n\n/** The nodes of one grid: the document's, a group's, a page's or a list item's. */\nexport function renderNodes(nodes: readonly FormNode[], columns: number, inset = 0): VNode[] {\n  return nodes.map((node) => h(FormNodeView, { key: nodeKey(node), node, columns, inset }))\n}\n\n/** The key of a node's view: by kind too, so a node that turns into another kind gets a new view. */\nexport const nodeKey = (node: FormNode) => `${node.id}/${isField(node) ? 'field' : node.type}`\n\n/** A page's description and its own grid. */\nexport function renderPage(page: FormPageNode, columns: number, inset: number) {\n  const own = page.columns ?? columns\n  return [\n    page.description\n      ? h('div', { class: 'dou-form-renderer__page-description' }, page.description)\n      : null,\n    h(\n      'div',\n      { class: 'dou-form-renderer__grid', style: { '--dou-form-columns': own } },\n      renderNodes(page.children, own, inset),\n    ),\n  ]\n}\n\n/** Whether a component takes a prop, so it is only passed to ones that do. */\nfunction declares(component: Component, prop: string) {\n  const props = (component as { props?: unknown }).props\n  if (Array.isArray(props)) return props.includes(prop)\n  return !!props && typeof props === 'object' && prop in props\n}\n\n/**\n * One node and its grid cell. A node re-renders only when its own object\n * changes or a value it reads does, so typing in one field leaves the\n * others alone. A hidden node renders nothing: no cell, no form item to\n * check and no options to load.\n */\nexport const FormNodeView = defineComponent({\n  name: 'DouFormNode',\n  props: {\n    node: { type: Object as PropType<FormNode>, required: true },\n    columns: { type: Number, required: true },\n    /** How many bordered sections and list items the node sits in; their padding comes off the label column. */\n    inset: { type: Number, default: 0 },\n    /** A page drawn by its tabs or steps: no cell and no title of its own. */\n    asPage: Boolean,\n  },\n  setup(props) {\n    const renderer = inject(rendererKey)!\n    const scope = inject(scopeKey, rootScope)\n    const parentDisabled = inject(disabledKey, undefined)\n\n    /**\n     * An expression of a node (this one by default), run against the form;\n     * `fallback` when it is unset or does not parse.\n     */\n    const condition: Condition = (source, fallback, node = props.node) => {\n      if (!source) return fallback\n      const expression = tryCompileExpression(source)\n      if (!expression) return fallback\n      const model = renderer.model()\n      const name = isList(node) || isField(node) ? node.name : undefined\n      return truthy(\n        expression.evaluate({\n          values: model,\n          value: name ? getPath(model, pathIn(scope, name)) : null,\n          item: scope.item(),\n          functions: renderer.functions(),\n        }),\n      )\n    }\n\n    const visible = computed(() => condition(props.node.visibleWhen, true))\n    const disabled = computed(\n      () => !!parentDisabled?.() || condition(props.node.disabledWhen, false),\n    )\n    const node = props.node\n    let render: () => VNodeChild\n    if (isTabs(node)) render = tabsView(kit, props, renderer, scope, disabled, condition)\n    else if (isSteps(node)) render = stepsView(kit, props, renderer, scope, disabled, condition)\n    else if (isList(node)) render = listView(kit, props, renderer, scope, disabled)\n    else if (props.asPage && isPage(node)) render = pageView(props, disabled)\n    else if (isContainer(node)) render = sectionView(props, disabled)\n    else render = fieldView(props, renderer, scope, visible, disabled, condition)\n\n    return () => {\n      if (!visible.value) return null\n      if (props.asPage) return render()\n      const current = props.node\n      return h(\n        'div',\n        {\n          class: 'dou-form-renderer__cell',\n          style: spanStyle(current.span, props.columns),\n          'data-node': current.id,\n        },\n        [render()],\n      )\n    }\n  },\n})\n\n/** A page of tabs or steps. */\nfunction pageView(props: NodeProps, disabled: { readonly value: boolean }) {\n  provide(disabledKey, () => disabled.value)\n  return () => {\n    const page = props.node as FormPageNode\n    return h(\n      'div',\n      { class: 'dou-form-renderer__page', 'data-node': page.id },\n      renderPage(page, props.columns, props.inset),\n    )\n  }\n}\n\n/** A section, or a page outside tabs and steps, drawn the same way. */\nconst kit: NodeKit = { view: FormNodeView, renderNodes }\n\nfunction sectionView(props: NodeProps, disabled: { readonly value: boolean }) {\n  provide(disabledKey, () => disabled.value)\n  const uid = useId()\n  return () => {\n    const node = props.node as FormSectionNode | FormPageNode\n    const columns = node.columns ?? props.columns\n    const title = node.title\n    const bordered = !isPage(node) && node.bordered\n    const titleId = title ? `dou-form-section-${uid}` : undefined\n    return h(\n      'div',\n      {\n        class: ['dou-form-renderer__section', bordered && 'is-bordered'],\n        role: 'group',\n        'aria-labelledby': titleId,\n        'aria-disabled': disabled.value || undefined,\n      },\n      [\n        title || node.description\n          ? h('div', { class: 'dou-form-renderer__section-header' }, [\n              title && h('div', { id: titleId, class: 'dou-form-renderer__section-title' }, title),\n              node.description &&\n                h('div', { class: 'dou-form-renderer__section-description' }, node.description),\n            ])\n          : null,\n        h(\n          'div',\n          { class: 'dou-form-renderer__grid', style: { '--dou-form-columns': columns } },\n          renderNodes(node.children, columns, props.inset + (bordered ? 1 : 0)),\n        ),\n      ],\n    )\n  }\n}\n\nfunction fieldView(\n  props: NodeProps,\n  renderer: RendererContext,\n  scope: NodeScope,\n  visible: { readonly value: boolean },\n  disabled: { readonly value: boolean },\n  condition: Condition,\n) {\n  const field = () => props.node as FormFieldNode\n  /** The field's path in the form, e.g. `guests.2.phone` inside a list. */\n  const path = () => {\n    const name = field().name\n    return name ? pathIn(scope, name) : undefined\n  }\n  const fullPath = () => path() ?? ''\n  const type = computed(() => renderer.fields().get(field().type))\n  const item = shallowRef<FormItemExpose>()\n  onScopeDispose(renderer.trackError(path, () => item.value?.error))\n\n  // Options from a source, while the field shows, has a source and its type takes options.\n  const request = computed(() => {\n    const source = field().source\n    const prop = type.value?.optionsProp\n    if (!source?.name || !prop || !visible.value) return undefined\n    let arg: unknown = null\n    if (source.arg) {\n      const expression = tryCompileExpression(source.arg)\n      if (expression)\n        arg = expression.evaluate({\n          values: renderer.model(),\n          item: scope.item(),\n          functions: renderer.functions(),\n        })\n    }\n    const version = renderer.sourceVersion(source.name)\n    return { name: source.name, arg, key: `${source.name}\\u0000${JSON.stringify(arg)}#${version}` }\n  })\n  const options = shallowRef<unknown[]>()\n  const loading = shallowRef(false)\n  /** The request the shown options answer; a value is only fitted to options that replace others. */\n  let shown: string | undefined\n  watch(\n    () => request.value?.key,\n    (_key, _old, onCleanup) => {\n      const current = request.value\n      if (!current) {\n        loading.value = false\n        return\n      }\n      let stale = false\n      onCleanup(() => (stale = true))\n      loading.value = true\n      renderer.load(current.name, current.arg).then(\n        (list) => {\n          if (stale) return\n          options.value = list\n          loading.value = false\n          const replaced = shown !== undefined && shown !== current.key\n          shown = current.key\n          if (replaced) fit(list)\n        },\n        () => {\n          if (stale) return\n          options.value = []\n          loading.value = false\n        },\n      )\n    },\n    { immediate: true },\n  )\n\n  /** Drop a value the new options no longer offer, e.g. a city of the province before. */\n  function fit(list: unknown[]) {\n    const name = path()\n    const fitValue = type.value?.fitValue\n    if (!fitValue || !name || field().source?.keep || renderer.readonly()) return\n    const model = renderer.model()\n    const value = getPath(model, name)\n    const fitted = fitValue(value, list)\n    if (fitted !== value) setPath(model, name, fitted)\n  }\n\n  const settings = computed(() => {\n    const base = fieldProps(type.value, field())\n    const prop = field().source?.name && type.value?.optionsProp\n    return prop ? { ...base, [prop]: options.value ?? [] } : base\n  })\n  provide(formFieldKey, () => ({ node: field(), type: type.value!, props: settings.value }))\n\n  const required = computed(() => {\n    const node = field()\n    return condition(node.requiredWhen, node.required ?? false)\n  })\n  const rules = computed(() =>\n    rulesOf(field(), {\n      required: required.value,\n      functions: renderer.functions(),\n      validators: renderer.validators(),\n      item: scope.prefix() ? scope.item : undefined,\n      path: fullPath,\n    }),\n  )\n\n  // Inside a list, a formula is worked out per item; formulas outside\n  // lists are the renderer's, worked out in order across the form.\n  if (scope.prefix() && !renderer.readonly())\n    watch(\n      () => {\n        const node = field()\n        if (!node.formula || !node.name || renderer.blockedFormulas().has(node.id)) return undefined\n        const expression = tryCompileExpression(node.formula)\n        return expression\n          ? {\n              result: expression.evaluate({\n                values: renderer.model(),\n                item: scope.item(),\n                functions: renderer.functions(),\n              }),\n            }\n          : undefined\n      },\n      (next) => {\n        const name = path()\n        if (!next || !name) return\n        const model = renderer.model()\n        if (!equalValues(next.result, getPath(model, name)))\n          setPath(model, name, cloneValue(next.result))\n      },\n      { immediate: true, flush: 'sync' },\n    )\n\n  // A check that reads other fields runs again when they change, while\n  // the field shows an error: an end date stops being wrong once the\n  // start date moves before it.\n  const checked = computed(() => {\n    const name = path()\n    const paths: string[] = []\n    for (const spec of field().rules ?? []) {\n      if (!spec.check) continue\n      const expression = tryCompileExpression(spec.check)\n      if (!expression) continue\n      for (const read of expression.fields)\n        if (read === '' || !name || !related(name, read)) paths.push(read)\n      // Other fields of the same item, read through `item`.\n      const own = field().name\n      for (const read of expression.itemFields)\n        if (scope.prefix() && (read === '' || !own || !related(own, read)))\n          paths.push(read ? pathIn(scope, read) : scope.prefix().slice(0, -1))\n    }\n    return paths\n  })\n  watch(\n    () => {\n      const paths = checked.value\n      if (!paths.length) return undefined\n      const model = renderer.model()\n      return paths.map((read) => (read ? getPath(model, read) : model))\n    },\n    () => {\n      if (item.value?.error) void item.value.validate()\n    },\n    { deep: true },\n  )\n\n  // Labels inside bordered sections line up with the ones outside: the\n  // padding and border of each section come off the label column.\n  function labelWidth() {\n    const width = renderer.labelWidth()\n    if (width === undefined || !props.inset) return width\n    return `calc(${width}px - ${props.inset} * (var(--dou-space-lg) + 1px))`\n  }\n\n  const { locale } = useLocale()\n  /**\n   * What a read-only field shows: a formula's result is worked out, since\n   * nothing writes it, from the values with every formula worked out, so a\n   * total reads the items' results too.\n   */\n  function shownValue(node: FormFieldNode, name: string) {\n    if (node.formula && !renderer.blockedFormulas().has(node.id))\n      return getPath(renderer.settled(), name)\n    return getPath(renderer.model(), name)\n  }\n  function readonlyView(node: FormFieldNode, spec: FormFieldType, bound: Record<string, unknown>) {\n    const name = path()!\n    const value = shownValue(node, name)\n    let content: VNodeChild\n    if (isEmptyValue(value))\n      content = h(\n        'span',\n        { class: 'dou-form-renderer__value is-empty' },\n        renderer.messages().noValue,\n      )\n    else if (spec.readonlyComponent) {\n      const extra: Record<string, unknown> = { modelValue: value }\n      if (declares(spec.readonlyComponent, 'readonly')) extra.readonly = true\n      content = h(spec.readonlyComponent, { ...bound, ...extra })\n    } else {\n      const context: FormFormatContext = {\n        node,\n        messages: renderer.messages(),\n        locale: locale.value,\n      }\n      const format = spec.format ?? (spec.optionsProp ? formatOptions(spec.optionsProp) : undefined)\n      const text = format ? format(value, settings.value, context) : formatValue(value, context)\n      content = text\n        ? h('span', { class: 'dou-form-renderer__value' }, text)\n        : h('span', { class: 'dou-form-renderer__value is-empty' }, renderer.messages().noValue)\n    }\n    return h(\n      DouFormItem,\n      { ref: item, label: node.label, prop: name, labelWidth: labelWidth() },\n      () => content,\n    )\n  }\n\n  return () => {\n    const node = field()\n    const spec = type.value\n    if (!spec) {\n      warnUnknown(node.type)\n      return null\n    }\n    const bound: Record<string, unknown> = spec.toProps\n      ? { ...spec.toProps(settings.value, node) }\n      : { ...settings.value }\n    if (renderer.readonly() && spec.kind !== 'display' && node.name)\n      return readonlyView(node, spec, bound)\n    if (request.value && declares(spec.component, 'loading')) bound.loading = loading.value\n    if (disabled.value) bound.disabled = true\n    if (spec.kind === 'display' || !node.name) return h(spec.component, bound)\n    // A field that holds a formula's result shows it but takes no input.\n    if (node.formula && !renderer.blockedFormulas().has(node.id)) {\n      if (declares(spec.component, 'readonly')) bound.readonly = true\n      else bound.disabled = true\n      // Steppers would only invite a change that cannot be made.\n      if (declares(spec.component, 'controls')) bound.controls = false\n    }\n    const name = path()!\n    const model = renderer.model()\n    return h(\n      DouFormItem,\n      {\n        ref: item,\n        label: node.label,\n        prop: name,\n        help: node.help,\n        rules: rules.value,\n        labelWidth: labelWidth(),\n      },\n      () =>\n        h(spec.component, {\n          ...bound,\n          modelValue: getPath(model, name),\n          'onUpdate:modelValue': (value: unknown) => {\n            setPath(model, name, value)\n            renderer.changed(name, value)\n          },\n        }),\n    )\n  }\n}\n"],"mappings":"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"}

package/dist/style.css

@@ -0,0 +1 @@
+@layer dou.components{.dou-form-builder{--dou-form-builder-selected:var(--dou-color-primary-text);--dou-form-builder-hover:color-mix(in oklab,var(--dou-color-text)6%,transparent);--dou-form-builder-outset:6px;container:dou-form-builder/inline-size;position:relative;box-sizing:border-box;border:1px solid var(--dou-color-border);border-radius:var(--dou-radius-container);background:var(--dou-color-bg-surface);color:var(--dou-color-text);font-size:var(--dou-font-size-md);overflow:hidden;min-width:0}.dou-form-builder__layout{display:grid;grid-template-columns:248px minmax(0,1fr)304px;height:var(--dou-form-builder-height,640px)}.dou-form-builder__side{display:flex;border-inline-end:1px solid var(--dou-color-border);flex-direction:column;min-width:0;min-height:0}.dou-form-builder__side.dou-form-builder__side--end{border-inline-end:0;border-inline-start:1px solid var(--dou-color-border)}.dou-form-builder__side-tabs{flex:1;min-height:0}.dou-form-builder__side-tabs>.dou-tabs__header{padding-inline:var(--dou-space-md)}.dou-form-builder__side-tabs>.dou-tabs__panel{overflow:auto;flex:1;min-height:0}.dou-form-builder__main{display:flex;flex-direction:column;min-width:0;min-height:0}.dou-form-builder__toolbar{display:flex;box-sizing:border-box;padding-inline:var(--dou-space-md);border-bottom:1px solid var(--dou-color-border);flex-shrink:0;align-items: center;gap:2px;height:41px}.dou-form-builder__tool,.dou-form-builder__action,.dou-form-builder__page-add,.dou-form-builder__outline-toggle{position:relative;display:inline-flex;box-sizing:border-box;border-radius:var(--dou-radius-control);color:var(--dou-color-text-secondary);font:inherit;cursor:pointer;transition-property:background-color,color;transition-duration:var(--dou-motion-duration-fast);transition-timing-function:var(--dou-motion-easing);background:0 0;border:0;flex-shrink:0;justify-content:center;align-items: center;padding:0}:is(.dou-form-builder__tool,.dou-form-builder__action,.dou-form-builder__page-add,.dou-form-builder__outline-toggle):hover:not(:disabled){background:var(--dou-form-builder-hover);color:var(--dou-color-text)}:is(.dou-form-builder__tool,.dou-form-builder__action,.dou-form-builder__page-add,.dou-form-builder__outline-toggle):focus-visible{outline:2px solid var(--dou-color-focus);outline-offset:-2px}:is(.dou-form-builder__tool,.dou-form-builder__action,.dou-form-builder__page-add,.dou-form-builder__outline-toggle):disabled{color:var(--dou-color-text-disabled);cursor:not-allowed}:is(.dou-form-builder__tool,.dou-form-builder__action,.dou-form-builder__page-add,.dou-form-builder__outline-toggle)>svg{width:16px;height:16px}.dou-form-builder__tool{width:28px;height:28px}@media (pointer:coarse){.dou-form-builder__tool{width:36px;height:36px}}.dou-form-builder__tool.dou-form-builder__side-toggle{display:none;color:var(--dou-color-text);font-size:var(--dou-font-size-sm);gap:6px;width:auto;margin-inline-end:6px;padding-inline-start:6px;padding-inline-end:8px}.dou-form-builder__tool.dou-form-builder__side-toggle>span{text-box:trim-both cap alphabetic}.dou-popover.dou-form-builder__side-popover{--dou-popover-padding:0;display:flex;overflow:hidden;flex-direction:column;width:280px;height:min(560px,70vh)}.dou-popover.dou-form-builder__side-popover>.dou-popover__content{display:flex;flex-direction:column;flex:1;min-height:0}@media (pointer:coarse){:is(.dou-form-builder__tool,.dou-form-builder__action,.dou-form-builder__page-add,.dou-form-builder__outline-toggle):after{content:"";position:absolute;width:40px;height:40px;inset:50% auto auto 50%;transform:translate(-50%,-50%)}}.dou-form-builder__canvas{position:relative;padding:var(--dou-space-lg);overflow:auto;background:var(--dou-color-bg-canvas);flex:1;min-height:0}.dou-form-builder__drop-layer{position:absolute;z-index:3;pointer-events:none;width:0;height:0;inset:0 auto auto 0}.dou-form-builder__drop-holder{position:absolute;border-radius:var(--dou-radius-control);background:color-mix(in oklab,var(--dou-form-builder-selected)6%,transparent);outline:1px dashed color-mix(in oklab,var(--dou-form-builder-selected)40%,transparent);outline-offset:2px;inset:0 auto auto 0}.dou-form-builder__drop-line{position:absolute;width:var(--dou-form-builder-drop-length,0);background:var(--dou-form-builder-selected);border-radius:1px;height:2px;margin-block-start:-1px;inset:0 auto auto 0}.dou-form-builder__drop-line[data-vertical=true]{height:var(--dou-form-builder-drop-length,0);width:2px;margin-block-start:0;margin-inline-start:-1px}.dou-form-builder__drag-ghost{position:fixed;overflow:hidden;border:1px solid var(--dou-color-border);border-radius:var(--dou-radius-control);background:var(--dou-color-bg-surface);box-shadow:var(--dou-shadow-md);color:var(--dou-color-text);font-size:var(--dou-font-size-sm);text-overflow:ellipsis;white-space:nowrap;max-width:200px;padding:4px 10px;line-height:1.5;inset:0 auto auto 0}.dou-form-builder__node.is-resizing>.dou-form-builder__actions{visibility:hidden}.dou-form-builder__node[data-dragged]{opacity:.4}.dou-form-builder__resize{position:absolute;z-index:2;cursor:ew-resize;touch-action:none;width:12px;top:0;bottom:0}.dou-form-builder__resize:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(var(--dou-form-builder-outset)*-1 - 6px)}.dou-form-builder__resize:not(:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(var(--dou-form-builder-outset)*-1 - 6px)}.dou-form-builder__resize:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(var(--dou-form-builder-outset)*-1 - 6px)}.dou-form-builder__resize:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(var(--dou-form-builder-outset)*-1 - 6px)}.dou-form-builder__resize:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(var(--dou-form-builder-outset)*-1 - 6px)}.dou-form-builder__resize:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(var(--dou-form-builder-outset)*-1 - 6px)}.dou-form-builder__resize:before{content:"";position:absolute;background:var(--dou-form-builder-selected);border-radius:2px;width:4px;height:20px;margin-block-start:-10px;top:50%;bottom:auto}.dou-form-builder__resize:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))):before{left:4px}.dou-form-builder__resize:not(:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))):before{left:4px}.dou-form-builder__resize:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))):before{left:4px}.dou-form-builder__resize:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):before{right:4px}.dou-form-builder__resize:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):before{right:4px}.dou-form-builder__resize:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):before{right:4px}.dou-form-builder__resize[data-value]:after{content:attr(data-value);position:absolute;background:var(--dou-color-text);color:var(--dou-color-bg-surface);font-size:var(--dou-font-size-sm);font-variant-numeric:tabular-nums;white-space:nowrap;border-radius:4px;padding:2px 6px;top:50%;transform:translateY(-50%)}.dou-form-builder__resize[data-value]:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))):after{right:16px}.dou-form-builder__resize[data-value]:not(:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))):after{right:16px}.dou-form-builder__resize[data-value]:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))):after{right:16px}.dou-form-builder__resize[data-value]:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):after{left:16px}.dou-form-builder__resize[data-value]:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):after{left:16px}.dou-form-builder__resize[data-value]:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):after{left:16px}@media (pointer:coarse){.dou-form-builder__resize{width:24px}.dou-form-builder__resize:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(var(--dou-form-builder-outset)*-1 - 12px)}.dou-form-builder__resize:not(:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(var(--dou-form-builder-outset)*-1 - 12px)}.dou-form-builder__resize:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(var(--dou-form-builder-outset)*-1 - 12px)}.dou-form-builder__resize:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(var(--dou-form-builder-outset)*-1 - 12px)}.dou-form-builder__resize:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(var(--dou-form-builder-outset)*-1 - 12px)}.dou-form-builder__resize:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(var(--dou-form-builder-outset)*-1 - 12px)}.dou-form-builder__resize:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))):before{left:10px}.dou-form-builder__resize:not(:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))):before{left:10px}.dou-form-builder__resize:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))):before{left:10px}.dou-form-builder__resize:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):before{right:10px}.dou-form-builder__resize:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):before{right:10px}.dou-form-builder__resize:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):before{right:10px}}.dou-form-builder__paper{box-sizing:border-box;border:1px solid var(--dou-color-border);border-radius:var(--dou-radius-container);background:var(--dou-color-bg-surface);box-shadow:var(--dou-shadow-sm);max-width:760px;margin-inline-start:auto;margin-inline-end:auto;padding:40px 28px 28px}.dou-form-builder__tree,.dou-form-builder__outline{outline:none;user-select:none}.dou-form-builder__tree:focus-visible:not(:has(.is-selected)){outline:2px solid var(--dou-color-focus);outline-offset:10px;border-radius:2px}.dou-form-builder__node{container:dou-form-builder-node/inline-size;position:relative;isolation:isolate;cursor:default}.dou-form-builder__node:before{content:"";position:absolute;z-index:-1;inset:calc(var(--dou-form-builder-outset)*-1);border-radius:var(--dou-radius-control);pointer-events:none;transition-property:border-color,background-color;transition-duration:var(--dou-motion-duration-fast);transition-timing-function:var(--dou-motion-easing);border:1px solid #0000}.dou-form-builder__node:hover:not(:has(.dou-form-builder__node:hover)):before{border-color:var(--dou-color-border-strong)}.dou-form-builder__node.is-selected:before{border-color:var(--dou-form-builder-selected);background:color-mix(in oklab,var(--dou-form-builder-selected)4%,transparent)}.dou-form-builder__node.is-selected{z-index:1}.dou-form-builder__tree:focus-visible .dou-form-builder__node.is-selected:before{box-shadow:0 0 0 1px var(--dou-form-builder-selected)}.dou-form-builder__content{pointer-events:none;user-select:none}.dou-form-builder__content>.dou-form-renderer__cell>.dou-form-item{margin-bottom:0}.dou-form-builder__placeholder{display:flex;flex-direction:column;gap:8px}.dou-form-builder__placeholder-label,.dou-form-builder__placeholder-box{border-radius:var(--dou-radius-control);background:var(--dou-color-bg-muted)}.dou-form-builder__placeholder-label{width:30%;max-width:96px;height:14px;margin-block-start:4px;margin-block-end:2px}.dou-form-builder__placeholder-box{height:var(--dou-control-height-md)}.dou-form-builder__placeholder[data-type=textarea]>.dou-form-builder__placeholder-box{height:76px}.dou-form-builder__placeholder:-webkit-any([data-type=radio-group],[data-type=checkbox-group],[data-type=checkbox],[data-type=switch],[data-type=rate],[data-type=slider])>.dou-form-builder__placeholder-box{height:22px}.dou-form-builder__placeholder:-moz-any([data-type=radio-group],[data-type=checkbox-group],[data-type=checkbox],[data-type=switch],[data-type=rate],[data-type=slider])>.dou-form-builder__placeholder-box{height:22px}.dou-form-builder__placeholder:is([data-type=radio-group],[data-type=checkbox-group],[data-type=checkbox],[data-type=switch],[data-type=rate],[data-type=slider])>.dou-form-builder__placeholder-box{height:22px}.dou-form-builder__placeholder:-webkit-any([data-type=text],[data-type=divider],[data-type=alert])>.dou-form-builder__placeholder-label{display:none}.dou-form-builder__placeholder:-moz-any([data-type=text],[data-type=divider],[data-type=alert])>.dou-form-builder__placeholder-label{display:none}.dou-form-builder__placeholder:is([data-type=text],[data-type=divider],[data-type=alert])>.dou-form-builder__placeholder-label{display:none}.dou-form-builder__placeholder[data-type=alert]>.dou-form-builder__placeholder-box{height:48px}.dou-form-builder__placeholder:-webkit-any([data-type=text],[data-type=divider])>.dou-form-builder__placeholder-box{height:20px}.dou-form-builder__placeholder:-moz-any([data-type=text],[data-type=divider])>.dou-form-builder__placeholder-box{height:20px}.dou-form-builder__placeholder:is([data-type=text],[data-type=divider])>.dou-form-builder__placeholder-box{height:20px}.dou-form-builder__empty{grid-column:1/-1;padding:20px var(--dou-space-lg);border:1px dashed var(--dou-color-border-strong);border-radius:var(--dou-radius-container);color:var(--dou-color-text-tertiary);font-size:var(--dou-font-size-sm);line-height:var(--dou-font-line-height);text-align:center}.dou-form-builder__actions{position:absolute;z-index:2;display:flex;box-sizing:border-box;border:1px solid var(--dou-color-border);border-radius:var(--dou-radius-control);background:var(--dou-color-bg-surface);box-shadow:var(--dou-shadow-sm);white-space:nowrap;align-items: center;gap:0;height:22px;padding:0;top:calc(var(--dou-form-builder-outset)*-1 + 1px)}.dou-form-builder__actions:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(var(--dou-form-builder-outset)*-1 + 1px)}.dou-form-builder__actions:not(:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(var(--dou-form-builder-outset)*-1 + 1px)}.dou-form-builder__actions:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(var(--dou-form-builder-outset)*-1 + 1px)}.dou-form-builder__actions:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(var(--dou-form-builder-outset)*-1 + 1px)}.dou-form-builder__actions:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(var(--dou-form-builder-outset)*-1 + 1px)}.dou-form-builder__actions:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(var(--dou-form-builder-outset)*-1 + 1px)}.dou-form-builder__actions-more{display:none}.dou-form-builder__actions[data-extra]>.dou-form-builder__actions-more{display:flex}@container dou-form-builder-node (width<360px){.dou-form-builder__actions>.dou-form-builder__action{display:none}.dou-form-builder__actions-more{display:flex}}.dou-form-builder__action{width:20px;height:20px}.dou-form-builder__action>svg{width:14px;height:14px}.dou-form-builder__pages{display:flex;gap:var(--dou-space-lg);flex-direction:column;min-width:0}.dou-form-builder__strip{display:flex;border-bottom:1px solid var(--dou-color-border);flex-wrap:wrap;align-items: center;gap:4px;padding-block-end:6px}.dou-form-builder__pages.is-steps>.dou-form-builder__strip{gap:var(--dou-space-sm);border-bottom:0;padding-block-end:0}.dou-form-builder__page-tab{position:relative;display:inline-flex;box-sizing:border-box;height:var(--dou-control-height-md);border-radius:var(--dou-radius-control);color:var(--dou-color-text-secondary);font-weight:var(--dou-font-weight-medium);white-space:nowrap;cursor:default;transition-property:background-color,color,box-shadow;transition-duration:var(--dou-motion-duration-fast);transition-timing-function:var(--dou-motion-easing);align-items: center;gap:6px;padding-inline-start:10px;padding-inline-end:10px}.dou-form-builder__page-tab:hover{background:var(--dou-form-builder-hover);color:var(--dou-color-text)}.dou-form-builder__page-tab.is-shown{color:var(--dou-color-text)}.dou-form-builder__page-tab.is-shown:after{content:"";position:absolute;background:var(--dou-color-text);border-radius:1px;height:2px;inset:auto 10px -7px}.dou-form-builder__page-tab.is-selected{box-shadow:inset 0 0 0 1px var(--dou-form-builder-selected);background:color-mix(in oklab,var(--dou-form-builder-selected)6%,transparent)}.dou-form-builder__page-title{text-box:trim-both cap alphabetic}.dou-form-builder__pages.is-steps .dou-form-builder__page-tab.is-shown:after{display:none}.dou-form-builder__step-number{display:inline-flex;box-sizing:border-box;border:1px solid var(--dou-color-border-strong);border-radius:50%;justify-content:center;align-items: center;width:20px;height:20px;font-size:12px;line-height:1}.is-shown>.dou-form-builder__step-number{border-color:var(--dou-color-text);background:var(--dou-color-text);color:var(--dou-color-bg-surface)}.dou-form-builder__page-add{width:28px;height:28px}.dou-form-builder__page{position:relative;isolation:isolate;display:flex;gap:var(--dou-space-lg);flex-direction:column}.dou-form-builder__page.is-selected:before{content:"";position:absolute;z-index:-1;inset:calc(var(--dou-form-builder-outset)*-1);border:1px solid var(--dou-form-builder-selected);border-radius:var(--dou-radius-control);background:color-mix(in oklab,var(--dou-form-builder-selected)4%,transparent)}.dou-form-builder__list-add{display:flex;pointer-events:none}.dou-form-builder__palette{display:flex;flex-direction:column}.dou-form-builder__palette-search{position:sticky;z-index:1;padding:var(--dou-space-md)var(--dou-space-sm);background:var(--dou-color-bg-surface);top:0}.dou-form-builder__palette-body{display:flex;gap:var(--dou-space-md);padding:0 var(--dou-space-sm)var(--dou-space-md);flex-direction:column}.dou-form-builder__palette-heading{color:var(--dou-color-text-tertiary);font-size:var(--dou-font-size-sm);font-weight:var(--dou-font-weight-medium);padding:4px 2px 8px;line-height:1}.dou-form-builder__palette-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.dou-form-builder__palette-item{display:flex;box-sizing:border-box;border:1px solid var(--dou-color-border);border-radius:var(--dou-radius-control);background:var(--dou-color-bg-surface);color:var(--dou-color-text);font:inherit;font-size:var(--dou-font-size-sm);text-align:start;cursor:pointer;transition-property:background-color,border-color;transition-duration:var(--dou-motion-duration-fast);transition-timing-function:var(--dou-motion-easing);align-items: center;gap:8px;min-width:0;height:34px;padding:0 8px}.dou-form-builder__palette-item:hover{border-color:var(--dou-color-border-strong);background:var(--dou-form-builder-hover)}.dou-form-builder__palette-item:focus-visible{outline:2px solid var(--dou-color-focus);outline-offset:1px}.dou-form-builder__palette-icon{color:var(--dou-color-text-secondary);flex-shrink:0;width:16px;height:16px}.dou-form-builder__palette-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dou-form-builder__palette-empty,.dou-form-builder__outline-empty{padding:var(--dou-space-lg);color:var(--dou-color-text-tertiary);font-size:var(--dou-font-size-sm);text-align:center}.dou-form-builder__outline{display:flex;padding:var(--dou-space-sm);outline:none;flex-direction:column;gap:1px}.dou-form-builder__outline:focus-visible{outline:2px solid var(--dou-color-focus);outline-offset:-2px}.dou-form-builder__outline-row{--dou-form-builder-level:0;display:flex;box-sizing:border-box;padding-inline:calc(4px + var(--dou-form-builder-level)*16px)8px;border-radius:var(--dou-radius-control);font-size:var(--dou-font-size-sm);cursor:default;align-items: center;gap:6px;min-width:0;height:32px}.dou-form-builder__outline-row:hover{background:var(--dou-form-builder-hover)}.dou-form-builder__outline-row.is-selected{background:color-mix(in oklab,var(--dou-form-builder-selected)10%,transparent)}.dou-form-builder__outline:focus-visible .dou-form-builder__outline-row.is-selected{box-shadow:inset 0 0 0 1px var(--dou-form-builder-selected)}.dou-form-builder__outline-toggle,.dou-form-builder__outline-spacer{flex-shrink:0;width:20px;height:20px}.dou-form-builder__outline-toggle>svg{transition:transform var(--dou-motion-duration-fast)var(--dou-motion-easing);width:14px;height:14px}.dou-form-builder__outline-toggle.is-open>svg{transform:rotate(90deg)}.dou-form-builder__outline-icon{color:var(--dou-color-text-secondary);flex-shrink:0;width:16px;height:16px}.dou-form-builder__outline-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-box:trim-both cap alphabetic;margin-block-start:-3px;margin-block-end:-3px;padding-block-start:3px;padding-block-end:3px}.dou-form-builder__outline-name{overflow:hidden;color:var(--dou-color-text-tertiary);white-space:nowrap;text-align:end;text-overflow:ellipsis;flex:1;min-width:0}.dou-form-builder__inspector{display:flex;flex-direction:column;flex:1;min-height:0}.dou-form-builder__inspector-header{display:flex;box-sizing:border-box;padding-inline:var(--dou-space-lg);border-bottom:1px solid var(--dou-color-border);flex-shrink:0;align-items: center;gap:8px;height:41px}.dou-form-builder__inspector-icon{color:var(--dou-color-text-secondary);flex-shrink:0;width:16px;height:16px}.dou-form-builder__inspector-title{overflow:hidden;font-weight:var(--dou-font-weight-medium);white-space:nowrap;text-overflow:ellipsis;text-box:trim-both cap alphabetic;margin-block-start:-3px;margin-block-end:-3px;padding-block-start:3px;padding-block-end:3px}.dou-form-builder__inspector-type{overflow:hidden;color:var(--dou-color-text-tertiary);font-size:var(--dou-font-size-sm);white-space:nowrap;text-align:end;text-overflow:ellipsis;flex:1;min-width:0}.dou-form-builder__inspector-body{padding:var(--dou-space-lg);overflow:auto;flex:1;min-height:0}.dou-form-builder__inspector-section{margin-block:var(--dou-space-lg)var(--dou-space-md);border-top:1px solid var(--dou-color-border-subtle);color:var(--dou-color-text-secondary);font-size:var(--dou-font-size-sm);font-weight:var(--dou-font-weight-medium);padding-block-start:var(--dou-space-lg);line-height:1}.dou-form-builder__inspector-actions{display:flex;gap:var(--dou-space-sm);flex-wrap:wrap;margin-block-start:var(--dou-space-lg)}.dou-form-builder__inspector-add{margin-block-start:var(--dou-space-md)}.dou-form-builder__span{display:flex;gap:var(--dou-space-sm);flex-direction:column;width:100%}.dou-form-builder__span-head{display:flex;gap:2px var(--dou-space-md);flex-wrap:wrap;justify-content:space-between;align-items: center;margin-block-end:calc(8px - var(--dou-space-sm))}.dou-form-builder__span-toggle{color:var(--dou-color-text-secondary);font-size:var(--dou-font-size-sm)}.dou-form-builder__span-row{display:flex;gap:var(--dou-space-sm);align-items: center}.dou-form-builder__span-row>.dou-input-number{flex:1;min-width:0}.dou-form-builder__span-label{color:var(--dou-color-text-secondary);font-size:var(--dou-font-size-sm);flex-shrink:0;min-width:48px}.dou-form-builder__span-row>.dou-form-builder__span-label:last-child{min-width:0}.dou-form-builder__live{position:absolute;overflow:hidden;clip-path:inset(50%);white-space:nowrap;width:1px;height:1px}@container dou-form-builder (width<1100px){.dou-form-builder__layout{grid-template-columns:232px minmax(0,1fr)272px}}@container dou-form-builder (width<860px){.dou-form-builder__layout{grid-template-columns:minmax(0,1fr)248px}.dou-form-builder__side:not(.dou-form-builder__side--end){display:none}.dou-form-builder__tool.dou-form-builder__side-toggle{display:inline-flex}.dou-form-builder__paper{padding-inline:var(--dou-space-lg)}}@container dou-form-builder (width<560px){.dou-form-builder__layout{grid-template-columns:minmax(0,1fr);grid-template-rows:480px auto;height:auto}.dou-form-builder__side.dou-form-builder__side--end{border-inline-start:0;border-inline-end:0;border-top:1px solid var(--dou-color-border)}}.dou-form-builder.is-compact .dou-form-builder__layout{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);height:var(--dou-form-builder-height,640px)}.dou-form-builder.is-compact .dou-form-builder__paper{padding-inline:var(--dou-space-md)}.dou-form-builder__tool.dou-form-builder__select-toggle[aria-pressed=true]{background:color-mix(in oklab,var(--dou-form-builder-selected)12%,transparent);color:var(--dou-form-builder-selected)}.dou-drawer.dou-form-builder__drawer .dou-drawer__body{padding:0}.dou-drawer.dou-form-builder__drawer .dou-form-builder__side-tabs{height:100%}.dou-form-builder__toolbar-spacer{flex:1}.dou-form-builder__tool.dou-form-builder__preview-toggle{color:var(--dou-color-text);font-size:var(--dou-font-size-sm);gap:6px;width:auto;padding-inline-start:6px;padding-inline-end:8px}.dou-form-builder__tool.dou-form-builder__preview-toggle>span{text-box:trim-both cap alphabetic}.dou-form-builder__tool.dou-form-builder__preview-toggle[aria-pressed=true]{background:color-mix(in oklab,var(--dou-form-builder-selected)12%,transparent);color:var(--dou-form-builder-selected)}.dou-form-builder.is-compact .dou-form-builder__preview-toggle{width:28px;padding:0}.dou-form-builder.is-compact .dou-form-builder__preview-toggle>span{position:absolute;overflow:hidden;clip-path:inset(50%);white-space:nowrap;width:1px;height:1px}.dou-form-builder__menu-anchor{position:absolute;width:0;height:0}.dou-form-builder.is-previewing .dou-form-builder__layout{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);height:var(--dou-form-builder-height,640px)}.dou-form-builder__preview{display:flex;background:var(--dou-color-bg-canvas);flex-direction:column;flex:1;min-height:0}.dou-form-builder__preview-bar{display:flex;padding:var(--dou-space-md)var(--dou-space-lg)0;flex-shrink:0;justify-content:center}.dou-form-builder__preview-device{display:inline-flex;align-items: center;gap:6px}.dou-form-builder__preview-device>svg{flex-shrink:0;width:14px;height:14px}.dou-form-builder__preview-scroll{padding:var(--dou-space-lg);overflow:auto;flex:1;min-height:0}.dou-form-builder__preview-frame{box-sizing:border-box;border:1px solid var(--dou-color-border);border-radius:var(--dou-radius-container);background:var(--dou-color-bg-surface);box-shadow:var(--dou-shadow-sm);transition:width var(--dou-motion-duration-normal)var(--dou-motion-easing);max-width:100%;margin-inline-start:auto;margin-inline-end:auto;padding:28px}.dou-form-builder__preview-frame[data-device=desktop]{max-width:760px}.dou-form-builder__preview-frame[data-device=phone]{padding:var(--dou-space-lg)}@media (prefers-reduced-motion:reduce){.dou-form-builder__preview-frame{transition:none}}.dou-form-builder__preview-footer{display:flex;gap:var(--dou-space-sm);flex-wrap:wrap}.dou-form-builder__preview-result{display:flex;gap:var(--dou-space-sm);border-top:1px solid var(--dou-color-border-subtle);flex-direction:column;margin-block-start:var(--dou-space-lg);padding-block-start:var(--dou-space-lg)}.dou-form-builder__preview-result-title{display:flex;color:var(--dou-color-text-secondary);font-size:var(--dou-font-size-sm);align-items: center;gap:6px}.dou-form-builder__preview-result-title>svg{color:var(--dou-color-success-text);flex-shrink:0;width:16px;height:16px}.dou-form-builder__preview-result-code,.dou-form-builder__json-text textarea,.dou-form-builder__expression-input textarea{font-family:var(--dou-font-family-mono)}.dou-form-builder__preview-result-code{padding:var(--dou-space-md);overflow:auto;border-radius:var(--dou-radius-control);background:var(--dou-color-bg-muted);color:var(--dou-color-text);font-size:var(--dou-font-size-sm);max-height:240px;margin:0;line-height:1.6}.dou-form-builder.is-compact .dou-form-builder__preview-bar{display:none}.dou-form-builder.is-compact .dou-form-builder__preview-scroll{padding:var(--dou-space-md)}.dou-form-builder.is-compact .dou-form-builder__preview-frame{padding:var(--dou-space-lg);width:auto!important}.dou-form-builder__expression{display:flex;flex-direction:column;gap:4px;width:100%;min-width:0}.dou-form-builder__expression-input{width:100%}.dou-form-builder__node.is-marked:after{content:"";position:absolute;z-index:1;inset:calc(var(--dou-form-builder-outset)*-1 - 2px);border:1px solid var(--dou-form-builder-mark);border-radius:calc(var(--dou-radius-control) + 2px);pointer-events:none}.dou-form-builder__marks{position:absolute;z-index:2;display:flex;overflow:hidden;pointer-events:none;gap:4px;max-width:calc(100% - 48px);top:calc(var(--dou-form-builder-outset)*-1 - 9px)}.dou-form-builder__marks:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:calc(var(--dou-form-builder-outset)*-1 + 6px)}.dou-form-builder__marks:not(:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:calc(var(--dou-form-builder-outset)*-1 + 6px)}.dou-form-builder__marks:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:calc(var(--dou-form-builder-outset)*-1 + 6px)}.dou-form-builder__marks:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:calc(var(--dou-form-builder-outset)*-1 + 6px)}.dou-form-builder__marks:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:calc(var(--dou-form-builder-outset)*-1 + 6px)}.dou-form-builder__marks:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:calc(var(--dou-form-builder-outset)*-1 + 6px)}.dou-form-builder__mark{box-sizing:border-box;background:var(--dou-form-builder-mark);color:#fff;white-space:nowrap;border-radius:4px;flex-shrink:0;height:14px;padding-inline-start:4px;padding-inline-end:4px;font-size:12px;line-height:14px}.dou-form-builder__outline-mark{background:var(--dou-form-builder-mark,currentColor);border-radius:50%;flex-shrink:0;width:6px;height:6px}.dou-form-builder__logic-mark{position:absolute;z-index:1;display:inline-flex;box-sizing:border-box;border:1px solid var(--dou-color-border);border-radius:var(--dou-radius-control);background:var(--dou-color-bg-surface);color:var(--dou-color-text-tertiary);align-items: center;gap:2px;height:20px;padding-inline-start:4px;padding-inline-end:4px;font-size:12px;top:calc(var(--dou-form-builder-outset)*-1 + 2px)}.dou-form-builder__logic-mark:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(var(--dou-form-builder-outset)*-1 + 2px)}.dou-form-builder__logic-mark:not(:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(var(--dou-form-builder-outset)*-1 + 2px)}.dou-form-builder__logic-mark:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(var(--dou-form-builder-outset)*-1 + 2px)}.dou-form-builder__logic-mark:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(var(--dou-form-builder-outset)*-1 + 2px)}.dou-form-builder__logic-mark:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(var(--dou-form-builder-outset)*-1 + 2px)}.dou-form-builder__logic-mark:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(var(--dou-form-builder-outset)*-1 + 2px)}.dou-form-builder__logic-mark:hover{color:var(--dou-color-text-secondary)}.dou-form-builder__logic-lines{display:flex;overflow-wrap:anywhere;flex-direction:column;gap:2px}.dou-form-builder__expression-error{color:var(--dou-color-danger-text);font-size:var(--dou-font-size-sm);line-height:var(--dou-font-line-height)}.dou-form-builder__condition{display:flex;gap:var(--dou-space-sm);flex-direction:column;width:100%;min-width:0}.dou-form-builder__inspector .dou-form-renderer__grid{column-gap:var(--dou-space-sm)}.dou-form-builder__inspector .dou-form-renderer__list-empty{display:none}.dou-form-builder.is-readonly .dou-form-builder__inspector .dou-form-renderer__list-empty,.dou-form-builder__condition-empty{display:block;color:var(--dou-color-text-tertiary);font-size:var(--dou-font-size-sm);text-align:start;border:0;padding:0}.dou-form-builder__condition-row{display:flex;padding:var(--dou-space-sm);border:1px solid var(--dou-color-border);border-radius:var(--dou-radius-control);background:var(--dou-color-bg-surface);flex-direction:column;gap:6px}.dou-form-builder__condition-line{display:flex;align-items: center;gap:6px;min-width:0}.dou-form-builder__condition-field,.dou-form-builder__condition-value{flex:1;min-width:0}.dou-form-builder__condition-op{flex:none;width:112px}.dou-form-builder__condition-footer{display:flex;flex-wrap:wrap;align-items: center;gap:4px;margin-inline-start:-8px;margin-inline-end:-8px}.dou-form-builder__condition-mode{margin-inline-start:auto}.dou-form-builder__json-text textarea{font-size:max(var(--dou-font-size-input-min,0px),var(--dou-font-size-sm));white-space:pre;line-height:1.6}.dou-form-builder__json-status{font-size:var(--dou-font-size-sm);line-height:var(--dou-font-line-height);margin-block-start:var(--dou-space-md)}.dou-form-builder__json-problems{display:flex;list-style:none;flex-direction:column;gap:4px;margin:0;padding:0}.dou-form-builder__json-problem{display:flex;color:var(--dou-color-warning-text);flex-wrap:wrap;gap:4px 8px}.dou-form-builder__json-problem.is-blocking{color:var(--dou-color-danger-text)}.dou-form-builder__json-path{color:var(--dou-color-text-secondary);font-family:var(--dou-font-family-mono)}.dou-form-builder__json-fine{color:var(--dou-color-text-secondary)}.dou-form-builder__json-footer{display:flex;gap:var(--dou-space-sm);flex-wrap:wrap;align-items: center;width:100%}.dou-form-builder__json-spacer{flex:1}.dou-form-builder__json-file{display:none}}:root.dou-form-builder-dragging,:root.dou-form-builder-dragging *{cursor:grabbing!important;user-select:none!important}@layer dou.components{.dou-form-renderer{container:dou-form-renderer/inline-size;box-sizing:border-box;width:100%}.dou-form-renderer__grid{--dou-form-columns:12;display:grid;grid-template-columns:repeat(var(--dou-form-columns),minmax(0,1fr));gap:var(--dou-form-gap)var(--dou-space-lg);align-items: start;min-width:0}.dou-form-renderer--horizontal>.dou-form-renderer__grid{grid-column:1/-1}.dou-form-renderer__cell{--dou-form-span:initial;--dou-form-span-sm:initial;--dou-form-span-md:initial;--dou-form-span-lg:initial;--dou-form-span-xl:initial;grid-column:span var(--dou-form-span,1);min-width:0}.dou-form-renderer__cell>.dou-divider{margin-block-start:0;margin-block-end:0}.dou-form-renderer--inline .dou-form-renderer__grid,.dou-form-renderer--inline .dou-form-renderer__cell{display:contents}.dou-form-renderer__section{display:flex;gap:var(--dou-space-lg);flex-direction:column;min-width:0}.dou-form-renderer__section.is-bordered{padding:var(--dou-space-lg);border:1px solid var(--dou-color-border);border-radius:var(--dou-radius-container);background:var(--dou-color-bg-surface)}.dou-form-renderer__section-header{display:flex;flex-direction:column;gap:4px}.dou-form-renderer__section-title{color:var(--dou-color-text);font-size:var(--dou-font-size-md);font-weight:var(--dou-font-weight-medium);line-height:1.4}.dou-form-renderer__section-description{color:var(--dou-color-text-secondary);font-size:var(--dou-font-size-sm);line-height:var(--dou-font-line-height)}.dou-form-renderer--marked .dou-form-renderer__section-title.is-required:before{content:"*";color:var(--dou-color-danger);margin-inline-end:4px}.dou-form-renderer__page{display:flex;gap:var(--dou-space-lg);flex-direction:column;min-width:0}.dou-form-renderer__page-description{color:var(--dou-color-text-secondary);font-size:var(--dou-font-size-sm);line-height:var(--dou-font-line-height)}.dou-form-renderer__tab-title{position:relative}.dou-form-renderer__tab-error{position:absolute;background:var(--dou-color-danger);border-radius:50%;width:6px;height:6px;top:-2px}.dou-form-renderer__tab-error:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:-8px}.dou-form-renderer__tab-error:not(:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:-8px}.dou-form-renderer__tab-error:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:-8px}.dou-form-renderer__tab-error:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:-8px}.dou-form-renderer__tab-error:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:-8px}.dou-form-renderer__tab-error:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:-8px}.dou-form-renderer__sr-only{position:absolute;overflow:hidden;clip-path:inset(50%);white-space:nowrap;width:1px;height:1px}.dou-form-renderer__tabs .dou-tabs__panel{padding-block-start:var(--dou-space-lg)}.dou-form-renderer__steps{display:flex;gap:var(--dou-space-lg);flex-direction:column;min-width:0}.dou-form-renderer__step[hidden]{display:none}.dou-form-renderer__step:focus{outline:none}.dou-form-renderer__steps-footer{display:flex;gap:var(--dou-space-sm);flex-wrap:wrap;align-items: center}.dou-form-renderer__steps-footer:empty{display:none}.dou-form-renderer__list{display:flex;gap:var(--dou-space-md);flex-direction:column;min-width:0}.dou-form-renderer__list-items{display:flex;gap:var(--dou-space-md);flex-direction:column}.dou-form-renderer__list-item{display:flex;gap:var(--dou-space-md);padding:var(--dou-space-md)var(--dou-space-lg)var(--dou-space-lg);border:1px solid var(--dou-color-border);border-radius:var(--dou-radius-container);background:var(--dou-color-bg-surface);flex-direction:column}.dou-form-renderer__list-item-header{display:flex;align-items: center;gap:4px;min-height:28px}.dou-form-renderer__list-handle{margin-inline-start:-6px}.dou-form-renderer__list-ghost{border-radius:var(--dou-radius-container)}@media (pointer:coarse){.dou-form-renderer__list-handle,.dou-form-renderer__list-remove{position:relative}:is(.dou-form-renderer__list-handle,.dou-form-renderer__list-remove):after{content:"";position:absolute;width:40px;height:40px;inset:50% auto auto 50%;transform:translate(-50%,-50%)}}.dou-form-renderer__list-item-title{color:var(--dou-color-text-secondary);font-size:var(--dou-font-size-sm);font-weight:var(--dou-font-weight-medium);flex:1;min-width:0}.dou-form-renderer__list-remove{margin-inline-end:-6px}.dou-form-renderer__list-empty{padding:var(--dou-space-lg);border:1px dashed var(--dou-color-border);border-radius:var(--dou-radius-container);color:var(--dou-color-text-tertiary);font-size:var(--dou-font-size-sm);text-align:center}.dou-form-renderer__list-footer{margin:0}.dou-form-renderer__list-footer .dou-form-item__label{display:none}.dou-form-renderer__value{color:var(--dou-color-text);font-size:var(--dou-font-size-md);line-height:var(--dou-font-line-height);white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}.dou-form-renderer__value.is-empty{color:var(--dou-color-text-tertiary)}.dou-form-renderer--readonly:-webkit-any(.dou-form-renderer--horizontal,.dou-form-renderer--inline) .dou-form-item__control{align-items: flex-start}.dou-form-renderer--readonly:-webkit-any(.dou-form-renderer--horizontal,.dou-form-renderer--inline) .dou-form-item__control>.dou-form-renderer__value{padding-block:calc((var(--dou-form-item-control-height) - 1cap)/2);text-box:trim-both cap alphabetic}.dou-form-renderer--readonly:-moz-any(.dou-form-renderer--horizontal,.dou-form-renderer--inline) .dou-form-item__control{align-items: flex-start}.dou-form-renderer--readonly:-moz-any(.dou-form-renderer--horizontal,.dou-form-renderer--inline) .dou-form-item__control>.dou-form-renderer__value{padding-block:calc((var(--dou-form-item-control-height) - 1cap)/2);text-box:trim-both cap alphabetic}.dou-form-renderer--readonly:is(.dou-form-renderer--horizontal,.dou-form-renderer--inline) .dou-form-item__control{align-items: flex-start}.dou-form-renderer--readonly:is(.dou-form-renderer--horizontal,.dou-form-renderer--inline) .dou-form-item__control>.dou-form-renderer__value{padding-block:calc((var(--dou-form-item-control-height) - 1cap)/2);text-box:trim-both cap alphabetic}.dou-form-renderer--readonly:-webkit-any(.dou-form-renderer--horizontal,.dou-form-renderer--inline) .dou-form-item__control>:-webkit-any(.dou-form-renderer__color,.dou-form-renderer__files){padding-block:calc((var(--dou-form-item-control-height) - 1lh)/2)}.dou-form-renderer--readonly:-moz-any(.dou-form-renderer--horizontal,.dou-form-renderer--inline) .dou-form-item__control>:-moz-any(.dou-form-renderer__color,.dou-form-renderer__files){padding-block:calc((var(--dou-form-item-control-height) - 1lh)/2)}.dou-form-renderer--readonly:is(.dou-form-renderer--horizontal,.dou-form-renderer--inline) .dou-form-item__control>:is(.dou-form-renderer__color,.dou-form-renderer__files){padding-block:calc((var(--dou-form-item-control-height) - 1lh)/2)}.dou-form-renderer__color{display:inline-flex;align-items: center;gap:var(--dou-space-sm);color:var(--dou-color-text);font-family:var(--dou-font-family-mono);font-size:var(--dou-font-size-sm);line-height:var(--dou-font-line-height)}.dou-form-renderer__swatch{position:relative;overflow:hidden;background:conic-gradient(color-mix(in oklab,var(--dou-color-text)10%,transparent)25%,transparent 0 50%,color-mix(in oklab,var(--dou-color-text)10%,transparent)0 75%,transparent 0)0 0/8px 8px,var(--dou-color-bg-surface);border-radius:4px;flex:none;width:16px;height:16px}.dou-form-renderer__swatch>span{position:absolute;border-radius:inherit;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--dou-color-text)12%,transparent);inset:0}.dou-form-renderer__files{display:flex;list-style:none;color:var(--dou-color-text);font-size:var(--dou-font-size-md);line-height:var(--dou-font-line-height);overflow-wrap:anywhere;flex-direction:column;gap:4px;min-width:0;margin:0;padding:0}.dou-form-renderer__steps.is-readonly{display:flex;flex-direction:column;gap:32px}.dou-form-renderer__title,.dou-form-renderer__paragraph{margin:0}@container dou-form-renderer (width<480px){.dou-form-renderer--horizontal .dou-form-item.is-fixed-label{display:flex;flex-direction:column;align-items:stretch}.dou-form-renderer--horizontal .dou-form-item.is-fixed-label .dou-form-item__label{text-align:start;justify-content:flex-start;min-height:0}}@container dou-form-renderer (width>=480px){.dou-form-renderer__cell{grid-column:span var(--dou-form-span-sm,var(--dou-form-span,1))}}@container dou-form-renderer (width>=640px){.dou-form-renderer__cell{grid-column:span var(--dou-form-span-md,var(--dou-form-span-sm,var(--dou-form-span,1)))}}@container dou-form-renderer (width>=800px){.dou-form-renderer__cell{grid-column:span var(--dou-form-span-lg,var(--dou-form-span-md,var(--dou-form-span-sm,var(--dou-form-span,1))))}}@container dou-form-renderer (width>=960px){.dou-form-renderer__cell{grid-column:span var(--dou-form-span-xl,var(--dou-form-span-lg,var(--dou-form-span-md,var(--dou-form-span-sm,var(--dou-form-span,1)))))}}}

package/dist/style.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/style.js

@@ -0,0 +1,27 @@
+import 'dou-ui/components/alert/style'
+import 'dou-ui/components/autocomplete/style'
+import 'dou-ui/components/cascader/style'
+import 'dou-ui/components/color-picker/style'
+import 'dou-ui/components/date-picker/style'
+import 'dou-ui/components/dialog/style'
+import 'dou-ui/components/divider/style'
+import 'dou-ui/components/drawer/style'
+import 'dou-ui/components/dropdown/style'
+import 'dou-ui/components/context-menu/style'
+import 'dou-ui/components/form/style'
+import 'dou-ui/components/input-otp/style'
+import 'dou-ui/components/input-tag/style'
+import 'dou-ui/components/link/style'
+import 'dou-ui/components/popover/style'
+import 'dou-ui/components/radio/style'
+import 'dou-ui/components/rate/style'
+import 'dou-ui/components/segmented-control/style'
+import 'dou-ui/components/slider/style'
+import 'dou-ui/components/steps/style'
+import 'dou-ui/components/switch/style'
+import 'dou-ui/components/tabs/style'
+import 'dou-ui/components/text/style'
+import 'dou-ui/components/time-picker/style'
+import 'dou-ui/components/tree-select/style'
+import 'dou-ui/components/upload/style'
+import './style.css'

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

@@ -0,0 +1,5 @@
+import type { VNode } from 'vue';
+/** The canvas: the form as the renderer draws it, each node selectable. */
+export declare const FormBuilderCanvas: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,35 @@
+/** What an expression can read, for completions. */
+export interface CompletionScope {
+    /** Paths under `values`, with what to show beside each. */
+    names: readonly {
+        path: string;
+        label?: string;
+    }[];
+    /** Paths under `item`; `undefined` where there is no list item. */
+    itemNames?: readonly {
+        path: string;
+        label?: string;
+    }[];
+    /** Whether `value` (the field's own value) can be read. */
+    value?: boolean;
+    functions: readonly string[];
+}
+export interface Completion {
+    /** What the list shows. */
+    label: string;
+    /** A quieter text after it, e.g. the field's label. */
+    description?: string;
+    /** The whole text once chosen. */
+    text: string;
+    /** Where the caret goes in `text`. */
+    caret: number;
+}
+/**
+ * What can be typed at the caret: field paths after `values.` or `item.`,
+ * else the names an expression starts with and the functions.
+ */
+export declare function completeExpression(text: string, caret: number, scope: CompletionScope, labels: {
+    values: string;
+    item: string;
+    value: string;
+}): Completion[];