@parallelworks/ui 0.90.0 → 0.92.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/components/Table.d.ts

@@ -12,10 +12,17 @@ export interface CellPlacement {
     className?: string | undefined;
     after?: React.ReactNode;
     stacked?: boolean | undefined;
+    /** A stacked value joined to the one before it on its line, after a dot. */
+    joined?: boolean | undefined;
 }
 /** A stacked column's value on the line under a row's name: it flows inline with the others and
  *  wraps between them, never inside a value, which truncates if it is wider than the line. */
 export declare const STACKED_ITEM = "flex min-w-0 max-w-full items-center whitespace-nowrap [&>*]:min-w-0 [&>*]:truncate";
+/** A joined stacked value's dot, part of the value so a value that renders nothing leaves none:
+ *  6px either side of it, where the line keeps 12px between values. */
+export declare const STACKED_JOINED = "-ml-1.5 before:pr-1.5 before:content-['\u00B7'] before:text-(--theme-muted-text-color)";
+/** Whether a cell's content shows anything: an empty string, like a missing value, doesn't. */
+export declare function hasContent(children: React.ReactNode): boolean;
 /** Set by a list row around each of its cells; a `Table.Item` takes what it asks. */
 export declare const CellPlacementContext: React.Context<CellPlacement | null>;
 interface ItemProps extends React.TdHTMLAttributes<HTMLTableCellElement> {

package/dist/components/Table.js

@@ -26,13 +26,20 @@ var cellX = "px-3";
 /** A stacked column's value on the line under a row's name: it flows inline with the others and
 *  wraps between them, never inside a value, which truncates if it is wider than the line. */
 var STACKED_ITEM = "flex min-w-0 max-w-full items-center whitespace-nowrap [&>*]:min-w-0 [&>*]:truncate";
+/** A joined stacked value's dot, part of the value so a value that renders nothing leaves none:
+*  6px either side of it, where the line keeps 12px between values. */
+var STACKED_JOINED = "-ml-1.5 before:pr-1.5 before:content-['·'] before:text-(--theme-muted-text-color)";
+/** Whether a cell's content shows anything: an empty string, like a missing value, doesn't. */
+function hasContent(children) {
+	return React.Children.toArray(children).some((child) => child !== "");
+}
 /** Set by a list row around each of its cells; a `Table.Item` takes what it asks. */
 var CellPlacementContext = createContext(null);
 function Item({ wrap = false, children, className, ...tdProps }) {
 	const density = useContext(DensityContext);
 	const placed = useContext(CellPlacementContext);
-	if (placed?.stacked) return React.Children.toArray(children).length > 0 ? /* @__PURE__ */ jsx("div", {
-		className: STACKED_ITEM,
+	if (placed?.stacked) return hasContent(children) ? /* @__PURE__ */ jsx("div", {
+		className: cx(STACKED_ITEM, placed.joined && "-ml-1.5 before:pr-1.5 before:content-['·'] before:text-(--theme-muted-text-color)"),
 		"data-stacked": true,
 		children
 	}) : null;
@@ -121,4 +128,4 @@ function Table({ density = "comfortable", columns, caps = true, flush = false, c
 Table.Header = Header;
 Table.Item = Item;
 //#endregion
-export { CellPlacementContext, STACKED_ITEM, Table };
+export { CellPlacementContext, STACKED_ITEM, STACKED_JOINED, Table, hasContent };

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

@@ -4,9 +4,11 @@ import { Tooltip } from "../components/Tooltip.js";
 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 { CellPlacementContext, STACKED_ITEM, Table, hasContent } 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";
@@ -17,20 +19,24 @@ var RowActionsContext = createContext({
 	always: false,
 	columnClasses: [],
 	columnStacks: [],
+	columnStackLines: [],
 	reservesLane: false
 });
+var NO_STACK_LINES = [];
 function useRowActions(view) {
 	return useMemo(() => ({
 		show: view?.showActions ?? true,
 		always: view?.alwaysShowActions ?? false,
 		columnClasses: view?.columnClasses ?? [],
 		columnStacks: view?.columnStacks ?? [],
+		columnStackLines: view?.columnStackLines ?? NO_STACK_LINES,
 		reservesLane: view?.reservesActionLane ?? view?.lastColumnLocked ?? false
 	}), [
 		view?.showActions,
 		view?.alwaysShowActions,
 		view?.columnClasses,
 		view?.columnStacks,
+		view?.columnStackLines,
 		view?.lastColumnLocked,
 		view?.reservesActionLane
 	]);
@@ -47,13 +53,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,52 +88,96 @@ 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 };
-var STACKED_LINE = "mt-1 flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 empty:hidden @[36rem]:hidden";
+var STACKED_JOINED_PLACEMENT = {
+	stacked: true,
+	joined: true
+};
+var STACKED_LINE = "mt-1 flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-xs text-(--theme-muted-text-color) empty:hidden @[36rem]:hidden";
+var STACKED_LINES = "mt-1 flex min-w-0 flex-col gap-y-1 text-xs text-(--theme-muted-text-color) empty:hidden @[36rem]:hidden";
+var STACKED_LINES_LINE = "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1";
 var isCellElement = (child) => child.type === Table.Item || child.type === "td";
 function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selected, selectionActive, onRowSelect, leading, className, children }) {
 	const { active: menuActive, openMenu: openRowMenu } = useRowMenuActive(openMenu);
-	const { show: showActions, always: alwaysShowActions, columnClasses, columnStacks, reservesLane } = useContext(RowActionsContext);
+	const { show: showActions, always: alwaysShowActions, columnClasses, columnStacks, columnStackLines, reservesLane } = useContext(RowActionsContext);
 	const cells = Children.toArray(children);
 	const stacked = cells.flatMap((child, i) => {
 		if (i === 0 || !columnStacks[i] || !isValidElement(child)) return [];
+		const line = columnStackLines[i];
 		if (isCellElement(child)) {
 			const content = child.props.children;
-			return Children.toArray(content).length > 0 ? [child] : [];
+			return hasContent(content) ? [{
+				child,
+				line
+			}] : [];
 		}
-		return [child];
+		return [{
+			child,
+			line
+		}];
 	});
-	const under = stacked.length > 0 ? /* @__PURE__ */ jsx("div", {
+	const item = (child, j, joined = false) => isValidElement(child) && child.type === "td" ? /* @__PURE__ */ jsx("div", {
+		className: cx(STACKED_ITEM, joined && "-ml-1.5 before:pr-1.5 before:content-['·'] before:text-(--theme-muted-text-color)"),
+		"data-stacked": true,
+		children: child.props.children
+	}, j) : /* @__PURE__ */ jsx(CellPlacementContext, {
+		value: joined ? STACKED_JOINED_PLACEMENT : STACKED,
+		children: child
+	}, j);
+	let under;
+	if (stacked.length > 0 && stacked.every(({ line }) => line === void 0)) under = /* @__PURE__ */ jsx("div", {
 		className: STACKED_LINE,
 		"data-stacked-line": true,
-		children: stacked.map((child, j) => isValidElement(child) && child.type === "td" ? /* @__PURE__ */ jsx("div", {
-			className: STACKED_ITEM,
-			"data-stacked": true,
-			children: child.props.children
-		}, j) : /* @__PURE__ */ jsx(CellPlacementContext, {
-			value: STACKED,
-			children: child
-		}, j))
-	}) : void 0;
+		children: stacked.map(({ child }, j) => item(child, j))
+	});
+	else if (stacked.length > 0) {
+		const lines = [];
+		stacked.forEach(({ child, line }, j) => {
+			const current = lines.at(-1);
+			if (!current || line === "own") {
+				lines.push([item(child, j)]);
+				return;
+			}
+			current.push(item(child, j, line === "join"));
+		});
+		under = /* @__PURE__ */ jsx("div", {
+			className: STACKED_LINES,
+			"data-stacked-lines": true,
+			children: lines.map((values, k) => /* @__PURE__ */ jsx("div", {
+				className: STACKED_LINES_LINE,
+				"data-stacked-line": true,
+				children: values
+			}, k))
+		});
+	}
 	const styledCells = cells.map((child, i) => {
 		const cls = cx(columnClasses[i], i > 0 && stacked.length > 0 && !columnStacks[i] && STAYS_BESIDE_STACK);
 		const after = i === 0 ? under : void 0;
@@ -333,6 +395,9 @@ function shareWidths(columns, stacks) {
 	const total = shares.reduce((sum, share) => sum + (share ?? 0), 0);
 	const scale = (tier) => {
 		const kept = columns.reduce((sum, col, i) => sum + (shows(col, i, tier) ? shares[i] ?? 0 : 0), 0);
+		const drops = columns.some((col, i) => !shows(col, i, tier));
+		const unshared = columns.some((col, i) => shows(col, i, tier) && shares[i] === void 0);
+		if (drops && !unshared && kept > 0) return 100 / kept;
 		const left = 100 - (total - kept);
 		return left > 0 ? 100 / left : 1;
 	};

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,12 +1,12 @@
 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';
 export { ListCount, type ListSearch, ListSearchControl, useListSearch, } from './listSearch.js';
-export { type ActionDef, type ColumnDef, DEFAULT_ORDER, FAVORITE_ORDER, type FilterFacet, type ListView, type ListViewChrome, type ListViewConfig, type OrderByOption, useListView, } from './listView.js';
+export { type ActionDef, type ColumnDef, DEFAULT_ORDER, FAVORITE_ORDER, type FilterFacet, type ListView, type ListViewChrome, type ListViewConfig, type OrderByOption, type StackLine, useListView, } from './listView.js';
 export { assembleRowMenu, type CopyFields, type CopySubmenu, MoreButton, type RowAction, rowContextMenuProps, useCopySubmenu, useRowMenuActive, } from './rowMenu.js';
 export { HoverCardRow, UserHoverCard, type UserHoverCardProps, } from './UserHoverCard.js';
 export { type FilterStore, type ListFilters, type ListFiltersConfig, useListFilters, } from './useListFilters.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 };