@protobase/ui 0.22.4 → 0.22.6

package/dist/app/app.js

@@ -29,6 +29,8 @@ import { bottomBarFromMeta } from "./bottom-bar-from-meta.js";
 import { breadcrumbFor } from "./breadcrumb-for.js";
 import { ComposedPage } from "./pages/composed-page.js";
 import { CreateRoute } from "./create/create-route.js";
+import { userMenuFromMeta } from "./user-menu-from-meta.js";
+import { navFromMeta, navItemId } from "./nav-from-meta.js";
 import { ListPage } from "./list-page.js";
 import { MembersPage } from "../organizations/members-page.js";
 import { InvitationsPage } from "../organizations/invitations-page.js";
@@ -37,8 +39,6 @@ import { OrganizationPage } from "../organizations/organization-page.js";
 import { OrganizationsPage } from "../organizations/organizations-page.js";
 import { actingUser } from "../roles/acting-user.js";
 import { useActiveRole } from "../roles/use-active-role.js";
-import { userMenuFromMeta } from "./user-menu-from-meta.js";
-import { navFromMeta } from "./nav-from-meta.js";
 import { ProjectLogo } from "./project-logo.js";
 import { PluginGate, usePluginsOff } from "../plugins/plugin-gate.js";
 import { PluginNotice } from "../plugins/plugin-notice.js";
@@ -50,8 +50,13 @@ import { StaffBanner } from "./staff-banner.js";
 import { useNavRecent } from "./use-nav-recent.js";
 import { useCallback, useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { viewOfList } from "@protobase/schema/internal";
 //#region src/app/app.tsx
-const placeOf = (address) => address?.kind === "page" ? address.page : address?.resource;
+const placeOf = (address) => {
+	if (address?.kind === "page") return address.page;
+	if (address?.kind === "list") return navItemId(address.resource, address.list);
+	return address?.resource;
+};
 const recordOf = (address) => address?.kind === "record" ? address : void 0;
 const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	const meta = useAdminMeta();
@@ -67,7 +72,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	const search = useGlobalSearch();
 	const theme = useTheme();
 	const recent = useNavRecent(meta, basePath, {
-		resource: place,
+		resource: shown?.resource,
 		key: shown?.key
 	});
 	const groups = navFromMeta(meta, basePath, recent);
@@ -92,7 +97,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	]);
 	const resource = address?.kind === "page" ? void 0 : address?.resource;
 	const drawnFrom = resource ? sourceStatusOf(meta, resource) : void 0;
-	const view = resource ? meta.views[resource] : void 0;
+	const view = resource ? viewOfList(meta.views[resource], address?.kind === "list" ? address.list : void 0) : void 0;
 	const group = groups.find((entry) => entry.items.some((item) => item.id === place));
 	const model = resource ? meta.resources[resource] : void 0;
 	const record = useOpenedRecord(shown?.resource ?? "", shown?.key ?? "", Boolean(model && shown));
@@ -183,7 +188,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	}, address.resource) : address.kind === "record" ? /* @__PURE__ */ jsx(RecordPage, {
 		resource: address.resource,
 		recordKey: address.key
-	}, `${address.resource}/${address.key}`) : /* @__PURE__ */ jsx(ListPage, { address }, address.resource);
+	}, `${address.resource}/${address.key}`) : /* @__PURE__ */ jsx(ListPage, { address }, navItemId(address.resource, address.list));
 	const appShell = /* @__PURE__ */ jsx(AppShell, {
 		pageScroll: true,
 		sidebarMode: sidebarMode ?? "text-small",

package/dist/app/breadcrumb-for.js

@@ -15,7 +15,8 @@ const breadcrumbFor = ({ basePath, address, group, page, resourceLabel, recordTi
 		label: resourceLabel,
 		href: appPath({
 			kind: "list",
-			resource: address.resource
+			resource: address.resource,
+			...address.kind === "list" && address.list && { list: address.list }
 		}, basePath)
 	}] : [];
 	if (address.kind === "list") return [...groupCrumb, ...resource];

package/dist/app/current-address.d.ts

@@ -7,6 +7,7 @@ import { AppAddress, CalendarView, FilterLayout, MapView, ResourceModel, ViewMod
 export type ListAddress = {
   kind: 'list';
   resource: string;
+  list?: string;
   display: string;
   filter: string;
   orderBy: string;
@@ -31,5 +32,5 @@ export type CurrentAddress = ListAddress | {
   page: string;
 };
 /** What can change about the list the app shows; `undefined` returns a value to its default. */
-export type ListChange = Partial<Omit<ListAddress, 'kind' | 'resource'>>;
+export type ListChange = Partial<Omit<ListAddress, 'kind' | 'resource' | 'list'>>;
 //#endregion

package/dist/app/current-address.js

@@ -1,14 +1,15 @@
 import { defaultDisplay, listDefaultDisplay } from "./displays/list-displays.js";
 import { defaultOrderBy } from "./list-order.js";
-import { encodeKey } from "@protobase/schema/internal";
+import { encodeKey, viewOfList } from "@protobase/schema/internal";
 //#region src/app/current-address.ts
 /**
 * The resource whose records a list shows, with its view: the list's own, or, when its view has `listOf`, the resource
 * that relation points at, if the caller can see it.
 */
-const listedResource = (resources, views, resource) => {
+const listedResource = (resources, views, resource, list) => {
 	const model = resources[resource];
-	const listOf = views[resource]?.listOf;
+	const own = viewOfList(views[resource], list);
+	const listOf = own?.listOf;
 	const target = listOf === void 0 ? void 0 : model?.fields[listOf]?.relation?.resource;
 	return target !== void 0 && resources[target] ? {
 		model: resources[target],
@@ -16,7 +17,7 @@ const listedResource = (resources, views, resource) => {
 		listOf: true
 	} : {
 		model,
-		view: views[resource],
+		view: own,
 		listOf: false
 	};
 };
@@ -38,7 +39,7 @@ const currentAddress = (read, defaults) => {
 	};
 	if (read?.kind !== "list") return read;
 	return {
-		...defaults(read.resource),
+		...defaults(read.resource, read.list),
 		...read
 	};
 };
@@ -52,6 +53,7 @@ const changedList = (read, change, defaults) => {
 	return {
 		kind: "list",
 		resource: read.resource,
+		...read.list && { list: read.list },
 		...differs("filter") && { filter: next.filter },
 		...differs("display") && { display: next.display },
 		...differs("orderBy") && { orderBy: next.orderBy },

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

@@ -33,6 +33,7 @@ const MapDisplay = ({ model, view, display, filter, orderBy, fields, at, onMove,
 	const [fitting, setFitting] = useState(at === void 0);
 	const records = useMapRecords({
 		model,
+		view,
 		display,
 		fields,
 		filter,

package/dist/app/displays/use-map-records.js

@@ -12,7 +12,7 @@ import { keepPreviousData, useQuery } from "@tanstack/react-query";
 * many. A new area or filter keeps the previous answer until its own arrives, and an answer for an area the map has
 * left is never shown.
 */
-const useMapRecords = ({ model, display, fields, filter, orderBy, area }) => {
+const useMapRecords = ({ model, view, display, fields, filter, orderBy, area }) => {
 	const client = useClient();
 	const { resources, views } = useAdminMeta();
 	const position = {
@@ -32,7 +32,7 @@ const useMapRecords = ({ model, display, fields, filter, orderBy, area }) => {
 				filter: inside,
 				orderBy,
 				labels: listLabels(resources, views, model, fields),
-				photos: listPhotos(views[model.name])
+				photos: listPhotos(view)
 			});
 			return {
 				rows: withLabels(resources, model, fields, withPhotos(model, result.items, result.photos), result.labels).map((record) => displayRow(model, record)),

package/dist/app/list-page.js

@@ -50,6 +50,7 @@ import { useListScroll } from "./list-scroll.js";
 import { ListChart } from "./list-chart.js";
 import { ListGroupChart } from "./list-group-chart.js";
 import { ListSearch } from "./list-search.js";
+import { navItemId } from "./nav-from-meta.js";
 import { withRelatedDotsColumns } from "./related-dots/related-dots-columns.js";
 import { SavedList } from "./saved/saved-list.js";
 import { SaveSearchButton } from "./searches/save-search-button.js";
@@ -62,7 +63,7 @@ import { useMemo, useState } from "react";
 import { Download, Plus, SlidersHorizontal } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createWhere } from "@protobase/schema";
-import { isGroupChart, tableDisplay } from "@protobase/schema/internal";
+import { isGroupChart, tableDisplay, viewOfList } from "@protobase/schema/internal";
 //#region src/app/list-page.tsx
 const where$1 = createWhere();
 const searchText = (extras) => extras.find((clause) => clause.kind === "search");
@@ -86,12 +87,20 @@ const ListPage = ({ address }) => {
 			"."
 		]
 	});
-	const view = views[address.resource];
+	const view = viewOfList(views[address.resource], address.list);
+	if (address.list !== void 0 && !view) return /* @__PURE__ */ jsxs(Notice, {
+		title: "Not found",
+		children: [
+			"There is no list called ",
+			address.list,
+			"."
+		]
+	});
 	if (view?.searchesOf) return /* @__PURE__ */ jsx(SavedSearches, {
 		model,
 		view
 	});
-	const listed = listedResource(resources, views, address.resource);
+	const listed = listedResource(resources, views, address.resource, address.list);
 	if (view && listed.listOf) {
 		const target = listed.model;
 		return /* @__PURE__ */ jsx(SavedList, {
@@ -118,7 +127,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 	const meta = useAdminMeta();
 	const { set, listTo, go, href } = useAppAddress();
 	const resource = model.name;
-	const view = meta.views[resource];
+	const view = viewOfList(meta.views[resource], address.list);
 	const fields = useMemo(() => widgetFields(view, model), [view, model]);
 	const { fields: fieldTypes } = useProjectUi();
 	const columns = useMemo(() => withRelatedDotsColumns(withFieldTypeCells(columnsFromModel(model, view), model, view, fieldTypes), model, view, meta.resources, meta.views), [
@@ -377,7 +386,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 			onRun: (rows) => remove.startBulk(rows.map(target))
 		}] : []],
 		rowNumbers: false,
-		pinKey: auth.kind === "signed-in" ? pinnedStorageKey(auth.user.id, resource) : void 0,
+		pinKey: auth.kind === "signed-in" ? pinnedStorageKey(auth.user.id, navItemId(resource, address.list)) : void 0,
 		scroll: "parent",
 		className: "flex-1"
 	}) : /* @__PURE__ */ jsx("div", { className: "flex-1 rounded-lg border bg-surface" });

package/dist/app/nav-from-meta.js

@@ -5,6 +5,8 @@ import { userMenuResources } from "./user-menu-from-meta.js";
 import { LayoutDashboard } from "lucide-react";
 import { appPath } from "@protobase/schema";
 //#region src/app/nav-from-meta.ts
+/** The sidebar item of a resource's list, or of one of its named lists. */
+const navItemId = (resource, list) => list === void 0 ? resource : `${resource}/${list}`;
 const groupLabels = {
 	sales: "Sales",
 	crm: "CRM",
@@ -18,7 +20,8 @@ const groupLabels = {
 * the user menu leave an entry out, `nav.order` sorts within a group, and `recent` (from `useNavRecent`) makes an entry
 * collapsible. Groups with pages come first, so a dashboard leads the sidebar. The resources of a source that cannot be
 * read are listed under its label, each with the problem. A visitor also gets the resources whose views ask them to sign
-* in, where those views place them, under "Account" without a group.
+* in, where those views place them, under "Account" without a group. Each named list of a view is an entry of its
+* own, placed by its own `nav`.
 */
 const navFromMeta = (meta, basePath = "", recent = {}) => {
 	const groups = /* @__PURE__ */ new Map();
@@ -45,15 +48,20 @@ const navFromMeta = (meta, basePath = "", recent = {}) => {
 	}
 	for (const model of Object.values(meta.resources)) {
 		const view = meta.views[model.name];
-		if (!view || view.nav?.hidden || inMenu.has(model.name)) continue;
+		if (!view || inMenu.has(model.name)) continue;
 		const schema = model.table.schema ?? "public";
-		const groupName = view.nav?.group ?? groupLabels[schema] ?? humanize(schema);
-		const group = groups.get(groupName) ?? {
-			label: groupName,
-			items: []
+		const defaultGroup = view.nav?.group ?? groupLabels[schema] ?? humanize(schema);
+		const add = (groupName, item, order) => {
+			const group = groups.get(groupName) ?? {
+				label: groupName,
+				items: []
+			};
+			group.items.push(item);
+			groups.set(groupName, group);
+			orders.set(item.id, order ?? Number.MAX_SAFE_INTEGER);
 		};
-		group.items.push({
-			id: model.name,
+		if (!view.nav?.hidden) add(defaultGroup, {
+			id: navItemId(model.name),
 			label: view.names?.plural ?? humanize(model.name),
 			icon: iconFor(model.name),
 			href: appPath({
@@ -61,9 +69,20 @@ const navFromMeta = (meta, basePath = "", recent = {}) => {
 				resource: model.name
 			}, basePath),
 			...recent[model.name] && { recent: recent[model.name] }
-		});
-		groups.set(groupName, group);
-		orders.set(model.name, view.nav?.order ?? Number.MAX_SAFE_INTEGER);
+		}, view.nav?.order);
+		for (const named of view.lists ?? []) {
+			if (named.nav?.hidden) continue;
+			add(named.nav?.group ?? defaultGroup, {
+				id: navItemId(model.name, named.name),
+				label: named.names.plural,
+				icon: iconFor(model.name),
+				href: appPath({
+					kind: "list",
+					resource: model.name,
+					list: named.name
+				}, basePath)
+			}, named.nav?.order);
+		}
 	}
 	for (const entry of Object.values(meta.signIn ?? {})) {
 		if (entry.nav?.hidden || inMenu.has(entry.resource)) continue;
@@ -108,4 +127,4 @@ const navFromMeta = (meta, basePath = "", recent = {}) => {
 	}));
 };
 //#endregion
-export { navFromMeta };
+export { navFromMeta, navItemId };

package/dist/app/use-app-address.js

@@ -23,8 +23,8 @@ const useAppAddress = () => {
 		query,
 		pageNames
 	]);
-	const defaults = useCallback((resource) => {
-		const listed = listedResource(resources, views, resource);
+	const defaults = useCallback((resource, list) => {
+		const listed = listedResource(resources, views, resource, list);
 		return listDefaults(listed.model, listed.view, xs);
 	}, [
 		resources,
@@ -35,7 +35,7 @@ const useAppAddress = () => {
 	const go = useCallback((to, options) => navigate(appPath(to), options), [navigate]);
 	const listTo = useCallback((change) => {
 		if (read?.kind !== "list") throw new Error("listTo and set change the list the app shows; use go to move to another address");
-		return changedList(read, change, defaults(read.resource));
+		return changedList(read, change, defaults(read.resource, read.list));
 	}, [read, defaults]);
 	return {
 		address,

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

@@ -38,7 +38,7 @@ const FilterMenu = ({ label, activeCount, width = 240, defaultOpen = false, chil
 		}), open && /* @__PURE__ */ jsx("div", {
 			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
+			children: typeof children === "function" ? children(() => setOpen(false)) : children
 		})]
 	});
 };

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

@@ -5,16 +5,22 @@ import { FacetCombobox } from "./facet-combobox.js";
 import { FacetGroup } from "./facet-group.js";
 import { FilterMenu } from "./filter-menu.js";
 import { FilterSection } from "./filter-section.js";
+import { MoreFiltersMenu } from "./more-filters-menu.js";
 import { RangeFilter } from "./range-filter.js";
+import { activeFilterKeys, barFilters, mergeKeys } from "./secondary-filters.js";
 import { ToggleRow } from "./toggle-row.js";
 import { ToolbarRow, toolbarShows } from "./toolbar-row.js";
 import { useFilterState } from "./use-filter-state.js";
-import { Fragment } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/filter-panel/filter-panel.tsx
 const FilterPanel = ({ config, layout, value, defaultValue, onChange, lockedLabels, defaultOpenMenu, fullWidth, leading, trailing }) => {
 	const [state, setState] = useFilterState(value, defaultValue, onChange);
 	const chips = activeChips(config, state);
+	const activeKeys = activeFilterKeys(chips);
+	const [revealed, setRevealed] = useState(() => activeKeys);
+	const [justPicked, setJustPicked] = useState();
+	useEffect(() => setRevealed((current) => mergeKeys(current, activeKeys)), [activeKeys.join(",")]);
 	const chipsView = /* @__PURE__ */ jsx(ActiveFilterChips, {
 		chips,
 		lockedLabels,
@@ -87,24 +93,29 @@ const FilterPanel = ({ config, layout, value, defaultValue, onChange, lockedLabe
 			})
 		]
 	});
+	const { shown, more } = barFilters(config, revealed);
+	const onPick = (key) => {
+		setRevealed((current) => mergeKeys(current, [key]));
+		setJustPicked(key);
+	};
 	const menus = [
-		...config.facets.map((group) => /* @__PURE__ */ jsx(FilterMenu, {
+		...config.facets.filter((group) => shown.has(`facet:${group.id}`)).map((group) => /* @__PURE__ */ jsx(FilterMenu, {
 			label: group.label,
 			activeCount: (state.facets[group.id] ?? []).length,
 			width: group.combobox ? 280 : void 0,
-			defaultOpen: defaultOpenMenu === group.id,
+			defaultOpen: defaultOpenMenu === group.id || justPicked === `facet:${group.id}`,
 			children: facetView(group, true)
 		}, group.id)),
-		...ranges.map((range) => /* @__PURE__ */ jsx(FilterMenu, {
+		...ranges.filter((range) => shown.has(`range:${range.id}`)).map((range) => /* @__PURE__ */ jsx(FilterMenu, {
 			label: range.label,
 			activeCount: state.ranges?.[range.id] ? 1 : 0,
 			width: 280,
-			defaultOpen: defaultOpenMenu === range.id,
+			defaultOpen: defaultOpenMenu === range.id || justPicked === `range:${range.id}`,
 			children: rangeView(range)
 		}, `range:${range.id}`)),
-		...dateView ? [/* @__PURE__ */ jsx(Fragment, { children: dateView }, "date")] : []
+		...dateView && shown.has("date") ? [/* @__PURE__ */ jsx(Fragment, { children: dateView }, "date")] : []
 	];
-	const toggles = (config.toggles ?? []).map((toggle) => /* @__PURE__ */ jsx("div", {
+	const toggles = (config.toggles ?? []).filter((toggle) => shown.has(`toggle:${toggle.id}`)).map((toggle) => /* @__PURE__ */ jsx("div", {
 		className: "flex items-center gap-2 text-muted-foreground",
 		children: /* @__PURE__ */ jsx(ToggleRow, {
 			label: toggle.label,
@@ -115,7 +126,11 @@ const FilterPanel = ({ config, layout, value, defaultValue, onChange, lockedLabe
 	const groups = [
 		leading ? [/* @__PURE__ */ jsx(Fragment, { children: leading }, "leading")] : [],
 		menus,
-		toggles
+		toggles,
+		more.length > 0 ? [/* @__PURE__ */ jsx(MoreFiltersMenu, {
+			items: more,
+			onPick
+		}, "more")] : []
 	];
 	if (!toolbarShows(groups, trailing) && chips.length === 0 && !lockedLabels?.length) return null;
 	return /* @__PURE__ */ jsxs("div", {

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

@@ -0,0 +1,54 @@
+import { menuItemClass } from "../primitives/menu-item.js";
+import { FilterMenu } from "./filter-menu.js";
+import { menuKeyTarget } from "../primitives/menu-keys.js";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/filter-panel/more-filters-menu.tsx
+const Items = ({ items, onPick, close }) => {
+	const buttons = useRef([]);
+	useEffect(() => buttons.current[0]?.focus(), []);
+	const onKeyDown = (event) => {
+		if (event.key === "Escape") return close();
+		const target = menuKeyTarget(event.key, buttons.current.indexOf(document.activeElement), items.length);
+		if (target === void 0) return;
+		event.preventDefault();
+		buttons.current[target]?.focus();
+	};
+	return /* @__PURE__ */ jsx("ul", {
+		role: "menu",
+		"aria-label": "More filters",
+		onKeyDown,
+		className: "-mx-3 -my-3",
+		children: items.map((item, index) => /* @__PURE__ */ jsx("li", {
+			role: "none",
+			children: /* @__PURE__ */ jsx("button", {
+				ref: (button) => {
+					buttons.current[index] = button;
+				},
+				type: "button",
+				role: "menuitem",
+				className: menuItemClass,
+				onClick: () => {
+					close();
+					onPick(item.key);
+				},
+				children: item.label
+			})
+		}, item.key))
+	});
+};
+/** The secondary filters the bar does not show yet, in a menu at its end; picking one puts it in the bar. */
+const MoreFiltersMenu = ({ items, onPick }) => {
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx(FilterMenu, {
+		label: "More filters",
+		activeCount: 0,
+		children: (close) => /* @__PURE__ */ jsx(Items, {
+			items,
+			onPick,
+			close
+		})
+	});
+};
+//#endregion
+export { MoreFiltersMenu };

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

@@ -0,0 +1,46 @@
+//#region src/filter-panel/secondary-filters.ts
+/** The filter a chip belongs to: `facet:<id>`, `range:<id>`, `toggle:<id>` or `date`. A filter is active exactly when it has a chip. */
+const activeFilterKeys = (chips) => [...new Set(chips.map((chip) => chip.key.split(":").slice(0, 2).join(":")))];
+/** `revealed` itself when it holds every key already, else a copy with the missing keys appended. */
+const mergeKeys = (revealed, keys) => {
+	const missing = keys.filter((key) => !revealed.includes(key));
+	return missing.length === 0 ? revealed : [...revealed, ...missing];
+};
+/** The filter keys the bar draws, and the secondary filters left for the "More filters" menu, in the order the bar draws them. */
+const barFilters = (config, revealed) => {
+	const all = [
+		...config.facets.map((group) => ({
+			key: `facet:${group.id}`,
+			label: group.label,
+			secondary: group.secondary
+		})),
+		...(config.ranges ?? []).map((range) => ({
+			key: `range:${range.id}`,
+			label: range.label,
+			secondary: range.secondary
+		})),
+		...config.datePresets ? [{
+			key: "date",
+			label: "Date",
+			secondary: config.dateSecondary
+		}] : [],
+		...(config.toggles ?? []).map((toggle) => ({
+			key: `toggle:${toggle.id}`,
+			label: toggle.label,
+			secondary: toggle.secondary
+		}))
+	];
+	const shown = /* @__PURE__ */ new Set();
+	const more = [];
+	for (const filter of all) if (!filter.secondary || revealed.includes(filter.key)) shown.add(filter.key);
+	else more.push({
+		key: filter.key,
+		label: filter.label
+	});
+	return {
+		shown,
+		more
+	};
+};
+//#endregion
+export { activeFilterKeys, barFilters, mergeKeys };

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

@@ -122,7 +122,8 @@ const useFilterConfig = ({ model, resources, views, view, state, extras }) => {
 		...skeleton.dateField && {
 			datePresets: skeleton.datePresets ?? true,
 			dateField: skeleton.dateField,
-			dateKind: skeleton.dateKind
+			dateKind: skeleton.dateKind,
+			...skeleton.dateSecondary && { dateSecondary: true }
 		},
 		toggles: skeleton.toggles?.map((toggle) => ({
 			...toggle,

package/dist/live/view-fields.js

@@ -11,14 +11,16 @@ const isNumber = (model, field) => {
 };
 /** A filter on a number field is a range slider, whichever widget the view asked for. */
 const rangeOf = (widget, model) => widget.kind === "range" || widget.kind === "facets" && isNumber(model, widget.field);
-const emptyRange = (field) => ({
-	id: field,
-	label: field,
+const secondaryOf = (widget) => widget.secondary ? { secondary: true } : {};
+const emptyRange = (widget) => ({
+	id: widget.field,
+	label: widget.field,
 	min: 0,
 	max: 0,
 	step: 1,
 	histogram: [],
-	format: String
+	format: String,
+	...secondaryOf(widget)
 });
 /**
 * The widgets of a view in the shape `filter-string` talks to; options and counts are filled in later. Facets on a
@@ -34,7 +36,8 @@ const widgetFields = (view, model) => {
 				label: widget.field,
 				options: [],
 				searchable: widget.search,
-				...model?.fields[widget.field]?.type === "relation" && { combobox: true }
+				...model?.fields[widget.field]?.type === "relation" && { combobox: true },
+				...secondaryOf(widget)
 			}];
 			if (widget.kind === "flags") return [{
 				id: widget.fields.join("|"),
@@ -44,19 +47,22 @@ const widgetFields = (view, model) => {
 					label: field,
 					count: 0
 				})),
-				flags: true
+				flags: true,
+				...secondaryOf(widget)
 			}];
 			return [];
 		}),
-		ranges: widgets.flatMap((widget) => widget.kind !== "flags" && rangeOf(widget, model) ? [emptyRange(widget.field)] : []),
+		ranges: widgets.flatMap((widget) => widget.kind !== "flags" && rangeOf(widget, model) ? [emptyRange(widget)] : []),
 		...date && {
 			dateField: date.field,
+			...date.secondary && { dateSecondary: true },
 			dateKind: model?.fields[date.field]?.type === "date" ? "date" : "timestamp",
 			...date.presets.length > 0 && { datePresets: date.presets }
 		},
 		toggles: widgets.flatMap((widget) => widget.kind === "toggle" ? [{
 			id: widget.field,
-			label: widget.field
+			label: widget.field,
+			...secondaryOf(widget)
 		}] : [])
 	};
 };

package/dist/package.js

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

package/dist/primitives/menu-item.js

@@ -0,0 +1,4 @@
+//#region src/primitives/menu-item.ts
+const menuItemClass = "flex w-full items-center gap-2 px-3 py-2.5 text-left hover:bg-muted disabled:cursor-default disabled:opacity-60";
+//#endregion
+export { menuItemClass };

package/dist/record-view/action-menu.js

@@ -1,10 +1,10 @@
 import { cn } from "../lib/cn.js";
+import "../primitives/menu-item.js";
 import { usePopoverMenu } from "../primitives/popover-menu.js";
 import { MoreVertical } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 //#region src/record-view/action-menu.tsx
-const itemClass = "flex w-full items-center gap-2 px-3 py-2.5 text-left hover:bg-muted disabled:cursor-default disabled:opacity-60";
 /**
 * The actions of an action rail as a menu behind a "..." button, as a mobile screen's top bar holds them: each item the
 * rail's, a link where the rail draws one, disabled with its reason when it cannot run. `className` styles the button.
@@ -39,7 +39,7 @@ const ActionMenu = ({ actions, label = "Actions", className }) => {
 				role: "none",
 				onClick: () => setOpen(false),
 				children: render ? render({
-					className: itemClass,
+					className: "flex w-full items-center gap-2 px-3 py-2.5 text-left hover:bg-muted disabled:cursor-default disabled:opacity-60",
 					children,
 					role: "menuitem"
 				}) : /* @__PURE__ */ jsx("button", {
@@ -48,7 +48,7 @@ const ActionMenu = ({ actions, label = "Actions", className }) => {
 					onClick: onRun,
 					disabled: Boolean(blocked) || running,
 					title: blocked,
-					className: itemClass,
+					className: "flex w-full items-center gap-2 px-3 py-2.5 text-left hover:bg-muted disabled:cursor-default disabled:opacity-60",
 					children
 				})
 			}, name);