@parallelworks/ui 0.40.1 → 0.42.0

package/dist/index.js

@@ -1,49 +1,50 @@
+import { MenuCheckboxItem, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger } from "./components/Menu.js";
+import { Tooltip, TooltipProvider } from "./components/Tooltip.js";
 import { UIProvider, useNavigation, useNotify, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader } from "./components/Provider.js";
-import { GlobalTooltip, TOOLTIP_ID, TooltipInfo, formatTooltipContent, truncationTooltipProps } from "./components/Tooltip.js";
-import { AddMenu } from "./components/AddMenu.js";
+import { MenuEntries, MenuFilter, menuDivider } from "./components/MenuEntries.js";
+import { ActionMenu } from "./components/ActionMenu.js";
 import { Avatar, avatarInitials } from "./components/Avatar.js";
-import { BareModal, modalPanelClasses } from "./components/BareModal.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 { Card, CardHeader } from "./components/Card.js";
-import { ControlledCollapsiblePanel, MaybeCollapsible, UncontrolledCollapsiblePanel } from "./components/CollapsiblePanel.js";
+import { Autocomplete, Combobox } from "./components/Combobox.js";
 import { dangerButtonClasses, ghostButtonClasses, primaryButtonClasses } from "./components/ghostButton.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 { DropdownCaret, filterOption, flattenOptions, isCategory, isOption, toggleSetMember } from "./components/dropdownUtils.js";
-import { CREATE_MODAL_SELECT_FILTER_THRESHOLD, CreateModal, CreateModalAutocompleteField, CreateModalField, CreateModalSelect, CreateModalSwitch, CreateModalTextarea } from "./components/CreateModal.js";
+import { InfoTip, formatInfoTipContent } from "./components/InfoTip.js";
+import { Switch } from "./components/Switch.js";
+import { CreateModal, CreateModalAutocompleteField, CreateModalField, CreateModalSelect, CreateModalSwitch, CreateModalTextarea } from "./components/CreateModal.js";
 import DescriptionList, { DescriptionListItem } from "./components/DescriptionList.js";
-import Dropdown from "./components/Dropdown.js";
 import EmptyState from "./components/EmptyState.js";
 import Filter from "./components/Filter.js";
 import { FilterPill } from "./components/FilterPill.js";
+import { HoverCard } from "./components/HoverCard.js";
 import { IconButton } from "./components/IconButton.js";
 import { Indicator } from "./components/Indicator.js";
 import { RequiredMark } from "./components/RequiredMark.js";
 import { Input, Textarea } from "./components/Input.js";
 import { inputClasses } from "./components/inputClasses.js";
 import { LetterBadge } from "./components/LetterBadge.js";
-import CustomListbox from "./components/Listbox.js";
 import Loader from "./components/Loader.js";
 import Markdown from "./components/Markdown.js";
-import MultiSelectDropdown from "./components/MultiSelect.js";
 import { Overview } from "./components/Overview.js";
-import { BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, HeaderActionMenu, HeaderAddButton, HeaderEditButton, HeaderRowMenu, PageHeader, headerActionButtonClasses } from "./components/PageHeader.js";
+import { BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, HeaderActionMenu, HeaderAddButton, HeaderEditButton, PageHeader, headerActionButtonClasses } from "./components/PageHeader.js";
 import { Pagination } from "./components/Pagination.js";
+import { Radio, RadioGroup } from "./components/Radio.js";
 import { useRelativeTime } from "./components/relativeTime.js";
 import SectionHeader from "./components/SectionHeader.js";
 import { SegmentedControl } from "./components/SegmentedControl.js";
+import { Select } from "./components/Select.js";
 import { SettingModeOption } from "./components/SettingModeOption.js";
 import { SettingRow, SettingSection } from "./components/SettingRow.js";
 import SettingsCard from "./components/SettingsCard.js";
 import SettingsGroup from "./components/SettingsGroup.js";
 import Sort from "./components/Sort.js";
 import { StatusBadge, StatusDot, statusTextClass } from "./components/StatusBadge.js";
-import SwitchToggle from "./components/SwitchToggle.js";
-import SwitchToggleSmall from "./components/SwitchToggleSmall.js";
 import { CompactTable, Table } from "./components/Table.js";
-import { Toggle } from "./components/Toggle.js";
 import { useCssIsDark } from "./components/useCssIsDark.js";
 import { DEFAULT_PRESET, THEME_PRESETS, THEME_TOKENS, applyTheme, contrastRatio, deriveTheme, isDarkColor } from "./theme/index.js";
-export { AddMenu, Avatar, BareModal, BreadcrumbProvider, BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, Button, CREATE_MODAL_SELECT_FILTER_THRESHOLD, Callout, Card, CardHeader, CompactTable, ConfirmModal, ControlledCollapsiblePanel, CopyCodeBlock, CopyToClipboard, CreateModal, CreateModalAutocompleteField, CreateModalField, CreateModalSelect, CreateModalSwitch, CreateModalTextarea, CustomListbox, DEFAULT_PRESET, DescriptionList, DescriptionListItem, Dropdown, DropdownCaret, EmptyState, Filter, FilterPill, GlobalTooltip, HeaderActionMenu, HeaderAddButton, HeaderEditButton, HeaderRowMenu, IconButton, Indicator, Input, LetterBadge, Loader, Markdown, MaybeCollapsible, MethodButton, MultiSelectDropdown, Overview, PageHeader, Pagination, RequiredMark, SectionHeader, SegmentedControl, SettingModeOption, SettingRow, SettingSection, SettingsCard, SettingsGroup, Sort, StatusBadge, StatusDot, SwitchToggle, SwitchToggleSmall, THEME_PRESETS, THEME_TOKENS, TOOLTIP_ID, Table, Textarea, Toggle, TooltipInfo, UIProvider, UncontrolledCollapsiblePanel, applyTheme, avatarInitials, contrastRatio, dangerButtonClasses, deriveTheme, filterOption, flattenOptions, formatTooltipContent, ghostButtonClasses, headerActionButtonClasses, inputClasses, isCategory, isDarkColor, isOption, modalPanelClasses, primaryButtonClasses, statusTextClass, toggleSetMember, truncationTooltipProps, useBreadcrumb, useClearBreadcrumbs, useCssIsDark, useHideBreadcrumbs, useNavigation, useNotify, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRelativeTime, useRunFile, useSetBreadcrumbs, useSetDefaultBreadcrumbs, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };
+export { ActionMenu, Autocomplete, Avatar, BreadcrumbProvider, BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, Button, Callout, Card, CardHeader, Combobox, CompactTable, ConfirmModal, CopyCodeBlock, CopyToClipboard, CreateModal, CreateModalAutocompleteField, CreateModalField, CreateModalSelect, CreateModalSwitch, CreateModalTextarea, DEFAULT_PRESET, DescriptionList, DescriptionListItem, EmptyState, Filter, FilterPill, HeaderActionMenu, HeaderAddButton, HeaderEditButton, HoverCard, IconButton, Indicator, InfoTip, Input, LetterBadge, Loader, Markdown, MenuCheckboxItem, MenuEntries, MenuFilter, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger, MethodButton, Modal, ModalDescription, ModalTitle, Overview, PageHeader, Pagination, Radio, RadioGroup, RequiredMark, SectionHeader, SegmentedControl, Select, SettingModeOption, SettingRow, SettingSection, SettingsCard, SettingsGroup, Sort, StatusBadge, StatusDot, Switch, THEME_PRESETS, THEME_TOKENS, Table, Textarea, Tooltip, TooltipProvider, UIProvider, applyTheme, avatarInitials, contrastRatio, dangerButtonClasses, deriveTheme, formatInfoTipContent, ghostButtonClasses, headerActionButtonClasses, inputClasses, isDarkColor, menuDivider, modalPanelClassName, primaryButtonClasses, statusTextClass, useBreadcrumb, useClearBreadcrumbs, useContextMenu, useCssIsDark, useHideBreadcrumbs, useNavigation, useNotify, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRelativeTime, useRunFile, useSetBreadcrumbs, useSetDefaultBreadcrumbs, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };

package/dist/list/ActionToolbar.d.ts

@@ -1,18 +1,9 @@
-export interface ToolbarAction {
-    key: string;
-    label: string;
-    icon: React.ComponentType<{
-        className?: string;
-    }>;
-    iconClassName?: string;
-    onClick?: (() => void) | undefined;
-    href?: string | undefined;
-    disabled?: boolean | undefined;
-    enabledTooltip?: string;
-    disabledTooltip?: string | undefined;
+import type { RowAction } from './rowMenu.js';
+/** A toolbar button, which moves into the `…` menu as a row when the toolbar runs out of room. */
+export interface ToolbarAction extends RowAction {
+    /** A hint on the enabled button. */
+    tooltip?: string | undefined;
     hidden?: boolean;
-    /** Makes the action a toggle: filled while on, outlined while off. */
-    active?: boolean | undefined;
 }
 /** A pre-rendered element (e.g. a button component that owns its modal). */
 interface ToolbarElement {
@@ -21,6 +12,7 @@ interface ToolbarElement {
     hidden?: boolean;
 }
 export type ToolbarItem = ToolbarAction | ToolbarElement;
+/** A toolbar action as a button: a link with `href`, a toggle with `checked`. */
 export declare function ToolbarButton({ action }: {
     action: ToolbarAction;
 }): import("react").JSX.Element;

package/dist/list/ActionToolbar.js

@@ -1,124 +1,76 @@
-import { useLink, useStrings } from "../components/Provider.js";
 import { BsThreeDotsVertical } from "../icons/bs/BsThreeDotsVertical.js";
-import { FaCheck } from "../icons/fa/FaCheck.js";
-import { TOOLTIP_ID } from "../components/Tooltip.js";
-import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
-import cx from "classnames";
-import { Fragment, createContext, useContext, useLayoutEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { MenuPopup } from "../components/Menu.js";
+import { Tooltip } from "../components/Tooltip.js";
+import { useLink, useStrings } from "../components/Provider.js";
+import { MenuEntries } from "../components/MenuEntries.js";
+import { Menu } from "@base-ui/react/menu";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, createContext, useContext, useLayoutEffect, useRef, useState } from "react";
+import { Button } from "@base-ui/react/button";
+import { Toggle } from "@base-ui/react/toggle";
 //#region src/list/ActionToolbar.tsx
 var OverflowMenuContext = createContext(false);
-/** Omits data-tooltip-content when absent — react-tooltip treats an explicit undefined as an empty tooltip anchor. */
-function tipProps(content, place) {
-	return {
-		"data-tooltip-id": TOOLTIP_ID,
-		"data-tooltip-place": place,
-		...content !== void 0 && { "data-tooltip-content": content }
-	};
-}
 function ToolbarItemView({ item }) {
-	if ("element" in item) return /* @__PURE__ */ jsx(Fragment$1, { children: item.element });
+	if ("element" in item) return /* @__PURE__ */ jsx(Fragment, { children: item.element });
 	return /* @__PURE__ */ jsx(ToolbarButton, { action: item });
 }
+/** A toolbar action as a button: a link with `href`, a toggle with `checked`. */
 function ToolbarButton({ action }) {
 	const inOverflowMenu = useContext(OverflowMenuContext);
 	const Link = useLink();
-	if (inOverflowMenu) return /* @__PURE__ */ jsx(OverflowRow, { item: action });
-	const off = action.active === false;
-	const className = cx("inline-flex items-center gap-x-0.5 h-9 px-2 rounded-md text-[13.5px] uppercase font-semibold transition-colors whitespace-nowrap", off ? "border theme-border theme-muted-text" : "bg-(--theme-element) text-(--theme-element-text)", action.disabled ? "opacity-50 cursor-not-allowed" : off ? "cursor-pointer hover:theme-hover" : "cursor-pointer hover:bg-(--theme-element-hover)");
-	const pressed = action.active === void 0 ? {} : { "aria-pressed": action.active };
-	const tooltipProps = tipProps(action.disabled ? action.disabledTooltip : action.enabledTooltip, "bottom");
-	const Icon = action.icon;
-	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-		className: "h-6 flex items-center",
-		children: /* @__PURE__ */ jsx(Icon, { className: cx("w-auto", action.iconClassName) })
+	if (inOverflowMenu) return /* @__PURE__ */ jsx(MenuEntries, { entries: [action] });
+	const off = action.checked === false;
+	const className = clsx("inline-flex items-center gap-x-0.5 h-9 px-2 rounded-md text-[13.5px] uppercase font-semibold transition-colors whitespace-nowrap", off ? "border theme-border theme-muted-text" : "bg-(--theme-element) text-(--theme-element-text)", "data-disabled:opacity-50 data-disabled:cursor-not-allowed", !action.disabled && (off ? "cursor-pointer hover:theme-hover" : "cursor-pointer hover:bg-(--theme-element-hover)"));
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: "h-6 flex items-center [&>svg]:w-auto",
+		children: action.icon
 	}), action.label] });
-	if (action.href && !action.disabled) return /* @__PURE__ */ jsx(Link, {
-		to: action.href,
+	let control;
+	if (action.href && !action.disabled) control = /* @__PURE__ */ jsx(Link, {
+		href: action.href,
 		className,
-		...tooltipProps,
 		children: content
 	});
-	if (action.disabled) return /* @__PURE__ */ jsx("span", {
-		className: "inline-flex",
-		...tooltipProps,
-		children: /* @__PURE__ */ jsx("button", {
-			type: "button",
-			disabled: true,
-			className,
-			...pressed,
-			children: content
-		})
-	});
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		onClick: action.onClick,
+	else if (action.checked !== void 0) control = /* @__PURE__ */ jsx(Toggle, {
+		pressed: action.checked,
+		onPressedChange: () => action.onClick?.(),
+		disabled: action.disabled,
 		className,
-		...pressed,
-		...tooltipProps,
 		children: content
 	});
-}
-/** A single overflowed item rendered as a full-width row inside the `…` menu. */
-function OverflowRow({ item }) {
-	const Link = useLink();
-	const { list: t } = useStrings();
-	const Icon = item.icon;
-	const className = cx("flex w-full items-center gap-x-1 px-4 py-2 text-[13px] uppercase font-semibold link hover:theme-hover", item.disabled && "opacity-50 cursor-not-allowed");
-	const tooltipProps = tipProps(item.disabled ? item.disabledTooltip : item.enabledTooltip, "left");
-	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		/* @__PURE__ */ jsx("div", {
-			className: "w-5 h-6 flex items-center",
-			children: /* @__PURE__ */ jsx(Icon, { className: cx(item.iconClassName) })
-		}),
-		item.label,
-		item.active && /* @__PURE__ */ jsx(FaCheck, { className: "ml-auto h-4 w-4 opacity-80" })
-	] });
-	const named = item.active === void 0 ? {} : { "aria-label": t.toggleState(item.label, item.active) };
-	if (item.href && !item.disabled) return /* @__PURE__ */ jsx(MenuItem, {
-		as: Link,
-		to: item.href,
+	else control = /* @__PURE__ */ jsx(Button, {
+		onClick: action.onClick,
+		disabled: action.disabled,
+		focusableWhenDisabled: true,
 		className,
-		...named,
-		...tooltipProps,
 		children: content
 	});
-	return /* @__PURE__ */ jsx(MenuItem, {
-		as: "button",
-		type: "button",
-		onClick: item.onClick,
-		disabled: item.disabled ?? false,
-		className,
-		...named,
-		...tooltipProps,
-		children: content
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: action.disabled ? action.disabledReason : action.tooltip,
+		side: "bottom",
+		children: control
 	});
 }
 function OverflowMenu({ items }) {
 	const { list: t } = useStrings();
-	return /* @__PURE__ */ jsxs(Menu, {
-		as: "div",
-		className: "relative inline-block text-left",
-		children: [/* @__PURE__ */ jsx(MenuButton, {
+	return /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(Tooltip, {
+		content: t.moreActions,
+		children: /* @__PURE__ */ jsx(Menu.Trigger, {
 			"aria-label": t.moreActions,
 			className: "inline-flex items-center justify-center h-9 w-9 rounded-md border theme-border link hover:theme-hover transition-colors",
-			"data-tooltip-id": TOOLTIP_ID,
-			"data-tooltip-content": t.moreActions,
 			"data-testid": "action-toolbar-menu-button",
 			children: /* @__PURE__ */ jsx(BsThreeDotsVertical, {})
-		}), /* @__PURE__ */ jsx(MenuItems, {
-			unmount: false,
-			anchor: {
-				to: "bottom end",
-				gap: 4
-			},
-			className: "z-50 min-w-56 rounded-md border theme-border bg-(--theme-app-bg) shadow-lg py-1 focus:outline-none",
-			children: /* @__PURE__ */ jsx(OverflowMenuContext.Provider, {
-				value: true,
-				children: items.map((item) => "element" in item ? /* @__PURE__ */ jsx(Fragment, { children: item.element }, item.key) : /* @__PURE__ */ jsx(OverflowRow, { item }, item.key))
-			})
-		})]
-	});
+		})
+	}), /* @__PURE__ */ jsx(MenuPopup, {
+		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))
+		})
+	})] });
 }
 var MENU_BUTTON_WIDTH = 44;
 var ITEM_GAP = 4;
@@ -183,10 +135,10 @@ function ActionToolbar({ groups, right = [], sticky = false }) {
 	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-10 bg-(--theme-app-bg)", "py-1.5")),
+		className: clsx("flex items-center gap-2.5", sticky && clsx("sticky top-10 z-10 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, { children: [i > 0 && /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-(--theme-border)" }), /* @__PURE__ */ jsx("div", {
+			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))

package/dist/list/ListPage.d.ts

@@ -1,7 +1,9 @@
 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 OpenMenu, type RowMenuItem } from './RowContextMenu.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';
@@ -32,23 +34,15 @@ export interface ListPageProps {
     children: ReactNode;
 }
 export declare function ListPage({ section, shellPadded, embedded, breadcrumbs, title, titleAction, actions, toolbar, view, children, }: ListPageProps): import("react").JSX.Element;
-export interface PinnedRowAction {
-    key: string;
-    label: string;
-    icon: ReactNode;
-    onSelect: () => void;
-    disabled?: boolean | undefined;
-    /** Replaces the label on hover when the action is disabled, explaining why. */
-    tooltip?: string | undefined;
-}
 export declare function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selected, selectionActive, onRowSelect, leading, className, children, }: {
     href: string | null;
     /** Plain-click handler for rows that open something in place instead of navigating. */
     onActivate?: (() => void) | undefined;
-    items: RowMenuItem[];
+    items: MenuEntry[];
     goTo: (to: string) => void;
     openMenu: OpenMenu;
-    pinnedActions?: PinnedRowAction[] | undefined;
+    /** Actions shown as buttons on the row, beside the menu. */
+    pinnedActions?: RowAction[] | undefined;
     className?: string;
     /** Tints the whole row to mark it as part of a multi-selection. */
     selected?: boolean;

package/dist/list/ListPage.js

@@ -1,12 +1,13 @@
-import { useNavigation } from "../components/Provider.js";
-import "../components/Tooltip.js";
-import { MoreButton, rowContextMenuProps, useRowMenuActive } from "./RowContextMenu.js";
+import { Tooltip } from "../components/Tooltip.js";
+import { useLink, useNavigation } from "../components/Provider.js";
+import { isMenuDivider, isMenuSubmenu } from "../components/MenuEntries.js";
 import { PageHeader } from "../components/PageHeader.js";
 import { Table } from "../components/Table.js";
 import { ListActionsHeader } from "./ListTable.js";
-import cx from "classnames";
+import { MoreButton, rowContextMenuProps, useRowMenuActive } from "./rowMenu.js";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, createContext, isValidElement, useContext, useMemo } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/list/ListPage.tsx
 /** Negative offsets (admin/org) cancel the shell's pt-4 so rows don't peek through the gap above the pinned header. */
 var SECTION_STICKY_TOP = {
@@ -52,7 +53,7 @@ function ListRowActionsProvider({ view, children }) {
 function ListPage({ section = "main", shellPadded, embedded = false, breadcrumbs, title, titleAction, actions, toolbar, view, children }) {
 	const cancelShellPadding = shellPadded ?? SECTION_SHELL_PADDED[section];
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx("flex h-full min-h-0 flex-col", cancelShellPadding && "-m-4"),
+		className: clsx("flex h-full min-h-0 flex-col", cancelShellPadding && "-m-4"),
 		children: [embedded ? toolbar && /* @__PURE__ */ jsx("div", {
 			className: "px-4 py-1.5",
 			children: toolbar
@@ -86,14 +87,14 @@ function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selec
 		if (!isValidElement(child) || !cls && !(i === 0 && stacked.length > 0)) return child;
 		const el = child;
 		if (i === 0 && stacked.length > 0) return cloneElement(el, {
-			className: cx(el.props.className, cls),
-			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [el.props.children, stacked.map((content, j) => /* @__PURE__ */ jsx("div", {
+			className: clsx(el.props.className, cls),
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [el.props.children, stacked.map((content, j) => /* @__PURE__ */ jsx("div", {
 				className: "mt-1 @[36rem]:hidden",
 				"data-stacked": true,
 				children: content
 			}, j))] })
 		});
-		return cloneElement(el, { className: cx(el.props.className, cls) });
+		return cloneElement(el, { className: clsx(el.props.className, cls) });
 	});
 	const handleRowClick = (e) => {
 		if (e.target.closest("a,button,input,label")) return;
@@ -105,9 +106,9 @@ function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selec
 		else onActivate?.();
 	};
 	const pinnedLabels = new Set((pinnedActions ?? []).map((a) => a.label));
-	const hasOverflowItems = items.some((item) => item.kind !== "divider" && (item.kind === "submenu" || !pinnedLabels.has(item.label)));
+	const hasOverflowItems = items.some((item) => !isMenuDivider(item) && (isMenuSubmenu(item) || !pinnedLabels.has(item.label)));
 	return /* @__PURE__ */ jsxs("tr", {
-		className: cx("group", selected ? "bg-blue-500/5" : menuActive ? "theme-hover" : "hover:theme-hover", (href || onActivate || selectionActive) && "cursor-pointer", className),
+		className: clsx("group", selected ? "bg-blue-500/5" : menuActive ? "theme-hover" : "hover:theme-hover", (href || onActivate || selectionActive) && "cursor-pointer", className),
 		onClick: handleRowClick,
 		...rowContextMenuProps(openRowMenu, items),
 		children: [
@@ -119,24 +120,14 @@ function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selec
 					className: "absolute inset-y-0 right-0 flex items-center gap-0.5 pr-4",
 					children: [pinnedActions && pinnedActions.length > 0 && /* @__PURE__ */ jsx("span", {
 						className: "hidden items-center gap-0.5 @[44rem]:flex",
-						children: pinnedActions.map((action) => /* @__PURE__ */ jsx("button", {
-							type: "button",
-							"aria-label": action.label,
-							"data-tooltip-id": "global-tooltip",
-							"data-tooltip-content": action.disabled && action.tooltip ? action.tooltip : action.label,
-							"data-tooltip-place": "bottom",
-							"aria-disabled": action.disabled,
-							onClick: (e) => {
-								e.stopPropagation();
-								if (action.disabled) return;
-								action.onSelect();
-							},
-							className: cx("rounded p-1 cursor-pointer text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) aria-disabled:cursor-not-allowed aria-disabled:opacity-20 aria-disabled:hover:bg-transparent aria-disabled:hover:text-(--theme-muted-text-color) [&>svg]:h-4 [&>svg]:w-4", alwaysShowActions || menuActive ? "opacity-100" : "opacity-0 group-hover:opacity-100 focus-visible:opacity-100"),
-							children: action.icon
+						children: pinnedActions.map((action) => /* @__PURE__ */ jsx(PinnedActionButton, {
+							action,
+							visible: alwaysShowActions || menuActive
 						}, action.key))
 					}), /* @__PURE__ */ jsx(MoreButton, {
-						active: menuActive || alwaysShowActions,
-						onOpen: (x, y) => openRowMenu(x, y, items),
+						open: menuActive,
+						visible: menuActive || alwaysShowActions,
+						onOpen: (button) => openRowMenu(button, items),
 						className: hasOverflowItems ? void 0 : "@[44rem]:hidden"
 					})]
 				})
@@ -144,11 +135,37 @@ function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selec
 		]
 	});
 }
+function PinnedActionButton({ action, visible }) {
+	const Link = useLink();
+	const reason = action.disabled ? action.disabledReason : void 0;
+	const props = {
+		"aria-label": reason ? `${action.label}. ${reason}` : action.label,
+		className: clsx("rounded p-1 cursor-pointer text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) aria-disabled:cursor-not-allowed aria-disabled:opacity-20 aria-disabled:hover:bg-transparent aria-disabled:hover:text-(--theme-muted-text-color) [&>svg]:h-4 [&>svg]:w-4", visible ? "opacity-100" : "opacity-0 group-hover:opacity-100 focus-visible:opacity-100")
+	};
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: reason ?? action.label,
+		side: "bottom",
+		children: action.href && !action.disabled ? /* @__PURE__ */ jsx(Link, {
+			href: action.href,
+			...props,
+			children: action.icon
+		}) : /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-disabled": action.disabled,
+			onClick: (e) => {
+				e.stopPropagation();
+				if (!action.disabled) action.onClick?.();
+			},
+			...props,
+			children: action.icon
+		})
+	});
+}
 /** Name column min-width is by role, not position, so a leading checkbox doesn't shift it. */
 function ListColumns({ view }) {
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [view.visibleColumns.map((col, i) => /* @__PURE__ */ jsx(Table.Header, {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [view.visibleColumns.map((col, i) => /* @__PURE__ */ jsx(Table.Header, {
 		caps: false,
-		className: cx(col.headerClassName, view.columnClasses[i]),
+		className: clsx(col.headerClassName, view.columnClasses[i]),
 		style: col.alwaysVisible ? { minWidth: 200 } : void 0,
 		children: col.label
 	}, col.key)), /* @__PURE__ */ jsx(ListActionsHeader, { view })] });

package/dist/list/ListPager.js

@@ -1,8 +1,8 @@
-import { useStrings } from "../components/Provider.js";
 import { LuChevronLeft } from "../icons/lu/LuChevronLeft.js";
 import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
+import { useStrings } from "../components/Provider.js";
 import { listControlButtonClasses } from "./ListViewControls.js";
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/list/ListPager.tsx
 /** Page sizes offered by the pager's per-page select; first entry is the default. */
@@ -45,14 +45,14 @@ function ListPager({ page, pageSize, total, onPageChange, pageSizes = LIST_PAGE_
 				"aria-label": t.paginationPrevious,
 				disabled: page === 0,
 				onClick: () => onPageChange(page - 1),
-				className: cx(listControlButtonClasses, "disabled:opacity-40 disabled:pointer-events-none"),
+				className: clsx(listControlButtonClasses, "disabled:opacity-40 disabled:pointer-events-none"),
 				children: /* @__PURE__ */ jsx(LuChevronLeft, { className: "w-3.5 h-3.5" })
 			}), /* @__PURE__ */ jsx("button", {
 				type: "button",
 				"aria-label": t.paginationNext,
 				disabled: hasNext === void 0 ? page >= pageCount - 1 : !hasNext,
 				onClick: () => onPageChange(page + 1),
-				className: cx(listControlButtonClasses, "disabled:opacity-40 disabled:pointer-events-none"),
+				className: clsx(listControlButtonClasses, "disabled:opacity-40 disabled:pointer-events-none"),
 				children: /* @__PURE__ */ jsx(LuChevronRight, { className: "w-3.5 h-3.5" })
 			})]
 		})]

package/dist/list/ListTable.js

@@ -1,8 +1,8 @@
-import { useLink, useStrings } from "../components/Provider.js";
 import { BiError } from "../icons/bi/BiError.js";
 import { positionKeys } from "../components/keys.js";
+import { useLink, useStrings } from "../components/Provider.js";
 import { Table } from "../components/Table.js";
-import cx from "classnames";
+import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/list/ListTable.tsx
 var NAME_TEXT = "font-medium text-[13px] leading-tight text-(--theme-app) truncate";
@@ -29,7 +29,7 @@ function NameCell({ icon, name, subtitle, href, badge, title, children }) {
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 items-center gap-1.5",
 			children: [/* @__PURE__ */ jsx("div", {
-				className: cx(NAME_TEXT, href && "group-hover/namecell:text-(--theme-link)"),
+				className: clsx(NAME_TEXT, href && "group-hover/namecell:text-(--theme-link)"),
 				title,
 				children: name
 			}), badge]
@@ -41,7 +41,7 @@ function NameCell({ icon, name, subtitle, href, badge, title, children }) {
 	return /* @__PURE__ */ jsxs(Table.Item, {
 		className: "py-2.5",
 		children: [href ? /* @__PURE__ */ jsx(Link, {
-			to: href,
+			href,
 			className: "group/namecell flex items-center gap-2.5 min-w-0 cursor-pointer",
 			children: inner
 		}) : /* @__PURE__ */ jsx("div", {
@@ -154,7 +154,7 @@ function ListActionsHeader({ view, actionCount = 0, className }) {
 			width,
 			minWidth: width
 		},
-		className: cx("relative py-2 text-right @max-[43rem]:w-[52px]! @max-[43rem]:min-w-[52px]!", className),
+		className: clsx("relative py-2 text-right @max-[43rem]:w-[52px]! @max-[43rem]:min-w-[52px]!", className),
 		children: /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: "Actions"

package/dist/list/ListViewControls.d.ts

@@ -5,13 +5,12 @@ import type { ListView } from './listView.js';
 export declare const listControlButtonClasses = "relative flex h-7 w-7 items-center justify-center rounded-md border border-(--theme-border) text-(--theme-muted-text-color) hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) transition-colors";
 /** A header-strip button that opens a panel under it. The panel is a
  *  non-modal dialog named by the button, not a menu: it holds switches,
- *  pills and text rather than menu items. Portals into .ds-root so the panel
- *  escapes the toolbar's overflow clipping. */
-export declare function AnchoredPopover({ icon, label, active, shortcut, panelClassName, children, }: {
+ *  pills and text rather than menu items. */
+export declare function AnchoredPopover({ icon, label, active, shortcut, panelClassName: panelClass, children, }: {
     icon: ReactNode;
     label: string;
     active?: boolean;
-    /** Single-key shortcut (e.g. 'f') that opens the popover; also shown in the
+    /** Single-key shortcut (e.g. 'd') that opens the popover; also shown in the
      * tooltip. */
     shortcut?: string;
     panelClassName?: string;
@@ -21,6 +20,8 @@ export declare function ListDisplayMenu<T>({ view, label }: {
     view: ListView<T>;
     label?: string;
 }): import("react").JSX.Element;
+/** The Filter button's menu: a submenu for each facet, whose options toggle
+ *  without closing it. F opens it. */
 export declare function ListFilterMenu<T>({ view, label }: {
     view: ListView<T>;
     label?: string;