@parallelworks/ui 0.77.0 → 0.79.0

package/dist/graph/ProblemsButton.js

@@ -1,15 +1,18 @@
 import { WarningIcon } from "../icons.js";
-import { keyedByContent } from "../components/keys.js";
 import { Tooltip } from "../components/Tooltip.js";
+import { useProblemText } from "../components/Provider.js";
+import { keyedByContent } from "../components/keys.js";
 import { Popover } from "../components/Popover.js";
+import { ProblemPageLink } from "./ProblemPageLink.js";
 import { useGraphEditorStrings } from "./editorStrings.js";
 import { toolbarPanel } from "./toolbarPanel.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/ProblemsButton.tsx
 /** A toolbar's count of the problems it lists, which opens the list. */
 function ProblemsButton({ problems }) {
 	const t = useGraphEditorStrings();
+	const problemText = useProblemText();
 	const [open, setOpen] = useState(false);
 	if (problems.length === 0) return null;
 	const label = t.problemCount(problems.length);
@@ -32,25 +35,32 @@ function ProblemsButton({ problems }) {
 			className: "flex flex-col gap-0.5",
 			children: keyedByContent(problems, (problem) => `${problem.line}:${problem.message}`).map(({ key, item: problem }) => {
 				const { pick } = problem;
-				const text = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				const text = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 					className: "mr-1.5 theme-muted-text",
 					children: t.problemLine(problem.line)
 				}), /* @__PURE__ */ jsx("span", {
 					className: "text-(--theme-error-text)",
-					children: problem.message
+					children: problemText(problem)
 				})] });
-				return /* @__PURE__ */ jsx("li", { children: pick ? /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "w-full cursor-pointer rounded px-1.5 py-1 text-left theme-hover",
-					onClick: () => {
-						setOpen(false);
-						pick();
-					},
-					children: text
-				}) : /* @__PURE__ */ jsx("div", {
-					className: "px-1.5 py-1",
-					children: text
-				}) }, key);
+				return /* @__PURE__ */ jsxs("li", {
+					className: "flex items-baseline gap-2",
+					children: [pick ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "min-w-0 flex-1 cursor-pointer rounded px-1.5 py-1 text-left theme-hover",
+						onClick: () => {
+							setOpen(false);
+							pick();
+						},
+						children: text
+					}) : /* @__PURE__ */ jsx("div", {
+						className: "min-w-0 flex-1 px-1.5 py-1",
+						children: text
+					}), /* @__PURE__ */ jsx(ProblemPageLink, {
+						type: problem.type,
+						label: t.problemAbout,
+						className: "shrink-0"
+					})]
+				}, key);
 			})
 		})
 	});

package/dist/graph/Reveal.js

@@ -1,6 +1,6 @@
 import { useReducedMotion } from "../reducedMotion.js";
-import { jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/graph/Reveal.tsx
 var EASE = "cubic-bezier(0.25, 0.1, 0.25, 1)";
 var ROWS_TRANSITION = `grid-template-rows 200ms ${EASE}`;

package/dist/graph/RunWarningsList.js

@@ -1,11 +1,12 @@
 import { cx } from "../cx.js";
 import { WarningIcon } from "../icons.js";
 import { toneIcon } from "../components/tone.js";
-import { keyedByContent, withPositionKeys } from "../components/keys.js";
 import { Tooltip } from "../components/Tooltip.js";
-import { useStrings, useWorkflowEngine } from "../components/Provider.js";
+import { useProblemText, useStrings, useWorkflowEngine } from "../components/Provider.js";
+import { keyedByContent, withPositionKeys } from "../components/keys.js";
 import { Callout } from "../components/Callout.js";
 import { jobLabel } from "./util.js";
+import { ProblemPageLink } from "./ProblemPageLink.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/RunWarningsList.tsx
 /** A warning's message, with the text it puts in backticks, such as a keyword, set as code. */
@@ -21,11 +22,12 @@ function WarningText({ message }) {
 *  it lists them. */
 function WarningMark({ warnings, className }) {
 	const { dag } = useStrings();
+	const problemText = useProblemText();
 	if (warnings.length === 0) return null;
 	return /* @__PURE__ */ jsx(Tooltip, {
 		content: /* @__PURE__ */ jsx("ul", {
 			className: "m-0 flex list-none flex-col gap-1 p-0",
-			children: keyedByContent(warnings, (w) => w.message).map(({ key, item }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(WarningText, { message: item.message }) }, key))
+			children: keyedByContent(warnings, (w) => w.message).map(({ key, item }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(WarningText, { message: problemText(item) }) }, key))
 		}),
 		children: /* @__PURE__ */ jsx("span", {
 			role: "img",
@@ -61,6 +63,7 @@ function placeOf({ warning, targets: [target] }, rootJobs, stepLabel, stepNumber
 function RunWarningsList({ warnings, rootJobs, onShow }) {
 	const { dag } = useStrings();
 	const engine = useWorkflowEngine();
+	const problemText = useProblemText();
 	if (warnings.length === 0) return null;
 	return /* @__PURE__ */ jsx(Callout, {
 		tone: "warning",
@@ -75,15 +78,21 @@ function RunWarningsList({ warnings, rootJobs, onShow }) {
 					className: "flex flex-col items-start gap-0.5",
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "min-w-0 break-words",
-						children: /* @__PURE__ */ jsx(WarningText, { message: item.warning.message })
-					}), target && onShow ? /* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: () => onShow(target),
-						className: "cursor-pointer rounded-sm text-xs font-medium underline underline-offset-2 hover:decoration-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus)",
-						children: where
-					}) : /* @__PURE__ */ jsx("span", {
-						className: "text-xs",
-						children: where
+						children: /* @__PURE__ */ jsx(WarningText, { message: problemText(item.warning) })
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "flex flex-wrap items-baseline gap-x-3 gap-y-0.5",
+						children: [target && onShow ? /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => onShow(target),
+							className: "cursor-pointer rounded-sm text-xs font-medium underline underline-offset-2 hover:decoration-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus)",
+							children: where
+						}) : /* @__PURE__ */ jsx("span", {
+							className: "text-xs",
+							children: where
+						}), /* @__PURE__ */ jsx(ProblemPageLink, {
+							type: item.warning.type,
+							label: dag.warningAbout
+						})]
 					})]
 				}, key);
 			})

package/dist/graph/ShortcutsButton.js

@@ -1,13 +1,14 @@
 import { KeyboardIcon } from "../icons.js";
+import { Kbd, isApplePlatform } from "../components/Kbd.js";
 import { IconButton } from "../components/IconButton.js";
 import { Popover } from "../components/Popover.js";
 import { useGraphEditorStrings } from "./editorStrings.js";
 import { toolbarPanel } from "./toolbarPanel.js";
+import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1 } from "react";
 //#region src/graph/ShortcutsButton.tsx
 /** Whether the keyboard is an Apple one, whose Command key does what Control does elsewhere. */
-var IS_MAC = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+var IS_MAC = isApplePlatform();
 /** Copy, paste and undo take Command on a Mac and Control elsewhere, as the handlers do. A Mac
 *  shows its symbols; elsewhere the keys go by the names their keycaps carry in the strings. */
 function modifierKeys(key) {
@@ -22,6 +23,19 @@ function modifierKeys(key) {
 /** A toolbar button that opens the list of gestures and keys a pane takes. */
 function ShortcutsButton({ groups }) {
 	const t = useGraphEditorStrings();
+	const k = t.shortcutKeys;
+	const gestures = /* @__PURE__ */ new Set([
+		k.click,
+		k.drag,
+		k.dragJob,
+		k.dragCircle,
+		k.dragButton,
+		k.dragSpace,
+		k.dragHandle,
+		k.dragEdge,
+		k.rightClick,
+		k.scroll
+	]);
 	return /* @__PURE__ */ jsx(Popover, {
 		title: t.shortcuts,
 		...toolbarPanel,
@@ -38,15 +52,18 @@ function ShortcutsButton({ groups }) {
 				children: group.title
 			}), /* @__PURE__ */ jsx("dl", {
 				className: "grid grid-cols-[8.5rem_1fr] items-baseline gap-x-3 gap-y-1.5",
-				children: group.shortcuts.map((shortcut) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("dt", {
+				children: group.shortcuts.map((shortcut) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
 					className: "flex flex-wrap items-center gap-1",
-					children: shortcut.combos.map((keys, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [i > 0 && /* @__PURE__ */ jsx("span", {
+					children: shortcut.combos.map((keys, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && /* @__PURE__ */ jsx("span", {
 						className: "theme-muted-text",
 						children: "/"
-					}), keys.map((key) => /* @__PURE__ */ jsx("kbd", {
-						className: "rounded border theme-border px-1 py-px text-[11px]",
-						children: key
-					}, key))] }, keys.join("+")))
+					}), keys.some((key) => gestures.has(key)) ? /* @__PURE__ */ jsx("span", {
+						className: "inline-flex flex-wrap items-center gap-1",
+						children: keys.map((key) => gestures.has(key) ? /* @__PURE__ */ jsx("span", {
+							className: "text-[11px] text-(--theme-app)",
+							children: key
+						}, key) : /* @__PURE__ */ jsx(Kbd, { keys: [key] }, key))
+					}) : /* @__PURE__ */ jsx(Kbd, { keys })] }, keys.join("+")))
 				}), /* @__PURE__ */ jsx("dd", {
 					className: "theme-muted-text",
 					children: shortcut.does

package/dist/graph/StepSummaries.js

@@ -4,8 +4,8 @@ import { useRunFile, useStrings, useWorkflowEngine } from "../components/Provide
 import Markdown from "../components/Markdown.js";
 import { RunStatusIcon } from "../components/RunStatusIcon.js";
 import { jobLabel } from "./util.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/StepSummaries.tsx
 var SEPARATOR = " › ";
 function completion(job) {

package/dist/graph/TreeView.js

@@ -1,8 +1,8 @@
 import { cx } from "../cx.js";
+import { EmptyState } from "../components/EmptyState.js";
 import { ChevronRightIcon } from "../icons.js";
 import { Loader } from "../components/Loader.js";
 import { useRunFile, useSlots, useStrings, useWorkflowEngine } from "../components/Provider.js";
-import { EmptyState } from "../components/EmptyState.js";
 import { Button } from "../components/Button.js";
 import { DisclosurePanel } from "../components/Disclosure.js";
 import { Elapsed } from "../components/relativeTime.js";
@@ -11,8 +11,8 @@ import { LogViewer } from "../logviewer/LogViewer.js";
 import { jobLabel, toggled } from "./util.js";
 import { WarningMark } from "./RunWarningsList.js";
 import { rowKey, useWarningMarks } from "./runWarnings.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/TreeView.tsx
 function Chevron({ open, hidden = false }) {
 	return /* @__PURE__ */ jsx("div", {

package/dist/graph/WorkflowSettingsDialog.js

@@ -12,8 +12,8 @@ import { expressionRefs } from "./expressionRefs.js";
 import { useNewInputs } from "./InputDialog.js";
 import { useSettingsViews } from "./GraphEditorDialogs.js";
 import { firstPageEdits, pagesBackEdits } from "./inputPages.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/WorkflowSettingsDialog.tsx
 var LINK_NAME = /^[a-z0-9_-]*[a-z0-9]$/;
 var ORG_VARIABLE = /^[A-Z][A-Z0-9_]*$/;
@@ -332,7 +332,7 @@ function SettingsForm({ workflow, onEdit, onClose, renderShell, onDraft, pending
 	] : wizardOn && flatten !== (wizard["flatten"] !== false) ? [...settings, ...reflattenEdits(inputs, wizardEdit)] : [update];
 	const saveEdit = newInputs.save(dirty ? editing.batchOf(edits) : null);
 	onDraft?.(saveEdit, invalid);
-	const children = /* @__PURE__ */ jsxs(Fragment, { children: [
+	const children = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		newInputs.dialog,
 		/* @__PURE__ */ jsxs(DialogSection, {
 			title: t.sectionGeneral,
@@ -617,7 +617,7 @@ function SettingsForm({ workflow, onEdit, onClose, renderShell, onDraft, pending
 						}
 					})
 				}),
-				wizardOn && /* @__PURE__ */ jsxs(Fragment, { children: [
+				wizardOn && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					WIZARD_FLAGS.map((flag) => /* @__PURE__ */ jsx(FlagField, {
 						label: t.fields[flag],
 						yamlKey: flag,

package/dist/graph/editorApi.d.ts

@@ -1,10 +1,20 @@
+import type { ProblemParams } from '../components/Provider.js';
 import type { GraphEdit, GraphEditResult } from '../editing.js';
 import type { Box } from './editorPrimitives.js';
 import type { ListedProblem } from './ProblemsButton.js';
 import type { SettingsView } from './settingsViews.js';
 export type { Box };
 export interface EditorProblem {
+    /** Its text, shown when it has no `code` or the host has no message for it. */
     message: string;
+    /** Its stable code, which the host's `useProblemMessage` shows in the reader's language with
+     *  `params`. */
+    code?: string | null | undefined;
+    /** The values the code's message shows, by name. */
+    params?: ProblemParams | null | undefined;
+    /** The URI of the page that explains it, which the problems list links to, and which the host's
+     *  `useProblemMessage` gets with its `code`. `about:blank` has none. */
+    type?: string | null | undefined;
     line: number;
     job?: string;
     step?: number;

package/dist/graph/editorFields.js

@@ -1,6 +1,6 @@
 import { AddIcon, ExpressionIcon, RemoveIcon } from "../icons.js";
-import { withPositionKeys } from "../components/keys.js";
 import { Tooltip } from "../components/Tooltip.js";
+import { withPositionKeys } from "../components/keys.js";
 import { Button } from "../components/Button.js";
 import { IconButton } from "../components/IconButton.js";
 import { Checkbox } from "../components/Checkbox.js";
@@ -14,8 +14,8 @@ import { useGraphEditorStrings } from "./editorStrings.js";
 import { asRecord } from "./records.js";
 import { useFieldLint } from "./fieldProblems.js";
 import { SuggestionInput } from "./SuggestionInput.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/editorFields.tsx
 var EXPRESSION = /^\$\{\{.*\}\}$/;
 var ENV_KEY = /^[a-zA-Z0-9_]+$/;
@@ -392,7 +392,7 @@ function SuggestedInput({ label, yamlKey, description, value, onChange, suggesti
 		description,
 		error: error ?? lint.message,
 		id,
-		children: (control) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SuggestionInput, {
+		children: (control) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SuggestionInput, {
 			...control,
 			value,
 			placeholder,

package/dist/graph/editorPrimitives.js

@@ -1,6 +1,6 @@
 import { cx } from "../cx.js";
-import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/graph/editorPrimitives.tsx
 /** A small store for an editor's view state, so a change redraws only what reads it. */
 function createStore(initial) {

package/dist/graph/editorRows.js

@@ -1,10 +1,11 @@
 import { cx } from "../cx.js";
 import { AddIcon, DragHandleIcon, MoreIcon, WarningIcon } from "../icons.js";
 import { Tooltip } from "../components/Tooltip.js";
+import { useProblemText } from "../components/Provider.js";
 import { MarqueeBox, place } from "./editorPrimitives.js";
 import { EDITOR_HANDLE_CLASS, NO_SELECTION, labelsOf, problemsIn, sameEdge, sameStep, selectionBounds, useGraphEditor, useSelectedEdges, useUi } from "./graphEditorState.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/editorRows.tsx
 /** Drop indicators, the connection line and the selection, drawn in the graph's own coordinates. */
 function GraphEditorCanvas() {
@@ -71,7 +72,7 @@ function SelectionBox({ api }) {
 	if (!grid || !bounds) return null;
 	const anchor = grid.cols.flat(2).find((job) => jobs.includes(job));
 	const y = bounds.connectorY;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("div", {
 			className: "absolute rounded-xl border-2 border-dashed border-(--theme-accent)",
 			style: place(bounds)
@@ -145,12 +146,13 @@ var NO_PROBLEMS = [];
 function ProblemBadge({ api, job, step }) {
 	const t = api.t;
 	const problems = useUi(api, (state) => state.problems, NO_PROBLEMS);
+	const problemText = useProblemText();
 	const mine = useMemo(() => step === void 0 ? problems.filter((problem) => problem.job === job) : problemsIn(problems, job, step), [
 		problems,
 		job,
 		step
 	]);
-	const messages = mine.map((problem) => problem.message).join("\n");
+	const messages = mine.map(problemText).join("\n");
 	const line = mine[0]?.line ?? 0;
 	if (!messages) return null;
 	return /* @__PURE__ */ jsx(Tooltip, {
@@ -246,7 +248,7 @@ function EditableJobRow({ job, label, badge = true, children }) {
 		menuLabel: t.jobActions,
 		menuClassName: "p-1 group-hover/row:opacity-100",
 		iconClassName: "h-[1em] w-[1em]",
-		badges: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ProblemBadge, {
+		badges: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ProblemBadge, {
 			api,
 			job
 		}), badge && api.isMatrixJob(job) && /* @__PURE__ */ jsx("span", {
@@ -295,7 +297,7 @@ function NodePorts({ jobs, left, right, drawLeft, drawRight, zIndex }) {
 	if (!api) return null;
 	const t = api.t;
 	const port = `node:${jobs[0]}`;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PortCircle, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PortCircle, {
 		side: "in",
 		at: left,
 		draw: drawLeft,
@@ -445,7 +447,7 @@ function EdgeEnds({ edge, start, end, zIndex }) {
 			children: /* @__PURE__ */ jsx("span", { className: "h-5 w-5 rounded-full border-4 border-(--theme-accent) bg-(--theme-panel-bg)" })
 		})
 	}, side);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [handle("from", start, end), handle("to", end, start)] });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [handle("from", start, end), handle("to", end, start)] });
 }
 /** Shown in place of the graph when the workflow has no jobs yet. */
 /** The canvas of a graph with no jobs, which takes the graph's keys, so undo and paste still work. */

package/dist/graph/editorStrings.d.ts

@@ -12,6 +12,7 @@ export declare const GRAPH_EDITOR_STRINGS: {
     stepCount: (count: number) => string;
     problemCount: (count: number) => string;
     problemLine: (line: number) => string;
+    problemAbout: string;
     connectOutHint: string;
     connectInHint: string;
     moveBoxHint: string;

package/dist/graph/editorStrings.js

@@ -13,6 +13,7 @@ var GRAPH_EDITOR_STRINGS = {
 	stepCount: (count) => count === 1 ? "1 step" : `${count} steps`,
 	problemCount: (count) => count === 1 ? "1 problem" : `${count} problems`,
 	problemLine: (line) => `Line ${line}`,
+	problemAbout: "About this problem",
 	connectOutHint: "Drag onto a job to make it depend on this node. Drop on a circle to cover every job in that node.",
 	connectInHint: "Drag onto a job to make this node depend on it. Drop on a circle to cover every job in that node.",
 	moveBoxHint: "Drag to move these jobs together",

package/dist/graph/fieldProblems.js

@@ -1,9 +1,9 @@
 import { WarningIcon } from "../icons.js";
-import { keyedByContent } from "../components/keys.js";
 import { useWorkflowEditing } from "../components/Provider.js";
+import { keyedByContent } from "../components/keys.js";
 import { useGraphEditorStrings } from "./editorStrings.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/fieldProblems.tsx
 var FieldProblemsContext = createContext(null);
 var keyOf = (at) => at.join(".");

package/dist/graph/inputRefs.js

@@ -10,8 +10,8 @@ import { asRecord } from "./records.js";
 import { useFieldLint } from "./fieldProblems.js";
 import { SuggestionInput } from "./SuggestionInput.js";
 import { ExpressionToggle, GROWING_AREA, YamlField, flagError, flagValue, text, useGrowingArea } from "./editorFields.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/inputRefs.tsx
 /** Every input with a value, where a run reads it: groups nest unless flattened, lists hide their rows. */
 function inputRefs(editing, inputs) {
@@ -88,6 +88,7 @@ function InputRefSelect({ refs, types, value, onChange, onNew, newLabel, label }
 	];
 	return /* @__PURE__ */ jsx(Select, {
 		"aria-label": label,
+		width: "fill",
 		placeholder: matching.length > 0 ? t.chooseInput : t.noMatchingInputs,
 		items,
 		value: known || !current ? current || null : `?${current}`,
@@ -155,7 +156,7 @@ function FlagField({ label, yamlKey, description, value, original, fallback = fa
 				onChange(void 0);
 			}
 		}),
-		children: (control) => typed ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		children: (control) => typed ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "flex-1",
@@ -201,7 +202,7 @@ function ConditionField({ label, yamlKey, description, value, onChange, source,
 		description,
 		error: lint.message,
 		id,
-		actions: /* @__PURE__ */ jsxs(Fragment, { children: [allRefs(source).length > 0 && /* @__PURE__ */ jsx(InsertRefSelect, {
+		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [allRefs(source).length > 0 && /* @__PURE__ */ jsx(InsertRefSelect, {
 			source,
 			label: t.insertValue,
 			onInsert: insert
@@ -210,7 +211,7 @@ function ConditionField({ label, yamlKey, description, value, onChange, source,
 			source,
 			onCreated: (path) => onChange(flagExpression(path, false))
 		})] }),
-		children: (control) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SuggestionInput, {
+		children: (control) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SuggestionInput, {
 			...control,
 			value,
 			placeholder: texts.default,
@@ -246,7 +247,7 @@ function ValueOrInputField({ label, yamlKey, description, value, onChange, sourc
 		required,
 		error: error ?? lint.message,
 		id,
-		children: (control) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		children: (control) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "flex-1",
@@ -286,7 +287,7 @@ function ScriptField({ label, yamlKey, description, value, onChange, source, row
 			label: t.insertValue,
 			onInsert: insert
 		}),
-		children: (control) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Textarea, {
+		children: (control) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Textarea, {
 			...control,
 			ref: area ?? fixed,
 			mono: true,

package/dist/graph/runWarnings.d.ts

@@ -1,3 +1,4 @@
+import type { ProblemParams } from '../components/Provider.js';
 import type { WorkflowJob } from './types.js';
 /** Something probably wrong with a run's workflow, found when the run was created, about one of its jobs or steps. */
 export interface RunWarning {
@@ -8,8 +9,18 @@ export interface RunWarning {
     job: string;
     /** The step's index among the job's steps as the run lists them; absent for the job's own. */
     step?: number | null | undefined;
-    /** What is wrong and what to write instead. Text in backticks shows as code. */
+    /** What is wrong and what to write instead. Text in backticks shows as code. It shows when the
+     *  warning has no `code`, or the host has no message for it. */
     message: string;
+    /** The warning's stable code, such as `undefined_input`, which the host's `useProblemMessage`
+     *  shows in the reader's language with `params`. */
+    code?: string | null | undefined;
+    /** The values the code's message shows, by name. */
+    params?: ProblemParams | null | undefined;
+    /** The URI of the page that explains it, such as `/problems/workflow/undefined_input`, which the
+     *  warning links to, and which the host's `useProblemMessage` gets with its `code`. `about:blank`
+     *  has none. */
+    type?: string | null | undefined;
 }
 /** A subworkflow step on the way to a warning: its level's prefix, its job and its index. */
 interface Via {

package/dist/graph/stepWith.js

@@ -11,8 +11,8 @@ import { SuggestionInput } from "./SuggestionInput.js";
 import { ChoiceButtons, EXPRESSION, KeyValueEditor, StringListEditor, SuggestedInput, ToggleField, YamlField, isScalar, labelled, parseJson, parseScalar, rowsError, rowsFrom, rowsTo, sameValue } from "./editorFields.js";
 import { ValueOrInputField, refSuggestions } from "./inputRefs.js";
 import { DynamicForm } from "../form/Form.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/stepWith.tsx
 var REPO_INPUTS = [{
 	key: "$yaml",
@@ -459,7 +459,7 @@ function WithEditor({ uses, draft, original, onChange, error, source }) {
 						original,
 						onChange
 					}, key)),
-					kind !== "action" && /* @__PURE__ */ jsxs(Fragment, { children: [known.map(([key, raw]) => {
+					kind !== "action" && /* @__PURE__ */ jsxs(Fragment$1, { children: [known.map(([key, raw]) => {
 						const definition = asRecord(raw);
 						const label = String(definition["label"] ?? "");
 						const about = String(definition["description"] ?? "");