@protobase/ui 0.14.4 → 0.14.6

package/dist/activity-chart/activity-chart.js

@@ -1,9 +1,9 @@
 import { cn } from "../lib/cn.js";
 import { useMediaQuery } from "../lib/use-media-query.js";
+import { Segmented } from "../primitives/segmented.js";
 import { formatInt } from "../format/number.js";
 import { formatDayShort } from "../format/date.js";
 import { activitySeries } from "../mocks/activity.js";
-import { Segmented } from "../primitives/segmented.js";
 import { halfOverHalfDelta, totalCount } from "./activity-math.js";
 import { ActivityTooltip } from "./activity-tooltip.js";
 import { useState } from "react";

package/dist/app/app.d.ts

@@ -30,7 +30,8 @@ export type AppProps = {
 };
 /**
  * The admin: sign-in first, or browsing as a visitor when the project has an anonymous role, then a sidebar from
- * `/meta`, `/:page` composed pages, `/:resource` lists and `/:resource/:key` records. Fills its parent.
+ * `/meta`, `/:page` composed pages, `/:resource` lists and `/:resource/:key` records. Fills its parent, in the theme
+ * this browser chose, light, dark or the system's.
  */
 export declare const App: ({ auth, workspace, ...rest }: AppProps) => import("react").JSX.Element;
 //#endregion

package/dist/app/app.js

@@ -10,6 +10,7 @@ import { isAdmin, userToShell } from "../auth/user-to-shell.js";
 import { useRecord } from "../data/use-record.js";
 import { recordTitle } from "../live/model-helpers.js";
 import { humanize } from "../live/naming.js";
+import { ThemeProvider, useTheme } from "../theme/theme-provider.js";
 import { ToastProvider } from "../toasts/toast-provider.js";
 import { startErrorReporting } from "./error-reporting.js";
 import { useProjectUi } from "./pages/project-ui.js";
@@ -57,6 +58,7 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 	const place = placeOf(address);
 	const shown = recordOf(address);
 	const search = useGlobalSearch();
+	const theme = useTheme();
 	const recent = useNavRecent(meta, basePath, {
 		resource: place,
 		key: shown?.key
@@ -187,6 +189,10 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 			others: organizations.organizations.filter((organization) => organization.id !== current?.organization?.id),
 			onSwitch: (id) => void session.organizations.switchTo(id).then(() => reopenIn(basePath))
 		},
+		theme: user && {
+			preference: theme.preference,
+			onChange: theme.choose
+		},
 		roles: role.current?.active ? {
 			active: role.current.active,
 			roles: role.current.roles,
@@ -261,9 +267,10 @@ const Authenticated = ({ baseUrl, client, sources, basePath, initialUrl, workspa
 };
 /**
 * The admin: sign-in first, or browsing as a visitor when the project has an anonymous role, then a sidebar from
-* `/meta`, `/:page` composed pages, `/:resource` lists and `/:resource/:key` records. Fills its parent.
+* `/meta`, `/:page` composed pages, `/:resource` lists and `/:resource/:key` records. Fills its parent, in the theme
+* this browser chose, light, dark or the system's.
 */
-const App = ({ auth, workspace, ...rest }) => /* @__PURE__ */ jsx(AuthProvider, {
+const App = ({ auth, workspace, ...rest }) => /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(AuthProvider, {
 	session: auth,
 	children: /* @__PURE__ */ jsx(AuthGate, {
 		workspace,
@@ -272,6 +279,6 @@ const App = ({ auth, workspace, ...rest }) => /* @__PURE__ */ jsx(AuthProvider,
 			...rest
 		})
 	})
-});
+}) });
 //#endregion
 export { App };

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

@@ -1,9 +1,9 @@
 import { cn } from "../../lib/cn.js";
+import { Segmented } from "../../primitives/segmented.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, Map, SquareKanban, Table2 } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/displays/display-controls.tsx

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

@@ -19,7 +19,7 @@ import { viewAllAddress } from "./embedded-display.js";
 import { useEmbeddedRows } from "./use-embedded-rows.js";
 import { useMemo, useState } from "react";
 import { ArrowRight } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/embedded-list/embedded-list.tsx
 /** The switch between the table and the view's displays, for an embedded list's heading; nothing with only a table. */
 const EmbeddedDisplaySwitch = ({ view, value, onChange }) => /* @__PURE__ */ jsx(DisplaySwitch, {
@@ -36,7 +36,7 @@ const Loading = () => /* @__PURE__ */ jsx("div", {
 * The first `limit` records of a list, drawn by the list page's own table (sized to its rows) or display, and a link
 * to the whole list with the same filter, order and display. On a phone a cards display is one row that scrolls sideways.
 */
-const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empty }) => {
+const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empty, row = false, viewAll }) => {
 	const { resources, views } = useAdminMeta();
 	const { fields: fieldTypes } = useProjectUi();
 	const { go } = useAppAddress();
@@ -73,15 +73,42 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 		rowAt: (index) => loaded[index]
 	}, [loaded]);
 	const shown = shownDisplay(view, display);
+	const plural = view?.names?.plural ?? humanize(model.name);
+	const allLink = /* @__PURE__ */ jsxs(AppLink, {
+		to: viewAllAddress(model, view, xs, viewAll ? {
+			filter: viewAll.filter,
+			orderBy: defaultOrderBy(model, view),
+			display
+		} : {
+			filter,
+			orderBy,
+			display
+		}),
+		onClick: viewAll?.onOpen,
+		className: "flex items-center gap-1 self-end text-[13px] font-medium text-primary-text hover:underline",
+		children: [viewAll ? viewAll.label : /* @__PURE__ */ jsxs(Fragment$1, { children: ["View all ", /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: plural.toLowerCase()
+		})] }), /* @__PURE__ */ jsx(ArrowRight, {
+			className: "size-3.5",
+			"aria-hidden": true
+		})]
+	});
 	if (rows.isPending) return /* @__PURE__ */ jsx(Loading, {});
 	if (rows.error) return /* @__PURE__ */ jsx(ErrorBanner, {
 		title: "Could not load",
 		error: rows.error
 	});
-	if (!source || source.total === 0) return /* @__PURE__ */ jsx("p", {
-		className: "text-[13px] text-muted-foreground",
-		children: empty ?? "Nothing here yet."
-	});
+	if (!source || source.total === 0) {
+		const nothing = /* @__PURE__ */ jsx("p", {
+			className: "text-[13px] text-muted-foreground",
+			children: empty ?? "Nothing here yet."
+		});
+		return viewAll ? /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3",
+			children: [nothing, allLink]
+		}) : nothing;
+	}
 	const list = {
 		resource: model.name,
 		rows: rows.data.map((row) => displayRow(model, row)),
@@ -97,7 +124,6 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 		key: recordKey(model, row)
 	});
 	const singular = view?.names?.singular ?? humanize(model.name);
-	const plural = view?.names?.plural ?? humanize(model.name);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-3",
 		children: [!shown ? /* @__PURE__ */ jsx(DataGrid, {
@@ -119,7 +145,7 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 			view,
 			display: shown,
 			list,
-			row: xs,
+			row: row || xs,
 			footer: false
 		}) : shown.kind === "map" ? /* @__PURE__ */ jsx(MapDisplay, {
 			model,
@@ -132,25 +158,7 @@ const EmbeddedList = ({ model, view, filter, sort, columns, limit, display, empt
 		}) : /* @__PURE__ */ jsx(CustomDisplay, {
 			display: shown,
 			list
-		}), /* @__PURE__ */ jsxs(AppLink, {
-			to: viewAllAddress(model, view, xs, {
-				filter,
-				orderBy,
-				display
-			}),
-			className: "flex items-center gap-1 self-end text-[13px] font-medium text-primary-text hover:underline",
-			children: [
-				"View all ",
-				/* @__PURE__ */ jsx("span", {
-					className: "sr-only",
-					children: plural.toLowerCase()
-				}),
-				/* @__PURE__ */ jsx(ArrowRight, {
-					className: "size-3.5",
-					"aria-hidden": true
-				})
-			]
-		})]
+		}), allLink]
 	});
 };
 //#endregion

package/dist/app/index.html

@@ -4,6 +4,16 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <title>Protobase</title>
+    <!-- The theme before the first paint, so a dark page never flashes light: as theme/theme-preference.ts resolves it, the choice stored in this browser, else the system's. -->
+    <script>
+      var stored = null
+      try {
+        stored = localStorage.getItem('protobase:theme')
+      } catch (error) {
+        if (!(error instanceof DOMException)) throw error
+      }
+      document.documentElement.dataset.theme = stored === 'light' || stored === 'dark' ? stored : matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    </script>
   </head>
   <body>
     <!-- The page reaches under the iPhone home indicator, which the bottom bar keeps clear of; the sides keep clear of the notch. -->

package/dist/app/list-page.js

@@ -39,6 +39,9 @@ import { ListChart } from "./list-chart.js";
 import { ListSearch } from "./list-search.js";
 import { withFieldTypeCells } from "./field-types/field-type-cells.js";
 import { SavedList } from "./saved/saved-list.js";
+import { facetNames, filterChips, searchName } from "./searches/saved-search.js";
+import { SaveSearchButton } from "./searches/save-search-button.js";
+import { SavedSearches } from "./searches/saved-searches.js";
 import { useMemo, useState } from "react";
 import { Plus, SlidersHorizontal } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -48,8 +51,9 @@ import { createWhere } from "@protobase/schema";
 const where = createWhere();
 const searchText = (extras) => extras.find((clause) => clause.kind === "search");
 /**
-* A resource's list: its rows, or with `listOf` the records its relation points at (`SavedList`). A visitor who cannot
-* see the resource is told what signing in gives, when its view says (`SignInPrompt`).
+* A resource's list: its rows, with `listOf` the records its relation points at (`SavedList`), or with `searchesOf` the
+* user's saved searches and what each finds (`SavedSearches`). A visitor who cannot see the resource is told what
+* signing in gives, when its view says (`SignInPrompt`).
 */
 const ListPage = ({ address }) => {
 	const { resources, views, signIn } = useAdminMeta();
@@ -67,6 +71,10 @@ const ListPage = ({ address }) => {
 		]
 	});
 	const view = views[address.resource];
+	if (view?.searchesOf) return /* @__PURE__ */ jsx(SavedSearches, {
+		model,
+		view
+	});
 	const listed = listedResource(resources, views, address.resource);
 	if (view && listed.listOf) {
 		const target = listed.model;
@@ -255,6 +263,11 @@ const LoadedList = ({ model, address, scope, heading }) => {
 			singular.toLowerCase()
 		]
 	});
+	const saveSearch = view?.saveSearch && !scope && parsed.ok && filterText && /* @__PURE__ */ jsx(SaveSearchButton, {
+		search: view.saveSearch,
+		filter: filterText,
+		name: searchName(filterChips(model, view, filterText, facetNames(config)))
+	});
 	const displaySwitch = (menu) => /* @__PURE__ */ jsx(DisplaySwitch, {
 		view,
 		value: display?.name ?? tableDisplay,
@@ -331,7 +344,11 @@ const LoadedList = ({ model, address, scope, heading }) => {
 				title: heading?.title ?? plural,
 				subtitle: heading ? heading.subtitle : view?.help,
 				aside: !desktop && displaySwitch(true),
-				actions: desktop ? /* @__PURE__ */ jsxs(Fragment$1, { children: [displaySwitch(false), createButton] }) : createButton
+				actions: desktop ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					displaySwitch(false),
+					saveSearch,
+					createButton
+				] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [saveSearch, createButton] })
 			}),
 			!parsed.ok && /* @__PURE__ */ jsx(ErrorBanner, {
 				title: "The filter in the address could not be read",

package/dist/app/menu-icons.js

@@ -1,8 +1,9 @@
-import { Bell, BookOpen, Building2, CreditCard, ExternalLink, FileText, Heart, KeyRound, LayoutDashboard, LifeBuoy, Mail, Receipt, Settings, ShieldCheck, Users } from "lucide-react";
+import { Bell, BookOpen, Bookmark, Building2, CreditCard, ExternalLink, FileText, Heart, KeyRound, LayoutDashboard, LifeBuoy, Mail, Receipt, Settings, ShieldCheck, Users } from "lucide-react";
 //#region src/app/menu-icons.ts
 const byName = {
 	bell: Bell,
 	"book-open": BookOpen,
+	bookmark: Bookmark,
 	building: Building2,
 	"credit-card": CreditCard,
 	"external-link": ExternalLink,

package/dist/app/named-icon.js

@@ -1,4 +1,4 @@
-import { Bed, Bell, FileText, Heart, RulerDimensionLine, Send, Wallet } from "lucide-react";
+import { Bed, Bell, Bookmark, FileText, Heart, RulerDimensionLine, Send, Wallet } from "lucide-react";
 //#region src/app/named-icon.ts
 /** The icons an action's, a field's or a sign-in prompt's `icon` may name. */
 const byName = {
@@ -8,7 +8,8 @@ const byName = {
 	ruler: RulerDimensionLine,
 	bed: Bed,
 	heart: Heart,
-	bell: Bell
+	bell: Bell,
+	bookmark: Bookmark
 };
 /** The icon a name stands for, or nothing for a name the app does not know. */
 const namedIcon = (name) => name !== void 0 && Object.hasOwn(byName, name) ? byName[name] : void 0;

package/dist/app/pages/blocks/field.js

@@ -1,10 +1,10 @@
 import { Skeleton } from "../../../primitives/skeleton.js";
 import { humanize } from "../../../live/naming.js";
 import { useAdminMeta } from "../../meta-gate.js";
-import { useLayoutRecord } from "../record-scope.js";
-import { propsOf } from "./block-props.js";
 import { FieldValue } from "../field-value.js";
 import { usePathValue } from "../use-path-value.js";
+import { useLayoutRecord } from "../record-scope.js";
+import { propsOf } from "./block-props.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/pages/blocks/field.tsx
 /** The view's label for the field at the end of the path, else the path in words: `companyId.city` is "Company city". */

package/dist/app/pages/blocks/progress.js

@@ -1,7 +1,7 @@
 import { Skeleton } from "../../../primitives/skeleton.js";
+import { usePathValue } from "../use-path-value.js";
 import { useLayoutRecord } from "../record-scope.js";
 import { propsOf } from "./block-props.js";
-import { usePathValue } from "../use-path-value.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/pages/blocks/progress.tsx
 /** A number as given, or the number in a field of the record around it. */

package/dist/app/pages/blocks/show.js

@@ -1,9 +1,9 @@
 import { useClient } from "../../../data/api-provider.js";
 import { useAdminMeta } from "../../meta-gate.js";
 import { countQuery } from "../use-layout-data.js";
+import { usePathValues } from "../use-path-value.js";
 import { useLayoutRecord } from "../record-scope.js";
 import { propsOf } from "./block-props.js";
-import { usePathValues } from "../use-path-value.js";
 import { useMemo } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 import { useQueries } from "@tanstack/react-query";

package/dist/app/pages/blocks/stat.js

@@ -2,11 +2,11 @@ import { Skeleton } from "../../../primitives/skeleton.js";
 import { useAdminMeta } from "../../meta-gate.js";
 import { AppLink } from "../../use-app-address.js";
 import { useCount } from "../use-layout-data.js";
+import { FieldValue } from "../field-value.js";
+import { usePathValue } from "../use-path-value.js";
 import { useLayoutRecord } from "../record-scope.js";
 import { propsOf } from "./block-props.js";
 import { CardFrame } from "./card-frame.js";
-import { FieldValue } from "../field-value.js";
-import { usePathValue } from "../use-path-value.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/pages/blocks/stat.tsx
 const big = "text-2xl font-semibold tracking-tight tabular-nums";

package/dist/app/pages/blocks/table.js

@@ -1,7 +1,7 @@
 import { useAdminMeta } from "../../meta-gate.js";
+import { EmbeddedDisplaySwitch, EmbeddedList } from "../../embedded-list/embedded-list.js";
 import { propsOf } from "./block-props.js";
 import { CardFrame } from "./card-frame.js";
-import { EmbeddedDisplaySwitch, EmbeddedList } from "../../embedded-list/embedded-list.js";
 import { useEmbeddedDisplay } from "../../embedded-list/use-embedded-display.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/pages/blocks/table.tsx

package/dist/app/searches/save-search-button.js

@@ -0,0 +1,44 @@
+import { Button } from "../../primitives/button.js";
+import { SignInPrompt } from "../../auth/sign-in-prompt.js";
+import { useSaveSearch } from "./use-save-search.js";
+import { useState } from "react";
+import { Bookmark, BookmarkCheck } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/searches/save-search-button.tsx
+/**
+* "Save search" on a filtered list: saves its filter as one of the signed-in user's searches, pressed while it is saved,
+* or, for a visitor, opens the sign-in prompt of the saved searches' resource.
+*/
+const SaveSearchButton = ({ search, filter, name, className }) => {
+	const state = useSaveSearch(search, filter, name);
+	const [prompting, setPrompting] = useState(false);
+	if (!state.mode) return null;
+	const label = search.label ?? "Save search";
+	if (state.mode === "sign-in") return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Button, {
+		className,
+		"aria-haspopup": "dialog",
+		onClick: () => setPrompting(true),
+		children: [/* @__PURE__ */ jsx(Bookmark, {
+			className: "size-3.5",
+			"aria-hidden": true
+		}), label]
+	}), /* @__PURE__ */ jsx(SignInPrompt, {
+		as: "dialog",
+		prompt: state.prompt,
+		open: prompting,
+		onClose: () => setPrompting(false)
+	})] });
+	const Icon = state.saved ? BookmarkCheck : Bookmark;
+	return /* @__PURE__ */ jsxs(Button, {
+		className,
+		"aria-pressed": state.saved,
+		"aria-disabled": !state.ready,
+		onClick: () => state.ready && state.toggle(),
+		children: [/* @__PURE__ */ jsx(Icon, {
+			className: state.saved ? "size-3.5 text-primary" : "size-3.5",
+			"aria-hidden": true
+		}), label]
+	});
+};
+//#endregion
+export { SaveSearchButton };

package/dist/app/searches/saved-search-section.js

@@ -0,0 +1,97 @@
+import { Button } from "../../primitives/button.js";
+import { useClient } from "../../data/api-provider.js";
+import { humanize } from "../../live/naming.js";
+import { defaultOrderBy } from "../list-order.js";
+import { AppLink } from "../use-app-address.js";
+import { useRefreshResource } from "../pages/use-layout-data.js";
+import { searchName, unseenFilter } from "./saved-search.js";
+import { EmbeddedList } from "../embedded-list/embedded-list.js";
+import { SearchControls } from "./search-controls.js";
+import { useFilterChips } from "./use-filter-chips.js";
+import { Trash2 } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMutation } from "@tanstack/react-query";
+import { tableDisplay } from "@protobase/schema/internal";
+//#region src/app/searches/saved-search-section.tsx
+const chipClass = "inline-flex h-6 items-center rounded-full border border-primary-border bg-primary-soft px-2.5 text-xs font-medium text-primary-text";
+const defaultLimit = 12;
+/**
+* One saved search: its name and filters, its controls and delete, and a row of the records it finds that are new to
+* the user (with `unseen`), newest first, with "View all results", which opens the list with its filter and counts as
+* having seen them.
+*/
+const SavedSearchSection = ({ model, view, of, target, targetView, row, recordKey, title, onDelete }) => {
+	const client = useClient();
+	const refresh = useRefreshResource();
+	const filter = String(row[of.filter] ?? "");
+	const chips = useFilterChips(target, filter);
+	const unseen = of.unseen;
+	const markSeen = useMutation({
+		mutationFn: (seenAt) => client.update(model.name, recordKey, { [unseen.seenAt]: seenAt }, row.etag ?? "*"),
+		onSettled: () => refresh(model.name)
+	});
+	const cards = targetView?.list?.displays?.find((display) => display.kind === "cards");
+	const plural = (targetView?.names?.plural ?? humanize(target.name)).toLowerCase();
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": title,
+		className: "flex flex-col gap-3 rounded-lg border bg-surface p-4",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-start justify-between gap-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-col gap-2",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-[15px] font-semibold",
+					children: /* @__PURE__ */ jsx(AppLink, {
+						to: {
+							kind: "record",
+							resource: model.name,
+							key: recordKey
+						},
+						className: "hover:underline",
+						children: title
+					})
+				}), chips.length > 0 && searchName(chips) !== title && /* @__PURE__ */ jsx("ul", {
+					className: "flex flex-wrap gap-1.5",
+					"aria-label": "Filters",
+					children: chips.map((chip) => /* @__PURE__ */ jsx("li", {
+						className: chipClass,
+						children: chip.label
+					}, chip.key))
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [of.controls && /* @__PURE__ */ jsx(SearchControls, {
+					model,
+					view,
+					recordKey,
+					row,
+					fields: of.controls
+				}), onDelete && /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					"aria-label": `Delete ${title}`,
+					onClick: onDelete,
+					children: /* @__PURE__ */ jsx(Trash2, {
+						className: "size-3.5",
+						"aria-hidden": true
+					})
+				})]
+			})]
+		}), /* @__PURE__ */ jsx(EmbeddedList, {
+			model: target,
+			view: targetView,
+			filter: unseen ? unseenFilter(filter, unseen.field, row[unseen.seenAt]) : filter,
+			sort: unseen ? `${unseen.field} desc` : defaultOrderBy(target, targetView),
+			limit: of.limit ?? defaultLimit,
+			display: cards?.name ?? tableDisplay,
+			row: true,
+			empty: unseen ? `No new ${plural} since you last looked.` : `No ${plural} match.`,
+			viewAll: {
+				filter,
+				label: "View all results",
+				...unseen && { onOpen: () => markSeen.mutate((/* @__PURE__ */ new Date()).toISOString()) }
+			}
+		})]
+	});
+};
+//#endregion
+export { SavedSearchSection };

package/dist/app/searches/saved-search.js

@@ -0,0 +1,94 @@
+import { humanize } from "../../live/naming.js";
+import { activeChips } from "../../filter-panel/filter-state.js";
+import { textToState } from "../../live/filter-string.js";
+import { rangeFormat, widgetFields } from "../../live/view-fields.js";
+import { createWhere, enumLabel, parseFilter, printFilter } from "@protobase/schema";
+//#region src/app/searches/saved-search.ts
+const where = createWhere();
+const span = {
+	start: 0,
+	end: 0
+};
+/** The relation fields a filter chooses values of through its facets, each with the values it chooses. */
+const chosenRelations = (model, view, text) => {
+	const parsed = textToState(widgetFields(view, model), text);
+	if (!parsed.ok) return {};
+	return Object.fromEntries(Object.entries(parsed.state.facets).filter(([field, values]) => model.fields[field]?.type === "relation" && values.length > 0));
+};
+/**
+* The panel's widgets named as the list page names them, without counts: what reading a saved filter back into chips
+* needs. Enum values take the view's value labels, relation values the names in `names`.
+*/
+const namedConfig = (model, view, names) => {
+	const label = (name) => view?.fields[name]?.label ?? humanize(name);
+	const skeleton = widgetFields(view, model);
+	return {
+		...skeleton,
+		facets: skeleton.facets.map((group) => {
+			if (group.flags) return {
+				...group,
+				options: group.options.map((option) => ({
+					...option,
+					label: label(option.value)
+				}))
+			};
+			const values = model.fields[group.id]?.enumValues ?? [];
+			const labels = model.fields[group.id]?.type === "enum" ? Object.fromEntries(values.map((value) => [value, enumLabel(value, view?.fields[group.id]?.valueLabels)])) : names[group.id] ?? {};
+			return {
+				...group,
+				label: label(group.id),
+				labels
+			};
+		}),
+		ranges: (skeleton.ranges ?? []).map((range) => ({
+			...range,
+			label: label(range.id),
+			format: rangeFormat(view, range.id)
+		})),
+		toggles: skeleton.toggles?.map((toggle) => ({
+			...toggle,
+			label: label(toggle.id)
+		}))
+	};
+};
+/**
+* A saved filter as the chips the list page shows for it, then a chip per condition no widget holds: the search text
+* in quotes, or the condition as written. One chip saying so when the filter cannot be read.
+*/
+const filterChips = (model, view, text, names = {}) => {
+	const config = namedConfig(model, view, names);
+	const parsed = textToState(config, text);
+	if (!parsed.ok) return [{
+		key: "unreadable",
+		label: "A filter that cannot be read"
+	}];
+	const extras = parsed.extras.map((clause, index) => ({
+		key: `extra:${index}`,
+		label: clause.kind === "search" ? `"${clause.text}"` : printFilter(clause)
+	}));
+	return [...activeChips(config, parsed.state), ...extras];
+};
+/** The names the list page's panel knows for its facets' values, to name a search saved from it. */
+const facetNames = (config) => Object.fromEntries(config.facets.filter((group) => !group.flags).map((group) => [group.id, {
+	...group.labels,
+	...Object.fromEntries(group.options.map((option) => [option.value, option.label]))
+}]));
+/** The name a new search gets: its chips, one after the other. */
+const searchName = (chips) => chips.map((chip) => chip.label).join(", ");
+/**
+* The search's filter narrowed to the records new since the user last opened its results: those whose `field` is after
+* `seenAt`. Without a `seenAt` every record is new.
+*/
+const unseenFilter = (text, field, seenAt) => {
+	if (typeof seenAt !== "string" || seenAt === "") return text;
+	const after = where.gt(field, {
+		kind: "timestamp",
+		value: new Date(seenAt).toISOString(),
+		span
+	});
+	const parsed = parseFilter(text);
+	if (!parsed.ok) throw new Error(`The saved filter cannot be read: ${parsed.errors.map((error) => error.message).join("; ")}`);
+	return printFilter(parsed.ast ? where.and(parsed.ast, after) : after);
+};
+//#endregion
+export { chosenRelations, facetNames, filterChips, searchName, unseenFilter };