@parallelworks/ui 0.50.0 → 0.52.0

package/dist/form/Form.js

@@ -3,7 +3,6 @@ import { Loader } from "../components/Loader.js";
 import { useStrings, useWorkflowEngine } from "../components/Provider.js";
 import { Button } from "../components/Button.js";
 import { FieldRowContext } from "../components/Field.js";
-import { InfoTip } from "../components/InfoTip.js";
 import { Section } from "../components/Section.js";
 import { parseWizardConfig } from "./Wizard/utils.js";
 import { inputWidth, resolvedFlag } from "./lib.js";
@@ -322,10 +321,7 @@ var FormField = memo(function FormField({ fieldName, optionsField, nested, field
 		setValue
 	]);
 	const tooltip = field?.tooltip;
-	const tooltipComponent = useMemo(() => tooltip ? /* @__PURE__ */ jsx(InfoTip, {
-		className: "pr-2",
-		text: typeof tooltip === "string" ? tooltip.replace(/\r/g, "") : tooltip.filter(Boolean).join("\n")
-	}) : null, [tooltip]);
+	const help = (typeof tooltip === "string" ? tooltip.replace(/\r/g, "") : tooltip?.filter(Boolean).join("\n")) || void 0;
 	const path = editing ? [...editing.parent, fieldName] : null;
 	if (field === null || fieldName === "v3") return null;
 	if (reads.hidden) return editing && path && fieldName !== "$meta" ? /* @__PURE__ */ jsx(editing.Row, {
@@ -408,7 +404,7 @@ var FormField = memo(function FormField({ fieldName, optionsField, nested, field
 				disabled: Boolean(fieldObj.disabled),
 				computeOn: computeOn || fieldObj.computeOn,
 				spaceCompact,
-				tooltipComponent
+				help
 			})
 		})
 	});
@@ -625,8 +621,7 @@ function DynamicFormBody({ form, formJSONs: options = {}, reinitialize = false,
 		parsed
 	]);
 	const report = useEffectEvent((values) => {
-		const { editorKeyPostfix: _, ...rest } = values;
-		onValuesChange?.(rest);
+		onValuesChange?.(values);
 	});
 	useEffect(() => form.subscribe({
 		formState: { values: true },

package/dist/form/Wizard/WizardNavigation.js

@@ -33,7 +33,7 @@ function WizardNavigation({ isLastStep, canGoBack, isCurrentStepValid, nextLabel
 	};
 	return /* @__PURE__ */ jsxs("div", { children: [error && /* @__PURE__ */ jsxs("p", {
 		role: "alert",
-		className: "mb-3 flex items-center gap-1.5 text-sm text-(--theme-error)",
+		className: "mb-3 flex items-center gap-1.5 text-sm text-(--theme-error-text)",
 		children: [/* @__PURE__ */ jsx(WarningIcon, {
 			"aria-hidden": "true",
 			className: "size-4 shrink-0"
@@ -44,20 +44,17 @@ function WizardNavigation({ isLastStep, canGoBack, isCurrentStepValid, nextLabel
 			variant: "secondary",
 			onClick: onPrevious,
 			disabled: !canGoBack || isLoading,
-			"aria-label": t.previousStep,
 			children: prevLabel || common.previous
 		}), isLastStep && !onSubmit ? null : isLastStep ? /* @__PURE__ */ jsx(Button, {
 			variant: "primary",
 			onClick: handleSubmit,
 			disabled: !isCurrentStepValid,
 			loading: isLoading,
-			"aria-label": submitLabel,
 			children: submitLabel
 		}) : /* @__PURE__ */ jsx(Button, {
 			variant: "primary",
 			onClick: handleNext,
 			loading: isLoading,
-			"aria-label": t.nextStep,
 			children: nextLabel || common.next
 		})]
 	})] });

package/dist/form/Wizard/WizardStepIndicator.js

@@ -80,7 +80,7 @@ function StepItem({ number, title, description, status, onJump }) {
 				children: strings.stepDone
 			}),
 			status === "invalid" && /* @__PURE__ */ jsx("span", {
-				className: "text-xs text-(--theme-error)",
+				className: "text-xs text-(--theme-error-text)",
 				children: strings.stepNeedsAttention
 			}),
 			description && /* @__PURE__ */ jsx("span", {

package/dist/form/Wizard/utils.js

@@ -16,7 +16,7 @@ function parseWizardConfig(options) {
 		stepOrder.push(key);
 	}
 	if (stepOrder.length === 0) {
-		console.warn("Wizard mode enabled but no steps found");
+		if (process.env.NODE_ENV !== "production") console.warn("Wizard mode enabled but no steps found");
 		return null;
 	}
 	return {

package/dist/form/fieldFrame.d.ts

@@ -2,6 +2,6 @@ import type { FieldProps } from '../components/Field.js';
 import type { FieldComponentProps } from './types/fieldComponentTypes.js';
 /** How a form field's props frame it: its label, help, description, required mark and error,
  *  laid out as the form lays out its fields. Spread on `Field`. */
-export declare function fieldFrame({ field, label, labelPosition, error, disabled, spaceCompact, tooltipComponent, }: FieldComponentProps, { group }?: {
+export declare function fieldFrame({ field, label, labelPosition, error, disabled, spaceCompact, help }: FieldComponentProps, { group }?: {
     group?: boolean;
 }): Omit<FieldProps, 'children'>;

package/dist/form/fieldFrame.js

@@ -2,10 +2,10 @@ import { resolvedFlag } from "./lib.js";
 //#region src/form/fieldFrame.ts
 /** How a form field's props frame it: its label, help, description, required mark and error,
 *  laid out as the form lays out its fields. Spread on `Field`. */
-function fieldFrame({ field, label, labelPosition, error, disabled, spaceCompact, tooltipComponent }, { group = false } = {}) {
+function fieldFrame({ field, label, labelPosition, error, disabled, spaceCompact, help }, { group = false } = {}) {
 	return {
 		label,
-		hint: tooltipComponent,
+		help,
 		description: field.description,
 		group,
 		required: !resolvedFlag(field.optional),

package/dist/form/types/fieldComponentTypes.d.ts

@@ -27,7 +27,8 @@ export interface FieldComponentProps<TField extends FieldBase = FieldBase> {
     disabled: boolean;
     computeOn?: boolean | undefined;
     spaceCompact?: boolean;
-    tooltipComponent?: React.ReactNode;
+    /** The field's help text, from its `tooltip`: `fieldFrame` puts it behind a ? beside the label. */
+    help?: string | undefined;
 }
 /** Props for a field component, given the field definition it renders. */
 export type FieldProps<TField extends FieldBase = BaseField> = FieldComponentProps<TField & RuntimeFieldExtensions>;

package/dist/graph/AnnotationBanner.d.ts

@@ -1,6 +1,5 @@
 import type { WorkflowJob } from './types.js';
-interface AnnotationBannerProps {
+export interface AnnotationBannerProps {
     executedJobs: Record<string, WorkflowJob>;
 }
 export declare function AnnotationBanner({ executedJobs }: AnnotationBannerProps): import("react").JSX.Element | null;
-export {};

package/dist/graph/AnnotationBanner.js

@@ -1,9 +1,10 @@
 import { cx } from "../cx.js";
-import { ChevronDownIcon, ChevronRightIcon, ErrorIcon, InfoIcon, WarningIcon } from "../icons.js";
+import { ChevronRightIcon, ErrorIcon, InfoIcon, WarningIcon } from "../icons.js";
+import { toneIcon, toneSurface, toneText } from "../components/tone.js";
 import { keyedByContent } from "../components/keys.js";
 import { useStrings } from "../components/Provider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useId, useState } from "react";
 //#region src/graph/AnnotationBanner.tsx
 var typeOrder = {
 	error: 0,
@@ -13,21 +14,15 @@ var typeOrder = {
 var typeConfig = {
 	error: {
 		icon: ErrorIcon,
-		accentClass: "text-red-500",
-		bgClass: "bg-red-500/5 dark:bg-red-500/10",
-		countBg: "bg-red-500/15 text-red-700 dark:text-red-400"
+		tone: "error"
 	},
 	warning: {
 		icon: WarningIcon,
-		accentClass: "text-yellow-500",
-		bgClass: "bg-yellow-500/5 dark:bg-yellow-500/10",
-		countBg: "bg-yellow-500/15 text-yellow-700 dark:text-yellow-400"
+		tone: "warning"
 	},
 	notice: {
 		icon: InfoIcon,
-		accentClass: "text-blue-500",
-		bgClass: "bg-blue-500/5 dark:bg-blue-500/10",
-		countBg: "bg-blue-500/15 text-blue-700 dark:text-blue-400"
+		tone: "info"
 	}
 };
 function collectAnnotations(executedJobs, parentPath) {
@@ -62,6 +57,7 @@ function collectAnnotations(executedJobs, parentPath) {
 function AnnotationBanner({ executedJobs }) {
 	const [expanded, setExpanded] = useState(false);
 	const { dag: t } = useStrings();
+	const listId = useId();
 	const annotations = collectAnnotations(executedJobs);
 	if (annotations.length === 0) return null;
 	const counts = {
@@ -70,20 +66,23 @@ function AnnotationBanner({ executedJobs }) {
 		notice: 0
 	};
 	for (const a of annotations) counts[a.type]++;
-	const ChevronIcon = expanded ? ChevronDownIcon : ChevronRightIcon;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx("rounded-lg border border-[var(--theme-border)] overflow-hidden", "bg-[var(--theme-panel-bg)]"),
+		className: "overflow-hidden rounded-lg border border-(--theme-border) bg-(--theme-panel-bg)",
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
+			"aria-expanded": expanded,
+			"aria-controls": listId,
+			"aria-label": t.annotationsLabel(counts),
 			onClick: () => setExpanded((prev) => !prev),
-			className: cx("w-full flex items-center gap-3 px-4 py-2.5 text-left", "hover:bg-[var(--theme-hover)] transition-colors", expanded && "border-b border-[var(--theme-border)]"),
+			className: cx("flex w-full items-center gap-3 px-4 py-2.5 text-left", "transition-colors hover:bg-(--theme-hover) motion-reduce:transition-none", "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--theme-link)", expanded && "border-b border-(--theme-border)"),
 			children: [
-				/* @__PURE__ */ jsx(ChevronIcon, { className: "w-3.5 h-3.5 text-[var(--theme-muted-text-color)] shrink-0" }),
+				/* @__PURE__ */ jsx(ChevronRightIcon, { className: cx("size-3.5 shrink-0 text-(--theme-muted-text-color) transition-transform motion-reduce:transition-none", expanded && "rotate-90") }),
 				/* @__PURE__ */ jsx("span", {
-					className: "text-sm font-medium text-[var(--theme-app)]",
+					className: "text-sm font-medium text-(--theme-app)",
 					children: t.annotations
 				}),
-				/* @__PURE__ */ jsx("div", {
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
 					className: "flex items-center gap-1.5",
 					children: [
 						"error",
@@ -91,36 +90,35 @@ function AnnotationBanner({ executedJobs }) {
 						"notice"
 					].map((type) => {
 						if (!counts[type]) return null;
-						const config = typeConfig[type];
-						const Icon = config.icon;
+						const { icon: Icon, tone } = typeConfig[type];
 						return /* @__PURE__ */ jsxs("span", {
-							className: cx("inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium", config.countBg),
-							children: [/* @__PURE__ */ jsx(Icon, { className: "w-3 h-3" }), counts[type]]
+							className: cx("inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium tabular-nums", toneSurface[tone]),
+							children: [/* @__PURE__ */ jsx(Icon, { className: cx("size-3", toneIcon[tone]) }), counts[type]]
 						}, type);
 					})
 				})
 			]
-		}), expanded && /* @__PURE__ */ jsx("div", {
-			className: "divide-y divide-[var(--theme-border)] max-h-[400px] overflow-y-auto",
+		}), expanded && /* @__PURE__ */ jsx("ul", {
+			id: listId,
+			className: "max-h-[400px] divide-y divide-(--theme-border) overflow-y-auto",
 			children: keyedByContent(annotations, (a) => a.id ?? `${a.type}:${a.title}:${a.message}`).map(({ key, item: annotation }) => {
-				const config = typeConfig[annotation.type] || typeConfig.notice;
-				const Icon = config.icon;
-				return /* @__PURE__ */ jsxs("div", {
-					className: cx("flex items-start gap-2.5 px-4 py-2 text-sm", config.bgClass),
-					children: [/* @__PURE__ */ jsx(Icon, { className: cx("w-4 h-4 mt-0.5 shrink-0", config.accentClass) }), /* @__PURE__ */ jsxs("div", {
-						className: "flex-1 min-w-0",
+				const { icon: Icon, tone } = typeConfig[annotation.type] || typeConfig.notice;
+				return /* @__PURE__ */ jsxs("li", {
+					className: "flex items-start gap-2.5 px-4 py-2 text-sm",
+					children: [/* @__PURE__ */ jsx(Icon, { className: cx("mt-0.5 size-4 shrink-0", toneIcon[tone]) }), /* @__PURE__ */ jsxs("div", {
+						className: "min-w-0 flex-1",
 						children: [
 							/* @__PURE__ */ jsxs("span", {
-								className: cx("font-medium", config.accentClass),
+								className: cx("font-medium", toneText[tone]),
 								children: [annotation.title || t.annotationType[annotation.type] || t.annotationType.notice, ":"]
 							}),
 							" ",
 							/* @__PURE__ */ jsx("span", {
-								className: "text-[var(--theme-app)]",
+								className: "text-(--theme-app)",
 								children: annotation.message
 							}),
 							/* @__PURE__ */ jsx("span", {
-								className: "text-[var(--theme-muted-text-color)] ml-2 text-xs",
+								className: "ml-2 text-xs text-(--theme-muted-text-color)",
 								children: t.annotationSource(annotation.jobName, annotation.stepName || t.stepNumber(annotation.stepIndex))
 							})
 						]

package/dist/graph/Connectors.js

@@ -11,7 +11,8 @@ var KEYFRAMES = [
 	"@keyframes dag-draw-in{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}",
 	"@keyframes dag-draw-out{from{stroke-dashoffset:0}to{stroke-dashoffset:1}}",
 	`@keyframes dag-light{from{fill:${CONNECTOR_COLOR}}to{fill:${HIGHLIGHT_COLOR}}}`,
-	`@keyframes dag-unlight{from{fill:${HIGHLIGHT_COLOR}}to{fill:${CONNECTOR_COLOR}}}`
+	`@keyframes dag-unlight{from{fill:${HIGHLIGHT_COLOR}}to{fill:${CONNECTOR_COLOR}}}`,
+	"@media (prefers-reduced-motion:reduce){.dag-lit{animation-duration:0s!important;animation-delay:0s!important}}"
 ].join("");
 /** Plays the named keyframes once `delay` seconds pass, holding the first until then and the last after. */
 var play = (name, seconds, delay) => ({ animation: `${name} ${seconds}s ease ${delay}s both` });
@@ -25,6 +26,7 @@ var LitEdge = memo(function LitEdge({ d, reversed, highlight, animT }) {
 		strokeWidth: STROKE,
 		strokeDasharray: "1 1",
 		strokeDashoffset: lit ? 0 : 1,
+		className: "dag-lit",
 		style: play(lit ? "dag-draw-in" : "dag-draw-out", animT, delay)
 	});
 });
@@ -35,6 +37,7 @@ var LitDot = memo(function LitDot({ x, y, highlight, animT }) {
 		cy: y,
 		r: 8,
 		fill: lit ? HIGHLIGHT_COLOR : CONNECTOR_COLOR,
+		className: "dag-lit",
 		style: play(lit ? "dag-light" : "dag-unlight", animT, delay)
 	});
 });

package/dist/graph/DependencyGraph.js

@@ -3,10 +3,10 @@ import { ArrowLeftIcon, ArrowRightIcon, ChevronLeftIcon, ChevronRightIcon, FileT
 import { Loader } from "../components/Loader.js";
 import { useRunFile, useSlots, useStrings, useWorkflowEngine } from "../components/Provider.js";
 import { Button } from "../components/Button.js";
+import { IconButton } from "../components/IconButton.js";
+import { InfoTip } from "../components/InfoTip.js";
 import { Modal } from "../components/Modal.js";
 import { DisclosurePanel } from "../components/Disclosure.js";
-import { InfoTip } from "../components/InfoTip.js";
-import { IconButton } from "../components/IconButton.js";
 import { formatDateTime } from "../format.js";
 import { Elapsed } from "../components/relativeTime.js";
 import { RunStatusIcon } from "../components/RunStatusIcon.js";

package/dist/graph/GraphEditor.js

@@ -3,8 +3,8 @@ import { AddIcon, DuplicateIcon, EditIcon, GridIcon, LinkIcon, MatrixIcon, Remov
 import { useWorkflowEditing } from "../components/Provider.js";
 import { useCopy } from "../components/useCopy.js";
 import { menuDivider } from "../components/MenuEntries.js";
-import { useContextMenu } from "../components/ContextMenu.js";
 import { IconButton } from "../components/IconButton.js";
+import { useContextMenu } from "../components/ContextMenu.js";
 import { createStore, reclaimFocus, returningFocus, trackDrag, useFocusAfterDialog, usePressOutside } from "./editorPrimitives.js";
 import { jobLabel } from "./util.js";
 import { EDITOR_HANDLE_CLASS, NO_EDGES, NO_PROBLEMS, NO_SELECTION, NO_STEPS, contentBox, labelsOf, sameEdge, sameStep, selectionBounds, toContent, useUi } from "./graphEditorState.js";
@@ -14,7 +14,7 @@ import { openOnAddOf } from "./editorFields.js";
 import { refusalText } from "./refusalText.js";
 import { JobDialog, StepDialog } from "./GraphEditorDialogs.js";
 import { overlaps, typing } from "./editorApi.js";
-import { MOD_KEY } from "./ShortcutsButton.js";
+import { IS_MAC, modifierKeys } from "./ShortcutsButton.js";
 import { AddChip, BarDivider, DragLabel, EditorBar } from "./editorChrome.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -1182,7 +1182,7 @@ function useGraphEditorState({ editor, jobs, yamlJobs, inputs, workflow, layout,
 	const editable = editor !== void 0;
 	useEffect(() => {
 		if (!container || !editable) return;
-		const mac = /Mac|iPhone|iPad/.test(navigator.platform);
+		const mac = IS_MAC;
 		let pointer = null;
 		let pending;
 		const pasteCopied = () => {
@@ -1307,6 +1307,7 @@ function useGraphEditorState({ editor, jobs, yamlJobs, inputs, workflow, layout,
 }
 function graphShortcuts(t) {
 	const key = t.shortcutKeys;
+	const { mod } = modifierKeys(key);
 	const does = t.shortcutDoes;
 	return [
 		{
@@ -1325,7 +1326,7 @@ function graphShortcuts(t) {
 					does: does.dependency
 				},
 				{
-					combos: [["Tab"]],
+					combos: [[key.tab]],
 					does: does.focus
 				},
 				{
@@ -1337,7 +1338,7 @@ function graphShortcuts(t) {
 					does: does.pickDependency
 				},
 				{
-					combos: [["Esc"]],
+					combos: [[key.escape]],
 					does: does.escape
 				}
 			]
@@ -1379,13 +1380,13 @@ function graphShortcuts(t) {
 					does: does.menu
 				},
 				{
-					combos: [[MOD_KEY, "C"], [MOD_KEY, "V"]],
+					combos: [[mod, "C"], [mod, "V"]],
 					does: does.copy
 				},
 				{
-					combos: [[MOD_KEY, "Z"], [
+					combos: [[mod, "Z"], [
 						key.shift,
-						MOD_KEY,
+						mod,
 						"Z"
 					]],
 					does: does.undo
@@ -1461,7 +1462,7 @@ function DragOverlays({ api, container, trashRef }) {
 	const problem = drag.target?.kind === "steps" ? drag.target.problem : void 0;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [drag.payload.kind === "jobs" && /* @__PURE__ */ jsxs("div", {
 		ref: trashRef,
-		className: cx("absolute bottom-2 left-1/2 z-20 flex -translate-x-1/2 items-center gap-2 rounded-lg border-2 border-dashed px-4 py-2 text-sm", overTrash ? "border-(--theme-error) bg-(--theme-error-muted) text-(--theme-error)" : "theme-border bg-(--theme-panel-bg) theme-muted-text"),
+		className: cx("absolute bottom-2 left-1/2 z-20 flex -translate-x-1/2 items-center gap-2 rounded-lg border-2 border-dashed px-4 py-2 text-sm", overTrash ? "border-(--theme-error) bg-(--theme-error-muted) text-(--theme-error-text)" : "theme-border bg-(--theme-panel-bg) theme-muted-text"),
 		children: [/* @__PURE__ */ jsx(TrashIcon, { className: "h-4 w-4" }), t.dropToDelete]
 	}), drag.payload.kind !== "connect" && /* @__PURE__ */ jsx(DragLabel, {
 		at: {
@@ -1481,8 +1482,9 @@ function EditorDialogs({ api, editor, jobs, inputs, workflow }) {
 		editor.onEdit(edit);
 	};
 	const openOnAdd = openOnAddOf(editor);
+	const addition = dialog?.addition;
+	const copy = useMemo(() => addition ? asRecord(editing.loadYaml(addition.yml)) : null, [addition, editing]);
 	if (!dialog) return null;
-	const copy = dialog.addition ? asRecord(editing.loadYaml(dialog.addition.yml)) : null;
 	const here = copy ? asRecord(copy["jobs"]) : jobs;
 	const source = dialog.addition?.yml ?? editor.readSource?.();
 	if (dialog.kind === "job") return Object.hasOwn(here, dialog.job) ? /* @__PURE__ */ jsx(JobDialog, {

package/dist/graph/GraphEditorDialogs.js

@@ -1,10 +1,10 @@
 import { ArrowDownIcon, ArrowUpIcon, RemoveIcon, TrashIcon } from "../icons.js";
 import { withPositionKeys } from "../components/keys.js";
 import { useWorkflowActions, useWorkflowEditing } from "../components/Provider.js";
+import { IconButton } from "../components/IconButton.js";
 import { Checkbox } from "../components/Checkbox.js";
 import { ErrorText, FieldOption } from "../components/Field.js";
 import { Input } from "../components/Input.js";
-import { IconButton } from "../components/IconButton.js";
 import { Select } from "../components/Select.js";
 import { useGraphEditorStrings } from "./editorStrings.js";
 import { asRecord } from "./records.js";
@@ -722,7 +722,7 @@ function JobForm({ job, jobs, inputs, workflow, onEdit, onClose, renderShell, on
 										children: other
 									}),
 									!Object.hasOwn(jobs, other) && /* @__PURE__ */ jsx("span", {
-										className: "text-xs text-(--theme-error)",
+										className: "text-xs text-(--theme-error-text)",
 										children: t.missingJob
 									})
 								]

package/dist/graph/GraphNode.js

@@ -13,10 +13,10 @@ var dimClasses = (depth) => ({
 /** The rules dimming a level at `depth`, hoisted into the page once for every level that deep. */
 function DimRules({ depth }) {
 	const { level, node, edge } = dimClasses(depth);
-	return /* @__PURE__ */ jsx("style", {
+	return /* @__PURE__ */ jsxs("style", {
 		href: `dependency-graph-dim-${depth}`,
 		precedence: "default",
-		children: `.${level} .${node}{opacity:.5}.${level} .${edge}{opacity:.3}`
+		children: [`.${level} .${node}{opacity:.5}.${level} .${edge}{opacity:.3}`, "@media (prefers-reduced-motion:reduce){.dag-fade{transition:none!important}}"]
 	});
 }
 /** Dims what of a graph level isn't in the hovered job's lineage, while one is hovered. */
@@ -29,6 +29,9 @@ function GraphNode({ id, job, rowsAbove, zBase, children }) {
 	const highlight = useLineage((l) => l.node(job), 0);
 	const enter = () => lineage?.hover(job);
 	const leave = () => lineage?.hover(null);
+	const blur = (e) => {
+		if (!e.currentTarget.contains(e.relatedTarget)) leave();
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		id,
 		role: "none",
@@ -40,9 +43,9 @@ function GraphNode({ id, job, rowsAbove, zBase, children }) {
 		onMouseEnter: enter,
 		onMouseLeave: leave,
 		onFocus: enter,
-		onBlur: leave,
+		onBlur: blur,
 		children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-2xl bg-(--theme-panel-bg)" }), /* @__PURE__ */ jsx("div", {
-			className: `${dimClasses(lineage?.depth ?? 0).node} relative border-solid shadow py-4 px-8 rounded-xl border-4 whitespace-nowrap bg-(--theme-panel-bg) text-2xl`,
+			className: `${dimClasses(lineage?.depth ?? 0).node} dag-fade relative border-solid shadow py-4 px-8 rounded-xl border-4 whitespace-nowrap bg-(--theme-panel-bg) text-2xl`,
 			style: {
 				...highlight === 2 && { opacity: 1 },
 				...lineage?.fade && { transition: `opacity ${lineage.animT}s` }

package/dist/graph/InputDialog.js

@@ -2,11 +2,11 @@ import { cx } from "../cx.js";
 import { ArrowDownIcon, ArrowUpIcon, EditIcon, RemoveIcon, TrashIcon } from "../icons.js";
 import { withPositionKeys } from "../components/keys.js";
 import { useWorkflowEditing, useWorkflowEngine } from "../components/Provider.js";
+import { IconButton } from "../components/IconButton.js";
 import { Checkbox, CheckboxGroup } from "../components/Checkbox.js";
 import { ErrorText, Field, FieldOption } from "../components/Field.js";
 import { Input, Textarea } from "../components/Input.js";
 import { Combobox } from "../components/Combobox.js";
-import { IconButton } from "../components/IconButton.js";
 import { useGraphEditorStrings, useInputsEditorStrings } from "./editorStrings.js";
 import { asRecord } from "./records.js";
 import { INPUT_YAML_PATH } from "../editor/settingsYaml.js";

package/dist/graph/InputsEditor.js

@@ -1,13 +1,14 @@
 import { cx } from "../cx.js";
 import { AddIcon, ArrowDownIcon, ArrowUpIcon, CollapseIcon, DragHandleIcon, DuplicateIcon, EditIcon, FilesIcon, MinusIcon, MoreIcon, TrashIcon, WarningIcon } from "../icons.js";
-import { EmptyState } from "../components/EmptyState.js";
 import { Tooltip } from "../components/Tooltip.js";
 import { useWorkflowEditing } from "../components/Provider.js";
+import { EmptyState } from "../components/EmptyState.js";
 import { menuDivider } from "../components/MenuEntries.js";
-import { useContextMenu } from "../components/ContextMenu.js";
 import { IconButton } from "../components/IconButton.js";
+import { useContextMenu } from "../components/ContextMenu.js";
 import { NumberInput } from "../components/NumberInput.js";
 import { MarqueeBox, createStore, reclaimFocus, returningFocus, trackDrag, useFocusAfterDialog, usePressOutside, useStore } from "./editorPrimitives.js";
+import { prefersReducedMotion } from "../reducedMotion.js";
 import { useGraphEditorStrings, useInputsEditorStrings } from "./editorStrings.js";
 import { asRecord } from "./records.js";
 import { openOnAddOf, text } from "./editorFields.js";
@@ -16,7 +17,7 @@ import { WizardPagesContext } from "../form/Wizard/wizardPages.js";
 import { dropLayoutEdits, isWizard, resizeLayout, withInputLayouts } from "./inputLayout.js";
 import { INPUT_TYPE_GROUPS, InputDialog, TypeBadge, allNames, newInputDefinition, withCreatedInputs } from "./InputDialog.js";
 import { overlaps, typing } from "./editorApi.js";
-import { ALT_KEY, MOD_KEY } from "./ShortcutsButton.js";
+import { modifierKeys } from "./ShortcutsButton.js";
 import { AddChip, BarDivider, DragLabel, EditorBar } from "./editorChrome.js";
 import { addPageEdit, splitIntoPagesEdits, unsplitPagesEdits, wizardGroupDefinition } from "./inputPages.js";
 import { inputCell, linesIn, rowsOf, snapSplit } from "./inputRows.js";
@@ -112,7 +113,8 @@ function InputRow({ path, hidden = false, instance, children }) {
 	const actions = /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx("button", {
 			type: "button",
-			"aria-label": t.inputActions,
+			tabIndex: -1,
+			"aria-hidden": true,
 			"data-drag-handle": true,
 			className: "flex h-5 w-5 cursor-grab items-center justify-center rounded hover:bg-(--theme-muted-panel-bg)",
 			onPointerDown: (e) => api.startDrag(e, path, name),
@@ -203,7 +205,7 @@ function InputRow({ path, hidden = false, instance, children }) {
 					})
 				]
 			}) : /* @__PURE__ */ jsx("div", {
-				className: cx("flex justify-end overflow-hidden transition-[height] duration-150 focus-within:h-7", active ? "h-7" : "h-0"),
+				className: cx("flex justify-end overflow-hidden transition-[height] duration-150 focus-within:h-7 motion-reduce:transition-none", active ? "h-7" : "h-0"),
 				children: /* @__PURE__ */ jsx("div", {
 					"data-input-chrome": true,
 					className: "flex h-6 items-center gap-0.5 rounded-md border theme-border bg-(--theme-panel-bg) px-1 py-0.5 text-[11px] leading-4 theme-muted-text shadow-sm",
@@ -306,7 +308,7 @@ function PageNumber({ count, page, onChange }) {
 					if (typed !== null && Number.isInteger(typed) && typed >= 1 && typed <= count) onChange(typed - 1);
 				}
 			}),
-			/* @__PURE__ */ jsxs("span", { children: ["/ ", count] })
+			/* @__PURE__ */ jsx("span", { children: t.pageTotal(count) })
 		]
 	});
 }
@@ -638,6 +640,7 @@ function undoKeys(e, editor) {
 }
 function formShortcuts(g) {
 	const key = g.shortcutKeys;
+	const { mod, alt } = modifierKeys(key);
 	const does = g.shortcutDoes;
 	return [{
 		title: g.shortcutGroups.select,
@@ -664,7 +667,7 @@ function formShortcuts(g) {
 				does: does.extendInputs
 			},
 			{
-				combos: [["Esc"]],
+				combos: [[key.escape]],
 				does: does.escape
 			}
 		]
@@ -680,7 +683,7 @@ function formShortcuts(g) {
 				does: does.resizeInputs
 			},
 			{
-				combos: [[ALT_KEY, "↑"], [ALT_KEY, "↓"]],
+				combos: [[alt, "↑"], [alt, "↓"]],
 				does: does.reorderInputs
 			},
 			{
@@ -700,9 +703,9 @@ function formShortcuts(g) {
 				does: does.inputMenu
 			},
 			{
-				combos: [[MOD_KEY, "Z"], [
+				combos: [[mod, "Z"], [
 					key.shift,
-					MOD_KEY,
+					mod,
 					"Z"
 				]],
 				does: does.undo
@@ -1257,7 +1260,7 @@ function InputsFormEditor({ editor, inputs, children }) {
 			const key = problem.input ? JSON.stringify(problem.input) : null;
 			const row = [...containerRef.current?.querySelectorAll("[data-input-path]") ?? []].find((el) => el.dataset["inputPath"] === key);
 			if (!row) return false;
-			const still = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+			const still = prefersReducedMotion();
 			row.scrollIntoView?.({
 				block: "center",
 				behavior: still ? "auto" : "smooth"

package/dist/graph/MatrixGroup.js

@@ -4,7 +4,7 @@ import { EditableJobRow } from "./editorRows.js";
 import { Reveal } from "./Reveal.js";
 import { Joblist } from "./JobSummary.js";
 import { GraphNode } from "./GraphNode.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo } from "react";
 //#region src/graph/MatrixGroup.tsx
 /** Matrix group item in the summary sidebar. */
@@ -55,8 +55,14 @@ var MatrixGroupNode = memo(function MatrixGroupNode({ matrixGroup, jobNames, idP
 		className: "cursor-pointer w-full text-left",
 		onClick: () => toggleMatrix(idPrefix + matrixName),
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "font-semibold text-md p-0.5",
-			children: t.matrixOf(matrixName.length > 20 ? `${matrixName.slice(0, 20)}...` : matrixName)
+			className: "font-semibold p-0.5",
+			children: matrixName.length > 20 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				children: t.matrixOf(`${matrixName.slice(0, 20)}…`)
+			}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: t.matrixOf(matrixName)
+			})] }) : t.matrixOf(matrixName)
 		}), !isExpanded && /* @__PURE__ */ jsxs("div", {
 			className: "mt-1 border-t border-(--theme-border) pt-1 flex items-center gap-x-1",
 			children: [!preview && /* @__PURE__ */ jsx(RunStatusIcon, { status: aggStatus }), /* @__PURE__ */ jsx("span", { children: preview ? t.jobCount(matrixMembers.length) : statusLabel })]

package/dist/graph/ProblemsButton.js

@@ -24,7 +24,7 @@ function ProblemsButton({ problems }) {
 			children: /* @__PURE__ */ jsxs("button", {
 				type: "button",
 				"aria-label": label,
-				className: "flex h-7 cursor-pointer items-center gap-1 rounded px-2 text-xs font-medium text-(--theme-error) theme-hover",
+				className: "flex h-7 cursor-pointer items-center gap-1 rounded px-2 text-xs font-medium text-(--theme-error-text) theme-hover",
 				children: [/* @__PURE__ */ jsx(WarningIcon, { className: "h-3.5 w-3.5" }), problems.length]
 			})
 		}),
@@ -36,7 +36,7 @@ function ProblemsButton({ problems }) {
 					className: "mr-1.5 theme-muted-text",
 					children: t.problemLine(problem.line)
 				}), /* @__PURE__ */ jsx("span", {
-					className: "text-(--theme-error)",
+					className: "text-(--theme-error-text)",
 					children: problem.message
 				})] });
 				return /* @__PURE__ */ jsx("li", { children: pick ? /* @__PURE__ */ jsx("button", {