@stealthscale/component-collections 0.1.2 → 0.1.3

package/dist/pages/table/table.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"BodyProps": {"conditions": 284, "foreign": 1041}, "CaptionProps": {"conditions": 284, "foreign": 1041}, "CellProps": {"conditions": 284, "foreign": 1048}, "ColumnGroupProps": {"conditions": 284, "foreign": 1042}, "ColumnHeaderProps": {"conditions": 284, "foreign": 1047}, "ColumnProps": {"conditions": 284, "foreign": 1042}, "FooterProps": {"conditions": 284, "foreign": 1041}, "HeaderProps": {"conditions": 284, "foreign": 1041}, "RootProps": {"conditions": 284, "foreign": 1048}, "RowHeaderProps": {"conditions": 284, "foreign": 1047}, "RowProps": {"conditions": 284, "foreign": 1041}, "ScrollerProps": {"conditions": 284, "foreign": 1041}, "SorterProps": {"conditions": 284, "foreign": 1051}, "SimpleProps": {"conditions": 284, "foreign": 1040}};
+export const parts = {"BodyProps": [], "CaptionProps": [], "CellProps": [], "ColumnGroupProps": [], "ColumnHeaderProps": [], "ColumnProps": [], "FooterProps": [], "HeaderProps": [], "RootProps": [], "RowHeaderProps": [], "RowProps": [], "ScrollerProps": [{"accepts": "\"center\" | \"end\" | \"start\"", "fallback": "", "kind": "variant", "name": "align", "refers": [], "required": false, "says": "Vertical alignment of a cell's content in a row taller than one line."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "banded", "refers": [], "required": false, "says": "Whether the column names render on `bg.subtle`, in capitals, tracked out."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "focusable", "refers": [], "required": false, "says": "Whether the viewport is a region with a tab stop while the table overflows. `false` keeps it out of the tab order, for a table whose cells take focus. `true` unless stated."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "interactive", "refers": [], "required": false, "says": "Whether a body row fills under the pointer and while a control inside it has focus."}, {"accepts": "\"auto\" | \"fixed\"", "fallback": "", "kind": "variant", "name": "layout", "refers": [], "required": false, "says": "Column widths from the content, or from the column declarations and the first row."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette the selected row and the interactive row fill read."}, {"accepts": "\"l1\" | \"l2\" | \"l3\"", "fallback": "", "kind": "variant", "name": "radius", "refers": [], "required": false, "says": "Corner radius of the scroller, from the layer radii without the pill, which clips the first and last rows."}, {"accepts": "\"all\" | \"none\" | \"rows\"", "fallback": "", "kind": "variant", "name": "rules", "refers": [], "required": false, "says": "Where the body rules run: `rows` between rows, `all` between rows and between columns, and `none` nowhere. The rule under the header and the rule over the footer render in every value."}, {"accepts": "\"lg\" | \"md\" | \"sm\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "Text size and cell padding: cells read the body role at the size, and the column names and the caption read the label role one size smaller."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "stickyColumn", "refers": [], "required": false, "says": "Whether the row headers and the first column header stick to the start of the scroll area's viewport."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "stickyHeader", "refers": [], "required": false, "says": "Whether the header rows stick to the top of the scroll area's viewport."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "striped", "refers": [], "required": false, "says": "Whether every odd body row renders on `bg.muted`."}, {"accepts": "\"plain\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Surface of the scroller: the panel inside a hairline edge, or transparent."}, {"accepts": "Ref<HTMLDivElement>", "fallback": "", "kind": "option", "name": "viewportRef", "refers": ["react.RefObject", "react.bivarianceHack"], "required": false, "says": "Ref of the scroll area's viewport, the element that scrolls."}], "SorterProps": [], "SimpleProps": [{"accepts": "\"center\" | \"end\" | \"start\"", "fallback": "", "kind": "variant", "name": "align", "refers": [], "required": false, "says": "Vertical alignment of a cell's content in a row taller than one line."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "banded", "refers": [], "required": false, "says": "Whether the column names render on `bg.subtle`, in capitals, tracked out."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "caption", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Caption rendered under the table, and the accessible name of the table and the scroller."}, {"accepts": "readonly Column<Row>[]", "fallback": "", "kind": "option", "name": "columns", "refers": ["kit.Branch", "kit.Column", "kit.Leaf", "kit.Row", "react.ReactElement", "react.ReactPortal"], "required": true, "says": "Columns in render order. A branch spans the columns under it."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "empty", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Content of a full-width row rendered while `rows` is empty."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "focusable", "refers": [], "required": false, "says": "Whether the viewport is a region with a tab stop while the table overflows. `false` keeps it out of the tab order, for a table whose cells take focus. `true` unless stated."}, {"accepts": "((row: Row) => string)", "fallback": "", "kind": "option", "name": "groupBy", "refers": ["kit.Row"], "required": false, "says": "Returns the key of the section a record belongs to."}, {"accepts": "((under: string) => ReactNode)", "fallback": "", "kind": "option", "name": "groupLabel", "refers": [], "required": false, "says": "Returns a section's heading from its key. Defaults to the key."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "interactive", "refers": [], "required": false, "says": "Whether a body row fills under the pointer and while a control inside it has focus."}, {"accepts": "\"auto\" | \"fixed\"", "fallback": "", "kind": "variant", "name": "layout", "refers": [], "required": false, "says": "Column widths from the content, or from the column declarations and the first row."}, {"accepts": "((key: string) => void)", "fallback": "", "kind": "option", "name": "onSort", "refers": [], "required": false, "says": "Called with the column key on a press of a sort button."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette the selected row and the interactive row fill read."}, {"accepts": "\"l1\" | \"l2\" | \"l3\"", "fallback": "", "kind": "variant", "name": "radius", "refers": [], "required": false, "says": "Corner radius of the scroller, from the layer radii without the pill, which clips the first and last rows."}, {"accepts": "readonly Row[]", "fallback": "", "kind": "option", "name": "rows", "refers": ["kit.Row"], "required": true, "says": "Records in render order."}, {"accepts": "(row: Row) => string", "fallback": "", "kind": "option", "name": "rowToKey", "refers": ["kit.Row"], "required": true, "says": "Returns the React key of a record."}, {"accepts": "\"all\" | \"none\" | \"rows\"", "fallback": "", "kind": "variant", "name": "rules", "refers": [], "required": false, "says": "Where the body rules run: `rows` between rows, `all` between rows and between columns, and `none` nowhere. The rule under the header and the rule over the footer render in every value."}, {"accepts": "\"lg\" | \"md\" | \"sm\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "Text size and cell padding: cells read the body role at the size, and the column names and the caption read the label role one size smaller."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "stickyColumn", "refers": [], "required": false, "says": "Whether the row headers and the first column header stick to the start of the scroll area's viewport."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "stickyHeader", "refers": [], "required": false, "says": "Whether the header rows stick to the top of the scroll area's viewport."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "striped", "refers": [], "required": false, "says": "Whether every odd body row renders on `bg.muted`."}, {"accepts": "((column: Leaf<Row>) => ReactNode)", "fallback": "", "kind": "option", "name": "total", "refers": ["kit.Leaf", "kit.Row"], "required": false, "says": "Returns the total row's content for a leaf column. Branches are never passed."}, {"accepts": "\"plain\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Surface of the scroller: the panel inside a hairline edge, or transparent."}, {"accepts": "Ref<HTMLDivElement>", "fallback": "", "kind": "option", "name": "viewportRef", "refers": ["react.RefObject", "react.bivarianceHack"], "required": false, "says": "Ref of the scroll area's viewport, the element that scrolls."}]};
+export const shapes = {"react.RefObject": [{"accepts": "HTMLDivElement | null", "name": "current", "says": "The current value of the ref."}], "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.Column": [{"accepts": "", "name": "Branch<Row>", "says": ""}, {"accepts": "", "name": "Leaf<Row>", "says": ""}], "kit.Branch": [{"accepts": "readonly Column<Row>[]", "name": "columns", "says": "Columns the header spans."}, {"accepts": "ReactNode", "name": "label", "says": "Text of the spanning header."}], "kit.Leaf": [{"accepts": "((row: Row) => ReactNode)", "name": "cell", "says": "Returns the column's value for a record. Defaults to the record's property named `key`."}, {"accepts": "string", "name": "key", "says": "Key of the column, and the property its value is read from without `cell`."}, {"accepts": "ReactNode", "name": "label", "says": "Header of the column."}, {"accepts": "boolean", "name": "numeric", "says": "Whether the column contains figures, aligned to the end in tabular figures."}, {"accepts": "boolean", "name": "rowHeader", "says": "Whether the column's cells render as row headers."}, {"accepts": "\"ascending\" | \"descending\"", "name": "sorted", "says": "Sort direction, on the column the table is sorted by."}, {"accepts": "string", "name": "sortLabel", "says": "Accessible name of the column's sort button. A column without it does not sort."}, {"accepts": "string", "name": "width", "says": "Width of the column, as a CSS length or percentage."}]};

package/dist/pages/timeline/timeline.js

@@ -0,0 +1,380 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { C as Connector, S as Content, _ as Title, b as Indicator, v as Root, x as Description, y as Item } from "../../shared-DVn824MJ.js";
+import { i as recipe } from "../../recipes-C1oaF8pO.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Room, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { CheckIcon, HouseIcon, PackageIcon, PencilIcon, ShoppingCartIcon, TruckIcon, XIcon } from "lucide-react";
+import { Span } from "@stealthscale/component-typography";
+import { Avatar } from "@stealthscale/component-media";
+//#region src/timeline/examples/activity.example.tsx
+var activity_example_exports = /* @__PURE__ */ __exportAll({
+	Activity: () => Activity,
+	source: () => source$4
+});
+const CHANGES = [
+	[
+		"lucas",
+		"renamed",
+		PencilIcon
+	],
+	[
+		"jenna",
+		"removed",
+		XIcon
+	],
+	[
+		"ada",
+		"approved",
+		CheckIcon
+	]
+];
+function Activity() {
+	const $ = c(4);
+	const { t } = useWords("timeline");
+	let t0;
+	if ($[0] !== t) {
+		t0 = CHANGES.map((t1) => {
+			const [who, did, Glyph] = t1;
+			return /* @__PURE__ */ jsxs(Item, { children: [/* @__PURE__ */ jsx(Connector, { children: /* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx(Glyph, {}) }) }), /* @__PURE__ */ jsxs(Content, { children: [/* @__PURE__ */ jsxs(Title, { children: [
+				/* @__PURE__ */ jsx(Avatar.Root, {
+					"aria-hidden": true,
+					name: t(who),
+					size: "2xs",
+					children: /* @__PURE__ */ jsx(Avatar.Fallback, {})
+				}),
+				/* @__PURE__ */ jsx(Span, {
+					weight: "semibold",
+					children: t(who)
+				}),
+				/* @__PURE__ */ jsx(Span, {
+					tone: "muted",
+					children: t(did)
+				}),
+				t(`${did}What`)
+			] }), /* @__PURE__ */ jsx(Description, { children: t(`${did}On`) })] })] }, who);
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Root, {
+			size: "lg",
+			variant: "subtle",
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon, PencilIcon, XIcon } from \"lucide-react\";\n\nimport { Avatar } from \"@stealthscale/component-media\";\nimport { Span } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Timeline } from \"@stealthscale/component-collections\";\n\nconst CHANGES = [\n  [\"lucas\", \"renamed\", PencilIcon],\n  [\"jenna\", \"removed\", XIcon],\n  [\"ada\", \"approved\", CheckIcon],\n] as const;\n\nexport function Activity(): ReactElement {\n  const { t } = useWords(\"timeline\");\n\n  return (\n    <Timeline.Root size=\"lg\" variant=\"subtle\">\n      {CHANGES.map(([who, did, Glyph]) => (\n        <Timeline.Item key={who}>\n          <Timeline.Connector>\n            <Timeline.Indicator>\n              <Glyph />\n            </Timeline.Indicator>\n          </Timeline.Connector>\n          <Timeline.Content>\n            <Timeline.Title>\n              <Avatar.Root aria-hidden name={t(who)} size=\"2xs\">\n                <Avatar.Fallback />\n              </Avatar.Root>\n              <Span weight=\"semibold\">{t(who)}</Span>\n              <Span tone=\"muted\">{t(did)}</Span>\n              {t(`${did}What`)}\n            </Timeline.Title>\n            <Timeline.Description>{t(`${did}On`)}</Timeline.Description>\n          </Timeline.Content>\n        </Timeline.Item>\n      ))}\n    </Timeline.Root>\n  );\n}\n";
+//#endregion
+//#region src/timeline/examples/alternating.example.tsx
+var alternating_example_exports = /* @__PURE__ */ __exportAll({
+	Alternating: () => Alternating,
+	source: () => source$3
+});
+const LEGS$1 = [
+	[
+		"placed",
+		"end",
+		ShoppingCartIcon
+	],
+	[
+		"packed",
+		"start",
+		PackageIcon
+	],
+	[
+		"shipped",
+		"end",
+		TruckIcon
+	],
+	[
+		"arrived",
+		"start",
+		HouseIcon
+	]
+];
+function Alternating() {
+	const $ = c(4);
+	const { t } = useWords("timeline");
+	let t0;
+	if ($[0] !== t) {
+		t0 = LEGS$1.map((t1) => {
+			const [leg, side, Glyph] = t1;
+			const words = /* @__PURE__ */ jsxs(Content, { children: [/* @__PURE__ */ jsx(Title, { children: t(leg) }), /* @__PURE__ */ jsx(Description, { children: t(`${leg}At`) })] });
+			return /* @__PURE__ */ jsxs(Item, { children: [
+				side === "start" ? words : null,
+				/* @__PURE__ */ jsx(Connector, { children: /* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx(Glyph, {}) }) }),
+				side === "end" ? words : null
+			] }, leg);
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Root, {
+			rail: "center",
+			variant: "outline",
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { HouseIcon, PackageIcon, ShoppingCartIcon, TruckIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Timeline } from \"@stealthscale/component-collections\";\n\nconst LEGS = [\n  [\"placed\", \"end\", ShoppingCartIcon],\n  [\"packed\", \"start\", PackageIcon],\n  [\"shipped\", \"end\", TruckIcon],\n  [\"arrived\", \"start\", HouseIcon],\n] as const;\n\nexport function Alternating(): ReactElement {\n  const { t } = useWords(\"timeline\");\n\n  return (\n    <Timeline.Root rail=\"center\" variant=\"outline\">\n      {LEGS.map(([leg, side, Glyph]) => {\n        const words = (\n          <Timeline.Content>\n            <Timeline.Title>{t(leg)}</Timeline.Title>\n            <Timeline.Description>{t(`${leg}At`)}</Timeline.Description>\n          </Timeline.Content>\n        );\n\n        return (\n          <Timeline.Item key={leg}>\n            {side === \"start\" ? words : null}\n            <Timeline.Connector>\n              <Timeline.Indicator>\n                <Glyph />\n              </Timeline.Indicator>\n            </Timeline.Connector>\n            {side === \"end\" ? words : null}\n          </Timeline.Item>\n        );\n      })}\n    </Timeline.Root>\n  );\n}\n";
+//#endregion
+//#region src/timeline/examples/dated.example.tsx
+var dated_example_exports = /* @__PURE__ */ __exportAll({
+	Dated: () => Dated,
+	source: () => source$2
+});
+const LEGS = [
+	"booked",
+	"cleared",
+	"delivered"
+];
+function Dated(props) {
+	const $ = c(5);
+	const { t } = useWords("timeline");
+	let t0;
+	if ($[0] !== t) {
+		t0 = LEGS.map((leg, index) => /* @__PURE__ */ jsxs(Item, { children: [
+			/* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(Title, { children: t(`${leg}On`) }) }),
+			/* @__PURE__ */ jsx(Connector, { children: /* @__PURE__ */ jsx(Indicator, { children: index + 1 }) }),
+			/* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(Title, { children: t(leg) }) })
+		] }, leg));
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Root, {
+			variant: "subtle",
+			...props,
+			children: t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Timeline } from \"@stealthscale/component-collections\";\n\nconst LEGS = [\"booked\", \"cleared\", \"delivered\"] as const;\n\nexport function Dated(props: Timeline.RootProps): ReactElement {\n  const { t } = useWords(\"timeline\");\n\n  return (\n    <Timeline.Root variant=\"subtle\" {...props}>\n      {LEGS.map((leg, index) => (\n        <Timeline.Item key={leg}>\n          <Timeline.Content>\n            <Timeline.Title>{t(`${leg}On`)}</Timeline.Title>\n          </Timeline.Content>\n          <Timeline.Connector>\n            <Timeline.Indicator>{index + 1}</Timeline.Indicator>\n          </Timeline.Connector>\n          <Timeline.Content>\n            <Timeline.Title>{t(leg)}</Timeline.Title>\n          </Timeline.Content>\n        </Timeline.Item>\n      ))}\n    </Timeline.Root>\n  );\n}\n";
+//#endregion
+//#region src/timeline/examples/run.example.tsx
+var run_example_exports = /* @__PURE__ */ __exportAll({
+	Run: () => Run,
+	source: () => source$1
+});
+const EVENTS = [
+	"raised",
+	"accepted",
+	"settled"
+];
+function Run(props) {
+	const $ = c(5);
+	const { t } = useWords("timeline");
+	let t0;
+	if ($[0] !== t) {
+		t0 = EVENTS.map((event, index) => /* @__PURE__ */ jsxs(Item, { children: [/* @__PURE__ */ jsx(Connector, { children: /* @__PURE__ */ jsx(Indicator, { children: index + 1 }) }), /* @__PURE__ */ jsxs(Content, { children: [/* @__PURE__ */ jsx(Title, { children: t(event) }), /* @__PURE__ */ jsx(Description, { children: t(`${event}On`) })] })] }, event));
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Root, {
+			...props,
+			children: t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Timeline } from \"@stealthscale/component-collections\";\n\nconst EVENTS = [\"raised\", \"accepted\", \"settled\"] as const;\n\nexport function Run(props: Timeline.RootProps): ReactElement {\n  const { t } = useWords(\"timeline\");\n\n  return (\n    <Timeline.Root {...props}>\n      {EVENTS.map((event, index) => (\n        <Timeline.Item key={event}>\n          <Timeline.Connector>\n            <Timeline.Indicator>{index + 1}</Timeline.Indicator>\n          </Timeline.Connector>\n          <Timeline.Content>\n            <Timeline.Title>{t(event)}</Timeline.Title>\n            <Timeline.Description>{t(`${event}On`)}</Timeline.Description>\n          </Timeline.Content>\n        </Timeline.Item>\n      ))}\n    </Timeline.Root>\n  );\n}\n";
+//#endregion
+//#region src/timeline/examples/shipment.example.tsx
+var shipment_example_exports = /* @__PURE__ */ __exportAll({
+	Shipment: () => Shipment,
+	source: () => source
+});
+function Shipment() {
+	const $ = c(27);
+	const { t } = useWords("timeline");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Connector, { children: /* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) }) });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("left");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Title, { children: t1 });
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("leftOn");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Description, { children: t3 });
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t2 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Item, { children: [t0, /* @__PURE__ */ jsxs(Content, { children: [t2, t4] })] });
+		$[9] = t2;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(Connector, { children: /* @__PURE__ */ jsx(Indicator, { children: /* @__PURE__ */ jsx(TruckIcon, {}) }) });
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t) {
+		t7 = t("transit");
+		$[13] = t;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Title, { children: t7 });
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t) {
+		t9 = t("expected");
+		$[17] = t;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Description, { children: t9 });
+		$[19] = t9;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t10 || $[22] !== t8) {
+		t11 = /* @__PURE__ */ jsxs(Item, { children: [t6, /* @__PURE__ */ jsxs(Content, { children: [t8, t10] })] });
+		$[21] = t10;
+		$[22] = t8;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== t11 || $[25] !== t5) {
+		t12 = /* @__PURE__ */ jsxs(Root, {
+			ongoing: true,
+			palette: "success",
+			children: [t5, t11]
+		});
+		$[24] = t11;
+		$[25] = t5;
+		$[26] = t12;
+	} else t12 = $[26];
+	return t12;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon, TruckIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Timeline } from \"@stealthscale/component-collections\";\n\nexport function Shipment(): ReactElement {\n  const { t } = useWords(\"timeline\");\n\n  return (\n    <Timeline.Root ongoing palette=\"success\">\n      <Timeline.Item>\n        <Timeline.Connector>\n          <Timeline.Indicator>\n            <CheckIcon />\n          </Timeline.Indicator>\n        </Timeline.Connector>\n        <Timeline.Content>\n          <Timeline.Title>{t(\"left\")}</Timeline.Title>\n          <Timeline.Description>{t(\"leftOn\")}</Timeline.Description>\n        </Timeline.Content>\n      </Timeline.Item>\n      <Timeline.Item>\n        <Timeline.Connector>\n          <Timeline.Indicator>\n            <TruckIcon />\n          </Timeline.Indicator>\n        </Timeline.Connector>\n        <Timeline.Content>\n          <Timeline.Title>{t(\"transit\")}</Timeline.Title>\n          <Timeline.Description>{t(\"expected\")}</Timeline.Description>\n        </Timeline.Content>\n      </Timeline.Item>\n    </Timeline.Root>\n  );\n}\n";
+//#endregion
+//#region src/timeline/timeline.specimen.tsx
+/**
+* Catalogue page for the timeline.
+*
+* @remarks
+*   `scenesOf` generates the size, look, palette and ongoing scenes from a run of three numbered
+*   events, each in a room at the `xs` measure, because a timeline is as wide as its container. The
+*   rail scene renders dates before the rail in a room at the `sm` measure. Hand-written scenes
+*   render entries on alternating sides of a centred rail, an activity feed of faces and names, and
+*   a shipment still on its way. The words are keys under `timeline` in
+*   `locales/en/specimen/timeline.json`.
+*/
+/**
+* Hand-written scene for entries on alternating sides of a centred rail.
+*/
+const sides = {
+	about: "timeline.sides.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Alternating, {})
+	}),
+	example: alternating_example_exports,
+	title: "timeline.sides.title"
+};
+/**
+* Hand-written scene for an activity feed of faces, names and changes.
+*/
+const feed = {
+	about: "timeline.feed.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Activity, {})
+	}),
+	example: activity_example_exports,
+	title: "timeline.feed.title"
+};
+/**
+* Hand-written scene for a shipment still on its way, on the success palette.
+*/
+const tracked = {
+	about: "timeline.tracked.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Shipment, {})
+	}),
+	example: shipment_example_exports,
+	title: "timeline.tracked.title"
+};
+var timeline_specimen_default = specimen({
+	about: "timeline.about",
+	id: "components/collections/timeline",
+	imports: "import { Timeline } from \"@stealthscale/component-collections\";",
+	scenes: [
+		...scenesOf(recipe, {
+			axes: { rail: {
+				draw: (props) => /* @__PURE__ */ jsx(Room, {
+					size: "sm",
+					children: /* @__PURE__ */ jsx(Dated, { ...props })
+				}),
+				example: dated_example_exports
+			} },
+			draw: (props) => /* @__PURE__ */ jsx(Room, {
+				size: "xs",
+				children: /* @__PURE__ */ jsx(Run, { ...props })
+			}),
+			example: run_example_exports,
+			namespace: "timeline",
+			order: [
+				"size",
+				"variant",
+				"palette",
+				"rail",
+				"ongoing"
+			]
+		}),
+		sides,
+		feed,
+		tracked
+	],
+	title: "timeline.title"
+});
+//#endregion
+export { timeline_specimen_default as default, feed, sides, tracked };

package/dist/pages/timeline/timeline.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"ConnectorProps": {"conditions": 284, "foreign": 1041}, "ContentProps": {"conditions": 284, "foreign": 1041}, "DescriptionProps": {"conditions": 284, "foreign": 1041}, "IndicatorProps": {"conditions": 284, "foreign": 1041}, "ItemProps": {"conditions": 284, "foreign": 1042}, "RootProps": {"conditions": 284, "foreign": 1043}, "TitleProps": {"conditions": 284, "foreign": 1041}};
+export const parts = {"ConnectorProps": [], "ContentProps": [], "DescriptionProps": [], "IndicatorProps": [], "ItemProps": [], "RootProps": [{"accepts": "boolean", "fallback": "", "kind": "variant", "name": "ongoing", "refers": [], "required": false, "says": "Whether the run is still going, which draws the rail past the last indicator."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": ""}, {"accepts": "\"center\" | \"end\" | \"start\"", "fallback": "", "kind": "variant", "name": "rail", "refers": [], "required": false, "says": "Where the rail runs, and how the words on either side of it share the width."}, {"accepts": "\"lg\" | \"md\" | \"sm\" | \"xl\"", "fallback": "", "kind": "variant", "name": "size", "refers": [], "required": false, "says": "The indicator's side and the text styles of the words and the marks."}, {"accepts": "\"outline\" | \"plain\" | \"solid\" | \"subtle\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}], "TitleProps": []};
+export const shapes = {};