@parallelworks/ui 0.43.0 → 0.45.0

package/dist/graph/GraphEditorDialogs.js

@@ -1,24 +1,23 @@
-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 { ArrowDownIcon, ArrowUpIcon, RemoveIcon, TrashIcon } from "../icons.js";
 import { withPositionKeys } from "../components/keys.js";
 import { useWorkflowActions, useWorkflowEditing } from "../components/Provider.js";
+import { Checkbox } from "../components/Checkbox.js";
+import { ErrorText, FieldOption } from "../components/Field.js";
 import { IconButton } from "../components/IconButton.js";
-import { Input, fieldBoxClasses } from "../components/Input.js";
+import { Input } from "../components/Input.js";
+import { Select } from "../components/Select.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 { AddRowButton, ChoiceButtons, DialogSection, DialogShell, ENV_KEY, EXPRESSION, ExpressionToggle, KeyValueEditor, SectionMemory, ToggleField, YamlField, 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 { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId, useMemo, useRef, useState } from "react";
 //#region src/graph/GraphEditorDialogs.tsx
@@ -168,10 +167,10 @@ function runsOnError(fields, sshUsed, t) {
 	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);
+		return rowsError(fields.schedulingParams, PARAM_KEY, t.common.invalidName, t);
 	}
 	if (!fields.cluster.trim() || !fields.name.trim()) return t.runsOnNeedsEnvironment;
-	return rowsError(fields.params, PARAM_KEY, t.invalidKey, t);
+	return rowsError(fields.params, PARAM_KEY, t.common.invalidName, t);
 }
 function sshHelp(key, t) {
 	return key === "disconnect-timeout" ? t.help.disconnectTimeout : t.help[key];
@@ -219,14 +218,14 @@ function SshEditor({ fields, onChange, error, source }) {
 				value: fields[key],
 				onChange: (e) => set(key)(e.target.value)
 			}, key)),
-			/* @__PURE__ */ jsx(FieldError, { message: error })
+			/* @__PURE__ */ jsx(ErrorText, { children: 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, {
+	return /* @__PURE__ */ jsx(DialogSection, {
 		title: t.sectionEnvironment,
 		description,
 		open: rows.length > 0,
@@ -271,7 +270,7 @@ function outputsTo(rows, job) {
 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 (!OUTPUT_KEY.test(names[i] ?? "")) return t.common.invalidName;
 		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;
@@ -313,19 +312,16 @@ function OutputsEditor({ rows, onChange, stepIds, error }) {
 						})
 					}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 						className: "w-1/3",
-						children: /* @__PURE__ */ jsxs("select", {
+						children: /* @__PURE__ */ jsx(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", {
+							placeholder: t.outputStep,
+							items: stepIds.map((id) => ({
 								value: id,
-								children: id
-							}, id))]
+								label: id
+							})),
+							value: row.step || null,
+							onValueChange: (step) => update(i, { step: step ?? "" }),
+							className: "font-mono"
 						})
 					}), /* @__PURE__ */ jsx("div", {
 						className: "flex-1",
@@ -351,17 +347,17 @@ function OutputsEditor({ rows, onChange, stepIds, error }) {
 						} : other))
 					}),
 					/* @__PURE__ */ jsx(IconButton, {
-						icon: /* @__PURE__ */ jsx(IoMdClose, { className: "h-4 w-4" }),
-						label: t.removeRow,
+						icon: /* @__PURE__ */ jsx(RemoveIcon, {}),
+						label: t.common.remove,
 						variant: "ghost",
 						size: "sm",
 						onClick: () => onChange(removeAt(rows, i))
 					})
 				]
 			}, key)),
-			/* @__PURE__ */ jsx(FieldError, { message: error }),
+			/* @__PURE__ */ jsx(ErrorText, { children: error }),
 			/* @__PURE__ */ jsx(AddRowButton, {
-				label: t.addRow,
+				label: t.common.add,
 				onClick: () => onChange([...rows, {
 					name: "",
 					step: stepIds[0] ?? "",
@@ -423,31 +419,31 @@ function entriesTo(entries) {
 }
 function entriesError(entries, t) {
 	for (const rows of entries) {
-		const error = rows.length === 0 ? t.invalidMatrixEntry : rowsError(rows, MATRIX_KEY, t.invalidKey, t);
+		const error = rows.length === 0 ? t.invalidMatrixEntry : rowsError(rows, MATRIX_KEY, t.common.invalidName, 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, {
+	return /* @__PURE__ */ jsx(YamlField, {
+		label,
+		yamlKey,
+		description,
+		error,
+		actions: /* @__PURE__ */ jsx(ExpressionToggle, {
+			active: text !== void 0,
+			onChange: (on) => onText(on ? "" : void 0)
+		}),
+		children: text !== void 0 ? /* @__PURE__ */ jsx(Input, {
 			mono: true,
 			"aria-label": label,
+			"aria-invalid": error ? true : void 0,
 			value: text,
-			error,
 			onChange: (e) => onText(e.target.value)
-		}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-			withPositionKeys(entries).map(({ key, item: rows }, i) => /* @__PURE__ */ jsxs("div", {
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			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",
@@ -457,22 +453,20 @@ function MatrixEntries({ label, yamlKey, description, entries, onChange, text, o
 						error: void 0
 					})
 				}), /* @__PURE__ */ jsx(IconButton, {
-					icon: /* @__PURE__ */ jsx(IoMdClose, { className: "h-4 w-4" }),
+					icon: /* @__PURE__ */ jsx(RemoveIcon, {}),
 					label: t.removeEntry,
 					variant: "ghost",
 					size: "sm",
 					onClick: () => onChange(removeAt(entries, i))
 				})]
-			}, key)),
-			/* @__PURE__ */ jsx(FieldError, { message: error }),
-			/* @__PURE__ */ jsx(AddRowButton, {
+			}, key)), /* @__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. */
@@ -502,6 +496,7 @@ function MatrixVariable({ row, source, onChange, onRemove }) {
 				}), /* @__PURE__ */ jsx("div", {
 					className: "flex-1",
 					children: /* @__PURE__ */ jsx(ChoiceButtons, {
+						label: t.matrixValuesFrom,
 						options: [{
 							value: "values",
 							label: t.matrixValuesListed
@@ -548,7 +543,7 @@ function MatrixVariable({ row, source, onChange, onRemove }) {
 				})
 			})]
 		}), /* @__PURE__ */ jsx(IconButton, {
-			icon: /* @__PURE__ */ jsx(IoMdClose, { className: "h-4 w-4" }),
+			icon: /* @__PURE__ */ jsx(RemoveIcon, {}),
 			label: t.removeVariable,
 			variant: "ghost",
 			size: "sm",
@@ -681,47 +676,46 @@ function JobForm({ job, jobs, inputs, workflow, onEdit, onClose, renderShell, on
 			error: errors.name,
 			onChange: (e) => setName(e.target.value)
 		}),
-		/* @__PURE__ */ jsxs(Section, {
+		/* @__PURE__ */ jsxs(DialogSection, {
 			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
-					})
+			children: [/* @__PURE__ */ jsx(YamlField, {
+				label: t.fields.needs,
+				yamlKey: "needs",
+				description: needsTyped ? t.help.needsExpression : t.help.needs,
+				error: needsTyped && errors.needs || needsLint,
+				actions: /* @__PURE__ */ jsx(ExpressionToggle, {
+					active: needsTyped,
+					onChange: setNeedsTyped
 				}),
-				needsTyped ? /* @__PURE__ */ jsx(Input, {
+				children: needsTyped ? /* @__PURE__ */ jsx(Input, {
 					id: needsId,
 					mono: true,
 					"aria-label": t.fields.needs,
+					"aria-invalid": errors.needs || needsLint ? true : void 0,
 					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", {
+				}) : /* @__PURE__ */ jsx("div", {
 					id: needsId,
 					tabIndex: -1,
 					className: "flex flex-col gap-1.5",
-					children: [[...others, ...missing].map((other) => {
+					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: clsx("flex flex-1 items-center gap-2", cycle ? "cursor-not-allowed opacity-50" : "cursor-pointer"),
-								title: cycle ? t.dependsOnThisJob : void 0,
+							title: cycle ? t.dependsOnThisJob : void 0,
+							children: [/* @__PURE__ */ jsxs(FieldOption, {
+								disabled: cycle,
+								className: "flex flex-1 items-center gap-2",
 								children: [
-									/* @__PURE__ */ jsx("input", {
-										type: "checkbox",
+									/* @__PURE__ */ jsx(Checkbox, {
 										checked: !!entry,
 										disabled: cycle,
-										onChange: (e) => toggleNeed(other, e.target.checked)
+										onCheckedChange: (on) => toggleNeed(other, on)
 									}),
 									/* @__PURE__ */ jsx("span", {
 										className: "font-mono",
@@ -732,30 +726,30 @@ function JobForm({ job, jobs, inputs, workflow, onEdit, onClose, renderShell, on
 										children: t.missingJob
 									})
 								]
-							}), entry && isMatrixJob(other) && /* @__PURE__ */ jsxs("label", {
-								className: "flex cursor-pointer items-center gap-1.5 text-xs theme-muted-text",
+							}), entry && isMatrixJob(other) && /* @__PURE__ */ jsx("span", {
 								title: t.help.waitForAny,
-								children: [/* @__PURE__ */ jsx("input", {
-									type: "checkbox",
-									checked: entry.endsWith(":any"),
-									onChange: (e) => toggleAny(other, e.target.checked)
-								}), t.waitForAny]
+								children: /* @__PURE__ */ jsxs(FieldOption, {
+									className: "flex items-center gap-1.5 text-xs theme-muted-text",
+									children: [/* @__PURE__ */ jsx(Checkbox, {
+										checked: entry.endsWith(":any"),
+										onCheckedChange: (on) => toggleAny(other, on)
+									}), 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(ConditionField, {
+				scope: "job",
+				label: t.fields.condition,
+				yamlKey: "if",
+				description: t.help.jobIf,
+				value: condition,
+				onChange: setCondition,
+				source
+			})]
 		}),
-		/* @__PURE__ */ jsx(Section, {
+		/* @__PURE__ */ jsx(DialogSection, {
 			title: t.sectionRemoteHost,
 			description: t.runsInWorkspace,
 			open: !!sshTo(ssh, original["ssh"]),
@@ -767,29 +761,29 @@ function JobForm({ job, jobs, inputs, workflow, onEdit, onClose, renderShell, on
 				source
 			})
 		}),
-		/* @__PURE__ */ jsx(Section, {
+		/* @__PURE__ */ jsx(DialogSection, {
 			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, {
+				children: [/* @__PURE__ */ jsx(YamlField, {
 					label: t.fields.runsOn,
 					yamlKey: "runs-on",
 					description: t.help.runsOn,
+					error: errors.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, { children: [
-					/* @__PURE__ */ jsx(ChoiceButtons, {
+					}),
+					children: runsOnTyped ? /* @__PURE__ */ jsx(Input, {
+						mono: true,
+						"aria-label": t.fields.runsOn,
+						"aria-invalid": errors.runsOn ? true : void 0,
+						value: runsOnText,
+						onChange: (e) => setRunsOnText(e.target.value)
+					}) : /* @__PURE__ */ jsx(ChoiceButtons, {
 						options: [{
 							value: "name",
 							label: t.runsOnByName
@@ -802,117 +796,115 @@ function JobForm({ job, jobs, inputs, workflow, onEdit, onClose, renderShell, on
 							...runsOn,
 							kind
 						})
+					})
+				}), !runsOnTyped && (runsOn.kind === "name" ? /* @__PURE__ */ jsxs(Fragment, { 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
+						})
 					}),
-					runsOn.kind === "name" ? /* @__PURE__ */ jsxs(Fragment, { 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__ */ 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__ */ jsxs(Fragment, { 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({
+					}),
+					/* @__PURE__ */ jsx(YamlField, {
+						label: t.fields.schedulingParams,
+						yamlKey: "params",
+						description: t.help.schedulingParams,
+						children: /* @__PURE__ */ jsx(KeyValueEditor, {
+							rows: runsOn.params,
+							onChange: (params) => 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({
+								params
+							}),
+							error: void 0
+						})
+					})
+				] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(YamlField, {
+						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,
-								newWorker
+								mode
 							})
-						}),
-						/* @__PURE__ */ jsx(Input, {
-							mono: true,
-							...labelled(t.fields.workerId, "workerId"),
-							description: t.help.workerId,
-							value: runsOn.workerId,
-							onChange: (e) => setRunsOn({
+						})
+					}),
+					/* @__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(YamlField, {
+						label: t.fields.schedulingParams,
+						yamlKey: "schedulingParams",
+						description: t.help.schedulingParams,
+						children: /* @__PURE__ */ jsx(KeyValueEditor, {
+							rows: runsOn.schedulingParams,
+							onChange: (schedulingParams) => setRunsOn({
 								...runsOn,
-								workerId: e.target.value
-							})
+								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(FieldError, { message: errors.runsOn })
-				] })]
+					}),
+					/* @__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__ */ jsxs(Section, {
+		/* @__PURE__ */ jsxs(DialogSection, {
 			title: t.sectionMatrix,
 			open: matrixOn,
 			alert: !!(errors.matrix || errors.include || errors.exclude || errors.failFast || errors.maxParallel),
@@ -926,23 +918,24 @@ function JobForm({ job, jobs, inputs, workflow, onEdit, onClose, renderShell, on
 					if (on && matrixMode === "variables") addVariableRow();
 				}
 			}), matrixOn && /* @__PURE__ */ jsxs(Fragment, { children: [
-				typeof rawMatrix === "string" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FieldLabel, {
+				typeof rawMatrix === "string" && /* @__PURE__ */ jsx(YamlField, {
 					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();
-					}
-				})] }),
+					description: t.help.matrixMode,
+					children: /* @__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"),
@@ -961,7 +954,7 @@ function JobForm({ job, jobs, inputs, workflow, onEdit, onClose, renderShell, on
 						onChange: (next) => setMatrixRows((rows) => updateAt(rows, i, next)),
 						onRemove: () => setMatrixRows((rows) => removeAt(rows, i))
 					}, row.key)),
-					/* @__PURE__ */ jsx(FieldError, { message: errors.matrix }),
+					/* @__PURE__ */ jsx(ErrorText, { children: errors.matrix }),
 					/* @__PURE__ */ jsx(AddRowButton, {
 						label: t.addVariable,
 						onClick: () => setMatrixRows((rows) => [...rows, matrixRow({
@@ -1017,7 +1010,7 @@ function JobForm({ job, jobs, inputs, workflow, onEdit, onClose, renderShell, on
 			error: errors.env,
 			source
 		}),
-		/* @__PURE__ */ jsx(Section, {
+		/* @__PURE__ */ jsx(DialogSection, {
 			title: t.sectionOutputs,
 			description: t.help.outputs,
 			open: outputs.length > 0,
@@ -1029,7 +1022,7 @@ function JobForm({ job, jobs, inputs, workflow, onEdit, onClose, renderShell, on
 				error: errors.outputs
 			})
 		}),
-		/* @__PURE__ */ jsxs(Section, {
+		/* @__PURE__ */ jsxs(DialogSection, {
 			title: t.sectionAdvanced,
 			open: !!workingDirectory || !!timeout,
 			alert: !!errors.timeout,
@@ -1165,20 +1158,20 @@ function StepForm({ job, index, steps, inputs, workflow, usesSuggestions, onEdit
 			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
+		/* @__PURE__ */ jsx(YamlField, {
+			label: t.stepKind,
+			description: t.help.stepKind,
+			children: /* @__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,
@@ -1205,7 +1198,7 @@ function StepForm({ job, index, steps, inputs, workflow, usesSuggestions, onEdit
 			error: errors.with,
 			source
 		})] }),
-		/* @__PURE__ */ jsx(Section, {
+		/* @__PURE__ */ jsx(DialogSection, {
 			title: t.sectionCleanup,
 			open: !!cleanup.trim(),
 			children: /* @__PURE__ */ jsx(ScriptField, {
@@ -1217,7 +1210,7 @@ function StepForm({ job, index, steps, inputs, workflow, usesSuggestions, onEdit
 				source
 			})
 		}),
-		/* @__PURE__ */ jsxs(Section, {
+		/* @__PURE__ */ jsxs(DialogSection, {
 			title: t.sectionBehavior,
 			open: !!condition || !!timeout || ignoreErrors !== void 0 || earlyCancel,
 			alert: !!(errors.timeout || errors.ignoreErrors),
@@ -1257,7 +1250,7 @@ function StepForm({ job, index, steps, inputs, workflow, usesSuggestions, onEdit
 				})
 			]
 		}),
-		/* @__PURE__ */ jsxs(Section, {
+		/* @__PURE__ */ jsxs(DialogSection, {
 			title: t.sectionRetry,
 			open: retryOn,
 			alert: !!(errors.maxRetries || errors.interval || errors.retryTimeout || errors.cleanOnRetry),
@@ -1307,12 +1300,13 @@ function StepForm({ job, index, steps, inputs, workflow, usesSuggestions, onEdit
 				})
 			] })]
 		}),
-		/* @__PURE__ */ jsxs(Section, {
+		/* @__PURE__ */ jsxs(DialogSection, {
 			title: t.sectionRemoteHost,
 			description: t.help.stepSsh,
 			open: sshMode !== "inherit",
 			alert: !!errors.ssh,
 			children: [/* @__PURE__ */ jsx(ChoiceButtons, {
+				label: t.sectionRemoteHost,
 				options: [
 					{
 						value: "inherit",
@@ -1343,7 +1337,7 @@ function StepForm({ job, index, steps, inputs, workflow, usesSuggestions, onEdit
 			error: errors.env,
 			source
 		}),
-		/* @__PURE__ */ jsxs(Section, {
+		/* @__PURE__ */ jsxs(DialogSection, {
 			title: t.sectionAdvanced,
 			open: !!workingDirectory || !!id || !!shell,
 			alert: !!(errors.id || errors.shell),
@@ -1387,7 +1381,7 @@ function StepForm({ job, index, steps, inputs, workflow, usesSuggestions, onEdit
 		},
 		footerStart: /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx(IconButton, {
-				icon: /* @__PURE__ */ jsx(BiSolidTrashAlt, { className: "h-4 w-4" }),
+				icon: /* @__PURE__ */ jsx(TrashIcon, {}),
 				label: t.deleteStep,
 				variant: "ghost",
 				size: "sm",
@@ -1398,8 +1392,8 @@ function StepForm({ job, index, steps, inputs, workflow, usesSuggestions, onEdit
 				})
 			}),
 			/* @__PURE__ */ jsx(IconButton, {
-				icon: /* @__PURE__ */ jsx(FaArrowUp, { className: "h-4 w-4" }),
-				label: t.moveUp,
+				icon: /* @__PURE__ */ jsx(ArrowUpIcon, {}),
+				label: t.common.moveUp,
 				variant: "ghost",
 				size: "sm",
 				disabled: dirty || pending || index === 0,
@@ -1411,8 +1405,8 @@ function StepForm({ job, index, steps, inputs, workflow, usesSuggestions, onEdit
 				})
 			}),
 			/* @__PURE__ */ jsx(IconButton, {
-				icon: /* @__PURE__ */ jsx(FaArrowDown, { className: "h-4 w-4" }),
-				label: t.moveDown,
+				icon: /* @__PURE__ */ jsx(ArrowDownIcon, {}),
+				label: t.common.moveDown,
 				variant: "ghost",
 				size: "sm",
 				disabled: dirty || pending || index >= steps.length - 1,
@@ -1716,7 +1710,7 @@ function useSettingsViews(o) {
 					openOnAdd: o.openOnAdd,
 					onSubmit: () => save(drafted()),
 					children: [
-						/* @__PURE__ */ jsx(FieldError, { message: problem }),
+						/* @__PURE__ */ jsx(ErrorText, { children: problem }),
 						/* @__PURE__ */ jsx(ProblemList, { problems: scoped.problems }),
 						shellProps.children
 					]