@parallelworks/ui 0.77.0 → 0.78.0

package/dist/components/Modal.js

@@ -1,7 +1,11 @@
 import { cx } from "../cx.js";
-import { useFullscreenContainer } from "./fullscreen.js";
+import { CloseIcon } from "../icons.js";
+import { usePopupContainer } from "./popupContainer.js";
+import { useStrings } from "./Provider.js";
+import { IconButton } from "./IconButton.js";
 import { closeHandler } from "./dismiss.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/components/Modal.tsx
@@ -17,43 +21,78 @@ var sizeClasses = {
 	lg: "w-[560px]",
 	xl: "w-[672px]"
 };
+var popupMotion = "transition-[transform,opacity] duration-150 ease-out 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";
+var backdropMotion = "transition-opacity duration-150 ease-out data-starting-style:opacity-0 data-ending-style:opacity-0";
+var CONTROLS = "input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]):not([data-modal-close]), a[href], [tabindex]:not([tabindex=\"-1\"]):not([data-modal-close])";
+/** The first control in a panel other than its close button, or the panel itself. */
+function firstControlIn(panel) {
+	return panel?.querySelector(CONTROLS) ?? panel ?? true;
+}
 /** A modal dialog: focus stays inside, the page behind is inert and doesn't scroll,
 *  and focus returns to where it was on close. Give it a `title`, a `description`
 *  and a `footer` for the standard layout, as a Drawer has, or lay out the whole
 *  panel with the children. */
-function Modal({ open, onClose, title, description, footer, size, alert = false, dismissible = true, align = "top", panel = true, backdropClassName = "bg-black/40", className, children, ...popupProps }) {
-	const fullscreen = useFullscreenContainer();
+function Modal({ open, onClose, title, description, footer, size, alert = false, dismissible = true, align = "top", panel = true, backdropClassName = "bg-black/40", closeButton = false, onSubmit, className, children, initialFocus, ...popupProps }) {
+	const portal = usePopupContainer();
+	const { common } = useStrings();
+	const panelElement = useRef(null);
 	const onOpenChange = closeHandler(dismissible, onClose);
-	const header = title !== void 0 || description !== void 0;
+	const titled = title !== void 0 || description !== void 0;
+	const header = titled || closeButton;
 	const body = children !== void 0 && children !== null && children !== false;
-	const laidOut = header || footer !== void 0;
+	const laidOut = header || footer !== void 0 || onSubmit !== void 0;
+	const sections = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		header && /* @__PURE__ */ jsxs("div", {
+			className: cx("flex shrink-0 items-start gap-3 px-4 pt-4", !body && "pb-4"),
+			children: [titled && /* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [title !== void 0 && /* @__PURE__ */ jsx(ModalTitle, {
+					className: "m-0 text-lg font-semibold wrap-break-word",
+					children: title
+				}), description !== void 0 && /* @__PURE__ */ jsx(ModalDescription, {
+					className: "m-0 mt-1.5 text-sm text-(--theme-muted-text-color)",
+					children: description
+				})]
+			}), closeButton && /* @__PURE__ */ jsx(Dialog.Close, {
+				"data-modal-close": "",
+				render: /* @__PURE__ */ jsx(IconButton, {
+					icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+					label: common.close,
+					className: "-me-1.5 ms-auto mt-0"
+				})
+			})]
+		}),
+		body && /* @__PURE__ */ jsx("div", {
+			className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-4",
+			children
+		}),
+		footer !== void 0 && /* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0 items-center justify-end gap-2 border-t border-(--theme-border) px-4 py-3",
+			children: footer
+		})
+	] });
 	const content = /* @__PURE__ */ jsxs(Dialog.Portal, {
-		container: fullscreen,
-		children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: cx("fixed inset-0 z-(--layer-modal)", backdropClassName) }), /* @__PURE__ */ jsx(Dialog.Viewport, {
+		...portal,
+		children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: cx("fixed inset-0 z-(--layer-modal)", backdropMotion, backdropClassName) }), /* @__PURE__ */ jsx(Dialog.Viewport, {
 			className: cx("fixed inset-0 z-(--layer-modal) flex justify-center px-4 pt-20 pb-8", align === "center" ? "items-center" : "items-start sm:pt-[max(14vh,5rem)]"),
 			children: /* @__PURE__ */ jsx(Dialog.Popup, {
 				...popupProps,
-				className: cx(panel && "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl", size && [sizeClasses[size], "max-w-full"], laidOut && "flex max-h-full flex-col", "outline-none", className),
-				children: laidOut ? /* @__PURE__ */ jsxs(Fragment, { children: [
-					header && /* @__PURE__ */ jsxs("div", {
-						className: cx("shrink-0 px-4 pt-4", !body && "pb-4"),
-						children: [title !== void 0 && /* @__PURE__ */ jsx(ModalTitle, {
-							className: "m-0 text-lg font-semibold",
-							children: title
-						}), description !== void 0 && /* @__PURE__ */ jsx(ModalDescription, {
-							className: "m-0 mt-1.5 text-sm text-(--theme-muted-text-color)",
-							children: description
-						})]
-					}),
-					body && /* @__PURE__ */ jsx("div", {
-						className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-4",
-						children
-					}),
-					footer !== void 0 && /* @__PURE__ */ jsx("div", {
-						className: "flex shrink-0 items-center justify-end gap-2 border-t border-(--theme-border) px-4 py-3",
-						children: footer
-					})
-				] }) : children
+				ref: (element) => {
+					panelElement.current = element;
+					const forward = popupProps.ref;
+					if (typeof forward === "function") forward(element);
+					else if (forward) forward.current = element;
+				},
+				initialFocus: initialFocus ?? (closeButton ? () => firstControlIn(panelElement.current) : void 0),
+				className: cx(panel && "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl", size && [sizeClasses[size], "max-w-full"], laidOut && "flex max-h-full flex-col", "outline-none", popupMotion, className),
+				children: !laidOut ? children : onSubmit ? /* @__PURE__ */ jsx("form", {
+					className: "flex min-h-0 flex-1 flex-col",
+					onSubmit: (event) => {
+						event.preventDefault();
+						onSubmit(event);
+					},
+					children: sections
+				}) : sections
 			})
 		})]
 	});

package/dist/components/OneTimeCodeInput.js

@@ -1,8 +1,8 @@
 import { cx } from "../cx.js";
 import { useStrings } from "./Provider.js";
 import { fieldBox } from "./fieldBox.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { OTPField } from "@base-ui/react/otp-field";
 //#region src/components/OneTimeCodeInput.tsx
 /**

package/dist/components/PageHeader.js

@@ -1,9 +1,13 @@
 import { cx } from "../cx.js";
-import { useSlots } from "./Provider.js";
+import { buttonClasses } from "./buttonClasses.js";
+import { MoreIcon } from "../icons.js";
+import { useSlots, useStrings } from "./Provider.js";
+import { ActionMenu } from "./ActionMenu.js";
 import { Breadcrumbs } from "./Breadcrumbs.js";
+import { HeaderActionsFit, HeaderActionsFitContext, overflowingActions } from "./headerActionsFit.js";
 import { PageHeaderStore } from "./pageHeaderStore.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, use, useCallback, useLayoutEffect, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 //#region src/components/PageHeader.tsx
 var StoreContext = createContext(null);
@@ -76,9 +80,12 @@ function DeclaredHeader({ store, breadcrumbs, titleActions, actions, toolbar, hi
 	});
 	useLayoutEffect(() => () => store.delete(order), [store, order]);
 	if (!nodes || !client) return null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		fills.titleActions && createPortal(titleActions, nodes.titleActions),
-		fills.actions && createPortal(actions, nodes.actions),
+		fills.actions && createPortal(/* @__PURE__ */ jsx(HeaderActionsFitContext, {
+			value: store.actionsFit,
+			children: actions
+		}), nodes.actions),
 		fills.toolbar && createPortal(toolbar, nodes.toolbar)
 	] });
 }
@@ -101,6 +108,7 @@ function PageHeaderBar({ compact = false, persistent = false, className }) {
 		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 }),
+		fit: store.actionsFit,
 		compact,
 		className
 	});
@@ -129,14 +137,25 @@ function Mount({ node }) {
 		className: "contents"
 	});
 }
-function HeaderLayout({ breadcrumbs, titleActions, actions, toolbar, compact = false, className }) {
+function HeaderLayout({ breadcrumbs, titleActions, actions, toolbar, fit: sharedFit, compact = false, className }) {
 	const { breadcrumbPin, navToggle } = useSlots();
+	const { list: t } = useStrings();
+	const [ownFit] = useState(() => new HeaderActionsFit());
+	const fit = sharedFit ?? ownFit;
+	const [row, setRow] = useState(null);
+	const [lead, setLead] = useState(null);
+	const [end, setEnd] = useState(null);
+	useActionsFit(fit, row, lead, end);
+	useSyncExternalStore(fit.subscribe, fit.getVersion, fit.getVersion);
+	const moved = fit.menu();
 	const hasTrail = breadcrumbs.length > 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: cx("@container w-full shrink-0 bg-(--theme-app-bg)", className),
 		children: [/* @__PURE__ */ jsxs("div", {
+			ref: setRow,
 			className: cx("flex items-center justify-between gap-4 border-b border-(--theme-border) px-4", compact ? "h-8" : "h-12"),
 			children: [/* @__PURE__ */ jsxs("div", {
+				ref: setLead,
 				className: "flex min-w-0 flex-1 items-center gap-2",
 				children: [
 					navToggle?.(),
@@ -150,9 +169,22 @@ function HeaderLayout({ breadcrumbs, titleActions, actions, toolbar, compact = f
 					}),
 					hasTrail && breadcrumbPin?.({ crumbs: breadcrumbs })
 				]
-			}), present(actions) && /* @__PURE__ */ jsx("div", {
+			}), present(actions) && /* @__PURE__ */ jsxs("div", {
+				ref: setEnd,
 				className: "flex shrink-0 items-center gap-1",
-				children: actions
+				children: [/* @__PURE__ */ jsx(HeaderActionsFitContext, {
+					value: fit,
+					children: actions
+				}), moved.length > 0 && /* @__PURE__ */ jsx(ActionMenu, {
+					items: moved,
+					label: t.moreActions,
+					triggerClassName: buttonClasses({
+						variant: "ghost",
+						size: "xs",
+						iconOnly: true
+					}),
+					children: /* @__PURE__ */ jsx(MoreIcon, {})
+				})]
 			})]
 		}), present(toolbar) && /* @__PURE__ */ jsx("div", {
 			className: "px-4",
@@ -160,5 +192,77 @@ function HeaderLayout({ breadcrumbs, titleActions, actions, toolbar, compact = f
 		})]
 	});
 }
+var ROW_GAP = 16;
+var LEAD_GAP = 8;
+var TRAIL_MIN_WIDTH = 160;
+var FOLD_WIDTH = 448;
+/**
+* Fits the actions to the bar. Labels fold to their icons first, by the bar's
+* own container query; when the folded actions still leave the trail too
+* little room, the trailing ones move into a "…" menu at the end, last first,
+* until the rest fit. It measures each action as it shows and remembers its
+* width while it has moved, so the answer doesn't depend on what has moved.
+*/
+function useActionsFit(fit, row, lead, end) {
+	const [widths] = useState(() => /* @__PURE__ */ new Map());
+	useLayoutEffect(() => {
+		if (!row || !lead || !end) {
+			fit.setOverflow([]);
+			return;
+		}
+		const measure = () => {
+			const rowWidth = row.clientWidth;
+			if (rowWidth === 0) {
+				fit.setOverflow([]);
+				return;
+			}
+			const folded = rowWidth < FOLD_WIDTH;
+			const key = (id, fold) => `${fold ? "folded" : "full"}:${id}`;
+			const items = [...end.querySelectorAll("[data-header-action]")].map((el) => el.dataset["headerAction"] ?? "");
+			for (const el of end.querySelectorAll("[data-header-action]")) {
+				const id = el.dataset["headerAction"] ?? "";
+				const control = el.firstElementChild;
+				if (!fit.isOverflowed(id) && control) widths.set(key(id, folded), control.getBoundingClientRect().width);
+			}
+			const width = (id) => widths.get(key(id, folded)) ?? widths.get(key(id, !folded)) ?? 0;
+			const style = getComputedStyle(row);
+			let leadMin = 0;
+			let leadItems = 0;
+			for (const child of lead.children) {
+				const w = child.tagName === "NAV" ? TRAIL_MIN_WIDTH : child.getBoundingClientRect().width;
+				if (w > 0) {
+					leadMin += w;
+					leadItems++;
+				}
+			}
+			leadMin += Math.max(0, leadItems - 1) * LEAD_GAP;
+			const room = rowWidth - Number.parseFloat(style.paddingLeft || "0") - Number.parseFloat(style.paddingRight || "0") - leadMin - ROW_GAP;
+			fit.setOverflow(overflowingActions(items.map((id) => ({
+				id,
+				width: width(id)
+			})), end.getBoundingClientRect().width, items.filter((id) => fit.isOverflowed(id)), room));
+		};
+		measure();
+		const resize = new ResizeObserver(measure);
+		resize.observe(row);
+		resize.observe(end);
+		const changes = new MutationObserver(measure);
+		changes.observe(end, {
+			childList: true,
+			subtree: true
+		});
+		changes.observe(lead, { childList: true });
+		return () => {
+			resize.disconnect();
+			changes.disconnect();
+		};
+	}, [
+		fit,
+		row,
+		lead,
+		end,
+		widths
+	]);
+}
 //#endregion
 export { PageHeader, PageHeaderBar, PageHeaderProvider };

package/dist/components/PageHeaderAction.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentType } from 'react';
+import { type ComponentType } from 'react';
 import type { MenuEntry } from './MenuEntries.js';
 type Target = {
     href: string;
@@ -40,6 +40,9 @@ export type PageHeaderActionProps = Target & {
     destructive?: boolean | undefined;
     /** A toggle's state, such as a favorite: set, it reads as pressed. Buttons only. */
     pressed?: boolean | undefined;
+    /** Busy with what it started, such as a run starting: a spinner takes the
+     *  icon's place, and it keeps focus but can't be pressed again until done. */
+    loading?: boolean | undefined;
 };
 /**
  * An action in the page header: a link (`href`, `external` for a new tab,
@@ -47,7 +50,7 @@ export type PageHeaderActionProps = Target & {
  * 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 declare function PageHeaderAction({ icon: Icon, label, ariaLabel, iconOnly, disabled, disabledReason, tooltip, destructive, pressed, loading, ...target }: PageHeaderActionProps): import("react").JSX.Element;
 export type PageHeaderAddButtonProps = Target & {
     /** The full action, such as "New cluster": the tooltip and accessible name. */
     label: string;
@@ -55,9 +58,11 @@ export type PageHeaderAddButtonProps = Target & {
     word?: 'add' | 'create' | undefined;
     disabled?: boolean | undefined;
     disabledReason?: string | undefined;
+    /** Busy making it: a spinner takes the plus's place, and it can't be pressed again until done. */
+    loading?: boolean | 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;
+export declare function PageHeaderAddButton({ label, word, disabled, disabledReason, loading, ...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[];

package/dist/components/PageHeaderAction.js

@@ -1,10 +1,13 @@
 import { cx } from "../cx.js";
 import { buttonClasses } from "./buttonClasses.js";
 import { AddIcon, MoreIcon } from "../icons.js";
+import { Loader } from "./Loader.js";
 import { Tooltip } from "./Tooltip.js";
 import { useStrings } from "./Provider.js";
 import { AppLink } from "./AppLink.js";
 import { ActionMenu } from "./ActionMenu.js";
+import { HeaderActionsFitContext } from "./headerActionsFit.js";
+import { use, useId, useLayoutEffect, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/PageHeaderAction.tsx
 /**
@@ -13,9 +16,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * 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 }) {
+function HeaderControl({ name, tooltip, disabled, disabledReason, loading = false, pressed, className, children, href, external, reloadDocument, onClick, menu }) {
 	const { common } = useStrings();
-	if (menu && !disabled) return /* @__PURE__ */ jsx(ActionMenu, {
+	if (menu && !disabled && !loading) return /* @__PURE__ */ jsx(ActionMenu, {
 		items: menu,
 		label: name,
 		triggerClassName: className,
@@ -28,7 +31,8 @@ function HeaderControl({ name, tooltip, disabled, disabledReason, pressed, class
 			href,
 			reloadDocument,
 			target: external ? "_blank" : void 0,
-			disabled,
+			disabled: disabled || loading,
+			"aria-busy": loading || void 0,
 			"aria-label": reason ? `${name}. ${reason}` : external ? `${name} ${common.opensInNewTab}` : name,
 			className,
 			children
@@ -38,9 +42,10 @@ function HeaderControl({ name, tooltip, disabled, disabledReason, pressed, class
 		content: disabled ? disabledReason ?? tooltip : tooltip,
 		children: /* @__PURE__ */ jsx("button", {
 			type: "button",
-			onClick: disabled ? void 0 : onClick,
+			onClick: disabled || loading ? void 0 : onClick,
 			"aria-label": reason ? `${name}. ${reason}` : name,
-			"aria-disabled": disabled || void 0,
+			"aria-disabled": disabled || loading || void 0,
+			"aria-busy": loading || void 0,
 			"aria-pressed": pressed,
 			className,
 			children
@@ -53,43 +58,126 @@ function HeaderControl({ name, tooltip, disabled, disabledReason, pressed, class
 * 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 }) {
+function PageHeaderAction({ icon: Icon, label, ariaLabel, iconOnly = false, disabled = false, disabledReason, tooltip, destructive = false, pressed, loading = false, ...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,
+	const icon = loading ? /* @__PURE__ */ jsx(Loader, {
+		inline: true,
+		decorative: true,
+		size: "1em"
+	}) : /* @__PURE__ */ jsx(Icon, {});
+	return /* @__PURE__ */ jsx(Fitted, {
+		entry: menuRow({
+			label: ariaLabel ?? label,
+			icon,
+			disabled: disabled || loading,
+			disabledReason,
+			destructive,
+			pressed,
+			target
+		}),
+		children: /* @__PURE__ */ jsxs(HeaderControl, {
+			...target,
+			name: ariaLabel ?? label,
+			tooltip: tooltip ?? label,
+			disabled,
+			disabledReason,
+			loading,
+			pressed,
+			className: cx(buttonClasses({
+				variant: "ghost",
+				size: "xs",
+				iconOnly
+			}), tone),
+			children: [icon, !iconOnly && /* @__PURE__ */ jsx("span", {
+				className: "@max-md:sr-only",
+				children: label
+			})]
+		})
+	});
+}
+/** An action as a row of the header's "…" menu, for when the bar has no room for it. */
+function menuRow({ label, icon, disabled, disabledReason, destructive, pressed, target }) {
+	const shared = {
+		label,
+		icon,
 		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
-		})]
+		destructive
+	};
+	if (target.menu) return disabled ? {
+		...shared,
+		onClick: () => {}
+	} : {
+		label,
+		icon,
+		items: target.menu
+	};
+	if (target.href) return {
+		...shared,
+		href: target.href,
+		reloadDocument: target.reloadDocument,
+		target: target.external ? "_blank" : void 0
+	};
+	return {
+		...shared,
+		onClick: target.onClick ?? (() => {}),
+		checked: pressed
+	};
+}
+/**
+* Lets an action in the header's `actions` move into the bar's "…" menu when
+* the bar runs out of room: it registers its menu row, and hides while it has
+* moved. Anywhere else, such as among the title actions, it is the action alone.
+*/
+function Fitted({ entry, children }) {
+	const fit = use(HeaderActionsFitContext);
+	const id = useId();
+	useLayoutEffect(() => {
+		fit?.register(id, entry);
+	});
+	useLayoutEffect(() => fit ? () => fit.unregister(id) : void 0, [fit, id]);
+	const moved = useSyncExternalStore(fit?.subscribe ?? subscribeNever, () => fit?.isOverflowed(id) ?? false, () => false);
+	if (!fit) return children;
+	return /* @__PURE__ */ jsx("span", {
+		"data-header-action": id,
+		hidden: moved,
+		className: moved ? void 0 : "contents",
+		children
 	});
 }
+var subscribeNever = () => () => {};
 /** The page's "+ Add" or "+ Create": with `menu`, a chooser of what to make. */
-function PageHeaderAddButton({ label, word = "add", disabled = false, disabledReason, ...target }) {
+function PageHeaderAddButton({ label, word = "add", disabled = false, disabledReason, loading = false, ...target }) {
 	const { common } = useStrings();
-	return /* @__PURE__ */ jsxs(HeaderControl, {
-		...target,
-		name: label,
-		tooltip: label,
-		disabled,
-		disabledReason,
-		className: buttonClasses({
-			variant: "outline",
-			size: "xs"
+	const icon = loading ? /* @__PURE__ */ jsx(Loader, {
+		inline: true,
+		decorative: true,
+		size: "1em"
+	}) : /* @__PURE__ */ jsx(AddIcon, {});
+	return /* @__PURE__ */ jsx(Fitted, {
+		entry: menuRow({
+			label,
+			icon,
+			disabled: disabled || loading,
+			disabledReason,
+			target
 		}),
-		children: [/* @__PURE__ */ jsx(AddIcon, {}), /* @__PURE__ */ jsx("span", {
-			className: "@max-md:sr-only",
-			children: word === "create" ? common.create : common.add
-		})]
+		children: /* @__PURE__ */ jsxs(HeaderControl, {
+			...target,
+			name: label,
+			tooltip: label,
+			disabled,
+			disabledReason,
+			loading,
+			className: buttonClasses({
+				variant: "outline",
+				size: "xs"
+			}),
+			children: [icon, /* @__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. */

package/dist/components/Pagination.d.ts

@@ -20,9 +20,21 @@ export interface PaginationProps {
     onPageSizeChange?: ((size: number) => void) | undefined;
     /** Replaces "1–50 of 200", such as with the time range a page covers. */
     summary?: ReactNode;
+    /** Numbers the pages between previous and next, for a list a reader jumps
+     *  around in, such as a catalog: the first and last, and a window around
+     *  the current one, with gaps between. `max` is how many steps show at
+     *  most, gaps included (7 by default, 5 at least). Needs a `total`; hidden
+     *  on a phone-width screen, where previous and next remain. */
+    pageNumbers?: boolean | {
+        max?: number | undefined;
+    } | undefined;
     className?: string | undefined;
 }
+/** The pages to number, counting from 0, with `null` for a gap: all of them
+ *  when they fit in `max` steps, and otherwise the first and last around a
+ *  window on the current one, `max` steps in all. */
+export declare function pageSteps(page: number, count: number, max?: number): (number | null)[];
 /** Steps through a list a page at a time: where the page sits in the list,
  *  previous and next, and optionally how many rows a page holds. Renders
  *  nothing when everything fits on one page. */
-export declare function Pagination({ page, pageSize, total, hasNext, onPageChange, pageHref, pageSizes, onPageSizeChange, summary, className, }: PaginationProps): import("react").JSX.Element | null;
+export declare function Pagination({ page, pageSize, total, hasNext, onPageChange, pageHref, pageSizes, onPageSizeChange, summary, pageNumbers, className, }: PaginationProps): import("react").JSX.Element | null;