@parallelworks/ui 0.78.0 → 0.79.0

package/README.md

@@ -59,6 +59,15 @@ even for a one-word name. The host sets the tints with `--avatar-person`,
 edge `--avatar-agent-ring`. An agent's avatar (`kind="agent"`) is a rounded
 square under either coloring, so its shape and not only its color sets it apart.
 
+A run's warnings and the workflow editor's problems may carry a problem `code`, `params` and
+`type`, as a server's problem details do. Bind `data.useProblemMessage` to `useCodeMessage` from
+`@parallelworks/problem/react`, and they read in the app's language: the message at
+`apiErrors.<code>` in the app's use-intl catalog, or the shared one. It gets each one's `type` too:
+for a type that names an application, such as `/problems/workflow/undefined_input`, the message at
+`apiErrors.workflow.undefined_input` comes first. The app's own codes can stay at the top level of
+`apiErrors`; another registry's go under its name, so a code both use keeps each one's message and
+params. A code with no message, or no `useProblemMessage`, shows the `message` the server sent.
+
 Menus, selects, pickers, popovers, tooltips and hover cards open over the page,
 or over the fullscreen element while there is one. Opened inside a `<dialog>`
 shown with `showModal()`, they open inside that dialog instead: the browser
@@ -806,7 +815,9 @@ each linking to its job or step: the link opens the subworkflows, matrix and job
 it and what it is in into view below the graph's view bar, readable, and moves focus to it. Each job and step a warning is about, and each one it sits
 inside, carries a mark that lists the warnings on hover, so one skipped without a log is still
 flagged. A job name a matrix ran as several jobs marks each of them. `dag.warningCount` words the
-count.
+count. A warning with a `code` reads as the host's `useProblemMessage` words it, and one whose `type`
+names a page, such as `/problems/workflow/undefined_input`, links to that page in a new tab
+(`dag.warningAbout`); the editor's problems list does the same (`problemAbout`).
 
 The editor checks YAML against the schemas a host registers with `configureEditorYaml` from
 `@parallelworks/ui/editor`. The job, step, input and settings dialogs edit their YAML at their own

package/dist/access/AccessDrawer.d.ts

@@ -59,6 +59,24 @@ export interface AccessEditorProps {
     /** Each person and group holds one role here. Their row picks it from a list, a change
      *  swaps the old role for the new one in a single change, and the grant form picks one. */
     singleRole?: boolean | undefined;
+    /** Why a save failed, in the reader's words, under "Couldn’t grant…": a fixed sentence, or
+     *  one made from what `onChange` rejected with, such as a localized message for its error
+     *  code. Without it, a generic sentence; the error's own message never shows, as a
+     *  server's words aren't the reader's. */
+    errorMessage?: string | ((error: unknown) => string | undefined) | undefined;
+    /** Access here is set somewhere else, such as on what the resource is part of: the list
+     *  shows, read-only, under a note that says where, with a link there. */
+    managedElsewhere?: AccessManagedElsewhere | undefined;
+}
+export interface AccessManagedElsewhere {
+    /** Where access is set and why: "This team follows the workspace’s access." Without it, a
+     *  generic sentence. */
+    reason?: ReactNode;
+    /** Where to change it, through the host's router. */
+    href?: string | undefined;
+    /** The link's text, which says where it goes: "Workspace access". Without it, "Manage
+     *  access". */
+    linkLabel?: string | undefined;
 }
 export interface AccessDrawerProps extends AccessEditorProps {
     open: boolean;
@@ -69,6 +87,9 @@ export interface AccessDrawerProps extends AccessEditorProps {
 export interface AccessPanelProps extends AccessEditorProps {
     /** On the panel's frame. */
     className?: string | undefined;
+    /** Under the list, inside the frame and ruled off from it: a note or actions about access
+     *  as a whole. The grant form takes its place while it shows. */
+    footer?: ReactNode;
 }
 /** Who has access to one resource, and the place to change it: roles granted to people and
  *  groups. Overlapping roles are allowed and only redundant, which the drawer points out; taking
@@ -78,7 +99,7 @@ export interface AccessPanelProps extends AccessEditorProps {
 export declare function AccessDrawer({ open, onClose, width, ...props }: AccessDrawerProps): import("react").JSX.Element;
 /** The access editor inline on a page, such as a settings section, rather than in a drawer: the
  *  list in a frame, which the grant form takes over with a back arrow in its own header. */
-export declare function AccessPanel({ className, ...props }: AccessPanelProps): import("react").JSX.Element;
+export declare function AccessPanel({ className, footer, ...props }: AccessPanelProps): import("react").JSX.Element;
 type Match = (query: string, ...texts: (string | undefined)[]) => boolean;
 export declare function filterAccess(model: AccessModel, arrangement: AccessArrangement, query: string, match: Match, t: AccessStrings): {
     shown: Map<string, readonly string[]>;

package/dist/access/AccessDrawer.js

@@ -9,7 +9,7 @@ import { LoadingRegion, Skeleton } from "../components/Skeleton.js";
 import { Button } from "../components/Button.js";
 import { IconButton } from "../components/IconButton.js";
 import { Callout } from "../components/Callout.js";
-import "../components/dismiss.js";
+import { dialogFooterClassName } from "../components/dismiss.js";
 import { Drawer } from "../components/Drawer.js";
 import { Select } from "../components/Select.js";
 import { SearchInput } from "../components/SearchInput.js";
@@ -28,7 +28,7 @@ var EMPTY_SELECTION = {
 };
 /** The list and the grant form, and the saving, failing and undoing they share, for the drawer
 *  and the inline panel to lay out. */
-function useAccessEditor({ resourceName, roles, principals, grants, owner, inherited, permissions, onChange, loading = false, readOnly = false, readOnlyReason, describeGroup, searchPrincipals, groupCount, peopleCount, recentPrincipalIds, singleRole = false, defaultArrangement = singleRole ? "principal" : "role", visibility, rules }, inline) {
+function useAccessEditor({ resourceName, roles, principals, grants, owner, inherited, permissions, onChange, loading = false, readOnly = false, readOnlyReason, describeGroup, searchPrincipals, groupCount, peopleCount, recentPrincipalIds, singleRole = false, defaultArrangement = singleRole ? "principal" : "role", visibility, rules, errorMessage, managedElsewhere }, inline) {
 	const t = useAccessStrings();
 	const uid = useId();
 	const openMenu = useOpenMenu();
@@ -93,7 +93,8 @@ function useAccessEditor({ resourceName, roles, principals, grants, owner, inher
 	visibilityChange.current = visibility?.onChange;
 	const match = useQueryMatch();
 	const filtered = useFiltered(model, arrangement, query.trim(), match, t);
-	const editable = !readOnly && onChange !== void 0;
+	const editable = !readOnly && !managedElsewhere && onChange !== void 0;
+	const messageOf = (error) => (typeof errorMessage === "function" ? errorMessage(error) : errorMessage) || t.failedReason;
 	const sectionId = (id) => `${uid}${arrangement}${id}`;
 	const names = (changed) => {
 		const all = [...changed.grant, ...changed.revoke];
@@ -344,7 +345,28 @@ function useAccessEditor({ resourceName, roles, principals, grants, owner, inher
 	const list = /* @__PURE__ */ jsxs("div", {
 		className: "@container/access flex min-h-0 flex-1 flex-col",
 		children: [
-			readOnly && /* @__PURE__ */ jsx("div", {
+			managedElsewhere ? /* @__PURE__ */ jsx("div", {
+				className: cx("px-4 pt-3", empty && !visibility && "pb-3"),
+				children: /* @__PURE__ */ jsx(Callout, {
+					tone: "info",
+					icon: /* @__PURE__ */ jsx(LockIcon, {}),
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col items-start gap-2 @min-[30rem]/access:flex-row @min-[30rem]/access:gap-3",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "min-w-0 flex-1",
+							children: managedElsewhere.reason ?? t.managedElsewhere
+						}), managedElsewhere.href !== void 0 && /* @__PURE__ */ jsx("div", {
+							className: "flex shrink-0 items-center @min-[30rem]/access:h-5",
+							children: /* @__PURE__ */ jsx(Button, {
+								size: "sm",
+								variant: "secondary",
+								href: managedElsewhere.href,
+								children: managedElsewhere.linkLabel ?? t.manageAccess
+							})
+						})]
+					})
+				})
+			}) : readOnly && /* @__PURE__ */ jsx("div", {
 				className: "px-4 pt-3",
 				children: /* @__PURE__ */ jsxs(Callout, {
 					tone: "info",
@@ -397,7 +419,7 @@ function useAccessEditor({ resourceName, roles, principals, grants, owner, inher
 				children: loading ? /* @__PURE__ */ jsx(LoadingRegion, {
 					label: t.loading,
 					children: /* @__PURE__ */ jsx(RowsSkeleton, {})
-				}) : empty ? /* @__PURE__ */ jsxs(Fragment$1, { children: [ruleRows, /* @__PURE__ */ jsx(EmptyState, {
+				}) : empty && managedElsewhere ? ruleRows : empty ? /* @__PURE__ */ jsxs(Fragment$1, { children: [ruleRows, /* @__PURE__ */ jsx(EmptyState, {
 					variant: "bare",
 					icon: /* @__PURE__ */ jsx(UsersIcon, {}),
 					title: t.emptyTitle,
@@ -513,7 +535,7 @@ function AccessDrawer({ open, onClose, width = 560, ...props }) {
 }
 /** The access editor inline on a page, such as a settings section, rather than in a drawer: the
 *  list in a frame, which the grant form takes over with a back arrow in its own header. */
-function AccessPanel({ className, ...props }) {
+function AccessPanel({ className, footer, ...props }) {
 	const t = useAccessStrings();
 	const editor = useAccessEditor(props, true);
 	return /* @__PURE__ */ jsxs("section", {
@@ -542,14 +564,16 @@ function AccessPanel({ className, ...props }) {
 				})]
 			}),
 			editor.body,
-			editor.footer && /* @__PURE__ */ jsx("div", {
-				className: "flex shrink-0 items-center justify-end gap-2 border-t border-(--theme-border) px-4 py-3",
+			editor.footer ? /* @__PURE__ */ jsx("div", {
+				className: dialogFooterClassName,
 				children: editor.footer
+			}) : footer !== void 0 && footer !== null && footer !== false && /* @__PURE__ */ jsx("div", {
+				className: "border-t border-(--theme-border) px-4 py-3 text-sm text-(--theme-muted-text-color)",
+				children: footer
 			})
 		]
 	});
 }
-var messageOf = (error) => error instanceof Error && error.message ? error.message : void 0;
 var anchorOf = (failure, arrangement) => arrangement === "role" ? failure.roleId ?? "" : failure.principalId;
 /** The one of `elements` that is laid out, such as the one of two buttons a width shows, or the
 *  first where nothing is (as in tests). */

package/dist/access/index.d.ts

@@ -1,3 +1,3 @@
-export { type AccessArrangement, AccessDrawer, type AccessDrawerProps, type AccessEditorProps, AccessPanel, type AccessPanelProps, } from './AccessDrawer.js';
+export { type AccessArrangement, AccessDrawer, type AccessDrawerProps, type AccessEditorProps, type AccessManagedElsewhere, AccessPanel, type AccessPanelProps, } from './AccessDrawer.js';
 export { ACCESS_STRINGS, type AccessStrings, type AccessText, useAccessStrings, } from './strings.js';
 export type { AccessChange, AccessGrant, AccessGroupDetails, AccessInheritedGrant, AccessMember, AccessPermission, AccessPrincipal, AccessRole, AccessRule, AccessVisibility, } from './types.js';

package/dist/access/strings.d.ts

@@ -66,7 +66,9 @@ export declare const ACCESS_STRINGS: {
     removeFailed: (principal: string, roles: readonly string[]) => string;
     grantFailed: (principals: readonly string[], roles: readonly string[]) => string;
     undoFailed: string;
-    /** Under a failed save; `reason` is the host's error message, when it gave one. */
+    /** Why a save failed, when the host gives no `errorMessage`. */
+    failedReason: string;
+    /** Under a failed save; `reason` is the host's `errorMessage`, or `failedReason`. */
     nothingChanged: (reason: string | undefined) => string;
     /** The toast after a grant. */
     granted: (principals: readonly string[], roles: readonly string[]) => string;
@@ -74,6 +76,10 @@ export declare const ACCESS_STRINGS: {
     removed: (principals: readonly string[], roles: readonly string[]) => string;
     undone: string;
     readOnly: string;
+    /** A note atop access set somewhere else, when the host gives no reason. */
+    managedElsewhere: string;
+    /** The note's link to where access is set, when the host doesn't name it. */
+    manageAccess: string;
     /** After `readOnly` when the host gives no reason. */
     readOnlyReason: string;
     /** Names the switch between open to everyone and only those listed. */

package/dist/access/strings.js

@@ -91,7 +91,9 @@ var ACCESS_STRINGS = {
 	removeFailed: (principal, roles) => `Couldn’t remove ${principal} from ${and(roles)}`,
 	grantFailed: (principals, roles) => `Couldn’t grant ${and(roles)} to ${and(principals)}`,
 	undoFailed: "Couldn’t undo the change",
-	/** Under a failed save; `reason` is the host's error message, when it gave one. */
+	/** Why a save failed, when the host gives no `errorMessage`. */
+	failedReason: "Something went wrong.",
+	/** Under a failed save; `reason` is the host's `errorMessage`, or `failedReason`. */
 	nothingChanged: (reason) => reason ? `${reason.replace(/\.?$/, ".")} Nothing changed.` : "Nothing changed.",
 	/** The toast after a grant. */
 	granted: (principals, roles) => `Granted ${and(roles)} to ${and(principals)}`,
@@ -99,6 +101,10 @@ var ACCESS_STRINGS = {
 	removed: (principals, roles) => `Removed ${and(principals)} from ${and(roles)}`,
 	undone: "Change undone",
 	readOnly: "View only.",
+	/** A note atop access set somewhere else, when the host gives no reason. */
+	managedElsewhere: "Access here is set somewhere else, so it can’t be changed here.",
+	/** The note's link to where access is set, when the host doesn't name it. */
+	manageAccess: "Manage access",
 	/** After `readOnly` when the host gives no reason. */
 	readOnlyReason: "Only people who manage access can make changes.",
 	/** Names the switch between open to everyone and only those listed. */

package/dist/ai/components/ChatMessageList.js

@@ -45,8 +45,8 @@ function ChatMessageList({ messages, allMessages, streamingMessage: streamingMes
 		const open = adapter.attachments?.onOpen;
 		return open ? open.bind(adapter.attachments) : void 0;
 	}, [adapter]);
-	const bottomRef = useRef(null);
 	const containerRef = useRef(null);
+	const contentRef = useRef(null);
 	const reasoningScrollRef = useRef(null);
 	const messageCount = messages.length;
 	const streamingText = streamingMessage?.content;
@@ -145,8 +145,25 @@ function ChatMessageList({ messages, allMessages, streamingMessage: streamingMes
 	]);
 	useEffect(() => {
 		if (!containerRef.current || !isNearBottomRef.current || isStreaming || !hadMessagesRef.current) return;
-		bottomRef.current?.scrollIntoView({ behavior: prefersReducedMotion() ? "auto" : "smooth" });
+		const el = containerRef.current;
+		el.scrollTo({
+			top: el.scrollHeight,
+			behavior: prefersReducedMotion() ? "auto" : "smooth"
+		});
 	}, [messageCount, isStreaming]);
+	useEffect(() => {
+		const content = contentRef.current;
+		if (!content || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			const el = containerRef.current;
+			if (el && isNearBottomRef.current && !hasQueuedMessages) {
+				el.scrollTop = el.scrollHeight;
+				lastScrollTopRef.current = el.scrollTop;
+			}
+		});
+		observer.observe(content);
+		return () => observer.disconnect();
+	}, [hasContent, hasQueuedMessages]);
 	if (messages.length === 0 && !streamingMessage && !hasQueuedMessages) return /* @__PURE__ */ jsxs("div", {
 		className: "chat-thread flex-1 overflow-y-auto flex flex-col bg-(--theme-panel-bg)",
 		children: [
@@ -170,6 +187,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage: streamingMes
 		className: "chat-thread flex-1 overflow-y-auto theme-scrollbar flex flex-col bg-(--theme-panel-bg)",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
+				ref: contentRef,
 				className: "w-full max-w-[var(--chat-column,50rem)] mx-auto pt-4 pb-6 flex-1 px-4",
 				children: [
 					/* @__PURE__ */ jsx(MessageRows, {
@@ -283,10 +301,7 @@ function ChatMessageList({ messages, allMessages, streamingMessage: streamingMes
 						}, msg.id);
 					}),
 					footer,
-					/* @__PURE__ */ jsx("div", {
-						ref: bottomRef,
-						className: "h-8"
-					})
+					/* @__PURE__ */ jsx("div", { className: "h-8" })
 				]
 			}),
 			!pinned && /* @__PURE__ */ jsx("div", {

package/dist/components/ConfirmModal.d.ts

@@ -23,9 +23,11 @@ export interface ConfirmModalProps {
     cancelLabel?: string | undefined;
     /** When false, the dialog stays open after a successful confirm. */
     closeOnConfirm?: boolean | undefined;
-    /** Which button has focus as it opens. Cancel for a destructive dialog, so a stray Enter
-     *  destroys nothing; the confirm button otherwise, so the keyboard answers at once. */
-    initialFocus?: 'cancel' | 'confirm' | undefined;
+    /** What has focus as it opens. With a field in the body, such as a name to type, the first
+     *  of them (`first-control`), so the reader types at once. Without one, Cancel for a
+     *  destructive dialog, so a stray Enter destroys nothing, and the confirm button otherwise,
+     *  so the keyboard answers at once. */
+    initialFocus?: 'cancel' | 'confirm' | 'first-control' | undefined;
     /** Work the host runs for it, such as a mutation already under way: the buttons wait, and
      *  the dialog can't be dismissed, as while its own handler runs. */
     pending?: boolean | undefined;

package/dist/components/ConfirmModal.js

@@ -5,14 +5,25 @@ import { Modal } from "./Modal.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ConfirmModal.tsx
+/** What the reader types or picks in, which takes focus ahead of the buttons. A checkbox or
+*  radio doesn't: a destructive dialog with one still opens on Cancel. Inputs a picker keeps
+*  out of the tab order, for its form value, aren't fields. */
+var FIELDS = [
+	"input:not([disabled]):not([type=\"hidden\"]):not([type=\"checkbox\"]):not([type=\"radio\"])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[role=\"combobox\"]:not([disabled]):not([aria-disabled=\"true\"])",
+	"[contenteditable=\"true\"]"
+].map((field) => `${field}:not([tabindex="-1"]):not([aria-hidden="true"])`).join(", ");
 /** Asks before an action: its title the question, its description what follows,
 *  and Cancel beside a confirm button named for the action. */
-function ConfirmModal({ open, onClose, title, description, children, confirmLabel, onConfirm, confirmDisabled = false, destructive = false, align = "top", cancelLabel, closeOnConfirm = true, initialFocus = destructive ? "cancel" : "confirm", pending: pendingProp = false, error, size = "md" }) {
+function ConfirmModal({ open, onClose, title, description, children, confirmLabel, onConfirm, confirmDisabled = false, destructive = false, align = "top", cancelLabel, closeOnConfirm = true, initialFocus, pending: pendingProp = false, error, size = "md" }) {
 	const { common } = useStrings();
 	const [running, setRunning] = useState(false);
 	const fired = useRef(false);
 	const cancelButton = useRef(null);
 	const confirmButton = useRef(null);
+	const bodyElement = useRef(null);
 	useEffect(() => {
 		if (open) fired.current = false;
 	}, [open]);
@@ -44,7 +55,11 @@ function ConfirmModal({ open, onClose, title, description, children, confirmLabe
 		size,
 		title,
 		description,
-		initialFocus: initialFocus === "cancel" ? cancelButton : confirmButton,
+		initialFocus: () => {
+			const button = (initialFocus === "cancel" || initialFocus !== "confirm" && destructive ? cancelButton : confirmButton).current;
+			if (initialFocus === "cancel" || initialFocus === "confirm") return button ?? true;
+			return bodyElement.current?.querySelector(FIELDS) ?? button ?? true;
+		},
 		footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
 			ref: cancelButton,
 			variant: "ghost",
@@ -61,7 +76,11 @@ function ConfirmModal({ open, onClose, title, description, children, confirmLabe
 			loading: pending,
 			children: confirmLabel
 		})] }),
-		children: body
+		children: body !== void 0 && /* @__PURE__ */ jsx("div", {
+			ref: bodyElement,
+			className: "contents",
+			children: body
+		})
 	});
 }
 /** Asks from anywhere, such as a menu row, without keeping a dialog's state by hand:

package/dist/components/CreateModal.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import { type ComboboxItems } from './comboboxItems.js';
 import type { MenuEntry, MenuSearch } from './MenuEntries.js';
+import { type ModalSize } from './Modal.js';
 interface CreateModalProps {
     open: boolean;
     onClose: () => void;
@@ -43,6 +44,9 @@ interface CreateModalProps {
     footerHint?: ReactNode;
     /** Why the last submit failed, at the footer's start, read out as it appears. */
     error?: ReactNode;
+    /** Its width, as `Modal`'s: `xl` for a long body such as a rich text editor. It narrows to
+     *  fit a small window. */
+    size?: ModalSize | undefined;
     /** Resolves true to close the modal, false to keep it open (e.g. on error). `modifier` is
      *  true when submitted with ⌘/Ctrl+Enter, so a host can create and then open what it made. */
     onSubmit: (name: string, description: string, favorite: boolean, how: {
@@ -50,7 +54,7 @@ interface CreateModalProps {
     }) => Promise<boolean>;
 }
 /** Submits on Enter in the name field or ⌘/Ctrl+Enter from anywhere in the panel. */
-export declare function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, typeMenuSearch, namePlaceholder, hideName, initialName, showDescription, descriptionPlaceholder, descriptionField, submitLabel, submittingLabel, validateName, sanitizeName, nameHint, children, properties, advanced, submitDisabled, hideSubmit, nameOptional, onNameChange, dirty, showFavorite, footerHint, error, onSubmit, }: CreateModalProps): import("react").JSX.Element;
+export declare function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, typeMenuSearch, namePlaceholder, hideName, initialName, showDescription, descriptionPlaceholder, descriptionField, submitLabel, submittingLabel, validateName, sanitizeName, nameHint, children, properties, advanced, submitDisabled, hideSubmit, nameOptional, onNameChange, dirty, showFavorite, footerHint, error, size, onSubmit, }: CreateModalProps): import("react").JSX.Element;
 /** Compact property pill with an on/off switch. */
 export declare function CreateModalSwitch({ label, checked, onCheckedChange, tooltip, }: {
     label: string;

package/dist/components/CreateModal.js

@@ -16,7 +16,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Toggle } from "@base-ui/react/toggle";
 //#region src/components/CreateModal.tsx
 /** Submits on Enter in the name field or ⌘/Ctrl+Enter from anywhere in the panel. */
-function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, typeMenuSearch, namePlaceholder, hideName = false, initialName, showDescription = true, descriptionPlaceholder, descriptionField, submitLabel, submittingLabel, validateName, sanitizeName, nameHint, children, properties, advanced, submitDisabled = false, hideSubmit = false, nameOptional = false, onNameChange, dirty = false, showFavorite = false, footerHint, error, onSubmit }) {
+function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, typeMenuSearch, namePlaceholder, hideName = false, initialName, showDescription = true, descriptionPlaceholder, descriptionField, submitLabel, submittingLabel, validateName, sanitizeName, nameHint, children, properties, advanced, submitDisabled = false, hideSubmit = false, nameOptional = false, onNameChange, dirty = false, showFavorite = false, footerHint, error, size = "lg", onSubmit }) {
 	const t = useStrings().modal;
 	const { common } = useStrings();
 	const submitText = submitLabel ?? common.create;
@@ -75,7 +75,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, typeMenuSea
 		open,
 		onClose,
 		"aria-label": `${submitText}: ${typeLabel}`,
-		size: "lg",
+		size,
 		dismissible: !isDirty,
 		initialFocus: () => nameRef.current ?? true,
 		onKeyDown: (e) => {

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;