@protobase/ui 0.14.0 → 0.14.2

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

@@ -1,8 +1,8 @@
 import { humanize } from "../../live/naming.js";
 import { displayRow } from "../displays/list-displays.js";
 import { columnsFromModel } from "../../live/columns-from-model.js";
-import { withFieldTypeCells } from "../field-types/field-type-cells.js";
 import { scopeOf } from "../pages/use-layout-data.js";
+import { withFieldTypeCells } from "../field-types/field-type-cells.js";
 import { FieldValue } from "../pages/field-value.js";
 import { usePathValue } from "../pages/use-path-value.js";
 import { jsx } from "react/jsx-runtime";

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

@@ -1,28 +1,33 @@
 import { keys } from "../../data/query-keys.js";
 import { useClient } from "../../data/api-provider.js";
 import { recordId } from "../../live/model-helpers.js";
-import { withLabels } from "../../live/relation-labels.js";
+import { listLabels, withLabels } from "../../live/relation-labels.js";
+import { listPhotos, withPhotos } from "../../live/row-photos.js";
 import { useAdminMeta } from "../meta-gate.js";
-import { keepPreviousData, useQuery, useQueryClient } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 //#region src/app/embedded-list/use-embedded-rows.ts
 /**
 * The first `limit` records in `orderBy` order, as the list page's table and displays get them: relations among
-* `fields` as `{ id, name }`. A filter through a join resource may hold hundreds of keys, so it goes in a JSON body.
+* `fields` as `{ id, name }`, named in the same call, with the photos of its cards. A filter through a join resource may hold hundreds of keys, so it
+* goes in a JSON body.
 */
 const useEmbeddedRows = ({ model, filter, orderBy, limit, fields }) => {
 	const client = useClient();
-	const queryClient = useQueryClient();
 	const { resources, views } = useAdminMeta();
 	return useQuery({
 		queryKey: [...keys.list(model.name, filter, orderBy, limit, "embedded"), fields.join(",")],
 		placeholderData: keepPreviousData,
 		queryFn: async () => {
+			const labels = listLabels(resources, views, model, fields);
+			const photos = listPhotos(views[model.name]);
 			const page = await client.search(model.name, {
 				filter: filter || void 0,
 				orderBy: orderBy || void 0,
-				pageSize: limit
+				pageSize: limit,
+				labels,
+				photos
 			});
-			return (await withLabels(queryClient, client, resources, views, model, fields, page.items)).map((row, index) => ({
+			return withLabels(resources, model, fields, withPhotos(model, page.items, page.photos), page.labels).map((row, index) => ({
 				...row,
 				id: recordId(model, page.items[index])
 			}));

package/dist/app/list-page.js

@@ -1,4 +1,5 @@
 import { useIsDesktop } from "../lib/use-media-query.js";
+import { usePageScroll } from "../app-shell/page-scroll.js";
 import { PageHeader } from "../app-shell/page-header.js";
 import { useAuth } from "../auth/auth-provider.js";
 import { Button } from "../primitives/button.js";
@@ -7,6 +8,7 @@ import { humanize } from "../live/naming.js";
 import { useProjectUi } from "./pages/project-ui.js";
 import { loadedFields, shownDisplay } from "./displays/list-displays.js";
 import { parseSort, sortToOrderBy } from "./list-order.js";
+import { listedResource } from "./current-address.js";
 import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
 import { useAppAddress } from "./use-app-address.js";
 import { ErrorBanner } from "./error-banner.js";
@@ -26,6 +28,7 @@ import { useLiveRows } from "../live/use-live-rows.js";
 import { Sheet } from "../primitives/sheet.js";
 import { useDeleteFlow } from "./delete/use-delete-flow.js";
 import { useRestore } from "./delete/use-restore.js";
+import { SignInPrompt } from "../auth/sign-in-prompt.js";
 import { ListCards } from "./displays/list-cards.js";
 import { MapDisplay } from "./displays/map-display.js";
 import { CustomDisplay } from "./displays/custom-display.js";
@@ -35,6 +38,7 @@ import { useListScroll } from "./list-scroll.js";
 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 { useMemo, useState } from "react";
 import { Plus, SlidersHorizontal } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -43,10 +47,18 @@ import { createWhere } from "@protobase/schema";
 //#region src/app/list-page.tsx
 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`).
+*/
 const ListPage = ({ address }) => {
-	const { resources } = useAdminMeta();
+	const { resources, views, signIn } = useAdminMeta();
 	const model = resources[address.resource];
-	if (!model) return /* @__PURE__ */ jsxs(Notice, {
+	const prompt = signIn?.[address.resource];
+	if (!model) return prompt ? /* @__PURE__ */ jsx(SignInPrompt, {
+		as: "page",
+		prompt: prompt.signIn
+	}) : /* @__PURE__ */ jsxs(Notice, {
 		title: "Not found",
 		children: [
 			"There is no resource called ",
@@ -54,12 +66,31 @@ const ListPage = ({ address }) => {
 			"."
 		]
 	});
+	const view = views[address.resource];
+	const listed = listedResource(resources, views, address.resource);
+	if (view && listed.listOf) {
+		const target = listed.model;
+		return /* @__PURE__ */ jsx(SavedList, {
+			model,
+			view,
+			target,
+			children: (scope) => /* @__PURE__ */ jsx(LoadedList, {
+				model: target,
+				address,
+				scope,
+				heading: {
+					title: view.names?.plural ?? humanize(model.name),
+					subtitle: view.help
+				}
+			})
+		});
+	}
 	return /* @__PURE__ */ jsx(LoadedList, {
 		model,
 		address
 	});
 };
-const LoadedList = ({ model, address }) => {
+const LoadedList = ({ model, address, scope, heading }) => {
 	const meta = useAdminMeta();
 	const { set, go } = useAppAddress();
 	const resource = model.name;
@@ -78,14 +109,16 @@ const LoadedList = ({ model, address }) => {
 	const { orderBy, filterLayout: layout } = address;
 	const desktop = useIsDesktop();
 	const [sheetOpen, setSheetOpen] = useState(false);
+	const scoped = scope ? [...extras, scope] : extras;
 	const config = useFilterConfig({
 		model,
 		resources: meta.resources,
 		views: meta.views,
 		view,
 		state,
-		extras
+		extras: scoped
 	});
+	const loadFilter = scope ? stateToText(fields, state, scoped) : parsed.ok ? filterText : "";
 	const loaded = useMemo(() => loadedFields(model, view, columns.map((column) => column.id)), [
 		model,
 		view,
@@ -96,10 +129,12 @@ const LoadedList = ({ model, address }) => {
 		views: meta.views,
 		model,
 		columns: loaded,
-		filter: parsed.ok ? filterText : "",
+		filter: loadFilter,
 		orderBy
 	});
 	const display = shownDisplay(view, address.display);
+	const pageScroll = !display || display.kind === "cards";
+	usePageScroll(pageScroll);
 	const displayRows = useDisplayRows(model, rows.page, rows.key, display?.kind === "custom");
 	const scroll = useListScroll();
 	const titleField = recordTitleField(model, view);
@@ -208,7 +243,7 @@ const LoadedList = ({ model, address }) => {
 			})
 		]
 	});
-	const createButton = can(permissions, "create") && /* @__PURE__ */ jsxs(Button, {
+	const createButton = !scope && can(permissions, "create") && /* @__PURE__ */ jsxs(Button, {
 		variant: "primary",
 		onClick: () => go({
 			kind: "create",
@@ -255,7 +290,8 @@ const LoadedList = ({ model, address }) => {
 		}] : [],
 		rowNumbers: false,
 		pinKey: auth.kind === "signed-in" ? pinnedStorageKey(auth.user.id, resource) : void 0,
-		className: "min-h-0 flex-1"
+		scroll: "parent",
+		className: "flex-1"
 	}) : /* @__PURE__ */ jsx("div", { className: "flex-1 rounded-lg border bg-surface" });
 	const cardsList = {
 		...rows,
@@ -274,11 +310,12 @@ const LoadedList = ({ model, address }) => {
 			model,
 			view,
 			display,
-			filter: parsed.ok ? filterText : "",
+			filter: loadFilter,
 			orderBy,
 			fields: loaded,
 			at: address.map,
-			onMove: (map) => set({ map })
+			onMove: (map) => set({ map }),
+			flush: true
 		});
 		return /* @__PURE__ */ jsx(CustomDisplay, {
 			display,
@@ -291,8 +328,8 @@ const LoadedList = ({ model, address }) => {
 		children: [
 			remove.dialogs,
 			/* @__PURE__ */ jsx(PageHeader, {
-				title: plural,
-				subtitle: view?.help,
+				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
 			}),
@@ -309,12 +346,15 @@ const LoadedList = ({ model, address }) => {
 				chart: view.chart,
 				title: `${plural} created`,
 				noun: plural.toLowerCase(),
-				filter: parsed.ok ? filterText : ""
+				filter: loadFilter
 			}),
 			desktop ? desktopToolbar : phoneFilters,
 			desktop && layout === "panel" ? /* @__PURE__ */ jsxs("div", {
 				className: "flex min-h-0 flex-1 gap-4",
-				children: [panel, shown]
+				children: [/* @__PURE__ */ jsx("div", {
+					className: pageScroll ? "sticky top-[calc(var(--pb-sticky-top,0px)+1rem)] flex max-h-[calc(100dvh-var(--pb-sticky-top,0px)-var(--pb-sticky-bottom,0px)-2rem)] shrink-0 self-start" : "flex shrink-0",
+					children: panel
+				}), shown]
 			}) : shown
 		]
 	});

package/dist/app/menu-icons.js

@@ -1,11 +1,13 @@
-import { BookOpen, Building2, CreditCard, ExternalLink, FileText, KeyRound, LayoutDashboard, LifeBuoy, Mail, Receipt, Settings, ShieldCheck, Users } from "lucide-react";
+import { Bell, BookOpen, 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,
 	building: Building2,
 	"credit-card": CreditCard,
 	"external-link": ExternalLink,
 	"file-text": FileText,
+	heart: Heart,
 	key: KeyRound,
 	"layout-dashboard": LayoutDashboard,
 	"life-buoy": LifeBuoy,

package/dist/app/named-icon.js

@@ -1,12 +1,14 @@
-import { Bed, FileText, RulerDimensionLine, Send, Wallet } from "lucide-react";
+import { Bed, Bell, FileText, Heart, RulerDimensionLine, Send, Wallet } from "lucide-react";
 //#region src/app/named-icon.ts
-/** The icons an action's or a field's `icon` may name. */
+/** The icons an action's, a field's or a sign-in prompt's `icon` may name. */
 const byName = {
 	wallet: Wallet,
 	"file-text": FileText,
 	send: Send,
 	ruler: RulerDimensionLine,
-	bed: Bed
+	bed: Bed,
+	heart: Heart,
+	bell: Bell
 };
 /** 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/nav-from-meta.js

@@ -17,7 +17,8 @@ const groupLabels = {
 * One sidebar group per `nav.group` (default: the database schema, and "Pages" for pages); `nav.hidden` and a place in
 * 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.
+* 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.
 */
 const navFromMeta = (meta, basePath = "", recent = {}) => {
 	const groups = /* @__PURE__ */ new Map();
@@ -64,6 +65,25 @@ const navFromMeta = (meta, basePath = "", recent = {}) => {
 		groups.set(groupName, group);
 		orders.set(model.name, view.nav?.order ?? Number.MAX_SAFE_INTEGER);
 	}
+	for (const entry of Object.values(meta.signIn ?? {})) {
+		if (entry.nav?.hidden || inMenu.has(entry.resource)) continue;
+		const groupName = entry.nav?.group ?? "Account";
+		const group = groups.get(groupName) ?? {
+			label: groupName,
+			items: []
+		};
+		group.items.push({
+			id: entry.resource,
+			label: entry.names?.plural ?? humanize(entry.resource),
+			icon: iconFor(entry.resource),
+			href: appPath({
+				kind: "list",
+				resource: entry.resource
+			}, basePath)
+		});
+		groups.set(groupName, group);
+		orders.set(entry.resource, entry.nav?.order ?? Number.MAX_SAFE_INTEGER);
+	}
 	for (const status of meta.sources ?? []) {
 		if (status.state !== "error") continue;
 		const group = groups.get(status.source.label) ?? {

package/dist/app/pages/blocks/card-row.js

@@ -1,8 +1,8 @@
 import { Skeleton } from "../../../primitives/skeleton.js";
 import { useAdminMeta } from "../../meta-gate.js";
 import { ErrorBanner } from "../../error-banner.js";
-import { RecordScope } from "../record-scope.js";
 import { scopeOf, useListPage } from "../use-layout-data.js";
+import { RecordScope } from "../record-scope.js";
 import { propsOf } from "./block-props.js";
 import { CardFrame, Quiet } from "./card-frame.js";
 import { jsx } from "react/jsx-runtime";

package/dist/app/pages/blocks/modal-form.js

@@ -10,8 +10,8 @@ import { FieldEditor } from "../../field-editor.js";
 import { can } from "../../permissions.js";
 import { Field } from "../../../record-view/field.js";
 import { createBody, isChosen } from "../../create/create-values.js";
-import { useLayoutRecord } from "../record-scope.js";
 import { useFirstRecord, useRefreshResource } from "../use-layout-data.js";
+import { useLayoutRecord } from "../record-scope.js";
 import { propsOf } from "./block-props.js";
 import { useState } from "react";
 import { isApiError } from "@protobase/client";

package/dist/app/pages/blocks/record-card.js

@@ -1,8 +1,8 @@
 import { Skeleton } from "../../../primitives/skeleton.js";
 import { useAdminMeta } from "../../meta-gate.js";
 import { ErrorBanner } from "../../error-banner.js";
-import { RecordScope } from "../record-scope.js";
 import { useFirstRecord } from "../use-layout-data.js";
+import { RecordScope } from "../record-scope.js";
 import { propsOf } from "./block-props.js";
 import { CardFrame, Quiet } from "./card-frame.js";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,7 +1,7 @@
 import { useClient } from "../../../data/api-provider.js";
 import { useAdminMeta } from "../../meta-gate.js";
-import { useLayoutRecord } from "../record-scope.js";
 import { countQuery } from "../use-layout-data.js";
+import { useLayoutRecord } from "../record-scope.js";
 import { propsOf } from "./block-props.js";
 import { usePathValues } from "../use-path-value.js";
 import { useMemo } from "react";

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

@@ -1,8 +1,8 @@
 import { Skeleton } from "../../../primitives/skeleton.js";
 import { useAdminMeta } from "../../meta-gate.js";
 import { AppLink } from "../../use-app-address.js";
-import { useLayoutRecord } from "../record-scope.js";
 import { useCount } from "../use-layout-data.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";

package/dist/app/pages/use-run-action.js

@@ -4,8 +4,8 @@ import { useProjectUi } from "./project-ui.js";
 import { useAdminMeta, usePermissions } from "../meta-gate.js";
 import { useAppAddress } from "../use-app-address.js";
 import { can } from "../permissions.js";
-import { fillHref } from "./action-href.js";
 import { useRefreshResource } from "./use-layout-data.js";
+import { fillHref } from "./action-href.js";
 import { useState } from "react";
 import { fillAddress } from "@protobase/schema/internal";
 //#region src/app/pages/use-run-action.ts

package/dist/app/saved/favorite-button.js

@@ -0,0 +1,49 @@
+import { cn } from "../../lib/cn.js";
+import { SignInPrompt } from "../../auth/sign-in-prompt.js";
+import { useFavorite } from "./use-favorite.js";
+import { useState } from "react";
+import { Heart } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/saved/favorite-button.tsx
+/**
+* A heart that saves the card's record for the signed-in user, pressed while it is saved, or, for a visitor, opens the
+* sign-in prompt of the saved records' resource. It sits over the card's link, beside it in the document, so pressing
+* it does not open the record; the card's list item must be `relative`.
+*/
+const FavoriteButton = ({ favorite, recordKey, target, className }) => {
+	const state = useFavorite(favorite, recordKey, target);
+	const [prompting, setPrompting] = useState(false);
+	if (!state.mode) return null;
+	const label = favorite.label ?? "Favorite";
+	const base = cn("absolute right-2 top-2 flex size-8 items-center justify-center rounded-full bg-background/85 text-foreground shadow-sm transition-colors hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30", className);
+	if (state.mode === "sign-in") return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": label,
+		"aria-haspopup": "dialog",
+		className: base,
+		onClick: () => setPrompting(true),
+		children: /* @__PURE__ */ jsx(Heart, {
+			className: "size-4",
+			"aria-hidden": true
+		})
+	}), /* @__PURE__ */ jsx(SignInPrompt, {
+		as: "dialog",
+		prompt: state.prompt,
+		open: prompting,
+		onClose: () => setPrompting(false)
+	})] });
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": label,
+		"aria-pressed": state.saved,
+		"aria-disabled": !state.ready,
+		className: base,
+		onClick: () => state.ready && state.toggle(),
+		children: /* @__PURE__ */ jsx(Heart, {
+			className: cn("size-4", state.saved && "fill-current text-danger"),
+			"aria-hidden": true
+		})
+	});
+};
+//#endregion
+export { FavoriteButton };

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

@@ -0,0 +1,43 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { PageHeader } from "../../app-shell/page-header.js";
+import { humanize } from "../../live/naming.js";
+import { ErrorBanner } from "../error-banner.js";
+import { savedScope } from "./saved-records.js";
+import { useSavedRecords } from "./use-saved-records.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/saved/saved-list.tsx
+/**
+* The list page of a view with `listOf`: the records the user's saved ones point at, in their own resource's list, once
+* the saved ones have loaded; until then, or when there are none, the page says so under the view's title.
+*/
+const SavedList = ({ model, view, target, children }) => {
+	const saved = useSavedRecords(model.name, view.listOf, true);
+	const plural = view.names?.plural ?? humanize(model.name);
+	const frame = (body) => /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-0 flex-1 flex-col gap-3 px-5 py-4",
+		children: [/* @__PURE__ */ jsx(PageHeader, {
+			title: plural,
+			subtitle: view.help
+		}), body]
+	});
+	if (saved.error) return frame(/* @__PURE__ */ jsx(ErrorBanner, {
+		title: `Could not load your ${plural.toLowerCase()}`,
+		error: saved.error
+	}));
+	if (!saved.data) return frame(/* @__PURE__ */ jsx("div", {
+		className: "grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-3",
+		children: Array.from({ length: 3 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-24" }, index))
+	}));
+	const scope = savedScope(target, saved.data);
+	if (!scope) return frame(/* @__PURE__ */ jsxs("p", {
+		className: "py-8 text-center text-[13px] text-muted-foreground",
+		children: [
+			"No ",
+			plural.toLowerCase(),
+			" yet."
+		]
+	}));
+	return children(scope);
+};
+//#endregion
+export { SavedList };

package/dist/app/saved/saved-records.js

@@ -0,0 +1,38 @@
+import { recordKey } from "../../live/model-helpers.js";
+import { encodeKey } from "@protobase/schema/internal";
+import { createWhere } from "@protobase/schema";
+//#region src/app/saved/saved-records.ts
+const where = createWhere();
+const relationValue = (value) => {
+	if (typeof value === "string" || typeof value === "number") return value;
+	if (value && typeof value === "object" && "id" in value) return relationValue(value.id);
+};
+/** The saved records among listed rows of `model`, by the relation `field`; rows without a value are left out. */
+const savedRecordsOf = (model, field, rows) => rows.flatMap((row) => {
+	const target = relationValue(row[field]);
+	return target === void 0 ? [] : [{
+		key: encodeKey(recordKey(model, row)),
+		target
+	}];
+});
+/** The saved record of the record with this key, the text form the record API takes, if it is saved. */
+const savedFor = (saved, key) => saved.find((entry) => encodeKey(entry.target) === key);
+/** The saved records with one more, until the server answers with its key. */
+const withSaved = (saved, target) => [...saved, {
+	key: "",
+	target
+}];
+/** The saved records without the one of the record with this key. */
+const withoutSaved = (saved, key) => saved.filter((entry) => encodeKey(entry.target) !== key);
+/**
+* The filter of the records the saved ones point at, on the target's single-column key; undefined when there are none,
+* as `in()` needs at least one value.
+*/
+const savedScope = (target, saved) => {
+	const [key] = target.primaryKey;
+	if (target.primaryKey.length !== 1 || key === void 0) throw new Error(`${target.name} has a composite key, so its saved records cannot be listed`);
+	const values = [...new Set(saved.map((entry) => entry.target))];
+	return values.length === 0 ? void 0 : where.in(key, values);
+};
+//#endregion
+export { savedFor, savedRecordsOf, savedScope, withSaved, withoutSaved };

package/dist/app/saved/use-favorite.js

@@ -0,0 +1,62 @@
+import { useClient } from "../../data/api-provider.js";
+import { useToast } from "../../toasts/toast-provider.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { can } from "../permissions.js";
+import { useRefreshResource } from "../pages/use-layout-data.js";
+import { savedFor, withSaved, withoutSaved } from "./saved-records.js";
+import { savedRecordsKey, useSavedRecords } from "./use-saved-records.js";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+//#region src/app/saved/use-favorite.ts
+const message = (error) => error instanceof Error ? error.message : "Something went wrong";
+/**
+* A card's favorite button: `save` for someone who can list, create and delete the saved records, `sign-in` for a
+* visitor the saved records' resource asks to sign in (`prompt`), nothing otherwise. A press saves the card's record,
+* or takes it off, at once on screen; a refused write puts it back and says why.
+*/
+const useFavorite = (favorite, key, target) => {
+	const meta = useAdminMeta();
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const toast = useToast();
+	const refresh = useRefreshResource();
+	const { resource, field } = favorite;
+	const permissions = meta.permissions[resource];
+	const usable = meta.resources[resource] !== void 0 && permissions !== void 0 && can(permissions, "create") && can(permissions, "delete");
+	const prompt = meta.signIn?.[resource]?.signIn;
+	const saved = useSavedRecords(resource, field, usable);
+	const current = saved.data && savedFor(saved.data, key);
+	const cacheKey = savedRecordsKey(resource, field);
+	const toggle = useMutation({
+		mutationFn: async (existing) => {
+			if (existing) await client.remove(resource, existing.key);
+			else await client.create(resource, { [field]: target });
+		},
+		onMutate: async (existing) => {
+			await queryClient.cancelQueries({
+				queryKey: cacheKey,
+				exact: true
+			});
+			const before = queryClient.getQueryData(cacheKey);
+			queryClient.setQueryData(cacheKey, (list = []) => existing ? withoutSaved(list, key) : withSaved(list, target));
+			return { before };
+		},
+		onError: (error, existing, context) => {
+			queryClient.setQueryData(cacheKey, context?.before);
+			toast.show({
+				state: "error",
+				title: existing ? "Could not take it off" : "Could not save it",
+				description: message(error)
+			});
+		},
+		onSettled: () => refresh(resource)
+	});
+	return {
+		mode: usable ? "save" : prompt ? "sign-in" : void 0,
+		prompt,
+		saved: current !== void 0,
+		ready: saved.data !== void 0 && !toggle.isPending,
+		toggle: () => toggle.mutate(current)
+	};
+};
+//#endregion
+export { useFavorite };

package/dist/app/saved/use-saved-records.js

@@ -0,0 +1,36 @@
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { savedRecordsOf } from "./saved-records.js";
+import { useQuery } from "@tanstack/react-query";
+//#region src/app/saved/use-saved-records.ts
+/** Where the user's saved records of `resource` by `field` are cached; a list key, so a write to the resource refreshes it. */
+const savedRecordsKey = (resource, field) => keys.list(resource, "", "", 500, `saved:${field}`);
+/**
+* The signed-in user's saved records of `resource`, each with the key its relation `field` points at: every one, page
+* by page, as the API lists only a user's own records of a resource with an owner. Loads only while `enabled`.
+*/
+const useSavedRecords = (resource, field, enabled) => {
+	const client = useClient();
+	const model = useAdminMeta().resources[resource];
+	return useQuery({
+		queryKey: savedRecordsKey(resource, field),
+		enabled: enabled && model !== void 0,
+		queryFn: async () => {
+			const rows = [];
+			let pageToken;
+			do {
+				const page = await client.list(resource, {
+					pageSize: 500,
+					fields: [...model.primaryKey, field],
+					...pageToken && { pageToken }
+				});
+				rows.push(...page.items);
+				pageToken = page.nextPageToken || void 0;
+			} while (pageToken);
+			return savedRecordsOf(model, field, rows);
+		}
+	});
+};
+//#endregion
+export { savedRecordsKey, useSavedRecords };

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

@@ -1,5 +1,5 @@
 import { useIsXs } from "../lib/use-media-query.js";
-import { changedList, currentAddress, listDefaults } from "./current-address.js";
+import { changedList, currentAddress, listDefaults, listedResource } from "./current-address.js";
 import { useAdminMeta } from "./meta-gate.js";
 import { Link, useRouter } from "./router.js";
 import { useCallback, useMemo } from "react";
@@ -22,7 +22,10 @@ const useAppAddress = () => {
 		query,
 		pageNames
 	]);
-	const defaults = useCallback((resource) => listDefaults(resources[resource], views[resource], xs), [
+	const defaults = useCallback((resource) => {
+		const listed = listedResource(resources, views, resource);
+		return listDefaults(listed.model, listed.view, xs);
+	}, [
 		resources,
 		views,
 		xs