@parallelworks/ui 0.81.0 → 0.82.1

package/dist/ai/components/ChatInput.js

@@ -207,7 +207,7 @@ function ChatInput({ onSend, disabled = false, placeholder, conversationId, onEd
 		className: "chat-composer-dock relative bg-(--theme-panel-bg) px-4 pt-2 pb-5",
 		...attachmentsAvailable ? dragHandlers : {},
 		children: [isDragging && /* @__PURE__ */ jsx(DragOverlay, { className: "rounded-2xl" }), /* @__PURE__ */ jsxs("div", {
-			className: "mx-auto w-full max-w-[var(--chat-column,50rem)] space-y-2 px-4",
+			className: "mx-auto w-full max-w-[var(--chat-column,50rem)] space-y-2 sm:px-4",
 			children: [notices, /* @__PURE__ */ jsxs("div", { children: [
 				activity && /* @__PURE__ */ jsx("div", {
 					className: "mb-2",

package/dist/ai/components/ChatMessage.js

@@ -108,7 +108,7 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 	if (hasParts && !message.content) {
 		const said = replyText(message);
 		return /* @__PURE__ */ jsxs("div", {
-			className: cx("group py-3 w-full", !flush && "px-4"),
+			className: cx("group py-3 w-full", !flush && "sm:px-4"),
 			children: [/* @__PURE__ */ jsx(AgentMessageParts, {
 				message: partsMessage,
 				isStreaming,
@@ -145,7 +145,7 @@ function ChatMessage({ message, allMessages, isStreaming = false, latest = false
 	const collapsed = !isUser && collapsible && !expanded && !isStreaming && !latest;
 	return /* @__PURE__ */ jsx("div", {
 		role: "none",
-		className: cx("group w-full", isUser ? "pt-8 pb-5" : "py-3", !flush && "px-4"),
+		className: cx("group w-full", isUser ? "pt-8 pb-5" : "py-3", !flush && "sm:px-4"),
 		children: isEditing ? /* @__PURE__ */ jsxs("div", {
 			className: "w-full",
 			children: [/* @__PURE__ */ jsx("textarea", {

package/dist/ai/components/agent/AgentMessageParts.js

@@ -283,7 +283,7 @@ function ToolCallBlock({ part, children }) {
 				}), /* @__PURE__ */ jsx(ResultBody, { part })]
 			}),
 			children && /* @__PURE__ */ jsx("div", {
-				className: "ml-5 mt-1.5 min-w-0",
+				className: "mt-1.5 min-w-0 sm:ml-5",
 				children
 			}),
 			!children && !isDiff && !expanded && part.status !== "waiting" && /* @__PURE__ */ jsx("div", {

package/dist/components/Avatar.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
 /** Who an avatar stands for. An agent's avatar is a rounded square, so its shape, and not only
@@ -51,7 +51,9 @@ export declare function avatarInitials(name: string | undefined, { twoLetters }?
  *  `--avatar-person-text`) and agents `--avatar-agent` (with `--avatar-agent-text`, and the
  *  edge `--avatar-agent-ring`). */
 export declare function Avatar({ src, name, kind, shape, colorKey, colorClassName, size: sizeProp, status, decorative, tooltip, className, }: AvatarProps): import("react").JSX.Element;
-export interface AvatarGroupProps {
+/** Any other span attribute and the ref reach the stack's element, so the group can be a
+ *  Tooltip's or a popover's direct child. */
+export interface AvatarGroupProps extends Omit<ComponentPropsWithRef<'span'>, 'children' | 'className'> {
     /** Avatars, each possibly wrapped, such as in a hover card. Each child counts as one. */
     children: ReactNode;
     /** Shows at most this many; the rest become a "+N" chip. */
@@ -77,4 +79,4 @@ export interface AvatarGroupProps {
 /** Overlapping avatars, such as a task's assignees or who is here, with a "+N" chip for the
  *  rest. Each avatar inside takes the group's size and a ring in the color behind it, which
  *  follows its shape, round or square. */
-export declare function AvatarGroup({ children, max, total, showOverflow, size, ring, ringColor, label, className, }: AvatarGroupProps): import("react").JSX.Element;
+export declare function AvatarGroup({ children, max, total, showOverflow, size, ring, ringColor, label, className, style, ...spanProps }: AvatarGroupProps): import("react").JSX.Element;

package/dist/components/Avatar.js

@@ -144,7 +144,7 @@ function formatNumber(n, locale) {
 /** Overlapping avatars, such as a task's assignees or who is here, with a "+N" chip for the
 *  rest. Each avatar inside takes the group's size and a ring in the color behind it, which
 *  follows its shape, round or square. */
-function AvatarGroup({ children, max, total, showOverflow = true, size = "sm", ring = true, ringColor, label, className }) {
+function AvatarGroup({ children, max, total, showOverflow = true, size = "sm", ring = true, ringColor, label, className, style, ...spanProps }) {
 	const { common } = useStrings();
 	const locale = useLocale();
 	const items = Children.toArray(children);
@@ -157,11 +157,15 @@ function AvatarGroup({ children, max, total, showOverflow = true, size = "sm", r
 	return /* @__PURE__ */ jsx(AvatarGroupContext, {
 		value: context,
 		children: /* @__PURE__ */ jsxs("span", {
+			...spanProps,
 			...label ? {
 				role: "group",
 				"aria-label": label
 			} : {},
-			style: { "--avatar-ring": ringColor ?? "var(--theme-panel-bg)" },
+			style: {
+				"--avatar-ring": ringColor ?? "var(--theme-panel-bg)",
+				...style
+			},
 			className: cx("inline-flex shrink-0 items-center", OVERLAP_CLASSES[size], className),
 			children: [shown, showOverflow && rest > 0 && /* @__PURE__ */ jsxs("span", {
 				className: cx("relative inline-flex shrink-0 items-center justify-center rounded-full bg-(--theme-muted-panel-bg) font-medium text-(--theme-muted-text-color) tabular-nums select-none", CHIP_SIZE_CLASSES[size], ring && "ring-2 ring-(--avatar-ring)"),

package/dist/components/CodeBlock.js

@@ -104,7 +104,7 @@ function CodeBlock({ code, language = "", title, label, filename, headerActions,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex h-9 shrink-0 items-center gap-2 pr-1.5 pl-4",
 			children: [/* @__PURE__ */ jsx("div", {
-				className: "min-w-0 flex-1 truncate text-xs text-(--theme-muted-text-color)",
+				className: cx("min-w-0 flex-1 truncate", title === void 0 ? "text-xs text-(--theme-muted-text-color)" : "text-[13px] font-medium text-(--theme-app)"),
 				children: heading
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "flex shrink-0 items-center gap-0.5",

package/dist/components/CopyButton.d.ts

@@ -40,12 +40,19 @@ export interface CopyCodeBlockProps {
     revealed?: boolean | undefined;
     defaultRevealed?: boolean | undefined;
     onRevealedChange?: ((revealed: boolean) => void) | undefined;
-    /** Breaks a long value across lines instead of scrolling it, such as a token. */
+    /** Breaks a long value across lines instead of scrolling it, such as a token in a block.
+     *  Default false: an inline token, key or ID stays on one line and scrolls inside. */
     wrap?: boolean | undefined;
+    /** A compact value in the line, such as a token shown once in a Callout: as wide as the
+     *  value, up to its container, where a longer one scrolls sideways on its one line. A quiet
+     *  surface reads on a panel and a tinted callout alike, and the buttons stay right after the
+     *  value, always shown. The copy confirms with its check alone, as the change shows there. */
+    inline?: boolean | undefined;
     className?: string | undefined;
 }
 /** A block of code, such as a command to run, with a button that copies it. The
  *  buttons show while the pointer is over the block or focus is in it, and always
- *  where there is no hover to reveal them. With `secret` it holds a value shown once,
- *  such as a new API key: masked until the eye shows it, and copied either way. */
-export declare function CopyCodeBlock({ text, label, children, secret, revealed: revealedProp, defaultRevealed, onRevealedChange, wrap, className, }: CopyCodeBlockProps): import("react").JSX.Element;
+ *  where there is no hover to reveal them. With `inline` it is a compact value in the line
+ *  instead, such as a token shown once, its buttons always beside it. With `secret` it
+ *  masks the value until the eye shows it, and copies it either way. */
+export declare function CopyCodeBlock({ text, label, children, secret, revealed: revealedProp, defaultRevealed, onRevealedChange, inline, wrap, className, }: CopyCodeBlockProps): import("react").JSX.Element;

package/dist/components/CopyButton.js

@@ -4,7 +4,7 @@ import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "../icons.js";
 import { useStrings } from "./Provider.js";
 import { useCopy } from "./useCopy.js";
 import { IconButton } from "./IconButton.js";
-import { useState } from "react";
+import { useEffectEvent, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/CopyButton.tsx
 /** The one copy control: a button that copies its text, turns into a check for a
@@ -40,12 +40,60 @@ function CopyButton({ text, label, quiet = false, showLabel = false, variant = s
 		onClick
 	});
 }
+var NO_ENDS = {
+	start: false,
+	end: false
+};
+function useHiddenEnds(active) {
+	const ref = useRef(null);
+	const [ends, setEnds] = useState(NO_ENDS);
+	const measureNow = () => {
+		const el = ref.current;
+		if (!el || !active) {
+			setEnds(NO_ENDS);
+			return;
+		}
+		const scrolled = Math.abs(el.scrollLeft);
+		const start = scrolled > 1;
+		const end = scrolled + el.clientWidth < el.scrollWidth - 1;
+		setEnds((was) => was.start === start && was.end === end ? was : {
+			start,
+			end
+		});
+	};
+	const measure = useEffectEvent(measureNow);
+	useLayoutEffect(() => {
+		measure();
+	});
+	useLayoutEffect(() => {
+		const el = ref.current;
+		if (!el || !active || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => measure());
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [active]);
+	return {
+		ref,
+		ends,
+		onScroll: measureNow
+	};
+}
+var FADE = "1.25rem";
+function fadeMask({ start, end }) {
+	if (!start && !end) return;
+	const image = `linear-gradient(to var(--fade-end, right), ${start ? `transparent, #000 ${FADE}` : "#000"}, ${end ? `#000 calc(100% - ${FADE}), transparent` : "#000"})`;
+	return {
+		maskImage: image,
+		WebkitMaskImage: image
+	};
+}
 var MASK = "•".repeat(24);
 /** A block of code, such as a command to run, with a button that copies it. The
 *  buttons show while the pointer is over the block or focus is in it, and always
-*  where there is no hover to reveal them. With `secret` it holds a value shown once,
-*  such as a new API key: masked until the eye shows it, and copied either way. */
-function CopyCodeBlock({ text, label, children, secret = false, revealed: revealedProp, defaultRevealed = false, onRevealedChange, wrap = false, className }) {
+*  where there is no hover to reveal them. With `inline` it is a compact value in the line
+*  instead, such as a token shown once, its buttons always beside it. With `secret` it
+*  masks the value until the eye shows it, and copies it either way. */
+function CopyCodeBlock({ text, label, children, secret = false, revealed: revealedProp, defaultRevealed = false, onRevealedChange, inline = false, wrap = false, className }) {
 	const { common: t } = useStrings();
 	const [ownRevealed, setOwnRevealed] = useState(defaultRevealed);
 	const revealed = revealedProp ?? ownRevealed;
@@ -63,6 +111,39 @@ function CopyCodeBlock({ text, label, children, secret = false, revealed: reveal
 		className: "sr-only",
 		children: t.hiddenValue
 	})] });
+	const scroller = useHiddenEnds(inline && !wrap);
+	const overflows = scroller.ends.start || scroller.ends.end;
+	const revealButton = secret && /* @__PURE__ */ jsx(IconButton, {
+		label: t.showValue,
+		icon: revealed ? /* @__PURE__ */ jsx(EyeIcon, {}) : /* @__PURE__ */ jsx(EyeOffIcon, {}),
+		pressed: revealed,
+		onClick: () => setRevealed(!revealed),
+		size: inline ? "xs" : "sm",
+		className: inline ? void 0 : cx("bg-(--theme-muted-panel-bg)", reveal)
+	});
+	if (inline) return /* @__PURE__ */ jsxs("span", {
+		className: cx("inline-flex max-w-full items-start gap-1 rounded-md border border-current/15 bg-(--theme-panel-bg)/70 py-px ps-2 pe-px align-middle", "has-[code:focus-visible]:outline-2 has-[code:focus-visible]:outline-offset-1 has-[code:focus-visible]:outline-(--theme-focus)", className),
+		children: [/* @__PURE__ */ jsx("code", {
+			ref: scroller.ref,
+			onScroll: scroller.onScroll,
+			...overflows ? {
+				tabIndex: 0,
+				role: "region",
+				"aria-label": label ?? t.codeOf("")
+			} : {},
+			style: fadeMask(scroller.ends),
+			className: cx("min-w-0 py-[3px] font-mono text-[0.8125rem] leading-[18px] text-(--theme-app)", "outline-none", "rtl:[--fade-end:left]", wrap ? "break-all whitespace-pre-wrap" : "overflow-x-auto whitespace-nowrap [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"),
+			children: shown
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "flex shrink-0 items-center",
+			children: [/* @__PURE__ */ jsx(CopyButton, {
+				text,
+				label,
+				size: "xs",
+				quiet: true
+			}), revealButton]
+		})]
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: cx("group/code relative", className),
 		children: [/* @__PURE__ */ jsx("pre", {
@@ -70,13 +151,7 @@ function CopyCodeBlock({ text, label, children, secret = false, revealed: reveal
 			children: shown
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "absolute top-2 right-2 flex items-center gap-1",
-			children: [secret && /* @__PURE__ */ jsx(IconButton, {
-				label: t.showValue,
-				icon: revealed ? /* @__PURE__ */ jsx(EyeIcon, {}) : /* @__PURE__ */ jsx(EyeOffIcon, {}),
-				pressed: revealed,
-				onClick: () => setRevealed(!revealed),
-				className: cx("bg-(--theme-muted-panel-bg)", reveal)
-			}), /* @__PURE__ */ jsx(CopyButton, {
+			children: [revealButton, /* @__PURE__ */ jsx(CopyButton, {
 				text,
 				label,
 				className: cx("bg-(--theme-muted-panel-bg)", reveal)

package/dist/components/CreateModal.js

@@ -12,7 +12,7 @@ import { Combobox } from "./Combobox.js";
 import { Modal } from "./Modal.js";
 import { Disclosure } from "./Disclosure.js";
 import { Switch } from "./Switch.js";
-import { useId, useRef, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Toggle } from "@base-ui/react/toggle";
 //#region src/components/CreateModal.tsx
@@ -50,7 +50,17 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, typeMenuSea
 	const hint = !nameError && name.trim() ? nameHint?.(name.trim()) : null;
 	const canSubmit = (hideName || nameOptional || name.trim().length > 0) && !nameError && !submitting && !submitDisabled;
 	const isDirty = !submitting && (interacted || name !== (initialName ?? "") || description !== "" || favorite || dirty);
-	const nameMissing = !hideName && !nameOptional && (!name.trim() || !!nameError) && (nameTouched || description !== "" || favorite || dirty);
+	const nameMissing = !hideName && !nameOptional && (!name.trim() || !!nameError) && nameTouched;
+	const focusInside = useRef(false);
+	const leaveCheck = useRef(void 0);
+	useEffect(() => () => clearTimeout(leaveCheck.current), []);
+	const checkLeft = () => {
+		focusInside.current = false;
+		clearTimeout(leaveCheck.current);
+		leaveCheck.current = setTimeout(() => {
+			if (!focusInside.current && document.hasFocus() && !nameRef.current?.value.trim()) setNameTouched(true);
+		});
+	};
 	const flashName = () => {
 		setNameTouched(true);
 		nameRef.current?.focus();
@@ -80,6 +90,9 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, typeMenuSea
 		size,
 		dismissible: !isDirty,
 		initialFocus: () => nameRef.current ?? true,
+		onFocus: () => {
+			focusInside.current = true;
+		},
 		onKeyDown: (e) => {
 			if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) handleSubmit(true);
 		},
@@ -160,7 +173,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, typeMenuSea
 								resizeName?.();
 							},
 							onBlur: (e) => {
-								if (!e.target.value.trim()) setNameTouched(true);
+								if (!e.target.value.trim()) checkLeft();
 							},
 							onKeyDown: (e) => {
 								if (e.key === "Enter" && !e.nativeEvent.isComposing && !e.metaKey && !e.ctrlKey) {

package/dist/components/Listbox.d.ts

@@ -6,7 +6,9 @@ export interface ListboxNavigationOptions<T> {
     onChoose: (item: T, index: number) => void;
     /** Called on Escape, such as to close the list until the text changes. */
     onDismiss?: (() => void) | undefined;
-    /** False while the list isn't shown: the keys are then the host's own. Default true. */
+    /** False while the list isn't shown: the keys are then the host's own. A list that hides
+     *  itself while empty passes false then too, or Escape dismisses what isn't there. Default
+     *  true. */
     open?: boolean | undefined;
     /** Past the end comes the start, and before the start the end. Default true. */
     loop?: boolean | undefined;
@@ -91,10 +93,17 @@ export interface ListboxOptionProps {
     inline?: boolean | undefined;
     /** Short muted text at the row's end, such as a key. */
     hint?: ReactNode;
+    /** In a list of choices that stay chosen, such as the labels on an issue: true shows the
+     *  check at the row's end and tells assistive technology, false leaves it unchecked. Leave
+     *  it out for a list that only acts. */
+    checked?: boolean | undefined;
+    /** The option opens more choices, such as a submenu or a next step: a chevron ends the row. */
+    submenu?: boolean | undefined;
     className?: string | undefined;
 }
-/** One option of a ListboxPanel: an icon, its label and description, and a hint at its end. */
-export declare function ListboxOption({ option, icon, label, description, inline, hint, className, }: ListboxOptionProps): import("react").JSX.Element;
+/** One option of a ListboxPanel: an icon, its label and description, and at its end a hint, a
+ *  check while it is chosen and a chevron when it opens more. */
+export declare function ListboxOption({ option, icon, label, description, inline, hint, checked, submenu, className, }: ListboxOptionProps): import("react").JSX.Element;
 /** Options under a heading in a ListboxPanel. */
 export declare function ListboxGroup({ label, children }: {
     label: ReactNode;

package/dist/components/Listbox.js

@@ -1,8 +1,9 @@
 import { cx } from "../cx.js";
+import { CheckIcon, ChevronRightIcon } from "../icons.js";
 import { panelClassName, panelItemClassName } from "./floating.js";
 import { Popover } from "./Popover.js";
 import "./comboboxItems.js";
-import { useEffect, useId, useState } from "react";
+import { Children, useEffect, useId, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Listbox.tsx
 /** The parts a highlighted list needs while focus stays on the box the reader types in, such
@@ -44,7 +45,14 @@ function useListboxNavigation({ items, onChoose, onDismiss, open = true, loop =
 	/** Handles a key the list owns, and says whether it did; leave the rest to the host. */
 	const handleKey = (event) => {
 		const composing = "nativeEvent" in event ? event.nativeEvent.isComposing : event.isComposing;
-		if (!shownOpen || composing) return false;
+		if (!open || composing) return false;
+		if (event.key === "Escape") {
+			if (!onDismiss) return false;
+			onDismiss();
+			event.preventDefault();
+			return true;
+		}
+		if (!shownOpen) return false;
 		const ctrlOnly = event.ctrlKey && !event.metaKey && !event.altKey;
 		switch (true) {
 			case event.key === "ArrowDown" || ctrlOnly && event.key === "n":
@@ -59,10 +67,6 @@ function useListboxNavigation({ items, onChoose, onDismiss, open = true, loop =
 			case homeEnd && event.key === "End":
 				setActive(step(count, -1));
 				break;
-			case event.key === "Escape":
-				if (!onDismiss) return false;
-				onDismiss();
-				break;
 			case event.key === "Enter" || chooseKeys.includes(event.key):
 				if (event.shiftKey || event.altKey || event.metaKey || event.ctrlKey) return false;
 				choose(shown);
@@ -110,7 +114,7 @@ function useListboxNavigation({ items, onChoose, onDismiss, open = true, loop =
 }
 /** The panel of a highlighted list that the reader drives from a box that keeps focus. */
 function ListboxPanel({ listProps, "aria-label": label, footer, empty, at, onDismiss, className, children }) {
-	const hasOptions = Array.isArray(children) ? children.some(Boolean) : Boolean(children);
+	const hasOptions = Children.toArray(children).length > 0;
 	const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 		id: listProps.id,
 		role: "listbox",
@@ -143,11 +147,17 @@ function ListboxPanel({ listProps, "aria-label": label, footer, empty, at, onDis
 		children: body
 	});
 }
-/** One option of a ListboxPanel: an icon, its label and description, and a hint at its end. */
-function ListboxOption({ option, icon, label, description, inline = false, hint, className }) {
+/** One option of a ListboxPanel: an icon, its label and description, and at its end a hint, a
+*  check while it is chosen and a chevron when it opens more. */
+function ListboxOption({ option, icon, label, description, inline = false, hint, checked, submenu = false, className }) {
+	const checkable = checked !== void 0;
 	return /* @__PURE__ */ jsxs("div", {
 		...option,
-		className: cx(panelItemClassName, inline && "items-baseline", className),
+		role: "option",
+		tabIndex: -1,
+		"aria-checked": checked,
+		"data-checked": checked || void 0,
+		className: cx(panelItemClassName, inline && "items-baseline", checked && "font-medium", className),
 		children: [
 			icon && /* @__PURE__ */ jsx("span", {
 				className: "flex shrink-0 items-center self-center",
@@ -163,12 +173,25 @@ function ListboxOption({ option, icon, label, description, inline = false, hint,
 					children: description
 				})]
 			}),
-			hint && /* @__PURE__ */ jsx("span", {
+			(hint || checkable || submenu) && /* @__PURE__ */ jsxs("span", {
 				className: "ml-auto flex h-[1lh] shrink-0 items-center gap-2 self-start pl-2",
-				children: /* @__PURE__ */ jsx("span", {
-					className: "text-xs tabular-nums text-(--theme-muted-text-color)",
-					children: hint
-				})
+				children: [
+					hint && /* @__PURE__ */ jsx("span", {
+						className: "text-xs tabular-nums text-(--theme-muted-text-color)",
+						children: hint
+					}),
+					checkable && (checked || hint) && /* @__PURE__ */ jsx("span", {
+						className: cx("flex items-center", hint && "w-3.5"),
+						children: checked && /* @__PURE__ */ jsx(CheckIcon, {
+							"aria-hidden": "true",
+							className: "size-3.5"
+						})
+					}),
+					submenu && /* @__PURE__ */ jsx(ChevronRightIcon, {
+						"aria-hidden": "true",
+						className: "size-3 opacity-60"
+					})
+				]
 			})
 		]
 	});

package/dist/components/PageHeader.d.ts

@@ -33,7 +33,9 @@ export interface PageHeaderProps {
  * toolbar. Under a `PageHeaderProvider` it renders nothing in place: the
  * shell's `PageHeaderBar` shows it, while the actions stay in the page's React
  * tree, with its context and state. Without a provider it renders the bar
- * itself, for a page with no shell.
+ * itself, for a page with no shell, with no fill of its own, so it shows the
+ * surface it sits on. A host that pins it gives its pinned wrapper the page's
+ * surface, so content scrolling under it is covered.
  *
  * Any component may render one, such as a form adding its Save button: the bar
  * shows the actions of all of them, outermost first, and the trail of the last

package/dist/components/PageHeader.js

@@ -42,7 +42,9 @@ function createRegionNodes() {
 * toolbar. Under a `PageHeaderProvider` it renders nothing in place: the
 * shell's `PageHeaderBar` shows it, while the actions stay in the page's React
 * tree, with its context and state. Without a provider it renders the bar
-* itself, for a page with no shell.
+* itself, for a page with no shell, with no fill of its own, so it shows the
+* surface it sits on. A host that pins it gives its pinned wrapper the page's
+* surface, so content scrolling under it is covered.
 *
 * Any component may render one, such as a form adding its Save button: the bar
 * shows the actions of all of them, outermost first, and the trail of the last
@@ -51,6 +53,7 @@ function createRegionNodes() {
 function PageHeader(props) {
 	const store = use(StoreContext);
 	if (!store) return props.hidden ? null : /* @__PURE__ */ jsx(HeaderLayout, {
+		inPlace: true,
 		breadcrumbs: props.breadcrumbs ?? [],
 		heading: props.heading ?? true,
 		titleActions: props.titleActions,
@@ -140,7 +143,7 @@ function Mount({ node }) {
 		className: "contents"
 	});
 }
-function HeaderLayout({ breadcrumbs, heading, titleActions, actions, toolbar, fit: sharedFit, compact = false, className }) {
+function HeaderLayout({ breadcrumbs, heading, titleActions, actions, toolbar, fit: sharedFit, compact = false, inPlace = false, className }) {
 	const { breadcrumbPin, navToggle } = useSlots();
 	const { list: t } = useStrings();
 	const [ownFit] = useState(() => new HeaderActionsFit());
@@ -153,7 +156,7 @@ function HeaderLayout({ breadcrumbs, heading, titleActions, actions, toolbar, fi
 	const moved = fit.menu();
 	const hasTrail = breadcrumbs.length > 0;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx("@container w-full shrink-0 bg-(--theme-app-bg)", className),
+		className: cx("@container w-full shrink-0", !inPlace && "bg-(--theme-app-bg)", className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			ref: setRow,
 			className: cx("flex items-center justify-between gap-4 border-b border-(--theme-border) px-4", compact ? "h-8" : "h-12"),

package/dist/components/SettingsCard.d.ts

@@ -17,7 +17,9 @@ export interface SettingsCardProps {
     children: ReactNode;
 }
 /** A page's settings, grouped: a titled panel of SettingRows, each ruled off from
- *  the next. Cards stack with room between them. */
+ *  the next. Cards stack with room between them. An error about one setting, such as its
+ *  Save failing, is its row's `error`; one about the whole card goes outside it, such as
+ *  an ErrorText under the card, since every child of the card is ruled off as a row. */
 export declare function SettingsCard({ title, description, action, actionAlign, headingLevel, overflowVisible, className, children, }: SettingsCardProps): import("react").JSX.Element;
 /** A heading between groups of rows inside a SettingsCard, a level below the card's title. */
 export declare function SettingsHeading({ children }: {
@@ -25,7 +27,7 @@ export declare function SettingsHeading({ children }: {
 }): import("react").JSX.Element;
 /** One setting in a SettingsCard: its name and help on the left, its control on
  *  the right, or under the name across the row with `fill`. */
-export declare function SettingRow({ label, htmlFor, helpText, fill, onClick, children, }: {
+export declare function SettingRow({ label, htmlFor, helpText, fill, onClick, error, children, }: {
     label: string;
     /** The control's id, so the name labels it. */
     htmlFor?: string | undefined;
@@ -35,5 +37,8 @@ export declare function SettingRow({ label, htmlFor, helpText, fill, onClick, ch
     /** Makes the whole row press its control, such as a switch. The control still
      *  handles its own press; stop it propagating there so it doesn't toggle twice. */
     onClick?: (() => void) | undefined;
+    /** An error about this setting, such as its Save failing: under the control, at its start,
+     *  announced, and describing the control that `htmlFor` names. */
+    error?: ReactNode;
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/components/SettingsCard.js

@@ -1,10 +1,13 @@
 import { cx } from "../cx.js";
-import { createContext, useContext } from "react";
+import { ErrorText } from "./Field.js";
+import { createContext, useContext, useId, useLayoutEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/SettingsCard.tsx
 var HeadingLevel = createContext(3);
 /** A page's settings, grouped: a titled panel of SettingRows, each ruled off from
-*  the next. Cards stack with room between them. */
+*  the next. Cards stack with room between them. An error about one setting, such as its
+*  Save failing, is its row's `error`; one about the whole card goes outside it, such as
+*  an ErrorText under the card, since every child of the card is ruled off as a row. */
 function SettingsCard({ title, description, action, actionAlign = "beside", headingLevel = 2, overflowVisible = false, className, children }) {
 	const Heading = `h${headingLevel}`;
 	return /* @__PURE__ */ jsx(HeadingLevel, {
@@ -40,7 +43,34 @@ function SettingsHeading({ children }) {
 }
 /** One setting in a SettingsCard: its name and help on the left, its control on
 *  the right, or under the name across the row with `fill`. */
-function SettingRow({ label, htmlFor, helpText, fill = false, onClick, children }) {
+function SettingRow({ label, htmlFor, helpText, fill = false, onClick, error, children }) {
+	const errorId = useId();
+	const hasError = error !== void 0 && error !== null && error !== false && error !== "";
+	useLayoutEffect(() => {
+		const control = hasError && htmlFor ? document.getElementById(htmlFor) : null;
+		if (!control) return;
+		const ids = (control.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean);
+		if (!ids.includes(errorId)) control.setAttribute("aria-describedby", [...ids, errorId].join(" "));
+		return () => {
+			const rest = (control.getAttribute("aria-describedby") ?? "").split(/\s+/).filter((id) => id && id !== errorId);
+			if (rest.length > 0) control.setAttribute("aria-describedby", rest.join(" "));
+			else control.removeAttribute("aria-describedby");
+		};
+	}, [
+		hasError,
+		htmlFor,
+		errorId
+	]);
+	const control = /* @__PURE__ */ jsx("div", {
+		className: cx("min-w-0", !fill && [
+			"flex items-center justify-end",
+			"max-md:has-[input:not([type=checkbox],[type=radio],[type=hidden],[type=range]),textarea,[role=combobox]]:justify-start",
+			"max-md:has-[input:not([type=checkbox],[type=radio],[type=hidden],[type=range]),textarea,[role=combobox]]:*:grow",
+			"max-md:[&_:is(input:not([type=checkbox],[type=radio],[type=hidden],[type=range]),textarea,[role=combobox])]:min-w-0",
+			"max-md:[&_:is(input:not([type=checkbox],[type=radio],[type=hidden],[type=range]),textarea,[role=combobox])]:flex-1"
+		]),
+		children
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		role: "none",
 		onClick,
@@ -55,10 +85,15 @@ function SettingRow({ label, htmlFor, helpText, fill = false, onClick, children
 				className: "text-xs leading-snug theme-muted-text",
 				children: helpText
 			})]
-		}), /* @__PURE__ */ jsx("div", {
-			className: cx("min-w-0", !fill && "flex items-center justify-end"),
-			children
-		})]
+		}), hasError ? /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col gap-y-2",
+			children: [control, /* @__PURE__ */ jsx(ErrorText, {
+				id: errorId,
+				size: "md",
+				className: "md:w-0 md:min-w-full",
+				children: error
+			})]
+		}) : control]
 	});
 }
 //#endregion

package/dist/components/Tooltip.js

@@ -1,7 +1,7 @@
 import { positionerClassName, tipClassName } from "./floating.js";
 import { usePopupContainer } from "./popupContainer.js";
 import { Kbd } from "./Kbd.js";
-import { cloneElement, createContext, use, useId, useState } from "react";
+import { cloneElement, createContext, use, useEffect, useId, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip } from "@base-ui/react/tooltip";
 //#region src/components/Tooltip.tsx
@@ -52,12 +52,44 @@ function skipUnclipped(open, details) {
 	const anchor = details.trigger;
 	if (open && anchor instanceof HTMLElement && anchor.hasAttribute("data-overflow-only") && anchor.scrollWidth <= anchor.clientWidth) details.cancel();
 }
+/** True from when the anchor's own popup, such as its menu, closes until the pointer leaves the
+*  anchor or focus does. Closing the popup hands focus back to the anchor, and a tip opening
+*  then would take the next Escape, meant for the dialog around it, and repeat a label the
+*  reader has just seen. */
+function useRestAfterPopup(anchor) {
+	const [resting, setResting] = useState(false);
+	useEffect(() => {
+		if (!anchor || typeof MutationObserver === "undefined") return;
+		let expanded = anchor.getAttribute("aria-expanded") === "true";
+		const observer = new MutationObserver(() => {
+			const now = anchor.getAttribute("aria-expanded") === "true";
+			if (expanded && !now) setResting(true);
+			else if (now) setResting(false);
+			expanded = now;
+		});
+		observer.observe(anchor, {
+			attributes: true,
+			attributeFilter: ["aria-expanded"]
+		});
+		const wake = () => setResting(false);
+		anchor.addEventListener("blur", wake);
+		anchor.addEventListener("pointerleave", wake);
+		return () => {
+			observer.disconnect();
+			anchor.removeEventListener("blur", wake);
+			anchor.removeEventListener("pointerleave", wake);
+		};
+	}, [anchor]);
+	return resting;
+}
 /** A visual hint for sighted pointer and keyboard users. The anchor still needs
 *  its own accessible name; `describesAnchor` also gives assistive technology the
 *  hint. Use InfoTip for content everyone must reach, such as on a touch screen. */
 function Tooltip$1({ content, children, side = "top", shortcut, disabled = false, overflowOnly = false, describesAnchor = false, ...anchorProps }) {
 	const handle = use(TooltipHandleContext);
 	const descriptionId = useId();
+	const [anchorElement, setAnchorElement] = useState(null);
+	const resting = useRestAfterPopup(anchorElement);
 	const payload = {
 		content,
 		shortcut,
@@ -75,7 +107,8 @@ function Tooltip$1({ content, children, side = "top", shortcut, disabled = false
 		...!handle && anchorProps.delay === void 0 && { delay: OPEN_DELAY },
 		handle: handle ?? void 0,
 		payload,
-		disabled: disabled || !content,
+		ref: setAnchorElement,
+		disabled: disabled || !content || resting,
 		"data-overflow-only": overflowOnly || void 0,
 		render: described ? cloneElement(anchor, { "aria-describedby": describedBy }) : children
 	});