@protobase/ui 0.15.5 → 0.16.1

package/dist/app/record-row/record-row.js

@@ -0,0 +1,93 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { displayRow } from "../displays/list-displays.js";
+import { usePagedRows } from "../../data-grid/use-paged-rows.js";
+import { RecordCard } from "../displays/record-card.js";
+import { rowOffset } from "./row-window.js";
+import { useRowScroll } from "./use-row-scroll.js";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/record-row/record-row.tsx
+const arrowClass = "absolute top-1/2 z-10 hidden size-8 -translate-y-1/2 items-center justify-center rounded-full border border-border-strong bg-background shadow-pop hover:bg-muted sm:flex";
+/** Stands in for the cards before or after the ones drawn, as wide as they would be. */
+const Spacer = ({ cards }) => cards > 0 ? /* @__PURE__ */ jsx("li", {
+	"aria-hidden": true,
+	className: "shrink-0",
+	style: { width: rowOffset(cards) - 12 }
+}) : null;
+/**
+* Records as the cards of their list, in one row that scrolls sideways by touch, trackpad or its arrow buttons: only the
+* cards near the view are drawn, and the records are loaded through the list API in pages as the row scrolls to them.
+* Each card links to its record.
+*/
+const RecordRow = ({ model, view, display, source, label, isNew }) => {
+	const { total } = source;
+	const scroll = useRowScroll(total);
+	const getRow = usePagedRows({
+		total,
+		rowAt: source.rowAt,
+		loadRows: source.loadRows,
+		latencyMs: 0
+	}, scroll.start, Math.max(scroll.start, scroll.end - 1));
+	const indexes = Array.from({ length: scroll.end - scroll.start }, (_, offset) => scroll.start + offset);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative min-w-0",
+		children: [
+			/* @__PURE__ */ jsxs("ul", {
+				ref: scroll.ref,
+				"aria-label": label,
+				className: "flex snap-x gap-3 overflow-x-auto overflow-y-hidden pb-1",
+				style: { scrollbarWidth: "thin" },
+				children: [
+					/* @__PURE__ */ jsx(Spacer, { cards: scroll.start }),
+					indexes.map((index) => {
+						const loaded = getRow(index);
+						if (!loaded) return /* @__PURE__ */ jsx("li", {
+							"aria-hidden": true,
+							className: "shrink-0",
+							style: { width: 256 },
+							children: /* @__PURE__ */ jsx(Skeleton, { className: "h-full min-h-24 rounded-lg" })
+						}, `skeleton-${index}`);
+						const row = displayRow(model, loaded);
+						return /* @__PURE__ */ jsx("li", {
+							"aria-posinset": index + 1,
+							"aria-setsize": total,
+							className: "grid shrink-0 snap-start grid-cols-[minmax(0,1fr)]",
+							style: { width: 256 },
+							children: /* @__PURE__ */ jsx(RecordCard, {
+								model,
+								view,
+								display,
+								row,
+								swipe: false,
+								mark: isNew?.(row) ? "New" : void 0
+							})
+						}, row.key);
+					}),
+					/* @__PURE__ */ jsx(Spacer, { cards: total - scroll.end })
+				]
+			}),
+			scroll.back && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": `Previous ${label.toLowerCase()}`,
+				onClick: () => scroll.page(-1),
+				className: `${arrowClass} -left-3`,
+				children: /* @__PURE__ */ jsx(ChevronLeft, {
+					className: "size-4",
+					"aria-hidden": true
+				})
+			}),
+			scroll.on && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": `Next ${label.toLowerCase()}`,
+				onClick: () => scroll.page(1),
+				className: `${arrowClass} -right-3`,
+				children: /* @__PURE__ */ jsx(ChevronRight, {
+					className: "size-4",
+					"aria-hidden": true
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { RecordRow };

package/dist/app/record-row/row-window.js

@@ -0,0 +1,20 @@
+//#region src/app/record-row/row-window.ts
+const step = 268;
+/** How many cards beyond each edge of the view are drawn, so a short scroll shows cards already there. */
+const overscan = 3;
+/**
+* The cards of a row of `total` to draw when it is scrolled `scrollLeft` into a view `width` wide: from `start` up to
+* `end` (not included), the ones in view and `overscan` more on each side, none past either end.
+*/
+const rowWindow = (scrollLeft, width, total) => {
+	const first = Math.floor(Math.max(0, scrollLeft) / step);
+	const last = Math.ceil((Math.max(0, scrollLeft) + width) / step);
+	return {
+		start: Math.max(0, first - overscan),
+		end: Math.min(total, last + overscan)
+	};
+};
+/** The width of the cards before `index`, with their gaps: what stands in for the cards not drawn. */
+const rowOffset = (index) => index * step;
+//#endregion
+export { rowOffset, rowWindow };

package/dist/app/record-row/saved-record-row.js

@@ -0,0 +1,42 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { humanize } from "../../live/naming.js";
+import { listedResource } from "../current-address.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { ErrorBanner } from "../error-banner.js";
+import { savedScope } from "../saved/saved-records.js";
+import { useSavedRecords } from "../saved/use-saved-records.js";
+import { RecordRowBody } from "./record-row-body.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/record-row/saved-record-row.tsx
+/**
+* The records the user's saved ones of a view with `listOf` point at, such as the listings among their favorites, as a
+* row of their own resource's cards, with "View all" to the saved records' list. `empty` when there are none.
+*/
+const SavedRecordRow = ({ model, view, empty, ...props }) => {
+	const { resources, views } = useAdminMeta();
+	const listed = listedResource(resources, views, model.name);
+	const saved = useSavedRecords(model.name, view.listOf, true);
+	const plural = (view.names?.plural ?? humanize(model.name)).toLowerCase();
+	if (!listed.listOf) return null;
+	if (saved.error) return /* @__PURE__ */ jsx(ErrorBanner, {
+		title: `Could not load your ${plural}`,
+		error: saved.error
+	});
+	if (!saved.data) return /* @__PURE__ */ jsx(Skeleton, { className: "h-24" });
+	const scope = savedScope(listed.model, saved.data);
+	if (!scope) return /* @__PURE__ */ jsx("p", {
+		className: "text-[13px] text-muted-foreground",
+		children: empty ?? `No ${plural} yet.`
+	});
+	return /* @__PURE__ */ jsx(RecordRowBody, {
+		...props,
+		model: listed.model,
+		view: listed.view,
+		filter: "",
+		scope,
+		list: model.name,
+		empty
+	});
+};
+//#endregion
+export { SavedRecordRow };

package/dist/app/record-row/use-row-scroll.js

@@ -0,0 +1,51 @@
+import { rowOffset, rowWindow } from "./row-window.js";
+import { useLayoutEffect, useRef, useState } from "react";
+//#region src/app/record-row/use-row-scroll.ts
+/**
+* A record row's sideways scroll: `ref` goes on the scrolling list. Gives the cards to draw (`start` to `end`), whether
+* it can scroll back or on, and `page`, which scrolls a view's width of cards either way.
+*/
+const useRowScroll = (total) => {
+	const ref = useRef(null);
+	const [view, setView] = useState({
+		left: 0,
+		width: 0
+	});
+	useLayoutEffect(() => {
+		const list = ref.current;
+		if (!list) return;
+		const read = () => setView((current) => {
+			const next = {
+				left: list.scrollLeft,
+				width: list.clientWidth
+			};
+			const same = (a, b) => {
+				const [x, y] = [rowWindow(a.left, a.width, total), rowWindow(b.left, b.width, total)];
+				return x.start === y.start && x.end === y.end && a.width === b.width && a.left > 0 === b.left > 0 && Math.abs(a.left - b.left) < 1;
+			};
+			return same(current, next) ? current : next;
+		});
+		read();
+		const observer = new ResizeObserver(read);
+		observer.observe(list);
+		list.addEventListener("scroll", read, { passive: true });
+		return () => {
+			observer.disconnect();
+			list.removeEventListener("scroll", read);
+		};
+	}, [total]);
+	const contentWidth = Math.max(0, rowOffset(total) - 12);
+	const page = (direction) => ref.current?.scrollBy({
+		left: direction * Math.max(rowOffset(1), view.width - 12),
+		behavior: "smooth"
+	});
+	return {
+		ref,
+		...rowWindow(view.left, view.width, total),
+		back: view.left > 0,
+		on: view.left + view.width < contentWidth - 1,
+		page
+	};
+};
+//#endregion
+export { useRowScroll };

package/dist/app/router.js

@@ -1,3 +1,4 @@
+import { RouteLink } from "../primitives/route-link.js";
 import { Button } from "../primitives/button.js";
 import { Dialog } from "../primitives/dialog.js";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
@@ -112,15 +113,13 @@ const Router = ({ basePath = "", initialUrl, children }) => {
 		})]
 	});
 };
-const Link = ({ to, onClick, ...rest }) => {
+/** A link to a path below the base path, as `appPath` writes it, that the router follows without reloading the page. */
+const Link = ({ to, replace, ...rest }) => {
 	const { navigate, basePath } = useRouter();
-	return /* @__PURE__ */ jsx("a", {
-		href: `${basePath}${to}`,
-		onClick: (event) => {
-			onClick?.(event);
-			if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.button !== 0) return;
-			event.preventDefault();
-			navigate(to);
+	return /* @__PURE__ */ jsx(RouteLink, {
+		to: {
+			href: `${basePath}${to}`,
+			onFollow: () => navigate(to, { replace })
 		},
 		...rest
 	});

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

@@ -1,6 +1,6 @@
 import { recordKey } from "../../live/model-helpers.js";
-import { encodeKey } from "@protobase/schema/internal";
 import { createWhere } from "@protobase/schema";
+import { encodeKey } from "@protobase/schema/internal";
 //#region src/app/saved/saved-records.ts
 const where = createWhere();
 const relationValue = (value) => {

package/dist/app/search/search-model.js

@@ -1,7 +1,7 @@
 import { recordKey, recordTitleField } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
-import { encodeKey, matchedSearchField } from "@protobase/schema/internal";
 import { appPath, createWhere, enumLabel, printFilter } from "@protobase/schema";
+import { encodeKey, matchedSearchField } from "@protobase/schema/internal";
 //#region src/app/search/search-model.ts
 const where = createWhere();
 const searchTargets = (meta) => Object.values(meta.resources).flatMap((model) => {

package/dist/app/searches/filter-chip-list.js

@@ -0,0 +1,28 @@
+import { cn } from "../../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/searches/filter-chip-list.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";
+/** What a filter filters on, concisely: its chips as a list labelled "Filters". */
+const FilterChipList = ({ chips, className }) => /* @__PURE__ */ jsx("ul", {
+	className: cn("flex flex-wrap gap-1.5", className),
+	"aria-label": "Filters",
+	children: chips.map((chip) => /* @__PURE__ */ jsx("li", {
+		className: chipClass,
+		children: chip.label
+	}, chip.key))
+});
+/** A filter's chips inside a heading or a link, where a list cannot go: read out one after the other. */
+const InlineFilterChips = ({ chips }) => /* @__PURE__ */ jsx("span", {
+	className: "flex flex-wrap gap-1.5",
+	children: chips.map((chip, index) => /* @__PURE__ */ jsxs("span", {
+		className: chipClass,
+		children: [index > 0 && /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: ", "
+		}), chip.label]
+	}, chip.key))
+});
+/** A search without a name as words, for a label or a question: its chips one after the other. */
+const chipsText = (chips) => chips.map((chip) => chip.label).join(", ");
+//#endregion
+export { FilterChipList, InlineFilterChips, chipsText };

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

@@ -1,17 +1,23 @@
 import { Button } from "../../primitives/button.js";
 import { SignInPrompt } from "../../auth/sign-in-prompt.js";
+import { SearchNameDialog } from "./search-name-dialog.js";
+import { UpdateSearchDialog } from "./update-search-dialog.js";
 import { useSaveSearch } from "./use-save-search.js";
 import { useState } from "react";
-import { Bookmark, BookmarkCheck } from "lucide-react";
+import { Bookmark, BookmarkCheck, BookmarkPlus, RefreshCw } 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.
+* "Save search" on a filtered list: asks for an optional name and 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. On a
+* list opened from a saved search whose filter it no longer has, "Update <search>" asks before giving the search the
+* list's filter, beside "Save as new search".
 */
-const SaveSearchButton = ({ search, filter, name, className }) => {
-	const state = useSaveSearch(search, filter, name);
+const SaveSearchButton = ({ model, view, search, filter, chips, className }) => {
+	const state = useSaveSearch(search, filter);
 	const [prompting, setPrompting] = useState(false);
+	const [confirming, setConfirming] = useState(false);
+	const [naming, setNaming] = useState();
 	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, {
@@ -28,17 +34,75 @@ const SaveSearchButton = ({ search, filter, name, className }) => {
 		open: prompting,
 		onClose: () => setPrompting(false)
 	})] });
+	const saveNew = (title) => {
+		setConfirming(false);
+		if (state.naming) setNaming(title);
+		else state.saveNew(null);
+	};
+	const nameDialog = naming !== void 0 && state.naming && /* @__PURE__ */ jsx(SearchNameDialog, {
+		title: naming,
+		chips,
+		label: state.naming.label,
+		required: state.naming.required,
+		busy: state.creating,
+		onSave: (name) => state.saveNew(name, { onSuccess: () => setNaming(void 0) }),
+		onClose: () => setNaming(void 0)
+	});
+	const opened = state.opened;
+	if (opened) {
+		const saveNewLabel = `Save as new ${state.noun}`;
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsxs(Button, {
+				className,
+				"aria-haspopup": "dialog",
+				"aria-disabled": !state.ready,
+				onClick: () => state.ready && setConfirming(true),
+				children: [/* @__PURE__ */ jsx(RefreshCw, {
+					className: "size-3.5",
+					"aria-hidden": true
+				}), /* @__PURE__ */ jsx("span", {
+					className: "max-w-60 truncate",
+					children: opened.name ? `Update ${opened.name}` : `Update ${state.noun}`
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Button, {
+				className,
+				"aria-haspopup": state.naming ? "dialog" : void 0,
+				"aria-disabled": !state.ready,
+				onClick: () => state.ready && saveNew(saveNewLabel),
+				children: [/* @__PURE__ */ jsx(BookmarkPlus, {
+					className: "size-3.5",
+					"aria-hidden": true
+				}), saveNewLabel]
+			}),
+			confirming && /* @__PURE__ */ jsx(UpdateSearchDialog, {
+				model,
+				view,
+				title: opened.name ? `Update ${opened.name}?` : `Update this ${state.noun}?`,
+				before: opened.filter,
+				after: filter,
+				saveNewLabel,
+				updating: state.updating,
+				creating: state.creating,
+				onUpdate: () => state.update({ onSuccess: () => setConfirming(false) }),
+				onSaveNew: () => saveNew(saveNewLabel),
+				onCancel: () => setConfirming(false)
+			}),
+			nameDialog
+		] });
+	}
 	const Icon = state.saved ? BookmarkCheck : Bookmark;
-	return /* @__PURE__ */ jsxs(Button, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Button, {
 		className,
 		"aria-pressed": state.saved,
+		"aria-haspopup": !state.saved && state.naming ? "dialog" : void 0,
 		"aria-disabled": !state.ready,
-		onClick: () => state.ready && state.toggle(),
+		onClick: () => state.ready && (state.saved ? state.remove() : saveNew(label)),
 		children: [/* @__PURE__ */ jsx(Icon, {
 			className: state.saved ? "size-3.5 text-primary" : "size-3.5",
 			"aria-hidden": true
 		}), label]
-	});
+	}), nameDialog] });
 };
 //#endregion
 export { SaveSearchButton };

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

@@ -0,0 +1,73 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { recordKey } from "../../live/model-helpers.js";
+import { humanize } from "../../live/naming.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { AppLink } from "../use-app-address.js";
+import { ErrorBanner } from "../error-banner.js";
+import { InlineFilterChips } from "./filter-chip-list.js";
+import { useSavedSearches } from "./use-saved-searches.js";
+import { RecordRowBody } from "../record-row/record-row-body.js";
+import { useSearchRow } from "./use-search-row.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { encodeKey } from "@protobase/schema/internal";
+//#region src/app/searches/saved-search-rows.tsx
+const SearchRowItem = ({ model, view, target, targetView, row }) => {
+	const key = encodeKey(recordKey(model, row));
+	const { name, chips, title, body } = useSearchRow({
+		model,
+		of: view.searchesOf,
+		target,
+		targetView,
+		row,
+		recordKey: key
+	});
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": title,
+		className: "flex flex-col gap-3 py-4 first:pt-0 last:pb-0",
+		children: [/* @__PURE__ */ jsx("h3", {
+			className: "text-[14px] font-semibold",
+			children: /* @__PURE__ */ jsx(AppLink, {
+				to: {
+					kind: "record",
+					resource: model.name,
+					key
+				},
+				className: "hover:underline",
+				children: name ?? /* @__PURE__ */ jsx(InlineFilterChips, { chips })
+			})
+		}), /* @__PURE__ */ jsx(RecordRowBody, { ...body })]
+	});
+};
+/**
+* The user's saved searches of a view with `searchesOf`, for a page: each with its name or filters, linking to it, over
+* the row of what it finds (`useSearchRow`), in the order of their list. `empty` when there are none.
+*/
+const SavedSearchRows = ({ model, view, empty }) => {
+	const { resources, views } = useAdminMeta();
+	const of = view.searchesOf;
+	const target = resources[of.resource];
+	const saved = useSavedSearches(model.name, true);
+	const plural = (view.names?.plural ?? humanize(model.name)).toLowerCase();
+	if (!target) return null;
+	if (saved.error) return /* @__PURE__ */ jsx(ErrorBanner, {
+		title: `Could not load your ${plural}`,
+		error: saved.error
+	});
+	if (!saved.data) return /* @__PURE__ */ jsx(Skeleton, { className: "h-40" });
+	if (saved.data.length === 0) return /* @__PURE__ */ jsx("p", {
+		className: "text-[13px] text-muted-foreground",
+		children: empty ?? `No ${plural} yet.`
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col divide-y",
+		children: saved.data.map((row) => /* @__PURE__ */ jsx(SearchRowItem, {
+			model,
+			view,
+			target,
+			targetView: views[of.resource],
+			row
+		}, encodeKey(recordKey(model, row))))
+	});
+};
+//#endregion
+export { SavedSearchRows };

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

@@ -1,96 +1,114 @@
 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 { useToast } from "../../toasts/toast-provider.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 { InlineFilterChips } from "./filter-chip-list.js";
+import { SearchNameDialog } from "./search-name-dialog.js";
+import { RecordRowBody } from "../record-row/record-row-body.js";
 import { SearchControls } from "./search-controls.js";
-import { useFilterChips } from "./use-filter-chips.js";
-import { Trash2 } from "lucide-react";
+import { useSearchRow } from "./use-search-row.js";
+import { useState } from "react";
+import { Pencil, 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;
+const message = (error) => error instanceof Error ? error.message : "Something went wrong";
 /**
-* 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.
+* One saved search on its list page: its name when it has one, and what it filters on as chips, which are its title
+* when it has none; its controls, rename and delete; and the records it finds in a row of their cards that scrolls
+* sideways (`useSearchRow`).
 */
-const SavedSearchSection = ({ model, view, of, target, targetView, row, recordKey, title, onDelete }) => {
+const SavedSearchSection = ({ model, view, of, target, targetView, row, recordKey, canRename, onDelete }) => {
 	const client = useClient();
+	const toast = useToast();
 	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 ?? "*"),
+	const [renaming, setRenaming] = useState(false);
+	const { name, chips, title, body } = useSearchRow({
+		model,
+		of,
+		target,
+		targetView,
+		row,
+		recordKey
+	});
+	const rename = useMutation({
+		mutationFn: (next) => client.update(model.name, recordKey, { [of.name]: next }, row.etag ?? "*"),
+		onSuccess: () => setRenaming(false),
+		onError: (error) => toast.show({
+			state: "error",
+			title: "Could not rename the search",
+			description: message(error)
+		}),
 		onSettled: () => refresh(model.name)
 	});
-	const cards = targetView?.list?.displays?.find((display) => display.kind === "cards");
-	const plural = (targetView?.names?.plural ?? humanize(target.name)).toLowerCase();
+	const nameField = of.name === void 0 ? void 0 : model.fields[of.name];
 	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
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-start justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("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: name ?? /* @__PURE__ */ jsx(InlineFilterChips, { chips })
+						})
 					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-center gap-2",
+					children: [
+						of.controls && /* @__PURE__ */ jsx(SearchControls, {
+							model,
+							view,
+							recordKey,
+							title,
+							row,
+							fields: of.controls
+						}),
+						canRename && nameField && /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							"aria-label": `Rename ${title}`,
+							"aria-haspopup": "dialog",
+							onClick: () => setRenaming(true),
+							children: /* @__PURE__ */ jsx(Pencil, {
+								className: "size-3.5",
+								"aria-hidden": true
+							})
+						}),
+						onDelete && /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							"aria-label": `Delete ${title}`,
+							onClick: () => onDelete(title),
+							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()) }
-			}
-		})]
+			}),
+			renaming && nameField && /* @__PURE__ */ jsx(SearchNameDialog, {
+				title: `Rename ${title}`,
+				chips,
+				label: view.fields[nameField.name]?.label ?? humanize(nameField.name),
+				required: !nameField.nullable,
+				initial: name,
+				busy: rename.isPending,
+				onSave: (next) => rename.mutate(next),
+				onClose: () => setRenaming(false)
+			}),
+			/* @__PURE__ */ jsx(RecordRowBody, { ...body })
+		]
 	});
 };
 //#endregion