@stealthscale/component-feedback 0.2.1 → 0.2.3

package/dist/pages/progress/progress.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"LabelProps": {"conditions": 284, "foreign": 1041}, "MarkerProps": {"conditions": 284, "foreign": 1041}, "RangeProps": {"conditions": 284, "foreign": 1041}, "RootProps": {"conditions": 284, "foreign": 1038}, "SegmentProps": {"conditions": 284, "foreign": 1040}, "TrackProps": {"conditions": 284, "foreign": 1041}, "ValueTextProps": {"conditions": 284, "foreign": 1041}};
+export const parts = {"LabelProps": [], "MarkerProps": [{"accepts": "number", "fallback": "", "kind": "option", "name": "value", "refers": [], "required": true, "says": "Value the marker is placed at, in the units of `min` and `max`."}], "RangeProps": [], "RootProps": [{"accepts": "boolean", "fallback": "", "kind": "variant", "name": "animated", "refers": [], "required": false, "says": "Moves the stripes, adding them where `striped` is not set."}, {"accepts": "number | null", "fallback": "50", "kind": "option", "name": "defaultValue", "refers": [], "required": false, "says": "The initial value of the progress bar when rendered. Use when you don't need to control the value of the progress bar."}, {"accepts": "\"ltr\" | \"rtl\"", "fallback": "\"ltr\"", "kind": "option", "name": "dir", "refers": [], "required": false, "says": "The document's text/writing direction."}, {"accepts": "\"glow\" | \"pulse\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "The halo around the range, in the palette's solid."}, {"accepts": "NumberFormatOptions", "fallback": "{ style: \"percent\" }", "kind": "option", "name": "formatOptions", "refers": [], "required": false, "says": "The options to use for formatting the value."}, {"accepts": "(() => Document | Node | ShadowRoot)", "fallback": "", "kind": "option", "name": "getRootNode", "refers": [], "required": false, "says": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "id", "refers": [], "required": false, "says": "The unique identifier of the machine."}, {"accepts": "ElementIds", "fallback": "", "kind": "option", "name": "ids", "refers": ["progress.ElementIds"], "required": false, "says": "The ids of the elements in the progress bar. Useful for composition."}, {"accepts": "\"inline\" | \"stacked\"", "fallback": "", "kind": "variant", "name": "layout", "refers": [], "required": false, "says": ""}, {"accepts": "string", "fallback": "\"en-US\"", "kind": "option", "name": "locale", "refers": [], "required": false, "says": "The locale to use for formatting the value."}, {"accepts": "number", "fallback": "100", "kind": "option", "name": "max", "refers": [], "required": false, "says": "The maximum allowed value of the progress bar."}, {"accepts": "number", "fallback": "0", "kind": "option", "name": "min", "refers": [], "required": false, "says": "The minimum allowed value of the progress bar."}, {"accepts": "((details: ValueChangeDetails) => void)", "fallback": "", "kind": "option", "name": "onValueChange", "refers": ["progress.ValueChangeDetails"], "required": false, "says": "Callback fired when the value changes."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": ""}, {"accepts": "\"full\" | \"rounded\" | \"square\"", "fallback": "", "kind": "variant", "name": "shape", "refers": [], "required": false, "says": ""}, {"accepts": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": ""}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "striped", "refers": [], "required": false, "says": ""}, {"accepts": "number | null", "fallback": "", "kind": "option", "name": "value", "refers": [], "required": false, "says": "The controlled value of the progress bar."}, {"accepts": "\"outline\" | \"subtle\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}], "SegmentProps": [{"accepts": "SegmentColor", "fallback": "", "kind": "option", "name": "color", "refers": ["kit.SegmentColor"], "required": false, "says": "Color the segment fills in: a series color, or a palette's solid. The series color at the segment's place unless stated."}, {"accepts": "number", "fallback": "", "kind": "option", "name": "value", "refers": [], "required": true, "says": "Amount the segment stands for, in the units of `min` and `max`."}], "TrackProps": [], "ValueTextProps": []};
+export const shapes = {"progress.ElementIds": [{"accepts": "string", "name": "root", "says": ""}, {"accepts": "string", "name": "track", "says": ""}, {"accepts": "string", "name": "label", "says": ""}, {"accepts": "string", "name": "circle", "says": ""}], "progress.ValueChangeDetails": [{"accepts": "number | null", "name": "value", "says": ""}], "kit.SegmentColor": [{"accepts": "", "name": "\"accent\"", "says": ""}, {"accepts": "", "name": "\"error\"", "says": ""}, {"accepts": "", "name": "\"info\"", "says": ""}, {"accepts": "", "name": "\"neutral\"", "says": ""}, {"accepts": "", "name": "\"primary\"", "says": ""}, {"accepts": "", "name": "\"secondary\"", "says": ""}, {"accepts": "", "name": "\"series.1\"", "says": ""}, {"accepts": "", "name": "\"series.2\"", "says": ""}, {"accepts": "", "name": "\"series.3\"", "says": ""}, {"accepts": "", "name": "\"series.4\"", "says": ""}, {"accepts": "", "name": "\"series.5\"", "says": ""}, {"accepts": "", "name": "\"series.6\"", "says": ""}, {"accepts": "", "name": "\"series.7\"", "says": ""}, {"accepts": "", "name": "\"series.8\"", "says": ""}, {"accepts": "", "name": "\"success\"", "says": ""}, {"accepts": "", "name": "\"warning\"", "says": ""}]};

package/dist/pages/progress-circle/progress-circle.js

@@ -0,0 +1,329 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { i as recipe } from "../../recipes-CX1gSsN7.js";
+import { S as Circle, _ as ValueText, b as Range, v as Track, x as Label, y as Root } 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";
+//#region src/progress-circle/examples/checklist.example.tsx
+var checklist_example_exports = /* @__PURE__ */ __exportAll({
+	Checklist: () => Checklist,
+	source: () => source$3
+});
+const DONE = 3;
+const STEPS = 5;
+function Checklist() {
+	const $ = c(14);
+	const { t } = useWords("progress-circle");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("steps", {
+			count: DONE,
+			total: STEPS
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Track, {});
+		t2 = /* @__PURE__ */ jsx(Range, {});
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	let t3;
+	if ($[4] !== t0) {
+		t3 = /* @__PURE__ */ jsxs(Circle, {
+			"aria-valuetext": t0,
+			children: [t1, t2]
+		});
+		$[4] = t0;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(ValueText, { children: `${String(DONE)}/${String(STEPS)}` });
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t) {
+		t5 = t("checklist");
+		$[7] = t;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Label, { children: t5 });
+		$[9] = t5;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t3 || $[12] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Root, {
+			layout: "inline",
+			max: STEPS,
+			palette: "success",
+			size: "xl",
+			value: DONE,
+			children: [
+				t3,
+				t4,
+				t6
+			]
+		});
+		$[11] = t3;
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
+	return t7;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ProgressCircle } from \"@stealthscale/component-feedback\";\n\nconst DONE = 3;\n\nconst STEPS = 5;\n\nexport function Checklist(): ReactElement {\n  const { t } = useWords(\"progress-circle\");\n\n  return (\n    <ProgressCircle.Root layout=\"inline\" max={STEPS} palette=\"success\" size=\"xl\" value={DONE}>\n      <ProgressCircle.Circle aria-valuetext={t(\"steps\", { count: DONE, total: STEPS })}>\n        <ProgressCircle.Track />\n        <ProgressCircle.Range />\n      </ProgressCircle.Circle>\n      <ProgressCircle.ValueText>{`${String(DONE)}/${String(STEPS)}`}</ProgressCircle.ValueText>\n      <ProgressCircle.Label>{t(\"checklist\")}</ProgressCircle.Label>\n    </ProgressCircle.Root>\n  );\n}\n";
+//#endregion
+//#region src/progress-circle/examples/quota.example.tsx
+var quota_example_exports = /* @__PURE__ */ __exportAll({
+	Quota: () => Quota,
+	source: () => source$2
+});
+const USED = 7.4;
+const TOTAL = 10;
+function Quota() {
+	const $ = c(14);
+	const { t } = useWords("progress-circle");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("quota.used", {
+			total: TOTAL,
+			used: USED
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Track, {});
+		t2 = /* @__PURE__ */ jsx(Range, {});
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	let t3;
+	if ($[4] !== t0) {
+		t3 = /* @__PURE__ */ jsxs(Circle, {
+			"aria-valuetext": t0,
+			children: [t1, t2]
+		});
+		$[4] = t0;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(ValueText, {});
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t) {
+		t5 = t("quota.label");
+		$[7] = t;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Label, { children: t5 });
+		$[9] = t5;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t3 || $[12] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Root, {
+			max: TOTAL,
+			palette: "warning",
+			size: "xl",
+			value: USED,
+			children: [
+				t3,
+				t4,
+				t6
+			]
+		});
+		$[11] = t3;
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
+	return t7;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ProgressCircle } from \"@stealthscale/component-feedback\";\n\nconst USED = 7.4;\n\nconst TOTAL = 10;\n\nexport function Quota(): ReactElement {\n  const { t } = useWords(\"progress-circle\");\n\n  return (\n    <ProgressCircle.Root max={TOTAL} palette=\"warning\" size=\"xl\" value={USED}>\n      <ProgressCircle.Circle aria-valuetext={t(\"quota.used\", { total: TOTAL, used: USED })}>\n        <ProgressCircle.Track />\n        <ProgressCircle.Range />\n      </ProgressCircle.Circle>\n      <ProgressCircle.ValueText />\n      <ProgressCircle.Label>{t(\"quota.label\")}</ProgressCircle.Label>\n    </ProgressCircle.Root>\n  );\n}\n";
+//#endregion
+//#region src/progress-circle/examples/syncing.example.tsx
+var syncing_example_exports = /* @__PURE__ */ __exportAll({
+	Syncing: () => Syncing,
+	source: () => source$1
+});
+function Syncing(props) {
+	const $ = c(8);
+	const { t } = useWords("progress-circle");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsxs(Circle, { children: [/* @__PURE__ */ jsx(Track, {}), /* @__PURE__ */ jsx(Range, {})] });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("syncing");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Label, { children: t1 });
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== props || $[6] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Root, {
+			layout: "inline",
+			size: "sm",
+			value: null,
+			...props,
+			children: [t0, t2]
+		});
+		$[5] = props;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ProgressCircle } from \"@stealthscale/component-feedback\";\n\nexport function Syncing(props: ProgressCircle.RootProps): ReactElement {\n  const { t } = useWords(\"progress-circle\");\n\n  return (\n    <ProgressCircle.Root layout=\"inline\" size=\"sm\" value={null} {...props}>\n      <ProgressCircle.Circle>\n        <ProgressCircle.Track />\n        <ProgressCircle.Range />\n      </ProgressCircle.Circle>\n      <ProgressCircle.Label>{t(\"syncing\")}</ProgressCircle.Label>\n    </ProgressCircle.Root>\n  );\n}\n";
+//#endregion
+//#region src/progress-circle/examples/upload.example.tsx
+var upload_example_exports = /* @__PURE__ */ __exportAll({
+	Upload: () => Upload,
+	source: () => source
+});
+function Upload(props) {
+	const $ = c(9);
+	const { t } = useWords("progress-circle");
+	let t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsxs(Circle, { children: [/* @__PURE__ */ jsx(Track, {}), /* @__PURE__ */ jsx(Range, {})] });
+		t1 = /* @__PURE__ */ jsx(ValueText, {});
+		$[0] = t0;
+		$[1] = t1;
+	} else {
+		t0 = $[0];
+		t1 = $[1];
+	}
+	let t2;
+	if ($[2] !== t) {
+		t2 = t("upload");
+		$[2] = t;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Label, { children: t2 });
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== props || $[7] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Root, {
+			size: "lg",
+			value: 62,
+			...props,
+			children: [
+				t0,
+				t1,
+				t3
+			]
+		});
+		$[6] = props;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ProgressCircle } from \"@stealthscale/component-feedback\";\n\nexport function Upload(props: ProgressCircle.RootProps): ReactElement {\n  const { t } = useWords(\"progress-circle\");\n\n  return (\n    <ProgressCircle.Root size=\"lg\" value={62} {...props}>\n      <ProgressCircle.Circle>\n        <ProgressCircle.Track />\n        <ProgressCircle.Range />\n      </ProgressCircle.Circle>\n      <ProgressCircle.ValueText />\n      <ProgressCircle.Label>{t(\"upload\")}</ProgressCircle.Label>\n    </ProgressCircle.Root>\n  );\n}\n";
+//#endregion
+//#region src/progress-circle/progress-circle.specimen.tsx
+/**
+* Catalogue page for the progress circle.
+*
+* @remarks
+*   `scenesOf` generates one scene per recipe axis from an upload at 62% with its figure in the
+*   ring. The `shape` scene uses the thickest ring, and the `palette` scene crosses the looks.
+*   Hand-written scenes render a value the machine does not know in both looks, a checklist
+*   counted in steps and a storage quota counted in gigabytes. The words are keys under
+*   `progress-circle` in `locales/en/specimen/progress-circle.json`.
+*/
+/**
+* Looks of the unknown-value scene.
+*/
+const LOOKS = ["outline", "subtle"];
+/**
+* Hand-written scene for a value the machine does not know, in both looks.
+*/
+const unknown = {
+	about: "progress-circle.unknown.about",
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		knob: "variant",
+		of: LOOKS,
+		children: (variant) => /* @__PURE__ */ jsx(Syncing, { variant })
+	}),
+	example: syncing_example_exports,
+	props: { variant: "outline" },
+	title: "progress-circle.unknown.title"
+};
+/**
+* Hand-written scene for a checklist counted in steps.
+*/
+const steps = {
+	about: "progress-circle.counted.about",
+	draw: () => /* @__PURE__ */ jsx(Checklist, {}),
+	example: checklist_example_exports,
+	title: "progress-circle.counted.title"
+};
+/**
+* Hand-written scene for a storage quota in its own units.
+*/
+const units = {
+	about: "progress-circle.units.about",
+	draw: () => /* @__PURE__ */ jsx(Quota, {}),
+	example: quota_example_exports,
+	title: "progress-circle.units.title"
+};
+var progress_circle_specimen_default = specimen({
+	about: "progress-circle.about",
+	id: "components/feedback/progress-circle",
+	imports: "import { ProgressCircle } from \"@stealthscale/component-feedback\";",
+	scenes: [
+		...scenesOf(recipe, {
+			axes: {
+				palette: { across: "variant" },
+				shape: { with: { size: "xl" } }
+			},
+			draw: (props) => /* @__PURE__ */ jsx(Upload, { ...props }),
+			example: upload_example_exports,
+			namespace: "progress-circle",
+			order: [
+				"size",
+				"shape",
+				"palette",
+				"layout"
+			]
+		}),
+		unknown,
+		steps,
+		units
+	],
+	title: "progress-circle.title"
+});
+//#endregion
+export { progress_circle_specimen_default as default, steps, units, unknown };

package/dist/pages/progress-circle/progress-circle.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"CircleProps": {"conditions": 284, "foreign": 1178}, "LabelProps": {"conditions": 284, "foreign": 1041}, "RangeProps": {"conditions": 284, "foreign": 1178}, "RootProps": {"conditions": 284, "foreign": 1038}, "TrackProps": {"conditions": 284, "foreign": 1178}, "ValueTextProps": {"conditions": 284, "foreign": 1041}};
+export const parts = {"CircleProps": [], "LabelProps": [], "RangeProps": [], "RootProps": [{"accepts": "number | null", "fallback": "50", "kind": "option", "name": "defaultValue", "refers": [], "required": false, "says": "The initial value of the progress bar when rendered. Use when you don't need to control the value of the progress bar."}, {"accepts": "\"ltr\" | \"rtl\"", "fallback": "\"ltr\"", "kind": "option", "name": "dir", "refers": [], "required": false, "says": "The document's text/writing direction."}, {"accepts": "NumberFormatOptions", "fallback": "{ style: \"percent\" }", "kind": "option", "name": "formatOptions", "refers": [], "required": false, "says": "The options to use for formatting the value."}, {"accepts": "(() => Document | Node | ShadowRoot)", "fallback": "", "kind": "option", "name": "getRootNode", "refers": [], "required": false, "says": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "id", "refers": [], "required": false, "says": "The unique identifier of the machine."}, {"accepts": "ElementIds", "fallback": "", "kind": "option", "name": "ids", "refers": ["progress.ElementIds"], "required": false, "says": "The ids of the elements in the progress bar. Useful for composition."}, {"accepts": "\"inline\" | \"stacked\"", "fallback": "", "kind": "variant", "name": "layout", "refers": [], "required": false, "says": "Where the label goes: under the ring, or beside it."}, {"accepts": "string", "fallback": "\"en-US\"", "kind": "option", "name": "locale", "refers": [], "required": false, "says": "The locale to use for formatting the value."}, {"accepts": "number", "fallback": "100", "kind": "option", "name": "max", "refers": [], "required": false, "says": "The maximum allowed value of the progress bar."}, {"accepts": "number", "fallback": "0", "kind": "option", "name": "min", "refers": [], "required": false, "says": "The minimum allowed value of the progress bar."}, {"accepts": "((details: ValueChangeDetails) => void)", "fallback": "", "kind": "option", "name": "onValueChange", "refers": ["progress.ValueChangeDetails"], "required": false, "says": "Callback fired when the value changes."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": ""}, {"accepts": "\"full\" | \"square\"", "fallback": "", "kind": "variant", "name": "shape", "refers": [], "required": false, "says": "The ends of the range."}, {"accepts": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "The ring's width and thickness, and the value text's style."}, {"accepts": "number | null", "fallback": "", "kind": "option", "name": "value", "refers": [], "required": false, "says": "The controlled value of the progress bar."}, {"accepts": "\"outline\" | \"subtle\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Strokes the track in the palette's muted role, or in the muted ground."}], "TrackProps": [], "ValueTextProps": []};
+export const shapes = {"progress.ElementIds": [{"accepts": "string", "name": "root", "says": ""}, {"accepts": "string", "name": "track", "says": ""}, {"accepts": "string", "name": "label", "says": ""}, {"accepts": "string", "name": "circle", "says": ""}], "progress.ValueChangeDetails": [{"accepts": "number | null", "name": "value", "says": ""}]};

package/dist/pages/skeleton/skeleton.js

@@ -0,0 +1,94 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { n as recipe } from "../../recipes-CX1gSsN7.js";
+import { f as Skeleton } from "../../shared-Xc-n0bn7.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Room, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { Card } from "@stealthscale/component-surfaces";
+//#region src/skeleton/examples/profile.example.tsx
+var profile_example_exports = /* @__PURE__ */ __exportAll({
+	Profile: () => Profile,
+	source: () => source
+});
+function Profile(props) {
+	const $ = c(14);
+	const { t } = useWords("skeleton");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("name");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Card.Title, { children: t0 });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("role");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Card.Description, { children: t2 });
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t1 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Card.Root, {
+			size: "sm",
+			children: /* @__PURE__ */ jsxs(Card.Header, { children: [t1, t3] })
+		});
+		$[8] = t1;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== props || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Skeleton, {
+			...props,
+			children: t4
+		});
+		$[11] = props;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { Card } from \"@stealthscale/component-surfaces\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Skeleton } from \"@stealthscale/component-feedback\";\n\nexport function Profile(props: Parameters<typeof Skeleton>[0]): ReactElement {\n  const { t } = useWords(\"skeleton\");\n\n  return (\n    <Skeleton {...props}>\n      <Card.Root size=\"sm\">\n        <Card.Header>\n          <Card.Title>{t(\"name\")}</Card.Title>\n          <Card.Description>{t(\"role\")}</Card.Description>\n        </Card.Header>\n      </Card.Root>\n    </Skeleton>\n  );\n}\n";
+//#endregion
+//#region src/skeleton/skeleton.specimen.tsx
+/**
+* Catalogue page for the skeleton.
+*
+* @remarks
+*   `scenesOf` generates one scene per recipe axis. Every scene renders the profile card from
+*   `examples/` and shows that file as its source. The card gives the skeleton a box, because an
+*   empty skeleton collapses to zero height. Each card renders in a `Room` at a sidebar's width.
+*   The words are keys under `skeleton` in `locales/en/specimen/skeleton.json`.
+*/
+var skeleton_specimen_default = specimen({
+	about: "skeleton.about",
+	id: "components/feedback/skeleton",
+	imports: "import { Skeleton } from \"@stealthscale/component-feedback\";",
+	scenes: scenesOf(recipe, {
+		draw: (props) => /* @__PURE__ */ jsx(Room, {
+			size: "xs",
+			children: /* @__PURE__ */ jsx(Profile, { ...props })
+		}),
+		example: profile_example_exports,
+		namespace: "skeleton",
+		order: [
+			"loading",
+			"motion",
+			"radius"
+		]
+	}),
+	title: "skeleton.title"
+});
+//#endregion
+export { skeleton_specimen_default as default };

package/dist/pages/skeleton/skeleton.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"SkeletonProps": {"conditions": 284, "foreign": 1041}};
+export const parts = {"SkeletonProps": [{"accepts": "boolean", "fallback": "", "kind": "variant", "name": "loading", "refers": [], "required": false, "says": "Whether the content is still loading. `true` paints the placeholder and hides the content."}, {"accepts": "\"none\" | \"pulse\" | \"shimmer\"", "fallback": "", "kind": "variant", "name": "motion", "refers": [], "required": false, "says": "Animation of the placeholder while loading."}, {"accepts": "Corner", "fallback": "", "kind": "variant", "name": "radius", "refers": ["kit.Corner"], "required": false, "says": ""}]};
+export const shapes = {"kit.Corner": [{"accepts": "", "name": "\"full\"", "says": ""}, {"accepts": "", "name": "\"l1\"", "says": ""}, {"accepts": "", "name": "\"l2\"", "says": ""}, {"accepts": "", "name": "\"l3\"", "says": ""}]};

package/dist/pages/skeleton-text/skeleton-text.js

@@ -0,0 +1,81 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { n as recipe } from "../../recipes-CX1gSsN7.js";
+import { d as SkeletonText } from "../../shared-Xc-n0bn7.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { Matrix, specimen, valuesOf } from "@stealthscale/specimen";
+//#region src/skeleton-text/examples/paragraph.example.tsx
+var paragraph_example_exports = /* @__PURE__ */ __exportAll({
+	Paragraph: () => Paragraph,
+	source: () => source
+});
+function Paragraph(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(SkeletonText, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { SkeletonText } from \"@stealthscale/component-feedback\";\n\nexport function Paragraph(props: Parameters<typeof SkeletonText>[0]): ReactElement {\n  return <SkeletonText {...props} />;\n}\n";
+//#endregion
+//#region src/skeleton-text/skeleton-text.specimen.tsx
+/**
+* Catalogue page for the skeleton text.
+*
+* @remarks
+*   Both scenes are hand-written, because the recipe has no axes. The line scene varies the
+*   `lines` prop, and the motion scene varies the skeleton recipe's `motion` axis, which the bars
+*   take. Each scene renders the example from `examples/` once per value and shows it as its
+*   source with the first value. The cells run in one column, because the bars fill the width they
+*   get. The words are keys under `skeleton-text` in `locales/en/specimen/skeleton-text.json`.
+*/
+/**
+* Line counts of the line scene.
+*/
+const COUNTS = [
+	1,
+	3,
+	6
+];
+/**
+* Hand-written scene for one, three and six lines.
+*/
+const lines = {
+	about: "skeleton-text.lines.about",
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		direction: "column",
+		knob: "lines",
+		of: COUNTS,
+		children: (count) => /* @__PURE__ */ jsx(Paragraph, { lines: count })
+	}),
+	example: paragraph_example_exports,
+	props: { lines: 1 },
+	title: "skeleton-text.lines.title"
+};
+/**
+* Hand-written scene for every motion of the skeleton recipe.
+*/
+const motion = {
+	about: "skeleton-text.motion.about",
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		direction: "column",
+		knob: "motion",
+		of: valuesOf(recipe, "motion"),
+		children: (value) => /* @__PURE__ */ jsx(Paragraph, { motion: value })
+	}),
+	example: paragraph_example_exports,
+	props: { motion: "none" },
+	title: "skeleton-text.motion.title"
+};
+var skeleton_text_specimen_default = specimen({
+	about: "skeleton-text.about",
+	id: "components/feedback/skeleton-text",
+	imports: "import { SkeletonText } from \"@stealthscale/component-feedback\";",
+	scenes: [lines, motion],
+	title: "skeleton-text.title"
+});
+//#endregion
+export { skeleton_text_specimen_default as default, lines, motion };

package/dist/pages/skeleton-text/skeleton-text.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"SkeletonTextProps": {"conditions": 284, "foreign": 1041}};
+export const parts = {"SkeletonTextProps": [{"accepts": "number", "fallback": "", "kind": "option", "name": "lines", "refers": [], "required": false, "says": "Number of bars. Defaults to 3, and a value below 1 renders one bar."}, {"accepts": "\"none\" | \"pulse\" | \"shimmer\"", "fallback": "", "kind": "option", "name": "motion", "refers": [], "required": false, "says": "Animation of every bar. The skeleton recipe's default applies when absent."}, {"accepts": "Corner", "fallback": "", "kind": "option", "name": "radius", "refers": ["kit.Corner"], "required": false, "says": "Corner radius of every bar. The skeleton recipe's default applies when absent."}]};
+export const shapes = {"kit.Corner": [{"accepts": "", "name": "\"full\"", "says": ""}, {"accepts": "", "name": "\"l1\"", "says": ""}, {"accepts": "", "name": "\"l2\"", "says": ""}, {"accepts": "", "name": "\"l3\"", "says": ""}]};