@protobase/ui 0.21.7 → 0.21.9

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/user-to-shell.js

@@ -1,5 +1,7 @@
 //#region src/auth/user-to-shell.ts
+/** The hue of someone's avatar, the same for the same id. */
 const hueOf = (text) => [...text].reduce((sum, char) => (sum * 31 + char.charCodeAt(0)) % 360, 7);
+/** The initials of someone's avatar: the first letters of the first two words of their name. */
 const initialsOf = (name) => name.split(/[\s@.]+/).filter(Boolean).slice(0, 2).map((part) => part[0].toUpperCase()).join("");
 const rolesOf = (user) => (user.role ?? "user").split(",").map((role) => role.trim());
 /** The user holds the `admin` role, among others perhaps. */
@@ -18,4 +20,4 @@ const userToShell = (user) => {
 	};
 };
 //#endregion
-export { isAdmin, userToShell };
+export { hueOf, initialsOf, isAdmin, userToShell };

package/dist/data/api-provider.d.ts

@@ -15,11 +15,21 @@ export declare const useClient: () => {
     etag?: string;
   }) => Promise<void>;
   undelete: <R extends import("@protobase/client").ResourceRef>(resource: R, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[]) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>>>;
+  generate: <R extends import("@protobase/client").ResourceRef>(resource: R, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], action: string) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>>>;
   reveal: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], field: string) => Promise<unknown>;
   history: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], { pageSize, pageToken }?: {
     pageSize?: number;
     pageToken?: string;
   }) => Promise<import("@protobase/client").HistoryPage>;
+  comments: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], { pageSize, pageToken }?: {
+    pageSize?: number;
+    pageToken?: string;
+  }) => Promise<import("@protobase/client").CommentPage>;
+  comment: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], { body, mentions }: {
+    body: string;
+    mentions?: string[];
+  }) => Promise<import("@protobase/client").RecordComment>;
+  mentionable: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], query: string) => Promise<import("@protobase/client").MentionableUser[]>;
   batchWrite: (ops: import("@protobase/client").BatchOp[]) => Promise<import("@protobase/client").BatchResult>;
   facets: (resource: import("@protobase/client").ResourceRef, field: string, o?: {
     filter?: import("@protobase/client").FilterInput;
@@ -63,11 +73,21 @@ export declare const useResourceClient: (resource: string) => {
     etag?: string;
   }) => Promise<void>;
   undelete: <R extends import("@protobase/client").ResourceRef>(resource: R, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[]) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>>>;
+  generate: <R extends import("@protobase/client").ResourceRef>(resource: R, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], action: string) => Promise<import("@protobase/client").Stored<import("@protobase/client").RecordOf<R>>>;
   reveal: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], field: string) => Promise<unknown>;
   history: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], { pageSize, pageToken }?: {
     pageSize?: number;
     pageToken?: string;
   }) => Promise<import("@protobase/client").HistoryPage>;
+  comments: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], { pageSize, pageToken }?: {
+    pageSize?: number;
+    pageToken?: string;
+  }) => Promise<import("@protobase/client").CommentPage>;
+  comment: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], { body, mentions }: {
+    body: string;
+    mentions?: string[];
+  }) => Promise<import("@protobase/client").RecordComment>;
+  mentionable: (resource: import("@protobase/client").ResourceRef, key: import("@protobase/schema").KeyValue | readonly import("@protobase/schema").KeyValue[], query: string) => Promise<import("@protobase/client").MentionableUser[]>;
   batchWrite: (ops: import("@protobase/client").BatchOp[]) => Promise<import("@protobase/client").BatchResult>;
   facets: (resource: import("@protobase/client").ResourceRef, field: string, o?: {
     filter?: import("@protobase/client").FilterInput;

package/dist/data/query-keys.js

@@ -66,6 +66,21 @@ const keys = {
 		"history",
 		pageSize
 	],
+	/** A record's comments; starts with `record`, so refreshing the record refreshes them too. */
+	comments: (resource, key) => [
+		"record",
+		resource,
+		key,
+		"comments"
+	],
+	/** The people a comment on a record may mention whose name contains `query`. */
+	mentionable: (resource, key, query) => [
+		"record",
+		resource,
+		key,
+		"mentionable",
+		query
+	],
 	facets: (resource, field, filter) => [
 		"facets",
 		resource,

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,55 +1,19 @@
 import { cn } from "../lib/cn.js";
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { RouteLink } from "../primitives/route-link.js";
+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(),
@@ -70,7 +34,13 @@ const RowMenu = ({ row, actions }) => {
 			className: "fixed z-50 min-w-36 rounded-md border bg-background py-1 shadow-pop",
 			children: actions.map((action) => /* @__PURE__ */ jsx("li", {
 				role: "none",
-				children: /* @__PURE__ */ jsx("button", {
+				children: action.link ? /* @__PURE__ */ jsx(RouteLink, {
+					role: "menuitem",
+					to: action.link(row),
+					onClick: () => setOpen(false),
+					className: cn("block w-full px-3 py-1.5 text-left hover:bg-muted", action.destructive && "text-danger-text"),
+					children: action.label
+				}) : /* @__PURE__ */ jsx("button", {
 					type: "button",
 					role: "menuitem",
 					className: cn("block w-full px-3 py-1.5 text-left hover:bg-muted", action.destructive && "text-danger-text"),

package/dist/format/date.js

@@ -1,3 +1,4 @@
+import { viewerZone } from "./zone.js";
 //#region src/format/date.ts
 const day = new Intl.DateTimeFormat("en-GB", {
 	day: "numeric",
@@ -10,15 +11,60 @@ const dayShort = new Intl.DateTimeFormat("en-GB", {
 	month: "short",
 	timeZone: "UTC"
 });
-const time = new Intl.DateTimeFormat("en-GB", {
-	hour: "2-digit",
-	minute: "2-digit",
-	hour12: false,
+const month = new Intl.DateTimeFormat("en-GB", {
+	month: "long",
+	year: "numeric",
+	timeZone: "UTC"
+});
+const weekday = new Intl.DateTimeFormat("en-GB", {
+	weekday: "short",
+	timeZone: "UTC"
+});
+const weekdayDate = new Intl.DateTimeFormat("en-GB", {
+	weekday: "long",
+	day: "numeric",
+	month: "short",
+	year: "numeric",
 	timeZone: "UTC"
 });
 const formatDate = (ms) => day.format(ms);
 const formatDayShort = (ms) => dayShort.format(ms);
-const formatDateTime = (ms) => `${day.format(ms)}, ${time.format(ms)}`;
+const zoned = /* @__PURE__ */ new Map();
+const zonedFormats = (zone) => {
+	const known = zoned.get(zone);
+	if (known) return known;
+	const formats = {
+		day: new Intl.DateTimeFormat("en-GB", {
+			day: "numeric",
+			month: "short",
+			year: "numeric",
+			timeZone: zone
+		}),
+		time: new Intl.DateTimeFormat("en-GB", {
+			hour: "2-digit",
+			minute: "2-digit",
+			hour12: false,
+			timeZone: zone
+		})
+	};
+	zoned.set(zone, formats);
+	return formats;
+};
+/** "6 Oct 2026, 16:32": an instant on the clock of `zone`, the viewer's unless given. */
+const formatDateTime = (ms, zone = viewerZone()) => {
+	const formats = zonedFormats(zone);
+	return `${formats.day.format(ms)}, ${formats.time.format(ms)}`;
+};
+/** "October 2026". */
+const formatMonth = (ms) => month.format(ms);
+/** "Mon". */
+const formatWeekday = (ms) => weekday.format(ms);
+/** "Monday, 12 Oct 2026". */
+const formatWeekdayDate = (ms) => weekdayDate.format(ms);
+/** "12–18 Oct 2026", "28 Dec 2026 – 3 Jan 2027": the days from `from` to `to`, both included. */
+const formatDayRange = (from, to) => day.formatRange(from, to);
+/** "09:30": an instant's time on the clock of `zone`, the viewer's unless given. */
+const formatTime = (ms, zone = viewerZone()) => zonedFormats(zone).time.format(ms);
 const formatAgo = (seconds) => {
 	if (seconds < 60) return `${seconds} s ago`;
 	if (seconds < 3600) return `${Math.floor(seconds / 60)} min ago`;
@@ -40,4 +86,4 @@ const formatRelativeTime = (seconds) => {
 	return relative.format(-Math.floor(seconds / size), unit);
 };
 //#endregion
-export { formatAgo, formatDate, formatDateTime, formatDayShort, formatRelativeTime };
+export { formatAgo, formatDate, formatDateTime, formatDayRange, formatDayShort, formatMonth, formatRelativeTime, formatTime, formatWeekday, formatWeekdayDate };

package/dist/format/number-text.js

@@ -0,0 +1,16 @@
+//#region src/format/number-text.ts
+/** The decimal separator `locale` writes, the browser's language unless given: `,` for nl-NL and de-DE, `.` for en-GB. */
+const localeDecimal = (locale) => new Intl.NumberFormat(locale).formatToParts(1.5).find((part) => part.type === "decimal")?.value === "," ? "," : ".";
+const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+/**
+* A number written as text, as a plain decimal (`-1234.5`): digits grouped by thousands with the other separator or
+* spaces, and the `decimal` separator before the fraction. Undefined when the text is no such number.
+*/
+const parseNumberText = (text, decimal) => {
+	const group = `[${escapeRegExp(decimal === "." ? "," : ".")}\\s\\u00a0\\u202f']`;
+	const match = new RegExp(`^([-+]?)(\\d{1,3}(?:${group}\\d{3})+|\\d+)(?:${escapeRegExp(decimal)}(\\d+))?$`).exec(text.trim());
+	if (match) return `${match[1] === "-" ? "-" : ""}${match[2].replace(/\D/g, "")}${match[3] ? `.${match[3]}` : ""}`;
+	if (decimal === "." && /^[-+]?\d+(\.\d+)?e[-+]?\d+$/i.test(text.trim())) return String(Number(text.trim()));
+};
+//#endregion
+export { localeDecimal, parseNumberText };

package/dist/format/zone.js

@@ -0,0 +1,62 @@
+//#region src/format/zone.ts
+/** The viewer's IANA time zone, such as `Europe/Amsterdam`. */
+const viewerZone = () => Intl.DateTimeFormat().resolvedOptions().timeZone;
+const partsFormats = /* @__PURE__ */ new Map();
+const partsFormat = (zone) => {
+	const known = partsFormats.get(zone);
+	if (known) return known;
+	const format = new Intl.DateTimeFormat("en-US", {
+		timeZone: zone,
+		hourCycle: "h23",
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit",
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit"
+	});
+	partsFormats.set(zone, format);
+	return format;
+};
+const wallClock = (ms, zone) => {
+	const parts = Object.fromEntries(partsFormat(zone).formatToParts(ms).map((part) => [part.type, part.value]));
+	return {
+		year: Number(parts.year),
+		month: Number(parts.month),
+		day: Number(parts.day),
+		hour: Number(parts.hour),
+		minute: Number(parts.minute),
+		second: Number(parts.second)
+	};
+};
+/** How far `zone`'s clock is ahead of UTC at `ms`, in milliseconds: 7 200 000 for Amsterdam in summer. */
+const zoneOffset = (ms, zone) => {
+	const clock = wallClock(ms, zone);
+	return Date.UTC(clock.year, clock.month - 1, clock.day, clock.hour, clock.minute, clock.second) - Math.floor(ms / 1e3) * 1e3;
+};
+const pad = (value) => String(value).padStart(2, "0");
+/** The day `ms` falls on in `zone`, as `YYYY-MM-DD`. */
+const dayIn = (ms, zone) => {
+	const clock = wallClock(ms, zone);
+	return `${clock.year}-${pad(clock.month)}-${pad(clock.day)}`;
+};
+/** The instant `zone`'s clock reads `wall`, a wall-clock time written as if it were UTC milliseconds. */
+const instantAt = (wall, zone) => {
+	const guess = wall - zoneOffset(wall, zone);
+	return wall - zoneOffset(guess, zone);
+};
+/** The instant `day` (`YYYY-MM-DD`) starts in `zone`: its local midnight. */
+const startOfDayIn = (day, zone) => instantAt(Date.parse(`${day}T00:00:00Z`), zone);
+const zoneNames = /* @__PURE__ */ new Map();
+/** The zone a time is shown in, as its hover label says: "Europe/Amsterdam (GMT+2)", or "UTC". */
+const zoneLabel = (ms, zone) => {
+	const known = zoneNames.get(zone) ?? new Intl.DateTimeFormat("en-GB", {
+		timeZone: zone,
+		timeZoneName: "shortOffset"
+	});
+	zoneNames.set(zone, known);
+	const name = known.formatToParts(ms).find((part) => part.type === "timeZoneName")?.value ?? zone;
+	return zone === "UTC" || zone === "Etc/UTC" ? "UTC" : `${zone} (${name})`;
+};
+//#endregion
+export { dayIn, instantAt, startOfDayIn, viewerZone, zoneLabel, zoneOffset };

package/dist/live/columns-from-model.js

@@ -3,6 +3,7 @@ import { badgeWidth, headerWidth } from "../data-grid/content-widths.js";
 import { markdownExcerpt } from "../markdown/markdown-excerpt.js";
 import { isMarkdown } from "../markdown/markdown-hint.js";
 import { recordTitleField } from "./model-helpers.js";
+import { contactFormat } from "./contact-links.js";
 import { enumLabel } from "@protobase/schema";
 //#region src/live/columns-from-model.ts
 const tones = {
@@ -82,6 +83,7 @@ const columnsFromModel = (resource, view, highlight = [], names = listColumnName
 			minWidth: Math.max(kind === "id" ? 150 : 0, headerWidth(viewField?.label ?? humanize(name), field.sortable), kind === "status" ? badgeWidth(Object.values(labels)) : 0, suffixWidth > 0 ? widths[kind] + suffixWidth : 0),
 			...fixedKinds.has(kind) && { fixed: true },
 			...name === title && { title: true },
+			...kind === "text" && name !== title && contactFormat(viewField) && { link: contactFormat(viewField) },
 			...highlight.includes(name) && { highlight: true },
 			...field.type === "enum" && {
 				tones: Object.fromEntries((field.enumValues ?? []).map((value) => [value, toneFor(value)])),

package/dist/live/contact-link.js

@@ -0,0 +1,25 @@
+import { cn } from "../lib/cn.js";
+import { contactHref } from "./contact-links.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/live/contact-link.tsx
+const stayInRow = (event) => event.stopPropagation();
+/** A value that is an address as a link that writes to, calls or opens it, a web page in a new tab; else its text. */
+const ContactLink = ({ format, value, className }) => {
+	const href = contactHref(format, value);
+	if (!href) return /* @__PURE__ */ jsx("span", {
+		className,
+		children: value
+	});
+	return /* @__PURE__ */ jsx("a", {
+		href,
+		...format === "url" ? {
+			target: "_blank",
+			rel: "noreferrer"
+		} : {},
+		onClick: stayInRow,
+		className: cn("font-medium text-primary-text hover:underline", className),
+		children: value
+	});
+};
+//#endregion
+export { ContactLink };

package/dist/live/contact-links.js

@@ -0,0 +1,42 @@
+//#region src/live/contact-links.ts
+const contactFormats = /* @__PURE__ */ new Set([
+	"email",
+	"phone",
+	"url"
+]);
+/** The view's contact format for a field, if it has one. */
+const contactFormat = (hints) => hints?.format !== void 0 && contactFormats.has(hints.format) ? hints.format : void 0;
+/**
+* Where a value links: `mailto:` an email address, `tel:` a phone number with only its digits and a leading +, and a
+* web address as it is when it is http or https. Nothing for a value that is no such address, which shows as text.
+*/
+const contactHref = (format, value) => {
+	const text = value.trim();
+	if (format === "email") return /^[^\s@]+@[^\s@]+$/.test(text) ? `mailto:${text}` : void 0;
+	if (format === "phone") {
+		const digits = text.replace(/[^\d+]/g, "").replace(/(?!^)\+/g, "");
+		return /\d/.test(digits) ? `tel:${digits}` : void 0;
+	}
+	return /^https?:\/\/\S+$/i.test(text) ? text : void 0;
+};
+/** The input a contact field is edited in: its type, so a mobile screen shows the keyboard for it, and its autofill. */
+const contactInputProps = (format) => {
+	if (format === "email") return {
+		type: "email",
+		inputMode: "email",
+		autoComplete: "email"
+	};
+	if (format === "phone") return {
+		type: "tel",
+		inputMode: "tel",
+		autoComplete: "tel"
+	};
+	if (format === "url") return {
+		type: "url",
+		inputMode: "url",
+		autoComplete: "url"
+	};
+	return {};
+};
+//#endregion
+export { contactFormat, contactHref, contactInputProps };