@parallelworks/ui 0.78.0 → 0.80.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/Combobox.js

@@ -91,6 +91,11 @@ function Combobox$1(props) {
 	const list = useRef(null);
 	const uid = useId();
 	const [inputValue, setInputValue] = useState(null);
+	/** Empties the search, and tells a host that mirrors it. */
+	const clearQuery = (to = "") => {
+		if (inputValue) onQueryChange?.("");
+		setInputValue(to);
+	};
 	const [highlighted, setHighlighted] = useState(void 0);
 	const [startsOpen] = useState(open === void 0 && defaultOpen === true);
 	const [ownOpen, setOwnOpen] = useState(false);
@@ -152,7 +157,7 @@ function Combobox$1(props) {
 		}
 		if (next.length === chosen.length) return false;
 		setValues(next);
-		setInputValue("");
+		clearQuery();
 		return true;
 	};
 	const separators = props.multiple && props.creatable ? props.separators ?? [] : [];
@@ -173,11 +178,16 @@ function Combobox$1(props) {
 	};
 	const freeEntry = creatable && entries.flat.length === 0;
 	const [first] = entries.items;
-	const listItems = !created ? entries.items : first !== void 0 && "items" in first ? [{
+	const createLast = created?.action === true;
+	const listItems = !created ? entries.items : first !== void 0 && "items" in first ? createLast ? [...entries.items, {
+		label: "",
+		items: [created],
+		order: entries.items.length
+	}] : [{
 		label: "",
 		items: [created],
 		order: -1
-	}, ...entries.items] : [created, ...entries.items];
+	}, ...entries.items] : createLast ? [...entries.items, created] : [created, ...entries.items];
 	const selectedIcon = selected?.icon && (inputValue === null || inputValue === selected.label) ? selected.icon : null;
 	const input = /* @__PURE__ */ jsx(Combobox.Input, {
 		id: trigger ? void 0 : id,
@@ -227,34 +237,48 @@ function Combobox$1(props) {
 			})]
 		})]
 	}, rowProps.key);
-	const parts = trigger ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Tooltip, {
-		content: triggerTooltip,
-		children: /* @__PURE__ */ jsx(Combobox.Trigger, {
-			id,
-			"aria-label": ariaLabel || void 0,
-			"aria-labelledby": ariaLabelledBy,
-			"aria-describedby": ariaDescribedBy,
-			"aria-invalid": ariaInvalid || void 0,
-			"aria-required": ariaRequired || required || void 0,
-			render: trigger
-		})
-	}), /* @__PURE__ */ jsx(ListPopup, {
-		listRef: list,
-		empty: t.noOptionsFound,
-		statusGroups: entries.statusGroups,
-		query: inputValue ?? "",
-		header: /* @__PURE__ */ jsx("div", {
-			className: "border-b border-(--theme-border) p-1.5",
-			children: input
+	const labelId = `${uid}-label`;
+	const valueId = `${uid}-value`;
+	const named = Boolean(ariaLabel || ariaLabelledBy);
+	const parts = trigger ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		named && /* @__PURE__ */ jsxs(Fragment$1, { children: [ariaLabel && !ariaLabelledBy && /* @__PURE__ */ jsx("span", {
+			id: labelId,
+			hidden: true,
+			children: ariaLabel
+		}), /* @__PURE__ */ jsx("span", {
+			id: valueId,
+			hidden: true,
+			children: /* @__PURE__ */ jsx(Combobox.Value, { children: (value) => Array.isArray(value) ? value.map(entryLabel).join(", ") : entryLabel(value) })
+		})] }),
+		/* @__PURE__ */ jsx(Tooltip, {
+			content: triggerTooltip,
+			children: /* @__PURE__ */ jsx(Combobox.Trigger, {
+				id,
+				"aria-labelledby": named ? `${ariaLabelledBy || labelId} ${valueId}` : void 0,
+				"aria-describedby": ariaDescribedBy,
+				"aria-invalid": ariaInvalid || void 0,
+				"aria-required": ariaRequired || required || void 0,
+				render: trigger
+			})
 		}),
-		className: details ? "w-[min(36rem,var(--available-width))]" : "w-max min-w-[min(max(14rem,var(--anchor-width)),var(--available-width))] max-w-[min(28rem,var(--available-width))]",
-		sizer: details ? void 0 : /* @__PURE__ */ jsx(ListSizer, { entries: entries.flat }),
-		align,
-		loading: loading ? t.searching : void 0,
-		details: details?.(highlighted?.created ? void 0 : highlighted?.value),
-		collisionBoundary,
-		renderItem: itemRow
-	})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(ListPopup, {
+			listRef: list,
+			empty: t.noOptionsFound,
+			statusGroups: entries.statusGroups,
+			query: inputValue ?? "",
+			header: /* @__PURE__ */ jsx("div", {
+				className: "border-b border-(--theme-border) p-1.5",
+				children: input
+			}),
+			className: details ? "w-[min(36rem,var(--available-width))]" : "w-max min-w-[min(max(14rem,var(--anchor-width)),var(--available-width))] max-w-[min(28rem,var(--available-width))]",
+			sizer: details ? void 0 : /* @__PURE__ */ jsx(ListSizer, { entries: entries.flat }),
+			align,
+			loading: loading ? t.searching : void 0,
+			details: details?.(highlighted?.created ? void 0 : highlighted?.value),
+			collisionBoundary,
+			renderItem: itemRow
+		})
+	] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsxs(Combobox.InputGroup, {
 			"data-testid": "combobox",
 			className: cx(fieldClassName(size), freeEntry && "pr-2", className),
@@ -324,7 +348,7 @@ function Combobox$1(props) {
 		...open !== void 0 ? { open } : startsOpen ? { open: ownOpen } : {},
 		onOpenChange: (next) => {
 			setOwnOpen(next);
-			if (!next && (trigger || !props.multiple)) setInputValue(null);
+			if (!next && (trigger || !props.multiple)) clearQuery(null);
 			onOpenChange?.(next);
 		},
 		children: parts
@@ -343,7 +367,7 @@ function Combobox$1(props) {
 			const action = next.find((entry) => entry.action);
 			if (action) {
 				details.cancel();
-				setInputValue("");
+				clearQuery();
 				onCreate?.(String(action.value));
 				return;
 			}

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

@@ -10,7 +10,11 @@ export interface OpenMenuOptions {
     size?: MenuSize | undefined;
     /** As `MenuPopup`'s: classes on the menu and its submenus, such as a terminal's colors. */
     themeClassName?: string | undefined;
+    /** What else closes it, for a menu over something that moves under it, such as a
+     *  terminal's: a wheel outside the menu, the window losing focus, or the window resizing. */
+    closeOn?: readonly MenuCloseTrigger[] | undefined;
 }
+export type MenuCloseTrigger = 'wheel' | 'blur' | 'resize';
 /** Where a menu opens: an element, such as the button that opened it, or a pointer event,
  *  such as a right-click. An event with Shift held is left to the browser, whose own menu
  *  then shows; any other has its default prevented. */
@@ -29,6 +33,7 @@ export type OpenMenu = (at: MenuOpener, items: MenuEntry[], options?: OpenMenuOp
  */
 export declare function useContextMenu(): {
     openMenu: OpenMenu;
+    closeMenu: () => void;
     contextMenu: import("react").JSX.Element | null;
     openedBy: Element | null;
 };
@@ -40,5 +45,8 @@ export declare function ContextMenuProvider({ children }: {
 /** Opens the app's one shared menu: `openMenu(e, items)` from a right-click, or
  *  `openMenu(button, items)` under a button, which a second press closes. */
 export declare function useOpenMenu(): OpenMenu;
+/** Closes the app's shared menu, if it is open, for a host whose surface moves out from under
+ *  it in a way `closeOn` doesn't cover, such as a pane that switches. */
+export declare function useCloseMenu(): () => void;
 /** The element the shared menu is open under, so its button can say it's expanded. */
 export declare function useMenuOpenedBy(): Element | null;

package/dist/components/ContextMenu.js

@@ -3,7 +3,7 @@ import { MenuPopup } from "./Menu.js";
 import { isDev } from "../dev.js";
 import { MenuEntries, MenuFilter } from "./MenuEntries.js";
 import { Menu } from "@base-ui/react/menu";
-import { createContext, use, useCallback, useRef, useState } from "react";
+import { createContext, use, useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ContextMenu.tsx
 /**
@@ -44,6 +44,31 @@ function useContextMenu() {
 		setOpen(true);
 		return true;
 	}, [release]);
+	/** Closes the menu, if one is open, as Escape would. */
+	const closeMenu = useCallback(() => {
+		if (current.current) {
+			current.current = null;
+			setOpen(false);
+		}
+	}, []);
+	const closeOn = open ? opened?.closeOn : void 0;
+	useEffect(() => {
+		if (!closeOn?.length) return;
+		const onWheel = (event) => {
+			if (!(event.target instanceof Element && event.target.closest("[role=\"menu\"]"))) closeMenu();
+		};
+		const listeners = [];
+		if (closeOn.includes("wheel")) listeners.push(["wheel", onWheel]);
+		if (closeOn.includes("blur")) listeners.push(["blur", closeMenu]);
+		if (closeOn.includes("resize")) listeners.push(["resize", closeMenu]);
+		for (const [type, listener] of listeners) window.addEventListener(type, listener, {
+			capture: true,
+			passive: true
+		});
+		return () => {
+			for (const [type, listener] of listeners) window.removeEventListener(type, listener, { capture: true });
+		};
+	}, [closeOn, closeMenu]);
 	const onOpenChange = useCallback((next, details) => {
 		if (next) return;
 		const element = current.current?.element;
@@ -61,6 +86,7 @@ function useContextMenu() {
 	}, [release]);
 	return {
 		openMenu,
+		closeMenu,
 		contextMenu: opened && /* @__PURE__ */ jsx(MenuFilter, {
 			search: opened.search,
 			children: (query) => /* @__PURE__ */ jsx(Menu.Root, {
@@ -85,15 +111,19 @@ function useContextMenu() {
 }
 var OpenMenuContext = createContext(null);
 var OpenedByContext = createContext(null);
+var CloseMenuContext = createContext(null);
 /** The one menu every row, button and canvas below it opens through `useOpenMenu`, so none
 *  renders a menu of its own. `UIProvider` mounts it; nothing else needs to. */
 function ContextMenuProvider({ children }) {
-	const { openMenu, contextMenu, openedBy } = useContextMenu();
+	const { openMenu, closeMenu, contextMenu, openedBy } = useContextMenu();
 	return /* @__PURE__ */ jsx(OpenMenuContext, {
 		value: openMenu,
-		children: /* @__PURE__ */ jsxs(OpenedByContext, {
-			value: openedBy,
-			children: [children, contextMenu]
+		children: /* @__PURE__ */ jsx(CloseMenuContext, {
+			value: closeMenu,
+			children: /* @__PURE__ */ jsxs(OpenedByContext, {
+				value: openedBy,
+				children: [children, contextMenu]
+			})
 		})
 	});
 }
@@ -106,9 +136,15 @@ var warnNoProvider = () => {
 function useOpenMenu() {
 	return use(OpenMenuContext) ?? warnNoProvider;
 }
+var noMenu = () => {};
+/** Closes the app's shared menu, if it is open, for a host whose surface moves out from under
+*  it in a way `closeOn` doesn't cover, such as a pane that switches. */
+function useCloseMenu() {
+	return use(CloseMenuContext) ?? noMenu;
+}
 /** The element the shared menu is open under, so its button can say it's expanded. */
 function useMenuOpenedBy() {
 	return use(OpenedByContext);
 }
 //#endregion
-export { ContextMenuProvider, useContextMenu, useMenuOpenedBy, useOpenMenu };
+export { ContextMenuProvider, useCloseMenu, useContextMenu, useMenuOpenedBy, useOpenMenu };

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) => {