@protobase/ui 0.53.3 → 0.53.5

package/dist/chat/chat-thread.js

@@ -1,22 +1,91 @@
-import { useEffect, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { Button } from "../primitives/button.js";
+import { text } from "./messages.js";
+import { isAtEnd, scrollAfterChange } from "./thread-scroll.js";
+import { useEffect, useLayoutEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/chat-thread.tsx
-/** The scrolling list of a chat's messages, kept at the newest one as messages arrive. */
-const ChatThread = ({ children, empty, length }) => {
+/** The message the reader is reading: the first whose bottom shows. */
+const readPlace = (box, list, followKey) => {
+	const top = box.getBoundingClientRect().top;
+	const element = [...list.children].find((child) => child.getBoundingClientRect().bottom > top);
+	const anchor = element && { anchor: {
+		element,
+		top: element.getBoundingClientRect().top - top
+	} };
+	return {
+		atEnd: isAtEnd(box),
+		first: list.firstElementChild ?? void 0,
+		followKey,
+		...anchor
+	};
+};
+/**
+* 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.
+*/
+const ChatThread = ({ children, empty, length, onLoadEarlier, loadingEarlier, followKey }) => {
+	const box = useRef(null);
 	const list = useRef(null);
+	const place = useRef({
+		atEnd: true,
+		first: void 0,
+		followKey
+	});
+	const remember = () => {
+		if (box.current && list.current) place.current = readPlace(box.current, list.current, followKey);
+	};
+	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 next = scrollAfterChange(before, {
+			first: list.current.firstElementChild ?? void 0,
+			anchorTop,
+			scrollTop: element.scrollTop,
+			scrollHeight: element.scrollHeight,
+			followKey
+		});
+		if (next !== void 0) element.scrollTop = next;
+		remember();
+	}, [length, followKey]);
 	useEffect(() => {
-		const element = list.current;
-		if (element) element.scrollTop = element.scrollHeight;
-	}, [length]);
-	return /* @__PURE__ */ jsx("div", {
-		ref: list,
-		role: "log",
-		"aria-live": "polite",
-		className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4",
-		children: length === 0 && empty ? /* @__PURE__ */ jsx("div", {
-			className: "m-auto max-w-60 text-center text-muted-foreground",
-			children: empty
-		}) : children
+		const element = box.current;
+		if (!element || !list.current) return;
+		const observer = new ResizeObserver(() => {
+			if (place.current.atEnd) element.scrollTop = element.scrollHeight;
+		});
+		observer.observe(element);
+		observer.observe(list.current);
+		return () => observer.disconnect();
+	}, []);
+	const showsEmpty = length === 0 && Boolean(empty);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: box,
+		onScroll: remember,
+		className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 [overflow-anchor:none]",
+		children: [
+			onLoadEarlier && /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				className: "self-center",
+				loading: loadingEarlier,
+				onClick: onLoadEarlier,
+				children: text("loadEarlier")
+			}),
+			showsEmpty && /* @__PURE__ */ jsx("div", {
+				className: "m-auto max-w-60 text-center text-muted-foreground",
+				children: empty
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: list,
+				role: "log",
+				"aria-live": "polite",
+				className: cn("flex flex-col gap-4", showsEmpty && "hidden"),
+				children
+			})
+		]
 	});
 };
 //#endregion

package/dist/chat/composer.d.ts

@@ -1,12 +1,20 @@
+import { PeopleSearch } from "../mentions/use-people-search.js";
+import "../mentions/index.js";
 import { Ref } from "react";
 //#region src/chat/composer.d.ts
 export type ComposerProps = {
-  onSend?: (text: string) => void;
+  /** Gets the trimmed text and the ids of the people it mentions, each once. */
+  onSend?: (text: string, mentions: string[]) => void;
   /** The other side is still answering: the text can be written but not sent. */
   busy?: boolean;
   placeholder?: string;
-  inputRef?: Ref<HTMLInputElement>;
+  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;
 };
-/** The text box under a chat. Enter or the button sends the trimmed text and clears the box. */
-export declare const Composer: ({ onSend, busy, placeholder, inputRef }: ComposerProps) => import("react").JSX.Element;
+/**
+ * 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.
+ */
+export declare const Composer: ({ onSend, busy, placeholder, inputRef, searchPeople }: ComposerProps) => import("react").JSX.Element;
 //#endregion

package/dist/chat/composer.js

@@ -1,32 +1,47 @@
 import { Button } from "../primitives/button.js";
-import { Input } from "../primitives/input.js";
 import { text } from "./messages.js";
+import { mentionedIds } from "../mentions/mention-text.js";
+import { MentionBox, emptyDraft } from "../mentions/mention-box.js";
 import { useState } from "react";
 import { SendHorizontal } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/composer.tsx
-/** The text box under a chat. Enter or the button sends the trimmed text and clears the box. */
-const Composer = ({ onSend, busy, placeholder, inputRef }) => {
-	const [draft, setDraft] = useState("");
-	const message = draft.trim();
+/**
+* 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.
+*/
+const Composer = ({ onSend, busy, placeholder, inputRef, searchPeople }) => {
+	const [draft, setDraft] = useState(emptyDraft);
+	const message = draft.text.trim();
 	const send = () => {
 		if (!message || busy) return;
-		onSend?.(message);
-		setDraft("");
+		onSend?.(message, mentionedIds(message, draft.picked));
+		setDraft(emptyDraft);
+	};
+	const onKeyDown = (event) => {
+		if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) return;
+		event.preventDefault();
+		send();
 	};
 	return /* @__PURE__ */ jsxs("form", {
-		className: "flex gap-2",
+		className: "flex items-end gap-2",
 		onSubmit: (event) => {
 			event.preventDefault();
 			send();
 		},
-		children: [/* @__PURE__ */ jsx(Input, {
-			ref: inputRef,
-			"aria-label": text("message"),
-			placeholder,
-			value: draft,
-			onChange: (event) => setDraft(event.target.value),
-			wrapperClassName: "flex-1"
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1",
+			children: /* @__PURE__ */ jsx(MentionBox, {
+				ref: inputRef,
+				rows: 1,
+				"aria-label": text("message"),
+				placeholder,
+				value: draft,
+				onChange: setDraft,
+				searchPeople,
+				listAt: "above",
+				onKeyDown
+			})
 		}), /* @__PURE__ */ jsx(Button, {
 			type: "submit",
 			variant: "primary",

package/dist/chat/index.d.ts

@@ -1,4 +1,6 @@
-import { ChatMessage } from "./chat-message.js";
+import { chatDayLabel, sameChatDay } from "./chat-day.js";
+import { ChatDivider, ChatDividerProps } from "./chat-divider.js";
+import { ChatAuthor, ChatMessage, ChatMessageProps } from "./chat-message.js";
 import { ChatThread, ChatThreadProps } from "./chat-thread.js";
 import { Composer, ComposerProps } from "./composer.js";
-export { ChatMessage, ChatThread, type ChatThreadProps, Composer, type ComposerProps };
+export { type ChatAuthor, ChatDivider, type ChatDividerProps, ChatMessage, type ChatMessageProps, ChatThread, type ChatThreadProps, Composer, type ComposerProps, chatDayLabel, sameChatDay };

package/dist/chat/messages.js

@@ -3,11 +3,19 @@ import { defineMessages } from "../locale/messages.js";
 const text = defineMessages({
 	en: {
 		message: "Message",
-		send: "Send"
+		send: "Send",
+		today: "Today",
+		yesterday: "Yesterday",
+		newMessages: "New messages",
+		loadEarlier: "Load earlier messages"
 	},
 	nl: {
 		message: "Bericht",
-		send: "Versturen"
+		send: "Versturen",
+		today: "Vandaag",
+		yesterday: "Gisteren",
+		newMessages: "Nieuwe berichten",
+		loadEarlier: "Eerdere berichten laden"
 	}
 });
 //#endregion

package/dist/chat/thread-scroll.js

@@ -0,0 +1,15 @@
+/** Whether a scroll box shows its end. */
+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
+* 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 !== before.first && before.anchor && now.anchorTop !== void 0) return now.scrollTop + now.anchorTop - before.anchor.top;
+	if (before.atEnd) return now.scrollHeight;
+};
+//#endregion
+export { isAtEnd, scrollAfterChange };

package/dist/data/query-keys.js

@@ -74,13 +74,6 @@ const keys = {
 		"comments"
 	],
 	/** The people a comment on a record may mention whose name contains `query`. */
-	mentionable: (resource, key, query) => [
-		"record",
-		resource,
-		key,
-		"mentionable",
-		query
-	],
 	facets: (resource, field, filter) => [
 		"facets",
 		resource,

package/dist/index.d.ts

@@ -37,8 +37,16 @@ import { useAssistant } from "./assistant-dock/use-assistant.js";
 import { useAssistantClient } from "./assistant-dock/use-assistant-client.js";
 import { BackendData, BackendRefresh, useBackendData } from "./assistant-dock/use-backend-data.js";
 import "./assistant-dock/index.js";
-import { ChatMessage } from "./chat/chat-message.js";
+import { chatDayLabel, sameChatDay } from "./chat/chat-day.js";
+import { ChatDivider, ChatDividerProps } from "./chat/chat-divider.js";
+import { ChatAuthor, ChatMessage, ChatMessageProps } from "./chat/chat-message.js";
 import { ChatThread, ChatThreadProps } from "./chat/chat-thread.js";
+import { Textarea, TextareaProps } from "./primitives/textarea.js";
+import { PickedUser, mentionedIds } from "./mentions/mention-text.js";
+import { PeopleSearch } from "./mentions/use-people-search.js";
+import { MentionBox, MentionBoxProps, MentionDraft, emptyDraft } from "./mentions/mention-box.js";
+import { MentionedText } from "./mentions/mentioned-text.js";
+import "./mentions/index.js";
 import { Composer, ComposerProps } from "./chat/composer.js";
 import "./chat/index.js";
 import { SidePanel, SidePanelProps } from "./side-panel/side-panel.js";
@@ -61,7 +69,6 @@ import { ResendCodeButton, ResendCodeButtonProps } from "./auth/resend-code-butt
 import { allowDelayMs, isFramed, useArmedAfterFocus, useGuardedPress } from "./connect/interaction-guard.js";
 import { Button, ButtonProps, buttonClass } from "./primitives/button.js";
 import { Input, InputProps } from "./primitives/input.js";
-import { Textarea, TextareaProps } from "./primitives/textarea.js";
 import { Segmented, SegmentedOption, SegmentedProps } from "./primitives/segmented.js";
 import { MenuSelect, MenuSelectProps } from "./primitives/menu-select.js";
 import { ChoiceOption, Choices, ChoicesProps } from "./primitives/choices.js";
@@ -72,4 +79,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, ChatMessage, 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, MenuSelect, type MenuSelectProps, type MetaData, OtpInput, type OtpInputProps, PartView, 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, allowDelayMs, buttonClass, definePlugin, defineUi, diffStats, isConflict, isFramed, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useArmedAfterFocus, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useGuardedPress, useHistogram, useInbox, useLayoutRecord, useList, useListDisplay, useMarkNotificationsRead, 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, 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, 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, useMeta, usePlugin, usePushNotifications, useRecord, useResourceClient, useSeries, useUnreadNotifications, useUpdateRecord };

package/dist/index.js

@@ -32,8 +32,13 @@ import { usePlugin } from "./plugins/plugin-context.js";
 import { pluginApi, protobaseVersion } from "./plugins/plugin-api.js";
 import { useApiToken } from "./auth/use-api-token.js";
 import { useRecord } from "./data/use-record.js";
+import { chatDayLabel, sameChatDay } from "./chat/chat-day.js";
+import { ChatDivider } from "./chat/chat-divider.js";
 import { ChatMessage } from "./chat/chat-message.js";
 import { ChatThread } from "./chat/chat-thread.js";
+import { mentionedIds } from "./mentions/mention-text.js";
+import { MentionBox, emptyDraft } from "./mentions/mention-box.js";
+import { MentionedText } from "./mentions/mentioned-text.js";
 import { Composer } from "./chat/composer.js";
 import { SidePanel } from "./side-panel/side-panel.js";
 import { ActionCard } from "./action-card/action-card.js";
@@ -56,4 +61,4 @@ import { RecordLink } from "./app/displays/record-link.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, ChatMessage, ChatThread, Choices, CodeForm, CompactTable, Composer, Dialog, DiffView, Field, FieldList, Form, Input, LogoMark, Markdown, MenuSelect, OtpInput, PartView, RecordLink, RecordPicker, ResendCodeButton, ResponsiveDialog, Section, Segmented, SidePanel, SignInPrompt, Spinner, StepList, Textarea, allowDelayMs, buttonClass, definePlugin, defineUi, diffStats, isConflict, isFramed, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useArmedAfterFocus, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useFieldControl, useGuardedPress, useHistogram, useInbox, useLayoutRecord, useList, useListDisplay, useMarkNotificationsRead, 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, useMeta, usePlugin, usePushNotifications, useRecord, useResourceClient, useSeries, useUnreadNotifications, useUpdateRecord };

package/dist/mentions/index.d.ts

@@ -0,0 +1,5 @@
+import { PickedUser, mentionedIds } from "./mention-text.js";
+import { PeopleSearch } from "./use-people-search.js";
+import { MentionBox, MentionBoxProps, MentionDraft, emptyDraft } from "./mention-box.js";
+import { MentionedText } from "./mentioned-text.js";
+export { MentionBox, type MentionBoxProps, type MentionDraft, MentionedText, type PeopleSearch, type PickedUser, emptyDraft, mentionedIds };

package/dist/mentions/mention-box.d.ts

@@ -0,0 +1,27 @@
+import { TextareaProps } from "../primitives/textarea.js";
+import { PickedUser } from "./mention-text.js";
+import { PeopleSearch } from "./use-people-search.js";
+import { KeyboardEvent } from "react";
+//#region src/mentions/mention-box.d.ts
+/** What is written in a mention box: the text, and the people picked from its list, whom `@{name}` in it mentions. */
+export type MentionDraft = {
+  text: string;
+  picked: readonly PickedUser[];
+};
+export declare const emptyDraft: MentionDraft;
+export type MentionBoxProps = Omit<TextareaProps, 'value' | 'onChange' | 'onKeyDown' | 'role'> & {
+  value: MentionDraft;
+  onChange: (draft: MentionDraft) => void;
+  /** Finds the people `@` lists by the name typed after it; without it, `@` is plain text. */
+  searchPeople?: PeopleSearch;
+  /** Where the list opens: under the box, or above it for a box at the bottom of a chat. */
+  listAt?: 'below' | 'above';
+  /** The keys the open list does not take, such as Enter to send. */
+  onKeyDown?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
+};
+/**
+ * A text box of several lines in which typing `@` lists the people `searchPeople` finds by the name typed after it:
+ * the arrows move, Enter or Tab picks, Escape closes. A picked name is written out as `@{name} `.
+ */
+export declare const MentionBox: ({ value, onChange, searchPeople, listAt, onKeyDown, onFocus, onBlur, ref: given, ...rest }: MentionBoxProps) => import("react").JSX.Element;
+//#endregion

package/dist/mentions/mention-box.js

@@ -0,0 +1,125 @@
+import { Textarea } from "../primitives/textarea.js";
+import { menuKeyTarget } from "../primitives/menu-keys.js";
+import { activeMention, insertMention } from "./mention-text.js";
+import { PeopleList } from "./people-list.js";
+import { usePeopleSearch } from "./use-people-search.js";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/mentions/mention-box.tsx
+const emptyDraft = {
+	text: "",
+	picked: []
+};
+/** The most people the list offers; few enough that it never needs a scrollbar of its own. */
+const shownPeople = 8;
+/**
+* A text box of several lines in which typing `@` lists the people `searchPeople` finds by the name typed after it:
+* the arrows move, Enter or Tab picks, Escape closes. A picked name is written out as `@{name} `.
+*/
+const MentionBox = ({ value, onChange, searchPeople, listAt = "below", onKeyDown, onFocus, onBlur, ref: given, ...rest }) => {
+	const [caret, setCaret] = useState(0);
+	const [focused, setFocused] = useState(false);
+	const [active, setActive] = useState(0);
+	const [closed, setClosed] = useState();
+	const box = useRef(null);
+	const setBox = useCallback((element) => {
+		box.current = element;
+		if (typeof given === "function") given(element);
+		else if (given) given.current = element;
+	}, [given]);
+	const nextCaret = useRef(void 0);
+	const listId = useId();
+	const mention = searchPeople ? activeMention(value.text, caret) : void 0;
+	const open = focused && mention !== void 0 && mention.start !== closed;
+	const found = usePeopleSearch(searchPeople, open ? mention.query : void 0);
+	const options = open && found && "people" in found ? found.people.slice(0, shownPeople) : [];
+	const listed = open && found !== void 0;
+	const optionId = (index) => `${listId}-${index}`;
+	useEffect(() => setActive(0), [mention?.query]);
+	const mentionStart = mention?.start;
+	useEffect(() => {
+		if (mentionStart === void 0) setClosed(void 0);
+	}, [mentionStart]);
+	useLayoutEffect(() => {
+		if (nextCaret.current === void 0 || !box.current) return;
+		box.current.setSelectionRange(nextCaret.current, nextCaret.current);
+		setCaret(nextCaret.current);
+		nextCaret.current = void 0;
+	}, [value.text]);
+	const pick = (user) => {
+		if (!mention) return;
+		const next = insertMention(value.text, mention, user.name);
+		nextCaret.current = next.caret;
+		onChange({
+			text: next.text,
+			picked: [...value.picked, user]
+		});
+	};
+	const keyDown = (event) => {
+		if (open) {
+			const target = menuKeyTarget(event.key, active, options.length);
+			if (target !== void 0 && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+				event.preventDefault();
+				setActive(target);
+				return;
+			}
+			if ((event.key === "Enter" || event.key === "Tab") && options[active]) {
+				event.preventDefault();
+				pick(options[active]);
+				return;
+			}
+			if (event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				setClosed(mention.start);
+				return;
+			}
+		}
+		onKeyDown?.(event);
+	};
+	const combobox = searchPeople && {
+		role: "combobox",
+		"aria-multiline": true,
+		"aria-autocomplete": "list",
+		"aria-expanded": listed,
+		"aria-controls": listId,
+		"aria-activedescendant": listed && options[active] ? optionId(active) : void 0
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsx(Textarea, {
+			...rest,
+			...combobox,
+			ref: setBox,
+			value: value.text,
+			onChange: (event) => {
+				onChange({
+					...value,
+					text: event.target.value
+				});
+				setCaret(event.target.selectionStart);
+			},
+			onSelect: (event) => setCaret(event.currentTarget.selectionStart),
+			onFocus: (event) => {
+				setFocused(true);
+				onFocus?.(event);
+			},
+			onBlur: (event) => {
+				setFocused(false);
+				onBlur?.(event);
+			},
+			onKeyDown: keyDown
+		}), listed && /* @__PURE__ */ jsx(PeopleList, {
+			id: listId,
+			optionId,
+			people: options,
+			active,
+			onActive: setActive,
+			onPick: pick,
+			failed: "failed" in found,
+			at: listAt
+		})]
+	});
+};
+//#endregion
+export { MentionBox, emptyDraft };

package/dist/mentions/mention-text.d.ts

@@ -0,0 +1,9 @@
+//#region src/mentions/mention-text.d.ts
+/** A user picked from the list while writing, whom `@{name}` in the text mentions. */
+export type PickedUser = {
+  id: string;
+  name: string;
+};
+/** The ids of the picked users whose `@{name}` is still in the text, each once. */
+export declare const mentionedIds: (text: string, picked: readonly PickedUser[]) => string[];
+//#endregion

package/dist/{app/comments → mentions}/mention-text.js

@@ -1,4 +1,4 @@
-//#region src/app/comments/mention-text.ts
+//#region src/mentions/mention-text.ts
 /** The mention the caret is in: an `@` that starts the text or follows whitespace, with no whitespace up to the caret. */
 const activeMention = (text, caret) => {
 	const match = /(?:^|\s)@([^\s@]*)$/.exec(text.slice(0, caret));

package/dist/mentions/mentioned-text.d.ts

@@ -0,0 +1,9 @@
+//#region src/mentions/mentioned-text.d.ts
+/** Text as written, line breaks kept, each `@{name}` of someone it mentions picked out; a name not in `mentions` stays plain. */
+export declare const MentionedText: ({ text, mentions }: {
+  text: string;
+  mentions: readonly {
+    name?: string;
+  }[];
+}) => import("react").JSX.Element;
+//#endregion

package/dist/mentions/mentioned-text.js

@@ -0,0 +1,13 @@
+import { bodyParts } from "./mention-text.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/mentions/mentioned-text.tsx
+/** Text as written, line breaks kept, each `@{name}` of someone it mentions picked out; a name not in `mentions` stays plain. */
+const MentionedText = ({ text, mentions }) => /* @__PURE__ */ jsx("p", {
+	className: "whitespace-pre-wrap break-words",
+	children: bodyParts(text, mentions).map((part, index) => "mention" in part ? /* @__PURE__ */ jsxs("span", {
+		className: "font-medium text-primary",
+		children: ["@", part.mention]
+	}, index) : part.text)
+});
+//#endregion
+export { MentionedText };

package/dist/mentions/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from "../locale/messages.js";
+//#region src/mentions/messages.ts
+const text = defineMessages({
+	en: {
+		peopleToMention: "People to mention",
+		noOneFound: "No one found",
+		couldNotSearch: "Could not search for people"
+	},
+	nl: {
+		peopleToMention: "Mensen om te noemen",
+		noOneFound: "Niemand gevonden",
+		couldNotSearch: "Kon niet naar mensen zoeken"
+	}
+});
+//#endregion
+export { text };

package/dist/mentions/people-list.js

@@ -0,0 +1,26 @@
+import { cn } from "../lib/cn.js";
+import { text } from "./messages.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/mentions/people-list.tsx
+/** The people a mention box offers for the `@` being typed; a press keeps the focus in the box. */
+const PeopleList = ({ id, optionId, people, active, onActive, onPick, failed, at }) => /* @__PURE__ */ jsxs("ul", {
+	id,
+	role: "listbox",
+	"aria-label": text("peopleToMention"),
+	className: cn("absolute z-30 w-full max-w-sm rounded-md border bg-background py-1 shadow-pop", at === "above" ? "bottom-full mb-1" : "mt-1"),
+	onMouseDown: (event) => event.preventDefault(),
+	children: [people.map((user, index) => /* @__PURE__ */ jsx("li", {
+		id: optionId(index),
+		role: "option",
+		"aria-selected": index === active,
+		className: cn("cursor-pointer truncate px-3 py-1.5", index === active && "bg-muted"),
+		onMouseMove: () => index !== active && onActive(index),
+		onClick: () => onPick(user),
+		children: user.name
+	}, user.id)), people.length === 0 && /* @__PURE__ */ jsx("li", {
+		className: "px-3 py-1.5 text-muted-foreground",
+		children: failed ? text("couldNotSearch") : text("noOneFound")
+	})]
+});
+//#endregion
+export { PeopleList };

package/dist/mentions/use-people-search.d.ts

@@ -0,0 +1,5 @@
+import { PickedUser } from "./mention-text.js";
+//#region src/mentions/use-people-search.d.ts
+/** Finds the people whose name matches the text typed after `@`, such as the members of a channel. */
+export type PeopleSearch = (query: string) => Promise<readonly PickedUser[]>;
+//#endregion

package/dist/mentions/use-people-search.js

@@ -0,0 +1,26 @@
+import { useDebounced } from "../lib/use-debounced.js";
+import { useEffect, useRef, useState } from "react";
+//#region src/mentions/use-people-search.ts
+/**
+* The people `search` finds for `query`, asked 150 ms after it last changed; `undefined` until the first answer and
+* while `query` is `undefined`. The last answer stays up while the next one is on its way, so the list does not flicker
+* as a name is typed, and an answer to a query since changed is dropped.
+*/
+const usePeopleSearch = (search, query) => {
+	const settled = useDebounced(query, 150);
+	const [found, setFound] = useState();
+	const latest = useRef(search);
+	latest.current = search;
+	useEffect(() => {
+		const ask = latest.current;
+		if (settled === void 0 || !ask) return;
+		let current = true;
+		ask(settled).then((people) => current && setFound({ people }), () => current && setFound({ failed: true }));
+		return () => {
+			current = false;
+		};
+	}, [settled]);
+	return query === void 0 ? void 0 : found;
+};
+//#endregion
+export { usePeopleSearch };

package/dist/package.js

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