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

package/dist/builder/canvas.js

@@ -0,0 +1,695 @@
+import { getPath, isContainer, isList, isPage, setPath } from "../core/document.js";
+import { startValue } from "../core/values.js";
+import { formatMessage, useFormRendererMessages } from "../locale.js";
+import { rendererKey, rootScope, scopeKey } from "../renderer/context.js";
+import { FormNodeView, nodeKey, spanStyle } from "../renderer/node-view.js";
+import { formNodePlaces } from "./core/transaction.js";
+import { nodeTitle } from "./settings.js";
+import { canvasOrder, useBuilderState } from "./context.js";
+import { menuItems, nodeMenu } from "./menu.js";
+import { createDragController } from "./drag.js";
+import { DouButton, DouContextMenu, DouDropdown, DouForm, DouTooltip, holdPointer } from "dou-ui";
+import { computed, defineComponent, h, inject, onBeforeUnmount, onMounted, provide, reactive, shallowRef, watch } from "vue";
+import { ArrowDownIcon, ArrowUpIcon, CopyIcon, CornerLeftUpIcon, MoreHorizontalIcon, PlusIcon, SigmaIcon, TrashIcon, WorkflowIcon } from "@dou-ui/icons";
+// src/builder/canvas.ts
+/**
+* The key a node's value has on the canvas: made from its id, not its
+* name, so a name being typed, left empty or used twice does not bind
+* the field to another field's value.
+*/
+var previewKey = (node) => `n_${node.id.replace(/\W/g, "_")}`;
+/**
+* A field as the canvas draws it: always shown, enabled and editable in
+* look, with no options to load, and its value under `previewKey`. Kept
+* per node, so an untouched field is not drawn again.
+*/
+var designed = /* @__PURE__ */ new WeakMap();
+function designNode(node) {
+	let result = designed.get(node);
+	if (!result) {
+		const rest = { ...node };
+		for (const key of [
+			"visibleWhen",
+			"disabledWhen",
+			"formula",
+			"source",
+			"requiredWhen"
+		]) delete rest[key];
+		if ("name" in node) rest.name = previewKey(node);
+		result = node.requiredWhen ? {
+			...rest,
+			required: true
+		} : rest;
+		designed.set(node, result);
+	}
+	return result;
+}
+/**
+* The values the canvas shows: each field's default, and one item in
+* every list. Only fields whose node changed are written again.
+*/
+function useScratch(state) {
+	const model = reactive({});
+	const written = /* @__PURE__ */ new WeakMap();
+	function sync(nodes, prefix, types) {
+		for (const node of nodes) if (isList(node)) {
+			const path = prefix + previewKey(node);
+			const items = getPath(model, path);
+			if (!Array.isArray(items) || !items.length || typeof items[0] !== "object") setPath(model, path, [{}]);
+			sync(node.children, `${path}.0.`, types);
+		} else if (isContainer(node)) sync(node.children, prefix, types);
+		else if ("name" in node) {
+			const path = prefix + previewKey(node);
+			if (written.get(node) === path) continue;
+			const type = types.get(node.type);
+			if (!type || type.kind === "display") continue;
+			written.set(node, path);
+			setPath(model, path, startValue(type, node));
+		}
+	}
+	watch(() => [state.document, state.fields], ([document, types]) => sync(document.nodes, "", types), { immediate: true });
+	return model;
+}
+var noop = () => {};
+var canvasView = (state) => ({
+	name: "canvas",
+	order: () => canvasOrder(state)
+});
+/** How many fields the canvas draws right away when it opens. */
+var EAGER_FIELDS = 16;
+var lazyKey = Symbol("DouFormBuilderCanvasLazy");
+/** The canvas: the form as the renderer draws it, each node selectable. */
+var FormBuilderCanvas = defineComponent({
+	name: "DouFormBuilderCanvas",
+	setup() {
+		const state = useBuilderState();
+		const scratch = useScratch(state);
+		const rendererMessages = useFormRendererMessages();
+		const document = computed(() => state.document);
+		const layout = computed(() => document.value.layout ?? "vertical");
+		const columns = computed(() => Math.max(1, Math.round(document.value.columns ?? 12)));
+		provide(rendererKey, {
+			model: () => scratch,
+			fields: () => state.fields,
+			labelWidth: () => layout.value === "horizontal" ? document.value.labelWidth ?? 96 : void 0,
+			changed: noop,
+			functions: () => void 0,
+			validators: () => void 0,
+			readonly: () => false,
+			blockedFormulas: () => /* @__PURE__ */ new Set(),
+			settled: () => scratch,
+			controlsReadonly: () => false,
+			load: () => Promise.resolve([]),
+			sourceVersion: () => 0,
+			messages: () => rendererMessages.value,
+			validate: async () => ({
+				valid: true,
+				errors: {}
+			}),
+			scrollToField: noop,
+			addRevealer: () => noop,
+			trackError: () => noop,
+			errorPaths: () => [],
+			footer: () => null,
+			footerOwner: () => void 0,
+			resets: () => 0
+		});
+		provide(scopeKey, rootScope);
+		const view = canvasView(state);
+		const scroller = shallowRef(null);
+		let budget = EAGER_FIELDS;
+		const waiting = /* @__PURE__ */ new Map();
+		let observer;
+		const lazy = {
+			eager: () => budget-- > 0,
+			pressed: false,
+			observe(el, show) {
+				if (typeof IntersectionObserver === "undefined") return show();
+				observer ??= new IntersectionObserver((entries) => {
+					for (const entry of entries) {
+						if (!entry.isIntersecting) continue;
+						observer.unobserve(entry.target);
+						waiting.get(entry.target)?.();
+						waiting.delete(entry.target);
+					}
+				}, {
+					root: scroller.value,
+					rootMargin: "800px 0px"
+				});
+				waiting.set(el, show);
+				observer.observe(el);
+				return () => {
+					observer?.unobserve(el);
+					waiting.delete(el);
+				};
+			}
+		};
+		provide(lazyKey, lazy);
+		onMounted(() => budget = Infinity);
+		onBeforeUnmount(() => observer?.disconnect());
+		watch(() => state.selection[state.selection.length - 1], (id) => {
+			if (lazy.pressed) return void (lazy.pressed = false);
+			if (!id) return;
+			requestAnimationFrame(() => {
+				(globalThis.document?.getElementById(state.domId(id, "canvas")))?.scrollIntoView?.({
+					block: "nearest",
+					inline: "nearest"
+				});
+			});
+		});
+		const layer = {
+			indicator: null,
+			holder: null,
+			ghost: null
+		};
+		const dragger = createDragController(state, () => scroller.value, layer);
+		state.dragger.value = dragger;
+		onBeforeUnmount(() => {
+			dragger.stop();
+			if (state.dragger.value === dragger) state.dragger.value = null;
+		});
+		const active = computed(() => {
+			const last = state.selection[state.selection.length - 1];
+			return last ? state.domId(last, "canvas") : void 0;
+		});
+		const contextMenu = shallowRef(null);
+		const openMenu = (x, y) => {
+			if (nodeMenu(state, state.selection).length) contextMenu.value?.open(x, y);
+		};
+		state.openMenu.value = openMenu;
+		onBeforeUnmount(() => {
+			if (state.openMenu.value === openMenu) state.openMenu.value = null;
+		});
+		function onTreeKeydown(event) {
+			if (event.key === "ContextMenu" || event.shiftKey && event.key === "F10") {
+				event.preventDefault();
+				const id = state.selection[state.selection.length - 1];
+				const rect = id ? globalThis.document?.getElementById(state.domId(id, "canvas"))?.getBoundingClientRect() : void 0;
+				if (rect) openMenu(rect.left + 16, rect.top + 16);
+				return;
+			}
+			state.keydown(event, view);
+		}
+		return () => {
+			const doc = document.value;
+			return h("div", {
+				ref: scroller,
+				class: "dou-form-builder__canvas",
+				onClick: (event) => {
+					if (dragger.swallowClick()) return;
+					if (!event.target.closest(".dou-form-builder__node")) state.select(null);
+				}
+			}, [
+				h("div", {
+					class: "dou-form-builder__drop-layer",
+					"aria-hidden": true
+				}, [
+					h("div", {
+						ref: (el) => layer.holder = el,
+						class: "dou-form-builder__drop-holder",
+						hidden: true
+					}),
+					h("div", {
+						ref: (el) => layer.indicator = el,
+						class: "dou-form-builder__drop-line",
+						hidden: true
+					}),
+					h("div", {
+						ref: (el) => layer.ghost = el,
+						class: "dou-form-builder__drag-ghost",
+						hidden: true
+					})
+				]),
+				h(DouContextMenu, { ref: (instance) => contextMenu.value = instance }, {
+					default: () => h("span", { class: "dou-form-builder__menu-anchor" }),
+					menu: () => menuItems(nodeMenu(state, state.selection))
+				}),
+				h("div", { class: "dou-form-builder__paper" }, [h(DouForm, {
+					class: [
+						"dou-form-renderer",
+						`dou-form-renderer--${layout.value}`,
+						(doc.requiredMark ?? true) === true && "dou-form-renderer--marked"
+					],
+					model: scratch,
+					layout: layout.value,
+					labelAlign: doc.labelAlign,
+					size: doc.size,
+					requiredMark: doc.requiredMark ?? true,
+					scrollToError: false,
+					onSubmit: noop
+				}, () => h("div", {
+					ref: (el) => state.canvas.value = el,
+					class: ["dou-form-renderer__grid", "dou-form-builder__tree"],
+					"data-holder": "",
+					style: { "--dou-form-columns": columns.value },
+					role: "tree",
+					tabindex: 0,
+					"aria-label": state.messages.canvas.label,
+					"aria-multiselectable": true,
+					"aria-activedescendant": active.value,
+					onKeydown: onTreeKeydown
+				}, doc.nodes.length ? designNodes(doc.nodes, columns.value, 0, 1) : [emptyHint(state)]))])
+			]);
+		};
+	}
+});
+function emptyHint(state) {
+	const messages = state.messages.canvas;
+	return h("div", { class: "dou-form-builder__empty" }, state.readonly ? messages.readonlyEmpty : messages.empty);
+}
+function designNodes(nodes, columns, inset, level) {
+	return nodes.map((node, index) => h(DesignNode, {
+		key: nodeKey(node),
+		node,
+		columns,
+		inset,
+		level,
+		position: index + 1,
+		size: nodes.length
+	}));
+}
+/** A grid of child nodes, or a hint where there are none. */
+function childGrid(state, holder, nodes, columns, inset, level) {
+	return h("div", {
+		class: "dou-form-renderer__grid",
+		style: { "--dou-form-columns": columns },
+		role: "group",
+		"data-holder": holder
+	}, nodes.length ? designNodes(nodes, columns, inset, level) : [emptyHint(state)]);
+}
+var DesignNode = defineComponent({
+	name: "DouFormBuilderNode",
+	props: {
+		node: {
+			type: Object,
+			required: true
+		},
+		columns: {
+			type: Number,
+			required: true
+		},
+		inset: {
+			type: Number,
+			default: 0
+		},
+		level: {
+			type: Number,
+			required: true
+		},
+		position: {
+			type: Number,
+			required: true
+		},
+		size: {
+			type: Number,
+			required: true
+		}
+	},
+	setup(props) {
+		const state = useBuilderState();
+		const renderer = inject(rendererKey);
+		const lazy = inject(lazyKey);
+		const selected = computed(() => state.selected.value.has(props.node.id));
+		const primary = computed(() => state.focused.value?.id === props.node.id);
+		if (isList(props.node)) {
+			const outer = inject(scopeKey, rootScope);
+			const prefix = () => `${outer.prefix()}${previewKey(props.node)}.0.`;
+			provide(scopeKey, {
+				prefix,
+				item: () => null
+			});
+		}
+		const shown = shallowRef(isContainer(props.node) || lazy.eager());
+		const el = shallowRef(null);
+		let stop;
+		onMounted(() => {
+			if (!shown.value && el.value) stop = lazy.observe(el.value, () => shown.value = true);
+		});
+		onBeforeUnmount(() => stop?.());
+		const moreOpen = shallowRef(false);
+		function press(event, id = props.node.id) {
+			event.stopPropagation();
+			if (state.dragger.value?.swallowClick()) return;
+			lazy.pressed = true;
+			state.pick(id, event, canvasView(state));
+			state.canvas.value?.focus({ preventScroll: true });
+		}
+		return () => {
+			const node = props.node;
+			const title = nodeTitle(node, state.fields, state.messages);
+			const logic = logicOf(state, node);
+			const marks = state.extensions().marks.flatMap((marksOf) => marksOf(state, node));
+			let body;
+			if (isList(node)) body = listBody(state, node, props, renderer.messages());
+			else if (node.type === "tabs" || node.type === "steps") body = pagesBody(state, node, props, press);
+			else if (isContainer(node)) body = sectionBody(state, node, props);
+			else if (!shown.value) body = h("div", {
+				class: "dou-form-builder__placeholder",
+				"data-type": node.type
+			}, [h("span", { class: "dou-form-builder__placeholder-label" }), h("span", { class: "dou-form-builder__placeholder-box" })]);
+			else body = h("div", {
+				class: "dou-form-builder__content",
+				inert: true
+			}, h(FormNodeView, {
+				node: designNode(node),
+				columns: props.columns,
+				inset: props.inset
+			}));
+			return h("div", {
+				class: [
+					"dou-form-renderer__cell",
+					"dou-form-builder__node",
+					isContainer(node) && "is-container",
+					selected.value && "is-selected",
+					marks.length > 0 && "is-marked"
+				],
+				ref: el,
+				style: [spanStyle(node.span, props.columns), marks.length ? { "--dou-form-builder-mark": marks[0].color ?? "currentColor" } : null],
+				id: state.domId(node.id, "canvas"),
+				role: "treeitem",
+				"aria-level": props.level,
+				"aria-posinset": props.position,
+				"aria-setsize": props.size,
+				"aria-selected": selected.value,
+				"aria-expanded": isContainer(node) ? true : void 0,
+				"aria-label": title,
+				"aria-description": logic?.text,
+				"data-node": node.id,
+				onClick: press,
+				onContextmenu: (event) => {
+					event.stopPropagation();
+					event.preventDefault();
+					if (event.pointerType === "touch") return;
+					if (!selected.value) state.select(node.id);
+					state.openMenu.value?.(event.clientX, event.clientY);
+				},
+				onPointerdown: (event) => {
+					event.stopPropagation();
+					if (event.target.closest(".dou-form-builder__actions, .dou-form-builder__resize, .dou-form-builder__strip")) return;
+					state.dragger.value?.pressNode(event, node.id);
+				}
+			}, [
+				body,
+				logic && !primary.value ? logicMark(logic) : null,
+				marks.length ? markTags(marks) : null,
+				primary.value && !state.readonly ? actionBar(state, node, title, moreOpen) : null,
+				primary.value && !state.readonly && !isPage(node) ? resizeHandle(state, node, el) : null
+			]);
+		};
+	}
+});
+/** The labels of a node's marks, over its top edge, each in its color. */
+function markTags(marks) {
+	return h("div", {
+		class: "dou-form-builder__marks",
+		"aria-hidden": "true"
+	}, marks.map((mark) => h("span", {
+		key: mark.key,
+		class: "dou-form-builder__mark",
+		style: mark.color ? { "--dou-form-builder-mark": mark.color } : void 0
+	}, mark.label)));
+}
+var LOGIC_KEYS = [
+	"visibleWhen",
+	"disabledWhen",
+	"requiredWhen",
+	"formula"
+];
+/** The conditions and the formula a node has, as lines for a tooltip; none without them. */
+function logicOf(state, node) {
+	const settings = state.messages.settings;
+	const lines = [];
+	let conditions = false;
+	let formula = false;
+	for (const key of LOGIC_KEYS) {
+		const text = node[key];
+		if (!text?.trim()) continue;
+		if (key === "formula") formula = true;
+		else conditions = true;
+		lines.push(formatMessage(state.messages.condition.summary, {
+			label: settings[key] ?? key,
+			text
+		}));
+	}
+	return lines.length ? {
+		lines,
+		text: lines.join("; "),
+		conditions,
+		formula
+	} : void 0;
+}
+/** A mark in the node's corner when it has conditions or a formula, telling them on hover. */
+function logicMark(logic) {
+	return h(DouTooltip, { placement: "top-end" }, {
+		default: () => h("span", {
+			class: "dou-form-builder__logic-mark",
+			"aria-hidden": "true"
+		}, [logic.conditions ? h(WorkflowIcon) : null, logic.formula ? h(SigmaIcon) : null]),
+		content: () => h("span", { class: "dou-form-builder__logic-lines" }, logic.lines.map((line) => h("span", { key: line }, line)))
+	});
+}
+function sectionBody(state, node, props) {
+	const columns = node.columns ?? props.columns;
+	const bordered = !isPage(node) && node.bordered;
+	return h("div", { class: ["dou-form-renderer__section", bordered && "is-bordered"] }, [node.title || node.description ? h("div", {
+		class: "dou-form-renderer__section-header",
+		inert: true
+	}, [node.title && h("div", { class: "dou-form-renderer__section-title" }, node.title), node.description && h("div", { class: "dou-form-renderer__section-description" }, node.description)]) : null, childGrid(state, node.id, node.children, columns, props.inset + (bordered ? 1 : 0), props.level + 1)]);
+}
+function listBody(state, node, props, messages) {
+	const columns = node.columns ?? props.columns;
+	return h("div", { class: "dou-form-renderer__list" }, [
+		node.label || node.help ? h("div", {
+			class: "dou-form-renderer__section-header",
+			inert: true
+		}, [node.label && h("div", { class: ["dou-form-renderer__section-title", node.required && "is-required"] }, node.label), node.help && h("div", { class: "dou-form-renderer__section-description" }, node.help)]) : null,
+		h("div", { class: "dou-form-renderer__list-item dou-form-builder__item" }, [h("div", {
+			class: "dou-form-renderer__list-item-header",
+			inert: true
+		}, h("span", { class: "dou-form-renderer__list-item-title" }, formatMessage(messages.item, { index: 1 }))), childGrid(state, node.id, node.children, columns, props.inset + 1, props.level + 1)]),
+		h("div", {
+			class: "dou-form-builder__list-add",
+			inert: true
+		}, h(DouButton, {
+			variant: "outline",
+			tabindex: -1
+		}, {
+			leading: () => h(PlusIcon),
+			default: () => node.addText ?? messages.add
+		}))
+	]);
+}
+function pagesBody(state, node, props, press) {
+	const pages = node.children;
+	const shown = state.shownPage(node);
+	const steps = node.type === "steps";
+	const level = props.level + 1;
+	return h("div", { class: ["dou-form-builder__pages", steps && "is-steps"] }, [h("div", {
+		class: "dou-form-builder__strip",
+		role: "group"
+	}, [...pages.map((page, index) => h("div", {
+		key: page.id,
+		class: [
+			"dou-form-builder__page-tab",
+			page === shown && "is-shown",
+			state.selected.value.has(page.id) && "is-selected"
+		],
+		id: state.domId(page.id, "canvas"),
+		role: "treeitem",
+		"aria-level": level,
+		"aria-posinset": index + 1,
+		"aria-setsize": pages.length,
+		"aria-selected": state.selected.value.has(page.id),
+		"aria-expanded": page === shown,
+		"data-node": page.id,
+		onClick: (event) => press(event, page.id)
+	}, [steps ? h("span", { class: "dou-form-builder__step-number" }, String(index + 1)) : null, h("span", { class: "dou-form-builder__page-title" }, page.title || "\xA0")])), state.readonly ? null : h("button", {
+		type: "button",
+		class: "dou-form-builder__page-add",
+		tabindex: -1,
+		"aria-label": state.messages.actions.addPage,
+		title: state.messages.actions.addPage,
+		onClick: (event) => {
+			event.stopPropagation();
+			state.addPage(node.id);
+		}
+	}, h(PlusIcon))]), shown ? h("div", {
+		class: ["dou-form-builder__page", state.selected.value.has(shown.id) && "is-selected"],
+		onClick: (event) => press(event, shown.id)
+	}, [shown.description ? h("div", {
+		class: "dou-form-renderer__page-description",
+		inert: true
+	}, shown.description) : null, childGrid(state, shown.id, shown.children, shown.columns ?? props.columns, props.inset, level + 1)]) : null]);
+}
+/** One button of the selected node's action bar, its name and key in a tooltip. */
+var actionButton = (label, shortcut, icon, onClick, disabled = false) => h(DouTooltip, {
+	content: label,
+	shortcut
+}, { default: () => h("button", {
+	type: "button",
+	class: "dou-form-builder__action",
+	tabindex: -1,
+	disabled,
+	"aria-label": label,
+	onClick
+}, icon) });
+/** The buttons of the selected node; its type and name show in the inspector's header. */
+function actionBar(state, node, title, moreOpen) {
+	const messages = state.messages;
+	const place = formNodePlaces(state.document).get(node.id);
+	const siblings = place?.parent ? place.parent.children.length : state.document.nodes.length;
+	const after = () => state.canvas.value?.focus({ preventScroll: true });
+	const ids = state.selected.value.has(node.id) ? state.selection : [node.id];
+	const actions = [
+		place?.parent ? {
+			label: messages.actions.parent,
+			shortcut: "escape",
+			icon: CornerLeftUpIcon,
+			run: () => state.selectParent()
+		} : null,
+		{
+			label: messages.actions.up,
+			shortcut: "mod+arrowup",
+			icon: ArrowUpIcon,
+			run: () => state.moveBy(-1, [node.id]),
+			disabled: !place?.index
+		},
+		{
+			label: messages.actions.down,
+			shortcut: "mod+arrowdown",
+			icon: ArrowDownIcon,
+			run: () => state.moveBy(1, [node.id]),
+			disabled: !place || place.index >= siblings - 1
+		},
+		{
+			label: messages.actions.duplicate,
+			shortcut: "mod+d",
+			icon: CopyIcon,
+			run: () => state.duplicate([node.id])
+		},
+		{
+			label: messages.actions.remove,
+			shortcut: "delete",
+			icon: TrashIcon,
+			run: () => state.remove([node.id]),
+			danger: true
+		}
+	].filter((action) => action !== null);
+	let menu = null;
+	const more = h(DouDropdown, {
+		ref: (instance) => menu = instance,
+		placement: "bottom-end",
+		"onUpdate:open": (open) => {
+			moreOpen.value = open;
+			if (!open) requestAnimationFrame(after);
+		}
+	}, {
+		default: () => h("button", {
+			type: "button",
+			class: "dou-form-builder__action",
+			tabindex: -1,
+			"aria-label": messages.actions.more,
+			onClick: (event) => event.stopPropagation(),
+			onKeydown: (event) => {
+				const target = event.currentTarget;
+				if (event.key !== "Escape" || target.getAttribute("aria-expanded") !== "true") return;
+				event.stopPropagation();
+				menu?.close();
+			}
+		}, h(MoreHorizontalIcon)),
+		menu: () => menuItems(nodeMenu(state, ids))
+	});
+	const extra = state.extensions().menus.length > 0;
+	return h("div", {
+		class: "dou-form-builder__actions",
+		role: "toolbar",
+		"aria-label": title,
+		"data-extra": extra || void 0
+	}, [...actions.map((action) => actionButton(action.label, action.shortcut, h(action.icon), (event) => {
+		event.stopPropagation();
+		action.run();
+		after();
+	}, action.disabled)), h(DouTooltip, {
+		content: messages.actions.more,
+		disabled: moreOpen.value
+	}, { default: () => h("span", { class: "dou-form-builder__actions-more" }, more) })]);
+}
+/** The form widths the breakpoints of a responsive width start at, as in the renderer's styles. */
+var breakpointWidths = [
+	["xl", 960],
+	["lg", 800],
+	["md", 640],
+	["sm", 480]
+];
+/** The key of a responsive width that applies at the form's width now. */
+function activeSpanKey(span, cell) {
+	const width = cell.closest(".dou-form-renderer")?.getBoundingClientRect().width ?? 0;
+	for (const [key, min] of breakpointWidths) if (width >= min && span[key] !== void 0) return key;
+	return "base";
+}
+/** The handle on the selected node's end edge: drag it to change the width, snapping to columns. */
+function resizeHandle(state, node, cell) {
+	return h("div", {
+		class: "dou-form-builder__resize",
+		title: state.messages.drag.resize,
+		"aria-hidden": true,
+		onClick: (event) => event.stopPropagation(),
+		onPointerdown: (event) => startResize(event, state, node.id, cell.value)
+	});
+}
+function startResize(event, state, id, cell) {
+	if (event.button !== 0 || !cell?.parentElement) return;
+	event.preventDefault();
+	event.stopPropagation();
+	const handle = event.currentTarget;
+	const grid = cell.parentElement;
+	const style = getComputedStyle(grid);
+	const columns = Math.max(1, Math.round(Number(style.getPropertyValue("--dou-form-columns")) || 12));
+	const gap = Number.parseFloat(style.columnGap) || 0;
+	const unit = (grid.getBoundingClientRect().width + gap) / columns;
+	const left = cell.getBoundingClientRect().left;
+	const hold = holdPointer(event, handle);
+	hold.grab();
+	const span = (formNodePlaces(state.document).get(id)?.node)?.span;
+	const key = span !== void 0 && typeof span === "object" ? activeSpanKey(span, cell) : null;
+	const current = () => {
+		const now = formNodePlaces(state.document).get(id)?.node.span;
+		if (now === void 0) return columns;
+		if (typeof now === "number") return now;
+		return now[key ?? "base"] ?? now.base ?? columns;
+	};
+	let last = current();
+	handle.dataset.value = `${last} / ${columns}`;
+	cell.classList.add("is-resizing");
+	const onMove = (e) => {
+		if (e.pointerId !== event.pointerId) return;
+		const next = Math.min(columns, Math.max(1, Math.round((e.clientX - left + gap) / unit)));
+		if (next === last) return;
+		last = next;
+		handle.dataset.value = `${next} / ${columns}`;
+		const now = formNodePlaces(state.document).get(id)?.node.span;
+		const value = key && now !== void 0 && typeof now === "object" ? {
+			...now,
+			[key]: next
+		} : next === columns ? void 0 : next;
+		const tr = state.transaction().update(id, { span: value });
+		tr.setMeta("group", `resize:${id}`);
+		tr.setMeta("origin", "resize");
+		state.dispatch(tr);
+	};
+	const onUp = (e) => {
+		if (e.pointerId !== event.pointerId) return;
+		window.removeEventListener("pointermove", onMove);
+		window.removeEventListener("pointerup", onUp);
+		window.removeEventListener("pointercancel", onUp);
+		hold.release();
+		delete handle.dataset.value;
+		cell.classList.remove("is-resizing");
+	};
+	window.addEventListener("pointermove", onMove);
+	window.addEventListener("pointerup", onUp);
+	window.addEventListener("pointercancel", onUp);
+}
+export { FormBuilderCanvas };
+
+//# sourceMappingURL=canvas.js.map