@protobase/ui 0.55.3 → 0.55.4

package/dist/app/create/create-page.js

@@ -12,9 +12,10 @@ import { can } from "../permissions.js";
 import { fetchLabels } from "../../live/relation-labels.js";
 import { fieldErrors, fieldMessage } from "../field-errors.js";
 import { useFocusFirstInvalid } from "../use-focus-first-invalid.js";
-import { useLiveSave } from "../use-live-save.js";
+import { nothingSaved, useLiveSave } from "../use-live-save.js";
 import { CreateRecordForm } from "./create-record-form.js";
 import { useEffect, useState } from "react";
+import { isApiError } from "@protobase/client";
 import { jsx } from "react/jsx-runtime";
 import { useQueryClient } from "@tanstack/react-query";
 //#region src/app/create/create-page.tsx
@@ -92,6 +93,15 @@ const LoadedCreate = ({ resource, values }) => {
 		try {
 			created = await client.create(resource, createBody(model, meta.resources, draft));
 		} catch (error) {
+			const existing = isApiError(error) ? error.existing : void 0;
+			if (existing) {
+				setNewRecord({
+					kind: "record",
+					resource,
+					key: existing.key
+				});
+				return nothingSaved;
+			}
 			const found = fieldErrors(error);
 			setErrors(found);
 			if (Object.keys(found).length > 0) setRejections((count) => count + 1);

package/dist/app/marks/marks-hook.d.ts

@@ -0,0 +1,10 @@
+import { RecordMark } from "../../app-shell/nav.js";
+//#region src/app/marks/marks-hook.d.ts
+/**
+ * A hook a view's `.nav({ recent: { marks: name } })` names: how each record of `resource` stands out in the sidebar
+ * for the person reading, by the record's key as its address carries it, such as an unread conversation drawn bold with a
+ * count of its mentions. The sidebar group calls it while it shows the records, so it may use the API client, live
+ * updates and queries; returning undefined, as while it loads, marks none.
+ */
+export type MarksHook = (resource: string) => Record<string, RecordMark> | undefined;
+//#endregion

package/dist/app/nav-recent.js

@@ -48,5 +48,14 @@ const recentRowDiffers = (model, fields, rows, key, record) => {
 	const row = rows.find((entry) => encodeKey(recordKey(model, entry)) === key);
 	return row !== void 0 && fields.some((field) => !Object.is(row[field], record[field]));
 };
+/**
+* The hook that marks a group's records for the reader: the project UI's `marks` hook the group names, called with its
+* resource. None when the group names no marks, or a name no UI config registers, such as a plugin that is turned off.
+*/
+const recentMarks = (resource, recent, hooks) => {
+	if (recent.marks === void 0 || !hooks || !Object.hasOwn(hooks, recent.marks)) return;
+	const hook = hooks[recent.marks];
+	return () => hook(resource);
+};
 //#endregion
-export { recentRecords, recentRequest, recentRowDiffers };
+export { recentMarks, recentRecords, recentRequest, recentRowDiffers };

package/dist/app/pages/merge-ui.d.ts

@@ -2,7 +2,7 @@ import { ProjectUi } from "./project-ui.js";
 //#region src/app/pages/merge-ui.d.ts
 /**
  * One UI config from several, each after the ones it `extends`, the last being the app's own: components, action
- * handlers, field types, drop rules, board drops and title rules are all kept, and one name defined by two configs is an error naming both; every shell slot
+ * handlers, field types, drop rules, board drops, title rules and marks hooks are all kept, and one name defined by two configs is an error naming both; every shell slot
  * and `beforeSignIn` component is drawn, the extended configs' first, except the logo and the bell, the last config's to set one.
  */
 export declare const mergeUi: (...uis: ProjectUi[]) => ProjectUi;

package/dist/app/pages/merge-ui.js

@@ -35,7 +35,7 @@ const around = (wrappers) => {
 };
 /**
 * One UI config from several, each after the ones it `extends`, the last being the app's own: components, action
-* handlers, field types, drop rules, board drops and title rules are all kept, and one name defined by two configs is an error naming both; every shell slot
+* handlers, field types, drop rules, board drops, title rules and marks hooks are all kept, and one name defined by two configs is an error naming both; every shell slot
 * and `beforeSignIn` component is drawn, the extended configs' first, except the logo and the bell, the last config's to set one.
 */
 const mergeUi = (...uis) => {
@@ -46,6 +46,7 @@ const mergeUi = (...uis) => {
 	const dropRules = union("The drop rule", named, (ui) => ui.dropRules);
 	const boardDrops = union("The board drop", named, (ui) => ui.boardDrops);
 	const titles = union("The title rule", named, (ui) => ui.titles);
+	const marks = union("The marks hook", named, (ui) => ui.marks);
 	const actionSlot = slot(named.flatMap(({ ui }) => ui.shell?.actions ? [ui.shell.actions] : []));
 	const rightPanel = slot(named.flatMap(({ ui }) => ui.shell?.rightPanel ? [ui.shell.rightPanel] : []));
 	const logo = named.findLast(({ ui }) => ui.shell?.logo)?.ui.shell?.logo;
@@ -60,6 +61,7 @@ const mergeUi = (...uis) => {
 		...Object.keys(dropRules).length > 0 && { dropRules },
 		...Object.keys(boardDrops).length > 0 && { boardDrops },
 		...Object.keys(titles).length > 0 && { titles },
+		...Object.keys(marks).length > 0 && { marks },
 		...(actionSlot || rightPanel || logo || bell) && { shell: {
 			...actionSlot && { actions: actionSlot },
 			...rightPanel && { rightPanel },

package/dist/app/pages/project-ui.d.ts

@@ -3,6 +3,7 @@ import { FieldWidget } from "../field-types/field-widget.js";
 import { BoardDrop } from "../displays/board-drop.js";
 import { DropRule } from "../hand-order/drop-rule.js";
 import { TitleRule } from "../titles/title-rule.js";
+import { MarksHook } from "../marks/marks-hook.js";
 import { ComponentType, ReactNode } from "react";
 import { Client } from "@protobase/client";
 import { AppAddress } from "@protobase/schema";
@@ -47,7 +48,7 @@ export type BeforeSignInProps = {
  * The project's own React code for composed pages: custom components by the name their layout declares
  * (`component('UsageChart')`) or a widget part names, handlers for named actions that have no built-in behaviour,
  * field types by the name a view's `.widget(name)` chooses, drop rules by the name a list's `drag.rule` gives, board
- * drops by the name a list's `drag.board` gives, title rules by the name a view's `.titleFrom` gives, and the shell's slots. `extends` lists UI configs merged in before it (see `mergeUi`), or whole `protobase.ui.tsx` modules
+ * drops by the name a list's `drag.board` gives, title rules by the name a view's `.titleFrom` gives, marks hooks by the name a view's `nav.recent.marks` gives, and the shell's slots. `extends` lists UI configs merged in before it (see `mergeUi`), or whole `protobase.ui.tsx` modules
  * (`import * as tasksUi from '...'`), their exported components included; `name` names it in their errors.
  */
 export type ProjectUi = {
@@ -63,6 +64,8 @@ export type ProjectUi = {
   boardDrops?: Record<string, BoardDrop>;
   /** A record's title for the person reading it, by the name a view's `.titleFrom` gives (see `TitleRule`). */
   titles?: Record<string, TitleRule>;
+  /** How the sidebar marks a resource's records for the person reading, by the name a view's `nav.recent.marks` gives (see `MarksHook`). */
+  marks?: Record<string, MarksHook>;
   /**
    * Rendered in the shell on every page: `actions` at the end of the top bar, `rightPanel` beside the page, `logo`
    * at the top of the sidebar in place of Protobase's (see `ShellLogoProps`), and `bell` in the top bar in place of the

package/dist/app/use-live-save.js

@@ -5,10 +5,13 @@ import { useEffect, useRef, useState } from "react";
 import { isApiError } from "@protobase/client";
 //#region src/app/use-live-save.ts
 const savedForMs = 2e3;
+/** What a save's action resolves to when it wrote nothing and needs no word, such as a create that opens the record it repeats. */
+const nothingSaved = Symbol("nothing saved");
 /**
 * Shows the outcome of a save the way the view asks: a toast (spinner, then check) or the state of
-* the Save button. API errors are reported and not rethrown; anything else propagates. `run` resolves to whether the
-* save went through.
+* the Save button. API errors are reported and not rethrown; anything else propagates. An action that resolves to
+* `nothingSaved` wrote nothing and says nothing: its toast goes away. `run` resolves to whether the save went through
+* or wrote nothing.
 */
 const useLiveSave = (mode, subject) => {
 	const toast = useToast();
@@ -24,7 +27,11 @@ const useLiveSave = (mode, subject) => {
 		setMessage(void 0);
 		if (mode === "button") setPhase("saving");
 		try {
-			await action();
+			if (await action() === nothingSaved) {
+				if (id !== void 0) toast.dismiss(id);
+				if (mode === "button") setPhase("idle");
+				return true;
+			}
 			if (id !== void 0) toast.update(id, {
 				state: "success",
 				title: text("subjectSaved", subject)
@@ -57,4 +64,4 @@ const useLiveSave = (mode, subject) => {
 	};
 };
 //#endregion
-export { useLiveSave };
+export { nothingSaved, useLiveSave };

package/dist/app/use-nav-recent.js

@@ -1,8 +1,9 @@
 import { keys } from "../data/query-keys.js";
 import { useClient } from "../data/api-provider.js";
+import { useProjectUi } from "./pages/project-ui.js";
 import { useRecordTitle } from "./titles/record-titles.js";
 import { userMenuResources } from "./user-menu-from-meta.js";
-import { recentRecords, recentRequest, recentRowDiffers } from "./nav-recent.js";
+import { recentMarks, recentRecords, recentRequest, recentRowDiffers } from "./nav-recent.js";
 import { useEffect, useMemo } from "react";
 import { useQueries, useQueryClient } from "@tanstack/react-query";
 //#region src/app/use-nav-recent.ts
@@ -31,11 +32,12 @@ const useFollowRecords = (groups) => {
 /**
 * The records of every sidebar group (`nav.recent`), one list request each, under the `list` query key so that any
 * write to the resource refreshes them, as does reading one of their records anew. The server applies the caller's
-* access, as on the list page.
+* access, as on the list page. A group that names `marks` gets the project UI's hook, which the sidebar calls.
 */
 const useNavRecent = (meta, basePath, active) => {
 	const client = useClient();
 	const titleOf = useRecordTitle();
+	const { marks } = useProjectUi();
 	const groups = useMemo(() => {
 		const inMenu = userMenuResources(meta);
 		return Object.values(meta.views).flatMap((view) => {
@@ -45,23 +47,25 @@ const useNavRecent = (meta, basePath, active) => {
 				model,
 				view,
 				recent,
-				request: recentRequest(model, view, recent)
+				request: recentRequest(model, view, recent),
+				useMarks: recentMarks(model.name, recent, marks)
 			}] : [];
 		});
-	}, [meta]);
+	}, [meta, marks]);
 	useFollowRecords(groups);
 	const results = useQueries({ queries: groups.map((group) => ({
 		queryKey: groupKey(group),
 		queryFn: () => client.list(group.model.name, group.request)
 	})) });
-	return Object.fromEntries(groups.map(({ model, view, recent }, index) => {
+	return Object.fromEntries(groups.map(({ model, view, recent, useMarks }, index) => {
 		const result = results[index];
 		if (result.isPending) return [model.name, { state: "loading" }];
 		if (result.isError) return [model.name, { state: "error" }];
 		const activeKey = active.resource === model.name ? active.key : void 0;
 		return [model.name, {
 			state: "ready",
-			records: recentRecords(model, view, recent, result.data.items, basePath, activeKey, titleOf)
+			records: recentRecords(model, view, recent, result.data.items, basePath, activeKey, titleOf),
+			...useMarks && { useMarks }
 		}];
 	}));
 };

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

@@ -1,5 +1,5 @@
 import "./bottom-bar.js";
-import "./nav.js";
+import { RecordMark } from "./nav.js";
 import "./profile-menu.js";
 import { SidebarMode, sidebarModes } from "./sidebar-mode.js";
 import "./global-search.js";

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

@@ -1,2 +1,14 @@
 import "lucide-react";
-import "@protobase/schema";
+import "@protobase/schema";
+//#region src/app-shell/nav.d.ts
+/**
+ * How a record under a sidebar entry stands out for the person reading, such as an unread conversation: `strong` draws
+ * its title bold, `count` a badge at the end of its row (none at 0), and `label`, such as "3 mentions", is added to its
+ * name for screen readers and its tooltip.
+ */
+export type RecordMark = {
+  strong?: boolean;
+  count?: number;
+  label?: string;
+};
+//#endregion

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

@@ -0,0 +1,18 @@
+//#region src/app-shell/record-marks.ts
+const markRecords = (records, marks) => records.map((record) => {
+	const mark = marks && Object.hasOwn(marks, record.id) ? marks[record.id] : void 0;
+	return mark ? {
+		...record,
+		mark
+	} : record;
+});
+/** What a sidebar record is called for screen readers and in its tooltip: its title, with its status and its mark's label. */
+const recordNames = (record) => {
+	const extra = [record.status?.label, record.mark?.label].filter((part) => part !== void 0 && part !== "");
+	return {
+		ariaLabel: [record.label, ...extra].join(", "),
+		title: extra.length === 0 ? record.label : `${record.label} (${extra.join(", ")})`
+	};
+};
+//#endregion
+export { markRecords, recordNames };

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

@@ -3,14 +3,15 @@ import { text } from "./messages.js";
 import { subRow, subRowIndent } from "./sidebar-rows.js";
 import { navOpenStorageKey, readNavOpen, writeNavOpen } from "./nav-open-storage.js";
 import { SidebarItem } from "./sidebar-item.js";
-import { StatusDot } from "./status-dot.js";
+import { SidebarRecords } from "./sidebar-records.js";
 import { useId, useState } from "react";
 import { ChevronRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/sidebar-group.tsx
 /**
-* A sidebar entry with a few of its records under it. The label opens the list, the chevron shows or hides the
-* records (remembered in this browser), and "View all" at the end opens the list too.
+* A sidebar entry with a few of its records under it, each marked for the reader when the group has marks. The label
+* opens the list, the chevron shows or hides the records (remembered in this browser), and "View all" at the end opens
+* the list too.
 */
 const SidebarGroup = ({ item, recent, mode, active, onNavigate }) => {
 	const storageKey = navOpenStorageKey(item.id);
@@ -60,20 +61,12 @@ const SidebarGroup = ({ item, recent, mode, active, onNavigate }) => {
 					className: cn("flex items-center text-faint-foreground", subRow[mode]),
 					children: text("couldNotLoad")
 				}),
-				recent.state === "ready" && recent.records.map((record) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
-					...link(record.href),
-					"aria-label": record.status ? `${record.label}, ${record.status.label}` : record.label,
-					title: record.status ? `${record.label} (${record.status.label})` : record.label,
-					"aria-current": record.active ? "page" : void 0,
-					className: cn("flex min-w-0 items-center rounded-md font-medium transition-colors", subRow[mode], record.active ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"),
-					children: [record.status && /* @__PURE__ */ jsx(StatusDot, {
-						tone: record.status.tone,
-						pulse: record.status.pulse
-					}), /* @__PURE__ */ jsx("span", {
-						className: "truncate",
-						children: record.label
-					})]
-				}) }, record.id)),
+				recent.state === "ready" && /* @__PURE__ */ jsx(SidebarRecords, {
+					records: recent.records,
+					useMarks: recent.useMarks,
+					mode,
+					onNavigate
+				}),
 				/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
 					...link(href),
 					className: cn("flex items-center rounded-md text-faint-foreground transition-colors hover:bg-muted hover:text-foreground", subRow[mode]),

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

@@ -0,0 +1,54 @@
+import { cn } from "../lib/cn.js";
+import { subRow } from "./sidebar-rows.js";
+import { CountBadge } from "../primitives/count-badge.js";
+import { markRecords, recordNames } from "./record-marks.js";
+import { StatusDot } from "./status-dot.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app-shell/sidebar-records.tsx
+const RecordRows = ({ records, mode, onNavigate }) => records.map((record) => {
+	const { ariaLabel, title } = recordNames(record);
+	const open = onNavigate && ((event) => {
+		event.preventDefault();
+		onNavigate(record.href);
+	});
+	const strong = record.mark?.strong === true;
+	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
+		href: record.href,
+		onClick: open,
+		"aria-label": ariaLabel,
+		title,
+		"aria-current": record.active ? "page" : void 0,
+		className: cn("flex min-w-0 items-center rounded-md transition-colors", subRow[mode], strong ? "font-bold" : "font-medium", record.active || strong ? "text-foreground" : "text-muted-foreground", record.active ? "bg-muted" : "hover:bg-muted hover:text-foreground"),
+		children: [
+			record.status && /* @__PURE__ */ jsx(StatusDot, {
+				tone: record.status.tone,
+				pulse: record.status.pulse
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: record.label
+			}),
+			/* @__PURE__ */ jsx(CountBadge, {
+				count: record.mark?.count,
+				className: "ml-auto shrink-0"
+			})
+		]
+	}) }, record.id);
+});
+const MarkedRows = ({ records, useMarks, ...rest }) => /* @__PURE__ */ jsx(RecordRows, {
+	records: markRecords(records, useMarks()),
+	...rest
+});
+/** The rows of a sidebar group's records, marked by the group's `useMarks` hook when it has one. */
+const SidebarRecords = ({ records, useMarks, mode, onNavigate }) => useMarks ? /* @__PURE__ */ jsx(MarkedRows, {
+	records,
+	useMarks,
+	mode,
+	onNavigate
+}) : /* @__PURE__ */ jsx(RecordRows, {
+	records,
+	mode,
+	onNavigate
+});
+//#endregion
+export { SidebarRecords };

package/dist/auth/auth-provider.d.ts

@@ -0,0 +1,4 @@
+import "../notifications/push/push-notifications.js";
+import { ReactNode } from "react";
+import { Locale } from "@protobase/schema/internal";
+import { AuthSession, AuthUser, PluginRef } from "@protobase/client";

package/dist/auth/use-signed-in-user.d.ts

@@ -0,0 +1,13 @@
+import "./auth-provider.js";
+//#region src/auth/use-signed-in-user.d.ts
+/** Who is signed in: their user id, the id `.author()` stores and mentions hold, and their name. */
+export type SignedInUser = {
+  id: string;
+  name?: string;
+};
+/**
+ * The signed-in person, from the session the app already holds, such as for a filter on their own user id;
+ * `undefined` while the session loads, for a visitor and when nobody is signed in.
+ */
+export declare const useSignedInUser: () => SignedInUser | undefined;
+//#endregion

package/dist/auth/use-signed-in-user.js

@@ -0,0 +1,22 @@
+import { useOptionalAuth } from "./auth-provider.js";
+import { useMemo } from "react";
+//#region src/auth/use-signed-in-user.ts
+/** The signed-in person of an auth state; none while it loads, for a visitor, and before the sign-in finished. */
+const signedInUserOf = (state) => {
+	if (state?.kind !== "signed-in") return;
+	const { id, name } = state.user;
+	return {
+		id,
+		...name && { name }
+	};
+};
+/**
+* The signed-in person, from the session the app already holds, such as for a filter on their own user id;
+* `undefined` while the session loads, for a visitor and when nobody is signed in.
+*/
+const useSignedInUser = () => {
+	const state = useOptionalAuth()?.state;
+	return useMemo(() => signedInUserOf(state), [state]);
+};
+//#endregion
+export { signedInUserOf, useSignedInUser };

package/dist/chat/chat-thread.d.ts

@@ -12,11 +12,17 @@ export type ChatThreadProps = {
   loadingEarlier?: boolean;
   /** Changes when the reader sends a message, such as a count of their sends: each change goes to the end wherever they were, and the message that arrives next follows. */
   followKey?: string | number;
+  /**
+   * Called while the page shows and the reader is at the end of the thread: when it opens or a message arrives there,
+   * when they scroll to the end, and when the page shows again with them there. Moves a read position, for one.
+   */
+  onReadToEnd?: () => void;
 };
 /**
- * The scrolling list of a chat's messages. A reader at the end follows new messages; one who scrolled back stays where
- * they are until `followKey` changes, and earlier messages loaded above keep them on the message they were reading. It
- * scrolls inside itself, not with the page, since a chat keeps its composer in view beneath it.
+ * The scrolling list of a chat's messages. It opens on its `ChatDivider tone="new"` line when it has one, else at the
+ * end. A reader at the end follows new messages; one who scrolled back stays where they are until `followKey` changes,
+ * and earlier messages loaded above keep them on the message they were reading. It scrolls inside itself, not with the
+ * page, since a chat keeps its composer in view beneath it.
  */
-export declare const ChatThread: ({ children, empty, length, onLoadEarlier, loadingEarlier, followKey }: ChatThreadProps) => import("react").JSX.Element;
+export declare const ChatThread: ({ children, empty, length, onLoadEarlier, loadingEarlier, followKey, onReadToEnd }: ChatThreadProps) => import("react").JSX.Element;
 //#endregion

package/dist/chat/chat-thread.js

@@ -3,15 +3,18 @@ import { Button } from "../primitives/button.js";
 import { text } from "./messages.js";
 import { scrollAfterChange } from "./thread-scroll.js";
 import { readPlace } from "./read-place.js";
+import { useReadToEnd } from "./use-read-to-end.js";
 import { useEffect, useLayoutEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/chat-thread.tsx
+const newLineOf = (list) => list.querySelector("[data-chat-divider][data-tone=\"new\"]");
 /**
-* The scrolling list of a chat's messages. A reader at the end follows new messages; one who scrolled back stays where
-* they are until `followKey` changes, and earlier messages loaded above keep them on the message they were reading. It
-* scrolls inside itself, not with the page, since a chat keeps its composer in view beneath it.
+* The scrolling list of a chat's messages. It opens on its `ChatDivider tone="new"` line when it has one, else at the
+* end. A reader at the end follows new messages; one who scrolled back stays where they are until `followKey` changes,
+* and earlier messages loaded above keep them on the message they were reading. It scrolls inside itself, not with the
+* page, since a chat keeps its composer in view beneath it.
 */
-const ChatThread = ({ children, empty, length, onLoadEarlier, loadingEarlier, followKey }) => {
+const ChatThread = ({ children, empty, length, onLoadEarlier, loadingEarlier, followKey, onReadToEnd }) => {
 	const box = useRef(null);
 	const list = useRef(null);
 	const place = useRef({
@@ -22,20 +25,31 @@ const ChatThread = ({ children, empty, length, onLoadEarlier, loadingEarlier, fo
 	const remember = () => {
 		if (box.current && list.current) place.current = readPlace(box.current, list.current, followKey);
 	};
+	const readToEnd = () => place.current.atEnd && place.current.first !== void 0;
+	const tellRead = useReadToEnd(onReadToEnd, readToEnd);
+	const scrolled = () => {
+		const wasAtEnd = place.current.atEnd;
+		remember();
+		if (!wasAtEnd && readToEnd()) tellRead();
+	};
 	useLayoutEffect(() => {
 		const element = box.current;
 		if (!element || !list.current) return;
 		const before = place.current;
 		const anchorTop = before.anchor && before.anchor.element.isConnected ? before.anchor.element.getBoundingClientRect().top - element.getBoundingClientRect().top : void 0;
+		const newLine = newLineOf(list.current);
+		const newLineTop = newLine ? newLine.getBoundingClientRect().top - element.getBoundingClientRect().top : void 0;
 		const next = scrollAfterChange(before, {
 			first: list.current.firstElementChild ?? void 0,
 			anchorTop,
 			scrollTop: element.scrollTop,
 			scrollHeight: element.scrollHeight,
-			followKey
+			followKey,
+			newLineTop
 		});
 		if (next !== void 0) element.scrollTop = next;
 		remember();
+		if (readToEnd()) tellRead();
 	}, [length, followKey]);
 	useEffect(() => {
 		const element = box.current;
@@ -50,7 +64,7 @@ const ChatThread = ({ children, empty, length, onLoadEarlier, loadingEarlier, fo
 	const showsEmpty = length === 0 && Boolean(empty);
 	return /* @__PURE__ */ jsxs("div", {
 		ref: box,
-		onScroll: remember,
+		onScroll: scrolled,
 		className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 [overflow-anchor:none]",
 		children: [
 			onLoadEarlier && /* @__PURE__ */ jsx(Button, {

package/dist/chat/thread-scroll.js

@@ -2,12 +2,15 @@
 const isAtEnd = (box) => box.scrollHeight - box.scrollTop - box.clientHeight <= 24;
 /**
 * The scroll position a chat takes once its messages or follow key changed, or `undefined` to stay put. A changed follow
-* key, such as the reader sending a message, goes to the end wherever the reader was. Messages loaded before the first
+* key, such as the reader sending a message, goes to the end wherever the reader was. A chat that gets its first
+* messages opens with its "New messages" line near the top, when it has one at `newLineTop` below the top of the box,
+* and at the end otherwise. Messages loaded before the first
 * keep the reader on the message they were reading, moved by as much as it moved; otherwise a reader at the end follows
 * the newest message, and one who scrolled back stays where they are.
 */
 const scrollAfterChange = (before, now) => {
 	if (now.followKey !== before.followKey) return now.scrollHeight;
+	if (before.first === void 0 && now.first !== void 0 && now.newLineTop !== void 0) return Math.max(0, now.scrollTop + now.newLineTop - 16);
 	if (before.first !== void 0 && now.first !== before.first && before.anchor && now.anchorTop !== void 0) return now.scrollTop + now.anchorTop - before.anchor.top;
 	if (before.atEnd) return now.scrollHeight;
 };

package/dist/chat/use-read-to-end.js

@@ -0,0 +1,32 @@
+import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
+//#region src/chat/use-read-to-end.ts
+/**
+* Tells `onReadToEnd` that the reader is at the end of a chat, but only while the page shows: the returned function
+* tells it now, and the page becoming visible again tells it when `atEnd()` holds then. Call it before the layout
+* effects that tell, so they tell the latest `onReadToEnd`.
+*/
+const useReadToEnd = (onReadToEnd, atEnd) => {
+	const latest = useRef({
+		onReadToEnd,
+		atEnd
+	});
+	useLayoutEffect(() => {
+		latest.current = {
+			onReadToEnd,
+			atEnd
+		};
+	});
+	const tell = useCallback(() => {
+		if (document.visibilityState === "visible") latest.current.onReadToEnd?.();
+	}, []);
+	useEffect(() => {
+		const shown = () => {
+			if (latest.current.atEnd()) tell();
+		};
+		document.addEventListener("visibilitychange", shown);
+		return () => document.removeEventListener("visibilitychange", shown);
+	}, [tell]);
+	return tell;
+};
+//#endregion
+export { useReadToEnd };

package/dist/index.d.ts

@@ -1,8 +1,10 @@
+import { RecordMark } from "./app-shell/nav.js";
 import { LogoMark, ShellLogoProps } from "./app-shell/logo.js";
 import { FieldWidget, FieldWidgetEditorProps, FieldWidgetProps } from "./app/field-types/field-widget.js";
 import { BoardDrop, BoardDropContext, BoardDropUndo, BoardDropWrite } from "./app/displays/board-drop.js";
 import { Drop, DropRule } from "./app/hand-order/drop-rule.js";
 import { TitleReader, TitleRule } from "./app/titles/title-rule.js";
+import { MarksHook } from "./app/marks/marks-hook.js";
 import { ActionContext, ActionHandler, BeforeSignInProps, ProjectUi, definePlugin, defineUi } from "./app/pages/project-ui.js";
 import { PluginInfo, usePlugin } from "./plugins/plugin-context.js";
 import { App, AppProps } from "./app/app.js";
@@ -26,8 +28,9 @@ import { ListDisplayRow, RecordCardProps } from "./app/displays/list-displays.js
 import { ListDisplay, useListDisplay } from "./app/displays/display-context.js";
 import { RecordLink } from "./app/displays/record-link.js";
 import { useApiToken } from "./auth/use-api-token.js";
-import { MembersResult, useMembers } from "./people/use-members.js";
 import { PushState } from "./notifications/push/web-push.js";
+import { SignedInUser, useSignedInUser } from "./auth/use-signed-in-user.js";
+import { MembersResult, useMembers } from "./people/use-members.js";
 import { usePushNotifications } from "./notifications/push/use-push-notifications.js";
 import { useInbox, useMarkNotificationsRead, useUnreadNotifications } from "./notifications/bell/use-inbox.js";
 import { SignInPrompt, SignInPromptProps } from "./auth/sign-in-prompt.js";
@@ -81,4 +84,4 @@ import { Section } from "./record-view/section.js";
 import { Form, FormProps } from "./app/create/form.js";
 import { RecordPicker, RecordPickerProps } from "./app/record-picker.js";
 import { Spinner } from "./primitives/spinner.js";
-export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ActionInputError, type ActionInputProps, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, AuthLayout, type AuthLayoutProps, type BackendData, type BackendRefresh, type BeforeSignInProps, type BoardDrop, type BoardDropContext, type BoardDropUndo, type BoardDropWrite, Button, type ButtonProps, type CardAction, type CardTone, Carousel, type CarouselImage, type CarouselProps, type ChatAuthor, ChatDivider, type ChatDividerProps, ChatMessage, type ChatMessageProps, ChatThread, type ChatThreadProps, type ChoiceOption, Choices, type ChoicesProps, CodeForm, type CodeFormProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, Dialog, type DialogProps, type DiffLine, DiffView, type DiffViewProps, type Drop, type DropRule, Field, FieldList, type FieldProps, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, Form, type FormProps, Input, type InputProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, LogoMark, Markdown, type MarkdownContentProps as MarkdownProps, type MembersResult, MentionBox, type MentionBoxProps, type MentionDraft, MentionedText, MenuSelect, type MenuSelectProps, type MetaData, OtpInput, type OtpInputProps, PartView, type PeopleSearch, type PickedUser, type PluginInfo, type ProjectUi, type PushState, type RecordCardProps, RecordLink, RecordPicker, type RecordPickerProps, ResendCodeButton, type ResendCodeButtonProps, ResponsiveDialog, type ResponsiveDialogProps, Section, Segmented, type SegmentedOption, type SegmentedProps, type ShellLogoProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, Spinner, type Step, StepList, type StepState, Textarea, type TextareaProps, type TitleReader, type TitleRule, allowDelayMs, buttonClass, chatDayLabel, definePlugin, defineUi, diffStats, emptyDraft, isConflict, isFramed, mentionedIds, mergeUi, parseDiff, pluginApi, protobaseVersion, sameChatDay, uiFromModule, useApiToken, useAppAddress, useArmedAfterFocus, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useGuardedPress, useHistogram, useInbox, useLayoutRecord, useList, useListDisplay, useMarkNotificationsRead, useMembers, useMeta, usePlugin, usePushNotifications, useRecord, useResourceClient, useSeries, useUnreadNotifications, useUpdateRecord };
+export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ActionInputError, type ActionInputProps, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, AuthLayout, type AuthLayoutProps, type BackendData, type BackendRefresh, type BeforeSignInProps, type BoardDrop, type BoardDropContext, type BoardDropUndo, type BoardDropWrite, Button, type ButtonProps, type CardAction, type CardTone, Carousel, type CarouselImage, type CarouselProps, type ChatAuthor, ChatDivider, type ChatDividerProps, ChatMessage, type ChatMessageProps, ChatThread, type ChatThreadProps, type ChoiceOption, Choices, type ChoicesProps, CodeForm, type CodeFormProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, Dialog, type DialogProps, type DiffLine, DiffView, type DiffViewProps, type Drop, type DropRule, Field, FieldList, type FieldProps, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, Form, type FormProps, Input, type InputProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, LogoMark, Markdown, type MarkdownContentProps as MarkdownProps, type MarksHook, type MembersResult, MentionBox, type MentionBoxProps, type MentionDraft, MentionedText, MenuSelect, type MenuSelectProps, type MetaData, OtpInput, type OtpInputProps, PartView, type PeopleSearch, type PickedUser, type PluginInfo, type ProjectUi, type PushState, type RecordCardProps, RecordLink, type RecordMark, RecordPicker, type RecordPickerProps, ResendCodeButton, type ResendCodeButtonProps, ResponsiveDialog, type ResponsiveDialogProps, Section, Segmented, type SegmentedOption, type SegmentedProps, type ShellLogoProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, type SignedInUser, Spinner, type Step, StepList, type StepState, Textarea, type TextareaProps, type TitleReader, type TitleRule, allowDelayMs, buttonClass, chatDayLabel, definePlugin, defineUi, diffStats, emptyDraft, isConflict, isFramed, mentionedIds, mergeUi, parseDiff, pluginApi, protobaseVersion, sameChatDay, uiFromModule, useApiToken, useAppAddress, useArmedAfterFocus, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useGuardedPress, useHistogram, useInbox, useLayoutRecord, useList, useListDisplay, useMarkNotificationsRead, useMembers, useMeta, usePlugin, usePushNotifications, useRecord, useResourceClient, useSeries, useSignedInUser, useUnreadNotifications, useUpdateRecord };

package/dist/index.js

@@ -59,7 +59,8 @@ import { useInbox, useMarkNotificationsRead, useUnreadNotifications } from "./no
 import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
 import { App } from "./app/app.js";
 import { RecordLink } from "./app/displays/record-link.js";
+import { useSignedInUser } from "./auth/use-signed-in-user.js";
 import { Carousel } from "./carousel/carousel.js";
 import { Choices } from "./primitives/choices.js";
 import { RecordPicker } from "./app/record-picker.js";
-export { ActionCard, ActionInputError, ApiProvider, App, AppLink, AssistantDock, AuthLayout, Button, Carousel, ChatDivider, ChatMessage, ChatThread, Choices, CodeForm, CompactTable, Composer, Dialog, DiffView, Field, FieldList, Form, Input, LogoMark, Markdown, MentionBox, MentionedText, MenuSelect, OtpInput, PartView, RecordLink, RecordPicker, ResendCodeButton, ResponsiveDialog, Section, Segmented, SidePanel, SignInPrompt, Spinner, StepList, Textarea, allowDelayMs, buttonClass, chatDayLabel, definePlugin, defineUi, diffStats, emptyDraft, isConflict, isFramed, mentionedIds, mergeUi, parseDiff, pluginApi, protobaseVersion, sameChatDay, uiFromModule, useApiToken, useAppAddress, useArmedAfterFocus, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useGuardedPress, useHistogram, useInbox, useLayoutRecord, useList, useListDisplay, useMarkNotificationsRead, useMembers, useMeta, usePlugin, usePushNotifications, useRecord, useResourceClient, useSeries, useUnreadNotifications, useUpdateRecord };
+export { ActionCard, ActionInputError, ApiProvider, App, AppLink, AssistantDock, AuthLayout, Button, Carousel, ChatDivider, ChatMessage, ChatThread, Choices, CodeForm, CompactTable, Composer, Dialog, DiffView, Field, FieldList, Form, Input, LogoMark, Markdown, MentionBox, MentionedText, MenuSelect, OtpInput, PartView, RecordLink, RecordPicker, ResendCodeButton, ResponsiveDialog, Section, Segmented, SidePanel, SignInPrompt, Spinner, StepList, Textarea, allowDelayMs, buttonClass, chatDayLabel, definePlugin, defineUi, diffStats, emptyDraft, isConflict, isFramed, mentionedIds, mergeUi, parseDiff, pluginApi, protobaseVersion, sameChatDay, uiFromModule, useApiToken, useAppAddress, useArmedAfterFocus, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useGuardedPress, useHistogram, useInbox, useLayoutRecord, useList, useListDisplay, useMarkNotificationsRead, useMembers, useMeta, usePlugin, usePushNotifications, useRecord, useResourceClient, useSeries, useSignedInUser, useUnreadNotifications, useUpdateRecord };

package/dist/notifications/bell/notification-bell.js

@@ -1,13 +1,13 @@
 import { Button } from "../../primitives/button.js";
-import { Badge } from "../../primitives/badge.js";
 import { useRouter } from "../../app/router.js";
 import { usePopoverMenu } from "../../primitives/popover-menu.js";
+import { CountBadge } from "../../primitives/count-badge.js";
 import { usePushNotifications } from "../push/use-push-notifications.js";
 import { NotificationPanel } from "./notification-panel.js";
 import { notificationTarget } from "./notification-target.js";
 import { PushControl } from "./push-control.js";
 import { historyRefused, useInbox, useMarkNotificationsRead, useUnreadNotifications } from "./use-inbox.js";
-import { bellLabel, unreadBadge } from "./unread-label.js";
+import { bellLabel } from "./unread-label.js";
 import { useState } from "react";
 import { Bell } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -25,7 +25,6 @@ const NotificationBell = () => {
 	const push = usePushNotifications();
 	const { navigate, basePath } = useRouter();
 	const [now, setNow] = useState(Date.now);
-	const badge = unreadBadge(unread.data);
 	const label = bellLabel(unread.data);
 	const origin = window.location.origin;
 	if (historyRefused(unread.error)) return null;
@@ -47,11 +46,9 @@ const NotificationBell = () => {
 		"aria-expanded": open,
 		onClick: toggle,
 		className: "relative max-md:size-9",
-		children: [/* @__PURE__ */ jsx(Bell, { className: "size-4 max-md:size-5" }), badge && /* @__PURE__ */ jsx(Badge, {
-			tone: "red",
-			dot: false,
-			className: "pointer-events-none absolute -top-1 -right-1.5 h-4 min-w-4 justify-center px-1 text-[10px] font-semibold max-md:top-0 max-md:right-0",
-			children: badge
+		children: [/* @__PURE__ */ jsx(Bell, { className: "size-4 max-md:size-5" }), /* @__PURE__ */ jsx(CountBadge, {
+			count: unread.data,
+			className: "pointer-events-none absolute -top-1 -right-1.5 max-md:top-0 max-md:right-0"
 		})]
 	}), open && createPortal(/* @__PURE__ */ jsx("div", {
 		ref: menu,