@parallelworks/ui 0.76.0 → 0.78.0

package/dist/list/ListPage.d.ts

@@ -12,15 +12,53 @@ export interface ListPageProps {
      *  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`. */
+    /** The list's search, filters and view controls, above the rows, such as a
+     *  `ListToolbar`. The page's trail and actions, "+ Add" among them, go in
+     *  its `PageHeader`. With `total`, it hides while the list is empty. */
     toolbar?: ReactNode;
+    /** Under the toolbar: the chips of the list's active filters. By default the view's own
+     *  `ListFilterBar`, shown while a filter is on; pass one to add a trailing slot, such as Save
+     *  view, or `null` to leave it out. */
+    filterBar?: ReactNode;
     /** Omit on pages without a list view — rows show all actions by default. */
     view?: ListViewChrome | undefined;
+    /** Still loading: a sketch of rows in place of the list. */
+    loading?: boolean | undefined;
+    /** Why the list couldn't load. Shown only while there is nothing to show
+     *  from before, so a failed refresh keeps the rows on screen. */
+    error?: unknown;
+    /** What failed to load, as the error names it: "Couldn't load clusters". */
+    errorNoun?: string | undefined;
+    /** How many rows there are before any search or filter. Given, the page
+     *  picks its body: the rows, `empty` while there are none, and `noMatches`
+     *  while a search or filter leaves none. */
+    total?: number | undefined;
+    /** How many rows the search and filters leave; `total` by default. */
+    matches?: number | undefined;
+    /** What shows while there is nothing in the list yet. */
+    empty?: ListPageEmpty | undefined;
+    /** What shows while a search or filter leaves nothing, such as "No clusters
+     *  match". */
+    noMatches?: ReactNode;
+    /** Keeps the toolbar while the list is empty, for one whose controls still
+     *  matter then, such as a filter set by default that hides everything. */
+    toolbarWhenEmpty?: boolean | undefined;
     children: ReactNode;
 }
-/** 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;
+/** A list's empty state: what is missing, and what to do about it. */
+export interface ListPageEmpty {
+    /** A glyph for what the list holds, drawn faded above the title. */
+    icon?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Such as a link to the docs; the page's "+ Add" stays in its header. */
+    action?: ReactNode;
+}
+/** A list filling the page: its toolbar stays put while only the rows scroll.
+ *  Given `total`, it also shows the list's states in one shared look: a
+ *  sketch while loading, the error when loading failed, the empty state with
+ *  the toolbar hidden, the no-matches state, or the rows. */
+export declare function ListPage({ bleed, toolbar, filterBar, view, loading, error, errorNoun, total, matches, empty, noMatches, toolbarWhenEmpty, 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. */

package/dist/list/ListPage.js

@@ -1,13 +1,15 @@
 import { cx } from "../cx.js";
+import { EmptyState } from "../components/EmptyState.js";
 import { Tooltip } from "../components/Tooltip.js";
 import { useNavigation } from "../components/Provider.js";
 import { AppLink, isPlainClick } from "../components/AppLink.js";
-import { isMenuDivider, isMenuSubmenu, useRunAction, warnIfInert } from "../components/MenuEntries.js";
+import { isMenuDivider, isMenuGroup, isMenuSubmenu, useRunAction, warnIfInert } from "../components/MenuEntries.js";
 import { Table } from "../components/Table.js";
-import { ListActionsHeader, StretchRowLinkContext } from "./ListTable.js";
+import { ListFilterBar } from "./ListFilterBar.js";
+import { ListActionsHeader, ListError, ListSkeleton, StretchRowLinkContext } from "./ListTable.js";
 import { MoreButton, rowContextMenuProps, useRowMenuActive } from "./rowMenu.js";
-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
 /** Defaults mean rows outside a ListView fully show actions (no view = show everything). */
 var RowActionsContext = createContext({
@@ -36,20 +38,51 @@ function ListRowActionsProvider({ view, children }) {
 		children
 	});
 }
-/** A list filling the page: its toolbar stays put while only the rows scroll. */
-function ListPage({ bleed = false, toolbar, view, children }) {
+var STAYS_BESIDE_STACK = "@max-[36rem]:align-top @max-[36rem]:pt-2.5";
+/** A list filling the page: its toolbar stays put while only the rows scroll.
+*  Given `total`, it also shows the list's states in one shared look: a
+*  sketch while loading, the error when loading failed, the empty state with
+*  the toolbar hidden, the no-matches state, or the rows. */
+function ListPage({ bleed = false, toolbar, filterBar, view, loading = false, error, errorNoun, total, matches, empty, noMatches, toolbarWhenEmpty = false, children }) {
+	const failed = !loading && error !== void 0 && error !== null && !total;
+	const known = total !== void 0 && !loading && !failed;
+	const isEmpty = known && total === 0;
+	const noneMatch = known && !isEmpty && (matches ?? total) === 0;
+	const controls = total === void 0 || toolbarWhenEmpty || known && total > 0;
+	const bar = filterBar === void 0 ? view?.filterState && view.filterState.fields.length > 0 ? /* @__PURE__ */ jsx(ListFilterBar, { filters: view.filterState }) : null : filterBar;
+	let body = children;
+	if (loading) body = /* @__PURE__ */ jsx(ListSkeleton, {});
+	else if (failed) body = /* @__PURE__ */ jsx(ListError, {
+		error,
+		noun: errorNoun
+	});
+	else if (isEmpty && empty) body = /* @__PURE__ */ jsx(EmptyState, {
+		variant: "plain",
+		...empty
+	});
+	else if (noneMatch && noMatches) body = /* @__PURE__ */ jsx(EmptyState, {
+		variant: "plain",
+		title: noMatches
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: cx("flex h-full min-h-0 flex-col", bleed && "-m-4"),
-		children: [toolbar && /* @__PURE__ */ jsx("div", {
-			className: "shrink-0 px-4",
-			children: toolbar
-		}), /* @__PURE__ */ jsx("div", {
-			className: "relative @container min-h-0 flex-1 overflow-auto",
-			children: /* @__PURE__ */ jsx(ListRowActionsProvider, {
-				view,
-				children
+		children: [
+			!!toolbar && controls && /* @__PURE__ */ jsx("div", {
+				className: "shrink-0 px-4",
+				children: toolbar
+			}),
+			!!bar && controls && /* @__PURE__ */ jsx("div", {
+				className: "shrink-0 px-4",
+				children: bar
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "relative @container min-h-0 flex-1 overflow-auto",
+				children: /* @__PURE__ */ jsx(ListRowActionsProvider, {
+					view,
+					children: body
+				})
 			})
-		})]
+		]
 	});
 }
 function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selected, selectionActive, onRowSelect, leading, className, children }) {
@@ -62,19 +95,20 @@ function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selec
 		return Children.toArray(content).length > 0 ? [content] : [];
 	});
 	const styledCells = cells.map((child, i) => {
-		const cls = columnClasses[i];
+		const cls = cx(columnClasses[i], i > 0 && stacked.length > 0 && !columnStacks[i] && STAYS_BESIDE_STACK);
 		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, { children: [el.props.children, stacked.map((content, j) => /* @__PURE__ */ jsx("div", {
-				className: "mt-1 @[36rem]:hidden",
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [el.props.children, stacked.map((content, j) => /* @__PURE__ */ jsx("div", {
+				className: "mt-1 flex min-w-0 items-center @[36rem]:hidden",
 				"data-stacked": true,
 				children: content
 			}, j))] })
 		});
 		return cloneElement(el, { className: cx(el.props.className, cls) });
 	});
+	const floating = !alwaysShowActions && !(pinnedActions && pinnedActions.length > 0);
 	const stretch = !!href && !selectionActive;
 	const handleRowClick = (e) => {
 		if (e.target.closest("a,button,input,label")) return;
@@ -87,7 +121,7 @@ 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) => !isMenuDivider(item) && (isMenuSubmenu(item) || !pinnedLabels.has(item.label)));
+	const hasOverflowItems = items.some((item) => !isMenuDivider(item) && (isMenuSubmenu(item) || isMenuGroup(item) || !pinnedLabels.has(item.label)));
 	return /* @__PURE__ */ jsxs("tr", {
 		className: cx("group", selected ? "bg-(--theme-accent-subtle)/60" : menuActive ? "theme-hover" : "hover:theme-hover", (href || onActivate || selectionActive) && "cursor-pointer", stretch && "relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:z-[1]", className),
 		onClick: handleRowClick,
@@ -99,9 +133,9 @@ function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selec
 				children: styledCells
 			}),
 			showActions && /* @__PURE__ */ jsx(Table.Item, {
-				className: "relative py-2.5",
+				className: cx("relative py-2.5", floating && "pointer-fine:w-0! pointer-fine:min-w-0! pointer-fine:pl-0! pointer-fine:pr-1!"),
 				children: /* @__PURE__ */ jsxs("div", {
-					className: "absolute inset-y-0 right-0 flex items-center gap-0.5 pr-4",
+					className: cx("absolute inset-y-0 right-0 flex items-center gap-0.5 pr-4", floating && !menuActive && "pointer-fine:opacity-0 pointer-fine:group-hover:opacity-100 pointer-fine:focus-within:opacity-100", floating && "pointer-fine:bg-linear-to-l pointer-fine:from-(--theme-hover) pointer-fine:from-70% pointer-fine:to-transparent pointer-fine:pl-6"),
 					children: [pinnedActions && pinnedActions.length > 0 && /* @__PURE__ */ jsx("span", {
 						className: "hidden items-center gap-0.5 @[44rem]:flex",
 						children: pinnedActions.map((action) => /* @__PURE__ */ jsx(PinnedActionButton, {
@@ -110,7 +144,7 @@ function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selec
 						}, action.key))
 					}), /* @__PURE__ */ jsx(MoreButton, {
 						open: menuActive,
-						visible: menuActive || alwaysShowActions,
+						visible: menuActive || alwaysShowActions || floating,
 						onOpen: (button) => openRowMenu(button, items),
 						className: hasOverflowItems ? void 0 : "@[44rem]:hidden"
 					})]
@@ -159,7 +193,7 @@ function columnSort(view, orderBy) {
 *  cells still size the columns, but nobody sees or hears them, as with any
 *  other display option that is off. */
 function ListColumns({ view }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [view.visibleColumns.map((col, i) => {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [view.visibleColumns.map((col, i) => {
 		const orderBy = view.orderBys.some((o) => o.value === col.orderBy) ? col.orderBy : void 0;
 		return /* @__PURE__ */ jsx(Table.Header, {
 			caps: false,

package/dist/list/ListTable.d.ts

@@ -33,8 +33,11 @@ export declare const STRETCHED_LINK = "after:absolute after:inset-0 after:conten
  *  raised above the link so they keep their own clicks. A checkbox is a
  *  `role="checkbox"` span, not an input, so the role names it. */
 export declare const STRETCHED_LINK_ROW = "relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:z-[1]";
-export declare function NameCell({ icon, name, subtitle, href, badge, title, children, }: {
+export declare function NameCell({ icon, iconTile, name, subtitle, href, badge, title, children, }: {
     icon: ReactNode;
+    /** Sets the icon in a small bordered tile, so rows whose icons differ in
+     *  weight, such as kinds of token or runner, still line up. */
+    iconTile?: boolean | undefined;
     name: string;
     subtitle?: string | undefined;
     /** The name's link. Inside a `ListRow` with an `href`, the whole row is
@@ -46,15 +49,29 @@ export declare function NameCell({ icon, name, subtitle, href, badge, title, chi
      * narrow container (see `ColumnDef.stack`). */
     children?: ReactNode;
 }): import("react").JSX.Element;
+/** A row's column text: muted 13px, or monospace for an ID, a path or a
+ *  hash. The style sits on the text rather than the cell, so it carries over
+ *  when a narrow list stacks the column under the name. */
+export declare function ListCellText({ mono, className, children, }: {
+    mono?: boolean | undefined;
+    className?: string | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;
 export declare function GroupRow({ label, count, colSpan, }: {
     label: string;
     count: number;
     colSpan: number;
 }): import("react").JSX.Element;
-export declare function ListError({ error, noun, }: {
-    error: unknown;
+/** Says a list couldn't load. It never shows the error's own text, which is
+ *  the server's words, in its language and not written for the reader. */
+export declare function ListError({ noun, message, }: {
+    /** What failed. It is not shown: pass `message` to say what went wrong. */
+    error?: unknown;
     /** What failed to load, as the heading names it: "Couldn't load clusters". */
     noun?: string | undefined;
+    /** What went wrong, in the reader's words, such as the host's own text for the error.
+     *  Defaults to a generic line from the strings. */
+    message?: ReactNode;
 }): import("react").JSX.Element;
 export declare function ListSkeleton({ rows }: {
     rows?: number;
@@ -63,6 +80,12 @@ export declare function ListSkeleton({ rows }: {
 export declare const NAME_MIN_WIDTH_PX = 200;
 /** Width the trailing actions column reserves for `count` always-visible
  * buttons plus the hover `⋯` trigger. */
+/** The lane of a row whose only action is a `⋯` shown on hover. With a mouse
+ *  it claims no width: the `⋯` floats over the row's end while hovered, so
+ *  the last column ends at the list's edge as the first starts at it, and the
+ *  lane's 4px makes up that column's padding to the edge's 16px. On a touch
+ *  screen, where the `⋯` always shows, the lane keeps its width. */
+export declare const FLOATING_ACTIONS_LANE = "pointer-fine:w-0! pointer-fine:min-w-0! pointer-fine:pl-0! pointer-fine:pr-1!";
 export declare function actionsColumnWidth(count: number): number;
 /** Shared leading selection checkbox for multi-select rows: stops the row-click
  * and suppresses shift-click text selection. Wrap in <Table.Item> for `leading`. */
@@ -90,6 +113,7 @@ export declare function ListActionsHeader({ view, actionCount, className, }: {
     view?: {
         showActions: boolean;
         actionsWidth: number;
+        alwaysShowActions?: boolean;
     };
     actionCount?: number;
     className?: string;

package/dist/list/ListTable.js

@@ -1,13 +1,13 @@
 import { cx } from "../cx.js";
 import { ErrorIcon } from "../icons.js";
-import { positionKeys } from "../components/keys.js";
 import { useStrings } from "../components/Provider.js";
 import { AppLink } from "../components/AppLink.js";
+import { positionKeys } from "../components/keys.js";
 import { LoadingRegion, Skeleton } from "../components/Skeleton.js";
 import { Checkbox } from "../components/Checkbox.js";
 import { Table } from "../components/Table.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/list/ListTable.tsx
 var NAME_TEXT = "font-medium text-[13px] leading-tight text-(--theme-app) truncate";
 var SUBTITLE_TEXT = "text-xs leading-tight text-(--theme-muted-text-color) truncate";
@@ -41,9 +41,14 @@ var STRETCHED_LINK = "after:absolute after:inset-0 after:content-[''] focus-visi
 *  raised above the link so they keep their own clicks. A checkbox is a
 *  `role="checkbox"` span, not an input, so the role names it. */
 var STRETCHED_LINK_ROW = "relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:z-[1]";
-function NameCell({ icon, name, subtitle, href, badge, title, children }) {
+function NameCell({ icon, iconTile = false, name, subtitle, href, badge, title, children }) {
 	const stretch = useContext(StretchRowLinkContext);
-	const inner = /* @__PURE__ */ jsxs(Fragment, { children: [icon, /* @__PURE__ */ jsxs("div", {
+	const hasIcon = icon !== null && icon !== void 0 && icon !== false;
+	const columns = hasIcon ? "col-span-2 grid grid-cols-subgrid items-center" : "flex items-center";
+	const inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [hasIcon && (iconTile ? /* @__PURE__ */ jsx("span", {
+		className: "flex size-7 shrink-0 items-center justify-center rounded-md border border-(--theme-border) text-(--theme-muted-text-color) [&>svg]:size-3.5",
+		children: icon
+	}) : icon), /* @__PURE__ */ jsxs("div", {
 		className: "min-w-0",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 items-center gap-1.5",
@@ -57,20 +62,32 @@ function NameCell({ icon, name, subtitle, href, badge, title, children }) {
 			children: subtitle
 		})]
 	})] });
-	return /* @__PURE__ */ jsxs(Table.Item, {
+	return /* @__PURE__ */ jsx(Table.Item, {
 		className: "py-2.5",
-		children: [href ? /* @__PURE__ */ jsx(AppLink, {
-			href,
-			"data-row-link": stretch || void 0,
-			className: cx("group/namecell flex items-center gap-2.5 min-w-0 cursor-pointer", stretch && "after:absolute after:inset-0 after:content-[''] focus-visible:outline-none focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-(--theme-link)"),
-			children: inner
-		}) : /* @__PURE__ */ jsx("div", {
-			className: "flex items-center gap-2.5 min-w-0",
-			children: inner
-		}), children && /* @__PURE__ */ jsx("div", {
-			className: "pl-[1.875rem]",
-			children
-		})]
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cx("grid min-w-0", hasIcon ? "grid-cols-[auto_minmax(0,1fr)] gap-x-2.5" : "grid-cols-[minmax(0,1fr)]"),
+			children: [href ? /* @__PURE__ */ jsx(AppLink, {
+				href,
+				"data-row-link": stretch || void 0,
+				className: cx("group/namecell min-w-0 cursor-pointer", columns, stretch && "after:absolute after:inset-0 after:content-[''] focus-visible:outline-none focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-(--theme-link)"),
+				children: inner
+			}) : /* @__PURE__ */ jsx("div", {
+				className: cx("min-w-0", columns),
+				children: inner
+			}), !!children && /* @__PURE__ */ jsx("div", {
+				className: hasIcon ? "col-start-2 min-w-0" : "min-w-0",
+				children
+			})]
+		})
+	});
+}
+/** A row's column text: muted 13px, or monospace for an ID, a path or a
+*  hash. The style sits on the text rather than the cell, so it carries over
+*  when a narrow list stacks the column under the name. */
+function ListCellText({ mono = false, className, children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cx("text-(--theme-muted-text-color)", mono ? "font-mono text-xs" : "text-[13px]", className),
+		children
 	});
 }
 function GroupRow({ label, count, colSpan }) {
@@ -93,9 +110,10 @@ function GroupRow({ label, count, colSpan }) {
 		]
 	}) });
 }
-function ListError({ error, noun }) {
+/** Says a list couldn't load. It never shows the error's own text, which is
+*  the server's words, in its language and not written for the reader. */
+function ListError({ noun, message }) {
 	const { list: t } = useStrings();
-	const message = error && typeof error === "object" && "message" in error ? String(error.message) : void 0;
 	return /* @__PURE__ */ jsxs("div", {
 		role: "alert",
 		className: "flex flex-col items-center justify-center gap-3 py-20 text-center",
@@ -107,9 +125,9 @@ function ListError({ error, noun }) {
 			children: [/* @__PURE__ */ jsx("p", {
 				className: "text-sm font-medium text-(--theme-app)",
 				children: t.couldNotLoad(noun ?? t.data)
-			}), message && /* @__PURE__ */ jsx("p", {
+			}), /* @__PURE__ */ jsx("p", {
 				className: "max-w-md text-xs text-(--theme-muted-text-color)",
-				children: message
+				children: message ?? t.couldNotLoadHint
 			})]
 		})]
 	});
@@ -151,6 +169,12 @@ var ACTION_GAP_PX = 2;
 var ACTIONS_CELL_PAD_PX = 28;
 /** Width the trailing actions column reserves for `count` always-visible
 * buttons plus the hover `⋯` trigger. */
+/** The lane of a row whose only action is a `⋯` shown on hover. With a mouse
+*  it claims no width: the `⋯` floats over the row's end while hovered, so
+*  the last column ends at the list's edge as the first starts at it, and the
+*  lane's 4px makes up that column's padding to the edge's 16px. On a touch
+*  screen, where the `⋯` always shows, the lane keeps its width. */
+var FLOATING_ACTIONS_LANE = "pointer-fine:w-0! pointer-fine:min-w-0! pointer-fine:pl-0! pointer-fine:pr-1!";
 function actionsColumnWidth(count) {
 	const buttons = count + 1;
 	return buttons * ACTION_BUTTON_PX + (buttons - 1) * ACTION_GAP_PX + ACTIONS_CELL_PAD_PX;
@@ -192,13 +216,14 @@ function ListActionsHeader({ view, actionCount = 0, className }) {
 	const { common } = useStrings();
 	if (view && !view.showActions) return null;
 	const width = view ? view.actionsWidth : actionsColumnWidth(actionCount);
+	const floating = !!view && !view.alwaysShowActions && view.actionsWidth === actionsColumnWidth(0);
 	return /* @__PURE__ */ jsx(Table.Header, {
 		caps: false,
 		style: {
 			width,
 			minWidth: width
 		},
-		className: cx("relative py-2 text-right @max-[44rem]:w-[52px]! @max-[44rem]:min-w-[52px]!", className),
+		className: cx("relative py-2 text-right @max-[44rem]:w-[52px]! @max-[44rem]:min-w-[52px]!", floating && "pointer-fine:w-0! pointer-fine:min-w-0! pointer-fine:pl-0! pointer-fine:pr-1!", className),
 		children: /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: common.actions
@@ -207,4 +232,4 @@ function ListActionsHeader({ view, actionCount = 0, className }) {
 }
 ListActionsHeader.isTableHeader = true;
 //#endregion
-export { GroupRow, HEADERS_OFF, ListActionsHeader, ListError, ListSelectAllHeader, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, STRETCHED_LINK, STRETCHED_LINK_ROW, StretchRowLinkContext, actionsColumnWidth, listTableFixedProps, listTableProps };
+export { FLOATING_ACTIONS_LANE, GroupRow, HEADERS_OFF, ListActionsHeader, ListCellText, ListError, ListSelectAllHeader, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, STRETCHED_LINK, STRETCHED_LINK_ROW, StretchRowLinkContext, actionsColumnWidth, listTableFixedProps, listTableProps };

package/dist/list/ListToolbar.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import { type ListSearch } from './listSearch.js';
+import type { ListView } from './listView.js';
+export interface ListToolbarProps<T> {
+    /** What the count says: how many there are and, while a search or filter
+     *  is on, how many match. `filterActive` defaults to whether the search or
+     *  the view's filters narrow the list. */
+    count: {
+        total: number;
+        matches: number;
+        filterActive?: boolean | undefined;
+        noun: string;
+        nounPlural: string;
+    };
+    /** Adds its filter menu, when it has facets, and its display options. */
+    view?: ListView<T> | undefined;
+    search?: ListSearch | undefined;
+    /** Names the search for assistive technology; the strings' "Search" by default. */
+    searchLabel?: string | undefined;
+    /** The search field's placeholder; the label by default. */
+    searchPlaceholder?: string | undefined;
+    /** After the search, such as a control that acts on the whole list. A list
+     *  page's "+ Add" belongs in its `PageHeader`. */
+    action?: ReactNode;
+    /** More controls, before the filter and display menus. */
+    children?: ReactNode;
+}
+/** A list page's toolbar in the shared order: the count on the left; then
+ *  the page's own controls, the filter menu, the display options, the search
+ *  and an action on the right. Give it to `ListPage` as its `toolbar`. */
+export declare function ListToolbar<T>({ count, view, search, searchLabel, searchPlaceholder, action, children, }: ListToolbarProps<T>): import("react").JSX.Element;

package/dist/list/ListToolbar.js

@@ -0,0 +1,43 @@
+import { useStrings } from "../components/Provider.js";
+import { ListDisplayMenu, ListFilterMenu } from "./ListViewControls.js";
+import { ListCount, ListSearchControl } from "./listSearch.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/list/ListToolbar.tsx
+/** A list page's toolbar in the shared order: the count on the left; then
+*  the page's own controls, the filter menu, the display options, the search
+*  and an action on the right. Give it to `ListPage` as its `toolbar`. */
+function ListToolbar({ count, view, search, searchLabel, searchPlaceholder, action, children }) {
+	const { common } = useStrings();
+	const filterActive = count.filterActive ?? (search !== void 0 && (search.filter.trim() !== "" || search.terms.length > 0) || (view?.activeFilterCount ?? 0) > 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-10 items-center justify-between gap-3 py-1",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "shrink-0 whitespace-nowrap",
+			children: /* @__PURE__ */ jsx(ListCount, {
+				total: count.total,
+				matches: count.matches,
+				filterActive,
+				noun: count.noun,
+				nounPlural: count.nounPlural
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-center gap-1",
+			children: [
+				children,
+				view && /* @__PURE__ */ jsx(ListFilterMenu, { view }),
+				view && /* @__PURE__ */ jsx(ListDisplayMenu, { view }),
+				search && /* @__PURE__ */ jsx(ListSearchControl, {
+					search,
+					label: searchLabel,
+					placeholder: searchPlaceholder ?? searchLabel ?? common.search
+				}),
+				!!action && /* @__PURE__ */ jsx("span", {
+					className: "ml-1 flex",
+					children: action
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { ListToolbar };

package/dist/list/ListViewControls.d.ts

@@ -1,11 +1,15 @@
 import type { ListView } from './listView.js';
+import type { ListFilters } from './useListFilters.js';
 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>;
+/** The toolbar's Filter button, which F presses. Beside a chip row (`ListFilterBar`, which
+ *  `ListPage` shows), it opens the Add filter menu: picking a field adds its chip and opens its
+ *  value picker there. Without one, it keeps a submenu of values for each facet. */
+export declare function ListFilterMenu<T>({ view, filters, label, }: {
+    view?: ListView<T> | undefined;
+    /** For a page whose filters come from `useListFilters` rather than a list view. */
+    filters?: ListFilters | undefined;
     label?: string;
 }): import("react").JSX.Element | null;

package/dist/list/ListViewControls.js

@@ -9,9 +9,10 @@ import { Popover } from "../components/Popover.js";
 import { InfoTip } from "../components/InfoTip.js";
 import { Switch } from "../components/Switch.js";
 import { Select } from "../components/Select.js";
+import { AddFilterMenu } from "./ListFilterBar.js";
 import { Menu } from "@base-ui/react/menu";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Toggle } from "@base-ui/react/toggle";
 //#region src/list/ListViewControls.tsx
 /** A toggle pill, for the Display panel's column and pinned-action pickers. */
@@ -154,9 +155,7 @@ function OptionSelect({ label, options, value, onSelect }) {
 		"aria-label": label,
 		items: options,
 		value,
-		onValueChange: (next) => {
-			if (next !== null) onSelect(next);
-		},
+		onValueChange: onSelect,
 		trigger: /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			className: "flex items-center gap-1.5 rounded-md border border-(--theme-border) px-2 py-1 text-[12px] text-(--theme-app) hover:bg-(--theme-muted-panel-bg)",
@@ -164,19 +163,28 @@ function OptionSelect({ label, options, value, onSelect }) {
 		})
 	});
 }
-/** The Filter button's menu: a submenu for each facet, whose options toggle
-*  without closing it. F opens it. */
-function ListFilterMenu({ view, label }) {
-	const { common } = useStrings();
-	if (view.facets.length === 0) return null;
-	const active = view.activeFilterCount > 0;
-	return /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(Menu.Trigger, { render: /* @__PURE__ */ jsx(IconButton, {
+/** The toolbar's Filter button, which F presses. Beside a chip row (`ListFilterBar`, which
+*  `ListPage` shows), it opens the Add filter menu: picking a field adds its chip and opens its
+*  value picker there. Without one, it keeps a submenu of values for each facet. */
+function ListFilterMenu({ view, filters, label }) {
+	const { common, filters: t } = useStrings();
+	const state = filters ?? view?.filterState;
+	if (!state || state.fields.length === 0) return null;
+	const active = state.count > 0;
+	const button = /* @__PURE__ */ jsx(IconButton, {
 		variant: "outline",
 		icon: /* @__PURE__ */ jsx(FilterIcon, {}),
-		label: label ?? common.filter,
+		label: label ?? t.filterButton(state.count),
 		dot: active,
 		shortcut: "f"
-	}) }), /* @__PURE__ */ jsxs(MenuPopup, {
+	});
+	if (state.barMounted) return /* @__PURE__ */ jsx(AddFilterMenu, {
+		filters: state,
+		trigger: button,
+		align: "end"
+	});
+	if (!view || view.facets.length === 0) return null;
+	return /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(Menu.Trigger, { render: button }), /* @__PURE__ */ jsxs(MenuPopup, {
 		align: "end",
 		className: "w-56",
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -217,7 +225,7 @@ function FacetSubmenu({ view, facet }) {
 		children: selected.length
 	})] }), /* @__PURE__ */ jsxs(MenuPopup, {
 		side: "inline-start",
-		children: [facet.searchable ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		children: [facet.searchable ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 			className: "sticky top-0 z-[1] border-b border-(--theme-border) bg-(--theme-app-bg) px-3 pb-1.5 pt-0.5",
 			children: /* @__PURE__ */ jsx(Menu.Input, {
 				placeholder: strings.list.searchOptions,

package/dist/list/UserHoverCard.d.ts

@@ -19,8 +19,9 @@ export interface UserHoverCardProps {
 }
 export declare function UserHoverCard({ username, name, avatarSrc, badge, href, linkComponent, loading, children, }: UserHoverCardProps): import("react").JSX.Element;
 /** One detail line of a hover card: a leading icon and its content. With
- * `onClick` the line is a button. */
-export declare function HoverCardRow({ icon, children, title, align, truncate, onClick, }: {
+ * `onClick` the line is a button; with `copy` it is a button that copies a value,
+ * such as the email address it shows, its icon turning into a check for a moment. */
+export declare function HoverCardRow({ icon, children, title, align, truncate, onClick, copy, }: {
     icon: ReactNode;
     children: ReactNode;
     title?: string | undefined;
@@ -28,4 +29,9 @@ export declare function HoverCardRow({ icon, children, title, align, truncate, o
     align?: 'center' | 'start' | undefined;
     truncate?: boolean | undefined;
     onClick?: (() => void) | undefined;
+    /** Copies `text` when pressed, named by `label`: "Copy email", then a toast "Copied email". */
+    copy?: {
+        text: string;
+        label: string;
+    } | undefined;
 }): import("react").JSX.Element;