@parallelworks/ui 0.37.0 → 0.39.0

package/dist/graph/InputDialog.js

@@ -1,6 +1,28 @@
-import "classnames";
-import "react";
-import "react/jsx-runtime";
+import { useWorkflowEditing, useWorkflowEngine } from "../components/Provider.js";
+import { BiSolidTrashAlt } from "../icons/bi/BiSolidTrashAlt.js";
+import { FaArrowDown } from "../icons/fa/FaArrowDown.js";
+import { FaArrowUp } from "../icons/fa/FaArrowUp.js";
+import { FaEdit } from "../icons/fa/FaEdit.js";
+import { IoMdClose } from "../icons/io/IoMdClose.js";
+import { withPositionKeys } from "../components/keys.js";
+import Dropdown from "../components/Dropdown.js";
+import { FilterPill } from "../components/FilterPill.js";
+import { IconButton } from "../components/IconButton.js";
+import { Input, Textarea } from "../components/Input.js";
+import { useGraphEditorStrings, useInputsEditorStrings } from "./editorStrings.js";
+import { asRecord } from "./records.js";
+import { INPUT_YAML_PATH } from "../editor/settingsYaml.js";
+import { FIELD_TEXT_BOX, SuggestionInput } from "./SuggestionInput.js";
+import { AddRowButton, ChoiceButtons, DialogShell, EXPRESSION, ExpressionToggle, FieldError, GrowingTextarea, KeyHint, LabelledField, Section, SectionMemory, StringListEditor, SuggestedInput, ToggleField, diffPatch, expressionError, flagError, isEmptyPatch, isScalar, labelled, parseJson, parseScalar, sameValue, text, unchangedValue, useSectionMemory, withoutUndefined } from "./editorFields.js";
+import { FlagField, ValueOrInputField, inputRefs } from "./inputRefs.js";
+import { formatDuration, parseDuration } from "../form/utils/duration.js";
+import { FormEditingContext } from "../form/formEditing.js";
+import { DynamicForm } from "../form/Form.js";
+import { withInputLayouts } from "./inputLayout.js";
+import { NO_SCOPED, ViewSwitch, YamlPane, yamlProblem } from "./settingsViews.js";
+import cx from "classnames";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/InputDialog.tsx
 /** Input types by menu group, in the order the add menu lists them. */
 var INPUT_TYPE_GROUPS = [
@@ -200,6 +222,54 @@ var IN_NAMESPACE = [
 	NAMESPACE,
 	AUTOSELECT
 ];
+var SLIDER = {
+	key: "slider",
+	kind: "flag",
+	help: "slider"
+};
+var FLATTEN = {
+	key: "flatten",
+	kind: "bool",
+	help: "flatten"
+};
+var TEMPLATE = {
+	key: "template",
+	kind: "template",
+	help: "template",
+	required: true
+};
+var LIST_DEFAULT = {
+	key: "default",
+	kind: "rows",
+	help: "listDefault"
+};
+var DURATION_DEFAULT = {
+	key: "default",
+	kind: "duration",
+	help: "durationDefault"
+};
+var DISABLE_LABEL = {
+	key: "disableLabel",
+	kind: "text",
+	help: "disableLabel",
+	prose: true
+};
+var DISABLE_VALUE = {
+	key: "disableValue",
+	kind: "number",
+	help: "disableValue"
+};
+var OPTION_KEY = {
+	key: "option-key",
+	kind: "ref",
+	help: "optionKey",
+	refTypes: [
+		"dropdown",
+		"radio",
+		"string"
+	],
+	literal: false
+};
 var TYPE_PROPS = {
 	string: [
 		DEFAULT,
@@ -259,11 +329,7 @@ var TYPE_PROPS = {
 			kind: "number",
 			help: "step"
 		},
-		{
-			key: "slider",
-			kind: "flag",
-			help: "slider"
-		}
+		SLIDER
 	],
 	boolean: [{
 		key: "default",
@@ -283,17 +349,7 @@ var TYPE_PROPS = {
 	"color-picker": [DEFAULT],
 	dropdown: [
 		OPTIONS,
-		{
-			key: "option-key",
-			kind: "ref",
-			help: "optionKey",
-			refTypes: [
-				"dropdown",
-				"radio",
-				"string"
-			],
-			literal: false
-		},
+		OPTION_KEY,
 		DEFAULT_OBJECT,
 		PLACEHOLDER,
 		AUTOSELECT
@@ -319,11 +375,7 @@ var TYPE_PROPS = {
 		}
 	],
 	duration: [
-		{
-			key: "default",
-			kind: "duration",
-			help: "durationDefault"
-		},
+		DURATION_DEFAULT,
 		PLACEHOLDER,
 		{
 			key: "min",
@@ -335,40 +387,18 @@ var TYPE_PROPS = {
 			kind: "duration",
 			help: "maxDuration"
 		},
-		{
-			key: "disableLabel",
-			kind: "text",
-			help: "disableLabel",
-			prose: true
-		},
-		{
-			key: "disableValue",
-			kind: "number",
-			help: "disableValue"
-		}
+		DISABLE_LABEL,
+		DISABLE_VALUE
 	],
 	group: [{
 		key: "collapsed",
 		kind: "flag",
 		help: "collapsed",
 		conditional: true
-	}, {
-		key: "flatten",
-		kind: "bool",
-		help: "flatten"
-	}],
+	}, FLATTEN],
 	list: [
-		{
-			key: "template",
-			kind: "template",
-			help: "template",
-			required: true
-		},
-		{
-			key: "default",
-			kind: "rows",
-			help: "listDefault"
-		},
+		TEMPLATE,
+		LIST_DEFAULT,
 		{
 			key: "items-collapsible",
 			kind: "flag",
@@ -552,7 +582,22 @@ var COMMON_KEYS = {
 	step: ["description"]
 };
 var ALL_COMMON = [...TEXT_FIELDS, ...FLAG_FIELDS];
-[...ALL_COMMON, ...Object.values(TYPE_PROPS).flatMap((props) => props.map((prop) => prop.key))];
+var KNOWN_KEYS = /* @__PURE__ */ new Set([
+	"type",
+	...ALL_COMMON,
+	...Object.values(TYPE_PROPS).flatMap((props) => props.map((prop) => prop.key)),
+	"items",
+	"template",
+	"options"
+]);
+var LANGUAGES = [
+	"bash",
+	"python",
+	"yaml",
+	"json",
+	"javascript",
+	"shell"
+];
 function inputTypes() {
 	return INPUT_TYPE_GROUPS.flatMap(([, types]) => types);
 }
@@ -569,6 +614,972 @@ function offeredInputKeys(editing, type) {
 		...children ? [children] : []
 	];
 }
+/** The starting definition of a new input of `type`, with what the schema requires. */
+function newInputDefinition(type) {
+	switch (type) {
+		case "dropdown":
+		case "multi-dropdown":
+		case "radio":
+		case "checkbox-group": return {
+			type,
+			options: [{
+				value: "one",
+				label: "One"
+			}, {
+				value: "two",
+				label: "Two"
+			}]
+		};
+		case "group": return {
+			type,
+			items: {}
+		};
+		case "list": return {
+			type,
+			template: { value: { type: "string" } }
+		};
+		case "header": return {
+			type,
+			text: ""
+		};
+		case "step": return {
+			type,
+			title: "",
+			options: {}
+		};
+		default: return { type };
+	}
+}
+function optionsDraft(value) {
+	if (typeof value === "string") return {
+		mode: "expression",
+		rows: [],
+		text: value
+	};
+	if (Array.isArray(value)) {
+		const rows = [];
+		for (const item of value) if (isScalar(item)) rows.push({
+			value: String(item),
+			label: "",
+			bare: true,
+			original: item
+		});
+		else if (typeof item === "object" && item !== null) {
+			const { value: optionValue, label, ...rest } = item;
+			if (!isScalar(optionValue) || label !== void 0 && !isScalar(label)) return {
+				mode: "json",
+				rows: [],
+				text: JSON.stringify(value, null, 2)
+			};
+			rows.push({
+				value: String(optionValue),
+				original: optionValue,
+				label: text(label),
+				...Object.keys(rest).length > 0 ? { rest } : {}
+			});
+		}
+		return {
+			mode: "list",
+			rows,
+			text: ""
+		};
+	}
+	if (value !== void 0 && value !== null) return {
+		mode: "byKey",
+		rows: [],
+		text: JSON.stringify(value, null, 2)
+	};
+	return {
+		mode: "list",
+		rows: [],
+		text: ""
+	};
+}
+function optionsValue(draft, { labelled = false, textValues = false }) {
+	if (draft.mode === "expression") return draft.text.trim() || void 0;
+	if (draft.mode === "byKey" || draft.mode === "json") return draft.text.trim() ? parseJson(draft.text).value : void 0;
+	return draft.rows.map((row) => {
+		const written = unchangedValue(row.value, row.original) ? row.original : parseScalar(row.value.trim());
+		const value = textValues && isScalar(written) ? String(written) : written;
+		if (row.bare && !row.label.trim() && !row.rest && typeof value === "string") return value;
+		const label = row.label.trim() || (labelled || typeof value !== "string" ? row.value.trim() : "");
+		return {
+			value,
+			...label ? { label } : {},
+			...row.rest
+		};
+	});
+}
+function optionsError(draft, t, g) {
+	if (draft.mode === "expression") return draft.text.trim() ? expressionError(draft.text, g) : g.required;
+	if (draft.mode === "byKey" || draft.mode === "json") {
+		const parsed = parseJson(draft.text);
+		if (!parsed.ok) return g.invalidJson;
+		if (draft.mode === "json") return Array.isArray(parsed.value) ? void 0 : t.optionsJsonShape;
+		const keyed = asRecord(parsed.value);
+		return parsed.value === keyed && Object.values(keyed).length > 0 && Object.values(keyed).every(Array.isArray) ? void 0 : t.optionsByKeyShape;
+	}
+	return draft.rows.length === 0 || draft.rows.some((row) => !row.value.trim()) ? t.needsOptions : void 0;
+}
+function OptionsEditor({ draft, onChange, error, keyed, described }) {
+	const t = useInputsEditorStrings();
+	const update = (i, patch) => onChange({
+		...draft,
+		rows: draft.rows.map((row, j) => j === i ? {
+			...row,
+			...patch
+		} : row)
+	});
+	const modes = [
+		{
+			value: "list",
+			label: t.optionsList
+		},
+		...keyed || draft.mode === "byKey" ? [{
+			value: "byKey",
+			label: t.optionsByKey
+		}] : [],
+		...draft.mode === "json" ? [{
+			value: "json",
+			label: t.optionsJson
+		}] : []
+	];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [
+			draft.mode !== "expression" && modes.length > 1 && /* @__PURE__ */ jsx(ChoiceButtons, {
+				options: modes,
+				value: draft.mode,
+				onChange: (mode) => onChange({
+					...draft,
+					mode
+				})
+			}),
+			draft.mode === "list" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				draft.rows.length > 0 && /* @__PURE__ */ jsxs("div", {
+					"aria-hidden": "true",
+					className: "flex items-center gap-2 text-xs theme-muted-text",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "w-2/5",
+							children: t.optionValue
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "flex-1",
+							children: t.optionLabel
+						}),
+						described && /* @__PURE__ */ jsx("div", {
+							className: "flex-1",
+							children: t.optionDescription
+						}),
+						/* @__PURE__ */ jsx("div", { className: "w-7 shrink-0" })
+					]
+				}),
+				withPositionKeys(draft.rows).map(({ key, item: row }, i) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "w-2/5",
+							children: /* @__PURE__ */ jsx(Input, {
+								mono: true,
+								"aria-label": t.optionValue,
+								placeholder: t.optionValue,
+								value: row.value,
+								onChange: (e) => update(i, { value: e.target.value })
+							})
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "flex-1",
+							children: /* @__PURE__ */ jsx(Input, {
+								"aria-label": t.optionLabel,
+								placeholder: t.optionLabel,
+								value: row.label,
+								onChange: (e) => update(i, { label: e.target.value })
+							})
+						}),
+						described && /* @__PURE__ */ jsx("div", {
+							className: "flex-1",
+							children: /* @__PURE__ */ jsx(Input, {
+								"aria-label": t.optionDescription,
+								placeholder: t.optionDescription,
+								value: text(row.rest?.["description"]),
+								onChange: (e) => {
+									const { description: _old, ...rest } = row.rest ?? {};
+									update(i, { rest: e.target.value ? {
+										...rest,
+										description: e.target.value
+									} : rest });
+								}
+							})
+						}),
+						/* @__PURE__ */ jsx(IconButton, {
+							icon: /* @__PURE__ */ jsx(IoMdClose, { className: "h-4 w-4" }),
+							label: t.removeOption,
+							variant: "ghost",
+							size: "sm",
+							onClick: () => onChange({
+								...draft,
+								rows: draft.rows.filter((_, j) => j !== i)
+							})
+						})
+					]
+				}, key)),
+				/* @__PURE__ */ jsx(AddRowButton, {
+					label: t.addOption,
+					onClick: () => onChange({
+						...draft,
+						rows: [...draft.rows, {
+							value: "",
+							label: ""
+						}]
+					})
+				})
+			] }) : draft.mode === "expression" ? /* @__PURE__ */ jsx(Input, {
+				mono: true,
+				"aria-label": t.fields.options,
+				value: draft.text,
+				onChange: (e) => onChange({
+					...draft,
+					text: e.target.value
+				})
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+				className: "text-xs theme-muted-text",
+				children: draft.mode === "byKey" ? t.optionsByKeyHelp : t.optionsJsonHelp
+			}), /* @__PURE__ */ jsx(Textarea, {
+				mono: true,
+				"aria-label": t.fields.options,
+				rows: 6,
+				value: draft.text,
+				placeholder: draft.mode === "byKey" ? "{\n  \"aws\": [\"us-east-1\", \"us-west-2\"],\n  \"google\": [\"us-central1\"]\n}" : void 0,
+				onChange: (e) => onChange({
+					...draft,
+					text: e.target.value
+				})
+			})] }),
+			/* @__PURE__ */ jsx(FieldError, { message: error })
+		]
+	});
+}
+function impliesDraft(value) {
+	return Object.fromEntries(Object.entries(asRecord(value)).map(([key, list]) => [key, Array.isArray(list) ? list.map((item) => String(item)) : []]));
+}
+/** Each option with the others as switches: ticking that option in the form ticks these too. */
+function ImpliesEditor({ draft, options, onChange }) {
+	const t = useInputsEditorStrings();
+	const listed = options.filter((option) => option.value.trim());
+	if (listed.length < 2) return /* @__PURE__ */ jsx("div", {
+		className: "text-xs theme-muted-text",
+		children: t.impliesNeedsOptions
+	});
+	const nameOf = (value) => listed.find((option) => option.value === value)?.label.trim() || value;
+	const toggle = (from, to) => {
+		const current = draft[from] ?? [];
+		onChange({
+			...draft,
+			[from]: current.includes(to) ? current.filter((value) => value !== to) : [...current, to]
+		});
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-2",
+		children: listed.map((option) => /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center gap-1.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "mr-1 text-sm font-medium",
+				children: t.impliesWhen(nameOf(option.value))
+			}), listed.filter((other) => other.value !== option.value).map((other) => {
+				return /* @__PURE__ */ jsx(FilterPill, {
+					active: (draft[option.value] ?? []).includes(other.value),
+					onClick: () => toggle(option.value, other.value),
+					children: nameOf(other.value)
+				}, other.value);
+			})]
+		}, option.value))
+	});
+}
+/** A duration's checkbox that sends a set value in place of a time, such as -1 for none. */
+function OptOutCheckbox({ label, value, onLabel, onValue, errors }) {
+	const t = useInputsEditorStrings();
+	const [on, setOn] = useState(label.trim() !== "" || value.trim() !== "");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3",
+		children: [/* @__PURE__ */ jsx(ToggleField, {
+			label: t.fields.optOut,
+			description: t.help.optOut,
+			checked: on,
+			onChange: (next) => {
+				setOn(next);
+				if (!next) {
+					onLabel("");
+					onValue("");
+				}
+			}
+		}), on && /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3 border-l theme-border pl-4",
+			children: [/* @__PURE__ */ jsx(Input, {
+				...labelled(t.fields.disableLabel, "disableLabel"),
+				description: t.help.disableLabel,
+				value: label,
+				error: errors.label,
+				placeholder: t.optOutPlaceholder,
+				onChange: (e) => onLabel(e.target.value)
+			}), /* @__PURE__ */ jsx(Input, {
+				mono: true,
+				...labelled(t.fields.disableValue, "disableValue"),
+				description: t.help.disableValue,
+				value,
+				error: errors.value,
+				placeholder: "-1",
+				onChange: (e) => onValue(e.target.value)
+			})]
+		})]
+	});
+}
+function TypeSelect({ value, onChange, allowStep, disabled }) {
+	const t = useInputsEditorStrings();
+	const id = useId();
+	const types = t.types;
+	const help = t.typeHelp;
+	const known = inputTypes().includes(value);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-baseline gap-x-1.5",
+				children: [/* @__PURE__ */ jsx("label", {
+					htmlFor: id,
+					className: "text-[0.8125rem] font-medium text-(--theme-app)",
+					children: t.inputType
+				}), /* @__PURE__ */ jsx(KeyHint, {
+					label: t.inputType,
+					yamlKey: "type"
+				})]
+			}),
+			/* @__PURE__ */ jsx(Dropdown, {
+				id,
+				value,
+				disabled,
+				textBoxClassName: FIELD_TEXT_BOX,
+				options: [...known ? [] : [{
+					label: value,
+					value
+				}], ...INPUT_TYPE_GROUPS.map(([group, list]) => ({
+					category: t.typeGroups[group],
+					options: list.filter((type) => allowStep || type !== "step" || value === "step").map((type) => ({
+						label: types[type] ?? type,
+						value: type
+					}))
+				}))],
+				onChange: (next) => {
+					if (typeof next === "string" && next) onChange(next);
+				}
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-xs text-(--theme-muted-text-color)",
+				children: help[value] ?? t.help.type
+			})
+		]
+	});
+}
+var SCALAR_KINDS = /* @__PURE__ */ new Set([
+	"text",
+	"textarea",
+	"number",
+	"flag",
+	"bool",
+	"language",
+	"duration",
+	"ref",
+	"choice"
+]);
+function effectiveKind(prop, original) {
+	if (original === null || typeof original !== "object") return prop.kind;
+	return (Array.isArray(original) ? prop.nested === "any" : prop.nested !== void 0) && prop.kind !== "options" && prop.kind !== "template" && prop.kind !== "providers" ? "json" : prop.kind;
+}
+function listItemText(item) {
+	if (isScalar(item)) return String(item);
+	const value = asRecord(item)["value"];
+	return isScalar(value) ? String(value) : JSON.stringify(item);
+}
+function draftOf(kind, value) {
+	switch (kind) {
+		case "flag": return typeof value === "boolean" || typeof value === "string" ? value : void 0;
+		case "bool": return typeof value === "boolean" ? value : void 0;
+		case "json": return value === void 0 ? "" : JSON.stringify(value, null, 2);
+		case "options": return optionsDraft(value);
+		case "providers": return Array.isArray(value) ? value.join(", ") : text(value);
+		case "template": return typeof value === "string" ? value : asRecord(value);
+		case "implies": return impliesDraft(value);
+		case "rows": return typeof value === "string" ? {
+			expression: value,
+			rows: []
+		} : {
+			expression: void 0,
+			rows: Array.isArray(value) ? value.map(asRecord) : []
+		};
+		case "duration": return typeof value === "number" && value >= 0 ? formatDuration(value) : text(value);
+		case "number": return typeof value === "string" && value.trim() !== "" && !EXPRESSION.test(value.trim()) && Number.isFinite(Number(value)) ? JSON.stringify(value) : text(value);
+		case "perCopy": return Array.isArray(value) ? {
+			list: true,
+			text: "",
+			values: value.map(listItemText)
+		} : {
+			list: false,
+			text: text(value),
+			values: []
+		};
+		case "values": return typeof value === "string" && EXPRESSION.test(value.trim()) ? {
+			expression: value,
+			values: []
+		} : {
+			expression: void 0,
+			values: (Array.isArray(value) ? value : value === void 0 ? [] : [value]).map(listItemText)
+		};
+		default:
+			if (Array.isArray(value) && value.every((item) => typeof item === "string")) return value.join("\n");
+			return value !== null && typeof value === "object" ? JSON.stringify(value) : text(value);
+	}
+}
+var OPTION_KEYS = {
+	radio: [],
+	"checkbox-group": ["description"]
+};
+function textOption(option, keys) {
+	if (isScalar(option)) return String(option);
+	const record = asRecord(option);
+	if (option !== record) return option;
+	return Object.fromEntries(Object.entries(record).filter(([key]) => key === "value" || key === "label" || keys.includes(key)).map(([key, value]) => [key, isScalar(value) ? String(value) : value]));
+}
+function fitsTextOption(option, keys) {
+	if (typeof option === "string") return true;
+	const record = asRecord(option);
+	return option === record && typeof record["value"] === "string" && Object.entries(record).every(([key, value]) => (key === "value" || key === "label" || keys.includes(key)) && typeof value === "string");
+}
+function writtenValue(kind, draft, context = {}) {
+	switch (kind) {
+		case "flag":
+		case "bool": return draft;
+		case "json": {
+			const raw = String(draft ?? "").trim();
+			return raw ? parseJson(raw).value : void 0;
+		}
+		case "options": return optionsValue(draft, context);
+		case "perCopy": {
+			const perCopy = draft;
+			const values = perCopy.values.map((value) => value.trim()).filter(Boolean);
+			return perCopy.list ? values.length > 0 ? values : void 0 : perCopy.text.trim() || void 0;
+		}
+		case "values": {
+			const list = draft;
+			if (list.expression !== void 0) return list.expression.trim() || void 0;
+			const values = list.values.map((value) => value.trim()).filter(Boolean);
+			if (values.length === 0) return;
+			return context.textValues ? values : values.map(parseScalar);
+		}
+		case "rows": {
+			const list = draft;
+			if (list.expression !== void 0) return list.expression.trim() || void 0;
+			const rows = list.rows.map((row) => Object.fromEntries(Object.entries(row).filter(([, value]) => value !== "" && value !== void 0 && value !== null)));
+			return rows.length > 0 ? rows : void 0;
+		}
+		case "duration": {
+			const raw = String(draft ?? "").trim();
+			if (!raw) return;
+			if (EXPRESSION.test(raw)) return raw;
+			return parseDuration(raw) ?? (/^-\d+$/.test(raw) ? Number(raw) : raw);
+		}
+		case "ref":
+		case "choice": return String(draft ?? "").trim() || void 0;
+		case "number": {
+			const raw = String(draft ?? "").trim();
+			if (!raw) return;
+			return EXPRESSION.test(raw) ? raw : Number(raw);
+		}
+		case "implies": {
+			const entries = Object.entries(draft).filter(([, values]) => values.length > 0);
+			return entries.length > 0 ? Object.fromEntries(entries) : void 0;
+		}
+		case "providers": {
+			const raw = String(draft ?? "").trim();
+			if (!raw) return;
+			return EXPRESSION.test(raw) ? raw : raw.split(",").map((item) => item.trim()).filter(Boolean);
+		}
+		case "template": return typeof draft === "string" ? draft.trim() || void 0 : draft;
+		case "textarea": return String(draft ?? "") === "" ? void 0 : String(draft);
+		default: {
+			const raw = String(draft ?? "").trim();
+			return raw ? raw : void 0;
+		}
+	}
+}
+function valueError(prop, kind, draft, t, g) {
+	const value = writtenValue(kind, draft);
+	if (prop.required && (value === void 0 || value === "")) return g.required;
+	switch (kind) {
+		case "json": {
+			const raw = String(draft ?? "").trim();
+			const parsed = parseJson(raw);
+			if (!raw) return;
+			if (!parsed.ok) return g.invalidJson;
+			const list = Array.isArray(parsed.value);
+			return !list && parsed.value === asRecord(parsed.value) || list && prop.nested === "any" ? void 0 : prop.nested === "any" ? t.jsonObjectOrList : t.jsonObject;
+		}
+		case "values": {
+			const list = draft;
+			return list.expression !== void 0 ? expressionError(list.expression, g) : void 0;
+		}
+		case "rows": {
+			const list = draft;
+			return list.expression !== void 0 ? expressionError(list.expression, g) : void 0;
+		}
+		case "duration": {
+			const raw = String(draft ?? "").trim();
+			return raw && !EXPRESSION.test(raw) && parseDuration(raw) === null ? t.invalidDurationText : void 0;
+		}
+		case "number": {
+			const raw = String(draft ?? "").trim();
+			if (raw && prop.wholeFrom !== void 0) return /^\d+$/.test(raw) && Number(raw) >= prop.wholeFrom ? void 0 : t.wholeNumberFrom(prop.wholeFrom);
+			return raw && !EXPRESSION.test(raw) && !Number.isFinite(Number(raw)) ? t.invalidNumber : void 0;
+		}
+		case "flag": return flagError(draft, g);
+		case "options": return optionsError(draft, t, g);
+		case "ref": {
+			const raw = String(draft ?? "").trim();
+			if (!raw || EXPRESSION.test(raw)) return;
+			if (prop.literal === false) return g.invalidExpressionValue;
+			return prop.choices && !prop.choices.includes(raw) ? g.invalidChoice(prop.key) : void 0;
+		}
+		case "choice": {
+			const raw = String(draft ?? "").trim();
+			return raw && prop.choices && !prop.choices.includes(raw) ? g.invalidChoice(prop.key) : void 0;
+		}
+		case "template":
+			if (typeof draft === "string") return draft.trim() ? expressionError(draft, g) : g.required;
+			return Object.keys(asRecord(draft)).length === 0 ? t.needsFields : void 0;
+		default:
+			if (prop.pattern && typeof value === "string" && !EXPRESSION.test(value)) try {
+				new RegExp(value, "g");
+			} catch {
+				return t.invalidPattern;
+			}
+			return prop.choices && typeof value === "string" && !prop.choices.includes(value) ? g.invalidChoice(prop.key) : void 0;
+	}
+}
+/** A list's template fields, edited here since the form repeats them per row. */
+function TemplateFields({ fields, onChange, error, inputs, adopt, home, onDialog, onFieldKey }) {
+	const t = useInputsEditorStrings();
+	const workflowEditing = useWorkflowEditing();
+	const { freeName } = workflowEditing;
+	const [editing, setEditing] = useState(null);
+	const open = editing !== null;
+	useEffect(() => {
+		onDialog(open);
+	}, [onDialog, open]);
+	const names = Object.keys(fields).filter((name) => name !== "$meta");
+	const types = t.types;
+	const update = (edit) => {
+		const next = workflowEditing.applyGraphEdit({
+			yml: workflowEditing.dumpYaml({ on: { execute: { inputs: fields } } }),
+			layout: void 0
+		}, withInputLayouts(workflowEditing, fields, edit));
+		onChange(asRecord(workflowEditing.workflowInputsSchema(asRecord(workflowEditing.loadYaml(next.yml)))));
+	};
+	const move = (from, to) => {
+		const name = names[from];
+		if (name) update({
+			type: "moveInputs",
+			paths: [[name]],
+			parent: [],
+			index: to > from ? to + 1 : to
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [
+			names.length === 0 && /* @__PURE__ */ jsx("div", {
+				className: "text-xs theme-muted-text",
+				children: t.noFields
+			}),
+			names.map((name, i) => {
+				const type = text(asRecord(fields[name])["type"]);
+				return /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 rounded-md border theme-border px-2 py-1 text-sm",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "font-mono",
+							children: name
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "rounded border theme-border px-1 text-xs theme-muted-text",
+							children: types[type] ?? type
+						}),
+						/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+						/* @__PURE__ */ jsx(IconButton, {
+							icon: /* @__PURE__ */ jsx(FaEdit, { className: "h-3.5 w-3.5" }),
+							label: t.editInput,
+							variant: "ghost",
+							size: "sm",
+							onClick: () => setEditing({ name })
+						}),
+						/* @__PURE__ */ jsx(IconButton, {
+							icon: /* @__PURE__ */ jsx(FaArrowUp, { className: "h-3.5 w-3.5" }),
+							label: t.moveUp,
+							variant: "ghost",
+							size: "sm",
+							disabled: i === 0,
+							onClick: () => move(i, i - 1)
+						}),
+						/* @__PURE__ */ jsx(IconButton, {
+							icon: /* @__PURE__ */ jsx(FaArrowDown, { className: "h-3.5 w-3.5" }),
+							label: t.moveDown,
+							variant: "ghost",
+							size: "sm",
+							disabled: i === names.length - 1,
+							onClick: () => move(i, i + 1)
+						}),
+						/* @__PURE__ */ jsx(IconButton, {
+							icon: /* @__PURE__ */ jsx(BiSolidTrashAlt, { className: "h-3.5 w-3.5" }),
+							label: t.deleteInput,
+							variant: "ghost",
+							size: "sm",
+							onClick: () => {
+								update({
+									type: "deleteInput",
+									path: [name]
+								});
+								onFieldKey(name, void 0);
+							}
+						})
+					]
+				}, name);
+			}),
+			/* @__PURE__ */ jsx(FieldError, { message: error }),
+			/* @__PURE__ */ jsx(AddRowButton, {
+				label: t.addField,
+				onClick: () => setEditing({ create: true })
+			}),
+			editing && /* @__PURE__ */ jsx(InputDialog, {
+				name: "name" in editing ? editing.name : nextFieldName(freeName, names),
+				definition: "name" in editing ? asRecord(fields[editing.name]) : newInputDefinition("string"),
+				isNew: !("name" in editing),
+				siblings: names.filter((name) => !("name" in editing) || name !== editing.name),
+				allowStep: false,
+				inputs,
+				home,
+				onClose: () => setEditing(null),
+				onSave: (name, definition, patch, extra) => {
+					adopt(extra);
+					if ("name" in editing) {
+						update({
+							type: "updateInput",
+							path: [editing.name],
+							name,
+							...patch
+						});
+						if (name !== editing.name) onFieldKey(editing.name, name);
+					} else update({
+						type: "addInput",
+						parent: [],
+						name,
+						definition
+					});
+					setEditing(null);
+				}
+			})
+		]
+	});
+}
+function nextFieldName(freeName, names) {
+	return freeName(names, (n) => `field_${n}`);
+}
+function ValuesField({ label, draft, suggestions, onChange, error }) {
+	const t = useInputsEditorStrings();
+	if (draft.expression === void 0) return /* @__PURE__ */ jsx(StringListEditor, {
+		label,
+		values: draft.values,
+		onChange: (values) => onChange({
+			...draft,
+			values
+		}),
+		addLabel: t.addValue,
+		suggestions,
+		error
+	});
+	return /* @__PURE__ */ jsx(Input, {
+		mono: true,
+		"aria-label": label,
+		value: draft.expression,
+		error,
+		onChange: (e) => onChange({
+			...draft,
+			expression: e.target.value
+		})
+	});
+}
+/** A list's default rows, entered through the same form a run shows. */
+function RowsField({ draft, template, label, onChange, error }) {
+	const { convertInputs } = useWorkflowEngine();
+	const formJSONs = useMemo(() => convertInputs({ rows: {
+		type: "list",
+		label,
+		template
+	} }), [
+		convertInputs,
+		label,
+		template
+	]);
+	const touched = useRef(false);
+	const touch = () => {
+		touched.current = true;
+	};
+	if (draft.expression !== void 0) return /* @__PURE__ */ jsx(Input, {
+		mono: true,
+		"aria-label": label,
+		value: draft.expression,
+		error,
+		onChange: (e) => onChange({
+			...draft,
+			expression: e.target.value
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2 rounded-md border theme-border p-2",
+		onClickCapture: touch,
+		onInputCapture: touch,
+		onKeyDownCapture: touch,
+		children: [/* @__PURE__ */ jsx(FormEditingContext.Provider, {
+			value: null,
+			children: /* @__PURE__ */ jsx(DynamicForm, {
+				formJSONs,
+				initialValues: { rows: draft.rows },
+				labelPosition: "top",
+				workflowForm: true,
+				setValues: (values) => {
+					if (touched.current) {
+						const rows = values["rows"];
+						onChange({
+							expression: void 0,
+							rows: Array.isArray(rows) ? rows.map(asRecord) : []
+						});
+					}
+				}
+			}, JSON.stringify(template))
+		}), /* @__PURE__ */ jsx(FieldError, { message: error })]
+	});
+}
+function PropField({ prop, kind, draft, original, error, onChange, suggestions, inputType, optionRows, source, adopt, allInputs, home, template, inputLabel, onDialog, onFieldKey }) {
+	const t = useInputsEditorStrings();
+	const description = t.help[prop.help];
+	const name = t.fields[prop.label ?? prop.key] ?? prop.key;
+	const field = {
+		label: name,
+		yamlKey: prop.key,
+		description
+	};
+	switch (kind) {
+		case "flag": return /* @__PURE__ */ jsx(FlagField, {
+			...field,
+			value: draft,
+			original,
+			fallback: prop.fallback ?? false,
+			onChange,
+			source: prop.conditional ? source : void 0
+		});
+		case "ref": return /* @__PURE__ */ jsx(ValueOrInputField, {
+			...field,
+			value: String(draft ?? ""),
+			onChange,
+			source,
+			types: prop.refTypes ?? [],
+			literal: prop.literal ?? true,
+			required: prop.required ?? false,
+			error,
+			suggestions: prop.choices ?? []
+		});
+		case "bool": {
+			const fallback = prop.fallback ?? false;
+			return /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx(ToggleField, {
+					...field,
+					checked: typeof draft === "boolean" ? draft : fallback,
+					onChange: (on) => onChange(on !== fallback ? on : original === on ? on : void 0)
+				}), /* @__PURE__ */ jsx(FieldError, { message: error })]
+			});
+		}
+		case "options": {
+			const options = draft;
+			return /* @__PURE__ */ jsx(LabelledField, {
+				...field,
+				actions: /* @__PURE__ */ jsx(ExpressionToggle, {
+					active: options.mode === "expression",
+					onChange: (on) => onChange({
+						...options,
+						mode: on ? "expression" : "list",
+						text: ""
+					})
+				}),
+				children: /* @__PURE__ */ jsx(OptionsEditor, {
+					draft,
+					onChange,
+					error,
+					keyed: inputType === "dropdown",
+					described: inputType === "checkbox-group"
+				})
+			});
+		}
+		case "perCopy": {
+			const perCopy = draft;
+			return /* @__PURE__ */ jsx(LabelledField, {
+				...field,
+				actions: /* @__PURE__ */ jsxs("label", {
+					className: "flex cursor-pointer items-center gap-1.5 text-xs theme-muted-text",
+					children: [/* @__PURE__ */ jsx("input", {
+						type: "checkbox",
+						checked: perCopy.list,
+						onChange: (e) => onChange({
+							...perCopy,
+							list: e.target.checked,
+							values: e.target.checked && perCopy.values.length === 0 && perCopy.text.trim() ? [perCopy.text] : perCopy.values
+						})
+					}), t.onePerCopy]
+				}),
+				children: perCopy.list ? /* @__PURE__ */ jsx(ValuesField, {
+					label: name,
+					draft: {
+						expression: void 0,
+						values: perCopy.values
+					},
+					suggestions: [],
+					onChange: (next) => onChange({
+						...perCopy,
+						values: next.values
+					}),
+					error
+				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SuggestionInput, {
+					"aria-label": name,
+					value: perCopy.text,
+					suggestions: [],
+					onChange: (next) => onChange({
+						...perCopy,
+						text: next
+					})
+				}), /* @__PURE__ */ jsx(FieldError, { message: error })] })
+			});
+		}
+		case "values": return /* @__PURE__ */ jsx(LabelledField, {
+			...field,
+			actions: /* @__PURE__ */ jsx(ExpressionToggle, {
+				active: draft.expression !== void 0,
+				onChange: (on) => onChange({
+					expression: on ? "" : void 0,
+					values: []
+				})
+			}),
+			children: /* @__PURE__ */ jsx(ValuesField, {
+				label: name,
+				draft,
+				suggestions: inputType === "multi-dropdown" || inputType === "checkbox-group" ? optionRows.map((row) => row.value.trim()).filter(Boolean) : [],
+				onChange,
+				error
+			})
+		});
+		case "rows": return /* @__PURE__ */ jsx(LabelledField, {
+			...field,
+			actions: /* @__PURE__ */ jsx(ExpressionToggle, {
+				active: draft.expression !== void 0,
+				onChange: (on) => onChange({
+					expression: on ? "" : void 0,
+					rows: []
+				})
+			}),
+			children: /* @__PURE__ */ jsx(RowsField, {
+				draft,
+				template,
+				label: inputLabel,
+				onChange,
+				error
+			})
+		});
+		case "duration": return /* @__PURE__ */ jsx(Input, {
+			mono: true,
+			...labelled(name, prop.key),
+			description,
+			value: String(draft ?? ""),
+			placeholder: "HH:MM:SS",
+			error,
+			onChange: (e) => onChange(e.target.value)
+		});
+		case "template": return /* @__PURE__ */ jsx(LabelledField, {
+			...field,
+			actions: /* @__PURE__ */ jsx(ExpressionToggle, {
+				active: typeof draft === "string",
+				onChange: (on) => onChange(on ? "" : {})
+			}),
+			children: typeof draft === "string" ? /* @__PURE__ */ jsx(Input, {
+				mono: true,
+				"aria-label": name,
+				value: draft,
+				error,
+				onChange: (e) => onChange(e.target.value)
+			}) : /* @__PURE__ */ jsx(TemplateFields, {
+				fields: asRecord(draft),
+				onChange,
+				error,
+				inputs: allInputs,
+				adopt,
+				home,
+				onDialog,
+				onFieldKey
+			})
+		});
+		case "implies": return /* @__PURE__ */ jsx(LabelledField, {
+			...field,
+			children: /* @__PURE__ */ jsx(ImpliesEditor, {
+				draft,
+				options: optionRows,
+				onChange
+			})
+		});
+		case "choice": {
+			const choiceLabels = t.choices[prop.key];
+			return /* @__PURE__ */ jsxs(LabelledField, {
+				...field,
+				children: [/* @__PURE__ */ jsx(ChoiceButtons, {
+					options: (prop.choices ?? []).map((choice) => ({
+						value: choice,
+						label: choiceLabels?.[choice] ?? choice
+					})),
+					value: String(draft ?? "") || (prop.choices?.[0] ?? ""),
+					onChange
+				}), /* @__PURE__ */ jsx(FieldError, { message: error })]
+			});
+		}
+		case "json":
+		case "textarea": return prop.grow ? /* @__PURE__ */ jsx(GrowingTextarea, {
+			mono: !prop.prose,
+			...labelled(name, prop.key),
+			description,
+			value: String(draft ?? ""),
+			...error ? { error } : {},
+			onChange: (e) => onChange(e.target.value)
+		}) : /* @__PURE__ */ jsx(Textarea, {
+			mono: !prop.prose,
+			...labelled(name, prop.key),
+			description,
+			rows: kind === "json" ? 4 : 6,
+			value: String(draft ?? ""),
+			...error ? { error } : {},
+			onChange: (e) => onChange(e.target.value)
+		});
+		default: return /* @__PURE__ */ jsx(SuggestedInput, {
+			...field,
+			value: String(draft ?? ""),
+			onChange,
+			suggestions: prop.choices ?? (kind === "language" ? LANGUAGES : suggestions),
+			error
+		});
+	}
+}
 function commonProp(key) {
 	const flag = FLAG_FIELDS.includes(key);
 	return {
@@ -584,13 +1595,516 @@ var STEP_DESCRIPTION = {
 	...commonProp("description"),
 	kind: "perCopy"
 };
+function commonPropsOf(type) {
+	return commonKeys(type).map((key) => type === "step" && key === "description" ? STEP_DESCRIPTION : commonProp(key));
+}
+/** Every field a type has, as the type an input had before a type change read its settings. */
+function propsOf(type) {
+	return [...commonPropsOf(type), ...TYPE_PROPS[type] ?? []];
+}
+function isCommon(prop) {
+	return COMMON_PROPS.some((common) => draftKey(common) === draftKey(prop));
+}
 function draftKey(prop) {
 	return `${prop.kind}:${prop.key}`;
 }
-[...new Map([
+var ALL_PROPS = [...new Map([
 	...COMMON_PROPS,
 	STEP_DESCRIPTION,
 	...Object.values(TYPE_PROPS).flat()
 ].map((prop) => [draftKey(prop), prop])).values()];
+var SUGGESTED_NAMES = {
+	"compute-clusters": "cluster",
+	"compute-resources": "cluster",
+	"slurm-accounts": "account",
+	"slurm-partitions": "partition",
+	"kubernetes-clusters": "kubernetes_cluster",
+	"kubernetes-namespaces": "namespace",
+	region: "region",
+	boolean: "enabled",
+	dropdown: "choice",
+	"multi-dropdown": "choices",
+	string: "text"
+};
+function allNames(editing, map, out) {
+	for (const [name, value] of Object.entries(map)) {
+		out.add(name);
+		const definition = asRecord(value);
+		const childKey = editing.inputChildrenKey(definition["type"]);
+		if (childKey) allNames(editing, asRecord(definition[childKey]), out);
+	}
+	return out;
+}
+function suggestedName(editing, type, inputs) {
+	const taken = allNames(editing, inputs, /* @__PURE__ */ new Set());
+	const base = SUGGESTED_NAMES[type];
+	return base ? editing.nextName(taken, base) : editing.newInputName(taken);
+}
+function defaultHome(inputs) {
+	const wizard = asRecord(asRecord(inputs["$meta"])["wizard"]);
+	const last = Object.entries(inputs).filter(([name, value]) => name !== "$meta" && asRecord(value)["type"] === "step").at(-1)?.[0];
+	return wizard["mode"] === "wizard" && last ? { parent: [last] } : { parent: [] };
+}
+function homeContainer(editing, inputs, home) {
+	const [step] = home.parent;
+	if (!step) return inputs;
+	const key = editing.inputChildrenKey(text(asRecord(inputs[step])["type"]));
+	return key ? asRecord(asRecord(inputs[step])[key]) : {};
+}
+function withPending(editing, inputs, home, pending) {
+	const added = Object.fromEntries(pending.map((input) => [input.name, input.definition]));
+	const [step] = home.parent;
+	if (!step) return {
+		...inputs,
+		...added
+	};
+	const definition = asRecord(inputs[step]);
+	const key = editing.inputChildrenKey(text(definition["type"])) ?? "options";
+	return {
+		...inputs,
+		[step]: {
+			...definition,
+			[key]: {
+				...homeContainer(editing, inputs, home),
+				...added
+			}
+		}
+	};
+}
+/** `edit` after the edits that add `created` at `home`, as one undo step. */
+function withCreatedInputs(editing, created, home, edit) {
+	return editing.batchOf([...created.map((input, i) => ({
+		type: "addInput",
+		parent: home.parent,
+		...home.index !== void 0 ? { index: home.index + i } : {},
+		name: input.name,
+		definition: input.definition
+	})), ...edit ? [edit] : []]);
+}
+/** Inputs a dialog's fields can read, plus the ones it creates on save. */
+function useNewInputs(inputs, home) {
+	const editing = useWorkflowEditing();
+	const root = asRecord(inputs);
+	const place = home ?? defaultHome(root);
+	const [pending, setPending] = useState([]);
+	const [creating, setCreating] = useState(null);
+	const all = withPending(editing, root, place, pending);
+	const source = {
+		refs: inputRefs(editing, all),
+		create: (type, onCreated) => setCreating({
+			type,
+			onCreated
+		})
+	};
+	const adopt = (created) => setPending((current) => [...current, ...created]);
+	const pathOf = (name) => place.parent.length > 0 && !editing.wizardFlattens(root) ? [...place.parent, name] : [name];
+	return {
+		source,
+		all,
+		home: place,
+		pending,
+		adopt,
+		dialog: creating ? /* @__PURE__ */ jsx(InputDialog, {
+			name: suggestedName(editing, creating.type, all),
+			definition: newInputDefinition(creating.type),
+			isNew: true,
+			lockedType: true,
+			siblings: [...allNames(editing, all, /* @__PURE__ */ new Set())],
+			allowStep: false,
+			inputs: all,
+			home: place,
+			onClose: () => setCreating(null),
+			onSave: (name, definition, _patch, extra) => {
+				adopt([...extra, {
+					name,
+					definition
+				}]);
+				creating.onCreated(pathOf(name));
+			}
+		}) : null,
+		save: (edit) => withCreatedInputs(editing, pending, place, edit)
+	};
+}
+/** An input's settings in a form, or as YAML when `yaml` says how to save it; switching carries the edits across. */
+function InputDialog({ yaml, view, onViewChange, ...props }) {
+	return yaml ? /* @__PURE__ */ jsx(InputViews, {
+		...props,
+		textual: yaml,
+		view,
+		onViewChange
+	}) : /* @__PURE__ */ jsx(SectionMemory.Provider, {
+		value: null,
+		children: /* @__PURE__ */ jsx(InputForm, { ...props })
+	});
+}
+function startingYaml(editing, textual, definition) {
+	if (textual.source !== void 0 && textual.path) try {
+		return editing.inputYaml(textual.source, textual.path);
+	} catch {}
+	return editing.dumpYaml(definition);
+}
+function InputViews({ textual, view, onViewChange, ...props }) {
+	const t = useInputsEditorStrings();
+	const g = useGraphEditorStrings();
+	const editing = useWorkflowEditing();
+	const sections = useSectionMemory();
+	const newInputs = useNewInputs(props.inputs, props.home);
+	const [original] = useState(() => props.isNew ? {} : props.definition);
+	const [opening] = useState(() => startingYaml(editing, textual, props.definition));
+	const [shown, setShown] = useState(opening);
+	const [base, setBase] = useState(props.definition);
+	const [yaml, setYaml] = useState(view === "form" ? null : opening);
+	const [name, setName] = useState(props.name);
+	const [version, setVersion] = useState(0);
+	const [problem, setProblem] = useState();
+	const draft = useRef(null);
+	const toYaml = () => {
+		const current = draft.current;
+		if (current) setName(current.name);
+		const text = !current || isEmptyPatch(diffPatch(base, current.next)) ? shown : editing.dumpYaml(withoutUndefined(current.next));
+		setShown(text);
+		setYaml(text);
+		setProblem(void 0);
+		onViewChange?.("yaml");
+	};
+	const toForm = () => {
+		if (yaml === null) return;
+		const issue = yamlProblem(yaml, g, editing);
+		if (issue) {
+			setProblem(issue);
+			return;
+		}
+		setShown(yaml);
+		setBase(asRecord(editing.loadYaml(yaml)));
+		setYaml(null);
+		setVersion((current) => current + 1);
+		onViewChange?.("form");
+	};
+	const switcher = /* @__PURE__ */ jsx(ViewSwitch, {
+		yaml: yaml !== null,
+		onForm: toForm,
+		onYaml: toYaml
+	});
+	if (yaml === null) return /* @__PURE__ */ jsx(SectionMemory.Provider, {
+		value: sections,
+		children: /* @__PURE__ */ jsx(InputForm, {
+			...props,
+			name,
+			originalName: props.name,
+			definition: base,
+			original,
+			newInputs,
+			headerEnd: switcher,
+			onDraft: (next, settings) => {
+				draft.current = {
+					name: next,
+					next: settings
+				};
+			}
+		}, version)
+	});
+	const nextName = name.trim();
+	const nameError = !editing.isValidInputName(nextName) ? t.invalidInputName : nextName !== props.name && props.siblings.includes(nextName) || newInputs.pending.some((input) => input.name === nextName) ? t.inputExists : void 0;
+	const dirty = props.isNew || nextName !== props.name || yaml !== opening || newInputs.pending.length > 0;
+	return /* @__PURE__ */ jsxs(DialogShell, {
+		title: t.editInput,
+		onClose: props.onClose,
+		dirty,
+		saveDisabled: yamlProblem(yaml, g, editing) !== void 0 || nameError !== void 0,
+		onSubmit: () => {
+			if (dirty) textual.onSave(nextName, yaml, newInputs.pending);
+			props.onClose();
+		},
+		headerEnd: switcher,
+		openOnAdd: props.openOnAdd,
+		...props.onDelete ? { footerStart: deleteButton(t, props) } : {},
+		children: [/* @__PURE__ */ jsx(Input, {
+			mono: true,
+			label: t.inputName,
+			description: t.help.name,
+			value: name,
+			error: nameError,
+			onChange: (e) => setName(e.target.value)
+		}), /* @__PURE__ */ jsx(YamlPane, {
+			path: INPUT_YAML_PATH,
+			value: yaml,
+			onChange: (text) => {
+				setYaml(text);
+				setProblem(void 0);
+			},
+			problem: problem ?? yamlProblem(yaml, g, editing),
+			scoped: NO_SCOPED
+		})]
+	});
+}
+function deleteButton(t, { onDelete, onClose }) {
+	return /* @__PURE__ */ jsx(IconButton, {
+		icon: /* @__PURE__ */ jsx(BiSolidTrashAlt, { className: "h-4 w-4" }),
+		label: t.deleteInput,
+		variant: "ghost",
+		size: "sm",
+		onClick: () => {
+			onDelete?.();
+			onClose();
+		}
+	});
+}
+function InputForm({ name, definition, isNew, siblings, allowStep, inputs, home, lockedType = false, onSave, onDelete, onClose, openOnAdd, original: startOriginal, originalName = name, newInputs: shared, headerEnd, onDraft }) {
+	const t = useInputsEditorStrings();
+	const g = useGraphEditorStrings();
+	const editing = useWorkflowEditing();
+	const own = useNewInputs(inputs, home);
+	const newInputs = shared ?? own;
+	const [original] = useState(() => startOriginal ?? (isNew ? {} : definition));
+	const originalType = text(original["type"]);
+	const childrenOf = (settings, withTemplate = true) => {
+		for (const from of [text(settings["type"]), originalType]) {
+			const key = editing.inputChildrenKey(from);
+			if (key && (withTemplate || key !== "template") && settings[key] !== void 0) return settings[key];
+		}
+	};
+	const [draftName, setDraftName] = useState(name);
+	const [type, setType] = useState(() => text(definition["type"]) || "string");
+	const [initial] = useState(() => {
+		const out = {};
+		for (const prop of ALL_PROPS) out[draftKey(prop)] = draftOf(effectiveKind(prop, definition[prop.key]), definition[prop.key]);
+		return out;
+	});
+	const [drafts, setDrafts] = useState(() => {
+		const fields = text(definition["type"]) === "list" && definition["template"] === void 0 ? childrenOf(definition, false) : void 0;
+		return fields === void 0 ? initial : {
+			...initial,
+			[draftKey(TEMPLATE)]: draftOf("template", fields)
+		};
+	});
+	const [nested, setNested] = useState(false);
+	const rowsKey = draftKey(LIST_DEFAULT);
+	const onFieldKey = (from, to) => setDrafts((current) => {
+		const rows = current[rowsKey];
+		if (!rows || rows.expression !== void 0) return current;
+		const moved = rows.rows.map((row) => {
+			if (!Object.hasOwn(row, from)) return row;
+			const { [from]: value, ...rest } = row;
+			return to === void 0 ? rest : {
+				...rest,
+				[to]: value
+			};
+		});
+		return {
+			...current,
+			[rowsKey]: {
+				...rows,
+				rows: moved
+			}
+		};
+	});
+	const optionsDraftNow = drafts[draftKey(OPTIONS)];
+	const optionRows = optionsDraftNow?.mode === "list" ? optionsDraftNow.rows : [];
+	const keyedDropdown = type === "dropdown" && (optionsDraftNow?.mode === "byKey" || optionsDraftNow?.mode === "expression" && String(drafts[draftKey(OPTION_KEY)] ?? "").trim() !== "");
+	const multi = drafts[draftKey(MULTI)] === true;
+	const shown = (prop) => prop === RESOURCE_DEFAULTS ? multi : prop === RESOURCE_DEFAULT ? !multi : type !== "dropdown" ? true : keyedDropdown ? prop.key !== "placeholder" && prop.key !== "autoselect" : prop.key !== "option-key" || optionsDraftNow?.mode === "expression";
+	const settingProps = (TYPE_PROPS[type] ?? []).filter(shown);
+	const props = [...commonPropsOf(type), ...settingProps];
+	const kindOf = (prop) => effectiveKind(prop, definition[prop.key]);
+	const optionKeys = OPTION_KEYS[type];
+	const context = {
+		labelled: type === "multi-dropdown",
+		textValues: !!optionKeys
+	};
+	const typeChanged = !isNew && type !== originalType;
+	const valueFor = (prop) => {
+		const key = draftKey(prop);
+		const kept = definition[prop.key];
+		const becameList = kindOf(prop) === "values" && isScalar(kept) && !(typeof kept === "string" && EXPRESSION.test(kept.trim()));
+		const readsAlike = !typeChanged || propsOf(originalType).some((before) => draftKey(before) === key);
+		return sameValue(drafts[key], initial[key]) && !becameList && readsAlike ? kept : writtenValue(kindOf(prop), drafts[key], context);
+	};
+	const edited = (key) => props.some((prop) => prop.key === key && !sameValue(drafts[draftKey(prop)], initial[draftKey(prop)]));
+	const optionValues = type === "dropdown" || type === "radio" ? optionRows.map((row) => row.value) : [];
+	const slider = type === "number" && valueFor(SLIDER) === true;
+	const trimmedName = draftName.trim();
+	const errors = { name: !editing.isValidInputName(trimmedName) ? t.invalidInputName : siblings.includes(trimmedName) || newInputs.pending.some((input) => input.name === trimmedName) ? t.inputExists : void 0 };
+	for (const prop of props) {
+		const key = draftKey(prop);
+		const required = prop.required || keyedDropdown && optionsDraftNow?.mode === "byKey" && prop === OPTION_KEY || slider && [
+			"min",
+			"max",
+			"step"
+		].includes(prop.key);
+		const untouched = sameValue(drafts[key], initial[key]);
+		const kept = definition[prop.key];
+		errors[key] = typeChanged && untouched && kept !== null && typeof kept === "object" && SCALAR_KINDS.has(kindOf(prop)) ? t.keptValueDoesNotFit : untouched && !required && !typeChanged ? void 0 : valueError({
+			...prop,
+			required
+		}, kindOf(prop), drafts[key], t, g);
+	}
+	if (type !== "dropdown" && optionsDraftNow?.mode === "byKey" && props.includes(OPTIONS)) errors[draftKey(OPTIONS)] = t.optionsByKeyDropdownOnly;
+	const clash = type === "group" && drafts[draftKey(FLATTEN)] === true ? Object.keys(asRecord(definition["items"])).find((child) => siblings.includes(child)) : void 0;
+	if (clash) errors[draftKey(FLATTEN)] = t.flattenClash(clash);
+	if (type === "duration") {
+		const hasLabel = valueFor(DISABLE_LABEL) !== void 0;
+		const optOut = valueFor(DISABLE_VALUE);
+		if (hasLabel !== (optOut !== void 0)) errors[draftKey(hasLabel ? DISABLE_VALUE : DISABLE_LABEL)] = t.disableNeedsBoth;
+		if (typeof optOut === "string") errors[draftKey(DISABLE_VALUE)] = t.invalidNumber;
+		const defaultKey = draftKey(DURATION_DEFAULT);
+		if (optOut !== void 0 && valueFor(DURATION_DEFAULT) === optOut) errors[defaultKey] = void 0;
+	}
+	const nextDefinition = () => {
+		const next = {
+			...definition,
+			type
+		};
+		for (const key of Object.keys(original)) if (!Object.hasOwn(next, key)) next[key] = void 0;
+		for (const prop of props) next[prop.key] = valueFor(prop);
+		const childKey = editing.inputChildrenKey(type);
+		if (childKey && childKey !== "template") next[childKey] = childrenOf(definition) ?? {};
+		for (const prop of TYPE_PROPS[type] ?? []) if (!settingProps.some((other) => other.key === prop.key)) next[prop.key] = void 0;
+		const options = next["options"];
+		const listed = Array.isArray(options) ? options.map((option) => isScalar(option) ? option : asRecord(option)["value"]) : [];
+		const known = Array.isArray(options) && listed.every(isScalar);
+		if (type === "checkbox-group" && next["implies"] !== void 0 && known && (edited("options") || edited("implies"))) {
+			const values = new Set(listed.map(String));
+			const links = Object.entries(asRecord(next["implies"])).filter(([from]) => values.has(from)).map(([from, to]) => [from, (Array.isArray(to) ? to : []).filter((value) => values.has(String(value)))]).filter(([, to]) => to.length > 0);
+			next["implies"] = links.length > 0 ? Object.fromEntries(links) : void 0;
+		}
+		if (type === "dropdown" && typeof next["default"] === "string" && known && (typeChanged || edited("options") || edited("default"))) {
+			const picked = listed.find((value) => typeof value !== "string" && String(value) === next["default"]);
+			if (picked !== void 0) next["default"] = picked;
+		}
+		if (type !== originalType) {
+			const takes = new Set(offeredInputKeys(editing, type));
+			for (const key of Object.keys(next)) if (KNOWN_KEYS.has(key) && !takes.has(key)) next[key] = void 0;
+		}
+		if (optionKeys && Array.isArray(next["options"]) && (typeChanged || edited("options"))) next["options"] = next["options"].map((option) => textOption(option, optionKeys));
+		if (optionKeys && typeChanged) {
+			const picked = next["default"];
+			next["default"] = Array.isArray(picked) ? picked.map((value) => isScalar(value) ? String(value) : value) : isScalar(picked) ? String(picked) : picked;
+		}
+		return next;
+	};
+	const next = nextDefinition();
+	const shaped = next["options"];
+	if (optionKeys && (typeChanged || edited("options")) && Array.isArray(shaped) && !shaped.every((option) => fitsTextOption(option, optionKeys)) && !errors[draftKey(OPTIONS)]) errors[draftKey(OPTIONS)] = type === "radio" ? t.radioOptionShape : t.checkboxOptionShape;
+	const patch = diffPatch(original, next);
+	const dirty = isNew || trimmedName !== originalName || !isEmptyPatch(patch);
+	const invalid = Object.values(errors).some(Boolean);
+	const setDraft = (key, value) => setDrafts((current) => ({
+		...current,
+		[key]: value
+	}));
+	const changeType = (next) => {
+		setType(next);
+		const fields = childrenOf(definition, false);
+		const templateKey = draftKey(TEMPLATE);
+		if (next === "list" && fields && sameValue(drafts[templateKey], initial[templateKey])) setDraft(templateKey, draftOf("template", fields));
+		if (!isNew) return;
+		const seeded = newInputDefinition(next);
+		for (const prop of TYPE_PROPS[next] ?? []) {
+			const key = draftKey(prop);
+			if (seeded[prop.key] !== void 0 && sameValue(drafts[key], initial[key])) setDraft(key, draftOf(prop.kind, seeded[prop.key]));
+		}
+	};
+	const renderProp = (prop) => /* @__PURE__ */ jsx(PropField, {
+		prop,
+		kind: kindOf(prop),
+		draft: drafts[draftKey(prop)],
+		original: definition[prop.key],
+		error: errors[draftKey(prop)],
+		onChange: (value) => setDraft(draftKey(prop), value),
+		suggestions: prop.key === "default" ? optionValues : [],
+		inputType: type,
+		optionRows,
+		source: newInputs.source,
+		adopt: newInputs.adopt,
+		allInputs: newInputs.all,
+		home: newInputs.home,
+		template: asRecord(drafts[draftKey(TEMPLATE)]),
+		inputLabel: String(drafts[draftKey(commonProp("label"))] ?? "").trim() || trimmedName,
+		onDialog: setNested,
+		onFieldKey
+	}, draftKey(prop));
+	const textProps = props.filter((prop) => TEXT_FIELDS.includes(prop.key) && (isCommon(prop) || prop === STEP_DESCRIPTION));
+	const behaviorProps = props.filter((prop) => FLAG_FIELDS.includes(prop.key) && isCommon(prop));
+	const holds = (prop) => original[prop.key] !== void 0;
+	const erred = (prop) => errors[draftKey(prop)] !== void 0;
+	const fieldOpen = isNew || textProps.some(holds);
+	const settingsOpen = settingProps.some((prop) => prop.required || holds(prop));
+	const written = withoutUndefined(next);
+	onDraft?.(trimmedName, next);
+	return /* @__PURE__ */ jsxs(DialogShell, {
+		title: t.editInput,
+		onClose,
+		dirty,
+		locked: newInputs.dialog !== null || nested,
+		saveDisabled: invalid,
+		onSubmit: () => {
+			if (dirty) onSave(trimmedName, written, patch, newInputs.pending);
+			onClose();
+		},
+		headerEnd,
+		openOnAdd,
+		...onDelete ? { footerStart: deleteButton(t, {
+			onDelete,
+			onClose
+		}) } : {},
+		children: [
+			/* @__PURE__ */ jsx(Input, {
+				autoFocus: true,
+				mono: true,
+				label: t.inputName,
+				description: t.help.name,
+				value: draftName,
+				error: errors["name"],
+				onChange: (e) => setDraftName(e.target.value)
+			}),
+			/* @__PURE__ */ jsx(TypeSelect, {
+				value: type,
+				onChange: changeType,
+				allowStep,
+				disabled: lockedType
+			}),
+			!isNew && originalType && type !== originalType && /* @__PURE__ */ jsx("div", {
+				className: "text-xs theme-muted-text",
+				children: t.typeChangeNote
+			}),
+			textProps.length > 0 && /* @__PURE__ */ jsx(Section, {
+				title: t.sectionField,
+				open: fieldOpen,
+				alert: textProps.some(erred),
+				children: textProps.map(renderProp)
+			}),
+			settingProps.length > 0 && /* @__PURE__ */ jsx(Section, {
+				title: t.sectionSettings,
+				open: settingsOpen,
+				alert: settingProps.some(erred),
+				children: settingProps.map((prop) => prop === DISABLE_VALUE ? null : prop === DISABLE_LABEL ? /* @__PURE__ */ jsx(OptOutCheckbox, {
+					label: String(drafts[draftKey(DISABLE_LABEL)] ?? ""),
+					value: String(drafts[draftKey(DISABLE_VALUE)] ?? ""),
+					onLabel: (next) => setDraft(draftKey(DISABLE_LABEL), next),
+					onValue: (next) => setDraft(draftKey(DISABLE_VALUE), next),
+					errors: {
+						label: errors[draftKey(DISABLE_LABEL)],
+						value: errors[draftKey(DISABLE_VALUE)]
+					}
+				}, "opt-out") : renderProp(prop))
+			}),
+			behaviorProps.length > 0 && /* @__PURE__ */ jsx(Section, {
+				title: t.sectionBehavior,
+				open: behaviorProps.some(holds),
+				alert: behaviorProps.some(erred),
+				children: behaviorProps.map(renderProp)
+			}),
+			newInputs.dialog
+		]
+	});
+}
+/** A compact type chip for rows that list inputs. */
+function TypeBadge({ type }) {
+	const types = useInputsEditorStrings().types;
+	return /* @__PURE__ */ jsx("span", {
+		className: cx("rounded border theme-border px-1 text-[11px] leading-4 theme-muted-text"),
+		children: types[type] ?? (type || "?")
+	});
+}
 //#endregion
-export { INPUT_TYPE_GROUPS, commonKeys, inputTypes, offeredInputKeys };
+export { INPUT_TYPE_GROUPS, InputDialog, TypeBadge, allNames, commonKeys, inputTypes, newInputDefinition, offeredInputKeys, useNewInputs, withCreatedInputs };