@parallelworks/ui 0.50.0 → 0.52.0

package/dist/components/ThemeEditor.js

@@ -2,12 +2,12 @@ import { cx } from "../cx.js";
 import { useStrings } from "./Provider.js";
 import { useCopy } from "./useCopy.js";
 import { Button } from "./Button.js";
+import { fieldBox } from "./fieldBox.js";
 import { parseColor, toHex } from "../theme/color.js";
 import { CODE_STYLES, DEFAULT_THEME, THEME_PRESETS, modeOf, parseTheme, schemeFor, serializeTheme } from "../theme/model.js";
 import { deriveTheme, generateTheme } from "../theme/derive.js";
 import { prefersWideGamut } from "../theme/index.js";
 import { Field } from "./Field.js";
-import { fieldBox } from "./fieldBox.js";
 import { Textarea } from "./Input.js";
 import { ColorInput } from "./ColorInput.js";
 import { Disclosure } from "./Disclosure.js";
@@ -32,7 +32,8 @@ function ThemeEditor({ value, onChange, mode, onModeChange, preference, onPrefer
 		setOwnMode(next);
 		onModeChange?.(next);
 	};
-	const scheme = schemeFor(value, editing);
+	const scheme = useMemo(() => schemeFor(value, editing), [value, editing]);
+	const serialized = useMemo(() => serializeTheme(value), [value]);
 	const seed = scheme.interface;
 	const update = (next) => onChange({
 		...value,
@@ -76,7 +77,7 @@ function ThemeEditor({ value, onChange, mode, onModeChange, preference, onPrefer
 						children: THEME_PRESETS.map((preset) => {
 							const native = preset.theme[editing] ? editing : preset.theme.light ? "light" : "dark";
 							const own = schemeFor(preset.theme, native).interface;
-							const current = serializeTheme(preset.theme) === serializeTheme(value);
+							const current = presetKey(preset.theme) === serialized;
 							return /* @__PURE__ */ jsxs(Button, {
 								size: "sm",
 								variant: current ? "primary" : "secondary",
@@ -201,12 +202,21 @@ function ThemeEditor({ value, onChange, mode, onModeChange, preference, onPrefer
 		})]
 	});
 }
+var presetKeys = /* @__PURE__ */ new WeakMap();
+var presetKey = (theme) => {
+	let key = presetKeys.get(theme);
+	if (key === void 0) {
+		key = serializeTheme(theme);
+		presetKeys.set(theme, key);
+	}
+	return key;
+};
 function Swatch({ colors }) {
 	return /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
 		className: "flex -space-x-1",
 		children: colors.map((c, i) => /* @__PURE__ */ jsx("span", {
-			className: "size-3 rounded-full border border-black/10",
+			className: "size-3 rounded-full border border-(--theme-border-strong)",
 			style: { backgroundColor: toHex(parseColor(c) ?? {
 				l: 0,
 				c: 0,
@@ -280,7 +290,7 @@ var CODE_SAMPLE = [
 /** The theme on a small page: a sidebar, a panel of text, a control, statuses and code. */
 function ThemePreview({ theme, mode }) {
 	const { theme: t } = useStrings();
-	const scheme = schemeFor(theme, mode);
+	const scheme = useMemo(() => schemeFor(theme, mode), [theme, mode]);
 	const style = useMemo(() => {
 		const generated = generateTheme(scheme, theme.code ? { code: theme.code } : {});
 		return {
@@ -294,7 +304,7 @@ function ThemePreview({ theme, mode }) {
 		"data-testid": "theme-preview",
 		style,
 		className: "flex min-h-80 overflow-hidden rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-sm text-(--theme-app) shadow-(--theme-shadow)",
-		children: [/* @__PURE__ */ jsx("nav", {
+		children: [/* @__PURE__ */ jsx("div", {
 			className: "flex w-32 shrink-0 flex-col gap-0.5 bg-(--theme-sidebar-bg) p-2",
 			children: t.previewNav.map((item, i) => /* @__PURE__ */ jsx("span", {
 				className: cx("rounded-md px-2 py-1.5", i === 1 ? "bg-(--theme-sidebar-active-bg) font-medium text-(--theme-sidebar-active-text)" : "text-(--theme-sidebar-text)"),
@@ -306,7 +316,7 @@ function ThemePreview({ theme, mode }) {
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col gap-2 rounded-lg border border-(--theme-border) bg-(--theme-panel-bg) p-3 shadow-(--theme-shadow-sm)",
 					children: [
-						/* @__PURE__ */ jsx("h3", {
+						/* @__PURE__ */ jsx("p", {
 							className: "font-semibold",
 							children: t.previewHeading
 						}),
@@ -318,13 +328,13 @@ function ThemePreview({ theme, mode }) {
 						/* @__PURE__ */ jsxs("div", {
 							className: "flex flex-wrap items-center gap-2",
 							children: [
-								/* @__PURE__ */ jsx("span", {
-									className: "rounded-full bg-(--theme-success-muted) px-2 py-0.5 text-xs text-(--theme-success)",
-									children: t.previewPassed
+								/* @__PURE__ */ jsxs("span", {
+									className: "inline-flex items-center gap-1.5 rounded-full bg-(--theme-success-muted) px-2 py-0.5 text-xs text-(--theme-success-text)",
+									children: [/* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-(--theme-success)" }), t.previewPassed]
 								}),
-								/* @__PURE__ */ jsx("span", {
-									className: "rounded-full bg-(--theme-error-muted) px-2 py-0.5 text-xs text-(--theme-error)",
-									children: t.previewFailed
+								/* @__PURE__ */ jsxs("span", {
+									className: "inline-flex items-center gap-1.5 rounded-full bg-(--theme-error-muted) px-2 py-0.5 text-xs text-(--theme-error-text)",
+									children: [/* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-(--theme-error)" }), t.previewFailed]
 								}),
 								/* @__PURE__ */ jsx("span", {
 									className: "text-(--theme-link) underline underline-offset-2",
@@ -337,7 +347,7 @@ function ThemePreview({ theme, mode }) {
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ jsx("span", {
-						className: cx(fieldBox({ size: "sm" }), "flex-1 cursor-default text-(--theme-placeholder) border-(--theme-border-strong)"),
+						className: cx(fieldBox({ size: "sm" }), "flex flex-1 cursor-default items-center text-(--theme-placeholder) border-(--theme-border-strong)"),
 						children: t.previewSearch
 					}), /* @__PURE__ */ jsx("span", {
 						className: "rounded-md bg-(--theme-accent) px-3 py-1.5 text-xs font-medium text-(--theme-accent-text)",

package/dist/components/Toast.d.ts

@@ -1,10 +1,18 @@
 import { type ReactNode } from 'react';
+import { type LinkTarget } from './AppLink.js';
 export type ToastTone = 'info' | 'success' | 'warning' | 'error';
-export interface ToastAction {
+/** Runs `onClick`, or with `href` is a link, such as to what the toast reports
+ *  on; either way the toast then closes. */
+export type ToastAction = {
     label: ReactNode;
-    /** Runs, then the toast closes. */
     onClick: () => void;
-}
+    href?: undefined;
+} | ({
+    label: ReactNode;
+    onClick?: undefined;
+} & LinkTarget & {
+    href: string;
+});
 export interface ToastOptions {
     /** Shows the toast in place of an open one with this id, rather than stacking another. */
     id?: string | undefined;

package/dist/components/Toast.js

@@ -1,13 +1,28 @@
 import { cx } from "../cx.js";
-import { CloseIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from "../icons.js";
 import { buttonClasses } from "./buttonClasses.js";
+import { CloseIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from "../icons.js";
 import { Loader } from "./Loader.js";
-import { toneText } from "./tone.js";
+import { toneIcon } from "./tone.js";
 import { useStrings } from "./Provider.js";
+import { AppLink } from "./AppLink.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useSyncExternalStore } from "react";
 import { Toast } from "@base-ui/react/toast";
 //#region src/components/Toast.tsx
+function actionFields(action) {
+	if (action.href === void 0) return {
+		actionProps: {
+			children: action.label,
+			onClick: action.onClick
+		},
+		link: void 0
+	};
+	const { onClick: _, ...link } = action;
+	return {
+		actionProps: void 0,
+		link
+	};
+}
 var manager = Toast.createToastManager();
 var TIMEOUT = {
 	info: 5e3,
@@ -18,21 +33,19 @@ var TIMEOUT = {
 };
 /** Everything a toast shows, from its kind's defaults and the options that override them. */
 function toastOptions(kind, message, options) {
-	const { action } = options;
+	const action = options.action && actionFields(options.action);
 	return {
 		type: kind,
 		title: options.title,
 		description: message,
 		timeout: options.timeout === false ? 0 : options.timeout ?? TIMEOUT[kind],
 		priority: kind === "error" ? "high" : "low",
-		actionProps: action && {
-			children: action.label,
-			onClick: action.onClick
-		},
+		actionProps: action?.actionProps,
 		data: {
 			kind,
 			icon: options.icon ?? true,
-			dismissible: options.dismissible ?? kind !== "loading"
+			dismissible: options.dismissible ?? kind !== "loading",
+			link: action?.link
 		}
 	};
 }
@@ -59,18 +72,17 @@ var toast = {
 				icon: true,
 				dismissible: true
 			};
+			const action = options.action && actionFields(options.action);
 			return {
 				...message === void 0 ? {} : { description: message },
 				..."title" in options ? { title: options.title } : {},
 				...options.timeout === void 0 ? {} : { timeout: options.timeout === false ? 0 : options.timeout },
-				...options.action === void 0 ? {} : { actionProps: {
-					children: options.action.label,
-					onClick: options.action.onClick
-				} },
+				...action ? { actionProps: action.actionProps } : {},
 				data: {
 					kind: data.kind,
 					icon: options.icon ?? data.icon,
-					dismissible: options.dismissible ?? data.dismissible
+					dismissible: options.dismissible ?? data.dismissible,
+					link: action ? action.link : data.link
 				}
 			};
 		});
@@ -149,18 +161,22 @@ function ToneIcon({ tone }) {
 	const Icon = ICONS[tone];
 	return /* @__PURE__ */ jsx(Icon, {
 		"aria-hidden": "true",
-		className: cx("mt-0.5 size-4 shrink-0", toneText[tone])
+		className: cx("mt-0.5 size-4 shrink-0", toneIcon[tone])
 	});
 }
+var actionClasses = buttonClasses({
+	variant: "outline",
+	size: "xs"
+});
 function ToastList() {
 	const { toasts } = Toast.useToastManager();
 	const { common } = useStrings();
 	return toasts.map((item) => {
-		const { kind = "info", icon = true, dismissible = true } = item.data ?? {};
+		const { kind = "info", icon = true, dismissible = true, link } = item.data ?? {};
 		return /* @__PURE__ */ jsx(Toast.Root, {
 			toast: item,
 			swipeDirection: ["up", "right"],
-			className: cx("[--gap:0.5rem] [--peek:0.5rem] [--scale:calc(max(0,1-(var(--toast-index)*0.05)))] [--height:var(--toast-frontmost-height,var(--toast-height))]", "[--offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--gap)+var(--toast-swipe-movement-y))]", "absolute inset-x-0 top-0 z-[calc(100-var(--toast-index))] h-(--height) origin-top select-none", "[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+var(--toast-index)*var(--peek)+(1-var(--scale))*var(--height)))_scale(var(--scale))]", "data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]", "data-starting-style:[transform:translateY(-150%)] data-ending-style:opacity-0 data-limited:opacity-0", "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)]", "data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]", "data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]", "rounded-lg border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-(--theme-shadow-lg) outline-none focus-visible:outline-2 focus-visible:outline-(--theme-link)", "[transition:transform_0.4s_cubic-bezier(0.22,1,0.36,1),opacity_0.4s,height_0.15s] motion-reduce:transition-none", "after:absolute after:inset-x-0 after:top-full after:h-[calc(var(--gap)+1px)] after:content-['']"),
+			className: cx("[--gap:0.5rem] [--peek:0.5rem] [--scale:calc(max(0,1-(var(--toast-index)*0.05)))] [--height:var(--toast-frontmost-height,var(--toast-height))]", "[--offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--gap)+var(--toast-swipe-movement-y))]", "absolute inset-x-0 top-0 z-[calc(100-var(--toast-index))] h-(--height) origin-top select-none", "[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+var(--toast-index)*var(--peek)+(1-var(--scale))*var(--height)))_scale(var(--scale))]", "data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]", "data-starting-style:[transform:translateY(-150%)] data-ending-style:opacity-0 data-limited:opacity-0", "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)]", "data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]", "data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]", "rounded-lg border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-(--theme-shadow-lg) outline-hidden focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-(--theme-focus)", "[transition:transform_0.4s_cubic-bezier(0.22,1,0.36,1),opacity_0.4s,height_0.15s] motion-reduce:transition-none", "after:absolute after:inset-x-0 after:top-full after:h-[calc(var(--gap)+1px)] after:content-['']"),
 			children: /* @__PURE__ */ jsxs(Toast.Content, {
 				className: "flex items-start gap-3 overflow-hidden p-3 transition-opacity duration-200 data-behind:opacity-0 data-expanded:opacity-100",
 				children: [
@@ -184,15 +200,24 @@ function ToastList() {
 					}),
 					item.actionProps && /* @__PURE__ */ jsx(Toast.Action, {
 						onClick: () => manager.close(item.id),
-						className: buttonClasses({
-							variant: "outline",
-							size: "xs"
-						})
+						className: actionClasses
+					}),
+					link && /* @__PURE__ */ jsx(AppLink, {
+						href: link.href,
+						reloadDocument: link.reloadDocument,
+						target: link.target,
+						onClick: () => manager.close(item.id),
+						className: actionClasses,
+						children: link.label
 					}),
 					dismissible && /* @__PURE__ */ jsx(Toast.Close, {
 						"aria-label": common.close,
-						className: "-m-1 shrink-0 cursor-pointer rounded-md p-1 text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app)",
-						children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
+						className: cx(buttonClasses({
+							variant: "ghost",
+							size: "sm",
+							iconOnly: true
+						}), "-m-1.5"),
+						children: /* @__PURE__ */ jsx(CloseIcon, {})
 					})
 				]
 			})

package/dist/components/buttonClasses.js

@@ -1,12 +1,12 @@
 import { cx } from "../cx.js";
 //#region src/components/buttonClasses.ts
-var base = "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md font-medium no-underline transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--theme-link) disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
+var base = "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md font-medium no-underline transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--theme-focus) disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
 var variants = {
 	primary: "bg-(--theme-accent) text-(--theme-accent-text) hover:not-disabled:not-aria-disabled:bg-(--theme-accent-hover)",
 	secondary: "border border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) hover:not-disabled:not-aria-disabled:bg-(--theme-hover)",
 	outline: "border border-(--theme-border) text-(--theme-muted-text-color) hover:not-disabled:not-aria-disabled:bg-(--theme-muted-panel-bg) hover:not-disabled:not-aria-disabled:text-(--theme-app) aria-pressed:border-(--theme-link) aria-pressed:text-(--theme-app) data-selected:border-(--theme-link) data-selected:text-(--theme-app) data-popup-open:bg-(--theme-muted-panel-bg) data-popup-open:text-(--theme-app)",
 	ghost: "text-(--theme-muted-text-color) hover:not-disabled:not-aria-disabled:bg-(--theme-muted-panel-bg) hover:not-disabled:not-aria-disabled:text-(--theme-app) aria-pressed:bg-(--theme-muted-panel-bg) aria-pressed:text-(--theme-link) data-selected:bg-(--theme-muted-panel-bg) data-selected:text-(--theme-link) data-popup-open:bg-(--theme-muted-panel-bg) data-popup-open:text-(--theme-app)",
-	danger: "bg-(--theme-error) text-white hover:not-disabled:not-aria-disabled:bg-(--theme-error)/90"
+	danger: "bg-(--theme-error-solid) text-white hover:not-disabled:not-aria-disabled:bg-(--theme-error-solid)/90"
 };
 var sizes = {
 	xs: "h-6 px-2 text-xs [&_svg]:size-3",

package/dist/components/comboboxItems.d.ts

@@ -1,4 +1,8 @@
 import type { ReactNode } from 'react';
+/** An option's row in a Select's or a Combobox's list, so both lists look alike: the icon, the
+ *  label over its description, and the check at the end. */
+export declare const pickerItemClassName: string;
+/** An option of a Select or a Combobox. */
 export interface ComboboxItem<Value = string> {
     value: Value;
     label: string;

package/dist/components/comboboxItems.js

@@ -1,4 +1,9 @@
+import { cx } from "../cx.js";
+import { panelItemClassName } from "./floating.js";
 //#region src/components/comboboxItems.ts
+/** An option's row in a Select's or a Combobox's list, so both lists look alike: the icon, the
+*  label over its description, and the check at the end. */
+var pickerItemClassName = cx(panelItemClassName, "data-selected:font-medium");
 function isComboboxGroup(item) {
 	return typeof item === "object" && "items" in item;
 }
@@ -7,4 +12,4 @@ function comboboxLeaves(items) {
 	return items.flatMap((item) => isComboboxGroup(item) ? item.items : [item]);
 }
 //#endregion
-export { comboboxLeaves, isComboboxGroup };
+export { comboboxLeaves, isComboboxGroup, pickerItemClassName };

package/dist/components/dismiss.d.ts

@@ -0,0 +1,12 @@
+interface CloseDetails {
+    reason: string;
+    event: Event;
+    cancel: () => void;
+}
+/** The `onOpenChange` of a modal or drawer that the host opens and closes:
+ *  Escape and a press outside close it unless it's not `dismissible`, and a
+ *  press on a toast never does, since the toast sits above the backdrop. */
+export declare function closeHandler(dismissible: boolean, onClose: () => void): (next: boolean, details: CloseDetails) => void;
+/** The row of a dialog's actions along its bottom edge, ruled off from its body. */
+export declare const dialogFooterClassName = "flex shrink-0 items-center justify-end gap-2 border-t border-(--theme-border) px-5 py-3";
+export {};

package/dist/components/dismiss.js

@@ -0,0 +1,19 @@
+import { pressedToast } from "./Toast.js";
+//#region src/components/dismiss.ts
+/** The `onOpenChange` of a modal or drawer that the host opens and closes:
+*  Escape and a press outside close it unless it's not `dismissible`, and a
+*  press on a toast never does, since the toast sits above the backdrop. */
+function closeHandler(dismissible, onClose) {
+	return (next, details) => {
+		if (next) return;
+		if (!dismissible && details.reason === "escape-key" || details.reason === "outside-press" && pressedToast(details.event)) {
+			details.cancel();
+			return;
+		}
+		onClose();
+	};
+}
+/** The row of a dialog's actions along its bottom edge, ruled off from its body. */
+var dialogFooterClassName = "flex shrink-0 items-center justify-end gap-2 border-t border-(--theme-border) px-5 py-3";
+//#endregion
+export { closeHandler, dialogFooterClassName };

package/dist/components/fieldBox.d.ts

@@ -9,6 +9,10 @@ export interface FieldBoxOptions {
      *  buttons beside it: focus, invalid and disabled then follow what is inside. */
     within?: boolean | undefined;
 }
+/** The keyboard focus ring of a control that isn't a box, such as a checkbox, switch or slider
+ *  thumb: an outline in the theme's focus color, which is solved for 3:1 on every surface a
+ *  control sits on, so it shows on a checked control as well as an empty one. */
+export declare const focusOutline = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus)";
 /** The box every input-like control draws: text inputs, textareas, and the triggers of
  *  pickers. Invalid follows `aria-invalid`, disabled follows `disabled` or `data-disabled`. */
 export declare function fieldBox({ size, multiline, padded, within, }?: FieldBoxOptions): string;

package/dist/components/fieldBox.js

@@ -16,9 +16,13 @@ var sizes = {
 		text: "text-sm"
 	}
 };
+/** The keyboard focus ring of a control that isn't a box, such as a checkbox, switch or slider
+*  thumb: an outline in the theme's focus color, which is solved for 3:1 on every surface a
+*  control sits on, so it shows on a checked control as well as an empty one. */
+var focusOutline = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus)";
 var base = "w-full min-w-0 rounded-md border border-(--theme-border) bg-(--theme-input-bg) text-(--theme-app) outline-none transition-colors placeholder:text-(--theme-placeholder)";
-var own = cx("focus-visible:border-(--theme-accent) focus-visible:ring-1 focus-visible:ring-(--theme-accent)", "aria-invalid:border-(--theme-error) aria-invalid:focus-visible:ring-(--theme-error)", "disabled:cursor-not-allowed disabled:bg-(--theme-input-disabled-bg) disabled:text-(--theme-placeholder)", "data-disabled:cursor-not-allowed data-disabled:bg-(--theme-input-disabled-bg) data-disabled:text-(--theme-placeholder)");
-var inside = cx("has-[:focus-visible]:border-(--theme-accent) has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-(--theme-accent)", "has-[[aria-invalid=true]]:border-(--theme-error) has-[[aria-invalid=true]:focus-visible]:ring-(--theme-error)", "has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-(--theme-input-disabled-bg) has-[input:disabled]:text-(--theme-placeholder)", "data-disabled:cursor-not-allowed data-disabled:bg-(--theme-input-disabled-bg) data-disabled:text-(--theme-placeholder)");
+var own = cx("focus-visible:border-(--theme-focus) focus-visible:ring-1 focus-visible:ring-(--theme-focus)", "aria-invalid:border-(--theme-error) aria-invalid:focus-visible:ring-(--theme-error)", "disabled:cursor-not-allowed disabled:bg-(--theme-input-disabled-bg) disabled:text-(--theme-placeholder)", "data-disabled:cursor-not-allowed data-disabled:bg-(--theme-input-disabled-bg) data-disabled:text-(--theme-placeholder)");
+var inside = cx("has-[:focus-visible]:border-(--theme-focus) has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-(--theme-focus)", "has-[[aria-invalid=true]]:border-(--theme-error) has-[[aria-invalid=true]:focus-visible]:ring-(--theme-error)", "has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-(--theme-input-disabled-bg) has-[input:disabled]:text-(--theme-placeholder)", "data-disabled:cursor-not-allowed data-disabled:bg-(--theme-input-disabled-bg) data-disabled:text-(--theme-placeholder)");
 /** The box every input-like control draws: text inputs, textareas, and the triggers of
 *  pickers. Invalid follows `aria-invalid`, disabled follows `disabled` or `data-disabled`. */
 function fieldBox({ size = "md", multiline = false, padded = true, within = false } = {}) {
@@ -26,4 +30,4 @@ function fieldBox({ size = "md", multiline = false, padded = true, within = fals
 	return cx(base, box.text, multiline ? box.minHeight : box.height, padded && box.px, padded && multiline && box.py, within ? inside : own);
 }
 //#endregion
-export { fieldBox };
+export { fieldBox, focusOutline };

package/dist/components/floating.d.ts

@@ -1,14 +1,14 @@
 /** Above dialogs and sticky chrome; hidden while its anchor is scrolled out of view. */
 export declare const positionerClassName = "z-(--layer-popover) outline-none data-anchor-hidden:invisible";
 /** A panel of choices: a menu, a select's list, a combobox's list. */
-export declare const panelClassName = "rounded-lg border border-(--theme-border) bg-(--theme-app-bg) text-sm text-(--theme-app) shadow-(--theme-shadow-lg) outline-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";
+export declare const panelClassName = "rounded-lg border border-(--theme-border) bg-(--theme-app-bg) text-sm text-(--theme-app) shadow-(--theme-shadow-lg) outline-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100";
 /** A row in a panel. */
 export declare const panelItemClassName = "flex w-full cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-left outline-none data-highlighted:bg-(--theme-hover) data-highlighted:text-(--theme-app) data-disabled:cursor-not-allowed data-disabled:opacity-50";
 /** A tooltip's or infotip's small inverted surface. */
-export declare const tipClassName = "rounded-md bg-(--theme-app) px-2 py-1 text-xs text-(--theme-app-bg) shadow-(--theme-shadow) whitespace-pre-line break-words data-instant:transition-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";
+export declare const tipClassName = "rounded-md bg-(--theme-app) px-2 py-1 text-xs text-(--theme-app-bg) shadow-(--theme-shadow) whitespace-pre-line break-words data-instant:transition-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100";
 export declare const tipArrowClassName = "size-2 rotate-45 bg-(--theme-app) data-[side=top]:-bottom-1 data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1";
 /** A hover card's surface; the card sets its own width and padding. */
-export declare const cardClassName = "overflow-hidden rounded-xl border border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) shadow-(--theme-shadow-lg) outline-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";
+export declare const cardClassName = "overflow-hidden rounded-xl border border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) shadow-(--theme-shadow-lg) outline-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100";
 /** Where a popup opens: under an element, such as the button that opened it, or
  *  at a pointer event's point, which then moves with the element it landed on. */
 export type FloatingAnchor = Element | {

package/dist/components/floating.js

@@ -1,7 +1,7 @@
 //#region src/components/floating.ts
 /** Above dialogs and sticky chrome; hidden while its anchor is scrolled out of view. */
 var positionerClassName = "z-(--layer-popover) outline-none data-anchor-hidden:invisible";
-var enterExit = "origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";
+var enterExit = "origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100";
 /** A panel of choices: a menu, a select's list, a combobox's list. */
 var panelClassName = `rounded-lg border border-(--theme-border) bg-(--theme-app-bg) text-sm text-(--theme-app) shadow-(--theme-shadow-lg) outline-none ${enterExit}`;
 /** A row in a panel. */

package/dist/components/markdownCodeBreaks.js

@@ -1,16 +1,15 @@
+import { pathPieces } from "./pathBreaks.js";
 //#region src/components/markdownCodeBreaks.ts
-var BREAK_AFTER = /(?<=[/])/;
 function withBreaks(text) {
-	const pieces = text.split(BREAK_AFTER);
 	const out = [];
-	pieces.forEach((piece, i) => {
+	pathPieces(text).forEach((piece, i) => {
 		if (i > 0) out.push({
 			type: "element",
 			tagName: "wbr",
 			properties: {},
 			children: []
 		});
-		if (piece !== "") out.push({
+		out.push({
 			type: "text",
 			value: piece
 		});

package/dist/components/pageHeaderStore.d.ts

@@ -0,0 +1,41 @@
+/** One step of the trail to the current page. */
+export interface Breadcrumb {
+    /** Empty while the name is still loading: the bar shows a placeholder. */
+    label: string;
+    href?: string | undefined;
+}
+export type PageHeaderRegion = 'titleActions' | 'actions' | 'toolbar';
+/** The nodes a declaration portals its regions into. They are created with the
+ *  declaration, before any bar exists, so its content renders on the first pass
+ *  and keeps its state when the bar unmounts or moves. */
+export type RegionNodes = Readonly<Record<PageHeaderRegion, HTMLElement>>;
+export interface Declaration {
+    breadcrumbs: readonly Breadcrumb[] | undefined;
+    hidden: boolean;
+    nodes: RegionNodes | null;
+    fills: Readonly<Record<PageHeaderRegion, boolean>>;
+}
+export interface PageHeaderSnapshot {
+    breadcrumbs: readonly Breadcrumb[];
+    hidden: boolean;
+    titleActions: readonly HTMLElement[];
+    actions: readonly HTMLElement[];
+    toolbar: readonly HTMLElement[];
+}
+export declare function sameCrumbs(a: readonly Breadcrumb[] | undefined, b: readonly Breadcrumb[] | undefined): boolean;
+/**
+ * Holds what each mounted PageHeader declares, keyed by its render order. The
+ * bar reads one merged snapshot through useSyncExternalStore, so a page
+ * changing its header re-renders the bar alone, never the app under the
+ * provider.
+ */
+export declare class PageHeaderStore {
+    private declarations;
+    private listeners;
+    private snapshot;
+    subscribe: (listener: () => void) => (() => void);
+    getSnapshot: () => PageHeaderSnapshot;
+    set(order: number, declaration: Declaration): void;
+    delete(order: number): void;
+    private publish;
+}

package/dist/components/pageHeaderStore.js

@@ -0,0 +1,67 @@
+//#region src/components/pageHeaderStore.ts
+var NO_NODES = [];
+var NO_CRUMBS = [];
+var EMPTY = {
+	breadcrumbs: NO_CRUMBS,
+	hidden: false,
+	titleActions: NO_NODES,
+	actions: NO_NODES,
+	toolbar: NO_NODES
+};
+function sameCrumbs(a, b) {
+	if (a === b) return true;
+	if (!a || !b || a.length !== b.length) return false;
+	return a.every((crumb, i) => crumb.label === b[i]?.label && crumb.href === b[i]?.href);
+}
+function sameDeclaration(a, b) {
+	return sameCrumbs(a.breadcrumbs, b.breadcrumbs) && a.hidden === b.hidden && a.nodes === b.nodes && a.fills.titleActions === b.fills.titleActions && a.fills.actions === b.fills.actions && a.fills.toolbar === b.fills.toolbar;
+}
+function sameNodes(a, b) {
+	return a.length === b.length && a.every((node, i) => node === b[i]);
+}
+/**
+* Holds what each mounted PageHeader declares, keyed by its render order. The
+* bar reads one merged snapshot through useSyncExternalStore, so a page
+* changing its header re-renders the bar alone, never the app under the
+* provider.
+*/
+var PageHeaderStore = class {
+	declarations = /* @__PURE__ */ new Map();
+	listeners = /* @__PURE__ */ new Set();
+	snapshot = EMPTY;
+	subscribe = (listener) => {
+		this.listeners.add(listener);
+		return () => {
+			this.listeners.delete(listener);
+		};
+	};
+	getSnapshot = () => this.snapshot;
+	set(order, declaration) {
+		const prev = this.declarations.get(order);
+		if (prev && sameDeclaration(prev, declaration)) return;
+		this.declarations.set(order, declaration);
+		this.publish();
+	}
+	delete(order) {
+		if (this.declarations.delete(order)) this.publish();
+	}
+	publish() {
+		const ordered = [...this.declarations.entries()].sort(([a], [b]) => a - b).map(([, declaration]) => declaration);
+		const regionNodes = (region, prev) => {
+			const next = ordered.flatMap((d) => d.nodes && d.fills[region] ? [d.nodes[region]] : []);
+			return sameNodes(next, prev) ? prev : next;
+		};
+		const trail = ordered.findLast((d) => d.breadcrumbs !== void 0)?.breadcrumbs ?? NO_CRUMBS;
+		const prev = this.snapshot;
+		this.snapshot = {
+			breadcrumbs: sameCrumbs(trail, prev.breadcrumbs) ? prev.breadcrumbs : trail,
+			hidden: ordered.some((d) => d.hidden),
+			titleActions: regionNodes("titleActions", prev.titleActions),
+			actions: regionNodes("actions", prev.actions),
+			toolbar: regionNodes("toolbar", prev.toolbar)
+		};
+		for (const listener of this.listeners) listener();
+	}
+};
+//#endregion
+export { PageHeaderStore, sameCrumbs };

package/dist/components/pathBreaks.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+/** The pieces of `text` with a break allowed after each, split after each path
+ *  separator; one piece when it holds none. */
+export declare function pathPieces(text: string): string[];
+/** `node` with a place to wrap after each path separator in its text: a string,
+ *  or an element, such as a link, whose child is one. Deeper content is left as
+ *  it is. */
+export declare function withPathBreaks(node: ReactNode): ReactNode;

package/dist/components/pathBreaks.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, Fragment as Fragment$1, cloneElement, isValidElement } from "react";
+//#region src/components/pathBreaks.tsx
+var SEPARATOR = /(?<=[/\\])(?![/\\])/;
+/** The pieces of `text` with a break allowed after each, split after each path
+*  separator; one piece when it holds none. */
+function pathPieces(text) {
+	return text.split(SEPARATOR).filter((piece) => piece !== "");
+}
+function breakText(text) {
+	const pieces = pathPieces(text);
+	if (pieces.length < 2) return text;
+	return pieces.map((piece, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [piece, i < pieces.length - 1 && /* @__PURE__ */ jsx("wbr", {})] }, i));
+}
+/** `node` with a place to wrap after each path separator in its text: a string,
+*  or an element, such as a link, whose child is one. Deeper content is left as
+*  it is. */
+function withPathBreaks(node) {
+	if (typeof node === "string") return breakText(node);
+	if (isValidElement(node)) {
+		const inner = node.props.children;
+		return typeof inner === "string" ? cloneElement(node, void 0, breakText(inner)) : node;
+	}
+	if (Array.isArray(node)) return Children.map(node, (child) => typeof child === "string" ? breakText(child) : child);
+	return node;
+}
+//#endregion
+export { pathPieces, withPathBreaks };

package/dist/components/segmented.js

@@ -5,7 +5,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", fill ? "grid auto-cols-fr grid-flow-col" : "inline-flex"));
 }
 function segmentClassName(current, { fill, iconOnly }) {
-	return cx("relative flex min-w-0 cursor-pointer items-center justify-center rounded-md font-medium transition-colors duration-150 outline-none focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--theme-link) data-disabled:cursor-not-allowed data-disabled:opacity-50", current ? "bg-(--theme-panel-bg) theme-text shadow-sm ring-1 ring-(--theme-border)" : "theme-muted-text hover:theme-text hover:bg-(--theme-hover)", iconOnly ? "h-8 w-8" : cx("h-7 gap-1.5 text-[13px]", fill ? "px-1.5" : "px-2.5"));
+	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) theme-text shadow-sm ring-1 ring-(--theme-border)" : "theme-muted-text hover:theme-text hover:bg-(--theme-hover)", iconOnly ? "h-8 w-8" : cx("h-7 gap-1.5 text-[13px]", fill ? "px-1.5" : "px-2.5"));
 }
 function SegmentContent({ label, icon, badge, iconOnly }) {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/shortcutKey.d.ts

@@ -1,4 +1,5 @@
-/** Guards page shortcuts from firing inside inputs, terminals, editors, and dialogs. */
+/** Guards page shortcuts from firing inside text fields, editors, dialogs, and
+ *  widgets with typeahead such as menus, lists and trees. */
 export declare function isTextEntryContext(target: EventTarget | null): boolean;
 /** Calls `onPress` on a single key, such as F to filter, unless the key goes to a text field. */
 export declare function useShortcutKey(key: string | undefined, onPress: () => void): void;