@protobase/ui 0.55.3 → 0.55.5

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/composer-files.js

@@ -0,0 +1,13 @@
+//#region src/chat/composer-files.ts
+/** Whether a drag carries files, which the composer takes, rather than text, which the box takes as usual. */
+const carriesFiles = (transfer) => transfer.types.includes("Files");
+/**
+* The files a paste gives, or none when it also holds text: a copy from a spreadsheet or a web page can hold an image
+* of its text too, and text pasted into the box stays text.
+*/
+const pastedFiles = (transfer) => {
+	if (transfer.types.includes("text/plain")) return [];
+	return [...transfer.files];
+};
+//#endregion
+export { carriesFiles, pastedFiles };

package/dist/chat/composer-send.js

@@ -0,0 +1,8 @@
+//#region src/chat/composer-send.ts
+/** Whether the composer may send `message`, its trimmed text: never while busy, and empty text only when allowed, such as for a message of files alone. */
+const canSend = (message, { busy, canSendEmpty }) => {
+	if (busy) return false;
+	return message !== "" || canSendEmpty === true;
+};
+//#endregion
+export { canSend };

package/dist/chat/composer.d.ts

@@ -1,6 +1,6 @@
 import { PeopleSearch } from "../mentions/use-people-search.js";
 import "../mentions/index.js";
-import { Ref } from "react";
+import { ReactNode, Ref } from "react";
 //#region src/chat/composer.d.ts
 export type ComposerProps = {
   /** Gets the trimmed text and the ids of the people it mentions, each once. */
@@ -11,10 +11,19 @@ export type ComposerProps = {
   inputRef?: Ref<HTMLTextAreaElement>;
   /** Finds the people `@` lists by the name typed after it, such as a channel's members; without it, `@` is plain text. */
   searchPeople?: PeopleSearch;
+  /** Drawn inside the composer above the box, such as a tray of the files picked for the message. */
+  attachments?: ReactNode;
+  /** Drawn left of the box, such as a button that picks files. */
+  actions?: ReactNode;
+  /** Enter and the button send even with no text, `onSend('', [])`, such as when files are picked. */
+  canSendEmpty?: boolean;
+  /** Gets the files pasted into the box or dropped on the composer; the composer itself uploads and sends nothing. A paste that holds text stays text. */
+  onFiles?: (files: File[]) => void;
 };
 /**
  * The text box under a chat, which grows with its text. Enter or the button sends the trimmed text and clears the box,
- * Shift+Enter starts a new line; while the list of people to mention is open, Enter picks from it instead.
+ * Shift+Enter starts a new line; while the list of people to mention is open, Enter picks from it instead. With `canSendEmpty`,
+ * such as while files are picked, it sends with no text too.
  */
-export declare const Composer: ({ onSend, busy, placeholder, inputRef, searchPeople }: ComposerProps) => import("react").JSX.Element;
+export declare const Composer: ({ onSend, busy, placeholder, inputRef, searchPeople, attachments, actions, canSendEmpty, onFiles }: ComposerProps) => import("react").JSX.Element;
 //#endregion