@protobase/ui 0.14.0 → 0.14.2

package/dist/data-grid/geometry.js

@@ -1,6 +1,7 @@
 //#region src/data-grid/geometry.ts
 /** Browsers cap element height (about 17M px in the strictest); stay well below it. */
 const maxContentHeight = 1e7;
+/** The list's height in the page, `contentHeight`: its true height, or the cap when the rows need more. */
 const gridGeometry = (total, rowHeight, viewportHeight) => {
 	const trueHeight = total * rowHeight;
 	const contentHeight = Math.min(trueHeight, maxContentHeight);
@@ -13,13 +14,32 @@ const gridGeometry = (total, rowHeight, viewportHeight) => {
 		maxScroll: Math.max(0, contentHeight - viewportHeight)
 	};
 };
-/** Maps the native scroll position onto the virtual (true) pixel offset. */
-const topFromScroll = (geometry, scrollTop) => geometry.maxScroll === 0 ? 0 : scrollTop / geometry.maxScroll * geometry.maxTop;
-const scrollFromTop = (geometry, top) => geometry.maxTop === 0 ? 0 : top / geometry.maxTop * geometry.maxScroll;
-const clampTop = (geometry, top) => Math.min(Math.max(0, top), geometry.maxTop);
+/**
+* The offset into the rows (the virtual offset) shown at `position`, how far the top of the view is into the list.
+* They are the same unless the list is capped: then the capped range maps onto all the rows, and a position before or
+* after it moves one to one.
+*/
+const topFromScroll = (geometry, position) => {
+	if (!geometry.scaled || position <= 0) return position;
+	if (position >= geometry.maxScroll) return geometry.maxTop + position - geometry.maxScroll;
+	return position / geometry.maxScroll * geometry.maxTop;
+};
+const scrollFromTop = (geometry, top) => {
+	if (!geometry.scaled || top <= 0) return top;
+	if (top >= geometry.maxTop) return geometry.maxScroll + top - geometry.maxTop;
+	return top / geometry.maxTop * geometry.maxScroll;
+};
+/**
+* Where row `index` is drawn in the list when the view at `position` shows the rows from `top`: its own place, or in a
+* capped list its place relative to the view, so that it scrolls with the page until the next draw.
+*/
+const rowOffset = (geometry, index, top, position) => {
+	const offset = index * geometry.rowHeight;
+	return geometry.scaled ? offset - top + position : offset;
+};
 /** The rows drawn for a scroll offset: those in a viewport of `height`, and `overscan` more on each side. */
 const rowsInView = (total, top, rowHeight, height, overscan) => {
-	const first = Math.max(0, Math.floor(top / rowHeight) - overscan);
+	const first = Math.min(total, Math.max(0, Math.floor(top / rowHeight) - overscan));
 	const last = Math.min(total - 1, Math.floor((top + height) / rowHeight) + overscan);
 	return {
 		first,
@@ -27,4 +47,4 @@ const rowsInView = (total, top, rowHeight, height, overscan) => {
 	};
 };
 //#endregion
-export { clampTop, gridGeometry, maxContentHeight, rowsInView, scrollFromTop, topFromScroll };
+export { gridGeometry, maxContentHeight, rowOffset, rowsInView, scrollFromTop, topFromScroll };

package/dist/data-grid/grid-footer.js

@@ -2,9 +2,10 @@ import { cn } from "../lib/cn.js";
 import { formatApproxRows, formatInt } from "../format/number.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/data-grid/grid-footer.tsx
-const GridFooter = ({ total, first, last, selectedCount, bulkActions = [] }) => /* @__PURE__ */ jsxs("div", {
-	className: "flex h-9 shrink-0 items-center justify-between border-t bg-surface px-3 text-xs text-muted-foreground",
-	children: [/* @__PURE__ */ jsxs("span", {
+/** How many rows match and, with rows selected, how many and what can be done with them. */
+const GridFooter = ({ total, selectedCount, bulkActions = [], className }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex h-9 shrink-0 items-center border-t bg-surface px-3 text-xs text-muted-foreground", className),
+	children: /* @__PURE__ */ jsxs("span", {
 		className: "flex items-center tabular-nums",
 		children: [
 			formatApproxRows(total),
@@ -19,15 +20,7 @@ const GridFooter = ({ total, first, last, selectedCount, bulkActions = [] }) =>
 				children: action.label
 			}, action.label))
 		]
-	}), /* @__PURE__ */ jsxs("span", {
-		className: "tabular-nums",
-		children: [
-			"Rows ",
-			formatInt(first),
-			" – ",
-			formatInt(last)
-		]
-	})]
+	})
 });
 //#endregion
 export { GridFooter };

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

@@ -0,0 +1,35 @@
+//#region src/data-grid/scroll-parent.ts
+/**
+* The element that scrolls `element` up and down: its nearest ancestor that scrolls vertically, or the page's
+* scrolling element when none does.
+*/
+const scrollParent = (element) => {
+	const page = document.scrollingElement ?? document.documentElement;
+	for (let parent = element.parentElement; parent && parent !== page && parent !== document.body; parent = parent.parentElement) if (/auto|scroll/.test(getComputedStyle(parent).overflowY)) return parent;
+	return page;
+};
+const isPage = (scroller) => scroller === (document.scrollingElement ?? document.documentElement);
+/** Where scroll events of `scroller` are sent: the window for the page. */
+const scrollEvents = (scroller) => isPage(scroller) ? window : scroller;
+const padding = (value) => Number.parseFloat(value) || 0;
+/**
+* The part of `scroller` content shows in, in viewport coordinates: its box less its scroll padding, which is where
+* sticky bars over it say they are.
+*/
+const visibleArea = (scroller) => {
+	const style = getComputedStyle(scroller);
+	const box = isPage(scroller) ? {
+		top: 0,
+		height: scroller.clientHeight
+	} : {
+		top: scroller.getBoundingClientRect().top + scroller.clientTop,
+		height: scroller.clientHeight
+	};
+	const top = padding(style.scrollPaddingTop);
+	return {
+		top: box.top + top,
+		height: Math.max(0, box.height - top - padding(style.scrollPaddingBottom))
+	};
+};
+//#endregion
+export { scrollEvents, scrollParent, visibleArea };

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

@@ -1,30 +1,135 @@
-import { rowsInView } from "./geometry.js";
-import { useGridScroll } from "./use-grid-scroll.js";
+import { gridGeometry, rowOffset, rowsInView, scrollFromTop, topFromScroll } from "./geometry.js";
+import { scrollEvents, scrollParent, visibleArea } from "./scroll-parent.js";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
 //#region src/data-grid/use-virtual-rows.ts
 const overscan = 6;
+const viewRows = (view, total, rowHeight) => {
+	const geometry = gridGeometry(total, rowHeight, view.height);
+	const top = topFromScroll(geometry, view.position);
+	return {
+		geometry,
+		top,
+		topIndex: Math.floor(Math.max(0, top) / rowHeight),
+		...rowsInView(total, top, rowHeight, view.height, overscan)
+	};
+};
 /**
-* Rows of a fixed height over a proxy scroller, so any number of rows scrolls at native speed: `ref` and `onScroll` go
-* on the scrolling element, and each drawn row sits at `offset` from the top of the viewport's rows, below `inset`.
+* Rows of a fixed height in a list as tall as all of them, scrolled natively by whatever scrolls it: the nearest
+* scrolling ancestor, or the page. Only the rows in view, and `overscan` more on each side, are drawn: `ref` goes on the
+* list's element, `geometry.contentHeight` tall, and each drawn row sits at `offset` from its top. Nothing listens for
+* wheel or touch: the list follows the scroll position, and draws again only when other rows come into view.
 * `first` and `last` are the indexes of the drawn rows, overscan included.
 */
-const useVirtualRows = ({ total, rowHeight, initialIndex, inset = 0, settle }) => {
-	const scroll = useGridScroll(total, rowHeight, initialIndex);
-	const { ref, onScroll, viewport, geometry, scrollTo } = scroll;
-	const top = settle ? settle(scroll.top) : scroll.top;
-	const { first, last } = rowsInView(total, top, rowHeight, Math.max(0, viewport - inset), overscan);
+const useVirtualRows = ({ total, rowHeight, initialIndex, inset = 0, settle, ready = true }) => {
+	const ref = useRef(null);
+	const scroller = useRef(null);
+	const [view, setView] = useState({
+		position: 0,
+		height: 0
+	});
+	const options = useRef({
+		total,
+		rowHeight,
+		initialIndex,
+		inset,
+		ready
+	});
+	options.current = {
+		total,
+		rowHeight,
+		initialIndex,
+		inset,
+		ready
+	};
+	const read = useCallback(() => {
+		const content = ref.current;
+		if (!content || !scroller.current) return void 0;
+		const area = visibleArea(scroller.current);
+		const hidden = options.current.inset;
+		return {
+			position: area.top + hidden - content.getBoundingClientRect().top,
+			height: Math.max(0, area.height - hidden)
+		};
+	}, []);
+	const shown = useRef(view);
+	shown.current = view;
+	const measure = useCallback(() => {
+		const next = read();
+		if (!next) return;
+		const current = shown.current;
+		const { total, rowHeight } = options.current;
+		const before = viewRows(current, total, rowHeight);
+		const after = viewRows(next, total, rowHeight);
+		const sameRows = !after.geometry.scaled && before.first === after.first && before.last === after.last && before.topIndex === after.topIndex;
+		if (current.height === next.height && (current.position === next.position || sameRows)) return;
+		shown.current = next;
+		setView(next);
+	}, [read]);
+	const start = useRef({
+		pending: true,
+		laidOut: false
+	});
+	const begin = useCallback(() => {
+		if (!start.current.pending || !start.current.laidOut || !options.current.ready) return;
+		const view = read();
+		const parent = scroller.current;
+		if (!view || !parent) return;
+		start.current.pending = false;
+		const { total, rowHeight, initialIndex } = options.current;
+		if (initialIndex > 0) parent.scrollTop += scrollFromTop(gridGeometry(total, rowHeight, view.height), initialIndex * rowHeight) - view.position;
+		else if (view.position > 0) parent.scrollTop = 0;
+	}, [read]);
+	useLayoutEffect(() => {
+		const content = ref.current;
+		if (!content) return;
+		const parent = scrollParent(content);
+		scroller.current = parent;
+		const events = scrollEvents(parent);
+		events.addEventListener("scroll", measure, { passive: true });
+		window.addEventListener("resize", measure, { passive: true });
+		const observer = new ResizeObserver(() => {
+			start.current.laidOut = true;
+			begin();
+			measure();
+		});
+		observer.observe(parent);
+		observer.observe(content);
+		measure();
+		return () => {
+			events.removeEventListener("scroll", measure);
+			window.removeEventListener("resize", measure);
+			observer.disconnect();
+			scroller.current = null;
+		};
+	}, [measure, begin]);
+	useLayoutEffect(() => {
+		begin();
+		measure();
+	});
+	/** Scrolls to a virtual offset, for a layout change that keeps a row in view. */
+	const scrollTo = useCallback((top) => {
+		const current = read();
+		if (!current || !scroller.current) return;
+		const geometry = gridGeometry(options.current.total, options.current.rowHeight, current.height);
+		scroller.current.scrollTop += scrollFromTop(geometry, top) - current.position;
+		measure();
+	}, [read, measure]);
+	const drawn = viewRows(view, total, rowHeight);
+	const top = settle ? settle(drawn.top) : drawn.top;
+	const { first, last } = settle ? rowsInView(total, top, rowHeight, view.height, overscan) : drawn;
+	const rows = Array.from({ length: last - first + 1 }, (_, offset) => ({
+		index: first + offset,
+		offset: rowOffset(drawn.geometry, first + offset, top, view.position)
+	}));
 	return {
 		ref,
-		onScroll,
-		viewport,
+		height: view.height,
 		top,
-		geometry,
-		scrollTo,
-		rows: Array.from({ length: last - first + 1 }, (_, offset) => ({
-			index: first + offset,
-			offset: (first + offset) * rowHeight - top
-		})),
+		geometry: drawn.geometry,
+		rows,
 		first,
-		last
+		last,
+		scrollTo
 	};
 };
 //#endregion

package/dist/index.d.ts

@@ -20,6 +20,8 @@ import { ListDisplayRow, RecordCardProps } from "./app/displays/list-displays.js
 import { ListDisplay, useListDisplay } from "./app/displays/display-context.js";
 import { RecordLink } from "./app/displays/record-link.js";
 import { useApiToken } from "./auth/use-api-token.js";
+import { SignInPrompt, SignInPromptProps } from "./auth/sign-in-prompt.js";
+import { ResponsiveDialog, ResponsiveDialogProps } from "./primitives/responsive-dialog.js";
 import { AssistantDock, AssistantDockProps } from "./assistant-dock/assistant-dock.js";
 import { PartView } from "./assistant-dock/part-view.js";
 import { useAssistant } from "./assistant-dock/use-assistant.js";
@@ -39,4 +41,4 @@ import { Step, StepList, StepState } from "./step-list/step-list.js";
 import { DiffView, DiffViewProps } from "./diff-view/diff-view.js";
 import { DiffLine, diffStats, parseDiff } from "./diff-view/diff.js";
 import { CompactTable, CompactTableProps } from "./compact-table/compact-table.js";
-export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, type BackendData, type BackendRefresh, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, type DiffLine, DiffView, type DiffViewProps, FieldList, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, type MetaData, PartView, type PluginInfo, type ProjectUi, type RecordCardProps, RecordLink, SidePanel, type SidePanelProps, type Step, StepList, type StepState, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };
+export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, type BackendData, type BackendRefresh, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, type DiffLine, DiffView, type DiffViewProps, FieldList, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, type MetaData, PartView, type PluginInfo, type ProjectUi, type RecordCardProps, RecordLink, ResponsiveDialog, type ResponsiveDialogProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, type Step, StepList, type StepState, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };

package/dist/index.js

@@ -19,6 +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 { ResponsiveDialog } from "./primitives/responsive-dialog.js";
+import { SignInPrompt } from "./auth/sign-in-prompt.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";
@@ -30,4 +32,4 @@ import { useList } from "./data/use-list.js";
 import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
 import { App } from "./app/app.js";
 import { RecordLink } from "./app/displays/record-link.js";
-export { ActionCard, ApiProvider, App, AppLink, AssistantDock, ChatMessage, ChatThread, CompactTable, Composer, DiffView, FieldList, PartView, RecordLink, SidePanel, StepList, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };
+export { ActionCard, ApiProvider, App, AppLink, AssistantDock, ChatMessage, ChatThread, CompactTable, Composer, DiffView, FieldList, PartView, RecordLink, ResponsiveDialog, SidePanel, SignInPrompt, StepList, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };

package/dist/live/grid-loader.js

@@ -1,6 +1,7 @@
 import { keys } from "../data/query-keys.js";
 import { recordId } from "./model-helpers.js";
-import { withLabels } from "./relation-labels.js";
+import { listLabels, withLabels } from "./relation-labels.js";
+import { listPhotos, withPhotos } from "./row-photos.js";
 //#region src/live/grid-loader.ts
 const exactBelow = 5e3;
 /**
@@ -10,6 +11,8 @@ const exactBelow = 5e3;
 */
 const createGridLoader = ({ queryClient, client, resources, views, model, columns, filter, orderBy }) => {
 	const pageKey = (number) => keys.page(model.name, filter, orderBy, 40, number);
+	const labels = listLabels(resources, views, model, columns);
+	const photos = listPhotos(views[model.name]);
 	/** The server's total is a planner estimate, off by a lot for small results; settle those exactly. */
 	const firstPageTotal = async (result) => {
 		if (result.nextPageToken === "") return result.items.length;
@@ -40,7 +43,9 @@ const createGridLoader = ({ queryClient, client, resources, views, model, column
 		const params = {
 			filter,
 			orderBy,
-			pageSize: 40
+			pageSize: 40,
+			labels,
+			photos
 		};
 		const result = token !== void 0 ? await client.list(model.name, {
 			...params,
@@ -56,7 +61,7 @@ const createGridLoader = ({ queryClient, client, resources, views, model, column
 		};
 		const ids = result.items.map((record) => recordId(model, record));
 		return {
-			rows: (await withLabels(queryClient, client, resources, views, model, columns, result.items)).map((record, index) => ({
+			rows: withLabels(resources, model, columns, withPhotos(model, result.items, result.photos), result.labels).map((record, index) => ({
 				...record,
 				id: ids[index]
 			})),

package/dist/live/reference-options.js

@@ -8,7 +8,7 @@ const matchOptions = (matches, counted) => {
 		...counts.get(value) !== void 0 && { count: counts.get(value) }
 	}));
 };
-/** The keys a facet needs names for: the values it counted and those chosen, which may lie outside the counted ones. */
-const labelKeys = (counted, chosen) => [.../* @__PURE__ */ new Set([...counted, ...chosen])];
+/** The keys a facet still needs names for: the counted values come named, but a chosen one may lie outside them. */
+const labelKeys = (counted, chosen) => [...new Set(chosen.filter((value) => !counted.includes(value)))];
 //#endregion
 export { labelKeys, matchOptions };

package/dist/live/relation-labels.js

@@ -22,32 +22,30 @@ const fetchLabels = async (queryClient, client, target, ids, view) => {
 	});
 	return new Map(entries);
 };
-/** Replaces each relation value with `{ id, name }` so grid cells can show the name. */
-const withLabels = async (queryClient, client, resources, views, model, columns, rows) => {
-	const relations = columns.flatMap((name) => {
-		const field = model.fields[name];
-		const target = field?.type === "relation" && field.relation ? resources[field.relation.resource] : void 0;
-		return target ? [{
-			name,
-			target
-		}] : [];
-	});
-	const resolved = await Promise.all(relations.map(async ({ name, target }) => {
-		const ids = rows.flatMap((row) => row[name] == null ? [] : [String(row[name])]);
-		return [name, await fetchLabels(queryClient, client, target, ids, views[target.name])];
-	}));
-	const labels = new Map(resolved);
+const relationColumns = (resources, model, columns) => columns.flatMap((name) => {
+	const field = model.fields[name];
+	const target = field?.type === "relation" && field.relation ? resources[field.relation.resource] : void 0;
+	return target ? [{
+		name,
+		target
+	}] : [];
+});
+/** What a list call asks `labels` for: each relation among `columns` to a single-key resource, by the field that names its records. */
+const listLabels = (resources, views, model, columns) => Object.fromEntries(relationColumns(resources, model, columns).filter(({ target }) => target.primaryKey.length === 1).map(({ name, target }) => [name, labelFieldOf(target, views[target.name])]));
+/** Replaces each relation value among `columns` with `{ id, name }`, named by the list call's `labels`, else by its key. */
+const withLabels = (resources, model, columns, rows, labels = {}) => {
+	const relations = relationColumns(resources, model, columns);
 	return rows.map((row) => {
 		const next = { ...row };
-		for (const [name, names] of labels) {
+		for (const { name } of relations) {
 			if (row[name] == null) continue;
 			next[name] = {
 				id: row[name],
-				name: names.get(String(row[name])) ?? String(row[name])
+				name: labels[name]?.[String(row[name])] ?? String(row[name])
 			};
 		}
 		return next;
 	});
 };
 //#endregion
-export { fetchLabels, withLabels };
+export { fetchLabels, listLabels, withLabels };

package/dist/live/row-photos.js

@@ -0,0 +1,18 @@
+//#region src/live/row-photos.ts
+/** Where a loaded row keeps its photos, beside its fields, as it keeps its `id`. */
+const photosKey = "$photos";
+/** The photos a list's rows load with: those its cards displays name, which the server checks they all share. */
+const listPhotos = (view) => {
+	for (const display of view?.list?.displays ?? []) if (display.kind === "cards" && display.photos) return display.photos;
+};
+/** The rows, each with its record's photos from a list call's `photos`, when the call asked for them; none for a record it left out. */
+const withPhotos = (model, rows, photos) => {
+	if (photos === void 0 || model.primaryKey.length !== 1) return rows;
+	const key = model.primaryKey[0];
+	return rows.map((row) => ({
+		...row,
+		[photosKey]: photos[String(row[key])] ?? []
+	}));
+};
+//#endregion
+export { listPhotos, photosKey, withPhotos };

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

@@ -1,6 +1,7 @@
 import { formatMoney } from "../format/money.js";
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
+import { labelFieldOf } from "./model-helpers.js";
 import { humanize } from "./naming.js";
 import { fetchLabels } from "./relation-labels.js";
 import { setRange } from "../filter-panel/filter-state.js";
@@ -37,11 +38,14 @@ const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 				[group]: []
 			}
 		}, extras);
+		const target = targetOf(field);
+		const label = target?.primaryKey.length === 1 ? labelFieldOf(target, views[target.name]) : void 0;
 		return {
 			queryKey: keys.facets(model.name, field, filter),
 			queryFn: () => client.facets(model.name, field, {
 				filter,
-				limit: 50
+				limit: 50,
+				...label && { label }
 			})
 		};
 	}) });
@@ -84,7 +88,8 @@ const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 			};
 		}
 		const field = model.fields[group.id];
-		const names = new Map(labelQueries[index]?.data ?? []);
+		const named = (counts(group.id, group.id) ?? []).flatMap((facet) => facet.label === void 0 ? [] : [[String(facet.value), facet.label]]);
+		const names = new Map([...named, ...labelQueries[index]?.data ?? []]);
 		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),

package/dist/package.js

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

package/dist/primitives/button.js

@@ -12,12 +12,17 @@ const sizes = {
 	sm: "h-7 px-2.5 text-xs gap-1.5",
 	md: "h-8 px-3 text-[13px] gap-2"
 };
+/** A button's classes, for a link that looks like one. */
+const buttonClass = ({ variant = "secondary", size = "md" } = {}) => cn("inline-flex shrink-0 items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-60 disabled:cursor-default", variants[variant], sizes[size]);
 const Button = ({ variant = "secondary", size = "md", loading, className, children, disabled, ...rest }) => /* @__PURE__ */ jsxs("button", {
 	type: "button",
 	disabled: disabled || loading,
-	className: cn("inline-flex shrink-0 items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-60 disabled:cursor-default", variants[variant], sizes[size], className),
+	className: cn(buttonClass({
+		variant,
+		size
+	}), className),
 	...rest,
 	children: [loading && /* @__PURE__ */ jsx(Spinner, { className: "size-3.5" }), children]
 });
 //#endregion
-export { Button };
+export { Button, buttonClass };

package/dist/primitives/dialog.js

@@ -30,7 +30,7 @@ const Dialog = ({ title, description, onClose, actions, children }) => {
 					children
 				}),
 				/* @__PURE__ */ jsx("div", {
-					className: "mt-5 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end [&>button]:min-h-11 sm:[&>button]:min-h-0",
+					className: "mt-5 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end [&>*]:min-h-11 sm:[&>*]:min-h-0",
 					children: actions
 				})
 			]

package/dist/primitives/responsive-dialog.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+//#region src/primitives/responsive-dialog.d.ts
+export type ResponsiveDialogProps = {
+  title: string;
+  description?: ReactNode;
+  open: boolean;
+  onClose: () => void;
+  /** Buttons: right-aligned in the modal, stacked full width at the bottom of the sheet. */
+  actions: ReactNode;
+  children?: ReactNode;
+};
+/**
+ * A modal centred on the screen from the `md` breakpoint up, and a sheet rising from the bottom on a phone, switching as
+ * the viewport does. Both close on Escape and on a press outside, and keep focus inside while open.
+ */
+export declare const ResponsiveDialog: ({ title, description, open, onClose, actions, children }: ResponsiveDialogProps) => import("react").JSX.Element | null;
+//#endregion

package/dist/primitives/responsive-dialog.js

@@ -0,0 +1,44 @@
+import { useIsDesktop } from "../lib/use-media-query.js";
+import { Dialog } from "./dialog.js";
+import { Sheet } from "./sheet.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/responsive-dialog.tsx
+/**
+* A modal centred on the screen from the `md` breakpoint up, and a sheet rising from the bottom on a phone, switching as
+* the viewport does. Both close on Escape and on a press outside, and keep focus inside while open.
+*/
+const ResponsiveDialog = ({ title, description, open, onClose, actions, children }) => {
+	const desktop = useIsDesktop();
+	if (!open) return null;
+	if (desktop) return /* @__PURE__ */ jsx(Dialog, {
+		title,
+		description,
+		onClose,
+		actions,
+		children
+	});
+	return /* @__PURE__ */ jsx(Sheet, {
+		title,
+		open: true,
+		onClose,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "pt-3 text-[13px]",
+			children: [
+				description && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground",
+					children: description
+				}),
+				children && /* @__PURE__ */ jsx("div", {
+					className: "mt-4",
+					children
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "mt-5 flex flex-col-reverse gap-2 [&>*]:min-h-11",
+					children: actions
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { ResponsiveDialog };