@parallelworks/ui 0.78.0 → 0.79.0

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

@@ -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

@@ -7,7 +7,7 @@ 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, 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 };