@protobase/ui 0.12.11 → 0.12.13

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/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/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,
@@ -60,14 +68,15 @@ 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)
 			}, 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 +91,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";