@flanksource/clicky-ui 0.3.52 → 0.3.53

package/dist/data/MatrixTreeTable.js

@@ -0,0 +1,92 @@
+import { cn } from "../lib/utils.js";
+import { UiChevronDown } from "../icons/components/UiChevronDown.js";
+import { UiChevronRight } from "../icons/components/UiChevronRight.js";
+import { MatrixTable } from "./MatrixTable.js";
+import { useTreeRows } from "../lib/tree-rows.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/data/MatrixTreeTable.tsx
+/** The chevron that opens or closes a tree row; `label` names the row for assistive tech. */
+function TreeRowToggle({ open, label, onToggle }) {
+	const Icon = open ? UiChevronDown : UiChevronRight;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-expanded": open,
+		"aria-label": `${open ? "Collapse" : "Expand"} ${label}`,
+		className: "inline-flex size-4 shrink-0 items-center justify-center rounded text-muted-foreground hover:text-foreground",
+		onClick: (event) => {
+			event.stopPropagation();
+			onToggle();
+		},
+		children: /* @__PURE__ */ jsx(Icon, { className: "size-3.5" })
+	});
+}
+var TREE_STEP_REM = 1.25;
+/**
+* The indent and chevron that lead a tree row's label. Parents get a toggle
+* (`onToggle` + `label`); leaves get a chevron-sized spacer so they line up.
+*/
+function TreeRowLead({ depth, open = false, label, onToggle, children }) {
+	if (onToggle && label === void 0) throw new Error("TreeRowLead needs a label to name its toggle");
+	return /* @__PURE__ */ jsxs("span", {
+		"data-tree-depth": depth,
+		className: "inline-flex min-w-0 items-center gap-1",
+		style: { paddingLeft: `${depth * TREE_STEP_REM}rem` },
+		children: [onToggle ? /* @__PURE__ */ jsx(TreeRowToggle, {
+			open,
+			label,
+			onToggle
+		}) : /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "size-4 shrink-0"
+		}), children]
+	});
+}
+/**
+* A MatrixTable whose rows form a tree: parent nodes are collapsible group
+* bands that span every column, leaves are data rows, both indented by depth.
+*/
+function MatrixTreeTable({ roots, getChildren, getKey, renderLabel, getAriaLabel, getCells, getGroupClassName, expanded, onExpandedChange, defaultExpanded, ...table }) {
+	const { rows, toggle } = useTreeRows(roots, {
+		getChildren,
+		getKey
+	}, {
+		...expanded !== void 0 ? { expanded } : {},
+		...onExpandedChange ? { onExpandedChange } : {},
+		...defaultExpanded !== void 0 ? { defaultExpanded } : {}
+	});
+	const matrixRows = rows.map((row) => {
+		const label = renderLabel(row.node, {
+			depth: row.depth,
+			open: row.open,
+			hasChildren: row.hasChildren
+		});
+		if (!row.hasChildren) return {
+			key: row.key,
+			label: /* @__PURE__ */ jsx(TreeRowLead, {
+				depth: row.depth,
+				children: label
+			}),
+			cells: getCells(row.node)
+		};
+		const className = cn(row.depth > 0 && "bg-muted/30 font-medium", getGroupClassName?.(row.node, row.depth));
+		return {
+			type: "group",
+			key: row.key,
+			...className ? { className } : {},
+			label: /* @__PURE__ */ jsx(TreeRowLead, {
+				depth: row.depth,
+				open: row.open,
+				label: getAriaLabel(row.node),
+				onToggle: () => toggle(row),
+				children: label
+			})
+		};
+	});
+	return /* @__PURE__ */ jsx(MatrixTable, {
+		...table,
+		rows: matrixRows
+	});
+}
+export { MatrixTreeTable, TreeRowLead, TreeRowToggle };
+
+//# sourceMappingURL=MatrixTreeTable.js.map

package/dist/data/MatrixTreeTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MatrixTreeTable.js","names":[],"sources":["../../src/data/MatrixTreeTable.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { UiChevronDown, UiChevronRight } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport { useTreeRows, type TreeExpansionProps, type TreeRowsAccessors } from \"../lib/tree-rows\";\nimport { MatrixTable, type MatrixTableGroupRow, type MatrixTableProps, type MatrixTableRow } from \"./MatrixTable\";\n\nexport type TreeLabelContext = { depth: number; open: boolean; hasChildren: boolean };\n\nexport type MatrixTreeTableProps<T> = Omit<MatrixTableProps, \"rows\"> &\n  TreeRowsAccessors<T> &\n  TreeExpansionProps<T> & {\n    roots: T[];\n    renderLabel: (node: T, context: TreeLabelContext) => ReactNode;\n    /** Names a parent node in its expand/collapse button. */\n    getAriaLabel: (node: T) => string;\n    /** Cells of a leaf row, one per column. Parent nodes render as group bands. */\n    getCells: (node: T) => ReactNode[];\n    getGroupClassName?: (node: T, depth: number) => string | undefined;\n  };\n\n/** The chevron that opens or closes a tree row; `label` names the row for assistive tech. */\nexport function TreeRowToggle({ open, label, onToggle }: { open: boolean; label: string; onToggle: () => void }) {\n  const Icon = open ? UiChevronDown : UiChevronRight;\n  return (\n    <button\n      type=\"button\"\n      aria-expanded={open}\n      aria-label={`${open ? \"Collapse\" : \"Expand\"} ${label}`}\n      className=\"inline-flex size-4 shrink-0 items-center justify-center rounded text-muted-foreground hover:text-foreground\"\n      onClick={(event) => { event.stopPropagation(); onToggle(); }}\n    >\n      <Icon className=\"size-3.5\" />\n    </button>\n  );\n}\n\n// One tree level: the chevron (1rem) plus its gap (0.25rem), so a child's text\n// starts one step right of its parent's text.\nconst TREE_STEP_REM = 1.25;\n\n/**\n * The indent and chevron that lead a tree row's label. Parents get a toggle\n * (`onToggle` + `label`); leaves get a chevron-sized spacer so they line up.\n */\nexport function TreeRowLead({ depth, open = false, label, onToggle, children }: { depth: number; open?: boolean; label?: string; onToggle?: () => void; children: ReactNode }) {\n  if (onToggle && label === undefined) throw new Error(\"TreeRowLead needs a label to name its toggle\");\n  return (\n    <span data-tree-depth={depth} className=\"inline-flex min-w-0 items-center gap-1\" style={{ paddingLeft: `${depth * TREE_STEP_REM}rem` }}>\n      {onToggle ? <TreeRowToggle open={open} label={label!} onToggle={onToggle} /> : <span aria-hidden className=\"size-4 shrink-0\" />}\n      {children}\n    </span>\n  );\n}\n\n/**\n * A MatrixTable whose rows form a tree: parent nodes are collapsible group\n * bands that span every column, leaves are data rows, both indented by depth.\n */\nexport function MatrixTreeTable<T>({\n  roots,\n  getChildren,\n  getKey,\n  renderLabel,\n  getAriaLabel,\n  getCells,\n  getGroupClassName,\n  expanded,\n  onExpandedChange,\n  defaultExpanded,\n  ...table\n}: MatrixTreeTableProps<T>) {\n  const { rows, toggle } = useTreeRows(roots, { getChildren, getKey }, {\n    ...(expanded !== undefined ? { expanded } : {}),\n    ...(onExpandedChange ? { onExpandedChange } : {}),\n    ...(defaultExpanded !== undefined ? { defaultExpanded } : {}),\n  });\n  const matrixRows = rows.map((row): MatrixTableRow | MatrixTableGroupRow => {\n    const label = renderLabel(row.node, { depth: row.depth, open: row.open, hasChildren: row.hasChildren });\n    if (!row.hasChildren) return { key: row.key, label: <TreeRowLead depth={row.depth}>{label}</TreeRowLead>, cells: getCells(row.node) };\n    // MatrixTable's depth would indent a second time, so nested bands get its softer style here.\n    const className = cn(row.depth > 0 && \"bg-muted/30 font-medium\", getGroupClassName?.(row.node, row.depth));\n    return {\n      type: \"group\",\n      key: row.key,\n      ...(className ? { className } : {}),\n      label: <TreeRowLead depth={row.depth} open={row.open} label={getAriaLabel(row.node)} onToggle={() => toggle(row)}>{label}</TreeRowLead>,\n    };\n  });\n  return <MatrixTable {...table} rows={matrixRows} />;\n}\n"],"mappings":";;;;;;;;AAqBA,SAAgB,cAAc,EAAE,MAAM,OAAO,YAAoE;CAC/G,MAAM,OAAO,OAAO,gBAAgB;CACpC,OACE,oBAAC,UAAD;EACE,MAAK;EACL,iBAAe;EACf,cAAY,GAAG,OAAO,aAAa,SAAS,GAAG;EAC/C,WAAU;EACV,UAAU,UAAU;GAAE,MAAM,gBAAgB;GAAG,SAAS;EAAG;EAE3D,UAAA,oBAAC,MAAD,EAAM,WAAU,WAAY,CAAA;CACtB,CAAA;AAEZ;AAIA,IAAM,gBAAgB;;;;;AAMtB,SAAgB,YAAY,EAAE,OAAO,OAAO,OAAO,OAAO,UAAU,YAA2G;CAC7K,IAAI,YAAY,UAAU,KAAA,GAAW,MAAM,IAAI,MAAM,8CAA8C;CACnG,OACE,qBAAC,QAAD;EAAM,mBAAiB;EAAO,WAAU;EAAyC,OAAO,EAAE,aAAa,GAAG,QAAQ,cAAc,KAAK;EAArI,UAAA,CACG,WAAW,oBAAC,eAAD;GAAqB;GAAa;GAAkB;EAAW,CAAA,IAAI,oBAAC,QAAD;GAAM,eAAA;GAAY,WAAU;EAAmB,CAAA,GAC7H,QACG;;AAEV;;;;;AAMA,SAAgB,gBAAmB,EACjC,OACA,aACA,QACA,aACA,cACA,UACA,mBACA,UACA,kBACA,iBACA,GAAG,SACuB;CAC1B,MAAM,EAAE,MAAM,WAAW,YAAY,OAAO;EAAE;EAAa;CAAO,GAAG;EACnE,GAAI,aAAa,KAAA,IAAY,EAAE,SAAS,IAAI,CAAC;EAC7C,GAAI,mBAAmB,EAAE,iBAAiB,IAAI,CAAC;EAC/C,GAAI,oBAAoB,KAAA,IAAY,EAAE,gBAAgB,IAAI,CAAC;CAC7D,CAAC;CACD,MAAM,aAAa,KAAK,KAAK,QAA8C;EACzE,MAAM,QAAQ,YAAY,IAAI,MAAM;GAAE,OAAO,IAAI;GAAO,MAAM,IAAI;GAAM,aAAa,IAAI;EAAY,CAAC;EACtG,IAAI,CAAC,IAAI,aAAa,OAAO;GAAE,KAAK,IAAI;GAAK,OAAO,oBAAC,aAAD;IAAa,OAAO,IAAI;IAAQ,UAAA;GAAmB,CAAA;GAAG,OAAO,SAAS,IAAI,IAAI;EAAE;EAEpI,MAAM,YAAY,GAAG,IAAI,QAAQ,KAAK,2BAA2B,oBAAoB,IAAI,MAAM,IAAI,KAAK,CAAC;EACzG,OAAO;GACL,MAAM;GACN,KAAK,IAAI;GACT,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;GACjC,OAAO,oBAAC,aAAD;IAAa,OAAO,IAAI;IAAO,MAAM,IAAI;IAAM,OAAO,aAAa,IAAI,IAAI;IAAG,gBAAgB,OAAO,GAAG;IAAI,UAAA;GAAmB,CAAA;EACxI;CACF,CAAC;CACD,OAAO,oBAAC,aAAD;EAAa,GAAI;EAAO,MAAM;CAAa,CAAA;AACpD"}

package/dist/data/TreeDataTable.cjs

@@ -0,0 +1,52 @@
+const require_DataTable = require("./DataTable.cjs");
+const require_tree_rows = require("../lib/tree-rows.cjs");
+const require_MatrixTreeTable = require("./MatrixTreeTable.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/data/TreeDataTable.tsx
+/**
+* A DataTable whose rows form a tree. Parent and leaf nodes share the columns;
+* the tree column indents each row by depth and gives parents a chevron. Tree
+* order is the row order, so sorting and grouping are not offered.
+*/
+function TreeDataTable({ roots, getChildren, getKey, getAriaLabel, treeColumn, columns, expanded, onExpandedChange, defaultExpanded, ...table }) {
+	if (!columns.some((column) => column.key === treeColumn)) throw new Error(`TreeDataTable treeColumn "${treeColumn}" is not one of its columns`);
+	const { rows, toggle } = require_tree_rows.useTreeRows(roots, {
+		getChildren,
+		getKey
+	}, {
+		...expanded !== void 0 ? { expanded } : {},
+		...onExpandedChange ? { onExpandedChange } : {},
+		...defaultExpanded !== void 0 ? { defaultExpanded } : {}
+	});
+	const byNode = new Map(rows.map((row) => [row.node, row]));
+	const treeColumns = columns.map((column) => {
+		const { sortable: _sortable, ...rest } = column;
+		if (column.key !== treeColumn) return rest;
+		return {
+			...rest,
+			render: (value, node) => {
+				const row = byNode.get(node);
+				const content = column.render ? column.render(value, node) : String(value ?? "");
+				return row.hasChildren ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MatrixTreeTable.TreeRowLead, {
+					depth: row.depth,
+					open: row.open,
+					label: getAriaLabel(node),
+					onToggle: () => toggle(row),
+					children: content
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MatrixTreeTable.TreeRowLead, {
+					depth: row.depth,
+					children: content
+				});
+			}
+		};
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataTable.DataTable, {
+		...table,
+		columns: treeColumns,
+		data: rows.map((row) => row.node),
+		getRowId: (node) => byNode.get(node).key
+	});
+}
+exports.TreeDataTable = TreeDataTable;
+
+//# sourceMappingURL=TreeDataTable.cjs.map

package/dist/data/TreeDataTable.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeDataTable.cjs","names":["useTreeRows","TreeRowLead","DataTable"],"sources":["../../src/data/TreeDataTable.tsx"],"sourcesContent":["import { useTreeRows, type TreeExpansionProps, type TreeRow, type TreeRowsAccessors } from \"../lib/tree-rows\";\nimport { DataTable, type DataTableColumn, type DataTableProps } from \"./DataTable\";\nimport { TreeRowLead } from \"./MatrixTreeTable\";\n\nexport type TreeDataTableProps<T extends Record<string, unknown>> = Omit<\n  DataTableProps<T>,\n  \"data\" | \"columns\" | \"getRowId\" | \"grouping\" | \"groupingModes\" | \"groupingMode\" | \"defaultGroupingMode\" | \"onGroupingModeChange\" | \"defaultSort\" | \"sort\" | \"onSortChange\"\n> &\n  TreeRowsAccessors<T> &\n  TreeExpansionProps<T> & {\n    roots: T[];\n    columns: DataTableColumn<T>[];\n    /** Key of the column that carries the indent and the expand/collapse chevron. */\n    treeColumn: string;\n    /** Names a parent node in its expand/collapse button. */\n    getAriaLabel: (node: T) => string;\n  };\n\n/**\n * A DataTable whose rows form a tree. Parent and leaf nodes share the columns;\n * the tree column indents each row by depth and gives parents a chevron. Tree\n * order is the row order, so sorting and grouping are not offered.\n */\nexport function TreeDataTable<T extends Record<string, unknown>>({\n  roots,\n  getChildren,\n  getKey,\n  getAriaLabel,\n  treeColumn,\n  columns,\n  expanded,\n  onExpandedChange,\n  defaultExpanded,\n  ...table\n}: TreeDataTableProps<T>) {\n  if (!columns.some((column) => column.key === treeColumn)) {\n    throw new Error(`TreeDataTable treeColumn \"${treeColumn}\" is not one of its columns`);\n  }\n  const { rows, toggle } = useTreeRows(roots, { getChildren, getKey }, {\n    ...(expanded !== undefined ? { expanded } : {}),\n    ...(onExpandedChange ? { onExpandedChange } : {}),\n    ...(defaultExpanded !== undefined ? { defaultExpanded } : {}),\n  });\n  const byNode = new Map<T, TreeRow<T>>(rows.map((row) => [row.node, row]));\n  const treeColumns = columns.map((column): DataTableColumn<T> => {\n    const { sortable: _sortable, ...rest } = column;\n    if (column.key !== treeColumn) return rest;\n    return {\n      ...rest,\n      render: (value, node) => {\n        const row = byNode.get(node)!;\n        const content = column.render ? column.render(value, node) : String(value ?? \"\");\n        return row.hasChildren\n          ? <TreeRowLead depth={row.depth} open={row.open} label={getAriaLabel(node)} onToggle={() => toggle(row)}>{content}</TreeRowLead>\n          : <TreeRowLead depth={row.depth}>{content}</TreeRowLead>;\n      },\n    };\n  });\n  return <DataTable<T> {...table} columns={treeColumns} data={rows.map((row) => row.node)} getRowId={(node) => byNode.get(node)!.key} />;\n}\n"],"mappings":";;;;;;;;;;AAuBA,SAAgB,cAAiD,EAC/D,OACA,aACA,QACA,cACA,YACA,SACA,UACA,kBACA,iBACA,GAAG,SACqB;CACxB,IAAI,CAAC,QAAQ,MAAM,WAAW,OAAO,QAAQ,UAAU,GACrD,MAAM,IAAI,MAAM,6BAA6B,WAAW,4BAA4B;CAEtF,MAAM,EAAE,MAAM,WAAWA,kBAAAA,YAAY,OAAO;EAAE;EAAa;CAAO,GAAG;EACnE,GAAI,aAAa,KAAA,IAAY,EAAE,SAAS,IAAI,CAAC;EAC7C,GAAI,mBAAmB,EAAE,iBAAiB,IAAI,CAAC;EAC/C,GAAI,oBAAoB,KAAA,IAAY,EAAE,gBAAgB,IAAI,CAAC;CAC7D,CAAC;CACD,MAAM,SAAS,IAAI,IAAmB,KAAK,KAAK,QAAQ,CAAC,IAAI,MAAM,GAAG,CAAC,CAAC;CACxE,MAAM,cAAc,QAAQ,KAAK,WAA+B;EAC9D,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;EACzC,IAAI,OAAO,QAAQ,YAAY,OAAO;EACtC,OAAO;GACL,GAAG;GACH,SAAS,OAAO,SAAS;IACvB,MAAM,MAAM,OAAO,IAAI,IAAI;IAC3B,MAAM,UAAU,OAAO,SAAS,OAAO,OAAO,OAAO,IAAI,IAAI,OAAO,SAAS,EAAE;IAC/E,OAAO,IAAI,cACP,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,aAAD;KAAa,OAAO,IAAI;KAAO,MAAM,IAAI;KAAM,OAAO,aAAa,IAAI;KAAG,gBAAgB,OAAO,GAAG;KAAI,UAAA;IAAqB,CAAA,IAC7H,iBAAA,GAAA,kBAAA,IAAA,CAACA,wBAAAA,aAAD;KAAa,OAAO,IAAI;KAAQ,UAAA;IAAqB,CAAA;GAC3D;EACF;CACF,CAAC;CACD,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,kBAAAA,WAAD;EAAc,GAAI;EAAO,SAAS;EAAa,MAAM,KAAK,KAAK,QAAQ,IAAI,IAAI;EAAG,WAAW,SAAS,OAAO,IAAI,IAAI,CAAC,CAAE;CAAM,CAAA;AACvI"}

package/dist/data/TreeDataTable.d.ts

@@ -0,0 +1,17 @@
+import { TreeExpansionProps, TreeRowsAccessors } from '../lib/tree-rows.js';
+import { DataTableColumn, DataTableProps } from './DataTable.js';
+export type TreeDataTableProps<T extends Record<string, unknown>> = Omit<DataTableProps<T>, "data" | "columns" | "getRowId" | "grouping" | "groupingModes" | "groupingMode" | "defaultGroupingMode" | "onGroupingModeChange" | "defaultSort" | "sort" | "onSortChange"> & TreeRowsAccessors<T> & TreeExpansionProps<T> & {
+    roots: T[];
+    columns: DataTableColumn<T>[];
+    /** Key of the column that carries the indent and the expand/collapse chevron. */
+    treeColumn: string;
+    /** Names a parent node in its expand/collapse button. */
+    getAriaLabel: (node: T) => string;
+};
+/**
+ * A DataTable whose rows form a tree. Parent and leaf nodes share the columns;
+ * the tree column indents each row by depth and gives parents a chevron. Tree
+ * order is the row order, so sorting and grouping are not offered.
+ */
+export declare function TreeDataTable<T extends Record<string, unknown>>({ roots, getChildren, getKey, getAriaLabel, treeColumn, columns, expanded, onExpandedChange, defaultExpanded, ...table }: TreeDataTableProps<T>): import("react").JSX.Element;
+//# sourceMappingURL=TreeDataTable.d.ts.map

package/dist/data/TreeDataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeDataTable.d.ts","sourceRoot":"","sources":["../../src/data/TreeDataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,kBAAkB,EAAgB,KAAK,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC9G,OAAO,EAAa,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAGnF,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,IAAI,CACtE,cAAc,CAAC,CAAC,CAAC,EACjB,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,eAAe,GAAG,cAAc,GAAG,qBAAqB,GAAG,sBAAsB,GAAG,aAAa,GAAG,MAAM,GAAG,cAAc,CAC3K,GACC,iBAAiB,CAAC,CAAC,CAAC,GACpB,kBAAkB,CAAC,CAAC,CAAC,GAAG;IACtB,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,iFAAiF;IACjF,UAAU,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;CACnC,CAAC;AAEJ;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC/D,KAAK,EACL,WAAW,EACX,MAAM,EACN,YAAY,EACZ,UAAU,EACV,OAAO,EACP,QAAQ,EACR,gBAAgB,EAChB,eAAe,EACf,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,CAAC,CAAC,+BAyBvB"}

package/dist/data/TreeDataTable.js

@@ -0,0 +1,52 @@
+import { DataTable } from "./DataTable.js";
+import { useTreeRows } from "../lib/tree-rows.js";
+import { TreeRowLead } from "./MatrixTreeTable.js";
+import { jsx } from "react/jsx-runtime";
+// src/data/TreeDataTable.tsx
+/**
+* A DataTable whose rows form a tree. Parent and leaf nodes share the columns;
+* the tree column indents each row by depth and gives parents a chevron. Tree
+* order is the row order, so sorting and grouping are not offered.
+*/
+function TreeDataTable({ roots, getChildren, getKey, getAriaLabel, treeColumn, columns, expanded, onExpandedChange, defaultExpanded, ...table }) {
+	if (!columns.some((column) => column.key === treeColumn)) throw new Error(`TreeDataTable treeColumn "${treeColumn}" is not one of its columns`);
+	const { rows, toggle } = useTreeRows(roots, {
+		getChildren,
+		getKey
+	}, {
+		...expanded !== void 0 ? { expanded } : {},
+		...onExpandedChange ? { onExpandedChange } : {},
+		...defaultExpanded !== void 0 ? { defaultExpanded } : {}
+	});
+	const byNode = new Map(rows.map((row) => [row.node, row]));
+	const treeColumns = columns.map((column) => {
+		const { sortable: _sortable, ...rest } = column;
+		if (column.key !== treeColumn) return rest;
+		return {
+			...rest,
+			render: (value, node) => {
+				const row = byNode.get(node);
+				const content = column.render ? column.render(value, node) : String(value ?? "");
+				return row.hasChildren ? /* @__PURE__ */ jsx(TreeRowLead, {
+					depth: row.depth,
+					open: row.open,
+					label: getAriaLabel(node),
+					onToggle: () => toggle(row),
+					children: content
+				}) : /* @__PURE__ */ jsx(TreeRowLead, {
+					depth: row.depth,
+					children: content
+				});
+			}
+		};
+	});
+	return /* @__PURE__ */ jsx(DataTable, {
+		...table,
+		columns: treeColumns,
+		data: rows.map((row) => row.node),
+		getRowId: (node) => byNode.get(node).key
+	});
+}
+export { TreeDataTable };
+
+//# sourceMappingURL=TreeDataTable.js.map

package/dist/data/TreeDataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeDataTable.js","names":[],"sources":["../../src/data/TreeDataTable.tsx"],"sourcesContent":["import { useTreeRows, type TreeExpansionProps, type TreeRow, type TreeRowsAccessors } from \"../lib/tree-rows\";\nimport { DataTable, type DataTableColumn, type DataTableProps } from \"./DataTable\";\nimport { TreeRowLead } from \"./MatrixTreeTable\";\n\nexport type TreeDataTableProps<T extends Record<string, unknown>> = Omit<\n  DataTableProps<T>,\n  \"data\" | \"columns\" | \"getRowId\" | \"grouping\" | \"groupingModes\" | \"groupingMode\" | \"defaultGroupingMode\" | \"onGroupingModeChange\" | \"defaultSort\" | \"sort\" | \"onSortChange\"\n> &\n  TreeRowsAccessors<T> &\n  TreeExpansionProps<T> & {\n    roots: T[];\n    columns: DataTableColumn<T>[];\n    /** Key of the column that carries the indent and the expand/collapse chevron. */\n    treeColumn: string;\n    /** Names a parent node in its expand/collapse button. */\n    getAriaLabel: (node: T) => string;\n  };\n\n/**\n * A DataTable whose rows form a tree. Parent and leaf nodes share the columns;\n * the tree column indents each row by depth and gives parents a chevron. Tree\n * order is the row order, so sorting and grouping are not offered.\n */\nexport function TreeDataTable<T extends Record<string, unknown>>({\n  roots,\n  getChildren,\n  getKey,\n  getAriaLabel,\n  treeColumn,\n  columns,\n  expanded,\n  onExpandedChange,\n  defaultExpanded,\n  ...table\n}: TreeDataTableProps<T>) {\n  if (!columns.some((column) => column.key === treeColumn)) {\n    throw new Error(`TreeDataTable treeColumn \"${treeColumn}\" is not one of its columns`);\n  }\n  const { rows, toggle } = useTreeRows(roots, { getChildren, getKey }, {\n    ...(expanded !== undefined ? { expanded } : {}),\n    ...(onExpandedChange ? { onExpandedChange } : {}),\n    ...(defaultExpanded !== undefined ? { defaultExpanded } : {}),\n  });\n  const byNode = new Map<T, TreeRow<T>>(rows.map((row) => [row.node, row]));\n  const treeColumns = columns.map((column): DataTableColumn<T> => {\n    const { sortable: _sortable, ...rest } = column;\n    if (column.key !== treeColumn) return rest;\n    return {\n      ...rest,\n      render: (value, node) => {\n        const row = byNode.get(node)!;\n        const content = column.render ? column.render(value, node) : String(value ?? \"\");\n        return row.hasChildren\n          ? <TreeRowLead depth={row.depth} open={row.open} label={getAriaLabel(node)} onToggle={() => toggle(row)}>{content}</TreeRowLead>\n          : <TreeRowLead depth={row.depth}>{content}</TreeRowLead>;\n      },\n    };\n  });\n  return <DataTable<T> {...table} columns={treeColumns} data={rows.map((row) => row.node)} getRowId={(node) => byNode.get(node)!.key} />;\n}\n"],"mappings":";;;;;;;;;;AAuBA,SAAgB,cAAiD,EAC/D,OACA,aACA,QACA,cACA,YACA,SACA,UACA,kBACA,iBACA,GAAG,SACqB;CACxB,IAAI,CAAC,QAAQ,MAAM,WAAW,OAAO,QAAQ,UAAU,GACrD,MAAM,IAAI,MAAM,6BAA6B,WAAW,4BAA4B;CAEtF,MAAM,EAAE,MAAM,WAAW,YAAY,OAAO;EAAE;EAAa;CAAO,GAAG;EACnE,GAAI,aAAa,KAAA,IAAY,EAAE,SAAS,IAAI,CAAC;EAC7C,GAAI,mBAAmB,EAAE,iBAAiB,IAAI,CAAC;EAC/C,GAAI,oBAAoB,KAAA,IAAY,EAAE,gBAAgB,IAAI,CAAC;CAC7D,CAAC;CACD,MAAM,SAAS,IAAI,IAAmB,KAAK,KAAK,QAAQ,CAAC,IAAI,MAAM,GAAG,CAAC,CAAC;CACxE,MAAM,cAAc,QAAQ,KAAK,WAA+B;EAC9D,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;EACzC,IAAI,OAAO,QAAQ,YAAY,OAAO;EACtC,OAAO;GACL,GAAG;GACH,SAAS,OAAO,SAAS;IACvB,MAAM,MAAM,OAAO,IAAI,IAAI;IAC3B,MAAM,UAAU,OAAO,SAAS,OAAO,OAAO,OAAO,IAAI,IAAI,OAAO,SAAS,EAAE;IAC/E,OAAO,IAAI,cACP,oBAAC,aAAD;KAAa,OAAO,IAAI;KAAO,MAAM,IAAI;KAAM,OAAO,aAAa,IAAI;KAAG,gBAAgB,OAAO,GAAG;KAAI,UAAA;IAAqB,CAAA,IAC7H,oBAAC,aAAD;KAAa,OAAO,IAAI;KAAQ,UAAA;IAAqB,CAAA;GAC3D;EACF;CACF,CAAC;CACD,OAAO,oBAAC,WAAD;EAAc,GAAI;EAAO,SAAS;EAAa,MAAM,KAAK,KAAK,QAAQ,IAAI,IAAI;EAAG,WAAW,SAAS,OAAO,IAAI,IAAI,CAAC,CAAE;CAAM,CAAA;AACvI"}

package/dist/data/test-runner/MatrixMarks.cjs

@@ -0,0 +1,212 @@
+const require_utils = require("../../lib/utils.cjs");
+const require_UiServer = require("../../icons/components/UiServer.cjs");
+const require_UiClock = require("../../icons/components/UiClock.cjs");
+const require_ProgressBar = require("../ProgressBar.cjs");
+const require_matrix_marks = require("./matrix-marks.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/data/test-runner/MatrixMarks.tsx
+function MatrixMark({ mark, label, className, static: isStatic = false }) {
+	const token = require_matrix_marks.MATRIX_MARKS[mark];
+	const Glyph = token.icon;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Glyph, {
+		...label === "" ? {} : { title: label ?? token.label },
+		className: require_utils.cn("size-3.5 shrink-0", token.tone, token.spin && !isStatic && "animate-spin", className),
+		"data-mark": mark
+	});
+}
+/** Outcome counts as glyph + number, in matrix order. */
+function MatrixMix({ counts, unit, always = [], static: isStatic = false }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		role: "group",
+		"aria-label": `${unit} by outcome`,
+		className: "flex shrink-0 items-center gap-2 text-xs tabular-nums",
+		"data-mix": unit,
+		children: require_matrix_marks.MATRIX_ORDER.filter((key) => (counts[key] ?? 0) > 0 || always.includes(key)).map((key) => {
+			const text = `${counts[key] ?? 0} ${require_matrix_marks.MATRIX_MARKS[key].label} ${unit}`;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				role: "img",
+				"aria-label": text,
+				title: text,
+				className: require_utils.cn("inline-flex items-center gap-0.5", require_matrix_marks.MATRIX_MARKS[key].tone),
+				"data-mix-outcome": key,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MatrixMark, {
+					mark: key,
+					label: "",
+					static: isStatic
+				}), counts[key] ?? 0]
+			}, key);
+		})
+	});
+}
+function MatrixElapsed({ ms, running, clock = false }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: require_utils.cn("inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-[11px] tabular-nums", running ? "text-blue-700 dark:text-blue-300" : "text-muted-foreground"),
+		title: running ? "elapsed so far" : "total duration",
+		"data-duration": "",
+		children: [clock && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_UiClock.UiClock, {
+			className: "size-3",
+			"aria-hidden": "true"
+		}), require_matrix_marks.formatMatrixDuration(ms)]
+	});
+}
+/**
+* A plan with no run in an environment: pending while queued, error when it
+* never started, hollow when not part of that run.
+*/
+function EmptyMatrixCell({ outcome, detail, title, bare = false }) {
+	const neverStarted = detail === "never started";
+	if (!neverStarted && outcome !== "queued" && outcome !== "absent") throw new Error(`unexpected empty matrix cell ${outcome}: ${title}`);
+	const mark = neverStarted ? "error" : outcome === "queued" ? "pending" : "absent";
+	const label = neverStarted ? "never started" : require_matrix_marks.MATRIX_MARKS[mark].label;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		title,
+		className: "flex h-5 min-w-0 items-center gap-1.5 text-xs",
+		"data-empty-cell": mark,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MatrixMark, {
+			mark,
+			label
+		}), !bare && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: require_matrix_marks.MATRIX_MARKS[mark].tone,
+			children: label
+		})]
+	});
+}
+function MatrixLegend({ static: isStatic = false }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground",
+		"data-batch-legend": "",
+		children: [require_matrix_marks.MATRIX_ORDER.map((key) => {
+			const token = require_matrix_marks.MATRIX_MARKS[key];
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "inline-flex items-center gap-1",
+				"data-legend-mark": key,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MatrixMark, {
+					mark: key,
+					label: "",
+					static: isStatic
+				}), token.legend ?? token.label]
+			}, key);
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "inline-flex items-center gap-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_UiClock.UiClock, {
+				className: "size-3",
+				"aria-hidden": "true"
+			}), "elapsed · total duration"]
+		})]
+	});
+}
+/** A context name, always in the same chip, so an environment never reads as a plan or a status. */
+function EnvChip({ context, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: require_utils.cn("inline-flex items-center gap-1 rounded border border-border bg-muted/50 px-1.5 py-0.5 font-mono text-[11px] text-foreground", className),
+		"data-env-chip": context,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_UiServer.UiServer, {
+			className: "size-3 text-muted-foreground",
+			"aria-hidden": "true"
+		}), context]
+	});
+}
+var HEADER_GRID = "grid min-w-48 grid-rows-[auto_auto_auto] gap-1.5";
+var HEADER_ROW = "flex h-5 min-w-0 items-center gap-2";
+/**
+* One environment's column head in three fixed rows: its chip, the plans'
+* progress with the elapsed time, and the plan verdict naming its units.
+*/
+function MatrixEnvHeader({ context, counts, durationMs, running, renderChip, aside, static: isStatic = false }) {
+	const done = counts.passed + counts.warned + counts.failed + counts.error;
+	const chip = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EnvChip, { context });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: HEADER_GRID,
+		"data-env-header": context,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: HEADER_ROW,
+				children: [renderChip && !isStatic ? renderChip(chip) : chip, aside]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: HEADER_ROW,
+				title: `${done} of ${counts.total} plans finished`,
+				"data-env-progress": "",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "min-w-0 flex-1",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ProgressBar.ProgressBar, {
+							total: counts.total,
+							height: "h-1.5",
+							segments: require_matrix_marks.MATRIX_PLAN_BAR.map((key) => ({
+								count: counts[key],
+								color: require_matrix_marks.matrixBarClass(key, isStatic),
+								label: `${require_matrix_marks.MATRIX_MARKS[key].label} plans`
+							}))
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "shrink-0 whitespace-nowrap text-[11px] tabular-nums text-foreground",
+						children: [
+							done,
+							"/",
+							counts.total,
+							" plans"
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MatrixElapsed, {
+						ms: durationMs,
+						running,
+						clock: true
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: HEADER_ROW,
+				"data-env-verdict": "",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MatrixMix, {
+					counts: {
+						passed: counts.passed,
+						warned: counts.warned,
+						running: counts.running,
+						pending: counts.queued,
+						failed: counts.failed,
+						error: counts.error
+					},
+					unit: "plans",
+					always: ["failed"],
+					static: isStatic
+				})
+			})
+		]
+	});
+}
+/** An environment whose member run did not load, in the same three rows as MatrixEnvHeader. */
+function MatrixUnavailableEnvHeader({ context }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: HEADER_GRID,
+		"data-env-header": context,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: HEADER_ROW,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EnvChip, { context })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `${HEADER_ROW} text-[11px] font-medium ${require_matrix_marks.MATRIX_MARKS.error.tone}`,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MatrixMark, {
+					mark: "error",
+					label: ""
+				}), "did not load"]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: HEADER_ROW,
+				"aria-hidden": "true"
+			})
+		]
+	});
+}
+exports.EmptyMatrixCell = EmptyMatrixCell;
+exports.EnvChip = EnvChip;
+exports.MatrixElapsed = MatrixElapsed;
+exports.MatrixEnvHeader = MatrixEnvHeader;
+exports.MatrixLegend = MatrixLegend;
+exports.MatrixMark = MatrixMark;
+exports.MatrixMix = MatrixMix;
+exports.MatrixUnavailableEnvHeader = MatrixUnavailableEnvHeader;
+
+//# sourceMappingURL=MatrixMarks.cjs.map

package/dist/data/test-runner/MatrixMarks.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MatrixMarks.cjs","names":["MATRIX_MARKS","cn","MATRIX_ORDER","UiClock","formatMatrixDuration","UiServer","ProgressBar","MATRIX_PLAN_BAR","matrixBarClass"],"sources":["../../../src/data/test-runner/MatrixMarks.tsx"],"sourcesContent":["// Renders the matrix-marks.ts vocabulary: one outcome's glyph, outcome mixes,\n// durations, empty cells, the legend, environment chips and the environment\n// column header. Props-only, so a live web matrix and a static print template\n// draw the same marks; `static` drops animation and links for print.\n\nimport type { ReactNode } from \"react\";\nimport { UiClock, UiServer } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport { ProgressBar } from \"../ProgressBar\";\nimport {\n  MATRIX_MARKS,\n  MATRIX_ORDER,\n  MATRIX_PLAN_BAR,\n  formatMatrixDuration,\n  matrixBarClass,\n  type MatrixCounts,\n  type MatrixEnvCounts,\n  type MatrixMarkKey,\n  type MatrixMarkToken,\n} from \"./matrix-marks\";\n\nexport type MatrixMarkProps = {\n  mark: MatrixMarkKey;\n  /** Hover title; \"\" leaves the glyph untitled where the surrounding element already names it. */\n  label?: string;\n  className?: string;\n  /** Print: never spins. */\n  static?: boolean;\n};\n\nexport function MatrixMark({ mark, label, className, static: isStatic = false }: MatrixMarkProps) {\n  const token: MatrixMarkToken = MATRIX_MARKS[mark];\n  const Glyph = token.icon;\n  return (\n    <Glyph\n      {...(label === \"\" ? {} : { title: label ?? token.label })}\n      className={cn(\"size-3.5 shrink-0\", token.tone, token.spin && !isStatic && \"animate-spin\", className)}\n      data-mark={mark}\n    />\n  );\n}\n\nexport type MatrixMixProps = {\n  counts: MatrixCounts;\n  unit: \"steps\" | \"plans\";\n  /** Outcomes drawn even at zero; every other zero count is dropped. */\n  always?: readonly MatrixMarkKey[];\n  static?: boolean;\n};\n\n/** Outcome counts as glyph + number, in matrix order. */\nexport function MatrixMix({ counts, unit, always = [], static: isStatic = false }: MatrixMixProps) {\n  return (\n    <span role=\"group\" aria-label={`${unit} by outcome`} className=\"flex shrink-0 items-center gap-2 text-xs tabular-nums\" data-mix={unit}>\n      {MATRIX_ORDER.filter((key) => (counts[key] ?? 0) > 0 || always.includes(key)).map((key) => {\n        const text = `${counts[key] ?? 0} ${MATRIX_MARKS[key].label} ${unit}`;\n        return (\n          <span key={key} role=\"img\" aria-label={text} title={text} className={cn(\"inline-flex items-center gap-0.5\", MATRIX_MARKS[key].tone)} data-mix-outcome={key}>\n            <MatrixMark mark={key} label=\"\" static={isStatic} />\n            {counts[key] ?? 0}\n          </span>\n        );\n      })}\n    </span>\n  );\n}\n\nexport type MatrixElapsedProps = {\n  ms: number;\n  /** Still counting: drawn blue and titled \"elapsed so far\". */\n  running: boolean;\n  /** Prefix a clock glyph. */\n  clock?: boolean;\n};\n\nexport function MatrixElapsed({ ms, running, clock = false }: MatrixElapsedProps) {\n  return (\n    <span\n      className={cn(\"inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-[11px] tabular-nums\", running ? \"text-blue-700 dark:text-blue-300\" : \"text-muted-foreground\")}\n      title={running ? \"elapsed so far\" : \"total duration\"}\n      data-duration=\"\"\n    >\n      {clock && <UiClock className=\"size-3\" aria-hidden=\"true\" />}\n      {formatMatrixDuration(ms)}\n    </span>\n  );\n}\n\nexport type EmptyMatrixCellProps = {\n  /** The cell outcome: \"queued\", \"absent\", or \"error\" with detail \"never started\". Anything else throws. */\n  outcome: string;\n  /** Why a cell has no run: \"never started\". */\n  detail?: string;\n  /** Hover title of the cell. */\n  title: string;\n  /** The glyph alone (sub-step rows), its meaning on hover. */\n  bare?: boolean;\n};\n\n/**\n * A plan with no run in an environment: pending while queued, error when it\n * never started, hollow when not part of that run.\n */\nexport function EmptyMatrixCell({ outcome, detail, title, bare = false }: EmptyMatrixCellProps) {\n  const neverStarted = detail === \"never started\";\n  if (!neverStarted && outcome !== \"queued\" && outcome !== \"absent\") throw new Error(`unexpected empty matrix cell ${outcome}: ${title}`);\n  const mark: MatrixMarkKey = neverStarted ? \"error\" : outcome === \"queued\" ? \"pending\" : \"absent\";\n  const label = neverStarted ? \"never started\" : MATRIX_MARKS[mark].label;\n  return (\n    <span title={title} className=\"flex h-5 min-w-0 items-center gap-1.5 text-xs\" data-empty-cell={mark}>\n      <MatrixMark mark={mark} label={label} />\n      {!bare && <span className={MATRIX_MARKS[mark].tone}>{label}</span>}\n    </span>\n  );\n}\n\nexport type MatrixLegendProps = { static?: boolean };\n\nexport function MatrixLegend({ static: isStatic = false }: MatrixLegendProps) {\n  return (\n    <div className=\"flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground\" data-batch-legend=\"\">\n      {MATRIX_ORDER.map((key) => {\n        const token: MatrixMarkToken = MATRIX_MARKS[key];\n        return (\n          <span key={key} className=\"inline-flex items-center gap-1\" data-legend-mark={key}>\n            <MatrixMark mark={key} label=\"\" static={isStatic} />\n            {token.legend ?? token.label}\n          </span>\n        );\n      })}\n      <span className=\"inline-flex items-center gap-1\">\n        <UiClock className=\"size-3\" aria-hidden=\"true\" />\n        elapsed · total duration\n      </span>\n    </div>\n  );\n}\n\nexport type EnvChipProps = { context: string; className?: string };\n\n/** A context name, always in the same chip, so an environment never reads as a plan or a status. */\nexport function EnvChip({ context, className }: EnvChipProps) {\n  return (\n    <span\n      className={cn(\"inline-flex items-center gap-1 rounded border border-border bg-muted/50 px-1.5 py-0.5 font-mono text-[11px] text-foreground\", className)}\n      data-env-chip={context}\n    >\n      <UiServer className=\"size-3 text-muted-foreground\" aria-hidden=\"true\" />\n      {context}\n    </span>\n  );\n}\n\nconst HEADER_GRID = \"grid min-w-48 grid-rows-[auto_auto_auto] gap-1.5\";\nconst HEADER_ROW = \"flex h-5 min-w-0 items-center gap-2\";\n\nexport type MatrixEnvHeaderProps = {\n  context: string;\n  counts: MatrixEnvCounts;\n  durationMs: number;\n  /** The environment's run is still running: its elapsed time is still counting. */\n  running: boolean;\n  /** Wraps the chip, e.g. in the host router's link to the member run. Never called when static. */\n  renderChip?: (chip: ReactNode) => ReactNode;\n  /** Drawn beside the chip, e.g. how often the member was retried. */\n  aside?: ReactNode;\n  static?: boolean;\n};\n\n/**\n * One environment's column head in three fixed rows: its chip, the plans'\n * progress with the elapsed time, and the plan verdict naming its units.\n */\nexport function MatrixEnvHeader({ context, counts, durationMs, running, renderChip, aside, static: isStatic = false }: MatrixEnvHeaderProps) {\n  const done = counts.passed + counts.warned + counts.failed + counts.error;\n  const chip = <EnvChip context={context} />;\n  return (\n    <div className={HEADER_GRID} data-env-header={context}>\n      <div className={HEADER_ROW}>\n        {renderChip && !isStatic ? renderChip(chip) : chip}\n        {aside}\n      </div>\n      <div className={HEADER_ROW} title={`${done} of ${counts.total} plans finished`} data-env-progress=\"\">\n        <span className=\"min-w-0 flex-1\">\n          <ProgressBar\n            total={counts.total}\n            height=\"h-1.5\"\n            segments={MATRIX_PLAN_BAR.map((key) => ({ count: counts[key], color: matrixBarClass(key, isStatic), label: `${MATRIX_MARKS[key].label} plans` }))}\n          />\n        </span>\n        <span className=\"shrink-0 whitespace-nowrap text-[11px] tabular-nums text-foreground\">\n          {done}/{counts.total} plans\n        </span>\n        <MatrixElapsed ms={durationMs} running={running} clock />\n      </div>\n      <div className={HEADER_ROW} data-env-verdict=\"\">\n        <MatrixMix\n          counts={{ passed: counts.passed, warned: counts.warned, running: counts.running, pending: counts.queued, failed: counts.failed, error: counts.error }}\n          unit=\"plans\"\n          always={[\"failed\"]}\n          static={isStatic}\n        />\n      </div>\n    </div>\n  );\n}\n\nexport type MatrixUnavailableEnvHeaderProps = { context: string };\n\n/** An environment whose member run did not load, in the same three rows as MatrixEnvHeader. */\nexport function MatrixUnavailableEnvHeader({ context }: MatrixUnavailableEnvHeaderProps) {\n  return (\n    <div className={HEADER_GRID} data-env-header={context}>\n      <div className={HEADER_ROW}>\n        <EnvChip context={context} />\n      </div>\n      <div className={`${HEADER_ROW} text-[11px] font-medium ${MATRIX_MARKS.error.tone}`}>\n        <MatrixMark mark=\"error\" label=\"\" />\n        did not load\n      </div>\n      <div className={HEADER_ROW} aria-hidden=\"true\" />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/data/test-runner/MatrixMarks.d.ts

@@ -0,0 +1,76 @@
+import { ReactNode } from 'react';
+import { MatrixCounts, MatrixEnvCounts, MatrixMarkKey } from './matrix-marks.js';
+export type MatrixMarkProps = {
+    mark: MatrixMarkKey;
+    /** Hover title; "" leaves the glyph untitled where the surrounding element already names it. */
+    label?: string;
+    className?: string;
+    /** Print: never spins. */
+    static?: boolean;
+};
+export declare function MatrixMark({ mark, label, className, static: isStatic }: MatrixMarkProps): import("react").JSX.Element;
+export type MatrixMixProps = {
+    counts: MatrixCounts;
+    unit: "steps" | "plans";
+    /** Outcomes drawn even at zero; every other zero count is dropped. */
+    always?: readonly MatrixMarkKey[];
+    static?: boolean;
+};
+/** Outcome counts as glyph + number, in matrix order. */
+export declare function MatrixMix({ counts, unit, always, static: isStatic }: MatrixMixProps): import("react").JSX.Element;
+export type MatrixElapsedProps = {
+    ms: number;
+    /** Still counting: drawn blue and titled "elapsed so far". */
+    running: boolean;
+    /** Prefix a clock glyph. */
+    clock?: boolean;
+};
+export declare function MatrixElapsed({ ms, running, clock }: MatrixElapsedProps): import("react").JSX.Element;
+export type EmptyMatrixCellProps = {
+    /** The cell outcome: "queued", "absent", or "error" with detail "never started". Anything else throws. */
+    outcome: string;
+    /** Why a cell has no run: "never started". */
+    detail?: string;
+    /** Hover title of the cell. */
+    title: string;
+    /** The glyph alone (sub-step rows), its meaning on hover. */
+    bare?: boolean;
+};
+/**
+ * A plan with no run in an environment: pending while queued, error when it
+ * never started, hollow when not part of that run.
+ */
+export declare function EmptyMatrixCell({ outcome, detail, title, bare }: EmptyMatrixCellProps): import("react").JSX.Element;
+export type MatrixLegendProps = {
+    static?: boolean;
+};
+export declare function MatrixLegend({ static: isStatic }: MatrixLegendProps): import("react").JSX.Element;
+export type EnvChipProps = {
+    context: string;
+    className?: string;
+};
+/** A context name, always in the same chip, so an environment never reads as a plan or a status. */
+export declare function EnvChip({ context, className }: EnvChipProps): import("react").JSX.Element;
+export type MatrixEnvHeaderProps = {
+    context: string;
+    counts: MatrixEnvCounts;
+    durationMs: number;
+    /** The environment's run is still running: its elapsed time is still counting. */
+    running: boolean;
+    /** Wraps the chip, e.g. in the host router's link to the member run. Never called when static. */
+    renderChip?: (chip: ReactNode) => ReactNode;
+    /** Drawn beside the chip, e.g. how often the member was retried. */
+    aside?: ReactNode;
+    static?: boolean;
+};
+/**
+ * One environment's column head in three fixed rows: its chip, the plans'
+ * progress with the elapsed time, and the plan verdict naming its units.
+ */
+export declare function MatrixEnvHeader({ context, counts, durationMs, running, renderChip, aside, static: isStatic }: MatrixEnvHeaderProps): import("react").JSX.Element;
+export type MatrixUnavailableEnvHeaderProps = {
+    context: string;
+};
+/** An environment whose member run did not load, in the same three rows as MatrixEnvHeader. */
+export declare function MatrixUnavailableEnvHeader({ context }: MatrixUnavailableEnvHeaderProps): import("react").JSX.Element;
+//# sourceMappingURL=MatrixMarks.d.ts.map

package/dist/data/test-runner/MatrixMarks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MatrixMarks.d.ts","sourceRoot":"","sources":["../../../src/data/test-runner/MatrixMarks.tsx"],"names":[],"mappings":"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"}