@parallelworks/ui 0.51.0 → 0.52.0

package/dist/components/PageHeader.js

@@ -1,181 +1,303 @@
 import { cx } from "../cx.js";
-import { AddIcon, ChevronRightIcon, EditIcon, MoreIcon } from "../icons.js";
-import { keyedByContent } from "./keys.js";
 import { buttonClasses } from "./buttonClasses.js";
+import { ChevronRightIcon, MoreIcon } from "../icons.js";
+import { keyedByContent } from "./keys.js";
 import { Tooltip } from "./Tooltip.js";
-import { useLink, useSlots, useStrings } from "./Provider.js";
+import { useSlots, useStrings } from "./Provider.js";
+import { AppLink } from "./AppLink.js";
 import { ActionMenu } from "./ActionMenu.js";
-import { useBreadcrumb } from "./Breadcrumbs.js";
+import { Skeleton } from "./Skeleton.js";
+import { PageHeaderStore } from "./pageHeaderStore.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, useLayoutEffect } from "react";
+import { createContext, use, useCallback, useLayoutEffect, useState, useSyncExternalStore } from "react";
 import { createPortal } from "react-dom";
 //#region src/components/PageHeader.tsx
-var headerActionButtonClasses = buttonClasses({
-	variant: "ghost",
-	size: "xs",
-	iconOnly: true
-});
-var headerAddButtonClasses = buttonClasses({
-	variant: "outline",
-	size: "xs"
-});
-/** With menu, the plus opens a chooser; otherwise navigates to or calls the
-* single action. `word` is the visible verb; `label` stays the full action for
-* the tooltip and screen readers. */
-function HeaderAddButton({ href, onClick, label, word = "add", menu, disabled = false, disabledHint }) {
-	const { common } = useStrings();
-	const Link = useLink();
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AddIcon, { className: "w-3 h-3" }), /* @__PURE__ */ jsx("span", { children: word === "create" ? common.create : common.add })] });
-	if (menu) return /* @__PURE__ */ jsx(ActionMenu, {
-		items: menu,
-		label,
-		triggerClassName: headerAddButtonClasses,
-		children: content
+var StoreContext = createContext(null);
+/**
+* Holds the header the current page declares, for the `PageHeaderBar` the
+* shell renders. Wrap the shell, above both the bar and the routes.
+*/
+function PageHeaderProvider({ children }) {
+	const [store] = useState(() => new PageHeaderStore());
+	return /* @__PURE__ */ jsx(StoreContext, {
+		value: store,
+		children
 	});
-	if (href) return /* @__PURE__ */ jsx(Tooltip, {
-		content: label,
-		children: /* @__PURE__ */ jsx(Link, {
-			href,
-			"aria-label": label,
-			className: headerAddButtonClasses,
-			children: content
-		})
+}
+var renderOrder = 0;
+var subscribeNever = () => () => {};
+function createRegionNodes() {
+	if (typeof document === "undefined") return null;
+	const node = () => {
+		const el = document.createElement("div");
+		el.style.display = "contents";
+		return el;
+	};
+	return {
+		titleActions: node(),
+		actions: node(),
+		toolbar: node()
+	};
+}
+/**
+* Declares the page's header: its breadcrumbs, title actions, actions and
+* 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.
+*
+* 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
+* one rendered that has one, so a page's trail replaces its layout's.
+*/
+function PageHeader(props) {
+	const store = use(StoreContext);
+	if (!store) return props.hidden ? null : /* @__PURE__ */ jsx(HeaderLayout, {
+		breadcrumbs: props.breadcrumbs ?? [],
+		titleActions: props.titleActions,
+		actions: props.actions,
+		toolbar: props.toolbar
 	});
-	const hint = disabled ? disabledHint : void 0;
-	return /* @__PURE__ */ jsx(Tooltip, {
-		content: hint ?? label,
-		children: /* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick: disabled ? void 0 : onClick,
-			"aria-label": hint ? `${label}. ${hint}` : label,
-			"aria-disabled": disabled || void 0,
-			className: headerAddButtonClasses,
-			children: content
-		})
+	return /* @__PURE__ */ jsx(DeclaredHeader, {
+		store,
+		...props
 	});
 }
-/** The header's "…" menu of actions on the page's subject. */
-function HeaderActionMenu({ items, label }) {
-	const { common } = useStrings();
-	if (items.length === 0) return null;
-	return /* @__PURE__ */ jsx(ActionMenu, {
-		items,
-		label: label ?? common.actions,
-		triggerClassName: headerActionButtonClasses,
-		children: /* @__PURE__ */ jsx(MoreIcon, { className: "w-3.5 h-3.5" })
+function DeclaredHeader({ store, breadcrumbs, titleActions, actions, toolbar, hidden = false }) {
+	const [order] = useState(() => ++renderOrder);
+	const [nodes] = useState(createRegionNodes);
+	const client = useSyncExternalStore(subscribeNever, () => true, () => false);
+	const fills = {
+		titleActions: present(titleActions),
+		actions: present(actions),
+		toolbar: present(toolbar)
+	};
+	useLayoutEffect(() => {
+		store.set(order, {
+			breadcrumbs,
+			hidden,
+			nodes,
+			fills
+		});
 	});
+	useLayoutEffect(() => () => store.delete(order), [store, order]);
+	if (!nodes || !client) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		fills.titleActions && createPortal(titleActions, nodes.titleActions),
+		fills.actions && createPortal(actions, nodes.actions),
+		fills.toolbar && createPortal(toolbar, nodes.toolbar)
+	] });
 }
-function HeaderEditButton({ href, onClick, label: labelProp, disabled, tooltip }) {
-	const Link = useLink();
-	const { common } = useStrings();
-	const label = labelProp ?? common.edit;
-	return /* @__PURE__ */ jsx(Tooltip, {
-		content: tooltip ?? label,
-		children: href && !disabled ? /* @__PURE__ */ jsx(Link, {
-			href,
-			"aria-label": label,
-			className: headerActionButtonClasses,
-			children: /* @__PURE__ */ jsx(EditIcon, { className: "w-3 h-3" })
-		}) : /* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick,
-			disabled,
-			"aria-label": label,
-			className: headerActionButtonClasses,
-			children: /* @__PURE__ */ jsx(EditIcon, { className: "w-3 h-3" })
-		})
+function present(node) {
+	return node !== void 0 && node !== null && node !== false && node !== "";
+}
+/**
+* The bar showing what the current page declares with `PageHeader`. The shell
+* renders one, inside a `PageHeaderProvider`, wherever its chrome puts it. It
+* renders nothing while the page declares nothing.
+*/
+function PageHeaderBar({ compact = false, persistent = false, className }) {
+	const store = use(StoreContext);
+	if (!store) throw new Error("PageHeaderBar needs a PageHeaderProvider above it");
+	const header = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+	const empty = header.breadcrumbs.length === 0 && header.titleActions.length === 0 && header.actions.length === 0 && header.toolbar.length === 0;
+	if (header.hidden || empty && !persistent) return null;
+	return /* @__PURE__ */ jsx(HeaderLayout, {
+		breadcrumbs: header.breadcrumbs,
+		titleActions: header.titleActions.length > 0 && /* @__PURE__ */ jsx(Mounts, { nodes: header.titleActions }),
+		actions: header.actions.length > 0 && /* @__PURE__ */ jsx(Mounts, { nodes: header.actions }),
+		toolbar: header.toolbar.length > 0 && /* @__PURE__ */ jsx(Mounts, { nodes: header.toolbar }),
+		compact,
+		className
 	});
 }
-/** Renders nothing when the modern breadcrumb strip isn't mounted (classic chrome or self-headered pages). */
-function BreadcrumbsTitleAction({ children }) {
-	const { titleActionSlot } = useBreadcrumb();
-	if (!titleActionSlot) return null;
-	return createPortal(children, titleActionSlot);
+var nodeKeys = /* @__PURE__ */ new WeakMap();
+var nextNodeKey = 0;
+function nodeKey(node) {
+	let key = nodeKeys.get(node);
+	if (key === void 0) {
+		key = ++nextNodeKey;
+		nodeKeys.set(node, key);
+	}
+	return key;
 }
-function BreadcrumbsRightAction({ children }) {
-	const { rightActionSlot } = useBreadcrumb();
-	if (!rightActionSlot) return null;
-	return createPortal(children, rightActionSlot);
+function Mounts({ nodes }) {
+	return nodes.map((node) => /* @__PURE__ */ jsx(Mount, { node }, nodeKey(node)));
 }
-var breadcrumbsActionClasses = "flex cursor-pointer items-center gap-1 text-xs whitespace-nowrap hover:not-disabled:underline disabled:cursor-not-allowed disabled:opacity-50";
-function BreadcrumbsActionButton({ icon: Icon, label, ariaLabel, href, onClick, disabled, tooltip, destructive = false }) {
-	const Link = useLink();
-	const className = cx(breadcrumbsActionClasses, destructive ? "text-(--theme-error-text)" : "text-(--theme-link)");
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, { className: "w-3 h-3" }), label] });
-	return /* @__PURE__ */ jsx(Tooltip, {
-		content: tooltip,
-		children: href && !disabled ? /* @__PURE__ */ jsx(Link, {
-			href,
-			className,
-			"aria-label": ariaLabel,
-			children: content
-		}) : /* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick,
-			disabled,
-			className,
-			"aria-label": ariaLabel,
-			children: content
-		})
+/** Moves a declaration's region node into the bar. React owns the span and
+*  keeps it in order; the node inside is the page's. */
+function Mount({ node }) {
+	const attach = useCallback((span) => {
+		if (span && node.parentNode !== span) span.append(node);
+	}, [node]);
+	return /* @__PURE__ */ jsx("span", {
+		ref: attach,
+		className: "contents"
 	});
 }
-function PageHeader({ breadcrumbs, title, titleAction, actions, toolbar, className, sticky = true, stickyTopClassName = "top-0" }) {
-	const { setHidden } = useBreadcrumb();
-	const Link = useLink();
+function HeaderLayout({ breadcrumbs, titleActions, actions, toolbar, compact = false, className }) {
 	const { breadcrumbPin, navToggle } = useSlots();
-	const { common } = useStrings();
-	useLayoutEffect(() => {
-		setHidden(true);
-		return () => setHidden(false);
-	}, [setHidden]);
-	const crumbs = [...breadcrumbs ?? []];
-	const lastLabel = crumbs[crumbs.length - 1]?.label;
-	if (title !== null && title !== void 0 && title !== lastLabel) crumbs.push({ label: title });
-	const crumbRow = crumbs.length > 0 && /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-1.5 min-w-0",
-		children: [
-			/* @__PURE__ */ jsx("nav", {
-				"aria-label": common.breadcrumb,
-				className: "flex items-center gap-2 min-w-0 text-[13px]",
-				children: keyedByContent(crumbs, (c) => c.href ?? (typeof c.label === "string" ? c.label : "crumb")).map(({ key, item: crumb }, idx) => {
-					if (idx === crumbs.length - 1) return /* @__PURE__ */ jsx("h1", {
-						className: "m-0 text-[13px] font-medium leading-none text-(--theme-app) truncate",
-						children: crumb.label
-					}, key);
-					return /* @__PURE__ */ jsxs(Fragment$1, { children: [crumb.href ? /* @__PURE__ */ jsx(Link, {
-						href: crumb.href,
-						className: "text-(--theme-muted-text-color) hover:text-(--theme-app) transition-colors cursor-pointer whitespace-nowrap",
-						children: crumb.label
-					}) : /* @__PURE__ */ jsx("span", {
-						className: "text-(--theme-muted-text-color) whitespace-nowrap",
-						children: crumb.label
-					}), /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-3 h-3 opacity-60 shrink-0 text-(--theme-muted-text-color)" })] }, key);
-				})
-			}),
-			titleAction,
-			breadcrumbPin?.({ crumbs })
-		]
-	});
-	const actionCluster = actions && /* @__PURE__ */ jsx("div", {
-		className: "flex items-center gap-1.5 shrink-0",
-		children: actions
-	});
-	const toggle = navToggle?.();
-	const hasLeading = !!crumbRow || !!toggle;
-	const leading = hasLeading ? /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-2 min-w-0",
-		children: [toggle, crumbRow]
-	}) : /* @__PURE__ */ jsx("div", {});
+	const hasTrail = breadcrumbs.length > 0;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx(sticky && cx("sticky z-(--layer-header)", stickyTopClassName), "w-full bg-(--theme-app-bg)", className),
+		className: cx("@container w-full shrink-0 bg-(--theme-app-bg)", className),
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: cx("flex items-center justify-between gap-6 px-4 h-11", hasLeading && "border-b border-(--theme-border)"),
-			children: [leading, actionCluster]
-		}), toolbar && /* @__PURE__ */ jsx("div", {
+			className: cx("flex items-center justify-between gap-4 border-b border-(--theme-border) px-4", compact ? "h-8" : "h-11"),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 items-center gap-2",
+				children: [
+					navToggle?.(),
+					hasTrail && /* @__PURE__ */ jsx(BreadcrumbTrail, { crumbs: breadcrumbs }),
+					present(titleActions) && /* @__PURE__ */ jsx("div", {
+						className: "flex shrink-0 items-center gap-0.5",
+						children: titleActions
+					}),
+					hasTrail && breadcrumbPin?.({ crumbs: breadcrumbs })
+				]
+			}), present(actions) && /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center gap-1",
+				children: actions
+			})]
+		}), present(toolbar) && /* @__PURE__ */ jsx("div", {
 			className: "px-4",
 			children: toolbar
 		})]
 	});
 }
+var crumbText = "block truncate text-(--theme-muted-text-color)";
+var crumbLink = "rounded-sm transition-colors hover:text-(--theme-app) focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--theme-link)";
+function Separator() {
+	return /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3 shrink-0 text-(--theme-muted-text-color) opacity-60" });
+}
+var FOLD_WIDTH = 48;
+var PARENT_MAX_WIDTH = 144;
+var TITLE_MIN_WIDTH = 128;
+/**
+* Fits the trail to the room its row leaves it. It measures a hidden copy of
+* the trail at its natural width against the row's width less its other items,
+* so the answer doesn't depend on how the trail is folded at the moment.
+*/
+function useTrailFit(nav, natural) {
+	const [fit, setFit] = useState("all");
+	useLayoutEffect(() => {
+		const row = nav?.parentElement;
+		if (!nav || !natural || !row) return;
+		const measure = () => {
+			const gap = Number.parseFloat(getComputedStyle(row).columnGap) || 0;
+			let room = row.clientWidth;
+			for (const child of row.children) if (child !== nav) room -= child.getBoundingClientRect().width + gap;
+			if (natural.scrollWidth <= room) {
+				setFit("all");
+				return;
+			}
+			const steps = [...natural.children];
+			const width = (el) => el?.getBoundingClientRect().width ?? 0;
+			const parent = Math.min(width(steps[steps.length - 2]), PARENT_MAX_WIDTH);
+			const title = Math.min(width(steps[steps.length - 1]), TITLE_MIN_WIDTH);
+			setFit(FOLD_WIDTH + parent + title <= room ? "parent" : "none");
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(row);
+		observer.observe(natural);
+		return () => observer.disconnect();
+	}, [nav, natural]);
+	return fit;
+}
+function BreadcrumbTrail({ crumbs }) {
+	const { common } = useStrings();
+	const [nav, setNav] = useState(null);
+	const [natural, setNatural] = useState(null);
+	const fit = useTrailFit(nav, natural);
+	const current = crumbs[crumbs.length - 1];
+	const ancestors = crumbs.slice(0, -1);
+	const folded = fit === "none" ? ancestors : fit === "parent" ? ancestors.slice(0, -1) : [];
+	const shown = ancestors.slice(folded.length);
+	return /* @__PURE__ */ jsxs("nav", {
+		ref: setNav,
+		"aria-label": common.breadcrumb,
+		className: "relative min-w-0",
+		children: [/* @__PURE__ */ jsxs("ol", {
+			className: "m-0 flex min-w-0 list-none items-center gap-1.5 p-0 text-[13px] leading-none",
+			children: [
+				folded.length > 0 && /* @__PURE__ */ jsxs("li", {
+					className: "flex shrink-0 items-center gap-1.5",
+					children: [/* @__PURE__ */ jsx(ActionMenu, {
+						label: common.showFullPath,
+						align: "start",
+						items: folded.map((crumb) => crumb.href ? {
+							label: crumb.label,
+							href: crumb.href
+						} : {
+							label: crumb.label,
+							disabled: true,
+							onClick: () => {}
+						}),
+						triggerClassName: buttonClasses({
+							variant: "ghost",
+							size: "xs",
+							iconOnly: true
+						}),
+						children: /* @__PURE__ */ jsx(MoreIcon, {})
+					}), /* @__PURE__ */ jsx(Separator, {})]
+				}),
+				keyedByContent(shown, (c) => c.href ?? c.label).map(({ key, item: crumb }) => /* @__PURE__ */ jsxs("li", {
+					className: cx("flex items-center gap-1.5", folded.length > 0 ? "min-w-0 max-w-36 shrink-0" : "min-w-0"),
+					children: [crumb.label === "" ? /* @__PURE__ */ jsx(CrumbPlaceholder, {}) : /* @__PURE__ */ jsx(Tooltip, {
+						content: crumb.label,
+						overflowOnly: true,
+						children: crumb.href ? /* @__PURE__ */ jsx(AppLink, {
+							href: crumb.href,
+							className: cx(crumbText, crumbLink, "max-w-48"),
+							children: crumb.label
+						}) : /* @__PURE__ */ jsx("span", {
+							className: cx(crumbText, "max-w-48"),
+							children: crumb.label
+						})
+					}), /* @__PURE__ */ jsx(Separator, {})]
+				}, key)),
+				current && /* @__PURE__ */ jsx("li", {
+					className: "flex min-w-0 items-center",
+					children: current.label === "" ? /* @__PURE__ */ jsx("h1", {
+						"aria-current": "page",
+						className: "m-0",
+						children: /* @__PURE__ */ jsx(CrumbPlaceholder, {})
+					}) : /* @__PURE__ */ jsx(Tooltip, {
+						content: current.label,
+						overflowOnly: true,
+						children: /* @__PURE__ */ jsx("h1", {
+							"aria-current": "page",
+							className: "m-0 truncate text-[13px] font-medium leading-none text-(--theme-app)",
+							children: current.label
+						})
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			ref: setNatural,
+			"aria-hidden": true,
+			className: "invisible absolute top-0 left-0 flex items-center gap-1.5 whitespace-nowrap text-[13px] leading-none",
+			children: crumbs.map((crumb, i) => /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-1.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cx(i < crumbs.length - 1 && "max-w-48 truncate", i === crumbs.length - 1 && "font-medium"),
+					children: crumb.label || " ".repeat(6)
+				}), i < crumbs.length - 1 && /* @__PURE__ */ jsx(Separator, {})]
+			}, i))
+		})]
+	});
+}
+function CrumbPlaceholder() {
+	const { common } = useStrings();
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex items-center",
+		children: [/* @__PURE__ */ jsx(Skeleton, {
+			width: "6rem",
+			height: "0.8125rem"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: common.loading
+		})]
+	});
+}
 //#endregion
-export { BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, HeaderActionMenu, HeaderAddButton, HeaderEditButton, PageHeader };
+export { PageHeader, PageHeaderBar, PageHeaderProvider };

package/dist/components/PageHeaderAction.d.ts

@@ -0,0 +1,67 @@
+import type { ComponentType } from 'react';
+import type { MenuEntry } from './MenuEntries.js';
+type Target = {
+    href: string;
+    external?: boolean | undefined;
+    /** Loads the page instead of routing, for paths the host's router doesn't serve. */
+    reloadDocument?: boolean | undefined;
+    onClick?: never;
+    menu?: never;
+} | {
+    onClick: () => void;
+    href?: never;
+    external?: never;
+    reloadDocument?: never;
+    menu?: never;
+} | {
+    menu: MenuEntry[];
+    href?: never;
+    external?: never;
+    reloadDocument?: never;
+    onClick?: never;
+};
+export type PageHeaderActionProps = Target & {
+    icon: ComponentType<{
+        className?: string;
+    }>;
+    /** The visible text, or with `iconOnly` the name its tooltip shows. */
+    label: string;
+    /** A fuller name for assistive technology than the visible label, such as
+     *  "Save organization flags" for "Save". */
+    ariaLabel?: string | undefined;
+    /** The icon alone, named by its tooltip, such as an edit pencil beside the title. */
+    iconOnly?: boolean | undefined;
+    disabled?: boolean | undefined;
+    disabledReason?: string | undefined;
+    /** A hint shown on hover and focus while it can be pressed. */
+    tooltip?: string | undefined;
+    /** In the error color, as a destructive menu entry is, for an action that
+     *  removes or breaks something. */
+    destructive?: boolean | undefined;
+    /** A toggle's state, such as a favorite: set, it reads as pressed. Buttons only. */
+    pressed?: boolean | undefined;
+};
+/**
+ * An action in the page header: a link (`href`, `external` for a new tab,
+ * `reloadDocument` for a path the router doesn't serve), a
+ * button (`onClick`) or a menu (`menu`). Labeled actions read in the link
+ * color, so the page's commands stand apart from the trail.
+ */
+export declare function PageHeaderAction({ icon: Icon, label, ariaLabel, iconOnly, disabled, disabledReason, tooltip, destructive, pressed, ...target }: PageHeaderActionProps): import("react").JSX.Element;
+export type PageHeaderAddButtonProps = Target & {
+    /** The full action, such as "New cluster": the tooltip and accessible name. */
+    label: string;
+    /** The visible verb. */
+    word?: 'add' | 'create' | undefined;
+    disabled?: boolean | undefined;
+    disabledReason?: string | undefined;
+};
+/** The page's "+ Add" or "+ Create": with `menu`, a chooser of what to make. */
+export declare function PageHeaderAddButton({ label, word, disabled, disabledReason, ...target }: PageHeaderAddButtonProps): import("react").JSX.Element;
+/** The "…" menu of actions on the page's subject. Renders nothing without items. */
+export declare function PageHeaderMenu({ items, label, }: {
+    items: MenuEntry[];
+    /** Defaults to the strings' "Actions". */
+    label?: string | undefined;
+}): import("react").JSX.Element | null;
+export {};

package/dist/components/PageHeaderAction.js

@@ -0,0 +1,107 @@
+import { cx } from "../cx.js";
+import { buttonClasses } from "./buttonClasses.js";
+import { AddIcon, MoreIcon } from "../icons.js";
+import { Tooltip } from "./Tooltip.js";
+import { useStrings } from "./Provider.js";
+import { AppLink } from "./AppLink.js";
+import { ActionMenu } from "./ActionMenu.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/PageHeaderAction.tsx
+/**
+* The one control under every header action, so links, buttons and menus share
+* the look, the disabled behavior and the tooltip. A disabled control stays
+* focusable (`aria-disabled`, not `disabled`), so its reason is reachable by
+* keyboard and pointer, where a disabled button would swallow both.
+*/
+function HeaderControl({ name, tooltip, disabled, disabledReason, pressed, className, children, href, external, reloadDocument, onClick, menu }) {
+	const { common } = useStrings();
+	if (menu && !disabled) return /* @__PURE__ */ jsx(ActionMenu, {
+		items: menu,
+		label: name,
+		triggerClassName: className,
+		children
+	});
+	const reason = disabled ? disabledReason : void 0;
+	if (href) return /* @__PURE__ */ jsx(Tooltip, {
+		content: disabled ? disabledReason ?? tooltip : tooltip,
+		children: /* @__PURE__ */ jsx(AppLink, {
+			href,
+			reloadDocument,
+			target: external ? "_blank" : void 0,
+			disabled,
+			"aria-label": reason ? `${name}. ${reason}` : external ? `${name} ${common.opensInNewTab}` : name,
+			className,
+			children
+		})
+	});
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: disabled ? disabledReason ?? tooltip : tooltip,
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: disabled ? void 0 : onClick,
+			"aria-label": reason ? `${name}. ${reason}` : name,
+			"aria-disabled": disabled || void 0,
+			"aria-pressed": pressed,
+			className,
+			children
+		})
+	});
+}
+/**
+* An action in the page header: a link (`href`, `external` for a new tab,
+* `reloadDocument` for a path the router doesn't serve), a
+* button (`onClick`) or a menu (`menu`). Labeled actions read in the link
+* color, so the page's commands stand apart from the trail.
+*/
+function PageHeaderAction({ icon: Icon, label, ariaLabel, iconOnly = false, disabled = false, disabledReason, tooltip, destructive = false, pressed, ...target }) {
+	const tone = destructive ? "*:text-(--theme-error-text)" : iconOnly ? void 0 : "*:text-(--theme-link)";
+	return /* @__PURE__ */ jsxs(HeaderControl, {
+		...target,
+		name: ariaLabel ?? label,
+		tooltip: tooltip ?? label,
+		disabled,
+		disabledReason,
+		pressed,
+		className: cx(buttonClasses({
+			variant: "ghost",
+			size: "xs",
+			iconOnly
+		}), tone),
+		children: [/* @__PURE__ */ jsx(Icon, {}), !iconOnly && /* @__PURE__ */ jsx("span", {
+			className: "@max-md:sr-only",
+			children: label
+		})]
+	});
+}
+/** The page's "+ Add" or "+ Create": with `menu`, a chooser of what to make. */
+function PageHeaderAddButton({ label, word = "add", disabled = false, disabledReason, ...target }) {
+	const { common } = useStrings();
+	return /* @__PURE__ */ jsxs(HeaderControl, {
+		...target,
+		name: label,
+		tooltip: label,
+		disabled,
+		disabledReason,
+		className: buttonClasses({
+			variant: "outline",
+			size: "xs"
+		}),
+		children: [/* @__PURE__ */ jsx(AddIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "@max-md:sr-only",
+			children: word === "create" ? common.create : common.add
+		})]
+	});
+}
+/** The "…" menu of actions on the page's subject. Renders nothing without items. */
+function PageHeaderMenu({ items, label }) {
+	const { common } = useStrings();
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx(PageHeaderAction, {
+		icon: MoreIcon,
+		iconOnly: true,
+		label: label ?? common.actions,
+		menu: items
+	});
+}
+//#endregion
+export { PageHeaderAction, PageHeaderAddButton, PageHeaderMenu };

package/dist/components/Pagination.js

@@ -1,8 +1,6 @@
 import { cx } from "../cx.js";
 import { ChevronLeftIcon, ChevronRightIcon } from "../icons.js";
-import { buttonClasses } from "./buttonClasses.js";
-import { Tooltip } from "./Tooltip.js";
-import { useLink, useStrings } from "./Provider.js";
+import { useStrings } from "./Provider.js";
 import { IconButton } from "./IconButton.js";
 import { Select } from "./Select.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -70,19 +68,11 @@ function Pagination({ page, pageSize, total, hasNext, onPageChange, pageHref, pa
 	});
 }
 function PageStep({ to, enabled, label, icon, onPageChange, pageHref }) {
-	const Link = useLink();
-	if (pageHref && enabled) return /* @__PURE__ */ jsx(Tooltip, {
-		content: label,
-		children: /* @__PURE__ */ jsx(Link, {
-			href: pageHref(to),
-			"aria-label": label,
-			className: buttonClasses({
-				variant: "outline",
-				size: "sm",
-				iconOnly: true
-			}),
-			children: icon
-		})
+	if (pageHref && enabled) return /* @__PURE__ */ jsx(IconButton, {
+		variant: "outline",
+		icon,
+		label,
+		href: pageHref(to)
 	});
 	return /* @__PURE__ */ jsx(IconButton, {
 		variant: "outline",