@parallelworks/ui 0.51.0 → 0.52.0

package/dist/index.js

@@ -1,19 +1,22 @@
 import { cx } from "./cx.js";
-import { MenuCheckboxItem, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger } from "./components/Menu.js";
-import { EmptyState } from "./components/EmptyState.js";
 import { buttonClasses } from "./components/buttonClasses.js";
+import { MenuCheckboxItem, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger } from "./components/Menu.js";
 import { Loader } from "./components/Loader.js";
 import { toast } from "./components/Toast.js";
 import { Tooltip, TooltipProvider } from "./components/Tooltip.js";
 import { UIProvider, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader } from "./components/Provider.js";
+import { AppLink, isPlainClick } from "./components/AppLink.js";
+import { EmptyState } from "./components/EmptyState.js";
 import { useCopy } from "./components/useCopy.js";
 import { MenuEntries, MenuFilter, menuDivider } from "./components/MenuEntries.js";
 import { ActionMenu } from "./components/ActionMenu.js";
 import { Avatar, avatarInitials } from "./components/Avatar.js";
-import { BreadcrumbProvider, useBreadcrumb, useClearBreadcrumbs, useHideBreadcrumbs, useSetBreadcrumbs, useSetDefaultBreadcrumbs } from "./components/Breadcrumbs.js";
 import { Button, MethodButton } from "./components/Button.js";
-import Callout from "./components/Callout.js";
+import { isTextEntryContext, useShortcutKey } from "./components/shortcutKey.js";
+import { IconButton } from "./components/IconButton.js";
+import { Callout } from "./components/Callout.js";
 import { Card, CardHeader } from "./components/Card.js";
+import { fieldBox } from "./components/fieldBox.js";
 import { Checkbox, CheckboxGroup } from "./components/Checkbox.js";
 import { JND, composite, deltaE, parseColor, toHex, toP3 } from "./theme/color.js";
 import { apcaContrast, contrastRatio, isDarkColor } from "./theme/contrast.js";
@@ -21,26 +24,23 @@ import { CODE_STYLES, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, THEME_PRE
 import { SIDEBAR_TOKENS, THEME_TOKENS, deriveTheme, generateTheme, themeStylesheet } from "./theme/derive.js";
 import { fitSeed } from "./theme/fit.js";
 import { applyTheme, prefersWideGamut } from "./theme/index.js";
+import { ExternalLink } from "./components/ExternalLink.js";
+import { Popover, PopoverClose, useClosePopover } from "./components/Popover.js";
+import { InfoTip, formatInfoTipContent } from "./components/InfoTip.js";
 import { RequiredMark } from "./components/RequiredMark.js";
 import { ErrorText, Field, FieldOption, FieldValue, RevealToggle, useFieldControl } from "./components/Field.js";
-import { fieldBox } from "./components/fieldBox.js";
 import { Input, Textarea } from "./components/Input.js";
 import { ColorInput } from "./components/ColorInput.js";
 import { Autocomplete, Combobox } from "./components/Combobox.js";
 import { Modal, ModalDescription, ModalTitle, modalPanelClassName } from "./components/Modal.js";
 import { ConfirmModal } from "./components/ConfirmModal.js";
 import { useContextMenu } from "./components/ContextMenu.js";
-import CopyToClipboard, { CopyCodeBlock } from "./components/CopyToClipboard.js";
+import { CopyButton, CopyCodeBlock } from "./components/CopyButton.js";
 import { Disclosure, DisclosurePanel } from "./components/Disclosure.js";
 import { Switch } from "./components/Switch.js";
 import { CreateModal, CreateModalSelect, CreateModalSwitch } from "./components/CreateModal.js";
 import { DatePicker } from "./components/DatePicker.js";
-import { isTextEntryContext, useShortcutKey } from "./components/shortcutKey.js";
-import { IconButton } from "./components/IconButton.js";
-import { ExternalLink } from "./components/ExternalLink.js";
-import { Popover, PopoverClose, useClosePopover } from "./components/Popover.js";
-import { InfoTip, formatInfoTipContent } from "./components/InfoTip.js";
-import DescriptionList, { DescriptionListItem } from "./components/DescriptionList.js";
+import DescriptionList, { DescriptionListGroup, DescriptionListItem } from "./components/DescriptionList.js";
 import { Drawer } from "./components/Drawer.js";
 import { HoverCard } from "./components/HoverCard.js";
 import { LetterBadge } from "./components/LetterBadge.js";
@@ -50,7 +50,8 @@ import { NumberInput } from "./components/NumberInput.js";
 import { OneTimeCodeInput } from "./components/OneTimeCodeInput.js";
 import { LoadingRegion, Skeleton } from "./components/Skeleton.js";
 import { Overview } from "./components/Overview.js";
-import { BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, HeaderActionMenu, HeaderAddButton, HeaderEditButton, PageHeader } from "./components/PageHeader.js";
+import { PageHeader, PageHeaderBar, PageHeaderProvider } from "./components/PageHeader.js";
+import { PageHeaderAction, PageHeaderAddButton, PageHeaderMenu } from "./components/PageHeaderAction.js";
 import { Select } from "./components/Select.js";
 import { PAGE_SIZES, Pagination } from "./components/Pagination.js";
 import { Radio, RadioGroup } from "./components/Radio.js";
@@ -64,12 +65,11 @@ import { SegmentedControl } from "./components/SegmentedControl.js";
 import { SettingModeOption } from "./components/SettingModeOption.js";
 import { SettingRow, SettingsCard, SettingsHeading } from "./components/SettingsCard.js";
 import { Slider } from "./components/Slider.js";
-import Sort from "./components/Sort.js";
 import { StatusBadge, StatusDot, statusTextClass } from "./components/StatusBadge.js";
-import { CompactTable, Table } from "./components/Table.js";
+import { Table } from "./components/Table.js";
 import { TabPanel, Tabs } from "./components/Tabs.js";
 import { ThemeEditor, ThemePreview } from "./components/ThemeEditor.js";
 import { ToggleGroup } from "./components/ToggleGroup.js";
 import { useCssIsDark } from "./components/useCssIsDark.js";
 import { useApplyTheme, useColorMode } from "./components/useTheme.js";
-export { ActionMenu, Autocomplete, Avatar, BreadcrumbProvider, BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, Button, CODE_STYLES, Callout, Card, CardHeader, Checkbox, CheckboxGroup, ColorInput, Combobox, CompactTable, ConfirmModal, CopyCodeBlock, CopyToClipboard, CreateModal, CreateModalSelect, CreateModalSwitch, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, DatePicker, DescriptionList, DescriptionListItem, Disclosure, DisclosurePanel, Drawer, Elapsed, EmptyState, ErrorText, ExternalLink, Field, FieldOption, FieldValue, HeaderActionMenu, HeaderAddButton, HeaderEditButton, HoverCard, IconButton, InfoTip, Input, JND, LetterBadge, Loader, LoadingRegion, Markdown, MenuCheckboxItem, MenuEntries, MenuFilter, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger, Meter, MethodButton, Modal, ModalDescription, ModalTitle, NumberInput, OneTimeCodeInput, Overview, PAGE_SIZES, PageHeader, Pagination, Popover, PopoverClose, ProgressBar, Radio, RadioGroup, RefreshButton, RelativeTime, RequiredMark, RevealToggle, RunStatusIcon, SIDEBAR_TOKENS, SearchInput, Section, SegmentedControl, Select, SettingModeOption, SettingRow, SettingsCard, SettingsHeading, Skeleton, Slider, Sort, StatusBadge, StatusDot, Switch, THEME_PRESETS, THEME_TOKENS, TabPanel, Table, Tabs, Textarea, ThemeEditor, ThemePreview, ToggleGroup, Tooltip, TooltipProvider, UIProvider, apcaContrast, applyTheme, avatarInitials, buttonClasses, composite, contrastRatio, cx, deltaE, deriveTheme, fieldBox, fitSeed, formatBytes, formatCount, formatDateTime, formatDuration, formatInfoTipContent, formatTimeLeft, generateTheme, isDarkColor, isTextEntryContext, levelTone, menuDivider, modalPanelClassName, modeOf, parseColor, parseTheme, prefersWideGamut, resolveMode, runStatusTone, schemeFor, serializeTheme, statusTextClass, themeStylesheet, toHex, toP3, toast, useApplyTheme, useBreadcrumb, useClearBreadcrumbs, useClock, useClosePopover, useColorMode, useContextMenu, useCopy, useCssIsDark, useElapsed, useFieldControl, useHideBreadcrumbs, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRelativeTime, useRunFile, useSetBreadcrumbs, useSetDefaultBreadcrumbs, useShortcutKey, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };
+export { ActionMenu, AppLink, Autocomplete, Avatar, Button, CODE_STYLES, Callout, Card, CardHeader, Checkbox, CheckboxGroup, ColorInput, Combobox, ConfirmModal, CopyButton, CopyCodeBlock, CreateModal, CreateModalSelect, CreateModalSwitch, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, DatePicker, DescriptionList, DescriptionListGroup, DescriptionListItem, Disclosure, DisclosurePanel, Drawer, Elapsed, EmptyState, ErrorText, ExternalLink, Field, FieldOption, FieldValue, HoverCard, IconButton, InfoTip, Input, JND, LetterBadge, Loader, LoadingRegion, Markdown, MenuCheckboxItem, MenuEntries, MenuFilter, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger, Meter, MethodButton, Modal, ModalDescription, ModalTitle, NumberInput, OneTimeCodeInput, Overview, PAGE_SIZES, PageHeader, PageHeaderAction, PageHeaderAddButton, PageHeaderBar, PageHeaderMenu, PageHeaderProvider, Pagination, Popover, PopoverClose, ProgressBar, Radio, RadioGroup, RefreshButton, RelativeTime, RequiredMark, RevealToggle, RunStatusIcon, SIDEBAR_TOKENS, SearchInput, Section, SegmentedControl, Select, SettingModeOption, SettingRow, SettingsCard, SettingsHeading, Skeleton, Slider, StatusBadge, StatusDot, Switch, THEME_PRESETS, THEME_TOKENS, TabPanel, Table, Tabs, Textarea, ThemeEditor, ThemePreview, ToggleGroup, Tooltip, TooltipProvider, UIProvider, apcaContrast, applyTheme, avatarInitials, buttonClasses, composite, contrastRatio, cx, deltaE, deriveTheme, fieldBox, fitSeed, formatBytes, formatCount, formatDateTime, formatDuration, formatInfoTipContent, formatTimeLeft, generateTheme, isDarkColor, isPlainClick, isTextEntryContext, levelTone, menuDivider, modalPanelClassName, modeOf, parseColor, parseTheme, prefersWideGamut, resolveMode, runStatusTone, schemeFor, serializeTheme, statusTextClass, themeStylesheet, toHex, toP3, toast, useApplyTheme, useClock, useClosePopover, useColorMode, useContextMenu, useCopy, useCssIsDark, useElapsed, useFieldControl, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRelativeTime, useRunFile, useShortcutKey, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };

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,93 @@
 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 { 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 +96,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 +111,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 (process.env.NODE_ENV === "production") 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 (process.env.NODE_ENV === "production") 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 };