@parallelworks/ui 0.44.0 → 0.45.0

package/dist/graph/TreeView.js

@@ -1,37 +1,37 @@
-import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
-import { LoaderIcon } from "../components/StatusIcons.js";
+import { cx } from "../cx.js";
+import { ChevronRightIcon } from "../icons.js";
+import { EmptyState } from "../components/EmptyState.js";
+import { Loader } from "../components/Loader.js";
 import { useRunFile, useSlots, useStrings, useWorkflowEngine } from "../components/Provider.js";
-import { Indicator } from "../components/Indicator.js";
+import { DisclosurePanel } from "../components/Disclosure.js";
+import { Elapsed } from "../components/relativeTime.js";
+import { RunStatusIcon } from "../components/RunStatusIcon.js";
 import { LogViewer } from "../logviewer/LogViewer.js";
-import { toAbsHumanDuration } from "../duration.js";
-import { Collapse } from "./Collapse.js";
 import { jobLabel, toggled } from "./util.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo, useState } from "react";
-import { DateTime } from "luxon";
 //#region src/graph/TreeView.tsx
-function elapsed({ startedAt, completedAt }) {
-	if (!startedAt) return "";
-	const end = completedAt ? DateTime.fromISO(completedAt) : DateTime.now();
-	return toAbsHumanDuration(DateTime.fromISO(startedAt), end);
-}
 function Chevron({ open, hidden = false }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("flex-shrink-0 transition-transform duration-150", open && "rotate-90", hidden ? "invisible" : "text-[var(--theme-muted-text-color)]"),
-		children: /* @__PURE__ */ jsx(LuChevronRight, { className: clsx("w-4 h-4", open && "text-[var(--theme-element)]") })
+		className: cx("flex-shrink-0 transition-transform duration-150", open && "rotate-90", hidden ? "invisible" : "text-[var(--theme-muted-text-color)]"),
+		children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: cx("w-4 h-4", open && "text-[var(--theme-accent)]") })
 	});
 }
 function StepLogs({ slug, prefix, jobName, stepIndex }) {
 	const logPath = useWorkflowEngine().stepLogPath(prefix, jobName, stepIndex);
 	const { data: logs, isLoading, error } = useRunFile(slug, logPath, { refreshInterval: 2e3 });
-	if (isLoading && !logs) return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-2 px-5 py-4 text-sm text-[var(--theme-muted-text-color)]",
-		children: [/* @__PURE__ */ jsx(LoaderIcon, { className: "w-4 h-4" }), /* @__PURE__ */ jsx("span", { children: "Loading logs..." })]
+	const { dag: t } = useStrings();
+	if (isLoading && !logs) return /* @__PURE__ */ jsx("div", {
+		className: "px-5 py-4",
+		children: /* @__PURE__ */ jsx(Loader, {
+			size: 16,
+			inline: true,
+			label: t.loadingLogs
+		})
 	});
-	if (error || !logs) return /* @__PURE__ */ jsx("div", {
-		className: "px-5 py-4 text-sm text-[var(--theme-muted-text-color)] italic",
-		children: "No logs available"
+	if (error || !logs) return /* @__PURE__ */ jsx(EmptyState, {
+		variant: "bare",
+		title: t.noLogFound
 	});
 	return /* @__PURE__ */ jsx("div", {
 		className: "border-t border-[var(--theme-border)]",
@@ -48,22 +48,22 @@ function StepLogs({ slug, prefix, jobName, stepIndex }) {
 function JobRow({ jobName, job, isExpanded, onToggle, prefix, state }) {
 	const hasSteps = !!job.steps?.length;
 	const dependencies = Array.isArray(job.needs) ? job.needs : [];
-	const duration = elapsed(job);
 	const panelId = useId();
+	const { dag: t } = useStrings();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "border-b border-[var(--theme-border)] last:border-b-0",
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
 			"aria-expanded": isExpanded,
 			"aria-controls": hasSteps ? panelId : void 0,
-			className: clsx("flex items-center gap-3 px-5 py-3 transition-colors w-full text-left", job.status === "skipped" || job.status === "skipped-failed" ? "cursor-default" : "cursor-pointer", isExpanded && "bg-[var(--theme-panel-bg)]"),
+			className: cx("flex items-center gap-3 px-5 py-3 transition-colors w-full text-left", job.status === "skipped" || job.status === "skipped-failed" ? "cursor-default" : "cursor-pointer", isExpanded && "bg-[var(--theme-panel-bg)]"),
 			onClick: onToggle,
 			children: [
 				/* @__PURE__ */ jsx(Chevron, {
 					open: isExpanded,
 					hidden: !hasSteps
 				}),
-				/* @__PURE__ */ jsx(Indicator, { status: job.status }),
+				/* @__PURE__ */ jsx(RunStatusIcon, { status: job.status }),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col gap-1 min-w-0 flex-1",
 					children: [/* @__PURE__ */ jsx("span", {
@@ -73,7 +73,7 @@ function JobRow({ jobName, job, isExpanded, onToggle, prefix, state }) {
 						className: "flex items-center gap-1.5",
 						children: [/* @__PURE__ */ jsx("span", {
 							className: "text-[10px] text-[var(--theme-muted-text-color)]",
-							children: "depends on:"
+							children: t.dependsOn
 						}), dependencies.map((dep) => /* @__PURE__ */ jsx("span", {
 							className: "text-[10px] px-1.5 py-0.5 rounded bg-[var(--theme-muted-panel-bg)] text-[var(--theme-muted-text-color)]",
 							children: jobLabel(dep)
@@ -81,13 +81,14 @@ function JobRow({ jobName, job, isExpanded, onToggle, prefix, state }) {
 					})]
 				}),
 				/* @__PURE__ */ jsx("div", { className: "flex-1" }),
-				duration && /* @__PURE__ */ jsx("span", {
-					className: "font-mono text-xs text-[var(--theme-muted-text-color)] flex-shrink-0",
-					children: duration
+				/* @__PURE__ */ jsx(Elapsed, {
+					start: job.startedAt,
+					end: job.completedAt,
+					className: "font-mono text-xs text-[var(--theme-muted-text-color)] flex-shrink-0"
 				})
 			]
-		}), /* @__PURE__ */ jsx(Collapse, {
-			expanded: isExpanded && hasSteps,
+		}), /* @__PURE__ */ jsx(DisclosurePanel, {
+			open: isExpanded && hasSteps,
 			id: panelId,
 			children: /* @__PURE__ */ jsx("div", {
 				className: "ml-[38px] border-l-2 border-[var(--theme-border)]",
@@ -110,10 +111,10 @@ function JobRow({ jobName, job, isExpanded, onToggle, prefix, state }) {
 function StepRow({ step, index, isExpanded, onToggle, prefix, jobName, state }) {
 	const engine = useWorkflowEngine();
 	const slots = useSlots();
-	const duration = elapsed(step);
 	const label = engine.stepLabel(step, index);
 	const subworkflow = step.subworkflow;
 	const panelId = useId();
+	const { dag: t } = useStrings();
 	const subworkflowJobs = subworkflow?.jobs ?? {};
 	const subworkflowJobNames = Object.keys(subworkflowJobs).filter((name) => subworkflowJobs[name]?.if !== false);
 	const subworkflowPrefix = `${prefix}subworkflows/${jobName}/step_${index}/`;
@@ -122,11 +123,11 @@ function StepRow({ step, index, isExpanded, onToggle, prefix, jobName, state })
 			type: "button",
 			"aria-expanded": isExpanded,
 			"aria-controls": panelId,
-			className: clsx("flex items-center gap-3 px-5 py-2.5 cursor-pointer transition-colors w-full text-left", isExpanded ? "" : "hover:bg-[var(--theme-hover)]"),
+			className: cx("flex items-center gap-3 px-5 py-2.5 cursor-pointer transition-colors w-full text-left", isExpanded ? "" : "hover:bg-[var(--theme-hover)]"),
 			onClick: onToggle,
 			children: [
 				/* @__PURE__ */ jsx(Chevron, { open: isExpanded }),
-				/* @__PURE__ */ jsx(Indicator, { status: step.status }),
+				/* @__PURE__ */ jsx(RunStatusIcon, { status: step.status }),
 				subworkflow && slots.workflowIcon?.({
 					image: subworkflow.image,
 					type: subworkflow.type,
@@ -136,17 +137,18 @@ function StepRow({ step, index, isExpanded, onToggle, prefix, jobName, state })
 					className: "font-mono text-sm text-[var(--theme-app)] truncate flex-1",
 					children: [label, subworkflow && /* @__PURE__ */ jsx("span", {
 						className: "ml-2 text-xs text-[var(--theme-muted-text-color)]",
-						children: "(subworkflow)"
+						children: t.subworkflow
 					})]
 				}),
-				duration && /* @__PURE__ */ jsx("span", {
-					className: "font-mono text-xs text-[var(--theme-muted-text-color)] flex-shrink-0",
-					children: duration
+				/* @__PURE__ */ jsx(Elapsed, {
+					start: step.startedAt,
+					end: step.completedAt,
+					className: "font-mono text-xs text-[var(--theme-muted-text-color)] flex-shrink-0"
 				})
 			]
 		}),
-		/* @__PURE__ */ jsx(Collapse, {
-			expanded: isExpanded && !subworkflow,
+		/* @__PURE__ */ jsx(DisclosurePanel, {
+			open: isExpanded && !subworkflow,
 			id: panelId,
 			children: /* @__PURE__ */ jsx(StepLogs, {
 				slug: state.slug,
@@ -155,8 +157,8 @@ function StepRow({ step, index, isExpanded, onToggle, prefix, jobName, state })
 				stepIndex: index
 			})
 		}),
-		/* @__PURE__ */ jsx(Collapse, {
-			expanded: isExpanded && !!subworkflow && subworkflowJobNames.length > 0,
+		/* @__PURE__ */ jsx(DisclosurePanel, {
+			open: isExpanded && !!subworkflow && subworkflowJobNames.length > 0,
 			id: panelId,
 			children: /* @__PURE__ */ jsx("div", {
 				className: "ml-[38px] border-l-2 border-[var(--theme-border)]",
@@ -179,7 +181,7 @@ function StepRow({ step, index, isExpanded, onToggle, prefix, jobName, state })
 }
 function TreeView({ jobs, slug, expandedJobs, setExpandedJobs }) {
 	const engine = useWorkflowEngine();
-	const { dag } = useStrings();
+	const { common, dag } = useStrings();
 	const visibleJobNames = useMemo(() => {
 		return Object.keys(jobs).filter((jobName) => jobs[jobName]?.if !== false);
 	}, [jobs]);
@@ -223,7 +225,7 @@ function TreeView({ jobs, slug, expandedJobs, setExpandedJobs }) {
 				type: "button",
 				onClick: allExpanded ? collapseAll : expandAll,
 				className: "text-xs font-mono text-[var(--theme-muted-text-color)] hover:text-[var(--theme-app)] transition-colors px-3 py-1.5 border border-[var(--theme-border)] rounded",
-				children: allExpanded ? "Collapse all" : "Expand all"
+				children: allExpanded ? common.collapseAll : common.expandAll
 			})
 		}), /* @__PURE__ */ jsx("div", { children: (() => {
 			const matrixGroups = {};
@@ -265,7 +267,7 @@ function TreeView({ jobs, slug, expandedJobs, setExpandedJobs }) {
 							onClick: () => toggleJob(`matrix:${matrixOrigin}`),
 							children: [
 								/* @__PURE__ */ jsx(Chevron, { open: isGroupExpanded }),
-								/* @__PURE__ */ jsx(Indicator, { status: aggStatus }),
+								/* @__PURE__ */ jsx(RunStatusIcon, { status: aggStatus }),
 								/* @__PURE__ */ jsxs("span", {
 									className: "font-mono text-sm text-[var(--theme-app)]",
 									children: [
@@ -276,8 +278,8 @@ function TreeView({ jobs, slug, expandedJobs, setExpandedJobs }) {
 									]
 								})
 							]
-						}), /* @__PURE__ */ jsx(Collapse, {
-							expanded: isGroupExpanded,
+						}), /* @__PURE__ */ jsx(DisclosurePanel, {
+							open: isGroupExpanded,
 							id: `matrix-panel-${matrixOrigin}`,
 							children: /* @__PURE__ */ jsx("div", {
 								className: "pl-4",

package/dist/graph/WorkflowSettingsDialog.js

@@ -1,11 +1,12 @@
-import { IoMdClose } from "../icons/io/IoMdClose.js";
+import { RemoveIcon } from "../icons.js";
 import { useWorkflowEditing } from "../components/Provider.js";
+import { ErrorText } from "../components/Field.js";
 import { IconButton } from "../components/IconButton.js";
 import { Input } from "../components/Input.js";
 import { useGraphEditorStrings, useInputsEditorStrings } from "./editorStrings.js";
 import { asRecord } from "./records.js";
 import { SETTINGS_YAML_PATH } from "../editor/settingsYaml.js";
-import { AddRowButton, ChoiceButtons, DialogShell, ENV_KEY, ExpressionToggle, FieldError, FieldLabel, KeyValueEditor, Section, StringListEditor, ToggleField, diffPatch, durationError, expressionError, flagError, flagOf, isEmptyPatch, labelled, orUndefined, rowsError, rowsFrom, rowsTo, text, withoutUndefined } from "./editorFields.js";
+import { AddRowButton, ChoiceButtons, DialogSection, DialogShell, ENV_KEY, ExpressionToggle, KeyValueEditor, StringListEditor, ToggleField, YamlField, diffPatch, durationError, expressionError, flagError, flagOf, isEmptyPatch, labelled, orUndefined, rowsError, rowsFrom, rowsTo, text, withoutUndefined } from "./editorFields.js";
 import { FlagField, refSuggestions } from "./inputRefs.js";
 import { expressionRefs } from "./expressionRefs.js";
 import { useNewInputs } from "./InputDialog.js";
@@ -151,7 +152,7 @@ function Card({ onRemove, removeLabel, children }) {
 			className: "flex flex-1 flex-col gap-3 rounded-md border theme-border p-3",
 			children
 		}), /* @__PURE__ */ jsx(IconButton, {
-			icon: /* @__PURE__ */ jsx(IoMdClose, { className: "h-4 w-4" }),
+			icon: /* @__PURE__ */ jsx(RemoveIcon, {}),
 			label: removeLabel,
 			variant: "ghost",
 			size: "sm",
@@ -262,7 +263,7 @@ function SettingsForm({ workflow, onEdit, onClose, renderShell, onDraft, pending
 		links: namesError(links.map((link) => link.name), LINK_NAME, t.invalidLinkName, t) ?? (links.some((link) => !link.value.trim()) ? t.required : void 0) ?? links.flatMap((link) => LINK_FLAGS.map((f) => link.flags[f])).map((value) => flagError(value, t)).find(Boolean),
 		redirect: redirects > 1 ? t.oneRedirect : void 0,
 		orgVariables: namesError(orgVariables, ORG_VARIABLE, t.invalidOrganizationVariable, t),
-		userVariables: userVariables.expression !== void 0 ? expressionError(userVariables.expression, t) : rowsError(userVariables.rows, USER_VARIABLE, t.invalidKey, t),
+		userVariables: userVariables.expression !== void 0 ? expressionError(userVariables.expression, t) : rowsError(userVariables.rows, USER_VARIABLE, t.common.invalidName, t),
 		wizard: wizardOn ? WIZARD_FLAGS.map((flag) => flagError(wizardFlags[flag], t)).find(Boolean) : void 0
 	};
 	const nextNeeds = () => {
@@ -333,32 +334,29 @@ function SettingsForm({ workflow, onEdit, onClose, renderShell, onDraft, pending
 	onDraft?.(saveEdit, invalid);
 	const children = /* @__PURE__ */ jsxs(Fragment, { children: [
 		newInputs.dialog,
-		/* @__PURE__ */ jsxs(Section, {
+		/* @__PURE__ */ jsxs(DialogSection, {
 			title: t.sectionGeneral,
 			open: true,
-			children: [
-				/* @__PURE__ */ jsx(FieldLabel, {
-					label: t.fields.env,
-					yamlKey: "env",
-					description: t.help.workflowEnv
-				}),
-				/* @__PURE__ */ jsx(KeyValueEditor, {
+			children: [/* @__PURE__ */ jsx(YamlField, {
+				label: t.fields.env,
+				yamlKey: "env",
+				description: t.help.workflowEnv,
+				children: /* @__PURE__ */ jsx(KeyValueEditor, {
 					rows: env,
 					onChange: setEnv,
 					error: errors.env,
 					valueSuggestions: refSuggestions(source)
-				}),
-				/* @__PURE__ */ jsx(Input, {
-					mono: true,
-					...labelled(t.fields.timeout, "timeout"),
-					description: t.help.workflowTimeout,
-					value: timeout,
-					error: errors.timeout,
-					onChange: (e) => changeTimeout(e.target.value)
 				})
-			]
+			}), /* @__PURE__ */ jsx(Input, {
+				mono: true,
+				...labelled(t.fields.timeout, "timeout"),
+				description: t.help.workflowTimeout,
+				value: timeout,
+				error: errors.timeout,
+				onChange: (e) => changeTimeout(e.target.value)
+			})]
 		}),
-		/* @__PURE__ */ jsx(Section, {
+		/* @__PURE__ */ jsx(DialogSection, {
 			title: t.sectionPermissions,
 			description: t.help.permissions,
 			open: permissions.length > 0,
@@ -372,14 +370,14 @@ function SettingsForm({ workflow, onEdit, onClose, renderShell, onDraft, pending
 				error: errors.permissions
 			})
 		}),
-		/* @__PURE__ */ jsxs(Section, {
+		/* @__PURE__ */ jsxs(DialogSection, {
 			title: t.sectionSessions,
 			description: t.help.sessions,
 			open: sessions.length > 0,
 			alert: !!(errors.sessions || errors.redirect),
 			children: [
 				sessions.map((session, i) => /* @__PURE__ */ jsxs(Card, {
-					removeLabel: t.removeRow,
+					removeLabel: t.common.remove,
 					onRemove: () => setSessions(sessions.filter((_, j) => j !== i)),
 					children: [
 						/* @__PURE__ */ jsx(Input, {
@@ -389,37 +387,37 @@ function SettingsForm({ workflow, onEdit, onClose, renderShell, onDraft, pending
 							value: session.name,
 							onChange: (e) => updateSession(i, { name: e.target.value })
 						}),
-						/* @__PURE__ */ jsx(FieldLabel, {
+						/* @__PURE__ */ jsx(YamlField, {
 							label: t.fields.sessionType,
 							yamlKey: "type",
-							description: t.help.sessionType
+							description: t.help.sessionType,
+							children: /* @__PURE__ */ jsx(ChoiceButtons, {
+								options: [{
+									value: "tunnel",
+									label: t.sessionTypeTunnel
+								}, {
+									value: "link",
+									label: t.sessionTypeLink
+								}],
+								value: session.type,
+								onChange: (type) => updateSession(i, { type })
+							})
 						}),
-						/* @__PURE__ */ jsx(ChoiceButtons, {
-							options: [{
-								value: "tunnel",
-								label: t.sessionTypeTunnel
-							}, {
-								value: "link",
-								label: t.sessionTypeLink
-							}],
-							value: session.type,
-							onChange: (type) => updateSession(i, { type })
-						}),
-						/* @__PURE__ */ jsx(FieldLabel, {
+						/* @__PURE__ */ jsx(YamlField, {
 							label: t.fields.promptForName,
 							yamlKey: "prompt-for-name",
-							description: t.help.promptForName
-						}),
-						/* @__PURE__ */ jsx(ChoiceButtons, {
-							options: [{
-								value: "off",
-								label: t.promptOff
-							}, {
-								value: "ask",
-								label: t.promptAsk
-							}],
-							value: session.prompt ? "ask" : "off",
-							onChange: (mode) => updateSession(i, { prompt: mode === "ask" })
+							description: t.help.promptForName,
+							children: /* @__PURE__ */ jsx(ChoiceButtons, {
+								options: [{
+									value: "off",
+									label: t.promptOff
+								}, {
+									value: "ask",
+									label: t.promptAsk
+								}],
+								value: session.prompt ? "ask" : "off",
+								onChange: (mode) => updateSession(i, { prompt: mode === "ask" })
+							})
 						}),
 						session.prompt && /* @__PURE__ */ jsx(Input, {
 							...labelled(t.fields.promptDefault, "default"),
@@ -441,7 +439,7 @@ function SettingsForm({ workflow, onEdit, onClose, renderShell, onDraft, pending
 						}, flag))
 					]
 				}, session.key)),
-				/* @__PURE__ */ jsx(FieldError, { message: errors.sessions ?? errors.redirect }),
+				/* @__PURE__ */ jsx(ErrorText, { children: errors.sessions ?? errors.redirect }),
 				/* @__PURE__ */ jsx(AddRowButton, {
 					label: t.addSession,
 					onClick: () => setSessions([...sessions, {
@@ -462,14 +460,14 @@ function SettingsForm({ workflow, onEdit, onClose, renderShell, onDraft, pending
 				})
 			]
 		}),
-		/* @__PURE__ */ jsxs(Section, {
+		/* @__PURE__ */ jsxs(DialogSection, {
 			title: t.sectionLinks,
 			description: t.help.links,
 			open: links.length > 0,
 			alert: !!(errors.links || errors.redirect),
 			children: [
 				links.map((link, i) => /* @__PURE__ */ jsxs(Card, {
-					removeLabel: t.removeRow,
+					removeLabel: t.common.remove,
 					onRemove: () => setLinks(links.filter((_, j) => j !== i)),
 					children: [
 						/* @__PURE__ */ jsx(Input, {
@@ -479,20 +477,20 @@ function SettingsForm({ workflow, onEdit, onClose, renderShell, onDraft, pending
 							value: link.name,
 							onChange: (e) => updateLink(i, { name: e.target.value })
 						}),
-						/* @__PURE__ */ jsx(FieldLabel, {
+						/* @__PURE__ */ jsx(YamlField, {
 							label: t.fields.linkTarget,
-							description: t.help.linkTarget
-						}),
-						/* @__PURE__ */ jsx(ChoiceButtons, {
-							options: [{
-								value: "endpoint",
-								label: t.linkToEndpoint
-							}, {
-								value: "url",
-								label: t.linkToUrl
-							}],
-							value: link.target,
-							onChange: (target) => updateLink(i, { target })
+							description: t.help.linkTarget,
+							children: /* @__PURE__ */ jsx(ChoiceButtons, {
+								options: [{
+									value: "endpoint",
+									label: t.linkToEndpoint
+								}, {
+									value: "url",
+									label: t.linkToUrl
+								}],
+								value: link.target,
+								onChange: (target) => updateLink(i, { target })
+							})
 						}),
 						/* @__PURE__ */ jsx(Input, {
 							mono: true,
@@ -516,7 +514,7 @@ function SettingsForm({ workflow, onEdit, onClose, renderShell, onDraft, pending
 						}, flag))
 					]
 				}, link.key)),
-				/* @__PURE__ */ jsx(FieldError, { message: errors.links ?? errors.redirect }),
+				/* @__PURE__ */ jsx(ErrorText, { children: errors.links ?? errors.redirect }),
 				/* @__PURE__ */ jsx(AddRowButton, {
 					label: t.addLink,
 					onClick: () => setLinks([...links, {
@@ -533,37 +531,34 @@ function SettingsForm({ workflow, onEdit, onClose, renderShell, onDraft, pending
 				})
 			]
 		}),
-		/* @__PURE__ */ jsxs(Section, {
+		/* @__PURE__ */ jsxs(DialogSection, {
 			title: t.sectionRequiredVariables,
 			open: orgVariables.length > 0 || userVariables.rows.length > 0 || userVariables.expression !== void 0,
 			alert: !!(errors.orgVariables || errors.userVariables),
-			children: [
-				/* @__PURE__ */ jsx(FieldLabel, {
-					label: t.fields.organizationVariables,
-					yamlKey: "needs.organizationVariables",
-					description: t.help.organizationVariables
-				}),
-				/* @__PURE__ */ jsx(StringListEditor, {
+			children: [/* @__PURE__ */ jsx(YamlField, {
+				label: t.fields.organizationVariables,
+				yamlKey: "needs.organizationVariables",
+				description: t.help.organizationVariables,
+				children: /* @__PURE__ */ jsx(StringListEditor, {
 					label: t.fields.organizationVariables,
 					values: orgVariables,
 					onChange: setOrgVariables,
 					addLabel: t.addOrganizationVariable,
 					placeholder: "MY_VARIABLE",
 					error: errors.orgVariables
-				}),
-				/* @__PURE__ */ jsx(FieldLabel, {
-					label: t.fields.userVariables,
-					yamlKey: "needs.userVariables",
-					description: t.help.userVariables,
-					actions: /* @__PURE__ */ jsx(ExpressionToggle, {
-						active: userVariables.expression !== void 0,
-						onChange: (on) => setUserVariables({
-							...userVariables,
-							expression: on ? "" : void 0
-						})
+				})
+			}), /* @__PURE__ */ jsx(YamlField, {
+				label: t.fields.userVariables,
+				yamlKey: "needs.userVariables",
+				description: t.help.userVariables,
+				actions: /* @__PURE__ */ jsx(ExpressionToggle, {
+					active: userVariables.expression !== void 0,
+					onChange: (on) => setUserVariables({
+						...userVariables,
+						expression: on ? "" : void 0
 					})
 				}),
-				userVariables.expression !== void 0 ? /* @__PURE__ */ jsx(Input, {
+				children: userVariables.expression !== void 0 ? /* @__PURE__ */ jsx(Input, {
 					mono: true,
 					"aria-label": t.fields.userVariables,
 					value: userVariables.expression,
@@ -583,28 +578,28 @@ function SettingsForm({ workflow, onEdit, onClose, renderShell, onDraft, pending
 					valuePlaceholder: t.help.userVariableHint,
 					addLabel: t.addUserVariable
 				})
-			]
+			})]
 		}),
-		/* @__PURE__ */ jsxs(Section, {
+		/* @__PURE__ */ jsxs(DialogSection, {
 			title: t.sectionInputForm,
 			open: wizardOn,
 			alert: !!errors.wizard,
 			children: [
-				/* @__PURE__ */ jsx(FieldLabel, {
+				/* @__PURE__ */ jsx(YamlField, {
 					label: t.fields.labelPosition,
 					yamlKey: "labelPosition",
-					description: t.help.labelPosition
-				}),
-				/* @__PURE__ */ jsx(ChoiceButtons, {
-					options: [{
-						value: "left",
-						label: t.labelsBeside
-					}, {
-						value: "top",
-						label: t.labelsAbove
-					}],
-					value: labelPosition,
-					onChange: setLabelPosition
+					description: t.help.labelPosition,
+					children: /* @__PURE__ */ jsx(ChoiceButtons, {
+						options: [{
+							value: "left",
+							label: t.labelsBeside
+						}, {
+							value: "top",
+							label: t.labelsAbove
+						}],
+						value: labelPosition,
+						onChange: setLabelPosition
+					})
 				}),
 				/* @__PURE__ */ jsx(ToggleField, {
 					label: t.fields.wizard,

package/dist/graph/editorChrome.js

@@ -1,18 +1,16 @@
-import { BiRedo } from "../icons/bi/BiRedo.js";
-import { BiUndo } from "../icons/bi/BiUndo.js";
-import { IoSettingsOutline } from "../icons/io5/IoSettingsOutline.js";
+import { cx } from "../cx.js";
+import { RedoIcon, SettingsIcon, UndoIcon } from "../icons.js";
 import { Tooltip } from "../components/Tooltip.js";
 import { IconButton } from "../components/IconButton.js";
 import { useGraphEditorStrings } from "./editorStrings.js";
 import { ProblemsButton } from "./ProblemsButton.js";
 import { ShortcutsButton } from "./ShortcutsButton.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/editorChrome.tsx
 /** What a drag carries, beside the pointer at `at` in its layer's coordinates. */
 function DragLabel({ at, text, refused = false }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("pointer-events-none absolute z-30 rounded-md border bg-(--theme-panel-bg) px-2 py-1 text-xs shadow", refused ? "border-(--theme-error) text-(--theme-error)" : "theme-border"),
+		className: cx("pointer-events-none absolute z-30 rounded-md border bg-(--theme-panel-bg) px-2 py-1 text-xs shadow", refused ? "border-(--theme-error) text-(--theme-error)" : "theme-border"),
 		style: {
 			left: at.x + 12,
 			top: at.y + 12
@@ -29,7 +27,7 @@ function AddChip({ icon, label, hint, className, onPointerDown, onClick }) {
 		content: hint,
 		children: /* @__PURE__ */ jsxs("button", {
 			type: "button",
-			className: clsx("flex h-7 items-center gap-1 whitespace-nowrap rounded px-2 text-xs theme-hover", onPointerDown ? "cursor-grab" : "cursor-pointer", className),
+			className: cx("flex h-7 items-center gap-1 whitespace-nowrap rounded px-2 text-xs theme-hover", onPointerDown ? "cursor-grab" : "cursor-pointer", className),
 			onPointerDown,
 			onClick,
 			children: [icon, label]
@@ -40,20 +38,20 @@ function AddChip({ icon, label, hint, className, onPointerDown, onClick }) {
 function EditorBar({ editor, groups, className, children }) {
 	const t = useGraphEditorStrings();
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("flex max-w-full flex-wrap items-center justify-end gap-0.5 rounded-md border theme-border bg-(--theme-panel-bg) p-0.5", className),
+		className: cx("flex max-w-full flex-wrap items-center justify-end gap-0.5 rounded-md border theme-border bg-(--theme-panel-bg) p-0.5", className),
 		children: [
 			!!editor.listedProblems?.length && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ProblemsButton, { problems: editor.listedProblems }), /* @__PURE__ */ jsx(BarDivider, {})] }),
 			/* @__PURE__ */ jsx(IconButton, {
-				icon: /* @__PURE__ */ jsx(BiUndo, { className: "h-4 w-4" }),
-				label: t.undo,
+				icon: /* @__PURE__ */ jsx(UndoIcon, {}),
+				label: t.common.undo,
 				size: "sm",
 				variant: "ghost",
 				disabled: !editor.canUndo,
 				onClick: editor.onUndo
 			}),
 			/* @__PURE__ */ jsx(IconButton, {
-				icon: /* @__PURE__ */ jsx(BiRedo, { className: "h-4 w-4" }),
-				label: t.redo,
+				icon: /* @__PURE__ */ jsx(RedoIcon, {}),
+				label: t.common.redo,
 				size: "sm",
 				variant: "ghost",
 				disabled: !editor.canRedo,
@@ -62,7 +60,7 @@ function EditorBar({ editor, groups, className, children }) {
 			/* @__PURE__ */ jsx(BarDivider, {}),
 			children,
 			editor.onOpenSettings && /* @__PURE__ */ jsx(IconButton, {
-				icon: /* @__PURE__ */ jsx(IoSettingsOutline, { className: "h-4 w-4" }),
+				icon: /* @__PURE__ */ jsx(SettingsIcon, {}),
 				label: t.workflowSettings,
 				size: "sm",
 				variant: "ghost",