@flanksource/clicky-ui 0.3.52 → 0.3.54

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/clicky-export/ClickyExportDialog.cjs

@@ -12,7 +12,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * every range — which pushed everything else in that menu out of reach and
 * still truncated the one thing worth reading: what each range costs.
 */
-function ClickyExportDialog({ open, onClose, title = "Export", formats, scopes, onDownload }) {
+function ClickyExportDialog({ open, onClose, title = "Export", formats, scopes, onDownload, pendingContent, allowCloseWhilePending = false }) {
 	const [format, setFormat] = (0, react.useState)(formats[0]?.format);
 	const [scope, setScope] = (0, react.useState)(scopes[0]?.scope);
 	const [pending, setPending] = (0, react.useState)(false);
@@ -48,8 +48,8 @@ function ClickyExportDialog({ open, onClose, title = "Export", formats, scopes,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
 				variant: "outline",
 				onClick: onClose,
-				disabled: pending,
-				children: "Cancel"
+				disabled: pending && !allowCloseWhilePending,
+				children: pending && allowCloseWhilePending ? "Continue in background" : "Cancel"
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
 				onClick: () => void download(),
 				loading: pending,
@@ -60,6 +60,7 @@ function ClickyExportDialog({ open, onClose, title = "Export", formats, scopes,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "space-y-4",
 			children: [
+				pending && pendingContent,
 				error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					role: "alert",
 					className: "rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive",

package/dist/data/clicky-export/ClickyExportDialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ClickyExportDialog.cjs","names":["useState","Modal","Button","cn","Icon"],"sources":["../../../src/data/clicky-export/ClickyExportDialog.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { Button } from \"../../components/button\";\nimport { Modal } from \"../../overlay/Modal\";\nimport { Icon, type StaticIconComponent } from \"../Icon\";\nimport { cn } from \"../../lib/utils\";\n\n/** One format the endpoint advertises, already resolved for display. */\nexport type ClickyExportFormatOption = {\n  /** Value handed back to `onDownload`. */\n  format: string;\n  label: string;\n  /** What the format is for. */\n  description?: string | undefined;\n  icon?: StaticIconComponent | undefined;\n  iconClassName?: string | undefined;\n};\n\n/** One result range the endpoint advertises. */\nexport type ClickyExportScopeOption = {\n  /** Value handed back to `onDownload`; undefined for a legacy endpoint. */\n  scope: string | undefined;\n  label: string;\n  /**\n   * What this range costs or caps — \"Limited to 1,000 rows\", \"Streams rows as\n   * they are read\". Per format, because a PDF's ceiling is not a CSV's.\n   */\n  note?: ((format: string) => string | undefined) | undefined;\n};\n\nexport type ClickyExportDialogProps = {\n  open: boolean;\n  onClose: () => void;\n  title?: string;\n  formats: ClickyExportFormatOption[];\n  scopes: ClickyExportScopeOption[];\n  /** Runs the export. Rejecting shows the reason without closing the dialog. */\n  onDownload: (request: {\n    format: string;\n    scope: string | undefined;\n  }) => Promise<void> | void;\n};\n\n/**\n * ClickyExportDialog picks a format and a range, then downloads.\n *\n * It exists because the same choice as a menu was 16 rows — every format times\n * every range — which pushed everything else in that menu out of reach and\n * still truncated the one thing worth reading: what each range costs.\n */\nexport function ClickyExportDialog({\n  open,\n  onClose,\n  title = \"Export\",\n  formats,\n  scopes,\n  onDownload,\n}: ClickyExportDialogProps) {\n  const [format, setFormat] = useState(formats[0]?.format);\n  const [scope, setScope] = useState(scopes[0]?.scope);\n  const [pending, setPending] = useState(false);\n  const [error, setError] = useState(\"\");\n\n  // Reopening starts from a clean slate: the error belongs to the attempt that\n  // produced it, not to the next one.\n  useEffect(() => {\n    if (open) setError(\"\");\n  }, [open]);\n\n  const activeScope = scopes.find((option) => option.scope === scope);\n\n  const download = async () => {\n    if (!format) return;\n    setPending(true);\n    setError(\"\");\n    try {\n      await onDownload({ format, scope });\n      onClose();\n    } catch (cause) {\n      setError(cause instanceof Error ? cause.message : \"The export failed\");\n    } finally {\n      setPending(false);\n    }\n  };\n\n  return (\n    <Modal\n      open={open}\n      onClose={onClose}\n      title={title}\n      size=\"lg\"\n      closeOnEsc\n      footer={\n        <div className=\"flex items-center justify-end gap-2\">\n          <Button variant=\"outline\" onClick={onClose} disabled={pending}>\n            Cancel\n          </Button>\n          <Button\n            onClick={() => void download()}\n            loading={pending}\n            disabled={!format}\n          >\n            Download\n          </Button>\n        </div>\n      }\n    >\n      <div className=\"space-y-4\">\n        {error && (\n          <div\n            role=\"alert\"\n            className=\"rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive\"\n          >\n            {error}\n          </div>\n        )}\n\n        {scopes.length > 1 ? (\n          <fieldset>\n            <legend className=\"mb-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n              Rows\n            </legend>\n            <div className=\"flex flex-wrap gap-2\">\n              {scopes.map((option) => (\n                <label\n                  key={option.scope ?? \"default\"}\n                  className={cn(\n                    \"cursor-pointer rounded-md border px-3 py-1.5 text-sm transition-colors\",\n                    option.scope === scope\n                      ? \"border-foreground/20 bg-accent text-accent-foreground\"\n                      : \"border-input hover:bg-accent hover:text-accent-foreground\",\n                  )}\n                >\n                  <input\n                    type=\"radio\"\n                    name=\"clicky-export-scope\"\n                    // Named explicitly: the input is visually hidden behind its\n                    // own styled label, so nothing else gives it a name.\n                    aria-label={option.label}\n                    className=\"sr-only\"\n                    checked={option.scope === scope}\n                    onChange={() => setScope(option.scope)}\n                  />\n                  {option.label}\n                </label>\n              ))}\n            </div>\n          </fieldset>\n        ) : (\n          scopes[0]?.label && (\n            <p className=\"text-sm text-muted-foreground\">{scopes[0].label}</p>\n          )\n        )}\n\n        <fieldset>\n          <legend className=\"mb-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n            Format\n          </legend>\n          <div className=\"grid gap-1 sm:grid-cols-2\">\n            {formats.map((option) => {\n              const note = activeScope?.note?.(option.format);\n              return (\n                <label\n                  key={option.format}\n                  className={cn(\n                    \"flex cursor-pointer items-start gap-2 rounded-md border px-3 py-2 text-left transition-colors\",\n                    option.format === format\n                      ? \"border-foreground/20 bg-accent text-accent-foreground\"\n                      : \"border-transparent hover:bg-accent hover:text-accent-foreground\",\n                  )}\n                >\n                  <input\n                    type=\"radio\"\n                    name=\"clicky-export-format\"\n                    aria-label={option.label}\n                    className=\"sr-only\"\n                    checked={option.format === format}\n                    onChange={() => setFormat(option.format)}\n                  />\n                  {option.icon && (\n                    <Icon\n                      icon={option.icon}\n                      className={cn(\n                        \"mt-0.5 shrink-0 text-sm\",\n                        option.iconClassName ?? \"text-muted-foreground\",\n                      )}\n                    />\n                  )}\n                  <span className=\"min-w-0\">\n                    <span className=\"block text-sm font-medium\">\n                      {option.label}\n                    </span>\n                    {option.description && (\n                      <span className=\"mt-0.5 block text-xs text-muted-foreground\">\n                        {option.description}\n                      </span>\n                    )}\n                    {note && (\n                      <span className=\"mt-0.5 block text-xs text-amber-700 [[data-theme=dark]_&]:text-amber-400\">\n                        {note}\n                      </span>\n                    )}\n                  </span>\n                </label>\n              );\n            })}\n          </div>\n        </fieldset>\n\n      </div>\n    </Modal>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ClickyExportDialog.cjs","names":["useState","Modal","Button","cn","Icon"],"sources":["../../../src/data/clicky-export/ClickyExportDialog.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Button } from \"../../components/button\";\nimport { Modal } from \"../../overlay/Modal\";\nimport { Icon, type StaticIconComponent } from \"../Icon\";\nimport { cn } from \"../../lib/utils\";\n\n/** One format the endpoint advertises, already resolved for display. */\nexport type ClickyExportFormatOption = {\n  /** Value handed back to `onDownload`. */\n  format: string;\n  label: string;\n  /** What the format is for. */\n  description?: string | undefined;\n  icon?: StaticIconComponent | undefined;\n  iconClassName?: string | undefined;\n};\n\n/** One result range the endpoint advertises. */\nexport type ClickyExportScopeOption = {\n  /** Value handed back to `onDownload`; undefined for a legacy endpoint. */\n  scope: string | undefined;\n  label: string;\n  /**\n   * What this range costs or caps — \"Limited to 1,000 rows\", \"Streams rows as\n   * they are read\". Per format, because a PDF's ceiling is not a CSV's.\n   */\n  note?: ((format: string) => string | undefined) | undefined;\n};\n\nexport type ClickyExportDialogProps = {\n  open: boolean;\n  onClose: () => void;\n  title?: string;\n  formats: ClickyExportFormatOption[];\n  scopes: ClickyExportScopeOption[];\n  pendingContent?: ReactNode;\n  allowCloseWhilePending?: boolean;\n  /** Runs the export. Rejecting shows the reason without closing the dialog. */\n  onDownload: (request: {\n    format: string;\n    scope: string | undefined;\n  }) => Promise<void> | void;\n};\n\n/**\n * ClickyExportDialog picks a format and a range, then downloads.\n *\n * It exists because the same choice as a menu was 16 rows — every format times\n * every range — which pushed everything else in that menu out of reach and\n * still truncated the one thing worth reading: what each range costs.\n */\nexport function ClickyExportDialog({\n  open,\n  onClose,\n  title = \"Export\",\n  formats,\n  scopes,\n  onDownload,\n  pendingContent,\n  allowCloseWhilePending = false,\n}: ClickyExportDialogProps) {\n  const [format, setFormat] = useState(formats[0]?.format);\n  const [scope, setScope] = useState(scopes[0]?.scope);\n  const [pending, setPending] = useState(false);\n  const [error, setError] = useState(\"\");\n\n  // Reopening starts from a clean slate: the error belongs to the attempt that\n  // produced it, not to the next one.\n  useEffect(() => {\n    if (open) setError(\"\");\n  }, [open]);\n\n  const activeScope = scopes.find((option) => option.scope === scope);\n\n  const download = async () => {\n    if (!format) return;\n    setPending(true);\n    setError(\"\");\n    try {\n      await onDownload({ format, scope });\n      onClose();\n    } catch (cause) {\n      setError(cause instanceof Error ? cause.message : \"The export failed\");\n    } finally {\n      setPending(false);\n    }\n  };\n\n  return (\n    <Modal\n      open={open}\n      onClose={onClose}\n      title={title}\n      size=\"lg\"\n      closeOnEsc\n      footer={\n        <div className=\"flex items-center justify-end gap-2\">\n          <Button variant=\"outline\" onClick={onClose} disabled={pending && !allowCloseWhilePending}>\n            {pending && allowCloseWhilePending ? \"Continue in background\" : \"Cancel\"}\n          </Button>\n          <Button\n            onClick={() => void download()}\n            loading={pending}\n            disabled={!format}\n          >\n            Download\n          </Button>\n        </div>\n      }\n    >\n      <div className=\"space-y-4\">\n        {pending && pendingContent}\n        {error && (\n          <div\n            role=\"alert\"\n            className=\"rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive\"\n          >\n            {error}\n          </div>\n        )}\n\n        {scopes.length > 1 ? (\n          <fieldset>\n            <legend className=\"mb-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n              Rows\n            </legend>\n            <div className=\"flex flex-wrap gap-2\">\n              {scopes.map((option) => (\n                <label\n                  key={option.scope ?? \"default\"}\n                  className={cn(\n                    \"cursor-pointer rounded-md border px-3 py-1.5 text-sm transition-colors\",\n                    option.scope === scope\n                      ? \"border-foreground/20 bg-accent text-accent-foreground\"\n                      : \"border-input hover:bg-accent hover:text-accent-foreground\",\n                  )}\n                >\n                  <input\n                    type=\"radio\"\n                    name=\"clicky-export-scope\"\n                    // Named explicitly: the input is visually hidden behind its\n                    // own styled label, so nothing else gives it a name.\n                    aria-label={option.label}\n                    className=\"sr-only\"\n                    checked={option.scope === scope}\n                    onChange={() => setScope(option.scope)}\n                  />\n                  {option.label}\n                </label>\n              ))}\n            </div>\n          </fieldset>\n        ) : (\n          scopes[0]?.label && (\n            <p className=\"text-sm text-muted-foreground\">{scopes[0].label}</p>\n          )\n        )}\n\n        <fieldset>\n          <legend className=\"mb-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n            Format\n          </legend>\n          <div className=\"grid gap-1 sm:grid-cols-2\">\n            {formats.map((option) => {\n              const note = activeScope?.note?.(option.format);\n              return (\n                <label\n                  key={option.format}\n                  className={cn(\n                    \"flex cursor-pointer items-start gap-2 rounded-md border px-3 py-2 text-left transition-colors\",\n                    option.format === format\n                      ? \"border-foreground/20 bg-accent text-accent-foreground\"\n                      : \"border-transparent hover:bg-accent hover:text-accent-foreground\",\n                  )}\n                >\n                  <input\n                    type=\"radio\"\n                    name=\"clicky-export-format\"\n                    aria-label={option.label}\n                    className=\"sr-only\"\n                    checked={option.format === format}\n                    onChange={() => setFormat(option.format)}\n                  />\n                  {option.icon && (\n                    <Icon\n                      icon={option.icon}\n                      className={cn(\n                        \"mt-0.5 shrink-0 text-sm\",\n                        option.iconClassName ?? \"text-muted-foreground\",\n                      )}\n                    />\n                  )}\n                  <span className=\"min-w-0\">\n                    <span className=\"block text-sm font-medium\">\n                      {option.label}\n                    </span>\n                    {option.description && (\n                      <span className=\"mt-0.5 block text-xs text-muted-foreground\">\n                        {option.description}\n                      </span>\n                    )}\n                    {note && (\n                      <span className=\"mt-0.5 block text-xs text-amber-700 [[data-theme=dark]_&]:text-amber-400\">\n                        {note}\n                      </span>\n                    )}\n                  </span>\n                </label>\n              );\n            })}\n          </div>\n        </fieldset>\n\n      </div>\n    </Modal>\n  );\n}\n"],"mappings":"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"}

package/dist/data/clicky-export/ClickyExportDialog.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { StaticIconComponent } from '../Icon.js';
 /** One format the endpoint advertises, already resolved for display. */
 export type ClickyExportFormatOption = {
@@ -26,6 +27,8 @@ export type ClickyExportDialogProps = {
     title?: string;
     formats: ClickyExportFormatOption[];
     scopes: ClickyExportScopeOption[];
+    pendingContent?: ReactNode;
+    allowCloseWhilePending?: boolean;
     /** Runs the export. Rejecting shows the reason without closing the dialog. */
     onDownload: (request: {
         format: string;
@@ -39,5 +42,5 @@ export type ClickyExportDialogProps = {
  * every range — which pushed everything else in that menu out of reach and
  * still truncated the one thing worth reading: what each range costs.
  */
-export declare function ClickyExportDialog({ open, onClose, title, formats, scopes, onDownload, }: ClickyExportDialogProps): import("react").JSX.Element;
+export declare function ClickyExportDialog({ open, onClose, title, formats, scopes, onDownload, pendingContent, allowCloseWhilePending, }: ClickyExportDialogProps): import("react").JSX.Element;
 //# sourceMappingURL=ClickyExportDialog.d.ts.map

package/dist/data/clicky-export/ClickyExportDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClickyExportDialog.d.ts","sourceRoot":"","sources":["../../../src/data/clicky-export/ClickyExportDialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAGzD,wEAAwE;AACxE,MAAM,MAAM,wBAAwB,GAAG;IACrC,yCAAyC;IACzC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,IAAI,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IACvC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACpC,CAAC;AAEF,gDAAgD;AAChD,MAAM,MAAM,uBAAuB,GAAG;IACpC,0EAA0E;IAC1E,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;CAC7D,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,wBAAwB,EAAE,CAAC;IACpC,MAAM,EAAE,uBAAuB,EAAE,CAAC;IAClC,8EAA8E;IAC9E,UAAU,EAAE,CAAC,OAAO,EAAE;QACpB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;KAC3B,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;CAC5B,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,KAAgB,EAChB,OAAO,EACP,MAAM,EACN,UAAU,GACX,EAAE,uBAAuB,+BA2JzB"}
+{"version":3,"file":"ClickyExportDialog.d.ts","sourceRoot":"","sources":["../../../src/data/clicky-export/ClickyExportDialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAGzD,wEAAwE;AACxE,MAAM,MAAM,wBAAwB,GAAG;IACrC,yCAAyC;IACzC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,IAAI,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IACvC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACpC,CAAC;AAEF,gDAAgD;AAChD,MAAM,MAAM,uBAAuB,GAAG;IACpC,0EAA0E;IAC1E,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;CAC7D,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,wBAAwB,EAAE,CAAC;IACpC,MAAM,EAAE,uBAAuB,EAAE,CAAC;IAClC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,8EAA8E;IAC9E,UAAU,EAAE,CAAC,OAAO,EAAE;QACpB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;KAC3B,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;CAC5B,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,KAAgB,EAChB,OAAO,EACP,MAAM,EACN,UAAU,EACV,cAAc,EACd,sBAA8B,GAC/B,EAAE,uBAAuB,+BA4JzB"}

package/dist/data/clicky-export/ClickyExportDialog.js

@@ -12,7 +12,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * every range — which pushed everything else in that menu out of reach and
 * still truncated the one thing worth reading: what each range costs.
 */
-function ClickyExportDialog({ open, onClose, title = "Export", formats, scopes, onDownload }) {
+function ClickyExportDialog({ open, onClose, title = "Export", formats, scopes, onDownload, pendingContent, allowCloseWhilePending = false }) {
 	const [format, setFormat] = useState(formats[0]?.format);
 	const [scope, setScope] = useState(scopes[0]?.scope);
 	const [pending, setPending] = useState(false);
@@ -48,8 +48,8 @@ function ClickyExportDialog({ open, onClose, title = "Export", formats, scopes,
 			children: [/* @__PURE__ */ jsx(Button, {
 				variant: "outline",
 				onClick: onClose,
-				disabled: pending,
-				children: "Cancel"
+				disabled: pending && !allowCloseWhilePending,
+				children: pending && allowCloseWhilePending ? "Continue in background" : "Cancel"
 			}), /* @__PURE__ */ jsx(Button, {
 				onClick: () => void download(),
 				loading: pending,
@@ -60,6 +60,7 @@ function ClickyExportDialog({ open, onClose, title = "Export", formats, scopes,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "space-y-4",
 			children: [
+				pending && pendingContent,
 				error && /* @__PURE__ */ jsx("div", {
 					role: "alert",
 					className: "rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive",

package/dist/data/clicky-export/ClickyExportDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClickyExportDialog.js","names":[],"sources":["../../../src/data/clicky-export/ClickyExportDialog.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { Button } from \"../../components/button\";\nimport { Modal } from \"../../overlay/Modal\";\nimport { Icon, type StaticIconComponent } from \"../Icon\";\nimport { cn } from \"../../lib/utils\";\n\n/** One format the endpoint advertises, already resolved for display. */\nexport type ClickyExportFormatOption = {\n  /** Value handed back to `onDownload`. */\n  format: string;\n  label: string;\n  /** What the format is for. */\n  description?: string | undefined;\n  icon?: StaticIconComponent | undefined;\n  iconClassName?: string | undefined;\n};\n\n/** One result range the endpoint advertises. */\nexport type ClickyExportScopeOption = {\n  /** Value handed back to `onDownload`; undefined for a legacy endpoint. */\n  scope: string | undefined;\n  label: string;\n  /**\n   * What this range costs or caps — \"Limited to 1,000 rows\", \"Streams rows as\n   * they are read\". Per format, because a PDF's ceiling is not a CSV's.\n   */\n  note?: ((format: string) => string | undefined) | undefined;\n};\n\nexport type ClickyExportDialogProps = {\n  open: boolean;\n  onClose: () => void;\n  title?: string;\n  formats: ClickyExportFormatOption[];\n  scopes: ClickyExportScopeOption[];\n  /** Runs the export. Rejecting shows the reason without closing the dialog. */\n  onDownload: (request: {\n    format: string;\n    scope: string | undefined;\n  }) => Promise<void> | void;\n};\n\n/**\n * ClickyExportDialog picks a format and a range, then downloads.\n *\n * It exists because the same choice as a menu was 16 rows — every format times\n * every range — which pushed everything else in that menu out of reach and\n * still truncated the one thing worth reading: what each range costs.\n */\nexport function ClickyExportDialog({\n  open,\n  onClose,\n  title = \"Export\",\n  formats,\n  scopes,\n  onDownload,\n}: ClickyExportDialogProps) {\n  const [format, setFormat] = useState(formats[0]?.format);\n  const [scope, setScope] = useState(scopes[0]?.scope);\n  const [pending, setPending] = useState(false);\n  const [error, setError] = useState(\"\");\n\n  // Reopening starts from a clean slate: the error belongs to the attempt that\n  // produced it, not to the next one.\n  useEffect(() => {\n    if (open) setError(\"\");\n  }, [open]);\n\n  const activeScope = scopes.find((option) => option.scope === scope);\n\n  const download = async () => {\n    if (!format) return;\n    setPending(true);\n    setError(\"\");\n    try {\n      await onDownload({ format, scope });\n      onClose();\n    } catch (cause) {\n      setError(cause instanceof Error ? cause.message : \"The export failed\");\n    } finally {\n      setPending(false);\n    }\n  };\n\n  return (\n    <Modal\n      open={open}\n      onClose={onClose}\n      title={title}\n      size=\"lg\"\n      closeOnEsc\n      footer={\n        <div className=\"flex items-center justify-end gap-2\">\n          <Button variant=\"outline\" onClick={onClose} disabled={pending}>\n            Cancel\n          </Button>\n          <Button\n            onClick={() => void download()}\n            loading={pending}\n            disabled={!format}\n          >\n            Download\n          </Button>\n        </div>\n      }\n    >\n      <div className=\"space-y-4\">\n        {error && (\n          <div\n            role=\"alert\"\n            className=\"rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive\"\n          >\n            {error}\n          </div>\n        )}\n\n        {scopes.length > 1 ? (\n          <fieldset>\n            <legend className=\"mb-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n              Rows\n            </legend>\n            <div className=\"flex flex-wrap gap-2\">\n              {scopes.map((option) => (\n                <label\n                  key={option.scope ?? \"default\"}\n                  className={cn(\n                    \"cursor-pointer rounded-md border px-3 py-1.5 text-sm transition-colors\",\n                    option.scope === scope\n                      ? \"border-foreground/20 bg-accent text-accent-foreground\"\n                      : \"border-input hover:bg-accent hover:text-accent-foreground\",\n                  )}\n                >\n                  <input\n                    type=\"radio\"\n                    name=\"clicky-export-scope\"\n                    // Named explicitly: the input is visually hidden behind its\n                    // own styled label, so nothing else gives it a name.\n                    aria-label={option.label}\n                    className=\"sr-only\"\n                    checked={option.scope === scope}\n                    onChange={() => setScope(option.scope)}\n                  />\n                  {option.label}\n                </label>\n              ))}\n            </div>\n          </fieldset>\n        ) : (\n          scopes[0]?.label && (\n            <p className=\"text-sm text-muted-foreground\">{scopes[0].label}</p>\n          )\n        )}\n\n        <fieldset>\n          <legend className=\"mb-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n            Format\n          </legend>\n          <div className=\"grid gap-1 sm:grid-cols-2\">\n            {formats.map((option) => {\n              const note = activeScope?.note?.(option.format);\n              return (\n                <label\n                  key={option.format}\n                  className={cn(\n                    \"flex cursor-pointer items-start gap-2 rounded-md border px-3 py-2 text-left transition-colors\",\n                    option.format === format\n                      ? \"border-foreground/20 bg-accent text-accent-foreground\"\n                      : \"border-transparent hover:bg-accent hover:text-accent-foreground\",\n                  )}\n                >\n                  <input\n                    type=\"radio\"\n                    name=\"clicky-export-format\"\n                    aria-label={option.label}\n                    className=\"sr-only\"\n                    checked={option.format === format}\n                    onChange={() => setFormat(option.format)}\n                  />\n                  {option.icon && (\n                    <Icon\n                      icon={option.icon}\n                      className={cn(\n                        \"mt-0.5 shrink-0 text-sm\",\n                        option.iconClassName ?? \"text-muted-foreground\",\n                      )}\n                    />\n                  )}\n                  <span className=\"min-w-0\">\n                    <span className=\"block text-sm font-medium\">\n                      {option.label}\n                    </span>\n                    {option.description && (\n                      <span className=\"mt-0.5 block text-xs text-muted-foreground\">\n                        {option.description}\n                      </span>\n                    )}\n                    {note && (\n                      <span className=\"mt-0.5 block text-xs text-amber-700 [[data-theme=dark]_&]:text-amber-400\">\n                        {note}\n                      </span>\n                    )}\n                  </span>\n                </label>\n              );\n            })}\n          </div>\n        </fieldset>\n\n      </div>\n    </Modal>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ClickyExportDialog.js","names":[],"sources":["../../../src/data/clicky-export/ClickyExportDialog.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Button } from \"../../components/button\";\nimport { Modal } from \"../../overlay/Modal\";\nimport { Icon, type StaticIconComponent } from \"../Icon\";\nimport { cn } from \"../../lib/utils\";\n\n/** One format the endpoint advertises, already resolved for display. */\nexport type ClickyExportFormatOption = {\n  /** Value handed back to `onDownload`. */\n  format: string;\n  label: string;\n  /** What the format is for. */\n  description?: string | undefined;\n  icon?: StaticIconComponent | undefined;\n  iconClassName?: string | undefined;\n};\n\n/** One result range the endpoint advertises. */\nexport type ClickyExportScopeOption = {\n  /** Value handed back to `onDownload`; undefined for a legacy endpoint. */\n  scope: string | undefined;\n  label: string;\n  /**\n   * What this range costs or caps — \"Limited to 1,000 rows\", \"Streams rows as\n   * they are read\". Per format, because a PDF's ceiling is not a CSV's.\n   */\n  note?: ((format: string) => string | undefined) | undefined;\n};\n\nexport type ClickyExportDialogProps = {\n  open: boolean;\n  onClose: () => void;\n  title?: string;\n  formats: ClickyExportFormatOption[];\n  scopes: ClickyExportScopeOption[];\n  pendingContent?: ReactNode;\n  allowCloseWhilePending?: boolean;\n  /** Runs the export. Rejecting shows the reason without closing the dialog. */\n  onDownload: (request: {\n    format: string;\n    scope: string | undefined;\n  }) => Promise<void> | void;\n};\n\n/**\n * ClickyExportDialog picks a format and a range, then downloads.\n *\n * It exists because the same choice as a menu was 16 rows — every format times\n * every range — which pushed everything else in that menu out of reach and\n * still truncated the one thing worth reading: what each range costs.\n */\nexport function ClickyExportDialog({\n  open,\n  onClose,\n  title = \"Export\",\n  formats,\n  scopes,\n  onDownload,\n  pendingContent,\n  allowCloseWhilePending = false,\n}: ClickyExportDialogProps) {\n  const [format, setFormat] = useState(formats[0]?.format);\n  const [scope, setScope] = useState(scopes[0]?.scope);\n  const [pending, setPending] = useState(false);\n  const [error, setError] = useState(\"\");\n\n  // Reopening starts from a clean slate: the error belongs to the attempt that\n  // produced it, not to the next one.\n  useEffect(() => {\n    if (open) setError(\"\");\n  }, [open]);\n\n  const activeScope = scopes.find((option) => option.scope === scope);\n\n  const download = async () => {\n    if (!format) return;\n    setPending(true);\n    setError(\"\");\n    try {\n      await onDownload({ format, scope });\n      onClose();\n    } catch (cause) {\n      setError(cause instanceof Error ? cause.message : \"The export failed\");\n    } finally {\n      setPending(false);\n    }\n  };\n\n  return (\n    <Modal\n      open={open}\n      onClose={onClose}\n      title={title}\n      size=\"lg\"\n      closeOnEsc\n      footer={\n        <div className=\"flex items-center justify-end gap-2\">\n          <Button variant=\"outline\" onClick={onClose} disabled={pending && !allowCloseWhilePending}>\n            {pending && allowCloseWhilePending ? \"Continue in background\" : \"Cancel\"}\n          </Button>\n          <Button\n            onClick={() => void download()}\n            loading={pending}\n            disabled={!format}\n          >\n            Download\n          </Button>\n        </div>\n      }\n    >\n      <div className=\"space-y-4\">\n        {pending && pendingContent}\n        {error && (\n          <div\n            role=\"alert\"\n            className=\"rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive\"\n          >\n            {error}\n          </div>\n        )}\n\n        {scopes.length > 1 ? (\n          <fieldset>\n            <legend className=\"mb-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n              Rows\n            </legend>\n            <div className=\"flex flex-wrap gap-2\">\n              {scopes.map((option) => (\n                <label\n                  key={option.scope ?? \"default\"}\n                  className={cn(\n                    \"cursor-pointer rounded-md border px-3 py-1.5 text-sm transition-colors\",\n                    option.scope === scope\n                      ? \"border-foreground/20 bg-accent text-accent-foreground\"\n                      : \"border-input hover:bg-accent hover:text-accent-foreground\",\n                  )}\n                >\n                  <input\n                    type=\"radio\"\n                    name=\"clicky-export-scope\"\n                    // Named explicitly: the input is visually hidden behind its\n                    // own styled label, so nothing else gives it a name.\n                    aria-label={option.label}\n                    className=\"sr-only\"\n                    checked={option.scope === scope}\n                    onChange={() => setScope(option.scope)}\n                  />\n                  {option.label}\n                </label>\n              ))}\n            </div>\n          </fieldset>\n        ) : (\n          scopes[0]?.label && (\n            <p className=\"text-sm text-muted-foreground\">{scopes[0].label}</p>\n          )\n        )}\n\n        <fieldset>\n          <legend className=\"mb-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground\">\n            Format\n          </legend>\n          <div className=\"grid gap-1 sm:grid-cols-2\">\n            {formats.map((option) => {\n              const note = activeScope?.note?.(option.format);\n              return (\n                <label\n                  key={option.format}\n                  className={cn(\n                    \"flex cursor-pointer items-start gap-2 rounded-md border px-3 py-2 text-left transition-colors\",\n                    option.format === format\n                      ? \"border-foreground/20 bg-accent text-accent-foreground\"\n                      : \"border-transparent hover:bg-accent hover:text-accent-foreground\",\n                  )}\n                >\n                  <input\n                    type=\"radio\"\n                    name=\"clicky-export-format\"\n                    aria-label={option.label}\n                    className=\"sr-only\"\n                    checked={option.format === format}\n                    onChange={() => setFormat(option.format)}\n                  />\n                  {option.icon && (\n                    <Icon\n                      icon={option.icon}\n                      className={cn(\n                        \"mt-0.5 shrink-0 text-sm\",\n                        option.iconClassName ?? \"text-muted-foreground\",\n                      )}\n                    />\n                  )}\n                  <span className=\"min-w-0\">\n                    <span className=\"block text-sm font-medium\">\n                      {option.label}\n                    </span>\n                    {option.description && (\n                      <span className=\"mt-0.5 block text-xs text-muted-foreground\">\n                        {option.description}\n                      </span>\n                    )}\n                    {note && (\n                      <span className=\"mt-0.5 block text-xs text-amber-700 [[data-theme=dark]_&]:text-amber-400\">\n                        {note}\n                      </span>\n                    )}\n                  </span>\n                </label>\n              );\n            })}\n          </div>\n        </fieldset>\n\n      </div>\n    </Modal>\n  );\n}\n"],"mappings":"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"}

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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"}