@stealthscale/component-feedback 0.2.2 → 0.2.3

package/dist/pages/spinner/spinner.js

@@ -0,0 +1,186 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { l as recipe } from "../../recipes-CX1gSsN7.js";
+import { P as Spinner } from "../../shared-Xc-n0bn7.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Matrix, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { Button } from "@stealthscale/component-actions";
+import { Text } from "@stealthscale/component-typography";
+//#region src/spinner/examples/busy.example.tsx
+var busy_example_exports = /* @__PURE__ */ __exportAll({
+	Busy: () => Busy,
+	source: () => source$2
+});
+function Busy(props) {
+	const $ = c(6);
+	const { t } = useWords("spinner");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Spinner, { size: "inherit" });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("saving");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== props || $[4] !== t1) {
+		t2 = /* @__PURE__ */ jsxs(Button, {
+			disabled: true,
+			...props,
+			children: [t0, t1]
+		});
+		$[3] = props;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Spinner } from \"@stealthscale/component-feedback\";\n\nexport function Busy(props: Parameters<typeof Button>[0]): ReactElement {\n  const { t } = useWords(\"spinner\");\n\n  return (\n    <Button disabled {...props}>\n      <Spinner size=\"inherit\" />\n      {t(\"saving\")}\n    </Button>\n  );\n}\n";
+//#endregion
+//#region src/spinner/examples/saving.example.tsx
+var saving_example_exports = /* @__PURE__ */ __exportAll({
+	Saving: () => Saving,
+	source: () => source$1
+});
+function Saving(props) {
+	const $ = c(6);
+	const { t } = useWords("spinner");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Spinner, { size: "inherit" });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("saving");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== props || $[4] !== t1) {
+		t2 = /* @__PURE__ */ jsxs(Text, {
+			...props,
+			children: [
+				t0,
+				" ",
+				t1
+			]
+		});
+		$[3] = props;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Spinner } from \"@stealthscale/component-feedback\";\n\nexport function Saving(props: Parameters<typeof Text>[0]): ReactElement {\n  const { t } = useWords(\"spinner\");\n\n  return (\n    <Text {...props}>\n      <Spinner size=\"inherit\" /> {t(\"saving\")}\n    </Text>\n  );\n}\n";
+//#endregion
+//#region src/spinner/examples/turning.example.tsx
+var turning_example_exports = /* @__PURE__ */ __exportAll({
+	Turning: () => Turning,
+	source: () => source
+});
+function Turning(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Spinner, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { Spinner } from \"@stealthscale/component-feedback\";\n\nexport function Turning(props: Parameters<typeof Spinner>[0]): ReactElement {\n  return <Spinner {...props} />;\n}\n";
+//#endregion
+//#region src/spinner/spinner.specimen.tsx
+/**
+* Catalogue page for the spinner.
+*
+* @remarks
+*   `scenesOf` generates one scene per recipe axis. The inline and button scenes are hand-written,
+*   because they vary the text size and the button look, which are not spinner axes. Every scene
+*   renders a component from `examples/` and shows that file as its source. The words are keys
+*   under `spinner` in `locales/en/specimen/spinner.json`.
+*/
+/**
+* Body text sizes of the inline scene.
+*/
+const TEXT_SIZES = [
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* Button looks of the button scene, from filled to outlined.
+*/
+const LOOKS = [
+	"solid",
+	"subtle",
+	"outline"
+];
+/**
+* Hand-written scene for a spinner at `inherit` next to text at three body sizes.
+*/
+const inline = {
+	about: "spinner.inline.about",
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		knob: "size",
+		of: TEXT_SIZES,
+		children: (size) => /* @__PURE__ */ jsx(Saving, { size })
+	}),
+	example: saving_example_exports,
+	props: { size: "sm" },
+	title: "spinner.inline.title"
+};
+/**
+* Hand-written scene for a spinner at `inherit` in a disabled button in three looks.
+*/
+const button = {
+	about: "spinner.button.about",
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		knob: "variant",
+		of: LOOKS,
+		children: (variant) => /* @__PURE__ */ jsx(Busy, { variant })
+	}),
+	example: busy_example_exports,
+	props: { variant: "solid" },
+	title: "spinner.button.title"
+};
+var spinner_specimen_default = specimen({
+	about: "spinner.about",
+	id: "components/feedback/spinner",
+	imports: "import { Spinner } from \"@stealthscale/component-feedback\";",
+	scenes: [
+		...scenesOf(recipe, {
+			axes: {
+				effect: {
+					across: "palette",
+					with: { size: "lg" }
+				},
+				palette: { with: { size: "lg" } },
+				stroke: { with: { size: "lg" } },
+				track: { with: {
+					palette: "primary",
+					size: "lg"
+				} }
+			},
+			draw: (props) => /* @__PURE__ */ jsx(Turning, { ...props }),
+			example: turning_example_exports,
+			namespace: "spinner",
+			order: [
+				"size",
+				"palette",
+				"stroke",
+				"track",
+				"effect"
+			]
+		}),
+		inline,
+		button
+	],
+	title: "spinner.title"
+});
+//#endregion
+export { button, spinner_specimen_default as default, inline };

package/dist/pages/spinner/spinner.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"SpinnerProps": {"conditions": 284, "foreign": 1040}};
+export const parts = {"SpinnerProps": [{"accepts": "\"glow\" | \"pulse\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "The halo drawn around the ring, in the palette's solid at half opacity."}, {"accepts": "\"accent\" | \"current\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "The palette the arc is drawn in, as its `solid` role."}, {"accepts": "\"2xl\" | \"3xl\" | \"4xl\" | \"inherit\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": ""}, {"accepts": "\"control\" | \"hairline\" | \"heavy\" | \"indicator\"", "fallback": "", "kind": "variant", "name": "stroke", "refers": [], "required": false, "says": "Border width of the ring. `hairline`, `control` and `indicator` read the theme's stroke tokens, and `heavy` reads the 4px `lg` width."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "track", "refers": [], "required": false, "says": "Whether the two track sides draw the ring behind the arc, in the palette's `muted` role."}]};
+export const shapes = {};

package/dist/pages/toast/toast.js

@@ -0,0 +1,427 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { P as Spinner, a as Region, c as Content, i as Root, l as CloseTrigger, o as Indicator, r as Title, s as Description, t as createToaster, u as ActionTrigger } from "../../shared-Xc-n0bn7.js";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Sample, specimen, useWords } from "@stealthscale/specimen";
+import { CircleAlertIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon, XIcon } from "lucide-react";
+import { Stack } from "@stealthscale/component-layout";
+import { Button } from "@stealthscale/component-actions";
+//#region src/toast/examples/toaster.ts
+/**
+* Creates the one toaster the toast's examples raise into, as an application creates one in a
+* module its pages import.
+*/
+/**
+* The toaster: at the bottom end of the window, five toasts at a time, overlapping until a
+* pointer rests on them.
+*/
+const toaster = createToaster({
+	max: 5,
+	overlap: true,
+	placement: "bottom-end"
+});
+//#endregion
+//#region src/toast/examples/kinds.example.tsx
+var kinds_example_exports = /* @__PURE__ */ __exportAll({
+	Kinds: () => Kinds,
+	source: () => source$5
+});
+const KINDS = [
+	"success",
+	"error",
+	"warning",
+	"info",
+	"loading"
+];
+function Kinds() {
+	const $ = c(4);
+	const { t } = useWords("toast");
+	let t0;
+	if ($[0] !== t) {
+		t0 = KINDS.map((kind) => /* @__PURE__ */ jsx(Button, {
+			onClick: () => {
+				toaster.create({
+					description: t(`kinds.${kind}.description`),
+					title: t(`kinds.${kind}.title`),
+					type: kind
+				});
+			},
+			variant: "outline",
+			children: t(`kinds.${kind}.show`)
+		}, kind));
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Stack, {
+			direction: "row",
+			gap: "sm",
+			wrap: true,
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+const source$5 = "import { type ReactElement } from \"react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { toaster } from \"./toaster.ts\";\n\nconst KINDS = [\"success\", \"error\", \"warning\", \"info\", \"loading\"] as const;\n\nexport function Kinds(): ReactElement {\n  const { t } = useWords(\"toast\");\n\n  return (\n    <Stack direction=\"row\" gap=\"sm\" wrap>\n      {KINDS.map((kind) => (\n        <Button\n          key={kind}\n          onClick={() => {\n            toaster.create({\n              description: t(`kinds.${kind}.description`),\n              title: t(`kinds.${kind}.title`),\n              type: kind,\n            });\n          }}\n          variant=\"outline\"\n        >\n          {t(`kinds.${kind}.show`)}\n        </Button>\n      ))}\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/toast/examples/promise.example.tsx
+var promise_example_exports = /* @__PURE__ */ __exportAll({
+	Export: () => Export,
+	source: () => source$4
+});
+const OUTCOMES = ["succeeds", "fails"];
+function Export() {
+	const $ = c(4);
+	const { t } = useWords("toast");
+	let t0;
+	if ($[0] !== t) {
+		t0 = OUTCOMES.map((outcome) => /* @__PURE__ */ jsx(Button, {
+			onClick: () => {
+				toaster.promise(new Promise((resolve, reject) => {
+					globalThis.setTimeout(outcome === "succeeds" ? resolve : reject, 2e3);
+				}), {
+					error: {
+						description: t("promise.failed"),
+						title: t("promise.error")
+					},
+					loading: {
+						description: t("promise.lines"),
+						title: t("promise.loading")
+					},
+					success: {
+						description: t("promise.file"),
+						title: t("promise.success")
+					}
+				});
+			},
+			variant: "outline",
+			children: t(`promise.${outcome}`)
+		}, outcome));
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Stack, {
+			direction: "row",
+			gap: "sm",
+			wrap: true,
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { toaster } from \"./toaster.ts\";\n\nconst OUTCOMES = [\"succeeds\", \"fails\"] as const;\n\nexport function Export(): ReactElement {\n  const { t } = useWords(\"toast\");\n\n  return (\n    <Stack direction=\"row\" gap=\"sm\" wrap>\n      {OUTCOMES.map((outcome) => (\n        <Button\n          key={outcome}\n          onClick={() => {\n            toaster.promise(\n              new Promise<void>((resolve, reject) => {\n                globalThis.setTimeout(outcome === \"succeeds\" ? resolve : reject, 2000);\n              }),\n              {\n                error: { description: t(\"promise.failed\"), title: t(\"promise.error\") },\n                loading: { description: t(\"promise.lines\"), title: t(\"promise.loading\") },\n                success: { description: t(\"promise.file\"), title: t(\"promise.success\") },\n              },\n            );\n          }}\n          variant=\"outline\"\n        >\n          {t(`promise.${outcome}`)}\n        </Button>\n      ))}\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/toast/examples/queue.example.tsx
+var queue_example_exports = /* @__PURE__ */ __exportAll({
+	Queue: () => Queue,
+	source: () => source$3
+});
+const LINES = [
+	1,
+	2,
+	3,
+	4,
+	5,
+	6,
+	7,
+	8
+];
+function Queue() {
+	const $ = c(8);
+	const { i18n, t } = useWords("toast");
+	let t0;
+	if ($[0] !== i18n || $[1] !== t) {
+		t0 = () => {
+			for (const line of LINES) toaster.create({
+				description: t("queue.description", { line: line.toLocaleString(i18n.language) }),
+				title: t("queue.heading"),
+				type: "error"
+			});
+		};
+		$[0] = i18n;
+		$[1] = t;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== t) {
+		t1 = t("queue.show");
+		$[3] = t;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== t0 || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Button, {
+			onClick: t0,
+			variant: "outline",
+			children: t1
+		});
+		$[5] = t0;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { toaster } from \"./toaster.ts\";\n\nconst LINES = [1, 2, 3, 4, 5, 6, 7, 8] as const;\n\nexport function Queue(): ReactElement {\n  const { i18n, t } = useWords(\"toast\");\n\n  return (\n    <Button\n      onClick={() => {\n        for (const line of LINES) {\n          toaster.create({\n            description: t(\"queue.description\", { line: line.toLocaleString(i18n.language) }),\n            title: t(\"queue.heading\"),\n            type: \"error\",\n          });\n        }\n      }}\n      variant=\"outline\"\n    >\n      {t(\"queue.show\")}\n    </Button>\n  );\n}\n";
+//#endregion
+//#region src/toast/examples/region.example.tsx
+var region_example_exports = /* @__PURE__ */ __exportAll({
+	Toasts: () => Toasts,
+	source: () => source$2
+});
+const MARKS = {
+	error: /* @__PURE__ */ jsx(CircleAlertIcon, {}),
+	info: /* @__PURE__ */ jsx(InfoIcon, {}),
+	loading: /* @__PURE__ */ jsx(Spinner, { size: "sm" }),
+	success: /* @__PURE__ */ jsx(CircleCheckIcon, {}),
+	warning: /* @__PURE__ */ jsx(TriangleAlertIcon, {})
+};
+function Toasts() {
+	const $ = c(12);
+	const { t } = useWords("toast");
+	let t0;
+	if ($[0] !== t) {
+		t0 = () => {
+			toaster.create({
+				description: t("region.description"),
+				title: t("region.heading")
+			});
+		};
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("region.show");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t0 || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Button, {
+			onClick: t0,
+			variant: "outline",
+			children: t1
+		});
+		$[4] = t0;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== t) {
+		t3 = /* @__PURE__ */ jsx(Region, {
+			toaster,
+			children: (toast) => /* @__PURE__ */ jsxs(Root, { children: [
+				/* @__PURE__ */ jsx(Indicator, { children: MARKS[toast.type ?? "info"] }),
+				/* @__PURE__ */ jsxs(Content, { children: [/* @__PURE__ */ jsx(Title, { children: toast.title }), /* @__PURE__ */ jsx(Description, { children: toast.description })] }),
+				toast.action === void 0 ? null : /* @__PURE__ */ jsx(ActionTrigger, { children: toast.action.label }),
+				/* @__PURE__ */ jsx(CloseTrigger, {
+					"aria-label": t("dismiss"),
+					children: /* @__PURE__ */ jsx(XIcon, {})
+				})
+			] })
+		});
+		$[7] = t;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t2 || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Fragment, { children: [t2, t3] });
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { CircleAlertIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon, XIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Spinner, Toast } from \"@stealthscale/component-feedback\";\n\nimport { toaster } from \"./toaster.ts\";\n\nconst MARKS: Readonly<Record<string, ReactElement>> = {\n  error: <CircleAlertIcon />,\n  info: <InfoIcon />,\n  loading: <Spinner size=\"sm\" />,\n  success: <CircleCheckIcon />,\n  warning: <TriangleAlertIcon />,\n};\n\nexport function Toasts(): ReactElement {\n  const { t } = useWords(\"toast\");\n\n  return (\n    <>\n      <Button\n        onClick={() => {\n          toaster.create({ description: t(\"region.description\"), title: t(\"region.heading\") });\n        }}\n        variant=\"outline\"\n      >\n        {t(\"region.show\")}\n      </Button>\n      <Toast.Region toaster={toaster}>\n        {(toast) => (\n          <Toast.Root>\n            <Toast.Indicator>{MARKS[toast.type ?? \"info\"]}</Toast.Indicator>\n            <Toast.Content>\n              <Toast.Title>{toast.title}</Toast.Title>\n              <Toast.Description>{toast.description}</Toast.Description>\n            </Toast.Content>\n            {toast.action === undefined ? null : (\n              <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>\n            )}\n            <Toast.CloseTrigger aria-label={t(\"dismiss\")}>\n              <XIcon />\n            </Toast.CloseTrigger>\n          </Toast.Root>\n        )}\n      </Toast.Region>\n    </>\n  );\n}\n";
+//#endregion
+//#region src/toast/examples/sync.example.tsx
+var sync_example_exports = /* @__PURE__ */ __exportAll({
+	Sync: () => Sync,
+	source: () => source$1
+});
+function Sync() {
+	const $ = c(7);
+	const { t } = useWords("toast");
+	let t0;
+	if ($[0] !== t) {
+		t0 = () => {
+			const id = toaster.create({
+				description: t("sync.started"),
+				title: t("sync.heading"),
+				type: "loading"
+			});
+			globalThis.setTimeout(() => {
+				toaster.update(id, {
+					description: t("sync.halfway"),
+					type: "loading"
+				});
+			}, 1500);
+			globalThis.setTimeout(() => {
+				toaster.update(id, {
+					description: t("sync.done"),
+					title: t("sync.matched"),
+					type: "success"
+				});
+			}, 3e3);
+		};
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("sync.show");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t0 || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Button, {
+			onClick: t0,
+			variant: "outline",
+			children: t1
+		});
+		$[4] = t0;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { toaster } from \"./toaster.ts\";\n\nexport function Sync(): ReactElement {\n  const { t } = useWords(\"toast\");\n\n  return (\n    <Button\n      onClick={() => {\n        const id = toaster.create({\n          description: t(\"sync.started\"),\n          title: t(\"sync.heading\"),\n          type: \"loading\",\n        });\n\n        globalThis.setTimeout(() => {\n          toaster.update(id, { description: t(\"sync.halfway\"), type: \"loading\" });\n        }, 1500);\n        globalThis.setTimeout(() => {\n          toaster.update(id, {\n            description: t(\"sync.done\"),\n            title: t(\"sync.matched\"),\n            type: \"success\",\n          });\n        }, 3000);\n      }}\n      variant=\"outline\"\n    >\n      {t(\"sync.show\")}\n    </Button>\n  );\n}\n";
+//#endregion
+//#region src/toast/examples/undo.example.tsx
+var undo_example_exports = /* @__PURE__ */ __exportAll({
+	Undo: () => Undo,
+	source: () => source
+});
+function Undo() {
+	const $ = c(7);
+	const { t } = useWords("toast");
+	let t0;
+	if ($[0] !== t) {
+		t0 = () => {
+			toaster.create({
+				action: {
+					label: t("undo.action"),
+					onClick: () => {
+						toaster.success({ title: t("undo.restored") });
+					}
+				},
+				description: t("undo.description"),
+				duration: 1e4,
+				title: t("undo.heading")
+			});
+		};
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("undo.show");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t0 || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Button, {
+			onClick: t0,
+			variant: "outline",
+			children: t1
+		});
+		$[4] = t0;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { toaster } from \"./toaster.ts\";\n\nexport function Undo(): ReactElement {\n  const { t } = useWords(\"toast\");\n\n  return (\n    <Button\n      onClick={() => {\n        toaster.create({\n          action: {\n            label: t(\"undo.action\"),\n            onClick: () => {\n              toaster.success({ title: t(\"undo.restored\") });\n            },\n          },\n          description: t(\"undo.description\"),\n          duration: 10_000,\n          title: t(\"undo.heading\"),\n        });\n      }}\n      variant=\"outline\"\n    >\n      {t(\"undo.show\")}\n    </Button>\n  );\n}\n";
+//#endregion
+//#region src/toast/toast.specimen.tsx
+/**
+* Catalogue page for the toast.
+*
+* @remarks
+*   A toast renders in a region fixed to the window, not in its scene, so every scene is a trigger
+*   that raises toasts. The examples share one toaster, as an application does, and the first
+*   scene renders its region. The recipe has no axes, so every scene is hand-written. The specimen
+*   imports each example file directly, because the props reader finds the toast's parts through
+*   the imports of the example files a specimen imports. A single trigger renders in a `Sample`,
+*   which keeps it at its own width. The words are keys under `toast` in
+*   `locales/en/specimen/toast.json`.
+*/
+/**
+* Hand-written scene for the region an application renders once, with a trigger.
+*/
+const regioned = {
+	about: "toast.region.about",
+	draw: () => /* @__PURE__ */ jsx(Sample, { children: /* @__PURE__ */ jsx(Toasts, {}) }),
+	example: region_example_exports,
+	title: "toast.region.title"
+};
+/**
+* Hand-written scene for the five kinds a toaster raises.
+*/
+const typed = {
+	about: "toast.kinds.about",
+	draw: Kinds,
+	example: kinds_example_exports,
+	title: "toast.kinds.title"
+};
+/**
+* Hand-written scene for a toast with an action.
+*/
+const undone = {
+	about: "toast.undo.about",
+	draw: () => /* @__PURE__ */ jsx(Sample, { children: /* @__PURE__ */ jsx(Undo, {}) }),
+	example: undo_example_exports,
+	title: "toast.undo.title"
+};
+/**
+* Hand-written scene for a toast that follows a promise.
+*/
+const promised = {
+	about: "toast.promise.about",
+	draw: Export,
+	example: promise_example_exports,
+	title: "toast.promise.title"
+};
+/**
+* Hand-written scene for a toast updated in place.
+*/
+const updated = {
+	about: "toast.sync.about",
+	draw: () => /* @__PURE__ */ jsx(Sample, { children: /* @__PURE__ */ jsx(Sync, {}) }),
+	example: sync_example_exports,
+	title: "toast.sync.title"
+};
+/**
+* Hand-written scene for toasts queued past the toaster's `max`.
+*/
+const queued = {
+	about: "toast.queue.about",
+	draw: () => /* @__PURE__ */ jsx(Sample, { children: /* @__PURE__ */ jsx(Queue, {}) }),
+	example: queue_example_exports,
+	title: "toast.queue.title"
+};
+var toast_specimen_default = specimen({
+	about: "toast.about",
+	id: "components/feedback/toast",
+	imports: "import { Toast } from \"@stealthscale/component-feedback\";",
+	scenes: [
+		regioned,
+		typed,
+		undone,
+		promised,
+		updated,
+		queued
+	],
+	title: "toast.title"
+});
+//#endregion
+export { toast_specimen_default as default, promised, queued, regioned, typed, undone, updated };

package/dist/pages/toast/toast.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"ActionTriggerProps": {"conditions": 284, "foreign": 1051}, "CloseTriggerProps": {"conditions": 284, "foreign": 1051}, "ContentProps": {"conditions": 284, "foreign": 1041}, "DescriptionProps": {"conditions": 284, "foreign": 1041}, "IndicatorProps": {"conditions": 284, "foreign": 1041}, "RegionProps": {"conditions": 284, "foreign": 1039}, "RootProps": {"conditions": 284, "foreign": 1041}, "TitleProps": {"conditions": 284, "foreign": 1041}, "SpinnerProps": {"conditions": 284, "foreign": 1040}};
+export const parts = {"ActionTriggerProps": [], "CloseTriggerProps": [], "ContentProps": [], "DescriptionProps": [], "IndicatorProps": [], "RegionProps": [{"accepts": "(toast: ToastOptions) => ReactNode", "fallback": "", "kind": "option", "name": "children", "refers": ["kit.ToastOptions", "react.ReactElement", "react.ReactPortal", "toast.ActionOptions", "toast.ToastQueuePriority", "toast.Type"], "required": true, "says": "Renders one toast, which the region wraps in the toast's own machine."}, {"accepts": "\"ltr\" | \"rtl\"", "fallback": "", "kind": "option", "name": "dir", "refers": [], "required": false, "says": "The text direction, which mirrors the start and end placements."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": false, "says": "The landmark's name, before the placement and the hotkey. `Notifications` by default."}, {"accepts": "Toaster", "fallback": "", "kind": "option", "name": "toaster", "refers": ["kit.Toaster", "toast.Options", "toast.Placement", "toast.PromiseOptions", "toast.ToastStoreProps", "types.Required"], "required": true, "says": "The store the region renders the toasts of."}], "RootProps": [], "TitleProps": [], "SpinnerProps": [{"accepts": "\"glow\" | \"pulse\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "The halo drawn around the ring, in the palette's solid at half opacity."}, {"accepts": "\"accent\" | \"current\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "The palette the arc is drawn in, as its `solid` role."}, {"accepts": "\"2xl\" | \"3xl\" | \"4xl\" | \"inherit\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": ""}, {"accepts": "\"control\" | \"hairline\" | \"heavy\" | \"indicator\"", "fallback": "", "kind": "variant", "name": "stroke", "refers": [], "required": false, "says": "Border width of the ring. `hairline`, `control` and `indicator` read the theme's stroke tokens, and `heavy` reads the 4px `lg` width."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "track", "refers": [], "required": false, "says": "Whether the two track sides draw the ring behind the arc, in the palette's `muted` role."}]};
+export const shapes = {"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.ToastOptions": [{"accepts": "ReactNode", "name": "title", "says": "The title of the toast."}, {"accepts": "ReactNode", "name": "description", "says": "The description of the toast."}, {"accepts": "number", "name": "duration", "says": "The duration the toast will be visible"}, {"accepts": "number", "name": "removeDelay", "says": "The duration for the toast to kept alive before it is removed. Useful for exit transitions."}, {"accepts": "string", "name": "id", "says": "The unique id of the toast"}, {"accepts": "Type", "name": "type", "says": "The type of the toast"}, {"accepts": "ToastQueuePriority", "name": "priority", "says": "The priority of the toast (1 = highest, 8 = lowest)"}, {"accepts": "((details: StatusChangeDetails) => void)", "name": "onStatusChange", "says": "Function called when the toast is visible"}, {"accepts": "ActionOptions", "name": "action", "says": "The action of the toast"}, {"accepts": "boolean", "name": "closable", "says": "Whether the toast is closable"}, {"accepts": "Record<string, any>", "name": "meta", "says": "The metadata of the toast"}], "toast.Type": [{"accepts": "", "name": "\"error\"", "says": ""}, {"accepts": "", "name": "\"info\"", "says": ""}, {"accepts": "", "name": "\"loading\"", "says": ""}, {"accepts": "", "name": "\"success\"", "says": ""}, {"accepts": "", "name": "\"warning\"", "says": ""}, {"accepts": "", "name": "string & {}", "says": ""}], "toast.ToastQueuePriority": [{"accepts": "", "name": "1", "says": ""}, {"accepts": "", "name": "2", "says": ""}, {"accepts": "", "name": "3", "says": ""}, {"accepts": "", "name": "4", "says": ""}, {"accepts": "", "name": "5", "says": ""}, {"accepts": "", "name": "6", "says": ""}, {"accepts": "", "name": "7", "says": ""}, {"accepts": "", "name": "8", "says": ""}], "toast.ActionOptions": [{"accepts": "string", "name": "label", "says": "The label of the action"}, {"accepts": "VoidFunction", "name": "onClick", "says": "The function to call when the action is clicked"}], "kit.Toaster": [{"accepts": "Required<ToastStoreProps>", "name": "attrs", "says": "The attributes of the toast store"}, {"accepts": "(subscriber: (...args: any[]) => void) => VoidFunction", "name": "subscribe", "says": "Subscribe to the toast store"}, {"accepts": "(data: Options<any>) => string", "name": "create", "says": "Create a new toast with the given options"}, {"accepts": "(id: string, data: Partial<ToastProps<any>>) => string", "name": "update", "says": "Update an existing toast with new properties"}, {"accepts": "(id?: string) => void", "name": "remove", "says": "Remove a toast by its ID"}, {"accepts": "(id?: string) => void", "name": "dismiss", "says": "Dismiss a toast by its ID. If no ID is provided, dismisses all toasts"}, {"accepts": "(data: Options<any>) => void", "name": "error", "says": "Create an error toast with the given options"}, {"accepts": "(data: Options<any>) => void", "name": "success", "says": "Create a success toast with the given options"}, {"accepts": "(data: Options<any>) => void", "name": "info", "says": "Create an info toast with the given options"}, {"accepts": "(data: Options<any>) => void", "name": "warning", "says": "Create a warning toast with the given options"}, {"accepts": "(data: Options<any>) => void", "name": "loading", "says": "Create a loading toast with the given options"}, {"accepts": "() => Partial<ToastProps<any>>[]", "name": "getVisibleToasts", "says": "Get all currently visible toasts"}, {"accepts": "() => number", "name": "getCount", "says": "Get the total number of toasts"}, {"accepts": "<T>(promise: Promise<T> | (() => Promise<T>), options: PromiseOptions<T, any>, shared?: Omit<Options<any>, \"type\">) => { ...; }", "name": "promise", "says": "Create a toast that tracks a promise's state"}, {"accepts": "(id?: string) => void", "name": "pause", "says": "Pause a toast's auto-dismiss timer. If no ID is provided, pauses all toasts"}, {"accepts": "(id?: string) => void", "name": "resume", "says": "Resume a toast's auto-dismiss timer. If no ID is provided, resumes all toasts"}, {"accepts": "(id: string) => boolean", "name": "isVisible", "says": "Check if a toast with the given ID is currently visible"}, {"accepts": "(id: string) => boolean", "name": "isDismissed", "says": "Check if a toast with the given ID has been dismissed"}, {"accepts": "VoidFunction", "name": "expand", "says": "Expand all toasts to show their full content (overlap mode)"}, {"accepts": "VoidFunction", "name": "collapse", "says": "Collapse all toasts to their compact state (overlap mode)"}], "toast.ToastStoreProps": [{"accepts": "Placement", "name": "placement", "says": "The placement of the toast"}, {"accepts": "number", "name": "max", "says": "The maximum number of toasts. When the number of toasts exceeds this limit, the new toasts are queued."}, {"accepts": "boolean", "name": "overlap", "says": "Whether to overlap the toasts"}, {"accepts": "number", "name": "duration", "says": "The duration of the toast. By default, it is determined by the type of the toast."}, {"accepts": "number", "name": "gap", "says": "The gap between the toasts"}, {"accepts": "string | Record<\"bottom\" | \"left\" | \"right\" | \"top\", string>", "name": "offsets", "says": "The offset from the safe environment edge of the viewport"}, {"accepts": "string[]", "name": "hotkey", "says": "The hotkey that will move focus to the toast group"}, {"accepts": "number", "name": "removeDelay", "says": "The duration for the toast to kept alive before it is removed. Useful for exit transitions."}, {"accepts": "boolean", "name": "pauseOnPageIdle", "says": "Whether to pause toast when the user leaves the browser tab"}], "types.Required": [{"accepts": "Placement", "name": "placement", "says": "The placement of the toast"}, {"accepts": "number", "name": "max", "says": "The maximum number of toasts. When the number of toasts exceeds this limit, the new toasts are queued."}, {"accepts": "boolean", "name": "overlap", "says": "Whether to overlap the toasts"}, {"accepts": "number", "name": "duration", "says": "The duration of the toast. By default, it is determined by the type of the toast."}, {"accepts": "number", "name": "gap", "says": "The gap between the toasts"}, {"accepts": "string | Record<\"bottom\" | \"left\" | \"right\" | \"top\", string>", "name": "offsets", "says": "The offset from the safe environment edge of the viewport"}, {"accepts": "string[]", "name": "hotkey", "says": "The hotkey that will move focus to the toast group"}, {"accepts": "number", "name": "removeDelay", "says": "The duration for the toast to kept alive before it is removed. Useful for exit transitions."}, {"accepts": "boolean", "name": "pauseOnPageIdle", "says": "Whether to pause toast when the user leaves the browser tab"}], "toast.Placement": [{"accepts": "", "name": "\"bottom\"", "says": ""}, {"accepts": "", "name": "\"bottom-end\"", "says": ""}, {"accepts": "", "name": "\"bottom-start\"", "says": ""}, {"accepts": "", "name": "\"top\"", "says": ""}, {"accepts": "", "name": "\"top-end\"", "says": ""}, {"accepts": "", "name": "\"top-start\"", "says": ""}], "toast.Options": [{"accepts": "any", "name": "title", "says": "The title of the toast."}, {"accepts": "any", "name": "description", "says": "The description of the toast."}, {"accepts": "number", "name": "duration", "says": "The duration the toast will be visible"}, {"accepts": "number", "name": "removeDelay", "says": "The duration for the toast to kept alive before it is removed. Useful for exit transitions."}, {"accepts": "string", "name": "id", "says": "The unique id of the toast"}, {"accepts": "Type", "name": "type", "says": "The type of the toast"}, {"accepts": "ToastQueuePriority", "name": "priority", "says": "The priority of the toast (1 = highest, 8 = lowest)"}, {"accepts": "((details: StatusChangeDetails) => void)", "name": "onStatusChange", "says": "Function called when the toast is visible"}, {"accepts": "ActionOptions", "name": "action", "says": "The action of the toast"}, {"accepts": "boolean", "name": "closable", "says": "Whether the toast is closable"}, {"accepts": "Record<string, any>", "name": "meta", "says": "The metadata of the toast"}], "toast.PromiseOptions": [{"accepts": "Omit<Options<any>, \"type\">", "name": "loading", "says": ""}, {"accepts": "MaybeFunction<Omit<Options<any>, \"type\"> & { type?: \"success\" | \"warning\"; }, T>", "name": "success", "says": ""}, {"accepts": "MaybeFunction<Omit<Options<any>, \"type\">, unknown>", "name": "error", "says": ""}, {"accepts": "(() => void | Promise<void>)", "name": "finally", "says": ""}]};