@stealthscale/component-messaging 0.1.0 → 0.2.2

package/dist/pages/message/message.js

@@ -0,0 +1,1055 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { n as recipe } from "../../recipes-D1oVFnRU.js";
+import { C as Toolbar, D as Context, E as Input, T as Root$1, a as Item, c as Status$1, d as Footer, f as Content, h as Actions, l as Root, m as Avatar$1, p as Bubble, r as Root$2, u as Header, w as Submit } from "../../shared-B0H4dgkB.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Button, ButtonPropsProvider, IconButton } from "@stealthscale/component-actions";
+import { flushSync } from "react-dom";
+import { Portal } from "@stealthscale/component-primitives";
+import { Popover } from "@stealthscale/component-disclosure";
+import { Room, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { ArrowUpIcon, CheckCheckIcon, CheckIcon, CircleAlertIcon, ClockIcon, CopyIcon, PencilIcon, RefreshCwIcon, RotateCcwIcon, SparklesIcon, ThumbsDownIcon, ThumbsUpIcon, Trash2Icon } from "lucide-react";
+import { Avatar } from "@stealthscale/component-media";
+import { Span, Strong } from "@stealthscale/component-typography";
+import { Stack } from "@stealthscale/component-layout";
+import { Markdown } from "@stealthscale/component-content";
+import { Timestamp } from "@stealthscale/component-data";
+//#region src/message/examples/answer.example.tsx
+var answer_example_exports = /* @__PURE__ */ __exportAll({
+	Answer: () => Answer,
+	source: () => source$5
+});
+const ACTIONS = [
+	["copy", CopyIcon],
+	["regenerate", RefreshCwIcon],
+	["good", ThumbsUpIcon],
+	["bad", ThumbsDownIcon]
+];
+function Answer() {
+	const $ = c(17);
+	const { t } = useWords("message");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Avatar$1, { children: /* @__PURE__ */ jsx(Avatar.Root, {
+			"aria-hidden": true,
+			size: "sm",
+			children: /* @__PURE__ */ jsx(Avatar.Fallback, { children: /* @__PURE__ */ jsx(SparklesIcon, {}) })
+		}) });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("assistant");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(Strong, { children: t1 }) });
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("summary");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Bubble, { children: /* @__PURE__ */ jsx(Markdown, {
+			headingLevel: 3,
+			source: t3
+		}) });
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t) {
+		t5 = ACTIONS.map((t6) => {
+			const [action, Glyph] = t6;
+			return /* @__PURE__ */ jsx(IconButton, {
+				"aria-label": t(action),
+				size: "xs",
+				variant: "ghost",
+				children: /* @__PURE__ */ jsx(Glyph, { size: "1em" })
+			}, action);
+		});
+		$[9] = t;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsx(Actions, { children: t5 }) });
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t2 || $[14] !== t4 || $[15] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Root, {
+			look: "plain",
+			reveal: "always",
+			children: [t0, /* @__PURE__ */ jsxs(Content, { children: [
+				t2,
+				t4,
+				t6
+			] })]
+		});
+		$[13] = t2;
+		$[14] = t4;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	return t7;
+}
+const source$5 = "import { type ReactElement } from \"react\";\n\nimport { CopyIcon, RefreshCwIcon, SparklesIcon, ThumbsDownIcon, ThumbsUpIcon } from \"lucide-react\";\n\nimport { IconButton } from \"@stealthscale/component-actions\";\nimport { Markdown } from \"@stealthscale/component-content\";\nimport { Avatar } from \"@stealthscale/component-media\";\nimport { Strong } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Message } from \"@stealthscale/component-messaging\";\n\nconst ACTIONS = [\n  [\"copy\", CopyIcon],\n  [\"regenerate\", RefreshCwIcon],\n  [\"good\", ThumbsUpIcon],\n  [\"bad\", ThumbsDownIcon],\n] as const;\n\nexport function Answer(): ReactElement {\n  const { t } = useWords(\"message\");\n\n  return (\n    <Message.Root look=\"plain\" reveal=\"always\">\n      <Message.Avatar>\n        <Avatar.Root aria-hidden size=\"sm\">\n          <Avatar.Fallback>\n            <SparklesIcon />\n          </Avatar.Fallback>\n        </Avatar.Root>\n      </Message.Avatar>\n      <Message.Content>\n        <Message.Header>\n          <Strong>{t(\"assistant\")}</Strong>\n        </Message.Header>\n        <Message.Bubble>\n          <Markdown headingLevel={3} source={t(\"summary\")} />\n        </Message.Bubble>\n        <Message.Footer>\n          <Message.Actions>\n            {ACTIONS.map(([action, Glyph]) => (\n              <IconButton aria-label={t(action)} key={action} size=\"xs\" variant=\"ghost\">\n                <Glyph size=\"1em\" />\n              </IconButton>\n            ))}\n          </Message.Actions>\n        </Message.Footer>\n      </Message.Content>\n    </Message.Root>\n  );\n}\n";
+//#endregion
+//#region src/message/examples/delivery.example.tsx
+var delivery_example_exports = /* @__PURE__ */ __exportAll({
+	Delivery: () => Delivery,
+	source: () => source$4
+});
+const TIME$2 = {
+	timeStyle: "short",
+	timeZone: "UTC"
+};
+const SENT = [
+	[
+		"read",
+		CheckCheckIcon,
+		"09:14"
+	],
+	[
+		"delivered",
+		CheckCheckIcon,
+		"09:20"
+	],
+	[
+		"sent",
+		CheckIcon,
+		"09:21"
+	],
+	[
+		"sending",
+		ClockIcon,
+		"09:22"
+	]
+];
+function Delivery() {
+	const $ = c(4);
+	const { t } = useWords("message");
+	let t0;
+	if ($[0] !== t) {
+		t0 = SENT.map((t1) => {
+			const [status, Glyph, at] = t1;
+			return /* @__PURE__ */ jsx(Root, {
+				align: "end",
+				"aria-label": t("you"),
+				look: "solid",
+				palette: "primary",
+				children: /* @__PURE__ */ jsxs(Content, { children: [/* @__PURE__ */ jsx(Bubble, { children: t(`${status}Text`) }), /* @__PURE__ */ jsxs(Footer, { children: [/* @__PURE__ */ jsx(Timestamp, {
+					options: TIME$2,
+					value: `2026-09-30T${at}:00Z`
+				}), /* @__PURE__ */ jsxs(Status$1, {
+					status,
+					children: [/* @__PURE__ */ jsx(Glyph, { "aria-hidden": true }), t(status)]
+				})] })] })
+			}, status);
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Stack, {
+			gap: "md",
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { CheckCheckIcon, CheckIcon, ClockIcon } from \"lucide-react\";\n\nimport { Timestamp } from \"@stealthscale/component-data\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Message } from \"@stealthscale/component-messaging\";\n\nconst TIME: Intl.DateTimeFormatOptions = { timeStyle: \"short\", timeZone: \"UTC\" };\n\nconst SENT = [\n  [\"read\", CheckCheckIcon, \"09:14\"],\n  [\"delivered\", CheckCheckIcon, \"09:20\"],\n  [\"sent\", CheckIcon, \"09:21\"],\n  [\"sending\", ClockIcon, \"09:22\"],\n] as const;\n\nexport function Delivery(): ReactElement {\n  const { t } = useWords(\"message\");\n\n  return (\n    <Stack gap=\"md\">\n      {SENT.map(([status, Glyph, at]) => (\n        <Message.Root align=\"end\" aria-label={t(\"you\")} key={status} look=\"solid\" palette=\"primary\">\n          <Message.Content>\n            <Message.Bubble>{t(`${status}Text`)}</Message.Bubble>\n            <Message.Footer>\n              <Timestamp options={TIME} value={`2026-09-30T${at}:00Z`} />\n              <Message.Status status={status}>\n                <Glyph aria-hidden />\n                {t(status)}\n              </Message.Status>\n            </Message.Footer>\n          </Message.Content>\n        </Message.Root>\n      ))}\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/message/examples/exchange.example.tsx
+var exchange_example_exports = /* @__PURE__ */ __exportAll({
+	Exchange: () => Exchange,
+	source: () => source$3
+});
+const TIME$1 = {
+	timeStyle: "short",
+	timeZone: "UTC"
+};
+function Exchange() {
+	const $ = c(48);
+	const { t } = useWords("message");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("ada");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Avatar.Fallback, {});
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t0) {
+		t2 = /* @__PURE__ */ jsx(Avatar$1, { children: /* @__PURE__ */ jsx(Avatar.Root, {
+			"aria-hidden": true,
+			name: t0,
+			size: "sm",
+			children: t1
+		}) });
+		$[3] = t0;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("ada");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Strong, { children: t3 });
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(Timestamp, {
+			options: TIME$1,
+			value: "2026-09-30T09:12:00Z"
+		});
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t4) {
+		t6 = /* @__PURE__ */ jsxs(Header, { children: [t4, t5] });
+		$[10] = t4;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t) {
+		t7 = t("invoice");
+		$[12] = t;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Bubble, { children: t7 });
+		$[14] = t7;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t) {
+		t9 = t("approve");
+		$[16] = t;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Bubble, { children: t9 });
+		$[18] = t9;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== t10 || $[21] !== t6 || $[22] !== t8) {
+		t11 = /* @__PURE__ */ jsxs(Content, { children: [
+			t6,
+			t8,
+			t10
+		] });
+		$[20] = t10;
+		$[21] = t6;
+		$[22] = t8;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== t11 || $[25] !== t2) {
+		t12 = /* @__PURE__ */ jsxs(Root, { children: [t2, t11] });
+		$[24] = t11;
+		$[25] = t2;
+		$[26] = t12;
+	} else t12 = $[26];
+	let t13;
+	if ($[27] !== t) {
+		t13 = t("you");
+		$[27] = t;
+		$[28] = t13;
+	} else t13 = $[28];
+	let t14;
+	if ($[29] !== t) {
+		t14 = t("approved");
+		$[29] = t;
+		$[30] = t14;
+	} else t14 = $[30];
+	let t15;
+	if ($[31] !== t14) {
+		t15 = /* @__PURE__ */ jsx(Bubble, { children: t14 });
+		$[31] = t14;
+		$[32] = t15;
+	} else t15 = $[32];
+	let t16;
+	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = /* @__PURE__ */ jsx(Timestamp, {
+			options: TIME$1,
+			value: "2026-09-30T09:14:00Z"
+		});
+		$[33] = t16;
+	} else t16 = $[33];
+	let t17;
+	if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = /* @__PURE__ */ jsx(CheckCheckIcon, { "aria-hidden": true });
+		$[34] = t17;
+	} else t17 = $[34];
+	let t18;
+	if ($[35] !== t) {
+		t18 = t("read");
+		$[35] = t;
+		$[36] = t18;
+	} else t18 = $[36];
+	let t19;
+	if ($[37] !== t18) {
+		t19 = /* @__PURE__ */ jsxs(Footer, { children: [t16, /* @__PURE__ */ jsxs(Status$1, {
+			status: "read",
+			children: [t17, t18]
+		})] });
+		$[37] = t18;
+		$[38] = t19;
+	} else t19 = $[38];
+	let t20;
+	if ($[39] !== t15 || $[40] !== t19) {
+		t20 = /* @__PURE__ */ jsxs(Content, { children: [t15, t19] });
+		$[39] = t15;
+		$[40] = t19;
+		$[41] = t20;
+	} else t20 = $[41];
+	let t21;
+	if ($[42] !== t13 || $[43] !== t20) {
+		t21 = /* @__PURE__ */ jsx(Root, {
+			align: "end",
+			"aria-label": t13,
+			look: "solid",
+			palette: "primary",
+			children: t20
+		});
+		$[42] = t13;
+		$[43] = t20;
+		$[44] = t21;
+	} else t21 = $[44];
+	let t22;
+	if ($[45] !== t12 || $[46] !== t21) {
+		t22 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "lg",
+			children: [t12, t21]
+		});
+		$[45] = t12;
+		$[46] = t21;
+		$[47] = t22;
+	} else t22 = $[47];
+	return t22;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { CheckCheckIcon } from \"lucide-react\";\n\nimport { Timestamp } from \"@stealthscale/component-data\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Avatar } from \"@stealthscale/component-media\";\nimport { Strong } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Message } from \"@stealthscale/component-messaging\";\n\nconst TIME: Intl.DateTimeFormatOptions = { timeStyle: \"short\", timeZone: \"UTC\" };\n\nexport function Exchange(): ReactElement {\n  const { t } = useWords(\"message\");\n\n  return (\n    <Stack gap=\"lg\">\n      <Message.Root>\n        <Message.Avatar>\n          <Avatar.Root aria-hidden name={t(\"ada\")} size=\"sm\">\n            <Avatar.Fallback />\n          </Avatar.Root>\n        </Message.Avatar>\n        <Message.Content>\n          <Message.Header>\n            <Strong>{t(\"ada\")}</Strong>\n            <Timestamp options={TIME} value=\"2026-09-30T09:12:00Z\" />\n          </Message.Header>\n          <Message.Bubble>{t(\"invoice\")}</Message.Bubble>\n          <Message.Bubble>{t(\"approve\")}</Message.Bubble>\n        </Message.Content>\n      </Message.Root>\n      <Message.Root align=\"end\" aria-label={t(\"you\")} look=\"solid\" palette=\"primary\">\n        <Message.Content>\n          <Message.Bubble>{t(\"approved\")}</Message.Bubble>\n          <Message.Footer>\n            <Timestamp options={TIME} value=\"2026-09-30T09:14:00Z\" />\n            <Message.Status status=\"read\">\n              <CheckCheckIcon aria-hidden />\n              {t(\"read\")}\n            </Message.Status>\n          </Message.Footer>\n        </Message.Content>\n      </Message.Root>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/message/examples/failed.example.tsx
+var failed_example_exports = /* @__PURE__ */ __exportAll({
+	Failed: () => Failed,
+	source: () => source$2
+});
+function Failed() {
+	const $ = c(25);
+	const { t } = useWords("message");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("you");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("failedText");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Bubble, {
+			failed: true,
+			children: t1
+		});
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(CircleAlertIcon, { "aria-hidden": true });
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("failed");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Status$1, {
+			status: "failed",
+			children: [t3, t4]
+		});
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(RotateCcwIcon, { size: "1em" });
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t) {
+		t7 = t("retry");
+		$[12] = t;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Actions, { children: /* @__PURE__ */ jsxs(Button, {
+			size: "xs",
+			variant: "ghost",
+			children: [t6, t7]
+		}) });
+		$[14] = t7;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t5 || $[17] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Footer, { children: [t5, t8] });
+		$[16] = t5;
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t2 || $[20] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Content, { children: [t2, t9] });
+		$[19] = t2;
+		$[20] = t9;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== t0 || $[23] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Root, {
+			align: "end",
+			"aria-label": t0,
+			look: "solid",
+			palette: "primary",
+			reveal: "always",
+			children: t10
+		});
+		$[22] = t0;
+		$[23] = t10;
+		$[24] = t11;
+	} else t11 = $[24];
+	return t11;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { CircleAlertIcon, RotateCcwIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Message } from \"@stealthscale/component-messaging\";\n\nexport function Failed(): ReactElement {\n  const { t } = useWords(\"message\");\n\n  return (\n    <Message.Root align=\"end\" aria-label={t(\"you\")} look=\"solid\" palette=\"primary\" reveal=\"always\">\n      <Message.Content>\n        <Message.Bubble failed>{t(\"failedText\")}</Message.Bubble>\n        <Message.Footer>\n          <Message.Status status=\"failed\">\n            <CircleAlertIcon aria-hidden />\n            {t(\"failed\")}\n          </Message.Status>\n          <Message.Actions>\n            <Button size=\"xs\" variant=\"ghost\">\n              <RotateCcwIcon size=\"1em\" />\n              {t(\"retry\")}\n            </Button>\n          </Message.Actions>\n        </Message.Footer>\n      </Message.Content>\n    </Message.Root>\n  );\n}\n";
+//#endregion
+//#region src/message/examples/thread.example.tsx
+var thread_example_exports = /* @__PURE__ */ __exportAll({
+	Thread: () => Thread,
+	source: () => source$1
+});
+const NOW = Date.parse("2026-09-30T10:00:00Z");
+const OPENING = [
+	{
+		author: "ada",
+		id: "c1",
+		key: "move",
+		likes: 2,
+		minutes: 130
+	},
+	{
+		author: "bram",
+		id: "c2",
+		key: "works",
+		likes: 1,
+		minutes: 95
+	},
+	{
+		author: "me",
+		id: "c3",
+		key: "tell",
+		likes: 0,
+		minutes: 40
+	}
+];
+function revised(comment, typed) {
+	return {
+		author: comment.author,
+		edited: true,
+		id: comment.id,
+		likes: comment.likes,
+		minutes: comment.minutes,
+		typed
+	};
+}
+function toggled(liked, id) {
+	return new Set(liked.has(id) ? [...liked].filter((one) => one !== id) : [...liked, id]);
+}
+function editorOf(comment, text, scope) {
+	return /* @__PURE__ */ jsxs(Root$1, {
+		defaultValue: text,
+		onCancelContext: () => {
+			scope.onSave(comment.id);
+		},
+		onSubmit: (typed) => {
+			scope.onSave(comment.id, typed);
+		},
+		size: "sm",
+		children: [
+			/* @__PURE__ */ jsxs(Context, { children: [/* @__PURE__ */ jsx(PencilIcon, { "aria-hidden": true }), /* @__PURE__ */ jsx(Span, { children: scope.t("editing") })] }),
+			/* @__PURE__ */ jsx(Input, {
+				id: `${scope.base}-editor`,
+				label: scope.t("editLabel")
+			}),
+			/* @__PURE__ */ jsxs(Toolbar, { children: [/* @__PURE__ */ jsx(Button, {
+				onClick: () => {
+					scope.onSave(comment.id);
+				},
+				size: "xs",
+				variant: "ghost",
+				children: scope.t("cancel")
+			}), /* @__PURE__ */ jsx(Submit, {
+				label: scope.t("save"),
+				children: /* @__PURE__ */ jsx(CheckIcon, { size: "1em" })
+			})] })
+		]
+	});
+}
+function deletion(comment, scope) {
+	return /* @__PURE__ */ jsxs(Popover.Root, {
+		initialFocusEl: () => document.querySelector(`[id="${scope.base}-keep"]`),
+		onOpenChange: (details) => {
+			scope.onConfirm(details.open ? comment.id : void 0);
+		},
+		open: scope.confirming === comment.id,
+		children: [/* @__PURE__ */ jsx(ButtonPropsProvider, {
+			value: {
+				size: "xs",
+				variant: "ghost"
+			},
+			children: /* @__PURE__ */ jsxs(Popover.Trigger, {
+				as: Button,
+				children: [/* @__PURE__ */ jsx(Trash2Icon, { size: "1em" }), scope.t("delete")]
+			})
+		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsxs(Popover.Content, { children: [
+			/* @__PURE__ */ jsx(Popover.Title, {
+				as: "h3",
+				children: scope.t("deleteTitle")
+			}),
+			/* @__PURE__ */ jsx(Popover.Description, { children: scope.t("deleteNote") }),
+			/* @__PURE__ */ jsxs(Stack, {
+				direction: "row",
+				gap: "sm",
+				children: [/* @__PURE__ */ jsx(Button, {
+					onClick: () => {
+						scope.onRemove(comment.id);
+					},
+					palette: "error",
+					size: "sm",
+					children: scope.t("delete")
+				}), /* @__PURE__ */ jsx(Button, {
+					id: `${scope.base}-keep`,
+					onClick: () => {
+						scope.onConfirm();
+					},
+					size: "sm",
+					variant: "outline",
+					children: scope.t("cancel")
+				})]
+			})
+		] }) }) })]
+	});
+}
+function footerOf(comment, scope) {
+	const mine = scope.liked.has(comment.id);
+	const count = comment.likes + (mine ? 1 : 0);
+	return /* @__PURE__ */ jsxs(Footer, { children: [/* @__PURE__ */ jsx(Root$2, {
+		label: scope.t("reactions"),
+		children: /* @__PURE__ */ jsx(Item, {
+			label: scope.t(mine ? "likedMine" : "liked", { count }),
+			onClick: () => {
+				scope.onLike(comment.id);
+			},
+			pressed: mine,
+			...count > 0 ? { count } : {},
+			children: "👍"
+		})
+	}), comment.author === "me" ? /* @__PURE__ */ jsxs(Actions, { children: [/* @__PURE__ */ jsxs(Button, {
+		id: `${scope.base}-edit-${comment.id}`,
+		onClick: () => {
+			scope.onEdit(comment.id);
+		},
+		size: "xs",
+		variant: "ghost",
+		children: [/* @__PURE__ */ jsx(PencilIcon, { size: "1em" }), scope.t("edit")]
+	}), deletion(comment, scope)] }) : null] });
+}
+function commentOf(comment, scope) {
+	const name = scope.t(comment.author === "me" ? "you" : comment.author);
+	const text = comment.key === void 0 ? comment.typed ?? "" : scope.t(comment.key);
+	return /* @__PURE__ */ jsxs(Root, {
+		look: "plain",
+		reveal: "always",
+		children: [/* @__PURE__ */ jsx(Avatar$1, { children: /* @__PURE__ */ jsx(Avatar.Root, {
+			"aria-hidden": true,
+			name,
+			size: "sm",
+			children: /* @__PURE__ */ jsx(Avatar.Fallback, {})
+		}) }), /* @__PURE__ */ jsxs(Content, { children: [
+			/* @__PURE__ */ jsxs(Header, { children: [
+				/* @__PURE__ */ jsx(Strong, { children: name }),
+				/* @__PURE__ */ jsx(Timestamp, {
+					now: NOW,
+					reads: "relative",
+					value: NOW - comment.minutes * 6e4
+				}),
+				comment.edited ? /* @__PURE__ */ jsx(Span, { children: scope.t("edited") }) : null
+			] }),
+			scope.editing === comment.id ? editorOf(comment, text, scope) : /* @__PURE__ */ jsx(Bubble, { children: text }),
+			scope.editing === comment.id ? null : footerOf(comment, scope)
+		] })]
+	}, comment.id);
+}
+function Thread() {
+	const $ = c(42);
+	const { t } = useWords("message");
+	const base = useId();
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = OPENING.map(_temp);
+		$[0] = t0;
+	} else t0 = $[0];
+	const [comments, setComments] = useState(t0);
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ new Set(["c1"]);
+		$[1] = t1;
+	} else t1 = $[1];
+	const [liked, setLiked] = useState(t1);
+	const [editing, setEditing] = useState();
+	const [confirming, setConfirming] = useState();
+	let t2;
+	if ($[2] !== base) {
+		t2 = (id_0) => {
+			flushSync(() => {
+				setEditing(id_0);
+			});
+			document.querySelector(`[id="${base}-editor"]`)?.focus();
+		};
+		$[2] = base;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = (id_1) => {
+			setLiked((was) => toggled(was, id_1));
+		};
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	let t5;
+	if ($[5] !== base) {
+		t4 = (id_2) => {
+			flushSync(() => {
+				setComments((was_0) => was_0.filter((one) => one.id !== id_2));
+			});
+			document.querySelector(`[id="${base}-reply"]`)?.focus();
+		};
+		t5 = (id_3, text) => {
+			flushSync(() => {
+				if (text !== void 0) setComments((was_1) => was_1.map((one_0) => one_0.id === id_3 ? revised(one_0, text) : one_0));
+				setEditing(void 0);
+			});
+			document.querySelector(`[id="${base}-edit-${id_3}"]`)?.focus();
+		};
+		$[5] = base;
+		$[6] = t4;
+		$[7] = t5;
+	} else {
+		t4 = $[6];
+		t5 = $[7];
+	}
+	let T0;
+	let t6;
+	let t7;
+	if ($[8] !== base || $[9] !== comments || $[10] !== confirming || $[11] !== editing || $[12] !== liked || $[13] !== t || $[14] !== t2 || $[15] !== t4 || $[16] !== t5) {
+		const scope = {
+			base,
+			confirming,
+			editing,
+			liked,
+			onConfirm: setConfirming,
+			onEdit: t2,
+			onLike: t3,
+			onRemove: t4,
+			onSave: t5,
+			t
+		};
+		T0 = Stack;
+		t6 = "lg";
+		t7 = comments.map((comment) => commentOf(comment, scope));
+		$[8] = base;
+		$[9] = comments;
+		$[10] = confirming;
+		$[11] = editing;
+		$[12] = liked;
+		$[13] = t;
+		$[14] = t2;
+		$[15] = t4;
+		$[16] = t5;
+		$[17] = T0;
+		$[18] = t6;
+		$[19] = t7;
+	} else {
+		T0 = $[17];
+		t6 = $[18];
+		t7 = $[19];
+	}
+	let t8;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = (typed) => {
+			setComments((was_2) => [...was_2, {
+				author: "me",
+				edited: false,
+				id: `c${String(Date.now())}`,
+				likes: 0,
+				minutes: 0,
+				typed
+			}]);
+		};
+		$[20] = t8;
+	} else t8 = $[20];
+	const t9 = `${base}-reply`;
+	let t10;
+	if ($[21] !== t) {
+		t10 = t("replyLabel");
+		$[21] = t;
+		$[22] = t10;
+	} else t10 = $[22];
+	let t11;
+	if ($[23] !== t) {
+		t11 = t("replyPlaceholder");
+		$[23] = t;
+		$[24] = t11;
+	} else t11 = $[24];
+	let t12;
+	if ($[25] !== t10 || $[26] !== t11 || $[27] !== t9) {
+		t12 = /* @__PURE__ */ jsx(Input, {
+			id: t9,
+			label: t10,
+			placeholder: t11
+		});
+		$[25] = t10;
+		$[26] = t11;
+		$[27] = t9;
+		$[28] = t12;
+	} else t12 = $[28];
+	let t13;
+	if ($[29] !== t) {
+		t13 = t("send");
+		$[29] = t;
+		$[30] = t13;
+	} else t13 = $[30];
+	let t14;
+	if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(ArrowUpIcon, { size: "1em" });
+		$[31] = t14;
+	} else t14 = $[31];
+	let t15;
+	if ($[32] !== t13) {
+		t15 = /* @__PURE__ */ jsx(Toolbar, { children: /* @__PURE__ */ jsx(Submit, {
+			label: t13,
+			children: t14
+		}) });
+		$[32] = t13;
+		$[33] = t15;
+	} else t15 = $[33];
+	let t16;
+	if ($[34] !== t12 || $[35] !== t15) {
+		t16 = /* @__PURE__ */ jsxs(Root$1, {
+			onSubmit: t8,
+			children: [t12, t15]
+		});
+		$[34] = t12;
+		$[35] = t15;
+		$[36] = t16;
+	} else t16 = $[36];
+	let t17;
+	if ($[37] !== T0 || $[38] !== t16 || $[39] !== t6 || $[40] !== t7) {
+		t17 = /* @__PURE__ */ jsxs(T0, {
+			gap: t6,
+			children: [t7, t16]
+		});
+		$[37] = T0;
+		$[38] = t16;
+		$[39] = t6;
+		$[40] = t7;
+		$[41] = t17;
+	} else t17 = $[41];
+	return t17;
+}
+function _temp(t0) {
+	const { author, id, key, likes, minutes } = t0;
+	return {
+		author,
+		edited: false,
+		id,
+		key,
+		likes,
+		minutes
+	};
+}
+const source$1 = "import { type ReactElement, useId, useState } from \"react\";\nimport { flushSync } from \"react-dom\";\n\nimport { ArrowUpIcon, CheckIcon, PencilIcon, Trash2Icon } from \"lucide-react\";\n\nimport { Button, ButtonPropsProvider } from \"@stealthscale/component-actions\";\nimport { Timestamp } from \"@stealthscale/component-data\";\nimport { Popover } from \"@stealthscale/component-disclosure\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Avatar } from \"@stealthscale/component-media\";\nimport { Portal } from \"@stealthscale/component-primitives\";\nimport { Span, Strong } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Composer, Message, Reactions } from \"@stealthscale/component-messaging\";\n\nconst NOW = Date.parse(\"2026-09-30T10:00:00Z\");\n\nconst OPENING = [\n  { author: \"ada\", id: \"c1\", key: \"move\", likes: 2, minutes: 130 },\n  { author: \"bram\", id: \"c2\", key: \"works\", likes: 1, minutes: 95 },\n  { author: \"me\", id: \"c3\", key: \"tell\", likes: 0, minutes: 40 },\n] as const;\n\ntype Said = (typeof OPENING)[number][\"key\"];\n\ninterface Comment {\n  readonly author: (typeof OPENING)[number][\"author\"];\n  readonly edited: boolean;\n  readonly id: string;\n  readonly key?: Said;\n  readonly likes: number;\n  readonly minutes: number;\n  readonly typed?: string;\n}\n\ninterface Scope {\n  readonly base: string;\n  readonly confirming: string | undefined;\n  readonly editing: string | undefined;\n  readonly liked: ReadonlySet<string>;\n  readonly onConfirm: (id?: string) => void;\n  readonly onEdit: (id: string) => void;\n  readonly onLike: (id: string) => void;\n  readonly onRemove: (id: string) => void;\n  readonly onSave: (id: string, text?: string) => void;\n  readonly t: ReturnType<typeof useWords>[\"t\"];\n}\n\nfunction revised(comment: Comment, typed: string): Comment {\n  return {\n    author: comment.author,\n    edited: true,\n    id: comment.id,\n    likes: comment.likes,\n    minutes: comment.minutes,\n    typed,\n  };\n}\n\nfunction toggled(liked: ReadonlySet<string>, id: string): ReadonlySet<string> {\n  return new Set(liked.has(id) ? [...liked].filter((one) => one !== id) : [...liked, id]);\n}\n\nfunction editorOf(comment: Comment, text: string, scope: Scope): ReactElement {\n  return (\n    <Composer.Root\n      defaultValue={text}\n      onCancelContext={() => {\n        scope.onSave(comment.id);\n      }}\n      onSubmit={(typed) => {\n        scope.onSave(comment.id, typed);\n      }}\n      size=\"sm\"\n    >\n      <Composer.Context>\n        <PencilIcon aria-hidden />\n        <Span>{scope.t(\"editing\")}</Span>\n      </Composer.Context>\n      <Composer.Input id={`${scope.base}-editor`} label={scope.t(\"editLabel\")} />\n      <Composer.Toolbar>\n        <Button\n          onClick={() => {\n            scope.onSave(comment.id);\n          }}\n          size=\"xs\"\n          variant=\"ghost\"\n        >\n          {scope.t(\"cancel\")}\n        </Button>\n        <Composer.Submit label={scope.t(\"save\")}>\n          <CheckIcon size=\"1em\" />\n        </Composer.Submit>\n      </Composer.Toolbar>\n    </Composer.Root>\n  );\n}\n\nfunction deletion(comment: Comment, scope: Scope): ReactElement {\n  return (\n    <Popover.Root\n      initialFocusEl={() => document.querySelector(`[id=\"${scope.base}-keep\"]`)}\n      onOpenChange={(details) => {\n        scope.onConfirm(details.open ? comment.id : undefined);\n      }}\n      open={scope.confirming === comment.id}\n    >\n      <ButtonPropsProvider value={{ size: \"xs\", variant: \"ghost\" }}>\n        <Popover.Trigger as={Button}>\n          <Trash2Icon size=\"1em\" />\n          {scope.t(\"delete\")}\n        </Popover.Trigger>\n      </ButtonPropsProvider>\n      <Portal>\n        <Popover.Positioner>\n          <Popover.Content>\n            <Popover.Title as=\"h3\">{scope.t(\"deleteTitle\")}</Popover.Title>\n            <Popover.Description>{scope.t(\"deleteNote\")}</Popover.Description>\n            <Stack direction=\"row\" gap=\"sm\">\n              <Button\n                onClick={() => {\n                  scope.onRemove(comment.id);\n                }}\n                palette=\"error\"\n                size=\"sm\"\n              >\n                {scope.t(\"delete\")}\n              </Button>\n              <Button\n                id={`${scope.base}-keep`}\n                onClick={() => {\n                  scope.onConfirm();\n                }}\n                size=\"sm\"\n                variant=\"outline\"\n              >\n                {scope.t(\"cancel\")}\n              </Button>\n            </Stack>\n          </Popover.Content>\n        </Popover.Positioner>\n      </Portal>\n    </Popover.Root>\n  );\n}\n\nfunction footerOf(comment: Comment, scope: Scope): ReactElement {\n  const mine = scope.liked.has(comment.id);\n  const count = comment.likes + (mine ? 1 : 0);\n\n  return (\n    <Message.Footer>\n      <Reactions.Root label={scope.t(\"reactions\")}>\n        <Reactions.Item\n          label={scope.t(mine ? \"likedMine\" : \"liked\", { count })}\n          onClick={() => {\n            scope.onLike(comment.id);\n          }}\n          pressed={mine}\n          {...(count > 0 ? { count } : {})}\n        >\n          👍\n        </Reactions.Item>\n      </Reactions.Root>\n      {comment.author === \"me\" ? (\n        <Message.Actions>\n          <Button\n            id={`${scope.base}-edit-${comment.id}`}\n            onClick={() => {\n              scope.onEdit(comment.id);\n            }}\n            size=\"xs\"\n            variant=\"ghost\"\n          >\n            <PencilIcon size=\"1em\" />\n            {scope.t(\"edit\")}\n          </Button>\n          {deletion(comment, scope)}\n        </Message.Actions>\n      ) : null}\n    </Message.Footer>\n  );\n}\n\nfunction commentOf(comment: Comment, scope: Scope): ReactElement {\n  const name = scope.t(comment.author === \"me\" ? \"you\" : comment.author);\n  const text = comment.key === undefined ? (comment.typed ?? \"\") : scope.t(comment.key);\n\n  return (\n    <Message.Root key={comment.id} look=\"plain\" reveal=\"always\">\n      <Message.Avatar>\n        <Avatar.Root aria-hidden name={name} size=\"sm\">\n          <Avatar.Fallback />\n        </Avatar.Root>\n      </Message.Avatar>\n      <Message.Content>\n        <Message.Header>\n          <Strong>{name}</Strong>\n          <Timestamp now={NOW} reads=\"relative\" value={NOW - comment.minutes * 60_000} />\n          {comment.edited ? <Span>{scope.t(\"edited\")}</Span> : null}\n        </Message.Header>\n        {scope.editing === comment.id ? (\n          editorOf(comment, text, scope)\n        ) : (\n          <Message.Bubble>{text}</Message.Bubble>\n        )}\n        {scope.editing === comment.id ? null : footerOf(comment, scope)}\n      </Message.Content>\n    </Message.Root>\n  );\n}\n\nexport function Thread(): ReactElement {\n  const { t } = useWords(\"message\");\n  const base = useId();\n  const [comments, setComments] = useState<readonly Comment[]>(\n    OPENING.map(({ author, id, key, likes, minutes }) => ({\n      author,\n      edited: false,\n      id,\n      key,\n      likes,\n      minutes,\n    })),\n  );\n  const [liked, setLiked] = useState<ReadonlySet<string>>(new Set([\"c1\"]));\n  const [editing, setEditing] = useState<string>();\n  const [confirming, setConfirming] = useState<string>();\n  const scope: Scope = {\n    base,\n    confirming,\n    editing,\n    liked,\n    onConfirm: setConfirming,\n    onEdit: (id) => {\n      flushSync(() => {\n        setEditing(id);\n      });\n      document.querySelector<HTMLElement>(`[id=\"${base}-editor\"]`)?.focus();\n    },\n    onLike: (id) => {\n      setLiked((was) => toggled(was, id));\n    },\n    onRemove: (id) => {\n      flushSync(() => {\n        setComments((was) => was.filter((one) => one.id !== id));\n      });\n      document.querySelector<HTMLElement>(`[id=\"${base}-reply\"]`)?.focus();\n    },\n    onSave: (id, text) => {\n      flushSync(() => {\n        if (text !== undefined) {\n          setComments((was) => was.map((one) => (one.id === id ? revised(one, text) : one)));\n        }\n        setEditing(undefined);\n      });\n      document.querySelector<HTMLElement>(`[id=\"${base}-edit-${id}\"]`)?.focus();\n    },\n    t,\n  };\n\n  return (\n    <Stack gap=\"lg\">\n      {comments.map((comment) => commentOf(comment, scope))}\n      <Composer.Root\n        onSubmit={(typed) => {\n          setComments((was) => [\n            ...was,\n            {\n              author: \"me\",\n              edited: false,\n              id: `c${String(Date.now())}`,\n              likes: 0,\n              minutes: 0,\n              typed,\n            },\n          ]);\n        }}\n      >\n        <Composer.Input\n          id={`${base}-reply`}\n          label={t(\"replyLabel\")}\n          placeholder={t(\"replyPlaceholder\")}\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/message/examples/turn.example.tsx
+var turn_example_exports = /* @__PURE__ */ __exportAll({
+	Turn: () => Turn,
+	source: () => source
+});
+const TIME = {
+	timeStyle: "short",
+	timeZone: "UTC"
+};
+function Turn(props) {
+	const $ = c(34);
+	const { t } = useWords("message");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("ada");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Avatar.Fallback, {});
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t0) {
+		t2 = /* @__PURE__ */ jsx(Avatar$1, { children: /* @__PURE__ */ jsx(Avatar.Root, {
+			"aria-hidden": true,
+			name: t0,
+			size: "sm",
+			children: t1
+		}) });
+		$[3] = t0;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("ada");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Strong, { children: t3 });
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(Timestamp, {
+			options: TIME,
+			value: "2026-09-30T09:12:00Z"
+		});
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t4) {
+		t6 = /* @__PURE__ */ jsxs(Header, { children: [t4, t5] });
+		$[10] = t4;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t) {
+		t7 = t("invoice");
+		$[12] = t;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Bubble, { children: t7 });
+		$[14] = t7;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t) {
+		t9 = t("approve");
+		$[16] = t;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Bubble, { children: t9 });
+		$[18] = t9;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== t) {
+		t11 = t("copy");
+		$[20] = t;
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(CopyIcon, { size: "1em" });
+		$[22] = t12;
+	} else t12 = $[22];
+	let t13;
+	if ($[23] !== t11) {
+		t13 = /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsx(Actions, { children: /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": t11,
+			size: "xs",
+			variant: "ghost",
+			children: t12
+		}) }) });
+		$[23] = t11;
+		$[24] = t13;
+	} else t13 = $[24];
+	let t14;
+	if ($[25] !== t10 || $[26] !== t13 || $[27] !== t6 || $[28] !== t8) {
+		t14 = /* @__PURE__ */ jsxs(Content, { children: [
+			t6,
+			t8,
+			t10,
+			t13
+		] });
+		$[25] = t10;
+		$[26] = t13;
+		$[27] = t6;
+		$[28] = t8;
+		$[29] = t14;
+	} else t14 = $[29];
+	let t15;
+	if ($[30] !== props || $[31] !== t14 || $[32] !== t2) {
+		t15 = /* @__PURE__ */ jsxs(Root, {
+			...props,
+			children: [t2, t14]
+		});
+		$[30] = props;
+		$[31] = t14;
+		$[32] = t2;
+		$[33] = t15;
+	} else t15 = $[33];
+	return t15;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { CopyIcon } from \"lucide-react\";\n\nimport { IconButton } from \"@stealthscale/component-actions\";\nimport { Timestamp } from \"@stealthscale/component-data\";\nimport { Avatar } from \"@stealthscale/component-media\";\nimport { Strong } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Message } from \"@stealthscale/component-messaging\";\n\nconst TIME: Intl.DateTimeFormatOptions = { timeStyle: \"short\", timeZone: \"UTC\" };\n\nexport function Turn(props: Message.RootProps): ReactElement {\n  const { t } = useWords(\"message\");\n\n  return (\n    <Message.Root {...props}>\n      <Message.Avatar>\n        <Avatar.Root aria-hidden name={t(\"ada\")} size=\"sm\">\n          <Avatar.Fallback />\n        </Avatar.Root>\n      </Message.Avatar>\n      <Message.Content>\n        <Message.Header>\n          <Strong>{t(\"ada\")}</Strong>\n          <Timestamp options={TIME} value=\"2026-09-30T09:12:00Z\" />\n        </Message.Header>\n        <Message.Bubble>{t(\"invoice\")}</Message.Bubble>\n        <Message.Bubble>{t(\"approve\")}</Message.Bubble>\n        <Message.Footer>\n          <Message.Actions>\n            <IconButton aria-label={t(\"copy\")} size=\"xs\" variant=\"ghost\">\n              <CopyIcon size=\"1em\" />\n            </IconButton>\n          </Message.Actions>\n        </Message.Footer>\n      </Message.Content>\n    </Message.Root>\n  );\n}\n";
+//#endregion
+//#region src/message/message.specimen.tsx
+/**
+* Catalogue page for the message.
+*
+* @remarks
+*   The first scene renders a short exchange: another person's turn at the start of the line and
+*   the reader's own at the end. `scenesOf` generates the look, palette, size, align and reveal
+*   scenes from one turn of two messages, each in a room at the `sm` measure, the width of a phone.
+*   Hand-written scenes render the delivery states, a message that did not send, an answer in the
+*   plain look, and a comment thread. The words are keys under `message` in
+*   `locales/en/specimen/message.json`.
+*/
+/**
+* Hand-written scene for another person's turn and the reader's reply.
+*/
+const exchanged = {
+	about: "message.exchange.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Exchange, {})
+	}),
+	example: exchange_example_exports,
+	title: "message.exchange.title"
+};
+/**
+* Hand-written scene for the reader's messages in each delivery state.
+*/
+const delivered = {
+	about: "message.delivery.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Delivery, {})
+	}),
+	example: delivery_example_exports,
+	title: "message.delivery.title"
+};
+/**
+* Hand-written scene for a message that did not send, with a retry.
+*/
+const unsent = {
+	about: "message.failure.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Failed, {})
+	}),
+	example: failed_example_exports,
+	title: "message.failure.title"
+};
+/**
+* Hand-written scene for an answer that reads as a document.
+*/
+const answered = {
+	about: "message.answer.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Answer, {})
+	}),
+	example: answer_example_exports,
+	title: "message.answer.title"
+};
+/**
+* Hand-written scene for a thread of comments the reader edits, deletes and answers.
+*/
+const threaded = {
+	about: "message.thread.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Thread, {})
+	}),
+	example: thread_example_exports,
+	title: "message.thread.title"
+};
+var message_specimen_default = specimen({
+	about: "message.about",
+	id: "components/messaging/message",
+	imports: "import { Message } from \"@stealthscale/component-messaging\";",
+	scenes: [
+		exchanged,
+		...scenesOf(recipe, {
+			draw: (props) => /* @__PURE__ */ jsx(Room, {
+				size: "sm",
+				children: /* @__PURE__ */ jsx(Turn, { ...props })
+			}),
+			example: turn_example_exports,
+			namespace: "message",
+			order: [
+				"look",
+				"palette",
+				"size",
+				"align",
+				"reveal"
+			]
+		}),
+		delivered,
+		unsent,
+		answered,
+		threaded
+	],
+	title: "message.title"
+});
+//#endregion
+export { answered, message_specimen_default as default, delivered, exchanged, threaded, unsent };