@protobase/ui 0.55.1 → 0.55.3

package/dist/app/app.js

@@ -11,11 +11,11 @@ import { text } from "./messages.js";
 import { Router, useRouter } from "./router.js";
 import { useAppAddress } from "./use-app-address.js";
 import { ProjectUiContext, useProjectUi } from "./pages/project-ui.js";
+import { RecordTitles, useRecordTitle } from "./titles/record-titles.js";
 import { isAdmin, userToShell } from "../auth/user-to-shell.js";
 import { startErrorReporting } from "./error-reporting.js";
 import { slotted } from "../locale/slotted.js";
 import { CustomBoundary } from "./pages/custom-boundary.js";
-import { RecordTitles, useRecordTitle } from "./titles/record-titles.js";
 import { useSidebarNoticeShown } from "../app-shell/sidebar-notice.js";
 import { AppShell } from "../app-shell/app-shell.js";
 import { useSignInAddress } from "../auth/use-sign-in-address.js";

package/dist/app/displays/record-card.js

@@ -1,3 +1,4 @@
+import { useAdminMeta } from "../meta-gate.js";
 import { Badge } from "../../primitives/badge.js";
 import { humanize } from "../../live/naming.js";
 import { markdownExcerpt } from "../../markdown/markdown-excerpt.js";
@@ -15,6 +16,7 @@ import { Markdown } from "../../markdown/markdown.js";
 import { ValueBadge } from "../value-badge.js";
 import { useSeedRecord } from "../record-preview.js";
 import { namedIcon } from "../named-icon.js";
+import { RelationTitleText } from "../titles/relation-title-text.js";
 import { FavoriteButton } from "../saved/favorite-button.js";
 import { CardDots, CardDotsRoom } from "../related-dots/card-dots.js";
 import { cardDotsLines } from "../related-dots/card-dots-lines.js";
@@ -42,10 +44,16 @@ const MetaValue = ({ icon, children }) => {
 const RecordCard = ({ model, view, display, row, swipe = true, mark }) => {
 	const { image, title, subtitle, amount, badge, meta, footer, flags } = cardFields(model, view, display);
 	const label = (name) => view?.fields[name]?.label ?? humanize(name);
+	const { resources, views } = useAdminMeta();
 	const text$1 = (name) => {
 		const field = model.fields[name];
 		if (!field) return "";
 		const value = row.record[name];
+		const target = field.type === "relation" && field.relation ? resources[field.relation.resource] : void 0;
+		if (target && views[target.name]?.titleFrom && value != null) return /* @__PURE__ */ jsx(RelationTitleText, {
+			target,
+			id: String(value)
+		});
 		if (row.labels[name] === void 0 && isMarkdown(field, view?.fields[name]) && typeof value === "string" && value !== "") return markdownExcerpt(value);
 		return row.labels[name] ?? displayValue(field, value, view?.fields[name]);
 	};

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

@@ -5,6 +5,7 @@ import { scopeOf } from "../pages/use-layout-data.js";
 import { FieldValue } from "../pages/field-value.js";
 import { usePathValue } from "../pages/use-path-value.js";
 import { withFieldTypeCells } from "../field-types/field-type-cells.js";
+import { withRelationTitleCells } from "../titles/relation-title-cells.js";
 import { jsx } from "react/jsx-runtime";
 import { resolveFieldPath } from "@protobase/layout";
 //#region src/app/embedded-list/embedded-columns.tsx
@@ -45,7 +46,7 @@ const pathColumn = (model, column, { resources, views }) => {
 };
 /** The list page's columns for `names`: fields of `model` as its table draws them, and paths through relations. */
 const embeddedColumns = (model, view, names, meta) => {
-	const fields = new Map(withFieldTypeCells(columnsFromModel(model, view, [], names.filter((name) => !isPath(name))), model, view, meta.fieldTypes).map((spec) => [spec.id, spec]));
+	const fields = new Map(withRelationTitleCells(withFieldTypeCells(columnsFromModel(model, view, [], names.filter((name) => !isPath(name))), model, view, meta.fieldTypes), model, meta.resources, meta.views).map((spec) => [spec.id, spec]));
 	return names.flatMap((name) => isPath(name) ? [pathColumn(model, name, meta)] : fields.get(name) ?? []);
 };
 //#endregion

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

@@ -4,16 +4,19 @@ import { useAdminMeta } from "../meta-gate.js";
 import { recordId } from "../../live/model-helpers.js";
 import { listPhotos, withPhotos } from "../../live/row-photos.js";
 import { listLabels, withLabels } from "../../live/relation-labels.js";
-import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { seedTitleRows } from "../../live/title-rows.js";
+import { keepPreviousData, useQuery, useQueryClient } 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 }`, named in the same call, with the photos of its cards, and how many records match in all,
-* counted in the same call: `estimated` when more than the server counts exactly match. A filter through a join
+* counted in the same call: `estimated` when more than the server counts exactly match; the fields the derived titles
+* of the records its relations point at read, in one more call per resource. 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(",")],
@@ -29,6 +32,7 @@ const useEmbeddedRows = ({ model, filter, orderBy, limit, fields }) => {
 				labels,
 				photos
 			});
+			await seedTitleRows(queryClient, client, resources, views, model, fields, page.items);
 			const rows = 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

@@ -14,6 +14,7 @@ import { text } from "./messages.js";
 import { AppLink, useAppAddress } from "./use-app-address.js";
 import { ErrorBanner } from "./error-banner.js";
 import { useProjectUi } from "./pages/project-ui.js";
+import { useRecordTitle } from "./titles/record-titles.js";
 import { can, rowAllows } from "./permissions.js";
 import { usePageScroll } from "../app-shell/page-scroll.js";
 import { PageHeader } from "../app-shell/page-header.js";
@@ -40,6 +41,7 @@ import { CustomDisplay } from "./displays/custom-display.js";
 import { MapDisplay } from "./displays/map-display.js";
 import { DisplaySwitch, SortMenu } from "./displays/display-controls.js";
 import { withFieldTypeCells } from "./field-types/field-type-cells.js";
+import { withRelationTitleCells } from "./titles/relation-title-cells.js";
 import { useFilterConfig } from "../live/use-filter-config.js";
 import { useDeleteFlow } from "./delete/use-delete-flow.js";
 import { useRestore } from "./delete/use-restore.js";
@@ -127,7 +129,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 	const view = viewOfList(meta.views[resource], address.list);
 	const fields = useMemo(() => widgetFields(view, model), [view, model]);
 	const { fields: fieldTypes } = useProjectUi();
-	const columns = useMemo(() => withRelatedDotsColumns(withFieldTypeCells(columnsFromModel(model, view), model, view, fieldTypes), model, view, meta.resources, meta.views), [
+	const columns = useMemo(() => withRelatedDotsColumns(withRelationTitleCells(withFieldTypeCells(columnsFromModel(model, view), model, view, fieldTypes), model, meta.resources, meta.views), model, view, meta.resources, meta.views), [
 		model,
 		view,
 		fieldTypes,
@@ -143,13 +145,15 @@ const LoadedList = ({ model, address, scope, heading }) => {
 	const xs = useIsXs();
 	const [sheetOpen, setSheetOpen] = useState(false);
 	const scoped = scope ? [...extras, scope] : extras;
+	const titleOf = useRecordTitle();
 	const config = useFilterConfig({
 		model,
 		resources: meta.resources,
 		views: meta.views,
 		view,
 		state,
-		extras: scoped
+		extras: scoped,
+		titleOf
 	});
 	const loadFilter = scope ? stateToText(fields, state, scoped) : parsed.ok ? filterText : "";
 	const loaded = useMemo(() => loadedFields(model, view, columns.map((column) => column.id)), [

package/dist/app/nav-from-meta.js

@@ -1,7 +1,10 @@
+import { allowEverything } from "../data/meta-data.js";
 import { humanize } from "../live/naming.js";
 import { text } from "./messages.js";
+import { text as text$1 } from "./create/messages.js";
 import { iconFor } from "./icons.js";
 import { menuIcon } from "./menu-icons.js";
+import { createOffered } from "./create/create-offered.js";
 import { userMenuResources } from "./user-menu-from-meta.js";
 import { LayoutDashboard } from "lucide-react";
 import { appPath } from "@protobase/schema";
@@ -21,10 +24,21 @@ const schemaGroup = (schema = "public") => {
 	if (schema === "public") return "";
 	return groupLabels[schema] ? text(groupLabels[schema]) : humanize(schema);
 };
+/** The link under an entry whose `nav.create` asks for one, to whoever the list would offer New. */
+const createLink = (meta, view, nav, singular, basePath) => {
+	if (!nav?.create || !createOffered(view, meta.pages, meta.permissions[view.resource] ?? allowEverything)) return {};
+	return { create: {
+		label: nav.create === true ? text$1("title", singular) : nav.create.label,
+		href: appPath({
+			kind: "create",
+			resource: view.resource
+		}, basePath)
+	} };
+};
 /**
 * One sidebar group per `nav.group` (default: the database schema, none for `public`, 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
+* collapsible, and `create` links to the create form under it. 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. A visitor also gets the resources whose views ask them to sign
 * in, where those views place them, under "Account" without a group. Each named list of a view is an entry of its
 * own, placed by its own `nav`.
@@ -73,7 +87,8 @@ const navFromMeta = (meta, basePath = "", recent = {}) => {
 				kind: "list",
 				resource: model.name
 			}, basePath),
-			...recent[model.name] && { recent: recent[model.name] }
+			...recent[model.name] && { recent: recent[model.name] },
+			...createLink(meta, view, view.nav, view.names?.singular ?? humanize(model.name), basePath)
 		}, view.nav?.order);
 		for (const named of view.lists ?? []) {
 			if (named.nav?.hidden) continue;
@@ -85,7 +100,8 @@ const navFromMeta = (meta, basePath = "", recent = {}) => {
 					kind: "list",
 					resource: model.name,
 					list: named.name
-				}, basePath)
+				}, basePath),
+				...createLink(meta, view, named.nav, named.names.singular, basePath)
 			}, named.nav?.order);
 		}
 	}

package/dist/app/pages/field-value.js

@@ -1,4 +1,3 @@
-import { useClient } from "../../data/api-provider.js";
 import { cn } from "../../lib/cn.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { fileShown, shownImage } from "../../live/file-values.js";
@@ -11,22 +10,12 @@ import { useShownWidget } from "../field-types/shown-widget.js";
 import { WidgetPart } from "../field-types/widget-part.js";
 import { Markdown } from "../../markdown/markdown.js";
 import { ContactLink } from "../../live/contact-link.js";
-import { relationTitle, relationTitleQuery } from "../titles/relation-title.js";
-import { useRecordTitle } from "../titles/record-titles.js";
+import { useRelationTitle } from "../titles/use-relation-title.js";
 import { ValueBadge } from "../value-badge.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
 //#region src/app/pages/field-value.tsx
 const RelationLink = ({ target, id, known }) => {
-	const { views } = useAdminMeta();
-	const client = useClient();
-	const queryClient = useQueryClient();
-	const titleOf = useRecordTitle();
-	const view = views[target.name];
-	const label = useQuery({
-		...relationTitleQuery(queryClient, client, target, view, id),
-		enabled: known === void 0
-	});
+	const title = useRelationTitle(target, id, known === void 0);
 	return /* @__PURE__ */ jsx(AppLink, {
 		to: {
 			kind: "record",
@@ -34,7 +23,7 @@ const RelationLink = ({ target, id, known }) => {
 			key: id
 		},
 		className: "font-medium text-primary-text hover:underline",
-		children: known ?? relationTitle(label.data, titleOf, target, view, id) ?? id
+		children: known ?? title ?? id
 	});
 };
 const RelationValue = ({ field, value, known }) => {

package/dist/app/record-page.js

@@ -30,12 +30,12 @@ import { fieldHelp, helpShown, recordShown, whenShown } from "./record-mode/reco
 import { isChosen, keyValue } from "./create/create-values.js";
 import { ErrorBanner } from "./error-banner.js";
 import { useProjectUi } from "./pages/project-ui.js";
+import { useRecordTitle } from "./titles/record-titles.js";
 import { shownWidget } from "./field-types/shown-widget.js";
 import { WidgetPart } from "./field-types/widget-part.js";
 import { ContactLink } from "../live/contact-link.js";
 import { FieldEditor } from "./field-editor.js";
 import { can, fieldAccess } from "./permissions.js";
-import { useRecordTitle } from "./titles/record-titles.js";
 import { ValueBadge } from "./value-badge.js";
 import { FieldValue } from "./pages/field-value.js";
 import { fieldMessage } from "./field-errors.js";

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

@@ -2,9 +2,9 @@ import { useAdminMeta } from "../meta-gate.js";
 import { Skeleton } from "../../primitives/skeleton.js";
 import { recordKey } from "../../live/model-helpers.js";
 import { AppLink } from "../use-app-address.js";
+import { useRecordTitle } from "../titles/record-titles.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";

package/dist/app/relation-picker.js

@@ -4,6 +4,7 @@ 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 { useRecordTitle } from "./titles/record-titles.js";
 import { useCallback, useEffect, useState } from "react";
 import { ApiError } from "@protobase/client";
 import { jsx } from "react/jsx-runtime";
@@ -17,24 +18,31 @@ const RelationPicker = ({ target, view, value, label, chosen = [value], several
 	const keyField = target.primaryKey[0];
 	const labelField = labelFieldOf(target, view);
 	const [refused, setRefused] = useState(false);
-	const query = relationOptionsQuery(target, labelField, search.text, refused);
+	const titleOf = useRecordTitle();
+	const query = relationOptionsQuery(target, labelField, search.text, refused || view?.titleFrom !== void 0 && !target.search?.length);
+	const fields = [.../* @__PURE__ */ new Set([
+		keyField,
+		labelField,
+		...view?.titleFrom?.fields ?? []
+	])];
+	const nameOf = (item) => view?.titleFrom ? titleOf(target, view, item, String(item[keyField])) : String(item[labelField]);
 	const rows = useList(target.name, {
 		filter: query.filter,
-		fields: [keyField, labelField],
+		fields,
 		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], search.text)) : rows.items;
+	const items = query.local ? rows.items.filter((item) => titleMatches(nameOf(item), search.text)) : rows.items;
 	const { fetchNextPage } = rows;
 	const loadMore = useCallback(() => fetchNextPage({ cancelRefetch: false }), [fetchNextPage]);
 	return /* @__PURE__ */ jsx(PickerCombobox, {
 		search,
 		options: items.map((item) => ({
 			key: String(item[keyField]),
-			label: String(item[labelField])
+			label: nameOf(item)
 		})),
 		chosen,
 		several,

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

@@ -1,7 +1,7 @@
 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 { useProjectUi } from "../pages/project-ui.js";
 import { recordTitleOf } from "./record-title-of.js";
 import { createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

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

@@ -0,0 +1,28 @@
+import { useRelationTitle } from "./use-relation-title.js";
+import { TruncatedText } from "../../data-grid/truncated-text.js";
+import { renderCell } from "../../data-grid/cells.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/titles/relation-title-cells.tsx
+const relationKey = (value) => String(typeof value === "object" && value !== null && "id" in value ? value.id : value);
+const RelationTitleCell = ({ target, id }) => /* @__PURE__ */ jsx(TruncatedText, {
+	text: useRelationTitle(target, id) ?? id,
+	className: "font-medium text-primary-text hover:underline"
+});
+/**
+* The list's columns, where a relation points at a resource whose view derives its titles, drawn with the record's
+* title for the reader, its key while the title loads. A column a field type draws stays as it is.
+*/
+const withRelationTitleCells = (columns, model, resources, views) => columns.map((spec) => {
+	const field = model.fields[spec.id];
+	const target = field?.type === "relation" && field.relation ? resources[field.relation.resource] : void 0;
+	if (spec.render || !target || !views[target.name]?.titleFrom) return spec;
+	return {
+		...spec,
+		render: (row) => row[spec.id] == null ? renderCell(spec, null) : /* @__PURE__ */ jsx(RelationTitleCell, {
+			target,
+			id: relationKey(row[spec.id])
+		})
+	};
+});
+//#endregion
+export { withRelationTitleCells };

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

@@ -0,0 +1,7 @@
+import { useRelationTitle } from "./use-relation-title.js";
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region src/app/titles/relation-title-text.tsx
+/** The name of the record `id` of `target` a relation points at, for the reader; its key while the name loads. */
+const RelationTitleText = ({ target, id }) => /* @__PURE__ */ jsx(Fragment, { children: useRelationTitle(target, id) ?? id });
+//#endregion
+export { RelationTitleText };

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

@@ -1,8 +1,7 @@
 import { keys } from "../../data/query-keys.js";
 import { fetchLabels } from "../../live/relation-labels.js";
-import { createWhere, printFilter } from "@protobase/schema";
+import { readTitleRows, titleRowKey } from "../../live/title-rows.js";
 //#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.
@@ -13,16 +12,9 @@ const relationTitleQuery = (queryClient, client, target, view, id) => {
 		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 };
-		}
+		queryKey: titleRowKey(target, id, from.fields),
+		queryFn: async () => ({ row: (await readTitleRows(client, target, from.fields, [id])).get(id) ?? null })
 	};
 };
 /** The name `relationTitleQuery` read, titled for the reader; the key for a record not found, undefined while it loads. */

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

@@ -0,0 +1,25 @@
+import { useClient } from "../../data/api-provider.js";
+import { useAdminMeta } from "../meta-gate.js";
+import { useRecordTitle } from "./record-titles.js";
+import { relationTitle, relationTitleQuery } from "./relation-title.js";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+//#region src/app/titles/use-relation-title.ts
+/**
+* The name of the record `id` of `target` a relation points at, for the reader: its label, or its view's derived title.
+* Undefined while it loads or when not `enabled`; a list seeds the names of its page's records, which it reads first.
+*/
+const useRelationTitle = (target, id, enabled = true) => {
+	const { views } = useAdminMeta();
+	const client = useClient();
+	const queryClient = useQueryClient();
+	const titleOf = useRecordTitle();
+	const view = views[target.name];
+	const read = useQuery({
+		...relationTitleQuery(queryClient, client, target, view, id),
+		staleTime: 3e5,
+		enabled
+	});
+	return relationTitle(read.data, titleOf, target, view, id);
+};
+//#endregion
+export { useRelationTitle };

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

@@ -1,6 +1,6 @@
 import { useClient } from "../data/api-provider.js";
-import { relationTitle, relationTitleQuery } from "./titles/relation-title.js";
 import { useRecordTitle } from "./titles/record-titles.js";
+import { relationTitle, relationTitleQuery } from "./titles/relation-title.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, derived for the reader where its view does. The tenant is left out. */

package/dist/app-shell/sidebar-create-link.js

@@ -0,0 +1,26 @@
+import { cn } from "../lib/cn.js";
+import { subRow, subRowIndent } from "./sidebar-rows.js";
+import { Plus } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app-shell/sidebar-create-link.tsx
+/** The link under a sidebar entry to its resource's create form, such as "New message", lined up with its records. */
+const SidebarCreateLink = ({ create, mode, onNavigate }) => /* @__PURE__ */ jsx("div", {
+	className: cn("border-l border-transparent pl-1.5", subRowIndent[mode]),
+	children: /* @__PURE__ */ jsxs("a", {
+		href: create.href,
+		onClick: onNavigate && ((event) => {
+			event.preventDefault();
+			onNavigate(create.href);
+		}),
+		className: cn("flex items-center rounded-md text-faint-foreground transition-colors hover:bg-muted hover:text-foreground", subRow[mode]),
+		children: [/* @__PURE__ */ jsx(Plus, {
+			"aria-hidden": true,
+			className: "size-3.5 shrink-0"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: create.label
+		})]
+	})
+});
+//#endregion
+export { SidebarCreateLink };

package/dist/app-shell/sidebar-group.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/cn.js";
 import { text } from "./messages.js";
+import { subRow, subRowIndent } from "./sidebar-rows.js";
 import { navOpenStorageKey, readNavOpen, writeNavOpen } from "./nav-open-storage.js";
 import { SidebarItem } from "./sidebar-item.js";
 import { StatusDot } from "./status-dot.js";
@@ -7,15 +8,6 @@ import { useId, useState } from "react";
 import { ChevronRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/sidebar-group.tsx
-const row = {
-	"text-large": "h-8 gap-2.5 px-2.5",
-	"text-small": "h-7 gap-2 px-2 text-body"
-};
-/** Lines the records up under the entry's icon. */
-const indent = {
-	"text-large": "ml-[20px]",
-	"text-small": "ml-[17px]"
-};
 /**
 * A sidebar entry with a few of its records under it. The label opens the list, the chevron shows or hides the
 * records (remembered in this browser), and "View all" at the end opens the list too.
@@ -58,14 +50,14 @@ const SidebarGroup = ({ item, recent, mode, active, onNavigate }) => {
 		}), open && /* @__PURE__ */ jsxs("ul", {
 			id: listId,
 			"aria-label": text("recent", item.label.toLowerCase()),
-			className: cn("flex flex-col gap-0.5 border-l pl-1.5", indent[mode]),
+			className: cn("flex flex-col gap-0.5 border-l pl-1.5", subRowIndent[mode]),
 			children: [
 				recent.state === "loading" && /* @__PURE__ */ jsx("li", {
-					className: cn("flex items-center text-faint-foreground", row[mode]),
+					className: cn("flex items-center text-faint-foreground", subRow[mode]),
 					children: text("loading")
 				}),
 				recent.state === "error" && /* @__PURE__ */ jsx("li", {
-					className: cn("flex items-center text-faint-foreground", row[mode]),
+					className: cn("flex items-center text-faint-foreground", subRow[mode]),
 					children: text("couldNotLoad")
 				}),
 				recent.state === "ready" && recent.records.map((record) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
@@ -73,7 +65,7 @@ const SidebarGroup = ({ item, recent, mode, active, onNavigate }) => {
 					"aria-label": record.status ? `${record.label}, ${record.status.label}` : record.label,
 					title: record.status ? `${record.label} (${record.status.label})` : record.label,
 					"aria-current": record.active ? "page" : void 0,
-					className: cn("flex min-w-0 items-center rounded-md font-medium transition-colors", row[mode], record.active ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"),
+					className: cn("flex min-w-0 items-center rounded-md font-medium transition-colors", subRow[mode], record.active ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"),
 					children: [record.status && /* @__PURE__ */ jsx(StatusDot, {
 						tone: record.status.tone,
 						pulse: record.status.pulse
@@ -84,7 +76,7 @@ const SidebarGroup = ({ item, recent, mode, active, onNavigate }) => {
 				}) }, record.id)),
 				/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
 					...link(href),
-					className: cn("flex items-center rounded-md text-faint-foreground transition-colors hover:bg-muted hover:text-foreground", row[mode]),
+					className: cn("flex items-center rounded-md text-faint-foreground transition-colors hover:bg-muted hover:text-foreground", subRow[mode]),
 					children: text("viewAll")
 				}) })
 			]

package/dist/app-shell/sidebar-rows.js

@@ -0,0 +1,13 @@
+//#region src/app-shell/sidebar-rows.ts
+/** The height and spacing of a row under a sidebar entry, such as a recent record or its create link. */
+const subRow = {
+	"text-large": "h-8 gap-2.5 px-2.5",
+	"text-small": "h-7 gap-2 px-2 text-body"
+};
+/** Lines the rows under an entry up under the entry's icon. */
+const subRowIndent = {
+	"text-large": "ml-[20px]",
+	"text-small": "ml-[17px]"
+};
+//#endregion
+export { subRow, subRowIndent };

package/dist/app-shell/sidebar.js

@@ -5,11 +5,13 @@ import { Logo } from "./logo.js";
 import { navGroups } from "./nav.js";
 import { ThemeSwitch } from "./theme-switch.js";
 import { ProfileMenu } from "./profile-menu.js";
+import { SidebarCreateLink } from "./sidebar-create-link.js";
 import { isTextMode, sidebarWidth } from "./sidebar-mode.js";
 import { SidebarItem } from "./sidebar-item.js";
 import { SidebarGroup } from "./sidebar-group.js";
+import { Fragment } from "react";
 import { LogIn } from "lucide-react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/sidebar.tsx
 const Sidebar = ({ mode, activeItem, user, workspace, appName, appIcon, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, account, onNavigate, onSignOut, signIn, organizations, roles, theme, sticky, logo: SidebarLogo = Logo, notice }) => {
 	const expanding = mode === "icon-expand";
@@ -37,18 +39,22 @@ const Sidebar = ({ mode, activeItem, user, workspace, appName, appIcon, forceExp
 						children: [inline ? group.label && /* @__PURE__ */ jsx("div", {
 							className: cn("px-3 pb-1 pt-1 text-xs font-medium uppercase tracking-wide text-faint-foreground", expanding && "h-4 whitespace-nowrap py-0 opacity-0 transition-opacity group-hover/side:opacity-100 group-focus-within/side:opacity-100", expanded && "opacity-100"),
 							children: group.label
-						}) : index > 0 && /* @__PURE__ */ jsx("div", { className: "mx-auto mb-1 h-px w-6 bg-border" }), group.items.map((item) => item.recent && isTextMode(mode) ? /* @__PURE__ */ jsx(SidebarGroup, {
+						}) : index > 0 && /* @__PURE__ */ jsx("div", { className: "mx-auto mb-1 h-px w-6 bg-border" }), group.items.map((item) => /* @__PURE__ */ jsxs(Fragment, { children: [item.recent && isTextMode(mode) ? /* @__PURE__ */ jsx(SidebarGroup, {
 							item,
 							recent: item.recent,
 							mode,
 							active: item.id === activeItem,
 							onNavigate
-						}, item.id) : /* @__PURE__ */ jsx(SidebarItem, {
+						}) : /* @__PURE__ */ jsx(SidebarItem, {
 							item,
 							mode,
 							active: item.id === activeItem,
 							onNavigate
-						}, item.id))]
+						}), item.create && isTextMode(mode) && /* @__PURE__ */ jsx(SidebarCreateLink, {
+							create: item.create,
+							mode,
+							onNavigate
+						})] }, item.id))]
 					}, group.label))
 				}),
 				notice,
@@ -65,7 +71,7 @@ const Sidebar = ({ mode, activeItem, user, workspace, appName, appIcon, forceExp
 						organizations,
 						roles,
 						theme
-					}) : /* @__PURE__ */ jsxs(Fragment, { children: [theme && inline && /* @__PURE__ */ jsx(ThemeSwitch, {
+					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [theme && inline && /* @__PURE__ */ jsx(ThemeSwitch, {
 						theme,
 						className: "flex min-h-11 w-full items-center gap-2.5 whitespace-nowrap p-1.5 text-muted-foreground md:min-h-0"
 					}), signIn && /* @__PURE__ */ jsxs(RouteLink, {

package/dist/index.js

@@ -12,9 +12,9 @@ import { AppLink, useAppAddress } from "./app/use-app-address.js";
 import { Segmented } from "./primitives/segmented.js";
 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 { definePlugin, defineUi } from "./app/pages/project-ui.js";
+import { OtpInput } from "./primitives/otp-input.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";

package/dist/live/grid-loader.js

@@ -2,13 +2,15 @@ import { keys } from "../data/query-keys.js";
 import { recordId } from "./model-helpers.js";
 import { listPhotos, withPhotos } from "./row-photos.js";
 import { listLabels, withLabels } from "./relation-labels.js";
+import { seedTitleRows } from "./title-rows.js";
 import { loadRelatedColumn } from "./related-column-rows.js";
 //#region src/live/grid-loader.ts
 const exactBelow = 5e3;
 /**
 * Loads fixed-size pages by number. The page after a cached or loading one follows that page's `next_page_token`; a
 * jump to a page whose predecessor is neither asks `:seek` for the page at that row position, so the pages of one jump
-* are read on from a single seek. Every page is cached by TanStack Query, with the records of its related columns.
+* are read on from a single seek. Every page is cached by TanStack Query, with the records of its related columns; the
+* fields the derived titles of the records its relations point at read are cached per record (see `seedTitleRows`).
 */
 const createGridLoader = ({ queryClient, client, resources, views, model, columns, filter, orderBy, related = [] }) => {
 	const relatedNames = related.map((load) => load.column.name).join(",");
@@ -63,13 +65,13 @@ const createGridLoader = ({ queryClient, client, resources, views, model, column
 		};
 		const ids = result.items.map((record) => recordId(model, record));
 		const labelled = withLabels(resources, model, columns, withPhotos(model, result.items, result.photos), result.labels);
-		const shown = await Promise.all(related.map((load) => loadRelatedColumn({
+		const [shown] = await Promise.all([Promise.all(related.map((load) => loadRelatedColumn({
 			client,
 			resources,
 			views,
 			load,
 			owners: ids
-		})));
+		}))), seedTitleRows(queryClient, client, resources, views, model, columns, result.items)]);
 		return {
 			rows: labelled.map((record, index) => ({
 				...record,

package/dist/live/relation-labels.js

@@ -30,8 +30,11 @@ const relationColumns = (resources, model, columns) => columns.flatMap((name) =>
 		target
 	}] : [];
 });
-/** What a list call asks `labels` for: each relation among `columns` to a single-key resource, by the field that names its records. */
-const listLabels = (resources, views, model, columns) => Object.fromEntries(relationColumns(resources, model, columns).filter(({ target }) => target.primaryKey.length === 1).map(({ name, target }) => [name, labelFieldOf(target, views[target.name])]));
+/**
+* What a list call asks `labels` for: each relation among `columns` to a single-key resource, by the field that names its
+* records. A resource whose view derives its titles per reader is named by the browser instead, so none is asked for it.
+*/
+const listLabels = (resources, views, model, columns) => Object.fromEntries(relationColumns(resources, model, columns).filter(({ target }) => target.primaryKey.length === 1 && !views[target.name]?.titleFrom).map(({ name, target }) => [name, labelFieldOf(target, views[target.name])]));
 /** Replaces each relation value among `columns` with `{ id, name }`, named by the list call's `labels`, else by its key. */
 const withLabels = (resources, model, columns, rows, labels = {}) => {
 	const relations = relationColumns(resources, model, columns);