@parallelworks/ui 0.38.0 → 0.39.0

package/dist/graph/GraphEditorDialogs.js

@@ -0,0 +1,1808 @@
+import { useWorkflowActions, useWorkflowEditing } 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 { IoMdClose } from "../icons/io/IoMdClose.js";
+import { withPositionKeys } from "../components/keys.js";
+import { IconButton } from "../components/IconButton.js";
+import { Input, fieldBoxClasses } from "../components/Input.js";
+import { useGraphEditorStrings } from "./editorStrings.js";
+import { asRecord } from "./records.js";
+import { useLintContext, useLintEditing } from "../editor/lintContext.js";
+import { JOB_YAML_PATH, STEP_YAML_PATH } from "../editor/settingsYaml.js";
+import { FieldProblems, LintScope, ProblemList, useFieldProblems } from "./fieldProblems.js";
+import { AddRowButton, ChoiceButtons, DialogShell, ENV_KEY, EXPRESSION, ExpressionToggle, FieldError, FieldLabel, KeyValueEditor, LabelledField, Section, SectionMemory, ToggleField, conditionText, countError, diffPatch, durationError, expressionError, flagError, flagOf, isEmptyPatch, isScalar, labelled, orUndefined, parseCondition, parseCount, parseJson, parseScalar, removeAt, rowsError, rowsFrom, rowsTo, sameValue, text, unchangedValue, updateAt, useSectionMemory } from "./editorFields.js";
+import { ConditionField, FlagField, InputRefSelect, ScriptField, ValueOrInputField, readRef, refExpression, refSuggestions } from "./inputRefs.js";
+import { expressionRefs } from "./expressionRefs.js";
+import { NO_SCOPED, ViewSwitch, YamlPane, yamlProblem } from "./settingsViews.js";
+import { useNewInputs } from "./InputDialog.js";
+import { editErrorText } from "./refusalText.js";
+import { UsesPicker, WithEditor, usesKind, withDraftFrom, withError, withValue } from "./stepWith.js";
+import cx from "classnames";
+import { useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/GraphEditorDialogs.tsx
+var SHELL = /^$|^(\/?([^/ ]+\/)*)?(bash|sh)( .*)?$/;
+var OUTPUT_KEY = /^[a-zA-Z0-9_-]+$/;
+var MATRIX_KEY = /^[a-zA-Z0-9_-]+$/;
+var SSH_KEYS = [
+	"remoteHost",
+	"remoteUser",
+	"jumpNodeHost",
+	"jumpNodeUser",
+	"disconnect-timeout"
+];
+/** What the job dialog writes; the schema coverage test holds these to the workflow schema. */
+var JOB_FIELDS = [
+	"needs",
+	"if",
+	"ssh",
+	"runs-on",
+	"working-directory",
+	"timeout",
+	"env",
+	"outputs",
+	"strategy"
+];
+var RUNS_ON_FIELDS = [
+	"environment",
+	"environment.cluster",
+	"environment.name",
+	"params",
+	"mode",
+	"targetId",
+	"environmentId",
+	"schedulingParams",
+	"newWorker",
+	"workerId"
+];
+var STRATEGY_FIELDS = [
+	"matrix",
+	"matrix.include",
+	"matrix.exclude",
+	"fail-fast",
+	"max-parallel"
+];
+/** What the step dialog writes. */
+var STEP_FIELDS = [
+	"name",
+	"run",
+	"shell",
+	"uses",
+	"with",
+	"if",
+	"working-directory",
+	"id",
+	"timeout",
+	"ignore-errors",
+	"early-cancel",
+	"cleanup",
+	"retry",
+	"env",
+	"ssh"
+];
+var RETRY_FIELDS = [
+	"max-retries",
+	"interval",
+	"timeout",
+	"clean-on-retry"
+];
+var CLUSTER_TYPES = ["compute-clusters", "compute-resources"];
+function sshFrom(value) {
+	const record = asRecord(value);
+	return Object.fromEntries(SSH_KEYS.map((key) => [key, text(record[key])]));
+}
+function sshTo(fields, original) {
+	const written = asRecord(original);
+	const entries = SSH_KEYS.flatMap((key) => {
+		const value = fields[key].trim();
+		return value ? [[key, unchangedValue(value, written[key]) ? written[key] : value]] : [];
+	});
+	return entries.length > 0 ? Object.fromEntries(entries) : void 0;
+}
+function sshError(fields, t) {
+	return SSH_KEYS.some((key) => fields[key].trim()) && !fields.remoteHost.trim() ? t.remoteHostRequired : void 0;
+}
+var TARGET_MODES = [
+	"login",
+	"environment",
+	"worker"
+];
+var TARGET_KEYS = [
+	"mode",
+	"targetId",
+	"environmentId",
+	"schedulingParams",
+	"newWorker",
+	"workerId"
+];
+function runsOnFrom(value) {
+	const record = asRecord(value);
+	const environment = asRecord(record["environment"]);
+	const newWorker = record["newWorker"];
+	return {
+		kind: TARGET_KEYS.some((key) => key in record) ? "target" : "name",
+		cluster: text(environment["cluster"]),
+		name: text(environment["name"]),
+		params: rowsFrom(record["params"], false),
+		mode: text(record["mode"]),
+		targetId: text(record["targetId"]),
+		environmentId: text(record["environmentId"]),
+		schedulingParams: rowsFrom(record["schedulingParams"], false),
+		newWorker: typeof newWorker === "boolean" ? newWorker : void 0,
+		workerId: text(record["workerId"])
+	};
+}
+function runsOnTo(fields) {
+	if (fields.kind === "target") {
+		const mode = fields.mode.trim();
+		const targetId = fields.targetId.trim();
+		const environmentId = fields.environmentId.trim();
+		const schedulingParams = rowsTo(fields.schedulingParams, parseScalar);
+		const workerId = fields.workerId.trim();
+		if (!mode && !targetId && !environmentId && !schedulingParams && fields.newWorker === void 0 && !workerId) return;
+		return {
+			mode,
+			...targetId ? { targetId } : {},
+			...environmentId ? { environmentId } : {},
+			...schedulingParams ? { schedulingParams } : {},
+			...fields.newWorker === void 0 ? {} : { newWorker: fields.newWorker },
+			...workerId ? { workerId } : {}
+		};
+	}
+	const cluster = fields.cluster.trim();
+	const name = fields.name.trim();
+	const params = rowsTo(fields.params, parseScalar);
+	if (!cluster && !name && !params) return;
+	return {
+		environment: {
+			cluster,
+			name
+		},
+		...params ? { params } : {}
+	};
+}
+var PARAM_KEY = /^[A-Za-z0-9_-]+$/;
+function runsOnError(fields, sshUsed, t) {
+	if (!runsOnTo(fields)) return;
+	if (sshUsed) return t.runsOnWithSsh;
+	if (fields.kind === "target") {
+		if (!TARGET_MODES.includes(fields.mode.trim())) return t.runsOnNeedsMode;
+		return rowsError(fields.schedulingParams, PARAM_KEY, t.invalidKey, t);
+	}
+	if (!fields.cluster.trim() || !fields.name.trim()) return t.runsOnNeedsEnvironment;
+	return rowsError(fields.params, PARAM_KEY, t.invalidKey, t);
+}
+function sshHelp(key, t) {
+	return key === "disconnect-timeout" ? t.help.disconnectTimeout : t.help[key];
+}
+function sshLabel(key, t) {
+	return key === "disconnect-timeout" ? t.fields.disconnectTimeout : t.fields[key];
+}
+function SshEditor({ fields, onChange, error, source }) {
+	const t = useGraphEditorStrings();
+	const set = (key) => (value) => onChange({
+		...fields,
+		[key]: value
+	});
+	return /* @__PURE__ */ jsxs(LintScope, {
+		at: "ssh",
+		children: [
+			/* @__PURE__ */ jsx(ValueOrInputField, {
+				label: t.fields.remoteHost,
+				yamlKey: "remoteHost",
+				description: t.help.remoteHost,
+				value: fields.remoteHost,
+				onChange: set("remoteHost"),
+				source,
+				types: CLUSTER_TYPES,
+				suffix: "ip"
+			}),
+			/* @__PURE__ */ jsx(ValueOrInputField, {
+				label: t.fields.remoteUser,
+				yamlKey: "remoteUser",
+				description: t.help.remoteUser,
+				value: fields.remoteUser,
+				onChange: set("remoteUser"),
+				source,
+				types: CLUSTER_TYPES,
+				suffix: "user"
+			}),
+			[
+				"jumpNodeHost",
+				"jumpNodeUser",
+				"disconnect-timeout"
+			].map((key) => /* @__PURE__ */ jsx(Input, {
+				mono: true,
+				...labelled(sshLabel(key, t), key),
+				description: sshHelp(key, t),
+				value: fields[key],
+				onChange: (e) => set(key)(e.target.value)
+			}, key)),
+			/* @__PURE__ */ jsx(FieldError, { message: error })
+		]
+	});
+}
+/** A job's or step's env, each value checked against what it reads. */
+function EnvSection({ description, rows, onChange, error, source }) {
+	const t = useGraphEditorStrings();
+	return /* @__PURE__ */ jsx(Section, {
+		title: t.sectionEnvironment,
+		description,
+		open: rows.length > 0,
+		alert: !!error,
+		children: /* @__PURE__ */ jsx(LintScope, {
+			at: "env",
+			children: /* @__PURE__ */ jsx(KeyValueEditor, {
+				lint: true,
+				rows,
+				onChange,
+				error,
+				valueSuggestions: refSuggestions(source)
+			})
+		})
+	});
+}
+var OUTPUT_REF = /^\$\{\{\s*needs\.([A-Za-z0-9_-]+)\.steps\.([A-Za-z0-9_-]+)\.outputs\.([A-Za-z0-9_-]+)\s*\}\}$/;
+function outputRowsFrom(value, job) {
+	return Object.entries(asRecord(value)).map(([name, raw]) => {
+		const match = typeof raw === "string" ? OUTPUT_REF.exec(raw.trim()) : null;
+		return match && match[1] === job ? {
+			name,
+			step: match[2] ?? "",
+			output: match[3] ?? "",
+			original: String(raw)
+		} : {
+			name,
+			step: "",
+			output: "",
+			custom: text(raw)
+		};
+	});
+}
+function outputsTo(rows, job) {
+	if (rows.length === 0) return;
+	return Object.fromEntries(rows.map((row) => {
+		const written = `\${{ needs.${job}.steps.${row.step}.outputs.${row.output.trim()} }}`;
+		const same = row.original?.replace(/\s/g, "") === written.replace(/\s/g, "");
+		return [row.name.trim(), row.custom ?? (same ? row.original : written)];
+	}));
+}
+function outputsError(rows, t) {
+	const names = rows.map((row) => row.name.trim());
+	for (const [i, row] of rows.entries()) {
+		if (!OUTPUT_KEY.test(names[i] ?? "")) return t.invalidKey;
+		if (names.indexOf(names[i] ?? "") !== i) return t.duplicateKey;
+		if (row.custom !== void 0 && !row.custom.trim()) return t.required;
+		if (row.custom === void 0 && (!row.step || !OUTPUT_KEY.test(row.output.trim()))) return t.outputNeedsStep;
+	}
+}
+function OutputsEditor({ rows, onChange, stepIds, error }) {
+	const t = useGraphEditorStrings();
+	const update = (i, patch) => onChange(rows.map((row, j) => i === j ? {
+		...row,
+		...patch
+	} : row));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [
+			stepIds.length === 0 && /* @__PURE__ */ jsx("div", {
+				className: "text-xs theme-muted-text",
+				children: t.noStepIds
+			}),
+			withPositionKeys(rows).map(({ key, item: row }, i) => /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "w-1/3",
+						children: /* @__PURE__ */ jsx(Input, {
+							mono: true,
+							"aria-label": t.outputName,
+							placeholder: t.outputName,
+							value: row.name,
+							onChange: (e) => update(i, { name: e.target.value })
+						})
+					}),
+					row.custom !== void 0 ? /* @__PURE__ */ jsx("div", {
+						className: "flex-1",
+						children: /* @__PURE__ */ jsx(Input, {
+							mono: true,
+							"aria-label": t.outputValue,
+							value: row.custom,
+							onChange: (e) => update(i, { custom: e.target.value })
+						})
+					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+						className: "w-1/3",
+						children: /* @__PURE__ */ jsxs("select", {
+							"aria-label": t.outputStep,
+							value: row.step,
+							onChange: (e) => update(i, { step: e.target.value }),
+							className: fieldBoxClasses,
+							children: [/* @__PURE__ */ jsx("option", {
+								value: "",
+								disabled: true,
+								children: t.outputStep
+							}), stepIds.map((id) => /* @__PURE__ */ jsx("option", {
+								value: id,
+								children: id
+							}, id))]
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						className: "flex-1",
+						children: /* @__PURE__ */ jsx(Input, {
+							mono: true,
+							"aria-label": t.outputKey,
+							placeholder: t.outputKey,
+							value: row.output,
+							onChange: (e) => update(i, { output: e.target.value })
+						})
+					})] }),
+					/* @__PURE__ */ jsx(ExpressionToggle, {
+						active: row.custom !== void 0,
+						onChange: (on) => onChange(rows.map((other, j) => j === i ? on ? {
+							name: other.name,
+							step: "",
+							output: "",
+							custom: ""
+						} : {
+							name: other.name,
+							step: stepIds[0] ?? "",
+							output: ""
+						} : other))
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						icon: /* @__PURE__ */ jsx(IoMdClose, { className: "h-4 w-4" }),
+						label: t.removeRow,
+						variant: "ghost",
+						size: "sm",
+						onClick: () => onChange(removeAt(rows, i))
+					})
+				]
+			}, key)),
+			/* @__PURE__ */ jsx(FieldError, { message: error }),
+			/* @__PURE__ */ jsx(AddRowButton, {
+				label: t.addRow,
+				onClick: () => onChange([...rows, {
+					name: "",
+					step: stepIds[0] ?? "",
+					output: ""
+				}])
+			})
+		]
+	});
+}
+var matrixRowKeys = 0;
+var matrixRow = (row) => ({
+	...row,
+	key: ++matrixRowKeys
+});
+function matrixRowsFrom(matrix) {
+	return Object.entries(asRecord(matrix)).filter(([name]) => name !== "include" && name !== "exclude").map(([name, values]) => {
+		if (typeof values === "string") return matrixRow({
+			name,
+			values,
+			original: values,
+			initial: values
+		});
+		if (Array.isArray(values) && values.every((value) => isScalar(value) && !(typeof value === "string" && value.includes(",")))) {
+			const joined = values.join(", ");
+			return matrixRow({
+				name,
+				values: joined,
+				original: values,
+				initial: joined
+			});
+		}
+		const json = JSON.stringify(values);
+		return matrixRow({
+			name,
+			values: json,
+			nested: true,
+			original: values,
+			initial: json
+		});
+	});
+}
+function matrixValues(row) {
+	if (row.initial !== void 0 && row.values === row.initial) return row.original;
+	const trimmed = row.values.trim();
+	if (row.nested) return parseJson(trimmed).value;
+	if (EXPRESSION.test(trimmed)) return trimmed;
+	return trimmed.split(",").map((value) => value.trim()).filter(Boolean).map(parseScalar);
+}
+function matrixRowInvalid(row, names, i) {
+	const name = names[i] ?? "";
+	const values = matrixValues(row);
+	return !MATRIX_KEY.test(name) || name === "include" || name === "exclude" || names.indexOf(name) !== i || !(typeof values === "string" || Array.isArray(values)) || Array.isArray(values) && values.length === 0;
+}
+function entriesFrom(value) {
+	return Array.isArray(value) ? value.map((entry) => rowsFrom(entry)) : [];
+}
+function entriesTo(entries) {
+	return entries.length > 0 ? entries.map((rows) => rowsTo(rows, parseScalar) ?? {}) : void 0;
+}
+function entriesError(entries, t) {
+	for (const rows of entries) {
+		const error = rows.length === 0 ? t.invalidMatrixEntry : rowsError(rows, MATRIX_KEY, t.invalidKey, t);
+		if (error) return error;
+	}
+}
+/** Combinations to add or skip, as entries of keys and values or as one expression. */
+function MatrixEntries({ label, yamlKey, description, entries, onChange, text, onText, error }) {
+	const t = useGraphEditorStrings();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ jsx(FieldLabel, {
+			label,
+			yamlKey,
+			description,
+			actions: /* @__PURE__ */ jsx(ExpressionToggle, {
+				active: text !== void 0,
+				onChange: (on) => onText(on ? "" : void 0)
+			})
+		}), text !== void 0 ? /* @__PURE__ */ jsx(Input, {
+			mono: true,
+			"aria-label": label,
+			value: text,
+			error,
+			onChange: (e) => onText(e.target.value)
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			withPositionKeys(entries).map(({ key, item: rows }, i) => /* @__PURE__ */ jsxs("div", {
+				className: "flex items-start gap-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex-1 rounded-md border theme-border p-2",
+					children: /* @__PURE__ */ jsx(KeyValueEditor, {
+						rows,
+						onChange: (next) => onChange(updateAt(entries, i, next)),
+						error: void 0
+					})
+				}), /* @__PURE__ */ jsx(IconButton, {
+					icon: /* @__PURE__ */ jsx(IoMdClose, { className: "h-4 w-4" }),
+					label: t.removeEntry,
+					variant: "ghost",
+					size: "sm",
+					onClick: () => onChange(removeAt(entries, i))
+				})]
+			}, key)),
+			/* @__PURE__ */ jsx(FieldError, { message: error }),
+			/* @__PURE__ */ jsx(AddRowButton, {
+				label: t.addEntry,
+				onClick: () => onChange([...entries, [{
+					key: "",
+					value: ""
+				}]])
+			})
+		] })]
+	});
+}
+/** One matrix variable: values listed here, or the selections of a multi-select input. */
+function MatrixVariable({ row, source, onChange, onRemove }) {
+	const t = useGraphEditorStrings();
+	const ref = readRef(row.values.trim());
+	const [fromInput, setFromInput] = useState(ref !== null);
+	const { create } = source;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-start gap-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-1 flex-col gap-2 rounded-md border theme-border p-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "w-1/3",
+					children: /* @__PURE__ */ jsx(Input, {
+						mono: true,
+						"aria-label": t.matrixVariable,
+						placeholder: t.matrixVariable,
+						value: row.name,
+						onChange: (e) => onChange({
+							...row,
+							name: e.target.value
+						})
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex-1",
+					children: /* @__PURE__ */ jsx(ChoiceButtons, {
+						options: [{
+							value: "values",
+							label: t.matrixValuesListed
+						}, {
+							value: "input",
+							label: t.modeFromInput
+						}],
+						value: fromInput ? "input" : "values",
+						onChange: (mode) => {
+							setFromInput(mode === "input");
+							onChange({
+								...row,
+								values: "",
+								nested: false
+							});
+						}
+					})
+				})]
+			}), fromInput ? /* @__PURE__ */ jsx(InputRefSelect, {
+				refs: source.refs,
+				types: ["multi-dropdown", "checkbox-group"],
+				value: ref,
+				label: t.matrixValues,
+				onChange: (path) => onChange({
+					...row,
+					values: refExpression(path)
+				}),
+				...create ? {
+					onNew: () => create("multi-dropdown", (path) => onChange({
+						...row,
+						values: refExpression(path)
+					})),
+					newLabel: t.newInput
+				} : {}
+			}) : /* @__PURE__ */ jsx(Input, {
+				mono: true,
+				"aria-label": t.matrixValues,
+				placeholder: t.matrixValues,
+				value: row.values,
+				title: row.nested ? t.jsonValue : void 0,
+				onChange: (e) => onChange({
+					...row,
+					values: e.target.value
+				})
+			})]
+		}), /* @__PURE__ */ jsx(IconButton, {
+			icon: /* @__PURE__ */ jsx(IoMdClose, { className: "h-4 w-4" }),
+			label: t.removeVariable,
+			variant: "ghost",
+			size: "sm",
+			onClick: onRemove
+		})]
+	});
+}
+/** Every field of a job, saved as one undoable edit. */
+function JobForm({ job, jobs, inputs, workflow, onEdit, onClose, renderShell, onDraft, pending = false }) {
+	const t = useGraphEditorStrings();
+	const editing = useWorkflowEditing();
+	const { needTarget } = editing;
+	const newInputs = useNewInputs(inputs);
+	const source = {
+		...newInputs.source,
+		extras: expressionRefs(editing, workflow ?? { jobs }, job)
+	};
+	const [original] = useState(() => asRecord(jobs[job]));
+	const rawNeeds = original["needs"];
+	const needsExpression = typeof rawNeeds === "string" ? rawNeeds : void 0;
+	const strategy = asRecord(original["strategy"]);
+	const rawMatrix = strategy["matrix"];
+	const matrixRecord = asRecord(rawMatrix);
+	const [name, setName] = useState(job);
+	const [needs, setNeeds] = useState(() => Array.isArray(rawNeeds) ? rawNeeds.filter((n) => typeof n === "string") : []);
+	const [needsText, setNeedsText] = useState(needsExpression ?? "");
+	const [needsTyped, setNeedsTyped] = useState(needsExpression !== void 0);
+	const [condition, setCondition] = useState(conditionText(original["if"]));
+	const [ssh, setSsh] = useState(() => sshFrom(original["ssh"]));
+	const rawRunsOn = original["runs-on"];
+	const [runsOn, setRunsOn] = useState(() => runsOnFrom(rawRunsOn));
+	const [runsOnTyped, setRunsOnTyped] = useState(typeof rawRunsOn === "string");
+	const [runsOnText, setRunsOnText] = useState(typeof rawRunsOn === "string" ? rawRunsOn : "");
+	const [workingDirectory, setWorkingDirectory] = useState(text(original["working-directory"]));
+	const [timeout, setTimeoutText] = useState(text(original["timeout"]));
+	const [env, setEnv] = useState(() => rowsFrom(original["env"], false));
+	const [outputs, setOutputs] = useState(() => outputRowsFrom(original["outputs"], job));
+	const stepIds = (Array.isArray(original["steps"]) ? original["steps"] : []).flatMap((step) => {
+		const id = asRecord(step)["id"];
+		return typeof id === "string" && id ? [id] : [];
+	});
+	const [matrixOn, setMatrixOn] = useState(rawMatrix !== void 0);
+	const [matrixMode, setMatrixMode] = useState(typeof rawMatrix === "string" ? "expression" : "variables");
+	const [matrixText, setMatrixText] = useState(typeof rawMatrix === "string" ? rawMatrix : "");
+	const [matrixRows, setMatrixRows] = useState(() => matrixRowsFrom(rawMatrix));
+	const [include, setInclude] = useState(() => entriesFrom(matrixRecord["include"]));
+	const [exclude, setExclude] = useState(() => entriesFrom(matrixRecord["exclude"]));
+	const [includeText, setIncludeText] = useState(() => typeof matrixRecord["include"] === "string" ? matrixRecord["include"] : void 0);
+	const [excludeText, setExcludeText] = useState(() => typeof matrixRecord["exclude"] === "string" ? matrixRecord["exclude"] : void 0);
+	const [failFast, setFailFast] = useState(() => flagOf(strategy["fail-fast"]));
+	const [maxParallel, setMaxParallel] = useState(text(strategy["max-parallel"]));
+	const needsId = useId();
+	const needsLint = useFieldProblems("needs", needsId).map((problem) => problem.message).join(" ");
+	const others = Object.keys(jobs).filter((other) => other !== job);
+	const missing = needs.map(needTarget).filter((target) => !Object.hasOwn(jobs, target));
+	const allNeeds = editing.jobNeeds(jobs);
+	const isMatrixJob = (other) => asRecord(asRecord(jobs[other])["strategy"])["matrix"] !== void 0;
+	const toggleNeed = (other, on) => setNeeds((current) => on ? [...current, other] : current.filter((need) => needTarget(need) !== other));
+	const toggleAny = (other, any) => setNeeds((current) => current.map((need) => needTarget(need) === other ? any ? `${other}:any` : other : need));
+	const trimmedName = name.trim();
+	const matrixNames = matrixRows.map((row) => row.name.trim());
+	const matrixError = () => {
+		if (!matrixOn) return;
+		if (matrixMode === "expression") return matrixText.trim() ? expressionError(matrixText, t) : t.invalidExpressionValue;
+		if (matrixRows.length === 0 && include.length === 0 && includeText === void 0) return t.matrixNeedsVariable;
+		return matrixRows.some((row, i) => matrixRowInvalid(row, matrixNames, i)) ? t.matrixInvalidVariable : void 0;
+	};
+	const variablesMode = matrixOn && matrixMode === "variables";
+	const errors = {
+		name: !editing.isValidJobName(trimmedName) ? t.invalidJobName : trimmedName !== job && Object.hasOwn(jobs, trimmedName) ? t.jobExists : void 0,
+		needs: needsTyped ? expressionError(needsText, t) : void 0,
+		ssh: sshError(ssh, t),
+		runsOn: runsOnTyped ? !runsOnText.trim() ? void 0 : sshTo(ssh, original["ssh"]) ? t.runsOnWithSsh : expressionError(runsOnText, t) : runsOnError(runsOn, !!sshTo(ssh, original["ssh"]), t),
+		timeout: durationError(timeout, t),
+		env: rowsError(env, ENV_KEY, t.invalidEnvKey, t),
+		outputs: outputsError(outputs, t),
+		matrix: matrixError(),
+		include: !variablesMode ? void 0 : includeText !== void 0 ? expressionError(includeText, t) : entriesError(include, t),
+		exclude: !variablesMode ? void 0 : excludeText !== void 0 ? expressionError(excludeText, t) : entriesError(exclude, t),
+		failFast: matrixOn ? flagError(failFast, t) : void 0,
+		maxParallel: matrixOn ? countError(maxParallel, 1, t.invalidMaxParallel) : void 0
+	};
+	const nextStrategy = () => {
+		if (!matrixOn) return;
+		const includeList = includeText !== void 0 ? orUndefined(includeText) : entriesTo(include);
+		const excludeList = excludeText !== void 0 ? orUndefined(excludeText) : entriesTo(exclude);
+		const next = { matrix: matrixMode === "expression" ? matrixText.trim() : {
+			...Object.fromEntries(matrixRows.map((row) => [row.name.trim(), matrixValues(row)])),
+			...includeList ? { include: includeList } : {},
+			...excludeList ? { exclude: excludeList } : {}
+		} };
+		if (failFast !== void 0) next["fail-fast"] = failFast;
+		const parallel = parseCount(maxParallel);
+		if (parallel !== void 0) next["max-parallel"] = parallel;
+		return next;
+	};
+	const patch = diffPatch(original, {
+		needs: needsTyped ? orUndefined(needsText) : needs.length > 0 ? needs : void 0,
+		if: parseCondition(condition),
+		ssh: sshTo(ssh, original["ssh"]),
+		"runs-on": runsOnTyped ? orUndefined(runsOnText) : runsOnTo(runsOn),
+		"working-directory": orUndefined(workingDirectory),
+		timeout: orUndefined(timeout),
+		env: rowsTo(env, (value) => value),
+		outputs: outputsTo(outputs, trimmedName),
+		strategy: nextStrategy()
+	});
+	const renamed = trimmedName !== job;
+	const dirty = renamed || !isEmptyPatch(patch);
+	const invalid = Object.values(errors).some(Boolean);
+	const addVariableRow = () => setMatrixRows((rows) => rows.length === 0 ? [matrixRow({
+		name: "value",
+		values: "1, 2"
+	})] : rows);
+	const saveEdit = newInputs.save(dirty ? {
+		type: "updateJob",
+		job,
+		...renamed ? { name: trimmedName } : {},
+		...patch
+	} : null);
+	onDraft?.(saveEdit, invalid);
+	const children = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		newInputs.dialog,
+		/* @__PURE__ */ jsx(Input, {
+			autoFocus: true,
+			mono: true,
+			label: t.jobName,
+			description: t.help.jobName,
+			value: name,
+			error: errors.name,
+			onChange: (e) => setName(e.target.value)
+		}),
+		/* @__PURE__ */ jsxs(Section, {
+			title: t.sectionDependencies,
+			open: true,
+			children: [
+				/* @__PURE__ */ jsx(FieldLabel, {
+					label: t.fields.needs,
+					yamlKey: "needs",
+					description: needsTyped ? t.help.needsExpression : t.help.needs,
+					actions: /* @__PURE__ */ jsx(ExpressionToggle, {
+						active: needsTyped,
+						onChange: setNeedsTyped
+					})
+				}),
+				needsTyped ? /* @__PURE__ */ jsx(Input, {
+					id: needsId,
+					mono: true,
+					"aria-label": t.fields.needs,
+					value: needsText,
+					error: errors.needs ?? (needsLint || void 0),
+					onChange: (e) => setNeedsText(e.target.value)
+				}) : others.length === 0 ? /* @__PURE__ */ jsx("div", {
+					className: "text-xs theme-muted-text",
+					children: t.noOtherJobs
+				}) : /* @__PURE__ */ jsxs("div", {
+					id: needsId,
+					tabIndex: -1,
+					className: "flex flex-col gap-1.5",
+					children: [[...others, ...missing].map((other) => {
+						const entry = needs.find((need) => needTarget(need) === other);
+						const cycle = !entry && editing.dependsOn(allNeeds, other, job);
+						return /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2 text-sm",
+							children: [/* @__PURE__ */ jsxs("label", {
+								className: cx("flex flex-1 items-center gap-2", cycle ? "cursor-not-allowed opacity-50" : "cursor-pointer"),
+								title: cycle ? t.dependsOnThisJob : void 0,
+								children: [
+									/* @__PURE__ */ jsx("input", {
+										type: "checkbox",
+										checked: !!entry,
+										disabled: cycle,
+										onChange: (e) => toggleNeed(other, e.target.checked)
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "font-mono",
+										children: other
+									}),
+									!Object.hasOwn(jobs, other) && /* @__PURE__ */ jsx("span", {
+										className: "text-xs text-(--theme-error)",
+										children: t.missingJob
+									})
+								]
+							}), entry && isMatrixJob(other) && /* @__PURE__ */ jsxs("label", {
+								className: "flex cursor-pointer items-center gap-1.5 text-xs theme-muted-text",
+								title: t.help.waitForAny,
+								children: [/* @__PURE__ */ jsx("input", {
+									type: "checkbox",
+									checked: entry.endsWith(":any"),
+									onChange: (e) => toggleAny(other, e.target.checked)
+								}), t.waitForAny]
+							})]
+						}, other);
+					}), /* @__PURE__ */ jsx(FieldError, { message: needsLint || void 0 })]
+				}),
+				/* @__PURE__ */ jsx(ConditionField, {
+					scope: "job",
+					label: t.fields.condition,
+					yamlKey: "if",
+					description: t.help.jobIf,
+					value: condition,
+					onChange: setCondition,
+					source
+				})
+			]
+		}),
+		/* @__PURE__ */ jsx(Section, {
+			title: t.sectionRemoteHost,
+			description: t.runsInWorkspace,
+			open: !!sshTo(ssh, original["ssh"]),
+			alert: !!errors.ssh,
+			children: /* @__PURE__ */ jsx(SshEditor, {
+				fields: ssh,
+				onChange: setSsh,
+				error: errors.ssh,
+				source
+			})
+		}),
+		/* @__PURE__ */ jsx(Section, {
+			title: t.sectionComputeEnvironment,
+			description: t.runsOnHint,
+			open: runsOnTyped ? !!runsOnText.trim() : !!runsOnTo(runsOn),
+			alert: !!errors.runsOn,
+			children: /* @__PURE__ */ jsxs(LintScope, {
+				at: "runs-on",
+				children: [/* @__PURE__ */ jsx(FieldLabel, {
+					label: t.fields.runsOn,
+					yamlKey: "runs-on",
+					description: t.help.runsOn,
+					actions: /* @__PURE__ */ jsx(ExpressionToggle, {
+						active: runsOnTyped,
+						onChange: setRunsOnTyped
+					})
+				}), runsOnTyped ? /* @__PURE__ */ jsx(Input, {
+					mono: true,
+					"aria-label": t.fields.runsOn,
+					value: runsOnText,
+					error: errors.runsOn,
+					onChange: (e) => setRunsOnText(e.target.value)
+				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx(ChoiceButtons, {
+						options: [{
+							value: "name",
+							label: t.runsOnByName
+						}, {
+							value: "target",
+							label: t.runsOnByTarget
+						}],
+						value: runsOn.kind,
+						onChange: (kind) => setRunsOn({
+							...runsOn,
+							kind
+						})
+					}),
+					runsOn.kind === "name" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						/* @__PURE__ */ jsx(Input, {
+							mono: true,
+							...labelled(t.fields.environmentCluster, "cluster"),
+							description: t.help.environmentCluster,
+							value: runsOn.cluster,
+							onChange: (e) => setRunsOn({
+								...runsOn,
+								cluster: e.target.value
+							})
+						}),
+						/* @__PURE__ */ jsx(Input, {
+							mono: true,
+							...labelled(t.fields.environmentName, "name"),
+							description: t.help.environmentName,
+							value: runsOn.name,
+							onChange: (e) => setRunsOn({
+								...runsOn,
+								name: e.target.value
+							})
+						}),
+						/* @__PURE__ */ jsx(LabelledField, {
+							label: t.fields.schedulingParams,
+							yamlKey: "params",
+							description: t.help.schedulingParams,
+							children: /* @__PURE__ */ jsx(KeyValueEditor, {
+								rows: runsOn.params,
+								onChange: (params) => setRunsOn({
+									...runsOn,
+									params
+								}),
+								error: void 0
+							})
+						})
+					] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						/* @__PURE__ */ jsx(LabelledField, {
+							label: t.fields.targetMode,
+							yamlKey: "mode",
+							description: t.help.targetMode,
+							children: /* @__PURE__ */ jsx(ChoiceButtons, {
+								options: TARGET_MODES.map((mode) => ({
+									value: mode,
+									label: t.targetModes[mode]
+								})),
+								value: runsOn.mode,
+								onChange: (mode) => setRunsOn({
+									...runsOn,
+									mode
+								})
+							})
+						}),
+						/* @__PURE__ */ jsx(Input, {
+							mono: true,
+							...labelled(t.fields.targetId, "targetId"),
+							description: t.help.targetId,
+							value: runsOn.targetId,
+							onChange: (e) => setRunsOn({
+								...runsOn,
+								targetId: e.target.value
+							})
+						}),
+						/* @__PURE__ */ jsx(Input, {
+							mono: true,
+							...labelled(t.fields.environmentId, "environmentId"),
+							description: t.help.environmentId,
+							value: runsOn.environmentId,
+							onChange: (e) => setRunsOn({
+								...runsOn,
+								environmentId: e.target.value
+							})
+						}),
+						/* @__PURE__ */ jsx(LabelledField, {
+							label: t.fields.schedulingParams,
+							yamlKey: "schedulingParams",
+							description: t.help.schedulingParams,
+							children: /* @__PURE__ */ jsx(KeyValueEditor, {
+								rows: runsOn.schedulingParams,
+								onChange: (schedulingParams) => setRunsOn({
+									...runsOn,
+									schedulingParams
+								}),
+								error: void 0
+							})
+						}),
+						/* @__PURE__ */ jsx(ToggleField, {
+							label: t.fields.newWorker,
+							yamlKey: "newWorker",
+							description: t.help.newWorker,
+							checked: runsOn.newWorker === true,
+							onChange: (newWorker) => setRunsOn({
+								...runsOn,
+								newWorker
+							})
+						}),
+						/* @__PURE__ */ jsx(Input, {
+							mono: true,
+							...labelled(t.fields.workerId, "workerId"),
+							description: t.help.workerId,
+							value: runsOn.workerId,
+							onChange: (e) => setRunsOn({
+								...runsOn,
+								workerId: e.target.value
+							})
+						})
+					] }),
+					/* @__PURE__ */ jsx(FieldError, { message: errors.runsOn })
+				] })]
+			})
+		}),
+		/* @__PURE__ */ jsxs(Section, {
+			title: t.sectionMatrix,
+			open: matrixOn,
+			alert: !!(errors.matrix || errors.include || errors.exclude || errors.failFast || errors.maxParallel),
+			children: [/* @__PURE__ */ jsx(ToggleField, {
+				label: t.fields.matrix,
+				yamlKey: "strategy.matrix",
+				description: t.matrixOn,
+				checked: matrixOn,
+				onChange: (on) => {
+					setMatrixOn(on);
+					if (on && matrixMode === "variables") addVariableRow();
+				}
+			}), matrixOn && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				typeof rawMatrix === "string" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FieldLabel, {
+					label: t.fields.matrixSource,
+					description: t.help.matrixMode
+				}), /* @__PURE__ */ jsx(ChoiceButtons, {
+					options: [{
+						value: "variables",
+						label: t.matrixFromVariables
+					}, {
+						value: "expression",
+						label: t.matrixFromExpression
+					}],
+					value: matrixMode,
+					onChange: (mode) => {
+						setMatrixMode(mode);
+						if (mode === "variables") addVariableRow();
+					}
+				})] }),
+				matrixMode === "expression" ? /* @__PURE__ */ jsx(Input, {
+					mono: true,
+					...labelled(t.fields.matrixExpression, "strategy.matrix"),
+					description: t.help.matrixExpression,
+					value: matrixText,
+					error: errors.matrix,
+					onChange: (e) => setMatrixText(e.target.value)
+				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "text-xs theme-muted-text",
+						children: t.help.matrixVariables
+					}),
+					matrixRows.map((row, i) => /* @__PURE__ */ jsx(MatrixVariable, {
+						row,
+						source,
+						onChange: (next) => setMatrixRows((rows) => updateAt(rows, i, next)),
+						onRemove: () => setMatrixRows((rows) => removeAt(rows, i))
+					}, row.key)),
+					/* @__PURE__ */ jsx(FieldError, { message: errors.matrix }),
+					/* @__PURE__ */ jsx(AddRowButton, {
+						label: t.addVariable,
+						onClick: () => setMatrixRows((rows) => [...rows, matrixRow({
+							name: "",
+							values: ""
+						})])
+					}),
+					/* @__PURE__ */ jsx(MatrixEntries, {
+						label: t.fields.include,
+						yamlKey: "include",
+						description: t.help.include,
+						entries: include,
+						onChange: setInclude,
+						text: includeText,
+						onText: setIncludeText,
+						error: errors.include
+					}),
+					/* @__PURE__ */ jsx(MatrixEntries, {
+						label: t.fields.exclude,
+						yamlKey: "exclude",
+						description: t.help.exclude,
+						entries: exclude,
+						onChange: setExclude,
+						text: excludeText,
+						onText: setExcludeText,
+						error: errors.exclude
+					})
+				] }),
+				/* @__PURE__ */ jsx(FlagField, {
+					label: t.fields.failFast,
+					yamlKey: "fail-fast",
+					description: t.help.failFast,
+					value: failFast,
+					original: strategy["fail-fast"],
+					fallback: true,
+					onChange: setFailFast,
+					source
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					mono: true,
+					...labelled(t.fields.maxParallel, "max-parallel"),
+					description: t.help.maxParallel,
+					value: maxParallel,
+					error: errors.maxParallel,
+					onChange: (e) => setMaxParallel(e.target.value)
+				})
+			] })]
+		}),
+		/* @__PURE__ */ jsx(EnvSection, {
+			description: t.help.jobEnv,
+			rows: env,
+			onChange: setEnv,
+			error: errors.env,
+			source
+		}),
+		/* @__PURE__ */ jsx(Section, {
+			title: t.sectionOutputs,
+			description: t.help.outputs,
+			open: outputs.length > 0,
+			alert: !!errors.outputs,
+			children: /* @__PURE__ */ jsx(OutputsEditor, {
+				rows: outputs,
+				onChange: setOutputs,
+				stepIds,
+				error: errors.outputs
+			})
+		}),
+		/* @__PURE__ */ jsxs(Section, {
+			title: t.sectionAdvanced,
+			open: !!workingDirectory || !!timeout,
+			alert: !!errors.timeout,
+			children: [/* @__PURE__ */ jsx(Input, {
+				mono: true,
+				...labelled(t.fields.workingDirectory, "working-directory"),
+				description: t.help.jobWorkingDirectory,
+				value: workingDirectory,
+				onChange: (e) => setWorkingDirectory(e.target.value)
+			}), /* @__PURE__ */ jsx(Input, {
+				mono: true,
+				...labelled(t.fields.timeout, "timeout"),
+				description: t.help.jobTimeout,
+				value: timeout,
+				error: errors.timeout,
+				onChange: (e) => setTimeoutText(e.target.value)
+			})]
+		})
+	] });
+	const shellProps = {
+		title: rawMatrix !== void 0 ? t.editMatrix : t.editJob,
+		onClose,
+		dirty: dirty || pending,
+		saveDisabled: invalid,
+		locked: newInputs.dialog !== null,
+		onSubmit: () => {
+			if (saveEdit) onEdit(saveEdit);
+			onClose();
+		},
+		children
+	};
+	return renderShell ? renderShell(shellProps) : /* @__PURE__ */ jsx(DialogShell, { ...shellProps });
+}
+/** Every field of a step, saved as one undoable edit. */
+function StepForm({ job, index, steps, inputs, workflow, usesSuggestions, onEdit, onClose, renderShell, onDraft, pending = false, adding = false }) {
+	const t = useGraphEditorStrings();
+	const editing = useWorkflowEditing();
+	const actions = useWorkflowActions();
+	const newInputs = useNewInputs(inputs);
+	const source = {
+		...newInputs.source,
+		extras: expressionRefs(editing, workflow, job)
+	};
+	const [original] = useState(() => asRecord(steps[index]));
+	const rawRetry = original["retry"];
+	const retry = asRecord(rawRetry);
+	const [name, setName] = useState(text(original["name"]));
+	const [kind, setKind] = useState(original["uses"] !== void 0 ? "uses" : "run");
+	const [run, setRun] = useState(text(original["run"]));
+	const [shell, setShell] = useState(text(original["shell"]));
+	const [uses, setUses] = useState(text(original["uses"]));
+	const [initialWith] = useState(() => withDraftFrom(original["with"], actions));
+	const [withDraft, setWithDraft] = useState(initialWith);
+	const [condition, setCondition] = useState(conditionText(original["if"]));
+	const [workingDirectory, setWorkingDirectory] = useState(text(original["working-directory"]));
+	const [id, setId] = useState(text(original["id"]));
+	const [timeout, setTimeoutText] = useState(text(original["timeout"]));
+	const [ignoreErrors, setIgnoreErrors] = useState(() => flagOf(original["ignore-errors"]));
+	const [earlyCancel, setEarlyCancel] = useState(original["early-cancel"] === "any-job-failed");
+	const [cleanup, setCleanup] = useState(text(original["cleanup"]));
+	const [retryOn, setRetryOn] = useState(rawRetry !== void 0);
+	const [maxRetries, setMaxRetries] = useState(text(retry["max-retries"]));
+	const [interval, setIntervalText] = useState(text(retry["interval"]));
+	const [retryTimeout, setRetryTimeout] = useState(text(retry["timeout"]));
+	const [cleanOnRetry, setCleanOnRetry] = useState(() => flagOf(retry["clean-on-retry"]));
+	const [env, setEnv] = useState(() => rowsFrom(original["env"], false));
+	const [sshMode, setSshMode] = useState(original["ssh"] === null ? "none" : original["ssh"] !== void 0 ? "custom" : "inherit");
+	const [ssh, setSsh] = useState(() => sshFrom(original["ssh"]));
+	const trimmedUses = uses.trim();
+	const errors = {
+		run: kind === "run" && !run.trim() ? t.required : void 0,
+		shell: kind === "run" && !SHELL.test(shell.trim()) ? t.invalidShell : void 0,
+		uses: kind !== "uses" ? void 0 : !trimmedUses ? t.required : usesKind(trimmedUses, actions) === "other" ? t.invalidUses : void 0,
+		with: kind === "uses" ? withError(trimmedUses, actions, withDraft, original["with"], t) : void 0,
+		id: id.trim() && !editing.isValidJobName(id.trim()) ? t.invalidJobName : void 0,
+		timeout: durationError(timeout, t),
+		ignoreErrors: flagError(ignoreErrors, t),
+		maxRetries: retryOn ? countError(maxRetries, 0, t.invalidCount) : void 0,
+		interval: retryOn ? durationError(interval, t) : void 0,
+		retryTimeout: retryOn ? durationError(retryTimeout, t) : void 0,
+		cleanOnRetry: retryOn ? flagError(cleanOnRetry, t) : void 0,
+		env: rowsError(env, ENV_KEY, t.invalidEnvKey, t),
+		ssh: sshMode === "custom" ? sshError(ssh, t) : void 0
+	};
+	const nextRetry = () => {
+		if (!retryOn) return;
+		const next = {};
+		const retries = parseCount(maxRetries);
+		if (retries !== void 0) next["max-retries"] = retries;
+		if (interval.trim()) next["interval"] = interval.trim();
+		if (retryTimeout.trim()) next["timeout"] = retryTimeout.trim();
+		if (cleanOnRetry !== void 0) next["clean-on-retry"] = cleanOnRetry;
+		return next;
+	};
+	const patch = diffPatch(original, {
+		name: orUndefined(name),
+		run: kind === "run" ? run : void 0,
+		shell: kind === "run" ? orUndefined(shell) : void 0,
+		uses: kind === "uses" ? trimmedUses : void 0,
+		with: kind === "uses" ? withValue(trimmedUses, actions, withDraft, initialWith, text(original["uses"]), original["with"]) : void 0,
+		if: parseCondition(condition),
+		"working-directory": original["working-directory"] === null && !workingDirectory.trim() ? null : orUndefined(workingDirectory),
+		id: orUndefined(id),
+		timeout: orUndefined(timeout),
+		"ignore-errors": ignoreErrors,
+		"early-cancel": earlyCancel ? "any-job-failed" : void 0,
+		cleanup: cleanup.trim() ? cleanup : void 0,
+		retry: nextRetry(),
+		env: rowsTo(env, (value) => value),
+		ssh: sshMode === "inherit" ? void 0 : sshMode === "none" ? null : sshTo(ssh, original["ssh"])
+	});
+	const dirty = !isEmptyPatch(patch);
+	const invalid = Object.values(errors).some(Boolean);
+	const edit = (graphEdit) => {
+		onEdit(graphEdit);
+		onClose();
+	};
+	const fromId = text(original["id"]).trim();
+	const references = fromId && id.trim() && id.trim() !== fromId ? stepIdEdits(workflow, steps, job, index, fromId, id.trim()) : [];
+	const saveEdit = newInputs.save(dirty ? editing.batchOf([{
+		type: "updateStep",
+		job,
+		index,
+		...patch
+	}, ...references]) : null);
+	onDraft?.(saveEdit, invalid);
+	const children = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		newInputs.dialog,
+		/* @__PURE__ */ jsx(Input, {
+			autoFocus: true,
+			...labelled(t.stepName, "name"),
+			description: t.help.stepName,
+			value: name,
+			onChange: (e) => setName(e.target.value)
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "text-xs theme-muted-text",
+			children: t.help.stepKind
+		}),
+		/* @__PURE__ */ jsx(ChoiceButtons, {
+			options: [{
+				value: "run",
+				label: t.stepRun
+			}, {
+				value: "uses",
+				label: t.stepUses
+			}],
+			value: kind,
+			onChange: setKind
+		}),
+		kind === "run" ? /* @__PURE__ */ jsx(ScriptField, {
+			label: t.fields.run,
+			yamlKey: "run",
+			description: t.help.run,
+			rows: 8,
+			value: run,
+			error: errors.run,
+			placeholder: "echo \"Hello World\"",
+			onChange: setRun,
+			source
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(UsesPicker, {
+			uses: trimmedUses,
+			onUses: setUses,
+			choices: usesSuggestions,
+			draft: withDraft,
+			onDraft: setWithDraft,
+			error: errors.uses
+		}), /* @__PURE__ */ jsx(WithEditor, {
+			uses: trimmedUses,
+			draft: withDraft,
+			original: original["with"],
+			onChange: setWithDraft,
+			error: errors.with,
+			source
+		})] }),
+		/* @__PURE__ */ jsx(Section, {
+			title: t.sectionCleanup,
+			open: !!cleanup.trim(),
+			children: /* @__PURE__ */ jsx(ScriptField, {
+				label: t.fields.cleanup,
+				yamlKey: "cleanup",
+				description: t.help.cleanup,
+				value: cleanup,
+				onChange: setCleanup,
+				source
+			})
+		}),
+		/* @__PURE__ */ jsxs(Section, {
+			title: t.sectionBehavior,
+			open: !!condition || !!timeout || ignoreErrors !== void 0 || earlyCancel,
+			alert: !!(errors.timeout || errors.ignoreErrors),
+			children: [
+				/* @__PURE__ */ jsx(ConditionField, {
+					scope: "step",
+					label: t.fields.condition,
+					yamlKey: "if",
+					description: t.help.stepIf,
+					value: condition,
+					onChange: setCondition,
+					source
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					mono: true,
+					...labelled(t.fields.timeout, "timeout"),
+					description: t.help.stepTimeout,
+					value: timeout,
+					error: errors.timeout,
+					onChange: (e) => setTimeoutText(e.target.value)
+				}),
+				/* @__PURE__ */ jsx(FlagField, {
+					label: t.fields.ignoreErrors,
+					yamlKey: "ignore-errors",
+					description: t.help.ignoreErrors,
+					value: ignoreErrors,
+					original: original["ignore-errors"],
+					onChange: setIgnoreErrors,
+					source
+				}),
+				/* @__PURE__ */ jsx(ToggleField, {
+					label: t.fields.earlyCancel,
+					yamlKey: "early-cancel",
+					description: t.help.earlyCancel,
+					checked: earlyCancel,
+					onChange: setEarlyCancel
+				})
+			]
+		}),
+		/* @__PURE__ */ jsxs(Section, {
+			title: t.sectionRetry,
+			open: retryOn,
+			alert: !!(errors.maxRetries || errors.interval || errors.retryTimeout || errors.cleanOnRetry),
+			children: [/* @__PURE__ */ jsx(ToggleField, {
+				label: t.fields.retry,
+				yamlKey: "retry",
+				description: t.help.retry,
+				checked: retryOn,
+				onChange: setRetryOn
+			}), retryOn && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(Input, {
+					mono: true,
+					...labelled(t.fields.maxRetries, "max-retries"),
+					description: t.help.maxRetries,
+					value: maxRetries,
+					error: errors.maxRetries,
+					placeholder: "10",
+					onChange: (e) => setMaxRetries(e.target.value)
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					mono: true,
+					...labelled(t.fields.retryInterval, "interval"),
+					description: t.help.retryInterval,
+					value: interval,
+					error: errors.interval,
+					placeholder: "5s",
+					onChange: (e) => setIntervalText(e.target.value)
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					mono: true,
+					...labelled(t.fields.retryTimeout, "timeout"),
+					description: t.help.retryTimeout,
+					value: retryTimeout,
+					error: errors.retryTimeout,
+					placeholder: "30s",
+					onChange: (e) => setRetryTimeout(e.target.value)
+				}),
+				/* @__PURE__ */ jsx(FlagField, {
+					label: t.fields.cleanOnRetry,
+					yamlKey: "clean-on-retry",
+					description: t.help.cleanOnRetry,
+					value: cleanOnRetry,
+					original: retry["clean-on-retry"],
+					fallback: true,
+					onChange: setCleanOnRetry,
+					source
+				})
+			] })]
+		}),
+		/* @__PURE__ */ jsxs(Section, {
+			title: t.sectionRemoteHost,
+			description: t.help.stepSsh,
+			open: sshMode !== "inherit",
+			alert: !!errors.ssh,
+			children: [/* @__PURE__ */ jsx(ChoiceButtons, {
+				options: [
+					{
+						value: "inherit",
+						label: t.sshInherit
+					},
+					{
+						value: "custom",
+						label: t.sshCustom
+					},
+					{
+						value: "none",
+						label: t.sshNone
+					}
+				],
+				value: sshMode,
+				onChange: setSshMode
+			}), sshMode === "custom" && /* @__PURE__ */ jsx(SshEditor, {
+				fields: ssh,
+				onChange: setSsh,
+				error: errors.ssh,
+				source
+			})]
+		}),
+		/* @__PURE__ */ jsx(EnvSection, {
+			description: t.help.stepEnv,
+			rows: env,
+			onChange: setEnv,
+			error: errors.env,
+			source
+		}),
+		/* @__PURE__ */ jsxs(Section, {
+			title: t.sectionAdvanced,
+			open: !!workingDirectory || !!id || !!shell,
+			alert: !!(errors.id || errors.shell),
+			children: [
+				/* @__PURE__ */ jsx(Input, {
+					mono: true,
+					...labelled(t.fields.workingDirectory, "working-directory"),
+					description: t.help.stepWorkingDirectory,
+					value: workingDirectory,
+					onChange: (e) => setWorkingDirectory(e.target.value)
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					mono: true,
+					...labelled(t.fields.stepId, "id"),
+					description: t.help.stepId,
+					value: id,
+					error: errors.id,
+					onChange: (e) => setId(e.target.value)
+				}),
+				kind === "run" && /* @__PURE__ */ jsx(Input, {
+					mono: true,
+					...labelled(t.fields.shell, "shell"),
+					description: t.help.shell,
+					value: shell,
+					error: errors.shell,
+					placeholder: "bash -e {0}",
+					onChange: (e) => setShell(e.target.value)
+				})
+			]
+		})
+	] });
+	const shellProps = {
+		title: t.editStep,
+		onClose,
+		dirty: dirty || pending,
+		saveDisabled: invalid,
+		locked: newInputs.dialog !== null,
+		onSubmit: () => {
+			if (saveEdit) onEdit(saveEdit);
+			onClose();
+		},
+		footerStart: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(IconButton, {
+				icon: /* @__PURE__ */ jsx(BiSolidTrashAlt, { className: "h-4 w-4" }),
+				label: t.deleteStep,
+				variant: "ghost",
+				size: "sm",
+				onClick: () => adding ? onClose() : edit({
+					type: "deleteStep",
+					job,
+					index
+				})
+			}),
+			/* @__PURE__ */ jsx(IconButton, {
+				icon: /* @__PURE__ */ jsx(FaArrowUp, { className: "h-4 w-4" }),
+				label: t.moveUp,
+				variant: "ghost",
+				size: "sm",
+				disabled: dirty || pending || index === 0,
+				onClick: () => edit({
+					type: "moveStep",
+					job,
+					from: index,
+					to: index - 1
+				})
+			}),
+			/* @__PURE__ */ jsx(IconButton, {
+				icon: /* @__PURE__ */ jsx(FaArrowDown, { className: "h-4 w-4" }),
+				label: t.moveDown,
+				variant: "ghost",
+				size: "sm",
+				disabled: dirty || pending || index >= steps.length - 1,
+				onClick: () => edit({
+					type: "moveStep",
+					job,
+					from: index,
+					to: index + 2
+				})
+			})
+		] }),
+		children
+	};
+	return renderShell ? renderShell(shellProps) : /* @__PURE__ */ jsx(DialogShell, { ...shellProps });
+}
+function openingYaml(view, source, read) {
+	if (view === "form" || source === void 0) return null;
+	try {
+		return read(source);
+	} catch {
+		return null;
+	}
+}
+function stepIdEdits(workflow, steps, job, index, from, to) {
+	const id = from.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+	const own = new RegExp(`(?<![A-Za-z0-9_.-])steps\\.${id}(?![A-Za-z0-9_-])`, "g");
+	const needed = new RegExp(`(?<![A-Za-z0-9_.-])needs\\.${job}\\.steps\\.${id}(?![A-Za-z0-9_-])`, "g");
+	const rewrite = (value, inJob) => {
+		if (typeof value === "string") return value.replace(/\$\{\{[\s\S]*?\}\}/g, (expression) => {
+			const outside = expression.replace(needed, `needs.${job}.steps.${to}`);
+			return inJob ? outside.replace(own, `steps.${to}`) : outside;
+		});
+		if (Array.isArray(value)) return value.map((item) => rewrite(item, inJob));
+		return value && typeof value === "object" ? Object.fromEntries(Object.entries(value).map(([key, item]) => [key, rewrite(item, inJob)])) : value;
+	};
+	const changed = (record, inJob) => {
+		const set = {};
+		for (const [key, value] of Object.entries(record)) {
+			const next = rewrite(value, inJob);
+			if (!sameValue(next, value)) set[key] = next;
+		}
+		return set;
+	};
+	const jobs = workflow ? asRecord(workflow["jobs"]) : { [job]: { steps } };
+	return Object.entries(jobs).flatMap(([name, value]) => {
+		const { steps: own = [], ...fields } = asRecord(value);
+		const inJob = name === job;
+		const jobSet = changed(fields, inJob);
+		return [...Object.keys(jobSet).length > 0 ? [{
+			type: "updateJob",
+			job: name,
+			set: jobSet
+		}] : [], ...(Array.isArray(own) ? own : []).flatMap((step, i) => {
+			const set = inJob && i === index ? {} : changed(asRecord(step), inJob);
+			return Object.keys(set).length > 0 ? [{
+				type: "updateStep",
+				job: name,
+				index: i,
+				set
+			}] : [];
+		})];
+	});
+}
+function applyAll(editing, text, edits) {
+	return edits.reduce((yml, edit) => editing.applyGraphEdit({
+		yml,
+		layout: void 0
+	}, edit).yml, text);
+}
+function renamedJob(edit) {
+	if (!edit) return;
+	if (edit.type === "batch") return edit.edits.map(renamedJob).findLast(Boolean);
+	return edit.type === "updateJob" ? edit.name : void 0;
+}
+/**
+* The linter's problems inside one job or step of `whole`, the workflow as the dialog has it,
+* with lines in `fragment`, the YAML the dialog shows, when it shows YAML.
+*/
+function useScopedProblems(whole, prefix, fragment, exclude = []) {
+	const ready = useLintEditing();
+	const context = useLintContext(whole);
+	const contextKey = JSON.stringify(context);
+	const scope = prefix.join(".");
+	return useMemo(() => {
+		if (!ready || whole === void 0) return NO_SCOPED;
+		const problems = ready.lintWorkflow(whole, context).flatMap((problem) => {
+			const path = problem.path.split(".");
+			if (!prefix.every((segment, i) => path[i] === segment) || exclude.includes(path[prefix.length] ?? "")) return [];
+			return [{
+				at: path.slice(prefix.length).map((segment) => /^\d+$/.test(segment) ? Number(segment) : segment),
+				message: problem.message,
+				fix: problem.fix
+			}];
+		});
+		return {
+			problems,
+			markers: fragment === null ? [] : problems.map((problem) => ({
+				message: problem.message,
+				line: (problem.at.length > 0 ? ready.linesAt(fragment, problem.at)?.start : void 0) ?? 1
+			}))
+		};
+	}, [
+		ready,
+		whole,
+		contextKey,
+		scope,
+		fragment,
+		exclude.join()
+	]);
+}
+/**
+* The input groups a `with:` completion in the YAML view adds to the workflow, saved with the
+* dialog ahead of the text that reads them.
+*/
+function useAddedGroups(start, committed) {
+	const editing = useWorkflowEditing();
+	const [added, setAdded] = useState([]);
+	const nested = {
+		inputs: () => {
+			const text = editedWorkflow(editing, start, committed).yml;
+			const on = asRecord(asRecord(text === void 0 ? {} : editing.loadYaml(text))["on"]);
+			return {
+				...asRecord(asRecord(on["execute"])["inputs"]),
+				...Object.fromEntries(added.map((group) => [group.name, group.definition]))
+			};
+		},
+		addInputs: (name, definition) => setAdded((current) => [...current.filter((group) => group.name !== name), {
+			name,
+			definition
+		}])
+	};
+	const edits = (text) => added.filter(({ name }) => text.includes(`inputs.${name}.`)).map(({ name, definition }) => ({
+		type: "addInput",
+		parent: [],
+		index: 0,
+		name,
+		definition
+	}));
+	return {
+		nested,
+		edits,
+		clear: () => setAdded([])
+	};
+}
+function editedWorkflow(editing, start, edits) {
+	if (start === void 0) return {
+		yml: void 0,
+		error: void 0
+	};
+	try {
+		return {
+			yml: applyAll(editing, start, edits),
+			error: void 0
+		};
+	} catch (error) {
+		return {
+			yml: void 0,
+			error
+		};
+	}
+}
+/** A dialog's settings in a form or as YAML, with the edits carried across a switch. */
+function useSettingsViews(o) {
+	const t = useGraphEditorStrings();
+	const editing = useWorkflowEditing();
+	const sections = useSectionMemory();
+	const [start] = useState(o.source);
+	const [opening] = useState(() => openingYaml(o.view, o.source, (text) => o.read(text, o.name)));
+	const [committed, setCommitted] = useState([]);
+	const [name, setName] = useState(o.name);
+	const [yamlName, setYamlName] = useState(o.name);
+	const [yaml, setYaml] = useState(opening);
+	const [yamlAtStart, setYamlAtStart] = useState(opening ?? "");
+	const [problem, setProblem] = useState();
+	const [version, setVersion] = useState(0);
+	const draft = useRef(null);
+	const invalidDraft = useRef(false);
+	const [, setDrafts] = useState(0);
+	const lastDraft = useRef("");
+	const trackDraft = (edit, invalid) => {
+		draft.current = edit;
+		invalidDraft.current = invalid;
+		const seen = JSON.stringify([edit, invalid]);
+		if (seen !== lastDraft.current) {
+			lastDraft.current = seen;
+			window.setTimeout(() => {
+				setDrafts((n) => n + 1);
+				if (!invalid) setProblem(void 0);
+			}, 0);
+		}
+	};
+	const groups = useAddedGroups(start, committed);
+	const drafted = () => draft.current ? [...committed, draft.current] : committed;
+	const withYaml = (text) => text === yamlAtStart ? committed : [
+		...committed,
+		...groups.edits(text),
+		o.write(name, text)
+	];
+	const problemOf = (text) => o.optional && !text.trim() ? void 0 : yamlProblem(text, t, editing);
+	const nextName = yamlName.trim();
+	const nameError = o.rename?.error(nextName, name);
+	const withRename = (edits) => o.rename && nextName !== name ? [...edits, o.rename.edit(name, nextName)] : edits;
+	const edits = yaml !== null ? withYaml(yaml) : drafted();
+	const editsKey = JSON.stringify(edits);
+	const applied = useMemo(() => editedWorkflow(editing, start, edits), [
+		editing,
+		start,
+		editsKey
+	]);
+	const whole = applied.yml;
+	const refused = yaml !== null && applied.error !== void 0 ? editErrorText(t, editing, applied.error) : void 0;
+	const scopeName = yaml !== null ? name : o.rename?.from(draft.current) ?? name;
+	const scoped = useScopedProblems(whole, o.scope(scopeName), yaml, o.exclude);
+	const current = useMemo(() => start !== void 0 && committed.length > 0 ? asRecord(editing.loadYaml(applyAll(editing, start, committed))) : null, [
+		editing,
+		start,
+		committed
+	]);
+	const save = (edits) => {
+		const edit = editing.batchOf(o.addition ? [o.addition, ...edits] : edits);
+		if (edit) o.onEdit(edit);
+		o.onClose();
+	};
+	const toYaml = () => {
+		if (start === void 0) return;
+		if (invalidDraft.current) {
+			setProblem(t.fixFieldsFirst);
+			return;
+		}
+		const edits = drafted();
+		const renamed = o.rename?.from(draft.current) ?? name;
+		try {
+			const text = o.read(applyAll(editing, start, edits), renamed);
+			setCommitted(edits);
+			setName(renamed);
+			setYamlName(renamed);
+			setYaml(text);
+			setYamlAtStart(text);
+			setProblem(void 0);
+			o.onViewChange?.("yaml");
+		} catch (error) {
+			setProblem(editErrorText(t, editing, error));
+		}
+	};
+	const toForm = () => {
+		if (yaml === null) return;
+		const issue = problemOf(yaml) ?? nameError ?? refused;
+		if (issue) {
+			setProblem(issue);
+			return;
+		}
+		setCommitted(withRename(withYaml(yaml)));
+		setName(nextName);
+		groups.clear();
+		setYaml(null);
+		setVersion((current) => current + 1);
+		o.onViewChange?.("form");
+	};
+	const switcher = /* @__PURE__ */ jsx(ViewSwitch, {
+		yaml: yaml !== null,
+		onForm: toForm,
+		onYaml: toYaml
+	});
+	const yamlDialog = (title, path, text) => /* @__PURE__ */ jsxs(DialogShell, {
+		title,
+		onClose: o.onClose,
+		dirty: committed.length > 0 || text !== yamlAtStart || nextName !== name,
+		saveDisabled: problemOf(text) !== void 0 || nameError !== void 0 || refused !== void 0,
+		onSubmit: () => save(withRename(withYaml(text))),
+		headerEnd: switcher,
+		openOnAdd: o.openOnAdd,
+		children: [o.rename && /* @__PURE__ */ jsx(Input, {
+			mono: true,
+			label: o.rename.label,
+			description: o.rename.description,
+			value: yamlName,
+			error: nameError,
+			onChange: (e) => setYamlName(e.target.value)
+		}), /* @__PURE__ */ jsx(YamlPane, {
+			path,
+			nested: groups.nested,
+			value: text,
+			onChange: (next) => {
+				setYaml(next);
+				setProblem(void 0);
+			},
+			problem: problem ?? problemOf(text) ?? refused,
+			scoped
+		})]
+	});
+	const formDialog = (render) => /* @__PURE__ */ jsx(SectionMemory.Provider, {
+		value: sections,
+		children: /* @__PURE__ */ jsx(FieldProblems, {
+			problems: scoped.problems,
+			children: render({
+				pending: committed.length > 0 || o.addition !== void 0,
+				onDraft: trackDraft,
+				renderShell: (shellProps) => /* @__PURE__ */ jsxs(DialogShell, {
+					...shellProps,
+					headerEnd: switcher,
+					openOnAdd: o.openOnAdd,
+					onSubmit: () => save(drafted()),
+					children: [
+						/* @__PURE__ */ jsx(FieldError, { message: problem }),
+						/* @__PURE__ */ jsx(ProblemList, { problems: scoped.problems }),
+						shellProps.children
+					]
+				})
+			})
+		})
+	});
+	return {
+		start,
+		yaml,
+		name,
+		version,
+		current,
+		yamlDialog,
+		formDialog
+	};
+}
+/** A job's settings in a form, or as YAML; switching carries the edits across. */
+function JobDialog(props) {
+	const t = useGraphEditorStrings();
+	const editing = useWorkflowEditing();
+	const views = useSettingsViews({
+		...props,
+		name: props.job,
+		read: editing.jobYaml,
+		write: (job, yaml) => ({
+			type: "setJobYaml",
+			job,
+			yaml
+		}),
+		scope: (job) => ["jobs", job],
+		rename: {
+			label: t.jobName,
+			description: t.help.jobName,
+			error: (next, current) => !editing.isValidJobName(next) ? t.invalidJobName : next !== current && next !== props.job && Object.hasOwn(props.jobs, next) ? t.jobExists : void 0,
+			edit: (job, name) => ({
+				type: "updateJob",
+				job,
+				name
+			}),
+			from: renamedJob
+		}
+	});
+	if (views.start === void 0) return /* @__PURE__ */ jsx(JobForm, { ...props });
+	if (views.yaml !== null) return views.yamlDialog(t.editJob, JOB_YAML_PATH, views.yaml);
+	const { current } = views;
+	return views.formDialog((host) => /* @__PURE__ */ jsx(JobForm, {
+		...props,
+		...host,
+		job: views.name,
+		jobs: current ? asRecord(current["jobs"]) : props.jobs,
+		workflow: current ?? props.workflow
+	}, views.version));
+}
+/** A step's settings in a form, or as YAML; switching carries the edits across. */
+function StepDialog(props) {
+	const { job, index } = props;
+	const t = useGraphEditorStrings();
+	const editing = useWorkflowEditing();
+	const views = useSettingsViews({
+		...props,
+		name: job,
+		read: (text) => editing.stepYaml(text, job, index),
+		write: (_, yaml) => ({
+			type: "setStepYaml",
+			job,
+			index,
+			yaml
+		}),
+		scope: () => [
+			"jobs",
+			job,
+			"steps",
+			String(index)
+		]
+	});
+	if (views.start === void 0) return /* @__PURE__ */ jsx(StepForm, { ...props });
+	if (views.yaml !== null) return views.yamlDialog(t.editStep, STEP_YAML_PATH, views.yaml);
+	const steps = asRecord(asRecord(views.current?.["jobs"])[job])["steps"];
+	return views.formDialog((host) => /* @__PURE__ */ jsx(StepForm, {
+		...props,
+		...host,
+		adding: props.addition !== void 0,
+		steps: Array.isArray(steps) ? steps : props.steps,
+		workflow: views.current ?? props.workflow
+	}, views.version));
+}
+//#endregion
+export { JOB_FIELDS, JobDialog, RETRY_FIELDS, RUNS_ON_FIELDS, SSH_KEYS, STEP_FIELDS, STRATEGY_FIELDS, StepDialog, useSettingsViews };