@protobase/ui 0.55.2 → 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-from-meta.js

@@ -1,7 +1,10 @@
+import { allowEverything } from "../data/meta-data.js";
 import { humanize } from "../live/naming.js";
 import { text } from "./messages.js";
+import { text as text$1 } from "./create/messages.js";
 import { iconFor } from "./icons.js";
 import { menuIcon } from "./menu-icons.js";
+import { createOffered } from "./create/create-offered.js";
 import { userMenuResources } from "./user-menu-from-meta.js";
 import { LayoutDashboard } from "lucide-react";
 import { appPath } from "@protobase/schema";
@@ -21,10 +24,21 @@ const schemaGroup = (schema = "public") => {
 	if (schema === "public") return "";
 	return groupLabels[schema] ? text(groupLabels[schema]) : humanize(schema);
 };
+/** The link under an entry whose `nav.create` asks for one, to whoever the list would offer New. */
+const createLink = (meta, view, nav, singular, basePath) => {
+	if (!nav?.create || !createOffered(view, meta.pages, meta.permissions[view.resource] ?? allowEverything)) return {};
+	return { create: {
+		label: nav.create === true ? text$1("title", singular) : nav.create.label,
+		href: appPath({
+			kind: "create",
+			resource: view.resource
+		}, basePath)
+	} };
+};
 /**
 * One sidebar group per `nav.group` (default: the database schema, none for `public`, and "Pages" for pages); `nav.hidden` and a place in
 * the user menu leave an entry out, `nav.order` sorts within a group, and `recent` (from `useNavRecent`) makes an entry
-* collapsible. Groups with pages come first, so a dashboard leads the sidebar. The resources of a source that cannot be
+* collapsible, and `create` links to the create form under it. Groups with pages come first, so a dashboard leads the sidebar. The resources of a source that cannot be
 * read are listed under its label, each with the problem. A visitor also gets the resources whose views ask them to sign
 * in, where those views place them, under "Account" without a group. Each named list of a view is an entry of its
 * own, placed by its own `nav`.
@@ -73,7 +87,8 @@ const navFromMeta = (meta, basePath = "", recent = {}) => {
 				kind: "list",
 				resource: model.name
 			}, basePath),
-			...recent[model.name] && { recent: recent[model.name] }
+			...recent[model.name] && { recent: recent[model.name] },
+			...createLink(meta, view, view.nav, view.names?.singular ?? humanize(model.name), basePath)
 		}, view.nav?.order);
 		for (const named of view.lists ?? []) {
 			if (named.nav?.hidden) continue;
@@ -85,7 +100,8 @@ const navFromMeta = (meta, basePath = "", recent = {}) => {
 					kind: "list",
 					resource: model.name,
 					list: named.name
-				}, basePath)
+				}, basePath),
+				...createLink(meta, view, named.nav, named.names.singular, basePath)
 			}, named.nav?.order);
 		}
 	}

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-create-link.js

@@ -0,0 +1,26 @@
+import { cn } from "../lib/cn.js";
+import { subRow, subRowIndent } from "./sidebar-rows.js";
+import { Plus } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app-shell/sidebar-create-link.tsx
+/** The link under a sidebar entry to its resource's create form, such as "New message", lined up with its records. */
+const SidebarCreateLink = ({ create, mode, onNavigate }) => /* @__PURE__ */ jsx("div", {
+	className: cn("border-l border-transparent pl-1.5", subRowIndent[mode]),
+	children: /* @__PURE__ */ jsxs("a", {
+		href: create.href,
+		onClick: onNavigate && ((event) => {
+			event.preventDefault();
+			onNavigate(create.href);
+		}),
+		className: cn("flex items-center rounded-md text-faint-foreground transition-colors hover:bg-muted hover:text-foreground", subRow[mode]),
+		children: [/* @__PURE__ */ jsx(Plus, {
+			"aria-hidden": true,
+			className: "size-3.5 shrink-0"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: create.label
+		})]
+	})
+});
+//#endregion
+export { SidebarCreateLink };

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

@@ -1,24 +1,17 @@
 import { cn } from "../lib/cn.js";
 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
-const row = {
-	"text-large": "h-8 gap-2.5 px-2.5",
-	"text-small": "h-7 gap-2 px-2 text-body"
-};
-/** Lines the records up under the entry's icon. */
-const indent = {
-	"text-large": "ml-[20px]",
-	"text-small": "ml-[17px]"
-};
 /**
-* 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);
@@ -58,33 +51,25 @@ const SidebarGroup = ({ item, recent, mode, active, onNavigate }) => {
 		}), open && /* @__PURE__ */ jsxs("ul", {
 			id: listId,
 			"aria-label": text("recent", item.label.toLowerCase()),
-			className: cn("flex flex-col gap-0.5 border-l pl-1.5", indent[mode]),
+			className: cn("flex flex-col gap-0.5 border-l pl-1.5", subRowIndent[mode]),
 			children: [
 				recent.state === "loading" && /* @__PURE__ */ jsx("li", {
-					className: cn("flex items-center text-faint-foreground", row[mode]),
+					className: cn("flex items-center text-faint-foreground", subRow[mode]),
 					children: text("loading")
 				}),
 				recent.state === "error" && /* @__PURE__ */ jsx("li", {
-					className: cn("flex items-center text-faint-foreground", row[mode]),
+					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", row[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", row[mode]),
+					className: cn("flex items-center rounded-md text-faint-foreground transition-colors hover:bg-muted hover:text-foreground", subRow[mode]),
 					children: text("viewAll")
 				}) })
 			]

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/app-shell/sidebar-rows.js

@@ -0,0 +1,13 @@
+//#region src/app-shell/sidebar-rows.ts
+/** The height and spacing of a row under a sidebar entry, such as a recent record or its create link. */
+const subRow = {
+	"text-large": "h-8 gap-2.5 px-2.5",
+	"text-small": "h-7 gap-2 px-2 text-body"
+};
+/** Lines the rows under an entry up under the entry's icon. */
+const subRowIndent = {
+	"text-large": "ml-[20px]",
+	"text-small": "ml-[17px]"
+};
+//#endregion
+export { subRow, subRowIndent };

package/dist/app-shell/sidebar.js

@@ -5,11 +5,13 @@ import { Logo } from "./logo.js";
 import { navGroups } from "./nav.js";
 import { ThemeSwitch } from "./theme-switch.js";
 import { ProfileMenu } from "./profile-menu.js";
+import { SidebarCreateLink } from "./sidebar-create-link.js";
 import { isTextMode, sidebarWidth } from "./sidebar-mode.js";
 import { SidebarItem } from "./sidebar-item.js";
 import { SidebarGroup } from "./sidebar-group.js";
+import { Fragment } from "react";
 import { LogIn } from "lucide-react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/sidebar.tsx
 const Sidebar = ({ mode, activeItem, user, workspace, appName, appIcon, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, account, onNavigate, onSignOut, signIn, organizations, roles, theme, sticky, logo: SidebarLogo = Logo, notice }) => {
 	const expanding = mode === "icon-expand";
@@ -37,18 +39,22 @@ const Sidebar = ({ mode, activeItem, user, workspace, appName, appIcon, forceExp
 						children: [inline ? group.label && /* @__PURE__ */ jsx("div", {
 							className: cn("px-3 pb-1 pt-1 text-xs font-medium uppercase tracking-wide text-faint-foreground", expanding && "h-4 whitespace-nowrap py-0 opacity-0 transition-opacity group-hover/side:opacity-100 group-focus-within/side:opacity-100", expanded && "opacity-100"),
 							children: group.label
-						}) : index > 0 && /* @__PURE__ */ jsx("div", { className: "mx-auto mb-1 h-px w-6 bg-border" }), group.items.map((item) => item.recent && isTextMode(mode) ? /* @__PURE__ */ jsx(SidebarGroup, {
+						}) : index > 0 && /* @__PURE__ */ jsx("div", { className: "mx-auto mb-1 h-px w-6 bg-border" }), group.items.map((item) => /* @__PURE__ */ jsxs(Fragment, { children: [item.recent && isTextMode(mode) ? /* @__PURE__ */ jsx(SidebarGroup, {
 							item,
 							recent: item.recent,
 							mode,
 							active: item.id === activeItem,
 							onNavigate
-						}, item.id) : /* @__PURE__ */ jsx(SidebarItem, {
+						}) : /* @__PURE__ */ jsx(SidebarItem, {
 							item,
 							mode,
 							active: item.id === activeItem,
 							onNavigate
-						}, item.id))]
+						}), item.create && isTextMode(mode) && /* @__PURE__ */ jsx(SidebarCreateLink, {
+							create: item.create,
+							mode,
+							onNavigate
+						})] }, item.id))]
 					}, group.label))
 				}),
 				notice,
@@ -65,7 +71,7 @@ const Sidebar = ({ mode, activeItem, user, workspace, appName, appIcon, forceExp
 						organizations,
 						roles,
 						theme
-					}) : /* @__PURE__ */ jsxs(Fragment, { children: [theme && inline && /* @__PURE__ */ jsx(ThemeSwitch, {
+					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [theme && inline && /* @__PURE__ */ jsx(ThemeSwitch, {
 						theme,
 						className: "flex min-h-11 w-full items-center gap-2.5 whitespace-nowrap p-1.5 text-muted-foreground md:min-h-0"
 					}), signIn && /* @__PURE__ */ jsxs(RouteLink, {

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