@parallelworks/ui 0.90.0 → 0.91.0

package/README.md

@@ -88,6 +88,7 @@ Each need has one component. Reach for it before styling markup by hand.
 | Nothing to show yet, or nothing matches | `EmptyState` |
 | A page, card or section that couldn't show what it was asked for, such as a 404 | `ErrorPage`, its words chosen by the status |
 | A list page's toolbar and its loading, error, empty and no-match states | `ListToolbar` in `ListPage` with `total`, `matches`, `empty` and `noMatches` (from `./list`) |
+| How many rows a list has, or how many of them match ("2 of 7 tokens") | `count` on `ListPage`, with its `total` and `matches`: it shows under the last row, only while there are rows. A `ListToolbar`'s `count` moves there too, and the toolbar then sits at the end of the filter chips' first line (`ListFilterBar`'s `end`), or on a line alone while no chip shows. `ListCount` placed by hand is deprecated |
 | A text field | `Input`, `Textarea`, or a control framed by `Field`, whose `actions` hold buttons that act on it |
 | A number, a date, a color | `NumberInput`, `DatePicker`, `ColorInput` |
 | A one-time code, such as a sign-in check | `OneTimeCodeInput` |
@@ -119,7 +120,7 @@ Each need has one component. Reach for it before styling markup by hand.
 | A message set into the page: guidance, a warning, an error | `Callout`; `variant="bar"` across a surface under its header |
 | A passing notice, or the progress of work in the background | `toast` |
 | How full something is, how far a task has come | `Meter`, `ProgressBar` |
-| Pages of a long list | `Pagination` |
+| Pages of a long list | `Pagination`; in a `ListPage`, as its `pager`, on the count's line under the last row, where a "Load more" button goes too |
 | A grouped page of settings | `SettingsCard` with `SettingRow`s |
 | A person or an agent | `Avatar`, colored by name without a picture, or by kind; `AvatarGroup` for an overlapping stack with a "+N" chip |
 | A status in words | `StatusBadge`, or `StatusDot` beside text that says it |

package/dist/list/ListFilterBar.d.ts

@@ -30,6 +30,11 @@ export interface ListFilterBarProps {
     filters: ListFilters | undefined;
     /** At the row's end, such as Save view or Update view. */
     trailing?: ReactNode;
+    /** The list's own controls, such as its toolbar's menus and search, held at the end of the
+     *  first line while the chips wrap beside them, so they never take a line of their own. With
+     *  no chip to show, they take the row alone. `ListPage` puts its toolbar here once the count
+     *  has moved under the rows. */
+    end?: ReactNode;
     /** Names the row; defaults to the provider's `filters.activeFilters`. */
     label?: string | undefined;
     className?: string | undefined;
@@ -42,5 +47,5 @@ export interface ListFilterBarProps {
  *  The list's quick filters show above the chips as toggles, always, setting the same filters
  *  the chips edit. At phone width each keeps to one line, and "+n more" opens the rest in the
  *  same sheet. */
-export declare function ListFilterBar({ filters, trailing, label, className }: ListFilterBarProps): false | import("react").JSX.Element | null;
+export declare function ListFilterBar({ end, trailing, ...props }: ListFilterBarProps): import("react").JSX.Element;
 export {};

package/dist/list/ListFilterBar.js

@@ -11,6 +11,7 @@ import { Calendar } from "../components/DatePicker.js";
 import { Drawer } from "../components/Drawer.js";
 import { ToggleGroup } from "../components/ToggleGroup.js";
 import { DATE_PRESETS, fieldOperators, isDatePreset, isMultiple, operatorCount, parseDay, toDay } from "./filterModel.js";
+import { ListToolbarInlineContext } from "./listSearch.js";
 import { Menu } from "@base-ui/react/menu";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -155,6 +156,7 @@ function FilterChip({ filters, filter, field, stretch = false, answers, onRemove
 							}, i))
 						}),
 						/* @__PURE__ */ jsx("span", {
+							"data-filter-value": "",
 							className: cx("min-w-0 truncate", !stretch && "max-w-40", unset && "text-(--theme-muted-text-color)"),
 							children: valueText
 						}),
@@ -802,7 +804,95 @@ function QuickRule() {
 *  The list's quick filters show above the chips as toggles, always, setting the same filters
 *  the chips edit. At phone width each keeps to one line, and "+n more" opens the rest in the
 *  same sheet. */
-function ListFilterBar({ filters, trailing, label, className }) {
+function ListFilterBar({ end, trailing, ...props }) {
+	if (end === void 0 || end === null || end === false) return /* @__PURE__ */ jsx(FilterRow, {
+		trailing,
+		...props
+	});
+	return /* @__PURE__ */ jsx(SharedRow, {
+		end,
+		trailing,
+		...props
+	});
+}
+var VALUE_MIN_PX = 88;
+/** The chips with the list's controls at their first line's end. */
+function SharedRow({ end, trailing, ...props }) {
+	const box = useRef(null);
+	const controls = useRef(null);
+	const endBox = useRef(null);
+	const [width, setWidth] = useState(0);
+	const [trailingLast, setTrailingLast] = useState(false);
+	const [reach, setReach] = useState(0);
+	const [noReach, setNoReach] = useState(false);
+	const chipKeys = props.filters?.chips.map((c) => c.field).join("\0") ?? "";
+	const shows = props.filters !== void 0 && rowShows(props.filters);
+	useLayoutEffect(() => {
+		const el = box.current;
+		if (!el) return;
+		const measure = () => setWidth(el.getBoundingClientRect().width);
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
+	useLayoutEffect(() => {
+		setTrailingLast(false);
+		setNoReach(false);
+	}, [width, chipKeys]);
+	useLayoutEffect(() => {
+		const el = box.current;
+		if (!el || !trailing || !shows) return;
+		const chips = Array.from(el.querySelectorAll("[data-filter-chip]"));
+		const firstTop = chips[0]?.offsetTop;
+		if (trailingLast) {
+			const moved = el.querySelector("[data-filter-trailing]");
+			if (!noReach && moved && moved.offsetTop === firstTop) {
+				setNoReach(true);
+				return;
+			}
+			const next = noReach ? 0 : (controls.current?.getBoundingClientRect().width ?? 0) + GAP_PX;
+			if (Math.abs(next - reach) > .5) setReach(next);
+			return;
+		}
+		if (chips.some((chip) => {
+			const value = chip.querySelector("[data-filter-value]");
+			return chip.offsetTop === firstTop && value !== null && value.clientWidth < Math.min(value.scrollWidth, VALUE_MIN_PX);
+		})) {
+			setReach((endBox.current?.getBoundingClientRect().width ?? 0) + GAP_PX);
+			setTrailingLast(true);
+		}
+	});
+	return /* @__PURE__ */ jsx(ListToolbarInlineContext, {
+		value: true,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: box,
+			className: "flex min-h-10 items-start gap-3",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1 empty:hidden",
+				children: /* @__PURE__ */ jsx(FilterRow, {
+					...props,
+					trailing: trailingLast ? trailing : void 0,
+					trailingReach: trailingLast ? reach : 0
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				ref: controls,
+				className: "ml-auto flex min-h-10 shrink-0 items-center gap-1.5",
+				children: [shows && !trailingLast && trailing, /* @__PURE__ */ jsx("div", {
+					ref: endBox,
+					className: "flex items-center",
+					children: end
+				})]
+			})]
+		})
+	});
+}
+var GAP_PX = 12;
+/** Whether the row has anything to show: a chip, or a quick filter's toggles. */
+function rowShows(filters) {
+	return orderedChips(filters).length > 0 || (filters.quick ?? []).some((q) => filters.fields.some((f) => f.key === q.field));
+}
+function FilterRow({ filters, trailing, trailingReach = 0, label, className }) {
 	const strings = useStrings();
 	const t = strings.filters;
 	const registerBar = filters?.registerBar;
@@ -813,6 +903,7 @@ function ListFilterBar({ filters, trailing, label, className }) {
 	const [width, setWidth] = useState(0);
 	const [limit, setLimit] = useState(null);
 	const [clearFolded, setClearFolded] = useState(false);
+	const [addFolded, setAddFolded] = useState(false);
 	const [sheet, setSheet] = useState(false);
 	const [focusAt, setFocusAt] = useState(null);
 	const chips = filters ? orderedChips(filters) : [];
@@ -844,6 +935,7 @@ function ListFilterBar({ filters, trailing, label, className }) {
 	useLayoutEffect(() => {
 		setLimit(null);
 		setClearFolded(false);
+		setAddFolded(false);
 	}, [
 		width,
 		chipKeys,
@@ -860,6 +952,18 @@ function ListFilterBar({ filters, trailing, label, className }) {
 			return;
 		}
 		const add = el.querySelector("[data-filter-add]");
+		const addItem = add ? Array.from(el.children).find((child) => child.contains(add)) : void 0;
+		const before = addItem?.previousElementSibling;
+		if (addItem instanceof HTMLElement && before instanceof HTMLElement && Math.round(addItem.offsetTop) > Math.round(before.offsetTop)) {
+			if (chips.length > shown) {
+				setAddFolded(true);
+				return;
+			}
+			if (shown > fixedChips) {
+				setLimit(shown - 1);
+				return;
+			}
+		}
 		const clear = el.querySelector("[data-filter-clear]");
 		if (add && clear && Math.round(clear.offsetTop) > Math.round(add.offsetTop)) setClearFolded(true);
 	});
@@ -950,10 +1054,12 @@ function ListFilterBar({ filters, trailing, label, className }) {
 				className: "flex h-7 cursor-pointer items-center rounded-md border border-dashed border-(--theme-border) px-2 text-[12px] text-(--theme-app) hover:bg-(--theme-hover) focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--theme-focus)",
 				children: t.overflow(overflow)
 			}),
-			addButton(narrow),
-			!(narrow && clearFolded) && clearButton,
+			!(narrow && addFolded) && addButton(narrow),
+			!(narrow && (clearFolded || addFolded)) && clearButton,
 			trailing && /* @__PURE__ */ jsx("div", {
+				"data-filter-trailing": "",
 				className: "ml-auto flex items-center gap-1.5",
+				style: trailingReach ? { marginRight: -trailingReach } : void 0,
 				children: trailing
 			}),
 			!hasQuick && drawer

package/dist/list/ListPage.d.ts

@@ -14,7 +14,10 @@ export interface ListPageProps {
     bleed?: boolean | undefined;
     /** 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. */
+     *  its `PageHeader`. With `total`, it hides while the list is empty. Once
+     *  the page shows the count under its rows, the toolbar sits at the end of
+     *  the filter chips' first line, or takes the line alone while no chip
+     *  shows. */
     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
@@ -43,8 +46,26 @@ export interface ListPageProps {
     /** 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;
+    /** Names what the list counts. With `total` (and `matches`), the page
+     *  shows the count under its last row: "7 tokens", or "2 of 7 tokens"
+     *  while a search or filter narrows the list. It shows only while there
+     *  are rows: the empty and no-matches states say enough. A `ListToolbar`'s
+     *  own `count` shows there too. */
+    count?: ListPageCount | undefined;
+    /** Under the last row, on the count's line: a `Pagination`, or a "Load
+     *  more" button. */
+    pager?: ReactNode;
     children: ReactNode;
 }
+/** What a list's count calls its rows. */
+export interface ListPageCount {
+    noun: string;
+    nounPlural: string;
+    /** Whether a search or filter narrows the list, so the count reads "2 of
+     *  7". By default, whether the view's filters are on or `matches` differs
+     *  from `total`; pass it for a search the page holds. */
+    filterActive?: boolean | undefined;
+}
 /** 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. */
@@ -58,7 +79,7 @@ export interface ListPageEmpty {
  *  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 ListPage({ bleed, toolbar, filterBar, view, loading, error, errorNoun, total, matches, empty, noMatches, toolbarWhenEmpty, count, pager, 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

@@ -5,8 +5,10 @@ import { useNavigation } from "../components/Provider.js";
 import { AppLink, isPlainClick } from "../components/AppLink.js";
 import { isMenuDivider, isMenuGroup, isMenuSubmenu, useRunAction, warnIfInert } from "../components/MenuEntries.js";
 import { CellPlacementContext, STACKED_ITEM, Table } from "../components/Table.js";
+import { ListCountText, ListFooterCountContext } from "./listSearch.js";
 import { ListFilterBar } from "./ListFilterBar.js";
 import { ListActionsHeader, ListError, ListSkeleton, StretchRowLinkContext } from "./ListTable.js";
+import { ListToolbar, toolbarCount } from "./ListToolbar.js";
 import { MoreButton, rowContextMenuProps, useRowMenuActive } from "./rowMenu.js";
 import { Children, cloneElement, createContext, isValidElement, useContext, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -47,13 +49,25 @@ var STAYS_BESIDE_STACK = "@max-[36rem]:align-top @max-[36rem]:pt-2.5";
 *  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 }) {
+function ListPage({ bleed = false, toolbar, filterBar, view, loading = false, error, errorNoun, total, matches, empty, noMatches, toolbarWhenEmpty = false, count, pager, 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;
+	const givenBar = filterBar === void 0 ? view?.filterState && view.filterState.fields.length > 0 ? /* @__PURE__ */ jsx(ListFilterBar, { filters: view.filterState }) : null : filterBar;
+	const fromToolbar = isValidElement(toolbar) && toolbar.type === ListToolbar ? toolbarCount(toolbar.props) : void 0;
+	const counted = count && total !== void 0 ? {
+		total,
+		matches: matches ?? total,
+		filterActive: count.filterActive ?? ((view?.filterState?.count ?? 0) > 0 || (matches ?? total) !== total),
+		noun: count.noun,
+		nounPlural: count.nounPlural
+	} : fromToolbar;
+	const showsRows = !loading && !failed && !isEmpty && !noneMatch && (!counted || counted.matches > 0);
+	const footerCount = showsRows ? counted : void 0;
+	const shareLine = counted !== void 0 && !!toolbar && isValidElement(givenBar) && givenBar.type === ListFilterBar;
+	const bar = shareLine ? cloneElement(givenBar, { end: toolbar }) : givenBar;
 	let body = children;
 	if (loading) body = /* @__PURE__ */ jsx(ListSkeleton, {});
 	else if (failed) body = /* @__PURE__ */ jsx(ListError, {
@@ -70,23 +84,32 @@ function ListPage({ bleed = false, toolbar, filterBar, view, loading = false, er
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: cx("flex h-full min-h-0 flex-col", bleed && "-m-4"),
-		children: [
-			!!toolbar && controls && /* @__PURE__ */ jsx("div", {
+		children: [/* @__PURE__ */ jsxs(ListFooterCountContext, {
+			value: counted !== void 0,
+			children: [!!toolbar && !shareLine && controls && /* @__PURE__ */ jsx("div", {
 				className: "shrink-0 px-4",
 				children: toolbar
-			}),
-			!!bar && controls && /* @__PURE__ */ jsx("div", {
+			}), !!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
-				})
-			})
-		]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "relative @container min-h-0 flex-1 overflow-auto",
+			children: [/* @__PURE__ */ jsx(ListRowActionsProvider, {
+				view,
+				children: body
+			}), (footerCount || showsRows && !!pager) && /* @__PURE__ */ jsx(ListFooter, {
+				count: footerCount,
+				pager
+			})]
+		})]
+	});
+}
+/** The line under a list's last row: its count at the rows' start, its pager at their end. */
+function ListFooter({ count, pager }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-10 flex-wrap items-center gap-x-3 px-4 empty:hidden [&>:not([role=status])]:ml-auto [&>nav]:flex-1 [&>nav]:px-0 [&>nav>div:first-child]:justify-end",
+		children: [count && /* @__PURE__ */ jsx(ListCountText, { ...count }), pager]
 	});
 }
 var STACKED = { stacked: true };

package/dist/list/ListToolbar.d.ts

@@ -1,11 +1,13 @@
 import type { ReactNode } from 'react';
-import { type ListSearch } from './listSearch.js';
+import { type ListCountProps, 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: {
+     *  the view's filters narrow the list. As a `ListPage`'s `toolbar`, the
+     *  page shows it under the last row, as its own `count` would; anywhere
+     *  else, it leads the toolbar. */
+    count?: {
         total: number;
         matches: number;
         filterActive?: boolean | undefined;
@@ -25,7 +27,11 @@ export interface ListToolbarProps<T> {
     /** 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;
+/** The count a `ListToolbar` was given, as a `ListPage` shows it under its rows. */
+export declare function toolbarCount<T>({ count, view, search, }: ListToolbarProps<T>): ListCountProps | undefined;
+/** A list page's toolbar in the shared order, at its end: the page's own
+ *  controls, the filter menu, the display options, the search and an action.
+ *  Give it to `ListPage` as its `toolbar`; the list's count goes under its
+ *  rows (see `ListPage`'s `count`), and while filter chips show, the toolbar
+ *  sits at the end of their first line. */
+export declare function ListToolbar<T>(props: ListToolbarProps<T>): import("react").JSX.Element;

package/dist/list/ListToolbar.js

@@ -1,25 +1,36 @@
 import { useStrings } from "../components/Provider.js";
+import { ListCountText, ListFooterCountContext, ListSearchControl, ListToolbarInlineContext } from "./listSearch.js";
 import { ListDisplayMenu, ListFilterMenu } from "./ListViewControls.js";
-import { ListCount, ListSearchControl } from "./listSearch.js";
+import { useContext } from "react";
 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();
+/** The count a `ListToolbar` was given, as a `ListPage` shows it under its rows. */
+function toolbarCount({ count, view, search }) {
+	if (!count) return;
 	const filterActive = count.filterActive ?? (search !== void 0 && (search.filter.trim() !== "" || search.terms.length > 0) || (view?.activeFilterCount ?? 0) > 0);
+	return {
+		total: count.total,
+		matches: count.matches,
+		filterActive,
+		noun: count.noun,
+		nounPlural: count.nounPlural
+	};
+}
+/** A list page's toolbar in the shared order, at its end: the page's own
+*  controls, the filter menu, the display options, the search and an action.
+*  Give it to `ListPage` as its `toolbar`; the list's count goes under its
+*  rows (see `ListPage`'s `count`), and while filter chips show, the toolbar
+*  sits at the end of their first line. */
+function ListToolbar(props) {
+	const { view, search, searchLabel, searchPlaceholder, action, children } = props;
+	const { common } = useStrings();
+	const count = useContext(ListFooterCountContext) ? void 0 : toolbarCount(props);
+	const inline = useContext(ListToolbarInlineContext);
 	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
-			})
+		className: inline ? "flex items-center justify-end gap-3" : "flex min-h-10 items-center justify-end gap-3 py-1",
+		children: [count && /* @__PURE__ */ jsx("div", {
+			className: "mr-auto flex h-8 shrink-0 items-center whitespace-nowrap",
+			children: /* @__PURE__ */ jsx(ListCountText, { ...count })
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 items-center gap-1",
 			children: [
@@ -40,4 +51,4 @@ function ListToolbar({ count, view, search, searchLabel, searchPlaceholder, acti
 	});
 }
 //#endregion
-export { ListToolbar };
+export { ListToolbar, toolbarCount };

package/dist/list/index.d.ts

@@ -1,7 +1,7 @@
 export { ActionToolbar, type ToolbarAction, ToolbarButton, type ToolbarItem, } from './ActionToolbar.js';
 export { type ActiveFilter, applyFilterList, DATE_PRESETS, type DatePreset, dateFilterRange, decodeFilters, encodeFilters, type FilterField, type FilterKind, type FilterOperator, type FilterOption, type FilterRowValue, filterParamKeys, matchFilter, type QuickFilter, sameFilters, withFilterParams, } from './filterModel.js';
 export { AddFilterMenu, type AddFilterMenuProps, FilterChip, ListFilterBar, type ListFilterBarProps, } from './ListFilterBar.js';
-export { GroupRow, ListColumns, ListPage, type ListPageEmpty, type ListPageProps, ListRow, ListRowActionsProvider, useListNavigate, } from './ListPage.js';
+export { GroupRow, ListColumns, ListPage, type ListPageCount, type ListPageEmpty, type ListPageProps, ListRow, ListRowActionsProvider, useListNavigate, } from './ListPage.js';
 export { actionsColumnWidth, ListActionsHeader, ListCellText, ListError, ListSelectAllHeader, ListSkeleton, listTableFixedProps, listTableProps, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, STRETCHED_LINK, } from './ListTable.js';
 export { ListToolbar, type ListToolbarProps } from './ListToolbar.js';
 export { ListDisplayMenu, ListFilterMenu } from './ListViewControls.js';

package/dist/list/index.js

@@ -1,13 +1,13 @@
 import { ActionToolbar, ToolbarButton } from "./ActionToolbar.js";
 import { DATE_PRESETS, applyFilterList, dateFilterRange, decodeFilters, encodeFilters, filterParamKeys, matchFilter, sameFilters, withFilterParams } from "./filterModel.js";
+import { ListCount, ListSearchControl, useListSearch } from "./listSearch.js";
 import { AddFilterMenu, FilterChip, ListFilterBar } from "./ListFilterBar.js";
 import { ListActionsHeader, ListCellText, ListError, ListSelectAllHeader, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, STRETCHED_LINK, actionsColumnWidth, listTableFixedProps, listTableProps } from "./ListTable.js";
-import { MoreButton, assembleRowMenu, rowContextMenuProps, useCopySubmenu, useRowMenuActive } from "./rowMenu.js";
-import { GroupRow, ListColumns, ListPage, ListRow, ListRowActionsProvider, useListNavigate } from "./ListPage.js";
 import { useListFilters } from "./useListFilters.js";
 import { DEFAULT_ORDER, FAVORITE_ORDER, useListView } from "./listView.js";
 import { ListDisplayMenu, ListFilterMenu } from "./ListViewControls.js";
-import { ListCount, ListSearchControl, useListSearch } from "./listSearch.js";
 import { ListToolbar } from "./ListToolbar.js";
+import { MoreButton, assembleRowMenu, rowContextMenuProps, useCopySubmenu, useRowMenuActive } from "./rowMenu.js";
+import { GroupRow, ListColumns, ListPage, ListRow, ListRowActionsProvider, useListNavigate } from "./ListPage.js";
 import { HoverCardRow, UserHoverCard } from "./UserHoverCard.js";
 export { ActionToolbar, AddFilterMenu, DATE_PRESETS, DEFAULT_ORDER, FAVORITE_ORDER, FilterChip, GroupRow, HoverCardRow, ListActionsHeader, ListCellText, ListColumns, ListCount, ListDisplayMenu, ListError, ListFilterBar, ListFilterMenu, ListPage, ListRow, ListRowActionsProvider, ListSearchControl, ListSelectAllHeader, ListSkeleton, ListToolbar, MoreButton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, STRETCHED_LINK, ToolbarButton, UserHoverCard, actionsColumnWidth, applyFilterList, assembleRowMenu, dateFilterRange, decodeFilters, encodeFilters, filterParamKeys, listTableFixedProps, listTableProps, matchFilter, rowContextMenuProps, sameFilters, useCopySubmenu, useListFilters, useListNavigate, useListSearch, useListView, useRowMenuActive, withFilterParams };

package/dist/list/listSearch.d.ts

@@ -18,10 +18,26 @@ export declare function ListSearchControl({ search, placeholder, label: labelPro
     placeholder: string;
     label?: string | undefined;
 }): import("react").JSX.Element;
-export declare function ListCount({ total, matches, filterActive, noun, nounPlural, }: {
+/** What a list's count needs: how many there are, how many a search or filter leaves, and the
+ *  noun in both numbers. */
+export interface ListCountProps {
     total: number;
     matches: number;
     filterActive: boolean;
     noun: string;
     nounPlural: string;
-}): import("react").JSX.Element;
+}
+/** True inside a `ListPage` that shows its count under its rows, so a count placed in its toolbar
+ *  by hand gives way rather than showing twice. */
+export declare const ListFooterCountContext: import("react").Context<boolean>;
+/** True where a toolbar shares a line with the list's filter chips, at its end: a `ListToolbar`
+ *  there drops its own row's height and padding. */
+export declare const ListToolbarInlineContext: import("react").Context<boolean>;
+/** The count's words, "7 tokens" or "2 of 7 tokens", as a status so a screen reader hears the
+ *  count change as a filter narrows it. */
+export declare function ListCountText({ total, matches, filterActive, noun, nounPlural }: ListCountProps): import("react").JSX.Element;
+/** A list's count, placed by hand.
+ *  @deprecated Give `ListPage` a `count` instead (with its `total` and `matches`): it shows the
+ *  count under the last row, beside a `pager`, and hides it while the list shows its empty or
+ *  no-matches state. Inside a `ListPage` that shows its own count, this renders nothing. */
+export declare function ListCount(props: ListCountProps): import("react").JSX.Element;

package/dist/list/listSearch.js

@@ -5,7 +5,7 @@ import { Tooltip } from "../components/Tooltip.js";
 import { useLocale, usePersistedState, useStrings } from "../components/Provider.js";
 import { isTextEntryContext } from "../components/shortcutKey.js";
 import { formatInteger } from "../format.js";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/list/listSearch.tsx
 var NO_TERMS = [];
@@ -133,18 +133,34 @@ function ListSearchControl({ search, placeholder, label: labelProp }) {
 		})
 	});
 }
-function ListCount({ total, matches, filterActive, noun, nounPlural }) {
+/** True inside a `ListPage` that shows its count under its rows, so a count placed in its toolbar
+*  by hand gives way rather than showing twice. */
+var ListFooterCountContext = createContext(false);
+/** True where a toolbar shares a line with the list's filter chips, at its end: a `ListToolbar`
+*  there drops its own row's height and padding. */
+var ListToolbarInlineContext = createContext(false);
+/** The count's words, "7 tokens" or "2 of 7 tokens", as a status so a screen reader hears the
+*  count change as a filter narrows it. */
+function ListCountText({ total, matches, filterActive, noun, nounPlural }) {
 	const { list: t } = useStrings();
 	const locale = useLocale();
 	const count = (n) => formatInteger(n, locale);
+	return /* @__PURE__ */ jsx("span", {
+		role: "status",
+		className: "text-[13px] text-(--theme-muted-text-color)",
+		children: filterActive ? t.matchCount(count(matches), count(total), nounPlural) : t.count(count(total), total === 1 ? noun : nounPlural)
+	});
+}
+/** A list's count, placed by hand.
+*  @deprecated Give `ListPage` a `count` instead (with its `total` and `matches`): it shows the
+*  count under the last row, beside a `pager`, and hides it while the list shows its empty or
+*  no-matches state. Inside a `ListPage` that shows its own count, this renders nothing. */
+function ListCount(props) {
+	if (useContext(ListFooterCountContext)) return /* @__PURE__ */ jsx("span", { "aria-hidden": "true" });
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex items-center h-8",
-		children: /* @__PURE__ */ jsx("span", {
-			role: "status",
-			className: "text-[13px] text-(--theme-muted-text-color)",
-			children: filterActive ? t.matchCount(count(matches), count(total), nounPlural) : t.count(count(total), total === 1 ? noun : nounPlural)
-		})
+		children: /* @__PURE__ */ jsx(ListCountText, { ...props })
 	});
 }
 //#endregion
-export { ListCount, ListSearchControl, useListSearch };
+export { ListCount, ListCountText, ListFooterCountContext, ListSearchControl, ListToolbarInlineContext, useListSearch };