@stealthscale/component-media 0.2.1 → 0.2.2

package/dist/pages/avatar/avatar.js

@@ -0,0 +1,800 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { o as recipe$1, s as recipe } from "../../recipes-CBo6SSP8.js";
+import { A as Badge, D as Image, E as Root, O as Group, k as Fallback } from "../../shared-DH0DrBx7.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Matrix, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { BadgeCheckIcon, BotIcon, WarehouseIcon } from "lucide-react";
+import { Stack } from "@stealthscale/component-layout";
+import { Span, Text } from "@stealthscale/component-typography";
+//#region src/avatar/examples/bram.webp
+var bram_default = "data:image/webp;base64,UklGRoYCAABXRUJQVlA4IHoCAABQFACdASrAAMAAPsFap1CnpKMiohHKQPAYCWVu4DBp7ynxxw88e/Uw8Nq3wDhA/f5/u7rAGeqiTxd0EeYxNOTh4MNZhycmAztAdOK/lPfcORNiJG75UNj1R1d+TQS05lTPUGOYMAya00pni2g8M59yFr17pReOrYz2nsI389oU9W0dRqzvTed88iEerrx3SKKu48BVW9p7PUjE/Ubds9BstMeBvDXQZ/2XVQAA/s60p//fff35rm+/7S9mvZosE9hE3D98EOqh7al/QOoYnlSpxU8D5qOKLjNsiXXqP0DZUaD4NdhRccauEoW4WQNNPJlbkJYsioBiF9yAAG8OQBVL3UQuY64Zt14enfElXH4IH3Ntz5eXJbzJTrebZsjkhj4OR0pHGEH1bp33udqWjxHHW2T1JjhKGf5cI3GH3Ii4tD3FzFX7ffVKc04AASYqO8fQfRgOHI0j8W5c77NAAFgUeZq/1FYo292n3TJf0lpWcvnO45S8GAy8wmwWC5Mad0/u1/0eJkLFdOlnKtj4vMggZo9Ap0QUn7Xnz3lD6BJjV3/TFabI7bdUeXvFsSGO1+98e0p3fk4WLrSZUnmrRFkmZ40GVQ2O1zUJHmudzC00BY6YiyzSGZlykLEg7qJ9yhU7DdWs7qjO8bGmKd9WsjZhpoovBxf3TjHDkkFfS5UrGbd1iuCQbTBvwjTrvKDt34I6sDmrJuO8lB9BprZ7lnGePUBWXy0JG6IPe1ZNlezusz4RVM1cRBwmXq6mxYvKhtxESo5ulBorCnwZ24Zkmj9tHv4L1hU56mTu5Qg4XlOzTBJtT6qgSOg8bNKEx3sfch5sCxjOPwpJwAAA";
+//#endregion
+//#region src/avatar/examples/badged.example.tsx
+var badged_example_exports = /* @__PURE__ */ __exportAll({
+	Badged: () => Badged,
+	source: () => source$7
+});
+function Badged(props) {
+	const $ = c(12);
+	const { t } = useWords("avatar");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("bram");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Fallback, {});
+		t2 = /* @__PURE__ */ jsx(Image, { src: bram_default });
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	let t3;
+	if ($[4] !== t) {
+		t3 = t("unread");
+		$[4] = t;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== props || $[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Badge, {
+			label: t3,
+			...props,
+			children: "3"
+		});
+		$[6] = props;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t0 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Root, {
+			name: t0,
+			size: "lg",
+			children: [
+				t1,
+				t2,
+				t4
+			]
+		});
+		$[9] = t0;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+}
+const source$7 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Avatar } from \"@stealthscale/component-media\";\n\nimport bram from \"./bram.webp\";\n\nexport function Badged(props: Avatar.BadgeProps): ReactElement {\n  const { t } = useWords(\"avatar\");\n\n  return (\n    <Avatar.Root name={t(\"bram\")} size=\"lg\">\n      <Avatar.Fallback />\n      <Avatar.Image src={bram} />\n      <Avatar.Badge label={t(\"unread\")} {...props}>\n        3\n      </Avatar.Badge>\n    </Avatar.Root>\n  );\n}\n";
+//#endregion
+//#region src/avatar/examples/ada.webp
+var ada_default = "data:image/webp;base64,UklGRmwCAABXRUJQVlA4IGACAACwFACdASrAAMAAPsFSpVEnqKOiodIKwRAYCWdu4DN6B1/GcNrLnxapwdkA4QSmvp/n3bvyAQrvTRbZkxvHbkhi0M0XHWbzJ9rDmi1POQ0ZiKR6jCNwvdyIsnCtdD+FiJI5zON32nnbVSkK5G/2uDt3QTk3Or0mbeKOtbkz3fMB04YSfounWYy1AIZ9lsYm3ooGgkdAFb2LX/bAe5enAN/Q39xZ1iZaV9mJLxj6cAAA/tAmEWxH/jf40fapMffCexM/qWa6yBQzgwkY0jGkvo4XhnV70I6kDl5bxBM/LFiFmqnpf8Fi2xzzzbyRAYztyZHVo1ndzi0/fo8E3QHf+WWawiPVx1YlsaI+Fftyreaa8TT4DCZR9q3uw2FxmzBLz53iz98mtKDBCo9StuyNIcdqL87iXlbrg3a3UGDgpKhYDk8lS6PjyjeiH6yeawmVZtYAH7MBYiajYTTPXl74xpp+x5YliC75NXdXkackSxdYrcZ0VCWdafuyDMNF4kcb56EXUopnCS+EzPrk08v4RNdILbtr+HnaNTABAehprNbUAyvM0dLC9qsGOywLrASu6+bT9uztCoAStLRLfMvkgKWbGmH+UNurhTSZ8czQ9mxReLbJISjUvWmKeUggxmHt7Gv7G753B22sA8DBJXYNzEYizf9Z9/dMiSZdlyJ5KM844wiGqMTAsc0JYwJD5ntaIRlkA+x5O0dUpSg3BGBT+0/eSh0CYNkvhPqH6xjArXpfgwQ/Shmv4ZGyKw7alGA22C3YNImBEyl+8LbbSqzMp1K8on0qgm2puzUS6MutfmkwAA==";
+//#endregion
+//#region src/avatar/examples/cleo.webp
+var cleo_default = "data:image/webp;base64,UklGRiABAABXRUJQVlA4IBQBAAAQDQCdASrAAMAAPtFosVMoJaSioEgBABoJaW7hdrBXFx29ABPa9FXCDIRGRWt7zeCl6EHJff/yruWJVXCDYt7zYZ4Z45HQY5PX3/1lgIMTf7zY5FidPEffQ4UWWenhNGyihEYh9TqqTXbjYGQzIIao4AD+/tbX/an2Ed+HaM+FrKtXy77YEmbUdEALoLGCJ06b8vYMzvFqG4yiK7Ojg6DMVfFYLP3LkB6TfcEch3ue2QOjB565EcLFaEtTQ3G4/W5kPhO0F2fx6I7tju5rp8M2rhEEERr16JxUalLP7R8fM7cmJChubkpXBX03GsMPsiSHFUbZ/xO8aLbPcOJE6lxVXeRifbzok54Z3PEFcmgr+YqvcAA=";
+//#endregion
+//#region src/avatar/examples/devi.webp
+var devi_default = "data:image/webp;base64,UklGRgYBAABXRUJQVlA4IPoAAADwDgCdASrAAMAAPtFosFMoJaSioEgBABoJaW7hdngWJ+z/6LIAAAU0qgFWTboGTWmJ1V2XHwK68iizLfz8QaBPLORTWZb+fJfOtHiLnVS3UUF/Efm8P1UAqybbr9CkqoSVlkXBVk5GnpKrdTpwqAVZNfoudaQrRHH5eIudl5z0ogD+/uk3n/8gx8lPoa2+/8UAxNX+UAD1+QMliZfaYkOZnY2S34qL1XtFn3AAPQfgAqAUa7Nv8xh6QobLheKXqID40ACQRI9SD7SbARnosESVkPKFnwk0YB2Bp5rkaQHDH387Tu/WtkE7FQkMv5ZGF7fA4cB+FDLiBwAA";
+//#endregion
+//#region src/avatar/examples/badges.example.tsx
+var badges_example_exports = /* @__PURE__ */ __exportAll({
+	Badges: () => Badges,
+	source: () => source$6
+});
+function Badges() {
+	const $ = c(50);
+	const { t } = useWords("avatar");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("ada");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Fallback, {});
+		t2 = /* @__PURE__ */ jsx(Image, { src: ada_default });
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	let t3;
+	if ($[4] !== t) {
+		t3 = t("online");
+		$[4] = t;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Badge, {
+			label: t3,
+			palette: "success"
+		});
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t0 || $[9] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Root, {
+			name: t0,
+			size: "lg",
+			children: [
+				t1,
+				t2,
+				t4
+			]
+		});
+		$[8] = t0;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("bram");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	let t8;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(Fallback, {});
+		t8 = /* @__PURE__ */ jsx(Image, { src: bram_default });
+		$[13] = t7;
+		$[14] = t8;
+	} else {
+		t7 = $[13];
+		t8 = $[14];
+	}
+	let t9;
+	if ($[15] !== t) {
+		t9 = t("unread");
+		$[15] = t;
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Badge, {
+			label: t9,
+			palette: "error",
+			placement: "top-end",
+			children: "3"
+		});
+		$[17] = t9;
+		$[18] = t10;
+	} else t10 = $[18];
+	let t11;
+	if ($[19] !== t10 || $[20] !== t6) {
+		t11 = /* @__PURE__ */ jsxs(Root, {
+			name: t6,
+			size: "lg",
+			children: [
+				t7,
+				t8,
+				t10
+			]
+		});
+		$[19] = t10;
+		$[20] = t6;
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] !== t) {
+		t12 = t("cleo");
+		$[22] = t;
+		$[23] = t12;
+	} else t12 = $[23];
+	let t13;
+	let t14;
+	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ jsx(Fallback, {});
+		t14 = /* @__PURE__ */ jsx(Image, { src: cleo_default });
+		$[24] = t13;
+		$[25] = t14;
+	} else {
+		t13 = $[24];
+		t14 = $[25];
+	}
+	let t15;
+	if ($[26] !== t) {
+		t15 = t("holiday");
+		$[26] = t;
+		$[27] = t15;
+	} else t15 = $[27];
+	let t16;
+	if ($[28] !== t15) {
+		t16 = /* @__PURE__ */ jsx(Badge, {
+			label: t15,
+			variant: "subtle",
+			children: "🌴"
+		});
+		$[28] = t15;
+		$[29] = t16;
+	} else t16 = $[29];
+	let t17;
+	if ($[30] !== t12 || $[31] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(Root, {
+			name: t12,
+			size: "lg",
+			children: [
+				t13,
+				t14,
+				t16
+			]
+		});
+		$[30] = t12;
+		$[31] = t16;
+		$[32] = t17;
+	} else t17 = $[32];
+	let t18;
+	if ($[33] !== t) {
+		t18 = t("devi");
+		$[33] = t;
+		$[34] = t18;
+	} else t18 = $[34];
+	let t19;
+	let t20;
+	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+		t19 = /* @__PURE__ */ jsx(Fallback, {});
+		t20 = /* @__PURE__ */ jsx(Image, { src: devi_default });
+		$[35] = t19;
+		$[36] = t20;
+	} else {
+		t19 = $[35];
+		t20 = $[36];
+	}
+	let t21;
+	if ($[37] !== t) {
+		t21 = t("verified");
+		$[37] = t;
+		$[38] = t21;
+	} else t21 = $[38];
+	let t22;
+	if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
+		t22 = /* @__PURE__ */ jsx(BadgeCheckIcon, {});
+		$[39] = t22;
+	} else t22 = $[39];
+	let t23;
+	if ($[40] !== t21) {
+		t23 = /* @__PURE__ */ jsx(Badge, {
+			label: t21,
+			palette: "primary",
+			children: t22
+		});
+		$[40] = t21;
+		$[41] = t23;
+	} else t23 = $[41];
+	let t24;
+	if ($[42] !== t18 || $[43] !== t23) {
+		t24 = /* @__PURE__ */ jsxs(Root, {
+			name: t18,
+			size: "lg",
+			children: [
+				t19,
+				t20,
+				t23
+			]
+		});
+		$[42] = t18;
+		$[43] = t23;
+		$[44] = t24;
+	} else t24 = $[44];
+	let t25;
+	if ($[45] !== t11 || $[46] !== t17 || $[47] !== t24 || $[48] !== t5) {
+		t25 = /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			gap: "xl",
+			children: [
+				t5,
+				t11,
+				t17,
+				t24
+			]
+		});
+		$[45] = t11;
+		$[46] = t17;
+		$[47] = t24;
+		$[48] = t5;
+		$[49] = t25;
+	} else t25 = $[49];
+	return t25;
+}
+const source$6 = "import { type ReactElement } from \"react\";\n\nimport { BadgeCheckIcon } from \"lucide-react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Avatar } from \"@stealthscale/component-media\";\n\nimport ada from \"./ada.webp\";\nimport bram from \"./bram.webp\";\nimport cleo from \"./cleo.webp\";\nimport devi from \"./devi.webp\";\n\nexport function Badges(): ReactElement {\n  const { t } = useWords(\"avatar\");\n\n  return (\n    <Stack direction=\"row\" gap=\"xl\">\n      <Avatar.Root name={t(\"ada\")} size=\"lg\">\n        <Avatar.Fallback />\n        <Avatar.Image src={ada} />\n        <Avatar.Badge label={t(\"online\")} palette=\"success\" />\n      </Avatar.Root>\n      <Avatar.Root name={t(\"bram\")} size=\"lg\">\n        <Avatar.Fallback />\n        <Avatar.Image src={bram} />\n        <Avatar.Badge label={t(\"unread\")} palette=\"error\" placement=\"top-end\">\n          3\n        </Avatar.Badge>\n      </Avatar.Root>\n      <Avatar.Root name={t(\"cleo\")} size=\"lg\">\n        <Avatar.Fallback />\n        <Avatar.Image src={cleo} />\n        <Avatar.Badge label={t(\"holiday\")} variant=\"subtle\">\n          🌴\n        </Avatar.Badge>\n      </Avatar.Root>\n      <Avatar.Root name={t(\"devi\")} size=\"lg\">\n        <Avatar.Fallback />\n        <Avatar.Image src={devi} />\n        <Avatar.Badge label={t(\"verified\")} palette=\"primary\">\n          <BadgeCheckIcon />\n        </Avatar.Badge>\n      </Avatar.Root>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/avatar/examples/byline.example.tsx
+var byline_example_exports = /* @__PURE__ */ __exportAll({
+	Byline: () => Byline,
+	source: () => source$5
+});
+function Byline() {
+	const $ = c(18);
+	const { t } = useWords("avatar");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("ada");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Fallback, {});
+		t2 = /* @__PURE__ */ jsx(Image, { src: ada_default });
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	let t3;
+	if ($[4] !== t0) {
+		t3 = /* @__PURE__ */ jsxs(Root, {
+			"aria-hidden": true,
+			name: t0,
+			size: "2xs",
+			children: [t1, t2]
+		});
+		$[4] = t0;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t) {
+		t4 = t("ada");
+		$[6] = t;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Span, {
+			weight: "semibold",
+			children: t4
+		});
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t) {
+		t6 = t("commented");
+		$[10] = t;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Span, {
+			tone: "muted",
+			children: t6
+		});
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t3 || $[15] !== t5 || $[16] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Text, {
+			size: "sm",
+			children: [
+				t3,
+				" ",
+				t5,
+				" ",
+				t7
+			]
+		});
+		$[14] = t3;
+		$[15] = t5;
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	return t8;
+}
+const source$5 = "import { type ReactElement } from \"react\";\n\nimport { Span, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Avatar } from \"@stealthscale/component-media\";\n\nimport ada from \"./ada.webp\";\n\nexport function Byline(): ReactElement {\n  const { t } = useWords(\"avatar\");\n\n  return (\n    <Text size=\"sm\">\n      <Avatar.Root aria-hidden name={t(\"ada\")} size=\"2xs\">\n        <Avatar.Fallback />\n        <Avatar.Image src={ada} />\n      </Avatar.Root>{\" \"}\n      <Span weight=\"semibold\">{t(\"ada\")}</Span> <Span tone=\"muted\">{t(\"commented\")}</Span>\n    </Text>\n  );\n}\n";
+//#endregion
+//#region src/avatar/examples/person.example.tsx
+var person_example_exports = /* @__PURE__ */ __exportAll({
+	Person: () => Person,
+	source: () => source$4
+});
+function Person(props) {
+	const $ = c(6);
+	const { t } = useWords("avatar");
+	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(Fallback, {});
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== props || $[4] !== t0) {
+		t2 = /* @__PURE__ */ jsx(Root, {
+			name: t0,
+			...props,
+			children: t1
+		});
+		$[3] = props;
+		$[4] = t0;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Avatar } from \"@stealthscale/component-media\";\n\nexport function Person(props: Avatar.RootProps): ReactElement {\n  const { t } = useWords(\"avatar\");\n\n  return (\n    <Avatar.Root name={t(\"ada\")} {...props}>\n      <Avatar.Fallback />\n    </Avatar.Root>\n  );\n}\n";
+//#endregion
+//#region src/avatar/examples/pictures.example.tsx
+var pictures_example_exports = /* @__PURE__ */ __exportAll({
+	Pictures: () => Pictures,
+	source: () => source$3
+});
+const PEOPLE = [
+	["ada", ada_default],
+	["bram", bram_default],
+	["cleo", void 0]
+];
+function Pictures() {
+	const $ = c(4);
+	const { t } = useWords("avatar");
+	let t0;
+	if ($[0] !== t) {
+		t0 = PEOPLE.map((t1) => {
+			const [person, picture] = t1;
+			return /* @__PURE__ */ jsxs(Root, {
+				name: t(person),
+				children: [/* @__PURE__ */ jsx(Fallback, {}), picture === void 0 ? null : /* @__PURE__ */ jsx(Image, { src: picture })]
+			}, person);
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Group, {
+			size: "lg",
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Avatar } from \"@stealthscale/component-media\";\n\nimport ada from \"./ada.webp\";\nimport bram from \"./bram.webp\";\n\nconst PEOPLE = [\n  [\"ada\", ada],\n  [\"bram\", bram],\n  [\"cleo\", undefined],\n] as const;\n\nexport function Pictures(): ReactElement {\n  const { t } = useWords(\"avatar\");\n\n  return (\n    <Avatar.Group size=\"lg\">\n      {PEOPLE.map(([person, picture]) => (\n        <Avatar.Root key={person} name={t(person)}>\n          <Avatar.Fallback />\n          {picture === undefined ? null : <Avatar.Image src={picture} />}\n        </Avatar.Root>\n      ))}\n    </Avatar.Group>\n  );\n}\n";
+//#endregion
+//#region src/avatar/examples/presence.example.tsx
+var presence_example_exports = /* @__PURE__ */ __exportAll({
+	Presence: () => Presence,
+	source: () => source$2
+});
+function Presence(props) {
+	const $ = c(11);
+	const { t } = useWords("avatar");
+	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(Fallback, {});
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("online");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Badge, {
+			label: t2,
+			palette: "success"
+		});
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== props || $[8] !== t0 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Root, {
+			name: t0,
+			...props,
+			children: [t1, t3]
+		});
+		$[7] = props;
+		$[8] = t0;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Avatar } from \"@stealthscale/component-media\";\n\nexport function Presence(props: Avatar.RootProps): ReactElement {\n  const { t } = useWords(\"avatar\");\n\n  return (\n    <Avatar.Root name={t(\"ada\")} {...props}>\n      <Avatar.Fallback />\n      <Avatar.Badge label={t(\"online\")} palette=\"success\" />\n    </Avatar.Root>\n  );\n}\n";
+//#endregion
+//#region src/avatar/examples/services.example.tsx
+var services_example_exports = /* @__PURE__ */ __exportAll({
+	Services: () => Services,
+	source: () => source$1
+});
+function Services() {
+	const $ = c(19);
+	const { t } = useWords("avatar");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("deployBot");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Fallback, { children: /* @__PURE__ */ jsx(BotIcon, {}) });
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t0) {
+		t2 = /* @__PURE__ */ jsx(Root, {
+			name: t0,
+			palette: "primary",
+			shape: "square",
+			variant: "solid",
+			children: t1
+		});
+		$[3] = t0;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("warehouse");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(Fallback, { children: /* @__PURE__ */ jsx(WarehouseIcon, {}) });
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t3) {
+		t5 = /* @__PURE__ */ jsx(Root, {
+			name: t3,
+			palette: "accent",
+			shape: "rounded",
+			children: t4
+		});
+		$[8] = t3;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t) {
+		t6 = t("northwind");
+		$[10] = t;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(Fallback, {});
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== t6) {
+		t8 = /* @__PURE__ */ jsx(Root, {
+			name: t6,
+			shape: "rounded",
+			variant: "outline",
+			children: t7
+		});
+		$[13] = t6;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== t2 || $[16] !== t5 || $[17] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			gap: "md",
+			children: [
+				t2,
+				t5,
+				t8
+			]
+		});
+		$[15] = t2;
+		$[16] = t5;
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	return t9;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { BotIcon, WarehouseIcon } from \"lucide-react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Avatar } from \"@stealthscale/component-media\";\n\nexport function Services(): ReactElement {\n  const { t } = useWords(\"avatar\");\n\n  return (\n    <Stack direction=\"row\" gap=\"md\">\n      <Avatar.Root name={t(\"deployBot\")} palette=\"primary\" shape=\"square\" variant=\"solid\">\n        <Avatar.Fallback>\n          <BotIcon />\n        </Avatar.Fallback>\n      </Avatar.Root>\n      <Avatar.Root name={t(\"warehouse\")} palette=\"accent\" shape=\"rounded\">\n        <Avatar.Fallback>\n          <WarehouseIcon />\n        </Avatar.Fallback>\n      </Avatar.Root>\n      <Avatar.Root name={t(\"northwind\")} shape=\"rounded\" variant=\"outline\">\n        <Avatar.Fallback />\n      </Avatar.Root>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/avatar/examples/team.example.tsx
+var team_example_exports = /* @__PURE__ */ __exportAll({
+	Team: () => Team,
+	source: () => source
+});
+const TEAM = [
+	["ada", ada_default],
+	["bram", bram_default],
+	["cleo", cleo_default],
+	["devi", devi_default]
+];
+function Team(props) {
+	const $ = c(11);
+	const { t } = useWords("avatar");
+	let t0;
+	if ($[0] !== t) {
+		t0 = TEAM.map((t1) => {
+			const [person, picture] = t1;
+			return /* @__PURE__ */ jsxs(Root, {
+				name: t(person),
+				children: [/* @__PURE__ */ jsx(Fallback, {}), /* @__PURE__ */ jsx(Image, { src: picture })]
+			}, person);
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("more");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Fallback, { children: "+3" });
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t1) {
+		t3 = /* @__PURE__ */ jsx(Root, {
+			name: t1,
+			children: t2
+		});
+		$[5] = t1;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== props || $[8] !== t0 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Group, {
+			...props,
+			children: [t0, t3]
+		});
+		$[7] = props;
+		$[8] = t0;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Avatar } from \"@stealthscale/component-media\";\n\nimport ada from \"./ada.webp\";\nimport bram from \"./bram.webp\";\nimport cleo from \"./cleo.webp\";\nimport devi from \"./devi.webp\";\n\nconst TEAM = [\n  [\"ada\", ada],\n  [\"bram\", bram],\n  [\"cleo\", cleo],\n  [\"devi\", devi],\n] as const;\n\nexport function Team(props: Avatar.GroupProps): ReactElement {\n  const { t } = useWords(\"avatar\");\n\n  return (\n    <Avatar.Group {...props}>\n      {TEAM.map(([person, picture]) => (\n        <Avatar.Root key={person} name={t(person)}>\n          <Avatar.Fallback />\n          <Avatar.Image src={picture} />\n        </Avatar.Root>\n      ))}\n      <Avatar.Root name={t(\"more\")}>\n        <Avatar.Fallback>+3</Avatar.Fallback>\n      </Avatar.Root>\n    </Avatar.Group>\n  );\n}\n";
+//#endregion
+//#region src/avatar/avatar.specimen.tsx
+/**
+* Catalogue page for the avatar.
+*
+* @remarks
+*   `scenesOf` generates the size, shape, palette and effect scenes from the avatar recipe, each
+*   rendering one person's initials. The palette scene crosses the looks, and the effect scene uses
+*   the primary palette. It generates the badge's palette, placement and look scenes from the badge
+*   recipe on a large avatar with a count. Hand-written scenes render pictures beside initials, a
+*   team group, the four kinds of badge, a status dot at every size, a byline beside a name in
+*   words, and services with icons. The pictures are generated gradients beside the examples, so no
+*   scene loads from the network. The words are keys under `avatar` in
+*   `locales/en/specimen/avatar.json`.
+*/
+/**
+* Sizes of the status scene, smallest first.
+*/
+const SIZES = [
+	"2xs",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl"
+];
+/**
+* Hand-written scene for pictures beside a person without one.
+*/
+const pictures = {
+	about: "avatar.pictures.about",
+	draw: Pictures,
+	example: pictures_example_exports,
+	title: "avatar.pictures.title"
+};
+/**
+* Hand-written scene for a group with a count of the people left out.
+*/
+const team = {
+	about: "avatar.team.about",
+	draw: Team,
+	example: team_example_exports,
+	title: "avatar.team.title"
+};
+/**
+* Hand-written scene for a status dot, a count, an emoji and an icon.
+*/
+const badges = {
+	about: "avatar.badges.about",
+	draw: Badges,
+	example: badges_example_exports,
+	title: "avatar.badges.title"
+};
+/**
+* Hand-written scene for a status dot at every size.
+*/
+const presence = {
+	about: "avatar.presence.about",
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		knob: "size",
+		of: SIZES,
+		children: (size) => /* @__PURE__ */ jsx(Presence, { size })
+	}),
+	example: presence_example_exports,
+	props: { size: "2xs" },
+	title: "avatar.presence.title"
+};
+/**
+* Hand-written scene for an avatar beside the same name in words.
+*/
+const byline = {
+	about: "avatar.byline.about",
+	draw: Byline,
+	example: byline_example_exports,
+	title: "avatar.byline.title"
+};
+/**
+* Hand-written scene for services and companies in square and rounded boxes.
+*/
+const services = {
+	about: "avatar.services.about",
+	draw: Services,
+	example: services_example_exports,
+	title: "avatar.services.title"
+};
+var avatar_specimen_default = specimen({
+	about: "avatar.about",
+	id: "components/media/avatar",
+	imports: "import { Avatar } from \"@stealthscale/component-media\";",
+	scenes: [
+		...scenesOf(recipe, {
+			axes: {
+				effect: { with: { palette: "primary" } },
+				palette: { across: "variant" }
+			},
+			draw: (props) => /* @__PURE__ */ jsx(Person, { ...props }),
+			example: person_example_exports,
+			namespace: "avatar",
+			order: [
+				"size",
+				"shape",
+				"palette",
+				"effect"
+			]
+		}),
+		pictures,
+		team,
+		badges,
+		presence,
+		...scenesOf(recipe$1, {
+			draw: (props) => /* @__PURE__ */ jsx(Badged, { ...props }),
+			example: badged_example_exports,
+			namespace: "avatar.badge",
+			order: [
+				"placement",
+				"palette",
+				"variant"
+			]
+		}),
+		byline,
+		services
+	],
+	title: "avatar.title"
+});
+//#endregion
+export { badges, byline, avatar_specimen_default as default, pictures, presence, services, team };