@protobase/ui 0.54.5 → 0.55.0

package/dist/app/related-cards/related-card.js

@@ -1,9 +1,10 @@
 import { useAdminMeta } from "../meta-gate.js";
 import { Skeleton } from "../../primitives/skeleton.js";
-import { recordKey, recordTitle } from "../../live/model-helpers.js";
+import { recordKey } from "../../live/model-helpers.js";
 import { AppLink } from "../use-app-address.js";
 import { RecordScope } from "../pages/record-scope.js";
 import { ActionButton } from "../pages/blocks/action.js";
+import { useRecordTitle } from "../titles/record-titles.js";
 import { FieldValue } from "../pages/field-value.js";
 import { usePathValue } from "../pages/use-path-value.js";
 import { fieldLabel } from "../pages/blocks/field.js";
@@ -36,33 +37,36 @@ const CardField = ({ scope, path }) => {
 * A related record as a card: its title linking to its page, its `fields` under their labels and the buttons of its
 * view's `actions`, run on it as everywhere else.
 */
-const RelatedCard = ({ scope, view, fields, actions }) => /* @__PURE__ */ jsxs("li", {
-	className: "flex min-w-0 flex-col gap-3 rounded-lg border border-border bg-surface p-4",
-	children: [
-		/* @__PURE__ */ jsx(AppLink, {
-			to: {
-				kind: "record",
-				resource: scope.model.name,
-				key: recordKey(scope.model, scope.record)
-			},
-			className: "self-start font-medium text-primary-text hover:underline",
-			children: recordTitle(scope.model, view, scope.record, scope.key)
-		}),
-		fields.length > 0 && /* @__PURE__ */ jsx("dl", {
-			className: "flex flex-col gap-3",
-			children: fields.map((path) => /* @__PURE__ */ jsx(CardField, {
-				scope,
-				path
-			}, path))
-		}),
-		actions.length > 0 && /* @__PURE__ */ jsx(RecordScope, {
-			value: scope,
-			children: /* @__PURE__ */ jsx("div", {
-				className: "flex flex-wrap items-center gap-2",
-				children: actions.map((name) => /* @__PURE__ */ jsx(ActionButton, { name }, name))
+const RelatedCard = ({ scope, view, fields, actions }) => {
+	const titleOf = useRecordTitle();
+	return /* @__PURE__ */ jsxs("li", {
+		className: "flex min-w-0 flex-col gap-3 rounded-lg border border-border bg-surface p-4",
+		children: [
+			/* @__PURE__ */ jsx(AppLink, {
+				to: {
+					kind: "record",
+					resource: scope.model.name,
+					key: recordKey(scope.model, scope.record)
+				},
+				className: "self-start font-medium text-primary-text hover:underline",
+				children: titleOf(scope.model, view, scope.record, scope.key)
+			}),
+			fields.length > 0 && /* @__PURE__ */ jsx("dl", {
+				className: "flex flex-col gap-3",
+				children: fields.map((path) => /* @__PURE__ */ jsx(CardField, {
+					scope,
+					path
+				}, path))
+			}),
+			actions.length > 0 && /* @__PURE__ */ jsx(RecordScope, {
+				value: scope,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap items-center gap-2",
+					children: actions.map((name) => /* @__PURE__ */ jsx(ActionButton, { name }, name))
+				})
 			})
-		})
-	]
-});
+		]
+	});
+};
 //#endregion
 export { RelatedCard };

package/dist/app/relation-picker.js

@@ -1,151 +1,54 @@
-import { cn } from "../lib/cn.js";
-import { Input } from "../primitives/input.js";
 import { humanize } from "../live/naming.js";
 import { labelFieldOf } from "../live/model-helpers.js";
 import { text } from "./messages.js";
 import { useList } from "../data/use-list.js";
+import { PickerCombobox, usePickerSearch } from "./picker/picker-combobox.js";
 import { relationOptionsQuery, titleMatches } from "./relation-options.js";
-import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { ApiError } from "@protobase/client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 //#region src/app/relation-picker.tsx
-/** Loads the next page while `sentinel` is in view of the list; it re-arms after each page, in case it still is. */
-const useLoadMoreInView = (list, sentinel, loaded, loadMore) => {
-	useEffect(() => {
-		if (!list || !sentinel) return;
-		const observer = new IntersectionObserver((entries) => entries.some((entry) => entry.isIntersecting) && loadMore(), { root: list });
-		observer.observe(sentinel);
-		return () => observer.disconnect();
-	}, [
-		list,
-		sentinel,
-		loaded,
-		loadMore
-	]);
-};
 /**
 * Picks a record of another resource: type to narrow the records by their search fields or title, scroll for more, and
 * choose with the mouse or with the arrow keys and Enter; Escape closes the list.
 */
 const RelationPicker = ({ target, view, value, label, chosen = [value], several = false, invalid, onChange }) => {
-	const [text$1, setText] = useState("");
-	const [open, setOpen] = useState(false);
-	const [active, setActive] = useState(-1);
-	const [list, setList] = useState(null);
-	const [sentinel, setSentinel] = useState(null);
-	const listId = useId();
+	const search = usePickerSearch();
 	const keyField = target.primaryKey[0];
 	const labelField = labelFieldOf(target, view);
 	const [refused, setRefused] = useState(false);
-	const query = relationOptionsQuery(target, labelField, text$1, refused);
+	const query = relationOptionsQuery(target, labelField, search.text, refused);
 	const rows = useList(target.name, {
 		filter: query.filter,
 		fields: [keyField, labelField],
-		enabled: open
+		enabled: search.open
 	});
 	const expensive = query.filter !== void 0 && rows.error instanceof ApiError && rows.error.slug === "expensive-query";
 	useEffect(() => {
 		if (expensive) setRefused(true);
 	}, [expensive]);
-	const items = query.local ? rows.items.filter((item) => titleMatches(item[labelField], text$1)) : rows.items;
-	const more = Boolean(rows.hasNextPage);
-	const loading = rows.isPending || rows.isFetchingNextPage;
+	const items = query.local ? rows.items.filter((item) => titleMatches(item[labelField], search.text)) : rows.items;
 	const { fetchNextPage } = rows;
-	useLoadMoreInView(list, sentinel, rows.items.length, useCallback(() => fetchNextPage({ cancelRefetch: false }), [fetchNextPage]));
-	const optionId = (index) => `${listId}-${index}`;
-	const input = useRef(null);
-	useEffect(() => {
-		if (!open && document.activeElement === input.current) input.current?.select();
-	}, [open]);
-	useEffect(() => {
-		if (open && active >= 0) document.getElementById(optionId(active))?.scrollIntoView({ block: "nearest" });
-	});
-	const close = () => {
-		setText("");
-		setActive(-1);
-		setOpen(false);
-	};
-	const choose = (item) => {
-		onChange(String(item[keyField]), String(item[labelField]));
-		if (!several) return close();
-		setText("");
-		setActive(-1);
-	};
-	const onKeyDown = (event) => {
-		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-			event.preventDefault();
-			if (!open) return setOpen(true);
-			const step = event.key === "ArrowDown" ? 1 : -1;
-			setActive((current) => Math.min(Math.max(current + step, 0), items.length - 1));
-			return;
-		}
-		if (event.key === "Enter" && open && items[active]) {
-			event.preventDefault();
-			choose(items[active]);
-			return;
-		}
-		if (event.key === "Escape" && open) {
-			event.preventDefault();
-			event.stopPropagation();
-			close();
-		}
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: "relative",
-		children: [/* @__PURE__ */ jsx(Input, {
-			ref: input,
-			role: "combobox",
-			"aria-autocomplete": "list",
-			"aria-expanded": open,
-			"aria-controls": listId,
-			"aria-activedescendant": open && items[active] ? optionId(active) : void 0,
-			invalid,
-			placeholder: text("searchPlural", (view?.names?.plural ?? humanize(target.name)).toLowerCase()),
-			value: open ? text$1 : label ?? value,
-			onFocus: () => setOpen(true),
-			onBlur: close,
-			onKeyDown,
-			onChange: (event) => {
-				setText(event.target.value);
-				setActive(event.target.value.trim() ? 0 : -1);
-				setOpen(true);
-			}
-		}), open && /* @__PURE__ */ jsxs("ul", {
-			ref: setList,
-			id: listId,
-			role: "listbox",
-			"aria-multiselectable": several || void 0,
-			className: "absolute z-30 mt-1 max-h-60 w-full overflow-y-auto rounded-md border bg-background py-1 shadow-pop",
-			onMouseDown: (event) => event.preventDefault(),
-			children: [
-				items.map((item, index) => /* @__PURE__ */ jsx("li", {
-					id: optionId(index),
-					role: "option",
-					"aria-selected": index === active,
-					className: cn("cursor-pointer truncate px-3 py-1.5", index === active && "bg-muted", chosen.includes(String(item[keyField])) && "font-medium"),
-					onMouseMove: () => index !== active && setActive(index),
-					onClick: () => choose(item),
-					children: String(item[labelField])
-				}, String(item[keyField]))),
-				more && /* @__PURE__ */ jsx("li", {
-					ref: setSentinel,
-					"aria-hidden": true,
-					className: "h-px"
-				}),
-				rows.error && !expensive && /* @__PURE__ */ jsx("li", {
-					className: "px-3 py-1.5 text-muted-foreground",
-					children: text("couldNotLoadOptions")
-				}),
-				!more && !loading && !rows.error && items.length === 0 && /* @__PURE__ */ jsx("li", {
-					className: "px-3 py-1.5 text-muted-foreground",
-					children: text("noMatches")
-				}),
-				loading && /* @__PURE__ */ jsx("li", {
-					className: "px-3 py-1.5 text-muted-foreground",
-					children: text("loading")
-				})
-			]
-		})]
+	const loadMore = useCallback(() => fetchNextPage({ cancelRefetch: false }), [fetchNextPage]);
+	return /* @__PURE__ */ jsx(PickerCombobox, {
+		search,
+		options: items.map((item) => ({
+			key: String(item[keyField]),
+			label: String(item[labelField])
+		})),
+		chosen,
+		several,
+		closedText: label ?? value,
+		placeholder: text("searchPlural", (view?.names?.plural ?? humanize(target.name)).toLowerCase()),
+		invalid,
+		paging: {
+			more: Boolean(rows.hasNextPage),
+			loaded: rows.items.length,
+			loadMore
+		},
+		loading: rows.isPending || rows.isFetchingNextPage,
+		failed: Boolean(rows.error) && !expensive,
+		onChoose: (option) => onChange(option.key, option.label)
 	});
 };
 //#endregion

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

@@ -1,5 +1,6 @@
 import { humanize } from "../../live/naming.js";
 import { recordKey, recordTitleField } from "../../live/model-helpers.js";
+import { recordTitleOf, titleFieldsOf } from "../titles/record-title-of.js";
 import { text } from "./messages.js";
 import { encodeKey, matchedSearchField } from "@protobase/schema/internal";
 import { appPath, createWhere, enumLabel, printFilter } from "@protobase/schema";
@@ -24,21 +25,25 @@ const searchPlaceholder = (targets) => {
 };
 /** The list filter for the text: the server's partial-word `search(...)` over the resource's search fields. */
 const searchFilter = (text) => printFilter(where$1.search(text.trim()));
-/** The fields a result's bold line joins: the view's `searchResult.title`, else the record's title field. */
+const derivesTitle = (target) => !target.view?.searchResult?.title?.length && target.view?.titleFrom !== void 0;
+/** The fields a result's bold line joins: the view's `searchResult.title`, else the record's title field, none for a derived title. */
 const titleFields = (target) => {
 	const fields = target.view?.searchResult?.title;
-	return fields?.length ? fields : [recordTitleField(target.model, target.view)];
+	if (fields?.length) return fields;
+	return derivesTitle(target) ? [] : [recordTitleField(target.model, target.view)];
 };
 /** The second line's field, unless the search matched another: the view's `searchResult.subtitle`, else the first search field not in the title. */
 const subtitleField = (target) => {
 	const title = titleFields(target);
 	return target.view?.searchResult?.subtitle ?? target.model.search?.find((name) => !title.includes(name));
 };
-/** The fields a result needs: the key, the title, the subtitle and the search fields, which say what the text matched. */
+/** The fields a result needs: the key, the title or those its derived title reads, the subtitle and the search fields, which say what the text matched. */
 const searchFields = (target) => {
 	const subtitle = subtitleField(target);
+	const derived = derivesTitle(target) ? titleFieldsOf(target.model, target.view) : [];
 	const lineFields = [
 		...titleFields(target),
+		...derived,
 		...subtitle ? [subtitle] : [],
 		...target.model.search ?? []
 	];
@@ -53,9 +58,13 @@ const shown = (target, row, name) => {
 /**
 * A row as a result for `text`: its title fields joined by spaces (the key when they are empty) over a subtitle, which is
 * the search field explaining the match when neither the title nor the default subtitle does (a phone number searched
-* for), else the default subtitle. `basePath` is where the app is served, so the link opens it in a new tab too.
+* for), else the default subtitle. `basePath` is where the app is served, so the link opens it in a new tab too; `titleOf`
+* titles a view's derived title for the reader.
 */
-const toHit = (target, row, text, basePath = "") => {
+const toHit = (target, row, text, basePath = "", titleOf = recordTitleOf({}, {
+	user: void 0,
+	member: () => void 0
+})) => {
 	const key = encodeKey(recordKey(target.model, row));
 	const title = titleFields(target);
 	const fallback = subtitleField(target);
@@ -63,7 +72,7 @@ const toHit = (target, row, text, basePath = "") => {
 	const subtitle = field ? shown(target, row, field) : "";
 	return {
 		id: key,
-		title: title.map((name) => shown(target, row, name)).filter(Boolean).join(" ") || key,
+		title: derivesTitle(target) ? titleOf(target.model, target.view, row, key) : title.map((name) => shown(target, row, name)).filter(Boolean).join(" ") || key,
 		...subtitle && { subtitle },
 		href: appPath({
 			kind: "record",

package/dist/app/search/use-global-search.js

@@ -1,6 +1,7 @@
 import { useClient } from "../../data/api-provider.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { useRouter } from "../router.js";
+import { useRecordTitle } from "../titles/record-titles.js";
 import { useDebounced } from "../../lib/use-debounced.js";
 import { navigationHits } from "./navigation-hits.js";
 import { searchFields, searchFilter, searchPlaceholder, searchTargets, toHit } from "./search-model.js";
@@ -17,6 +18,7 @@ const useGlobalSearch = () => {
 	const meta = useAdminMeta();
 	const client = useClient();
 	const { basePath } = useRouter();
+	const titleOf = useRecordTitle();
 	const targets = useMemo(() => searchTargets(meta), [meta]);
 	const [text, setText] = useState("");
 	const typed = text.trim();
@@ -53,7 +55,7 @@ const useGlobalSearch = () => {
 			hits: [],
 			failed: true
 		}];
-		const hits = (result.data?.items ?? []).map((row) => toHit(target, row, query, basePath));
+		const hits = (result.data?.items ?? []).map((row) => toHit(target, row, query, basePath, titleOf));
 		return hits.length > 0 ? [{
 			id: target.model.name,
 			label: target.label,

package/dist/app/titles/record-title-of.js

@@ -0,0 +1,17 @@
+import { recordTitle } from "../../live/model-helpers.js";
+//#region src/app/titles/record-title-of.ts
+/** The fields a record must be read with for its view to title it. */
+const titleFieldsOf = (model, view) => view?.titleFrom?.fields ?? [];
+/**
+* Titles records for this reader: a view's `titleFrom` by its rule, else its stored title as `recordTitle` does. The key
+* shows when the rule returns nothing, is not registered, or a field it reads is unreadable or was not read with the record.
+*/
+const recordTitleOf = (rules, reader) => (model, view, record, fallback) => {
+	const from = view?.titleFrom;
+	if (!from) return recordTitle(model, view, record, fallback);
+	const rule = rules[from.rule];
+	if (!rule || from.unreadable || from.fields.some((name) => record[name] === void 0)) return fallback;
+	return rule(record, reader) || fallback;
+};
+//#endregion
+export { recordTitleOf, titleFieldsOf };

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

@@ -0,0 +1,63 @@
+import { useOptionalAuth } from "../../auth/auth-provider.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { useProjectUi } from "../pages/project-ui.js";
+import { useMembers } from "../../people/use-members.js";
+import { recordTitleOf } from "./record-title-of.js";
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/titles/record-titles.tsx
+const noMember = () => void 0;
+const RecordTitleContext = createContext(recordTitleOf({}, {
+	user: void 0,
+	member: noMember
+}));
+/** How the framework titles a record for the person reading it: a view's derived title, else its stored one. */
+const useRecordTitle = () => useContext(RecordTitleContext);
+const WithoutMembers = ({ rules, user, children }) => {
+	const titleOf = useMemo(() => recordTitleOf(rules, {
+		user,
+		member: noMember
+	}), [rules, user]);
+	return /* @__PURE__ */ jsx(RecordTitleContext.Provider, {
+		value: titleOf,
+		children
+	});
+};
+const WithMembers = ({ rules, user, children }) => {
+	const { member } = useMembers();
+	const titleOf = useMemo(() => recordTitleOf(rules, {
+		user,
+		member
+	}), [
+		rules,
+		user,
+		member
+	]);
+	return /* @__PURE__ */ jsx(RecordTitleContext.Provider, {
+		value: titleOf,
+		children
+	});
+};
+/**
+* Titles records with the project UI's `titles` rules for the signed-in reader, who gets the organization's members
+* when the app has organizations and a view derives its titles; `useRecordTitle()` gives it to whatever titles a record.
+*/
+const RecordTitles = ({ children }) => {
+	const { views } = useAdminMeta();
+	const { titles } = useProjectUi();
+	const auth = useOptionalAuth();
+	const user = auth?.state.kind === "signed-in" ? auth.state.user : void 0;
+	const rules = titles ?? {};
+	if (Object.values(views).some((view) => view.titleFrom !== void 0) && user && auth?.organizations) return /* @__PURE__ */ jsx(WithMembers, {
+		rules,
+		user,
+		children
+	});
+	return /* @__PURE__ */ jsx(WithoutMembers, {
+		rules,
+		user,
+		children
+	});
+};
+//#endregion
+export { RecordTitles, useRecordTitle };

package/dist/app/titles/relation-title.js

@@ -0,0 +1,35 @@
+import { keys } from "../../data/query-keys.js";
+import { fetchLabels } from "../../live/relation-labels.js";
+import { createWhere, printFilter } from "@protobase/schema";
+//#region src/app/titles/relation-title.ts
+const where$1 = createWhere();
+/**
+* The query naming the record `id` of a single-key resource that a relation points at: its label field, cached as other
+* labels are, or the fields its view's derived title reads, which `relationTitle` titles for the reader.
+*/
+const relationTitleQuery = (queryClient, client, target, view, id) => {
+	const from = view?.titleFrom;
+	if (!from) return {
+		queryKey: keys.relatedLabel(target.name, id),
+		queryFn: async () => ({ label: (await fetchLabels(queryClient, client, target, [id], view)).get(id) ?? id })
+	};
+	const keyField = target.primaryKey[0];
+	return {
+		queryKey: keys.titleRow(target.name, id, from.fields.join(",")),
+		queryFn: async () => {
+			return { row: (await client.list(target.name, {
+				filter: printFilter(where$1.in(keyField, [id])),
+				fields: [keyField, ...from.fields],
+				pageSize: 1
+			})).items[0] ?? null };
+		}
+	};
+};
+/** The name `relationTitleQuery` read, titled for the reader; the key for a record not found, undefined while it loads. */
+const relationTitle = (data, titleOf, target, view, id) => {
+	if (!data) return;
+	if ("label" in data) return data.label;
+	return data.row ? titleOf(target, view, data.row, id) : id;
+};
+//#endregion
+export { relationTitle, relationTitleQuery };

package/dist/app/titles/title-rule.d.ts

@@ -0,0 +1,14 @@
+import { AuthUser, OrganizationPerson } from "@protobase/client";
+//#region src/app/titles/title-rule.d.ts
+/** Who reads a record whose title is derived: the signed-in user, if any, and the organization's members by user id. */
+export type TitleReader = {
+  user: AuthUser | undefined;
+  /** The member with this user id, as `useMembers()` gives them; undefined while the members load or without organizations. */
+  member: (id: string) => OrganizationPerson | undefined;
+};
+/**
+ * A rule a view's `.titleFrom(name, ...)` names: the record's title for this reader, from the fields the view picked.
+ * Returning undefined or an empty string titles the record by its key, as while the members load.
+ */
+export type TitleRule = (record: Record<string, unknown>, reader: TitleReader) => string | undefined;
+//#endregion

package/dist/app/use-nav-recent.js

@@ -1,5 +1,6 @@
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
+import { useRecordTitle } from "./titles/record-titles.js";
 import { userMenuResources } from "./user-menu-from-meta.js";
 import { recentRecords, recentRequest, recentRowDiffers } from "./nav-recent.js";
 import { useEffect, useMemo } from "react";
@@ -34,6 +35,7 @@ const useFollowRecords = (groups) => {
 */
 const useNavRecent = (meta, basePath, active) => {
 	const client = useClient();
+	const titleOf = useRecordTitle();
 	const groups = useMemo(() => {
 		const inMenu = userMenuResources(meta);
 		return Object.values(meta.views).flatMap((view) => {
@@ -59,7 +61,7 @@ const useNavRecent = (meta, basePath, active) => {
 		const activeKey = active.resource === model.name ? active.key : void 0;
 		return [model.name, {
 			state: "ready",
-			records: recentRecords(model, view, recent, result.data.items, basePath, activeKey)
+			records: recentRecords(model, view, recent, result.data.items, basePath, activeKey, titleOf)
 		}];
 	}));
 };

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

@@ -1,20 +1,17 @@
-import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
-import { fetchLabels } from "../live/relation-labels.js";
+import { relationTitle, relationTitleQuery } from "./titles/relation-title.js";
+import { useRecordTitle } from "./titles/record-titles.js";
 import { useQueries, useQueryClient } from "@tanstack/react-query";
 //#region src/app/use-related-records.ts
-/** Per relation the record holds, the address and name of the record it points at. The tenant is left out. */
+/** Per relation the record holds, the address and name of the record it points at, derived for the reader where its view does. The tenant is left out. */
 const useRelatedRecords = (model, resources, views, record) => {
 	const client = useClient();
 	const queryClient = useQueryClient();
+	const titleOf = useRecordTitle();
 	const relations = Object.values(model.fields).filter((field) => field.type === "relation" && field.relation && field.name !== model.tenant && record[field.name] != null && resources[field.relation.resource]?.primaryKey.length === 1);
 	const labels = useQueries({ queries: relations.map((field) => {
 		const target = resources[field.relation.resource];
-		const id = String(record[field.name]);
-		return {
-			queryKey: keys.relatedLabel(target.name, id),
-			queryFn: async () => (await fetchLabels(queryClient, client, target, [id], views[target.name])).get(id) ?? id
-		};
+		return relationTitleQuery(queryClient, client, target, views[target.name], String(record[field.name]));
 	}) });
 	const addresses = relations.map((field) => ({
 		kind: "record",
@@ -23,7 +20,10 @@ const useRelatedRecords = (model, resources, views, record) => {
 	}));
 	return {
 		addresses: Object.fromEntries(relations.map((field, index) => [field.name, addresses[index]])),
-		labels: Object.fromEntries(relations.map((field, index) => [field.name, labels[index]?.data]))
+		labels: Object.fromEntries(relations.map((field, index) => {
+			const target = resources[field.relation.resource];
+			return [field.name, relationTitle(labels[index]?.data, titleOf, target, views[target.name], String(record[field.name]))];
+		}))
 	};
 };
 //#endregion

package/dist/data/query-keys.js

@@ -114,6 +114,13 @@ const keys = {
 		resource,
 		id
 	],
+	/** The fields a record pointed at is read with for its view to derive its title. */
+	titleRow: (resource, id, fields) => [
+		"title-row",
+		resource,
+		id,
+		fields
+	],
 	labels: (resource, ids) => [
 		"labels",
 		resource,

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

@@ -1,7 +1,7 @@
 import { cn } from "../lib/cn.js";
 import { formatInt } from "../format/number.js";
-import { text } from "./messages.js";
 import { Token } from "../primitives/token.js";
+import { text } from "./messages.js";
 import { facetLabel } from "./filter-state.js";
 import { comboboxOptions, moveActive } from "./combobox-options.js";
 import { useEffect, useId, useRef, useState } from "react";

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import { LogoMark, ShellLogoProps } from "./app-shell/logo.js";
 import { FieldWidget, FieldWidgetEditorProps, FieldWidgetProps } from "./app/field-types/field-widget.js";
 import { BoardDrop, BoardDropContext, BoardDropUndo, BoardDropWrite } from "./app/displays/board-drop.js";
 import { Drop, DropRule } from "./app/hand-order/drop-rule.js";
+import { TitleReader, TitleRule } from "./app/titles/title-rule.js";
 import { ActionContext, ActionHandler, BeforeSignInProps, ProjectUi, definePlugin, defineUi } from "./app/pages/project-ui.js";
 import { PluginInfo, usePlugin } from "./plugins/plugin-context.js";
 import { App, AppProps } from "./app/app.js";
@@ -80,4 +81,4 @@ import { Section } from "./record-view/section.js";
 import { Form, FormProps } from "./app/create/form.js";
 import { RecordPicker, RecordPickerProps } from "./app/record-picker.js";
 import { Spinner } from "./primitives/spinner.js";
-export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ActionInputError, type ActionInputProps, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, AuthLayout, type AuthLayoutProps, type BackendData, type BackendRefresh, type BeforeSignInProps, type BoardDrop, type BoardDropContext, type BoardDropUndo, type BoardDropWrite, Button, type ButtonProps, type CardAction, type CardTone, Carousel, type CarouselImage, type CarouselProps, type ChatAuthor, ChatDivider, type ChatDividerProps, ChatMessage, type ChatMessageProps, ChatThread, type ChatThreadProps, type ChoiceOption, Choices, type ChoicesProps, CodeForm, type CodeFormProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, Dialog, type DialogProps, type DiffLine, DiffView, type DiffViewProps, type Drop, type DropRule, Field, FieldList, type FieldProps, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, Form, type FormProps, Input, type InputProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, LogoMark, Markdown, type MarkdownContentProps as MarkdownProps, type MembersResult, MentionBox, type MentionBoxProps, type MentionDraft, MentionedText, MenuSelect, type MenuSelectProps, type MetaData, OtpInput, type OtpInputProps, PartView, type PeopleSearch, type PickedUser, type PluginInfo, type ProjectUi, type PushState, type RecordCardProps, RecordLink, RecordPicker, type RecordPickerProps, ResendCodeButton, type ResendCodeButtonProps, ResponsiveDialog, type ResponsiveDialogProps, Section, Segmented, type SegmentedOption, type SegmentedProps, type ShellLogoProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, Spinner, type Step, StepList, type StepState, Textarea, type TextareaProps, allowDelayMs, buttonClass, chatDayLabel, definePlugin, defineUi, diffStats, emptyDraft, isConflict, isFramed, mentionedIds, mergeUi, parseDiff, pluginApi, protobaseVersion, sameChatDay, uiFromModule, useApiToken, useAppAddress, useArmedAfterFocus, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useGuardedPress, useHistogram, useInbox, useLayoutRecord, useList, useListDisplay, useMarkNotificationsRead, useMembers, useMeta, usePlugin, usePushNotifications, useRecord, useResourceClient, useSeries, useUnreadNotifications, useUpdateRecord };
+export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ActionInputError, type ActionInputProps, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, AuthLayout, type AuthLayoutProps, type BackendData, type BackendRefresh, type BeforeSignInProps, type BoardDrop, type BoardDropContext, type BoardDropUndo, type BoardDropWrite, Button, type ButtonProps, type CardAction, type CardTone, Carousel, type CarouselImage, type CarouselProps, type ChatAuthor, ChatDivider, type ChatDividerProps, ChatMessage, type ChatMessageProps, ChatThread, type ChatThreadProps, type ChoiceOption, Choices, type ChoicesProps, CodeForm, type CodeFormProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, Dialog, type DialogProps, type DiffLine, DiffView, type DiffViewProps, type Drop, type DropRule, Field, FieldList, type FieldProps, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, Form, type FormProps, Input, type InputProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, LogoMark, Markdown, type MarkdownContentProps as MarkdownProps, type MembersResult, MentionBox, type MentionBoxProps, type MentionDraft, MentionedText, MenuSelect, type MenuSelectProps, type MetaData, OtpInput, type OtpInputProps, PartView, type PeopleSearch, type PickedUser, type PluginInfo, type ProjectUi, type PushState, type RecordCardProps, RecordLink, RecordPicker, type RecordPickerProps, ResendCodeButton, type ResendCodeButtonProps, ResponsiveDialog, type ResponsiveDialogProps, Section, Segmented, type SegmentedOption, type SegmentedProps, type ShellLogoProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, Spinner, type Step, StepList, type StepState, Textarea, type TextareaProps, type TitleReader, type TitleRule, allowDelayMs, buttonClass, chatDayLabel, definePlugin, defineUi, diffStats, emptyDraft, isConflict, isFramed, mentionedIds, mergeUi, parseDiff, pluginApi, protobaseVersion, sameChatDay, uiFromModule, useApiToken, useAppAddress, useArmedAfterFocus, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useGuardedPress, useHistogram, useInbox, useLayoutRecord, useList, useListDisplay, useMarkNotificationsRead, useMembers, useMeta, usePlugin, usePushNotifications, useRecord, useResourceClient, useSeries, useUnreadNotifications, useUpdateRecord };

package/dist/index.js

@@ -14,6 +14,7 @@ import { Textarea } from "./primitives/textarea.js";
 import { useList } from "./data/use-list.js";
 import { OtpInput } from "./primitives/otp-input.js";
 import { definePlugin, defineUi } from "./app/pages/project-ui.js";
+import { useMembers } from "./people/use-members.js";
 import { Markdown } from "./markdown/markdown.js";
 import { ActionInputError } from "./app/pages/action-inputs/input-errors.js";
 import { useLayoutRecord } from "./app/pages/record-scope.js";
@@ -58,7 +59,6 @@ import { useInbox, useMarkNotificationsRead, useUnreadNotifications } from "./no
 import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
 import { App } from "./app/app.js";
 import { RecordLink } from "./app/displays/record-link.js";
-import { useMembers } from "./people/use-members.js";
 import { Carousel } from "./carousel/carousel.js";
 import { Choices } from "./primitives/choices.js";
 import { RecordPicker } from "./app/record-picker.js";

package/dist/live/field-values.js

@@ -12,7 +12,19 @@ const textEdited = /* @__PURE__ */ new Set([
 	"currency",
 	"country"
 ]);
-const isEditable = (field) => !field.readOnly && field.type !== "json" && field.type !== "uuid" && field.type !== "timestamp" && field.type !== "relation";
+const uneditable = /* @__PURE__ */ new Set([
+	"uuid",
+	"timestamp",
+	"relation"
+]);
+/**
+* Whether a form edits the field: not read-only, nor of a type it shows only. JSON is edited only by the field type the
+* view's `hints` choose for it (`.widget(name)`), as there is no built-in input for it.
+*/
+const isEditable = (field, hints) => {
+	if (field.readOnly || uneditable.has(field.type)) return false;
+	return field.type !== "json" || hints?.widget !== void 0;
+};
 /** A field a record's form cannot leave empty: written through the API, never null and no boolean, which always holds a value. */
 const isRequiredOnEdit = (field) => !field.readOnly && !field.nullable && field.type !== "boolean";
 const numeric = /* @__PURE__ */ new Set([
@@ -20,6 +32,14 @@ const numeric = /* @__PURE__ */ new Set([
 	"bigint",
 	"decimal"
 ]);
+const jsonValue = (text) => {
+	try {
+		return JSON.parse(text);
+	} catch (error) {
+		if (error instanceof SyntaxError) return text;
+		throw error;
+	}
+};
 const numberText = (text, decimal) => parseNumberText(text, decimal) ?? text;
 /**
 * The JSON value to send for an edited field: integers become numbers, empty optional fields become null, and numbers
@@ -34,6 +54,7 @@ const toPatchValue = (field, draft, decimal = localeDecimal()) => {
 	if (field.type === "integer") return Number(text);
 	if (field.type === "relation") return typeof draft === "number" ? draft : text;
 	if (textEdited.has(field.type) || field.type === "enum") return text;
+	if (field.type === "json") return jsonValue(text);
 	throw new Error(`Not implemented: editing ${field.type} fields`);
 };
 /** The value a draft stands for, as the API gives one: null when empty, a boolean or number where the field holds one. */