@parallelworks/ui 0.88.1 → 0.89.0

package/dist/list/ListFilterBar.js

@@ -9,6 +9,7 @@ import { Input } from "../components/Input.js";
 import { Combobox } from "../components/Combobox.js";
 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 { Menu } from "@base-ui/react/menu";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
@@ -458,7 +459,7 @@ function BooleanValuePicker({ filters, filter, open, onOpenChange, trigger }) {
 		}) })]
 	});
 }
-function DateValuePicker({ filters, filter, open, onOpenChange, trigger }) {
+function DateValuePicker({ filters, filter, field, open, onOpenChange, trigger }) {
 	const t = useStrings().filters;
 	const [custom, setCustom] = useState(false);
 	const [first, second] = filter.values;
@@ -484,7 +485,7 @@ function DateValuePicker({ filters, filter, open, onOpenChange, trigger }) {
 		className: "p-0",
 		children: [filter.op === "is" && /* @__PURE__ */ jsxs("div", {
 			className: cx("flex flex-col p-1", showCalendar && "border-b border-(--theme-border)"),
-			children: [DATE_PRESETS.map((preset) => /* @__PURE__ */ jsxs("button", {
+			children: [(field.presets ?? DATE_PRESETS).map((preset) => /* @__PURE__ */ jsxs("button", {
 				type: "button",
 				"aria-pressed": first === preset,
 				onClick: () => choosePreset(preset),
@@ -636,15 +637,177 @@ function AddFilterMenu({ filters, trigger, align = "start" }) {
 		children: menu
 	}) : menu;
 }
+var NO_TOGGLE = "\0none";
+/** A quick filter's toggles and what they show pressed, from the field's filter. */
+function quickToggles(filters, quick, field) {
+	const filter = filters.active.find((f) => f.field === quick.field);
+	if (field.kind === "boolean") {
+		const on = filter?.op === "is" && filter.values[0] !== "false";
+		return {
+			options: [{
+				value: "true",
+				label: field.label,
+				count: quick.counts?.["true"],
+				tone: quick.tone
+			}],
+			value: on ? ["true"] : filter ? [NO_TOGGLE] : [],
+			multiple: true
+		};
+	}
+	const multiple = quick.multiple ?? isMultiple(field);
+	const values = quick.values ?? (field.options ?? []).map((o) => o.value);
+	const options = values.map((value) => {
+		const option = field.options?.find((o) => o.value === value);
+		return {
+			value,
+			label: option?.label ?? field.valueLabel?.(value) ?? value,
+			icon: option?.icon,
+			count: quick.counts?.[value] ?? option?.count,
+			tone: quick.tone
+		};
+	});
+	const shows = filter?.op === "is" && filter.values.every((v) => values.includes(v)) && (multiple || filter.values.length === 1);
+	return {
+		options,
+		value: !filter ? [] : shows ? [...filter.values] : [NO_TOGGLE],
+		multiple
+	};
+}
+/** Whether a filter is said by its quick filter's toggles alone, so it needs no chip. */
+function saidByToggles(filters, filter) {
+	const quick = filters.quick.find((q) => q.field === filter.field);
+	const field = filters.fields.find((f) => f.key === filter.field);
+	if (!quick || !field || filters.draft === filter.field) return false;
+	const { value } = quickToggles(filters, quick, field);
+	return (value.length > 0 || Boolean(quick.all)) && !value.includes(NO_TOGGLE);
+}
+/** Every quick filter's toggles on one row, a rule between fields. On a narrow row they keep to
+*  one line, the pressed ones always among them, and "+n more" opens the rest in the sheet. */
+function QuickRow({ filters, groups, narrow, onMore, end, stacked = false }) {
+	const t = useStrings().filters;
+	const row = useRef(null);
+	const [limit, setLimit] = useState(null);
+	const [width, setWidth] = useState(0);
+	const fits = narrow && Boolean(onMore);
+	const built = groups.map(({ quick, field }) => {
+		const toggles = quickToggles(filters, quick, field);
+		return {
+			quick,
+			field,
+			toggles,
+			items: [...quick.all ? [{
+				value: ALL_ITEM,
+				pressed: toggles.value.length === 0
+			}] : [], ...toggles.options.map((o) => ({
+				value: o.value,
+				pressed: toggles.value.includes(o.value)
+			}))]
+		};
+	});
+	const total = built.reduce((n, g) => n + g.items.length, 0);
+	const keys = built.map((g) => g.items.map((i) => `${i.value}${i.pressed ? "+" : ""}`).join(",")).join("|");
+	useLayoutEffect(() => {
+		const el = row.current;
+		if (!el || !fits) return;
+		let last = el.getBoundingClientRect().width;
+		setWidth(last);
+		const observer = new ResizeObserver(() => {
+			const next = el.getBoundingClientRect().width;
+			if (next !== last) {
+				last = next;
+				setWidth(next);
+			}
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [fits]);
+	useLayoutEffect(() => setLimit(null), [
+		fits,
+		keys,
+		width
+	]);
+	useLayoutEffect(() => {
+		const el = row.current;
+		if (!el || !fits) return;
+		const tops = /* @__PURE__ */ new Set();
+		for (const button of el.querySelectorAll("button")) tops.add(Math.round(button.getBoundingClientRect().top));
+		const shown = limit ?? total;
+		if (tops.size > 1 && shown > 1) setLimit(shown - 1);
+	});
+	const cap = fits && limit !== null ? limit : total;
+	let index = 0;
+	let hidden = 0;
+	const parts = [];
+	for (const { quick, field, toggles, items } of built) {
+		const keep = /* @__PURE__ */ new Set();
+		for (const item of items) {
+			if (index < cap || item.pressed) keep.add(item.value);
+			else hidden += 1;
+			index += 1;
+		}
+		if (keep.size === 0) continue;
+		const all = quick.all;
+		const set = (next) => {
+			const values = next.filter((v) => v !== NO_TOGGLE);
+			if (values.length > 0) filters.update(quick.field, {
+				op: "is",
+				values
+			});
+			else if (field.required || field.pinned) filters.update(quick.field, { values: [] });
+			else filters.remove(quick.field);
+		};
+		if (parts.length > 0 && !stacked) parts.push(/* @__PURE__ */ jsx(QuickRule, {}, `rule-${quick.field}`));
+		parts.push(/* @__PURE__ */ jsx(ToggleGroup, {
+			label: field.label,
+			options: toggles.options.filter((o) => keep.has(o.value)),
+			value: toggles.value,
+			multiple: toggles.multiple,
+			all: keep.has(ALL_ITEM) && (typeof all === "object" ? { count: all.count } : all),
+			allLabel: typeof all === "object" ? all.label : void 0,
+			onValueChange: set,
+			dimIcons: false,
+			className: "min-w-0"
+		}, quick.field));
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		ref: row,
+		className: cx("flex min-w-0", stacked ? "flex-col items-start gap-2" : "flex-wrap items-center gap-1"),
+		children: [
+			parts,
+			hidden > 0 && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onMore,
+				className: buttonClasses({
+					variant: "ghost",
+					size: "sm"
+				}),
+				children: t.quickMore(hidden)
+			}),
+			end
+		]
+	});
+}
+var ALL_ITEM = "\0all";
+function QuickRule() {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "mx-1 h-5 w-px shrink-0 bg-(--theme-border)"
+	});
+}
 /** The chips that say what narrows a list, under its toolbar: one per filter, each editable in
 *  place, then "+ Filter" and Clear (or Reset, where the page has default filters). It shows
 *  only while a filter is on or a field is required. At phone width it stops at two lines and
-*  a "+n filters" chip opens the rest in a sheet. */
+*  a "+n filters" chip opens the rest in a sheet.
+*
+*  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 }) {
 	const strings = useStrings();
 	const t = strings.filters;
 	const registerBar = filters?.registerBar;
 	useEffect(() => registerBar?.(), [registerBar]);
+	const box = useRef(null);
 	const row = useRef(null);
 	const [narrow, setNarrow] = useState(false);
 	const [width, setWidth] = useState(0);
@@ -653,10 +816,18 @@ function ListFilterBar({ filters, trailing, label, className }) {
 	const [focusAt, setFocusAt] = useState(null);
 	const chips = filters ? orderedChips(filters) : [];
 	const fieldOf = (key) => filters?.fields.find((f) => f.key === key);
+	const quick = (filters?.quick ?? []).flatMap((q) => {
+		const field = fieldOf(q.field);
+		return field ? [{
+			quick: q,
+			field
+		}] : [];
+	});
 	const empty = chips.length === 0;
+	const hasQuick = quick.length > 0;
 	const chipKeys = chips.map((c) => c.filter.field).join("\0");
 	useLayoutEffect(() => {
-		const el = row.current;
+		const el = box.current;
 		if (!el) return;
 		const measure = () => {
 			const w = el.getBoundingClientRect().width;
@@ -667,7 +838,7 @@ function ListFilterBar({ filters, trailing, label, className }) {
 		const observer = new ResizeObserver(measure);
 		observer.observe(el);
 		return () => observer.disconnect();
-	}, [empty]);
+	}, [empty, hasQuick]);
 	useLayoutEffect(() => setLimit(null), [
 		width,
 		chipKeys,
@@ -694,7 +865,7 @@ function ListFilterBar({ filters, trailing, label, className }) {
 	useEffect(() => {
 		if (hiddenRequest) setSheet(true);
 	}, [hiddenRequest]);
-	if (!filters || empty) return null;
+	if (!filters || empty && !hasQuick) return null;
 	const removable = filters.active.some((f) => !fieldOf(f.field)?.required);
 	const resetting = filters.hasDefaults;
 	const clearButton = (resetting ? !filters.isDefault : removable) && /* @__PURE__ */ jsx("button", {
@@ -706,23 +877,53 @@ function ListFilterBar({ filters, trailing, label, className }) {
 		}),
 		children: resetting ? strings.common.reset : strings.common.clear
 	});
-	const addButton = /* @__PURE__ */ jsx(AddFilterMenu, {
+	const addButton = (narrow) => /* @__PURE__ */ jsx(AddFilterMenu, {
 		filters,
 		trigger: /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			"data-filter-add": "",
+			"aria-label": narrow ? t.addFilter : void 0,
 			className: buttonClasses({
 				variant: "ghost",
-				size: "sm"
+				size: "sm",
+				iconOnly: narrow
 			}),
-			children: [/* @__PURE__ */ jsx(AddIcon, { "aria-hidden": "true" }), t.addFilter]
+			children: [/* @__PURE__ */ jsx(AddIcon, { "aria-hidden": "true" }), !narrow && t.addFilter]
 		})
 	});
-	return /* @__PURE__ */ jsxs("div", {
-		ref: row,
+	const drawer = /* @__PURE__ */ jsx(Drawer, {
+		open: sheet,
+		onClose: () => setSheet(false),
+		title: t.sheetTitle,
+		width: 400,
+		footer: /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full items-center gap-1.5",
+			children: [addButton(false), clearButton]
+		}),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			children: [hasQuick && /* @__PURE__ */ jsx(QuickRow, {
+				filters,
+				groups: quick,
+				narrow: false,
+				stacked: true
+			}), chips.map(({ filter, field }) => /* @__PURE__ */ jsx(FilterChip, {
+				filters,
+				filter,
+				field,
+				stretch: true,
+				answers: sheet
+			}, filter.field))]
+		})
+	});
+	const chipRow = !empty && /* @__PURE__ */ jsxs("div", {
+		ref: hasQuick ? row : (node) => {
+			row.current = node;
+			box.current = node;
+		},
 		role: "group",
 		"aria-label": label ?? t.activeFilters,
-		className: cx("flex flex-wrap items-center gap-1.5 py-1.5", className),
+		className: cx("flex flex-wrap items-center gap-1.5", hasQuick ? void 0 : cx("py-1.5", className)),
 		children: [
 			shownChips.map(({ filter, field }, i) => /* @__PURE__ */ jsx(FilterChip, {
 				filters,
@@ -737,32 +938,32 @@ 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,
+			addButton(narrow),
 			clearButton,
 			trailing && /* @__PURE__ */ jsx("div", {
 				className: "ml-auto flex items-center gap-1.5",
 				children: trailing
 			}),
-			/* @__PURE__ */ jsx(Drawer, {
-				open: sheet,
-				onClose: () => setSheet(false),
-				title: t.sheetTitle,
-				width: 400,
-				footer: /* @__PURE__ */ jsxs("div", {
-					className: "flex w-full items-center gap-1.5",
-					children: [addButton, clearButton]
-				}),
-				children: /* @__PURE__ */ jsx("div", {
-					className: "flex flex-col gap-2",
-					children: chips.map(({ filter, field }) => /* @__PURE__ */ jsx(FilterChip, {
-						filters,
-						filter,
-						field,
-						stretch: true,
-						answers: sheet
-					}, filter.field))
-				})
-			})
+			!hasQuick && drawer
+		]
+	});
+	if (!hasQuick) return chipRow;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: box,
+		className: cx("flex min-w-0 flex-col gap-1.5 py-1.5", className),
+		children: [
+			/* @__PURE__ */ jsx(QuickRow, {
+				filters,
+				groups: quick,
+				narrow,
+				onMore: () => setSheet(true),
+				end: empty && /* @__PURE__ */ jsxs(Fragment$1, { children: [clearButton, trailing && /* @__PURE__ */ jsx("div", {
+					className: "ml-auto flex items-center gap-1.5",
+					children: trailing
+				})] })
+			}),
+			chipRow,
+			drawer
 		]
 	});
 }
@@ -784,7 +985,7 @@ function orderedChips(filters) {
 			field
 		});
 	}
-	return out;
+	return out.filter(({ filter }) => !saidByToggles(filters, filter));
 }
 //#endregion
 export { AddFilterMenu, FilterChip, ListFilterBar };

package/dist/list/filterModel.d.ts

@@ -51,6 +51,10 @@ export interface FilterField<T = never> {
     valueLabel?: ((value: string) => string | undefined) | undefined;
     /** enum and people: whether more than one value can be chosen (default true). */
     multiple?: boolean | undefined;
+    /** date: the presets its picker offers, in order, such as `['-24h', '-7d', '-30d', 'year',
+     *  'all']`. Defaults to {@link DATE_PRESETS}. Any `-Nh` or `-Nd` works, as do `today`,
+     *  `month`, `year` and `all`. */
+    presets?: readonly string[] | 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. */
@@ -65,6 +69,28 @@ export interface FilterField<T = never> {
      *  on the server. */
     matches?: ((row: T, filter: ActiveFilter) => boolean) | undefined;
 }
+/** A field's values as a row of toggles above the chips, for the few a reader picks most, such as
+ *  a job's state. The toggles set the same filter its chip edits, so either changes both. */
+export interface QuickFilter {
+    /** The field the toggles set. */
+    field: string;
+    /** enum and people: the options shown as toggles, in order; every option by default. */
+    values?: readonly string[] | undefined;
+    /** How many rows hold each value, shown after its label; a yes-or-no field's is under `true`.
+     *  An option's own `count` is used where this has none. */
+    counts?: Readonly<Record<string, number>> | undefined;
+    /** Leads with an "All" toggle, pressed while the field is unset, that clears it. `{ count }`
+     *  shows the total beside it and `{ label }` names what it covers, such as "All states". */
+    all?: boolean | {
+        count?: number | undefined;
+        label?: string | undefined;
+    } | undefined;
+    /** Whether several can be pressed at once; the field's own `multiple` by default. */
+    multiple?: boolean | undefined;
+    /** `warning`: a toggle asking to be looked at, such as "Needs attention", in the warning tone
+     *  while it is off. */
+    tone?: 'warning' | undefined;
+}
 /** One filter in effect: plain data, so it can go in a URL, storage or a saved view. */
 export interface ActiveFilter {
     field: string;
@@ -73,9 +99,12 @@ export interface ActiveFilter {
      *  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. */
+/** The relative date presets the date picker offers unless a field names its own, as a filter
+ *  stores them. */
 export declare const DATE_PRESETS: readonly ['today', '-7d', '-30d', '-90d', 'month'];
-export type DatePreset = (typeof DATE_PRESETS)[number];
+/** A relative date a filter can hold: today, this month or year so far, every date (`all`), or
+ *  the last N hours or days (`-24h`, `-365d`). */
+export type DatePreset = (typeof DATE_PRESETS)[number] | 'year' | 'all' | `-${number}h` | `-${number}d`;
 type AnyField = FilterField<any>;
 export declare function fieldOperators(field: AnyField): readonly FilterOperator[];
 export declare function isMultiple(field: AnyField): boolean;

package/dist/list/filterModel.js

@@ -1,5 +1,6 @@
 //#region src/list/filterModel.ts
-/** The relative date presets the date picker offers, as a filter stores them. */
+/** The relative date presets the date picker offers unless a field names its own, as a filter
+*  stores them. */
 var DATE_PRESETS = [
 	"today",
 	"-7d",
@@ -212,47 +213,72 @@ function parseDay(value) {
 }
 var startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
 var addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+var NAMED_PRESETS = /* @__PURE__ */ new Set([
+	"today",
+	"month",
+	"year",
+	"all"
+]);
 function isDatePreset(value) {
-	return DATE_PRESETS.includes(value ?? "") || /^-\d+d$/.test(value ?? "");
+	return NAMED_PRESETS.has(value ?? "") || /^-\d+[dh]$/.test(value ?? "");
 }
-/** The days a preset or a day covers, as `[first, last]` local days, both included. */
-function presetDays(value, now) {
+/** The span a preset or a day covers: `from` included, `to` excluded, either open. Whole local
+*  days, except the last N hours, which run from that moment on. */
+function presetSpan(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 tomorrow = addDays(today, 1);
+	if (value === "all") return {};
+	if (value === "today") return {
+		from: today,
+		to: tomorrow
+	};
+	if (value === "month") return {
+		from: new Date(today.getFullYear(), today.getMonth(), 1),
+		to: tomorrow
+	};
+	if (value === "year") return {
+		from: new Date(today.getFullYear(), 0, 1),
+		to: tomorrow
+	};
+	const hours = value.match(/^-(\d+)h$/);
+	if (hours) return { from: /* @__PURE__ */ new Date(now.getTime() - Number(hours[1]) * 36e5) };
 	const days = value.match(/^-(\d+)d$/);
-	if (days) return [addDays(today, 1 - Number(days[1])), today];
+	if (days) return {
+		from: addDays(today, 1 - Number(days[1])),
+		to: tomorrow
+	};
 	const day = parseDay(value);
-	return day ? [day, day] : void 0;
+	return day ? {
+		from: day,
+		to: addDays(day, 1)
+	} : 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;
+	const span = (v) => v ? presetSpan(v, now) : void 0;
+	const range = (from, to) => ({
+		...from && { from },
+		...to && { to }
+	});
 	switch (filter.op) {
 		case "is": {
-			const span = days(first);
-			return span && {
-				from: span[0],
-				to: addDays(span[1], 1)
-			};
+			const s = span(first);
+			return s && range(s.from, s.to);
 		}
 		case "after": {
-			const span = days(first);
-			return span && { from: span[0] };
+			const s = span(first);
+			return s && range(s.from, void 0);
 		}
 		case "before": {
-			const span = days(first);
-			return span && { to: addDays(span[1], 1) };
+			const s = span(first);
+			return s && range(void 0, s.to);
 		}
 		case "between": {
-			const a = days(first);
-			const b = days(second);
-			return a && b ? {
-				from: a[0],
-				to: addDays(b[1], 1)
-			} : void 0;
+			const a = span(first);
+			const b = span(second);
+			return a && b ? range(a.from, b.to) : void 0;
 		}
 		default: return;
 	}
@@ -291,6 +317,7 @@ function matchFilter(field, filter, row, now) {
 	}
 	if (field.kind === "date") {
 		const range = dateFilterRange(filter, now);
+		if (range && range.from === void 0 && range.to === void 0) return true;
 		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());

package/dist/list/index.d.ts

@@ -1,5 +1,5 @@
 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, sameFilters, withFilterParams, } from './filterModel.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 { actionsColumnWidth, ListActionsHeader, ListCellText, ListError, ListSelectAllHeader, ListSkeleton, listTableFixedProps, listTableProps, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, STRETCHED_LINK, } from './ListTable.js';

package/dist/list/listView.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { ActiveFilter, FilterField } from './filterModel.js';
+import type { ActiveFilter, FilterField, QuickFilter } 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. */
@@ -97,6 +97,9 @@ export interface ListViewConfig<T> {
     filterStore?: FilterStore | undefined;
     /** False leaves remembering the filters to `filterStore` alone. */
     rememberFilters?: boolean | undefined;
+    /** Fields whose values also show as toggles above the chips, such as a job's state with how
+     *  many jobs are in each. */
+    quickFilters?: readonly QuickFilter[] | undefined;
     actions?: ActionDef[];
     /** Explicit pinned-button count when not using actions+isPinned; sizes the actions column. */
     actionCount?: number;
@@ -192,5 +195,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, filterFields, defaultFilters, filterStore, rememberFilters, 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, quickFilters, actions, actionCount, defaultShowColumnHeaders, defaultShowActions, isFavorite, isOn, createdAt, }: ListViewConfig<T>): ListView<T>;
 export {};

package/dist/list/listView.js

@@ -28,7 +28,7 @@ var DEFAULT_ORDER = "__default";
 var FAVORITE_ORDER = "__favorite";
 /** Persisted grouping + column-visibility + field-filter state for a list page,
 * driving the shared Display/Filter menus. */
-function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], defaultGroupBy, orderBys = [], defaultOrderBy, facets = [], filterFields, defaultFilters, filterStore, rememberFilters = true, actions = [], actionCount, defaultShowColumnHeaders = true, defaultShowActions = true, isFavorite, isOn, createdAt }) {
+function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], defaultGroupBy, orderBys = [], defaultOrderBy, facets = [], filterFields, defaultFilters, filterStore, rememberFilters = true, quickFilters, actions = [], actionCount, defaultShowColumnHeaders = true, defaultShowActions = true, isFavorite, isOn, createdAt }) {
 	const t = useStrings().list;
 	const tiebreak = orderBys[0]?.compare;
 	const effectiveOrderBys = useMemo(() => {
@@ -76,7 +76,8 @@ function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], def
 		fields,
 		defaultFilters,
 		store: filterStore,
-		remember: rememberFilters
+		remember: rememberFilters,
+		quick: quickFilters
 	});
 	const filters = useMemo(() => {
 		const out = {};

package/dist/list/useListFilters.d.ts

@@ -1,4 +1,4 @@
-import { type ActiveFilter, type FilterField, type FilterOperator } from './filterModel.js';
+import { type ActiveFilter, type FilterField, type FilterOperator, type QuickFilter } from './filterModel.js';
 /** Where filters live besides what the list remembers, such as the page's URL. */
 export interface FilterStore {
     /** The filters it holds, or `null` when it holds none, such as a URL with no filter params,
@@ -20,6 +20,8 @@ export interface ListFiltersConfig<T> {
     store?: FilterStore | undefined;
     /** False leaves remembering to the store alone. */
     remember?: boolean | undefined;
+    /** Fields whose values also show as toggles above the chips. */
+    quick?: readonly QuickFilter[] | undefined;
 }
 /** A request for a chip to open one of its pickers, which the chip clears once it has. */
 export interface FilterEditRequest {
@@ -30,6 +32,8 @@ export interface FilterEditRequest {
 /** A list's filters, the state behind the chip row and the Filter menu. */
 export interface ListFilters {
     fields: readonly FilterField<any>[];
+    /** Fields whose values also show as toggles above the chips. */
+    quick: readonly QuickFilter[];
     /** The filters in effect, in the order they were added. */
     active: readonly ActiveFilter[];
     /** The chips to show: the filters in effect, then one being added that has no value yet. */
@@ -65,4 +69,4 @@ export interface ListFilters {
 /** A list's active filters: which, in what order, where they are remembered and how rows
  *  match them. `useListView` builds one from its facets and fields; a page not on it, or
  *  filtering on the server, can call this alone. */
-export declare function useListFilters<T>({ storageKey, sharedFiltersKey, fields, defaultFilters, store, remember, }: ListFiltersConfig<T>): ListFilters;
+export declare function useListFilters<T>({ storageKey, sharedFiltersKey, fields, defaultFilters, store, remember, quick, }: ListFiltersConfig<T>): ListFilters;

package/dist/list/useListFilters.js

@@ -3,10 +3,11 @@ import { applyFilterList, fieldOperators, fromStored, isComplete, sameFilters, t
 import { useCallback, useMemo, useRef, useState } from "react";
 //#region src/list/useListFilters.ts
 var NONE = [];
+var NO_QUICK = [];
 /** A list's active filters: which, in what order, where they are remembered and how rows
 *  match them. `useListView` builds one from its facets and fields; a page not on it, or
 *  filtering on the server, can call this alone. */
-function useListFilters({ storageKey, sharedFiltersKey, fields, defaultFilters = NONE, store, remember = true }) {
+function useListFilters({ storageKey, sharedFiltersKey, fields, defaultFilters = NONE, store, remember = true, quick = NO_QUICK }) {
 	const sharedKeys = useMemo(() => new Set(fields.filter((f) => f.shared).map((f) => f.key)), [fields]);
 	const defaults = useMemo(() => defaultFilters.filter((f) => !sharedKeys.has(f.field)), [defaultFilters, sharedKeys]);
 	const sharedDefaults = useMemo(() => defaultFilters.filter((f) => sharedKeys.has(f.field)), [defaultFilters, sharedKeys]);
@@ -218,6 +219,7 @@ function useListFilters({ storageKey, sharedFiltersKey, fields, defaultFilters =
 	const apply = useCallback((rows) => applyFilterList(rows, active, fields), [active, fields]);
 	return {
 		fields,
+		quick,
 		active,
 		chips: useMemo(() => {
 			if (!draft) return active;