@parallelworks/ui 0.37.0 → 0.38.0

package/dist/graph/InputsEditor.js

@@ -0,0 +1,1594 @@
+import { useWorkflowEditing } from "../components/Provider.js";
+import { BiSolidTrashAlt } from "../icons/bi/BiSolidTrashAlt.js";
+import { BsArrowsCollapse } from "../icons/bs/BsArrowsCollapse.js";
+import { BsDash } from "../icons/bs/BsDash.js";
+import { BsFiles } from "../icons/bs/BsFiles.js";
+import { BsThreeDots } from "../icons/bs/BsThreeDots.js";
+import { FaArrowDown } from "../icons/fa/FaArrowDown.js";
+import { FaArrowUp } from "../icons/fa/FaArrowUp.js";
+import { FaEdit } from "../icons/fa/FaEdit.js";
+import { FaPlus } from "../icons/fa/FaPlus.js";
+import { GoPlus } from "../icons/go/GoPlus.js";
+import { HiDuplicate } from "../icons/hi/HiDuplicate.js";
+import { MdDragHandle } from "../icons/md/MdDragHandle.js";
+import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
+import { TOOLTIP_ID } from "../components/Tooltip.js";
+import { IconButton } from "../components/IconButton.js";
+import { useRowMenu } from "../list/RowContextMenu.js";
+import { MarqueeBox, createStore, reclaimFocus, returningFocus, trackDrag, useFocusAfterDialog, usePressOutside, useStore } from "./editorPrimitives.js";
+import { useGraphEditorStrings, useInputsEditorStrings } from "./editorStrings.js";
+import { FormEditingContext } from "../form/formEditing.js";
+import { WizardPagesContext } from "../form/Wizard/wizardPages.js";
+import { asRecord } from "./records.js";
+import { openOnAddOf, text } from "./editorFields.js";
+import { dropLayoutEdits, isWizard, resizeLayout, withInputLayouts } from "./inputLayout.js";
+import { INPUT_TYPE_GROUPS, InputDialog, TypeBadge, allNames, newInputDefinition, withCreatedInputs } from "./InputDialog.js";
+import { overlaps, typing } from "./editorApi.js";
+import { ALT_KEY, MOD_KEY } from "./ShortcutsButton.js";
+import { AddChip, BarDivider, DragLabel, EditorBar } from "./editorChrome.js";
+import { addPageEdit, splitIntoPagesEdits, unsplitPagesEdits, wizardGroupDefinition } from "./inputPages.js";
+import { inputCell, linesIn, rowsOf, snapSplit } from "./inputRows.js";
+import cx from "classnames";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/InputsEditor.tsx
+var createFormStore = () => createStore({
+	drag: null,
+	edge: null,
+	resizing: false,
+	dialog: null,
+	hovered: null,
+	problems: [],
+	selection: [],
+	cursor: null,
+	cursorCopy: null,
+	open: [],
+	marquee: null
+});
+var ApiContext = createContext(null);
+var InputsContext = createContext(void 0);
+var EMPTY_STORE = createFormStore();
+function useUi(store, select) {
+	return useStore(store, select);
+}
+function containerAt(editing, inputs, parent) {
+	let map = asRecord(inputs);
+	for (const name of parent) {
+		const definition = asRecord(map[name]);
+		const key = editing.inputChildrenKey(definition["type"]);
+		map = key ? asRecord(definition[key]) : {};
+	}
+	return map;
+}
+function namesIn(container) {
+	return Object.keys(container).filter((name) => name !== "$meta");
+}
+var key = (path) => JSON.stringify(path);
+function samePath(a, b) {
+	return a.length === b.length && a.every((name, i) => b[i] === name);
+}
+function isInside(path, ancestor) {
+	return path.length >= ancestor.length && ancestor.every((name, i) => path[i] === name);
+}
+var below = (path, ancestor) => path.length > ancestor.length && isInside(path, ancestor);
+var pathOf = (rowKey) => JSON.parse(rowKey);
+function outermost(paths) {
+	return paths.filter((path) => !paths.some((other) => below(path, other)));
+}
+function contains(rect, box) {
+	return rect.left <= box.left && rect.right >= box.right && rect.top <= box.top && rect.bottom >= box.bottom;
+}
+var CHROME = "[data-input-chrome], [data-input-add], [role=\"menu\"], [role=\"dialog\"]";
+var CONTROLS = "input, textarea, select, button, a[href], label, [contenteditable=\"true\"], .monaco-editor, [role=\"button\"], [role=\"checkbox\"], [role=\"combobox\"], [role=\"listbox\"], [role=\"option\"], [role=\"radio\"], [role=\"slider\"], [role=\"switch\"], [role=\"tab\"]";
+var KEYED_WIDGETS = ".monaco-editor, [role=\"combobox\"], [role=\"listbox\"], [role=\"option\"], [role=\"radio\"], [role=\"slider\"], [role=\"switch\"], [role=\"tab\"]";
+function rowsIn(root) {
+	return [...root.querySelectorAll("[data-input-path]")].map((el) => ({
+		path: pathOf(el.dataset["inputPath"] ?? "[]"),
+		copy: el.dataset["inputInstance"] ?? "",
+		rect: el.getBoundingClientRect()
+	}));
+}
+/**
+* The inputs a box picks: the ones it touches in the innermost group holding it, each taken
+* whole, so a box works inside a group as well as across the form.
+*/
+function inputsInBox(root, box) {
+	const touched = rowsIn(root).filter(({ rect }) => overlaps(rect, box));
+	const holder = touched.filter(({ path, rect }) => contains(rect, box) && touched.some((other) => below(other.path, path))).reduce((deepest, { path }) => deepest && deepest.length >= path.length ? deepest : path, null);
+	return outermost((holder ? touched.filter(({ path }) => below(path, holder)) : touched).map(({ path }) => path));
+}
+function ChromeButton({ label, onClick, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": label,
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-content": label,
+		className: "flex h-5 w-5 cursor-pointer items-center justify-center rounded hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app)",
+		onClick: (e) => {
+			e.stopPropagation();
+			onClick(e);
+		},
+		children
+	});
+}
+/** An input's row: its field, with a toolbar of its type, drag grip and actions on hover. */
+function InputRow({ path, hidden = false, instance, children }) {
+	const api = useContext(ApiContext);
+	const inputs = useContext(InputsContext);
+	const editing = useWorkflowEditing();
+	const t = useInputsEditorStrings();
+	const g = useGraphEditorStrings();
+	const rowKey = key(path);
+	const copy = instance ?? rowKey;
+	const active = useUi(api?.store ?? EMPTY_STORE, (state) => state.open.includes(copy) && !state.drag && !state.resizing);
+	const selected = useUi(api?.store ?? EMPTY_STORE, (state) => state.selection.includes(rowKey));
+	const problems = useUi(api?.store ?? EMPTY_STORE, (state) => state.problems.filter((problem) => problem.input && key(problem.input) === rowKey).map((problem) => `${problem.line}\n${problem.message}`).join("\n\n"));
+	if (!api) return children;
+	const found = problems ? problems.split("\n\n") : [];
+	const definition = api.definition(path);
+	const name = path.at(-1) ?? "";
+	const parent = path.slice(0, -1);
+	const index = namesIn(containerAt(editing, inputs, parent)).indexOf(name);
+	const childKey = hidden ? editing.inputChildrenKey(definition["type"]) : void 0;
+	const outline = childKey && childKey !== "template" ? namesIn(asRecord(definition[childKey])) : null;
+	const flagged = hidden && definition["hidden"] !== void 0 && definition["hidden"] !== false;
+	const actions = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": t.inputActions,
+			"data-drag-handle": true,
+			className: "flex h-5 w-5 cursor-grab items-center justify-center rounded hover:bg-(--theme-muted-panel-bg)",
+			onPointerDown: (e) => api.startDrag(e, path, name),
+			onClick: (e) => {
+				const r = e.currentTarget.getBoundingClientRect();
+				api.openMenu(r.left, r.bottom, path);
+			},
+			children: /* @__PURE__ */ jsx(MdDragHandle, { className: "h-3.5 w-3.5" })
+		}),
+		/* @__PURE__ */ jsx("span", {
+			"data-tooltip-id": TOOLTIP_ID,
+			"data-tooltip-content": name,
+			children: /* @__PURE__ */ jsx(TypeBadge, { type: text(definition["type"]) })
+		}),
+		(definition["type"] === "group" || definition["type"] === "list") && /* @__PURE__ */ jsx(PageActions, {
+			api,
+			parent: path,
+			list: definition[editing.inputChildrenKey(definition["type"]) ?? ""]
+		}),
+		/* @__PURE__ */ jsx(ChromeButton, {
+			label: t.editInput,
+			onClick: () => api.edit(path),
+			children: /* @__PURE__ */ jsx(FaEdit, { className: "h-3 w-3" })
+		}),
+		/* @__PURE__ */ jsx(ChromeButton, {
+			label: t.addInputBelow,
+			onClick: (e) => {
+				const r = e.currentTarget.getBoundingClientRect();
+				api.openTypeMenu(r.right, r.bottom, parent, index + 1);
+			},
+			children: /* @__PURE__ */ jsx(FaPlus, { className: "h-3 w-3" })
+		}),
+		/* @__PURE__ */ jsx(ChromeButton, {
+			label: t.deleteInput,
+			onClick: () => api.remove(path),
+			children: /* @__PURE__ */ jsx(BsDash, { className: "h-3 w-3" })
+		}),
+		/* @__PURE__ */ jsx(ChromeButton, {
+			label: t.inputActions,
+			onClick: (e) => {
+				const r = e.currentTarget.getBoundingClientRect();
+				api.openMenu(r.right, r.bottom, path);
+			},
+			children: /* @__PURE__ */ jsx(BsThreeDots, { className: "h-3 w-3" })
+		})
+	] });
+	return /* @__PURE__ */ jsxs("div", {
+		role: "none",
+		"data-input-path": rowKey,
+		"data-input-instance": copy,
+		"data-input-index": index,
+		...hidden ? { "data-input-hidden": "" } : {},
+		...selected ? { "data-selected": "" } : {},
+		className: cx("relative w-full", hidden && "mb-[15px]", found.length > 0 && "rounded-md ring-2 ring-(--theme-error)", selected && "isolate before:pointer-events-none before:absolute before:-inset-x-2 before:-inset-y-1 before:-z-10 before:rounded-lg before:bg-(--theme-element)/15 before:ring-2 before:ring-(--theme-element) before:content-['']"),
+		onPointerOver: (e) => {
+			e.stopPropagation();
+			api.hover(copy);
+		},
+		onContextMenu: (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			api.openMenu(e.clientX, e.clientY, path);
+		},
+		children: [
+			hidden ? /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1.5 text-[11px] leading-4 theme-muted-text",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "font-mono",
+						children: name
+					}),
+					flagged && /* @__PURE__ */ jsx("span", {
+						className: "italic",
+						children: t.hidden
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"data-input-chrome": true,
+						className: "ml-auto flex items-center gap-0.5",
+						children: actions
+					})
+				]
+			}) : /* @__PURE__ */ jsx("div", {
+				className: cx("flex justify-end overflow-hidden transition-[height] duration-150 focus-within:h-7", active ? "h-7" : "h-0"),
+				children: /* @__PURE__ */ jsx("div", {
+					"data-input-chrome": true,
+					className: "flex h-6 items-center gap-0.5 rounded-md border theme-border bg-(--theme-panel-bg) px-1 py-0.5 text-[11px] leading-4 theme-muted-text shadow-sm",
+					children: actions
+				})
+			}),
+			found.length > 0 && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-input-chrome": true,
+				"aria-label": g.problemCount(found.length),
+				"data-tooltip-id": "global-tooltip",
+				"data-tooltip-content": found.map((problem) => problem.slice(problem.indexOf("\n") + 1)).join("\n"),
+				className: "absolute -left-2 -top-2 z-10 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-(--theme-panel-bg) text-(--theme-error) shadow-sm",
+				onClick: () => api.reveal(Number.parseInt(found[0] ?? "0", 10)),
+				children: /* @__PURE__ */ jsx(TbAlertTriangle, { className: "h-3.5 w-3.5" })
+			}),
+			children,
+			outline && /* @__PURE__ */ jsxs("div", {
+				className: "ml-2 border-l theme-border pl-3",
+				children: [outline.map((child) => /* @__PURE__ */ jsx(InputRow, {
+					path: [...path, child],
+					hidden: true
+				}, child)), /* @__PURE__ */ jsx(AddInput, { parent: path })]
+			})
+		]
+	});
+}
+/**
+* A list's page commands: split it into pages, or, once it is a wizard, add a page or put its
+* inputs back. `bar` is the editor's own bar, for the form; otherwise a group's or list's row.
+*/
+function PageActions({ api, parent, list, bar = false }) {
+	const t = useInputsEditorStrings();
+	if (!isWizard(list)) return bar ? /* @__PURE__ */ jsx(IconButton, {
+		icon: /* @__PURE__ */ jsx(BsFiles, { className: "h-4 w-4" }),
+		label: t.splitIntoPages,
+		size: "sm",
+		variant: "ghost",
+		onClick: () => api.splitIntoPages(parent)
+	}) : /* @__PURE__ */ jsx(ChromeButton, {
+		label: t.splitIntoPages,
+		onClick: () => api.splitIntoPages(parent),
+		children: /* @__PURE__ */ jsx(BsFiles, { className: "h-3 w-3" })
+	});
+	return bar ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AddChip, {
+		icon: /* @__PURE__ */ jsx(FaPlus, { className: "h-3 w-3" }),
+		label: t.page,
+		hint: t.addPage,
+		onClick: () => api.addPage(parent)
+	}), /* @__PURE__ */ jsx(IconButton, {
+		icon: /* @__PURE__ */ jsx(BsArrowsCollapse, { className: "h-4 w-4" }),
+		label: t.unsplitPages,
+		size: "sm",
+		variant: "ghost",
+		onClick: () => api.unsplitPages(parent)
+	})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ChromeButton, {
+		label: t.addPage,
+		onClick: () => api.addPage(parent),
+		children: /* @__PURE__ */ jsx(GoPlus, { className: "h-3 w-3" })
+	}), /* @__PURE__ */ jsx(ChromeButton, {
+		label: t.unsplitPages,
+		onClick: () => api.unsplitPages(parent),
+		children: /* @__PURE__ */ jsx(BsArrowsCollapse, { className: "h-3 w-3" })
+	})] });
+}
+function pagesIn(list) {
+	const record = asRecord(list);
+	return namesIn(record).filter((name) => asRecord(record[name])["type"] === "step");
+}
+/** The bar's page of the form's wizard, turned by typing its number or with the arrow keys. */
+function PageNumber({ count, page, onChange }) {
+	const t = useInputsEditorStrings();
+	const shown = Math.min(Math.max(page, 0), Math.max(count - 1, 0));
+	return /* @__PURE__ */ jsxs("label", {
+		className: "flex h-7 items-center gap-1 px-1 text-xs theme-muted-text",
+		children: [
+			t.page,
+			/* @__PURE__ */ jsx("input", {
+				type: "number",
+				min: 1,
+				max: count,
+				value: shown + 1,
+				"aria-label": t.pageNumber,
+				className: "h-6 w-10 rounded border theme-border bg-(--theme-input-bg) px-1 text-center text-(--theme-input) text-xs",
+				onChange: (e) => {
+					const typed = Number(e.target.value);
+					if (Number.isInteger(typed) && typed >= 1 && typed <= count) onChange(typed - 1);
+				}
+			}),
+			/* @__PURE__ */ jsxs("span", { children: ["/ ", count] })
+		]
+	});
+}
+var ADD_INDENT = [
+	"",
+	"ml-4",
+	"ml-8",
+	"ml-12"
+];
+/** The add button that ends each list of inputs, naming the list it adds to. */
+function AddInput({ parent }) {
+	const api = useContext(ApiContext);
+	const t = useInputsEditorStrings();
+	if (!api) return null;
+	const holder = parent.length > 0 ? api.definition(parent) : {};
+	const name = text(holder["label"]) || text(holder["title"]) || (parent.at(-1) ?? "");
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"data-input-add": key(parent),
+		className: cx("mb-[15px] flex cursor-pointer items-center gap-1.5 text-[13px] theme-muted-text hover:text-(--theme-link)", ADD_INDENT[Math.min(parent.length, ADD_INDENT.length - 1)]),
+		onClick: (e) => {
+			const r = e.currentTarget.getBoundingClientRect();
+			api.openTypeMenu(r.left, r.bottom, parent, Number.MAX_SAFE_INTEGER);
+		},
+		children: [/* @__PURE__ */ jsx(FaPlus, { className: "h-3 w-3" }), parent.length === 0 ? t.addInputHere : t.addFieldTo(name)]
+	});
+}
+var EDITING = {
+	parent: [],
+	Row: InputRow,
+	Add: AddInput
+};
+function typeSearch(labels) {
+	return {
+		placeholder: labels.searchTypes,
+		empty: labels.noMatchingTypes
+	};
+}
+function typeMenu(labels, pick) {
+	const types = labels.types;
+	const item = (type) => ({
+		kind: "action",
+		label: types[type] ?? type,
+		keywords: type,
+		onSelect: () => pick(type)
+	});
+	return [...INPUT_TYPE_GROUPS.map(([group, list]) => ({
+		kind: "submenu",
+		label: labels.typeGroups[group],
+		items: list.map(item)
+	}))];
+}
+var extent = (rows) => ({
+	left: Math.min(...rows.map((row) => row.rect.left)),
+	right: Math.max(...rows.map((row) => row.rect.right))
+});
+/** Gaps between lines: above each line, after a list's shown inputs, and at each list's end. */
+function lineGaps(root, lines) {
+	const gaps = [];
+	const lists = /* @__PURE__ */ new Map();
+	for (const line of lines) {
+		const rows = rowsOf(line);
+		if (rows.length === 0) continue;
+		gaps.push({
+			...aboveGap(line),
+			...rows.every((row) => row.trailing) ? { trailing: true } : {}
+		});
+		const list = lists.get(key(line.parent)) ?? {
+			parent: line.parent,
+			rows: []
+		};
+		list.rows.push(...rows);
+		lists.set(key(line.parent), list);
+	}
+	for (const { parent, rows } of lists.values()) {
+		const shown = rows.filter((row) => !row.trailing);
+		if (shown.length > 0 && shown.length < rows.length) gaps.push({
+			parent,
+			index: Math.max(...shown.map((row) => row.index)) + 1,
+			...extent(shown),
+			y: Math.max(...shown.map((row) => row.rect.bottom))
+		});
+	}
+	for (const { parent, rows } of lists.values()) gaps.push({
+		parent,
+		index: Math.max(...rows.map((row) => row.index)) + 1,
+		...extent(rows),
+		y: Math.max(...rows.map((row) => row.rect.bottom))
+	});
+	for (const el of root.querySelectorAll("[data-input-add]")) {
+		const parent = JSON.parse(el.dataset["inputAdd"] ?? "[]");
+		if (!lists.has(key(parent))) {
+			const rect = el.getBoundingClientRect();
+			gaps.push({
+				parent,
+				index: 0,
+				left: rect.left,
+				right: rect.right,
+				y: rect.top
+			});
+		}
+	}
+	return gaps;
+}
+var into = (parent, mover) => mover.paths?.some((path) => isInside(parent, path)) ?? false;
+function nearestLineGap(gaps, client, mover) {
+	let best = null;
+	let bestDistance = Number.POSITIVE_INFINITY;
+	for (const gap of gaps) {
+		if (into(gap.parent, mover) || gap.trailing && mover.shown) continue;
+		if (client.x < gap.left - 24 || client.x > gap.right + 24) continue;
+		const distance = Math.abs(client.y - gap.y);
+		if (distance < bestDistance || distance === bestDistance && best !== null && gap.parent.length > best.parent.length) {
+			best = gap;
+			bestDistance = distance;
+		}
+	}
+	return best;
+}
+/** A column of its own beside `column`, marked by a bar down that side. */
+function besideGap(line, column, side) {
+	const { rows } = column;
+	const own = extent(rows);
+	const i = line.columns.indexOf(column);
+	const before = line.columns[i - 1];
+	const after = line.columns[i + 1];
+	let x = side === "left" ? own.left - 4 : own.right + 4;
+	if (side === "left" && before) x = (extent(before.rows).right + own.left) / 2;
+	else if (side === "right" && after) x = (own.right + extent(after.rows).left) / 2;
+	const top = Math.min(...rows.map((row) => row.rect.top));
+	return {
+		parent: line.parent,
+		index: side === "left" ? Math.min(...rows.map((row) => row.index)) : Math.max(...rows.map((row) => row.index)) + 1,
+		...own,
+		y: top,
+		beside: {
+			path: rows[0].path,
+			side,
+			x,
+			top,
+			bottom: Math.max(...rows.map((row) => row.rect.bottom))
+		}
+	};
+}
+/** Above or below `row` in its column, marked by a bar across the column. */
+function stackGap(line, column, row, side) {
+	return {
+		parent: line.parent,
+		index: side === "above" ? row.index : row.index + 1,
+		...extent(column.rows),
+		y: side === "above" ? row.rect.top : row.rect.bottom,
+		stack: {
+			path: row.path,
+			side
+		}
+	};
+}
+function aboveGap(line) {
+	const rows = rowsOf(line);
+	return {
+		parent: line.parent,
+		index: Math.min(...rows.map((row) => row.index)),
+		...extent(rows),
+		y: Math.min(...rows.map((row) => row.rect.top))
+	};
+}
+function belowGap(line) {
+	const rows = rowsOf(line);
+	return {
+		parent: line.parent,
+		index: Math.max(...rows.map((row) => row.index)) + 1,
+		...extent(rows),
+		y: Math.max(...rows.map((row) => row.rect.bottom))
+	};
+}
+/** A column narrower than its list stacks a drop on its inputs' halves instead of starting a line. */
+function stacks(line, column) {
+	const width = column.cell?.style.getPropertyValue(WIDTH_VAR) ?? "";
+	return line.columns.length > 1 || column.rows.length > 1 || width !== "" && width !== "100%";
+}
+/** Where a group's own inputs start, below its title; null for an input holding none drawn. */
+function bodyTop(root, lines, row) {
+	const tops = lines.filter((line) => samePath(line.parent, row.path)).flatMap((line) => rowsOf(line).map((child) => child.rect));
+	for (const el of root.querySelectorAll("[data-input-add]")) if (el.dataset["inputAdd"] === key(row.path)) tops.push(el.getBoundingClientRect());
+	const drawn = tops.filter((rect) => rect.height > 0).map((rect) => rect.top);
+	return drawn.length > 0 ? Math.min(...drawn) : null;
+}
+/**
+* Where a drop at `client` lands: on an input's left or right quarter, in a column beside its
+* own; over its middle, above or below it by which half, in its column or as a line of its own.
+*/
+function dropGap(root, client, mover) {
+	const lines = linesIn(root);
+	const gaps = lineGaps(root, lines);
+	const moving = (path) => mover.paths?.some((other) => isInside(path, other)) ?? false;
+	const under = (rect) => client.x >= rect.left && client.x <= rect.right && client.y >= rect.top && client.y <= rect.bottom;
+	let hit = null;
+	for (const line of lines) for (const column of line.columns) for (const row of column.rows) if (!moving(row.path) && under(row.rect) && (!hit || row.path.length > hit.row.path.length)) hit = {
+		line,
+		column,
+		row
+	};
+	if (hit) {
+		const { line, column, row } = hit;
+		const body = bodyTop(root, lines, row);
+		if (body !== null && client.y >= body) return nearestLineGap(gaps.filter((gap) => samePath(gap.parent, row.path)), client, mover);
+		if (row.trailing && mover.shown) return nearestLineGap(gaps.filter((gap) => samePath(gap.parent, line.parent)), client, mover);
+		const { rect } = row;
+		const quarter = rect.width / 4;
+		const shares = !mover.hidden && !row.hidden;
+		if (shares && client.x < rect.left + quarter) return besideGap(line, column, "left");
+		if (shares && client.x > rect.right - quarter) return besideGap(line, column, "right");
+		const above = client.y < (rect.top + (body ?? rect.bottom)) / 2;
+		if (shares && stacks(line, column)) return stackGap(line, column, row, above ? "above" : "below");
+		return above ? aboveGap(line) : belowGap(line);
+	}
+	if (!mover.hidden) for (const line of lines) {
+		if (into(line.parent, mover)) continue;
+		for (let i = 1; i < line.columns.length; i++) {
+			const before = line.columns[i - 1];
+			const after = line.columns[i];
+			if (!before || !after) continue;
+			const left = extent(before.rows).right;
+			const right = extent(after.rows).left;
+			const rows = [...before.rows, ...after.rows];
+			if (client.x <= left || client.x >= right || client.y < Math.min(...rows.map((row) => row.rect.top)) || client.y > Math.max(...rows.map((row) => row.rect.bottom))) continue;
+			if (before.rows.some((row) => !moving(row.path))) return besideGap(line, before, "right");
+			if (after.rows.some((row) => !moving(row.path))) return besideGap(line, after, "left");
+		}
+	}
+	return nearestLineGap(gaps, client, mover);
+}
+var WIDTH_VAR = "--input-width";
+/** The cells two neighbouring columns sit in, by their heads, and the row of cells holding them. */
+function cellsAt(root, edge) {
+	const cellOf = (path, copy) => {
+		const el = [...root.querySelectorAll("[data-input-path]")].find((el) => el.dataset["inputPath"] === key(path) && el.dataset["inputInstance"] === copy);
+		return el ? inputCell(el) : null;
+	};
+	const left = cellOf(edge.left, edge.copies[0]);
+	const right = cellOf(edge.right, edge.copies[1]);
+	const flow = left?.parentElement;
+	return left && right && flow && right.parentElement === flow ? {
+		left,
+		right,
+		flow
+	} : null;
+}
+function edgeOf(root, before, after) {
+	const [leftHead] = before.rows;
+	const [rightHead] = after.rows;
+	const copies = [leftHead?.instance ?? "", rightHead?.instance ?? ""];
+	const cells = leftHead && rightHead && cellsAt(root, {
+		left: leftHead.path,
+		right: rightHead.path,
+		copies
+	});
+	const width = cells ? cells.flow.getBoundingClientRect().width : 0;
+	if (!leftHead || !rightHead || !cells || width <= 0) return null;
+	const share = (cell) => Math.floor(cell.getBoundingClientRect().width / width * 100);
+	const rows = [...before.rows, ...after.rows];
+	return {
+		left: leftHead.path,
+		right: rightHead.path,
+		copies,
+		x: cells.left.getBoundingClientRect().right,
+		top: Math.min(...rows.map((row) => row.rect.top)),
+		bottom: Math.max(...rows.map((row) => row.rect.bottom)),
+		split: [share(cells.left), share(cells.right)]
+	};
+}
+/** The edge between columns on a line that the pointer is over, the innermost list's first. */
+function edgeAt(root, x, y) {
+	let found = null;
+	for (const { parent, columns } of linesIn(root)) for (let i = 1; i < columns.length; i++) {
+		const before = columns[i - 1];
+		const after = columns[i];
+		if (!before || !after) continue;
+		const rows = [...before.rows, ...after.rows];
+		if (x < extent(before.rows).right - 2 || x > extent(after.rows).left + 2 || y < Math.min(...rows.map((row) => row.rect.top)) || y > Math.max(...rows.map((row) => row.rect.bottom))) continue;
+		if (!found || parent.length > found.depth) found = {
+			depth: parent.length,
+			before,
+			after
+		};
+	}
+	return found ? edgeOf(root, found.before, found.after) : null;
+}
+/** The edge between the same two columns, by their heads, if they still share a line. */
+function edgeBetween(root, left, right) {
+	for (const { columns } of linesIn(root)) {
+		const i = columns.findIndex((column) => samePath(column.rows[0]?.path ?? [], left));
+		const before = columns[i];
+		const after = columns[i + 1];
+		if (before && after && samePath(after.rows[0]?.path ?? [], right)) return edgeOf(root, before, after);
+	}
+	return null;
+}
+var sameEdge = (a, b) => a === b || a !== null && b !== null && samePath(a.left, b.left) && samePath(a.right, b.right) && Math.round(a.x) === Math.round(b.x);
+var DELETE_KEYS = /* @__PURE__ */ new Set(["Delete", "Backspace"]);
+var ARROWS = {
+	ArrowUp: "up",
+	ArrowDown: "down",
+	ArrowLeft: "left",
+	ArrowRight: "right"
+};
+/** The input an arrow key reaches from `from` as the form draws them: the nearest one starting
+* above or below it, or beside it, those in line with it first. */
+function neighbour(rows, from, direction) {
+	const r = from.rect;
+	const middle = (rect) => ({
+		x: (rect.left + rect.right) / 2,
+		y: (rect.top + rect.bottom) / 2
+	});
+	const distance = (rect) => Math.hypot(middle(rect).x - middle(r).x, middle(rect).y - middle(r).y);
+	const others = rows.filter((row) => row !== from);
+	const vertical = direction === "up" || direction === "down";
+	const ahead = others.filter(({ rect }) => direction === "down" ? rect.top > r.top + 1 : direction === "up" ? rect.top < r.top - 1 : direction === "right" ? rect.left >= r.right - 1 : rect.right <= r.left + 1);
+	const inLine = ahead.filter(({ rect }) => vertical ? Math.min(rect.right, r.right) > Math.max(rect.left, r.left) : Math.min(rect.bottom, r.bottom) > Math.max(rect.top, r.top));
+	const gap = ({ rect }) => direction === "down" ? rect.top - r.top : direction === "up" ? r.top - rect.top : direction === "right" ? rect.left - r.right : r.left - rect.right;
+	return (inLine.length > 0 ? inLine : ahead).reduce((best, row) => !best || gap(row) < gap(best) || gap(row) === gap(best) && distance(row.rect) < distance(best.rect) ? row : best, void 0);
+}
+function undoKeys(e, editor) {
+	const pressed = e.key.toLowerCase();
+	if (pressed === "z" && !e.shiftKey) {
+		e.preventDefault();
+		editor.onUndo();
+	} else if (pressed === "z" && e.shiftKey || pressed === "y") {
+		e.preventDefault();
+		editor.onRedo();
+	}
+}
+function formShortcuts(g) {
+	const key = g.shortcutKeys;
+	const does = g.shortcutDoes;
+	return [{
+		title: g.shortcutGroups.select,
+		shortcuts: [
+			{
+				combos: [[key.shift, key.click]],
+				does: does.selectInput
+			},
+			{
+				combos: [[key.shift, key.drag]],
+				does: does.boxInputs
+			},
+			{
+				combos: [[
+					"←",
+					"↑",
+					"↓",
+					"→"
+				]],
+				does: does.pickInput
+			},
+			{
+				combos: [[key.shift, "↑"], [key.shift, "↓"]],
+				does: does.extendInputs
+			},
+			{
+				combos: [["Esc"]],
+				does: does.escape
+			}
+		]
+	}, {
+		title: g.shortcutGroups.change,
+		shortcuts: [
+			{
+				combos: [[key.dragHandle]],
+				does: does.moveInput
+			},
+			{
+				combos: [[key.dragEdge]],
+				does: does.resizeInputs
+			},
+			{
+				combos: [[ALT_KEY, "↑"], [ALT_KEY, "↓"]],
+				does: does.reorderInputs
+			},
+			{
+				combos: [[key.dragButton]],
+				does: does.addInput
+			},
+			{
+				combos: [["E"]],
+				does: does.editInput
+			},
+			{
+				combos: [[key.delete]],
+				does: does.removeInputs
+			},
+			{
+				combos: [[key.rightClick]],
+				does: does.inputMenu
+			},
+			{
+				combos: [[MOD_KEY, "Z"], [
+					key.shift,
+					MOD_KEY,
+					"Z"
+				]],
+				does: does.undo
+			}
+		]
+	}];
+}
+/**
+* Turns the input form rendered in `children` into an editor of the
+* workflow's `on.execute.inputs`, with edits sent through `editor`.
+*/
+function InputsFormEditor({ editor, inputs, children }) {
+	const t = useInputsEditorStrings();
+	const g = useGraphEditorStrings();
+	const editing = useWorkflowEditing();
+	const [store] = useState(createFormStore);
+	const [pages, setPages] = useState({});
+	const [counts, setCounts] = useState({});
+	const setPage = useCallback((wizard, index) => setPages((now) => ({
+		...now,
+		[wizard]: index
+	})), []);
+	const setCount = useCallback((wizard, count) => setCounts((now) => now[wizard] === count ? now : {
+		...now,
+		[wizard]: count
+	}), []);
+	const wizardPages = useMemo(() => ({
+		page: (wizard) => Math.min(pages[wizard] ?? 0, Math.max((counts[wizard] ?? 1) - 1, 0)),
+		setPage,
+		count: (wizard) => counts[wizard],
+		setCount
+	}), [
+		pages,
+		counts,
+		setPage,
+		setCount
+	]);
+	const containerRef = useRef(null);
+	const latest = useRef({
+		editor,
+		inputs
+	});
+	latest.current = {
+		editor,
+		inputs
+	};
+	const rowMenu = useRowMenu();
+	const openMenu = useMemo(() => returningFocus(rowMenu.openMenu, () => containerRef.current), [rowMenu.openMenu]);
+	const contextMenu = rowMenu.contextMenu;
+	useFocusAfterDialog(store, () => containerRef.current);
+	usePressOutside(() => containerRef.current, () => {
+		if (store.get().selection.length > 0) store.set({ selection: [] });
+	});
+	const api = useMemo(() => {
+		const send = (edit) => {
+			const result = latest.current.editor.onEdit(withInputLayouts(editing, latest.current.inputs, edit));
+			reclaimFocus(containerRef.current);
+			return result;
+		};
+		const rowElement = (rowKey) => [...containerRef.current?.querySelectorAll("[data-input-path]") ?? []].find((el) => el.dataset["inputPath"] === rowKey);
+		const definition = (path) => path.length === 0 ? asRecord(latest.current.inputs) : asRecord(containerAt(editing, latest.current.inputs, path.slice(0, -1))[path.at(-1) ?? ""]);
+		const indexOf = (path) => namesIn(containerAt(editing, latest.current.inputs, path.slice(0, -1))).indexOf(path.at(-1) ?? "");
+		const create = (parent, index, type, placement) => {
+			const { editor, inputs } = latest.current;
+			const wizardAbove = parent.slice(0, -1);
+			if (type === "step" && parent.length > 0 && definition(parent)["type"] === "step" && isWizard(containerAt(editing, inputs, wizardAbove))) {
+				addPage(wizardAbove);
+				return;
+			}
+			const container = containerAt(editing, inputs, parent);
+			if (type !== "step" && isWizard(container)) {
+				const pages = namesIn(container);
+				const page = pages[Math.max(Math.min(index, pages.length) - 1, 0)];
+				if (page !== void 0) {
+					const into = [...parent, page];
+					create(into, namesIn(containerAt(editing, inputs, into)).length, type, placement);
+					return;
+				}
+			}
+			const ownWizard = type === "step" && !isWizard(container) ? wizardGroupDefinition(t.stepsGroup, t.stepTitle(1)) : void 0;
+			if (editor.openOnAdd === false) {
+				const name = nextInputName(editing, inputs);
+				const add = {
+					type: "addInput",
+					parent,
+					index: Math.min(index, namesIn(container).length),
+					name,
+					definition: ownWizard ?? newInputDefinition(type)
+				};
+				send(placeNewInput(editing, inputs, add, parent, name, placement));
+				return;
+			}
+			store.set({ dialog: {
+				kind: "create",
+				parent,
+				index,
+				type: ownWizard ? "group" : type,
+				...ownWizard ? { definition: ownWizard } : {},
+				...placement ? { placement } : {}
+			} });
+		};
+		const listAt = (parent) => containerAt(editing, latest.current.inputs, parent);
+		const childKeyAt = (parent) => parent.length > 0 ? editing.inputChildrenKey(definition(parent)["type"]) : void 0;
+		const sendAll = ([only, ...more]) => {
+			if (only) send(more.length > 0 ? {
+				type: "batch",
+				edits: [only, ...more]
+			} : only);
+		};
+		const splitIntoPages = (parent) => sendAll(splitIntoPagesEdits(editing, listAt(parent), parent, childKeyAt(parent), t.stepTitle(1), parent.length === 0 ? t.submitLabel : void 0));
+		const addPage = (parent) => {
+			const list = listAt(parent);
+			send(addPageEdit(editing, list, parent, t.stepTitle));
+			setPages((now) => ({
+				...now,
+				[key(parent)]: Number.MAX_SAFE_INTEGER
+			}));
+		};
+		const unsplitPages = (parent) => sendAll(unsplitPagesEdits(listAt(parent), parent, childKeyAt(parent)));
+		const openTypeMenu = (x, y, parent, index, placement) => openMenu(x, y, typeMenu(t, (type) => create(parent, index, type, placement)), void 0, typeSearch(t));
+		const edit = (path) => store.set({ dialog: {
+			kind: "edit",
+			path
+		} });
+		const remove = (path) => send({
+			type: "deleteInput",
+			path
+		});
+		const inFormOrder = (paths) => {
+			const order = rowsIn(containerRef.current ?? document.body).map((row) => key(row.path));
+			return [...paths].sort((a, b) => order.indexOf(key(a)) - order.indexOf(key(b)));
+		};
+		const staysPut = (paths, gap) => {
+			if (!paths.every((path) => samePath(path.slice(0, -1), gap.parent))) return false;
+			const at = paths.map(indexOf).sort((a, b) => a - b);
+			const first = at[0] ?? 0;
+			const last = at.at(-1) ?? 0;
+			return at.every((index, i) => index === first + i) && gap.index >= first && gap.index <= last + 1;
+		};
+		const dropOf = (gap) => ({
+			parent: gap.parent,
+			index: gap.index,
+			...gap.beside ? { beside: {
+				path: gap.beside.path,
+				side: gap.beside.side
+			} } : {},
+			...gap.stack ? { stack: gap.stack } : {}
+		});
+		const placementOf = (gap) => gap.beside || gap.stack ? { drop: dropOf(gap) } : void 0;
+		const followSelection = (moved, parent) => store.set({ selection: store.get().selection.map((rowKey) => {
+			const path = pathOf(rowKey);
+			const from = moved.find((other) => isInside(path, other));
+			return from ? key([...parent, ...path.slice(from.length - 1)]) : rowKey;
+		}) });
+		const removeSelection = () => {
+			const edits = inFormOrder(outermost(store.get().selection.map(pathOf))).map((path) => ({
+				type: "deleteInput",
+				path
+			}));
+			const [only] = edits;
+			if (!only) return false;
+			if (send(edits.length === 1 ? only : {
+				type: "batch",
+				edits
+			})) store.set({ selection: [] });
+			return true;
+		};
+		const moveSelection = (delta) => {
+			const paths = inFormOrder(outermost(store.get().selection.map(pathOf)));
+			const [first] = paths;
+			if (!first) return false;
+			const parent = first.slice(0, -1);
+			if (!paths.every((path) => samePath(path.slice(0, -1), parent))) return false;
+			const at = paths.map(indexOf).sort((a, b) => a - b);
+			const count = namesIn(containerAt(editing, latest.current.inputs, parent)).length;
+			const index = delta < 0 ? (at[0] ?? 0) - 1 : (at.at(-1) ?? 0) + 2;
+			if (index < 0 || index > count) return false;
+			send({
+				type: "moveInputs",
+				paths,
+				parent,
+				index
+			});
+			return true;
+		};
+		const startDrag = (e, path, label, how = {}) => {
+			if (e.button !== 0) return;
+			e.stopPropagation();
+			const selected = store.get().selection.map(pathOf);
+			const paths = path ? selected.length > 1 && selected.some((other) => samePath(other, path)) ? inFormOrder(outermost(selected)) : [path] : null;
+			const shown = paths && paths.length > 1 ? paths.map((other) => other.at(-1)).join(", ") : label;
+			const hiddenPaths = (paths ?? []).filter((path) => containerRef.current?.querySelector(`[data-input-path='${key(path)}']`)?.hasAttribute("data-input-hidden"));
+			const mover = {
+				paths,
+				hidden: hiddenPaths.length > 0,
+				shown: !paths || hiddenPaths.length < paths.length
+			};
+			const onEnd = (client, dragged) => {
+				const gap = store.get().drag?.gap ?? null;
+				store.set({ drag: null });
+				if (!dragged) {
+					how.onClick?.();
+					return;
+				}
+				if (!gap) return;
+				if (!paths) {
+					openTypeMenu(client.x, client.y, gap.parent, gap.index, placementOf(gap));
+					return;
+				}
+				containerRef.current?.focus({ preventScroll: true });
+				const drop = dropOf(gap);
+				const move = staysPut(paths, gap) ? {
+					type: "batch",
+					edits: []
+				} : {
+					type: "moveInputs",
+					paths,
+					parent: gap.parent,
+					index: gap.index
+				};
+				const edits = [move, ...dropLayoutEdits(editing, latest.current.inputs, paths, drop, move)];
+				const [only] = edits;
+				if (only && send(edits.length === 1 ? only : {
+					type: "batch",
+					edits
+				})) followSelection(paths, gap.parent);
+			};
+			trackDrag({
+				x: e.clientX,
+				y: e.clientY
+			}, {
+				escape: true,
+				swallowClick: how.swallowClick ?? "drag",
+				...how.holdText ? { holdText: how.holdText } : {},
+				onMove: (client) => {
+					const root = containerRef.current;
+					const found = root ? dropGap(root, client, mover) : null;
+					const pages = paths?.every((path) => definition(path)["type"] === "step") ?? false;
+					const gap = found && (pages || !isWizard(containerAt(editing, latest.current.inputs, found.parent))) ? found : null;
+					store.set({ drag: {
+						paths,
+						label: shown,
+						client,
+						gap
+					} });
+				},
+				onEnd,
+				onCancel: () => store.set({ drag: null })
+			});
+		};
+		const menuFor = (path) => {
+			const parent = path.slice(0, -1);
+			const index = indexOf(path);
+			const count = namesIn(containerAt(editing, latest.current.inputs, parent)).length;
+			return [
+				{
+					kind: "action",
+					label: t.editInput,
+					icon: /* @__PURE__ */ jsx(FaEdit, {}),
+					onSelect: () => edit(path)
+				},
+				{
+					kind: "submenu",
+					label: t.addInputBelow,
+					icon: /* @__PURE__ */ jsx(FaPlus, {}),
+					items: typeMenu(t, (type) => create(parent, index + 1, type)),
+					search: typeSearch(t)
+				},
+				{
+					kind: "action",
+					label: t.duplicate,
+					icon: /* @__PURE__ */ jsx(HiDuplicate, {}),
+					onSelect: () => send({
+						type: "duplicateInput",
+						path
+					})
+				},
+				{
+					kind: "action",
+					label: t.moveUp,
+					icon: /* @__PURE__ */ jsx(FaArrowUp, {}),
+					disabled: index <= 0,
+					onSelect: () => send({
+						type: "moveInputs",
+						paths: [path],
+						parent,
+						index: index - 1
+					})
+				},
+				{
+					kind: "action",
+					label: t.moveDown,
+					icon: /* @__PURE__ */ jsx(FaArrowDown, {}),
+					disabled: index >= count - 1,
+					onSelect: () => send({
+						type: "moveInputs",
+						paths: [path],
+						parent,
+						index: index + 2
+					})
+				},
+				{ kind: "divider" },
+				{
+					kind: "action",
+					label: t.deleteInput,
+					icon: /* @__PURE__ */ jsx(BiSolidTrashAlt, {}),
+					destructive: true,
+					onSelect: () => remove(path)
+				}
+			];
+		};
+		const resize = (edge, split) => {
+			const edit = resizeLayout(editing, latest.current.inputs, edge.left, edge.right, split);
+			return edit ? Boolean(send(edit)) : false;
+		};
+		const startResize = (e, edge) => {
+			const root = containerRef.current;
+			const cells = root && cellsAt(root, edge);
+			if (e.button !== 0 || !cells) return;
+			e.stopPropagation();
+			const from = cells.left.getBoundingClientRect().left;
+			const width = cells.flow.getBoundingClientRect().width;
+			const total = edge.split[0] + edge.split[1];
+			const grid = cells.flow.parentElement?.hasAttribute("data-layout-grid");
+			const oldColumns = cells.flow.style.gridTemplateColumns;
+			const drawn = [cells.left, cells.right].map((cell) => cell.style.getPropertyValue(WIDTH_VAR));
+			const children = [...cells.flow.children];
+			const weights = children.map((cell) => Math.max(1, cell.getBoundingClientRect().width));
+			const leftIndex = children.indexOf(cells.left);
+			const rightIndex = children.indexOf(cells.right);
+			const combined = (weights[leftIndex] ?? 0) + (weights[rightIndex] ?? 0);
+			const show = (split) => {
+				if (grid) {
+					weights[leftIndex] = combined * split[0] / total;
+					weights[rightIndex] = combined * split[1] / total;
+					cells.flow.style.gridTemplateColumns = weights.map((weight) => `minmax(0, ${weight}fr)`).join(" ");
+				} else {
+					cells.left.style.setProperty(WIDTH_VAR, `${split[0]}%`);
+					cells.right.style.setProperty(WIDTH_VAR, `${split[1]}%`);
+				}
+			};
+			const restore = () => {
+				cells.flow.style.gridTemplateColumns = oldColumns;
+				cells.left.style.setProperty(WIDTH_VAR, drawn[0] ?? "");
+				cells.right.style.setProperty(WIDTH_VAR, drawn[1] ?? "");
+			};
+			let split = edge.split;
+			store.set({ resizing: true });
+			trackDrag({
+				x: e.clientX,
+				y: e.clientY
+			}, {
+				escape: true,
+				holdText: "press",
+				swallowClick: "always",
+				onMove: (client) => {
+					split = snapSplit(total, (client.x - from) / width * 100);
+					show(split);
+					store.set({ edge: {
+						...edge,
+						x: cells.left.getBoundingClientRect().right,
+						split
+					} });
+				},
+				onEnd: () => {
+					store.set({ resizing: false });
+					root.focus({ preventScroll: true });
+					restore();
+					resize(edge, split);
+				},
+				onCancel: () => {
+					store.set({ resizing: false });
+					root.focus({ preventScroll: true });
+					restore();
+				}
+			});
+		};
+		return {
+			store,
+			definition,
+			edit,
+			remove,
+			openMenu: (x, y, path) => openMenu(x, y, menuFor(path)),
+			openTypeMenu,
+			startDrag,
+			startResize,
+			nudgeEdge: (edge, delta) => {
+				resize(edge, snapSplit(edge.split[0] + edge.split[1], edge.split[0] + delta));
+			},
+			reveal: (line) => latest.current.editor.onReveal?.({ line }),
+			removeSelection,
+			moveSelection,
+			navigate: (direction, extend) => {
+				const root = containerRef.current;
+				const rows = root ? rowsIn(root) : [];
+				const { cursor, cursorCopy, selection } = store.get();
+				const at = cursor ?? selection.at(-1);
+				const from = rows.find((row) => row.copy === cursorCopy && key(row.path) === at) ?? rows.find((row) => key(row.path) === at);
+				const to = from ? neighbour(rows.filter((row) => row === from || !samePath(row.path, from.path)), from, direction) : direction === "up" || direction === "left" ? rows.at(-1) : rows[0];
+				if (!to) return false;
+				const reached = key(to.path);
+				const visited = from ? [key(from.path), reached] : [reached];
+				store.set({
+					cursor: reached,
+					cursorCopy: to.copy,
+					selection: extend ? [.../* @__PURE__ */ new Set([...selection, ...visited])] : [reached]
+				});
+				rowElement(reached)?.scrollIntoView?.({ block: "nearest" });
+				return true;
+			},
+			hover: (instance) => {
+				const root = containerRef.current;
+				if (!root || store.get().hovered === instance) return;
+				const heads = linesIn(root).find(({ columns }) => columns.length > 1 && columns.some((column) => column.rows.some((row) => row.instance === instance)))?.columns.flatMap((column) => column.rows[0] ? [column.rows[0].instance] : []);
+				store.set({
+					hovered: instance,
+					open: [.../* @__PURE__ */ new Set([instance, ...heads ?? []])]
+				});
+			},
+			splitIntoPages,
+			addPage,
+			unsplitPages,
+			editSelection: () => {
+				const [only, ...more] = store.get().selection;
+				if (only === void 0 || more.length > 0) return false;
+				edit(pathOf(only));
+				return true;
+			}
+		};
+	}, [
+		store,
+		openMenu,
+		t,
+		editing
+	]);
+	const problems = editor.problems;
+	useEffect(() => {
+		store.set({ problems: problems ?? [] });
+	}, [store, problems]);
+	useEffect(() => {
+		const { edge, resizing } = store.get();
+		const root = containerRef.current;
+		if (edge && !resizing && root && inputs) store.set({ edge: edgeBetween(root, edge.left, edge.right) });
+	}, [store, inputs]);
+	useEffect(() => {
+		const { selection } = store.get();
+		const kept = selection.filter((rowKey) => {
+			const path = pathOf(rowKey);
+			return Object.hasOwn(containerAt(editing, inputs, path.slice(0, -1)), path.at(-1) ?? "");
+		});
+		if (kept.length !== selection.length) store.set({ selection: kept });
+	}, [
+		store,
+		inputs,
+		editing
+	]);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const onDown = (e) => {
+			if (e.button !== 0 || !(e.target instanceof Element) || e.target.closest(CHROME)) return;
+			const row = e.target.closest("[data-input-path]");
+			const start = {
+				x: e.clientX,
+				y: e.clientY
+			};
+			if (!e.shiftKey) {
+				const rowKey = row?.dataset["inputPath"];
+				if (!rowKey) {
+					trackDrag(start, { onEnd: (_, dragged) => {
+						if (!dragged) store.set({ selection: [] });
+					} });
+					return;
+				}
+				const selected = store.get().selection.includes(rowKey);
+				const title = e.target.closest("[data-field-label]");
+				const ownTitle = title !== null && title.closest("[data-input-path]") === row;
+				if (!ownTitle && e.target.closest(CONTROLS)) {
+					if (!selected) store.set({ selection: [] });
+					return;
+				}
+				const path = pathOf(rowKey);
+				const name = path.at(-1) ?? "";
+				if (ownTitle && title.tagName !== "LABEL") {
+					api.startDrag(e, path, name, { holdText: "drag" });
+					return;
+				}
+				e.preventDefault();
+				container.focus({ preventScroll: true });
+				if (!selected) store.set({
+					selection: [rowKey],
+					cursor: rowKey,
+					cursorCopy: row?.dataset["inputInstance"] ?? null
+				});
+				api.startDrag(e, path, name, {
+					swallowClick: "always",
+					holdText: "drag"
+				});
+				return;
+			}
+			e.preventDefault();
+			e.stopPropagation();
+			container.focus({ preventScroll: true });
+			const base = store.get().selection;
+			trackDrag(start, {
+				holdText: "press",
+				swallowClick: "always",
+				onMove: (client) => {
+					const box = {
+						left: Math.min(start.x, client.x),
+						right: Math.max(start.x, client.x),
+						top: Math.min(start.y, client.y),
+						bottom: Math.max(start.y, client.y)
+					};
+					store.set({
+						selection: [.../* @__PURE__ */ new Set([...base, ...inputsInBox(container, box).map(key)])],
+						marquee: box
+					});
+				},
+				onEnd: (_, dragged) => {
+					store.set({ marquee: null });
+					const rowKey = row?.dataset["inputPath"];
+					if (!dragged && rowKey) store.set({
+						selection: base.includes(rowKey) ? base.filter((other) => other !== rowKey) : [...base, rowKey],
+						cursor: rowKey,
+						cursorCopy: row?.dataset["inputInstance"] ?? null
+					});
+				},
+				onCancel: () => store.set({ marquee: null })
+			});
+		};
+		container.addEventListener("pointerdown", onDown, true);
+		return () => container.removeEventListener("pointerdown", onDown, true);
+	}, [api, store]);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const onKey = (e) => {
+			if (typing(e.target) || e.target instanceof Element && e.target.closest(KEYED_WIDGETS)) return;
+			const arrow = ARROWS[e.key];
+			if (e.metaKey || e.ctrlKey) undoKeys(e, latest.current.editor);
+			else if (DELETE_KEYS.has(e.key) && !e.altKey && api.removeSelection()) e.preventDefault();
+			else if (e.key.toLowerCase() === "e" && !e.altKey && api.editSelection()) e.preventDefault();
+			else if (e.altKey && (e.key === "ArrowUp" || e.key === "ArrowDown") && api.moveSelection(e.key === "ArrowUp" ? -1 : 1)) e.preventDefault();
+			else if (!e.altKey && arrow && api.navigate(arrow, e.shiftKey)) e.preventDefault();
+			else if (e.key === "Escape" && !store.get().drag) store.set({ selection: [] });
+		};
+		container.addEventListener("keydown", onKey);
+		return () => container.removeEventListener("keydown", onKey);
+	}, [api, store]);
+	const registerShow = editor.registerShow;
+	useEffect(() => {
+		if (!registerShow) return;
+		return registerShow((problem) => {
+			const key = problem.input ? JSON.stringify(problem.input) : null;
+			const row = [...containerRef.current?.querySelectorAll("[data-input-path]") ?? []].find((el) => el.dataset["inputPath"] === key);
+			if (!row) return false;
+			const still = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+			row.scrollIntoView?.({
+				block: "center",
+				behavior: still ? "auto" : "smooth"
+			});
+			if (!still) row.animate?.([{ boxShadow: "0 0 0 4px color-mix(in srgb, var(--theme-element) 45%, transparent)" }, { boxShadow: "0 0 0 0 transparent" }], {
+				duration: 1200,
+				easing: "ease-out"
+			});
+			if (problem.input) store.set({ dialog: {
+				kind: "edit",
+				path: problem.input
+			} });
+			return true;
+		});
+	}, [registerShow, store]);
+	const empty = namesIn(asRecord(inputs)).length === 0;
+	return /* @__PURE__ */ jsx(ApiContext.Provider, {
+		value: api,
+		children: /* @__PURE__ */ jsx(InputsContext.Provider, {
+			value: inputs,
+			children: /* @__PURE__ */ jsxs(FormEditingContext.Provider, {
+				value: EDITING,
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						ref: containerRef,
+						tabIndex: 0,
+						className: "relative outline-none",
+						onPointerMove: (e) => {
+							const state = store.get();
+							const root = containerRef.current;
+							if (!root || state.drag || state.marquee || state.resizing || resizerFocused(root)) return;
+							const edge = root.querySelector("[data-input-cell], [data-layout-grid]") ? edgeAt(root, e.clientX, e.clientY) : null;
+							if (!sameEdge(edge, state.edge)) store.set({ edge });
+						},
+						onPointerLeave: () => {
+							const root = containerRef.current;
+							const keep = store.get().resizing || root !== null && resizerFocused(root);
+							store.set({
+								hovered: null,
+								open: [],
+								...keep ? {} : { edge: null }
+							});
+						},
+						children: [
+							empty && /* @__PURE__ */ jsx("div", {
+								className: "mb-3 text-sm theme-muted-text",
+								children: t.noInputs
+							}),
+							/* @__PURE__ */ jsx(WizardPagesContext.Provider, {
+								value: wizardPages,
+								children
+							}),
+							/* @__PURE__ */ jsx(DropIndicator, {
+								store,
+								container: containerRef
+							}),
+							/* @__PURE__ */ jsx(RowResizer, {
+								api,
+								container: containerRef
+							}),
+							/* @__PURE__ */ jsx(Marquee, {
+								store,
+								container: containerRef
+							}),
+							/* @__PURE__ */ jsx("div", {
+								"data-input-chrome": true,
+								className: "sticky bottom-2 z-10 mt-2 flex justify-end",
+								children: /* @__PURE__ */ jsxs(EditorBar, {
+									editor,
+									groups: formShortcuts(g),
+									children: [
+										/* @__PURE__ */ jsx(AddChip, {
+											icon: /* @__PURE__ */ jsx(FaPlus, { className: "h-3 w-3" }),
+											label: t.addInput,
+											hint: t.addInputHint,
+											onPointerDown: (e) => api.startDrag(e, null, t.addInput),
+											onClick: (e) => {
+												const r = e.currentTarget.getBoundingClientRect();
+												const form = isWizard(inputs) ? pagesIn(inputs) : [];
+												const last = form.at(-1);
+												if (last) wizardPages.setPage("[]", (wizardPages.count("[]") ?? form.length) - 1);
+												api.openTypeMenu(r.left, r.bottom, last ? [last] : [], Number.MAX_SAFE_INTEGER);
+											}
+										}),
+										/* @__PURE__ */ jsx(PageActions, {
+											api,
+											parent: [],
+											list: inputs,
+											bar: true
+										}),
+										isWizard(inputs) && /* @__PURE__ */ jsx(PageNumber, {
+											count: wizardPages.count("[]") ?? pagesIn(inputs).length,
+											page: wizardPages.page("[]"),
+											onChange: (index) => wizardPages.setPage("[]", index)
+										}),
+										editor.onOpenSettings && /* @__PURE__ */ jsx(BarDivider, {})
+									]
+								})
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(Dialogs, {
+						api,
+						inputs,
+						editor
+					}),
+					contextMenu
+				]
+			})
+		})
+	});
+}
+function DropIndicator({ store, container }) {
+	const drag = useUi(store, (state) => state.drag);
+	const root = container.current;
+	if (!drag || !root) return null;
+	const rect = root.getBoundingClientRect();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [drag.gap?.beside ? /* @__PURE__ */ jsx("div", {
+		className: "pointer-events-none absolute z-20 w-1 rounded-full bg-(--theme-element)",
+		style: {
+			left: drag.gap.beside.x - rect.left - 2,
+			top: drag.gap.beside.top - rect.top,
+			height: drag.gap.beside.bottom - drag.gap.beside.top
+		}
+	}) : drag.gap && /* @__PURE__ */ jsx("div", {
+		className: "pointer-events-none absolute z-20 h-1 rounded-full bg-(--theme-element)",
+		style: {
+			left: drag.gap.left - rect.left,
+			top: drag.gap.y - rect.top - 2,
+			width: drag.gap.right - drag.gap.left
+		}
+	}), /* @__PURE__ */ jsx(DragLabel, {
+		at: {
+			x: drag.client.x - rect.left,
+			y: drag.client.y - rect.top
+		},
+		text: drag.label
+	})] });
+}
+var resizerFocused = (root) => document.activeElement instanceof HTMLElement && root.contains(document.activeElement) && document.activeElement.dataset["inputResizer"] !== void 0;
+/** The handle on the edge between two inputs sharing a line, which moves width between them. */
+function RowResizer({ api, container }) {
+	const t = useInputsEditorStrings();
+	const edge = useUi(api.store, (state) => state.edge);
+	const root = container.current;
+	if (!edge || !root) return null;
+	const rect = root.getBoundingClientRect();
+	const total = edge.split[0] + edge.split[1];
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": "vertical",
+		"aria-label": t.resizeInputs,
+		"aria-valuenow": edge.split[0],
+		"aria-valuemin": Math.min(10, total / 2),
+		"aria-valuemax": total - Math.min(10, total / 2),
+		tabIndex: 0,
+		"data-input-chrome": true,
+		"data-input-resizer": true,
+		className: "group/edge absolute z-20 flex w-3 -translate-x-1/2 cursor-col-resize touch-none justify-center outline-none",
+		style: {
+			left: edge.x - rect.left,
+			top: edge.top - rect.top,
+			height: edge.bottom - edge.top
+		},
+		onPointerDown: (e) => api.startResize(e, edge),
+		onKeyDown: (e) => {
+			if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+				e.preventDefault();
+				e.stopPropagation();
+				api.nudgeEdge(edge, e.key === "ArrowLeft" ? -5 : 5);
+			}
+		},
+		onBlur: () => {
+			if (!api.store.get().resizing) api.store.set({ edge: null });
+		},
+		children: /* @__PURE__ */ jsx("div", { className: "h-full w-0.5 rounded-full bg-(--theme-element) opacity-50 group-hover/edge:opacity-100 group-focus-visible/edge:opacity-100" })
+	});
+}
+function Marquee({ store, container }) {
+	const box = useUi(store, (state) => state.marquee);
+	const root = container.current;
+	if (!box || !root) return null;
+	const rect = root.getBoundingClientRect();
+	return /* @__PURE__ */ jsx(MarqueeBox, {
+		className: "pointer-events-none z-20",
+		box: {
+			left: box.left - rect.left,
+			top: box.top - rect.top,
+			right: box.right - rect.left,
+			bottom: box.bottom - rect.top
+		}
+	});
+}
+function Dialogs({ api, inputs, editor }) {
+	const editing = useWorkflowEditing();
+	const dialog = useUi(api.store, (state) => state.dialog);
+	const close = () => api.store.set({ dialog: null });
+	if (!dialog) return null;
+	const save = (edit, created, home) => {
+		const merged = withCreatedInputs(editing, created, home, edit);
+		if (merged) editor.onEdit(withInputLayouts(editing, inputs, merged));
+	};
+	if (dialog.kind === "create") {
+		const siblings = namesIn(containerAt(editing, inputs, dialog.parent));
+		const index = Math.min(dialog.index, siblings.length);
+		const home = homeFor(editing, inputs, dialog.parent, index);
+		const placement = dialog.placement;
+		return /* @__PURE__ */ jsx(InputDialog, {
+			name: nextInputName(editing, inputs),
+			definition: dialog.definition ?? newInputDefinition(dialog.type),
+			isNew: true,
+			siblings,
+			allowStep: isWizard(containerAt(editing, inputs, dialog.parent)),
+			inputs,
+			home,
+			onClose: close,
+			view: editor.settingsView,
+			onViewChange: editor.onSettingsViewChange,
+			openOnAdd: openOnAddOf(editor),
+			yaml: { onSave: (name, text, created) => save(placeNewInput(editing, inputs, {
+				type: "batch",
+				edits: [{
+					type: "addInput",
+					parent: dialog.parent,
+					index: samePath(home.parent, dialog.parent) ? index + created.length : index,
+					name,
+					definition: asRecord(editing.loadYaml(text))
+				}, {
+					type: "setInputYaml",
+					path: [...dialog.parent, name],
+					yaml: text
+				}]
+			}, dialog.parent, name, placement), created, home) },
+			onSave: (name, definition, _patch, created) => {
+				const add = {
+					type: "addInput",
+					parent: dialog.parent,
+					index: samePath(home.parent, dialog.parent) ? index + created.length : index,
+					name,
+					definition
+				};
+				save(placeNewInput(editing, inputs, add, dialog.parent, name, placement), created, home);
+			}
+		}, `create:${key(dialog.parent)}:${dialog.index}`);
+	}
+	const { path } = dialog;
+	const name = path.at(-1) ?? "";
+	const container = containerAt(editing, inputs, path.slice(0, -1));
+	if (!Object.hasOwn(container, name)) return null;
+	const home = homeFor(editing, inputs, path.slice(0, -1), namesIn(container).indexOf(name));
+	return /* @__PURE__ */ jsx(InputDialog, {
+		name,
+		definition: asRecord(container[name]),
+		isNew: false,
+		siblings: namesIn(container).filter((other) => other !== name),
+		allowStep: isWizard(container),
+		inputs,
+		home,
+		onClose: close,
+		onDelete: () => editor.onEdit(withInputLayouts(editing, inputs, {
+			type: "deleteInput",
+			path
+		})),
+		view: editor.settingsView,
+		onViewChange: editor.onSettingsViewChange,
+		openOnAdd: openOnAddOf(editor),
+		yaml: {
+			source: editor.readSource?.(),
+			path,
+			onSave: (next, text, created) => {
+				const at = [...path.slice(0, -1), next];
+				save(next === name ? {
+					type: "setInputYaml",
+					path,
+					yaml: text
+				} : {
+					type: "batch",
+					edits: [{
+						type: "updateInput",
+						path,
+						name: next
+					}, {
+						type: "setInputYaml",
+						path: at,
+						yaml: text
+					}]
+				}, created, home);
+			}
+		},
+		onSave: (next, _definition, patch, created) => save({
+			type: "updateInput",
+			path,
+			...next !== name ? { name: next } : {},
+			...patch
+		}, created, home)
+	}, `edit:${key(path)}`);
+}
+function homeFor(editing, inputs, container, index) {
+	const [top, next] = container;
+	if (top === void 0) return {
+		parent: [],
+		index
+	};
+	if (text(asRecord(asRecord(inputs)[top])["type"]) === "step") {
+		const fields = namesIn(containerAt(editing, inputs, [top]));
+		return {
+			parent: [top],
+			index: next === void 0 ? index : fields.indexOf(next)
+		};
+	}
+	return {
+		parent: [],
+		index: namesIn(asRecord(inputs)).indexOf(top)
+	};
+}
+function nextInputName(editing, inputs) {
+	return editing.newInputName(allNames(editing, asRecord(inputs), /* @__PURE__ */ new Set()));
+}
+function placeNewInput(editing, inputs, edit, parent, name, placement) {
+	return placement ? {
+		type: "batch",
+		edits: [edit, ...dropLayoutEdits(editing, inputs, [[...parent, name]], placement.drop, edit)]
+	} : edit;
+}
+//#endregion
+export { InputsFormEditor };