@stealthscale/component-messaging 0.2.1 → 0.2.2

package/dist/pages/composer/composer.js

@@ -0,0 +1,959 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { a as recipe } from "../../recipes-D1oVFnRU.js";
+import { C as Toolbar, D as Context, E as Input, I as Content$1, L as Actions, M as Root$2, N as Media, O as Attachments, P as Group, T as Root$1, f as Content, j as Title, k as AttachTrigger, l as Root, p as Bubble, w as Submit } from "../../shared-B0H4dgkB.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useState } from "react";
+import { IconButton } from "@stealthscale/component-actions";
+import { Room, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { ArrowUpIcon, FileIcon, PaperclipIcon, PencilIcon, ReplyIcon, SquareIcon, XIcon } from "lucide-react";
+import { Mark, Span, Text } from "@stealthscale/component-typography";
+import { Stack } from "@stealthscale/component-layout";
+//#region src/composer/examples/edit.example.tsx
+var edit_example_exports = /* @__PURE__ */ __exportAll({
+	EditLast: () => EditLast,
+	source: () => source$4
+});
+function strip$1(editing, cancel, cancelled) {
+	return /* @__PURE__ */ jsxs(Context, { children: [
+		/* @__PURE__ */ jsx(PencilIcon, { "aria-hidden": true }),
+		/* @__PURE__ */ jsx(Span, { children: editing }),
+		/* @__PURE__ */ jsx(IconButton, {
+			"aria-label": cancel,
+			onClick: cancelled,
+			size: "xs",
+			variant: "ghost",
+			children: /* @__PURE__ */ jsx(XIcon, { size: "1em" })
+		})
+	] });
+}
+function EditLast() {
+	const $ = c(41);
+	const { t } = useWords("composer");
+	const input = useId();
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("first");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = [t0];
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	const [sent, setSent] = useState(t1);
+	const [text, setText] = useState("");
+	const [editing, setEditing] = useState(false);
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = () => {
+			setEditing(false);
+			setText("");
+		};
+		$[4] = t2;
+	} else t2 = $[4];
+	const left = t2;
+	let t3;
+	if ($[5] !== sent || $[6] !== t) {
+		let t4;
+		if ($[8] !== t) {
+			t4 = (one, index) => /* @__PURE__ */ jsx(Root, {
+				align: "end",
+				"aria-label": t("you"),
+				look: "solid",
+				palette: "primary",
+				children: /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(Bubble, { children: one }) })
+			}, `${String(index)}-${one}`);
+			$[8] = t;
+			$[9] = t4;
+		} else t4 = $[9];
+		t3 = sent.map(t4);
+		$[5] = sent;
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[10] !== sent) {
+		t4 = () => {
+			setText(sent.at(-1) ?? "");
+			setEditing(true);
+		};
+		$[10] = sent;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== editing) {
+		t5 = (value) => {
+			setSent((was) => editing ? [...was.slice(0, -1), value] : [...was, value]);
+			left();
+		};
+		$[12] = editing;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== editing || $[15] !== input || $[16] !== t) {
+		t6 = editing ? strip$1(t("editing"), t("cancelEdit"), () => {
+			left();
+			document.querySelector(`[id="${input}"]`)?.focus();
+		}) : null;
+		$[14] = editing;
+		$[15] = input;
+		$[16] = t;
+		$[17] = t6;
+	} else t6 = $[17];
+	let t7;
+	if ($[18] !== t) {
+		t7 = t("label");
+		$[18] = t;
+		$[19] = t7;
+	} else t7 = $[19];
+	let t8;
+	if ($[20] !== t) {
+		t8 = t("editPlaceholder");
+		$[20] = t;
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[22] !== input || $[23] !== t7 || $[24] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Input, {
+			id: input,
+			label: t7,
+			placeholder: t8
+		});
+		$[22] = input;
+		$[23] = t7;
+		$[24] = t8;
+		$[25] = t9;
+	} else t9 = $[25];
+	let t10;
+	if ($[26] !== t) {
+		t10 = t("send");
+		$[26] = t;
+		$[27] = t10;
+	} else t10 = $[27];
+	let t11;
+	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(ArrowUpIcon, { size: "1em" });
+		$[28] = t11;
+	} else t11 = $[28];
+	let t12;
+	if ($[29] !== t10) {
+		t12 = /* @__PURE__ */ jsx(Toolbar, { children: /* @__PURE__ */ jsx(Submit, {
+			label: t10,
+			children: t11
+		}) });
+		$[29] = t10;
+		$[30] = t12;
+	} else t12 = $[30];
+	let t13;
+	if ($[31] !== t12 || $[32] !== t4 || $[33] !== t5 || $[34] !== t6 || $[35] !== t9 || $[36] !== text) {
+		t13 = /* @__PURE__ */ jsxs(Root$1, {
+			onCancelContext: left,
+			onEditLast: t4,
+			onSubmit: t5,
+			onValueChange: setText,
+			value: text,
+			children: [
+				t6,
+				t9,
+				t12
+			]
+		});
+		$[31] = t12;
+		$[32] = t4;
+		$[33] = t5;
+		$[34] = t6;
+		$[35] = t9;
+		$[36] = text;
+		$[37] = t13;
+	} else t13 = $[37];
+	let t14;
+	if ($[38] !== t13 || $[39] !== t3) {
+		t14 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "md",
+			children: [t3, t13]
+		});
+		$[38] = t13;
+		$[39] = t3;
+		$[40] = t14;
+	} else t14 = $[40];
+	return t14;
+}
+const source$4 = "import { type ReactElement, useId, useState } from \"react\";\n\nimport { ArrowUpIcon, PencilIcon, XIcon } from \"lucide-react\";\n\nimport { IconButton } from \"@stealthscale/component-actions\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Span } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Composer, Message } from \"@stealthscale/component-messaging\";\n\nfunction strip(editing: string, cancel: string, cancelled: () => void): ReactElement {\n  return (\n    <Composer.Context>\n      <PencilIcon aria-hidden />\n      <Span>{editing}</Span>\n      <IconButton aria-label={cancel} onClick={cancelled} size=\"xs\" variant=\"ghost\">\n        <XIcon size=\"1em\" />\n      </IconButton>\n    </Composer.Context>\n  );\n}\n\nexport function EditLast(): ReactElement {\n  const { t } = useWords(\"composer\");\n  const input = useId();\n  const [sent, setSent] = useState<readonly string[]>([t(\"first\")]);\n  const [text, setText] = useState(\"\");\n  const [editing, setEditing] = useState(false);\n  const left = (): void => {\n    setEditing(false);\n    setText(\"\");\n  };\n\n  return (\n    <Stack gap=\"md\">\n      {sent.map((one, index) => (\n        <Message.Root\n          align=\"end\"\n          aria-label={t(\"you\")}\n          key={`${String(index)}-${one}`}\n          look=\"solid\"\n          palette=\"primary\"\n        >\n          <Message.Content>\n            <Message.Bubble>{one}</Message.Bubble>\n          </Message.Content>\n        </Message.Root>\n      ))}\n      <Composer.Root\n        onCancelContext={left}\n        onEditLast={() => {\n          setText(sent.at(-1) ?? \"\");\n          setEditing(true);\n        }}\n        onSubmit={(value) => {\n          setSent((was) => (editing ? [...was.slice(0, -1), value] : [...was, value]));\n          left();\n        }}\n        onValueChange={setText}\n        value={text}\n      >\n        {editing\n          ? strip(t(\"editing\"), t(\"cancelEdit\"), () => {\n              left();\n              document.querySelector<HTMLElement>(`[id=\"${input}\"]`)?.focus();\n            })\n          : null}\n        <Composer.Input id={input} label={t(\"label\")} placeholder={t(\"editPlaceholder\")} />\n        <Composer.Toolbar>\n          <Composer.Submit label={t(\"send\")}>\n            <ArrowUpIcon size=\"1em\" />\n          </Composer.Submit>\n        </Composer.Toolbar>\n      </Composer.Root>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/composer/examples/mentions.example.tsx
+var mentions_example_exports = /* @__PURE__ */ __exportAll({
+	Mentions: () => Mentions,
+	source: () => source$3
+});
+const PEOPLE = [
+	{
+		id: "ada",
+		label: "Ada Okafor",
+		team: "finance"
+	},
+	{
+		id: "adil",
+		label: "Adil Rahman",
+		team: "engineering"
+	},
+	{
+		id: "ben",
+		label: "Ben Carter",
+		team: "sales"
+	},
+	{
+		id: "chioma",
+		label: "Chioma Eze",
+		team: "design"
+	}
+];
+function marked(text, names) {
+	const pattern = new RegExp(`(${names.map((name) => `@${name}`).join("|")})`, "u");
+	return names.length === 0 ? [text] : text.split(pattern).map((part, index) => names.includes(part.slice(1)) ? /* @__PURE__ */ jsx(Mark, {
+		as: "span",
+		palette: "primary",
+		children: part
+	}, `${String(index)}-${part}`) : part);
+}
+function Mentions() {
+	const $ = c(58);
+	const { t } = useWords("composer");
+	const [query, setQuery] = useState();
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [];
+		$[0] = t0;
+	} else t0 = $[0];
+	const [names, setNames] = useState(t0);
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = [];
+		$[1] = t1;
+	} else t1 = $[1];
+	const [sent, setSent] = useState(t1);
+	let T0;
+	let T1;
+	let T2;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	let t9;
+	if ($[2] !== names || $[3] !== query || $[4] !== sent || $[5] !== t) {
+		const term = query?.term.toLowerCase() ?? "";
+		let t10;
+		if ($[17] !== t) {
+			t10 = (person) => ({
+				description: t(person.team),
+				id: person.id,
+				label: person.label
+			});
+			$[17] = t;
+			$[18] = t10;
+		} else t10 = $[18];
+		const people = PEOPLE.map(t10);
+		T2 = Stack;
+		t8 = "md";
+		if ($[19] !== names || $[20] !== sent || $[21] !== t) {
+			let t11;
+			if ($[23] !== names || $[24] !== t) {
+				t11 = (text, index) => /* @__PURE__ */ jsx(Root, {
+					align: "end",
+					"aria-label": t("you"),
+					children: /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(Bubble, { children: marked(text, names) }) })
+				}, `${String(index)}-${text}`);
+				$[23] = names;
+				$[24] = t;
+				$[25] = t11;
+			} else t11 = $[25];
+			t9 = sent.map(t11);
+			$[19] = names;
+			$[20] = sent;
+			$[21] = t;
+			$[22] = t9;
+		} else t9 = $[22];
+		T1 = Root$1;
+		if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+			t7 = (text_0) => {
+				setSent((was) => [...was, text_0]);
+			};
+			$[26] = t7;
+		} else t7 = $[26];
+		T0 = Input;
+		if ($[27] !== t) {
+			t2 = t("label");
+			$[27] = t;
+			$[28] = t2;
+		} else t2 = $[28];
+		if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+			t3 = (person_0) => {
+				setNames((was_0) => [...was_0, person_0.label]);
+			};
+			$[29] = t3;
+		} else t3 = $[29];
+		t4 = setQuery;
+		if ($[30] !== t) {
+			t5 = t("mentionPlaceholder");
+			$[30] = t;
+			$[31] = t5;
+		} else t5 = $[31];
+		t6 = query === void 0 ? [] : people.filter((person_1) => person_1.label.toLowerCase().includes(term));
+		$[2] = names;
+		$[3] = query;
+		$[4] = sent;
+		$[5] = t;
+		$[6] = T0;
+		$[7] = T1;
+		$[8] = T2;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+		$[13] = t6;
+		$[14] = t7;
+		$[15] = t8;
+		$[16] = t9;
+	} else {
+		T0 = $[6];
+		T1 = $[7];
+		T2 = $[8];
+		t2 = $[9];
+		t3 = $[10];
+		t4 = $[11];
+		t5 = $[12];
+		t6 = $[13];
+		t7 = $[14];
+		t8 = $[15];
+		t9 = $[16];
+	}
+	let t10;
+	if ($[32] !== t) {
+		t10 = t("people");
+		$[32] = t;
+		$[33] = t10;
+	} else t10 = $[33];
+	let t11;
+	if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = ["@"];
+		$[34] = t11;
+	} else t11 = $[34];
+	let t12;
+	if ($[35] !== T0 || $[36] !== t10 || $[37] !== t2 || $[38] !== t3 || $[39] !== t4 || $[40] !== t5 || $[41] !== t6) {
+		t12 = /* @__PURE__ */ jsx(T0, {
+			label: t2,
+			onMention: t3,
+			onQueryChange: t4,
+			placeholder: t5,
+			suggestions: t6,
+			suggestionsLabel: t10,
+			triggers: t11
+		});
+		$[35] = T0;
+		$[36] = t10;
+		$[37] = t2;
+		$[38] = t3;
+		$[39] = t4;
+		$[40] = t5;
+		$[41] = t6;
+		$[42] = t12;
+	} else t12 = $[42];
+	let t13;
+	if ($[43] !== t) {
+		t13 = t("send");
+		$[43] = t;
+		$[44] = t13;
+	} else t13 = $[44];
+	let t14;
+	if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(ArrowUpIcon, { size: "1em" });
+		$[45] = t14;
+	} else t14 = $[45];
+	let t15;
+	if ($[46] !== t13) {
+		t15 = /* @__PURE__ */ jsx(Toolbar, { children: /* @__PURE__ */ jsx(Submit, {
+			label: t13,
+			children: t14
+		}) });
+		$[46] = t13;
+		$[47] = t15;
+	} else t15 = $[47];
+	let t16;
+	if ($[48] !== T1 || $[49] !== t12 || $[50] !== t15 || $[51] !== t7) {
+		t16 = /* @__PURE__ */ jsxs(T1, {
+			onSubmit: t7,
+			children: [t12, t15]
+		});
+		$[48] = T1;
+		$[49] = t12;
+		$[50] = t15;
+		$[51] = t7;
+		$[52] = t16;
+	} else t16 = $[52];
+	let t17;
+	if ($[53] !== T2 || $[54] !== t16 || $[55] !== t8 || $[56] !== t9) {
+		t17 = /* @__PURE__ */ jsxs(T2, {
+			gap: t8,
+			children: [t9, t16]
+		});
+		$[53] = T2;
+		$[54] = t16;
+		$[55] = t8;
+		$[56] = t9;
+		$[57] = t17;
+	} else t17 = $[57];
+	return t17;
+}
+const source$3 = "import { type ReactElement, type ReactNode, useState } from \"react\";\n\nimport { ArrowUpIcon } from \"lucide-react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Mark } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Composer, Message } from \"@stealthscale/component-messaging\";\n\nconst PEOPLE = [\n  { id: \"ada\", label: \"Ada Okafor\", team: \"finance\" },\n  { id: \"adil\", label: \"Adil Rahman\", team: \"engineering\" },\n  { id: \"ben\", label: \"Ben Carter\", team: \"sales\" },\n  { id: \"chioma\", label: \"Chioma Eze\", team: \"design\" },\n] as const;\n\nfunction marked(text: string, names: readonly string[]): ReactNode[] {\n  const pattern = new RegExp(`(${names.map((name) => `@${name}`).join(\"|\")})`, \"u\");\n\n  return names.length === 0\n    ? [text]\n    : text.split(pattern).map((part, index) =>\n        names.includes(part.slice(1)) ? (\n          <Mark as=\"span\" key={`${String(index)}-${part}`} palette=\"primary\">\n            {part}\n          </Mark>\n        ) : (\n          part\n        ),\n      );\n}\n\nexport function Mentions(): ReactElement {\n  const { t } = useWords(\"composer\");\n  const [query, setQuery] = useState<Composer.Query | undefined>();\n  const [names, setNames] = useState<readonly string[]>([]);\n  const [sent, setSent] = useState<readonly string[]>([]);\n  const term = query?.term.toLowerCase() ?? \"\";\n  const people: readonly Composer.Suggestion[] = PEOPLE.map((person) => ({\n    description: t(person.team),\n    id: person.id,\n    label: person.label,\n  }));\n\n  return (\n    <Stack gap=\"md\">\n      {sent.map((text, index) => (\n        <Message.Root align=\"end\" aria-label={t(\"you\")} key={`${String(index)}-${text}`}>\n          <Message.Content>\n            <Message.Bubble>{marked(text, names)}</Message.Bubble>\n          </Message.Content>\n        </Message.Root>\n      ))}\n      <Composer.Root\n        onSubmit={(text) => {\n          setSent((was) => [...was, text]);\n        }}\n      >\n        <Composer.Input\n          label={t(\"label\")}\n          onMention={(person) => {\n            setNames((was) => [...was, person.label]);\n          }}\n          onQueryChange={setQuery}\n          placeholder={t(\"mentionPlaceholder\")}\n          suggestions={\n            query === undefined\n              ? []\n              : people.filter((person) => person.label.toLowerCase().includes(term))\n          }\n          suggestionsLabel={t(\"people\")}\n          triggers={[\"@\"]}\n        />\n        <Composer.Toolbar>\n          <Composer.Submit label={t(\"send\")}>\n            <ArrowUpIcon size=\"1em\" />\n          </Composer.Submit>\n        </Composer.Toolbar>\n      </Composer.Root>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/composer/examples/reply.example.tsx
+var reply_example_exports = /* @__PURE__ */ __exportAll({
+	Reply: () => Reply,
+	source: () => source$2
+});
+function filed(files, label, named, removed) {
+	return /* @__PURE__ */ jsx(Attachments, { children: /* @__PURE__ */ jsx(Group, {
+		"aria-label": label,
+		orientation: "vertical",
+		size: "xs",
+		children: files.map((file) => /* @__PURE__ */ jsxs(Root$2, { children: [
+			/* @__PURE__ */ jsx(Media, { children: /* @__PURE__ */ jsx(FileIcon, { "aria-hidden": true }) }),
+			/* @__PURE__ */ jsx(Content$1, { children: /* @__PURE__ */ jsx(Title, { children: file.name }) }),
+			/* @__PURE__ */ jsx(Actions, { children: /* @__PURE__ */ jsx(IconButton, {
+				"aria-label": named(file.name),
+				onClick: () => {
+					removed(file);
+				},
+				size: "xs",
+				variant: "ghost",
+				children: /* @__PURE__ */ jsx(XIcon, { size: "1em" })
+			}) })
+		] }, `${file.name}-${String(file.lastModified)}`))
+	}) });
+}
+function strip(replying, cancel, cancelled) {
+	return /* @__PURE__ */ jsxs(Context, { children: [
+		/* @__PURE__ */ jsx(ReplyIcon, { "aria-hidden": true }),
+		/* @__PURE__ */ jsx(Span, { children: replying }),
+		/* @__PURE__ */ jsx(IconButton, {
+			"aria-label": cancel,
+			onClick: cancelled,
+			size: "xs",
+			variant: "ghost",
+			children: /* @__PURE__ */ jsx(XIcon, { size: "1em" })
+		})
+	] });
+}
+function Reply() {
+	const $ = c(49);
+	const { t } = useWords("composer");
+	const text = useId();
+	const [replying, setReplying] = useState(true);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [];
+		$[0] = t0;
+	} else t0 = $[0];
+	const [files, setFiles] = useState(t0);
+	const [sent, setSent] = useState("");
+	let t1;
+	if ($[1] !== text) {
+		t1 = () => {
+			document.querySelector(`[id="${text}"]`)?.focus();
+		};
+		$[1] = text;
+		$[2] = t1;
+	} else t1 = $[2];
+	const focused = t1;
+	const t2 = files.length > 0;
+	let t3;
+	let t4;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = (picked) => {
+			setFiles((was) => [...was, ...picked]);
+		};
+		t4 = () => {
+			setReplying(false);
+		};
+		$[3] = t3;
+		$[4] = t4;
+	} else {
+		t3 = $[3];
+		t4 = $[4];
+	}
+	let t5;
+	if ($[5] !== files.length || $[6] !== t) {
+		t5 = (typed) => {
+			setSent(t("sent", {
+				count: files.length,
+				text: typed
+			}));
+			setFiles([]);
+			setReplying(false);
+		};
+		$[5] = files.length;
+		$[6] = t;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== focused || $[9] !== replying || $[10] !== t) {
+		t6 = replying ? strip(t("replying"), t("cancelReply"), () => {
+			setReplying(false);
+			focused();
+		}) : null;
+		$[8] = focused;
+		$[9] = replying;
+		$[10] = t;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== files || $[13] !== focused || $[14] !== t) {
+		t7 = files.length === 0 ? null : filed(files, t("files"), (name) => t("remove", { name }), (file) => {
+			setFiles((was_0) => was_0.filter((one) => one !== file));
+			focused();
+		});
+		$[12] = files;
+		$[13] = focused;
+		$[14] = t;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== t) {
+		t8 = t("label");
+		$[16] = t;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t) {
+		t9 = t("replyPlaceholder");
+		$[18] = t;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== t8 || $[21] !== t9 || $[22] !== text) {
+		t10 = /* @__PURE__ */ jsx(Input, {
+			id: text,
+			label: t8,
+			placeholder: t9
+		});
+		$[20] = t8;
+		$[21] = t9;
+		$[22] = text;
+		$[23] = t10;
+	} else t10 = $[23];
+	let t11;
+	if ($[24] !== t) {
+		t11 = t("attach");
+		$[24] = t;
+		$[25] = t11;
+	} else t11 = $[25];
+	let t12;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(PaperclipIcon, { size: "1em" });
+		$[26] = t12;
+	} else t12 = $[26];
+	let t13;
+	if ($[27] !== t11) {
+		t13 = /* @__PURE__ */ jsx(AttachTrigger, {
+			label: t11,
+			children: t12
+		});
+		$[27] = t11;
+		$[28] = t13;
+	} else t13 = $[28];
+	let t14;
+	if ($[29] !== t) {
+		t14 = t("send");
+		$[29] = t;
+		$[30] = t14;
+	} else t14 = $[30];
+	let t15;
+	if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ jsx(ArrowUpIcon, { size: "1em" });
+		$[31] = t15;
+	} else t15 = $[31];
+	let t16;
+	if ($[32] !== t14) {
+		t16 = /* @__PURE__ */ jsx(Submit, {
+			label: t14,
+			children: t15
+		});
+		$[32] = t14;
+		$[33] = t16;
+	} else t16 = $[33];
+	let t17;
+	if ($[34] !== t13 || $[35] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(Toolbar, { children: [t13, t16] });
+		$[34] = t13;
+		$[35] = t16;
+		$[36] = t17;
+	} else t17 = $[36];
+	let t18;
+	if ($[37] !== t10 || $[38] !== t17 || $[39] !== t2 || $[40] !== t5 || $[41] !== t6 || $[42] !== t7) {
+		t18 = /* @__PURE__ */ jsxs(Root$1, {
+			attached: t2,
+			onAttach: t3,
+			onCancelContext: t4,
+			onSubmit: t5,
+			children: [
+				t6,
+				t7,
+				t10,
+				t17
+			]
+		});
+		$[37] = t10;
+		$[38] = t17;
+		$[39] = t2;
+		$[40] = t5;
+		$[41] = t6;
+		$[42] = t7;
+		$[43] = t18;
+	} else t18 = $[43];
+	let t19;
+	if ($[44] !== sent) {
+		t19 = /* @__PURE__ */ jsx(Text, {
+			as: "output",
+			size: "sm",
+			children: sent
+		});
+		$[44] = sent;
+		$[45] = t19;
+	} else t19 = $[45];
+	let t20;
+	if ($[46] !== t18 || $[47] !== t19) {
+		t20 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "sm",
+			children: [t18, t19]
+		});
+		$[46] = t18;
+		$[47] = t19;
+		$[48] = t20;
+	} else t20 = $[48];
+	return t20;
+}
+const source$2 = "import { type ReactElement, useId, useState } from \"react\";\n\nimport { ArrowUpIcon, FileIcon, PaperclipIcon, ReplyIcon, XIcon } from \"lucide-react\";\n\nimport { IconButton } from \"@stealthscale/component-actions\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Span, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Attachment, Composer } from \"@stealthscale/component-messaging\";\n\nfunction filed(\n  files: readonly File[],\n  label: string,\n  named: (file: string) => string,\n  removed: (file: File) => void,\n): ReactElement {\n  return (\n    <Composer.Attachments>\n      <Attachment.Group aria-label={label} orientation=\"vertical\" size=\"xs\">\n        {files.map((file) => (\n          <Attachment.Root key={`${file.name}-${String(file.lastModified)}`}>\n            <Attachment.Media>\n              <FileIcon aria-hidden />\n            </Attachment.Media>\n            <Attachment.Content>\n              <Attachment.Title>{file.name}</Attachment.Title>\n            </Attachment.Content>\n            <Attachment.Actions>\n              <IconButton\n                aria-label={named(file.name)}\n                onClick={() => {\n                  removed(file);\n                }}\n                size=\"xs\"\n                variant=\"ghost\"\n              >\n                <XIcon size=\"1em\" />\n              </IconButton>\n            </Attachment.Actions>\n          </Attachment.Root>\n        ))}\n      </Attachment.Group>\n    </Composer.Attachments>\n  );\n}\n\nfunction strip(replying: string, cancel: string, cancelled: () => void): ReactElement {\n  return (\n    <Composer.Context>\n      <ReplyIcon aria-hidden />\n      <Span>{replying}</Span>\n      <IconButton aria-label={cancel} onClick={cancelled} size=\"xs\" variant=\"ghost\">\n        <XIcon size=\"1em\" />\n      </IconButton>\n    </Composer.Context>\n  );\n}\n\nexport function Reply(): ReactElement {\n  const { t } = useWords(\"composer\");\n  const text = useId();\n  const [replying, setReplying] = useState(true);\n  const [files, setFiles] = useState<readonly File[]>([]);\n  const [sent, setSent] = useState(\"\");\n  const focused = (): void => {\n    document.querySelector<HTMLElement>(`[id=\"${text}\"]`)?.focus();\n  };\n\n  return (\n    <Stack gap=\"sm\">\n      <Composer.Root\n        attached={files.length > 0}\n        onAttach={(picked) => {\n          setFiles((was) => [...was, ...picked]);\n        }}\n        onCancelContext={() => {\n          setReplying(false);\n        }}\n        onSubmit={(typed) => {\n          setSent(t(\"sent\", { count: files.length, text: typed }));\n          setFiles([]);\n          setReplying(false);\n        }}\n      >\n        {replying\n          ? strip(t(\"replying\"), t(\"cancelReply\"), () => {\n              setReplying(false);\n              focused();\n            })\n          : null}\n        {files.length === 0\n          ? null\n          : filed(\n              files,\n              t(\"files\"),\n              (name) => t(\"remove\", { name }),\n              (file) => {\n                setFiles((was) => was.filter((one) => one !== file));\n                focused();\n              },\n            )}\n        <Composer.Input id={text} label={t(\"label\")} placeholder={t(\"replyPlaceholder\")} />\n        <Composer.Toolbar>\n          <Composer.AttachTrigger label={t(\"attach\")}>\n            <PaperclipIcon size=\"1em\" />\n          </Composer.AttachTrigger>\n          <Composer.Submit label={t(\"send\")}>\n            <ArrowUpIcon size=\"1em\" />\n          </Composer.Submit>\n        </Composer.Toolbar>\n      </Composer.Root>\n      <Text as=\"output\" size=\"sm\">\n        {sent}\n      </Text>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/composer/examples/stopping.example.tsx
+var stopping_example_exports = /* @__PURE__ */ __exportAll({
+	Stopping: () => Stopping,
+	source: () => source$1
+});
+function Stopping() {
+	const $ = c(33);
+	const { t } = useWords("composer");
+	const [busy, setBusy] = useState(false);
+	let t0;
+	let t1;
+	if ($[0] !== busy) {
+		t0 = () => {
+			const timer = busy ? setTimeout(() => {
+				setBusy(false);
+			}, 4e3) : void 0;
+			return () => {
+				clearTimeout(timer);
+			};
+		};
+		t1 = [busy];
+		$[0] = busy;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useEffect(t0, t1);
+	let t2;
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = () => {
+			setBusy(false);
+		};
+		t3 = () => {
+			setBusy(true);
+		};
+		$[3] = t2;
+		$[4] = t3;
+	} else {
+		t2 = $[3];
+		t3 = $[4];
+	}
+	let t4;
+	if ($[5] !== t) {
+		t4 = t("askLabel");
+		$[5] = t;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t) {
+		t5 = t("askPlaceholder");
+		$[7] = t;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t4 || $[10] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Input, {
+			label: t4,
+			placeholder: t5
+		});
+		$[9] = t4;
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== busy || $[13] !== t) {
+		t7 = busy ? t("answering") : t("hint");
+		$[12] = busy;
+		$[13] = t;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Span, {
+			tone: "muted",
+			children: t7
+		});
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t) {
+		t9 = t("send");
+		$[17] = t;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(SquareIcon, { size: "1em" });
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== t) {
+		t11 = t("stop");
+		$[20] = t;
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(ArrowUpIcon, { size: "1em" });
+		$[22] = t12;
+	} else t12 = $[22];
+	let t13;
+	if ($[23] !== t11 || $[24] !== t9) {
+		t13 = /* @__PURE__ */ jsx(Submit, {
+			label: t9,
+			stopIcon: t10,
+			stopLabel: t11,
+			children: t12
+		});
+		$[23] = t11;
+		$[24] = t9;
+		$[25] = t13;
+	} else t13 = $[25];
+	let t14;
+	if ($[26] !== t13 || $[27] !== t8) {
+		t14 = /* @__PURE__ */ jsxs(Toolbar, { children: [t8, t13] });
+		$[26] = t13;
+		$[27] = t8;
+		$[28] = t14;
+	} else t14 = $[28];
+	let t15;
+	if ($[29] !== busy || $[30] !== t14 || $[31] !== t6) {
+		t15 = /* @__PURE__ */ jsxs(Root$1, {
+			busy,
+			onStop: t2,
+			onSubmit: t3,
+			submitOn: "modEnter",
+			children: [t6, t14]
+		});
+		$[29] = busy;
+		$[30] = t14;
+		$[31] = t6;
+		$[32] = t15;
+	} else t15 = $[32];
+	return t15;
+}
+const source$1 = "import { type ReactElement, useEffect, useState } from \"react\";\n\nimport { ArrowUpIcon, SquareIcon } from \"lucide-react\";\n\nimport { Span } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Composer } from \"@stealthscale/component-messaging\";\n\nexport function Stopping(): ReactElement {\n  const { t } = useWords(\"composer\");\n  const [busy, setBusy] = useState(false);\n\n  useEffect(() => {\n    const timer = busy\n      ? setTimeout(() => {\n          setBusy(false);\n        }, 4000)\n      : undefined;\n\n    return (): void => {\n      clearTimeout(timer);\n    };\n  }, [busy]);\n\n  return (\n    <Composer.Root\n      busy={busy}\n      onStop={() => {\n        setBusy(false);\n      }}\n      onSubmit={() => {\n        setBusy(true);\n      }}\n      submitOn=\"modEnter\"\n    >\n      <Composer.Input label={t(\"askLabel\")} placeholder={t(\"askPlaceholder\")} />\n      <Composer.Toolbar>\n        <Span tone=\"muted\">{busy ? t(\"answering\") : t(\"hint\")}</Span>\n        <Composer.Submit\n          label={t(\"send\")}\n          stopIcon={<SquareIcon size=\"1em\" />}\n          stopLabel={t(\"stop\")}\n        >\n          <ArrowUpIcon size=\"1em\" />\n        </Composer.Submit>\n      </Composer.Toolbar>\n    </Composer.Root>\n  );\n}\n";
+//#endregion
+//#region src/composer/examples/writing.example.tsx
+var writing_example_exports = /* @__PURE__ */ __exportAll({
+	Writing: () => Writing,
+	source: () => source
+});
+function Writing(props) {
+	const $ = c(24);
+	const { t } = useWords("composer");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("placeholder");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t0 || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Input, {
+			label: t0,
+			placeholder: t1
+		});
+		$[4] = t0;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== t) {
+		t3 = t("attach");
+		$[7] = t;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(PaperclipIcon, { size: "1em" });
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t3) {
+		t5 = /* @__PURE__ */ jsx(AttachTrigger, {
+			label: t3,
+			children: t4
+		});
+		$[10] = t3;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t) {
+		t6 = t("send");
+		$[12] = t;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(ArrowUpIcon, { size: "1em" });
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t6) {
+		t8 = /* @__PURE__ */ jsx(Submit, {
+			label: t6,
+			children: t7
+		});
+		$[15] = t6;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t5 || $[18] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Toolbar, { children: [t5, t8] });
+		$[17] = t5;
+		$[18] = t8;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== props || $[21] !== t2 || $[22] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Root$1, {
+			...props,
+			children: [t2, t9]
+		});
+		$[20] = props;
+		$[21] = t2;
+		$[22] = t9;
+		$[23] = t10;
+	} else t10 = $[23];
+	return t10;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { ArrowUpIcon, PaperclipIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Composer } from \"@stealthscale/component-messaging\";\n\nexport function Writing(props: Composer.RootProps): ReactElement {\n  const { t } = useWords(\"composer\");\n\n  return (\n    <Composer.Root {...props}>\n      <Composer.Input label={t(\"label\")} placeholder={t(\"placeholder\")} />\n      <Composer.Toolbar>\n        <Composer.AttachTrigger label={t(\"attach\")}>\n          <PaperclipIcon size=\"1em\" />\n        </Composer.AttachTrigger>\n        <Composer.Submit label={t(\"send\")}>\n          <ArrowUpIcon size=\"1em\" />\n        </Composer.Submit>\n      </Composer.Toolbar>\n    </Composer.Root>\n  );\n}\n";
+//#endregion
+//#region src/composer/composer.specimen.tsx
+/**
+* Catalogue page for the composer.
+*
+* @remarks
+*   `scenesOf` generates the look and size scenes from a composer with a text and the attach and
+*   send controls, each in a room at the `sm` measure, the width of a phone. Hand-written scenes
+*   render a reply with files, an answer the send control stops, and the edit of the last message.
+*   The words are keys under `composer` in `locales/en/specimen/composer.json`.
+*/
+/**
+* Hand-written scene for a reply with files.
+*/
+const replied = {
+	about: "composer.reply.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Reply, {})
+	}),
+	example: reply_example_exports,
+	title: "composer.reply.title"
+};
+/**
+* Hand-written scene for an answer the send control stops.
+*/
+const stopped = {
+	about: "composer.stopping.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Stopping, {})
+	}),
+	example: stopping_example_exports,
+	title: "composer.stopping.title"
+};
+/**
+* Hand-written scene for mentions typed with `@`.
+*/
+const mentioned = {
+	about: "composer.mentions.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Mentions, {})
+	}),
+	example: mentions_example_exports,
+	title: "composer.mentions.title"
+};
+/**
+* Hand-written scene for the edit of the last message.
+*/
+const edited = {
+	about: "composer.edit.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(EditLast, {})
+	}),
+	example: edit_example_exports,
+	title: "composer.edit.title"
+};
+var composer_specimen_default = specimen({
+	about: "composer.about",
+	id: "components/messaging/composer",
+	imports: "import { Composer } from \"@stealthscale/component-messaging\";",
+	scenes: [
+		...scenesOf(recipe, {
+			axes: {
+				size: { direction: "column" },
+				variant: { direction: "column" }
+			},
+			draw: (props) => /* @__PURE__ */ jsx(Room, {
+				size: "sm",
+				children: /* @__PURE__ */ jsx(Writing, { ...props })
+			}),
+			example: writing_example_exports,
+			namespace: "composer",
+			order: ["variant", "size"]
+		}),
+		replied,
+		mentioned,
+		stopped,
+		edited
+	],
+	title: "composer.title"
+});
+//#endregion
+export { composer_specimen_default as default, edited, mentioned, replied, stopped };