@parallelworks/ui 0.51.0 → 0.53.0

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 { 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
 				}
 			};
 		});
@@ -152,15 +164,19 @@ function ToneIcon({ 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,6 +1,6 @@
 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)",

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

@@ -1,2 +1,7 @@
 /** A ref that focuses a field once, when it mounts; stable so re-renders never move focus back. */
 export declare function focusOnMount(element: HTMLElement | null): void;
+/** Starts telling keyboard focus from pointer focus, for `focusCameFromKeyboard`. Call it once
+ *  something needs to know, such as when a component that asks mounts. */
+export declare function trackFocusModality(): void;
+/** Whether the focus that just landed came from the keyboard rather than a press. */
+export declare function focusCameFromKeyboard(): boolean;

package/dist/components/focus.js

@@ -3,5 +3,25 @@
 function focusOnMount(element) {
 	element?.focus();
 }
+var fromKeyboard = false;
+var listening = false;
+function onKeyDown(event) {
+	if (!event.metaKey && !event.ctrlKey && !event.altKey) fromKeyboard = true;
+}
+function onPointerDown() {
+	fromKeyboard = false;
+}
+/** Starts telling keyboard focus from pointer focus, for `focusCameFromKeyboard`. Call it once
+*  something needs to know, such as when a component that asks mounts. */
+function trackFocusModality() {
+	if (listening || typeof document === "undefined") return;
+	listening = true;
+	document.addEventListener("keydown", onKeyDown, true);
+	document.addEventListener("pointerdown", onPointerDown, true);
+}
+/** Whether the focus that just landed came from the keyboard rather than a press. */
+function focusCameFromKeyboard() {
+	return fromKeyboard;
+}
 //#endregion
-export { focusOnMount };
+export { focusCameFromKeyboard, focusOnMount, trackFocusModality };

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;

package/dist/components/shortcutKey.js

@@ -1,11 +1,27 @@
 import { useEffect, useRef } from "react";
 //#region src/components/shortcutKey.ts
-/** Guards page shortcuts from firing inside inputs, terminals, editors, and dialogs. */
+var KEYS_ARE_INPUT = [
+	".xterm",
+	".monaco-editor",
+	".cm-editor",
+	"select",
+	"[role=\"dialog\"]",
+	"[role=\"alertdialog\"]",
+	"[role=\"textbox\"]",
+	"[role=\"combobox\"]",
+	"[role=\"listbox\"]",
+	"[role=\"menu\"]",
+	"[role=\"menubar\"]",
+	"[role=\"tree\"]",
+	"[role=\"grid\"]"
+].join(", ");
+/** Guards page shortcuts from firing inside text fields, editors, dialogs, and
+*  widgets with typeahead such as menus, lists and trees. */
 function isTextEntryContext(target) {
 	const el = target;
 	if (!el) return false;
 	if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.isContentEditable) return true;
-	return Boolean(el.closest?.(".xterm, .monaco-editor, .cm-editor, [role=\"dialog\"]"));
+	return Boolean(el.closest?.(KEYS_ARE_INPUT));
 }
 /** Calls `onPress` on a single key, such as F to filter, unless the key goes to a text field. */
 function useShortcutKey(key, onPress) {
@@ -14,6 +30,7 @@ function useShortcutKey(key, onPress) {
 	useEffect(() => {
 		if (!key) return;
 		const onKey = (e) => {
+			if (e.defaultPrevented || e.repeat || e.isComposing) return;
 			if (e.metaKey || e.ctrlKey || e.altKey || e.key.toLowerCase() !== key.toLowerCase()) return;
 			if (isTextEntryContext(e.target)) return;
 			e.preventDefault();

package/dist/components/splitter.js

@@ -67,7 +67,7 @@ function useSplitter({ width, onWidthChange, min, max, side, defaultWidth, label
 			onPointerCancel: onPointerUp,
 			onKeyDown,
 			...defaultWidth === void 0 ? {} : { onDoubleClick: () => onWidthChange(defaultWidth) },
-			className: cx("absolute inset-y-0 z-10 w-1.5 cursor-col-resize touch-none transition-colors focus-visible:bg-(--theme-link) focus-visible:outline-none", side === "left" ? "-left-0.75" : "-right-0.75", live === null ? "hover:bg-(--theme-border)" : "bg-(--theme-accent)")
+			className: cx("absolute inset-y-0 z-10 w-1.5 cursor-col-resize touch-none transition-colors focus-visible:bg-(--theme-focus) focus-visible:outline-none", side === "left" ? "-left-0.75" : "-right-0.75", live === null ? "hover:bg-(--theme-border)" : "bg-(--theme-accent)")
 		}
 	};
 }

package/dist/components/useCssIsDark.js

@@ -1,25 +1,32 @@
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
 //#region src/components/useCssIsDark.ts
+var DARK = "(prefers-color-scheme: dark)";
 /** Whether the host's CSS color-scheme reads dark, falling back to the system preference. */
 function readIsDark() {
+	if (typeof document === "undefined") return false;
 	const scheme = getComputedStyle(document.documentElement).colorScheme;
 	const dark = scheme.includes("dark");
 	if (dark !== scheme.includes("light")) return dark;
 	if (typeof window.matchMedia !== "function") return false;
-	return window.matchMedia("(prefers-color-scheme: dark)").matches;
+	return window.matchMedia(DARK).matches;
 }
-/**
-* Follows the host's CSS color-scheme, the same signal the log viewer's
-* light-dark() palette uses — no provider API involved. For the rare concrete
-* pick (editor themes, image variants) the tokens cannot express.
-*/
-function useCssIsDark() {
-	const [isDark, setIsDark] = useState(readIsDark);
-	useEffect(() => {
-		const update = () => setIsDark(readIsDark());
-		const media = typeof window.matchMedia === "function" ? window.matchMedia("(prefers-color-scheme: dark)") : void 0;
-		media?.addEventListener("change", update);
-		const observer = new MutationObserver(update);
+var listeners = /* @__PURE__ */ new Set();
+var current = false;
+var stop;
+function refresh() {
+	const next = readIsDark();
+	if (next !== current) {
+		current = next;
+		for (const listener of listeners) listener();
+	}
+}
+function subscribe(listener) {
+	listeners.add(listener);
+	if (!stop) {
+		current = readIsDark();
+		const media = typeof window.matchMedia === "function" ? window.matchMedia(DARK) : void 0;
+		media?.addEventListener("change", refresh);
+		const observer = new MutationObserver(refresh);
 		observer.observe(document.documentElement, {
 			attributes: true,
 			attributeFilter: [
@@ -28,12 +35,27 @@ function useCssIsDark() {
 				"data-theme"
 			]
 		});
-		return () => {
-			media?.removeEventListener("change", update);
+		stop = () => {
+			media?.removeEventListener("change", refresh);
 			observer.disconnect();
 		};
-	}, []);
-	return isDark;
+	}
+	return () => {
+		listeners.delete(listener);
+		if (listeners.size === 0) {
+			stop?.();
+			stop = void 0;
+		}
+	};
+}
+var snapshot = () => stop ? current : readIsDark();
+/**
+* Follows the host's CSS color-scheme, the same signal the log viewer's
+* light-dark() palette uses — no provider API involved. For the rare concrete
+* pick (editor themes, image variants) the tokens cannot express.
+*/
+function useCssIsDark() {
+	return useSyncExternalStore(subscribe, snapshot, () => false);
 }
 //#endregion
 export { readIsDark, useCssIsDark };