@parallelworks/ui 0.78.0 → 0.80.0

package/dist/components/Disclosure.d.ts

@@ -1,4 +1,4 @@
-import type { MouseEventHandler, ReactNode } from 'react';
+import { type MouseEventHandler, type ReactNode } from 'react';
 /** The height a collapsible panel animates as it opens and closes. It clips
  *  only while it moves, so focus rings and overflowing content show once open. */
 export declare const collapsePanelClassName = "h-(--collapsible-panel-height) transition-[height,opacity] duration-200 ease-out motion-reduce:transition-none data-starting-style:h-0 data-starting-style:overflow-hidden data-starting-style:opacity-0 data-ending-style:h-0 data-ending-style:overflow-hidden data-ending-style:opacity-0";
@@ -23,6 +23,10 @@ export interface DisclosureProps {
     /** Controls beside the summary, outside the toggle, so a row can hold buttons without
      *  nesting them in it. */
     actions?: ReactNode;
+    /** Controls that read as part of the summary, right after it on its line, such as a button
+     *  that says why a row failed. They sit outside the toggle, so no button holds another and
+     *  each is its own stop for Tab; a click on the rest of the line still toggles. */
+    summaryControls?: ReactNode;
     /** On the whole disclosure, summary and detail, such as a row's own menu. */
     onContextMenu?: MouseEventHandler<HTMLDivElement> | undefined;
     children: ReactNode;
@@ -30,7 +34,7 @@ export interface DisclosureProps {
 /** A line inside content that reveals more detail beneath it, such as a tool
  *  call's arguments or a model's reasoning. For a titled part of a page or
  *  form, which belongs in the page's outline, use Section. */
-export declare function Disclosure({ summary, open, onOpenChange, defaultOpen, disabled, keepMounted, className, summaryClassName, panelClassName, chevron, actions, onContextMenu, children, }: DisclosureProps): import("react").JSX.Element;
+export declare function Disclosure({ summary, open, onOpenChange, defaultOpen, disabled, keepMounted, className, summaryClassName, panelClassName, chevron, actions, summaryControls, onContextMenu, children, }: DisclosureProps): import("react").JSX.Element;
 /** The revealing panel alone, for a toggle that lives elsewhere, such as a
  *  tree row's chevron that names this panel with `aria-controls`. */
 export declare function DisclosurePanel({ open, id, keepMounted, className, children, }: {

package/dist/components/Disclosure.js

@@ -1,5 +1,6 @@
 import { cx } from "../cx.js";
 import { ChevronRightIcon } from "../icons.js";
+import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Collapsible } from "@base-ui/react/collapsible";
 //#region src/components/Disclosure.tsx
@@ -9,8 +10,11 @@ var collapsePanelClassName = "h-(--collapsible-panel-height) transition-[height,
 /** A line inside content that reveals more detail beneath it, such as a tool
 *  call's arguments or a model's reasoning. For a titled part of a page or
 *  form, which belongs in the page's outline, use Section. */
-function Disclosure({ summary, open, onOpenChange, defaultOpen = false, disabled = false, keepMounted = false, className, summaryClassName, panelClassName, chevron = true, actions, onContextMenu, children }) {
+function Disclosure({ summary, open, onOpenChange, defaultOpen = false, disabled = false, keepMounted = false, className, summaryClassName, panelClassName, chevron = true, actions, summaryControls, onContextMenu, children }) {
+	const trigger = useRef(null);
+	const hasControls = summaryControls !== void 0 && summaryControls !== null && summaryControls !== false;
 	const toggle = /* @__PURE__ */ jsxs(Collapsible.Trigger, {
+		ref: trigger,
 		className: cx("group/disclosure flex min-w-0 items-start gap-2 rounded-sm text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus)", disabled ? "cursor-default" : "cursor-pointer", summaryClassName),
 		children: [summary, !disabled && chevron && /* @__PURE__ */ jsx(ChevronRightIcon, {
 			"aria-hidden": "true",
@@ -24,7 +28,25 @@ function Disclosure({ summary, open, onOpenChange, defaultOpen = false, disabled
 		disabled,
 		className,
 		onContextMenu,
-		children: [actions ? /* @__PURE__ */ jsxs("div", {
+		children: [hasControls ? /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-center gap-2",
+			children: [
+				toggle,
+				/* @__PURE__ */ jsx("div", {
+					className: "flex shrink-0 items-center gap-1",
+					children: summaryControls
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: cx("min-w-0 flex-1 self-stretch", !disabled && "cursor-pointer"),
+					onClick: () => trigger.current?.click()
+				}),
+				actions && /* @__PURE__ */ jsx("div", {
+					className: "flex shrink-0 items-center gap-1",
+					children: actions
+				})
+			]
+		}) : actions ? /* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 items-center gap-2",
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "flex min-w-0 flex-1",

package/dist/components/MenuEntries.d.ts

@@ -45,11 +45,12 @@ interface MenuLinkAction extends MenuActionBase {
     checked?: never;
     copy?: never;
 }
-/** Copies `copy.text` to the clipboard, confirmed with a toast naming `copy.label`. */
+/** Copies `copy.text` to the clipboard, confirmed with a toast naming `copy.label`, or
+ *  saying only that it copied without one. A failure says so too. */
 interface MenuCopyAction extends MenuActionBase {
     copy: {
         text: string;
-        label: string;
+        label?: string | undefined;
     };
     onClick?: never;
     checked?: never;

package/dist/components/MenuEntries.js

@@ -188,7 +188,7 @@ var shortcutClassName = "ps-3 text-xs text-(--theme-muted-text-color) tabular-nu
 function RowContent({ icon, label, description, end }) {
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		icon !== void 0 && icon !== null && /* @__PURE__ */ jsx("span", {
-			className: "flex h-5 shrink-0 items-center in-data-[size=sm]:h-4",
+			className: "flex h-5 min-w-4 shrink-0 items-center justify-center in-data-[size=sm]:h-4",
 			children: icon
 		}),
 		/* @__PURE__ */ jsxs("span", {

package/dist/components/Popover.d.ts

@@ -52,6 +52,9 @@ export interface PopoverOptions extends Omit<BasePopover.Popup.Props, 'className
     sheet?: boolean | undefined;
     /** `panel` holds controls or a list; `tip` is a tooltip-sized note in the tooltip's look. */
     variant?: 'panel' | 'tip';
+    /** A panel's content reaches its edges, such as a list of suggestions whose rows pad
+     *  themselves and highlight edge to edge. A title keeps its own padding. */
+    flush?: boolean | undefined;
     /** On the popup: its width, padding or text size. */
     className?: string;
     children: ReactNode;
@@ -60,5 +63,5 @@ export interface PopoverOptions extends Omit<BasePopover.Popup.Props, 'className
  *  flips and shifts to stay on screen, closes on Escape or a press outside, and
  *  returns focus to the trigger. Use a Menu for a list of actions, and a
  *  HoverCard for a preview a link already leads to. */
-export declare function Popover({ trigger, at, title, open, defaultOpen, onOpenChange, side, align, openOnHover, hoverDelay, hoverCloseDelay, initialFocus, anchor, keepSide, variant, sheet, className, children, ...popupProps }: PopoverProps): import("react").JSX.Element;
+export declare function Popover({ trigger, at, title, open, defaultOpen, onOpenChange, side, align, openOnHover, hoverDelay, hoverCloseDelay, initialFocus, anchor, keepSide, variant, sheet, flush, className, children, ...popupProps }: PopoverProps): import("react").JSX.Element;
 export {};

package/dist/components/Popover.js

@@ -19,7 +19,7 @@ var sheetPopupClassName = "max-sm:w-auto! max-sm:max-w-none! max-sm:max-h-[min(7
 *  flips and shifts to stay on screen, closes on Escape or a press outside, and
 *  returns focus to the trigger. Use a Menu for a list of actions, and a
 *  HoverCard for a preview a link already leads to. */
-function Popover$1({ trigger, at, title, open, defaultOpen, onOpenChange, side = "bottom", align = "center", openOnHover = false, hoverDelay = 300, hoverCloseDelay = 150, initialFocus = "first-control", anchor, keepSide = false, variant = "panel", sheet, className, children, ...popupProps }) {
+function Popover$1({ trigger, at, title, open, defaultOpen, onOpenChange, side = "bottom", align = "center", openOnHover = false, hoverDelay = 300, hoverCloseDelay = 150, initialFocus = "first-control", anchor, keepSide = false, variant = "panel", sheet, flush = false, className, children, ...popupProps }) {
 	const portal = usePopupContainer();
 	const tip = variant === "tip";
 	const asSheet = sheet ?? (!tip && !at);
@@ -52,9 +52,9 @@ function Popover$1({ trigger, at, title, open, defaultOpen, onOpenChange, side =
 					...popupProps,
 					ref: popup,
 					initialFocus: initialFocus === "popup" ? popup : initialFocus === "first-control",
-					className: cx(tip ? cx("text-left", tipClassName) : cx(panelClassName, "max-h-(--available-height) max-w-[calc(100vw-16px)] overflow-y-auto p-3"), className, asSheet && sheetPopupClassName),
+					className: cx(tip ? cx("text-left", tipClassName) : cx(panelClassName, "max-h-(--available-height) max-w-[calc(100vw-16px)] overflow-y-auto", !flush && "p-3"), className, asSheet && sheetPopupClassName),
 					children: [title && /* @__PURE__ */ jsx(Popover.Title, {
-						className: "mb-2 text-sm font-semibold",
+						className: cx("mb-2 text-sm font-semibold", flush && !tip && "px-3 pt-3"),
 						children: title
 					}), /* @__PURE__ */ jsx(CloseContext, {
 						value: close,

package/dist/components/Provider.d.ts

@@ -288,6 +288,8 @@ export interface UIStrings {
         /** How many warnings: the title of a run's list of warnings, and the name of the mark on a job
          *  or step they're about, such as "2 warnings". */
         warningCount: (count: number) => string;
+        /** The link from a warning to the page that explains it, when it has one. */
+        warningAbout: string;
     };
     jobActions: {
         openSubworkflowLogs: string;
@@ -733,6 +735,22 @@ export interface RunFileResult {
     error: unknown;
 }
 export type PersistedStateHook = <T>(key: string, defaultValue: T) => [T, Dispatch<SetStateAction<T>>];
+/** The values a problem's message shows, by name, as a problem's `params` carries them. */
+export type ProblemParams = Readonly<Record<string, string | number>>;
+/** A problem code's message in the reader's language, with its params; undefined when the host has
+ *  none for the code. `type` is the problem's type URI: one that names an application, such as
+ *  `/problems/workflow/undefined_input`, picks that application's message for the code over the
+ *  host's own. */
+export type ProblemMessage = (code: string, params?: ProblemParams, type?: string) => string | undefined;
+/** A problem that may carry a code: a run's warning, or one the workflow editor marks. */
+export interface CodedProblem {
+    /** Its text as the server wrote it, shown when the host has no message for its code. */
+    message: string;
+    code?: string | null | undefined;
+    params?: ProblemParams | null | undefined;
+    /** Its type URI, which the host's message for its code is looked up by too. */
+    type?: string | null | undefined;
+}
 export interface UIData {
     /**
      * Host-bound hook resolving a file in a run's artifact tree (logs, scripts).
@@ -763,6 +781,14 @@ export interface UIData {
         error?: string;
     }>;
     usePersistedState: PersistedStateHook;
+    /**
+     * Host-bound hook returning a problem code's message in the reader's language, such as
+     * `useCodeMessage` from `@parallelworks/problem/react`. A run's warnings and the editor's
+     * problems that carry a `code` show it, given their `params` and `type`, and their own `message`
+     * when it gives nothing. Absent, they show their `message`. Must be a stable function reference —
+     * components call it as a hook.
+     */
+    useProblemMessage: () => ProblemMessage;
 }
 import type { FieldComponent } from '../form/fieldRegistry.js';
 import type { Breadcrumb } from './Breadcrumbs.js';
@@ -864,6 +890,9 @@ export declare function useProvisionCorsRules(): UIData['provisionCorsRules'];
 export declare function useRunFile(slug: string, path: string | null, options?: {
     refreshInterval?: number;
 }): RunFileResult;
+/** A coded problem's text in the reader's language: the host's message for its code and type, or
+ *  else its own `message`. */
+export declare function useProblemText(): (problem: CodedProblem) => string;
 export declare function usePersistedState<T>(key: string, defaultValue: T): [T, Dispatch<SetStateAction<T>>];
 export interface UIProviderProps {
     /** Translations over the English defaults, at any depth. Define them outside a component, or
@@ -871,8 +900,9 @@ export interface UIProviderProps {
     strings?: UIStringOverrides | undefined;
     /** How the package navigates; read at the moment it navigates, so a new one never re-renders. */
     navigation?: Partial<UINavigation> | undefined;
-    /** The host's data hooks and resolvers. `useRunFile` and `usePersistedState` are called as
-     *  hooks, so each must stay the same function for the life of the app. */
+    /** The host's data hooks and resolvers. `useRunFile`, `usePersistedState` and
+     *  `useProblemMessage` are called as hooks, so each must stay the same function for the life of
+     *  the app. */
     data?: Partial<UIData> | undefined;
     /** Components the host renders inside the package's; a component made each render would
      *  remount everything it renders. */

package/dist/components/Provider.js

@@ -320,7 +320,8 @@ var DEFAULTS = {
 			].filter(([count]) => count).map(([count, one, many]) => `${count} ${count === 1 ? one : many}`).join(", ")}`,
 			annotationSource: (job, step) => `in ${job} → ${step}`,
 			stepNumber: (index) => `step ${index}`,
-			warningCount: (count) => count === 1 ? "1 warning" : `${count} warnings`
+			warningCount: (count) => count === 1 ? "1 warning" : `${count} warnings`,
+			warningAbout: "About this warning"
 		},
 		jobActions: {
 			openSubworkflowLogs: "Open subworkflow logs",
@@ -692,7 +693,8 @@ var DEFAULTS = {
 	},
 	data: {
 		useRunFile: defaultUseRunFile,
-		usePersistedState: useLocalPersistedState
+		usePersistedState: useLocalPersistedState,
+		useProblemMessage: useNoProblemMessage
 	},
 	slots: {}
 };
@@ -802,6 +804,17 @@ function useRunFile(slug, path, options) {
 	const { useRunFile: boundUseRunFile } = useContext(DataContext);
 	return boundUseRunFile(slug, path, options);
 }
+var noProblemMessage = () => void 0;
+function useNoProblemMessage() {
+	return noProblemMessage;
+}
+/** A coded problem's text in the reader's language: the host's message for its code and type, or
+*  else its own `message`. */
+function useProblemText() {
+	const { useProblemMessage: boundUseProblemMessage } = useContext(DataContext);
+	const message = boundUseProblemMessage();
+	return useCallback((problem) => (problem.code ? message(problem.code, problem.params ?? void 0, problem.type ?? void 0) : void 0) ?? problem.message, [message]);
+}
 function usePersistedState(key, defaultValue) {
 	const { usePersistedState: boundUsePersistedState } = useContext(DataContext);
 	return boundUsePersistedState(key, defaultValue);
@@ -869,4 +882,4 @@ function UIProvider({ strings, navigation, data, slots, engine: engineProp, nonc
 	});
 }
 //#endregion
-export { UIProvider, useAvatarColoring, useLink, useLoadedWorkflowEngine, useLocale, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRepoSuggestions, useRunFile, useSecretVariablesResolver, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader, useWorkflowJsonResolver };
+export { UIProvider, useAvatarColoring, useLink, useLoadedWorkflowEngine, useLocale, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProblemText, useProvisionCorsRules, useRepoSuggestions, useRunFile, useSecretVariablesResolver, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader, useWorkflowJsonResolver };

package/dist/components/segmented.js

@@ -34,7 +34,7 @@ function segmentGroupClassName({ fill, iconOnly }) {
 	return cx("gap-0.5", iconOnly ? "flex flex-col items-center" : cx("rounded-lg theme-muted-panel p-0.5", fillGroup[fillKey(fill)]));
 }
 function segmentClassName(current, { fill, iconOnly, size = "md" }, tone) {
-	return cx("relative flex min-w-0 cursor-pointer items-center justify-center rounded-md font-medium transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--theme-focus) data-disabled:cursor-not-allowed data-disabled:opacity-50", current ? "bg-(--theme-panel-bg) shadow-sm ring-1 ring-(--theme-border)" : "hover:not-data-disabled:bg-(--theme-hover)", tone ? toneText[tone] : current ? "theme-text" : "theme-muted-text hover:not-data-disabled:theme-text", iconOnly ? "h-8 w-8" : segmentSizes[size][fillKey(fill)]);
+	return cx("relative flex min-w-0 cursor-pointer items-center justify-center rounded-md font-medium transition-colors duration-150 focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--theme-focus) data-disabled:cursor-not-allowed data-disabled:opacity-50", current ? "bg-(--theme-panel-bg) shadow-sm ring-1 ring-(--theme-border)" : "hover:not-data-disabled:bg-(--theme-hover)", tone ? toneText[tone] : current ? "theme-text" : "theme-muted-text hover:not-data-disabled:theme-text", iconOnly ? "h-8 w-8" : segmentSizes[size][fillKey(fill)]);
 }
 /** How many things a tab or segment holds, as a pill after its label. */
 function CountPill({ count, tone }) {

package/dist/graph/InputsEditor.js

@@ -3,7 +3,7 @@ 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 { useProblemText, useWorkflowEditing } from "../components/Provider.js";
 import { menuDivider } from "../components/MenuEntries.js";
 import { IconButton } from "../components/IconButton.js";
 import { NumberInput } from "../components/NumberInput.js";
@@ -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);

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 };

package/dist/graph/ProblemsButton.js

@@ -1,7 +1,9 @@
 import { WarningIcon } from "../icons.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 { useState } from "react";
@@ -10,6 +12,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 /** 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);
@@ -37,20 +40,27 @@ function ProblemsButton({ problems }) {
 					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/RunWarningsList.js

@@ -2,10 +2,11 @@ import { cx } from "../cx.js";
 import { WarningIcon } from "../icons.js";
 import { toneIcon } from "../components/tone.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/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/editorRows.js

@@ -1,6 +1,7 @@
 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 { useEffect, useMemo, useRef } from "react";
@@ -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, {

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/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/index.d.ts

@@ -10,7 +10,7 @@ export { Checkbox, CheckboxGroup, type CheckboxProps } from './components/Checkb
 export { ColorInput, type ColorInputProps } from './components/ColorInput.js';
 export { Autocomplete, type AutocompleteProps, Combobox, type ComboboxGroup, type ComboboxItem, type ComboboxItems, type ComboboxProps, } from './components/Combobox.js';
 export { ConfirmModal, type ConfirmModalProps, type ConfirmRequest, useConfirm, } from './components/ConfirmModal.js';
-export { ContextMenuProvider, type MenuOpener, type OpenMenu, type OpenMenuOptions, useContextMenu, useMenuOpenedBy, useOpenMenu, } from './components/ContextMenu.js';
+export { ContextMenuProvider, type MenuCloseTrigger, type MenuOpener, type OpenMenu, type OpenMenuOptions, useCloseMenu, useContextMenu, useMenuOpenedBy, useOpenMenu, } from './components/ContextMenu.js';
 export { CopyButton, type CopyButtonProps, CopyCodeBlock, type CopyCodeBlockProps, } from './components/CopyButton.js';
 export { CreateModal, CreateModalSelect, CreateModalSwitch, } from './components/CreateModal.js';
 export { categoryClasses, categoryOf } from './components/category.js';
@@ -47,7 +47,7 @@ export { PageHeader, PageHeaderBar, type PageHeaderBarProps, type PageHeaderProp
 export { PageHeaderAction, type PageHeaderActionProps, PageHeaderAddButton, type PageHeaderAddButtonProps, PageHeaderMenu, } from './components/PageHeaderAction.js';
 export { PAGE_SIZES, Pagination, type PaginationProps } from './components/Pagination.js';
 export { Popover, PopoverClose, type PopoverProps, useClosePopover, } from './components/Popover.js';
-export { type AvatarColoring, type PersistedStateHook, type RunFileResult, type UIData, type UILinkComponent, type UINavigation, UIProvider, type UIProviderProps, type UISlots, type UIStringOverrides, type UIStrings, useAvatarColoring, useLocale, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader, type WorkflowEngineSource, type WorkflowJsonRef, } from './components/Provider.js';
+export { type AvatarColoring, type CodedProblem, type PersistedStateHook, type ProblemMessage, type ProblemParams, type RunFileResult, type UIData, type UILinkComponent, type UINavigation, UIProvider, type UIProviderProps, type UISlots, type UIStringOverrides, type UIStrings, useAvatarColoring, useLocale, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProblemText, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader, type WorkflowEngineSource, type WorkflowJsonRef, } from './components/Provider.js';
 export { Radio, RadioGroup, type RadioProps } from './components/Radio.js';
 export { RefreshButton, type RefreshButtonProps } from './components/RefreshButton.js';
 export { RequiredMark } from './components/RequiredMark.js';

package/dist/index.js

@@ -2,12 +2,12 @@ import { cx } from "./cx.js";
 import { buttonClasses } from "./components/buttonClasses.js";
 import { EmptyState } from "./components/EmptyState.js";
 import { MenuCheckboxItem, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger } from "./components/Menu.js";
-import { ContextMenuProvider, useContextMenu, useMenuOpenedBy, useOpenMenu } from "./components/ContextMenu.js";
+import { ContextMenuProvider, useCloseMenu, useContextMenu, useMenuOpenedBy, useOpenMenu } from "./components/ContextMenu.js";
 import { Loader } from "./components/Loader.js";
 import { toast } from "./components/Toast.js";
 import { Kbd, ariaKeyShortcuts, formatShortcut, isApplePlatform, shortcutText, useShortcutFormat } from "./components/Kbd.js";
 import { Tooltip, TooltipProvider } from "./components/Tooltip.js";
-import { UIProvider, useAvatarColoring, useLocale, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader } from "./components/Provider.js";
+import { UIProvider, useAvatarColoring, useLocale, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProblemText, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader } from "./components/Provider.js";
 import { AppLink, isPlainClick } from "./components/AppLink.js";
 import { useCopy } from "./components/useCopy.js";
 import { MenuEntries, MenuFilter, isMenuDivider, isMenuGroup, isMenuSubmenu, menuDivider } from "./components/MenuEntries.js";
@@ -83,4 +83,4 @@ import { ToggleGroup } from "./components/ToggleGroup.js";
 import { useClosingValue } from "./components/useClosingValue.js";
 import { useCssIsDark } from "./components/useCssIsDark.js";
 import { useApplyTheme, useColorMode } from "./components/useTheme.js";
-export { ActionMenu, AppLink, Autocomplete, Avatar, AvatarGroup, Breadcrumbs, Button, CODE_STYLES, Calendar, Callout, Card, CardHeader, ChartLegendList, ChartTooltipContent, Checkbox, CheckboxGroup, ColorInput, Combobox, ConfirmModal, ContextMenuProvider, CopyButton, CopyCodeBlock, CountBadge, CreateModal, CreateModalSelect, CreateModalSwitch, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, DatePicker, DescriptionList, DescriptionListGroup, DescriptionListItem, Disclosure, DisclosurePanel, Drawer, Elapsed, EmptyState, ErrorPage, ErrorText, ExternalLink, Field, FieldOption, FieldValue, FileButton, HoverCard, IconButton, InfoTip, Input, JND, Kbd, LetterBadge, ListboxGroup, ListboxOption, ListboxPanel, Loader, LoadingRegion, Markdown, MenuCheckboxItem, MenuEntries, MenuFilter, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger, Meter, MethodButton, Modal, ModalDescription, ModalTitle, NumberInput, OneTimeCodeInput, Overview, PAGE_SIZES, PageHeader, PageHeaderAction, PageHeaderAddButton, PageHeaderBar, PageHeaderMenu, PageHeaderProvider, Pagination, Popover, PopoverClose, ProgressBar, Radio, RadioGroup, RefreshButton, RelativeTime, RequiredMark, RevealToggle, RunStatusIcon, SIDEBAR_TOKENS, SearchInput, Section, SegmentedControl, Select, SelectionCopy, SeriesSwatch, SettingModeOption, SettingRow, SettingsCard, SettingsHeading, Skeleton, Slider, StatusBadge, StatusDot, StickyBar, Switch, THEME_PRESETS, THEME_TOKENS, TabPanel, Table, Tabs, Tag, TagList, Textarea, ThemeEditor, ThemePreview, TitleInput, ToggleGroup, Tooltip, TooltipProvider, UIProvider, apcaContrast, applyTheme, ariaKeyShortcuts, avatarInitials, buttonClasses, categoryClasses, categoryOf, collapsePanelClassName, composite, contrastRatio, cx, deltaE, deriveTheme, errorPageKind, fieldBox, fitSeed, formatBytes, formatCount, formatDateTime, formatDuration, formatInfoTipContent, formatShortcut, formatTimeLeft, generateTheme, isApplePlatform, isDarkColor, isMenuDivider, isMenuGroup, isMenuSubmenu, isPlainClick, isTextEntryContext, levelTone, menuDivider, modalPanelClassName, modeOf, normalizeTags, parseColor, parseTheme, prefersWideGamut, resolveMode, runStatusTone, schemeFor, serializeTheme, seriesColor, seriesColors, seriesOpacity, seriesSlotColor, shortcutText, statusTextClass, tagClasses, themeStylesheet, toHex, toP3, toast, useApplyTheme, useAvatarColoring, useClock, useClosePopover, useClosingValue, useColorMode, useConfirm, useContextMenu, useCopy, useCssIsDark, useElapsed, useFieldControl, useFieldLabelledControl, useListboxNavigation, useLocale, useMenuOpenedBy, useNavigation, useOpenMenu, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRelativeTime, useRunFile, useSeriesHighlight, useShortcutFormat, useShortcutKey, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };
+export { ActionMenu, AppLink, Autocomplete, Avatar, AvatarGroup, Breadcrumbs, Button, CODE_STYLES, Calendar, Callout, Card, CardHeader, ChartLegendList, ChartTooltipContent, Checkbox, CheckboxGroup, ColorInput, Combobox, ConfirmModal, ContextMenuProvider, CopyButton, CopyCodeBlock, CountBadge, CreateModal, CreateModalSelect, CreateModalSwitch, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, DatePicker, DescriptionList, DescriptionListGroup, DescriptionListItem, Disclosure, DisclosurePanel, Drawer, Elapsed, EmptyState, ErrorPage, ErrorText, ExternalLink, Field, FieldOption, FieldValue, FileButton, HoverCard, IconButton, InfoTip, Input, JND, Kbd, LetterBadge, ListboxGroup, ListboxOption, ListboxPanel, Loader, LoadingRegion, Markdown, MenuCheckboxItem, MenuEntries, MenuFilter, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger, Meter, MethodButton, Modal, ModalDescription, ModalTitle, NumberInput, OneTimeCodeInput, Overview, PAGE_SIZES, PageHeader, PageHeaderAction, PageHeaderAddButton, PageHeaderBar, PageHeaderMenu, PageHeaderProvider, Pagination, Popover, PopoverClose, ProgressBar, Radio, RadioGroup, RefreshButton, RelativeTime, RequiredMark, RevealToggle, RunStatusIcon, SIDEBAR_TOKENS, SearchInput, Section, SegmentedControl, Select, SelectionCopy, SeriesSwatch, SettingModeOption, SettingRow, SettingsCard, SettingsHeading, Skeleton, Slider, StatusBadge, StatusDot, StickyBar, Switch, THEME_PRESETS, THEME_TOKENS, TabPanel, Table, Tabs, Tag, TagList, Textarea, ThemeEditor, ThemePreview, TitleInput, ToggleGroup, Tooltip, TooltipProvider, UIProvider, apcaContrast, applyTheme, ariaKeyShortcuts, avatarInitials, buttonClasses, categoryClasses, categoryOf, collapsePanelClassName, composite, contrastRatio, cx, deltaE, deriveTheme, errorPageKind, fieldBox, fitSeed, formatBytes, formatCount, formatDateTime, formatDuration, formatInfoTipContent, formatShortcut, formatTimeLeft, generateTheme, isApplePlatform, isDarkColor, isMenuDivider, isMenuGroup, isMenuSubmenu, isPlainClick, isTextEntryContext, levelTone, menuDivider, modalPanelClassName, modeOf, normalizeTags, parseColor, parseTheme, prefersWideGamut, resolveMode, runStatusTone, schemeFor, serializeTheme, seriesColor, seriesColors, seriesOpacity, seriesSlotColor, shortcutText, statusTextClass, tagClasses, themeStylesheet, toHex, toP3, toast, useApplyTheme, useAvatarColoring, useClock, useCloseMenu, useClosePopover, useClosingValue, useColorMode, useConfirm, useContextMenu, useCopy, useCssIsDark, useElapsed, useFieldControl, useFieldLabelledControl, useListboxNavigation, useLocale, useMenuOpenedBy, useNavigation, useOpenMenu, useOptionalWorkflowEngine, usePersistedState, useProblemText, useProvisionCorsRules, useRelativeTime, useRunFile, useSeriesHighlight, useShortcutFormat, useShortcutKey, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };