@protobase/ui 0.16.0 → 0.17.0

package/dist/app/current-address.d.ts

@@ -1,6 +1,9 @@
 import { AppAddress, FilterLayout, MapView, ResourceModel, ViewModel } from "@protobase/schema";
 //#region src/app/current-address.d.ts
-/** A list as the app shows it: every value there, the view's default where the address names none; `map` has none. */
+/**
+ * A list as the app shows it: every value there, the view's default where the address names none; `map` and
+ * `savedSearch`, the saved search it was opened from, have none.
+ */
 export type ListAddress = {
   kind: 'list';
   resource: string;
@@ -9,6 +12,7 @@ export type ListAddress = {
   orderBy: string;
   filterLayout: FilterLayout;
   map?: MapView;
+  savedSearch?: string;
 };
 /** The address the app shows, as logical values. A record's key is in the text form the record API takes. */
 export type CurrentAddress = ListAddress | {

package/dist/app/current-address.js

@@ -54,7 +54,8 @@ const changedList = (read, change, defaults) => {
 		...differs("display") && { display: next.display },
 		...differs("orderBy") && { orderBy: next.orderBy },
 		...differs("filterLayout") && { filterLayout: next.filterLayout },
-		...next.map && { map: next.map }
+		...next.map && { map: next.map },
+		...next.savedSearch && { savedSearch: next.savedSearch }
 	};
 };
 //#endregion

package/dist/app/displays/record-card.js

@@ -32,7 +32,7 @@ const MetaValue = ({ icon, children }) => {
 * value, joined by bullets; or, with a `card` component, what it draws of the row, the built-in content again when it
 * is missing or throws. With a favorite button, a heart in the top right corner saves the record.
 */
-const RecordCard = ({ model, view, display, row, swipe = true }) => {
+const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 	const { image, title, subtitle, amount, badge, meta, footer, flags } = cardFields(model, view, display);
 	const label = (name) => view?.fields[name]?.label ?? humanize(name);
 	const text = (name) => {
@@ -135,32 +135,44 @@ const RecordCard = ({ model, view, display, row, swipe = true }) => {
 			}), shownValue(name)] }, name))
 		})
 	] });
-	const card = (picture) => /* @__PURE__ */ jsx(AppLink, {
+	const card = (picture) => /* @__PURE__ */ jsxs(AppLink, {
 		to: {
 			kind: "record",
 			resource: model.name,
 			key: row.key
 		},
 		className: "flex h-full flex-col gap-1.5 rounded-lg border border-border bg-background p-3 text-[13px] hover:border-border-strong hover:bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
-		children: Card ? /* @__PURE__ */ jsx(CustomBoundary, {
+		children: [mark && !pictured && /* @__PURE__ */ jsx(Badge, {
+			tone: "blue",
+			className: "self-start",
+			children: mark
+		}), Card ? /* @__PURE__ */ jsx(CustomBoundary, {
 			name: display.card,
 			fallback: builtIn(picture),
 			children: /* @__PURE__ */ jsx(Card, { row })
-		}) : builtIn(picture)
+		}) : builtIn(picture)]
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: photos ? "group/card relative h-full" : favorite ? "relative h-full" : "h-full",
-		children: [photos ? /* @__PURE__ */ jsx(CardCarousel, {
-			photos: row.photos ?? [],
-			cover,
-			swipe,
-			children: card
-		}, row.key) : card(/* @__PURE__ */ jsx(CardImage, { value: cover })), favorite && /* @__PURE__ */ jsx(FavoriteButton, {
-			favorite,
-			recordKey: row.key,
-			target: recordKey(model, row.record),
-			className: pictured ? void 0 : "right-1.5 top-1.5"
-		})]
+		className: photos ? "group/card relative h-full" : favorite || mark ? "relative h-full" : "h-full",
+		children: [
+			photos ? /* @__PURE__ */ jsx(CardCarousel, {
+				photos: row.photos ?? [],
+				cover,
+				swipe,
+				children: card
+			}, row.key) : card(/* @__PURE__ */ jsx(CardImage, { value: cover })),
+			mark && pictured && /* @__PURE__ */ jsx(Badge, {
+				tone: "blue",
+				className: "pointer-events-none absolute top-2 left-2 shadow-sm",
+				children: mark
+			}),
+			favorite && /* @__PURE__ */ jsx(FavoriteButton, {
+				favorite,
+				recordKey: row.key,
+				target: recordKey(model, row.record),
+				className: pictured ? void 0 : "right-1.5 top-1.5"
+			})
+		]
 	});
 };
 //#endregion

package/dist/app/embedded-list/embedded-display.js

@@ -17,10 +17,14 @@ const embeddedDisplay = (view, xs, { picked, preferred }) => {
 	if (picked !== void 0 && names.includes(picked)) return picked;
 	return defaultDisplay(view, xs, preferred !== void 0 && names.includes(preferred) ? preferred : void 0);
 };
-/** The resource's list with the embedded list's filter, order and display, leaving out what the list does by default. */
-const viewAllAddress = (model, view, xs, list) => changedList({
+/**
+* The resource's list with the embedded list's filter, order and display, leaving out what the list does by default, and
+* the saved search whose results it shows, if any. `resource` names another list of the same records, such as the
+* favorites that list a user's saved listings.
+*/
+const viewAllAddress = (model, view, xs, { resource = model.name, ...list }) => changedList({
 	kind: "list",
-	resource: model.name
+	resource
 }, list, listDefaults(model, view, xs));
 //#endregion
 export { embeddedDisplay, embeddedDisplayKey, readPickedDisplay, viewAllAddress, writePickedDisplay };

package/dist/app/embedded-list/embedded-list.js

@@ -36,7 +36,7 @@ const Loading = () => /* @__PURE__ */ jsx("div", {
 * The first `limit` records of a list, drawn by the list page's own table (sized to its rows) or display, and a link
 * to the whole list with the same filter, order and display. On a phone a cards display is one row that scrolls sideways.
 */
-const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empty, row = false, viewAll }) => {
+const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empty, row = false, viewAll, link = true }) => {
 	const { resources, views } = useAdminMeta();
 	const { fields: fieldTypes } = useProjectUi();
 	const { go } = useAppAddress();
@@ -74,11 +74,12 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 	}, [loaded]);
 	const shown = shownDisplay(view, display);
 	const plural = view?.names?.plural ?? humanize(model.name);
-	const allLink = /* @__PURE__ */ jsxs(AppLink, {
+	const allLink = link && /* @__PURE__ */ jsxs(AppLink, {
 		to: viewAllAddress(model, view, xs, viewAll ? {
 			filter: viewAll.filter,
 			orderBy: defaultOrderBy(model, view),
-			display
+			display,
+			savedSearch: viewAll.savedSearch
 		} : {
 			filter,
 			orderBy,
@@ -104,7 +105,7 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 			className: "text-[13px] text-muted-foreground",
 			children: empty ?? "Nothing here yet."
 		});
-		return viewAll ? /* @__PURE__ */ jsxs("div", {
+		return viewAll && link ? /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-3",
 			children: [nothing, allLink]
 		}) : nothing;

package/dist/app/list-page.js

@@ -39,7 +39,7 @@ import { ListChart } from "./list-chart.js";
 import { ListSearch } from "./list-search.js";
 import { withFieldTypeCells } from "./field-types/field-type-cells.js";
 import { SavedList } from "./saved/saved-list.js";
-import { facetNames, filterChips, searchName } from "./searches/saved-search.js";
+import { facetNames, filterChips } from "./searches/saved-search.js";
 import { SaveSearchButton } from "./searches/save-search-button.js";
 import { SavedSearches } from "./searches/saved-searches.js";
 import { useMemo, useState } from "react";
@@ -264,9 +264,11 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		]
 	});
 	const saveSearch = view?.saveSearch && !scope && parsed.ok && filterText && /* @__PURE__ */ jsx(SaveSearchButton, {
+		model,
+		view,
 		search: view.saveSearch,
 		filter: filterText,
-		name: searchName(filterChips(model, view, filterText, facetNames(config)))
+		chips: filterChips(model, view, filterText, facetNames(config))
 	});
 	const displaySwitch = (menu) => /* @__PURE__ */ jsx(DisplaySwitch, {
 		view,

package/dist/app/pages/blocks/record-row.js

@@ -0,0 +1,51 @@
+import { useAdminMeta } from "../../meta-gate.js";
+import { RecordRowBody } from "../../record-row/record-row-body.js";
+import { propsOf } from "./block-props.js";
+import { CardFrame } from "./card-frame.js";
+import { SavedRecordRow } from "../../record-row/saved-record-row.js";
+import { SavedSearchRows } from "../../searches/saved-search-rows.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/pages/blocks/record-row.tsx
+/**
+* What a filter finds: its chips, the count, its records as a sideways row of their list's cards, and "View all". Of a
+* resource whose view has `listOf`, the records the user's saved ones point at; of one with `searchesOf`, a row per
+* saved search of the user's.
+*/
+const RecordRowBlock = ({ node, slots }) => {
+	const { resource, filter = "", sort, limit, display, title, description, empty } = propsOf(node);
+	const { resources, views } = useAdminMeta();
+	const model = resources[resource];
+	if (!model) return null;
+	const view = views[model.name];
+	const body = () => {
+		if (view?.searchesOf) return /* @__PURE__ */ jsx(SavedSearchRows, {
+			model,
+			view,
+			empty
+		});
+		if (view?.listOf !== void 0) return /* @__PURE__ */ jsx(SavedRecordRow, {
+			model,
+			view,
+			limit,
+			display,
+			empty
+		});
+		return /* @__PURE__ */ jsx(RecordRowBody, {
+			model,
+			view,
+			filter,
+			sort,
+			limit,
+			display,
+			empty
+		});
+	};
+	return /* @__PURE__ */ jsx(CardFrame, {
+		title,
+		description,
+		actions: slots.actions,
+		children: body()
+	});
+};
+//#endregion
+export { RecordRowBlock };

package/dist/app/pages/render-node.js

@@ -11,6 +11,7 @@ import { ModalFormBlock } from "./blocks/modal-form.js";
 import { PageBlock } from "./blocks/page-block.js";
 import { ProgressBlock } from "./blocks/progress.js";
 import { RecordCardBlock } from "./blocks/record-card.js";
+import { RecordRowBlock } from "./blocks/record-row.js";
 import { ShowBlock } from "./blocks/show.js";
 import { StatBlock } from "./blocks/stat.js";
 import { TableBlock } from "./blocks/table.js";
@@ -28,6 +29,7 @@ const blocks = {
 	Field: FieldBlock,
 	Table: TableBlock,
 	CardRow: CardRowBlock,
+	RecordRow: RecordRowBlock,
 	Progress: ProgressBlock,
 	ModalForm: ModalFormBlock,
 	Action: ActionBlock,

package/dist/app/record-row/record-row-body.js

@@ -0,0 +1,114 @@
+import { useIsXs } from "../../lib/use-media-query.js";
+import { Skeleton } from "../../primitives/skeleton.js";
+import { humanize } from "../../live/naming.js";
+import { displaysOf, loadedFields } from "../displays/list-displays.js";
+import { defaultOrderBy } from "../list-order.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { AppLink } from "../use-app-address.js";
+import { ErrorBanner } from "../error-banner.js";
+import { useLiveRows } from "../../live/use-live-rows.js";
+import { FilterChipList } from "../searches/filter-chip-list.js";
+import { viewAllAddress } from "../embedded-list/embedded-display.js";
+import { useFilterChips } from "../searches/use-filter-chips.js";
+import { RecordRow } from "./record-row.js";
+import { useMemo } from "react";
+import { ArrowRight } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createWhere, parseFilter, printFilter } from "@protobase/schema";
+//#region src/app/record-row/record-row-body.tsx
+const where = createWhere();
+const scoped = (filter, scope) => {
+	if (!scope) return filter;
+	const parsed = parseFilter(filter);
+	if (!parsed.ok) throw new Error(`The filter cannot be read: ${parsed.errors.map((error) => error.message).join("; ")}`);
+	return printFilter(parsed.ast ? where.and(parsed.ast, scope) : scope);
+};
+/** The display a row draws its cards with: the one named, else the view's first cards display, else a card of the title. */
+const rowDisplay = (view, name) => {
+	const cards = displaysOf(view).filter((display) => display.kind === "cards");
+	return cards.find((display) => display.name === name) ?? cards[0] ?? {
+		kind: "cards",
+		name: "cards"
+	};
+};
+const Loading = () => /* @__PURE__ */ jsx("div", {
+	className: "flex gap-3 overflow-hidden",
+	children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-24 w-64 shrink-0" }, index))
+});
+/**
+* What a filter finds, in a card's body: its filters as chips, how many records match, the records in a row of their
+* list's cards that scrolls sideways (`RecordRow`), and "View all", which opens the list with the filter.
+*/
+const RecordRowBody = ({ model, view, filter, sort = "", display: named, limit, chips: showChips = true, empty, note, isNew, viewAll, scope, list }) => {
+	const { resources, views } = useAdminMeta();
+	const xs = useIsXs();
+	const display = rowDisplay(view, named);
+	const orderBy = sort || defaultOrderBy(model, view);
+	const columns = useMemo(() => loadedFields(model, view, []), [model, view]);
+	const loadFilter = useMemo(() => scoped(filter, scope), [filter, scope]);
+	const rows = useLiveRows({
+		resources,
+		views,
+		model,
+		columns,
+		filter: loadFilter,
+		orderBy
+	});
+	const chips = useFilterChips(model, filter);
+	const singular = (view?.names?.singular ?? humanize(model.name)).toLowerCase();
+	const plural = view?.names?.plural ?? humanize(model.name);
+	const total = rows.source?.total;
+	const source = useMemo(() => rows.source && {
+		...rows.source,
+		total: Math.min(rows.source.total, limit ?? Infinity)
+	}, [rows.source, limit]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-col gap-3",
+		children: [
+			showChips && chips.length > 0 || total !== void 0 || note ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center justify-between gap-2",
+				children: [showChips && chips.length > 0 ? /* @__PURE__ */ jsx(FilterChipList, { chips }) : /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsxs("p", {
+					className: "flex flex-wrap gap-x-3 text-[13px] text-muted-foreground",
+					children: [note && /* @__PURE__ */ jsx("span", { children: note }), total !== void 0 && /* @__PURE__ */ jsx("span", {
+						className: "tabular-nums",
+						children: `${total.toLocaleString("en-GB")} ${total === 1 ? singular : plural.toLowerCase()}`
+					})]
+				})]
+			}) : null,
+			rows.isLoading ? /* @__PURE__ */ jsx(Loading, {}) : rows.error ? /* @__PURE__ */ jsx(ErrorBanner, {
+				title: "Could not load",
+				error: rows.error
+			}) : !source || source.total === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "text-[13px] text-muted-foreground",
+				children: empty ?? `No ${plural.toLowerCase()} match.`
+			}) : /* @__PURE__ */ jsx(RecordRow, {
+				model,
+				view,
+				display,
+				source,
+				label: plural,
+				isNew
+			}),
+			/* @__PURE__ */ jsxs(AppLink, {
+				to: viewAllAddress(model, view, xs, {
+					filter,
+					orderBy,
+					display: display.name,
+					savedSearch: viewAll?.savedSearch,
+					resource: list
+				}),
+				onClick: viewAll?.onOpen,
+				className: "flex items-center gap-1 self-end text-[13px] font-medium text-primary-text hover:underline",
+				children: [viewAll?.label ?? /* @__PURE__ */ jsxs(Fragment$1, { children: ["View all ", /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: plural.toLowerCase()
+				})] }), /* @__PURE__ */ jsx(ArrowRight, {
+					className: "size-3.5",
+					"aria-hidden": true
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { RecordRowBody };

package/dist/app/record-row/record-row.js

@@ -0,0 +1,93 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { displayRow } from "../displays/list-displays.js";
+import { usePagedRows } from "../../data-grid/use-paged-rows.js";
+import { RecordCard } from "../displays/record-card.js";
+import { rowOffset } from "./row-window.js";
+import { useRowScroll } from "./use-row-scroll.js";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/record-row/record-row.tsx
+const arrowClass = "absolute top-1/2 z-10 hidden size-8 -translate-y-1/2 items-center justify-center rounded-full border border-border-strong bg-background shadow-pop hover:bg-muted sm:flex";
+/** Stands in for the cards before or after the ones drawn, as wide as they would be. */
+const Spacer = ({ cards }) => cards > 0 ? /* @__PURE__ */ jsx("li", {
+	"aria-hidden": true,
+	className: "shrink-0",
+	style: { width: rowOffset(cards) - 12 }
+}) : null;
+/**
+* Records as the cards of their list, in one row that scrolls sideways by touch, trackpad or its arrow buttons: only the
+* cards near the view are drawn, and the records are loaded through the list API in pages as the row scrolls to them.
+* Each card links to its record.
+*/
+const RecordRow = ({ model, view, display, source, label, isNew }) => {
+	const { total } = source;
+	const scroll = useRowScroll(total);
+	const getRow = usePagedRows({
+		total,
+		rowAt: source.rowAt,
+		loadRows: source.loadRows,
+		latencyMs: 0
+	}, scroll.start, Math.max(scroll.start, scroll.end - 1));
+	const indexes = Array.from({ length: scroll.end - scroll.start }, (_, offset) => scroll.start + offset);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative min-w-0",
+		children: [
+			/* @__PURE__ */ jsxs("ul", {
+				ref: scroll.ref,
+				"aria-label": label,
+				className: "flex snap-x gap-3 overflow-x-auto overflow-y-hidden pb-1",
+				style: { scrollbarWidth: "thin" },
+				children: [
+					/* @__PURE__ */ jsx(Spacer, { cards: scroll.start }),
+					indexes.map((index) => {
+						const loaded = getRow(index);
+						if (!loaded) return /* @__PURE__ */ jsx("li", {
+							"aria-hidden": true,
+							className: "shrink-0",
+							style: { width: 256 },
+							children: /* @__PURE__ */ jsx(Skeleton, { className: "h-full min-h-24 rounded-lg" })
+						}, `skeleton-${index}`);
+						const row = displayRow(model, loaded);
+						return /* @__PURE__ */ jsx("li", {
+							"aria-posinset": index + 1,
+							"aria-setsize": total,
+							className: "grid shrink-0 snap-start grid-cols-[minmax(0,1fr)]",
+							style: { width: 256 },
+							children: /* @__PURE__ */ jsx(RecordCard, {
+								model,
+								view,
+								display,
+								row,
+								swipe: false,
+								mark: isNew?.(row) ? "New" : void 0
+							})
+						}, row.key);
+					}),
+					/* @__PURE__ */ jsx(Spacer, { cards: total - scroll.end })
+				]
+			}),
+			scroll.back && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": `Previous ${label.toLowerCase()}`,
+				onClick: () => scroll.page(-1),
+				className: `${arrowClass} -left-3`,
+				children: /* @__PURE__ */ jsx(ChevronLeft, {
+					className: "size-4",
+					"aria-hidden": true
+				})
+			}),
+			scroll.on && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": `Next ${label.toLowerCase()}`,
+				onClick: () => scroll.page(1),
+				className: `${arrowClass} -right-3`,
+				children: /* @__PURE__ */ jsx(ChevronRight, {
+					className: "size-4",
+					"aria-hidden": true
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { RecordRow };

package/dist/app/record-row/row-window.js

@@ -0,0 +1,20 @@
+//#region src/app/record-row/row-window.ts
+const step = 268;
+/** How many cards beyond each edge of the view are drawn, so a short scroll shows cards already there. */
+const overscan = 3;
+/**
+* The cards of a row of `total` to draw when it is scrolled `scrollLeft` into a view `width` wide: from `start` up to
+* `end` (not included), the ones in view and `overscan` more on each side, none past either end.
+*/
+const rowWindow = (scrollLeft, width, total) => {
+	const first = Math.floor(Math.max(0, scrollLeft) / step);
+	const last = Math.ceil((Math.max(0, scrollLeft) + width) / step);
+	return {
+		start: Math.max(0, first - overscan),
+		end: Math.min(total, last + overscan)
+	};
+};
+/** The width of the cards before `index`, with their gaps: what stands in for the cards not drawn. */
+const rowOffset = (index) => index * step;
+//#endregion
+export { rowOffset, rowWindow };

package/dist/app/record-row/saved-record-row.js

@@ -0,0 +1,42 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { humanize } from "../../live/naming.js";
+import { listedResource } from "../current-address.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { ErrorBanner } from "../error-banner.js";
+import { savedScope } from "../saved/saved-records.js";
+import { useSavedRecords } from "../saved/use-saved-records.js";
+import { RecordRowBody } from "./record-row-body.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/record-row/saved-record-row.tsx
+/**
+* The records the user's saved ones of a view with `listOf` point at, such as the listings among their favorites, as a
+* row of their own resource's cards, with "View all" to the saved records' list. `empty` when there are none.
+*/
+const SavedRecordRow = ({ model, view, empty, ...props }) => {
+	const { resources, views } = useAdminMeta();
+	const listed = listedResource(resources, views, model.name);
+	const saved = useSavedRecords(model.name, view.listOf, true);
+	const plural = (view.names?.plural ?? humanize(model.name)).toLowerCase();
+	if (!listed.listOf) return null;
+	if (saved.error) return /* @__PURE__ */ jsx(ErrorBanner, {
+		title: `Could not load your ${plural}`,
+		error: saved.error
+	});
+	if (!saved.data) return /* @__PURE__ */ jsx(Skeleton, { className: "h-24" });
+	const scope = savedScope(listed.model, saved.data);
+	if (!scope) return /* @__PURE__ */ jsx("p", {
+		className: "text-[13px] text-muted-foreground",
+		children: empty ?? `No ${plural} yet.`
+	});
+	return /* @__PURE__ */ jsx(RecordRowBody, {
+		...props,
+		model: listed.model,
+		view: listed.view,
+		filter: "",
+		scope,
+		list: model.name,
+		empty
+	});
+};
+//#endregion
+export { SavedRecordRow };

package/dist/app/record-row/use-row-scroll.js

@@ -0,0 +1,51 @@
+import { rowOffset, rowWindow } from "./row-window.js";
+import { useLayoutEffect, useRef, useState } from "react";
+//#region src/app/record-row/use-row-scroll.ts
+/**
+* A record row's sideways scroll: `ref` goes on the scrolling list. Gives the cards to draw (`start` to `end`), whether
+* it can scroll back or on, and `page`, which scrolls a view's width of cards either way.
+*/
+const useRowScroll = (total) => {
+	const ref = useRef(null);
+	const [view, setView] = useState({
+		left: 0,
+		width: 0
+	});
+	useLayoutEffect(() => {
+		const list = ref.current;
+		if (!list) return;
+		const read = () => setView((current) => {
+			const next = {
+				left: list.scrollLeft,
+				width: list.clientWidth
+			};
+			const same = (a, b) => {
+				const [x, y] = [rowWindow(a.left, a.width, total), rowWindow(b.left, b.width, total)];
+				return x.start === y.start && x.end === y.end && a.width === b.width && a.left > 0 === b.left > 0 && Math.abs(a.left - b.left) < 1;
+			};
+			return same(current, next) ? current : next;
+		});
+		read();
+		const observer = new ResizeObserver(read);
+		observer.observe(list);
+		list.addEventListener("scroll", read, { passive: true });
+		return () => {
+			observer.disconnect();
+			list.removeEventListener("scroll", read);
+		};
+	}, [total]);
+	const contentWidth = Math.max(0, rowOffset(total) - 12);
+	const page = (direction) => ref.current?.scrollBy({
+		left: direction * Math.max(rowOffset(1), view.width - 12),
+		behavior: "smooth"
+	});
+	return {
+		ref,
+		...rowWindow(view.left, view.width, total),
+		back: view.left > 0,
+		on: view.left + view.width < contentWidth - 1,
+		page
+	};
+};
+//#endregion
+export { useRowScroll };

package/dist/app/searches/filter-chip-list.js

@@ -0,0 +1,28 @@
+import { cn } from "../../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/searches/filter-chip-list.tsx
+const chipClass = "inline-flex h-6 items-center rounded-full border border-primary-border bg-primary-soft px-2.5 text-xs font-medium text-primary-text";
+/** What a filter filters on, concisely: its chips as a list labelled "Filters". */
+const FilterChipList = ({ chips, className }) => /* @__PURE__ */ jsx("ul", {
+	className: cn("flex flex-wrap gap-1.5", className),
+	"aria-label": "Filters",
+	children: chips.map((chip) => /* @__PURE__ */ jsx("li", {
+		className: chipClass,
+		children: chip.label
+	}, chip.key))
+});
+/** A filter's chips inside a heading or a link, where a list cannot go: read out one after the other. */
+const InlineFilterChips = ({ chips }) => /* @__PURE__ */ jsx("span", {
+	className: "flex flex-wrap gap-1.5",
+	children: chips.map((chip, index) => /* @__PURE__ */ jsxs("span", {
+		className: chipClass,
+		children: [index > 0 && /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: ", "
+		}), chip.label]
+	}, chip.key))
+});
+/** A search without a name as words, for a label or a question: its chips one after the other. */
+const chipsText = (chips) => chips.map((chip) => chip.label).join(", ");
+//#endregion
+export { FilterChipList, InlineFilterChips, chipsText };