@parallelworks/ui 0.51.0 → 0.53.0

package/dist/list/ActionToolbar.d.ts

@@ -3,6 +3,9 @@ import type { RowAction } from './rowMenu.js';
 export type ToolbarAction = RowAction & {
     /** A hint on the enabled button. */
     tooltip?: string | undefined;
+    /** The one action the view leads to, filled in the accent. Give it to one
+     *  action at most: the rest are outlined, so it stands out. */
+    primary?: boolean | undefined;
     hidden?: boolean;
 };
 /** A pre-rendered element (e.g. a button component that owns its modal). */
@@ -12,17 +15,50 @@ interface ToolbarElement {
     hidden?: boolean;
 }
 export type ToolbarItem = ToolbarAction | ToolbarElement;
-/** A toolbar action as a button: a link with `href`, a toggle with `checked`. */
+/** A toolbar action as a button: a link with `href`, a toggle with `checked`.
+ *  In an ActionToolbar it is one of its items, reached with the arrow keys. */
 export declare function ToolbarButton({ action }: {
     action: ToolbarAction;
 }): import("react").JSX.Element;
-/** Pins a detail-page toolbar just below the sticky breadcrumb strip (top-10 matches the strip's 40px height). */
-export declare const stickyToolbarClasses = "sticky top-10 z-(--layer-sticky) bg-(--theme-app-bg)";
-/** Action groups left, secondary actions right (collapsing into a `…` menu). */
-export declare function ActionToolbar({ groups, right, sticky, }: {
+/** How the toolbar fits its row: the items whose labels fold to their icons,
+ *  and those moved into the `…` menu, by key. */
+export interface ToolbarFit {
+    folded: readonly string[];
+    overflow: readonly string[];
+}
+/** An item's widths with its label and folded to its icon. */
+export interface ItemWidth {
+    key: string;
+    full: number;
+    folded: number;
+    primary: boolean;
+}
+/**
+ * Fits a toolbar to `available` pixels one item at a time, stopping as soon as
+ * it fits, so it keeps every label the width allows. Items go lowest priority
+ * first: the right-hand ones, then the last group's, and so on, each from the
+ * end. First their labels fold to their icons, one by one; then, all folded,
+ * they move into the `…` menu in the same order; the primary action never
+ * moves, and its label folds only once nothing else is left to try.
+ */
+export declare function fitToolbar(groups: ItemWidth[][], right: ItemWidth[], available: number): ToolbarFit;
+/** Pins a toolbar to the top of the page's scroll area while the content scrolls under it. */
+export declare const stickyToolbarClasses = "sticky top-0 z-(--layer-sticky) bg-(--theme-app-bg)";
+/** A view's controls in one WAI-ARIA toolbar: a single tab stop, with the arrow
+ *  keys moving between its items, the `…` menu and disabled ones included, so
+ *  their reasons stay reachable. Action groups sit on the left and `right` holds
+ *  secondary actions at the end. It stays one row: when it runs out of room
+ *  labels fold to their icons one at a time, then actions move into a `…` menu,
+ *  the right-hand ones first and the primary action never. Give each action its
+ *  own icon, since a folded one is known by it, and mark the one action the
+ *  view leads to `primary`. */
+export declare function ActionToolbar({ groups, right, sticky, label, }: {
     groups: ToolbarItem[][];
     right?: ToolbarItem[];
-    /** Pin below the breadcrumb strip while the page scrolls. Requires the toolbar's parent to span the page content. */
+    /** Pins it to the top of the page's scroll area while the page scrolls. */
     sticky?: boolean;
+    /** Names the toolbar for assistive technology, such as "Log controls";
+     *  defaults to "Actions". */
+    label?: string | undefined;
 }): import("react").JSX.Element;
 export {};

package/dist/list/ActionToolbar.js

@@ -1,57 +1,94 @@
 import { cx } from "../cx.js";
-import { MoreIcon } from "../icons.js";
-import { MenuPopup } from "../components/Menu.js";
 import { buttonClasses } from "../components/buttonClasses.js";
+import { MoreIcon } from "../icons.js";
+import { MenuPopup, MenuSeparator } from "../components/Menu.js";
+import { isDev } from "../dev.js";
 import { Tooltip } from "../components/Tooltip.js";
-import { useLink, useStrings } from "../components/Provider.js";
+import { useStrings } from "../components/Provider.js";
+import { AppLink } from "../components/AppLink.js";
 import { MenuEntries, useRunAction, warnIfInert } from "../components/MenuEntries.js";
-import { Button } from "../components/Button.js";
 import { Menu } from "@base-ui/react/menu";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, createContext, useContext, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, cloneElement, createContext, isValidElement, use, useLayoutEffect, useRef, useState } from "react";
+import { Button } from "@base-ui/react/button";
 import { Toggle } from "@base-ui/react/toggle";
+import { Toolbar } from "@base-ui/react/toolbar";
 //#region src/list/ActionToolbar.tsx
-var OverflowMenuContext = createContext(false);
-function ToolbarItemView({ item }) {
-	if ("element" in item) return /* @__PURE__ */ jsx(Fragment, { children: item.element });
-	return /* @__PURE__ */ jsx(ToolbarButton, { action: item });
+var PlacementContext = createContext("alone");
+var FoldedContext = createContext(false);
+/** A toolbar button's classes: outlined unless it's the view's one primary
+*  action, so the toolbar has a hierarchy; a toggle shows its state by
+*  `aria-pressed` instead of a fill. A destructive one reads in the error
+*  color, as it does in a menu. */
+function actionClasses(action, iconOnly) {
+	const primary = action.primary && action.checked === void 0;
+	return cx(buttonClasses({
+		variant: primary ? "primary" : "outline",
+		size: "sm",
+		iconOnly
+	}), action.destructive && !primary && "text-(--theme-error-text)");
 }
-/** A toolbar action as a button: a link with `href`, a toggle with `checked`. */
+/** A toolbar action as a button: a link with `href`, a toggle with `checked`.
+*  In an ActionToolbar it is one of its items, reached with the arrow keys. */
 function ToolbarButton({ action }) {
-	const inOverflowMenu = useContext(OverflowMenuContext);
-	const Link = useLink();
+	const placement = use(PlacementContext);
 	const runAction = useRunAction();
-	if (inOverflowMenu) return /* @__PURE__ */ jsx(MenuEntries, { entries: [action] });
-	const className = buttonClasses({
-		variant: action.checked === false ? "outline" : "primary",
-		size: "md"
-	});
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [action.icon, action.label] });
+	const folded = use(FoldedContext);
+	if (placement === "menu") return /* @__PURE__ */ jsx(MenuEntries, { entries: [action] });
 	warnIfInert(action, "ActionToolbar");
+	const iconOnly = Boolean(action.icon) && placement === "toolbar" && folded;
+	const className = actionClasses(action, iconOnly);
+	const reason = action.disabled ? action.disabledReason : void 0;
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		action.icon,
+		iconOnly ? /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: action.label
+		}) : action.label,
+		reason && /* @__PURE__ */ jsxs("span", {
+			className: "sr-only",
+			children: [". ", reason]
+		})
+	] });
 	const run = () => runAction(action);
+	const inToolbar = placement === "toolbar";
 	let control;
-	if (action.href && !action.disabled) control = /* @__PURE__ */ jsx(Link, {
-		href: action.href,
-		className,
-		children: content
-	});
-	else if (action.checked !== void 0) control = /* @__PURE__ */ jsx(Toggle, {
-		pressed: action.checked,
-		onPressedChange: run,
-		disabled: action.disabled,
-		className,
-		children: content
-	});
-	else control = /* @__PURE__ */ jsx(Button, {
-		variant: "primary",
-		size: "md",
-		onClick: run,
-		disabled: action.disabled,
-		focusableWhenDisabled: true,
-		children: content
-	});
+	if (action.href) {
+		const link = /* @__PURE__ */ jsx(AppLink, {
+			href: action.href,
+			reloadDocument: action.reloadDocument,
+			target: action.target,
+			disabled: action.disabled,
+			className
+		});
+		control = inToolbar ? /* @__PURE__ */ jsx(Toolbar.Link, {
+			render: link,
+			children: content
+		}) : cloneElement(link, void 0, content);
+	} else if (action.checked !== void 0) {
+		const toggle = /* @__PURE__ */ jsx(Toggle, {
+			pressed: action.checked,
+			onPressedChange: run,
+			disabled: action.disabled,
+			className
+		});
+		control = inToolbar ? /* @__PURE__ */ jsx(Toolbar.Button, {
+			render: toggle,
+			disabled: action.disabled,
+			children: content
+		}) : cloneElement(toggle, void 0, content);
+	} else {
+		const Control = inToolbar ? Toolbar.Button : Button;
+		control = /* @__PURE__ */ jsx(Control, {
+			onClick: run,
+			disabled: action.disabled,
+			focusableWhenDisabled: true,
+			className,
+			children: content
+		});
+	}
 	return /* @__PURE__ */ jsx(Tooltip, {
-		content: action.disabled ? action.disabledReason : action.tooltip,
+		content: reason ?? (iconOnly ? action.tooltip ?? action.label : action.tooltip),
 		side: "bottom",
 		children: control
 	});
@@ -60,11 +97,12 @@ function OverflowMenu({ items }) {
 	const { list: t } = useStrings();
 	return /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(Tooltip, {
 		content: t.moreActions,
-		children: /* @__PURE__ */ jsx(Menu.Trigger, {
+		children: /* @__PURE__ */ jsx(Toolbar.Button, {
+			render: /* @__PURE__ */ jsx(Menu.Trigger, {}),
 			"aria-label": t.moreActions,
 			className: buttonClasses({
 				variant: "outline",
-				size: "md",
+				size: "sm",
 				iconOnly: true
 			}),
 			"data-testid": "action-toolbar-menu-button",
@@ -74,80 +112,239 @@ function OverflowMenu({ items }) {
 		keepMounted: true,
 		align: "end",
 		className: "min-w-56",
-		children: /* @__PURE__ */ jsx(OverflowMenuContext.Provider, {
-			value: true,
-			children: items.map((item) => "element" in item ? /* @__PURE__ */ jsx(Fragment$1, { children: item.element }, item.key) : /* @__PURE__ */ jsx(MenuEntries, { entries: [item] }, item.key))
+		children: /* @__PURE__ */ jsx(PlacementContext, {
+			value: "menu",
+			children: items.map((group, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [i > 0 && /* @__PURE__ */ jsx(MenuSeparator, {}), group.map((item) => "element" in item ? /* @__PURE__ */ jsx(Fragment$1, { children: item.element }, item.key) : /* @__PURE__ */ jsx(MenuEntries, { entries: [item] }, item.key))] }, group[0]?.key ?? i))
 		})
 	})] });
 }
-var MENU_BUTTON_WIDTH = 40;
+var FITS_ALL = {
+	folded: [],
+	overflow: []
+};
+var GROUP_GAP = 10;
 var ITEM_GAP = 4;
-function fitCount(widths, available, gap, menuWidth) {
-	if (widths.length === 0) return 0;
-	if (widths.reduce((sum, w) => sum + w, 0) + gap * (widths.length - 1) <= available) return widths.length;
-	let used = menuWidth;
-	let count = 0;
-	for (const w of widths) {
-		if (used + gap + w > available) break;
-		used += gap + w;
-		count++;
+var MENU_BUTTON_WIDTH = 28;
+function rowWidth(groups, right, fit) {
+	const hidden = new Set(fit.overflow);
+	const folded = new Set(fit.folded);
+	const width = (item) => folded.has(item.key) ? item.folded : item.full;
+	const run = (items) => items.reduce((sum, item) => sum + width(item), 0) + ITEM_GAP * (items.length - 1);
+	const shownGroups = groups.map((group) => group.filter((item) => !hidden.has(item.key))).filter((group) => group.length > 0);
+	let total = shownGroups.reduce((sum, group) => sum + run(group), 0);
+	total += (shownGroups.length - 1) * 21;
+	const shownRight = right.filter((item) => !hidden.has(item.key));
+	const end = (shownRight.length > 0 ? run(shownRight) : 0) + (hidden.size > 0 ? MENU_BUTTON_WIDTH + (shownRight.length > 0 ? ITEM_GAP : 0) : 0);
+	if (end > 0) total += end + (shownGroups.length > 0 ? GROUP_GAP : 0);
+	return Math.max(total, 0);
+}
+/**
+* Fits a toolbar to `available` pixels one item at a time, stopping as soon as
+* it fits, so it keeps every label the width allows. Items go lowest priority
+* first: the right-hand ones, then the last group's, and so on, each from the
+* end. First their labels fold to their icons, one by one; then, all folded,
+* they move into the `…` menu in the same order; the primary action never
+* moves, and its label folds only once nothing else is left to try.
+*/
+function fitToolbar(groups, right, available) {
+	const fits = (fit) => rowWidth(groups, right, fit) <= available + .5;
+	if (fits(FITS_ALL)) return FITS_ALL;
+	const byPriority = [...right].reverse().concat(...[...groups].reverse().map((g) => [...g].reverse()));
+	const rest = byPriority.filter((item) => !item.primary);
+	const folded = [];
+	for (const item of rest) {
+		if (item.folded >= item.full) continue;
+		folded.push(item.key);
+		const fit = {
+			folded: [...folded],
+			overflow: []
+		};
+		if (fits(fit)) return fit;
 	}
-	return count;
+	const overflow = [];
+	for (const item of rest) {
+		overflow.push(item.key);
+		const fit = {
+			folded: [...folded],
+			overflow: [...overflow]
+		};
+		if (fits(fit)) return fit;
+	}
+	const primary = byPriority.filter((item) => item.primary).map((item) => item.key);
+	return {
+		folded: [...folded, ...primary],
+		overflow
+	};
 }
-/** Measures in a layout effect (before paint) so the inline/overflow split never flashes. */
-function CollapsibleRight({ items }) {
-	const wrapRef = useRef(null);
-	const itemRefs = useRef({});
-	const widthCache = useRef({});
-	const [available, setAvailable] = useState(Number.POSITIVE_INFINITY);
-	const [count, setCount] = useState(items.length);
+var sameFit = (a, b) => a.folded.join("\n") === b.folded.join("\n") && a.overflow.join("\n") === b.overflow.join("\n");
+var isPrimary = (item) => "label" in item && Boolean(item.primary);
+/**
+* Fits the toolbar to its own width. It measures a hidden copy of the actions,
+* each with its label and folded, and caches the widths of element items as
+* they render, so the answer doesn't depend on how the toolbar is folded at the
+* moment and settles within one paint.
+*/
+function useToolbarFit(root, copy, groups, right) {
+	const [fit, setFit] = useState(FITS_ALL);
+	const elementWidths = useRef(/* @__PURE__ */ new Map());
+	const measure = useRef(() => {});
+	measure.current = () => {
+		const available = root?.clientWidth ?? 0;
+		if (!root || !copy || available === 0) {
+			setFit((prev) => sameFit(prev, FITS_ALL) ? prev : FITS_ALL);
+			return;
+		}
+		const measured = /* @__PURE__ */ new Map();
+		for (const el of copy.querySelectorAll("[data-measure]")) {
+			const key = el.dataset["measure"] ?? "";
+			const widths = measured.get(key) ?? {};
+			widths[el.dataset["fold"] === "folded" ? "folded" : "full"] = el.getBoundingClientRect().width;
+			measured.set(key, widths);
+		}
+		for (const el of root.querySelectorAll("[data-toolbar-element]")) {
+			const key = el.dataset["toolbarElement"] ?? "";
+			const widths = elementWidths.current.get(key) ?? {};
+			widths[fit.folded.includes(key) ? "folded" : "full"] = el.getBoundingClientRect().width;
+			elementWidths.current.set(key, widths);
+		}
+		const widthsOf = (item) => {
+			const w = ("element" in item ? elementWidths.current : measured).get(item.key) ?? {};
+			const full = w.full ?? w.folded ?? 0;
+			return {
+				key: item.key,
+				full,
+				folded: w.folded ?? full,
+				primary: isPrimary(item)
+			};
+		};
+		const next = fitToolbar(groups.map((g) => g.map(widthsOf)), right.map(widthsOf), available);
+		setFit((prev) => sameFit(prev, next) ? prev : next);
+	};
+	useLayoutEffect(() => measure.current());
 	useLayoutEffect(() => {
-		const el = wrapRef.current;
-		if (!el) return;
-		const update = () => setAvailable(el.clientWidth);
-		update();
-		const observer = new ResizeObserver(update);
-		observer.observe(el);
+		if (!root || !copy) return;
+		const observer = new ResizeObserver(() => measure.current());
+		observer.observe(root);
+		observer.observe(copy);
 		return () => observer.disconnect();
-	}, []);
-	useLayoutEffect(() => {
-		for (const key in itemRefs.current) {
-			const el = itemRefs.current[key];
-			if (el) widthCache.current[key] = el.offsetWidth;
-		}
-		const next = fitCount(items.map((item) => widthCache.current[item.key] ?? 0), available, ITEM_GAP, MENU_BUTTON_WIDTH);
-		setCount((prev) => prev === next ? prev : next);
+	}, [root, copy]);
+	return fit;
+}
+/** The hidden copy `useToolbarFit` measures: each action with its label and
+*  folded to its icon, styled as its button is. */
+function MeasuringCopy({ items, ref }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		inert: true,
+		className: "pointer-events-none invisible absolute top-0 left-0 size-0 overflow-hidden",
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			className: "flex w-max gap-1",
+			children: items.map((item) => "element" in item ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+				"data-measure": item.key,
+				"data-fold": "full",
+				className: actionClasses(item, false),
+				children: [item.icon, item.label]
+			}), item.icon && /* @__PURE__ */ jsx("span", {
+				"data-measure": item.key,
+				"data-fold": "folded",
+				className: actionClasses(item, true),
+				children: item.icon
+			})] }, item.key))
+		})
 	});
-	const visible = items.slice(0, count);
-	const overflow = items.slice(count);
-	return /* @__PURE__ */ jsxs("div", {
-		ref: wrapRef,
-		className: "flex-1 min-w-0 flex items-center justify-end gap-1",
-		children: [visible.map((item) => /* @__PURE__ */ jsx("span", {
-			ref: (el) => {
-				itemRefs.current[item.key] = el;
-			},
+}
+function ItemSlot({ item, folded }) {
+	return /* @__PURE__ */ jsx(FoldedContext, {
+		value: folded,
+		children: "element" in item ? /* @__PURE__ */ jsx("span", {
+			"data-toolbar-element": item.key,
 			className: "inline-flex shrink-0",
-			children: /* @__PURE__ */ jsx(ToolbarItemView, { item })
-		}, item.key)), overflow.length > 0 && /* @__PURE__ */ jsx(OverflowMenu, { items: overflow })]
+			children: item.element
+		}) : /* @__PURE__ */ jsx(ToolbarButton, { action: item })
 	});
 }
-/** Pins a detail-page toolbar just below the sticky breadcrumb strip (top-10 matches the strip's 40px height). */
-var stickyToolbarClasses = "sticky top-10 z-(--layer-sticky) bg-(--theme-app-bg)";
-/** Action groups left, secondary actions right (collapsing into a `…` menu). */
-function ActionToolbar({ groups, right = [], sticky = false }) {
+/** Pins a toolbar to the top of the page's scroll area while the content scrolls under it. */
+var stickyToolbarClasses = "sticky top-0 z-(--layer-sticky) bg-(--theme-app-bg)";
+/** A view's controls in one WAI-ARIA toolbar: a single tab stop, with the arrow
+*  keys moving between its items, the `…` menu and disabled ones included, so
+*  their reasons stay reachable. Action groups sit on the left and `right` holds
+*  secondary actions at the end. It stays one row: when it runs out of room
+*  labels fold to their icons one at a time, then actions move into a `…` menu,
+*  the right-hand ones first and the primary action never. Give each action its
+*  own icon, since a folded one is known by it, and mark the one action the
+*  view leads to `primary`. */
+function ActionToolbar({ groups, right = [], sticky = false, label }) {
+	const { common } = useStrings();
+	const [root, setRoot] = useState(null);
+	const [copy, setCopy] = useState(null);
 	const visibleGroups = groups.map((group) => group.filter((a) => !a.hidden)).filter((group) => group.length > 0);
 	const visibleRight = right.filter((a) => !a.hidden);
-	return /* @__PURE__ */ jsxs("div", {
-		className: cx("flex items-center gap-2.5", sticky && cx("sticky top-10 z-(--layer-sticky) bg-(--theme-app-bg)", "py-1.5")),
-		children: [visibleGroups.length > 0 && /* @__PURE__ */ jsx("div", {
-			className: "flex items-center gap-2.5 shrink-0",
-			children: visibleGroups.map((group, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [i > 0 && /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-(--theme-border)" }), /* @__PURE__ */ jsx("div", {
-				className: "flex items-center gap-1",
-				children: group.map((item) => /* @__PURE__ */ jsx(ToolbarItemView, { item }, item.key))
-			})] }, group[0]?.key ?? i))
-		}), visibleRight.length > 0 && /* @__PURE__ */ jsx(CollapsibleRight, { items: visibleRight })]
+	const all = [...visibleGroups.flat(), ...visibleRight];
+	warnIfManyPrimary(all);
+	warnIfIconsRepeat(all);
+	const fit = useToolbarFit(root, copy, visibleGroups, visibleRight);
+	const overflow = new Set(fit.overflow);
+	const folded = new Set(fit.folded);
+	const shown = (items) => items.filter((item) => !overflow.has(item.key));
+	const shownGroups = visibleGroups.map(shown).filter((group) => group.length > 0);
+	const shownRight = shown(visibleRight);
+	const menu = [...visibleGroups, visibleRight].map((group) => group.filter((item) => overflow.has(item.key))).filter((group) => group.length > 0);
+	return /* @__PURE__ */ jsxs(Toolbar.Root, {
+		ref: setRoot,
+		"aria-label": label ?? common.actions,
+		className: cx("relative flex min-w-0 items-center gap-2.5", sticky && cx("sticky top-0 z-(--layer-sticky) bg-(--theme-app-bg)", "py-1.5")),
+		children: [/* @__PURE__ */ jsx(MeasuringCopy, {
+			ref: setCopy,
+			items: all
+		}), /* @__PURE__ */ jsxs(PlacementContext, {
+			value: "toolbar",
+			children: [shownGroups.map((group, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [i > 0 && /* @__PURE__ */ jsx(Toolbar.Separator, {
+				orientation: "vertical",
+				className: "h-5 w-px shrink-0 bg-(--theme-border)"
+			}), /* @__PURE__ */ jsx(Toolbar.Group, {
+				className: "flex shrink-0 items-center gap-1",
+				children: group.map((item) => /* @__PURE__ */ jsx(ItemSlot, {
+					item,
+					folded: folded.has(item.key)
+				}, item.key))
+			})] }, group[0]?.key ?? i)), (shownRight.length > 0 || menu.length > 0) && /* @__PURE__ */ jsxs("div", {
+				className: "ml-auto flex shrink-0 items-center gap-1",
+				children: [shownRight.map((item) => /* @__PURE__ */ jsx(ItemSlot, {
+					item,
+					folded: folded.has(item.key)
+				}, item.key)), menu.length > 0 && /* @__PURE__ */ jsx(OverflowMenu, { items: menu })]
+			})]
+		})]
 	});
 }
+var warnedPrimary = /* @__PURE__ */ new Set();
+/** Warns in development when more than one action is primary: the fill marks
+*  the one next step, so two of them mark none. */
+function warnIfManyPrimary(items) {
+	if (!isDev()) return;
+	const labels = items.flatMap((item) => "label" in item && item.primary ? [item.label] : []);
+	const names = labels.map((label) => `"${label}"`).join(", ");
+	if (labels.length < 2 || warnedPrimary.has(names)) return;
+	warnedPrimary.add(names);
+	console.warn(`ActionToolbar: ${names} are all primary; mark one action at most.`);
+}
+var warnedIcons = /* @__PURE__ */ new Set();
+/** Warns in development when two actions share an icon: folded to their icons
+*  in a narrow toolbar, they would look the same. */
+function warnIfIconsRepeat(items) {
+	if (!isDev()) return;
+	const byIcon = /* @__PURE__ */ new Map();
+	for (const item of items) {
+		if ("element" in item || !isValidElement(item.icon) || typeof item.icon.type === "string") continue;
+		byIcon.set(item.icon.type, [...byIcon.get(item.icon.type) ?? [], item.label]);
+	}
+	for (const labels of byIcon.values()) {
+		const names = labels.map((label) => `"${label}"`).join(", ");
+		if (labels.length < 2 || warnedIcons.has(names)) continue;
+		warnedIcons.add(names);
+		console.warn(`ActionToolbar: ${names} share an icon, so they look the same once their labels fold; give each its own.`);
+	}
+}
 //#endregion
-export { ActionToolbar, ToolbarButton, stickyToolbarClasses };
+export { ActionToolbar, ToolbarButton, fitToolbar, stickyToolbarClasses };

package/dist/list/ListPage.d.ts

@@ -1,40 +1,29 @@
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import type { OpenMenu } from '../components/ContextMenu.js';
 import { type MenuEntry } from '../components/MenuEntries.js';
-import { type PageHeaderBreadcrumb } from '../components/PageHeader.js';
 import type { ListView, ListViewChrome } from './listView.js';
 import { type RowAction } from './rowMenu.js';
-/** Negative offsets (admin/org) cancel the shell's pt-4 so rows don't peek through the gap above the pinned header. */
-declare const SECTION_STICKY_TOP: {
-    readonly main: 'top-0';
-    readonly kubernetes: 'top-0';
-    readonly admin: '-top-4';
-    readonly org: '-top-4';
-};
-export type ListSection = keyof typeof SECTION_STICKY_TOP;
 export declare function ListRowActionsProvider({ view, children, }: {
     view?: ListViewChrome | undefined;
     children: ReactNode;
 }): import("react").JSX.Element;
 export interface ListPageProps {
-    section?: ListSection;
-    /** Force edge-to-edge negative margin for a main-shell page nested under a padded route layout. */
-    shellPadded?: boolean;
-    /** Rendered inside a route layout that already owns the page header (e.g. a
-     * detail page's tab body). Skips this page's own header so the global
-     * breadcrumb strip stays visible, keeping only the toolbar. */
-    embedded?: boolean;
-    breadcrumbs?: PageHeaderBreadcrumb[] | undefined;
-    title?: ReactNode;
-    titleAction?: ReactNode;
-    actions?: ReactNode;
+    /** Reaches past the host's content padding (`p-4`) to the container's
+     *  edges, for a host whose page container is padded. A list runs edge to
+     *  edge so its rows' hover and dividers span the page. */
+    bleed?: boolean | undefined;
+    /** The list's search, filters and view controls, above the rows. The page's
+     *  trail and actions go in its `PageHeader`. */
     toolbar?: ReactNode;
     /** Omit on pages without a list view — rows show all actions by default. */
     view?: ListViewChrome | undefined;
     children: ReactNode;
 }
-export declare function ListPage({ section, shellPadded, embedded, breadcrumbs, title, titleAction, actions, toolbar, view, children, }: ListPageProps): import("react").JSX.Element;
+/** A list filling the page: its toolbar stays put while only the rows scroll. */
+export declare function ListPage({ bleed, toolbar, view, children }: ListPageProps): import("react").JSX.Element;
 export declare function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selected, selectionActive, onRowSelect, leading, className, children, }: {
+    /** Where the row goes. Its `NameCell` with the same href becomes a link
+     *  covering the row; a click the link doesn't catch still goes there. */
     href: string | null;
     /** Plain-click handler for rows that open something in place instead of navigating. */
     onActivate?: (() => void) | undefined;
@@ -53,7 +42,11 @@ export declare function ListRow({ href, onActivate, items, goTo, openMenu, pinne
     leading?: ReactNode;
     children: ReactNode;
 }): import("react").JSX.Element;
-/** Name column min-width is by role, not position, so a leading checkbox doesn't shift it. */
+/** Name column min-width is by role, not position, so a leading checkbox
+ *  doesn't shift it. A column with an `orderBy` the view offers sorts by it.
+ *  While the view's column headers are off, the header row collapses: its
+ *  cells still size the columns, but nobody sees or hears them, as with any
+ *  other display option that is off. */
 export declare function ListColumns<T>({ view }: {
     view: ListView<T>;
 }): import("react").JSX.Element;
@@ -62,4 +55,3 @@ export declare namespace ListColumns {
 }
 /** Stable `goTo` for whole-row navigation (`rowNavProps`, `ListRow`). */
 export declare function useListNavigate(): (to: string) => void;
-export {};