@stealthscale/component-messaging 0.2.1 → 0.2.2

package/dist/shared-B0H4dgkB.js

@@ -0,0 +1,2248 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { a as recipe$1, i as ROWS, n as recipe$3, o as recipe, r as recipe$2, t as recipe$4 } from "./recipes-D1oVFnRU.js";
+import { createSlotRecipeContext } from "@stealthscale/theme";
+import { c } from "react/compiler-runtime";
+import { createRequiredContext, omitUndefined, useCallbackRef, useControllableState, useMediaQuery } from "@stealthscale/hooks";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+import { Button, ButtonPropsProvider, IconButton } from "@stealthscale/component-actions";
+import { flushSync } from "react-dom";
+import { Portal, ScrollArea } from "@stealthscale/component-primitives";
+import { useStickToBottom } from "use-stick-to-bottom";
+import { Popover } from "@stealthscale/component-disclosure";
+//#region src/attachment/context.ts
+/**
+* Binds the attachment recipe to the elements that render it.
+*
+* @remarks
+*   The binding is kept out of `recipe.ts` because an application's style compiler imports the
+*   recipe at build time, and a binding there would pull the React runtime into that import.
+*/
+/**
+* Supplies the element factories the attachment parts are built from.
+*/
+const { withContext: withContext$4, withProvider: withProvider$4 } = createSlotRecipeContext(recipe);
+//#endregion
+//#region src/attachment/actions.ts
+/**
+* Renders the actions' `div`.
+*/
+const Actions$1 = withContext$4("div", "actions");
+//#endregion
+//#region src/attachment/content.ts
+/**
+* Renders the column's `div`.
+*/
+const Content$2 = withContext$4("div", "content");
+//#endregion
+//#region src/attachment/description.ts
+/**
+* Renders the description's `span`.
+*/
+const Description = withContext$4("span", "description");
+//#endregion
+//#region src/attachment/state.ts
+/**
+* Provides a group's size and orientation to the attachments inside it, and tells an attachment
+* that it is an item of a list.
+*/
+/**
+* Provides a group's defaults, and reads them where an attachment renders, undefined outside a
+* group.
+*/
+const [GroupProvider, , useGroupDefaults] = createRequiredContext("Attachment.Group");
+//#endregion
+//#region src/attachment/group.tsx
+/**
+* Renders the `ul` with the attachment's group class.
+*/
+const Listed$1 = withProvider$4("ul", "group");
+/**
+* Renders the list and provides its size and orientation to the attachments inside.
+*
+* @param props - The size and orientation of the attachments, and the props of a `ul`.
+* @returns The `ul` element inside the provider.
+*/
+function Group(props) {
+	const $ = c(8);
+	const { orientation, size } = props;
+	let t0;
+	if ($[0] !== orientation || $[1] !== size) {
+		t0 = omitUndefined({
+			orientation,
+			size
+		});
+		$[0] = orientation;
+		$[1] = size;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== props) {
+		t1 = /* @__PURE__ */ jsx(Listed$1, { ...props });
+		$[3] = props;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== t0 || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(GroupProvider, {
+			value: t0,
+			children: t1
+		});
+		$[5] = t0;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+//#endregion
+//#region src/attachment/media.ts
+/**
+* Renders the media square's `div`.
+*/
+const Media = withContext$4("div", "media");
+//#endregion
+//#region src/attachment/root.tsx
+/**
+* Renders the `div` with the attachment's variants.
+*/
+const Framed$1 = withProvider$4("div", "root");
+/**
+* Renders the attachment, an `li` inside a group.
+*
+* @param props - The state, the recipe's variants and the props of a `div`.
+* @returns The `div` or `li` element.
+*/
+function Root$4(t0) {
+	const $ = c(15);
+	let orientation;
+	let props;
+	let size;
+	let t1;
+	if ($[0] !== t0) {
+		({orientation, size, state: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = orientation;
+		$[2] = props;
+		$[3] = size;
+		$[4] = t1;
+	} else {
+		orientation = $[1];
+		props = $[2];
+		size = $[3];
+		t1 = $[4];
+	}
+	const state = t1 === void 0 ? "done" : t1;
+	const group = useGroupDefaults();
+	let t2;
+	if ($[5] !== group) {
+		t2 = group === void 0 ? {} : { as: "li" };
+		$[5] = group;
+		$[6] = t2;
+	} else t2 = $[6];
+	const t3 = orientation ?? group?.orientation;
+	const t4 = size ?? group?.size;
+	let t5;
+	if ($[7] !== t3 || $[8] !== t4) {
+		t5 = omitUndefined({
+			orientation: t3,
+			size: t4
+		});
+		$[7] = t3;
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== props || $[11] !== state || $[12] !== t2 || $[13] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Framed$1, {
+			"data-state": state,
+			...t2,
+			...t5,
+			...props
+		});
+		$[10] = props;
+		$[11] = state;
+		$[12] = t2;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	return t6;
+}
+//#endregion
+//#region src/attachment/title.ts
+/**
+* Renders the title's `span`.
+*/
+const Title = withContext$4("span", "title");
+//#endregion
+//#region src/attachment/index.ts
+var attachment_exports = /* @__PURE__ */ __exportAll({
+	Actions: () => Actions$1,
+	Content: () => Content$2,
+	Description: () => Description,
+	Group: () => Group,
+	Media: () => Media,
+	Root: () => Root$4,
+	Title: () => Title
+});
+//#endregion
+//#region src/composer/state.ts
+/**
+* Provides what the composer's root knows to its parts: the text, whether it can be sent, and the
+* handlers the parts call.
+*/
+/**
+* Provides the state to the parts, and reads it where a part renders.
+*/
+const [StateProvider$1, useComposerState] = createRequiredContext("Composer");
+//#endregion
+//#region src/composer/attach-trigger.tsx
+/**
+* Renders the control that opens the file picker, and the hidden file input behind it.
+*
+* @remarks
+*   The control is the actions `Button`, square, small, in the ghost look, named by `label`,
+*   "Attach files" unless stated, with the caller's glyph. A press opens the browser's file picker,
+*   and the files picked reach the root's `onAttach`. The file input is `hidden`, so neither a
+*   screen reader nor the Tab key finds a second, unnamed control. It is emptied after each pick,
+*   so picking the same file twice attaches it twice. `accept` limits the files the picker offers.
+*/
+/**
+* Renders the control and the hidden file input.
+*
+* @param props - The name, the accepted types and the props of the actions `Button`, the glyph
+*   among its children.
+* @returns The `button` element and the `input` element.
+*/
+function AttachTrigger(t0) {
+	const $ = c(20);
+	let accept;
+	let onClick;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({accept, label: t1, onClick, ...props} = t0);
+		$[0] = t0;
+		$[1] = accept;
+		$[2] = onClick;
+		$[3] = props;
+		$[4] = t1;
+	} else {
+		accept = $[1];
+		onClick = $[2];
+		props = $[3];
+		t1 = $[4];
+	}
+	const label = t1 === void 0 ? "Attach files" : t1;
+	const { disabled, onAttach } = useComposerState();
+	const picker = useRef(null);
+	let t2;
+	if ($[5] !== onClick) {
+		t2 = (event) => {
+			onClick?.(event);
+			picker.current?.click();
+		};
+		$[5] = onClick;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== disabled || $[8] !== label || $[9] !== props || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Button, {
+			"aria-label": label,
+			disabled,
+			shape: "square",
+			size: "sm",
+			variant: "ghost",
+			...props,
+			onClick: t2
+		});
+		$[7] = disabled;
+		$[8] = label;
+		$[9] = props;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== onAttach) {
+		t4 = (event_0) => {
+			const files = [...event_0.currentTarget.files];
+			event_0.currentTarget.value = "";
+			if (files.length > 0) onAttach?.(files);
+		};
+		$[12] = onAttach;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== accept || $[15] !== t4) {
+		t5 = /* @__PURE__ */ jsx("input", {
+			accept,
+			hidden: true,
+			multiple: true,
+			onChange: t4,
+			ref: picker,
+			type: "file"
+		});
+		$[14] = accept;
+		$[15] = t4;
+		$[16] = t5;
+	} else t5 = $[16];
+	let t6;
+	if ($[17] !== t3 || $[18] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Fragment, { children: [t3, t5] });
+		$[17] = t3;
+		$[18] = t5;
+		$[19] = t6;
+	} else t6 = $[19];
+	return t6;
+}
+//#endregion
+//#region src/composer/context.ts
+/**
+* Binds the composer recipe to the elements that render it.
+*
+* @remarks
+*   The binding is kept out of `recipe.ts` because an application's style compiler imports the
+*   recipe at build time, and a binding there would pull the React runtime into that import.
+*/
+/**
+* Supplies the element factories the composer parts are built from.
+*/
+const { withContext: withContext$3, withProvider: withProvider$3 } = createSlotRecipeContext(recipe$1);
+//#endregion
+//#region src/composer/attachments.ts
+/**
+* Renders the row's `div`.
+*/
+const Attachments = withContext$3("div", "attachments");
+//#endregion
+//#region src/composer/context-strip.ts
+/**
+* Renders the strip's `div`.
+*/
+const Context = withContext$3("div", "context");
+//#endregion
+//#region src/composer/keys.ts
+/**
+* Returns whether a press holds any modifier.
+*/
+function modified(pressed) {
+	return pressed.altKey || pressed.ctrlKey || pressed.metaKey || pressed.shiftKey;
+}
+/**
+* Returns whether a press of Enter sends under the keys `submitOn` names.
+*/
+function sends(pressed, submitOn) {
+	return submitOn === "enter" ? !pressed.shiftKey : pressed.ctrlKey || pressed.metaKey;
+}
+/**
+* Returns what a key pressed in the textarea does.
+*
+* @param pressed - The key and its modifiers.
+* @param offered - The reply, the edit and the send keys the composer offers.
+* @returns The action, or `none` for a key the composer leaves to the textarea.
+*/
+function actionOf(pressed, offered) {
+	if (pressed.isComposing) return "none";
+	if (pressed.key === "Escape" && offered.cancels) return "cancel";
+	if (pressed.key === "ArrowUp" && offered.edits && offered.empty && !modified(pressed)) return "edit";
+	if (pressed.key === "Enter" && sends(pressed, offered.submitOn)) return "submit";
+	return "none";
+}
+//#endregion
+//#region src/composer/suggestions.tsx
+/**
+* Renders the list's `div`.
+*/
+const Listed = withContext$3("div", "suggestions");
+/**
+* Renders one suggestion's `div`.
+*/
+const Option = withContext$3("div", "suggestion");
+/**
+* Renders the line under a suggestion's name.
+*/
+const Detail = withContext$3("span", "detail");
+/**
+* Renders the open list, or nothing.
+*
+* @param props - The list's name and the mention state.
+* @returns The `listbox`, or nothing while the list is closed.
+*/
+function Suggestions(t0) {
+	const $ = c(6);
+	const { label, mentions } = t0;
+	if (!mentions.open) return null;
+	const t1 = mentions.listId;
+	let t2;
+	if ($[0] !== mentions) {
+		t2 = mentions.suggestions.map((suggestion, index) => /* @__PURE__ */ jsxs(Option, {
+			"aria-selected": index === mentions.highlight,
+			id: mentions.optionId(index),
+			onClick: () => {
+				mentions.choose(index);
+			},
+			onMouseDown: _temp,
+			onPointerMove: () => {
+				mentions.setHighlight(index);
+			},
+			role: "option",
+			children: [suggestion.label, suggestion.description === void 0 ? null : /* @__PURE__ */ jsx(Detail, { children: suggestion.description })]
+		}, suggestion.id));
+		$[0] = mentions;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== label || $[3] !== mentions.listId || $[4] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Listed, {
+			"aria-label": label,
+			id: t1,
+			role: "listbox",
+			children: t2
+		});
+		$[2] = label;
+		$[3] = mentions.listId;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
+}
+function _temp(event) {
+	event.preventDefault();
+}
+//#endregion
+//#region src/composer/mentions.ts
+/**
+* Returns the query of one trigger at the caret, or nothing where the trigger opens none there.
+*/
+function queryOf(text, caret, trigger) {
+	const from = text.lastIndexOf(trigger, caret - 1);
+	if (from === -1 || /\S/u.test(text.charAt(from - 1))) return void 0;
+	const term = text.slice(from + trigger.length, caret);
+	return /\s/u.test(term) ? void 0 : {
+		from,
+		term,
+		trigger
+	};
+}
+/**
+* Returns the mention the caret is in.
+*
+* @param text - The text so far.
+* @param caret - The caret's index in the text.
+* @param triggers - The characters that open a mention, such as `@` and `#`.
+* @returns The query at the caret, or undefined outside every mention.
+*/
+function queryAt(text, caret, triggers) {
+	return triggers.map((trigger) => queryOf(text, caret, trigger)).find((query) => query !== void 0);
+}
+/**
+* Returns the text with the query replaced by the trigger, the chosen name and a space, and the
+* caret after them.
+*
+* @param text - The text so far.
+* @param query - The mention being typed.
+* @param caret - The caret's index in the text.
+* @param name - The chosen name.
+* @returns The new text and the caret's index in it.
+*/
+function mentioned(text, query, caret, name) {
+	const written = `${query.trigger}${name} `;
+	return {
+		caret: query.from + written.length,
+		text: text.slice(0, query.from) + written + text.slice(caret)
+	};
+}
+//#endregion
+//#region src/composer/use-mentions.ts
+/**
+* Keeps the mention a reader types in the composer's textarea: the query at the caret, the
+* suggestion the keys highlight, and the insertion of the one chosen.
+*
+* @remarks
+*   Focus stays in the textarea. The arrows move the highlight, which the textarea reports through
+*   `aria-activedescendant`, Enter and Tab insert the highlighted suggestion, and Escape closes the
+*   list without changing the text and without reaching a dialog around the composer. The list is
+*   open while the caret is in a query and there are suggestions. A new query moves the highlight
+*   back to the first suggestion, and a list that shrinks keeps it on its last suggestion. A key
+*   pressed while an input method composes text is left to the input method.
+*/
+/**
+* Lists no suggestions.
+*/
+const NONE = [];
+/**
+* Lists no triggers.
+*/
+const UNTRIGGERED = [];
+/**
+* Maps each key the open list uses to what it does.
+*/
+const KEYS = {
+	ArrowDown: 1,
+	ArrowUp: -1,
+	Enter: "choose",
+	Escape: "close",
+	Tab: "choose"
+};
+/**
+* Returns whether two queries name the same mention.
+*/
+function same(one, other) {
+	return one?.from === other?.from && one?.term === other?.term && one?.trigger === other?.trigger;
+}
+/**
+* Returns the mention state of the composer's textarea.
+*
+* @param options - The triggers, the suggestions and the handlers.
+* @param input - The textarea, once it renders.
+* @param setText - Replaces the composer's text.
+* @returns The list's state and the handlers the textarea and the list call.
+*/
+function useMentions(options, input, setText) {
+	const $ = c(33);
+	const { onMention, onQueryChange, suggestions: t0, triggers: t1 } = options;
+	const suggestions = t0 === void 0 ? NONE : t0;
+	const triggers = t1 === void 0 ? UNTRIGGERED : t1;
+	const listId = useId();
+	const [query, setQuery] = useState();
+	const [stored, setHighlight] = useState(0);
+	const open = query !== void 0 && suggestions.length > 0;
+	const highlight = Math.min(stored, suggestions.length - 1);
+	let t2;
+	if ($[0] !== onQueryChange || $[1] !== query) {
+		t2 = function queried(next) {
+			if (same(next, query)) return;
+			setHighlight(0);
+			setQuery(next);
+			onQueryChange?.(next);
+		};
+		$[0] = onQueryChange;
+		$[1] = query;
+		$[2] = t2;
+	} else t2 = $[2];
+	const queried = t2;
+	let t3;
+	if ($[3] !== input || $[4] !== onMention || $[5] !== queried || $[6] !== query || $[7] !== setText || $[8] !== suggestions) {
+		t3 = function choose(index) {
+			const [at, element, suggestion] = [
+				query,
+				input,
+				suggestions[index]
+			];
+			const next_0 = mentioned(element.value, at, element.selectionStart, suggestion.label);
+			flushSync(() => {
+				setText(next_0.text);
+			});
+			element.setSelectionRange(next_0.caret, next_0.caret);
+			queried();
+			onMention?.(suggestion, at);
+		};
+		$[3] = input;
+		$[4] = onMention;
+		$[5] = queried;
+		$[6] = query;
+		$[7] = setText;
+		$[8] = suggestions;
+		$[9] = t3;
+	} else t3 = $[9];
+	const choose = t3;
+	let t4;
+	if ($[10] !== choose || $[11] !== highlight || $[12] !== open || $[13] !== queried || $[14] !== suggestions.length) {
+		t4 = function keyed(event) {
+			const action = open && !event.nativeEvent.isComposing ? KEYS[event.key] : void 0;
+			if (action === void 0) return false;
+			event.preventDefault();
+			if (typeof action === "number") setHighlight((highlight + action + suggestions.length) % suggestions.length);
+			else if (action === "choose") choose(highlight);
+			else {
+				event.stopPropagation();
+				queried();
+			}
+			return true;
+		};
+		$[10] = choose;
+		$[11] = highlight;
+		$[12] = open;
+		$[13] = queried;
+		$[14] = suggestions.length;
+		$[15] = t4;
+	} else t4 = $[15];
+	const keyed = t4;
+	let t5;
+	if ($[16] !== queried) {
+		t5 = () => {
+			queried();
+		};
+		$[16] = queried;
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[18] !== queried || $[19] !== triggers) {
+		t6 = (element_0) => {
+			queried(queryAt(element_0.value, element_0.selectionStart, triggers));
+		};
+		$[18] = queried;
+		$[19] = triggers;
+		$[20] = t6;
+	} else t6 = $[20];
+	let t7;
+	if ($[21] !== listId) {
+		t7 = (index_0) => `${listId}-${String(index_0)}`;
+		$[21] = listId;
+		$[22] = t7;
+	} else t7 = $[22];
+	let t8;
+	if ($[23] !== choose || $[24] !== highlight || $[25] !== keyed || $[26] !== listId || $[27] !== open || $[28] !== suggestions || $[29] !== t5 || $[30] !== t6 || $[31] !== t7) {
+		t8 = {
+			choose,
+			dismiss: t5,
+			highlight,
+			keyed,
+			listId,
+			moved: t6,
+			open,
+			optionId: t7,
+			setHighlight,
+			suggestions
+		};
+		$[23] = choose;
+		$[24] = highlight;
+		$[25] = keyed;
+		$[26] = listId;
+		$[27] = open;
+		$[28] = suggestions;
+		$[29] = t5;
+		$[30] = t6;
+		$[31] = t7;
+		$[32] = t8;
+	} else t8 = $[32];
+	return t8;
+}
+//#endregion
+//#region src/composer/input.tsx
+/**
+* Renders the `textarea` with the composer's input class.
+*/
+const Typed = withContext$3("textarea", "input");
+/**
+* Runs what a key does: dismisses the reply, edits the last message, or sends.
+*
+* @param event - The key press, which the composer cancels when it acts on it.
+* @param offered - The reply, the edit and the send keys the composer offers.
+* @param handlers - The handlers the root takes.
+*/
+function keyed(event, offered, handlers) {
+	const action = actionOf({
+		altKey: event.altKey,
+		ctrlKey: event.ctrlKey,
+		isComposing: event.nativeEvent.isComposing,
+		key: event.key,
+		metaKey: event.metaKey,
+		shiftKey: event.shiftKey
+	}, offered);
+	if (action === "none") return;
+	event.preventDefault();
+	if (action === "cancel") handlers.onCancelContext?.();
+	else if (action === "edit") handlers.onEditLast?.();
+	else event.currentTarget.form?.requestSubmit();
+}
+/**
+* Attaches the files a paste carries, in place of pasting text.
+*
+* @param event - The paste event, which the composer cancels when it attaches.
+* @param onAttach - The root's attach handler.
+*/
+function pasted(event, onAttach) {
+	const files = [...event.clipboardData.files];
+	if (onAttach === void 0 || files.length === 0) return;
+	event.preventDefault();
+	onAttach(files);
+}
+/**
+* Returns what the composer offers a key press, read from the root's state.
+*/
+function offeredBy(state) {
+	return {
+		cancels: state.onCancelContext !== void 0,
+		edits: state.onEditLast !== void 0,
+		empty: state.text === "",
+		submitOn: state.submitOn
+	};
+}
+/**
+* Passes the textarea to the caller's ref, a callback or an object.
+*
+* @param handed - The caller's ref, if any.
+* @param element - The textarea, or `null` once it unmounts.
+*/
+function forwarded(handed, element) {
+	if (typeof handed === "function") handed(element);
+	else if (handed !== null && handed !== void 0) handed.current = element;
+}
+/**
+* Returns the textarea's handlers, each running the caller's first.
+*
+* @param wiring - The state and the handlers the textarea's handlers read.
+* @returns The five handlers.
+*/
+function wired(wiring) {
+	const { handlers, mentions, offered, onAttach, own, setText } = wiring;
+	return {
+		onBlur: (event) => {
+			own.onBlur?.(event);
+			mentions.dismiss();
+		},
+		onChange: (event) => {
+			own.onChange?.(event);
+			setText(event.target.value);
+			mentions.moved(event.currentTarget);
+		},
+		onKeyDown: (event) => {
+			own.onKeyDown?.(event);
+			if (event.defaultPrevented || mentions.keyed(event)) return;
+			keyed(event, offered, handlers);
+		},
+		onPaste: (event) => {
+			own.onPaste?.(event);
+			if (!event.defaultPrevented) pasted(event, onAttach);
+		},
+		onSelect: (event) => {
+			own.onSelect?.(event);
+			mentions.moved(event.currentTarget);
+		}
+	};
+}
+/**
+* Renders the textarea with the composer's text and keys, and the list of suggestions.
+*
+* @param props - The name, the row limit, the mention options and the props of a `textarea`.
+* @returns The `textarea` element and the list.
+*/
+function Input(t0) {
+	const $ = c(56);
+	let handed;
+	let onBlur;
+	let onChange;
+	let onKeyDown;
+	let onMention;
+	let onPaste;
+	let onQueryChange;
+	let onSelect;
+	let props;
+	let suggestions;
+	let t1;
+	let t2;
+	let t3;
+	let triggers;
+	if ($[0] !== t0) {
+		({label: t1, maxRows: t2, onBlur, onChange, onKeyDown, onMention, onPaste, onQueryChange, onSelect, ref: handed, suggestions, suggestionsLabel: t3, triggers, ...props} = t0);
+		$[0] = t0;
+		$[1] = handed;
+		$[2] = onBlur;
+		$[3] = onChange;
+		$[4] = onKeyDown;
+		$[5] = onMention;
+		$[6] = onPaste;
+		$[7] = onQueryChange;
+		$[8] = onSelect;
+		$[9] = props;
+		$[10] = suggestions;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = triggers;
+	} else {
+		handed = $[1];
+		onBlur = $[2];
+		onChange = $[3];
+		onKeyDown = $[4];
+		onMention = $[5];
+		onPaste = $[6];
+		onQueryChange = $[7];
+		onSelect = $[8];
+		props = $[9];
+		suggestions = $[10];
+		t1 = $[11];
+		t2 = $[12];
+		t3 = $[13];
+		triggers = $[14];
+	}
+	const label = t1 === void 0 ? "Message" : t1;
+	const maxRows = t2 === void 0 ? 8 : t2;
+	const suggestionsLabel = t3 === void 0 ? "Suggestions" : t3;
+	const state = useComposerState();
+	const { disabled, input, onAttach, onCancelContext, onEditLast, setInput, setText, text } = state;
+	let t4;
+	if ($[15] !== onMention || $[16] !== onQueryChange || $[17] !== suggestions || $[18] !== triggers) {
+		t4 = {
+			onMention,
+			onQueryChange,
+			suggestions,
+			triggers
+		};
+		$[15] = onMention;
+		$[16] = onQueryChange;
+		$[17] = suggestions;
+		$[18] = triggers;
+		$[19] = t4;
+	} else t4 = $[19];
+	const mentions = useMentions(t4, input, setText);
+	const t5 = String(maxRows);
+	let t6;
+	if ($[20] !== t5) {
+		t6 = { [ROWS]: t5 };
+		$[20] = t5;
+		$[21] = t6;
+	} else t6 = $[21];
+	const sized = t6;
+	let t7;
+	if ($[22] !== handed || $[23] !== setInput) {
+		t7 = (element) => {
+			setInput(element);
+			forwarded(handed, element);
+		};
+		$[22] = handed;
+		$[23] = setInput;
+		$[24] = t7;
+	} else t7 = $[24];
+	const attach = useCallbackRef(t7);
+	let t8;
+	if ($[25] !== mentions || $[26] !== onAttach || $[27] !== onBlur || $[28] !== onCancelContext || $[29] !== onChange || $[30] !== onEditLast || $[31] !== onKeyDown || $[32] !== onPaste || $[33] !== onSelect || $[34] !== setText || $[35] !== state) {
+		t8 = wired({
+			handlers: {
+				onCancelContext,
+				onEditLast
+			},
+			mentions,
+			offered: offeredBy(state),
+			onAttach,
+			own: {
+				onBlur,
+				onChange,
+				onKeyDown,
+				onPaste,
+				onSelect
+			},
+			setText
+		});
+		$[25] = mentions;
+		$[26] = onAttach;
+		$[27] = onBlur;
+		$[28] = onCancelContext;
+		$[29] = onChange;
+		$[30] = onEditLast;
+		$[31] = onKeyDown;
+		$[32] = onPaste;
+		$[33] = onSelect;
+		$[34] = setText;
+		$[35] = state;
+		$[36] = t8;
+	} else t8 = $[36];
+	const events = t8;
+	let t9;
+	if ($[37] !== mentions) {
+		t9 = mentions.open ? mentions.optionId(mentions.highlight) : void 0;
+		$[37] = mentions;
+		$[38] = t9;
+	} else t9 = $[38];
+	const t10 = triggers === void 0 ? void 0 : "list";
+	const t11 = mentions.open ? mentions.listId : void 0;
+	let t12;
+	if ($[39] !== attach || $[40] !== disabled || $[41] !== events || $[42] !== label || $[43] !== props || $[44] !== sized || $[45] !== t10 || $[46] !== t11 || $[47] !== t9 || $[48] !== text) {
+		t12 = /* @__PURE__ */ jsx(Typed, {
+			"aria-activedescendant": t9,
+			"aria-autocomplete": t10,
+			"aria-controls": t11,
+			"aria-label": label,
+			disabled,
+			ref: attach,
+			rows: 1,
+			...props,
+			...events,
+			style: sized,
+			value: text
+		});
+		$[39] = attach;
+		$[40] = disabled;
+		$[41] = events;
+		$[42] = label;
+		$[43] = props;
+		$[44] = sized;
+		$[45] = t10;
+		$[46] = t11;
+		$[47] = t9;
+		$[48] = text;
+		$[49] = t12;
+	} else t12 = $[49];
+	let t13;
+	if ($[50] !== mentions || $[51] !== suggestionsLabel) {
+		t13 = /* @__PURE__ */ jsx(Suggestions, {
+			label: suggestionsLabel,
+			mentions
+		});
+		$[50] = mentions;
+		$[51] = suggestionsLabel;
+		$[52] = t13;
+	} else t13 = $[52];
+	let t14;
+	if ($[53] !== t12 || $[54] !== t13) {
+		t14 = /* @__PURE__ */ jsxs(Fragment, { children: [t12, t13] });
+		$[53] = t12;
+		$[54] = t13;
+		$[55] = t14;
+	} else t14 = $[55];
+	return t14;
+}
+//#endregion
+//#region src/composer/drop.ts
+/**
+* Tracks files dragged over the composer's box, and attaches the files dropped on it.
+*
+* @remarks
+*   The box accepts a drag only while `onAttach` is set and the composer is enabled, so a browser
+*   shows no drop cursor over a composer that attaches nothing. A drag that moves between the box's
+*   own children keeps the mark, and one that leaves the box drops it.
+*/
+/**
+* Returns whether files are over the box, and the handlers that attach the files dropped on it.
+*
+* @param onAttach - Called with the files dropped, the composer's attach handler.
+* @param disabled - Whether the composer takes no input.
+* @returns The mark and the three handlers.
+*/
+function useDrop(onAttach, disabled) {
+	const $ = c(10);
+	const [dragging, setDragging] = useState(false);
+	const drops = onAttach !== void 0 && !disabled;
+	let t0;
+	if ($[0] !== drops) {
+		t0 = function onDragOver(event) {
+			if (!drops) return;
+			event.preventDefault();
+			setDragging(true);
+		};
+		$[0] = drops;
+		$[1] = t0;
+	} else t0 = $[1];
+	const onDragOver = t0;
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = function onDragLeave(event_0) {
+			const next = event_0.relatedTarget;
+			if (!(next instanceof Node) || !event_0.currentTarget.contains(next)) setDragging(false);
+		};
+		$[2] = t1;
+	} else t1 = $[2];
+	const onDragLeave = t1;
+	let t2;
+	if ($[3] !== drops || $[4] !== onAttach) {
+		t2 = function onDrop(event_1) {
+			const files = [...event_1.dataTransfer.files];
+			setDragging(false);
+			if (!drops || files.length === 0) return;
+			event_1.preventDefault();
+			onAttach(files);
+		};
+		$[3] = drops;
+		$[4] = onAttach;
+		$[5] = t2;
+	} else t2 = $[5];
+	const onDrop = t2;
+	let t3;
+	if ($[6] !== dragging || $[7] !== onDragOver || $[8] !== onDrop) {
+		t3 = {
+			dragging,
+			onDragLeave,
+			onDragOver,
+			onDrop
+		};
+		$[6] = dragging;
+		$[7] = onDragOver;
+		$[8] = onDrop;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
+}
+//#endregion
+//#region src/composer/root.tsx
+/**
+* Renders the composer's root: the `form` a reader writes and sends a message in.
+*
+* @remarks
+*   The root keeps the text, controlled through `value` or held from `defaultValue`. A send, from
+*   the submit control or from the key `submitOn` names, calls `onSubmit` with the text trimmed,
+*   clears the text unless the caller controls it, and moves focus back to the textarea. Text of
+*   whitespace alone is not a message, and attached files alone are, so the root sends while the
+*   trimmed text is not empty or `attached` is true, and never while `busy` or `disabled`. With
+*   `onAttach`, files dropped on the box are attached, and the box takes the focus edge while they
+*   are dragged over it.
+*/
+/**
+* Renders the `form` with the composer's variants.
+*/
+const Form = withProvider$3("form", "root");
+/**
+* Renders the form and provides the text and the handlers to its parts.
+*
+* @param props - The text, the states, the handlers and the props of a `form`.
+* @returns The `form` element inside the state's provider.
+*/
+function Root$3(t0) {
+	const $ = c(53);
+	let onAttach;
+	let onCancelContext;
+	let onEditLast;
+	let onStop;
+	let onSubmit;
+	let onValueChange;
+	let props;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let value;
+	if ($[0] !== t0) {
+		({attached: t1, busy: t2, defaultValue: t3, disabled: t4, onAttach, onCancelContext, onEditLast, onStop, onSubmit, onValueChange, submitOn: t5, value, ...props} = t0);
+		$[0] = t0;
+		$[1] = onAttach;
+		$[2] = onCancelContext;
+		$[3] = onEditLast;
+		$[4] = onStop;
+		$[5] = onSubmit;
+		$[6] = onValueChange;
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+		$[13] = value;
+	} else {
+		onAttach = $[1];
+		onCancelContext = $[2];
+		onEditLast = $[3];
+		onStop = $[4];
+		onSubmit = $[5];
+		onValueChange = $[6];
+		props = $[7];
+		t1 = $[8];
+		t2 = $[9];
+		t3 = $[10];
+		t4 = $[11];
+		t5 = $[12];
+		value = $[13];
+	}
+	const attached = t1 === void 0 ? false : t1;
+	const busy = t2 === void 0 ? false : t2;
+	const defaultValue = t3 === void 0 ? "" : t3;
+	const disabled = t4 === void 0 ? false : t4;
+	const submitOn = t5 === void 0 ? "enter" : t5;
+	let t6;
+	if ($[14] !== defaultValue || $[15] !== onValueChange || $[16] !== value) {
+		t6 = {
+			defaultValue,
+			onChange: onValueChange,
+			value
+		};
+		$[14] = defaultValue;
+		$[15] = onValueChange;
+		$[16] = value;
+		$[17] = t6;
+	} else t6 = $[17];
+	const [text, setText] = useControllableState(t6);
+	const [input, setInput] = useState(null);
+	const t7 = useDrop(onAttach, disabled);
+	let dragging;
+	let drop;
+	if ($[18] !== t7) {
+		({dragging, ...drop} = t7);
+		$[18] = t7;
+		$[19] = dragging;
+		$[20] = drop;
+	} else {
+		dragging = $[19];
+		drop = $[20];
+	}
+	let t8;
+	if ($[21] !== attached || $[22] !== busy || $[23] !== disabled || $[24] !== text) {
+		t8 = !disabled && !busy && (text.trim() !== "" || attached);
+		$[21] = attached;
+		$[22] = busy;
+		$[23] = disabled;
+		$[24] = text;
+		$[25] = t8;
+	} else t8 = $[25];
+	const canSubmit = t8;
+	let t9;
+	if ($[26] !== canSubmit || $[27] !== input || $[28] !== onSubmit || $[29] !== setText || $[30] !== text || $[31] !== value) {
+		t9 = function submitted(event) {
+			event.preventDefault();
+			if (!canSubmit) return;
+			onSubmit?.(text.trim());
+			if (value === void 0) setText("");
+			input?.focus();
+		};
+		$[26] = canSubmit;
+		$[27] = input;
+		$[28] = onSubmit;
+		$[29] = setText;
+		$[30] = text;
+		$[31] = value;
+		$[32] = t9;
+	} else t9 = $[32];
+	const submitted = t9;
+	let t10;
+	if ($[33] !== busy || $[34] !== canSubmit || $[35] !== disabled || $[36] !== input || $[37] !== onAttach || $[38] !== onCancelContext || $[39] !== onEditLast || $[40] !== onStop || $[41] !== setText || $[42] !== submitOn || $[43] !== text) {
+		t10 = {
+			busy,
+			canSubmit,
+			disabled,
+			input,
+			onAttach,
+			onCancelContext,
+			onEditLast,
+			onStop,
+			setInput,
+			setText,
+			submitOn,
+			text
+		};
+		$[33] = busy;
+		$[34] = canSubmit;
+		$[35] = disabled;
+		$[36] = input;
+		$[37] = onAttach;
+		$[38] = onCancelContext;
+		$[39] = onEditLast;
+		$[40] = onStop;
+		$[41] = setText;
+		$[42] = submitOn;
+		$[43] = text;
+		$[44] = t10;
+	} else t10 = $[44];
+	const t11 = dragging ? "" : void 0;
+	let t12;
+	if ($[45] !== drop || $[46] !== props || $[47] !== submitted || $[48] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Form, {
+			...props,
+			...drop,
+			"data-dragging": t11,
+			onSubmit: submitted
+		});
+		$[45] = drop;
+		$[46] = props;
+		$[47] = submitted;
+		$[48] = t11;
+		$[49] = t12;
+	} else t12 = $[49];
+	let t13;
+	if ($[50] !== t10 || $[51] !== t12) {
+		t13 = /* @__PURE__ */ jsx(StateProvider$1, {
+			value: t10,
+			children: t12
+		});
+		$[50] = t10;
+		$[51] = t12;
+		$[52] = t13;
+	} else t13 = $[52];
+	return t13;
+}
+//#endregion
+//#region src/composer/submit.tsx
+/**
+* Renders the actions `Button` with the composer's submit class.
+*/
+const Sent = withContext$3(Button, "submit");
+/**
+* Renders the control that sends, or stops while a response runs.
+*
+* @param props - The names, the stop glyph and the props of the actions `Button`, the send glyph
+*   among its children.
+* @returns The `button` element.
+*/
+function Submit(t0) {
+	const $ = c(18);
+	let children;
+	let onClick;
+	let props;
+	let stopIcon;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({children, label: t1, onClick, stopIcon, stopLabel: t2, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = onClick;
+		$[3] = props;
+		$[4] = stopIcon;
+		$[5] = t1;
+		$[6] = t2;
+	} else {
+		children = $[1];
+		onClick = $[2];
+		props = $[3];
+		stopIcon = $[4];
+		t1 = $[5];
+		t2 = $[6];
+	}
+	const label = t1 === void 0 ? "Send" : t1;
+	const stopLabel = t2 === void 0 ? "Stop" : t2;
+	const { busy, canSubmit, onStop } = useComposerState();
+	const stop = busy ? onStop : void 0;
+	const t3 = stop === void 0 && !canSubmit ? true : void 0;
+	const t4 = stop === void 0 ? label : stopLabel;
+	const t5 = stop === void 0 ? "submit" : "button";
+	let t6;
+	if ($[7] !== canSubmit || $[8] !== onClick || $[9] !== stop) {
+		t6 = (event) => {
+			onClick?.(event);
+			if (stop !== void 0) stop();
+			else if (!canSubmit) event.preventDefault();
+		};
+		$[7] = canSubmit;
+		$[8] = onClick;
+		$[9] = stop;
+		$[10] = t6;
+	} else t6 = $[10];
+	const t7 = stop === void 0 ? children : stopIcon;
+	let t8;
+	if ($[11] !== props || $[12] !== t3 || $[13] !== t4 || $[14] !== t5 || $[15] !== t6 || $[16] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Sent, {
+			"aria-disabled": t3,
+			"aria-label": t4,
+			shape: "square",
+			size: "sm",
+			type: t5,
+			variant: "solid",
+			...props,
+			onClick: t6,
+			children: t7
+		});
+		$[11] = props;
+		$[12] = t3;
+		$[13] = t4;
+		$[14] = t5;
+		$[15] = t6;
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	return t8;
+}
+//#endregion
+//#region src/composer/toolbar.ts
+/**
+* Renders the row's `div`.
+*/
+const Toolbar = withContext$3("div", "toolbar");
+//#endregion
+//#region src/composer/index.ts
+var composer_exports = /* @__PURE__ */ __exportAll({
+	AttachTrigger: () => AttachTrigger,
+	Attachments: () => Attachments,
+	Context: () => Context,
+	Input: () => Input,
+	Root: () => Root$3,
+	Submit: () => Submit,
+	Toolbar: () => Toolbar
+});
+//#endregion
+//#region src/conversation/context.ts
+/**
+* Binds the conversation recipe to the elements that render it.
+*
+* @remarks
+*   The binding is kept out of `recipe.ts` because an application's style compiler imports the
+*   recipe at build time, and a binding there would pull the React runtime into that import.
+*/
+/**
+* Supplies the element factories the conversation parts are built from.
+*/
+const { withContext: withContext$2, withProvider: withProvider$2 } = createSlotRecipeContext(recipe$2);
+//#endregion
+//#region src/conversation/state.ts
+/**
+* Provides the state to the parts, and reads it where a part renders.
+*/
+const [StateProvider, useConversationState] = createRequiredContext("Conversation");
+//#endregion
+//#region src/conversation/content.tsx
+/**
+* Renders the scroll area's viewport with the conversation's viewport class.
+*/
+const Viewport = withContext$2(ScrollArea.Viewport, "viewport");
+/**
+* Renders the scroll area's content with the conversation's content class.
+*/
+const Stacked = withContext$2(ScrollArea.Content, "content");
+/**
+* Renders the log around the content, with the engine's refs on both.
+*
+* @param props - The props of the scroll area's viewport, the turns among its children.
+* @returns The viewport element.
+*/
+function Content$1(t0) {
+	const $ = c(11);
+	let children;
+	let props;
+	if ($[0] !== t0) {
+		({children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+	} else {
+		children = $[1];
+		props = $[2];
+	}
+	const { contentRef, label, scrollRef } = useConversationState();
+	let t1;
+	if ($[3] !== children || $[4] !== contentRef) {
+		t1 = /* @__PURE__ */ jsx(Stacked, {
+			ref: contentRef,
+			children
+		});
+		$[3] = children;
+		$[4] = contentRef;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== label || $[7] !== props || $[8] !== scrollRef || $[9] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Viewport, {
+			"aria-label": label,
+			"aria-live": "polite",
+			"aria-relevant": "additions",
+			role: "log",
+			...props,
+			ref: scrollRef,
+			children: t1
+		});
+		$[6] = label;
+		$[7] = props;
+		$[8] = scrollRef;
+		$[9] = t1;
+		$[10] = t2;
+	} else t2 = $[10];
+	return t2;
+}
+//#endregion
+//#region src/conversation/jump-trigger.tsx
+/**
+* Renders the `div` that places the control over the transcript.
+*/
+const Placed = withContext$2("div", "jumpTrigger");
+/**
+* Renders the control while the view is away from the end.
+*
+* @param props - The control's name and the props of the actions `Button`, the glyph among its
+*   children.
+* @returns The placed control, or nothing at the end of the transcript.
+*/
+function JumpTrigger(t0) {
+	const $ = c(12);
+	let onClick;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({label: t1, onClick, ...props} = t0);
+		$[0] = t0;
+		$[1] = onClick;
+		$[2] = props;
+		$[3] = t1;
+	} else {
+		onClick = $[1];
+		props = $[2];
+		t1 = $[3];
+	}
+	const label = t1 === void 0 ? "Jump to the latest message" : t1;
+	const { atEnd, scrollRef, scrollToEnd } = useConversationState();
+	if (atEnd) return null;
+	let t2;
+	if ($[4] !== onClick || $[5] !== scrollRef || $[6] !== scrollToEnd) {
+		t2 = (event) => {
+			onClick?.(event);
+			scrollRef.current.focus({ preventScroll: true });
+			scrollToEnd();
+		};
+		$[4] = onClick;
+		$[5] = scrollRef;
+		$[6] = scrollToEnd;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== label || $[9] !== props || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Placed, { children: /* @__PURE__ */ jsx(Button, {
+			"aria-label": label,
+			elevation: "floating",
+			palette: "neutral",
+			shape: "square",
+			size: "sm",
+			variant: "surface",
+			...props,
+			onClick: t2
+		}) });
+		$[8] = label;
+		$[9] = props;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
+}
+//#endregion
+//#region src/conversation/use-conversation.ts
+/**
+* Runs a conversation's scroll engine: whether the view is at the end, and the two scrolls.
+*
+* @remarks
+*   The hook runs use-stick-to-bottom. While the view is at the end of the transcript, a message
+*   that arrives or grows scrolls the view down with it. A wheel, a key or a drag that scrolls up
+*   stops the follow, and scrolling back to within 70px of the end starts it again. The view opens
+*   at the end, and under reduced motion every scroll is instant. An application calls the hook
+*   and passes the result to `Conversation.Root` as `conversation`, so a control outside the
+*   transcript, such as the composer's send, can scroll it. A root without `conversation` runs its
+*   own.
+*/
+/**
+* Media query a reader matches by asking the system for reduced motion.
+*/
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+/**
+* Engine options that open at the end at once and follow new content with a spring.
+*/
+const FOLLOWING = { initial: "instant" };
+/**
+* Engine options that open at the end and follow new content, both at once.
+*/
+const STILL = {
+	initial: "instant",
+	resize: "instant"
+};
+/**
+* Runs the scroll engine of one conversation.
+*
+* @returns Whether the view is at the end, the two scrolls, and the refs the root passes on.
+*/
+function useConversation() {
+	const $ = c(16);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [REDUCED_MOTION];
+		$[0] = t0;
+	} else t0 = $[0];
+	const t1 = useMediaQuery(t0);
+	let t2;
+	if ($[1] !== t1) {
+		t2 = t1.includes(true);
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	const reduced = t2;
+	const { contentRef, isAtBottom, scrollRef, scrollToBottom, stopScroll } = useStickToBottom(reduced ? STILL : FOLLOWING);
+	let t3;
+	if ($[3] !== reduced || $[4] !== scrollToBottom) {
+		t3 = function scrollToEnd() {
+			scrollToBottom(reduced ? "instant" : "smooth");
+		};
+		$[3] = reduced;
+		$[4] = scrollToBottom;
+		$[5] = t3;
+	} else t3 = $[5];
+	const scrollToEnd = t3;
+	let t4;
+	if ($[6] !== reduced || $[7] !== scrollRef || $[8] !== stopScroll) {
+		t4 = function scrollToMessage(id) {
+			const viewport = scrollRef.current;
+			const target = viewport?.querySelector(`[id="${CSS.escape(id)}"]`);
+			if (!viewport || !target) return;
+			stopScroll();
+			viewport.scrollTo({
+				behavior: reduced ? "instant" : "smooth",
+				top: viewport.scrollTop + target.getBoundingClientRect().top - viewport.getBoundingClientRect().top
+			});
+		};
+		$[6] = reduced;
+		$[7] = scrollRef;
+		$[8] = stopScroll;
+		$[9] = t4;
+	} else t4 = $[9];
+	const scrollToMessage = t4;
+	let t5;
+	if ($[10] !== contentRef || $[11] !== isAtBottom || $[12] !== scrollRef || $[13] !== scrollToEnd || $[14] !== scrollToMessage) {
+		t5 = {
+			atEnd: isAtBottom,
+			contentRef,
+			scrollRef,
+			scrollToEnd,
+			scrollToMessage
+		};
+		$[10] = contentRef;
+		$[11] = isAtBottom;
+		$[12] = scrollRef;
+		$[13] = scrollToEnd;
+		$[14] = scrollToMessage;
+		$[15] = t5;
+	} else t5 = $[15];
+	return t5;
+}
+//#endregion
+//#region src/conversation/root.tsx
+/**
+* Renders the scroll area's root with the conversation's root class.
+*/
+const Framed = withProvider$2(ScrollArea.Root, "root");
+/**
+* Renders the root and provides the conversation's state to its parts.
+*
+* @param props - The engine, the log's name and the props of the scroll area's root.
+* @returns The scroll area's root inside the state's provider.
+*/
+function Root$2(t0) {
+	const $ = c(19);
+	let children;
+	let conversation;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({children, conversation, label: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = conversation;
+		$[3] = props;
+		$[4] = t1;
+	} else {
+		children = $[1];
+		conversation = $[2];
+		props = $[3];
+		t1 = $[4];
+	}
+	const label = t1 === void 0 ? "Messages" : t1;
+	const own = useConversation();
+	const { atEnd, contentRef, scrollRef, scrollToEnd, scrollToMessage } = conversation ?? own;
+	let t2;
+	if ($[5] !== atEnd || $[6] !== contentRef || $[7] !== label || $[8] !== scrollRef || $[9] !== scrollToEnd || $[10] !== scrollToMessage) {
+		t2 = {
+			atEnd,
+			contentRef,
+			label,
+			scrollRef,
+			scrollToEnd,
+			scrollToMessage
+		};
+		$[5] = atEnd;
+		$[6] = contentRef;
+		$[7] = label;
+		$[8] = scrollRef;
+		$[9] = scrollToEnd;
+		$[10] = scrollToMessage;
+		$[11] = t2;
+	} else t2 = $[11];
+	let t3;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {});
+		$[12] = t3;
+	} else t3 = $[12];
+	let t4;
+	if ($[13] !== children || $[14] !== props) {
+		t4 = /* @__PURE__ */ jsxs(Framed, {
+			...props,
+			children: [children, t3]
+		});
+		$[13] = children;
+		$[14] = props;
+		$[15] = t4;
+	} else t4 = $[15];
+	let t5;
+	if ($[16] !== t2 || $[17] !== t4) {
+		t5 = /* @__PURE__ */ jsx(StateProvider, {
+			value: t2,
+			children: t4
+		});
+		$[16] = t2;
+		$[17] = t4;
+		$[18] = t5;
+	} else t5 = $[18];
+	return t5;
+}
+//#endregion
+//#region src/conversation/typing.tsx
+/**
+* Renders the row's `div`.
+*/
+const Row = withContext$2("div", "typing");
+/**
+* Renders the `span` around the three dots.
+*/
+const Dots = withContext$2("span", "dots");
+/**
+* Renders the dots before the caller's words.
+*
+* @param props - The props of a `div`, the words among its children.
+* @returns The `div` element.
+*/
+function Typing(t0) {
+	const $ = c(7);
+	let children;
+	let props;
+	if ($[0] !== t0) {
+		({children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+	} else {
+		children = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsxs(Dots, {
+			"aria-hidden": "true",
+			children: [
+				/* @__PURE__ */ jsx("span", {}),
+				/* @__PURE__ */ jsx("span", {}),
+				/* @__PURE__ */ jsx("span", {})
+			]
+		});
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== children || $[5] !== props) {
+		t2 = /* @__PURE__ */ jsxs(Row, {
+			...props,
+			children: [t1, children]
+		});
+		$[4] = children;
+		$[5] = props;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
+}
+//#endregion
+//#region src/conversation/index.ts
+var conversation_exports = /* @__PURE__ */ __exportAll({
+	Content: () => Content$1,
+	JumpTrigger: () => JumpTrigger,
+	Root: () => Root$2,
+	Typing: () => Typing,
+	useConversation: () => useConversation
+});
+//#endregion
+//#region src/message/context.ts
+/**
+* Binds the message recipe to the elements that render it.
+*
+* @remarks
+*   The binding is kept out of `recipe.ts` because an application's style compiler imports the
+*   recipe at build time, and a binding there would pull the React runtime into that import.
+*/
+/**
+* Supplies the element factories the message parts are built from.
+*/
+const { withContext: withContext$1, withProvider: withProvider$1 } = createSlotRecipeContext(recipe$3);
+//#endregion
+//#region src/message/actions.ts
+/**
+* Renders the actions' `div`.
+*/
+const Actions = withContext$1("div", "actions");
+//#endregion
+//#region src/message/avatar.ts
+/**
+* Renders the avatar's `div`.
+*/
+const Avatar = withContext$1("div", "avatar");
+//#endregion
+//#region src/message/bubble.tsx
+/**
+* Renders the bubble's `div`.
+*/
+const Surface = withContext$1("div", "bubble");
+/**
+* Renders the bubble, with `data-failed` while `failed`.
+*
+* @param props - Whether the message failed, and the props of a `div`.
+* @returns The `div` element.
+*/
+function Bubble(t0) {
+	const $ = c(6);
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({failed: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
+	} else {
+		props = $[1];
+		t1 = $[2];
+	}
+	const t2 = (t1 === void 0 ? false : t1) ? "" : void 0;
+	let t3;
+	if ($[3] !== props || $[4] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Surface, {
+			"data-failed": t2,
+			...props
+		});
+		$[3] = props;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
+}
+//#endregion
+//#region src/message/content.ts
+/**
+* Renders the column's `div`.
+*/
+const Content = withContext$1("div", "content");
+//#endregion
+//#region src/message/footer.ts
+/**
+* Renders the footer's `div`.
+*/
+const Footer = withContext$1("div", "footer");
+//#endregion
+//#region src/message/header.ts
+/**
+* Renders the header's `div`.
+*/
+const Header = withContext$1("div", "header");
+//#endregion
+//#region src/message/root.ts
+/**
+* Renders the root `article` with the message's variants.
+*/
+const Root$1 = withProvider$1("article", "root");
+//#endregion
+//#region src/message/status.tsx
+/**
+* Renders the status `span`.
+*/
+const Marked = withContext$1("span", "status");
+/**
+* Renders the status with its state written as `data-status`.
+*
+* @param props - How far the message has got, and the props of a `span`.
+* @returns The `span` element.
+*/
+function Status(t0) {
+	const $ = c(6);
+	let props;
+	let status;
+	if ($[0] !== t0) {
+		({status, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = status;
+	} else {
+		props = $[1];
+		status = $[2];
+	}
+	let t1;
+	if ($[3] !== props || $[4] !== status) {
+		t1 = /* @__PURE__ */ jsx(Marked, {
+			"data-status": status,
+			...props
+		});
+		$[3] = props;
+		$[4] = status;
+		$[5] = t1;
+	} else t1 = $[5];
+	return t1;
+}
+//#endregion
+//#region src/message/index.ts
+var message_exports = /* @__PURE__ */ __exportAll({
+	Actions: () => Actions,
+	Avatar: () => Avatar,
+	Bubble: () => Bubble,
+	Content: () => Content,
+	Footer: () => Footer,
+	Header: () => Header,
+	Root: () => Root$1,
+	Status: () => Status
+});
+//#endregion
+//#region src/reactions/context.ts
+/**
+* Binds the reactions recipe to the elements that render it.
+*
+* @remarks
+*   The binding is kept out of `recipe.ts` because an application's style compiler imports the
+*   recipe at build time, and a binding there would pull the React runtime into that import.
+*/
+/**
+* Supplies the element factories the reactions parts are built from.
+*/
+const { withContext, withProvider } = createSlotRecipeContext(recipe$4);
+//#endregion
+//#region src/reactions/state.ts
+/**
+* Provides the picker's choice handler to the choices inside it.
+*/
+/**
+* Provides the picker's state to the choices, and reads it where a choice renders.
+*/
+const [PickerProvider, usePickerState] = createRequiredContext("Reactions.Picker");
+//#endregion
+//#region src/reactions/choice.tsx
+/**
+* Renders the `span` around the glyph.
+*/
+const Glyph$1 = withContext("span", "glyph");
+/**
+* Renders the choice's button.
+*
+* @param props - The name, the value, and the props of the actions `Button`, the glyph among its
+*   children.
+* @returns The `button` element.
+*/
+function Choice(t0) {
+	const $ = c(17);
+	let children;
+	let label;
+	let onClick;
+	let props;
+	let value;
+	if ($[0] !== t0) {
+		({children, label, onClick, value, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = label;
+		$[3] = onClick;
+		$[4] = props;
+		$[5] = value;
+	} else {
+		children = $[1];
+		label = $[2];
+		onClick = $[3];
+		props = $[4];
+		value = $[5];
+	}
+	const { choose } = usePickerState();
+	let t1;
+	if ($[6] !== choose || $[7] !== onClick || $[8] !== value) {
+		t1 = (event) => {
+			onClick?.(event);
+			choose(value);
+		};
+		$[6] = choose;
+		$[7] = onClick;
+		$[8] = value;
+		$[9] = t1;
+	} else t1 = $[9];
+	let t2;
+	if ($[10] !== children) {
+		t2 = /* @__PURE__ */ jsx(Glyph$1, {
+			"aria-hidden": "true",
+			children
+		});
+		$[10] = children;
+		$[11] = t2;
+	} else t2 = $[11];
+	let t3;
+	if ($[12] !== label || $[13] !== props || $[14] !== t1 || $[15] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Button, {
+			"aria-label": label,
+			shape: "square",
+			size: "sm",
+			variant: "ghost",
+			...props,
+			onClick: t1,
+			children: t2
+		});
+		$[12] = label;
+		$[13] = props;
+		$[14] = t1;
+		$[15] = t2;
+		$[16] = t3;
+	} else t3 = $[16];
+	return t3;
+}
+//#endregion
+//#region src/reactions/item.tsx
+/**
+* Renders the `span` around the glyph.
+*/
+const Glyph = withContext("span", "glyph");
+/**
+* Renders the `span` around the count.
+*/
+const Count = withContext("span", "count");
+/**
+* Renders the reaction's button.
+*
+* @param props - The count, the name, whether the reader reacted, and the props of the actions
+*   `Button`, the glyph among its children.
+* @returns The `button` element.
+*/
+function Item(t0) {
+	const $ = c(17);
+	let children;
+	let count;
+	let label;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({children, count, label, pressed: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = count;
+		$[3] = label;
+		$[4] = props;
+		$[5] = t1;
+	} else {
+		children = $[1];
+		count = $[2];
+		label = $[3];
+		props = $[4];
+		t1 = $[5];
+	}
+	const pressed = t1 === void 0 ? false : t1;
+	const t2 = pressed ? "primary" : "neutral";
+	let t3;
+	if ($[6] !== children) {
+		t3 = /* @__PURE__ */ jsx(Glyph, {
+			"aria-hidden": "true",
+			children
+		});
+		$[6] = children;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== count) {
+		t4 = count === void 0 ? null : /* @__PURE__ */ jsx(Count, {
+			"aria-hidden": "true",
+			children: count
+		});
+		$[8] = count;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== label || $[11] !== pressed || $[12] !== props || $[13] !== t2 || $[14] !== t3 || $[15] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Button, {
+			"aria-label": label,
+			"aria-pressed": pressed,
+			palette: t2,
+			size: "xs",
+			variant: "outline",
+			...props,
+			children: [t3, t4]
+		});
+		$[10] = label;
+		$[11] = pressed;
+		$[12] = props;
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = t4;
+		$[16] = t5;
+	} else t5 = $[16];
+	return t5;
+}
+//#endregion
+//#region src/reactions/picker.tsx
+/**
+* Renders the control that adds a reaction: a button that opens the disclosure `Popover` with the
+* caller's choices.
+*
+* @remarks
+*   The trigger is the actions `IconButton`, extra small in the ghost look, named by `label`, with
+*   the caller's glyph. The panel is portalled, named by `choicesLabel`, and lays the choices out
+*   in a row that wraps. A choice reports its value through `onSelect` and closes the panel, and
+*   the popover returns focus to the trigger. A reaction is one act, so a panel left open would
+*   invite a second press that removes it again.
+*/
+/**
+* Renders the `div` that lays the choices out.
+*/
+const Choices = withContext("div", "choices");
+/**
+* Renders the trigger and the panel, and closes the panel on a choice.
+*
+* @param props - The trigger's glyph and name, the panel's name, the handler of a choice and the
+*   popover root's props.
+* @returns The popover's root.
+*/
+function Picker(t0) {
+	const $ = c(29);
+	let children;
+	let icon;
+	let onSelect;
+	let props;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({children, choicesLabel: t1, icon, label: t2, onSelect, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = icon;
+		$[3] = onSelect;
+		$[4] = props;
+		$[5] = t1;
+		$[6] = t2;
+	} else {
+		children = $[1];
+		icon = $[2];
+		onSelect = $[3];
+		props = $[4];
+		t1 = $[5];
+		t2 = $[6];
+	}
+	const choicesLabel = t1 === void 0 ? "Choose a reaction" : t1;
+	const label = t2 === void 0 ? "Add a reaction" : t2;
+	const [open, setOpen] = useState(false);
+	let t3;
+	if ($[7] !== onSelect) {
+		t3 = function choose(value) {
+			onSelect?.(value);
+			setOpen(false);
+		};
+		$[7] = onSelect;
+		$[8] = t3;
+	} else t3 = $[8];
+	const choose = t3;
+	let t4;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = (details) => {
+			setOpen(details.open);
+		};
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = {
+			size: "xs",
+			variant: "ghost"
+		};
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== icon || $[12] !== label) {
+		t6 = /* @__PURE__ */ jsx(ButtonPropsProvider, {
+			value: t5,
+			children: /* @__PURE__ */ jsx(Popover.Trigger, {
+				"aria-label": label,
+				as: IconButton,
+				children: icon
+			})
+		});
+		$[11] = icon;
+		$[12] = label;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== choose) {
+		t7 = { choose };
+		$[14] = choose;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== children) {
+		t8 = /* @__PURE__ */ jsx(Choices, { children });
+		$[16] = children;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t7 || $[19] !== t8) {
+		t9 = /* @__PURE__ */ jsx(PickerProvider, {
+			value: t7,
+			children: t8
+		});
+		$[18] = t7;
+		$[19] = t8;
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== choicesLabel || $[22] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsx(Popover.Content, {
+			"aria-label": choicesLabel,
+			children: t9
+		}) }) });
+		$[21] = choicesLabel;
+		$[22] = t9;
+		$[23] = t10;
+	} else t10 = $[23];
+	let t11;
+	if ($[24] !== open || $[25] !== props || $[26] !== t10 || $[27] !== t6) {
+		t11 = /* @__PURE__ */ jsxs(Popover.Root, {
+			...props,
+			onOpenChange: t4,
+			open,
+			children: [t6, t10]
+		});
+		$[24] = open;
+		$[25] = props;
+		$[26] = t10;
+		$[27] = t6;
+		$[28] = t11;
+	} else t11 = $[28];
+	return t11;
+}
+//#endregion
+//#region src/reactions/root.tsx
+/**
+* Renders the `fieldset` with the reactions' root class.
+*/
+const Grouped = withProvider("fieldset", "root");
+/**
+* Renders the row, named by `label`.
+*
+* @param props - The row's name and the props of a `fieldset`.
+* @returns The `fieldset` element.
+*/
+function Root(t0) {
+	const $ = c(6);
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({label: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
+	} else {
+		props = $[1];
+		t1 = $[2];
+	}
+	const label = t1 === void 0 ? "Reactions" : t1;
+	let t2;
+	if ($[3] !== label || $[4] !== props) {
+		t2 = /* @__PURE__ */ jsx(Grouped, {
+			"aria-label": label,
+			...props
+		});
+		$[3] = label;
+		$[4] = props;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+}
+//#endregion
+//#region src/reactions/index.ts
+var reactions_exports = /* @__PURE__ */ __exportAll({
+	Choice: () => Choice,
+	Item: () => Item,
+	Picker: () => Picker,
+	Root: () => Root
+});
+//#endregion
+//#region src/turns/group-turns.ts
+/**
+* Longest gap between two messages of one turn when the caller states none: 5 minutes.
+*/
+const WINDOW = 3e5;
+/**
+* Returns the milliseconds since the epoch of an instant, or undefined for none or one `Date`
+* cannot read.
+*/
+function instantOf(sentAt) {
+	const time = sentAt === void 0 ? NaN : new Date(sentAt).getTime();
+	return Number.isNaN(time) ? void 0 : time;
+}
+/**
+* Returns the wall-clock time an instant reads in a zone, as milliseconds of a UTC clock.
+*/
+function wallOf(time, timeZone) {
+	const parts = new Intl.DateTimeFormat("en-US", {
+		day: "numeric",
+		hour: "numeric",
+		hourCycle: "h23",
+		minute: "numeric",
+		month: "numeric",
+		second: "numeric",
+		timeZone,
+		year: "numeric"
+	}).formatToParts(time).map((part) => [part.type, Number(part.value)]);
+	const fields = Object.fromEntries(parts);
+	return Date.UTC(fields.year, fields.month - 1, fields.day, fields.hour, fields.minute, fields.second);
+}
+/**
+* Returns the first instant of the instant's day in a zone: midnight, or the first instant after
+* it where a daylight saving change skips midnight.
+*
+* @remarks
+*   The first estimate applies the zone's offset at midnight read as UTC, and the second the offset
+*   at the first estimate. Where a change skips midnight, as in Havana in March, the second falls
+*   on the evening before, and the first is the day's start.
+*/
+function zonedMidnightOf(time, timeZone) {
+	const wall = wallOf(time, timeZone);
+	const day = wall - wall % 864e5;
+	const early = day - (wallOf(day, timeZone) - day);
+	const late = day - (wallOf(early, timeZone) - early);
+	return wallOf(late, timeZone) >= day ? late : early;
+}
+/**
+* Returns midnight at the start of the instant's day, in the zone stated or the runtime's.
+*/
+function midnightOf(time, timeZone) {
+	if (timeZone !== void 0) return zonedMidnightOf(time, timeZone);
+	const date = new Date(time);
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+}
+/**
+* Returns the last day while the message belongs to it, and otherwise opens a day for the message.
+*
+* @param days - The days so far, which a new day joins.
+* @param day - Midnight at the start of the message's day.
+* @param same - Whether the message's day is the last day's.
+* @param id - Identifier of the message, which keys a new day.
+* @returns The day the message joins.
+*/
+function dayFor(days, day, same, id) {
+	const last = days.at(-1);
+	if (last !== void 0 && same) return last;
+	const opened = {
+		day: day === void 0 ? void 0 : new Date(day),
+		key: id,
+		turns: []
+	};
+	days.push(opened);
+	return opened;
+}
+/**
+* Adds a message to the last turn of its day while the author and the gap allow, and otherwise
+* opens a turn with it.
+*
+* @param turns - The turns of the message's day.
+* @param message - The next message of the transcript.
+* @param near - Whether the gap since the message before is inside the window.
+* @param self - Identifier of the reader.
+*/
+function join(turns, message, near, self) {
+	const turn = turns.at(-1);
+	if (turn?.author === message.author && near) {
+		turn.messages.push(message);
+		turn.last = message;
+		return;
+	}
+	turns.push({
+		author: message.author,
+		first: message,
+		last: message,
+		messages: [message],
+		own: message.author === self
+	});
+}
+/**
+* Groups messages into days and turns.
+*
+* @typeParam Message - The caller's message type, which each turn returns as it was given.
+* @param messages - The transcript, oldest first.
+* @param options - The reader's identifier, the zone a day starts in and the longest gap inside
+*   one turn.
+* @returns The days in order, each with its turns in order.
+*/
+function groupTurns(messages, options = {}) {
+	const { self, timeZone, window = WINDOW } = options;
+	const days = [];
+	let midnight;
+	let previous;
+	for (const message of messages) {
+		const time = instantOf(message.sentAt);
+		const day = time === void 0 ? midnight : midnightOf(time, timeZone);
+		const near = previous === void 0 || time === void 0 || time - previous <= window;
+		join(dayFor(days, day, day === midnight, message.id).turns, message, near, self);
+		midnight = day;
+		previous = time ?? previous;
+	}
+	return days;
+}
+//#endregion
+export { attachment_exports as A, Toolbar as C, Context as D, Input as E, Description as F, Content$2 as I, Actions$1 as L, Root$4 as M, Media as N, Attachments as O, Group as P, composer_exports as S, Root$3 as T, Typing as _, Item as a, JumpTrigger as b, Status as c, Footer as d, Content as f, conversation_exports as g, Actions as h, Picker as i, Title as j, AttachTrigger as k, Root$1 as l, Avatar as m, reactions_exports as n, Choice as o, Bubble as p, Root as r, message_exports as s, groupTurns as t, Header as u, Root$2 as v, Submit as w, Content$1 as x, useConversation as y };