@protobase/ui 0.16.0 → 0.17.0

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

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

@@ -73,8 +73,6 @@ const facetNames = (config) => Object.fromEntries(config.facets.filter((group) =
 	...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.
@@ -90,5 +88,11 @@ const unseenFilter = (text, field, seenAt) => {
 	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);
 };
+/** Whether a record whose `field` holds `value` is new to the user, as `unseenFilter` finds it: after `seenAt`, or any. */
+const isUnseen = (value, seenAt) => {
+	if (typeof seenAt !== "string" || seenAt === "") return true;
+	if (typeof value !== "string" || value === "") return false;
+	return new Date(value).getTime() > new Date(seenAt).getTime();
+};
 //#endregion
-export { chosenRelations, facetNames, filterChips, searchName, unseenFilter };
+export { chosenRelations, facetNames, filterChips, isUnseen, unseenFilter };

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

@@ -1,6 +1,6 @@
 import { Skeleton } from "../../primitives/skeleton.js";
 import { PageHeader } from "../../app-shell/page-header.js";
-import { recordKey, recordTitleField } from "../../live/model-helpers.js";
+import { recordKey } from "../../live/model-helpers.js";
 import { humanize } from "../../live/naming.js";
 import { Notice, useAdminMeta, usePermissions } from "../meta-gate.js";
 import { AppLink } from "../use-app-address.js";
@@ -28,7 +28,6 @@ const SavedSearches = ({ model, view }) => {
 		view
 	});
 	const plural = view.names?.plural ?? humanize(model.name);
-	const titleField = recordTitleField(model, view);
 	const frame = (body) => /* @__PURE__ */ jsxs("div", {
 		className: "flex min-h-0 flex-1 flex-col gap-3 px-5 py-4",
 		children: [
@@ -82,8 +81,7 @@ const SavedSearches = ({ model, view }) => {
 		className: "flex flex-col gap-4",
 		children: saved.data.map((row) => {
 			const key = encodeKey(recordKey(model, row));
-			const title = String(row[titleField] ?? key);
-			const onDelete = can(permissions, "delete") ? () => void remove.start({
+			const onDelete = can(permissions, "delete") ? (title) => void remove.start({
 				key,
 				title,
 				etag: row.etag,
@@ -97,7 +95,7 @@ const SavedSearches = ({ model, view }) => {
 				targetView,
 				row,
 				recordKey: key,
-				title,
+				canRename: can(permissions, "update"),
 				onDelete
 			}, key);
 		})

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

@@ -35,13 +35,24 @@ const Control = ({ model, view, name, value, onChange }) => {
 		})]
 	});
 };
-/** A saved search's controls, each saved as soon as it changes; a refused change says why and shows the search as stored. */
-const SearchControls = ({ model, view, recordKey, row, fields }) => {
+const changed = (model, view, patch) => Object.entries(patch).map(([name, value]) => {
+	return `${view.fields[name]?.label ?? humanize(name)}: ${model.fields[name]?.type === "boolean" ? value === true ? "On" : "Off" : enumLabel(String(value), view.fields[name]?.valueLabels)}`;
+}).join(", ");
+/**
+* A saved search's controls, each saved as soon as it changes, which a toast confirms; a refused change says why and shows
+* the search as stored.
+*/
+const SearchControls = ({ model, view, recordKey, title, row, fields }) => {
 	const client = useClient();
 	const toast = useToast();
 	const refresh = useRefreshResource();
 	const change = useMutation({
 		mutationFn: (patch) => client.update(model.name, recordKey, patch, row.etag ?? "*"),
+		onSuccess: (_, patch) => toast.show({
+			state: "success",
+			title: `${title} saved`,
+			description: changed(model, view, patch)
+		}),
 		onError: (error) => toast.show({
 			state: "error",
 			title: "Could not change the search",

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

@@ -0,0 +1,97 @@
+import { createWhere, parseFilter, printFilter } from "@protobase/schema";
+//#region src/app/searches/search-diff.ts
+const where = createWhere();
+const span = {
+	start: 0,
+	end: 0
+};
+const guarded = (atom, condition) => where.and(condition, {
+	kind: "present",
+	field: atom.field,
+	span
+});
+/**
+* The filter that holds exactly where `expr` holds, and fails, never unknown, everywhere else. The database compares a
+* field without a value to unknown, and `NOT` of unknown is unknown too, so `NOT expr` alone would leave out every
+* record `expr` cannot decide, where `NOT surely(expr)` takes them in.
+*/
+const surely = (expr) => {
+	switch (expr.kind) {
+		case "and":
+		case "or": return {
+			...expr,
+			args: expr.args.map(surely)
+		};
+		case "not": return surelyNot(expr.arg);
+		case "search":
+		case "present":
+		case "isNull": return expr;
+		default: return guarded(expr, expr);
+	}
+};
+/** The filter that holds exactly where `expr` fails, and fails, never unknown, everywhere else. */
+const surelyNot = (expr) => {
+	switch (expr.kind) {
+		case "and": return where.or(...expr.args.map(surelyNot));
+		case "or": return where.and(...expr.args.map(surelyNot));
+		case "not": return surely(expr.arg);
+		case "search":
+		case "present":
+		case "isNull": return where.not(expr);
+		default: return guarded(expr, where.not(expr));
+	}
+};
+const read = (text) => {
+	const parsed = parseFilter(text);
+	if (!parsed.ok) throw new Error(`The filter cannot be read: ${parsed.errors.map((error) => error.message).join("; ")}`);
+	return parsed.ast;
+};
+/**
+* The filter of the records `after` finds and `before` does not, for the list API: `after AND NOT before`, with a record
+* `before` cannot decide (a range on a field it has no value for) counted as not found by it. `null` when no record can
+* be among them, as when `before` is empty and so finds every record.
+*/
+const addedFilter = (before, after) => {
+	const old = read(before);
+	if (!old) return null;
+	const next = read(after);
+	const notOld = where.not(surely(old));
+	return printFilter(next ? where.and(next, notOld) : notOld);
+};
+/** The filter of the records `before` finds and `after` no longer does; `null` when none can be. */
+const removedFilter = (before, after) => addedFilter(after, before);
+const identity = (chip) => chip.key.startsWith("extra:") ? `extra:${chip.label}` : chip.key;
+/** The chips that differ between two filters' chips: those removed, then those changed, then those added. */
+const filterChanges = (before, after) => {
+	const old = new Map(before.map((chip) => [identity(chip), chip]));
+	const next = new Map(after.map((chip) => [identity(chip), chip]));
+	const removed = before.filter((chip) => !next.has(identity(chip))).map((chip) => ({
+		kind: "removed",
+		label: chip.label
+	}));
+	const changed = after.flatMap((chip) => {
+		const was = old.get(identity(chip));
+		return was && was.label !== chip.label ? [{
+			kind: "changed",
+			label: chip.label,
+			before: was.label
+		}] : [];
+	});
+	const added = after.filter((chip) => !old.has(identity(chip))).map((chip) => ({
+		kind: "added",
+		label: chip.label
+	}));
+	return [
+		...removed,
+		...changed,
+		...added
+	];
+};
+/** The net change in the records a search finds: "5 more homes", "1 fewer home" or "As many homes". */
+const netChange = (added, removed, singular, plural) => {
+	const net = added - removed;
+	if (net === 0) return `As many ${plural}`;
+	return `${Math.abs(net)} ${net > 0 ? "more" : "fewer"} ${Math.abs(net) === 1 ? singular : plural}`;
+};
+//#endregion
+export { addedFilter, filterChanges, netChange, removedFilter };

package/dist/app/searches/search-name-dialog.js

@@ -0,0 +1,62 @@
+import { Input } from "../../primitives/input.js";
+import { Button } from "../../primitives/button.js";
+import { ResponsiveDialog } from "../../primitives/responsive-dialog.js";
+import { FilterChipList } from "./filter-chip-list.js";
+import { useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/searches/search-name-dialog.tsx
+/** Asks for a saved search's name, empty unless the field needs one, showing what the search filters on. */
+const SearchNameDialog = ({ title, chips, label, required, initial = "", busy, onSave, onClose }) => {
+	const id = useId();
+	const [name, setName] = useState(initial);
+	const formId = `${id}-form`;
+	return /* @__PURE__ */ jsx(ResponsiveDialog, {
+		open: true,
+		title,
+		onClose,
+		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+			onClick: onClose,
+			children: "Cancel"
+		}), /* @__PURE__ */ jsx(Button, {
+			type: "submit",
+			form: formId,
+			variant: "primary",
+			loading: busy,
+			children: "Save"
+		})] }),
+		children: /* @__PURE__ */ jsxs("form", {
+			id: formId,
+			className: "flex flex-col gap-4",
+			onSubmit: (event) => {
+				event.preventDefault();
+				onSave(name.trim() === "" ? null : name.trim());
+			},
+			children: [chips.length > 0 && /* @__PURE__ */ jsx(FilterChipList, { chips }), /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-baseline justify-between gap-2 text-[13px]",
+					children: [/* @__PURE__ */ jsx("label", {
+						htmlFor: id,
+						className: "font-medium",
+						children: label
+					}), !required && /* @__PURE__ */ jsx("span", {
+						id: `${id}-hint`,
+						className: "text-xs text-muted-foreground",
+						children: "Optional"
+					})]
+				}), /* @__PURE__ */ jsx(Input, {
+					id,
+					value: name,
+					required,
+					pattern: required ? ".*\\S.*" : void 0,
+					"aria-describedby": required ? void 0 : `${id}-hint`,
+					autoFocus: true,
+					autoComplete: "off",
+					onChange: (event) => setName(event.target.value)
+				})]
+			})]
+		})
+	});
+};
+//#endregion
+export { SearchNameDialog };