@parallelworks/ui 0.77.0 → 0.78.0

package/dist/components/ActionMenu.d.ts

@@ -1,14 +1,43 @@
-import type { ReactNode } from 'react';
-import { type MenuEntry, type MenuSearch } from './MenuEntries.js';
-/** A trigger that opens a menu, such as a header's "New" or "…" button. */
-export declare function ActionMenu({ items, label, search, align, triggerClassName, children, }: {
+import { type ReactElement, type ReactNode } from 'react';
+import { type MenuPopupProps, type MenuSize } from './Menu.js';
+import { type MenuAction, type MenuEntry, type MenuSearch } from './MenuEntries.js';
+export interface ActionMenuProps {
     items: MenuEntry[];
-    /** Names the trigger, which usually shows only an icon, and labels its tooltip. */
+    /** Names the trigger, which usually shows only an icon, and labels its tooltip. With
+     *  `trigger`, it names the menu instead. */
     label: string;
     search?: MenuSearch | undefined;
     align?: 'start' | 'center' | 'end';
-    /** Styles the trigger; without it the trigger is a ghost icon button. */
+    /** Where the menu opens from the trigger, such as `top` for one near the window's bottom. */
+    side?: MenuPopupProps['side'];
+    /** Styles the built-in trigger; without it the trigger is a ghost icon button. */
     triggerClassName?: string | undefined;
-    /** The trigger's content. */
-    children: ReactNode;
-}): import("react").JSX.Element;
+    /** The built-in trigger's content. */
+    children?: ReactNode;
+    /** The whole trigger in place of the built-in one, such as a button with visible text and
+     *  a chevron, or an avatar and name. It receives the trigger's props and ref, so it must
+     *  pass them to its element. */
+    trigger?: ReactElement | undefined;
+    /** Shows `label` on hover. On by default for the built-in trigger, which shows only an
+     *  icon, and off with `trigger`, whose text would repeat it. Hidden while the menu is open. */
+    tooltip?: boolean | undefined;
+    /** The trigger can't open the menu, such as while there is nothing to act on. */
+    disabled?: boolean | undefined;
+    /** On the popup, such as a wider floor: `min-w-64`. */
+    popupClassName?: string | undefined;
+    /** At least as wide as the trigger, as a switcher under a wide button is. */
+    matchTriggerWidth?: boolean | undefined;
+    /** Lines above the rows that aren't choices, such as who is signed in. */
+    header?: ReactNode;
+    /** One action pinned under the rows, ruled off and always in view, such as "See all". */
+    footer?: MenuAction | undefined;
+    /** Shown in place of the rows when there are none, such as "No connected resources". */
+    empty?: string | undefined;
+    /** `sm` rows for a compact toolbar whose own text is 12px. */
+    size?: MenuSize | undefined;
+    /** As `MenuPopup`'s: classes on the menu and its submenus, such as token overrides. */
+    themeClassName?: string | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+}
+/** A trigger that opens a menu, such as a header's "New" or "…" button. */
+export declare function ActionMenu({ items, label, search, align, side, triggerClassName, children, trigger, tooltip, disabled, popupClassName, matchTriggerWidth, header, footer, empty, size, themeClassName, onOpenChange, }: ActionMenuProps): import("react").JSX.Element;

package/dist/components/ActionMenu.js

@@ -1,34 +1,60 @@
+import { cx } from "../cx.js";
 import { buttonClasses } from "./buttonClasses.js";
+import { EmptyState } from "./EmptyState.js";
 import { MenuPopup } from "./Menu.js";
 import { Tooltip } from "./Tooltip.js";
-import { MenuEntries, MenuFilter } from "./MenuEntries.js";
+import { ActionRow, MenuEntries, MenuFilter } from "./MenuEntries.js";
 import { Menu } from "@base-ui/react/menu";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ActionMenu.tsx
 /** A trigger that opens a menu, such as a header's "New" or "…" button. */
-function ActionMenu({ items, label, search, align, triggerClassName, children }) {
+function ActionMenu({ items, label, search, align, side, triggerClassName, children, trigger, tooltip = trigger === void 0, disabled = false, popupClassName, matchTriggerWidth = false, header, footer, empty, size, themeClassName, onOpenChange }) {
+	const [open, setOpen] = useState(false);
+	const button = trigger ? /* @__PURE__ */ jsx(Menu.Trigger, {
+		render: trigger,
+		disabled
+	}) : /* @__PURE__ */ jsx(Menu.Trigger, {
+		"aria-label": label,
+		disabled,
+		className: triggerClassName ?? buttonClasses({
+			variant: "ghost",
+			size: "sm",
+			iconOnly: true
+		}),
+		children
+	});
 	return /* @__PURE__ */ jsx(MenuFilter, {
 		search,
-		children: (query) => /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(Tooltip, {
-			content: label,
-			children: /* @__PURE__ */ jsx(Menu.Trigger, {
-				"aria-label": label,
-				className: triggerClassName ?? buttonClasses({
-					variant: "ghost",
-					size: "sm",
-					iconOnly: true
-				}),
-				children
-			})
-		}), /* @__PURE__ */ jsx(MenuPopup, {
-			align,
-			className: "min-w-52",
-			children: /* @__PURE__ */ jsx(MenuEntries, {
-				entries: items,
-				search,
-				query
-			})
-		})] })
+		children: (query) => /* @__PURE__ */ jsxs(Menu.Root, {
+			onOpenChange: (next) => {
+				setOpen(next);
+				onOpenChange?.(next);
+			},
+			children: [tooltip ? /* @__PURE__ */ jsx(Tooltip, {
+				content: label,
+				disabled: open,
+				children: button
+			}) : button, /* @__PURE__ */ jsx(MenuPopup, {
+				align,
+				side,
+				size,
+				themeClassName,
+				matchAnchorWidth: matchTriggerWidth,
+				label: trigger ? label : void 0,
+				header,
+				footer: footer && /* @__PURE__ */ jsx(ActionRow, { action: footer }),
+				className: cx("min-w-52", popupClassName),
+				children: items.length === 0 && empty ? /* @__PURE__ */ jsx(EmptyState, {
+					variant: "bare",
+					title: empty
+				}) : /* @__PURE__ */ jsx(MenuEntries, {
+					entries: items,
+					search,
+					query
+				})
+			})]
+		})
 	});
 }
 //#endregion

package/dist/components/Avatar.d.ts

@@ -1,20 +1,80 @@
+import { type ReactNode } from 'react';
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
+/** Who an avatar stands for. An agent's avatar is a rounded square, so its shape, and not only
+ *  its color, tells it from a person's. */
+export type AvatarKind = 'person' | 'agent';
+export type AvatarShape = 'circle' | 'square';
 export interface AvatarProps {
     /** Image URL. Until it loads, or when it fails, the initials of `name` show. */
     src?: string | null | undefined;
     name?: string | undefined;
+    /** A person (a circle, the default) or an agent (a rounded square). Under UIProvider's
+     *  `avatarColoring="kind"` it also picks the fill: `--avatar-person` or `--avatar-agent`. */
+    kind?: AvatarKind | undefined;
+    /** Overrides the shape `kind` gives, such as a square for an organization. */
+    shape?: AvatarShape | undefined;
     /** Picks the fallback's color from the theme's categorical palette, so the same key gets the
      *  same color everywhere. Defaults to `name`; pass a stable id when names can repeat or
-     *  change, or `null` for the accent fill whatever the name. Without either, the accent fills it. */
+     *  change, or `null` for the accent fill whatever the name. Without either, the accent fills it.
+     *  Ignored under `avatarColoring="kind"`. */
     colorKey?: string | null | undefined;
+    /** Classes for the initials' fill and text in place of the palette's or the kind's, such as a
+     *  neutral fill for something that is neither a person nor an agent. */
+    colorClassName?: string | undefined;
+    /** Defaults to the group's size inside an `AvatarGroup`, else `md`. */
     size?: AvatarSize | undefined;
     status?: AvatarStatus | undefined;
+    /** Hides it from assistive technology, for an avatar beside the name it shows, which a
+     *  screen reader would otherwise read twice. */
+    decorative?: boolean | undefined;
+    /** Names it on hover: `true` shows the name, with the presence when it has a status dot, and
+     *  anything else shows that instead, such as what the person is doing. */
+    tooltip?: boolean | ReactNode;
+    /** On the avatar's shape, rounded as it is, so a ring or a shadow follows the circle or the
+     *  square: its margin, ring or hover effect. */
     className?: string | undefined;
 }
+export interface AvatarInitialsOptions {
+    /** Two letters for a one-word name ("maya" reads "MA"), splitting a handle on `_` and `-`
+     *  too and leaving out an email's domain. Default false: one letter, "M". */
+    twoLetters?: boolean | undefined;
+}
 /** Up to two initials: the first and last word of a name split on spaces and dots. */
-export declare function avatarInitials(name: string | undefined): string;
-/** A person's picture, or their initials while it loads or when it fails. It is
- *  one image to assistive technology, named for the person, whichever shows,
- *  and their presence when it has a status dot. */
-export declare function Avatar({ src, name, colorKey, size, status, className }: AvatarProps): import("react").JSX.Element;
+export declare function avatarInitials(name: string | undefined, { twoLetters }?: AvatarInitialsOptions): string;
+/** A person's or an agent's picture, or their initials while it loads or when it fails. It is
+ *  one image to assistive technology, named for them, whichever shows, and their presence when
+ *  it has a status dot, unless it is `decorative`.
+ *
+ *  Without a picture the fill follows UIProvider's `avatarColoring`: by name from the
+ *  categorical palette (the default), or by kind, where people share `--avatar-person` (with
+ *  `--avatar-person-text`) and agents `--avatar-agent` (with `--avatar-agent-text`, and the
+ *  edge `--avatar-agent-ring`). */
+export declare function Avatar({ src, name, kind, shape, colorKey, colorClassName, size: sizeProp, status, decorative, tooltip, className, }: AvatarProps): import("react").JSX.Element;
+export interface AvatarGroupProps {
+    /** Avatars, each possibly wrapped, such as in a hover card. Each child counts as one. */
+    children: ReactNode;
+    /** Shows at most this many; the rest become a "+N" chip. */
+    max?: number | undefined;
+    /** How many there are in all, when the children are already a slice of them: the chip counts
+     *  the rest. Defaults to the number of children. */
+    total?: number | undefined;
+    /** Shows the "+N" chip for those left out. Default true; false for a stack whose count is
+     *  printed beside it. */
+    showOverflow?: boolean | undefined;
+    /** Every avatar's size, and the chip's. Default `sm`. */
+    size?: AvatarSize | undefined;
+    /** Rings each avatar in the color behind the stack, so overlapping faces read apart. Default
+     *  true. */
+    ring?: boolean | undefined;
+    /** The ring's color, a CSS color: the surface the stack sits on. Defaults to the panel's. One
+     *  avatar can set its own, such as a highlight, by setting `--avatar-ring` in its `className`. */
+    ringColor?: string | undefined;
+    /** The group's accessible name, such as "3 people here". */
+    label?: string | undefined;
+    className?: string | undefined;
+}
+/** Overlapping avatars, such as a task's assignees or who is here, with a "+N" chip for the
+ *  rest. Each avatar inside takes the group's size and a ring in the color behind it, which
+ *  follows its shape, round or square. */
+export declare function AvatarGroup({ children, max, total, showOverflow, size, ring, ringColor, label, className, }: AvatarGroupProps): import("react").JSX.Element;

package/dist/components/Avatar.js

@@ -1,6 +1,8 @@
 import { cx } from "../cx.js";
-import { useStrings } from "./Provider.js";
+import { Tooltip } from "./Tooltip.js";
+import { useAvatarColoring, useLocale, useStrings } from "./Provider.js";
 import { categoryClasses } from "./category.js";
+import { Children, createContext, use, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Avatar } from "@base-ui/react/avatar";
 //#region src/components/Avatar.tsx
@@ -12,6 +14,23 @@ var SIZE_CLASSES = {
 	xl: "size-12 text-lg",
 	"2xl": "size-16 text-xl"
 };
+var KIND_TEXT_CLASSES = {
+	xs: "text-[8px]",
+	md: "text-[11px]"
+};
+var SQUARE_CLASSES = {
+	xs: "rounded-[5px]",
+	sm: "rounded-[5px]",
+	md: "rounded-[5px]",
+	lg: "rounded-lg",
+	xl: "rounded-[10px]",
+	"2xl": "rounded-xl"
+};
+var KIND_CLASSES = {
+	person: "bg-(--avatar-person,color-mix(in_oklab,var(--theme-info)_12%,var(--theme-panel-bg))) text-(--avatar-person-text,var(--theme-info-text))",
+	agent: "bg-(--avatar-agent,var(--theme-category-2)) text-(--avatar-agent-text,var(--theme-category-2-text))"
+};
+var AGENT_EDGE = "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:content-[''] after:inset-ring after:inset-ring-(--avatar-agent-ring,color-mix(in_oklab,var(--avatar-agent-text,var(--theme-category-2-text))_40%,transparent))";
 var STATUS_CLASSES = {
 	online: "bg-(--theme-success)",
 	offline: "bg-(--theme-muted-text-color)",
@@ -19,44 +38,71 @@ var STATUS_CLASSES = {
 	away: "bg-(--theme-warning)"
 };
 var graphemes = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter(void 0, { granularity: "grapheme" }) : void 0;
+function leadingCharacters(text, count) {
+	if (!text) return "";
+	const out = [];
+	for (const part of graphemes ? Array.from(graphemes.segment(text), (s) => s.segment) : text) {
+		if (out.length === count) break;
+		out.push(part);
+	}
+	return out.join("");
+}
 function firstCharacter(text) {
-	if (!text) return;
-	if (graphemes) return graphemes.segment(text)[Symbol.iterator]().next().value?.segment;
-	return Array.from(text)[0];
+	return leadingCharacters(text, 1) || void 0;
 }
 /** Up to two initials: the first and last word of a name split on spaces and dots. */
-function avatarInitials(name) {
-	const parts = (name ?? "").split(/[\s.]+/).filter(Boolean);
+function avatarInitials(name, { twoLetters = false } = {}) {
+	let text = (name ?? "").trim();
+	if (twoLetters && /^[^\s@]+@\S+$/.test(text)) text = text.slice(0, text.indexOf("@"));
+	const parts = text.split(twoLetters ? /[\s.@_-]+/ : /[\s.]+/).filter(Boolean);
 	const first = firstCharacter(parts[0]);
 	const last = firstCharacter(parts.at(-1));
 	if (parts.length >= 2 && first && last) return (first + last).toUpperCase();
+	if (twoLetters && parts.length === 1) return leadingCharacters(parts[0], 2).toUpperCase();
 	return first?.toUpperCase() || "?";
 }
-/** A person's picture, or their initials while it loads or when it fails. It is
-*  one image to assistive technology, named for the person, whichever shows,
-*  and their presence when it has a status dot. */
-function Avatar$1({ src, name, colorKey, size = "md", status, className }) {
+var AvatarGroupContext = createContext(null);
+/** A person's or an agent's picture, or their initials while it loads or when it fails. It is
+*  one image to assistive technology, named for them, whichever shows, and their presence when
+*  it has a status dot, unless it is `decorative`.
+*
+*  Without a picture the fill follows UIProvider's `avatarColoring`: by name from the
+*  categorical palette (the default), or by kind, where people share `--avatar-person` (with
+*  `--avatar-person-text`) and agents `--avatar-agent` (with `--avatar-agent-text`, and the
+*  edge `--avatar-agent-ring`). */
+function Avatar$1({ src, name, kind = "person", shape = kind === "agent" ? "square" : "circle", colorKey, colorClassName, size: sizeProp, status, decorative = false, tooltip = false, className }) {
 	const { common } = useStrings();
+	const byKind = useAvatarColoring() === "kind";
+	const group = use(AvatarGroupContext);
+	const size = sizeProp ?? group?.size ?? "md";
 	const who = name || common.userAvatar;
+	const named = status ? common.withPresence(who, common.presence[status]) : who;
 	const colorBy = colorKey === void 0 ? name?.trim() : colorKey;
-	return /* @__PURE__ */ jsxs("span", {
-		role: "img",
-		"aria-label": status ? common.withPresence(who, common.presence[status]) : who,
-		className: cx("relative inline-flex shrink-0", className),
+	const initials = avatarInitials(name, { twoLetters: byKind });
+	const radius = shape === "square" ? SQUARE_CLASSES[size] : "rounded-full";
+	const fill = colorClassName ?? (byKind ? KIND_CLASSES[kind] : colorBy ? categoryClasses(colorBy) : "bg-gradient-to-br from-[var(--gradient-start,var(--theme-accent))] to-[var(--gradient-mid,var(--theme-link))] text-(--theme-accent-text)");
+	const avatar = /* @__PURE__ */ jsxs("span", {
+		...decorative ? { "aria-hidden": true } : {
+			role: "img",
+			"aria-label": named
+		},
+		"data-shape": shape,
+		className: cx("relative inline-flex shrink-0", radius, group?.ring && "ring-2 ring-(--avatar-ring)", className),
 		children: [/* @__PURE__ */ jsxs(Avatar.Root, {
-			className: cx("relative inline-flex items-center justify-center overflow-hidden rounded-full font-medium select-none", SIZE_CLASSES[size]),
+			className: cx("relative inline-flex items-center justify-center overflow-hidden select-none", byKind ? "font-semibold" : "font-medium", radius, SIZE_CLASSES[size], byKind && KIND_TEXT_CLASSES[size], byKind && kind === "agent" && !colorClassName && AGENT_EDGE),
 			children: [src && /* @__PURE__ */ jsx(Avatar.Image, {
 				src,
 				alt: "",
 				loading: "lazy",
+				decoding: "async",
 				keepMounted: true,
 				className: "absolute inset-0 size-full object-cover data-error:hidden data-loading:invisible"
 			}, src), /* @__PURE__ */ jsx(Avatar.Fallback, {
 				"aria-hidden": "true",
-				className: cx("flex size-full items-center justify-center", colorBy ? categoryClasses(colorBy) : "bg-gradient-to-br from-[var(--gradient-start,var(--theme-accent))] to-[var(--gradient-mid,var(--theme-link))] text-(--theme-accent-text)"),
+				className: cx("flex size-full items-center justify-center", fill),
 				children: /* @__PURE__ */ jsx("span", {
 					className: "leading-none [text-box:trim-both_cap_alphabetic]",
-					children: size === "xs" ? firstCharacter(avatarInitials(name)) : avatarInitials(name)
+					children: size === "xs" && !byKind ? firstCharacter(initials) : initials
 				})
 			})]
 		}), status && /* @__PURE__ */ jsx("span", {
@@ -64,6 +110,72 @@ function Avatar$1({ src, name, colorKey, size = "md", status, className }) {
 			className: cx("absolute right-0 bottom-0 block rounded-full ring-2 ring-(--theme-app-bg)", STATUS_CLASSES[status], size === "xs" || size === "sm" ? "size-1.5" : size === "md" ? "size-2" : "size-2.5")
 		})]
 	});
+	if (tooltip === false || tooltip === null || tooltip === void 0) return avatar;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: tooltip === true ? named : tooltip,
+		children: avatar
+	});
+}
+var OVERLAP_CLASSES = {
+	xs: "-space-x-px",
+	sm: "-space-x-0.5",
+	md: "-space-x-1",
+	lg: "-space-x-1.5",
+	xl: "-space-x-1.5",
+	"2xl": "-space-x-1.5"
+};
+var CHIP_SIZE_CLASSES = {
+	xs: "h-4 min-w-4 px-0.5 text-[8px]",
+	sm: "h-5 min-w-5 px-1 text-[9px]",
+	md: "h-7 min-w-7 px-1 text-[11px]",
+	lg: "h-10 min-w-10 px-1.5 text-sm",
+	xl: "h-12 min-w-12 px-2 text-base",
+	"2xl": "h-16 min-w-16 px-2 text-lg"
+};
+var numberFormats = /* @__PURE__ */ new Map();
+function formatNumber(n, locale) {
+	let format = numberFormats.get(locale);
+	if (!format) {
+		format = new Intl.NumberFormat(locale);
+		numberFormats.set(locale, format);
+	}
+	return format.format(n);
+}
+/** Overlapping avatars, such as a task's assignees or who is here, with a "+N" chip for the
+*  rest. Each avatar inside takes the group's size and a ring in the color behind it, which
+*  follows its shape, round or square. */
+function AvatarGroup({ children, max, total, showOverflow = true, size = "sm", ring = true, ringColor, label, className }) {
+	const { common } = useStrings();
+	const locale = useLocale();
+	const items = Children.toArray(children);
+	const shown = max === void 0 ? items : items.slice(0, Math.max(0, max));
+	const rest = Math.max(0, (total ?? items.length) - shown.length);
+	const context = useMemo(() => ({
+		size,
+		ring
+	}), [size, ring]);
+	return /* @__PURE__ */ jsx(AvatarGroupContext, {
+		value: context,
+		children: /* @__PURE__ */ jsxs("span", {
+			...label ? {
+				role: "group",
+				"aria-label": label
+			} : {},
+			style: { "--avatar-ring": ringColor ?? "var(--theme-panel-bg)" },
+			className: cx("inline-flex shrink-0 items-center", OVERLAP_CLASSES[size], className),
+			children: [shown, showOverflow && rest > 0 && /* @__PURE__ */ jsxs("span", {
+				className: cx("relative inline-flex shrink-0 items-center justify-center rounded-full bg-(--theme-muted-panel-bg) font-medium text-(--theme-muted-text-color) tabular-nums select-none", CHIP_SIZE_CLASSES[size], ring && "ring-2 ring-(--avatar-ring)"),
+				children: [/* @__PURE__ */ jsxs("span", {
+					"aria-hidden": "true",
+					className: "leading-none [text-box:trim-both_cap_alphabetic]",
+					children: ["+", formatNumber(rest, locale)]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: common.moreCount(rest)
+				})]
+			})]
+		})
+	});
 }
 //#endregion
-export { Avatar$1 as Avatar, avatarInitials };
+export { Avatar$1 as Avatar, AvatarGroup, avatarInitials };

package/dist/components/Breadcrumbs.d.ts

@@ -1,8 +1,12 @@
+import { type ReactNode } from 'react';
 /** One step of the trail to the current page. */
 export interface Breadcrumb {
     /** Empty while the name is still loading: the trail shows a placeholder. */
     label: string;
     href?: string | undefined;
+    /** Before the label, such as the section a page belongs to; also beside
+     *  the crumb's row once it folds into the "…" menu. */
+    icon?: ReactNode;
 }
 export interface BreadcrumbsProps {
     /** The trail, ending with where the reader is. A crumb with an empty label,

package/dist/components/Breadcrumbs.js

@@ -1,14 +1,14 @@
 import { cx } from "../cx.js";
 import { buttonClasses } from "./buttonClasses.js";
 import { ChevronRightIcon, MoreIcon } from "../icons.js";
-import { keyedByContent } from "./keys.js";
 import { Tooltip } from "./Tooltip.js";
 import { useStrings } from "./Provider.js";
 import { AppLink } from "./AppLink.js";
+import { keyedByContent } from "./keys.js";
 import { ActionMenu } from "./ActionMenu.js";
 import { Skeleton } from "./Skeleton.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Breadcrumbs.tsx
 /**
 * The trail to where the reader is, as a list in a `nav` landmark. A trail too
@@ -29,16 +29,20 @@ function Breadcrumbs({ crumbs, onSelect, current = "page", heading = false, labe
 	const Last = heading ? "h1" : "span";
 	const menuItem = (crumb, index) => {
 		const name = crumb.label || common.loading;
+		const icon = crumb.icon;
 		if (crumb.href) return {
 			label: name,
+			icon,
 			href: crumb.href
 		};
 		if (onSelect) return {
 			label: name,
+			icon,
 			onClick: () => onSelect(crumb, index)
 		};
 		return {
 			label: name,
+			icon,
 			disabled: true,
 			onClick: () => {}
 		};
@@ -73,16 +77,16 @@ function Breadcrumbs({ crumbs, onSelect, current = "page", heading = false, labe
 							overflowOnly: true,
 							children: crumb.href ? /* @__PURE__ */ jsx(AppLink, {
 								href: crumb.href,
-								className: cx(crumbText, crumbLink, "max-w-48"),
-								children: crumb.label
+								className: cx(crumbText, crumbLink, crumb.icon && withIcon, "max-w-48"),
+								children: /* @__PURE__ */ jsx(CrumbLabel, { crumb })
 							}) : onSelect ? /* @__PURE__ */ jsx("button", {
 								type: "button",
 								onClick: () => onSelect(crumb, index),
-								className: cx(crumbText, crumbLink, "max-w-48 cursor-pointer text-start"),
-								children: crumb.label
+								className: cx(crumbText, crumbLink, crumb.icon && withIcon, "max-w-48 cursor-pointer text-start"),
+								children: /* @__PURE__ */ jsx(CrumbLabel, { crumb })
 							}) : /* @__PURE__ */ jsx("span", {
-								className: cx(crumbText, "max-w-48"),
-								children: crumb.label
+								className: cx(crumbText, crumb.icon && withIcon, "max-w-48"),
+								children: /* @__PURE__ */ jsx(CrumbLabel, { crumb })
 							})
 						}), /* @__PURE__ */ jsx(Separator, {})]
 					}, key);
@@ -98,8 +102,8 @@ function Breadcrumbs({ crumbs, onSelect, current = "page", heading = false, labe
 						overflowOnly: true,
 						children: /* @__PURE__ */ jsx(Last, {
 							"aria-current": current,
-							className: "m-0 block truncate text-[13px] font-medium leading-none text-(--theme-app)",
-							children: last.label
+							className: cx("m-0 block truncate text-[13px] font-medium leading-none text-(--theme-app)", last.icon && withIcon),
+							children: /* @__PURE__ */ jsx(CrumbLabel, { crumb: last })
 						})
 					})
 				})
@@ -122,6 +126,18 @@ function Breadcrumbs({ crumbs, onSelect, current = "page", heading = false, labe
 	});
 }
 var crumbText = "block truncate text-(--theme-muted-text-color)";
+var withIcon = "flex items-center gap-1";
+function CrumbLabel({ crumb }) {
+	if (!crumb.icon) return crumb.label;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "inline-flex shrink-0 [&_svg]:size-3.5",
+		children: crumb.icon
+	}), /* @__PURE__ */ jsx("span", {
+		className: "min-w-0 truncate",
+		children: crumb.label
+	})] });
+}
 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 rtl:rotate-180" });

package/dist/components/Button.d.ts

@@ -6,8 +6,9 @@ interface ButtonOwnProps extends ButtonStyle {
     className?: string | undefined;
     /** Before the label. */
     icon?: ReactNode;
-    /** Busy with what it started: a spinner takes the icon's place, and it can't
-     *  be pressed again until done. */
+    /** Busy with what it started: a spinner takes the icon's place, or without an
+     *  icon sits over the label, so the button keeps its width. It can't be
+     *  pressed again until done. */
     loading?: boolean | undefined;
 }
 /** A button, or with `href` a link that looks like one: navigation stays a

package/dist/components/Button.js

@@ -15,7 +15,17 @@ function Button$1({ variant, size = "md", iconOnly, icon, loading = false, class
 		size,
 		iconOnly
 	}), className);
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [loading ? /* @__PURE__ */ jsx(Loader, {
+	const content = loading && !icon ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: "inline-flex items-center gap-1.5 opacity-0",
+		children
+	}), /* @__PURE__ */ jsx("span", {
+		className: "absolute inset-0 flex items-center justify-center",
+		children: /* @__PURE__ */ jsx(Loader, {
+			inline: true,
+			decorative: true,
+			size: "1em"
+		})
+	})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [loading ? /* @__PURE__ */ jsx(Loader, {
 		inline: true,
 		decorative: true,
 		size: "1em"

package/dist/components/Callout.d.ts

@@ -1,7 +1,8 @@
 import type { ReactNode } from 'react';
 import { type Tone } from './tone.js';
-/** A callout's tone: `default` for a plain note, or a status. */
-export type CalloutTone = Extract<Tone, 'default' | 'info' | 'success' | 'warning' | 'error'>;
+/** A callout's tone: `default` for a plain note, a status, or `muted` for a quiet
+ *  note that something is read-only, such as a page only admins can change. */
+export type CalloutTone = Extract<Tone, 'default' | 'info' | 'success' | 'warning' | 'error' | 'muted'>;
 export interface CalloutProps {
     tone?: CalloutTone | undefined;
     /** A bold first line that says what happened; the children explain it. */

package/dist/components/Callout.js

@@ -1,5 +1,5 @@
 import { cx } from "../cx.js";
-import { CloseIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from "../icons.js";
+import { CloseIcon, ErrorIcon, InfoIcon, LockIcon, SuccessIcon, WarningIcon } from "../icons.js";
 import { toneIcon, toneSurface } from "./tone.js";
 import { useStrings } from "./Provider.js";
 import { IconButton } from "./IconButton.js";
@@ -10,7 +10,8 @@ var toneIcons = {
 	info: InfoIcon,
 	success: SuccessIcon,
 	warning: WarningIcon,
-	error: ErrorIcon
+	error: ErrorIcon,
+	muted: LockIcon
 };
 /** A message set into the page in a status's tone: guidance, a warning, an error
 *  or a success, and what to do about it. For a passing notice that floats over