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

package/dist/builder/form-builder.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,450 @@
+import { resolveFields } from "../fields/builtin.js";
+import { builderKey, createBuilderState } from "./context.js";
+import { resolveFormBuilderExtensions } from "./extension.js";
+import json_dialog_default from "./json-dialog.js";
+import preview_default from "./preview.js";
+import { useFormBuilderMessages } from "./locale.js";
+import { FormBuilderCanvas } from "./canvas.js";
+import inspector_default from "./inspector.js";
+import outline_default from "./outline.js";
+import palette_default from "./palette.js";
+import { DouDrawer, DouPopover, DouTabPanel, DouTabs, DouTooltip } from "dou-ui";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, onBeforeUnmount, onMounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useId, watch, withCtx } from "vue";
+import { BracesIcon, EyeIcon, ListChecksIcon, PanelLeftIcon, RedoIcon, SlidersIcon, UndoIcon } from "@dou-ui/icons";
+// src/builder/form-builder.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "dou-form-builder__layout" };
+var _hoisted_2 = ["aria-label"];
+var _hoisted_3 = { class: "dou-form-builder__main" };
+var _hoisted_4 = {
+	class: "dou-form-builder__toolbar",
+	role: "toolbar"
+};
+var _hoisted_5 = {
+	type: "button",
+	class: "dou-form-builder__tool dou-form-builder__side-toggle"
+};
+var _hoisted_6 = ["disabled", "aria-label"];
+var _hoisted_7 = ["disabled", "aria-label"];
+var _hoisted_8 = [
+	"disabled",
+	"aria-pressed",
+	"aria-label",
+	"onClick"
+];
+var _hoisted_9 = { key: 1 };
+var _hoisted_10 = ["aria-pressed", "aria-label"];
+var _hoisted_11 = ["aria-label"];
+var _hoisted_12 = ["aria-label"];
+var _hoisted_13 = ["aria-pressed"];
+var _hoisted_14 = ["aria-label"];
+var _hoisted_15 = {
+	class: "dou-form-builder__live",
+	"aria-live": "polite",
+	"aria-atomic": "true"
+};
+var form_builder_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DouFormBuilder",
+	__name: "form-builder",
+	props: {
+		modelValue: {},
+		selection: {},
+		fields: {},
+		mode: {},
+		functions: {},
+		sources: {},
+		validators: {},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		extensions: {},
+		messages: {}
+	},
+	emits: [
+		"update:modelValue",
+		"update:selection",
+		"update:mode",
+		"change"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const FormBuilderCanvas$1 = FormBuilderCanvas;
+		const props = __props;
+		const emit = __emit;
+		const extensions = computed(() => resolveFormBuilderExtensions(props.extensions));
+		const fields = computed(() => resolveFields([...props.fields ?? [], ...extensions.value.fields]));
+		const messages = useFormBuilderMessages(() => props.messages);
+		const ownMode = ref("design");
+		const mode = computed(() => props.mode ?? ownMode.value);
+		const previewing = computed(() => mode.value === "preview");
+		const state = createBuilderState({
+			uid: `dou-form-builder-${useId()}`,
+			document: () => props.modelValue,
+			selection: () => props.selection,
+			fields: () => fields.value,
+			messages: () => messages.value,
+			emitDocument: (document, tr) => {
+				emit("update:modelValue", document);
+				emit("change", tr);
+			},
+			emitSelection: (ids) => emit("update:selection", ids),
+			mode: () => mode.value,
+			emitMode: (next) => {
+				ownMode.value = next;
+				emit("update:mode", next);
+			},
+			functions: () => props.functions,
+			sources: () => props.sources,
+			validators: () => props.validators,
+			readonly: () => props.readonly,
+			extensions: () => extensions.value
+		});
+		provide(builderKey, state);
+		const jsonOpen = ref(false);
+		const toolbarItems = computed(() => extensions.value.toolbars.flatMap((toolbar) => toolbar(state)));
+		const stops = [];
+		let mounted = false;
+		let setUp = false;
+		let setupTimes = [];
+		let setupWarned = false;
+		/** An extension made in the template is new on every render, and set up again each time. */
+		function warnRepeatedSetup() {
+			if (process.env.NODE_ENV === "production" || setupWarned) return;
+			const now = Date.now();
+			setupTimes = [...setupTimes.filter((time) => now - time < 1e3), now];
+			if (setupTimes.length < 4) return;
+			setupWarned = true;
+			console.warn("[@dou-ui/form-builder] the extensions keep being set up again, which also clears undo each time. Create them once in <script setup> instead of in the template.");
+		}
+		function teardownExtensions() {
+			for (const stop of stops.splice(0)) stop();
+		}
+		function setupExtensions() {
+			if (setUp) warnRepeatedSetup();
+			setUp = true;
+			teardownExtensions();
+			for (const setup of extensions.value.setups) {
+				const stop = setup(state);
+				if (typeof stop === "function") stops.push(stop);
+			}
+		}
+		onMounted(() => {
+			mounted = true;
+			setupExtensions();
+		});
+		watch(() => [extensions.value.history, ...extensions.value.setups], (hooks, before) => {
+			if (mounted && (hooks.length !== before.length || hooks.some((hook, i) => hook !== before[i]))) setupExtensions();
+		});
+		onBeforeUnmount(teardownExtensions);
+		const side = ref("fields");
+		const sideLabel = computed(() => props.readonly ? messages.value.panels.outline : messages.value.panels.fields);
+		const sideTitle = computed(() => props.readonly ? messages.value.panels.outline : messages.value.panels.side);
+		const sideOpen = ref(false);
+		const root = shallowRef(null);
+		const compact = ref(false);
+		const settingsOpen = ref(false);
+		let observer;
+		onMounted(() => {
+			if (typeof ResizeObserver === "undefined" || !root.value) return;
+			observer = new ResizeObserver(([entry]) => {
+				compact.value = (entry?.contentRect.width ?? Infinity) < 560;
+			});
+			observer.observe(root.value);
+		});
+		onBeforeUnmount(() => observer?.disconnect());
+		watch(compact, (on) => {
+			if (!on) state.tapToggles.value = false;
+		});
+		function onCanvasClick(event) {
+			if (!compact.value || state.tapToggles.value || state.dragger.value?.swallowClick()) return;
+			if (!event.target.closest(".dou-form-builder__node") || event.target.closest(".dou-form-builder__actions")) return;
+			nextTick(() => {
+				if (state.focused.value) settingsOpen.value = true;
+			});
+		}
+		watch(() => state.selection, () => {
+			if (!sideOpen.value) return;
+			sideOpen.value = false;
+			nextTick(() => state.canvas.value?.focus({ preventScroll: true }));
+		});
+		const { transaction, dispatch, select, add, remove, duplicate, moveBy, moveTo, replace, wrap, addPage, selectParent, undo, redo, shownPage, setMode } = state;
+		__expose({
+			get document() {
+				return state.document;
+			},
+			get selection() {
+				return state.selection;
+			},
+			get fields() {
+				return state.fields;
+			},
+			get messages() {
+				return state.messages;
+			},
+			get canUndo() {
+				return state.canUndo;
+			},
+			get canRedo() {
+				return state.canRedo;
+			},
+			get readonly() {
+				return state.readonly;
+			},
+			get mode() {
+				return state.mode;
+			},
+			setMode,
+			transaction,
+			dispatch,
+			select,
+			add,
+			remove,
+			duplicate,
+			moveBy,
+			moveTo,
+			replace,
+			wrap,
+			addPage,
+			selectParent,
+			undo,
+			redo,
+			shownPage
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "root",
+				ref: root,
+				class: normalizeClass([
+					"dou-form-builder",
+					compact.value && "is-compact",
+					previewing.value && "is-previewing",
+					__props.readonly && "is-readonly"
+				])
+			}, [
+				renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("div", _hoisted_1, [
+					!previewing.value ? (openBlock(), createElementBlock("aside", {
+						key: 0,
+						class: "dou-form-builder__side",
+						"aria-label": sideTitle.value
+					}, [__props.readonly ? (openBlock(), createBlock(outline_default, { key: 0 })) : (openBlock(), createBlock(unref(DouTabs), {
+						key: 1,
+						modelValue: side.value,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => side.value = $event),
+						size: "sm",
+						class: "dou-form-builder__side-tabs"
+					}, {
+						default: withCtx(() => [createVNode(unref(DouTabPanel), {
+							value: "fields",
+							label: unref(messages).panels.fields
+						}, {
+							default: withCtx(() => [createVNode(palette_default)]),
+							_: 1
+						}, 8, ["label"]), createVNode(unref(DouTabPanel), {
+							value: "outline",
+							label: unref(messages).panels.outline
+						}, {
+							default: withCtx(() => [createVNode(outline_default)]),
+							_: 1
+						}, 8, ["label"])]),
+						_: 1
+					}, 8, ["modelValue"]))], 8, _hoisted_2)) : createCommentVNode("", true),
+					createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [
+						previewing.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [], 64)) : compact.value ? (openBlock(), createElementBlock("button", {
+							key: 1,
+							type: "button",
+							class: "dou-form-builder__tool dou-form-builder__side-toggle",
+							"aria-haspopup": "dialog",
+							onClick: _cache[1] || (_cache[1] = ($event) => sideOpen.value = true)
+						}, [createVNode(unref(PanelLeftIcon)), createElementVNode("span", null, toDisplayString(sideLabel.value), 1)])) : (openBlock(), createBlock(unref(DouPopover), {
+							key: 2,
+							open: sideOpen.value,
+							"onUpdate:open": _cache[3] || (_cache[3] = ($event) => sideOpen.value = $event),
+							placement: "bottom-start",
+							"aria-label": sideTitle.value,
+							class: "dou-form-builder__side-popover"
+						}, {
+							content: withCtx(() => [__props.readonly ? (openBlock(), createBlock(outline_default, { key: 0 })) : (openBlock(), createBlock(unref(DouTabs), {
+								key: 1,
+								modelValue: side.value,
+								"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => side.value = $event),
+								size: "sm",
+								class: "dou-form-builder__side-tabs"
+							}, {
+								default: withCtx(() => [createVNode(unref(DouTabPanel), {
+									value: "fields",
+									label: unref(messages).panels.fields
+								}, {
+									default: withCtx(() => [createVNode(palette_default)]),
+									_: 1
+								}, 8, ["label"]), createVNode(unref(DouTabPanel), {
+									value: "outline",
+									label: unref(messages).panels.outline
+								}, {
+									default: withCtx(() => [createVNode(outline_default)]),
+									_: 1
+								}, 8, ["label"])]),
+								_: 1
+							}, 8, ["modelValue"]))]),
+							default: withCtx(() => [createElementVNode("button", _hoisted_5, [createVNode(unref(PanelLeftIcon)), createElementVNode("span", null, toDisplayString(sideLabel.value), 1)])]),
+							_: 1
+						}, 8, ["open", "aria-label"])),
+						!previewing.value && !__props.readonly ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [createVNode(unref(DouTooltip), {
+							content: unref(messages).actions.undo,
+							shortcut: "mod+z",
+							placement: "bottom"
+						}, {
+							default: withCtx(() => [createElementVNode("button", {
+								type: "button",
+								class: "dou-form-builder__tool",
+								disabled: !unref(state).canUndo,
+								"aria-label": unref(messages).actions.undo,
+								onClick: _cache[4] || (_cache[4] = ($event) => unref(state).undo())
+							}, [createVNode(unref(UndoIcon))], 8, _hoisted_6)]),
+							_: 1
+						}, 8, ["content"]), createVNode(unref(DouTooltip), {
+							content: unref(messages).actions.redo,
+							shortcut: "mod+shift+z",
+							placement: "bottom"
+						}, {
+							default: withCtx(() => [createElementVNode("button", {
+								type: "button",
+								class: "dou-form-builder__tool",
+								disabled: !unref(state).canRedo,
+								"aria-label": unref(messages).actions.redo,
+								onClick: _cache[5] || (_cache[5] = ($event) => unref(state).redo())
+							}, [createVNode(unref(RedoIcon))], 8, _hoisted_7)]),
+							_: 1
+						}, 8, ["content"])], 64)) : createCommentVNode("", true),
+						(openBlock(true), createElementBlock(Fragment, null, renderList(toolbarItems.value, (item) => {
+							return openBlock(), createBlock(unref(DouTooltip), {
+								key: item.key,
+								content: item.label,
+								shortcut: item.shortcut,
+								disabled: !item.icon && !item.shortcut,
+								placement: "bottom"
+							}, {
+								default: withCtx(() => [createElementVNode("button", {
+									type: "button",
+									class: "dou-form-builder__tool",
+									disabled: item.disabled,
+									"aria-pressed": item.pressed,
+									"aria-label": item.icon ? item.label : void 0,
+									onClick: ($event) => item.run()
+								}, [item.icon ? (openBlock(), createBlock(resolveDynamicComponent(item.icon), { key: 0 })) : (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(item.label), 1))], 8, _hoisted_8)]),
+								_: 2
+							}, 1032, [
+								"content",
+								"shortcut",
+								"disabled"
+							]);
+						}), 128)),
+						renderSlot(_ctx.$slots, "toolbar"),
+						_cache[14] || (_cache[14] = createElementVNode("span", { class: "dou-form-builder__toolbar-spacer" }, null, -1)),
+						compact.value && !previewing.value ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [createVNode(unref(DouTooltip), {
+							content: unref(messages).actions.selectMany,
+							placement: "bottom"
+						}, {
+							default: withCtx(() => [createElementVNode("button", {
+								type: "button",
+								class: "dou-form-builder__tool dou-form-builder__select-toggle",
+								"aria-pressed": unref(state).tapToggles.value,
+								"aria-label": unref(messages).actions.selectMany,
+								onClick: _cache[6] || (_cache[6] = ($event) => unref(state).tapToggles.value = !unref(state).tapToggles.value)
+							}, [createVNode(unref(ListChecksIcon))], 8, _hoisted_10)]),
+							_: 1
+						}, 8, ["content"]), createVNode(unref(DouTooltip), {
+							content: unref(messages).panels.settings,
+							placement: "bottom"
+						}, {
+							default: withCtx(() => [createElementVNode("button", {
+								type: "button",
+								class: "dou-form-builder__tool dou-form-builder__settings-toggle",
+								"aria-haspopup": "dialog",
+								"aria-label": unref(messages).panels.settings,
+								onClick: _cache[7] || (_cache[7] = ($event) => settingsOpen.value = true)
+							}, [createVNode(unref(SlidersIcon))], 8, _hoisted_11)]),
+							_: 1
+						}, 8, ["content"])], 64)) : createCommentVNode("", true),
+						createVNode(unref(DouTooltip), {
+							content: unref(messages).json.title,
+							placement: "bottom"
+						}, {
+							default: withCtx(() => [createElementVNode("button", {
+								type: "button",
+								class: "dou-form-builder__tool",
+								"aria-haspopup": "dialog",
+								"aria-label": unref(messages).json.title,
+								onClick: _cache[8] || (_cache[8] = ($event) => jsonOpen.value = true)
+							}, [createVNode(unref(BracesIcon))], 8, _hoisted_12)]),
+							_: 1
+						}, 8, ["content"]),
+						createElementVNode("button", {
+							type: "button",
+							class: "dou-form-builder__tool dou-form-builder__preview-toggle",
+							"aria-pressed": previewing.value,
+							onClick: _cache[9] || (_cache[9] = ($event) => unref(state).setMode(previewing.value ? "design" : "preview"))
+						}, [createVNode(unref(EyeIcon)), createElementVNode("span", null, toDisplayString(unref(messages).preview.toggle), 1)], 8, _hoisted_13)
+					]), previewing.value ? (openBlock(), createBlock(preview_default, { key: 0 })) : (openBlock(), createBlock(unref(FormBuilderCanvas$1), {
+						key: 1,
+						onClickCapture: onCanvasClick
+					}))]),
+					!compact.value && !previewing.value ? (openBlock(), createElementBlock("aside", {
+						key: 1,
+						class: "dou-form-builder__side dou-form-builder__side--end",
+						"aria-label": unref(messages).panels.settings
+					}, [createVNode(inspector_default)], 8, _hoisted_14)) : createCommentVNode("", true)
+				]), compact.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(unref(DouDrawer), {
+					open: sideOpen.value,
+					"onUpdate:open": _cache[11] || (_cache[11] = ($event) => sideOpen.value = $event),
+					placement: "bottom",
+					title: sideTitle.value,
+					"snap-points": ["50%", "90%"],
+					swipeable: "",
+					class: "dou-form-builder__drawer"
+				}, {
+					default: withCtx(() => [__props.readonly ? (openBlock(), createBlock(outline_default, { key: 0 })) : (openBlock(), createBlock(unref(DouTabs), {
+						key: 1,
+						modelValue: side.value,
+						"onUpdate:modelValue": _cache[10] || (_cache[10] = ($event) => side.value = $event),
+						size: "sm",
+						class: "dou-form-builder__side-tabs"
+					}, {
+						default: withCtx(() => [createVNode(unref(DouTabPanel), {
+							value: "fields",
+							label: unref(messages).panels.fields
+						}, {
+							default: withCtx(() => [createVNode(palette_default)]),
+							_: 1
+						}, 8, ["label"]), createVNode(unref(DouTabPanel), {
+							value: "outline",
+							label: unref(messages).panels.outline
+						}, {
+							default: withCtx(() => [createVNode(outline_default)]),
+							_: 1
+						}, 8, ["label"])]),
+						_: 1
+					}, 8, ["modelValue"]))]),
+					_: 1
+				}, 8, ["open", "title"]), createVNode(unref(DouDrawer), {
+					open: settingsOpen.value,
+					"onUpdate:open": _cache[12] || (_cache[12] = ($event) => settingsOpen.value = $event),
+					placement: "bottom",
+					title: unref(messages).panels.settings,
+					"snap-points": ["50%", "90%"],
+					swipeable: "",
+					class: "dou-form-builder__drawer"
+				}, {
+					default: withCtx(() => [createVNode(inspector_default)]),
+					_: 1
+				}, 8, ["open", "title"])], 64)) : createCommentVNode("", true)]),
+				createVNode(json_dialog_default, {
+					open: jsonOpen.value,
+					"onUpdate:open": _cache[13] || (_cache[13] = ($event) => jsonOpen.value = $event)
+				}, null, 8, ["open"]),
+				createElementVNode("div", _hoisted_15, toDisplayString(unref(state).live.value), 1)
+			], 2);
+		};
+	}
+});
+export { form_builder_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=form-builder.vue_vue_type_script_setup_true_lang.js.map

package/dist/builder/form-builder.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-builder.vue_vue_type_script_setup_true_lang.js","names":["FormBuilderCanvas","FormBuilderCanvasComponent","_openBlock","_createElementBlock","_normalizeClass","_renderSlot","_createElementVNode","_createBlock","FormBuilderOutline","_unref","_withCtx","_createVNode","FormBuilderPalette","_createCommentVNode","_Fragment","_toDisplayString","_renderList","_resolveDynamicComponent","FormBuilderPreview","FormBuilderInspector","FormBuilderJson"],"sources":["../../src/builder/form-builder.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  ref,\n  shallowRef,\n  useId,\n  watch,\n} from 'vue'\nimport { DouDrawer, DouPopover, DouTabPanel, DouTabs, DouTooltip } from 'dou-ui'\nimport {\n  BracesIcon,\n  EyeIcon,\n  ListChecksIcon,\n  PanelLeftIcon,\n  RedoIcon,\n  SlidersIcon,\n  UndoIcon,\n} from '@dou-ui/icons'\nimport { resolveFields } from '../fields/builtin'\nimport { createBuilderState, builderKey } from './context'\nimport type { FormBuilderMode } from './context'\nimport { resolveFormBuilderExtensions } from './extension'\nimport FormBuilderJson from './json-dialog.vue'\nimport FormBuilderPreview from './preview.vue'\nimport { useFormBuilderMessages } from './locale'\nimport { FormBuilderCanvas as FormBuilderCanvasComponent } from './canvas'\nimport type { HTMLAttributes } from 'vue'\nimport type { WithAttributes } from 'dou-ui'\nimport FormBuilderInspector from './inspector.vue'\nimport FormBuilderOutline from './outline.vue'\nimport FormBuilderPalette from './palette.vue'\nimport type {\n  FormBuilderEmits,\n  FormBuilderExpose,\n  FormBuilderProps,\n  FormBuilderSlots,\n} from './types'\n\n// 让模板里也能写这个组件转交的原生属性\nconst FormBuilderCanvas = FormBuilderCanvasComponent as WithAttributes<\n  typeof FormBuilderCanvasComponent,\n  HTMLAttributes\n>\n\ndefineOptions({ name: 'DouFormBuilder' })\n\nconst props = withDefaults(defineProps<FormBuilderProps>(), { readonly: false })\nconst emit = defineEmits<FormBuilderEmits>()\ndefineSlots<FormBuilderSlots>()\n\nconst extensions = computed(() => resolveFormBuilderExtensions(props.extensions))\nconst fields = computed(() => resolveFields([...(props.fields ?? []), ...extensions.value.fields]))\nconst messages = useFormBuilderMessages(() => props.messages)\n\n// The mode follows `v-model:mode` when it is bound, else the builder's own.\nconst ownMode = ref<FormBuilderMode>('design')\nconst mode = computed(() => props.mode ?? ownMode.value)\nconst previewing = computed(() => mode.value === 'preview')\n\nconst state = createBuilderState({\n  uid: `dou-form-builder-${useId()}`,\n  document: () => props.modelValue,\n  selection: () => props.selection,\n  fields: () => fields.value,\n  messages: () => messages.value,\n  emitDocument: (document, tr) => {\n    emit('update:modelValue', document)\n    emit('change', tr)\n  },\n  emitSelection: (ids) => emit('update:selection', ids),\n  mode: () => mode.value,\n  emitMode: (next) => {\n    ownMode.value = next\n    emit('update:mode', next)\n  },\n  functions: () => props.functions,\n  sources: () => props.sources,\n  validators: () => props.validators,\n  readonly: () => props.readonly,\n  extensions: () => extensions.value,\n})\nprovide(builderKey, state)\n\nconst jsonOpen = ref(false)\nconst toolbarItems = computed(() => extensions.value.toolbars.flatMap((toolbar) => toolbar(state)))\n\n// Extensions start once the builder is mounted, again when their hooks change, and stop when it goes.\nconst stops: (() => void)[] = []\nlet mounted = false\nlet setUp = false\nlet setupTimes: number[] = []\nlet setupWarned = false\n/** An extension made in the template is new on every render, and set up again each time. */\nfunction warnRepeatedSetup() {\n  // the app's bundler replaces this, as for Vue's own warnings\n  if (process.env.NODE_ENV === 'production' || setupWarned) return\n  const now = Date.now()\n  setupTimes = [...setupTimes.filter((time) => now - time < 1000), now]\n  if (setupTimes.length < 4) return\n  setupWarned = true\n  console.warn(\n    '[@dou-ui/form-builder] the extensions keep being set up again, which also clears undo each time. Create them once in <script setup> instead of in the template.',\n  )\n}\nfunction teardownExtensions() {\n  for (const stop of stops.splice(0)) stop()\n}\nfunction setupExtensions() {\n  if (setUp) warnRepeatedSetup()\n  setUp = true\n  teardownExtensions()\n  for (const setup of extensions.value.setups) {\n    const stop = setup(state)\n    if (typeof stop === 'function') stops.push(stop)\n  }\n}\nonMounted(() => {\n  mounted = true\n  setupExtensions()\n})\n// A list written inline is new on every render; set up again only when the hooks change.\nwatch(\n  () => [extensions.value.history, ...extensions.value.setups],\n  (hooks, before) => {\n    if (mounted && (hooks.length !== before.length || hooks.some((hook, i) => hook !== before[i])))\n      setupExtensions()\n  },\n)\nonBeforeUnmount(teardownExtensions)\n\nconst side = ref<'fields' | 'outline'>('fields')\n// A read-only builder has nothing to add, so its side panel is the outline alone.\nconst sideLabel = computed(() =>\n  props.readonly ? messages.value.panels.outline : messages.value.panels.fields,\n)\nconst sideTitle = computed(() =>\n  props.readonly ? messages.value.panels.outline : messages.value.panels.side,\n)\n// On narrow builders the fields and the outline open from the toolbar,\n// and close once a node is added or picked; focus moves to the canvas,\n// where the node now is.\nconst sideOpen = ref(false)\n\n// On phones (a builder narrower than 560px) the fields and the settings\n// are drawers from the bottom. The settings open at half height when a\n// node is picked, and can be pulled up.\nconst root = shallowRef<HTMLElement | null>(null)\nconst compact = ref(false)\nconst settingsOpen = ref(false)\nlet observer: ResizeObserver | undefined\nonMounted(() => {\n  if (typeof ResizeObserver === 'undefined' || !root.value) return\n  observer = new ResizeObserver(([entry]) => {\n    compact.value = (entry?.contentRect.width ?? Infinity) < 560\n  })\n  observer.observe(root.value)\n})\nonBeforeUnmount(() => observer?.disconnect())\n// Picking several nodes by tapping is for phones only.\nwatch(compact, (on) => {\n  if (!on) state.tapToggles.value = false\n})\n// A tap on a node (not a drag, and not a node just added) opens its settings.\nfunction onCanvasClick(event: MouseEvent) {\n  if (!compact.value || state.tapToggles.value || state.dragger.value?.swallowClick()) return\n  const node = (event.target as HTMLElement).closest('.dou-form-builder__node')\n  if (!node || (event.target as HTMLElement).closest('.dou-form-builder__actions')) return\n  void nextTick(() => {\n    if (state.focused.value) settingsOpen.value = true\n  })\n}\nwatch(\n  () => state.selection,\n  () => {\n    if (!sideOpen.value) return\n    sideOpen.value = false\n    void nextTick(() => state.canvas.value?.focus({ preventScroll: true }))\n  },\n)\n\nconst {\n  transaction,\n  dispatch,\n  select,\n  add,\n  remove,\n  duplicate,\n  moveBy,\n  moveTo,\n  replace,\n  wrap,\n  addPage,\n  selectParent,\n  undo,\n  redo,\n  shownPage,\n  setMode,\n} = state\ndefineExpose<FormBuilderExpose>({\n  get document() {\n    return state.document\n  },\n  get selection() {\n    return state.selection\n  },\n  get fields() {\n    return state.fields\n  },\n  get messages() {\n    return state.messages\n  },\n  get canUndo() {\n    return state.canUndo\n  },\n  get canRedo() {\n    return state.canRedo\n  },\n  get readonly() {\n    return state.readonly\n  },\n  get mode() {\n    return state.mode\n  },\n  setMode,\n  transaction,\n  dispatch,\n  select,\n  add,\n  remove,\n  duplicate,\n  moveBy,\n  moveTo,\n  replace,\n  wrap,\n  addPage,\n  selectParent,\n  undo,\n  redo,\n  shownPage,\n})\n</script>\n\n<template>\n  <div\n    ref=\"root\"\n    :class=\"[\n      'dou-form-builder',\n      compact && 'is-compact',\n      previewing && 'is-previewing',\n      readonly && 'is-readonly',\n    ]\"\n  >\n    <slot>\n      <div class=\"dou-form-builder__layout\">\n        <aside v-if=\"!previewing\" class=\"dou-form-builder__side\" :aria-label=\"sideTitle\">\n          <FormBuilderOutline v-if=\"readonly\" />\n          <DouTabs v-else v-model=\"side\" size=\"sm\" class=\"dou-form-builder__side-tabs\">\n            <DouTabPanel value=\"fields\" :label=\"messages.panels.fields\">\n              <FormBuilderPalette />\n            </DouTabPanel>\n            <DouTabPanel value=\"outline\" :label=\"messages.panels.outline\">\n              <FormBuilderOutline />\n            </DouTabPanel>\n          </DouTabs>\n        </aside>\n        <div class=\"dou-form-builder__main\">\n          <div class=\"dou-form-builder__toolbar\" role=\"toolbar\">\n            <template v-if=\"previewing\" />\n            <button\n              v-else-if=\"compact\"\n              type=\"button\"\n              class=\"dou-form-builder__tool dou-form-builder__side-toggle\"\n              aria-haspopup=\"dialog\"\n              @click=\"sideOpen = true\"\n            >\n              <PanelLeftIcon />\n              <span>{{ sideLabel }}</span>\n            </button>\n            <DouPopover\n              v-else\n              v-model:open=\"sideOpen\"\n              placement=\"bottom-start\"\n              :aria-label=\"sideTitle\"\n              class=\"dou-form-builder__side-popover\"\n            >\n              <button type=\"button\" class=\"dou-form-builder__tool dou-form-builder__side-toggle\">\n                <PanelLeftIcon />\n                <span>{{ sideLabel }}</span>\n              </button>\n              <template #content>\n                <FormBuilderOutline v-if=\"readonly\" />\n                <DouTabs v-else v-model=\"side\" size=\"sm\" class=\"dou-form-builder__side-tabs\">\n                  <DouTabPanel value=\"fields\" :label=\"messages.panels.fields\">\n                    <FormBuilderPalette />\n                  </DouTabPanel>\n                  <DouTabPanel value=\"outline\" :label=\"messages.panels.outline\">\n                    <FormBuilderOutline />\n                  </DouTabPanel>\n                </DouTabs>\n              </template>\n            </DouPopover>\n            <template v-if=\"!previewing && !readonly\">\n              <DouTooltip :content=\"messages.actions.undo\" shortcut=\"mod+z\" placement=\"bottom\">\n                <button\n                  type=\"button\"\n                  class=\"dou-form-builder__tool\"\n                  :disabled=\"!state.canUndo\"\n                  :aria-label=\"messages.actions.undo\"\n                  @click=\"state.undo()\"\n                >\n                  <UndoIcon />\n                </button>\n              </DouTooltip>\n              <DouTooltip\n                :content=\"messages.actions.redo\"\n                shortcut=\"mod+shift+z\"\n                placement=\"bottom\"\n              >\n                <button\n                  type=\"button\"\n                  class=\"dou-form-builder__tool\"\n                  :disabled=\"!state.canRedo\"\n                  :aria-label=\"messages.actions.redo\"\n                  @click=\"state.redo()\"\n                >\n                  <RedoIcon />\n                </button>\n              </DouTooltip>\n            </template>\n            <!-- A tool with its name on it needs a tip only for its key. -->\n            <DouTooltip\n              v-for=\"item in toolbarItems\"\n              :key=\"item.key\"\n              :content=\"item.label\"\n              :shortcut=\"item.shortcut\"\n              :disabled=\"!item.icon && !item.shortcut\"\n              placement=\"bottom\"\n            >\n              <button\n                type=\"button\"\n                class=\"dou-form-builder__tool\"\n                :disabled=\"item.disabled\"\n                :aria-pressed=\"item.pressed\"\n                :aria-label=\"item.icon ? item.label : undefined\"\n                @click=\"item.run()\"\n              >\n                <component :is=\"item.icon\" v-if=\"item.icon\" />\n                <span v-else>{{ item.label }}</span>\n              </button>\n            </DouTooltip>\n            <slot name=\"toolbar\" />\n            <span class=\"dou-form-builder__toolbar-spacer\" />\n            <template v-if=\"compact && !previewing\">\n              <DouTooltip :content=\"messages.actions.selectMany\" placement=\"bottom\">\n                <button\n                  type=\"button\"\n                  class=\"dou-form-builder__tool dou-form-builder__select-toggle\"\n                  :aria-pressed=\"state.tapToggles.value\"\n                  :aria-label=\"messages.actions.selectMany\"\n                  @click=\"state.tapToggles.value = !state.tapToggles.value\"\n                >\n                  <ListChecksIcon />\n                </button>\n              </DouTooltip>\n              <DouTooltip :content=\"messages.panels.settings\" placement=\"bottom\">\n                <button\n                  type=\"button\"\n                  class=\"dou-form-builder__tool dou-form-builder__settings-toggle\"\n                  aria-haspopup=\"dialog\"\n                  :aria-label=\"messages.panels.settings\"\n                  @click=\"settingsOpen = true\"\n                >\n                  <SlidersIcon />\n                </button>\n              </DouTooltip>\n            </template>\n            <DouTooltip :content=\"messages.json.title\" placement=\"bottom\">\n              <button\n                type=\"button\"\n                class=\"dou-form-builder__tool\"\n                aria-haspopup=\"dialog\"\n                :aria-label=\"messages.json.title\"\n                @click=\"jsonOpen = true\"\n              >\n                <BracesIcon />\n              </button>\n            </DouTooltip>\n            <button\n              type=\"button\"\n              class=\"dou-form-builder__tool dou-form-builder__preview-toggle\"\n              :aria-pressed=\"previewing\"\n              @click=\"state.setMode(previewing ? 'design' : 'preview')\"\n            >\n              <EyeIcon />\n              <span>{{ messages.preview.toggle }}</span>\n            </button>\n          </div>\n          <FormBuilderPreview v-if=\"previewing\" />\n          <FormBuilderCanvas v-else @click.capture=\"onCanvasClick\" />\n        </div>\n        <aside\n          v-if=\"!compact && !previewing\"\n          class=\"dou-form-builder__side dou-form-builder__side--end\"\n          :aria-label=\"messages.panels.settings\"\n        >\n          <FormBuilderInspector />\n        </aside>\n      </div>\n      <template v-if=\"compact\">\n        <DouDrawer\n          v-model:open=\"sideOpen\"\n          placement=\"bottom\"\n          :title=\"sideTitle\"\n          :snap-points=\"['50%', '90%']\"\n          swipeable\n          class=\"dou-form-builder__drawer\"\n        >\n          <FormBuilderOutline v-if=\"readonly\" />\n          <DouTabs v-else v-model=\"side\" size=\"sm\" class=\"dou-form-builder__side-tabs\">\n            <DouTabPanel value=\"fields\" :label=\"messages.panels.fields\">\n              <FormBuilderPalette />\n            </DouTabPanel>\n            <DouTabPanel value=\"outline\" :label=\"messages.panels.outline\">\n              <FormBuilderOutline />\n            </DouTabPanel>\n          </DouTabs>\n        </DouDrawer>\n        <DouDrawer\n          v-model:open=\"settingsOpen\"\n          placement=\"bottom\"\n          :title=\"messages.panels.settings\"\n          :snap-points=\"['50%', '90%']\"\n          swipeable\n          class=\"dou-form-builder__drawer\"\n        >\n          <FormBuilderInspector />\n        </DouDrawer>\n      </template>\n    </slot>\n    <FormBuilderJson v-model:open=\"jsonOpen\" />\n    <div class=\"dou-form-builder__live\" aria-live=\"polite\" aria-atomic=\"true\">\n      {{ state.live.value }}\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/builder/index.js

@@ -0,0 +1,22 @@
+import { FormBuilderTransaction, applyFormSteps, canContainFormNode, compactFormSteps, formNodePlaces } from "./core/transaction.js";
+import { FormBuilderHistory } from "./core/history.js";
+import { useFormBuilder } from "./context.js";
+import { defineFormBuilderExtension, resolveFormBuilderExtensions, resolveFormBuilderFields } from "./extension.js";
+import preview_default from "./preview.js";
+import { formBuilderLocales, useFormBuilderMessages } from "./locale.js";
+import { FormBuilderCanvas } from "./canvas.js";
+import inspector_default from "./inspector.js";
+import outline_default from "./outline.js";
+import palette_default from "./palette.js";
+import form_builder_default from "./form-builder.js";
+import { withInstall } from "dou-ui";
+// src/builder/index.ts
+var DouFormBuilder = withInstall(form_builder_default);
+var DouFormBuilderPalette = withInstall(palette_default);
+var DouFormBuilderInspector = withInstall(inspector_default);
+var DouFormBuilderOutline = withInstall(outline_default);
+var DouFormBuilderCanvas = withInstall(FormBuilderCanvas);
+var DouFormBuilderPreview = withInstall(preview_default);
+export { DouFormBuilder, DouFormBuilderCanvas, DouFormBuilderInspector, DouFormBuilderOutline, DouFormBuilderPalette, DouFormBuilderPreview, FormBuilderHistory, FormBuilderTransaction, applyFormSteps, canContainFormNode, compactFormSteps, defineFormBuilderExtension, formBuilderLocales, formNodePlaces, resolveFormBuilderExtensions, resolveFormBuilderFields, useFormBuilder, useFormBuilderMessages };
+
+//# sourceMappingURL=index.js.map

package/dist/builder/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["FormBuilder","Palette","Inspector","Outline","Preview"],"sources":["../../src/builder/index.ts"],"sourcesContent":["import { withInstall } from 'dou-ui'\nimport FormBuilder from './form-builder.vue'\nimport Inspector from './inspector.vue'\nimport Outline from './outline.vue'\nimport Palette from './palette.vue'\nimport Preview from './preview.vue'\nimport { FormBuilderCanvas } from './canvas'\n\nexport const DouFormBuilder = withInstall(FormBuilder)\nexport const DouFormBuilderPalette = withInstall(Palette)\nexport const DouFormBuilderInspector = withInstall(Inspector)\nexport const DouFormBuilderOutline = withInstall(Outline)\nexport const DouFormBuilderCanvas = withInstall(FormBuilderCanvas)\nexport const DouFormBuilderPreview = withInstall(Preview)\n\nexport type {\n  FormBuilderEmits,\n  FormBuilderExpose,\n  FormBuilderProps,\n  FormBuilderSlots,\n} from './types'\nexport { useFormBuilder } from './context'\nexport type {\n  FormBuilderContext,\n  FormBuilderDispatchOptions,\n  FormBuilderMode,\n  FormBuilderSelectMode,\n} from './context'\nexport {\n  defineFormBuilderExtension,\n  resolveFormBuilderExtensions,\n  resolveFormBuilderFields,\n} from './extension'\nexport type {\n  FormBuilderExtension,\n  FormBuilderExtensionContext,\n  FormBuilderInspectorSection,\n  FormBuilderKeyHandler,\n  FormBuilderMenuItem,\n  FormBuilderToolbarItem,\n  ResolvedFormBuilderExtensions,\n} from './extension'\nexport {\n  applyFormSteps,\n  canContainFormNode,\n  compactFormSteps,\n  FormBuilderTransaction,\n  formNodePlaces,\n} from './core/transaction'\nexport type {\n  FormBuilderStep,\n  FormBuilderTransactionMeta,\n  FormDocumentPatch,\n  FormNodePatch,\n  FormNodePlace,\n} from './core/transaction'\nexport { FormBuilderHistory } from './core/history'\nexport type { FormBuilderInsertPlace } from './core/commands'\nexport { formBuilderLocales, useFormBuilderMessages } from './locale'\nexport type { FormBuilderMessages, FormBuilderMessagesOverride } from './locale'\n\nexport type FormBuilderInstance = InstanceType<typeof FormBuilder>\n\ndeclare module 'vue' {\n  export interface GlobalComponents {\n    DouFormBuilder: typeof DouFormBuilder\n    DouFormBuilderPalette: typeof DouFormBuilderPalette\n    DouFormBuilderInspector: typeof DouFormBuilderInspector\n    DouFormBuilderOutline: typeof DouFormBuilderOutline\n    DouFormBuilderCanvas: typeof DouFormBuilderCanvas\n    DouFormBuilderPreview: typeof DouFormBuilderPreview\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAQA,IAAa,iBAAiB,YAAYA,oBAAW;AACrD,IAAa,wBAAwB,YAAYC,eAAO;AACxD,IAAa,0BAA0B,YAAYC,iBAAS;AAC5D,IAAa,wBAAwB,YAAYC,eAAO;AACxD,IAAa,uBAAuB,YAAY,iBAAiB;AACjE,IAAa,wBAAwB,YAAYC,eAAO"}

package/dist/builder/inspector.js

@@ -0,0 +1,6 @@
+import inspector_vue_vue_type_script_setup_true_lang_default from "./inspector.vue_vue_type_script_setup_true_lang.js";
+// src/builder/inspector.vue
+var inspector_default = inspector_vue_vue_type_script_setup_true_lang_default;
+export { inspector_default as default };
+
+//# sourceMappingURL=inspector.js.map

package/dist/builder/inspector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inspector.js","names":["_sfc_main"],"sources":["../../src/builder/inspector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, provide, useTemplateRef, watchEffect } from 'vue'\nimport { DouButton } from 'dou-ui'\nimport type { FormRules } from 'dou-ui'\nimport { CopyIcon, PlusIcon, SquareDashedIcon, TrashIcon } from '@dou-ui/icons'\nimport { isContainer, isField, isList } from '../core/document'\nimport type { FormFieldNode, FormNode, FormRuleSpec } from '../core/types'\nimport { builtinFields } from '../fields/builtin'\nimport { normalizeOptions } from '../fields/components'\nimport type { FormFieldType } from '../fields/define'\nimport { formatMessage } from '../locale'\nimport FormRenderer from '../renderer/form-renderer.vue'\nimport { controlsReadonlyKey } from '../renderer/context'\nimport { useBuilderState } from './context'\nimport type { FormBuilderTransaction } from './core/transaction'\nimport { scopeOf } from './core/commands'\nimport { formNodePlaces } from './core/transaction'\nimport {\n  itemToRule,\n  logicScope,\n  sameLogicScope,\n  logicSettings,\n  ruleSettings,\n  ruleToItem,\n} from './logic'\nimport type { LogicScope } from './logic'\nimport { conditionField, expressionField } from './logic-fields'\nimport {\n  builtinSettings,\n  documentSettings,\n  iconOf,\n  labelOf,\n  nodeSettings,\n  nodeTitle,\n  settingsDocument,\n} from './settings'\nimport { useSettingsBinding } from './settings-binding'\nimport { spanField } from './span-field'\n\ndefineOptions({ name: 'DouFormBuilderInspector' })\n\nconst state = useBuilderState()\n// A read-only builder's settings can be read, not changed: the controls stay legible.\nprovide(controlsReadonlyKey, () => state.readonly)\nconst root = useTemplateRef<HTMLElement>('root')\nwatchEffect(() => (state.inspector.value = root.value))\nonBeforeUnmount(() => {\n  if (state.inspector.value === root.value) state.inspector.value = null\n})\n\nconst messages = computed(() => state.messages)\nconst types = computed(() => state.fields as Map<string, FormFieldType>)\nconst builderFields = [spanField, expressionField, conditionField]\nconst extra = builderFields\nconst rendererFields = computed(() => [...types.value.values(), ...builderFields])\nconst inspectorFields = computed(\n  () => new Map([...types.value, ...builderFields.map((type) => [type.type, type] as const)]),\n)\n\nconst count = computed(() => state.selection.length)\nconst node = computed(() => (count.value === 1 ? state.focused.value : undefined))\nconst place = computed(() =>\n  node.value ? formNodePlaces(state.document).get(node.value.id) : undefined,\n)\nconst spec = computed(() =>\n  node.value && isField(node.value) ? types.value.get(node.value.type) : undefined,\n)\n\n/** Columns of the grid a node sits on. */\nfunction gridColumns(id: string | undefined) {\n  const document = state.document\n  const own = Math.max(1, Math.round(document.columns ?? 12))\n  if (!id) return own\n  const map = formNodePlaces(document)\n  let parent = map.get(id)?.parent\n  while (parent) {\n    if ('columns' in parent && parent.columns) return parent.columns\n    if (parent.type === 'tabs' || parent.type === 'steps') {\n      parent = map.get(parent.id)?.parent\n      continue\n    }\n    parent = map.get(parent.id)?.parent\n  }\n  return own\n}\n\n// The settings forms change only with what they depend on, so typing in one keeps the others.\nfunction memo<T>(deps: () => unknown[], make: () => T) {\n  let last: unknown[] | undefined\n  let value: T\n  return computed(() => {\n    const next = deps()\n    if (!last || next.length !== last.length || next.some((dep, index) => dep !== last![index])) {\n      last = next\n      value = make()\n    }\n    return value\n  })\n}\n\nconst columns = computed(() => gridColumns(node.value?.id))\nconst inItem = computed(() => !!scopeOf(state.document, place.value?.parent?.id ?? null))\n\nconst nodeForm = memo(\n  () => {\n    const current = node.value\n    const kind = current && (isField(current) ? 'field' : current.type)\n    return [\n      kind,\n      current?.type,\n      (current as FormFieldNode | undefined)?.props,\n      columns.value,\n      inItem.value,\n      messages.value,\n      spec.value,\n    ]\n  },\n  () =>\n    settingsDocument(\n      node.value\n        ? nodeSettings(node.value, {\n            messages: messages.value,\n            columns: columns.value,\n            inItem: inItem.value,\n            type: spec.value,\n          })\n        : [],\n    ),\n)\n\nconst isBuiltin = (type: FormFieldType | undefined) => !!type && builtinFields.includes(type)\nconst typeForm = memo(\n  () => [node.value?.type, spec.value, messages.value],\n  () => {\n    const type = spec.value\n    const nodes =\n      type?.settings ?? (isBuiltin(type) ? builtinSettings(type!.type, messages.value) : [])\n    return settingsDocument(nodes)\n  },\n)\nconst formForm = memo(\n  () => [messages.value],\n  () => settingsDocument(documentSettings(messages.value)),\n)\nconst spanForm = memo(\n  () => [messages.value, state.document.columns],\n  () =>\n    settingsDocument(\n      nodeSettings(\n        { id: '', type: 'tabs', children: [] },\n        {\n          messages: messages.value,\n          columns: Math.max(1, Math.round(state.document.columns ?? 12)),\n          inItem: false,\n        },\n      ),\n    ),\n)\n\n// What the node's logic can read; kept as one object while the fields it lists stay the same.\nlet lastScope: LogicScope | undefined\nconst logic = computed(() => {\n  const next = logicScope(state.document, node.value?.id, types.value, messages.value)\n  if (!lastScope || !sameLogicScope(lastScope, next)) lastScope = next\n  return lastScope\n})\nconst holdsValue = computed(() => {\n  const current = node.value\n  if (!current) return false\n  return isList(current) || (isField(current) && spec.value?.kind !== 'display')\n})\n\nconst logicForm = memo(\n  () => [\n    node.value?.type,\n    (node.value as FormFieldNode | undefined)?.name,\n    logic.value,\n    spec.value,\n    messages.value,\n  ],\n  () =>\n    settingsDocument(\n      node.value\n        ? logicSettings(node.value, {\n            messages: messages.value,\n            scope: logic.value,\n            type: spec.value,\n          })\n        : [],\n    ),\n)\nconst validatorNames = computed(() => {\n  const given = state.validators()\n  return given ? Object.keys(given) : undefined\n})\nconst ruleForm = memo(\n  () => [holdsValue.value, logic.value, messages.value, validatorNames.value?.join()],\n  () =>\n    settingsDocument(\n      holdsValue.value\n        ? ruleSettings({\n            messages: messages.value,\n            scope: logic.value,\n            validators: validatorNames.value,\n          })\n        : [],\n    ),\n)\n\n/** Make a change of the settings, unless the builder is read-only. */\nfunction commit(tr: FormBuilderTransaction) {\n  if (!state.readonly) state.dispatch(tr)\n}\n\nfunction update(id: string, patch: Record<string, unknown>) {\n  const tr = state.transaction().update(id, patch)\n  tr.setMeta('group', `inspector:${id}:${Object.keys(patch).join(',')}`)\n  tr.setMeta('origin', 'inspector')\n  commit(tr)\n  return formNodePlaces(state.document).get(id)?.node\n}\n\nconst nodeModel = useSettingsBinding({\n  source: () => node.value as Record<string, unknown> | undefined,\n  form: () => nodeForm.value,\n  fields: () => inspectorFields.value,\n  apply: (patch) =>\n    node.value ? (update(node.value.id, patch) as unknown as Record<string, unknown>) : undefined,\n})\n\nconst logicModel = useSettingsBinding({\n  source: () => node.value as Record<string, unknown> | undefined,\n  form: () => logicForm.value,\n  fields: () => inspectorFields.value,\n  apply: (patch) =>\n    node.value ? (update(node.value.id, patch) as unknown as Record<string, unknown>) : undefined,\n})\n\nconst ruleModel = useSettingsBinding({\n  source: () => node.value as Record<string, unknown> | undefined,\n  form: () => ruleForm.value,\n  fields: () => inspectorFields.value,\n  prepare: (data) => {\n    const rules = (data.rules as FormRuleSpec[] | undefined) ?? []\n    return { ...data, rules: rules.map(ruleToItem) }\n  },\n  apply: (patch) => {\n    const current = node.value\n    if (!current || !('rules' in patch)) return undefined\n    const items = (patch.rules as Record<string, unknown>[] | undefined) ?? []\n    const rules = items.map(itemToRule)\n    return update(current.id, { rules: rules.length ? rules : undefined }) as unknown as\n      Record<string, unknown> | undefined\n  },\n})\n\n/** Parts of the inspector from extensions, for the node or the form. */\nconst sections = computed(() =>\n  count.value > 1\n    ? []\n    : state.extensions().inspectors.flatMap((inspector) => inspector(state, node.value)),\n)\n\nconst typeModel = useSettingsBinding({\n  source: () => (node.value as FormFieldNode | undefined)?.props,\n  key: () => node.value?.id,\n  form: () => typeForm.value,\n  fields: () => inspectorFields.value,\n  prepare: (props) => {\n    // Options written as plain values show as rows of text and value.\n    const prop = spec.value?.optionsProp\n    const options = prop ? props[prop] : undefined\n    if (prop && Array.isArray(options) && options.some((option) => typeof option !== 'object'))\n      props[prop] = normalizeOptions(options).map(({ label, value }) => ({ label, value }))\n    return props\n  },\n  apply: (patch) => {\n    const current = node.value as FormFieldNode | undefined\n    if (!current) return undefined\n    const props: Record<string, unknown> = { ...current.props }\n    for (const [key, value] of Object.entries(patch)) {\n      if (value === undefined) delete props[key]\n      else props[key] = value\n    }\n    const next = update(current.id, { props: Object.keys(props).length ? props : undefined })\n    return (next as FormFieldNode | undefined)?.props\n  },\n})\n\n// The document's own settings, as an object that changes only when one of them does.\nconst settingKeys = [\n  'layout',\n  'labelAlign',\n  'labelWidth',\n  'size',\n  'requiredMark',\n  'columns',\n] as const\nlet lastSettings: Record<string, unknown> = {}\nconst documentSettingsOf = computed(() => {\n  const document = state.document as unknown as Record<string, unknown>\n  if (settingKeys.every((key) => lastSettings[key] === document[key])) return lastSettings\n  const next: Record<string, unknown> = {}\n  for (const key of settingKeys) if (document[key] !== undefined) next[key] = document[key]\n  return (lastSettings = next)\n})\n\nconst formModel = useSettingsBinding({\n  source: () => documentSettingsOf.value,\n  form: () => formForm.value,\n  fields: () => inspectorFields.value,\n  apply: (patch) => {\n    const tr = state.transaction().updateDocument(patch)\n    tr.setMeta('group', `inspector:document:${Object.keys(patch).join(',')}`)\n    tr.setMeta('origin', 'inspector')\n    commit(tr)\n    return documentSettingsOf.value\n  },\n})\n\nconst spanModel = useSettingsBinding({\n  source: () =>\n    count.value > 1 ? (state.focused.value as Record<string, unknown> | undefined) : undefined,\n  key: () => state.selection.join(),\n  form: () => spanForm.value,\n  fields: () => inspectorFields.value,\n  apply: (patch) => {\n    const tr = state.transaction()\n    for (const id of state.selection) tr.update(id, patch)\n    tr.setMeta('group', `inspector:${state.selection.join()}:span`)\n    commit(tr)\n    return state.focused.value as Record<string, unknown> | undefined\n  },\n})\n\n/** The other names of the scope the node's name is a key of. */\nfunction otherNames(current: FormNode) {\n  const document = state.document\n  const scope = scopeOf(document, formNodePlaces(document).get(current.id)?.parent?.id ?? null)\n  const names = new Set<string>()\n  const visit = (nodes: readonly FormNode[]) => {\n    for (const each of nodes) {\n      if (each.id !== current.id && 'name' in each && each.name) names.add(each.name)\n      if (isContainer(each) && !isList(each)) visit(each.children)\n    }\n  }\n  visit(scope ? scope.children : document.nodes)\n  return names\n}\n\nconst nameRules = computed<FormRules>(() => ({\n  name: [\n    {\n      validator: (value: unknown) => {\n        const current = node.value\n        if (!current) return true\n        const name = typeof value === 'string' ? value.trim() : ''\n        if (!name) return holdsValue.value ? messages.value.errors.name : true\n        if (otherNames(current).has(name))\n          return formatMessage(messages.value.errors.taken, { text: name })\n        return true\n      },\n      trigger: 'change',\n    },\n  ],\n}))\n\nconst heading = computed(() => {\n  if (count.value > 1)\n    return {\n      icon: SquareDashedIcon,\n      title: formatMessage(messages.value.inspector.multiple, { count: count.value }),\n      type: '',\n    }\n  const current = node.value\n  if (!current) return { icon: undefined, title: messages.value.inspector.form, type: '' }\n  const type = labelOf(current.type, types.value.get(current.type), messages.value)\n  const title = nodeTitle(current, types.value, messages.value)\n  return {\n    icon: iconOf(current.type, types.value.get(current.type)),\n    title,\n    type: title === type ? '' : type,\n  }\n})\n\nconst holdsPages = computed(() => node.value?.type === 'tabs' || node.value?.type === 'steps')\nconst canWrap = computed(() => {\n  const map = formNodePlaces(state.document)\n  const parents = new Set(state.selection.map((id) => map.get(id)?.parent?.id ?? null))\n  return parents.size === 1 && !state.selection.some((id) => map.get(id)?.node.type === 'page')\n})\n</script>\n\n<template>\n  <div ref=\"root\" class=\"dou-form-builder__inspector\">\n    <div class=\"dou-form-builder__inspector-header\">\n      <component :is=\"heading.icon\" v-if=\"heading.icon\" class=\"dou-form-builder__inspector-icon\" />\n      <span class=\"dou-form-builder__inspector-title\">{{ heading.title }}</span>\n      <span v-if=\"heading.type\" class=\"dou-form-builder__inspector-type\">{{ heading.type }}</span>\n    </div>\n    <div class=\"dou-form-builder__inspector-body\">\n      <template v-if=\"count > 1\">\n        <FormRenderer :form=\"spanForm\" :model=\"spanModel\" :fields=\"extra\" />\n        <div v-if=\"!state.readonly\" class=\"dou-form-builder__inspector-actions\">\n          <DouButton size=\"sm\" variant=\"outline\" @click=\"state.duplicate()\">\n            <template #leading><CopyIcon /></template>\n            {{ messages.actions.duplicate }}\n          </DouButton>\n          <DouButton size=\"sm\" variant=\"outline\" :disabled=\"!canWrap\" @click=\"state.wrap()\">\n            <template #leading><SquareDashedIcon /></template>\n            {{ messages.actions.wrap }}\n          </DouButton>\n          <DouButton size=\"sm\" variant=\"outline\" tone=\"danger\" @click=\"state.remove()\">\n            <template #leading><TrashIcon /></template>\n            {{ messages.actions.remove }}\n          </DouButton>\n        </div>\n      </template>\n      <template v-else-if=\"node\">\n        <FormRenderer\n          :key=\"node.id\"\n          :form=\"nodeForm\"\n          :model=\"nodeModel\"\n          :fields=\"rendererFields\"\n          :rules=\"nameRules\"\n        />\n        <DouButton\n          v-if=\"holdsPages && !state.readonly\"\n          class=\"dou-form-builder__inspector-add\"\n          size=\"sm\"\n          variant=\"outline\"\n          @click=\"state.addPage(node.id)\"\n        >\n          <template #leading><PlusIcon /></template>\n          {{ messages.actions.addPage }}\n        </DouButton>\n        <template v-if=\"typeForm.nodes.length\">\n          <div class=\"dou-form-builder__inspector-section\">{{ messages.inspector.type }}</div>\n          <FormRenderer\n            :key=\"`${node.id}/props`\"\n            :form=\"typeForm\"\n            :model=\"typeModel\"\n            :fields=\"rendererFields\"\n          />\n        </template>\n        <template v-if=\"ruleForm.nodes.length\">\n          <div class=\"dou-form-builder__inspector-section\">{{ messages.inspector.rules }}</div>\n          <FormRenderer\n            :key=\"`${node.id}/rules`\"\n            :form=\"ruleForm\"\n            :model=\"ruleModel\"\n            :fields=\"rendererFields\"\n          />\n        </template>\n        <div class=\"dou-form-builder__inspector-section\">{{ messages.inspector.logic }}</div>\n        <FormRenderer\n          :key=\"`${node.id}/logic`\"\n          :form=\"logicForm\"\n          :model=\"logicModel\"\n          :fields=\"rendererFields\"\n        />\n      </template>\n      <FormRenderer v-else :form=\"formForm\" :model=\"formModel\" :fields=\"extra\" />\n      <template v-for=\"section in sections\" :key=\"section.key\">\n        <div class=\"dou-form-builder__inspector-section\">{{ section.title }}</div>\n        <component :is=\"section.component\" v-bind=\"section.props\" />\n      </template>\n    </div>\n  </div>\n</template>\n"],"mappings":""}