@protobase/ui 0.21.8 → 0.21.9

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/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", {

package/dist/data-grid/grid-header.js

@@ -2,15 +2,22 @@ import { cn } from "../lib/cn.js";
 import { Checkbox } from "../primitives/checkbox.js";
 import { gridTemplate } from "./grid-template.js";
 import { isRightAligned } from "./column-spec.js";
-import { HeaderMenu } from "./header-menu.js";
+import { HeaderMenu, unsortableText } from "./header-menu.js";
 import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/data-grid/grid-header.tsx
 const SortIcon = ({ sorted }) => {
 	if (sorted === "asc") return /* @__PURE__ */ jsx(ArrowUp, { className: "size-3 text-foreground" });
 	if (sorted === "desc") return /* @__PURE__ */ jsx(ArrowDown, { className: "size-3 text-foreground" });
 	return /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-3 opacity-0 group-hover/head:opacity-100" });
 };
+const HeaderLabel = ({ spec }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+	className: "truncate",
+	children: spec.header
+}), spec.highlight && /* @__PURE__ */ jsx("span", {
+	className: "rounded bg-primary px-1 text-[10px] font-semibold uppercase leading-4 text-primary-foreground",
+	children: "New"
+})] });
 const GridHeader = ({ cells, specs, gutter, selectedCount, selectable, trailing, minScale, pins = {}, lastPinned, scrolled, onTogglePin, onClearSelection }) => /* @__PURE__ */ jsxs("div", {
 	className: "grid h-8 shrink-0 items-center border-b bg-surface text-xs font-medium text-muted-foreground",
 	style: { gridTemplateColumns: gridTemplate(specs, gutter, trailing, minScale) },
@@ -37,27 +44,21 @@ const GridHeader = ({ cells, specs, gutter, selectedCount, selectable, trailing,
 				"data-col-id": spec.id,
 				style: pinned ? { left: pins[spec.id] } : void 0,
 				className: cn("group/cell flex h-full min-w-0 items-center", pinned && "sticky z-10 bg-inherit", pinned && scrolled && spec.id === lastPinned && "shadow-[1px_0_0_var(--border),4px_0_6px_-2px_rgb(0_0_0/0.12)]", spec.highlight && "bg-primary-soft text-primary-text"),
-				children: [/* @__PURE__ */ jsxs("button", {
+				children: [spec.sortable ? /* @__PURE__ */ jsxs("button", {
 					type: "button",
 					onClick: onSort,
-					disabled: !spec.sortable,
-					className: cn("group/head flex h-full min-w-0 flex-1 items-center gap-1 pl-3 pr-1 text-left", isRightAligned(spec.kind) && "justify-end", spec.sortable && "hover:text-foreground", sorted && "text-foreground"),
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							className: "truncate",
-							children: spec.header
-						}),
-						spec.highlight && /* @__PURE__ */ jsx("span", {
-							className: "rounded bg-primary px-1 text-[10px] font-semibold uppercase leading-4 text-primary-foreground",
-							children: "New"
-						}),
-						spec.sortable && /* @__PURE__ */ jsx(SortIcon, { sorted })
-					]
+					className: cn("group/head flex h-full min-w-0 flex-1 items-center gap-1 pl-3 pr-1 text-left", isRightAligned(spec.kind) && "justify-end", "hover:text-foreground", sorted && "text-foreground"),
+					children: [/* @__PURE__ */ jsx(HeaderLabel, { spec }), /* @__PURE__ */ jsx(SortIcon, { sorted })]
+				}) : /* @__PURE__ */ jsx("div", {
+					title: unsortableText,
+					className: cn("flex h-full min-w-0 flex-1 items-center gap-1 pl-3 pr-1 text-left", isRightAligned(spec.kind) && "justify-end"),
+					children: /* @__PURE__ */ jsx(HeaderLabel, { spec })
 				}), /* @__PURE__ */ jsx("div", {
 					className: "pr-1.5",
 					children: /* @__PURE__ */ jsx(HeaderMenu, {
 						header: spec.header,
 						pinned,
+						sortable: Boolean(spec.sortable),
 						onTogglePin: () => onTogglePin(spec.id)
 					})
 				})]

package/dist/data-grid/header-menu.js

@@ -2,8 +2,10 @@ import { useEffect, useRef, useState } from "react";
 import { MoreHorizontal } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/data-grid/header-menu.tsx
-/** The "..." in a column header: for now, pinning the column to the left edge. */
-const HeaderMenu = ({ header, pinned, onTogglePin }) => {
+/** Why a column header does nothing when pressed: a list sorts only on the columns its view makes sortable. */
+const unsortableText = "This column can't be sorted";
+/** The "..." in a column header: pinning the column to the left edge, and saying so when the list can't sort by it. */
+const HeaderMenu = ({ header, pinned, sortable, onTogglePin }) => {
 	const [open, setOpen] = useState(false);
 	const root = useRef(null);
 	useEffect(() => {
@@ -29,10 +31,18 @@ const HeaderMenu = ({ header, pinned, onTogglePin }) => {
 			onClick: () => setOpen(!open),
 			className: "relative inline-flex size-5 items-center justify-center rounded text-faint-foreground hover:bg-muted hover:text-foreground focus-visible:opacity-100 after:absolute after:-inset-2 after:content-[''] md:opacity-0 md:group-hover/cell:opacity-100 aria-expanded:opacity-100",
 			children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-3.5" })
-		}), open && /* @__PURE__ */ jsx("ul", {
+		}), open && /* @__PURE__ */ jsxs("ul", {
 			role: "menu",
 			className: "absolute right-0 top-full z-30 mt-1 min-w-32 rounded-md border bg-background py-1 text-body font-normal text-foreground shadow-pop",
-			children: /* @__PURE__ */ jsx("li", {
+			children: [!sortable && /* @__PURE__ */ jsx("li", {
+				role: "none",
+				children: /* @__PURE__ */ jsx("span", {
+					role: "menuitem",
+					"aria-disabled": "true",
+					className: "block min-h-9 whitespace-nowrap px-3 py-1.5 text-muted-foreground",
+					children: "This column can't be sorted"
+				})
+			}), /* @__PURE__ */ jsx("li", {
 				role: "none",
 				children: /* @__PURE__ */ jsx("button", {
 					type: "button",
@@ -44,9 +54,9 @@ const HeaderMenu = ({ header, pinned, onTogglePin }) => {
 					},
 					children: pinned ? "Unpin" : "Pin to left"
 				})
-			})
+			})]
 		})]
 	});
 };
 //#endregion
-export { HeaderMenu };
+export { HeaderMenu, unsortableText };

package/dist/data-grid/row-menu.js

@@ -1,56 +1,19 @@
 import { cn } from "../lib/cn.js";
 import { RouteLink } from "../primitives/route-link.js";
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { usePopoverMenu } from "../primitives/popover-menu.js";
 import { MoreHorizontal } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 //#region src/data-grid/row-menu.tsx
 /** The actions that apply to a row; a row with none gets no menu at all. */
 const availableActions = (actions, row) => actions.filter((action) => action.available?.(row) ?? true);
-const gap = 4;
-/** Below the button, or above it when the viewport has no room underneath. */
-const placeMenu = (button, menuHeight) => {
-	const below = button.bottom + gap;
-	return {
-		top: below + menuHeight > window.innerHeight - gap ? Math.max(gap, button.top - gap - menuHeight) : below,
-		right: window.innerWidth - button.right
-	};
-};
 /**
 * The "..." button at the end of a row, with a small menu of the row's actions. The menu is portalled to the body:
 * every grid row is its own stacking context and the grid body clips, so a menu inside the row would sit under the
 * rows below it.
 */
 const RowMenu = ({ row, actions }) => {
-	const [open, setOpen] = useState(false);
-	const [place, setPlace] = useState();
-	const button = useRef(null);
-	const menu = useRef(null);
-	useLayoutEffect(() => {
-		if (!open || !button.current || !menu.current) {
-			setPlace(void 0);
-			return;
-		}
-		setPlace(placeMenu(button.current.getBoundingClientRect(), menu.current.offsetHeight));
-	}, [open]);
-	useEffect(() => {
-		if (!open) return;
-		const inside = (target) => button.current?.contains(target) || menu.current?.contains(target);
-		const close = (event) => {
-			if (event instanceof KeyboardEvent ? event.key === "Escape" : !inside(event.target)) setOpen(false);
-		};
-		const dismiss = () => setOpen(false);
-		document.addEventListener("mousedown", close);
-		document.addEventListener("keydown", close);
-		document.addEventListener("scroll", dismiss, true);
-		window.addEventListener("resize", dismiss);
-		return () => {
-			document.removeEventListener("mousedown", close);
-			document.removeEventListener("keydown", close);
-			document.removeEventListener("scroll", dismiss, true);
-			window.removeEventListener("resize", dismiss);
-		};
-	}, [open]);
+	const { open, setOpen, place, button, menu } = usePopoverMenu();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative flex justify-center bg-inherit",
 		onClick: (event) => event.stopPropagation(),