@protobase/ui 0.0.0-stage → 0.1.1

package/dist/data-grid/use-grid-scroll.js

@@ -0,0 +1,80 @@
+import { clampTop, gridGeometry, scrollFromTop, topFromScroll } from "./geometry.js";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+//#region src/data-grid/use-grid-scroll.ts
+/**
+* Owns the scroll position of a grid whose true height may exceed what browsers can scroll.
+* The native scroller is a proxy: its position is mapped onto a virtual pixel offset `top`.
+*/
+const useGridScroll = (total, rowHeight, initialIndex) => {
+	const ref = useRef(null);
+	const [viewport, setViewport] = useState(0);
+	const [top, setTop] = useState(initialIndex * rowHeight);
+	const geometry = useMemo(() => gridGeometry(total, rowHeight, viewport), [
+		total,
+		rowHeight,
+		viewport
+	]);
+	const latest = useRef({
+		geometry,
+		top
+	});
+	latest.current = {
+		geometry,
+		top
+	};
+	const ignoreScrollUntil = useRef(0);
+	const positioned = useRef(false);
+	const syncNative = useCallback((nextTop) => {
+		const element = ref.current;
+		if (!element) return;
+		element.scrollTop = scrollFromTop(latest.current.geometry, nextTop);
+		ignoreScrollUntil.current = performance.now() + 150;
+	}, []);
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const observer = new ResizeObserver(() => setViewport(element.clientHeight));
+		observer.observe(element);
+		setViewport(element.clientHeight);
+		return () => observer.disconnect();
+	}, []);
+	useLayoutEffect(() => {
+		if (viewport === 0 || positioned.current) return;
+		positioned.current = true;
+		const next = clampTop(geometry, top);
+		setTop(next);
+		syncNative(next);
+	}, [
+		viewport,
+		geometry,
+		top,
+		syncNative
+	]);
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const onWheel = (event) => {
+			const { geometry: current, top: currentTop } = latest.current;
+			if (!current.scaled || Math.abs(event.deltaX) > Math.abs(event.deltaY)) return;
+			event.preventDefault();
+			const next = clampTop(current, currentTop + event.deltaY);
+			setTop(next);
+			syncNative(next);
+		};
+		element.addEventListener("wheel", onWheel, { passive: false });
+		return () => element.removeEventListener("wheel", onWheel);
+	}, [syncNative]);
+	return {
+		ref,
+		onScroll: useCallback(() => {
+			const element = ref.current;
+			if (!element || performance.now() < ignoreScrollUntil.current) return;
+			setTop(topFromScroll(latest.current.geometry, element.scrollTop));
+		}, []),
+		viewport,
+		top,
+		geometry
+	};
+};
+//#endregion
+export { useGridScroll };

package/dist/data-grid/use-horizontal-scroll.js

@@ -0,0 +1,38 @@
+import { useCallback, useRef, useState } from "react";
+//#region src/data-grid/use-horizontal-scroll.ts
+/** Tracks whether the grid is scrolled sideways (`scrolled`) and whether more lies to the right (`more`). */
+const useHorizontalScroll = () => {
+	const ref = useRef(null);
+	const observer = useRef(null);
+	const [edges, setEdges] = useState({
+		scrolled: false,
+		more: false
+	});
+	const measure = useCallback(() => {
+		const element = ref.current;
+		if (!element) return;
+		const next = {
+			scrolled: element.scrollLeft > 1,
+			more: element.scrollLeft + element.clientWidth < element.scrollWidth - 1
+		};
+		setEdges((current) => current.scrolled === next.scrolled && current.more === next.more ? current : next);
+	}, []);
+	return {
+		ref,
+		attach: useCallback((element) => {
+			observer.current?.disconnect();
+			observer.current = null;
+			ref.current = element;
+			if (!element) return;
+			const next = new ResizeObserver(measure);
+			next.observe(element);
+			for (const child of Array.from(element.children)) next.observe(child);
+			observer.current = next;
+			measure();
+		}, [measure]),
+		onScroll: measure,
+		...edges
+	};
+};
+//#endregion
+export { useHorizontalScroll };

package/dist/data-grid/use-paged-rows.js

@@ -0,0 +1,50 @@
+import { createPageCache, pagesForRange } from "./page-cache.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
+/**
+* Serves rows by absolute index. Mock sources compute rows (after `latencyMs`, or at once when 0);
+* live sources load pages through `loadRows`. Unloaded rows read as undefined, so fast scrolling shows skeletons.
+*/
+const usePagedRows = ({ total, rowAt, loadRows, latencyMs }, start, end) => {
+	const cache = useMemo(() => createPageCache(40, 60), [rowAt, loadRows]);
+	const [version, setVersion] = useState(0);
+	const firstPage = Math.floor(start / 40);
+	const lastPage = Math.floor(end / 40);
+	const synchronous = !loadRows && latencyMs === 0;
+	useEffect(() => {
+		if (synchronous) return;
+		const pages = pagesForRange(firstPage * 40, lastPage * 40, 40).filter((page) => !cache.hasPage(page));
+		const length = (page) => Math.max(0, Math.min(40, total - page * 40));
+		const store = (page, rows) => {
+			cache.setPage(page, rows);
+			setVersion((current) => current + 1);
+		};
+		if (loadRows) {
+			let cancelled = false;
+			for (const page of pages) loadRows(page * 40, length(page)).then((rows) => {
+				if (!cancelled) store(page, rows);
+			});
+			return () => {
+				cancelled = true;
+			};
+		}
+		const timers = pages.map((page) => setTimeout(() => store(page, Array.from({ length: length(page) }, (_, offset) => rowAt(page * 40 + offset))), latencyMs));
+		return () => timers.forEach(clearTimeout);
+	}, [
+		cache,
+		firstPage,
+		lastPage,
+		latencyMs,
+		total,
+		rowAt,
+		loadRows,
+		synchronous
+	]);
+	return useCallback((index) => synchronous ? rowAt(index) : cache.get(index), [
+		cache,
+		synchronous,
+		rowAt,
+		version
+	]);
+};
+//#endregion
+export { usePagedRows };

package/dist/data-grid/use-pinned-columns.js

@@ -0,0 +1,16 @@
+import { readPinned, writePinned } from "./pinned-storage.js";
+import { useCallback, useState } from "react";
+//#region src/data-grid/use-pinned-columns.ts
+/**
+* The ids of the columns pinned to the left, in pin order. With a `storageKey` the choice is kept in local storage
+* (per user and resource); `initial` applies until the user has chosen.
+*/
+const usePinnedColumns = (storageKey, initial = []) => {
+	const [pinned, setPinned] = useState(() => (storageKey ? readPinned(localStorage, storageKey) : void 0) ?? initial);
+	return [pinned, useCallback((next) => {
+		setPinned(next);
+		if (storageKey) writePinned(localStorage, storageKey, next);
+	}, [storageKey])];
+};
+//#endregion
+export { usePinnedColumns };

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

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Lock, X } from "lucide-react";
+//#region src/filter-panel/active-filter-chips.tsx
+const chipClass = "inline-flex h-6 items-center gap-1 rounded-full border border-primary-border bg-primary-soft pl-2.5 pr-1.5 text-xs font-medium text-primary-text";
+const ActiveFilterChips = ({ chips, lockedLabels = [], onRemove, onClear, scroll }) => {
+	if (chips.length === 0 && lockedLabels.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: scroll ? "flex flex-nowrap items-center gap-1.5 overflow-x-auto pb-1 [&>*]:shrink-0" : "flex flex-wrap items-center gap-1.5",
+		children: [
+			lockedLabels.map((label) => /* @__PURE__ */ jsxs("span", {
+				className: "inline-flex h-6 items-center gap-1.5 rounded-full border border-border-strong bg-muted px-2.5 text-xs font-medium text-foreground",
+				children: [/* @__PURE__ */ jsx(Lock, { className: "size-3 text-muted-foreground" }), label]
+			}, label)),
+			chips.map((chip) => /* @__PURE__ */ jsxs("span", {
+				className: chipClass,
+				children: [chip.label, /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": `Remove ${chip.label}`,
+					onClick: () => onRemove(chip.key),
+					className: "rounded-full p-0.5 hover:bg-primary-border/60",
+					children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+				})]
+			}, chip.key)),
+			chips.length > 0 && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onClear,
+				className: "ml-1 text-xs font-medium text-muted-foreground hover:text-foreground",
+				children: "Clear all"
+			})
+		]
+	});
+};
+//#endregion
+export { ActiveFilterChips };

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

@@ -0,0 +1,20 @@
+import { cn } from "../lib/cn.js";
+import { datePresetLabels, defaultDatePresets } from "./filter-config.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/filter-panel/date-presets.tsx
+const DatePresets = ({ value, presets = defaultDatePresets, onChange }) => /* @__PURE__ */ jsx("div", {
+	className: "flex flex-wrap gap-1.5",
+	children: presets.map((id) => {
+		const label = datePresetLabels[id];
+		return /* @__PURE__ */ jsx("button", {
+			type: "button",
+			disabled: !label,
+			title: label ? void 0 : `The server offers the preset "${id}", which this UI does not know`,
+			onClick: () => onChange(value === id ? void 0 : id),
+			className: cn("h-7 rounded-md border px-2.5 text-xs font-medium transition-colors", !label && "border-dashed text-danger-text", value === id ? "border-primary-border bg-primary-soft text-primary-text" : "border-border-strong bg-background text-muted-foreground hover:bg-muted"),
+			children: label ?? `${id} (unsupported)`
+		}, id);
+	})
+});
+//#endregion
+export { DatePresets };

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

@@ -0,0 +1,48 @@
+import { Input } from "../primitives/input.js";
+import { formatInt } from "../format/number.js";
+import { Checkbox } from "../primitives/checkbox.js";
+import { matchesSearch } from "./filter-state.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Search } from "lucide-react";
+//#region src/filter-panel/facet-group.tsx
+const FacetGroup = ({ config, selected, onToggle }) => {
+	const [query, setQuery] = useState("");
+	const options = config.options.filter((option) => matchesSearch(option.label, query));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1",
+		children: [
+			config.searchable && /* @__PURE__ */ jsx(Input, {
+				wrapperClassName: "mb-1 h-7",
+				leading: /* @__PURE__ */ jsx(Search, { className: "size-3.5" }),
+				placeholder: `Search ${config.label.toLowerCase()}`,
+				value: query,
+				onChange: (event) => setQuery(event.target.value)
+			}),
+			options.map((option) => /* @__PURE__ */ jsxs("label", {
+				className: "flex cursor-pointer items-center gap-2 rounded px-1 py-1 hover:bg-muted",
+				children: [
+					/* @__PURE__ */ jsx(Checkbox, {
+						checked: selected.includes(option.value),
+						onChange: () => onToggle(option.value),
+						label: option.label
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "flex-1 truncate",
+						children: option.label
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-xs tabular-nums text-faint-foreground",
+						children: formatInt(option.count)
+					})
+				]
+			}, option.value)),
+			options.length === 0 && /* @__PURE__ */ jsx("span", {
+				className: "px-1 py-1 text-xs text-faint-foreground",
+				children: "No matches"
+			})
+		]
+	});
+};
+//#endregion
+export { FacetGroup };

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

@@ -0,0 +1,18 @@
+//#region src/filter-panel/filter-config.ts
+const defaultDatePresets = [
+	"7d",
+	"30d",
+	"year"
+];
+const datePresetLabels = {
+	today: "Today",
+	yesterday: "Yesterday",
+	"7d": "Last 7 days",
+	"30d": "Last 30 days",
+	"90d": "Last 90 days",
+	month: "This month",
+	quarter: "This quarter",
+	year: "This year"
+};
+//#endregion
+export { datePresetLabels, defaultDatePresets };

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

@@ -0,0 +1,41 @@
+import { cn } from "../lib/cn.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+//#region src/filter-panel/filter-menu.tsx
+const FilterMenu = ({ label, activeCount, width = 240, defaultOpen = false, children }) => {
+	const [open, setOpen] = useState(defaultOpen);
+	const root = useRef(null);
+	useEffect(() => {
+		if (!open) return;
+		const close = (event) => {
+			if (event.target instanceof Node && !root.current?.contains(event.target)) setOpen(false);
+		};
+		document.addEventListener("pointerdown", close);
+		return () => document.removeEventListener("pointerdown", close);
+	}, [open]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: root,
+		className: "relative",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": open,
+			onClick: () => setOpen(!open),
+			className: cn("inline-flex h-8 items-center gap-1.5 rounded-md border bg-background px-2.5 text-[13px] font-medium shadow-sm transition-colors hover:bg-muted", activeCount > 0 ? "border-primary-border text-primary-text" : "border-border-strong text-foreground"),
+			children: [
+				label,
+				activeCount > 0 && /* @__PURE__ */ jsx("span", {
+					className: "rounded-full bg-primary px-1.5 text-[11px] leading-4 text-primary-foreground",
+					children: activeCount
+				}),
+				/* @__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",
+			style: { width },
+			children
+		})]
+	});
+};
+//#endregion
+export { FilterMenu };

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

@@ -0,0 +1,112 @@
+import { ActiveFilterChips } from "./active-filter-chips.js";
+import { DatePresets } from "./date-presets.js";
+import { activeChips, emptyFilterState, removeChip, toggleFacetValue, toggleFlag } from "./filter-state.js";
+import { FacetGroup } from "./facet-group.js";
+import { FilterMenu } from "./filter-menu.js";
+import { FilterSection } from "./filter-section.js";
+import { RangeFilter } from "./range-filter.js";
+import { ToggleRow } from "./toggle-row.js";
+import { useFilterState } from "./use-filter-state.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/filter-panel/filter-panel.tsx
+const FilterPanel = ({ config, layout, value, defaultValue, onChange, lockedLabels, defaultOpenMenu, fullWidth }) => {
+	const [state, setState] = useFilterState(value, defaultValue, onChange);
+	const chips = activeChips(config, state);
+	const chipsView = /* @__PURE__ */ jsx(ActiveFilterChips, {
+		chips,
+		lockedLabels,
+		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 dateView = config.datePresets && /* @__PURE__ */ jsx(DatePresets, {
+		value: state.date,
+		presets: Array.isArray(config.datePresets) ? config.datePresets : void 0,
+		onChange: (date) => setState({
+			...state,
+			date
+		})
+	});
+	const toggleViews = (config.toggles ?? []).map((toggle) => /* @__PURE__ */ jsx(ToggleRow, {
+		label: toggle.label,
+		checked: state.toggles.includes(toggle.id),
+		onChange: () => setState(toggleFlag(state, toggle.id))
+	}, toggle.id));
+	if (layout === "panel") return /* @__PURE__ */ jsxs("aside", {
+		className: fullWidth ? "flex w-full flex-col gap-1" : "flex w-64 shrink-0 flex-col gap-1 overflow-y-auto rounded-lg border bg-background px-4 py-3",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-between pb-1",
+				children: /* @__PURE__ */ jsx("h2", {
+					className: "text-[13px] font-semibold",
+					children: "Filters"
+				})
+			}),
+			(chips.length > 0 || (lockedLabels?.length ?? 0) > 0) && /* @__PURE__ */ jsx("div", {
+				className: "border-b pb-3",
+				children: chipsView
+			}),
+			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
+			}),
+			dateView && /* @__PURE__ */ jsx(FilterSection, {
+				title: "Date",
+				children: dateView
+			}),
+			toggleViews.length > 0 && /* @__PURE__ */ jsx(FilterSection, {
+				title: "Show only",
+				children: toggleViews
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center gap-2",
+			children: [
+				config.facets.map((group) => /* @__PURE__ */ jsx(FilterMenu, {
+					label: group.label,
+					activeCount: (state.facets[group.id] ?? []).length,
+					defaultOpen: defaultOpenMenu === group.id,
+					children: facetView(group)
+				}, group.id)),
+				config.range && /* @__PURE__ */ jsx(FilterMenu, {
+					label: config.range.label,
+					activeCount: state.range ? 1 : 0,
+					width: 280,
+					defaultOpen: defaultOpenMenu === config.range.id,
+					children: rangeView
+				}),
+				dateView,
+				config.toggles && /* @__PURE__ */ jsx("span", { className: "mx-1 h-5 w-px bg-border" }),
+				config.toggles?.map((toggle) => /* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-2 text-[13px] text-muted-foreground",
+					children: /* @__PURE__ */ jsx(ToggleRow, {
+						label: toggle.label,
+						checked: state.toggles.includes(toggle.id),
+						onChange: () => setState(toggleFlag(state, toggle.id))
+					})
+				}, toggle.id))
+			]
+		}), chipsView]
+	});
+};
+//#endregion
+export { FilterPanel };

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

@@ -0,0 +1,11 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/filter-panel/filter-section.tsx
+const FilterSection = ({ title, children }) => /* @__PURE__ */ jsxs("section", {
+	className: "flex flex-col gap-2 border-b py-3 last:border-b-0",
+	children: [/* @__PURE__ */ jsx("h3", {
+		className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground",
+		children: title
+	}), children]
+});
+//#endregion
+export { FilterSection };

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

@@ -0,0 +1,63 @@
+import { datePresetLabels } from "./filter-config.js";
+//#region src/filter-panel/filter-state.ts
+const emptyFilterState = {
+	facets: {},
+	toggles: []
+};
+const toggleFacetValue = (state, group, value) => {
+	const current = state.facets[group] ?? [];
+	const next = current.includes(value) ? current.filter((entry) => entry !== value) : [...current, value];
+	return {
+		...state,
+		facets: {
+			...state.facets,
+			[group]: next
+		}
+	};
+};
+const toggleFlag = (state, id) => ({
+	...state,
+	toggles: state.toggles.includes(id) ? state.toggles.filter((entry) => entry !== id) : [...state.toggles, id]
+});
+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}`
+	})));
+	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 dateChips = state.date ? [{
+		key: "date",
+		label: datePresetLabels[state.date] ?? state.date
+	}] : [];
+	const toggleChips = state.toggles.map((id) => ({
+		key: `toggle:${id}`,
+		label: config.toggles?.find((toggle) => toggle.id === id)?.label ?? id
+	}));
+	return [
+		...facetChips,
+		...rangeChips,
+		...dateChips,
+		...toggleChips
+	];
+};
+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 === "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 };

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

@@ -0,0 +1,54 @@
+import { cn } from "../lib/cn.js";
+import { barInRange, fraction, moveThumb } from "./range-math.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./range-slider.css";
+//#region src/filter-panel/range-filter.tsx
+const RangeFilter = ({ config, value, onChange }) => {
+	const { min, max, step, histogram, format } = config;
+	const selected = value ?? [min, max];
+	const peak = Math.max(...histogram);
+	const commit = (next) => onChange(next[0] === min && next[1] === max ? void 0 : next);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "px-[7px]",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "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",
+					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: {
+							left: `${fraction(selected[0], min, max) * 100}%`,
+							right: `${100 - fraction(selected[1], min, max) * 100}%`
+						}
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "relative -mt-4 h-4",
+				children: [0, 1].map((thumb) => /* @__PURE__ */ jsx("input", {
+					type: "range",
+					className: "pb-range",
+					"aria-label": `${config.label} ${thumb === 0 ? "minimum" : "maximum"}`,
+					min,
+					max,
+					step,
+					value: selected[thumb],
+					onChange: (event) => commit(moveThumb(selected, thumb, Number(event.target.value)))
+				}, thumb))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-2 flex justify-between text-xs tabular-nums text-muted-foreground",
+				children: [/* @__PURE__ */ jsx("span", { children: format(selected[0]) }), /* @__PURE__ */ jsx("span", { children: format(selected[1]) })]
+			})
+		]
+	});
+};
+//#endregion
+export { RangeFilter };

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

@@ -0,0 +1,11 @@
+//#region src/filter-panel/range-math.ts
+/** Which histogram bars lie inside the selected range, for tinting. */
+const barInRange = (barIndex, bars, min, max, selected) => {
+	const barStart = min + (max - min) * barIndex / bars;
+	return min + (max - min) * (barIndex + 1) / bars > selected[0] && barStart < selected[1];
+};
+const fraction = (value, min, max) => max === min ? 0 : (value - min) / (max - min);
+/** Keeps the two thumbs ordered, moving the one being dragged. */
+const moveThumb = (range, thumb, value) => thumb === 0 ? [Math.min(value, range[1]), range[1]] : [range[0], Math.max(value, range[0])];
+//#endregion
+export { barInRange, fraction, moveThumb };

package/dist/filter-panel/range-slider.css

@@ -0,0 +1,32 @@
+.pb-range {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  appearance: none;
+  background: transparent;
+  pointer-events: none;
+}
+.pb-range::-webkit-slider-thumb {
+  appearance: none;
+  pointer-events: auto;
+  width: 14px;
+  height: 14px;
+  border-radius: 9999px;
+  background: var(--background);
+  border: 2px solid var(--primary);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
+  cursor: grab;
+}
+.pb-range::-moz-range-thumb {
+  pointer-events: auto;
+  width: 10px;
+  height: 10px;
+  border-radius: 9999px;
+  background: var(--background);
+  border: 2px solid var(--primary);
+  cursor: grab;
+}
+.pb-range::-webkit-slider-runnable-track { appearance: none; background: transparent; }
+.pb-range::-moz-range-track { background: transparent; }

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

@@ -0,0 +1,13 @@
+import { Switch } from "../primitives/switch.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/filter-panel/toggle-row.tsx
+const ToggleRow = ({ label, checked, onChange }) => /* @__PURE__ */ jsxs("label", {
+	className: "flex cursor-pointer items-center justify-between gap-3 py-1",
+	children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx(Switch, {
+		checked,
+		onChange,
+		label
+	})]
+});
+//#endregion
+export { ToggleRow };

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

@@ -0,0 +1,15 @@
+import { emptyFilterState } from "./filter-state.js";
+import { useState } from "react";
+//#region src/filter-panel/use-filter-state.ts
+/** Controlled when `value` is given, otherwise keeps its own state. */
+const useFilterState = (value, defaultValue, onChange) => {
+	const [local, setLocal] = useState(defaultValue ?? emptyFilterState);
+	const state = value ?? local;
+	const update = (next) => {
+		setLocal(next);
+		onChange?.(next);
+	};
+	return [state, update];
+};
+//#endregion
+export { useFilterState };