@parallelworks/ui 0.77.0 → 0.79.0

package/dist/format.d.ts

@@ -2,11 +2,16 @@ import { DateTime, Duration } from 'luxon';
 /** A size in bytes the way a file list shows it: 512 B, 1.5 KB, 2.25 GB,
  *  counting in 1024s. */
 export declare function formatBytes(bytes: number): string;
-/** A count short enough for a status line: 512, 1.2K, 3.4M. */
-export declare function formatCount(n: number): string;
+/** A count short enough for a status line: 512, 1.2K, 3.4M. `locale`, such
+ *  as `useLocale()` gives, wins over the browser's. */
+export declare function formatCount(n: number, locale?: string | undefined): string;
+/** A whole number in full, grouped as `locale` groups it: 1,204 or 1.204.
+ *  `locale`, such as `useLocale()` gives, wins over the browser's. */
+export declare function formatInteger(n: number, locale?: string | undefined): string;
 /** A length of time to whole seconds, in the host's locale: 45s, 2m 13s,
- *  1d 2h. Takes milliseconds or a luxon Duration; the sign is dropped. */
-export declare function formatDuration(value: number | Duration): string;
+ *  1d 2h. Takes milliseconds or a luxon Duration; the sign is dropped.
+ *  `locale` wins over the duration's own and luxon's default. */
+export declare function formatDuration(value: number | Duration, locale?: string | undefined): string;
 /** A moment as an ISO string, milliseconds, a Date or a luxon DateTime. */
 export type TimeValue = string | number | Date | DateTime | null | undefined;
 /** The moment `value` names, or null when it is missing or invalid. */
@@ -16,11 +21,16 @@ declare const DATE_TIME_STYLES: {
     readonly short: Intl.DateTimeFormatOptions;
     readonly medium: Intl.DateTimeFormatOptions;
     readonly seconds: Intl.DateTimeFormatOptions;
+    readonly full: Intl.DateTimeFormatOptions;
 };
+/** How `formatDateTime` writes a moment. */
+export type DateTimeStyle = keyof typeof DATE_TIME_STYLES;
 /** A moment in the reader's locale: `date` reads "Mar 14, 2026", `short`
- *  "3/14/2026, 9:30 AM", `medium` "Mar 14, 2026, 9:30 AM", and `seconds` adds
- *  the seconds. Empty for a missing or invalid time. */
-export declare function formatDateTime(value: TimeValue, style?: keyof typeof DATE_TIME_STYLES): string;
+ *  "3/14/2026, 9:30 AM", `medium` "Mar 14, 2026, 9:30 AM", `seconds` adds
+ *  the seconds, and `full` reads "March 14, 2026 at 9:30 AM EDT", with the
+ *  time zone. `locale`, such as `useLocale()` gives, wins over the time's own
+ *  and luxon's default. Empty for a missing or invalid time. */
+export declare function formatDateTime(value: TimeValue, style?: DateTimeStyle, locale?: string | undefined): string;
 /** Time left, rounded the way a countdown reads: whole seconds under a minute,
  *  minutes and seconds under an hour, then hours and minutes. Null once only a
  *  few seconds remain, for the caller's "almost done". */

package/dist/format.js

@@ -16,23 +16,42 @@ function formatBytes(bytes) {
 	const unit = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), BYTE_UNITS.length - 1);
 	return `${sizeNumber.format(bytes / 1024 ** unit)} ${BYTE_UNITS[unit]}`;
 }
-var countNumber = new Intl.NumberFormat(void 0, {
-	notation: "compact",
-	maximumFractionDigits: 1
-});
-/** A count short enough for a status line: 512, 1.2K, 3.4M. */
-function formatCount(n) {
-	return countNumber.format(n);
+var countNumbers = /* @__PURE__ */ new Map();
+var plainNumbers = /* @__PURE__ */ new Map();
+/** A count short enough for a status line: 512, 1.2K, 3.4M. `locale`, such
+*  as `useLocale()` gives, wins over the browser's. */
+function formatCount(n, locale) {
+	let format = countNumbers.get(locale);
+	if (!format) {
+		format = new Intl.NumberFormat(locale, {
+			notation: "compact",
+			maximumFractionDigits: 1
+		});
+		countNumbers.set(locale, format);
+	}
+	return format.format(n);
+}
+/** A whole number in full, grouped as `locale` groups it: 1,204 or 1.204.
+*  `locale`, such as `useLocale()` gives, wins over the browser's. */
+function formatInteger(n, locale) {
+	let format = plainNumbers.get(locale);
+	if (!format) {
+		format = new Intl.NumberFormat(locale);
+		plainNumbers.set(locale, format);
+	}
+	return format.format(n);
 }
 var UNIT_DISPLAY = { ja: "short" };
 /** A length of time to whole seconds, in the host's locale: 45s, 2m 13s,
-*  1d 2h. Takes milliseconds or a luxon Duration; the sign is dropped. */
-function formatDuration(value) {
+*  1d 2h. Takes milliseconds or a luxon Duration; the sign is dropped.
+*  `locale` wins over the duration's own and luxon's default. */
+function formatDuration(value, locale) {
 	const duration = typeof value === "number" ? Duration.fromMillis(value) : value;
 	const parts = duration.shiftTo("days", "hours", "minutes", "seconds").toObject();
 	if (parts.seconds !== void 0) parts.seconds = Math.round(parts.seconds);
 	const shown = Object.fromEntries(Object.entries(parts).filter(([, n]) => n !== 0).map(([unit, n]) => [unit, Math.abs(n)]));
-	const human = Duration.fromObject(Object.keys(shown).length > 0 ? shown : { seconds: 0 }, duration.locale ? { locale: duration.locale } : {});
+	const shownLocale = locale ?? duration.locale;
+	const human = Duration.fromObject(Object.keys(shown).length > 0 ? shown : { seconds: 0 }, shownLocale ? { locale: shownLocale } : {});
 	return human.toHuman({ unitDisplay: UNIT_DISPLAY[human.locale?.split("-")[0] ?? ""] ?? "narrow" }).replaceAll(/[,、]/g, "");
 }
 /** The moment `value` names, or null when it is missing or invalid. */
@@ -45,13 +64,17 @@ var DATE_TIME_STYLES = {
 	date: DateTime.DATE_MED,
 	short: DateTime.DATETIME_SHORT,
 	medium: DateTime.DATETIME_MED,
-	seconds: DateTime.DATETIME_MED_WITH_SECONDS
+	seconds: DateTime.DATETIME_MED_WITH_SECONDS,
+	full: DateTime.DATETIME_FULL
 };
 /** A moment in the reader's locale: `date` reads "Mar 14, 2026", `short`
-*  "3/14/2026, 9:30 AM", `medium` "Mar 14, 2026, 9:30 AM", and `seconds` adds
-*  the seconds. Empty for a missing or invalid time. */
-function formatDateTime(value, style = "medium") {
-	return toDateTime(value)?.toLocaleString(DATE_TIME_STYLES[style]) ?? "";
+*  "3/14/2026, 9:30 AM", `medium` "Mar 14, 2026, 9:30 AM", `seconds` adds
+*  the seconds, and `full` reads "March 14, 2026 at 9:30 AM EDT", with the
+*  time zone. `locale`, such as `useLocale()` gives, wins over the time's own
+*  and luxon's default. Empty for a missing or invalid time. */
+function formatDateTime(value, style = "medium", locale) {
+	const time = toDateTime(value);
+	return (locale ? time?.setLocale(locale) : time)?.toLocaleString(DATE_TIME_STYLES[style]) ?? "";
 }
 /** Time left, rounded the way a countdown reads: whole seconds under a minute,
 *  minutes and seconds under an hour, then hours and minutes. Null once only a
@@ -61,4 +84,4 @@ function formatTimeLeft(seconds) {
 	return formatDuration((seconds < 3600 ? Math.round(seconds) : Math.ceil(seconds / 60) * 60) * 1e3);
 }
 //#endregion
-export { formatBytes, formatCount, formatDateTime, formatDuration, formatTimeLeft, toDateTime };
+export { formatBytes, formatCount, formatDateTime, formatDuration, formatInteger, formatTimeLeft, toDateTime };

package/dist/graph/AnnotationBanner.js

@@ -1,10 +1,10 @@
 import { cx } from "../cx.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 { keyedByContent } from "../components/keys.js";
 import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/AnnotationBanner.tsx
 var typeOrder = {
 	error: 0,

package/dist/graph/Connectors.js

@@ -1,7 +1,7 @@
 import { highlightOf, useLineage, useLineageStore } from "./lineage.js";
 import { dimClasses } from "./GraphNode.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/Connectors.tsx
 var CONNECTOR_COLOR = "var(--theme-border)";
 var HIGHLIGHT_COLOR = "var(--theme-accent)";
@@ -60,7 +60,7 @@ function LitEdges({ edges }) {
 			}, `${from}→${to}`));
 		}
 	}
-	return /* @__PURE__ */ jsxs(Fragment, { children: [lines.length > 0 && /* @__PURE__ */ jsx("path", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [lines.length > 0 && /* @__PURE__ */ jsx("path", {
 		d: lines.join(" "),
 		stroke: CONNECTOR_COLOR,
 		strokeWidth: STROKE,
@@ -85,7 +85,7 @@ function LitDots({ ports }) {
 			}, key));
 		}
 	}
-	return /* @__PURE__ */ jsxs(Fragment, { children: [at.length > 0 && /* @__PURE__ */ jsx("path", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [at.length > 0 && /* @__PURE__ */ jsx("path", {
 		d: squaresAt(at),
 		fill: PANEL_COLOR
 	}), lit] });
@@ -133,7 +133,7 @@ var ConnectorLayers = memo(function ConnectorLayers({ edges, zBase }) {
 		style: { zIndex: z + zBase },
 		children
 	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		keyframes,
 		layer(-1, /* @__PURE__ */ jsx("path", {
 			d: lines,
@@ -143,7 +143,7 @@ var ConnectorLayers = memo(function ConnectorLayers({ edges, zBase }) {
 			className: fade
 		})),
 		layer(20, /* @__PURE__ */ jsx(LitEdges, { edges })),
-		layer(30, /* @__PURE__ */ jsxs(Fragment, { children: [
+		layer(30, /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			/* @__PURE__ */ jsx("path", {
 				d: squares,
 				fill: PANEL_COLOR

package/dist/graph/DependencyGraph.js

@@ -1,7 +1,7 @@
 import { cx } from "../cx.js";
 import { ArrowLeftIcon, ArrowRightIcon, ChevronLeftIcon, ChevronRightIcon, CloseIcon, FileTextIcon, ZoomInIcon, ZoomOutIcon } from "../icons.js";
 import { Loader } from "../components/Loader.js";
-import { useRunFile, useSlots, useStrings, useWorkflowEngine } from "../components/Provider.js";
+import { useLocale, 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";
@@ -36,8 +36,8 @@ import { StepSummaries } from "./StepSummaries.js";
 import { StepSummary } from "./StepSummary.js";
 import TreeView from "./TreeView.js";
 import { FIT_MAX_SCALE, MIN_SCALE, ZOOM_STEP, enclosing, fitMargin, fitView, intoView, viewShowing, wheelFactor, zoomAround, zoomLimit } from "./viewport.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, Suspense, createContext, lazy, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, Suspense, createContext, lazy, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { flushSync } from "react-dom";
 import { DateTime } from "luxon";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
@@ -73,7 +73,7 @@ function GraphViewControls({ history, expand, onReset, onZoom, zoomedAll }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: VIEW_BAR,
 		children: [
-			history && /* @__PURE__ */ jsxs(Fragment, { children: [
+			history && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx(IconButton, {
 					icon: /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
 					label: dag.previousGraph,
@@ -549,7 +549,7 @@ function EditorEdges({ edges, cols, boxes, selected, zBase, size }) {
 	const wiredIn = new Set(edges.map((edge) => edge.to));
 	const wiredOut = new Set(edges.map((edge) => edge.from));
 	const chosen = new Set(selected.map((edge) => `${edge.from}→${edge.to}`));
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		cols.flatMap((col) => col.map((jobNames) => {
 			const [head] = jobNames;
 			const box = head === void 0 ? void 0 : boxes.get(head);
@@ -586,7 +586,7 @@ function EditorEdges({ edges, cols, boxes, selected, zBase, size }) {
 			width: size?.width,
 			height: size?.height,
 			style: { zIndex: 1 + zBase },
-			children: edges.map(({ from, to, path }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [chosen.has(`${from}→${to}`) && /* @__PURE__ */ jsx("path", {
+			children: edges.map(({ from, to, path }) => /* @__PURE__ */ jsxs(Fragment, { children: [chosen.has(`${from}→${to}`) && /* @__PURE__ */ jsx("path", {
 				d: path.d,
 				stroke: "var(--theme-accent)",
 				strokeWidth: "10",
@@ -643,7 +643,7 @@ function SidebarJobs({ jobs, pathPrefix, preview, stepsOpen, toggleSteps, expand
 		seenMatrixGroups.add(originaljob);
 		return [originaljob];
 	});
-	return /* @__PURE__ */ jsx(Fragment, { children: orderedKeys.map((jobName) => {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: orderedKeys.map((jobName) => {
 		const mg = displayJobs[jobName]?._matrixGroup;
 		if (mg) return /* @__PURE__ */ jsx(MatrixGroupSummaryItem, {
 			matrixGroup: mg,
@@ -832,6 +832,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 		};
 	}, [containerEl, fixedHeight]);
 	const { common, dag: dagStrings } = useStrings();
+	const locale = useLocale();
 	const stepHeaderRef = useRef(null);
 	const slots = useSlots();
 	const [sidebarEl, setSidebarEl] = useState(null);
@@ -1460,7 +1461,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 									children: dagStrings.submitted
 								}), /* @__PURE__ */ jsx("div", {
 									className: "text-sm font-semibold flex items-center gap-x-1",
-									children: formatDateTime(startDt, "short")
+									children: formatDateTime(startDt, "short", locale)
 								})]
 							}),
 							/* @__PURE__ */ jsx("div", { className: "flex-1" }),
@@ -1513,7 +1514,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 							onPanning: moved,
 							onPinch: moved,
 							onTransform,
-							children: () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+							children: () => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 								ref: viewBarRef,
 								className: "absolute z-10 top-2 right-2 flex max-w-[calc(100%-1rem)] flex-col items-end gap-y-1",
 								children: /* @__PURE__ */ jsx(GraphViewControls, {

package/dist/graph/GraphEditor.js

@@ -1,10 +1,10 @@
 import { cx } from "../cx.js";
 import { AddIcon, DuplicateIcon, EditIcon, GridIcon, LinkIcon, MatrixIcon, RemoveIcon, ResetLayoutIcon, TrashIcon } from "../icons.js";
+import { useContextMenu } from "../components/ContextMenu.js";
 import { useWorkflowEditing } from "../components/Provider.js";
 import { useCopy } from "../components/useCopy.js";
 import { menuDivider } from "../components/MenuEntries.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";
@@ -16,8 +16,8 @@ import { JobDialog, StepDialog } from "./GraphEditorDialogs.js";
 import { overlaps, typing } from "./editorApi.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";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/GraphEditor.tsx
 var EDGE_ZONE = 48;
 var INDICATOR = 6;
@@ -1283,7 +1283,7 @@ function useGraphEditorState({ editor, jobs, yamlJobs, inputs, workflow, layout,
 	]);
 	return {
 		api,
-		overlays: /* @__PURE__ */ jsxs(Fragment, { children: [
+		overlays: /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			/* @__PURE__ */ jsx(EditorToolbar, {
 				api,
 				editor,
@@ -1460,7 +1460,7 @@ function DragOverlays({ api, container, trashRef }) {
 	const rect = container.getBoundingClientRect();
 	const overTrash = drag.target?.kind === "trash";
 	const problem = drag.target?.kind === "steps" ? drag.target.problem : void 0;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [drag.payload.kind === "jobs" && /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { 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-text)" : "theme-border bg-(--theme-panel-bg) theme-muted-text"),
 		children: [/* @__PURE__ */ jsx(TrashIcon, { className: "h-4 w-4" }), t.dropToDelete]

package/dist/graph/GraphEditorDialogs.js

@@ -1,6 +1,6 @@
 import { ArrowDownIcon, ArrowUpIcon, RemoveIcon, TrashIcon } from "../icons.js";
-import { withPositionKeys } from "../components/keys.js";
 import { useWorkflowActions, useWorkflowEditing } from "../components/Provider.js";
+import { withPositionKeys } from "../components/keys.js";
 import { IconButton } from "../components/IconButton.js";
 import { Checkbox } from "../components/Checkbox.js";
 import { ErrorText, FieldOption } from "../components/Field.js";
@@ -18,8 +18,8 @@ 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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
 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_-]+$/;
@@ -310,10 +310,11 @@ function OutputsEditor({ rows, onChange, stepIds, error }) {
 							value: row.custom,
 							onChange: (e) => update(i, { custom: e.target.value })
 						})
-					}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 						className: "w-1/3",
 						children: /* @__PURE__ */ jsx(Select, {
 							"aria-label": t.outputStep,
+							width: "fill",
 							placeholder: t.outputStep,
 							items: stepIds.map((id) => ({
 								value: id,
@@ -665,7 +666,7 @@ function JobForm({ job, jobs, inputs, workflow, onEdit, onClose, renderShell, on
 		...patch
 	} : null);
 	onDraft?.(saveEdit, invalid);
-	const children = /* @__PURE__ */ jsxs(Fragment, { children: [
+	const children = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		newInputs.dialog,
 		/* @__PURE__ */ jsx(Input, {
 			autoFocus: true,
@@ -797,7 +798,7 @@ function JobForm({ job, jobs, inputs, workflow, onEdit, onClose, renderShell, on
 							kind
 						})
 					})
-				}), !runsOnTyped && (runsOn.kind === "name" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				}), !runsOnTyped && (runsOn.kind === "name" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					/* @__PURE__ */ jsx(Input, {
 						mono: true,
 						...labelled(t.fields.environmentCluster, "cluster"),
@@ -831,7 +832,7 @@ function JobForm({ job, jobs, inputs, workflow, onEdit, onClose, renderShell, on
 							error: void 0
 						})
 					})
-				] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					/* @__PURE__ */ jsx(YamlField, {
 						label: t.fields.targetMode,
 						yamlKey: "mode",
@@ -917,7 +918,7 @@ function JobForm({ job, jobs, inputs, workflow, onEdit, onClose, renderShell, on
 					setMatrixOn(on);
 					if (on && matrixMode === "variables") addVariableRow();
 				}
-			}), matrixOn && /* @__PURE__ */ jsxs(Fragment, { children: [
+			}), matrixOn && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				typeof rawMatrix === "string" && /* @__PURE__ */ jsx(YamlField, {
 					label: t.fields.matrixSource,
 					description: t.help.matrixMode,
@@ -943,7 +944,7 @@ function JobForm({ job, jobs, inputs, workflow, onEdit, onClose, renderShell, on
 					value: matrixText,
 					error: errors.matrix,
 					onChange: (e) => setMatrixText(e.target.value)
-				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					/* @__PURE__ */ jsx("div", {
 						className: "text-xs theme-muted-text",
 						children: t.help.matrixVariables
@@ -1149,7 +1150,7 @@ function StepForm({ job, index, steps, inputs, workflow, usesSuggestions, onEdit
 		...patch
 	}, ...references]) : null);
 	onDraft?.(saveEdit, invalid);
-	const children = /* @__PURE__ */ jsxs(Fragment, { children: [
+	const children = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		newInputs.dialog,
 		/* @__PURE__ */ jsx(Input, {
 			autoFocus: true,
@@ -1183,7 +1184,7 @@ function StepForm({ job, index, steps, inputs, workflow, usesSuggestions, onEdit
 			placeholder: "echo \"Hello World\"",
 			onChange: setRun,
 			source
-		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(UsesPicker, {
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(UsesPicker, {
 			uses: trimmedUses,
 			onUses: setUses,
 			choices: usesSuggestions,
@@ -1260,7 +1261,7 @@ function StepForm({ job, index, steps, inputs, workflow, usesSuggestions, onEdit
 				description: t.help.retry,
 				checked: retryOn,
 				onChange: setRetryOn
-			}), retryOn && /* @__PURE__ */ jsxs(Fragment, { children: [
+			}), retryOn && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx(Input, {
 					mono: true,
 					...labelled(t.fields.maxRetries, "max-retries"),
@@ -1379,7 +1380,7 @@ function StepForm({ job, index, steps, inputs, workflow, usesSuggestions, onEdit
 			if (saveEdit) onEdit(saveEdit);
 			onClose();
 		},
-		footerStart: /* @__PURE__ */ jsxs(Fragment, { children: [
+		footerStart: /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			/* @__PURE__ */ jsx(IconButton, {
 				icon: /* @__PURE__ */ jsx(TrashIcon, {}),
 				label: t.deleteStep,

package/dist/graph/GraphNode.js

@@ -2,8 +2,8 @@ import { BoxGrip } from "./editorRows.js";
 import { emptyRowsStyle } from "./gridSpacing.js";
 import { Joblist } from "./JobSummary.js";
 import { useLineage, useLineageStore } from "./lineage.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/GraphNode.tsx
 var dimClasses = (depth) => ({
 	level: `dag-dim-${depth}`,

package/dist/graph/InputDialog.js

@@ -1,7 +1,7 @@
 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 { withPositionKeys } from "../components/keys.js";
 import { IconButton } from "../components/IconButton.js";
 import { Checkbox, CheckboxGroup } from "../components/Checkbox.js";
 import { ErrorText, Field, FieldOption } from "../components/Field.js";
@@ -18,8 +18,8 @@ import { FormEditingContext } from "../form/formEditing.js";
 import { DynamicForm } from "../form/Form.js";
 import { withInputLayouts } from "./inputLayout.js";
 import { NO_SCOPED, ViewSwitch, YamlPane, yamlProblem } from "./settingsViews.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/InputDialog.tsx
 /** Input types by menu group, in the order the add menu lists them. */
 var INPUT_TYPE_GROUPS = [
@@ -752,7 +752,7 @@ function OptionsEditor({ draft, onChange, error, keyed, described }) {
 					mode
 				})
 			}),
-			draft.mode === "list" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			draft.mode === "list" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				draft.rows.length > 0 && /* @__PURE__ */ jsxs("div", {
 					"aria-hidden": "true",
 					className: "flex items-center gap-2 text-xs theme-muted-text",
@@ -839,7 +839,7 @@ function OptionsEditor({ draft, onChange, error, keyed, described }) {
 					...draft,
 					text: e.target.value
 				})
-			}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 				className: "text-xs theme-muted-text",
 				children: draft.mode === "byKey" ? t.optionsByKeyHelp : t.optionsJsonHelp
 			}), /* @__PURE__ */ jsx(Textarea, {
@@ -1432,7 +1432,7 @@ function PropField({ prop, kind, draft, original, error, onChange, suggestions,
 						values: next.values
 					}),
 					error
-				}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SuggestionInput, {
+				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SuggestionInput, {
 					"aria-label": name,
 					value: perCopy.text,
 					suggestions: [],

package/dist/graph/InputsEditor.js

@@ -1,11 +1,11 @@
 import { cx } from "../cx.js";
+import { EmptyState } from "../components/EmptyState.js";
 import { AddIcon, ArrowDownIcon, ArrowUpIcon, CollapseIcon, DragHandleIcon, DuplicateIcon, EditIcon, FilesIcon, MinusIcon, MoreIcon, TrashIcon, WarningIcon } from "../icons.js";
+import { useContextMenu } from "../components/ContextMenu.js";
 import { Tooltip } from "../components/Tooltip.js";
-import { useWorkflowEditing } from "../components/Provider.js";
-import { EmptyState } from "../components/EmptyState.js";
+import { useProblemText, useWorkflowEditing } from "../components/Provider.js";
 import { menuDivider } from "../components/MenuEntries.js";
 import { IconButton } from "../components/IconButton.js";
-import { useContextMenu } from "../components/ContextMenu.js";
 import { NumberInput } from "../components/NumberInput.js";
 import { prefersReducedMotion } from "../reducedMotion.js";
 import { MarqueeBox, createStore, reclaimFocus, returningFocus, trackDrag, useFocusAfterDialog, usePressOutside, useStore } from "./editorPrimitives.js";
@@ -21,8 +21,8 @@ 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";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/InputsEditor.tsx
 var createFormStore = () => createStore({
 	drag: null,
@@ -100,7 +100,8 @@ function InputRow({ path, hidden = false, instance, children }) {
 	const copy = instance ?? rowKey;
 	const active = useUi(api?.store ?? EMPTY_STORE, (state) => state.open.includes(copy) && !state.drag && !state.resizing);
 	const selected = useUi(api?.store ?? EMPTY_STORE, (state) => state.selection.includes(rowKey));
-	const problems = useUi(api?.store ?? EMPTY_STORE, (state) => state.problems.filter((problem) => problem.input && key(problem.input) === rowKey).map((problem) => `${problem.line}\n${problem.message}`).join("\n\n"));
+	const problemText = useProblemText();
+	const problems = useUi(api?.store ?? EMPTY_STORE, (state) => state.problems.filter((problem) => problem.input && key(problem.input) === rowKey).map((problem) => `${problem.line}\n${problemText(problem)}`).join("\n\n"));
 	if (!api) return children;
 	const found = problems ? problems.split("\n\n") : [];
 	const definition = api.definition(path);
@@ -110,7 +111,7 @@ function InputRow({ path, hidden = false, instance, children }) {
 	const childKey = hidden ? editing.inputChildrenKey(definition["type"]) : void 0;
 	const outline = childKey && childKey !== "template" ? namesIn(asRecord(definition[childKey])) : null;
 	const flagged = hidden && definition["hidden"] !== void 0 && definition["hidden"] !== false;
-	const actions = /* @__PURE__ */ jsxs(Fragment, { children: [
+	const actions = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("button", {
 			type: "button",
 			tabIndex: -1,
@@ -255,7 +256,7 @@ function PageActions({ api, parent, list, bar = false }) {
 			api.splitIntoPages(parent);
 		}
 	});
-	return bar ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AddChip, {
+	return bar ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AddChip, {
 		icon: /* @__PURE__ */ jsx(AddIcon, { className: "h-3 w-3" }),
 		label: t.page,
 		hint: t.addPage,
@@ -266,7 +267,7 @@ function PageActions({ api, parent, list, bar = false }) {
 		size: "sm",
 		variant: "ghost",
 		onClick: () => api.unsplitPages(parent)
-	})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
+	})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconButton, {
 		size: "xs",
 		label: t.addPage,
 		icon: /* @__PURE__ */ jsx(AddIcon, {}),
@@ -1377,7 +1378,7 @@ function DropIndicator({ store, container }) {
 	const root = container.current;
 	if (!drag || !root) return null;
 	const rect = root.getBoundingClientRect();
-	return /* @__PURE__ */ jsxs(Fragment, { children: [drag.gap?.beside ? /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [drag.gap?.beside ? /* @__PURE__ */ jsx("div", {
 		className: "pointer-events-none absolute z-20 w-1 rounded-full bg-(--theme-accent)",
 		style: {
 			left: drag.gap.beside.x - rect.left - 2,

package/dist/graph/MatrixGroup.js

@@ -6,8 +6,8 @@ import { WarningMark } from "./RunWarningsList.js";
 import { rowKey, useWarningMarks } from "./runWarnings.js";
 import { Joblist } from "./JobSummary.js";
 import { GraphNode } from "./GraphNode.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/MatrixGroup.tsx
 /** The warnings about any of a matrix's runs, for its group's row while it is closed. */
 function useMatrixWarnings(prefix, members) {
@@ -68,7 +68,7 @@ var MatrixGroupNode = memo(function MatrixGroupNode({ matrixGroup, jobNames, idP
 		onClick: () => toggleMatrix(idPrefix + matrixName),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "font-semibold p-0.5",
-			children: matrixName.length > 20 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			children: matrixName.length > 20 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
 				children: t.matrixOf(`${matrixName.slice(0, 20)}…`)
 			}), /* @__PURE__ */ jsx("span", {

package/dist/graph/ProblemPageLink.d.ts

@@ -0,0 +1,9 @@
+/** The page a problem's type URI resolves to, or undefined for `about:blank` and no type, which
+ *  have none. */
+export declare function problemPage(type: string | null | undefined): string | undefined;
+/** Links a problem to the page that explains it, in a new tab, when its type has one. */
+export declare function ProblemPageLink({ type, label, className, }: {
+    type: string | null | undefined;
+    label: string;
+    className?: string | undefined;
+}): import("react").JSX.Element | null;

package/dist/graph/ProblemPageLink.js

@@ -0,0 +1,21 @@
+import { cx } from "../cx.js";
+import { ExternalLink } from "../components/ExternalLink.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/graph/ProblemPageLink.tsx
+/** The page a problem's type URI resolves to, or undefined for `about:blank` and no type, which
+*  have none. */
+function problemPage(type) {
+	return type && type !== "about:blank" ? type : void 0;
+}
+/** Links a problem to the page that explains it, in a new tab, when its type has one. */
+function ProblemPageLink({ type, label, className }) {
+	const href = problemPage(type);
+	if (!href) return null;
+	return /* @__PURE__ */ jsx(ExternalLink, {
+		href,
+		className: cx("rounded-sm text-xs underline underline-offset-2 hover:decoration-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus)", className),
+		children: label
+	});
+}
+//#endregion
+export { ProblemPageLink, problemPage };