@parallelworks/ui 0.37.0 → 0.39.0

package/dist/graph/WorkflowSettingsDialog.js

@@ -0,0 +1,670 @@
+import { useWorkflowEditing } from "../components/Provider.js";
+import { IoMdClose } from "../icons/io/IoMdClose.js";
+import { IconButton } from "../components/IconButton.js";
+import { Input } from "../components/Input.js";
+import { useGraphEditorStrings, useInputsEditorStrings } from "./editorStrings.js";
+import { asRecord } from "./records.js";
+import { SETTINGS_YAML_PATH } from "../editor/settingsYaml.js";
+import { AddRowButton, ChoiceButtons, DialogShell, ENV_KEY, ExpressionToggle, FieldError, FieldLabel, KeyValueEditor, Section, StringListEditor, ToggleField, diffPatch, durationError, expressionError, flagError, flagOf, isEmptyPatch, labelled, orUndefined, rowsError, rowsFrom, rowsTo, text, withoutUndefined } from "./editorFields.js";
+import { FlagField, refSuggestions } from "./inputRefs.js";
+import { expressionRefs } from "./expressionRefs.js";
+import { useNewInputs } from "./InputDialog.js";
+import { useSettingsViews } from "./GraphEditorDialogs.js";
+import { firstPageEdits, pagesBackEdits } from "./inputPages.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/WorkflowSettingsDialog.tsx
+var LINK_NAME = /^[a-z0-9_-]*[a-z0-9]$/;
+var ORG_VARIABLE = /^[A-Z][A-Z0-9_]*$/;
+var USER_VARIABLE = /^[a-zA-Z0-9_-]+$/;
+var SESSION_FLAGS = [
+	"redirect",
+	"useTLS",
+	"useCustomDomain",
+	"openAI",
+	"detach"
+];
+var LINK_FLAGS = ["redirect", "detach"];
+var WIZARD_FLAGS = [
+	"showSteps",
+	"allowJump",
+	"hideStepNumbers"
+];
+/** What this dialog writes; the schema coverage test holds these to the workflow schema. */
+var WORKFLOW_FIELDS = [
+	"env",
+	"timeout",
+	"permissions",
+	"sessions",
+	"links",
+	"needs"
+];
+var SESSION_FIELDS = [
+	"type",
+	"prompt-for-name",
+	"prompt-for-name.default",
+	...SESSION_FLAGS
+];
+var LINK_FIELDS = [
+	"endpoint",
+	"url",
+	...LINK_FLAGS
+];
+var NEEDS_FIELDS = [
+	"organizationVariables",
+	"userVariables",
+	"userVariables.<*>.hint"
+];
+var INPUT_FORM_FIELDS = [
+	"labelPosition",
+	"wizard",
+	"wizard.mode",
+	"wizard.navigation",
+	...WIZARD_FLAGS.map((flag) => `wizard.navigation.${flag}`),
+	"wizard.submitLabel",
+	"wizard.flatten"
+];
+var cards = 0;
+var cardKey = () => `card-${++cards}`;
+function sessionsFrom(value) {
+	return Object.entries(asRecord(value)).map(([name, raw]) => {
+		const session = asRecord(raw);
+		const prompt = session["prompt-for-name"];
+		return {
+			key: cardKey(),
+			name,
+			original: raw,
+			type: session["type"] === "link" ? "link" : "tunnel",
+			prompt: Object.hasOwn(session, "prompt-for-name"),
+			promptDefault: text(asRecord(prompt)["default"]),
+			flags: Object.fromEntries(SESSION_FLAGS.map((flag) => [flag, flagOf(session[flag])]))
+		};
+	});
+}
+function sessionValue(draft) {
+	const session = {};
+	const original = asRecord(draft.original);
+	if (draft.type === "link" || original["type"] === "tunnel") session["type"] = draft.type;
+	if (draft.prompt) session["prompt-for-name"] = draft.promptDefault.trim() ? { default: draft.promptDefault.trim() } : null;
+	for (const flag of SESSION_FLAGS) if (draft.flags[flag] !== void 0) session[flag] = draft.flags[flag];
+	return Object.keys(session).length === 0 && draft.original === null ? null : session;
+}
+function linksFrom(value) {
+	return Object.entries(asRecord(value)).map(([name, raw]) => {
+		const link = asRecord(raw);
+		const target = link["url"] !== void 0 ? "url" : "endpoint";
+		return {
+			key: cardKey(),
+			name,
+			original: raw,
+			target,
+			value: text(link[target]),
+			flags: Object.fromEntries(LINK_FLAGS.map((flag) => [flag, flagOf(link[flag])]))
+		};
+	});
+}
+function linkValue(draft) {
+	const link = { [draft.target]: draft.value.trim() };
+	for (const flag of LINK_FLAGS) if (draft.flags[flag] !== void 0) link[flag] = draft.flags[flag];
+	return link;
+}
+function userVariablesFrom(value) {
+	if (typeof value === "string") return {
+		expression: value,
+		asList: false,
+		rows: []
+	};
+	if (Array.isArray(value)) return {
+		expression: void 0,
+		asList: true,
+		rows: value.map((name) => ({
+			key: String(name),
+			value: ""
+		}))
+	};
+	return {
+		expression: void 0,
+		asList: false,
+		rows: Object.entries(asRecord(value)).map(([name, raw]) => ({
+			key: name,
+			value: text(asRecord(raw)["hint"])
+		}))
+	};
+}
+function userVariablesValue(draft) {
+	if (draft.expression !== void 0) return orUndefined(draft.expression);
+	if (draft.rows.length === 0) return;
+	if (draft.asList && draft.rows.every((row) => !row.value.trim())) return draft.rows.map((row) => row.key.trim());
+	return Object.fromEntries(draft.rows.map((row) => [row.key.trim(), row.value.trim() ? { hint: row.value.trim() } : {}]));
+}
+function namesError(names, pattern, message, t) {
+	const trimmed = names.map((name) => name.trim());
+	for (const [i, name] of trimmed.entries()) {
+		if (!pattern.test(name)) return message;
+		if (trimmed.indexOf(name) !== i) return t.duplicateKey;
+	}
+}
+function Card({ onRemove, removeLabel, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-start gap-2",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex flex-1 flex-col gap-3 rounded-md border theme-border p-3",
+			children
+		}), /* @__PURE__ */ jsx(IconButton, {
+			icon: /* @__PURE__ */ jsx(IoMdClose, { className: "h-4 w-4" }),
+			label: removeLabel,
+			variant: "ghost",
+			size: "sm",
+			onClick: onRemove
+		})]
+	});
+}
+function reflattenEdits(inputs, update) {
+	const names = Object.keys(inputs).filter((name) => !name.startsWith("$"));
+	const pages = names.filter((name) => asRecord(inputs[name])["type"] === "step").map((page) => ({
+		page,
+		fields: Object.keys(asRecord(asRecord(inputs[page])["options"])).filter((name) => !name.startsWith("$"))
+	})).filter(({ fields }) => fields.length > 0);
+	if (pages.length === 0) return [update];
+	return [
+		{
+			type: "moveInputs",
+			paths: pages.flatMap(({ page, fields }) => fields.map((name) => [page, name])),
+			parent: [],
+			index: names.length
+		},
+		update,
+		...pages.map(({ page, fields }) => ({
+			type: "moveInputs",
+			paths: fields.map((name) => [name]),
+			parent: [page],
+			index: 0
+		}))
+	];
+}
+/** The workflow's own settings in a form, or as YAML; switching carries the edits across. */
+function WorkflowSettingsDialog(props) {
+	const t = useGraphEditorStrings();
+	const editing = useWorkflowEditing();
+	const views = useSettingsViews({
+		...props,
+		name: "",
+		read: editing.settingsYaml,
+		write: (_, yaml) => ({
+			type: "setSettingsYaml",
+			yaml
+		}),
+		scope: () => [],
+		exclude: ["jobs", "on"],
+		optional: true
+	});
+	if (views.start === void 0) return /* @__PURE__ */ jsx(SettingsForm, { ...props });
+	if (views.yaml !== null) return views.yamlDialog(t.workflowSettings, SETTINGS_YAML_PATH, views.yaml);
+	return views.formDialog((host) => /* @__PURE__ */ jsx(SettingsForm, {
+		...props,
+		...host,
+		workflow: views.current ?? props.workflow
+	}, views.version));
+}
+function SettingsForm({ workflow, onEdit, onClose, renderShell, onDraft, pending = false }) {
+	const t = useGraphEditorStrings();
+	const inputStrings = useInputsEditorStrings();
+	const [original] = useState(() => workflow);
+	const editing = useWorkflowEditing();
+	const newInputs = useNewInputs(editing.workflowInputsSchema(original));
+	const source = {
+		...newInputs.source,
+		extras: expressionRefs(editing, original)
+	};
+	const needs = asRecord(original["needs"]);
+	const [meta] = useState(() => asRecord(asRecord(editing.workflowInputsSchema(workflow))["$meta"]));
+	const wizard = asRecord(meta["wizard"]);
+	const [touched, setTouched] = useState(() => /* @__PURE__ */ new Set());
+	const touch = (section) => setTouched((current) => current.has(section) ? current : new Set(current).add(section));
+	const [env, setEnvRows] = useState(() => rowsFrom(original["env"], false));
+	const [timeout, setTimeoutText] = useState(text(original["timeout"]));
+	const [permissions, setPermissionsList] = useState(() => Array.isArray(original["permissions"]) ? original["permissions"].map(String) : []);
+	const [sessions, setSessionsList] = useState(() => sessionsFrom(original["sessions"]));
+	const [links, setLinksList] = useState(() => linksFrom(original["links"]));
+	const [orgVariables, setOrgVariablesList] = useState(() => Array.isArray(needs["organizationVariables"]) ? needs["organizationVariables"].map(String) : []);
+	const [userVariables, setUserVariablesDraft] = useState(() => userVariablesFrom(needs["userVariables"]));
+	const [labelPosition, setLabelPositionValue] = useState(meta["labelPosition"] === "top" ? "top" : "left");
+	const [wizardOn, setWizardOn] = useState(wizard["mode"] === "wizard");
+	const [wizardFlags, setWizardFlags] = useState(() => Object.fromEntries(WIZARD_FLAGS.map((flag) => [flag, flagOf(asRecord(wizard["navigation"])[flag])])));
+	const [submitLabel, setSubmitLabel] = useState(text(wizard["submitLabel"]));
+	const [flatten, setFlatten] = useState(wizard["flatten"] !== false);
+	const tracked = (section, set) => (value) => {
+		touch(section);
+		set(value);
+	};
+	const setEnv = tracked("env", setEnvRows);
+	const changeTimeout = tracked("timeout", setTimeoutText);
+	const setPermissions = tracked("permissions", setPermissionsList);
+	const setSessions = tracked("sessions", setSessionsList);
+	const setLinks = tracked("links", setLinksList);
+	const setOrgVariables = tracked("needs", setOrgVariablesList);
+	const setUserVariables = tracked("needs", setUserVariablesDraft);
+	const setLabelPosition = tracked("meta", setLabelPositionValue);
+	const updateSession = (i, patch) => setSessions(sessions.map((s, j) => j === i ? {
+		...s,
+		...patch
+	} : s));
+	const updateLink = (i, patch) => setLinks(links.map((l, j) => j === i ? {
+		...l,
+		...patch
+	} : l));
+	const redirects = [...sessions.map((session) => session.flags.redirect), ...links.map((link) => link.flags.redirect)].filter((value) => value === true).length;
+	const errors = {
+		env: rowsError(env, ENV_KEY, t.invalidEnvKey, t),
+		timeout: durationError(timeout, t),
+		permissions: permissions.some((value) => !value.trim()) ? t.required : void 0,
+		sessions: namesError(sessions.map((session) => session.name), /\S/, t.required, t) ?? sessions.flatMap((session) => SESSION_FLAGS.map((flag) => session.flags[flag])).map((value) => flagError(value, t)).find(Boolean),
+		links: namesError(links.map((link) => link.name), LINK_NAME, t.invalidLinkName, t) ?? (links.some((link) => !link.value.trim()) ? t.required : void 0) ?? links.flatMap((link) => LINK_FLAGS.map((f) => link.flags[f])).map((value) => flagError(value, t)).find(Boolean),
+		redirect: redirects > 1 ? t.oneRedirect : void 0,
+		orgVariables: namesError(orgVariables, ORG_VARIABLE, t.invalidOrganizationVariable, t),
+		userVariables: userVariables.expression !== void 0 ? expressionError(userVariables.expression, t) : rowsError(userVariables.rows, USER_VARIABLE, t.invalidKey, t),
+		wizard: wizardOn ? WIZARD_FLAGS.map((flag) => flagError(wizardFlags[flag], t)).find(Boolean) : void 0
+	};
+	const nextNeeds = () => {
+		if (!touched.has("needs")) return original["needs"];
+		const next = { ...needs };
+		next["organizationVariables"] = orgVariables.length > 0 ? orgVariables.map((name) => name.trim()) : void 0;
+		next["userVariables"] = userVariablesValue(userVariables);
+		const written = withoutUndefined(next);
+		return Object.keys(written).length > 0 ? written : void 0;
+	};
+	const pick = (section, value) => touched.has(section) ? value() : original[section];
+	const patch = diffPatch(original, {
+		env: pick("env", () => rowsTo(env, (value) => value)),
+		timeout: pick("timeout", () => orUndefined(timeout)),
+		permissions: pick("permissions", () => permissions.length > 0 ? permissions.map((value) => value.trim()) : void 0),
+		sessions: pick("sessions", () => sessions.length > 0 ? Object.fromEntries(sessions.map((session) => [session.name.trim(), sessionValue(session)])) : void 0),
+		links: pick("links", () => links.length > 0 ? Object.fromEntries(links.map((link) => [link.name.trim(), linkValue(link)])) : void 0),
+		needs: nextNeeds()
+	});
+	const nextWizard = () => {
+		if (!wizardOn) return;
+		const navigation = {};
+		for (const flag of WIZARD_FLAGS) if (wizardFlags[flag] !== void 0) navigation[flag] = wizardFlags[flag];
+		const next = {
+			...wizard,
+			mode: "wizard"
+		};
+		next["navigation"] = Object.keys(navigation).length > 0 ? navigation : void 0;
+		next["submitLabel"] = orUndefined(submitLabel);
+		next["flatten"] = flatten ? wizard["flatten"] === true ? true : void 0 : false;
+		return withoutUndefined(next);
+	};
+	const metaPatch = touched.has("meta") ? diffPatch(meta, {
+		labelPosition: labelPosition === "top" ? "top" : meta["labelPosition"] === "left" ? "left" : void 0,
+		wizard: nextWizard()
+	}) : {
+		set: {},
+		unset: []
+	};
+	const dirty = !isEmptyPatch(patch) || !isEmptyPatch(metaPatch);
+	const invalid = Object.values(errors).some(Boolean);
+	const setWizard = (set) => tracked("meta", set);
+	const update = {
+		type: "updateWorkflow",
+		...patch,
+		inputsMeta: metaPatch
+	};
+	const inputs = newInputs.all;
+	const wasWizard = wizard["mode"] === "wizard";
+	const settings = isEmptyPatch(patch) ? [] : [{
+		type: "updateWorkflow",
+		...patch
+	}];
+	const wizardEdit = {
+		type: "updateWorkflow",
+		inputsMeta: metaPatch
+	};
+	const edits = wizardOn && !wasWizard ? [
+		...settings,
+		wizardEdit,
+		...firstPageEdits(editing, inputs, inputStrings.stepTitle(1))
+	] : !wizardOn && wasWizard ? [
+		...settings,
+		...pagesBackEdits(inputs, []),
+		wizardEdit
+	] : wizardOn && flatten !== (wizard["flatten"] !== false) ? [...settings, ...reflattenEdits(inputs, wizardEdit)] : [update];
+	const saveEdit = newInputs.save(dirty ? editing.batchOf(edits) : null);
+	onDraft?.(saveEdit, invalid);
+	const children = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		newInputs.dialog,
+		/* @__PURE__ */ jsxs(Section, {
+			title: t.sectionGeneral,
+			open: true,
+			children: [
+				/* @__PURE__ */ jsx(FieldLabel, {
+					label: t.fields.env,
+					yamlKey: "env",
+					description: t.help.workflowEnv
+				}),
+				/* @__PURE__ */ jsx(KeyValueEditor, {
+					rows: env,
+					onChange: setEnv,
+					error: errors.env,
+					valueSuggestions: refSuggestions(source)
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					mono: true,
+					...labelled(t.fields.timeout, "timeout"),
+					description: t.help.workflowTimeout,
+					value: timeout,
+					error: errors.timeout,
+					onChange: (e) => changeTimeout(e.target.value)
+				})
+			]
+		}),
+		/* @__PURE__ */ jsx(Section, {
+			title: t.sectionPermissions,
+			description: t.help.permissions,
+			open: permissions.length > 0,
+			alert: !!errors.permissions,
+			children: /* @__PURE__ */ jsx(StringListEditor, {
+				label: t.sectionPermissions,
+				values: permissions,
+				onChange: setPermissions,
+				addLabel: t.addPermission,
+				placeholder: "*",
+				error: errors.permissions
+			})
+		}),
+		/* @__PURE__ */ jsxs(Section, {
+			title: t.sectionSessions,
+			description: t.help.sessions,
+			open: sessions.length > 0,
+			alert: !!(errors.sessions || errors.redirect),
+			children: [
+				sessions.map((session, i) => /* @__PURE__ */ jsxs(Card, {
+					removeLabel: t.removeRow,
+					onRemove: () => setSessions(sessions.filter((_, j) => j !== i)),
+					children: [
+						/* @__PURE__ */ jsx(Input, {
+							mono: true,
+							label: t.fields.name,
+							description: t.help.sessionName,
+							value: session.name,
+							onChange: (e) => updateSession(i, { name: e.target.value })
+						}),
+						/* @__PURE__ */ jsx(FieldLabel, {
+							label: t.fields.sessionType,
+							yamlKey: "type",
+							description: t.help.sessionType
+						}),
+						/* @__PURE__ */ jsx(ChoiceButtons, {
+							options: [{
+								value: "tunnel",
+								label: t.sessionTypeTunnel
+							}, {
+								value: "link",
+								label: t.sessionTypeLink
+							}],
+							value: session.type,
+							onChange: (type) => updateSession(i, { type })
+						}),
+						/* @__PURE__ */ jsx(FieldLabel, {
+							label: t.fields.promptForName,
+							yamlKey: "prompt-for-name",
+							description: t.help.promptForName
+						}),
+						/* @__PURE__ */ jsx(ChoiceButtons, {
+							options: [{
+								value: "off",
+								label: t.promptOff
+							}, {
+								value: "ask",
+								label: t.promptAsk
+							}],
+							value: session.prompt ? "ask" : "off",
+							onChange: (mode) => updateSession(i, { prompt: mode === "ask" })
+						}),
+						session.prompt && /* @__PURE__ */ jsx(Input, {
+							...labelled(t.fields.promptDefault, "default"),
+							description: t.help.promptDefault,
+							value: session.promptDefault,
+							onChange: (e) => updateSession(i, { promptDefault: e.target.value })
+						}),
+						SESSION_FLAGS.map((flag) => /* @__PURE__ */ jsx(FlagField, {
+							label: t.fields[flag],
+							yamlKey: flag,
+							description: flag === "redirect" ? t.help.sessionRedirect : flag === "detach" ? t.help.sessionDetach : t.help[flag],
+							value: session.flags[flag],
+							original: asRecord(session.original)[flag],
+							onChange: (value) => updateSession(i, { flags: {
+								...session.flags,
+								[flag]: value
+							} }),
+							source
+						}, flag))
+					]
+				}, session.key)),
+				/* @__PURE__ */ jsx(FieldError, { message: errors.sessions ?? errors.redirect }),
+				/* @__PURE__ */ jsx(AddRowButton, {
+					label: t.addSession,
+					onClick: () => setSessions([...sessions, {
+						key: cardKey(),
+						name: "",
+						original: null,
+						type: "tunnel",
+						prompt: false,
+						promptDefault: "",
+						flags: {
+							redirect: void 0,
+							useTLS: void 0,
+							useCustomDomain: void 0,
+							openAI: void 0,
+							detach: void 0
+						}
+					}])
+				})
+			]
+		}),
+		/* @__PURE__ */ jsxs(Section, {
+			title: t.sectionLinks,
+			description: t.help.links,
+			open: links.length > 0,
+			alert: !!(errors.links || errors.redirect),
+			children: [
+				links.map((link, i) => /* @__PURE__ */ jsxs(Card, {
+					removeLabel: t.removeRow,
+					onRemove: () => setLinks(links.filter((_, j) => j !== i)),
+					children: [
+						/* @__PURE__ */ jsx(Input, {
+							mono: true,
+							label: t.fields.name,
+							description: t.help.linkName,
+							value: link.name,
+							onChange: (e) => updateLink(i, { name: e.target.value })
+						}),
+						/* @__PURE__ */ jsx(FieldLabel, {
+							label: t.fields.linkTarget,
+							description: t.help.linkTarget
+						}),
+						/* @__PURE__ */ jsx(ChoiceButtons, {
+							options: [{
+								value: "endpoint",
+								label: t.linkToEndpoint
+							}, {
+								value: "url",
+								label: t.linkToUrl
+							}],
+							value: link.target,
+							onChange: (target) => updateLink(i, { target })
+						}),
+						/* @__PURE__ */ jsx(Input, {
+							mono: true,
+							"aria-label": link.target === "url" ? t.linkToUrl : t.linkToEndpoint,
+							description: link.target === "url" ? t.help.linkUrl : t.help.linkEndpoint,
+							value: link.value,
+							placeholder: link.target === "url" ? "https://" : "app",
+							onChange: (e) => updateLink(i, { value: e.target.value })
+						}),
+						LINK_FLAGS.map((flag) => /* @__PURE__ */ jsx(FlagField, {
+							label: t.fields[flag],
+							yamlKey: flag,
+							description: flag === "redirect" ? t.help.linkRedirect : t.help.linkDetach,
+							value: link.flags[flag],
+							original: asRecord(link.original)[flag],
+							onChange: (value) => updateLink(i, { flags: {
+								...link.flags,
+								[flag]: value
+							} }),
+							source
+						}, flag))
+					]
+				}, link.key)),
+				/* @__PURE__ */ jsx(FieldError, { message: errors.links ?? errors.redirect }),
+				/* @__PURE__ */ jsx(AddRowButton, {
+					label: t.addLink,
+					onClick: () => setLinks([...links, {
+						key: cardKey(),
+						name: "",
+						original: void 0,
+						target: "endpoint",
+						value: "",
+						flags: {
+							redirect: void 0,
+							detach: void 0
+						}
+					}])
+				})
+			]
+		}),
+		/* @__PURE__ */ jsxs(Section, {
+			title: t.sectionRequiredVariables,
+			open: orgVariables.length > 0 || userVariables.rows.length > 0 || userVariables.expression !== void 0,
+			alert: !!(errors.orgVariables || errors.userVariables),
+			children: [
+				/* @__PURE__ */ jsx(FieldLabel, {
+					label: t.fields.organizationVariables,
+					yamlKey: "needs.organizationVariables",
+					description: t.help.organizationVariables
+				}),
+				/* @__PURE__ */ jsx(StringListEditor, {
+					label: t.fields.organizationVariables,
+					values: orgVariables,
+					onChange: setOrgVariables,
+					addLabel: t.addOrganizationVariable,
+					placeholder: "MY_VARIABLE",
+					error: errors.orgVariables
+				}),
+				/* @__PURE__ */ jsx(FieldLabel, {
+					label: t.fields.userVariables,
+					yamlKey: "needs.userVariables",
+					description: t.help.userVariables,
+					actions: /* @__PURE__ */ jsx(ExpressionToggle, {
+						active: userVariables.expression !== void 0,
+						onChange: (on) => setUserVariables({
+							...userVariables,
+							expression: on ? "" : void 0
+						})
+					})
+				}),
+				userVariables.expression !== void 0 ? /* @__PURE__ */ jsx(Input, {
+					mono: true,
+					"aria-label": t.fields.userVariables,
+					value: userVariables.expression,
+					error: errors.userVariables,
+					onChange: (e) => setUserVariables({
+						...userVariables,
+						expression: e.target.value
+					})
+				}) : /* @__PURE__ */ jsx(KeyValueEditor, {
+					rows: userVariables.rows,
+					onChange: (rows) => setUserVariables({
+						...userVariables,
+						rows
+					}),
+					error: errors.userVariables,
+					keyPlaceholder: t.key,
+					valuePlaceholder: t.help.userVariableHint,
+					addLabel: t.addUserVariable
+				})
+			]
+		}),
+		/* @__PURE__ */ jsxs(Section, {
+			title: t.sectionInputForm,
+			open: wizardOn,
+			alert: !!errors.wizard,
+			children: [
+				/* @__PURE__ */ jsx(FieldLabel, {
+					label: t.fields.labelPosition,
+					yamlKey: "labelPosition",
+					description: t.help.labelPosition
+				}),
+				/* @__PURE__ */ jsx(ChoiceButtons, {
+					options: [{
+						value: "left",
+						label: t.labelsBeside
+					}, {
+						value: "top",
+						label: t.labelsAbove
+					}],
+					value: labelPosition,
+					onChange: setLabelPosition
+				}),
+				/* @__PURE__ */ jsx(ToggleField, {
+					label: t.fields.wizard,
+					yamlKey: "wizard",
+					description: t.help.wizard,
+					checked: wizardOn,
+					onChange: setWizard((on) => {
+						setWizardOn(on);
+						if (on && wizard["mode"] !== "wizard") {
+							setWizardFlags((current) => ({
+								...current,
+								allowJump: current.allowJump ?? true
+							}));
+							setSubmitLabel((current) => current || inputStrings.submitLabel);
+						}
+					})
+				}),
+				wizardOn && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					WIZARD_FLAGS.map((flag) => /* @__PURE__ */ jsx(FlagField, {
+						label: t.fields[flag],
+						yamlKey: flag,
+						description: t.help[flag],
+						value: wizardFlags[flag],
+						original: asRecord(wizard["navigation"])[flag],
+						fallback: flag === "showSteps",
+						onChange: setWizard((value) => setWizardFlags((current) => ({
+							...current,
+							[flag]: value
+						})))
+					}, flag)),
+					/* @__PURE__ */ jsx(Input, {
+						...labelled(t.fields.submitLabel, "submitLabel"),
+						description: t.help.submitLabel,
+						value: submitLabel,
+						onChange: (e) => setWizard(setSubmitLabel)(e.target.value)
+					}),
+					/* @__PURE__ */ jsx(ToggleField, {
+						label: t.fields.flatten,
+						yamlKey: "flatten",
+						description: t.help.wizardFlatten,
+						checked: flatten,
+						onChange: setWizard(setFlatten)
+					})
+				] })
+			]
+		})
+	] });
+	const shellProps = {
+		title: t.workflowSettings,
+		onClose,
+		dirty: dirty || newInputs.pending.length > 0 || pending,
+		locked: newInputs.dialog !== null,
+		saveDisabled: invalid,
+		onSubmit: () => {
+			if (saveEdit) onEdit(saveEdit);
+			onClose();
+		},
+		children
+	};
+	return renderShell ? renderShell(shellProps) : /* @__PURE__ */ jsx(DialogShell, { ...shellProps });
+}
+//#endregion
+export { INPUT_FORM_FIELDS, LINK_FIELDS, NEEDS_FIELDS, SESSION_FIELDS, WORKFLOW_FIELDS, WorkflowSettingsDialog };

package/dist/graph/editorApi.js

@@ -0,0 +1,8 @@
+//#region src/graph/editorApi.ts
+var TEXT_INPUT = "input, textarea, select, [contenteditable=\"true\"]";
+var typing = (target) => target instanceof Element && !!target.closest(TEXT_INPUT);
+function overlaps(rect, box) {
+	return rect.left <= box.right && rect.right >= box.left && rect.top <= box.bottom && rect.bottom >= box.top;
+}
+//#endregion
+export { overlaps, typing };