@protobase/ui 0.21.7 → 0.21.8

package/dist/app/record-page.js

@@ -49,6 +49,7 @@ import { useLines } from "./use-lines.js";
 import { useLinesDraft } from "./use-lines-draft.js";
 import { GallerySection } from "./gallery/gallery-section.js";
 import { HistorySection } from "./history/history-section.js";
+import { CommentsSection } from "./comments/comments-section.js";
 import { useRecordEditor } from "./use-record-editor.js";
 import { useRelatedRecords } from "./use-related-records.js";
 import { RelatedSection } from "./related-section.js";
@@ -62,21 +63,28 @@ import { enumLabel } from "@protobase/schema";
 const hidden = (model, name) => name === model.tenant || model.primaryKey.includes(name);
 /**
 * The view's layout, or one section with the editable fields when the view has none, then History when the resource
-* keeps it. The read view, which is all a user who may only read the resource gets, shows every field: the record rather
-* than what can be changed.
+* keeps it and Comments when it takes them. The read view, which is all a user who may only read the resource gets,
+* shows every field: the record rather than what can be changed.
 */
 const layoutFor = (model, view, read) => {
 	if (view && view.layout.length > 0) return view.layout;
 	const shown = Object.values(model.fields).filter((field) => !hidden(model, field.name));
 	const editable = shown.filter((field) => !field.readOnly);
-	return [{
-		kind: "section",
-		title: "Details",
-		fields: (editable.length > 0 && !read ? editable : shown).map((field) => field.name)
-	}, ...model.history ? [{
-		kind: "history",
-		title: "History"
-	}] : []];
+	return [
+		{
+			kind: "section",
+			title: "Details",
+			fields: (editable.length > 0 && !read ? editable : shown).map((field) => field.name)
+		},
+		...model.history ? [{
+			kind: "history",
+			title: "History"
+		}] : [],
+		...model.comments ? [{
+			kind: "comments",
+			title: "Comments"
+		}] : []
+	];
 };
 const RecordPage = ({ resource, recordKey }) => {
 	const { resources } = useAdminMeta();
@@ -424,6 +432,12 @@ const LoadedRecord = ({ model, recordKey, stored, preview }) => {
 										recordKey,
 										etag: stored.etag
 									}, `history:${index}`)];
+									if (item.kind === "comments") return [/* @__PURE__ */ jsx(CommentsSection, {
+										item,
+										resource: model.name,
+										recordKey,
+										canWrite: auth.kind !== "visitor"
+									}, `comments:${index}`)];
 									if (item.kind !== "section") return [];
 									const visibleFields = item.fields.filter((name) => model.fields[name] && visible(name));
 									const facts = shown === "read" && item.presentation === "facts";

package/dist/app/related-opens.js

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

package/dist/app/related-section.js

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

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

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

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

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

package/dist/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/row-menu.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { RouteLink } from "../primitives/route-link.js";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { MoreHorizontal } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -70,7 +71,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

@@ -16,9 +16,35 @@ const time = new Intl.DateTimeFormat("en-GB", {
 	hour12: false,
 	timeZone: "UTC"
 });
+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)}`;
+/** "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". */
+const formatTime = (ms) => 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 +66,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/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.21.7";
+var version = "0.21.8";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

package/dist/primitives/segmented.js

@@ -11,10 +11,15 @@ const sizes = {
 		option: "px-3 text-body"
 	}
 };
+/** A segmented switch's classes, for a row of links that looks like one: the group, and each option, `active` the chosen. */
+const segmentedClass = {
+	group: (size = "sm") => cn("inline-flex", sizes[size].group, "rounded-md bg-muted p-0.5"),
+	option: (active, size = "sm") => cn("inline-flex items-center gap-1.5 rounded", sizes[size].option, "font-medium transition-colors", active ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground")
+};
 const Segmented = ({ value, options, onChange, label, size = "sm", iconOnly = false }) => /* @__PURE__ */ jsx("span", {
 	role: "group",
 	"aria-label": label,
-	className: cn("inline-flex", sizes[size].group, "rounded-md bg-muted p-0.5"),
+	className: segmentedClass.group(size),
 	children: options.map((option) => /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		"aria-pressed": option.value === value,
@@ -23,9 +28,9 @@ const Segmented = ({ value, options, onChange, label, size = "sm", iconOnly = fa
 			title: option.label
 		},
 		onClick: () => onChange(option.value),
-		className: cn("inline-flex items-center gap-1.5 rounded", sizes[size].option, "font-medium transition-colors", option.value === value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
+		className: segmentedClass.option(option.value === value, size),
 		children: [option.icon && /* @__PURE__ */ jsx(option.icon, { className: "size-3.5" }), !iconOnly && option.label]
 	}, option.value))
 });
 //#endregion
-export { Segmented };
+export { Segmented, segmentedClass };

package/dist/primitives/textarea.d.ts

@@ -1,9 +1,10 @@
-import { TextareaHTMLAttributes } from "react";
+import { Ref, TextareaHTMLAttributes } from "react";
 //#region src/primitives/textarea.d.ts
 export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'> & {
   value: string;
   invalid?: boolean;
+  ref?: Ref<HTMLTextAreaElement>;
 };
-/** A text box of several lines that grows with its text instead of scrolling inside. */
-export declare const Textarea: ({ invalid, className, rows, value, ...rest }: TextareaProps) => import("react").JSX.Element;
+/** A text box of several lines that grows with its text instead of scrolling inside; `ref` reaches the box too. */
+export declare const Textarea: ({ invalid, className, rows, value, ref: given, ...rest }: TextareaProps) => import("react").JSX.Element;
 //#endregion

package/dist/primitives/textarea.js

@@ -1,15 +1,20 @@
 import { cn } from "../lib/cn.js";
 import { useFieldControl } from "./field-control.js";
-import { useEffect, useLayoutEffect, useRef } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/primitives/textarea.tsx
 const fit = (box) => {
 	box.style.height = "auto";
 	box.style.height = `${box.scrollHeight + box.offsetHeight - box.clientHeight}px`;
 };
-/** A text box of several lines that grows with its text instead of scrolling inside. */
-const Textarea = ({ invalid, className, rows = 3, value, ...rest }) => {
+/** A text box of several lines that grows with its text instead of scrolling inside; `ref` reaches the box too. */
+const Textarea = ({ invalid, className, rows = 3, value, ref: given, ...rest }) => {
 	const ref = useRef(null);
+	const setRef = useCallback((box) => {
+		ref.current = box;
+		if (typeof given === "function") given(box);
+		else if (given) given.current = box;
+	}, [given]);
 	const control = useFieldControl();
 	useLayoutEffect(() => {
 		if (ref.current) fit(ref.current);
@@ -27,7 +32,7 @@ const Textarea = ({ invalid, className, rows = 3, value, ...rest }) => {
 		return () => observer.disconnect();
 	}, []);
 	return /* @__PURE__ */ jsx("textarea", {
-		ref,
+		ref: setRef,
 		rows,
 		value,
 		className: cn("block w-full resize-none overflow-hidden rounded-md border bg-background px-2.5 py-1.5 text-body text-foreground shadow-sm outline-none placeholder:text-faint-foreground focus:border-primary focus:ring-2 focus:ring-primary/20", invalid ? "border-danger" : "border-border-strong", className),