@protobase/ui 0.21.7 → 0.21.9

package/dist/app/record-page.js

@@ -6,12 +6,12 @@ import { Button, buttonClass } from "../primitives/button.js";
 import { usePauseFocusRefresh } from "../data/focus-refresh.js";
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
-import { useNavigationGuard, useRouter } from "./router.js";
+import { useNavigationGuard } from "./router.js";
 import { useOpenedRecord } from "../data/use-record.js";
 import { humanize } from "../live/naming.js";
 import { Field } from "../record-view/field.js";
 import { Section } from "../record-view/section.js";
-import { MetadataCard, RelatedRecords, SidebarCard } from "../record-view/record-sidebar.js";
+import { MetadataCard } from "../record-view/record-sidebar.js";
 import { RecordHeader } from "../record-view/record-header.js";
 import { SpecTable } from "../record-view/spec-table.js";
 import { KeyFacts } from "../record-view/key-facts.js";
@@ -21,8 +21,9 @@ import { isChosen, keyValue } from "./create/create-values.js";
 import { ErrorBanner } from "./error-banner.js";
 import { isMarkdown } from "../markdown/markdown-hint.js";
 import { recordTitle } from "../live/model-helpers.js";
+import { contactFormat } from "../live/contact-links.js";
 import { toneFor } from "../live/columns-from-model.js";
-import { displayValue } from "../live/display-value.js";
+import { displayValue, valueTitle } from "../live/display-value.js";
 import { filledFields } from "./filled-fields.js";
 import { Notice, useAdminMeta, usePermissions } from "./meta-gate.js";
 import { AppLink, useAppAddress } from "./use-app-address.js";
@@ -30,6 +31,7 @@ import { useProjectUi } from "./pages/project-ui.js";
 import { shownWidget } 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 { FieldEditor } from "./field-editor.js";
 import { fieldMessage } from "./field-errors.js";
 import { useFocusFirstInvalid } from "./use-focus-first-invalid.js";
@@ -49,8 +51,10 @@ import { useLines } from "./use-lines.js";
 import { useLinesDraft } from "./use-lines-draft.js";
 import { GallerySection } from "./gallery/gallery-section.js";
 import { HistorySection } from "./history/history-section.js";
+import { CommentsSection } from "./comments/comments-section.js";
 import { useRecordEditor } from "./use-record-editor.js";
 import { useRelatedRecords } from "./use-related-records.js";
+import { IncomingCard } from "./incoming-card.js";
 import { RelatedSection } from "./related-section.js";
 import { Fragment, useMemo } from "react";
 import { Check } from "lucide-react";
@@ -62,21 +66,28 @@ import { enumLabel } from "@protobase/schema";
 const hidden = (model, name) => name === model.tenant || model.primaryKey.includes(name);
 /**
 * The view's layout, or one section with the editable fields when the view has none, then History when the resource
-* keeps it. The read view, which is all a user who may only read the resource gets, shows every field: the record rather
-* than what can be changed.
+* keeps it and Comments when it takes them. The read view, which is all a user who may only read the resource gets,
+* shows every field: the record rather than what can be changed.
 */
 const layoutFor = (model, view, read) => {
 	if (view && view.layout.length > 0) return view.layout;
 	const shown = Object.values(model.fields).filter((field) => !hidden(model, field.name));
 	const editable = shown.filter((field) => !field.readOnly);
-	return [{
-		kind: "section",
-		title: "Details",
-		fields: (editable.length > 0 && !read ? editable : shown).map((field) => field.name)
-	}, ...model.history ? [{
-		kind: "history",
-		title: "History"
-	}] : []];
+	return [
+		{
+			kind: "section",
+			title: "Details",
+			fields: (editable.length > 0 && !read ? editable : shown).map((field) => field.name)
+		},
+		...model.history ? [{
+			kind: "history",
+			title: "History"
+		}] : [],
+		...model.comments ? [{
+			kind: "comments",
+			title: "Comments"
+		}] : []
+	];
 };
 const RecordPage = ({ resource, recordKey }) => {
 	const { resources } = useAdminMeta();
@@ -113,8 +124,7 @@ const RecordPage = ({ resource, recordKey }) => {
 };
 const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 	const meta = useAdminMeta();
-	const { basePath } = useRouter();
-	const { address, go, open } = useAppAddress();
+	const { address, go } = useAppAddress();
 	const view = meta.views[model.name];
 	const title = recordTitle(model, view, stored.record, recordKey);
 	const { state: auth } = useAuth();
@@ -160,7 +170,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 		}, { replace: true }),
 		onReview: () => void queryClient.invalidateQueries({ queryKey: keys.record(model.name, recordKey) })
 	});
-	const related = useRelatedRecords(model, view, meta.resources, meta.views, stored.record, basePath);
+	const related = useRelatedRecords(model, meta.resources, meta.views, stored.record);
 	const pickTarget = (name) => {
 		const field = model.fields[name];
 		const target = field?.relation ? meta.resources[field.relation.resource] : void 0;
@@ -172,7 +182,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 		...stored.record,
 		...Object.fromEntries(picked.map((field) => [field.name, fromDraft(field, editor.value(field.name))]))
 	};
-	const chosen = useRelatedRecords(model, view, meta.resources, meta.views, drafted, basePath);
+	const chosen = useRelatedRecords(model, meta.resources, meta.views, drafted);
 	const pick = (name, next) => {
 		const target = pickTarget(name);
 		if (!target || !isChosen(next)) return editor.change(name, next);
@@ -271,11 +281,16 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 			const text = displayValue(field, stored.record[name], hint(name));
 			const value = stored.record[name];
 			const markdown = isMarkdown(field, hint(name)) && typeof value === "string" && value !== "";
+			const contact = field.type === "text" && typeof value === "string" && value !== "" ? contactFormat(hint(name)) : void 0;
 			const builtIn = field.type === "enum" ? /* @__PURE__ */ jsx(ValueBadge, {
 				value,
 				hints: hint(name),
 				children: text
-			}) : markdown ? /* @__PURE__ */ jsx(Markdown, { source: value }) : /* @__PURE__ */ jsx("strong", {
+			}) : markdown ? /* @__PURE__ */ jsx(Markdown, { source: value }) : contact ? /* @__PURE__ */ jsx(ContactLink, {
+				format: contact,
+				value: text
+			}) : /* @__PURE__ */ jsx("strong", {
+				title: valueTitle(field, value),
 				className: hint(name)?.multiline ? "whitespace-pre-line break-words" : void 0,
 				children: text
 			});
@@ -341,7 +356,6 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 					children: [
 						/* @__PURE__ */ jsx(RecordHeader, {
 							title,
-							titleHidden: true,
 							status: status ? {
 								label: enumLabel(status, hint("status")?.valueLabels),
 								tone: toneFor(status)
@@ -396,7 +410,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 						/* @__PURE__ */ jsxs("div", {
 							className: "grid grid-cols-1 gap-8 md:grid-cols-[minmax(0,1fr)_300px] md:gap-12",
 							children: [/* @__PURE__ */ jsxs("main", {
-								className: cn("divide-y divide-border", !status && "*:first:pt-0!"),
+								className: "divide-y divide-border",
 								children: [layout.flatMap((item, index) => {
 									if (item.kind === "related") return [/* @__PURE__ */ jsx(RelatedSection, {
 										item,
@@ -424,6 +438,12 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 										recordKey,
 										etag: stored.etag
 									}, `history:${index}`)];
+									if (item.kind === "comments") return [/* @__PURE__ */ jsx(CommentsSection, {
+										item,
+										resource: model.name,
+										recordKey,
+										canWrite: auth.kind !== "visitor"
+									}, `comments:${index}`)];
 									if (item.kind !== "section") return [];
 									const visibleFields = item.fields.filter((name) => model.fields[name] && visible(name));
 									const facts = shown === "read" && item.presentation === "facts";
@@ -449,7 +469,7 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 									locked: shown !== "form"
 								})]
 							}), /* @__PURE__ */ jsxs("aside", {
-								className: cn("space-y-4", status && "md:pt-8"),
+								className: "space-y-4 md:pt-8",
 								children: [
 									formControls && /* @__PURE__ */ jsx("div", {
 										className: "hidden flex-col items-center gap-2 md:flex",
@@ -481,16 +501,18 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 											if (!name || !field || !visible(name)) return [];
 											return [{
 												label: hint(name)?.label ?? humanize(name),
-												value: known(name) ? displayValue(field, stored.record[name], hint(name)) : /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })
+												value: known(name) ? /* @__PURE__ */ jsx("span", {
+													title: valueTitle(field, stored.record[name]),
+													children: displayValue(field, stored.record[name], hint(name))
+												}) : /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })
 											}];
 										})
 									}),
-									related.records.length > 0 && /* @__PURE__ */ jsx(SidebarCard, {
-										title: "Related records",
-										children: /* @__PURE__ */ jsx(RelatedRecords, {
-											records: related.records,
-											onNavigate: open
-										})
+									!preview && /* @__PURE__ */ jsx(IncomingCard, {
+										model,
+										recordKey,
+										layout,
+										lines: linesModel
 									})
 								]
 							})]

package/dist/app/related-opens.js

@@ -0,0 +1,22 @@
+//#region src/app/related-opens.ts
+const opensTo = (model, name, resources) => {
+	const field = Object.hasOwn(model.fields, name) ? model.fields[name] : void 0;
+	return field?.type === "relation" && field.relation !== void 0 && resources[field.relation.resource]?.primaryKey.length === 1;
+};
+/**
+* The relation field whose record a related section's row opens: `item.open`, else the one relation in the listed
+* resource's primary key besides `item.field`, when there is exactly one; none when the rows are records in their own right.
+*/
+const relatedOpens = (item, model, resources) => {
+	if (item.open !== void 0) return item.open !== item.field && opensTo(model, item.open, resources) ? item.open : void 0;
+	const candidates = model.primaryKey.filter((name) => name !== item.field && name !== model.tenant && opensTo(model, name, resources));
+	return candidates.length === 1 ? candidates[0] : void 0;
+};
+/** The key of the record a row's relation `name` points at; a list row holds a shown relation as `{ id, name }`. Undefined when empty. */
+const relationTarget = (row, name) => {
+	const value = row[name];
+	const id = typeof value === "object" && value !== null && "id" in value ? value.id : value;
+	return typeof id === "string" || typeof id === "number" ? id : void 0;
+};
+//#endregion
+export { relatedOpens, relationTarget };

package/dist/app/related-section.js

@@ -6,6 +6,7 @@ import { ErrorBanner } from "./error-banner.js";
 import { listColumnNames } from "../live/columns-from-model.js";
 import { useAdminMeta, usePermissions } from "./meta-gate.js";
 import { searchAll } from "../live/search-all.js";
+import { relatedOpens } from "./related-opens.js";
 import { EmbeddedDisplaySwitch, EmbeddedList } from "./embedded-list/embedded-list.js";
 import { useEmbeddedDisplay } from "./embedded-list/use-embedded-display.js";
 import { relatedHandOrder } from "./hand-order/hand-order.js";
@@ -82,6 +83,7 @@ const RelatedSection = ({ item, recordKey, owner }) => {
 	const permissions = usePermissions(item.resource);
 	const [sorting, setSorting] = useState(false);
 	if (!model) return null;
+	const opens = relatedOpens(item, model, resources);
 	const columns = item.columns ?? listColumnNames(model, view).filter((name) => name !== item.field);
 	const handOrder = relatedHandOrder(item, model, permissions);
 	const displaySwitch = /* @__PURE__ */ jsx(EmbeddedDisplaySwitch, {
@@ -124,7 +126,8 @@ const RelatedSection = ({ item, recordKey, owner }) => {
 			columns,
 			limit: item.limit ?? 10,
 			display,
-			empty: item.empty
+			empty: item.empty,
+			opens
 		}, match.filter)
 	});
 };

package/dist/app/runtime/runtime-status.js

@@ -1,3 +1,4 @@
+import { viewerZone } from "../../format/zone.js";
 import { formatAgo, formatDateTime } from "../../format/date.js";
 import { isApiError } from "@protobase/client";
 //#region src/app/runtime/runtime-status.ts
@@ -23,14 +24,14 @@ const runningText = (status, now) => {
 	return `${label}, started ${formatAgo(seconds)}`;
 };
 /** How far the running update is, or when the latest version will be applied on its own, in words; `now` in ms. */
-const nextUpdateText = (status, now = Date.now()) => {
+const nextUpdateText = (status, now = Date.now(), zone = viewerZone()) => {
 	if (status.updating) return runningText(status, now);
-	if (status.nextUpdateAt) return `${policyLabels[status.policy]}: next on ${formatDateTime(Date.parse(status.nextUpdateAt))} UTC`;
+	if (status.nextUpdateAt) return `${policyLabels[status.policy]}: next on ${formatDateTime(Date.parse(status.nextUpdateAt), zone)}`;
 	return policyLabels[status.policy];
 };
 /** How the last update ended, in words, with the endpoint's message for the owner when it has one. */
-const lastUpdateText = (last) => {
-	const when = `${formatDateTime(Date.parse(last.finishedAt))} UTC`;
+const lastUpdateText = (last, zone = viewerZone()) => {
+	const when = formatDateTime(Date.parse(last.finishedAt), zone);
 	const headline = {
 		succeeded: `Updated to ${last.toVersion} on ${when}`,
 		unchanged: `The update to ${last.toVersion} on ${when} changed nothing`,

package/dist/app/search/navigation-hits.js

@@ -0,0 +1,45 @@
+import { humanize } from "../../live/naming.js";
+import { allowEverything } from "../../data/meta-data.js";
+import { createOffered } from "../create/create-offered.js";
+import { navFromMeta } from "../nav-from-meta.js";
+import { appPath } from "@protobase/schema";
+const matches = (label, text) => label.toLowerCase().includes(text.trim().toLowerCase());
+/**
+* The search's own results, before the records: the sidebar's pages and lists whose names hold the text ("stock" finds
+* Stock levels), and "New ..." for each resource the user may create whose name does ("new order" or "order" finds New
+* order). Each is a link, as the sidebar's entries are.
+*/
+const navigationHits = (meta, text, basePath = "") => {
+	const pages = navFromMeta(meta, basePath).flatMap((group) => group.items.filter((item) => item.href !== void 0 && !item.problem)).filter((item) => matches(item.label, text)).slice(0, 5);
+	const asked = text.trim().replace(/^new\s+/i, "");
+	const creates = Object.values(meta.resources).flatMap((model) => {
+		const view = meta.views[model.name];
+		if (!view || view.nav?.hidden || !createOffered(view, meta.pages, meta.permissions[model.name] ?? allowEverything)) return [];
+		const singular = view.names?.singular ?? humanize(model.name);
+		const label = `New ${singular.toLowerCase()}`;
+		if (!matches(label, text) && !matches(singular, asked) && !matches(view.names?.plural ?? humanize(model.name), asked)) return [];
+		return [{
+			id: `new:${model.name}`,
+			title: label,
+			href: appPath({
+				kind: "create",
+				resource: model.name
+			}, basePath)
+		}];
+	});
+	return [...pages.length > 0 ? [{
+		id: "go-to",
+		label: "Go to",
+		hits: pages.map((item) => ({
+			id: `go-to:${item.id}`,
+			title: item.label,
+			href: item.href
+		}))
+	}] : [], ...creates.length > 0 ? [{
+		id: "create",
+		label: "Create",
+		hits: creates.slice(0, 5)
+	}] : []];
+};
+//#endregion
+export { navigationHits };

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

@@ -2,12 +2,14 @@ import { useClient } from "../../data/api-provider.js";
 import { useRouter } from "../router.js";
 import { useAdminMeta } from "../meta-gate.js";
 import { useDebounced } from "../../lib/use-debounced.js";
+import { navigationHits } from "./navigation-hits.js";
 import { searchFields, searchFilter, searchPlaceholder, searchTargets, toHit } from "./search-model.js";
 import { useMemo, useState } from "react";
 import { useQueries } from "@tanstack/react-query";
 //#region src/app/search/use-global-search.ts
 /**
-* The top bar's search: the typed text, searched in every resource the user can read that has search fields, through
+* The top bar's search: the typed text, matched against the sidebar's pages and lists and the records the user may
+* create ("New order"), then searched in every resource the user can read that has search fields, through
 * the list API with the user's token, so row filters and hidden fields apply exactly as on the lists. The results stay
 * while the text does, so opening the box again asks nothing; other texts' results are dropped, so changed text asks again.
 */
@@ -36,7 +38,13 @@ const useGlobalSearch = () => {
 			fields: searchFields(target)
 		})
 	})) });
-	const groups = targets.flatMap((target, index) => {
+	const navigation = useMemo(() => searching ? navigationHits(meta, query, basePath) : [], [
+		searching,
+		meta,
+		query,
+		basePath
+	]);
+	const records = targets.flatMap((target, index) => {
 		const result = results[index];
 		if (!searching || !result) return [];
 		if (result.error) return [{
@@ -52,9 +60,10 @@ const useGlobalSearch = () => {
 			hits
 		}] : [];
 	});
+	const groups = [...navigation, ...records];
 	return {
-		/** False when no resource can be searched; the top bar then shows no search box. */
-		available: targets.length > 0,
+		/** False when there is nothing to find, no page, list or resource; the top bar then shows no search box. */
+		available: Object.keys(meta.pages).length > 0 || Object.keys(meta.resources).length > 0,
 		placeholder: searchPlaceholder(targets),
 		text,
 		setText,

package/dist/app/use-app-address.d.ts

@@ -3,13 +3,15 @@ import { AnchorHTMLAttributes } from "react";
 import { AppAddress } from "@protobase/schema";
 //#region src/app/use-app-address.d.ts
 /**
- * The app's address as logical values, and the ways to change it: `set` changes the list in place, `go` moves to
+ * The app's address as logical values, and the ways to change it: `set` changes the list in place, `listTo` is the
+ * list after a change for a link to it, `go` moves to
  * another address, `href` is an address for an `<a href>` and `open` follows such an href. Every component reads and
  * writes the address through this hook, never the query string or a path of its own.
  */
 export declare const useAppAddress: () => {
   address: CurrentAddress | undefined;
   set: (change: ListChange) => void;
+  listTo: (change: ListChange) => AppAddress;
   go: (to: AppAddress, options?: {
     replace?: boolean;
   }) => void;

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

@@ -7,7 +7,8 @@ import { jsx } from "react/jsx-runtime";
 import { appPath, readAppPath } from "@protobase/schema";
 //#region src/app/use-app-address.tsx
 /**
-* The app's address as logical values, and the ways to change it: `set` changes the list in place, `go` moves to
+* The app's address as logical values, and the ways to change it: `set` changes the list in place, `listTo` is the
+* list after a change for a link to it, `go` moves to
 * another address, `href` is an address for an `<a href>` and `open` follows such an href. Every component reads and
 * writes the address through this hook, never the query string or a path of its own.
 */
@@ -32,16 +33,14 @@ const useAppAddress = () => {
 	]);
 	const address = useMemo(() => currentAddress(read, defaults), [read, defaults]);
 	const go = useCallback((to, options) => navigate(appPath(to), options), [navigate]);
+	const listTo = useCallback((change) => {
+		if (read?.kind !== "list") throw new Error("listTo and set change the list the app shows; use go to move to another address");
+		return changedList(read, change, defaults(read.resource));
+	}, [read, defaults]);
 	return {
 		address,
-		set: useCallback((change) => {
-			if (read?.kind !== "list") throw new Error("set changes the list the app shows; use go to move to another address");
-			go(changedList(read, change, defaults(read.resource)), { replace: true });
-		}, [
-			read,
-			defaults,
-			go
-		]),
+		set: useCallback((change) => go(listTo(change), { replace: true }), [listTo, go]),
+		listTo,
 		go,
 		href: useCallback((to) => appPath(to, basePath), [basePath]),
 		open: useCallback((target) => navigate(target.startsWith(`${basePath}/`) ? target.slice(basePath.length) : target), [basePath, navigate])

package/dist/app/use-incoming-counts.js

@@ -0,0 +1,38 @@
+import { keys } from "../data/query-keys.js";
+import { useClient } from "../data/api-provider.js";
+import { useQueries } from "@tanstack/react-query";
+import { createWhere, printFilter } from "@protobase/schema";
+//#region src/app/use-incoming-counts.ts
+const where$1 = createWhere();
+/** How many records point at `key` through each relation: `undefined` while loading, left out when the list is refused. */
+const useIncomingCounts = (relations, resources, key) => {
+	const client = useClient();
+	const counts = useQueries({ queries: relations.map((relation) => {
+		const filter = printFilter(where$1.eq(relation.field, key));
+		return {
+			queryKey: keys.list(relation.resource, filter, "", 1, "incoming"),
+			queryFn: async () => {
+				const page = await client.list(relation.resource, {
+					filter,
+					pageSize: 1,
+					count: "exact",
+					fields: resources[relation.resource].primaryKey
+				});
+				return {
+					count: page.totalSize ?? page.totalSizeEstimate,
+					exact: page.totalSize !== void 0
+				};
+			}
+		};
+	}) });
+	return relations.flatMap((relation, index) => {
+		const result = counts[index];
+		if (result.error) return [];
+		return [{
+			relation,
+			count: result.data
+		}];
+	});
+};
+//#endregion
+export { useIncomingCounts };

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

@@ -1,12 +1,10 @@
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
-import { humanize } from "../live/naming.js";
 import { fetchLabels } from "../live/relation-labels.js";
 import { useQueries, useQueryClient } from "@tanstack/react-query";
-import { appPath } from "@protobase/schema";
 //#region src/app/use-related-records.ts
-/** One entry per relation the record holds, named by the record it points at. The tenant is left out. */
-const useRelatedRecords = (model, view, resources, views, record, basePath) => {
+/** Per relation the record holds, the address and name of the record it points at. The tenant is left out. */
+const useRelatedRecords = (model, resources, views, record) => {
 	const client = useClient();
 	const queryClient = useQueryClient();
 	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);
@@ -25,12 +23,7 @@ const useRelatedRecords = (model, view, resources, views, record, basePath) => {
 	}));
 	return {
 		addresses: Object.fromEntries(relations.map((field, index) => [field.name, addresses[index]])),
-		labels: Object.fromEntries(relations.map((field, index) => [field.name, labels[index]?.data])),
-		records: relations.map((field, index) => ({
-			kind: view?.fields[field.name]?.label ?? humanize(field.name),
-			label: labels[index]?.data ?? String(record[field.name]),
-			href: appPath(addresses[index], basePath)
-		}))
+		labels: Object.fromEntries(relations.map((field, index) => [field.name, labels[index]?.data]))
 	};
 };
 //#endregion

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

@@ -4,12 +4,13 @@ import { BottomBar } from "./bottom-bar.js";
 import { Drawer } from "./drawer.js";
 import { PageScrollContext, usePageGutter, usePageInsets } from "./page-scroll.js";
 import { Sidebar } from "./sidebar.js";
+import { TopBarSlotContext } from "./top-bar-slot.js";
 import { TopBar } from "./top-bar.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/app-shell.tsx
 const drawerId = "app-drawer";
-const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, logo, actions, rightPanel, forceExpanded, profileMenuOpen, navGroups, userMenu, bottomBar, onNavigate, onSignOut, signIn, organizations, roles, theme, search, pageScroll: scrollsByDefault = false, className, children }) => {
+const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, appName, logo, actions, rightPanel, forceExpanded, profileMenuOpen, navGroups, userMenu, bottomBar, onNavigate, onSignOut, signIn, organizations, roles, theme, search, pageScroll: scrollsByDefault = false, className, children }) => {
 	const desktop = useIsDesktop();
 	const [drawerOpen, setDrawerOpen] = useState(false);
 	useEffect(() => {
@@ -19,6 +20,7 @@ const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, logo,
 	const [chosen, setPageScroll] = useState();
 	const pageScroll = chosen ?? scrollsByDefault;
 	const topBarRef = useRef(null);
+	const [topBarSlot, setTopBarSlot] = useState(null);
 	const bottomBarRef = useRef(null);
 	usePageInsets(pageScroll, topBarRef, bottomBarRef, Boolean(tabs));
 	usePageGutter(pageScroll);
@@ -28,6 +30,7 @@ const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, logo,
 		activeItem,
 		user,
 		workspace,
+		appName,
 		forceExpanded,
 		profileMenuOpen,
 		groups: navGroups,
@@ -56,6 +59,7 @@ const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, logo,
 					children: [
 						/* @__PURE__ */ jsx(TopBar, {
 							ref: topBarRef,
+							slotRef: setTopBarSlot,
 							sticky: pageScroll,
 							breadcrumb,
 							onNavigate,
@@ -67,7 +71,10 @@ const AppShell = ({ sidebarMode, activeItem, breadcrumb, user, workspace, logo,
 						}),
 						/* @__PURE__ */ jsx("main", {
 							className: pageScroll ? "flex flex-1 flex-col" : "flex min-h-0 flex-1 flex-col",
-							children
+							children: /* @__PURE__ */ jsx(TopBarSlotContext.Provider, {
+								value: topBarSlot,
+								children
+							})
 						}),
 						tabs && /* @__PURE__ */ jsx(BottomBar, {
 							ref: bottomBarRef,

package/dist/app-shell/index.d.ts

@@ -8,6 +8,7 @@ import { LogoMark, ShellLogoProps } from "./logo.js";
 import "./app-shell.js";
 import "./page-header.js";
 import "./page-scroll.js";
+import "./top-bar.js";
 import "./sidebar.js";
 import "./status-dot.js";
 export type { SidebarMode };

package/dist/app-shell/logo.d.ts

@@ -3,9 +3,13 @@
 export declare const LogoMark: ({ className }: {
   className?: string;
 }) => import("react").JSX.Element;
-/** What the logo at the top of the sidebar gets: `compact` when the sidebar shows only icons, and the workspace's name. */
+/**
+ * What the logo at the top of the sidebar gets: `compact` when the sidebar shows only icons, the workspace's name, and
+ * the app's name, such as `Property Finder` (`PROTOBASE_APP_NAME` or `createAuth`'s `appName`).
+ */
 export type ShellLogoProps = {
   compact: boolean;
   workspace?: string;
+  appName?: string;
 };
 //#endregion

package/dist/app-shell/logo.js

@@ -29,12 +29,19 @@ const Wordmark = ({ className }) => /* @__PURE__ */ jsx("svg", {
 		d: wordmarkPath
 	})
 });
-/** Protobase's logo at the top of the sidebar, the workspace's name under the wordmark, or the mark alone when compact. */
-const Logo = ({ compact, workspace }) => /* @__PURE__ */ jsxs("div", {
+const brandName = "Protobase";
+/**
+* The logo at the top of the sidebar: Protobase's mark, then the app's name, as the brand's wordmark when the app goes by
+* Protobase's name, with the workspace's name under it; the mark alone when compact.
+*/
+const Logo = ({ compact, workspace, appName }) => /* @__PURE__ */ jsxs("div", {
 	className: "flex items-center gap-2.5 overflow-hidden",
 	children: [/* @__PURE__ */ jsx(LogoMark, {}), !compact && /* @__PURE__ */ jsxs("div", {
 		className: "flex min-w-0 flex-col gap-0.5 leading-tight",
-		children: [/* @__PURE__ */ jsx(Wordmark, { className: "self-start" }), workspace && /* @__PURE__ */ jsx("div", {
+		children: [appName && appName !== brandName ? /* @__PURE__ */ jsx("div", {
+			className: "truncate text-sm font-semibold text-foreground",
+			children: appName
+		}) : /* @__PURE__ */ jsx(Wordmark, { className: "self-start" }), workspace && /* @__PURE__ */ jsx("div", {
 			className: "truncate text-[11px] text-muted-foreground",
 			children: workspace
 		})]

package/dist/app-shell/sidebar.js

@@ -10,7 +10,7 @@ import { SidebarGroup } from "./sidebar-group.js";
 import { LogIn } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/sidebar.tsx
-const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, onNavigate, onSignOut, signIn, organizations, roles, theme, sticky, logo: SidebarLogo = Logo }) => {
+const Sidebar = ({ mode, activeItem, user, workspace, appName, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, onNavigate, onSignOut, signIn, organizations, roles, theme, sticky, logo: SidebarLogo = Logo }) => {
 	const expanding = mode === "icon-expand";
 	const expanded = expanding && forceExpanded;
 	const inline = isTextMode(mode) || expanding;
@@ -24,7 +24,8 @@ const Sidebar = ({ mode, activeItem, user, workspace, forceExpanded, profileMenu
 					className: cn("flex h-12 shrink-0 items-center px-3.5", mode === "icon-label" && "justify-center px-0"),
 					children: /* @__PURE__ */ jsx(SidebarLogo, {
 						compact: !inline,
-						workspace
+						workspace,
+						appName
 					})
 				}),
 				/* @__PURE__ */ jsx("div", {

package/dist/app-shell/top-bar-slot.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+//#region src/app-shell/top-bar-slot.ts
+/**
+* The place in the top bar, below `md`, where a page puts what a mobile screen needs at hand, such as a record's actions
+* menu, portalled into it; null until the top bar is drawn, and in a shell without one.
+*/
+const TopBarSlotContext = createContext(null);
+/** The top bar's place for the calling page's own controls on a mobile screen, or null when there is none. */
+const useTopBarSlot = () => useContext(TopBarSlotContext);
+//#endregion
+export { TopBarSlotContext, useTopBarSlot };

package/dist/app-shell/top-bar.d.ts

@@ -0,0 +1,3 @@
+import "./global-search.js";
+import "./breadcrumb.js";
+import { ReactNode, Ref } from "react";