@parallelworks/ui 0.76.0 → 0.78.0

package/dist/list/UserHoverCard.js

@@ -1,5 +1,7 @@
 import { cx } from "../cx.js";
+import { CheckIcon } from "../icons.js";
 import { useLink, useStrings } from "../components/Provider.js";
+import { useCopy } from "../components/useCopy.js";
 import { Avatar } from "../components/Avatar.js";
 import { LoadingRegion, Skeleton } from "../components/Skeleton.js";
 import { CopyButton } from "../components/CopyButton.js";
@@ -68,21 +70,32 @@ function UserHoverCard({ username, name, avatarSrc, badge, href, linkComponent,
 var EMAIL = /^[^\s@]+@[^\s@]+$/;
 var rowClasses = "flex gap-2 text-(--theme-muted-text-color)";
 /** One detail line of a hover card: a leading icon and its content. With
-* `onClick` the line is a button. */
-function HoverCardRow({ icon, children, title, align = "center", truncate = false, onClick }) {
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-		"aria-hidden": "true",
-		className: cx("flex shrink-0 items-center [&>svg]:h-3.5 [&>svg]:w-3.5", align === "start" && "mt-0.5"),
-		children: icon
-	}), /* @__PURE__ */ jsx("span", {
-		className: cx("min-w-0", truncate && "truncate"),
-		children
-	})] });
+* `onClick` the line is a button; with `copy` it is a button that copies a value,
+* such as the email address it shows, its icon turning into a check for a moment. */
+function HoverCardRow({ icon, children, title, align = "center", truncate = false, onClick, copy }) {
+	const { common: t } = useStrings();
+	const { copy: write, copied } = useCopy();
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: cx("flex shrink-0 items-center [&>svg]:h-3.5 [&>svg]:w-3.5", align === "start" && "mt-0.5"),
+			children: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-(--theme-success)" }) : icon
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: cx("min-w-0", truncate && "truncate"),
+			children
+		}),
+		copy && /* @__PURE__ */ jsxs("span", {
+			className: "sr-only",
+			children: [". ", t.copyThing(copy.label)]
+		})
+	] });
 	const alignClass = align === "start" ? "items-start" : "items-center";
-	if (onClick) return /* @__PURE__ */ jsx("button", {
+	const press = copy ? () => void write(copy.text, { label: copy.label }) : onClick;
+	if (press) return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		title,
-		onClick,
+		title: title ?? (copy ? t.copyThing(copy.label) : void 0),
+		onClick: press,
 		className: cx(rowClasses, alignClass, "-mx-1 max-w-full rounded px-1 py-0.5 text-left transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app)"),
 		children: content
 	});

package/dist/list/filterModel.d.ts

@@ -0,0 +1,122 @@
+import type { ReactNode } from 'react';
+/** What a filter's value is, which decides its picker and its conditions. */
+export type FilterKind = 'enum' | 'people' | 'date' | 'text' | 'boolean';
+/** How a filter compares its values with a row's. */
+export type FilterOperator = 
+/** enum and people: "is A" or "is any of A, B"; date: a preset or a day ("is Last 7 days"). */
+'is'
+/** enum and people: "is not A" or "is none of A, B". */
+ | 'isNot'
+/** enum on a field holding many values, such as labels: "includes all of A, B". */
+ | 'includesAll'
+/** date: on or after the day. */
+ | 'after'
+/** date: on or before the day. */
+ | 'before'
+/** date: two days, both included. */
+ | 'between' | 'contains' | 'notContains'
+/** Any kind: the row has a value at all ("has a due date"), with no values of its own. */
+ | 'isSet' | 'isNotSet';
+export interface FilterOption {
+    value: string;
+    label: string;
+    /** A status dot, a label's color, an avatar. */
+    icon?: ReactNode;
+    /** A second line in the picker, such as a cycle's dates. */
+    description?: string | undefined;
+    /** How many rows hold it, shown at the end of its row in the picker. */
+    count?: number | undefined;
+    /** A heading the option sits under in the picker, such as People or Agents. */
+    group?: string | undefined;
+}
+/** A value a row holds for a field, for the matching a field does on its own. A date is a
+ *  `Date`, an ISO string or epoch milliseconds. */
+export type FilterRowValue = string | number | boolean | Date | readonly string[] | null | undefined;
+export interface FilterField<T = never> {
+    /** The URL and storage key: stable, never renamed. */
+    key: string;
+    /** The chip's field part, such as "Status". */
+    label: string;
+    icon?: ReactNode;
+    kind: FilterKind;
+    /** The conditions offered, in order; the first is the one a new filter starts with. Defaults:
+     *  enum and people `is`, `isNot`; date `is`, `after`, `before`, `between`; text `contains`,
+     *  `notContains`; boolean `is`. Add `includesAll` or `isSet` here. */
+    operators?: readonly FilterOperator[] | undefined;
+    /** enum and people: the choices. */
+    options?: readonly FilterOption[] | undefined;
+    /** enum and people: searches on the server as the reader types. Its results show as given. */
+    loadOptions?: ((query: string, signal: AbortSignal) => Promise<readonly FilterOption[]>) | undefined;
+    /** Names a value no option holds any more, such as a deleted label in a saved link. */
+    valueLabel?: ((value: string) => string | undefined) | undefined;
+    /** enum and people: whether more than one value can be chosen (default true). */
+    multiple?: boolean | undefined;
+    /** Whether the picker has a search field. Default: more than eight options, or `loadOptions`. */
+    searchable?: boolean | undefined;
+    /** Always shows its chip, with no remove button, reading "Any" while unset; Clear leaves it. */
+    required?: boolean | undefined;
+    /** Always shows its chip, reading "Any" while unset; its remove button only empties it. */
+    pinned?: boolean | undefined;
+    /** One value across every page sharing the list's `sharedFiltersKey`, such as a namespace. */
+    shared?: boolean | undefined;
+    /** The row's value, so the list can match the filter itself for every condition. */
+    value?: ((row: T) => FilterRowValue) | undefined;
+    /** Whether a row passes, for matching `value` can't express. Omit both for a list filtered
+     *  on the server. */
+    matches?: ((row: T, filter: ActiveFilter) => boolean) | undefined;
+}
+/** One filter in effect: plain data, so it can go in a URL, storage or a saved view. */
+export interface ActiveFilter {
+    field: string;
+    op: FilterOperator;
+    /** Dates are `yyyy-MM-dd` days or relative presets (`today`, `-7d`, `month`), which stay
+     *  relative wherever they are saved. A boolean is `true` or `false`. */
+    values: readonly string[];
+}
+/** The relative date presets the date picker offers, as a filter stores them. */
+export declare const DATE_PRESETS: readonly ['today', '-7d', '-30d', '-90d', 'month'];
+export type DatePreset = (typeof DATE_PRESETS)[number];
+type AnyField = FilterField<any>;
+export declare function fieldOperators(field: AnyField): readonly FilterOperator[];
+export declare function isMultiple(field: AnyField): boolean;
+/** Whether a filter narrows anything yet: a value chosen, or a condition that needs none. */
+export declare function isComplete(filter: ActiveFilter): boolean;
+/** Whether two sets of filters say the same, ignoring order, as Save or Update buttons ask. */
+export declare function sameFilters(a: readonly ActiveFilter[], b: readonly ActiveFilter[]): boolean;
+/** What storage holds per field: a plain list for `is`, the shape every earlier version wrote
+ *  and still reads, or the condition beside its values. Key order keeps the order added. */
+export type StoredFilters = Record<string, readonly string[] | {
+    op: FilterOperator;
+    values: readonly string[];
+}>;
+export declare function fromStored(stored: unknown): ActiveFilter[];
+export declare function toStored(filters: readonly ActiveFilter[]): StoredFilters;
+/** The URL params a set of filters reads as: `status=started,done&label!=bug&due>=2026-10-01`.
+ *  Values are not URL-encoded here; the router or `URLSearchParams` does that. */
+export declare function encodeFilters(filters: readonly ActiveFilter[]): Record<string, string>;
+type SearchInput = URLSearchParams | Record<string, unknown>;
+/** The filters a URL's params name, for the given fields; `null` when it names none, so the
+ *  remembered filters apply. A plain `key=value` is `is`, so links made before conditions
+ *  existed keep working. Params of no field are left for the host. */
+export declare function decodeFilters(search: SearchInput, fields: readonly AnyField[]): ActiveFilter[] | null;
+/** Every param a field could use, so a host can drop stale ones before writing new. */
+export declare function filterParamKeys(fields: readonly AnyField[]): string[];
+/** A URL's params with the fields' params replaced by these filters, other params kept. */
+export declare function withFilterParams<S extends Record<string, unknown>>(search: S, filters: readonly ActiveFilter[], fields: readonly AnyField[]): Record<string, unknown>;
+/** A local day as `yyyy-MM-dd`. */
+export declare const toDay: (date: Date) => string;
+/** The local day a `yyyy-MM-dd` value names. */
+export declare function parseDay(value: string | undefined): Date | undefined;
+export declare function isDatePreset(value: string | undefined): value is DatePreset;
+/** The span a date filter covers right now: `from` included, `to` excluded (the start of the
+ *  day after the last), either open. Relative presets resolve against `now`. */
+export declare function dateFilterRange(filter: ActiveFilter, now?: Date): {
+    from?: Date;
+    to?: Date;
+} | undefined;
+/** Whether a row passes one filter, through the field's `matches` or its `value`. A field
+ *  with neither passes every row: the host filters it on the server. */
+export declare function matchFilter<T>(field: FilterField<T>, filter: ActiveFilter, row: T, now?: Date): boolean;
+/** Rows passing every complete filter. */
+export declare function applyFilterList<T>(rows: readonly T[], filters: readonly ActiveFilter[], fields: readonly FilterField<T>[], now?: Date): T[];
+export {};

package/dist/list/filterModel.js

@@ -0,0 +1,308 @@
+//#region src/list/filterModel.ts
+/** The relative date presets the date picker offers, as a filter stores them. */
+var DATE_PRESETS = [
+	"today",
+	"-7d",
+	"-30d",
+	"-90d",
+	"month"
+];
+var DEFAULT_OPERATORS = {
+	enum: ["is", "isNot"],
+	people: ["is", "isNot"],
+	date: [
+		"is",
+		"after",
+		"before",
+		"between"
+	],
+	text: ["contains", "notContains"],
+	boolean: ["is"]
+};
+function fieldOperators(field) {
+	return field.operators?.length ? field.operators : DEFAULT_OPERATORS[field.kind];
+}
+function isMultiple(field) {
+	return (field.kind === "enum" || field.kind === "people") && field.multiple !== false;
+}
+/** Whether a filter narrows anything yet: a value chosen, or a condition that needs none. */
+function isComplete(filter) {
+	if (filter.op === "isSet" || filter.op === "isNotSet") return true;
+	if (filter.op === "between") return filter.values.length === 2 && filter.values.every(Boolean);
+	return filter.values.some(Boolean);
+}
+/** Whether two sets of filters say the same, ignoring order, as Save or Update buttons ask. */
+function sameFilters(a, b) {
+	const norm = (list) => list.filter(isComplete).map((f) => `${f.field}\u0000${f.op}\u0000${[...f.values].sort().join("
")}`).sort().join("");
+	return norm(a) === norm(b);
+}
+function fromStored(stored) {
+	if (typeof stored !== "object" || stored === null || Array.isArray(stored)) return [];
+	const out = [];
+	for (const [field, entry] of Object.entries(stored)) if (Array.isArray(entry)) {
+		const values = entry.filter((v) => typeof v === "string");
+		if (values.length) out.push({
+			field,
+			op: "is",
+			values
+		});
+	} else if (typeof entry === "object" && entry !== null && typeof entry.op === "string") {
+		const values = Array.isArray(entry.values) ? entry.values.filter((v) => typeof v === "string") : [];
+		out.push({
+			field,
+			op: entry.op,
+			values
+		});
+	}
+	return out;
+}
+function toStored(filters) {
+	const out = {};
+	for (const f of filters) out[f.field] = f.op === "is" ? [...f.values] : {
+		op: f.op,
+		values: [...f.values]
+	};
+	return out;
+}
+var SUFFIX = {
+	is: "",
+	isNot: "!",
+	includesAll: "*",
+	after: ">",
+	before: "<",
+	between: "",
+	contains: "~",
+	notContains: "!~",
+	isSet: "",
+	isNotSet: "!"
+};
+var SET = "_set";
+var escapeValue = (v) => v.replaceAll("%", "%25").replaceAll(",", "%2C");
+var unescapeValue = (v) => v.replaceAll("%2C", ",").replaceAll("%25", "%");
+var joinValues = (values) => values.map(escapeValue).join(",");
+var splitValues = (raw) => raw === "" ? [] : raw.split(",").map(unescapeValue).filter(Boolean);
+/** The URL params a set of filters reads as: `status=started,done&label!=bug&due>=2026-10-01`.
+*  Values are not URL-encoded here; the router or `URLSearchParams` does that. */
+function encodeFilters(filters) {
+	const out = {};
+	for (const f of filters) {
+		if (!isComplete(f)) continue;
+		if (f.op === "isSet" || f.op === "isNotSet") out[`${f.field}${SUFFIX[f.op]}`] = SET;
+		else if (f.op === "between") {
+			out[`${f.field}>`] = escapeValue(f.values[0] ?? "");
+			out[`${f.field}<`] = escapeValue(f.values[1] ?? "");
+		} else out[`${f.field}${SUFFIX[f.op]}`] = joinValues(f.values);
+	}
+	return out;
+}
+function entriesOf(search) {
+	if (search instanceof URLSearchParams) return [...search.entries()];
+	const out = [];
+	for (const [key, value] of Object.entries(search)) if (typeof value === "string") out.push([key, value]);
+	else if (typeof value === "number" || typeof value === "boolean") out.push([key, String(value)]);
+	else if (Array.isArray(value)) out.push([key, value.map((v) => escapeValue(String(v))).join(",")]);
+	return out;
+}
+/** The filters a URL's params name, for the given fields; `null` when it names none, so the
+*  remembered filters apply. A plain `key=value` is `is`, so links made before conditions
+*  existed keep working. Params of no field are left for the host. */
+function decodeFilters(search, fields) {
+	const byKey = new Map(fields.map((f) => [f.key, f]));
+	const out = [];
+	const dates = /* @__PURE__ */ new Map();
+	let found = false;
+	for (const [rawKey, raw] of entriesOf(search)) {
+		const suffix = [
+			"!~",
+			"!",
+			"*",
+			">",
+			"<",
+			"~"
+		].find((s) => rawKey.endsWith(s) && byKey.has(rawKey.slice(0, -s.length)));
+		const key = suffix ? rawKey.slice(0, -suffix.length) : rawKey;
+		const field = byKey.get(key);
+		if (!field) continue;
+		found = true;
+		if (raw === SET && (suffix === void 0 || suffix === "!")) {
+			out.push({
+				field: key,
+				op: suffix ? "isNotSet" : "isSet",
+				values: []
+			});
+			continue;
+		}
+		if (suffix === ">" || suffix === "<") {
+			const entry = dates.get(key) ?? {};
+			entry[suffix === ">" ? "after" : "before"] = unescapeValue(raw);
+			if (!dates.has(key)) {
+				dates.set(key, entry);
+				out.push({
+					field: key,
+					op: "after",
+					values: []
+				});
+			}
+			continue;
+		}
+		const op = suffix === "!" ? "isNot" : suffix === "*" ? "includesAll" : suffix === "~" ? "contains" : suffix === "!~" ? "notContains" : field.kind === "text" ? "contains" : "is";
+		out.push({
+			field: key,
+			op,
+			values: splitValues(raw)
+		});
+	}
+	const resolved = out.map((f) => {
+		const range = dates.get(f.field);
+		if (!range || f.op !== "after" || f.values.length) return f;
+		if (range.after && range.before) return {
+			field: f.field,
+			op: "between",
+			values: [range.after, range.before]
+		};
+		return range.after ? {
+			field: f.field,
+			op: "after",
+			values: [range.after]
+		} : {
+			field: f.field,
+			op: "before",
+			values: [range.before ?? ""]
+		};
+	});
+	return found ? resolved : null;
+}
+/** Every param a field could use, so a host can drop stale ones before writing new. */
+function filterParamKeys(fields) {
+	return fields.flatMap((f) => [
+		"",
+		"!",
+		"*",
+		">",
+		"<",
+		"~",
+		"!~"
+	].map((s) => `${f.key}${s}`));
+}
+/** A URL's params with the fields' params replaced by these filters, other params kept. */
+function withFilterParams(search, filters, fields) {
+	const next = { ...search };
+	for (const key of filterParamKeys(fields)) delete next[key];
+	return {
+		...next,
+		...encodeFilters(filters)
+	};
+}
+var pad = (n) => String(n).padStart(2, "0");
+/** A local day as `yyyy-MM-dd`. */
+var toDay = (date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+/** The local day a `yyyy-MM-dd` value names. */
+function parseDay(value) {
+	const match = value?.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+	if (!match) return;
+	const [, y, m, d] = match.map(Number);
+	const date = new Date(y, m - 1, d);
+	return Number.isNaN(date.getTime()) ? void 0 : date;
+}
+var startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+var addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+function isDatePreset(value) {
+	return DATE_PRESETS.includes(value ?? "") || /^-\d+d$/.test(value ?? "");
+}
+/** The days a preset or a day covers, as `[first, last]` local days, both included. */
+function presetDays(value, now) {
+	const today = startOfDay(now);
+	if (value === "today") return [today, today];
+	if (value === "month") return [new Date(today.getFullYear(), today.getMonth(), 1), today];
+	const days = value.match(/^-(\d+)d$/);
+	if (days) return [addDays(today, 1 - Number(days[1])), today];
+	const day = parseDay(value);
+	return day ? [day, day] : void 0;
+}
+/** The span a date filter covers right now: `from` included, `to` excluded (the start of the
+*  day after the last), either open. Relative presets resolve against `now`. */
+function dateFilterRange(filter, now = /* @__PURE__ */ new Date()) {
+	const [first, second] = filter.values;
+	const days = (v) => v ? presetDays(v, now) : void 0;
+	switch (filter.op) {
+		case "is": {
+			const span = days(first);
+			return span && {
+				from: span[0],
+				to: addDays(span[1], 1)
+			};
+		}
+		case "after": {
+			const span = days(first);
+			return span && { from: span[0] };
+		}
+		case "before": {
+			const span = days(first);
+			return span && { to: addDays(span[1], 1) };
+		}
+		case "between": {
+			const a = days(first);
+			const b = days(second);
+			return a && b ? {
+				from: a[0],
+				to: addDays(b[1], 1)
+			} : void 0;
+		}
+		default: return;
+	}
+}
+var isEmpty = (v) => v === null || v === void 0 || v === "" || Array.isArray(v) && v.length === 0;
+var asList = (v) => isEmpty(v) ? [] : Array.isArray(v) ? [...v] : [String(v)];
+function asTime(v) {
+	if (v instanceof Date) return v.getTime();
+	if (typeof v === "number") return v;
+	if (typeof v === "string" && v) {
+		const day = parseDay(v);
+		const t = day ? day.getTime() : Date.parse(v);
+		return Number.isNaN(t) ? void 0 : t;
+	}
+}
+/** Whether a row passes one filter, through the field's `matches` or its `value`. A field
+*  with neither passes every row: the host filters it on the server. */
+function matchFilter(field, filter, row, now) {
+	if (field.matches) return field.matches(row, filter);
+	if (!field.value) return true;
+	const v = field.value(row);
+	switch (filter.op) {
+		case "isSet": return !isEmpty(v);
+		case "isNotSet": return isEmpty(v);
+		case "contains":
+		case "notContains": {
+			const needle = (filter.values[0] ?? "").toLocaleLowerCase();
+			const has = asList(v).some((s) => s.toLocaleLowerCase().includes(needle));
+			return filter.op === "contains" ? has : !has;
+		}
+		case "includesAll": {
+			const held = asList(v);
+			return filter.values.every((x) => held.includes(x));
+		}
+		case "isNot": return !asList(v).some((x) => filter.values.includes(x));
+	}
+	if (field.kind === "date") {
+		const range = dateFilterRange(filter, now);
+		const t = asTime(v);
+		if (!range || t === void 0) return range === void 0;
+		return (range.from === void 0 || t >= range.from.getTime()) && (range.to === void 0 || t < range.to.getTime());
+	}
+	if (field.kind === "boolean") return String(Boolean(v)) === (filter.values[0] ?? "true");
+	return asList(v).some((x) => filter.values.includes(x));
+}
+/** Rows passing every complete filter. */
+function applyFilterList(rows, filters, fields, now = /* @__PURE__ */ new Date()) {
+	const checks = filters.flatMap((filter) => {
+		const field = fields.find((f) => f.key === filter.field);
+		return field && isComplete(filter) ? [{
+			field,
+			filter
+		}] : [];
+	});
+	if (checks.length === 0) return [...rows];
+	return rows.filter((row) => checks.every(({ field, filter }) => matchFilter(field, filter, row, now)));
+}
+//#endregion
+export { DATE_PRESETS, applyFilterList, dateFilterRange, decodeFilters, encodeFilters, fieldOperators, filterParamKeys, fromStored, isComplete, isDatePreset, isMultiple, matchFilter, parseDay, sameFilters, toDay, toStored, withFilterParams };

package/dist/list/index.d.ts

@@ -1,8 +1,12 @@
 export { ActionToolbar, type ToolbarAction, ToolbarButton, type ToolbarItem, } from './ActionToolbar.js';
-export { ListColumns, ListPage, type ListPageProps, ListRow, ListRowActionsProvider, useListNavigate, } from './ListPage.js';
-export { actionsColumnWidth, GroupRow, ListActionsHeader, ListError, ListSelectAllHeader, ListSkeleton, listTableFixedProps, listTableProps, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, } from './ListTable.js';
+export { type ActiveFilter, applyFilterList, DATE_PRESETS, type DatePreset, dateFilterRange, decodeFilters, encodeFilters, type FilterField, type FilterKind, type FilterOperator, type FilterOption, type FilterRowValue, filterParamKeys, matchFilter, sameFilters, withFilterParams, } from './filterModel.js';
+export { AddFilterMenu, type AddFilterMenuProps, FilterChip, ListFilterBar, type ListFilterBarProps, } from './ListFilterBar.js';
+export { ListColumns, ListPage, type ListPageEmpty, type ListPageProps, ListRow, ListRowActionsProvider, useListNavigate, } from './ListPage.js';
+export { actionsColumnWidth, GroupRow, ListActionsHeader, ListCellText, ListError, ListSelectAllHeader, ListSkeleton, listTableFixedProps, listTableProps, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, } 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 { 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,9 +1,13 @@
 import { ActionToolbar, ToolbarButton } from "./ActionToolbar.js";
-import { GroupRow, ListActionsHeader, ListError, ListSelectAllHeader, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, actionsColumnWidth, listTableFixedProps, listTableProps } from "./ListTable.js";
+import { DATE_PRESETS, applyFilterList, dateFilterRange, decodeFilters, encodeFilters, filterParamKeys, matchFilter, sameFilters, withFilterParams } from "./filterModel.js";
+import { AddFilterMenu, FilterChip, ListFilterBar } from "./ListFilterBar.js";
+import { GroupRow, ListActionsHeader, ListCellText, ListError, ListSelectAllHeader, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, actionsColumnWidth, listTableFixedProps, listTableProps } from "./ListTable.js";
 import { MoreButton, assembleRowMenu, rowContextMenuProps, useCopySubmenu, useRowMenuActive } from "./rowMenu.js";
 import { ListColumns, ListPage, ListRow, ListRowActionsProvider, useListNavigate } from "./ListPage.js";
 import { ListDisplayMenu, ListFilterMenu } from "./ListViewControls.js";
 import { ListCount, ListSearchControl, useListSearch } from "./listSearch.js";
+import { ListToolbar } from "./ListToolbar.js";
+import { useListFilters } from "./useListFilters.js";
 import { DEFAULT_ORDER, FAVORITE_ORDER, useListView } from "./listView.js";
 import { HoverCardRow, UserHoverCard } from "./UserHoverCard.js";
-export { ActionToolbar, DEFAULT_ORDER, FAVORITE_ORDER, GroupRow, HoverCardRow, ListActionsHeader, ListColumns, ListCount, ListDisplayMenu, ListError, ListFilterMenu, ListPage, ListRow, ListRowActionsProvider, ListSearchControl, ListSelectAllHeader, ListSkeleton, MoreButton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, ToolbarButton, UserHoverCard, actionsColumnWidth, assembleRowMenu, listTableFixedProps, listTableProps, rowContextMenuProps, useCopySubmenu, useListNavigate, useListSearch, useListView, useRowMenuActive };
+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, 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

@@ -16,7 +16,7 @@ export type ListSearch = ReturnType<typeof useListSearch>;
 export declare function ListSearchControl({ search, placeholder, label: labelProp, }: {
     search: ListSearch;
     placeholder: string;
-    label?: string;
+    label?: string | undefined;
 }): import("react").JSX.Element;
 export declare function ListCount({ total, matches, filterActive, noun, nounPlural, }: {
     total: number;

package/dist/list/listSearch.js

@@ -1,13 +1,14 @@
 import { buttonClasses } from "../components/buttonClasses.js";
 import { CloseIcon, RemoveIcon, SearchIcon } from "../icons.js";
+import { ariaKeyShortcuts } from "../components/Kbd.js";
 import { Tooltip } from "../components/Tooltip.js";
-import { usePersistedState, useStrings } from "../components/Provider.js";
+import { useLocale, usePersistedState, useStrings } from "../components/Provider.js";
 import { isTextEntryContext } from "../components/shortcutKey.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { formatInteger } from "../format.js";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/list/listSearch.tsx
 var NO_TERMS = [];
-var COUNT = new Intl.NumberFormat();
 /** Pass `enabled: false` to suspend the global ⌘F/`/` hijack (e.g. when search isn't shown and browser Find should stay active). */
 function useListSearch(enabled = true, storageKey) {
 	const [filter, setFilter] = useState("");
@@ -122,6 +123,7 @@ function ListSearchControl({ search, placeholder, label: labelProp }) {
 			type: "button",
 			onClick: search.openSearch,
 			"aria-label": label,
+			"aria-keyshortcuts": `/ ${ariaKeyShortcuts("Mod+F")}`,
 			className: buttonClasses({
 				variant: "outline",
 				size: "sm",
@@ -133,12 +135,14 @@ function ListSearchControl({ search, placeholder, label: labelProp }) {
 }
 function ListCount({ total, matches, filterActive, noun, nounPlural }) {
 	const { list: t } = useStrings();
+	const locale = useLocale();
+	const count = (n) => formatInteger(n, locale);
 	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.format(matches), COUNT.format(total), nounPlural) : t.count(COUNT.format(total), total === 1 ? noun : nounPlural)
+			children: filterActive ? t.matchCount(count(matches), count(total), nounPlural) : t.count(count(total), total === 1 ? noun : nounPlural)
 		})
 	});
 }

package/dist/list/listView.d.ts

@@ -1,4 +1,6 @@
 import type { ReactNode } from 'react';
+import type { ActiveFilter, FilterField } from './filterModel.js';
+import { type FilterStore, type ListFilters } from './useListFilters.js';
 /** A toggleable column. Rendering stays in the page's row component, gated by
  * {@link ListView.isVisible}; this is just the header metadata + visibility. */
 export interface ColumnDef {
@@ -23,6 +25,9 @@ export interface ColumnDef {
      * then sorts the list: it shows, and sets, the same order as Display
      * options' Ordering. */
     orderBy?: string;
+    /** `end` sets the header and the cells against the column's far edge, for
+     * figures, sizes and times that compare best lined up on their last digit. */
+    align?: 'start' | 'end';
 }
 /** Column responsive importance; `low` drops before `medium`. See {@link ColumnDef.priority}. */
 type ColumnPriority = 'low' | 'medium';
@@ -37,7 +42,9 @@ export interface OrderByOption<T> {
     compare: (a: T, b: T) => number;
 }
 type OrderDir = 'asc' | 'desc';
-/** matches decides whether a row passes given the user's selected values for this facet. */
+/** A multi-choice filter: shorthand for an `enum` {@link FilterField} offering "is" and "is not".
+ *  `matches` decides whether a row passes given the values chosen ("is not" passes the rows it
+ *  turns away). */
 export interface FilterFacet<T> {
     key: string;
     label: string;
@@ -66,6 +73,16 @@ export interface ListViewConfig<T> {
     orderBys?: OrderByOption<T>[];
     defaultOrderBy?: string;
     facets?: FilterFacet<T>[];
+    /** Filters beyond facets: people, dates, text, yes-or-no, with conditions. They follow the
+     *  facets in the Filter menu. */
+    filterFields?: FilterField<T>[] | undefined;
+    /** What the page shows before the reader changes anything; Reset returns to them. */
+    defaultFilters?: ActiveFilter[] | undefined;
+    /** Filters held outside the list too, such as the URL: its filters win while it has any, and
+     *  changes go to both. See `decodeFilters` and `encodeFilters`. */
+    filterStore?: FilterStore | undefined;
+    /** False leaves remembering the filters to `filterStore` alone. */
+    rememberFilters?: boolean | undefined;
     actions?: ActionDef[];
     /** Explicit pinned-button count when not using actions+isPinned; sizes the actions column. */
     actionCount?: number;
@@ -96,6 +113,8 @@ export interface ListViewChrome {
     /** Per visible column, whether it stacks under the first on a narrow
      * container ({@link ColumnDef.stack}); `ListRow` reads entry `i`. */
     columnStacks: boolean[];
+    /** The list's filters, which `ListPage` shows as a row of chips under its toolbar. */
+    filterState?: ListFilters | undefined;
 }
 export interface ListView<T> extends ListViewChrome {
     columns: ColumnDef[];
@@ -122,8 +141,11 @@ export interface ListView<T> extends ListViewChrome {
     sortBy: (value: string) => void;
     applyOrder: (rows: T[]) => T[];
     facets: FilterFacet<T>[];
+    filterState: ListFilters;
+    /** The values of each filter that reads "is"; `filterState.active` has every filter. */
     filters: Record<string, string[]>;
     setFacetValues: (key: string, values: string[]) => void;
+    /** Empties every filter but the required ones. */
     clearFilters: () => void;
     activeFilterCount: number;
     applyFilters: (rows: T[]) => T[];
@@ -145,5 +167,5 @@ export interface ListView<T> extends ListViewChrome {
 }
 /** Persisted grouping + column-visibility + field-filter state for a list page,
  * driving the shared Display/Filter menus. */
-export declare function useListView<T>({ storageKey, sharedFiltersKey, columns, groupBys, defaultGroupBy, orderBys, defaultOrderBy, facets, actions, actionCount, defaultShowColumnHeaders, defaultShowActions, isFavorite, isOn, createdAt, }: ListViewConfig<T>): ListView<T>;
+export declare function useListView<T>({ storageKey, sharedFiltersKey, columns, groupBys, defaultGroupBy, orderBys, defaultOrderBy, facets, filterFields, defaultFilters, filterStore, rememberFilters, actions, actionCount, defaultShowColumnHeaders, defaultShowActions, isFavorite, isOn, createdAt, }: ListViewConfig<T>): ListView<T>;
 export {};