@protobase/ui 0.12.10 → 0.12.12

package/dist/app/action-icon.js

@@ -1,10 +1,6 @@
-import { FileText, Send, Wallet, Zap } from "lucide-react";
+import { namedIcon } from "./named-icon.js";
+import { Zap } from "lucide-react";
 //#region src/app/action-icon.ts
-const byName = {
-	wallet: Wallet,
-	"file-text": FileText,
-	send: Send
-};
-const actionIcon = (name) => name ? byName[name] ?? Zap : Zap;
+const actionIcon = (name) => namedIcon(name) ?? Zap;
 //#endregion
 export { actionIcon };

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

@@ -9,7 +9,8 @@ import { displayValue } from "../../live/display-value.js";
 import { shownWidget } from "../field-types/shown-widget.js";
 import { CustomBoundary } from "../pages/custom-boundary.js";
 import { WidgetPart } from "../field-types/widget-part.js";
-import { toneFor } from "../../live/columns-from-model.js";
+import { namedIcon } from "../named-icon.js";
+import { ValueBadge } from "../value-badge.js";
 import { DisplayFooter, DisplayState } from "./display-frame.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/displays/cards-display.tsx
@@ -27,12 +28,23 @@ const CardImage = ({ value }) => {
 		})
 	});
 };
+const MetaValue = ({ icon, children }) => {
+	const Icon = namedIcon(icon);
+	return /* @__PURE__ */ jsxs("dd", {
+		className: "flex items-center gap-1 tabular-nums",
+		children: [Icon && /* @__PURE__ */ jsx(Icon, {
+			className: "size-3.5 shrink-0",
+			"aria-hidden": true
+		}), children]
+	});
+};
 /**
-* A card per record, opening its page: its image across the top, the title over the subtitle, the badge beside it and small meta fields below;
-* or, with a `card` component, what it draws of the row, the built-in content again when it is missing or throws.
+* 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.
 */
 const CardsDisplay = ({ model, view, display, list }) => {
-	const { image, title, subtitle, badge, meta } = cardFields(model, view, display);
+	const { image, title, subtitle, badge, meta, flags } = cardFields(model, view, display);
 	const label = (name) => view?.fields[name]?.label ?? humanize(name);
 	const text = (row, name) => {
 		const field = model.fields[name];
@@ -52,6 +64,17 @@ const CardsDisplay = ({ model, view, display, list }) => {
 			fallback: text(row, name)
 		}) : text(row, name);
 	};
+	const metaValue = (row, name) => {
+		const field = model.fields[name];
+		const hints = view?.fields[name];
+		const value = row.record[name];
+		if (!field || hints?.format !== "badge" || shownWidget(fieldTypes, field, hints) || value === null || value === void 0 || value === "") return shownValue(row, name);
+		return /* @__PURE__ */ jsx(ValueBadge, {
+			value,
+			hints,
+			children: text(row, name)
+		});
+	};
 	const plural = (view?.names?.plural ?? humanize(model.name)).toLowerCase();
 	return /* @__PURE__ */ jsxs(DisplayState, {
 		list,
@@ -65,6 +88,7 @@ const CardsDisplay = ({ model, view, display, list }) => {
 			"aria-label": view?.names?.plural ?? humanize(model.name),
 			children: list.rows.map((row) => {
 				const status = badge === void 0 ? void 0 : row.record[badge];
+				const raised = flags.filter((name) => row.record[name] === true);
 				const builtIn = /* @__PURE__ */ jsxs(Fragment, { children: [
 					image !== void 0 && /* @__PURE__ */ jsx(CardImage, { value: row.record[image] }),
 					/* @__PURE__ */ jsxs("span", {
@@ -72,8 +96,9 @@ const CardsDisplay = ({ model, view, display, list }) => {
 						children: [/* @__PURE__ */ jsx("span", {
 							className: "min-w-0 truncate font-medium",
 							children: shownValue(row, title)
-						}), badge !== void 0 && status !== null && status !== void 0 && /* @__PURE__ */ jsx(Badge, {
-							tone: toneFor(String(status)),
+						}), badge !== void 0 && status !== null && status !== void 0 && /* @__PURE__ */ jsx(ValueBadge, {
+							value: status,
+							hints: view?.fields[badge],
 							children: text(row, badge)
 						})]
 					}),
@@ -82,17 +107,25 @@ const CardsDisplay = ({ model, view, display, list }) => {
 						children: shownValue(row, subtitle)
 					}),
 					meta.length > 0 && /* @__PURE__ */ jsx("dl", {
-						className: "mt-auto flex flex-wrap gap-x-3 gap-y-0.5 pt-1 text-xs text-muted-foreground",
+						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", {
 							className: "flex gap-1",
 							children: [/* @__PURE__ */ jsx("dt", {
 								className: "sr-only",
 								children: label(name)
-							}), /* @__PURE__ */ jsx("dd", {
-								className: "tabular-nums",
-								children: shownValue(row, name)
+							}), /* @__PURE__ */ jsx(MetaValue, {
+								icon: view?.fields[name]?.icon,
+								children: metaValue(row, name)
 							})]
 						}, name))
+					}),
+					raised.length > 0 && /* @__PURE__ */ jsx("ul", {
+						className: "flex flex-wrap gap-1",
+						"aria-label": "Features",
+						children: raised.map((name) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Badge, {
+							dot: false,
+							children: label(name)
+						}) }, name))
 					})
 				] });
 				return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(AppLink, {

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

@@ -34,18 +34,20 @@ const cardFields = (model, view, display) => ({
 	title: display.title ?? recordTitleField(model, view),
 	subtitle: display.subtitle,
 	badge: display.badge,
-	meta: display.meta ?? []
+	meta: display.meta ?? [],
+	flags: display.flags ?? []
 });
 /** 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;
-	const { image, title, subtitle, badge, meta } = cardFields(model, view, display);
+	const { image, title, subtitle, badge, meta, flags } = cardFields(model, view, display);
 	return [
 		image,
 		title,
 		subtitle,
 		badge,
-		...meta
+		...meta,
+		...flags
 	].filter((name) => name !== void 0);
 };
 /** The fields to label the list's rows for: the table's columns and every display's, so one load serves them all. */

package/dist/app/field-editor.js

@@ -90,6 +90,10 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 			className: "text-[13px]",
 			children: hints.prefix
 		}) : void 0,
+		trailing: hints?.suffix ? /* @__PURE__ */ jsx("span", {
+			className: "text-[13px]",
+			children: hints.suffix.trim()
+		}) : void 0,
 		placeholder,
 		className: cn(numeric.has(field.type) && "text-right tabular-nums"),
 		value: String(value),

package/dist/app/named-icon.js

@@ -0,0 +1,13 @@
+import { FileText, RulerDimensionLine, Send, Wallet } from "lucide-react";
+//#region src/app/named-icon.ts
+/** The icons an action's or a field's `icon` may name. */
+const byName = {
+	wallet: Wallet,
+	"file-text": FileText,
+	send: Send,
+	ruler: RulerDimensionLine
+};
+/** The icon a name stands for, or nothing for a name the app does not know. */
+const namedIcon = (name) => name !== void 0 && Object.hasOwn(byName, name) ? byName[name] : void 0;
+//#endregion
+export { namedIcon };

package/dist/app/pages/field-value.js

@@ -1,5 +1,4 @@
 import { cn } from "../../lib/cn.js";
-import { Badge } from "../../primitives/badge.js";
 import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
 import { fetchLabels } from "../../live/relation-labels.js";
@@ -9,7 +8,7 @@ import { fileShown } from "../../live/file-values.js";
 import { displayValue } from "../../live/display-value.js";
 import { useShownWidget } from "../field-types/shown-widget.js";
 import { WidgetPart } from "../field-types/widget-part.js";
-import { toneFor } from "../../live/columns-from-model.js";
+import { ValueBadge } from "../value-badge.js";
 import { jsx } from "react/jsx-runtime";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 //#region src/app/pages/field-value.tsx
@@ -59,8 +58,9 @@ const BuiltInValue = ({ model, field, value, format, relationLabel }) => {
 		children: file.name
 	});
 	const text = displayValue(field, value, hints);
-	if (field.type === "enum" || hints.format === "badge") return /* @__PURE__ */ jsx(Badge, {
-		tone: toneFor(String(value)),
+	if (field.type === "enum" || hints.format === "badge") return /* @__PURE__ */ jsx(ValueBadge, {
+		value,
+		hints,
 		children: text
 	});
 	return /* @__PURE__ */ jsx("span", {

package/dist/app/record-page.js

@@ -1,4 +1,3 @@
-import { Badge } from "../primitives/badge.js";
 import { useAuth } from "../auth/auth-provider.js";
 import { formatRelativeTime } from "../format/date.js";
 import { Button } from "../primitives/button.js";
@@ -24,6 +23,7 @@ import { RecordHeader } from "../record-view/record-header.js";
 import { toneFor } from "../live/columns-from-model.js";
 import { useDeleteFlow } from "./delete/use-delete-flow.js";
 import { useRestore } from "./delete/use-restore.js";
+import { ValueBadge } from "./value-badge.js";
 import { auditField } from "../live/audit-fields.js";
 import { CustomSection } from "./custom-section.js";
 import { RecordActions } from "./pages/record-actions.js";
@@ -176,8 +176,9 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 			const field = model.fields[name];
 			if (!field || !visible(name)) return [];
 			const text = displayValue(field, stored.record[name], hint(name));
-			const builtIn = field.type === "enum" ? /* @__PURE__ */ jsx(Badge, {
-				tone: toneFor(String(stored.record[name])),
+			const builtIn = field.type === "enum" ? /* @__PURE__ */ jsx(ValueBadge, {
+				value: stored.record[name],
+				hints: hint(name),
 				children: text
 			}) : /* @__PURE__ */ jsx("strong", { children: text });
 			const shown = shownWidget(fieldTypes, field, hint(name));

package/dist/app/value-badge.js

@@ -0,0 +1,14 @@
+import { Badge } from "../primitives/badge.js";
+import { valueColor } from "../live/value-color.js";
+import { toneFor } from "../live/columns-from-model.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/value-badge.tsx
+/** A stored value as a badge: filled with the colour the view gives it and in its badge shape, else in its tone. */
+const ValueBadge = ({ value, hints, children }) => /* @__PURE__ */ jsx(Badge, {
+	tone: toneFor(String(value)),
+	color: valueColor(hints?.valueColors, value),
+	shape: hints?.badgeShape,
+	children
+});
+//#endregion
+export { ValueBadge };

package/dist/data-grid/cells.js

@@ -6,6 +6,7 @@ import { formatInt, formatPercent, formatSigned } from "../format/number.js";
 import { formatDate, formatDateTime } from "../format/date.js";
 import { fileShown, isPreviewable } from "../live/file-values.js";
 import { userById } from "../mocks/users.js";
+import { valueColor } from "../live/value-color.js";
 import { Check, Paperclip } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { enumLabel } from "@protobase/schema";
@@ -26,9 +27,9 @@ const renderCell = (spec, value) => {
 			className: "truncate font-mono text-xs text-muted-foreground",
 			children: String(value)
 		});
-		case "money": return /* @__PURE__ */ jsx("span", {
+		case "money": return /* @__PURE__ */ jsxs("span", {
 			className: "tabular-nums",
-			children: formatMoney(Number(value), spec.currency)
+			children: [formatMoney(Number(value), spec.currency), spec.suffix]
 		});
 		case "date": return /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums text-muted-foreground",
@@ -38,13 +39,13 @@ const renderCell = (spec, value) => {
 			className: "tabular-nums text-muted-foreground",
 			children: formatDateTime(Number(value))
 		});
-		case "number": return /* @__PURE__ */ jsx("span", {
+		case "number": return /* @__PURE__ */ jsxs("span", {
 			className: "tabular-nums",
-			children: formatInt(Number(value))
+			children: [formatInt(Number(value)), spec.suffix]
 		});
-		case "signed": return /* @__PURE__ */ jsx("span", {
+		case "signed": return /* @__PURE__ */ jsxs("span", {
 			className: cn("tabular-nums", Number(value) < 0 ? "text-danger-text" : "text-success-text"),
-			children: formatSigned(Number(value))
+			children: [formatSigned(Number(value)), spec.suffix]
 		});
 		case "percent": return Number(value) === 0 ? muted("—") : /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums",
@@ -52,6 +53,8 @@ const renderCell = (spec, value) => {
 		});
 		case "status": return /* @__PURE__ */ jsx(Badge, {
 			tone: spec.tones?.[String(value)] ?? "neutral",
+			color: valueColor(spec.colors, value),
+			shape: spec.shape,
 			children: enumLabel(String(value), spec.labels)
 		});
 		case "relation": return /* @__PURE__ */ jsx("span", {

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

@@ -0,0 +1,12 @@
+import { matchesSearch } from "./filter-state.js";
+//#region src/filter-panel/combobox-options.ts
+/** The options a combobox lists for its search text: as given when the group searches itself, else those whose name matches. */
+const comboboxOptions = (group, query) => group.onSearch ? group.options : group.options.filter((option) => matchesSearch(option.label, query));
+/** The option the arrow keys move to, wrapping around at either end; -1 when there are none. */
+const moveActive = (active, count, key) => {
+	if (count === 0) return -1;
+	if (key === "ArrowDown") return active < 0 ? 0 : (active + 1) % count;
+	return active < 0 ? count - 1 : (active - 1 + count) % count;
+};
+//#endregion
+export { comboboxOptions, moveActive };

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

@@ -0,0 +1,131 @@
+import { cn } from "../lib/cn.js";
+import { formatInt } from "../format/number.js";
+import { facetLabel } from "./filter-state.js";
+import { comboboxOptions, moveActive } from "./combobox-options.js";
+import { useEffect, useId, useRef, useState } from "react";
+import { Check, Search, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/filter-panel/facet-combobox.tsx
+/** Chooses several values of a facet: the choices sit in the box as removable tokens, typing searches the options. */
+const FacetCombobox = ({ config, selected, onToggle, inline = false }) => {
+	const id = useId();
+	const input = useRef(null);
+	const [query, setQuery] = useState("");
+	const [focused, setFocused] = useState(false);
+	const [active, setActive] = useState(-1);
+	const open = inline || focused;
+	const options = comboboxOptions(config, query);
+	const onSearch = useRef(config.onSearch);
+	onSearch.current = config.onSearch;
+	useEffect(() => () => onSearch.current?.(""), []);
+	const search = (text) => {
+		setQuery(text);
+		setActive(-1);
+		config.onSearch?.(text);
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			setActive(moveActive(active, options.length, event.key));
+			return;
+		}
+		if (event.key === "Enter" && options[active]) {
+			event.preventDefault();
+			onToggle(options[active].value);
+			return;
+		}
+		if (event.key === "Backspace" && query === "" && selected.length > 0) {
+			onToggle(selected[selected.length - 1]);
+			return;
+		}
+		if (event.key === "Escape" && query !== "") {
+			event.stopPropagation();
+			search("");
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-h-8 cursor-text flex-wrap items-center gap-1 rounded-md border border-border-strong bg-background px-2 py-1 shadow-sm focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20",
+			onClick: () => input.current?.focus(),
+			children: [
+				/* @__PURE__ */ jsx(Search, { className: "size-3.5 shrink-0 text-muted-foreground" }),
+				selected.map((value) => /* @__PURE__ */ jsxs("span", {
+					className: "inline-flex h-5 max-w-full items-center gap-0.5 rounded bg-primary-soft pl-1.5 pr-0.5 text-xs font-medium text-primary-text",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: facetLabel(config, value)
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": `Remove ${facetLabel(config, value)}`,
+						className: "rounded p-0.5 hover:bg-primary-border/60",
+						onMouseDown: (event) => event.preventDefault(),
+						onClick: () => onToggle(value),
+						children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+					})]
+				}, value)),
+				/* @__PURE__ */ jsx("input", {
+					ref: input,
+					autoFocus: inline,
+					role: "combobox",
+					"aria-label": config.label,
+					"aria-expanded": open,
+					"aria-controls": `${id}-options`,
+					"aria-autocomplete": "list",
+					"aria-activedescendant": options[active] ? `${id}-${active}` : void 0,
+					placeholder: selected.length > 0 ? "" : `Search ${config.label.toLowerCase()}`,
+					className: "h-6 min-w-16 flex-1 bg-transparent text-[13px] text-foreground outline-none placeholder:text-faint-foreground",
+					value: query,
+					onChange: (event) => search(event.target.value),
+					onKeyDown,
+					onFocus: () => setFocused(true),
+					onBlur: () => {
+						setFocused(false);
+						setActive(-1);
+						if (!inline && query !== "") search("");
+					}
+				})
+			]
+		}), open && /* @__PURE__ */ jsxs("ul", {
+			id: `${id}-options`,
+			role: "listbox",
+			"aria-label": config.label,
+			"aria-multiselectable": true,
+			className: cn("flex max-h-60 flex-col gap-px overflow-y-auto", !inline && "rounded-md border bg-background p-1 shadow-sm"),
+			children: [options.map((option, index) => {
+				const chosen = selected.includes(option.value);
+				return /* @__PURE__ */ jsxs("li", {
+					id: `${id}-${index}`,
+					role: "option",
+					"aria-selected": chosen,
+					tabIndex: -1,
+					className: cn("flex cursor-pointer items-center gap-2 rounded px-1.5 py-1 hover:bg-muted", index === active && "bg-muted"),
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => onToggle(option.value),
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: cn("inline-flex size-4 shrink-0 items-center justify-center rounded border", chosen ? "border-primary bg-primary text-primary-foreground" : "border-border-strong bg-background"),
+							children: chosen && /* @__PURE__ */ jsx(Check, {
+								className: "size-3",
+								strokeWidth: 3
+							})
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "flex-1 truncate",
+							children: option.label
+						}),
+						option.count !== void 0 && /* @__PURE__ */ jsx("span", {
+							className: "text-xs tabular-nums text-faint-foreground",
+							children: formatInt(option.count)
+						})
+					]
+				}, option.value);
+			}), options.length === 0 && /* @__PURE__ */ jsx("li", {
+				className: "px-1.5 py-1 text-xs text-faint-foreground",
+				children: "No matches"
+			})]
+		})]
+	});
+};
+//#endregion
+export { FacetCombobox };

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

@@ -31,7 +31,7 @@ const FacetGroup = ({ config, selected, onToggle }) => {
 						className: "flex-1 truncate",
 						children: option.label
 					}),
-					/* @__PURE__ */ jsx("span", {
+					option.count !== void 0 && /* @__PURE__ */ jsx("span", {
 						className: "text-xs tabular-nums text-faint-foreground",
 						children: formatInt(option.count)
 					})

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

@@ -1,11 +1,16 @@
 import { cn } from "../lib/cn.js";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { ChevronDown } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/filter-panel/filter-menu.tsx
 const FilterMenu = ({ label, activeCount, width = 240, defaultOpen = false, children }) => {
 	const [open, setOpen] = useState(defaultOpen);
+	const [alignEnd, setAlignEnd] = useState(false);
 	const root = useRef(null);
+	useLayoutEffect(() => {
+		if (!open || !root.current) return;
+		setAlignEnd(root.current.getBoundingClientRect().left + width > document.documentElement.clientWidth);
+	}, [open, width]);
 	useEffect(() => {
 		if (!open) return;
 		const close = (event) => {
@@ -31,7 +36,7 @@ const FilterMenu = ({ label, activeCount, width = 240, defaultOpen = false, chil
 				/* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 text-muted-foreground" })
 			]
 		}), open && /* @__PURE__ */ jsx("div", {
-			className: "absolute left-0 top-full z-30 mt-1.5 rounded-lg border bg-background p-3 shadow-pop",
+			className: cn("absolute top-full z-30 mt-1.5 rounded-lg border bg-background p-3 shadow-pop", alignEnd ? "right-0" : "left-0"),
 			style: { width },
 			children
 		})]

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

@@ -1,6 +1,7 @@
 import { ActiveFilterChips } from "./active-filter-chips.js";
 import { DatePresets } from "./date-presets.js";
-import { activeChips, emptyFilterState, removeChip, toggleFacetValue, toggleFlag } from "./filter-state.js";
+import { activeChips, emptyFilterState, removeChip, setRange, toggleFacetValue, toggleFlag } from "./filter-state.js";
+import { FacetCombobox } from "./facet-combobox.js";
 import { FacetGroup } from "./facet-group.js";
 import { FilterMenu } from "./filter-menu.js";
 import { FilterSection } from "./filter-section.js";
@@ -20,18 +21,25 @@ const FilterPanel = ({ config, layout, value, defaultValue, onChange, lockedLabe
 		onRemove: (key) => setState(removeChip(state, key)),
 		onClear: () => setState(emptyFilterState)
 	});
-	const facetView = (group) => /* @__PURE__ */ jsx(FacetGroup, {
-		config: group,
-		selected: state.facets[group.id] ?? [],
-		onToggle: (option) => setState(toggleFacetValue(state, group.id, option))
-	});
-	const rangeView = config.range && /* @__PURE__ */ jsx(RangeFilter, {
-		config: config.range,
-		value: state.range,
-		onChange: (range) => setState({
-			...state,
-			range
-		})
+	const facetView = (group, inline = false) => {
+		const selected = state.facets[group.id] ?? [];
+		const onToggle = (option) => setState(toggleFacetValue(state, group.id, option));
+		return group.combobox ? /* @__PURE__ */ jsx(FacetCombobox, {
+			config: group,
+			selected,
+			onToggle,
+			inline
+		}) : /* @__PURE__ */ jsx(FacetGroup, {
+			config: group,
+			selected,
+			onToggle
+		});
+	};
+	const ranges = config.ranges ?? [];
+	const rangeView = (range) => /* @__PURE__ */ jsx(RangeFilter, {
+		config: range,
+		value: state.ranges?.[range.id],
+		onChange: (span) => setState(setRange(state, range.id, span))
 	});
 	const dateView = config.datePresets && /* @__PURE__ */ jsx(DatePresets, {
 		value: state.date,
@@ -64,10 +72,10 @@ const FilterPanel = ({ config, layout, value, defaultValue, onChange, lockedLabe
 				title: group.label,
 				children: facetView(group)
 			}, group.id)),
-			config.range && /* @__PURE__ */ jsx(FilterSection, {
-				title: config.range.label,
-				children: rangeView
-			}),
+			ranges.map((range) => /* @__PURE__ */ jsx(FilterSection, {
+				title: range.label,
+				children: rangeView(range)
+			}, range.id)),
 			dateView && /* @__PURE__ */ jsx(FilterSection, {
 				title: "Date",
 				children: dateView
@@ -82,16 +90,17 @@ const FilterPanel = ({ config, layout, value, defaultValue, onChange, lockedLabe
 		...config.facets.map((group) => /* @__PURE__ */ jsx(FilterMenu, {
 			label: group.label,
 			activeCount: (state.facets[group.id] ?? []).length,
+			width: group.combobox ? 280 : void 0,
 			defaultOpen: defaultOpenMenu === group.id,
-			children: facetView(group)
+			children: facetView(group, true)
 		}, group.id)),
-		...config.range ? [/* @__PURE__ */ jsx(FilterMenu, {
-			label: config.range.label,
-			activeCount: state.range ? 1 : 0,
+		...ranges.map((range) => /* @__PURE__ */ jsx(FilterMenu, {
+			label: range.label,
+			activeCount: state.ranges?.[range.id] ? 1 : 0,
 			width: 280,
-			defaultOpen: defaultOpenMenu === config.range.id,
-			children: rangeView
-		}, "range")] : [],
+			defaultOpen: defaultOpenMenu === range.id,
+			children: rangeView(range)
+		}, `range:${range.id}`)),
 		...dateView ? [/* @__PURE__ */ jsx(Fragment, { children: dateView }, "date")] : []
 	];
 	const toggles = (config.toggles ?? []).map((toggle) => /* @__PURE__ */ jsx("div", {

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

@@ -19,16 +19,31 @@ const toggleFlag = (state, id) => ({
 	...state,
 	toggles: state.toggles.includes(id) ? state.toggles.filter((entry) => entry !== id) : [...state.toggles, id]
 });
+/** Sets or, with `undefined`, clears the span of one range. */
+const setRange = (state, id, value) => {
+	const { [id]: _, ...others } = state.ranges ?? {};
+	return {
+		...state,
+		ranges: value ? {
+			...others,
+			[id]: value
+		} : others
+	};
+};
+/** A facet value's name: its option's label, else a name the group knows for it, else the value itself. */
+const facetLabel = (group, value) => group.options.find((option) => option.value === value)?.label ?? group.labels?.[value] ?? value;
 const activeChips = (config, state) => {
 	const facetChips = config.facets.flatMap((group) => (state.facets[group.id] ?? []).map((value) => ({
 		key: `facet:${group.id}:${value}`,
-		label: `${group.label}: ${group.options.find((option) => option.value === value)?.label ?? value}`
+		label: `${group.label}: ${facetLabel(group, value)}`
 	})));
-	const range = config.range;
-	const rangeChips = range && state.range ? [{
-		key: "range",
-		label: `${range.label}: ${range.format(state.range[0])} – ${range.format(state.range[1])}`
-	}] : [];
+	const rangeChips = (config.ranges ?? []).flatMap((range) => {
+		const span = state.ranges?.[range.id];
+		return span ? [{
+			key: `range:${range.id}`,
+			label: `${range.label}: ${range.format(span[0])} – ${range.format(span[1])}`
+		}] : [];
+	});
 	const dateChips = state.date ? [{
 		key: "date",
 		label: datePresetLabels[state.date] ?? state.date
@@ -45,19 +60,16 @@ const activeChips = (config, state) => {
 	];
 };
 const removeChip = (state, key) => {
-	if (key === "range") return {
-		...state,
-		range: void 0
-	};
 	if (key === "date") return {
 		...state,
 		date: void 0
 	};
 	const [kind, group, value] = key.split(":");
+	if (kind === "range") return setRange(state, group, void 0);
 	if (kind === "toggle") return toggleFlag(state, group);
 	if (kind === "facet") return toggleFacetValue(state, group, value);
 	throw new Error(`Unknown filter chip key: ${key}`);
 };
 const matchesSearch = (label, query) => label.toLowerCase().includes(query.trim().toLowerCase());
 //#endregion
-export { activeChips, emptyFilterState, matchesSearch, removeChip, toggleFacetValue, toggleFlag };
+export { activeChips, emptyFilterState, facetLabel, matchesSearch, removeChip, setRange, toggleFacetValue, toggleFlag };

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

@@ -13,14 +13,14 @@ const RangeFilter = ({ config, value, onChange }) => {
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "px-[7px]",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "flex h-12 items-end gap-0.5",
+				children: [histogram.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "mb-1 flex h-12 items-end gap-0.5",
 					children: histogram.map((count, index) => /* @__PURE__ */ jsx("span", {
 						className: cn("flex-1 rounded-t-sm", barInRange(index, histogram.length, min, max, selected) ? "bg-primary/70" : "bg-border"),
 						style: { height: `${Math.max(6, count / peak * 100)}%` }
 					}, index))
 				}), /* @__PURE__ */ jsxs("div", {
-					className: "relative mt-1 h-4",
+					className: "relative h-4",
 					children: [/* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-border" }), /* @__PURE__ */ jsx("span", {
 						className: "absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-primary",
 						style: {

package/dist/index.js

@@ -19,8 +19,8 @@ import { useAssistant } from "./assistant-dock/use-assistant.js";
 import { useAssistantClient } from "./assistant-dock/use-assistant-client.js";
 import { useMeta } from "./data/use-meta.js";
 import { AppLink, useAppAddress } from "./app/use-app-address.js";
-import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
 import { useListDisplay } from "./app/displays/display-context.js";
+import { useFacets, useHistogram, useSeries } from "./data/use-aggregates.js";
 import { useLayoutRecord } from "./app/pages/record-scope.js";
 import { uiFromModule } from "./app/pages/ui-from-module.js";
 import { mergeUi } from "./app/pages/merge-ui.js";