@protobase/ui 0.21.8 → 0.21.10

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";
@@ -52,6 +54,7 @@ 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";
@@ -121,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();
@@ -168,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;
@@ -180,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);
@@ -279,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
 			});
@@ -349,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)
@@ -404,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,
@@ -463,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",
@@ -495,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/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-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";

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

@@ -6,8 +6,9 @@ import { useEffect, useRef, useState } from "react";
 import { ChevronLeft, Menu, Search, X } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/top-bar.tsx
-const iconButton = "inline-flex size-11 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted md:hidden";
-const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControls, search, sticky, ref }) => {
+/** An icon button of the top bar on a mobile screen, as the menu, back and search buttons are. */
+const topBarButton = "inline-flex size-11 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted md:hidden";
+const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControls, search, sticky, slotRef, ref }) => {
 	const [searchOpen, setSearchOpen] = useState(false);
 	const back = backTarget(breadcrumb);
 	const desktopSearch = useRef(null);
@@ -33,7 +34,7 @@ const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControl
 				"aria-expanded": Boolean(menuOpen),
 				"aria-controls": menuControls,
 				onClick: onMenu,
-				className: cn(iconButton, "-ml-3"),
+				className: cn("inline-flex size-11 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted md:hidden", "-ml-3"),
 				children: /* @__PURE__ */ jsx(Menu, { className: "size-5" })
 			}),
 			back && /* @__PURE__ */ jsx("a", {
@@ -44,7 +45,7 @@ const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControl
 					event.preventDefault();
 					onNavigate(back.href);
 				},
-				className: cn(iconButton, !onMenu && "-ml-3"),
+				className: cn("inline-flex size-11 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted md:hidden", !onMenu && "-ml-3"),
 				children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-5" })
 			}),
 			/* @__PURE__ */ jsx(Breadcrumb, {
@@ -53,20 +54,27 @@ const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControl
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "ml-auto flex items-center gap-1 md:gap-3",
-				children: [search && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-					className: "hidden md:block",
-					children: /* @__PURE__ */ jsx(GlobalSearch, {
-						ref: desktopSearch,
-						search
+				children: [
+					search && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+						className: "hidden md:block",
+						children: /* @__PURE__ */ jsx(GlobalSearch, {
+							ref: desktopSearch,
+							search
+						})
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": "Search",
+						"aria-expanded": searchOpen,
+						onClick: () => setSearchOpen(true),
+						className: "inline-flex size-11 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted md:hidden",
+						children: /* @__PURE__ */ jsx(Search, { className: "size-5" })
+					})] }),
+					actions,
+					/* @__PURE__ */ jsx("div", {
+						ref: slotRef,
+						className: "contents md:hidden"
 					})
-				}), /* @__PURE__ */ jsx("button", {
-					type: "button",
-					"aria-label": "Search",
-					"aria-expanded": searchOpen,
-					onClick: () => setSearchOpen(true),
-					className: iconButton,
-					children: /* @__PURE__ */ jsx(Search, { className: "size-5" })
-				})] }), actions]
+				]
 			}),
 			search && searchOpen && /* @__PURE__ */ jsxs("div", {
 				className: "absolute inset-0 z-20 flex items-center gap-1 bg-background px-3 md:hidden",
@@ -85,7 +93,7 @@ const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControl
 					type: "button",
 					"aria-label": "Close search",
 					onClick: () => setSearchOpen(false),
-					className: iconButton,
+					className: "inline-flex size-11 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted md:hidden",
 					children: /* @__PURE__ */ jsx(X, { className: "size-5" })
 				})]
 			})
@@ -93,4 +101,4 @@ const TopBar = ({ breadcrumb, onNavigate, actions, onMenu, menuOpen, menuControl
 	});
 };
 //#endregion
-export { TopBar };
+export { TopBar, topBarButton };

package/dist/auth/auth-messages.js

@@ -49,7 +49,8 @@ const providerMessages = {
 	account_not_linked: (name) => `Your ${name} account is not linked to your account here. Sign in another way, then connect ${name} on the Sign-in & security page.`,
 	account_already_linked_to_different_user: (name) => `This ${name} account is linked to someone else here already.`,
 	unable_to_link_account: (name) => `Your ${name} account could not be linked. Try again.`,
-	access_denied: (name) => `${name} did not let you in, or you cancelled.`
+	access_denied: (name) => `${name} did not let you in, or you cancelled.`,
+	EMAIL_DOMAIN_NOT_ALLOWED: (name) => `${name} signed you in with an address this app does not accept from it. Sign in another way.`
 };
 /** Why signing in or linking with the provider `name` did not go through, from the code it came back with. */
 const providerMessage = (code, name) => providerMessages[code]?.(name) ?? `Signing in with ${name} did not go through. Try again.`;

package/dist/auth/auth-provider.js

@@ -18,6 +18,7 @@ const AuthProvider = ({ session: given, children }) => {
 	const [passkeyDomains, setPasskeyDomains] = useState([]);
 	const [socialProviders, setSocialProviders] = useState([]);
 	const [platformSignIn, setPlatformSignIn] = useState();
+	const [samlProviders, setSamlProviders] = useState([]);
 	const [staffSignIn, setStaffSignIn] = useState();
 	const [organizations, setOrganizations] = useState();
 	const [anonymous, setAnonymous] = useState(false);
@@ -52,6 +53,7 @@ const AuthProvider = ({ session: given, children }) => {
 			setPasskeyDomains(status.passkeyDomains ?? []);
 			setSocialProviders(status.socialProviders);
 			setPlatformSignIn(status.platformSignIn);
+			setSamlProviders(status.samlProviders);
 			setStaffSignIn(status.staffSignIn);
 			setOrganizations(status.organizations);
 			setAnonymous(Boolean(status.anonymous));
@@ -73,10 +75,10 @@ const AuthProvider = ({ session: given, children }) => {
 		canSignUp,
 		passkeyDomains,
 		socialProviders,
-		signInProviders: socialProviders.map((id) => ({
+		signInProviders: [...socialProviders.map((id) => ({
 			id,
 			name: providerName(id, platformSignIn)
-		})),
+		})), ...samlProviders],
 		staffSignIn,
 		...organizations && { organizations },
 		markSignedOut,
@@ -100,7 +102,9 @@ const AuthProvider = ({ session: given, children }) => {
 		signInWithPasskey: async (domain) => enter(await session.signInWithPasskey(domain)),
 		verifyTwoFactor: async (input) => enter(await session.verifyTwoFactor(input)),
 		signInSocial: async (provider) => {
-			window.location.assign(await session.signInSocial(provider, new URL(withoutSignInLink(window.location.href), window.location.href).href));
+			const callbackURL = new URL(withoutSignInLink(window.location.href), window.location.href).href;
+			const saml = samlProviders.some((candidate) => candidate.id === provider);
+			window.location.assign(await (saml ? session.signInSaml(provider, callbackURL) : session.signInSocial(provider, callbackURL)));
 		},
 		linkProvider: async (provider) => {
 			window.location.assign(await session.account.linkProvider(provider, new URL(withoutSignInLink(window.location.href), window.location.href).href));
@@ -122,6 +126,7 @@ const AuthProvider = ({ session: given, children }) => {
 		passkeyDomains,
 		socialProviders,
 		platformSignIn,
+		samlProviders,
 		staffSignIn,
 		organizations,
 		anonymous,

package/dist/data-grid/cells.js

@@ -1,10 +1,12 @@
 import { cn } from "../lib/cn.js";
 import { Avatar } from "../primitives/avatar.js";
 import { Badge } from "../primitives/badge.js";
+import { viewerZone, zoneLabel } from "../format/zone.js";
 import { userById } from "../mocks/users.js";
 import { fileShown, shownImage } from "../live/file-values.js";
 import { cellText } from "./cell-text.js";
 import { FileImage } from "../live/file-image.js";
+import { ContactLink } from "../live/contact-link.js";
 import { valueColor } from "../live/value-color.js";
 import { TruncatedText } from "./truncated-text.js";
 import { Check, Paperclip } from "lucide-react";
@@ -18,7 +20,11 @@ const renderCell = (spec, value) => {
 	if (value === null || value === void 0) return muted("—");
 	const text = cellText(spec, value) ?? "";
 	switch (spec.kind) {
-		case "text": return /* @__PURE__ */ jsx(TruncatedText, { text });
+		case "text": return spec.link ? /* @__PURE__ */ jsx(ContactLink, {
+			format: spec.link,
+			value: text,
+			className: "block min-w-0 truncate"
+		}) : /* @__PURE__ */ jsx(TruncatedText, { text });
 		case "id": return /* @__PURE__ */ jsx(TruncatedText, {
 			text,
 			className: "font-mono text-xs text-muted-foreground"
@@ -33,6 +39,7 @@ const renderCell = (spec, value) => {
 		});
 		case "datetime": return /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums text-muted-foreground",
+			title: `Shown in ${zoneLabel(Number(value), viewerZone())}`,
 			children: text
 		});
 		case "number": return /* @__PURE__ */ jsx("span", {