@stealthscale/component-collections 0.1.1 → 0.1.3

package/dist/pages/sortable/sortable.js

@@ -0,0 +1,576 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { G as Item, H as Root, J as Empty, K as ItemContent, U as List, W as Items, Y as Board$1, q as Handle } from "../../shared-DVn824MJ.js";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ButtonPropsProvider, IconButton } from "@stealthscale/component-actions";
+import { Room, specimen, useWords } from "@stealthscale/specimen";
+import { createPortal } from "react-dom";
+import { EllipsisIcon, GripVerticalIcon } from "lucide-react";
+import { Menu } from "@stealthscale/component-disclosure";
+import { Badge } from "@stealthscale/component-data";
+import { Code, Heading, Span, Text } from "@stealthscale/component-typography";
+import { Stack } from "@stealthscale/component-layout";
+//#region src/sortable/examples/board.example.tsx
+var board_example_exports = /* @__PURE__ */ __exportAll({
+	Board: () => Board,
+	source: () => source$4
+});
+const LISTS = [
+	"todo",
+	"doing",
+	"done"
+];
+const LIMIT = 3;
+const START = {
+	doing: [{ id: "api" }, { id: "tests" }],
+	done: [],
+	todo: [
+		{ id: "spec" },
+		{ id: "icons" },
+		{ id: "copy" }
+	]
+};
+function Board() {
+	const $ = c(27);
+	const { t } = useWords("sortable");
+	const [columns, setColumns] = useState(START);
+	const [saved, setSaved] = useState();
+	let T0;
+	let T1;
+	let t0;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== columns || $[1] !== saved || $[2] !== t) {
+		let t5;
+		if ($[10] !== t) {
+			t5 = (list) => [list, t(`board.${list}`)];
+			$[10] = t;
+			$[11] = t5;
+		} else t5 = $[11];
+		const titles = new Map(LISTS.map(t5));
+		T1 = Stack;
+		t3 = "md";
+		const t6 = LISTS.map((list_0) => /* @__PURE__ */ jsxs(List, {
+			label: titles.get(list_0),
+			limit: list_0 === "doing" ? LIMIT : void 0,
+			value: list_0,
+			children: [
+				/* @__PURE__ */ jsxs(Stack, {
+					align: "baseline",
+					direction: "row",
+					justify: "between",
+					children: [/* @__PURE__ */ jsx(Heading, {
+						as: "h3",
+						size: "sm",
+						children: titles.get(list_0)
+					}), /* @__PURE__ */ jsx(Badge, { children: list_0 === "doing" ? t("board.limit", {
+						count: columns[list_0].length,
+						limit: LIMIT
+					}) : columns[list_0].length })]
+				}),
+				/* @__PURE__ */ jsx(Items, { children: columns[list_0].map((card_0, index) => /* @__PURE__ */ jsxs(Item, {
+					index,
+					label: t(`board.cards.${card_0.id}`),
+					value: card_0.id,
+					children: [/* @__PURE__ */ jsx(Handle, { children: /* @__PURE__ */ jsx(GripVerticalIcon, {}) }), t(`board.cards.${card_0.id}`)]
+				}, card_0.id)) }),
+				/* @__PURE__ */ jsx(Empty, { children: t("board.empty") })
+			]
+		}, list_0));
+		let t7;
+		if ($[12] !== t6) {
+			t7 = /* @__PURE__ */ jsx(Board$1, { children: t6 });
+			$[12] = t6;
+			$[13] = t7;
+		} else t7 = $[13];
+		if ($[14] !== columns || $[15] !== t7) {
+			t4 = /* @__PURE__ */ jsx(Root, {
+				canMove: _temp$3,
+				items: columns,
+				onItemMove: setSaved,
+				onItemsChange: setColumns,
+				children: t7
+			});
+			$[14] = columns;
+			$[15] = t7;
+			$[16] = t4;
+		} else t4 = $[16];
+		T0 = Text;
+		t0 = "output";
+		t1 = "sm";
+		t2 = saved === void 0 ? t("board.none") : t("board.saved", {
+			list: titles.get(saved.to.list ?? ""),
+			position: saved.to.index + 1
+		});
+		$[0] = columns;
+		$[1] = saved;
+		$[2] = t;
+		$[3] = T0;
+		$[4] = T1;
+		$[5] = t0;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+	} else {
+		T0 = $[3];
+		T1 = $[4];
+		t0 = $[5];
+		t1 = $[6];
+		t2 = $[7];
+		t3 = $[8];
+		t4 = $[9];
+	}
+	let t5;
+	if ($[17] !== T0 || $[18] !== t0 || $[19] !== t1 || $[20] !== t2) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			as: t0,
+			size: t1,
+			children: t2
+		});
+		$[17] = T0;
+		$[18] = t0;
+		$[19] = t1;
+		$[20] = t2;
+		$[21] = t5;
+	} else t5 = $[21];
+	let t6;
+	if ($[22] !== T1 || $[23] !== t3 || $[24] !== t4 || $[25] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(T1, {
+			gap: t3,
+			children: [t4, t5]
+		});
+		$[22] = T1;
+		$[23] = t3;
+		$[24] = t4;
+		$[25] = t5;
+		$[26] = t6;
+	} else t6 = $[26];
+	return t6;
+}
+function _temp$3(card, from, to) {
+	return from !== "todo" || to !== "done";
+}
+const source$4 = "import { type ReactElement, useState } from \"react\";\n\nimport { GripVerticalIcon } from \"lucide-react\";\n\nimport { Badge } from \"@stealthscale/component-data\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Heading, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Sortable } from \"@stealthscale/component-collections\";\n\ntype Card = \"api\" | \"copy\" | \"icons\" | \"spec\" | \"tests\";\n\nconst LISTS = [\"todo\", \"doing\", \"done\"] as const;\n\nconst LIMIT = 3;\n\nconst START: Record<(typeof LISTS)[number], Array<{ id: Card }>> = {\n  doing: [{ id: \"api\" }, { id: \"tests\" }],\n  done: [],\n  todo: [{ id: \"spec\" }, { id: \"icons\" }, { id: \"copy\" }],\n};\n\nexport function Board(): ReactElement {\n  const { t } = useWords(\"sortable\");\n  const [columns, setColumns] = useState(START);\n  const [saved, setSaved] = useState<Sortable.SortableMove>();\n  const titles = new Map<string, string>(LISTS.map((list) => [list, t(`board.${list}`)]));\n\n  return (\n    <Stack gap=\"md\">\n      <Sortable.Root\n        canMove={(card, from, to) => from !== \"todo\" || to !== \"done\"}\n        items={columns}\n        onItemMove={setSaved}\n        onItemsChange={setColumns}\n      >\n        <Sortable.Board>\n          {LISTS.map((list) => (\n            <Sortable.List\n              key={list}\n              label={titles.get(list)}\n              limit={list === \"doing\" ? LIMIT : undefined}\n              value={list}\n            >\n              <Stack align=\"baseline\" direction=\"row\" justify=\"between\">\n                <Heading as=\"h3\" size=\"sm\">\n                  {titles.get(list)}\n                </Heading>\n                <Badge>\n                  {list === \"doing\"\n                    ? t(\"board.limit\", { count: columns[list].length, limit: LIMIT })\n                    : columns[list].length}\n                </Badge>\n              </Stack>\n              <Sortable.Items>\n                {columns[list].map((card, index) => (\n                  <Sortable.Item\n                    index={index}\n                    key={card.id}\n                    label={t(`board.cards.${card.id}`)}\n                    value={card.id}\n                  >\n                    <Sortable.Handle>\n                      <GripVerticalIcon />\n                    </Sortable.Handle>\n                    {t(`board.cards.${card.id}`)}\n                  </Sortable.Item>\n                ))}\n              </Sortable.Items>\n              <Sortable.Empty>{t(\"board.empty\")}</Sortable.Empty>\n            </Sortable.List>\n          ))}\n        </Sortable.Board>\n      </Sortable.Root>\n      <Text as=\"output\" size=\"sm\">\n        {saved === undefined\n          ? t(\"board.none\")\n          : t(\"board.saved\", {\n              list: titles.get(saved.to.list ?? \"\"),\n              position: saved.to.index + 1,\n            })}\n      </Text>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/sortable/examples/issues.example.tsx
+var issues_example_exports = /* @__PURE__ */ __exportAll({
+	Issues: () => Issues,
+	source: () => source$3
+});
+const ISSUES = [
+	{
+		id: "SCL-118",
+		priority: "high"
+	},
+	{
+		id: "SCL-124",
+		priority: "medium"
+	},
+	{
+		id: "SCL-131",
+		priority: "low"
+	},
+	{
+		id: "SCL-137",
+		priority: "medium"
+	}
+];
+const PALETTES = {
+	high: "error",
+	low: "neutral",
+	medium: "warning"
+};
+function Issues() {
+	const $ = c(14);
+	const { t } = useWords("sortable");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [...ISSUES];
+		$[0] = t0;
+	} else t0 = $[0];
+	const [issues, setIssues] = useState(t0);
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("issues.label");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== issues || $[4] !== t) {
+		let t3;
+		if ($[6] !== t) {
+			t3 = (issue, index) => /* @__PURE__ */ jsxs(Item, {
+				index,
+				label: `${issue.id}, ${t(`issues.titles.${issue.id}`)}`,
+				value: issue.id,
+				children: [
+					/* @__PURE__ */ jsx(Handle, { children: /* @__PURE__ */ jsx(GripVerticalIcon, {}) }),
+					/* @__PURE__ */ jsxs(ItemContent, { children: [/* @__PURE__ */ jsx(Code, { children: issue.id }), /* @__PURE__ */ jsx(Span, { children: t(`issues.titles.${issue.id}`) })] }),
+					/* @__PURE__ */ jsx(Badge, {
+						palette: PALETTES[issue.priority],
+						children: t(`issues.${issue.priority}`)
+					})
+				]
+			}, issue.id);
+			$[6] = t;
+			$[7] = t3;
+		} else t3 = $[7];
+		t2 = issues.map(t3);
+		$[3] = issues;
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[8] !== t1 || $[9] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Items, {
+			"aria-label": t1,
+			children: t2
+		});
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== issues || $[12] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Root, {
+			items: issues,
+			onItemsChange: setIssues,
+			children: t3
+		});
+		$[11] = issues;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
+}
+const source$3 = "import { type ReactElement, useState } from \"react\";\n\nimport { GripVerticalIcon } from \"lucide-react\";\n\nimport { Badge } from \"@stealthscale/component-data\";\nimport { Code, Span } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Sortable } from \"@stealthscale/component-collections\";\n\nconst ISSUES = [\n  { id: \"SCL-118\", priority: \"high\" },\n  { id: \"SCL-124\", priority: \"medium\" },\n  { id: \"SCL-131\", priority: \"low\" },\n  { id: \"SCL-137\", priority: \"medium\" },\n] as const;\n\nconst PALETTES = { high: \"error\", low: \"neutral\", medium: \"warning\" } as const;\n\nexport function Issues(): ReactElement {\n  const { t } = useWords(\"sortable\");\n  const [issues, setIssues] = useState<Array<(typeof ISSUES)[number]>>([...ISSUES]);\n\n  return (\n    <Sortable.Root items={issues} onItemsChange={setIssues}>\n      <Sortable.Items aria-label={t(\"issues.label\")}>\n        {issues.map((issue, index) => (\n          <Sortable.Item\n            index={index}\n            key={issue.id}\n            label={`${issue.id}, ${t(`issues.titles.${issue.id}`)}`}\n            value={issue.id}\n          >\n            <Sortable.Handle>\n              <GripVerticalIcon />\n            </Sortable.Handle>\n            <Sortable.ItemContent>\n              <Code>{issue.id}</Code>\n              <Span>{t(`issues.titles.${issue.id}`)}</Span>\n            </Sortable.ItemContent>\n            <Badge palette={PALETTES[issue.priority]}>{t(`issues.${issue.priority}`)}</Badge>\n          </Sortable.Item>\n        ))}\n      </Sortable.Items>\n    </Sortable.Root>\n  );\n}\n";
+//#endregion
+//#region src/sortable/examples/moves.example.tsx
+var moves_example_exports = /* @__PURE__ */ __exportAll({
+	Moves: () => Moves,
+	source: () => source$2
+});
+const TASKS = [
+	"invoices",
+	"payroll",
+	"audit",
+	"taxes"
+];
+const ACTIONS = [
+	"first",
+	"up",
+	"down",
+	"last"
+];
+function indexFor(action, index, count) {
+	if (action === "first") return 0;
+	if (action === "last") return count - 1;
+	return action === "up" ? index - 1 : index + 1;
+}
+function Moves() {
+	const $ = c(7);
+	const { t } = useWords("sortable");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = TASKS.map(_temp$2);
+		$[0] = t0;
+	} else t0 = $[0];
+	const [tasks, setTasks] = useState(t0);
+	let t1;
+	if ($[1] !== t || $[2] !== tasks) {
+		t1 = (t2) => {
+			const { move } = t2;
+			return /* @__PURE__ */ jsx(Items, {
+				"aria-label": t("moves.label"),
+				children: tasks.map((task, index) => /* @__PURE__ */ jsxs(Item, {
+					index,
+					label: t(`moves.${task.id}`),
+					value: task.id,
+					children: [
+						/* @__PURE__ */ jsx(Handle, { children: /* @__PURE__ */ jsx(GripVerticalIcon, {}) }),
+						/* @__PURE__ */ jsx(ItemContent, { children: t(`moves.${task.id}`) }),
+						/* @__PURE__ */ jsxs(Menu.Root, {
+							onSelect: (t3) => {
+								const { value } = t3;
+								move(task.id, { index: indexFor(value, index, tasks.length) });
+							},
+							children: [/* @__PURE__ */ jsx(ButtonPropsProvider, {
+								value: {
+									size: "xs",
+									variant: "ghost"
+								},
+								children: /* @__PURE__ */ jsx(Menu.Trigger, {
+									"aria-label": t("moves.more", { name: t(`moves.${task.id}`) }),
+									as: IconButton,
+									children: /* @__PURE__ */ jsx(EllipsisIcon, {})
+								})
+							}), createPortal(/* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Content, { children: ACTIONS.map((action) => /* @__PURE__ */ jsx(Menu.Item, {
+								disabled: ["first", "up"].includes(action) ? index === 0 : index === tasks.length - 1,
+								value: action,
+								children: t(`moves.${action}`)
+							}, action)) }) }), document.body)]
+						})
+					]
+				}, task.id))
+			});
+		};
+		$[1] = t;
+		$[2] = tasks;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1 || $[5] !== tasks) {
+		t2 = /* @__PURE__ */ jsx(Root, {
+			items: tasks,
+			onItemsChange: setTasks,
+			children: t1
+		});
+		$[4] = t1;
+		$[5] = tasks;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
+}
+function _temp$2(id) {
+	return { id };
+}
+const source$2 = "import { type ReactElement, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { EllipsisIcon, GripVerticalIcon } from \"lucide-react\";\n\nimport { ButtonPropsProvider, IconButton } from \"@stealthscale/component-actions\";\nimport { Menu } from \"@stealthscale/component-disclosure\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Sortable } from \"@stealthscale/component-collections\";\n\nconst TASKS = [\"invoices\", \"payroll\", \"audit\", \"taxes\"] as const;\n\nconst ACTIONS = [\"first\", \"up\", \"down\", \"last\"] as const;\n\nfunction indexFor(action: string, index: number, count: number): number {\n  if (action === \"first\") return 0;\n\n  if (action === \"last\") return count - 1;\n\n  return action === \"up\" ? index - 1 : index + 1;\n}\n\nexport function Moves(): ReactElement {\n  const { t } = useWords(\"sortable\");\n  const [tasks, setTasks] = useState(TASKS.map((id) => ({ id })));\n\n  return (\n    <Sortable.Root items={tasks} onItemsChange={setTasks}>\n      {({ move }) => (\n        <Sortable.Items aria-label={t(\"moves.label\")}>\n          {tasks.map((task, index) => (\n            <Sortable.Item\n              index={index}\n              key={task.id}\n              label={t(`moves.${task.id}`)}\n              value={task.id}\n            >\n              <Sortable.Handle>\n                <GripVerticalIcon />\n              </Sortable.Handle>\n              <Sortable.ItemContent>{t(`moves.${task.id}`)}</Sortable.ItemContent>\n              <Menu.Root\n                onSelect={({ value }) => {\n                  move(task.id, { index: indexFor(value, index, tasks.length) });\n                }}\n              >\n                <ButtonPropsProvider value={{ size: \"xs\", variant: \"ghost\" }}>\n                  <Menu.Trigger\n                    aria-label={t(\"moves.more\", { name: t(`moves.${task.id}`) })}\n                    as={IconButton}\n                  >\n                    <EllipsisIcon />\n                  </Menu.Trigger>\n                </ButtonPropsProvider>\n                {createPortal(\n                  <Menu.Positioner>\n                    <Menu.Content>\n                      {ACTIONS.map((action) => (\n                        <Menu.Item\n                          disabled={\n                            [\"first\", \"up\"].includes(action)\n                              ? index === 0\n                              : index === tasks.length - 1\n                          }\n                          key={action}\n                          value={action}\n                        >\n                          {t(`moves.${action}`)}\n                        </Menu.Item>\n                      ))}\n                    </Menu.Content>\n                  </Menu.Positioner>,\n                  document.body,\n                )}\n              </Menu.Root>\n            </Sortable.Item>\n          ))}\n        </Sortable.Items>\n      )}\n    </Sortable.Root>\n  );\n}\n";
+//#endregion
+//#region src/sortable/examples/plain.example.tsx
+var plain_example_exports = /* @__PURE__ */ __exportAll({
+	Plain: () => Plain,
+	source: () => source$1
+});
+const STAGES$1 = [
+	"draft",
+	"review",
+	"legal",
+	"publish"
+];
+function Plain() {
+	const $ = c(14);
+	const { t } = useWords("sortable");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = STAGES$1.map(_temp$1);
+		$[0] = t0;
+	} else t0 = $[0];
+	const [stages, setStages] = useState(t0);
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("plain.label");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== stages || $[4] !== t) {
+		let t3;
+		if ($[6] !== t) {
+			t3 = (stage, index) => /* @__PURE__ */ jsxs(Item, {
+				index,
+				label: t(`stages.${stage.id}`),
+				value: stage.id,
+				children: [/* @__PURE__ */ jsx(Handle, { children: /* @__PURE__ */ jsx(GripVerticalIcon, {}) }), t(`stages.${stage.id}`)]
+			}, stage.id);
+			$[6] = t;
+			$[7] = t3;
+		} else t3 = $[7];
+		t2 = stages.map(t3);
+		$[3] = stages;
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[8] !== t1 || $[9] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Items, {
+			"aria-label": t1,
+			children: t2
+		});
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== stages || $[12] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Root, {
+			items: stages,
+			onItemsChange: setStages,
+			variant: "plain",
+			children: t3
+		});
+		$[11] = stages;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
+}
+function _temp$1(id) {
+	return { id };
+}
+const source$1 = "import { type ReactElement, useState } from \"react\";\n\nimport { GripVerticalIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Sortable } from \"@stealthscale/component-collections\";\n\nconst STAGES = [\"draft\", \"review\", \"legal\", \"publish\"] as const;\n\nexport function Plain(): ReactElement {\n  const { t } = useWords(\"sortable\");\n  const [stages, setStages] = useState(STAGES.map((id) => ({ id })));\n\n  return (\n    <Sortable.Root items={stages} onItemsChange={setStages} variant=\"plain\">\n      <Sortable.Items aria-label={t(\"plain.label\")}>\n        {stages.map((stage, index) => (\n          <Sortable.Item\n            index={index}\n            key={stage.id}\n            label={t(`stages.${stage.id}`)}\n            value={stage.id}\n          >\n            <Sortable.Handle>\n              <GripVerticalIcon />\n            </Sortable.Handle>\n            {t(`stages.${stage.id}`)}\n          </Sortable.Item>\n        ))}\n      </Sortable.Items>\n    </Sortable.Root>\n  );\n}\n";
+//#endregion
+//#region src/sortable/examples/stages.example.tsx
+var stages_example_exports = /* @__PURE__ */ __exportAll({
+	Stages: () => Stages,
+	source: () => source
+});
+const STAGES = [
+	"draft",
+	"review",
+	"legal",
+	"publish",
+	"archive"
+];
+function Stages() {
+	const $ = c(14);
+	const { t } = useWords("sortable");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = STAGES.map(_temp);
+		$[0] = t0;
+	} else t0 = $[0];
+	const [stages, setStages] = useState(t0);
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("stages.label");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== stages || $[4] !== t) {
+		let t3;
+		if ($[6] !== t) {
+			t3 = (stage, index) => /* @__PURE__ */ jsxs(Item, {
+				disabled: stage.id === "archive",
+				index,
+				label: t(`stages.${stage.id}`),
+				value: stage.id,
+				children: [/* @__PURE__ */ jsx(Handle, { children: /* @__PURE__ */ jsx(GripVerticalIcon, {}) }), t(`stages.${stage.id}`)]
+			}, stage.id);
+			$[6] = t;
+			$[7] = t3;
+		} else t3 = $[7];
+		t2 = stages.map(t3);
+		$[3] = stages;
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[8] !== t1 || $[9] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Items, {
+			"aria-label": t1,
+			children: t2
+		});
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== stages || $[12] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Root, {
+			items: stages,
+			onItemsChange: setStages,
+			children: t3
+		});
+		$[11] = stages;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
+}
+function _temp(id) {
+	return { id };
+}
+const source = "import { type ReactElement, useState } from \"react\";\n\nimport { GripVerticalIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Sortable } from \"@stealthscale/component-collections\";\n\nconst STAGES = [\"draft\", \"review\", \"legal\", \"publish\", \"archive\"] as const;\n\nexport function Stages(): ReactElement {\n  const { t } = useWords(\"sortable\");\n  const [stages, setStages] = useState(STAGES.map((id) => ({ id })));\n\n  return (\n    <Sortable.Root items={stages} onItemsChange={setStages}>\n      <Sortable.Items aria-label={t(\"stages.label\")}>\n        {stages.map((stage, index) => (\n          <Sortable.Item\n            disabled={stage.id === \"archive\"}\n            index={index}\n            key={stage.id}\n            label={t(`stages.${stage.id}`)}\n            value={stage.id}\n          >\n            <Sortable.Handle>\n              <GripVerticalIcon />\n            </Sortable.Handle>\n            {t(`stages.${stage.id}`)}\n          </Sortable.Item>\n        ))}\n      </Sortable.Items>\n    </Sortable.Root>\n  );\n}\n";
+//#endregion
+//#region src/sortable/sortable.specimen.tsx
+/**
+* Catalogue page for the sortable kit.
+*
+* @remarks
+*   Every scene is hand-written: one list with a fixed last stage, the plain rows the `variant`
+*   axis offers, rows with content, a board with a limit and a rule, and moves without a drag
+*   through a row menu. Every scene renders a component from `examples/` and shows that file as its
+*   source. The words are keys under `sortable` in `locales/en/specimen/sortable.json`.
+*/
+/**
+* Hand-written scene for one list with a fixed last stage.
+*/
+const list = {
+	about: "sortable.stages.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Stages, {})
+	}),
+	example: stages_example_exports,
+	title: "sortable.stages.title"
+};
+/**
+* Hand-written scene for the plain look, rows without a fill or an edge, beside the card rows of
+* the scene before it.
+*/
+const plainRows = {
+	about: "sortable.plain.about",
+	axes: ["variant"],
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Plain, {})
+	}),
+	example: plain_example_exports,
+	title: "sortable.plain.title"
+};
+/**
+* Hand-written scene for rows whose content fills the row and ends with a badge.
+*/
+const content = {
+	about: "sortable.issues.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Issues, {})
+	}),
+	example: issues_example_exports,
+	title: "sortable.issues.title"
+};
+/**
+* Hand-written scene for a board with a limit on one list and a rule between two.
+*/
+const lists = {
+	about: "sortable.board.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "5xl",
+		children: /* @__PURE__ */ jsx(Board, {})
+	}),
+	example: board_example_exports,
+	title: "sortable.board.title"
+};
+/**
+* Hand-written scene for moves through a row menu, without a drag.
+*/
+const moving = {
+	about: "sortable.moves.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Moves, {})
+	}),
+	example: moves_example_exports,
+	title: "sortable.moves.title"
+};
+var sortable_specimen_default = specimen({
+	about: "sortable.about",
+	id: "components/collections/sortable",
+	imports: "import { Sortable } from \"@stealthscale/component-collections\";",
+	scenes: [
+		list,
+		plainRows,
+		content,
+		lists,
+		moving
+	],
+	title: "sortable.title"
+});
+//#endregion
+export { content, sortable_specimen_default as default, list, lists, moving, plainRows };

package/dist/pages/sortable/sortable.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"BoardProps": {"conditions": 284, "foreign": 1041}, "EmptyProps": {"conditions": 284, "foreign": 1041}, "HandleProps": {"conditions": 284, "foreign": 1050}, "ItemContentProps": {"conditions": 284, "foreign": 1041}, "ItemProps": {"conditions": 284, "foreign": 1041}, "ItemsProps": {"conditions": 284, "foreign": 1041}, "ListProps": {"conditions": 284, "foreign": 1041}, "RootProps": {"conditions": 284, "foreign": 1040}};
+export const parts = {"BoardProps": [], "EmptyProps": [], "HandleProps": [{"accepts": "\"glow\" | \"pulse\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "The halo around the button, in the palette's solid at half opacity."}, {"accepts": "Lift", "fallback": "", "kind": "variant", "name": "elevation", "refers": ["kit.Lift"], "required": false, "says": ""}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette of every look. The base sets `primary`."}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": ""}, {"accepts": "\"ghost\" | \"glass\" | \"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}], "ItemContentProps": [], "ItemProps": [{"accepts": "boolean", "fallback": "", "kind": "option", "name": "disabled", "refers": [], "required": false, "says": "Whether the row keeps its place. Off unless stated."}, {"accepts": "number", "fallback": "", "kind": "option", "name": "index", "refers": [], "required": true, "says": "Index of the row in its list."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": true, "says": "Name of the row, which names its handle and the announcements."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "value", "refers": [], "required": true, "says": "Id of the row's item."}], "ItemsProps": [], "ListProps": [{"accepts": "string", "fallback": "", "kind": "option", "name": "label", "refers": [], "required": false, "says": "Name of the list, which names its rows and the announcements."}, {"accepts": "number", "fallback": "", "kind": "option", "name": "limit", "refers": [], "required": false, "says": "Most items the list takes from other lists. No limit unless stated."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "value", "refers": [], "required": true, "says": "Id of the list, its key in the items' record."}], "RootProps": [{"accepts": "((at: SortableAnnouncement) => string)", "fallback": "", "kind": "option", "name": "cancelledLabel", "refers": ["kit.SortableAnnouncement"], "required": false, "says": "Writes the announcement of a drag that was cancelled, with the place the item went back to."}, {"accepts": "((item: ItemOf<Items>, from: string, to: string) => boolean)", "fallback": "", "kind": "option", "name": "canMove", "refers": ["kit.ItemOf", "kit.Items"], "required": false, "says": "Returns whether an item may move from the list it was picked up from into another list. Every move is allowed unless stated."}, {"accepts": "((api: SortableApi) => ReactNode) | ReactNode", "fallback": "", "kind": "option", "name": "children", "refers": ["kit.SortableApi", "react.ReactElement", "react.ReactPortal"], "required": false, "says": "Lists and rows of the kit, or a function that renders them from the root's move without a drag."}, {"accepts": "((at: SortableAnnouncement) => string)", "fallback": "", "kind": "option", "name": "droppedLabel", "refers": ["kit.SortableAnnouncement"], "required": false, "says": "Writes the announcement of a drop, with the place the item took."}, {"accepts": "((refused: SortableRefused) => string)", "fallback": "", "kind": "option", "name": "fullLabel", "refers": ["kit.SortableRefused"], "required": false, "says": "Writes the announcement of a list at its limit refusing the item."}, {"accepts": "((item: string) => string)", "fallback": "", "kind": "option", "name": "handleLabel", "refers": [], "required": false, "says": "Writes the name of an item's handle from the item's name."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "instructions", "refers": [], "required": false, "says": "Instructions every handle is described by."}, {"accepts": "Items", "fallback": "", "kind": "option", "name": "items", "refers": ["kit.Items"], "required": true, "says": "Items the lists render, controlled."}, {"accepts": "((at: SortableAnnouncement) => string)", "fallback": "", "kind": "option", "name": "liftedLabel", "refers": ["kit.SortableAnnouncement"], "required": false, "says": "Writes the announcement of an item picked up, with the place it left."}, {"accepts": "((at: SortableAnnouncement) => string)", "fallback": "", "kind": "option", "name": "movedLabel", "refers": ["kit.SortableAnnouncement"], "required": false, "says": "Writes the announcement of an item moved during a drag, with the place it would take."}, {"accepts": "((move: SortableMove) => void)", "fallback": "", "kind": "option", "name": "onItemMove", "refers": ["kit.SortableMove", "kit.SortablePlace"], "required": false, "says": "Called once with each finished move, from the place the item left to the place it took."}, {"accepts": "((items: Items) => void)", "fallback": "", "kind": "option", "name": "onItemsChange", "refers": ["kit.Items"], "required": false, "says": "Called with the items to render after a change."}, {"accepts": "((refused: SortableRefused) => string)", "fallback": "", "kind": "option", "name": "refusedLabel", "refers": ["kit.SortableRefused"], "required": false, "says": "Writes the announcement of the caller's rule refusing the item a list."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "roleDescription", "refers": [], "required": false, "says": "Role description every handle states in place of \"button\"."}, {"accepts": "\"card\" | \"plain\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Look of a row: a panel card with a hairline edge, or a plain row without a fill or a visible edge, for rows inside a panel."}]};
+export const shapes = {"kit.Lift": [{"accepts": "", "name": "\"floating\"", "says": ""}, {"accepts": "", "name": "\"raised\"", "says": ""}], "kit.Scale": [{"accepts": "", "name": "\"2xl\"", "says": ""}, {"accepts": "", "name": "\"3xl\"", "says": ""}, {"accepts": "", "name": "\"4xl\"", "says": ""}, {"accepts": "", "name": "\"lg\"", "says": ""}, {"accepts": "", "name": "\"md\"", "says": ""}, {"accepts": "", "name": "\"sm\"", "says": ""}, {"accepts": "", "name": "\"xl\"", "says": ""}, {"accepts": "", "name": "\"xs\"", "says": ""}], "kit.SortableRefused": [{"accepts": "string", "name": "item", "says": "Name of the item."}, {"accepts": "number", "name": "limit", "says": "Most items the list takes, or undefined for a list the caller's rule refuses."}, {"accepts": "string", "name": "list", "says": "Name of the list."}], "kit.SortableAnnouncement": [{"accepts": "number", "name": "count", "says": "Number of items in the list the item is in."}, {"accepts": "string", "name": "item", "says": "Name of the item."}, {"accepts": "string", "name": "list", "says": "Name of the list, or undefined for the one list of an array."}, {"accepts": "number", "name": "position", "says": "Position of the item in the list, from 1."}], "kit.ItemOf": [{"accepts": "string", "name": "id", "says": "Id of the item, unique across every list of the kit and different from every list's id."}], "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.SortableApi": [{"accepts": "(id: string, to: SortablePlace) => boolean", "name": "move", "says": "Moves an item to a place without a drag, and returns whether its list took it."}], "kit.SortableMove": [{"accepts": "SortablePlace", "name": "from", "says": "Place the item left."}, {"accepts": "string", "name": "id", "says": "Id of the item."}, {"accepts": "SortablePlace", "name": "to", "says": "Place the item took."}], "kit.SortablePlace": [{"accepts": "number", "name": "index", "says": "Index of the item in its list."}, {"accepts": "string", "name": "list", "says": "Id of the list, or undefined for the one list of an array."}]};