@stealthscale/component-screen 0.2.1 → 0.2.3

package/dist/pages/section/section.js

@@ -0,0 +1,1241 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { B as Root, G as Actions, H as Footer, K as Action, U as Description, V as Header, W as Body, X as Title$1, ct as Description$1, dt as Body$1, et as Root$1, ot as Header$1, z as Title } from "../../shared-DxlFabHA.js";
+import { c } from "react/compiler-runtime";
+import { Button } from "@stealthscale/component-actions";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Input, Switch } from "@stealthscale/component-forms";
+import { Stack } from "@stealthscale/component-layout";
+import { Room, Screen, specimen, useWords } from "@stealthscale/specimen";
+import { DownloadIcon, EllipsisIcon, KeyRoundIcon, PencilIcon, UserPlusIcon } from "lucide-react";
+import { Text } from "@stealthscale/component-typography";
+import { Table } from "@stealthscale/component-collections";
+//#region src/section/examples/cards.example.tsx
+var cards_example_exports = /* @__PURE__ */ __exportAll({
+	Cards: () => Cards,
+	source: () => source$3
+});
+const MEMBERS$1 = [
+	{
+		name: "Mara Lindqvist",
+		role: "owner"
+	},
+	{
+		name: "Jonas Berg",
+		role: "admin"
+	},
+	{
+		name: "Priya Nair",
+		role: "member"
+	}
+];
+function Cards(props) {
+	const $ = c(88);
+	const { t } = useWords("section");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("rename.title");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Title, {
+			as: "h3",
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("rename.about");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Description, { children: t2 });
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t1 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Header, { children: [t1, t3] });
+		$[8] = t1;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== t) {
+		t5 = t("rename.title");
+		$[11] = t;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(Input, {
+			"aria-label": t5,
+			defaultValue: "Ledger",
+			maxLength: 32,
+			size: "sm"
+		}) });
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== t) {
+		t7 = t("rename.limit");
+		$[15] = t;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			tone: "muted",
+			children: t7
+		});
+		$[17] = t7;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== t) {
+		t9 = t("rename.save");
+		$[19] = t;
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			children: t9
+		});
+		$[21] = t9;
+		$[22] = t10;
+	} else t10 = $[22];
+	let t11;
+	if ($[23] !== t10 || $[24] !== t8) {
+		t11 = /* @__PURE__ */ jsxs(Footer, { children: [t8, t10] });
+		$[23] = t10;
+		$[24] = t8;
+		$[25] = t11;
+	} else t11 = $[25];
+	let t12;
+	if ($[26] !== props || $[27] !== t11 || $[28] !== t4 || $[29] !== t6) {
+		t12 = /* @__PURE__ */ jsxs(Root, {
+			variant: "surface",
+			...props,
+			children: [
+				t4,
+				t6,
+				t11
+			]
+		});
+		$[26] = props;
+		$[27] = t11;
+		$[28] = t4;
+		$[29] = t6;
+		$[30] = t12;
+	} else t12 = $[30];
+	let t13;
+	if ($[31] !== t) {
+		t13 = t("members.title");
+		$[31] = t;
+		$[32] = t13;
+	} else t13 = $[32];
+	let t14;
+	if ($[33] !== t13) {
+		t14 = /* @__PURE__ */ jsx(Title, {
+			as: "h3",
+			children: t13
+		});
+		$[33] = t13;
+		$[34] = t14;
+	} else t14 = $[34];
+	let t15;
+	if ($[35] !== t) {
+		t15 = t("members.about");
+		$[35] = t;
+		$[36] = t15;
+	} else t15 = $[36];
+	let t16;
+	if ($[37] !== t15) {
+		t16 = /* @__PURE__ */ jsx(Description, { children: t15 });
+		$[37] = t15;
+		$[38] = t16;
+	} else t16 = $[38];
+	let t17;
+	if ($[39] !== t) {
+		t17 = t("members.more");
+		$[39] = t;
+		$[40] = t17;
+	} else t17 = $[40];
+	let t18;
+	if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+		t18 = /* @__PURE__ */ jsx(EllipsisIcon, { size: "1em" });
+		$[41] = t18;
+	} else t18 = $[41];
+	let t19;
+	if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+		t19 = /* @__PURE__ */ jsx(PencilIcon, { size: "1em" });
+		$[42] = t19;
+	} else t19 = $[42];
+	let t20;
+	if ($[43] !== t) {
+		t20 = t("members.roles");
+		$[43] = t;
+		$[44] = t20;
+	} else t20 = $[44];
+	let t21;
+	if ($[45] !== t20) {
+		t21 = /* @__PURE__ */ jsx(Action, {
+			icon: t19,
+			children: t20
+		});
+		$[45] = t20;
+		$[46] = t21;
+	} else t21 = $[46];
+	let t22;
+	if ($[47] !== t) {
+		t22 = t("members.export");
+		$[47] = t;
+		$[48] = t22;
+	} else t22 = $[48];
+	let t23;
+	if ($[49] !== t22) {
+		t23 = /* @__PURE__ */ jsx(Action, { children: t22 });
+		$[49] = t22;
+		$[50] = t23;
+	} else t23 = $[50];
+	let t24;
+	if ($[51] === Symbol.for("react.memo_cache_sentinel")) {
+		t24 = /* @__PURE__ */ jsx(UserPlusIcon, { size: "1em" });
+		$[51] = t24;
+	} else t24 = $[51];
+	let t25;
+	if ($[52] !== t) {
+		t25 = t("members.invite");
+		$[52] = t;
+		$[53] = t25;
+	} else t25 = $[53];
+	let t26;
+	if ($[54] !== t25) {
+		t26 = /* @__PURE__ */ jsx(Action, {
+			icon: t24,
+			primary: true,
+			children: t25
+		});
+		$[54] = t25;
+		$[55] = t26;
+	} else t26 = $[55];
+	let t27;
+	if ($[56] !== t17 || $[57] !== t21 || $[58] !== t23 || $[59] !== t26) {
+		t27 = /* @__PURE__ */ jsxs(Actions, {
+			more: t17,
+			moreIcon: t18,
+			children: [
+				t21,
+				t23,
+				t26
+			]
+		});
+		$[56] = t17;
+		$[57] = t21;
+		$[58] = t23;
+		$[59] = t26;
+		$[60] = t27;
+	} else t27 = $[60];
+	let t28;
+	if ($[61] !== t14 || $[62] !== t16 || $[63] !== t27) {
+		t28 = /* @__PURE__ */ jsxs(Header, { children: [
+			t14,
+			t16,
+			t27
+		] });
+		$[61] = t14;
+		$[62] = t16;
+		$[63] = t27;
+		$[64] = t28;
+	} else t28 = $[64];
+	let t29;
+	if ($[65] !== t) {
+		t29 = MEMBERS$1.map((t30) => {
+			const { name, role } = t30;
+			return /* @__PURE__ */ jsxs(Table.Row, { children: [/* @__PURE__ */ jsx(Table.RowHeader, { children: name }), /* @__PURE__ */ jsx(Table.Cell, {
+				"data-numeric": true,
+				children: /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					tone: "muted",
+					children: t(`roles.${role}`)
+				})
+			})] }, name);
+		});
+		$[65] = t;
+		$[66] = t29;
+	} else t29 = $[66];
+	let t30;
+	if ($[67] !== t29) {
+		t30 = /* @__PURE__ */ jsx(Body, {
+			bleed: true,
+			children: /* @__PURE__ */ jsx(Table.Scroller, { children: /* @__PURE__ */ jsx(Table.Root, { children: /* @__PURE__ */ jsx(Table.Body, { children: t29 }) }) })
+		});
+		$[67] = t29;
+		$[68] = t30;
+	} else t30 = $[68];
+	let t31;
+	if ($[69] !== t) {
+		t31 = t("members.seats");
+		$[69] = t;
+		$[70] = t31;
+	} else t31 = $[70];
+	let t32;
+	if ($[71] !== t31) {
+		t32 = /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			tone: "muted",
+			children: t31
+		});
+		$[71] = t31;
+		$[72] = t32;
+	} else t32 = $[72];
+	let t33;
+	if ($[73] !== t) {
+		t33 = t("members.manage");
+		$[73] = t;
+		$[74] = t33;
+	} else t33 = $[74];
+	let t34;
+	if ($[75] !== t33) {
+		t34 = /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "ghost",
+			children: t33
+		});
+		$[75] = t33;
+		$[76] = t34;
+	} else t34 = $[76];
+	let t35;
+	if ($[77] !== t32 || $[78] !== t34) {
+		t35 = /* @__PURE__ */ jsxs(Footer, { children: [t32, t34] });
+		$[77] = t32;
+		$[78] = t34;
+		$[79] = t35;
+	} else t35 = $[79];
+	let t36;
+	if ($[80] !== props || $[81] !== t28 || $[82] !== t30 || $[83] !== t35) {
+		t36 = /* @__PURE__ */ jsxs(Root, {
+			variant: "surface",
+			...props,
+			children: [
+				t28,
+				t30,
+				t35
+			]
+		});
+		$[80] = props;
+		$[81] = t28;
+		$[82] = t30;
+		$[83] = t35;
+		$[84] = t36;
+	} else t36 = $[84];
+	let t37;
+	if ($[85] !== t12 || $[86] !== t36) {
+		t37 = /* @__PURE__ */ jsxs(Fragment, { children: [t12, t36] });
+		$[85] = t12;
+		$[86] = t36;
+		$[87] = t37;
+	} else t37 = $[87];
+	return t37;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { EllipsisIcon, PencilIcon, UserPlusIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Table } from \"@stealthscale/component-collections\";\nimport { Input } from \"@stealthscale/component-forms\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Section } from \"@stealthscale/component-screen\";\n\nconst MEMBERS = [\n  { name: \"Mara Lindqvist\", role: \"owner\" },\n  { name: \"Jonas Berg\", role: \"admin\" },\n  { name: \"Priya Nair\", role: \"member\" },\n] as const;\n\nexport function Cards(props: Section.RootProps): ReactElement {\n  const { t } = useWords(\"section\");\n\n  return (\n    <>\n      <Section.Root variant=\"surface\" {...props}>\n        <Section.Header>\n          <Section.Title as=\"h3\">{t(\"rename.title\")}</Section.Title>\n          <Section.Description>{t(\"rename.about\")}</Section.Description>\n        </Section.Header>\n        <Section.Body>\n          <Input aria-label={t(\"rename.title\")} defaultValue=\"Ledger\" maxLength={32} size=\"sm\" />\n        </Section.Body>\n        <Section.Footer>\n          <Text size=\"sm\" tone=\"muted\">\n            {t(\"rename.limit\")}\n          </Text>\n          <Button size=\"sm\">{t(\"rename.save\")}</Button>\n        </Section.Footer>\n      </Section.Root>\n      <Section.Root variant=\"surface\" {...props}>\n        <Section.Header>\n          <Section.Title as=\"h3\">{t(\"members.title\")}</Section.Title>\n          <Section.Description>{t(\"members.about\")}</Section.Description>\n          <Section.Actions more={t(\"members.more\")} moreIcon={<EllipsisIcon size=\"1em\" />}>\n            <Section.Action icon={<PencilIcon size=\"1em\" />}>{t(\"members.roles\")}</Section.Action>\n            <Section.Action>{t(\"members.export\")}</Section.Action>\n            <Section.Action icon={<UserPlusIcon size=\"1em\" />} primary>\n              {t(\"members.invite\")}\n            </Section.Action>\n          </Section.Actions>\n        </Section.Header>\n        <Section.Body bleed>\n          <Table.Scroller>\n            <Table.Root>\n              <Table.Body>\n                {MEMBERS.map(({ name, role }) => (\n                  <Table.Row key={name}>\n                    <Table.RowHeader>{name}</Table.RowHeader>\n                    <Table.Cell data-numeric>\n                      <Text as=\"span\" tone=\"muted\">\n                        {t(`roles.${role}`)}\n                      </Text>\n                    </Table.Cell>\n                  </Table.Row>\n                ))}\n              </Table.Body>\n            </Table.Root>\n          </Table.Scroller>\n        </Section.Body>\n        <Section.Footer>\n          <Text size=\"sm\" tone=\"muted\">\n            {t(\"members.seats\")}\n          </Text>\n          <Button size=\"sm\" variant=\"ghost\">\n            {t(\"members.manage\")}\n          </Button>\n        </Section.Footer>\n      </Section.Root>\n    </>\n  );\n}\n";
+//#endregion
+//#region src/section/examples/members.example.tsx
+var members_example_exports = /* @__PURE__ */ __exportAll({
+	Members: () => Members,
+	source: () => source$2
+});
+const MEMBERS = [
+	{
+		name: "Mara Lindqvist",
+		role: "owner"
+	},
+	{
+		name: "Jonas Berg",
+		role: "admin"
+	},
+	{
+		name: "Priya Nair",
+		role: "member"
+	}
+];
+function Members(props) {
+	const $ = c(54);
+	const { t } = useWords("section");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("members.title");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Title, {
+			as: "h3",
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("members.about");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Description, { children: t2 });
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("members.more");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(EllipsisIcon, { size: "1em" });
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(PencilIcon, { size: "1em" });
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t) {
+		t7 = t("members.roles");
+		$[12] = t;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Action, {
+			icon: t6,
+			children: t7
+		});
+		$[14] = t7;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t) {
+		t9 = t("members.export");
+		$[16] = t;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Action, { children: t9 });
+		$[18] = t9;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(UserPlusIcon, { size: "1em" });
+		$[20] = t11;
+	} else t11 = $[20];
+	let t12;
+	if ($[21] !== t) {
+		t12 = t("members.invite");
+		$[21] = t;
+		$[22] = t12;
+	} else t12 = $[22];
+	let t13;
+	if ($[23] !== t12) {
+		t13 = /* @__PURE__ */ jsx(Action, {
+			icon: t11,
+			primary: true,
+			children: t12
+		});
+		$[23] = t12;
+		$[24] = t13;
+	} else t13 = $[24];
+	let t14;
+	if ($[25] !== t10 || $[26] !== t13 || $[27] !== t4 || $[28] !== t8) {
+		t14 = /* @__PURE__ */ jsxs(Actions, {
+			more: t4,
+			moreIcon: t5,
+			children: [
+				t8,
+				t10,
+				t13
+			]
+		});
+		$[25] = t10;
+		$[26] = t13;
+		$[27] = t4;
+		$[28] = t8;
+		$[29] = t14;
+	} else t14 = $[29];
+	let t15;
+	if ($[30] !== t1 || $[31] !== t14 || $[32] !== t3) {
+		t15 = /* @__PURE__ */ jsxs(Header, { children: [
+			t1,
+			t3,
+			t14
+		] });
+		$[30] = t1;
+		$[31] = t14;
+		$[32] = t3;
+		$[33] = t15;
+	} else t15 = $[33];
+	let t16;
+	if ($[34] !== t) {
+		t16 = MEMBERS.map((t17) => {
+			const { name, role } = t17;
+			return /* @__PURE__ */ jsxs(Table.Row, { children: [/* @__PURE__ */ jsx(Table.RowHeader, { children: name }), /* @__PURE__ */ jsx(Table.Cell, {
+				"data-numeric": true,
+				children: /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					tone: "muted",
+					children: t(`roles.${role}`)
+				})
+			})] }, name);
+		});
+		$[34] = t;
+		$[35] = t16;
+	} else t16 = $[35];
+	let t17;
+	if ($[36] !== t16) {
+		t17 = /* @__PURE__ */ jsx(Body, {
+			bleed: true,
+			children: /* @__PURE__ */ jsx(Table.Scroller, { children: /* @__PURE__ */ jsx(Table.Root, { children: /* @__PURE__ */ jsx(Table.Body, { children: t16 }) }) })
+		});
+		$[36] = t16;
+		$[37] = t17;
+	} else t17 = $[37];
+	let t18;
+	if ($[38] !== t) {
+		t18 = t("members.seats");
+		$[38] = t;
+		$[39] = t18;
+	} else t18 = $[39];
+	let t19;
+	if ($[40] !== t18) {
+		t19 = /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			tone: "muted",
+			children: t18
+		});
+		$[40] = t18;
+		$[41] = t19;
+	} else t19 = $[41];
+	let t20;
+	if ($[42] !== t) {
+		t20 = t("members.manage");
+		$[42] = t;
+		$[43] = t20;
+	} else t20 = $[43];
+	let t21;
+	if ($[44] !== t20) {
+		t21 = /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "ghost",
+			children: t20
+		});
+		$[44] = t20;
+		$[45] = t21;
+	} else t21 = $[45];
+	let t22;
+	if ($[46] !== t19 || $[47] !== t21) {
+		t22 = /* @__PURE__ */ jsxs(Footer, { children: [t19, t21] });
+		$[46] = t19;
+		$[47] = t21;
+		$[48] = t22;
+	} else t22 = $[48];
+	let t23;
+	if ($[49] !== props || $[50] !== t15 || $[51] !== t17 || $[52] !== t22) {
+		t23 = /* @__PURE__ */ jsxs(Root, {
+			variant: "surface",
+			...props,
+			children: [
+				t15,
+				t17,
+				t22
+			]
+		});
+		$[49] = props;
+		$[50] = t15;
+		$[51] = t17;
+		$[52] = t22;
+		$[53] = t23;
+	} else t23 = $[53];
+	return t23;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { EllipsisIcon, PencilIcon, UserPlusIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Table } from \"@stealthscale/component-collections\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Section } from \"@stealthscale/component-screen\";\n\nconst MEMBERS = [\n  { name: \"Mara Lindqvist\", role: \"owner\" },\n  { name: \"Jonas Berg\", role: \"admin\" },\n  { name: \"Priya Nair\", role: \"member\" },\n] as const;\n\nexport function Members(props: Section.RootProps): ReactElement {\n  const { t } = useWords(\"section\");\n\n  return (\n    <Section.Root variant=\"surface\" {...props}>\n      <Section.Header>\n        <Section.Title as=\"h3\">{t(\"members.title\")}</Section.Title>\n        <Section.Description>{t(\"members.about\")}</Section.Description>\n        <Section.Actions more={t(\"members.more\")} moreIcon={<EllipsisIcon size=\"1em\" />}>\n          <Section.Action icon={<PencilIcon size=\"1em\" />}>{t(\"members.roles\")}</Section.Action>\n          <Section.Action>{t(\"members.export\")}</Section.Action>\n          <Section.Action icon={<UserPlusIcon size=\"1em\" />} primary>\n            {t(\"members.invite\")}\n          </Section.Action>\n        </Section.Actions>\n      </Section.Header>\n      <Section.Body bleed>\n        <Table.Scroller>\n          <Table.Root>\n            <Table.Body>\n              {MEMBERS.map(({ name, role }) => (\n                <Table.Row key={name}>\n                  <Table.RowHeader>{name}</Table.RowHeader>\n                  <Table.Cell data-numeric>\n                    <Text as=\"span\" tone=\"muted\">\n                      {t(`roles.${role}`)}\n                    </Text>\n                  </Table.Cell>\n                </Table.Row>\n              ))}\n            </Table.Body>\n          </Table.Root>\n        </Table.Scroller>\n      </Section.Body>\n      <Section.Footer>\n        <Text size=\"sm\" tone=\"muted\">\n          {t(\"members.seats\")}\n        </Text>\n        <Button size=\"sm\" variant=\"ghost\">\n          {t(\"members.manage\")}\n        </Button>\n      </Section.Footer>\n    </Section.Root>\n  );\n}\n";
+//#endregion
+//#region src/section/examples/settings.example.tsx
+var settings_example_exports = /* @__PURE__ */ __exportAll({
+	Settings: () => Settings,
+	source: () => source$1
+});
+const FACTS$1 = [
+	"name",
+	"region",
+	"plan"
+];
+const CHANNELS = [
+	"deploys",
+	"failures",
+	"digest"
+];
+function Settings() {
+	const $ = c(110);
+	const { t } = useWords("section");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("workspace.title");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Title$1, {
+			as: "h3",
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("workspace.about");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Description$1, { children: t2 });
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t1 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Header$1, { children: [t1, t3] });
+		$[8] = t1;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== t) {
+		t5 = t("profile.title");
+		$[11] = t;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Title, {
+			as: "h4",
+			children: t5
+		});
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== t) {
+		t7 = t("profile.about");
+		$[15] = t;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Description, { children: t7 });
+		$[17] = t7;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(PencilIcon, { size: "1em" });
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== t) {
+		t10 = t("edit");
+		$[20] = t;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Actions, { children: /* @__PURE__ */ jsx(Action, {
+			icon: t9,
+			children: t10
+		}) });
+		$[22] = t10;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== t11 || $[25] !== t6 || $[26] !== t8) {
+		t12 = /* @__PURE__ */ jsxs(Header, { children: [
+			t6,
+			t8,
+			t11
+		] });
+		$[24] = t11;
+		$[25] = t6;
+		$[26] = t8;
+		$[27] = t12;
+	} else t12 = $[27];
+	let t13;
+	if ($[28] !== t) {
+		t13 = FACTS$1.map((fact) => /* @__PURE__ */ jsxs(Stack, {
+			gap: "xs",
+			children: [/* @__PURE__ */ jsx(Text, {
+				size: "sm",
+				tone: "muted",
+				children: t(`facts.${fact}.label`)
+			}), /* @__PURE__ */ jsx(Text, {
+				size: "sm",
+				children: t(`facts.${fact}.value`)
+			})]
+		}, fact));
+		$[28] = t;
+		$[29] = t13;
+	} else t13 = $[29];
+	let t14;
+	if ($[30] !== t13) {
+		t14 = /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(Stack, {
+			direction: "row",
+			gap: "2xl",
+			wrap: true,
+			children: t13
+		}) });
+		$[30] = t13;
+		$[31] = t14;
+	} else t14 = $[31];
+	let t15;
+	if ($[32] !== t12 || $[33] !== t14) {
+		t15 = /* @__PURE__ */ jsxs(Root, { children: [t12, t14] });
+		$[32] = t12;
+		$[33] = t14;
+		$[34] = t15;
+	} else t15 = $[34];
+	let t16;
+	if ($[35] !== t) {
+		t16 = t("notifications.title");
+		$[35] = t;
+		$[36] = t16;
+	} else t16 = $[36];
+	let t17;
+	if ($[37] !== t16) {
+		t17 = /* @__PURE__ */ jsx(Title, {
+			as: "h4",
+			children: t16
+		});
+		$[37] = t16;
+		$[38] = t17;
+	} else t17 = $[38];
+	let t18;
+	if ($[39] !== t) {
+		t18 = t("notifications.about");
+		$[39] = t;
+		$[40] = t18;
+	} else t18 = $[40];
+	let t19;
+	if ($[41] !== t18) {
+		t19 = /* @__PURE__ */ jsx(Description, { children: t18 });
+		$[41] = t18;
+		$[42] = t19;
+	} else t19 = $[42];
+	let t20;
+	if ($[43] !== t17 || $[44] !== t19) {
+		t20 = /* @__PURE__ */ jsxs(Header, { children: [t17, t19] });
+		$[43] = t17;
+		$[44] = t19;
+		$[45] = t20;
+	} else t20 = $[45];
+	let t21;
+	if ($[46] !== t) {
+		t21 = CHANNELS.map((channel) => /* @__PURE__ */ jsxs(Switch.Root, {
+			defaultChecked: channel !== "digest",
+			size: "sm",
+			children: [/* @__PURE__ */ jsx(Switch.Control, { children: /* @__PURE__ */ jsx(Switch.Thumb, {}) }), /* @__PURE__ */ jsx(Switch.Label, { children: /* @__PURE__ */ jsxs(Stack, {
+				as: "span",
+				gap: "xs",
+				children: [/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					size: "sm",
+					children: t(`channels.${channel}.name`)
+				}), /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					size: "sm",
+					tone: "muted",
+					children: t(`channels.${channel}.about`)
+				})]
+			}) })]
+		}, channel));
+		$[46] = t;
+		$[47] = t21;
+	} else t21 = $[47];
+	let t22;
+	if ($[48] !== t21) {
+		t22 = /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(Stack, {
+			gap: "md",
+			children: t21
+		}) });
+		$[48] = t21;
+		$[49] = t22;
+	} else t22 = $[49];
+	let t23;
+	if ($[50] !== t20 || $[51] !== t22) {
+		t23 = /* @__PURE__ */ jsxs(Root, { children: [t20, t22] });
+		$[50] = t20;
+		$[51] = t22;
+		$[52] = t23;
+	} else t23 = $[52];
+	let t24;
+	if ($[53] !== t) {
+		t24 = t("keys.title");
+		$[53] = t;
+		$[54] = t24;
+	} else t24 = $[54];
+	let t25;
+	if ($[55] !== t24) {
+		t25 = /* @__PURE__ */ jsx(Title, {
+			as: "h4",
+			children: t24
+		});
+		$[55] = t24;
+		$[56] = t25;
+	} else t25 = $[56];
+	let t26;
+	if ($[57] !== t) {
+		t26 = t("keys.about");
+		$[57] = t;
+		$[58] = t26;
+	} else t26 = $[58];
+	let t27;
+	if ($[59] !== t26) {
+		t27 = /* @__PURE__ */ jsx(Description, { children: t26 });
+		$[59] = t26;
+		$[60] = t27;
+	} else t27 = $[60];
+	let t28;
+	if ($[61] === Symbol.for("react.memo_cache_sentinel")) {
+		t28 = /* @__PURE__ */ jsx(KeyRoundIcon, { size: "1em" });
+		$[61] = t28;
+	} else t28 = $[61];
+	let t29;
+	if ($[62] !== t) {
+		t29 = t("keys.add");
+		$[62] = t;
+		$[63] = t29;
+	} else t29 = $[63];
+	let t30;
+	if ($[64] !== t29) {
+		t30 = /* @__PURE__ */ jsx(Actions, { children: /* @__PURE__ */ jsx(Action, {
+			icon: t28,
+			children: t29
+		}) });
+		$[64] = t29;
+		$[65] = t30;
+	} else t30 = $[65];
+	let t31;
+	if ($[66] !== t25 || $[67] !== t27 || $[68] !== t30) {
+		t31 = /* @__PURE__ */ jsxs(Header, { children: [
+			t25,
+			t27,
+			t30
+		] });
+		$[66] = t25;
+		$[67] = t27;
+		$[68] = t30;
+		$[69] = t31;
+	} else t31 = $[69];
+	let t32;
+	if ($[70] !== t) {
+		t32 = t("keys.none");
+		$[70] = t;
+		$[71] = t32;
+	} else t32 = $[71];
+	let t33;
+	if ($[72] !== t32) {
+		t33 = /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			tone: "muted",
+			children: t32
+		}) });
+		$[72] = t32;
+		$[73] = t33;
+	} else t33 = $[73];
+	let t34;
+	if ($[74] !== t31 || $[75] !== t33) {
+		t34 = /* @__PURE__ */ jsxs(Root, { children: [t31, t33] });
+		$[74] = t31;
+		$[75] = t33;
+		$[76] = t34;
+	} else t34 = $[76];
+	let t35;
+	if ($[77] !== t) {
+		t35 = t("danger.title");
+		$[77] = t;
+		$[78] = t35;
+	} else t35 = $[78];
+	let t36;
+	if ($[79] !== t35) {
+		t36 = /* @__PURE__ */ jsx(Title, {
+			as: "h4",
+			children: t35
+		});
+		$[79] = t35;
+		$[80] = t36;
+	} else t36 = $[80];
+	let t37;
+	if ($[81] !== t) {
+		t37 = t("danger.about");
+		$[81] = t;
+		$[82] = t37;
+	} else t37 = $[82];
+	let t38;
+	if ($[83] !== t37) {
+		t38 = /* @__PURE__ */ jsx(Description, { children: t37 });
+		$[83] = t37;
+		$[84] = t38;
+	} else t38 = $[84];
+	let t39;
+	if ($[85] !== t36 || $[86] !== t38) {
+		t39 = /* @__PURE__ */ jsxs(Header, { children: [t36, t38] });
+		$[85] = t36;
+		$[86] = t38;
+		$[87] = t39;
+	} else t39 = $[87];
+	let t40;
+	if ($[88] !== t) {
+		t40 = t("danger.owner");
+		$[88] = t;
+		$[89] = t40;
+	} else t40 = $[89];
+	let t41;
+	if ($[90] !== t40) {
+		t41 = /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			tone: "muted",
+			children: t40
+		});
+		$[90] = t40;
+		$[91] = t41;
+	} else t41 = $[91];
+	let t42;
+	if ($[92] !== t) {
+		t42 = t("danger.delete");
+		$[92] = t;
+		$[93] = t42;
+	} else t42 = $[93];
+	let t43;
+	if ($[94] !== t42) {
+		t43 = /* @__PURE__ */ jsx(Button, {
+			palette: "error",
+			size: "sm",
+			variant: "outline",
+			children: t42
+		});
+		$[94] = t42;
+		$[95] = t43;
+	} else t43 = $[95];
+	let t44;
+	if ($[96] !== t41 || $[97] !== t43) {
+		t44 = /* @__PURE__ */ jsxs(Footer, { children: [t41, t43] });
+		$[96] = t41;
+		$[97] = t43;
+		$[98] = t44;
+	} else t44 = $[98];
+	let t45;
+	if ($[99] !== t39 || $[100] !== t44) {
+		t45 = /* @__PURE__ */ jsxs(Root, {
+			variant: "surface",
+			children: [t39, t44]
+		});
+		$[99] = t39;
+		$[100] = t44;
+		$[101] = t45;
+	} else t45 = $[101];
+	let t46;
+	if ($[102] !== t15 || $[103] !== t23 || $[104] !== t34 || $[105] !== t45) {
+		t46 = /* @__PURE__ */ jsxs(Body$1, { children: [
+			t15,
+			t23,
+			t34,
+			t45
+		] });
+		$[102] = t15;
+		$[103] = t23;
+		$[104] = t34;
+		$[105] = t45;
+		$[106] = t46;
+	} else t46 = $[106];
+	let t47;
+	if ($[107] !== t4 || $[108] !== t46) {
+		t47 = /* @__PURE__ */ jsxs(Root$1, { children: [t4, t46] });
+		$[107] = t4;
+		$[108] = t46;
+		$[109] = t47;
+	} else t47 = $[109];
+	return t47;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { KeyRoundIcon, PencilIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Switch } from \"@stealthscale/component-forms\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Page, Section } from \"@stealthscale/component-screen\";\n\nconst FACTS = [\"name\", \"region\", \"plan\"] as const;\n\nconst CHANNELS = [\"deploys\", \"failures\", \"digest\"] as const;\n\nexport function Settings(): ReactElement {\n  const { t } = useWords(\"section\");\n\n  return (\n    <Page.Root>\n      <Page.Header>\n        <Page.Title as=\"h3\">{t(\"workspace.title\")}</Page.Title>\n        <Page.Description>{t(\"workspace.about\")}</Page.Description>\n      </Page.Header>\n      <Page.Body>\n        <Section.Root>\n          <Section.Header>\n            <Section.Title as=\"h4\">{t(\"profile.title\")}</Section.Title>\n            <Section.Description>{t(\"profile.about\")}</Section.Description>\n            <Section.Actions>\n              <Section.Action icon={<PencilIcon size=\"1em\" />}>{t(\"edit\")}</Section.Action>\n            </Section.Actions>\n          </Section.Header>\n          <Section.Body>\n            <Stack direction=\"row\" gap=\"2xl\" wrap>\n              {FACTS.map((fact) => (\n                <Stack gap=\"xs\" key={fact}>\n                  <Text size=\"sm\" tone=\"muted\">\n                    {t(`facts.${fact}.label`)}\n                  </Text>\n                  <Text size=\"sm\">{t(`facts.${fact}.value`)}</Text>\n                </Stack>\n              ))}\n            </Stack>\n          </Section.Body>\n        </Section.Root>\n        <Section.Root>\n          <Section.Header>\n            <Section.Title as=\"h4\">{t(\"notifications.title\")}</Section.Title>\n            <Section.Description>{t(\"notifications.about\")}</Section.Description>\n          </Section.Header>\n          <Section.Body>\n            <Stack gap=\"md\">\n              {CHANNELS.map((channel) => (\n                <Switch.Root defaultChecked={channel !== \"digest\"} key={channel} size=\"sm\">\n                  <Switch.Control>\n                    <Switch.Thumb />\n                  </Switch.Control>\n                  <Switch.Label>\n                    <Stack as=\"span\" gap=\"xs\">\n                      <Text as=\"span\" size=\"sm\">\n                        {t(`channels.${channel}.name`)}\n                      </Text>\n                      <Text as=\"span\" size=\"sm\" tone=\"muted\">\n                        {t(`channels.${channel}.about`)}\n                      </Text>\n                    </Stack>\n                  </Switch.Label>\n                </Switch.Root>\n              ))}\n            </Stack>\n          </Section.Body>\n        </Section.Root>\n        <Section.Root>\n          <Section.Header>\n            <Section.Title as=\"h4\">{t(\"keys.title\")}</Section.Title>\n            <Section.Description>{t(\"keys.about\")}</Section.Description>\n            <Section.Actions>\n              <Section.Action icon={<KeyRoundIcon size=\"1em\" />}>{t(\"keys.add\")}</Section.Action>\n            </Section.Actions>\n          </Section.Header>\n          <Section.Body>\n            <Text size=\"sm\" tone=\"muted\">\n              {t(\"keys.none\")}\n            </Text>\n          </Section.Body>\n        </Section.Root>\n        <Section.Root variant=\"surface\">\n          <Section.Header>\n            <Section.Title as=\"h4\">{t(\"danger.title\")}</Section.Title>\n            <Section.Description>{t(\"danger.about\")}</Section.Description>\n          </Section.Header>\n          <Section.Footer>\n            <Text size=\"sm\" tone=\"muted\">\n              {t(\"danger.owner\")}\n            </Text>\n            <Button palette=\"error\" size=\"sm\" variant=\"outline\">\n              {t(\"danger.delete\")}\n            </Button>\n          </Section.Footer>\n        </Section.Root>\n      </Page.Body>\n    </Page.Root>\n  );\n}\n";
+//#endregion
+//#region src/section/examples/sizes.example.tsx
+var sizes_example_exports = /* @__PURE__ */ __exportAll({
+	Sizes: () => Sizes,
+	source: () => source
+});
+const FACTS = [
+	"plan",
+	"seats",
+	"next"
+];
+function Sizes(props) {
+	const $ = c(34);
+	const { t } = useWords("section");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("billing.title");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Title, {
+			as: "h3",
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("billing.about");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Description, { children: t2 });
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(DownloadIcon, { size: "1em" });
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t) {
+		t5 = t("billing.download");
+		$[9] = t;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Action, {
+			icon: t4,
+			children: t5
+		});
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t) {
+		t7 = t("billing.pay");
+		$[13] = t;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Action, {
+			primary: true,
+			children: t7
+		});
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t6 || $[18] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Actions, { children: [t6, t8] });
+		$[17] = t6;
+		$[18] = t8;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== t1 || $[21] !== t3 || $[22] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Header, { children: [
+			t1,
+			t3,
+			t9
+		] });
+		$[20] = t1;
+		$[21] = t3;
+		$[22] = t9;
+		$[23] = t10;
+	} else t10 = $[23];
+	let t11;
+	if ($[24] !== t) {
+		t11 = FACTS.map((fact) => /* @__PURE__ */ jsxs(Stack, {
+			gap: "xs",
+			children: [/* @__PURE__ */ jsx(Text, {
+				size: "sm",
+				tone: "muted",
+				children: t(`billing.facts.${fact}.label`)
+			}), /* @__PURE__ */ jsx(Text, {
+				size: "sm",
+				children: t(`billing.facts.${fact}.value`)
+			})]
+		}, fact));
+		$[24] = t;
+		$[25] = t11;
+	} else t11 = $[25];
+	let t12;
+	if ($[26] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(Stack, {
+			direction: "row",
+			gap: "2xl",
+			wrap: true,
+			children: t11
+		}) });
+		$[26] = t11;
+		$[27] = t12;
+	} else t12 = $[27];
+	let t13;
+	if ($[28] !== t10 || $[29] !== t12) {
+		t13 = /* @__PURE__ */ jsx(Body$1, { children: /* @__PURE__ */ jsxs(Root, { children: [t10, t12] }) });
+		$[28] = t10;
+		$[29] = t12;
+		$[30] = t13;
+	} else t13 = $[30];
+	let t14;
+	if ($[31] !== props || $[32] !== t13) {
+		t14 = /* @__PURE__ */ jsx(Root$1, {
+			...props,
+			children: t13
+		});
+		$[31] = props;
+		$[32] = t13;
+		$[33] = t14;
+	} else t14 = $[33];
+	return t14;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { DownloadIcon } from \"lucide-react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Page, Section } from \"@stealthscale/component-screen\";\n\nconst FACTS = [\"plan\", \"seats\", \"next\"] as const;\n\nexport function Sizes(props: Page.RootProps): ReactElement {\n  const { t } = useWords(\"section\");\n\n  return (\n    <Page.Root {...props}>\n      <Page.Body>\n        <Section.Root>\n          <Section.Header>\n            <Section.Title as=\"h3\">{t(\"billing.title\")}</Section.Title>\n            <Section.Description>{t(\"billing.about\")}</Section.Description>\n            <Section.Actions>\n              <Section.Action icon={<DownloadIcon size=\"1em\" />}>\n                {t(\"billing.download\")}\n              </Section.Action>\n              <Section.Action primary>{t(\"billing.pay\")}</Section.Action>\n            </Section.Actions>\n          </Section.Header>\n          <Section.Body>\n            <Stack direction=\"row\" gap=\"2xl\" wrap>\n              {FACTS.map((fact) => (\n                <Stack gap=\"xs\" key={fact}>\n                  <Text size=\"sm\" tone=\"muted\">\n                    {t(`billing.facts.${fact}.label`)}\n                  </Text>\n                  <Text size=\"sm\">{t(`billing.facts.${fact}.value`)}</Text>\n                </Stack>\n              ))}\n            </Stack>\n          </Section.Body>\n        </Section.Root>\n      </Page.Body>\n    </Page.Root>\n  );\n}\n";
+//#endregion
+//#region src/section/section.specimen.tsx
+/**
+* Catalogue page for the section.
+*
+* @remarks
+*   The settings scene renders the settings example in a screen box, because a page renders its
+*   gutter at its own edges. The annotated and the folding scenes render their cards twice: in a
+*   room wider than the width the section folds at, and in a room a phone's width, because a
+*   section folds on its own width. The sizes scene renders one page per size in a screen box. The
+*   boxes and the rooms never appear in the examples. The words are keys under `section` in
+*   `locales/en/specimen/section.json`.
+*/
+/**
+* Hand-written scene for a settings page of plain sections and a card.
+*/
+const settings = {
+	about: "section.settings.about",
+	draw: () => /* @__PURE__ */ jsx(Screen, { children: /* @__PURE__ */ jsx(Settings, {}) }),
+	example: settings_example_exports,
+	title: "section.settings.title"
+};
+/**
+* Hand-written scene for two sections raised as cards.
+*/
+const cards = {
+	about: "section.variant.about",
+	axes: ["variant"],
+	draw: () => /* @__PURE__ */ jsx(Stack, {
+		gap: "lg",
+		children: /* @__PURE__ */ jsx(Cards, {})
+	}),
+	example: cards_example_exports,
+	title: "section.variant.title"
+};
+/**
+* Hand-written scene for the header in a column beside the cards, wide and at a phone's width.
+*/
+const annotated = {
+	about: "section.annotated.about",
+	axes: ["annotated"],
+	draw: () => /* @__PURE__ */ jsxs(Stack, {
+		gap: "xl",
+		children: [/* @__PURE__ */ jsx(Room, {
+			size: "4xl",
+			children: /* @__PURE__ */ jsx(Stack, {
+				gap: "lg",
+				children: /* @__PURE__ */ jsx(Cards, { annotated: true })
+			})
+		}), /* @__PURE__ */ jsx(Room, {
+			size: "sm",
+			children: /* @__PURE__ */ jsx(Stack, {
+				gap: "lg",
+				children: /* @__PURE__ */ jsx(Cards, { annotated: true })
+			})
+		})]
+	}),
+	example: cards_example_exports,
+	props: { annotated: true },
+	title: "section.annotated.title"
+};
+/**
+* Hand-written scene for one card wide and folded at a phone's width.
+*/
+const folding = {
+	about: "section.folding.about",
+	draw: () => /* @__PURE__ */ jsxs(Stack, {
+		gap: "xl",
+		children: [/* @__PURE__ */ jsx(Members, {}), /* @__PURE__ */ jsx(Room, {
+			size: "sm",
+			children: /* @__PURE__ */ jsx(Members, {})
+		})]
+	}),
+	example: members_example_exports,
+	title: "section.folding.title"
+};
+/**
+* Sizes the sizes scene renders, from the largest.
+*/
+const SIZES = [
+	"lg",
+	"md",
+	"sm"
+];
+/**
+* Hand-written scene for the three sizes, each on a page of that size.
+*/
+const sizes = {
+	about: "section.size.about",
+	axes: ["size"],
+	draw: () => /* @__PURE__ */ jsx(Stack, {
+		gap: "xl",
+		children: SIZES.map((size) => /* @__PURE__ */ jsx(Screen, { children: /* @__PURE__ */ jsx(Sizes, { size }) }, size))
+	}),
+	example: sizes_example_exports,
+	props: { size: "lg" },
+	title: "section.size.title"
+};
+var section_specimen_default = specimen({
+	about: "section.about",
+	id: "components/screen/section",
+	imports: "import { Section } from \"@stealthscale/component-screen\";",
+	scenes: [
+		settings,
+		cards,
+		annotated,
+		folding,
+		sizes
+	],
+	title: "section.title"
+});
+//#endregion
+export { annotated, cards, section_specimen_default as default, folding, settings, sizes };