@protobase/ui 0.12.12 → 0.12.14

package/dist/app/displays/cards-display.js

@@ -2,7 +2,7 @@ import { Badge } from "../../primitives/badge.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { humanize } from "../../live/naming.js";
 import { useProjectUi } from "../pages/project-ui.js";
-import { cardFields } from "./list-displays.js";
+import { cardFields, filledMeta } from "./list-displays.js";
 import { AppLink } from "../use-app-address.js";
 import { fileShown, isPreviewable } from "../../live/file-values.js";
 import { displayValue } from "../../live/display-value.js";
@@ -40,8 +40,8 @@ const MetaValue = ({ icon, children }) => {
 };
 /**
 * A card per record, opening its page: its image across the top, the title over the subtitle, the badge beside it,
-* small meta fields below and the labels of its flags that are true; or, with a `card` component, what it draws of the
-* row, the built-in content again when it is missing or throws.
+* small meta fields below, those with a value, and the labels of its flags that are true; or, with a `card` component,
+* what it draws of the row, the built-in content again when it is missing or throws.
 */
 const CardsDisplay = ({ model, view, display, list }) => {
 	const { image, title, subtitle, badge, meta, flags } = cardFields(model, view, display);
@@ -108,7 +108,7 @@ const CardsDisplay = ({ model, view, display, list }) => {
 					}),
 					meta.length > 0 && /* @__PURE__ */ jsx("dl", {
 						className: "mt-auto flex flex-wrap items-center gap-x-3 gap-y-0.5 pt-1 text-xs text-muted-foreground",
-						children: meta.map((name) => /* @__PURE__ */ jsxs("div", {
+						children: filledMeta(row, meta).map((name) => /* @__PURE__ */ jsxs("div", {
 							className: "flex gap-1",
 							children: [/* @__PURE__ */ jsx("dt", {
 								className: "sr-only",

package/dist/app/displays/display-controls.js

@@ -1,6 +1,8 @@
+import { cn } from "../../lib/cn.js";
 import { humanize } from "../../live/naming.js";
 import { displayChoices, sortFields } from "./list-displays.js";
 import { parseSort } from "../list-order.js";
+import { MenuSelect } from "../../primitives/menu-select.js";
 import { Segmented } from "../../primitives/segmented.js";
 import { Calendar, Columns3, LayoutGrid, List, SquareKanban, Table2 } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -14,25 +16,35 @@ const icons = {
 	list: List,
 	calendar: Calendar
 };
-/** The list page's switch between the table and the view's displays; nothing for a list with only its table. */
-const DisplaySwitch = ({ view, value, onChange }) => {
+/**
+* The list page's switch between the table and the view's displays, as buttons or, on a phone, as a menu; nothing for a
+* list with only its table.
+*/
+const DisplaySwitch = ({ view, value, onChange, menu = false }) => {
 	const choices = displayChoices(view);
 	if (choices.length < 2) return null;
+	const options = choices.map((choice) => ({
+		value: choice.name,
+		label: choice.label,
+		icon: choice.icon === void 0 ? void 0 : icons[choice.icon]
+	}));
+	if (menu) return /* @__PURE__ */ jsx(MenuSelect, {
+		label: "Display",
+		value,
+		onChange,
+		options
+	});
 	return /* @__PURE__ */ jsx(Segmented, {
 		label: "Display",
 		size: "md",
 		value,
 		onChange,
-		options: choices.map((choice) => ({
-			value: choice.name,
-			label: choice.label,
-			icon: choice.icon === void 0 ? void 0 : icons[choice.icon]
-		}))
+		options
 	});
 };
 const directions = [["asc", "ascending"], ["desc", "descending"]];
 /** The order of a display without column headers, over the sortable fields it shows and the order the list has now. */
-const SortMenu = ({ model, view, display, orderBy, onChange }) => {
+const SortMenu = ({ model, view, display, orderBy, onChange, className }) => {
 	const current = parseSort(orderBy);
 	const fields = sortFields(model, view, display);
 	const names = fields.includes(current.columnId) ? fields : [current.columnId, ...fields];
@@ -41,7 +53,7 @@ const SortMenu = ({ model, view, display, orderBy, onChange }) => {
 		"aria-label": "Sort",
 		value: `${current.columnId} ${current.direction}`,
 		onChange: (event) => onChange(event.target.value),
-		className: "h-8 rounded-md border border-border-strong bg-background px-2.5 text-[13px] shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20",
+		className: cn("h-8 rounded-md border border-border-strong bg-background px-2.5 text-[13px] shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20", className),
 		children: names.flatMap((name) => directions.map(([direction, word]) => /* @__PURE__ */ jsxs("option", {
 			value: `${name} ${direction}`,
 			children: [

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

@@ -37,6 +37,8 @@ const cardFields = (model, view, display) => ({
 	meta: display.meta ?? [],
 	flags: display.flags ?? []
 });
+/** The meta fields a card shows for a row: those with a value, so a listing for rent only shows no purchase price. */
+const filledMeta = (row, meta) => meta.filter((name) => row.record[name] !== null && row.record[name] !== void 0 && row.record[name] !== "");
 /** Every field a display shows, the fields its rows are loaded and labelled for. */
 const shownFields = (model, view, display) => {
 	if (display.kind === "custom") return display.fields;
@@ -73,4 +75,4 @@ const displayRow = (model, row) => {
 	};
 };
 //#endregion
-export { cardFields, defaultDisplay, displayChoices, displayRow, displaysOf, loadedFields, shownDisplay, shownFields, sortFields };
+export { cardFields, defaultDisplay, displayChoices, displayRow, displaysOf, filledMeta, loadedFields, shownDisplay, shownFields, sortFields };

package/dist/app/list-page.js

@@ -15,6 +15,7 @@ import { pinnedStorageKey } from "../data-grid/pinned-storage.js";
 import { DataGrid } from "../data-grid/data-grid.js";
 import { ActiveFilterChips } from "../filter-panel/active-filter-chips.js";
 import { activeChips, emptyFilterState, removeChip } from "../filter-panel/filter-state.js";
+import { FilterSection } from "../filter-panel/filter-section.js";
 import { ToolbarRow } from "../filter-panel/toolbar-row.js";
 import { FilterPanel } from "../filter-panel/filter-panel.js";
 import { columnsFromModel } from "../live/columns-from-model.js";
@@ -135,14 +136,15 @@ const LoadedList = ({ model, address }) => {
 	const searchBox = model.search?.length ? /* @__PURE__ */ jsx(ListSearch, {
 		value: search?.kind === "search" ? search.text : "",
 		onCommit: commitSearch,
-		placeholder: `Search ${plural.toLowerCase()}`
+		placeholder: `Search ${plural.toLowerCase()}`,
+		className: desktop ? void 0 : "min-h-11"
 	}) : null;
 	const panel = /* @__PURE__ */ jsx(FilterPanel, {
 		layout,
 		config,
 		value: state,
 		onChange: setFilter,
-		leading: sortMenu,
+		leading: layout === "bar" ? sortMenu : void 0,
 		trailing: searchBox
 	});
 	const desktopToolbar = layout === "bar" ? panel : /* @__PURE__ */ jsx(ToolbarRow, {
@@ -150,40 +152,75 @@ const LoadedList = ({ model, address }) => {
 		trailing: searchBox
 	});
 	const chips = activeChips(config, state);
+	const chipsRow = /* @__PURE__ */ jsx(ActiveFilterChips, {
+		scroll: true,
+		chips,
+		onRemove: (key) => setFilter(removeChip(state, key)),
+		onClear: () => setFilter(emptyFilterState)
+	});
+	const phoneSort = display && /* @__PURE__ */ jsx(FilterSection, {
+		title: "Sort",
+		children: /* @__PURE__ */ jsx(SortMenu, {
+			model,
+			view,
+			display,
+			orderBy,
+			onChange: (next) => set({ orderBy: next }),
+			className: "min-h-11 w-full"
+		})
+	});
 	const phoneFilters = /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-2",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			children: [/* @__PURE__ */ jsxs(Button, {
-				className: "min-h-11",
-				onClick: () => setSheetOpen(true),
-				"aria-haspopup": "dialog",
-				children: [
-					/* @__PURE__ */ jsx(SlidersHorizontal, { className: "size-3.5" }),
-					"Filters",
-					chips.length > 0 && ` (${chips.length})`
-				]
-			}), /* @__PURE__ */ jsx("div", {
-				className: "min-w-0 flex-1",
-				children: /* @__PURE__ */ jsx(ActiveFilterChips, {
-					scroll: true,
-					chips,
-					onRemove: (key) => setFilter(removeChip(state, key)),
-					onClear: () => setFilter(emptyFilterState)
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsxs(Button, {
+					className: "min-h-11",
+					onClick: () => setSheetOpen(true),
+					"aria-haspopup": "dialog",
+					children: [
+						/* @__PURE__ */ jsx(SlidersHorizontal, { className: "size-3.5" }),
+						"Filters",
+						chips.length > 0 && ` (${chips.length})`
+					]
+				}), searchBox ?? /* @__PURE__ */ jsx("div", {
+					className: "min-w-0 flex-1",
+					children: chipsRow
+				})]
+			}),
+			searchBox && chipsRow,
+			/* @__PURE__ */ jsx(Sheet, {
+				title: "Filters",
+				open: sheetOpen,
+				onClose: () => setSheetOpen(false),
+				children: /* @__PURE__ */ jsx(FilterPanel, {
+					layout: "panel",
+					fullWidth: true,
+					config,
+					value: state,
+					onChange: setFilter,
+					leading: phoneSort
 				})
-			})]
-		}), /* @__PURE__ */ jsx(Sheet, {
-			title: "Filters",
-			open: sheetOpen,
-			onClose: () => setSheetOpen(false),
-			children: /* @__PURE__ */ jsx(FilterPanel, {
-				layout: "panel",
-				fullWidth: true,
-				config,
-				value: state,
-				onChange: setFilter
 			})
-		})]
+		]
+	});
+	const createButton = can(permissions, "create") && /* @__PURE__ */ jsxs(Button, {
+		variant: "primary",
+		onClick: () => go({
+			kind: "create",
+			resource
+		}),
+		children: [
+			/* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
+			"New ",
+			singular.toLowerCase()
+		]
+	});
+	const displaySwitch = (menu) => /* @__PURE__ */ jsx(DisplaySwitch, {
+		view,
+		value: display?.name ?? tableDisplay,
+		onChange: (name) => set({ display: name }),
+		menu
 	});
 	const openRecord = (row) => go({
 		kind: "record",
@@ -230,27 +267,8 @@ const LoadedList = ({ model, address }) => {
 			/* @__PURE__ */ jsx(PageHeader, {
 				title: plural,
 				subtitle: view?.help,
-				actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					/* @__PURE__ */ jsx(DisplaySwitch, {
-						view,
-						value: display?.name ?? tableDisplay,
-						onChange: (name) => set({ display: name })
-					}),
-					!desktop && sortMenu,
-					!desktop && searchBox,
-					can(permissions, "create") && /* @__PURE__ */ jsxs(Button, {
-						variant: "primary",
-						onClick: () => go({
-							kind: "create",
-							resource
-						}),
-						children: [
-							/* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
-							"New ",
-							singular.toLowerCase()
-						]
-					})
-				] })
+				aside: !desktop && displaySwitch(true),
+				actions: desktop ? /* @__PURE__ */ jsxs(Fragment$1, { children: [displaySwitch(false), createButton] }) : createButton
 			}),
 			!parsed.ok && /* @__PURE__ */ jsx(ErrorBanner, {
 				title: "The filter in the address could not be read",

package/dist/app/list-search.js

@@ -1,10 +1,11 @@
+import { cn } from "../lib/cn.js";
 import { Input } from "../primitives/input.js";
 import { useEffect, useState } from "react";
 import { Search } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 //#region src/app/list-search.tsx
-/** A search box that commits after a short pause or on Enter. */
-const ListSearch = ({ value, onCommit, placeholder }) => {
+/** A search box that commits after a short pause or on Enter; `className` goes on its frame. */
+const ListSearch = ({ value, onCommit, placeholder, className }) => {
 	const [text, setText] = useState(value);
 	useEffect(() => setText(value), [value]);
 	useEffect(() => {
@@ -17,7 +18,7 @@ const ListSearch = ({ value, onCommit, placeholder }) => {
 		onCommit
 	]);
 	return /* @__PURE__ */ jsx(Input, {
-		wrapperClassName: "min-w-0 flex-1 sm:w-72 sm:flex-initial",
+		wrapperClassName: cn("min-w-0 flex-1 sm:w-72 sm:flex-initial", className),
 		leading: /* @__PURE__ */ jsx(Search, { className: "size-4" }),
 		placeholder,
 		"aria-label": "Search",

package/dist/app-shell/page-header.js

@@ -1,17 +1,23 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/page-header.tsx
-const PageHeader = ({ title, subtitle, actions }) => /* @__PURE__ */ jsxs("div", {
-	className: "flex flex-wrap items-end justify-between gap-x-4 gap-y-2",
-	children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h1", {
+const PageHeader = ({ title, subtitle, aside, actions }) => {
+	const heading = /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h1", {
 		className: "text-xl font-semibold tracking-tight",
 		children: title
 	}), subtitle && /* @__PURE__ */ jsx("p", {
 		className: "text-[13px] text-muted-foreground",
 		children: subtitle
-	})] }), /* @__PURE__ */ jsx("div", {
-		className: "flex w-full flex-wrap items-center gap-2 sm:w-auto",
-		children: actions
-	})]
-});
+	})] });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-wrap items-end justify-between gap-x-4 gap-y-2",
+		children: [aside ? /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 items-center justify-between gap-3",
+			children: [heading, aside]
+		}) : heading, actions && /* @__PURE__ */ jsx("div", {
+			className: "flex w-full flex-wrap items-center gap-2 sm:w-auto",
+			children: actions
+		})]
+	});
+};
 //#endregion
 export { PageHeader };

package/dist/data-grid/cells.js

@@ -29,7 +29,7 @@ const renderCell = (spec, value) => {
 		});
 		case "money": return /* @__PURE__ */ jsxs("span", {
 			className: "tabular-nums",
-			children: [formatMoney(Number(value), spec.currency), spec.suffix]
+			children: [formatMoney(Number(value), spec.currency, spec.decimals), spec.suffix]
 		});
 		case "date": return /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums text-muted-foreground",

package/dist/filter-panel/filter-panel.js

@@ -68,6 +68,7 @@ const FilterPanel = ({ config, layout, value, defaultValue, onChange, lockedLabe
 				className: "border-b pb-3",
 				children: chipsView
 			}),
+			leading,
 			config.facets.map((group) => /* @__PURE__ */ jsx(FilterSection, {
 				title: group.label,
 				children: facetView(group)

package/dist/format/money.js

@@ -1,15 +1,21 @@
 //#region src/format/money.ts
 const formatters = /* @__PURE__ */ new Map();
-const formatterFor = (currency) => {
-	const cached = formatters.get(currency);
+const formatterFor = (currency, decimals) => {
+	const key = `${currency}:${decimals ?? ""}`;
+	const cached = formatters.get(key);
 	if (cached) return cached;
 	const created = new Intl.NumberFormat("en-IE", {
 		style: "currency",
-		currency
+		currency,
+		...decimals !== void 0 && {
+			minimumFractionDigits: decimals,
+			maximumFractionDigits: decimals
+		}
 	});
-	formatters.set(currency, created);
+	formatters.set(key, created);
 	return created;
 };
-const formatMoney = (cents, currency = "EUR") => formatterFor(currency).format(cents / 100);
+/** An amount in cents in the currency, with its usual decimals or `decimals` of them. */
+const formatMoney = (cents, currency = "EUR", decimals) => formatterFor(currency, decimals).format(cents / 100);
 //#endregion
 export { formatMoney };

package/dist/live/columns-from-model.js

@@ -69,13 +69,14 @@ const columnsFromModel = (resource, view, highlight = []) => {
 		const viewField = view?.fields[name];
 		const kind = kindOf(field, viewField, index);
 		const labels = Object.fromEntries((field.enumValues ?? []).map((value) => [value, enumLabel(value, viewField?.valueLabels)]));
+		const suffixWidth = viewField?.suffix ? Math.ceil(viewField.suffix.length * 7.2) : 0;
 		return [{
 			id: name,
 			header: viewField?.label ?? humanize(name),
 			kind,
-			width: name === "name" ? 260 : widths[kind],
+			width: (name === "name" ? 260 : widths[kind]) + suffixWidth,
 			sortable: field.sortable,
-			minWidth: Math.max(kind === "id" ? 150 : 0, headerWidth(viewField?.label ?? humanize(name), field.sortable), kind === "status" ? badgeWidth(Object.values(labels)) : 0),
+			minWidth: Math.max(kind === "id" ? 150 : 0, headerWidth(viewField?.label ?? humanize(name), field.sortable), kind === "status" ? badgeWidth(Object.values(labels)) : 0, suffixWidth > 0 ? widths[kind] + suffixWidth : 0),
 			...fixedKinds.has(kind) && { fixed: true },
 			...highlight.includes(name) && { highlight: true },
 			...field.type === "enum" && {
@@ -85,6 +86,7 @@ const columnsFromModel = (resource, view, highlight = []) => {
 			...field.type === "enum" && viewField?.valueColors && { colors: viewField.valueColors },
 			...field.type === "enum" && viewField?.badgeShape && { shape: viewField.badgeShape },
 			...viewField?.suffix !== void 0 && { suffix: viewField.suffix },
+			...kind === "money" && viewField?.decimals !== void 0 && { decimals: viewField.decimals },
 			...kind === "money" && {
 				currency: "EUR",
 				value: (row) => row[name] == null ? null : currencyCents(row[name])

package/dist/live/filter-string.js

@@ -60,6 +60,10 @@ const stateToClauses = (config, state, now = /* @__PURE__ */ new Date()) => {
 	const facets = config.facets.flatMap((group) => {
 		const values = state.facets[group.id] ?? [];
 		if (values.length === 0) return [];
+		if (group.flags) {
+			const chosen = group.options.filter((option) => values.includes(option.value)).map((option) => w.eq(option.value, true));
+			return chosen.length === 0 ? [] : [chosen.length === 1 ? chosen[0] : w.or(...chosen)];
+		}
 		return [values.length === 1 ? w.eq(group.id, values[0]) : w.in(group.id, values)];
 	});
 	const ranges = (config.ranges ?? []).flatMap((range) => {
@@ -79,6 +83,17 @@ const clausesToText = (clauses) => clauses.length === 0 ? "" : printFilter(w.and
 const stateToText = (config, state, extras = [], now = /* @__PURE__ */ new Date()) => clausesToText([...stateToClauses(config, state, now), ...extras]);
 const flatten = (expr) => expr.kind === "and" ? expr.args.flatMap(flatten) : [expr];
 const fieldName = (expr) => expr.field.path.join(".");
+const isTrue = (expr) => expr.kind === "compare" && expr.op === "=" && expr.value.kind === "boolean" && expr.value.value;
+const flagsChosen = (clause, groupOf) => {
+	const parts = clause.kind === "or" ? clause.args : [clause];
+	if (!parts.every(isTrue)) return void 0;
+	const fields = parts.map(fieldName);
+	const group = groupOf.get(fields[0]);
+	return group !== void 0 && fields.every((field) => groupOf.get(field) === group) ? {
+		group,
+		fields
+	} : void 0;
+};
 const literalText = (value) => value.kind === "number" ? String(value.raw) : value.kind === "string" ? String(value.value) : void 0;
 const presetOf = (clause, now) => {
 	const v = clause.value;
@@ -104,26 +119,31 @@ const textToState = (config, text, now = /* @__PURE__ */ new Date()) => {
 		toggles: []
 	};
 	const extras = [];
-	const facetIds = new Set(config.facets.map((group) => group.id));
+	const facetIds = new Set(config.facets.filter((group) => !group.flags).map((group) => group.id));
+	const flagGroupOf = new Map(config.facets.filter((group) => group.flags).flatMap((group) => group.options.map((option) => [option.value, group.id])));
 	const toggleIds = new Set((config.toggles ?? []).map((toggle) => toggle.id));
 	const rangeIds = new Set((config.ranges ?? []).map((range) => range.id));
 	const bounds = /* @__PURE__ */ new Map();
 	let dateClause;
 	let todayEnd;
-	for (const clause of parsed.ast ? flatten(parsed.ast) : []) if (clause.kind === "compare" && facetIds.has(fieldName(clause)) && clause.op === "=" && literalText(clause.value) !== void 0) state.facets[fieldName(clause)] = [...state.facets[fieldName(clause)] ?? [], literalText(clause.value)];
-	else if (clause.kind === "in" && facetIds.has(fieldName(clause)) && clause.values.every((value) => literalText(value) !== void 0)) state.facets[fieldName(clause)] = [...state.facets[fieldName(clause)] ?? [], ...clause.values.map((value) => literalText(value))];
-	else if (clause.kind === "compare" && config.dateField === fieldName(clause) && clause.op === ">=" && presetOf(clause, now) && !state.date) {
-		state.date = presetOf(clause, now);
-		dateClause = clause;
-	} else if (clause.kind === "compare" && config.dateField === fieldName(clause) && clause.op === "<" && (clause.value.kind === "timestamp" || clause.value.kind === "string") && periodStart("today", now).startsWith(clause.value.value.slice(0, 10))) todayEnd = clause;
-	else if (clause.kind === "compare" && toggleIds.has(fieldName(clause)) && clause.op === "=" && clause.value.kind === "boolean" && clause.value.value) state.toggles.push(fieldName(clause));
-	else if (clause.kind === "compare" && rangeIds.has(fieldName(clause)) && (clause.op === ">=" || clause.op === "<=") && clause.value.kind === "number") {
-		const range = bounds.get(fieldName(clause)) ?? { clauses: [] };
-		if (clause.op === ">=") range.low = clause.value.value;
-		else range.high = clause.value.value;
-		range.clauses.push(clause);
-		bounds.set(fieldName(clause), range);
-	} else extras.push(clause);
+	for (const clause of parsed.ast ? flatten(parsed.ast) : []) {
+		const flags = flagsChosen(clause, flagGroupOf);
+		if (flags && !state.facets[flags.group]) state.facets[flags.group] = flags.fields;
+		else if (clause.kind === "compare" && facetIds.has(fieldName(clause)) && clause.op === "=" && literalText(clause.value) !== void 0) state.facets[fieldName(clause)] = [...state.facets[fieldName(clause)] ?? [], literalText(clause.value)];
+		else if (clause.kind === "in" && facetIds.has(fieldName(clause)) && clause.values.every((value) => literalText(value) !== void 0)) state.facets[fieldName(clause)] = [...state.facets[fieldName(clause)] ?? [], ...clause.values.map((value) => literalText(value))];
+		else if (clause.kind === "compare" && config.dateField === fieldName(clause) && clause.op === ">=" && presetOf(clause, now) && !state.date) {
+			state.date = presetOf(clause, now);
+			dateClause = clause;
+		} else if (clause.kind === "compare" && config.dateField === fieldName(clause) && clause.op === "<" && (clause.value.kind === "timestamp" || clause.value.kind === "string") && periodStart("today", now).startsWith(clause.value.value.slice(0, 10))) todayEnd = clause;
+		else if (clause.kind === "compare" && toggleIds.has(fieldName(clause)) && clause.op === "=" && clause.value.kind === "boolean" && clause.value.value) state.toggles.push(fieldName(clause));
+		else if (clause.kind === "compare" && rangeIds.has(fieldName(clause)) && (clause.op === ">=" || clause.op === "<=") && clause.value.kind === "number") {
+			const range = bounds.get(fieldName(clause)) ?? { clauses: [] };
+			if (clause.op === ">=") range.low = clause.value.value;
+			else range.high = clause.value.value;
+			range.clauses.push(clause);
+			bounds.set(fieldName(clause), range);
+		} else extras.push(clause);
+	}
 	if (state.date === "yesterday" && !todayEnd) {
 		extras.push(dateClause);
 		state.date = void 0;

package/dist/live/use-filter-config.js

@@ -25,25 +25,30 @@ const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 		const field = model.fields[name];
 		return field?.type === "relation" && field.relation ? resources[field.relation.resource] : void 0;
 	};
-	const facetQueries = useQueries({ queries: skeleton.facets.map((group) => {
+	const counted = skeleton.facets.flatMap((group) => (group.flags ? group.options.map((option) => option.value) : [group.id]).map((field) => ({
+		group: group.id,
+		field
+	})));
+	const facetQueries = useQueries({ queries: counted.map(({ group, field }) => {
 		const filter = stateToText(skeleton, {
 			...state,
 			facets: {
 				...state.facets,
-				[group.id]: []
+				[group]: []
 			}
 		}, extras);
 		return {
-			queryKey: keys.facets(model.name, group.id, filter),
-			queryFn: () => client.facets(model.name, group.id, {
+			queryKey: keys.facets(model.name, field, filter),
+			queryFn: () => client.facets(model.name, field, {
 				filter,
 				limit: 50
 			})
 		};
 	}) });
-	const labelQueries = useQueries({ queries: skeleton.facets.map((group, index) => {
+	const counts = (group, field) => facetQueries[counted.findIndex((entry) => entry.group === group && entry.field === field)]?.data;
+	const labelQueries = useQueries({ queries: skeleton.facets.map((group) => {
 		const target = targetOf(group.id);
-		const ids = labelKeys((facetQueries[index]?.data ?? []).flatMap((facet) => facet.value === null ? [] : [String(facet.value)]), state.facets[group.id] ?? []);
+		const ids = labelKeys((counts(group.id, group.id) ?? []).flatMap((facet) => facet.value === null ? [] : [String(facet.value)]), state.facets[group.id] ?? []);
 		return {
 			queryKey: keys.labels(`facet:${model.name}.${group.id}`, ids.join(",")),
 			enabled: Boolean(target) && ids.length > 0,
@@ -67,9 +72,20 @@ const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 		};
 	}) });
 	const facetGroup = (group, index) => {
+		if (group.flags) {
+			const options = group.options.map(({ value }) => ({
+				value,
+				label: label(value),
+				count: counts(group.id, value)?.find((facet) => String(facet.value) === "true")?.count ?? 0
+			}));
+			return {
+				...group,
+				options
+			};
+		}
 		const field = model.fields[group.id];
 		const names = new Map(labelQueries[index]?.data ?? []);
-		const counted = (facetQueries[index]?.data ?? []).flatMap((facet) => facet.value === null ? [] : [{
+		const values = (counts(group.id, group.id) ?? []).flatMap((facet) => facet.value === null ? [] : [{
 			value: String(facet.value),
 			label: field?.type === "enum" ? enumLabel(String(facet.value), view?.fields[group.id]?.valueLabels) : names.get(String(facet.value)) ?? String(facet.value),
 			count: facet.count
@@ -78,7 +94,7 @@ const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 		return {
 			...group,
 			label: label(group.id),
-			options: search.matches ? matchOptions(search.matches, counted) : counted,
+			options: search.matches ? matchOptions(search.matches, values) : values,
 			...names.size > 0 && { labels: Object.fromEntries(names) },
 			...search.onSearch && { onSearch: search.onSearch }
 		};

package/dist/live/view-fields.js

@@ -27,14 +27,27 @@ const widgetFields = (view, model) => {
 	const widgets = view?.filters ?? [];
 	const date = widgets.find((widget) => widget.kind === "dateRange");
 	return {
-		facets: widgets.flatMap((widget) => widget.kind === "facets" && !rangeOf(widget, model) ? [{
-			id: widget.field,
-			label: widget.field,
-			options: [],
-			searchable: widget.search,
-			...model?.fields[widget.field]?.type === "relation" && { combobox: true }
-		}] : []),
-		ranges: widgets.flatMap((widget) => rangeOf(widget, model) ? [emptyRange(widget.field)] : []),
+		facets: widgets.flatMap((widget) => {
+			if (widget.kind === "facets" && !rangeOf(widget, model)) return [{
+				id: widget.field,
+				label: widget.field,
+				options: [],
+				searchable: widget.search,
+				...model?.fields[widget.field]?.type === "relation" && { combobox: true }
+			}];
+			if (widget.kind === "flags") return [{
+				id: widget.fields.join("|"),
+				label: widget.label,
+				options: widget.fields.map((field) => ({
+					value: field,
+					label: field,
+					count: 0
+				})),
+				flags: true
+			}];
+			return [];
+		}),
+		ranges: widgets.flatMap((widget) => widget.kind !== "flags" && rangeOf(widget, model) ? [emptyRange(widget.field)] : []),
 		...date && {
 			dateField: date.field,
 			dateKind: model?.fields[date.field]?.type === "date" ? "date" : "timestamp",

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.12.12";
+var version = "0.12.14";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

package/dist/primitives/menu-keys.js

@@ -0,0 +1,14 @@
+//#region src/primitives/menu-keys.ts
+/**
+* The item of an open menu a key moves the focus to, from the item at `index` (-1 for none) of `count`: the arrows step
+* and wrap, Home and End jump to the ends. `undefined` for a key that does not move it.
+*/
+const menuKeyTarget = (key, index, count) => {
+	if (count === 0) return void 0;
+	if (key === "Home") return 0;
+	if (key === "End") return count - 1;
+	if (key === "ArrowDown") return index < 0 ? 0 : (index + 1) % count;
+	if (key === "ArrowUp") return index < 0 ? count - 1 : (index - 1 + count) % count;
+};
+//#endregion
+export { menuKeyTarget };