@stealthscale/component-messaging 0.1.0 → 0.2.2

package/dist/pages/message/message.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"ActionsProps": {"conditions": 284, "foreign": 1041}, "AvatarProps": {"conditions": 284, "foreign": 1041}, "BubbleProps": {"conditions": 284, "foreign": 1041}, "ContentProps": {"conditions": 284, "foreign": 1041}, "FooterProps": {"conditions": 284, "foreign": 1041}, "HeaderProps": {"conditions": 284, "foreign": 1041}, "RootProps": {"conditions": 284, "foreign": 1041}, "StatusProps": {"conditions": 284, "foreign": 1041}, "AttachTriggerProps": {"conditions": 284, "foreign": 1051}, "AttachmentsProps": {"conditions": 284, "foreign": 1041}, "ContextProps": {"conditions": 284, "foreign": 1041}, "InputProps": {"conditions": 284, "foreign": 1052}, "SubmitProps": {"conditions": 284, "foreign": 1051}, "ToolbarProps": {"conditions": 284, "foreign": 1041}, "ChoiceProps": {"conditions": 284, "foreign": 1050}, "ItemProps": {"conditions": 284, "foreign": 1051}, "PickerProps": {"conditions": 284, "foreign": 1059}};
+export const parts = {"ActionsProps": [], "AvatarProps": [], "BubbleProps": [{"accepts": "boolean", "fallback": "", "kind": "option", "name": "failed", "refers": [], "required": false, "says": "Whether the message did not send."}], "ContentProps": [], "FooterProps": [], "HeaderProps": [], "RootProps": [{"accepts": "\"end\" | \"start\"", "fallback": "", "kind": "variant", "name": "align", "refers": [], "required": false, "says": "Which end of the line the turn belongs to: the row runs the other way at the end, and the column aligns its bubbles to that end."}, {"accepts": "Flat", "fallback": "", "kind": "variant", "name": "look", "refers": ["kit.Flat"], "required": false, "says": ""}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": ""}, {"accepts": "\"always\" | \"hover\"", "fallback": "", "kind": "variant", "name": "reveal", "refers": [], "required": false, "says": "When the actions of the turn are visible."}, {"accepts": "\"lg\" | \"md\" | \"sm\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": ""}], "StatusProps": [{"accepts": "MessageStatus", "fallback": "", "kind": "option", "name": "status", "refers": ["kit.MessageStatus"], "required": true, "says": "How far the message has got."}], "AttachTriggerProps": [{"accepts": "string", "fallback": "", "kind": "option", "name": "accept", "refers": [], "required": false, "says": "File types the picker offers, as an `input`'s `accept` attribute takes them."}, {"accepts": "\"glow\" | \"pulse\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "The halo around the button, in the palette's solid at half opacity."}, {"accepts": "Lift", "fallback": "", "kind": "variant", "name": "elevation", "refers": ["kit.Lift"], "required": false, "says": ""}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": false, "says": "Accessible name of the control, \"Attach files\" unless stated."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette of every look. The base sets `primary`."}, {"accepts": "\"square\"", "fallback": "", "kind": "variant", "name": "shape", "refers": [], "required": false, "says": ""}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": ""}, {"accepts": "\"ghost\" | \"glass\" | \"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}], "AttachmentsProps": [], "ContextProps": [], "InputProps": [{"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": false, "says": "Accessible name of the textarea, \"Message\" unless stated."}, {"accepts": "number", "fallback": "", "kind": "option", "name": "maxRows", "refers": [], "required": false, "says": "Most lines the textarea grows to before it scrolls, 8 unless stated."}, {"accepts": "((suggestion: Suggestion, query: Query) => void)", "fallback": "", "kind": "option", "name": "onMention", "refers": ["kit.Query", "kit.Suggestion"], "required": false, "says": "Called with the suggestion inserted and the query it replaced."}, {"accepts": "((query: Query) => void)", "fallback": "", "kind": "option", "name": "onQueryChange", "refers": ["kit.Query"], "required": false, "says": "Called with the query at the caret whenever it changes, undefined outside every mention."}, {"accepts": "readonly Suggestion[]", "fallback": "", "kind": "option", "name": "suggestions", "refers": ["kit.Suggestion"], "required": false, "says": "The suggestions for the query, which the caller finds from the term."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "suggestionsLabel", "refers": [], "required": false, "says": "Accessible name of the list of suggestions, \"Suggestions\" unless stated."}, {"accepts": "readonly string[]", "fallback": "", "kind": "option", "name": "triggers", "refers": [], "required": false, "says": "The characters that open a mention, such as `@` and `#`."}], "SubmitProps": [{"accepts": "\"glow\" | \"pulse\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "The halo around the button, in the palette's solid at half opacity."}, {"accepts": "Lift", "fallback": "", "kind": "variant", "name": "elevation", "refers": ["kit.Lift"], "required": false, "says": ""}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": false, "says": "Accessible name while the control sends, \"Send\" unless stated."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette of every look. The base sets `primary`."}, {"accepts": "\"square\"", "fallback": "", "kind": "variant", "name": "shape", "refers": [], "required": false, "says": ""}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": ""}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "stopIcon", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Glyph while the control stops a response."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "stopLabel", "refers": [], "required": false, "says": "Accessible name while the control stops a response, \"Stop\" unless stated."}, {"accepts": "\"ghost\" | \"glass\" | \"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}], "ToolbarProps": [], "ChoiceProps": [{"accepts": "\"glow\" | \"pulse\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "The halo around the button, in the palette's solid at half opacity."}, {"accepts": "Lift", "fallback": "", "kind": "variant", "name": "elevation", "refers": ["kit.Lift"], "required": false, "says": ""}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": true, "says": "Accessible name of the reaction, such as \"Thumbs up\"."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette of every look. The base sets `primary`."}, {"accepts": "\"square\"", "fallback": "", "kind": "variant", "name": "shape", "refers": [], "required": false, "says": ""}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": ""}, {"accepts": "string", "fallback": "", "kind": "option", "name": "value", "refers": [], "required": true, "says": "Value the picker's `onSelect` receives."}, {"accepts": "\"ghost\" | \"glass\" | \"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}], "ItemProps": [{"accepts": "number", "fallback": "", "kind": "option", "name": "count", "refers": [], "required": false, "says": "Number of people who reacted, rendered after the glyph when stated."}, {"accepts": "\"glow\" | \"pulse\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "The halo around the button, in the palette's solid at half opacity."}, {"accepts": "Lift", "fallback": "", "kind": "variant", "name": "elevation", "refers": ["kit.Lift"], "required": false, "says": ""}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": true, "says": "Accessible name: the reaction, the count and whether the reader is among them."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette of every look. The base sets `primary`."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "pressed", "refers": [], "required": false, "says": "Whether the reader is among the people who reacted."}, {"accepts": "\"square\"", "fallback": "", "kind": "variant", "name": "shape", "refers": [], "required": false, "says": ""}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": ""}, {"accepts": "\"ghost\" | \"glass\" | \"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}], "PickerProps": [{"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "children", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "The choices, each a `Reactions.Choice`."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "choicesLabel", "refers": [], "required": false, "says": "Accessible name of the panel, \"Choose a reaction\" unless stated."}, {"accepts": "\"ltr\" | \"rtl\"", "fallback": "\"ltr\"", "kind": "option", "name": "dir", "refers": [], "required": false, "says": "The document's text/writing direction."}, {"accepts": "(() => Document | Node | ShadowRoot)", "fallback": "", "kind": "option", "name": "getRootNode", "refers": [], "required": false, "says": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "icon", "refers": ["react.ReactElement", "react.ReactPortal"], "required": true, "says": "Glyph of the trigger."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "id", "refers": [], "required": false, "says": "The unique identifier of the machine."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": false, "says": "Accessible name of the trigger, \"Add a reaction\" unless stated."}, {"accepts": "((value: string) => void)", "fallback": "", "kind": "option", "name": "onSelect", "refers": [], "required": false, "says": "Called with the value of the choice pressed."}, {"accepts": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "Padding of the panel, text of the title and the description, and size of the close trigger."}, {"accepts": "\"elevated\" | \"glass\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Surface of the panel: the popover surface inside a hairline edge, the panel surface with a large shadow, or the glass layer style."}]};
+export const shapes = {"kit.Flat": [{"accepts": "", "name": "\"outline\"", "says": ""}, {"accepts": "", "name": "\"plain\"", "says": ""}, {"accepts": "", "name": "\"solid\"", "says": ""}, {"accepts": "", "name": "\"subtle\"", "says": ""}, {"accepts": "", "name": "\"surface\"", "says": ""}], "kit.MessageStatus": [{"accepts": "", "name": "\"delivered\"", "says": ""}, {"accepts": "", "name": "\"failed\"", "says": ""}, {"accepts": "", "name": "\"read\"", "says": ""}, {"accepts": "", "name": "\"sending\"", "says": ""}, {"accepts": "", "name": "\"sent\"", "says": ""}], "kit.Lift": [{"accepts": "", "name": "\"floating\"", "says": ""}, {"accepts": "", "name": "\"raised\"", "says": ""}], "kit.Scale": [{"accepts": "", "name": "\"2xl\"", "says": ""}, {"accepts": "", "name": "\"3xl\"", "says": ""}, {"accepts": "", "name": "\"4xl\"", "says": ""}, {"accepts": "", "name": "\"lg\"", "says": ""}, {"accepts": "", "name": "\"md\"", "says": ""}, {"accepts": "", "name": "\"sm\"", "says": ""}, {"accepts": "", "name": "\"xl\"", "says": ""}, {"accepts": "", "name": "\"xs\"", "says": ""}], "kit.Suggestion": [{"accepts": "string", "name": "description", "says": "Line under the name, such as a team or an email address."}, {"accepts": "string", "name": "id", "says": "Identifier of the suggestion, unique among the suggestions."}, {"accepts": "string", "name": "label", "says": "The name listed and inserted after the trigger."}], "kit.Query": [{"accepts": "number", "name": "from", "says": "Index of the trigger character in the text."}, {"accepts": "string", "name": "term", "says": "The text typed after the trigger, up to the caret, without whitespace."}, {"accepts": "string", "name": "trigger", "says": "The trigger character, such as `@`."}], "react.ReactElement": [{"accepts": "string | JSXElementConstructor<any>", "name": "type", "says": ""}, {"accepts": "unknown", "name": "props", "says": ""}, {"accepts": "string | null", "name": "key", "says": ""}], "react.ReactPortal": [{"accepts": "ReactNode", "name": "children", "says": ""}, {"accepts": "string | JSXElementConstructor<any>", "name": "type", "says": ""}, {"accepts": "unknown", "name": "props", "says": ""}, {"accepts": "string | null", "name": "key", "says": ""}]};

package/dist/pages/pages.json

@@ -0,0 +1,66 @@
+{
+  "format": 1,
+  "pages": [
+    {
+      "about": "attachment.about",
+      "group": "",
+      "id": "components/messaging/attachment",
+      "module": "attachment/attachment.js",
+      "namespace": "",
+      "props": "attachment/attachment.props.js",
+      "specimen": "src/attachment/attachment.specimen.tsx",
+      "title": "attachment.title"
+    },
+    {
+      "about": "composer.about",
+      "group": "",
+      "id": "components/messaging/composer",
+      "module": "composer/composer.js",
+      "namespace": "",
+      "props": "composer/composer.props.js",
+      "specimen": "src/composer/composer.specimen.tsx",
+      "title": "composer.title"
+    },
+    {
+      "about": "conversation.about",
+      "group": "",
+      "id": "components/messaging/conversation",
+      "module": "conversation/conversation.js",
+      "namespace": "",
+      "props": "conversation/conversation.props.js",
+      "specimen": "src/conversation/conversation.specimen.tsx",
+      "title": "conversation.title"
+    },
+    {
+      "about": "message.about",
+      "group": "",
+      "id": "components/messaging/message",
+      "module": "message/message.js",
+      "namespace": "",
+      "props": "message/message.props.js",
+      "specimen": "src/message/message.specimen.tsx",
+      "title": "message.title"
+    },
+    {
+      "about": "reactions.about",
+      "group": "",
+      "id": "components/messaging/reactions",
+      "module": "reactions/reactions.js",
+      "namespace": "",
+      "props": "reactions/reactions.props.js",
+      "specimen": "src/reactions/reactions.specimen.tsx",
+      "title": "reactions.title"
+    }
+  ],
+  "requires": {
+    "@stealthscale/component-collections": "^0.1.0",
+    "@stealthscale/component-content": "^0.1.0",
+    "@stealthscale/component-data": "^0.2.0",
+    "@stealthscale/component-feedback": "^0.2.0",
+    "@stealthscale/component-layout": "^0.2.0",
+    "@stealthscale/component-media": "^0.2.0",
+    "@stealthscale/component-typography": "^0.3.0",
+    "@stealthscale/specimen": "^0.3.0",
+    "lucide-react": "^1.52.0"
+  }
+}

package/dist/pages/reactions/reactions.js

@@ -0,0 +1,246 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { a as Item, f as Content, i as Picker, l as Root$1, m as Avatar$1, o as Choice, p as Bubble, r as Root, u as Header } from "../../shared-B0H4dgkB.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Room, specimen, useWords } from "@stealthscale/specimen";
+import { SmilePlusIcon } from "lucide-react";
+import { Avatar } from "@stealthscale/component-media";
+import { Strong } from "@stealthscale/component-typography";
+//#region src/reactions/examples/reacting.example.tsx
+var reacting_example_exports = /* @__PURE__ */ __exportAll({
+	Reacting: () => Reacting,
+	source: () => source
+});
+const KINDS = [
+	"thumbs",
+	"party",
+	"eyes",
+	"heart",
+	"laugh",
+	"rocket"
+];
+const GLYPHS = {
+	eyes: "👀",
+	heart: "❤️",
+	laugh: "😄",
+	party: "🎉",
+	rocket: "🚀",
+	thumbs: "👍"
+};
+const INITIAL = [{
+	count: 3,
+	kind: "thumbs",
+	mine: true
+}, {
+	count: 1,
+	kind: "party",
+	mine: false
+}];
+function toggled(reactions, kind) {
+	const found = reactions.find((one) => one.kind === kind);
+	if (found === void 0) return [...reactions, {
+		count: 1,
+		kind,
+		mine: true
+	}];
+	const count = found.count + (found.mine ? -1 : 1);
+	return count === 0 ? reactions.filter((one) => one.kind !== kind) : reactions.map((one) => one.kind === kind ? {
+		count,
+		kind,
+		mine: !found.mine
+	} : one);
+}
+function Reacting() {
+	const $ = c(43);
+	const { t } = useWords("reactions");
+	const [reactions, setReactions] = useState(INITIAL);
+	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(Header, { children: /* @__PURE__ */ jsx(Strong, { children: t3 }) });
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t) {
+		t5 = t("shipped");
+		$[9] = t;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Bubble, { children: t5 });
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t) {
+		t7 = t("label");
+		$[13] = t;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== reactions || $[16] !== t) {
+		let t9;
+		if ($[18] !== t) {
+			t9 = (reaction) => /* @__PURE__ */ jsx(Item, {
+				count: reaction.count,
+				label: t(reaction.mine ? "mine" : "theirs", {
+					count: reaction.count,
+					name: t(reaction.kind)
+				}),
+				onClick: () => {
+					setReactions((was) => toggled(was, reaction.kind));
+				},
+				pressed: reaction.mine,
+				children: GLYPHS[reaction.kind]
+			}, reaction.kind);
+			$[18] = t;
+			$[19] = t9;
+		} else t9 = $[19];
+		t8 = reactions.map(t9);
+		$[15] = reactions;
+		$[16] = t;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[20] !== t) {
+		t9 = t("choose");
+		$[20] = t;
+		$[21] = t9;
+	} else t9 = $[21];
+	let t10;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(SmilePlusIcon, { size: "1em" });
+		$[22] = t10;
+	} else t10 = $[22];
+	let t11;
+	if ($[23] !== t) {
+		t11 = t("add");
+		$[23] = t;
+		$[24] = t11;
+	} else t11 = $[24];
+	let t12;
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = (value) => {
+			const kind = KINDS.find((one) => one === value);
+			if (kind !== void 0) setReactions((was_0) => toggled(was_0, kind));
+		};
+		$[25] = t12;
+	} else t12 = $[25];
+	let t13;
+	if ($[26] !== t) {
+		t13 = KINDS.map((kind_0) => /* @__PURE__ */ jsx(Choice, {
+			label: t(kind_0),
+			value: kind_0,
+			children: GLYPHS[kind_0]
+		}, kind_0));
+		$[26] = t;
+		$[27] = t13;
+	} else t13 = $[27];
+	let t14;
+	if ($[28] !== t11 || $[29] !== t13 || $[30] !== t9) {
+		t14 = /* @__PURE__ */ jsx(Picker, {
+			choicesLabel: t9,
+			icon: t10,
+			label: t11,
+			onSelect: t12,
+			children: t13
+		});
+		$[28] = t11;
+		$[29] = t13;
+		$[30] = t9;
+		$[31] = t14;
+	} else t14 = $[31];
+	let t15;
+	if ($[32] !== t14 || $[33] !== t7 || $[34] !== t8) {
+		t15 = /* @__PURE__ */ jsxs(Root, {
+			label: t7,
+			children: [t8, t14]
+		});
+		$[32] = t14;
+		$[33] = t7;
+		$[34] = t8;
+		$[35] = t15;
+	} else t15 = $[35];
+	let t16;
+	if ($[36] !== t15 || $[37] !== t4 || $[38] !== t6) {
+		t16 = /* @__PURE__ */ jsxs(Content, { children: [
+			t4,
+			t6,
+			t15
+		] });
+		$[36] = t15;
+		$[37] = t4;
+		$[38] = t6;
+		$[39] = t16;
+	} else t16 = $[39];
+	let t17;
+	if ($[40] !== t16 || $[41] !== t2) {
+		t17 = /* @__PURE__ */ jsxs(Root$1, { children: [t2, t16] });
+		$[40] = t16;
+		$[41] = t2;
+		$[42] = t17;
+	} else t17 = $[42];
+	return t17;
+}
+const source = "import { type ReactElement, useState } from \"react\";\n\nimport { SmilePlusIcon } from \"lucide-react\";\n\nimport { Avatar } from \"@stealthscale/component-media\";\nimport { Strong } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Message, Reactions } from \"@stealthscale/component-messaging\";\n\nconst KINDS = [\"thumbs\", \"party\", \"eyes\", \"heart\", \"laugh\", \"rocket\"] as const;\n\ntype Kind = (typeof KINDS)[number];\n\nconst GLYPHS: Readonly<Record<Kind, string>> = {\n  eyes: \"👀\",\n  heart: \"❤️\",\n  laugh: \"😄\",\n  party: \"🎉\",\n  rocket: \"🚀\",\n  thumbs: \"👍\",\n};\n\ninterface Reaction {\n  readonly count: number;\n  readonly kind: Kind;\n  readonly mine: boolean;\n}\n\nconst INITIAL: readonly Reaction[] = [\n  { count: 3, kind: \"thumbs\", mine: true },\n  { count: 1, kind: \"party\", mine: false },\n];\n\nfunction toggled(reactions: readonly Reaction[], kind: Kind): readonly Reaction[] {\n  const found = reactions.find((one) => one.kind === kind);\n\n  if (found === undefined) return [...reactions, { count: 1, kind, mine: true }];\n\n  const count = found.count + (found.mine ? -1 : 1);\n\n  return count === 0\n    ? reactions.filter((one) => one.kind !== kind)\n    : reactions.map((one) => (one.kind === kind ? { count, kind, mine: !found.mine } : one));\n}\n\nexport function Reacting(): ReactElement {\n  const { t } = useWords(\"reactions\");\n  const [reactions, setReactions] = useState(INITIAL);\n\n  return (\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        </Message.Header>\n        <Message.Bubble>{t(\"shipped\")}</Message.Bubble>\n        <Reactions.Root label={t(\"label\")}>\n          {reactions.map((reaction) => (\n            <Reactions.Item\n              count={reaction.count}\n              key={reaction.kind}\n              label={t(reaction.mine ? \"mine\" : \"theirs\", {\n                count: reaction.count,\n                name: t(reaction.kind),\n              })}\n              onClick={() => {\n                setReactions((was) => toggled(was, reaction.kind));\n              }}\n              pressed={reaction.mine}\n            >\n              {GLYPHS[reaction.kind]}\n            </Reactions.Item>\n          ))}\n          <Reactions.Picker\n            choicesLabel={t(\"choose\")}\n            icon={<SmilePlusIcon size=\"1em\" />}\n            label={t(\"add\")}\n            onSelect={(value) => {\n              const kind = KINDS.find((one) => one === value);\n\n              if (kind !== undefined) setReactions((was) => toggled(was, kind));\n            }}\n          >\n            {KINDS.map((kind) => (\n              <Reactions.Choice key={kind} label={t(kind)} value={kind}>\n                {GLYPHS[kind]}\n              </Reactions.Choice>\n            ))}\n          </Reactions.Picker>\n        </Reactions.Root>\n      </Message.Content>\n    </Message.Root>\n  );\n}\n";
+//#endregion
+//#region src/reactions/reactions.specimen.tsx
+/**
+* Catalogue page for the reactions.
+*
+* @remarks
+*   The recipe has no axis, so the one scene is hand-written: a message with reactions under it
+*   that a press toggles, and a picker that adds one, in a room at the `sm` measure. The words are
+*   keys under `reactions` in `locales/en/specimen/reactions.json`.
+*/
+/**
+* Hand-written scene for reactions under a message.
+*/
+const reacted = {
+	about: "reactions.reacting.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Reacting, {})
+	}),
+	example: reacting_example_exports,
+	title: "reactions.reacting.title"
+};
+var reactions_specimen_default = specimen({
+	about: "reactions.about",
+	id: "components/messaging/reactions",
+	imports: "import { Reactions } from \"@stealthscale/component-messaging\";",
+	scenes: [reacted],
+	title: "reactions.title"
+});
+//#endregion
+export { reactions_specimen_default as default, reacted };

package/dist/pages/reactions/reactions.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"ChoiceProps": {"conditions": 284, "foreign": 1050}, "ItemProps": {"conditions": 284, "foreign": 1051}, "PickerProps": {"conditions": 284, "foreign": 1059}, "RootProps": {"conditions": 284, "foreign": 1044}, "ActionsProps": {"conditions": 284, "foreign": 1041}, "AvatarProps": {"conditions": 284, "foreign": 1041}, "BubbleProps": {"conditions": 284, "foreign": 1041}, "ContentProps": {"conditions": 284, "foreign": 1041}, "FooterProps": {"conditions": 284, "foreign": 1041}, "HeaderProps": {"conditions": 284, "foreign": 1041}, "StatusProps": {"conditions": 284, "foreign": 1041}};
+export const parts = {"ChoiceProps": [{"accepts": "\"glow\" | \"pulse\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "The halo around the button, in the palette's solid at half opacity."}, {"accepts": "Lift", "fallback": "", "kind": "variant", "name": "elevation", "refers": ["kit.Lift"], "required": false, "says": ""}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": true, "says": "Accessible name of the reaction, such as \"Thumbs up\"."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette of every look. The base sets `primary`."}, {"accepts": "\"square\"", "fallback": "", "kind": "variant", "name": "shape", "refers": [], "required": false, "says": ""}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": ""}, {"accepts": "string", "fallback": "", "kind": "option", "name": "value", "refers": [], "required": true, "says": "Value the picker's `onSelect` receives."}, {"accepts": "\"ghost\" | \"glass\" | \"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}], "ItemProps": [{"accepts": "number", "fallback": "", "kind": "option", "name": "count", "refers": [], "required": false, "says": "Number of people who reacted, rendered after the glyph when stated."}, {"accepts": "\"glow\" | \"pulse\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "The halo around the button, in the palette's solid at half opacity."}, {"accepts": "Lift", "fallback": "", "kind": "variant", "name": "elevation", "refers": ["kit.Lift"], "required": false, "says": ""}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": true, "says": "Accessible name: the reaction, the count and whether the reader is among them."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette of every look. The base sets `primary`."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "pressed", "refers": [], "required": false, "says": "Whether the reader is among the people who reacted."}, {"accepts": "\"square\"", "fallback": "", "kind": "variant", "name": "shape", "refers": [], "required": false, "says": ""}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": ""}, {"accepts": "\"ghost\" | \"glass\" | \"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}], "PickerProps": [{"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "children", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "The choices, each a `Reactions.Choice`."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "choicesLabel", "refers": [], "required": false, "says": "Accessible name of the panel, \"Choose a reaction\" unless stated."}, {"accepts": "\"ltr\" | \"rtl\"", "fallback": "\"ltr\"", "kind": "option", "name": "dir", "refers": [], "required": false, "says": "The document's text/writing direction."}, {"accepts": "(() => Document | Node | ShadowRoot)", "fallback": "", "kind": "option", "name": "getRootNode", "refers": [], "required": false, "says": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "icon", "refers": ["react.ReactElement", "react.ReactPortal"], "required": true, "says": "Glyph of the trigger."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "id", "refers": [], "required": false, "says": "The unique identifier of the machine."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": false, "says": "Accessible name of the trigger, \"Add a reaction\" unless stated."}, {"accepts": "((value: string) => void)", "fallback": "", "kind": "option", "name": "onSelect", "refers": [], "required": false, "says": "Called with the value of the choice pressed."}, {"accepts": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "Padding of the panel, text of the title and the description, and size of the close trigger."}, {"accepts": "\"elevated\" | \"glass\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Surface of the panel: the popover surface inside a hairline edge, the panel surface with a large shadow, or the glass layer style."}], "RootProps": [{"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": false, "says": "Accessible name of the row, \"Reactions\" unless stated."}], "ActionsProps": [], "AvatarProps": [], "BubbleProps": [{"accepts": "boolean", "fallback": "", "kind": "option", "name": "failed", "refers": [], "required": false, "says": "Whether the message did not send."}], "ContentProps": [], "FooterProps": [], "HeaderProps": [], "StatusProps": [{"accepts": "MessageStatus", "fallback": "", "kind": "option", "name": "status", "refers": ["kit.MessageStatus"], "required": true, "says": "How far the message has got."}]};
+export const shapes = {"kit.Lift": [{"accepts": "", "name": "\"floating\"", "says": ""}, {"accepts": "", "name": "\"raised\"", "says": ""}], "kit.Scale": [{"accepts": "", "name": "\"2xl\"", "says": ""}, {"accepts": "", "name": "\"3xl\"", "says": ""}, {"accepts": "", "name": "\"4xl\"", "says": ""}, {"accepts": "", "name": "\"lg\"", "says": ""}, {"accepts": "", "name": "\"md\"", "says": ""}, {"accepts": "", "name": "\"sm\"", "says": ""}, {"accepts": "", "name": "\"xl\"", "says": ""}, {"accepts": "", "name": "\"xs\"", "says": ""}], "react.ReactElement": [{"accepts": "string | JSXElementConstructor<any>", "name": "type", "says": ""}, {"accepts": "unknown", "name": "props", "says": ""}, {"accepts": "string | null", "name": "key", "says": ""}], "react.ReactPortal": [{"accepts": "ReactNode", "name": "children", "says": ""}, {"accepts": "string | JSXElementConstructor<any>", "name": "type", "says": ""}, {"accepts": "unknown", "name": "props", "says": ""}, {"accepts": "string | null", "name": "key", "says": ""}], "kit.MessageStatus": [{"accepts": "", "name": "\"delivered\"", "says": ""}, {"accepts": "", "name": "\"failed\"", "says": ""}, {"accepts": "", "name": "\"read\"", "says": ""}, {"accepts": "", "name": "\"sending\"", "says": ""}, {"accepts": "", "name": "\"sent\"", "says": ""}]};

package/dist/{recipe-f6w25oLs.js → recipes-D1oVFnRU.js}

@@ -252,6 +252,7 @@ const recipe$3 = defineSlotRecipe({
 			paddingInline: PADDED
 		},
 		context: {
+			textStyle: "label.sm",
 			"& > :not(button) + button": { marginInlineStart: "auto" },
 			"& > svg": {
 				blockSize: "1em",
@@ -267,12 +268,11 @@ const recipe$3 = defineSlotRecipe({
 			gap: dense("{spacing.gap.sm}"),
 			minInlineSize: "0",
 			paddingBlock: dense("{spacing.gap.xs}"),
-			paddingInline: PADDED,
-			textStyle: "label.sm"
+			paddingInline: PADDED
 		},
 		detail: {
-			color: "fg.muted",
-			textStyle: "label.xs"
+			textStyle: "label.xs",
+			color: "fg.muted"
 		},
 		input: {
 			_placeholder: { color: "fg.muted" },
@@ -303,13 +303,14 @@ const recipe$3 = defineSlotRecipe({
 		},
 		submit: { marginInlineStart: "auto" },
 		suggestion: {
+			textStyle: "label.sm",
 			"&[aria-selected=true]": {
+				layerStyle: "fill.muted",
 				_highContrast: {
 					background: "Highlight",
 					color: "HighlightText",
 					forcedColorAdjust: "none"
-				},
-				layerStyle: "fill.muted"
+				}
 			},
 			alignItems: "baseline",
 			borderRadius: "l1",
@@ -317,8 +318,7 @@ const recipe$3 = defineSlotRecipe({
 			display: "flex",
 			gap: dense("{spacing.gap.sm}"),
 			paddingBlock: dense("{spacing.gap.xs}"),
-			paddingInline: dense("{spacing.inset.sm}"),
-			textStyle: "label.sm"
+			paddingInline: dense("{spacing.inset.sm}")
 		},
 		suggestions: {
 			...surface("md"),
@@ -391,6 +391,7 @@ const recipe$2 = defineSlotRecipe({
 		},
 		dots: {
 			"& > span": {
+				animationStyle: "pulse",
 				_highContrast: {
 					background: "CanvasText",
 					forcedColorAdjust: "none"
@@ -399,7 +400,6 @@ const recipe$2 = defineSlotRecipe({
 					"&:nth-child(2)": { animationDelay: "{durations.moderate}" },
 					"&:nth-child(3)": { animationDelay: "{durations.slower}" }
 				},
-				animationStyle: "pulse",
 				backgroundColor: "currentcolor",
 				blockSize: "0.375em",
 				borderRadius: "full",
@@ -418,11 +418,11 @@ const recipe$2 = defineSlotRecipe({
 		},
 		root: { position: "relative" },
 		typing: {
+			textStyle: "label.sm",
 			alignItems: "center",
 			color: "fg.muted",
 			display: "flex",
-			gap: dense("{spacing.gap.sm}"),
-			textStyle: "label.sm"
+			gap: dense("{spacing.gap.sm}")
 		},
 		viewport: { overscrollBehavior: "contain" }
 	},
@@ -631,9 +631,9 @@ const recipe$1 = defineSlotRecipe({
 		},
 		size: onSlots({
 			bubble: sizeVariants((size) => ({
+				textStyle: METRICS[size].text,
 				paddingBlock: dense(`{spacing.gap.${METRICS[size].padding}}`),
-				paddingInline: dense(`{spacing.inset.${METRICS[size].inline}}`),
-				textStyle: METRICS[size].text
+				paddingInline: dense(`{spacing.inset.${METRICS[size].inline}}`)
 			}), SIZES),
 			footer: sizeVariants((size) => ({ textStyle: METRICS[size].meta }), SIZES),
 			header: sizeVariants((size) => ({ textStyle: METRICS[size].meta }), SIZES),