@corensystem/coren-ui 1.0.0-next.20260924.75108.887a9c2

package/dist/pages/wc3-pipeline-side-views.mjs

@@ -0,0 +1,998 @@
+import { Badge } from "../badge.mjs";
+import { HoverTooltip } from "../tooltip.mjs";
+import { Button } from "../button.mjs";
+import { Card } from "../card.mjs";
+import { Empty } from "../empty.mjs";
+import { ToggleGroup, ToggleGroupItem } from "../toggle-group.mjs";
+import { usePersistentState } from "../use-persistent-state.mjs";
+import { Combobox } from "../combobox.mjs";
+import { Filter as Filter$1, FilterCategory, FilterContent, FilterOption, FilterTrigger } from "../filter.mjs";
+import { DataTable, DataTableColumnHeader } from "../data-table.mjs";
+import { getObjectType } from "./wc3-ontology-data.mjs";
+import { Mono, Pane, TypeGlyphLabel, lineageNav } from "./wc3-lineage-shared.mjs";
+import { WC3_NODE_KINDS } from "./wc3-lineage-data.mjs";
+import { NodeKindBadge, NodeKindGlyph, PipelineGlyph, PortDot, PortLegend, WC3_NODE_CATEGORIES, WC3_PORT_TYPES, checkWire, kindConnectivity, kindOutputCols, kindsUsedIn, nodeKindLabel, replacePipeline, runPipeline } from "./wc3-pipeline-shared.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { ChevronDown, ChevronRight, LayoutGrid, List, Play, Workflow, XCircle } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/pages/wc3-pipeline-side-views.tsx
+/** A small bordered chip. Same shape as the products catalogue's file-local Chip. */
+function Chip({ children, title, onClick }) {
+	const className = "wwc:inline-flex wwc:items-center wwc:gap-1 wwc:rounded-md wwc:border wwc:border-border wwc:bg-muted/40 wwc:px-1.5 wwc:py-0.5 wwc:text-[10.5px] wwc:text-muted-foreground";
+	if (!onClick) return /* @__PURE__ */ jsx("span", {
+		className,
+		title,
+		children
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		title,
+		onClick: (e) => {
+			e.stopPropagation();
+			onClick();
+		},
+		className: cn(className, "wwc:transition-colors wwc:hover:border-primary/50 wwc:hover:text-primary"),
+		children
+	});
+}
+/**
+* A port side rendered as dots + type names, or an em dash when the side is empty.
+*
+* Keys are `<type>#<nth occurrence>` rather than the array index: no kind in the fixture carries two
+* ports of the same type on the same side, but the wire encoding is positional and `portPos` supports
+* N ports, so a future multi-port kind must not produce duplicate keys.
+*/
+function PortList({ types }) {
+	if (types.length === 0) return /* @__PURE__ */ jsx("span", {
+		className: "wwc:text-muted-foreground",
+		children: "—"
+	});
+	const seen = /* @__PURE__ */ new Map();
+	return /* @__PURE__ */ jsx("span", {
+		className: "wwc:flex wwc:flex-wrap wwc:items-center wwc:gap-x-2 wwc:gap-y-1",
+		children: types.map((type) => {
+			const nth = (seen.get(type) ?? 0) + 1;
+			seen.set(type, nth);
+			return /* @__PURE__ */ jsxs("span", {
+				className: "wwc:flex wwc:items-center wwc:gap-1 wwc:whitespace-nowrap wwc:text-xs wwc:text-foreground",
+				children: [/* @__PURE__ */ jsx(PortDot, { type }), type]
+			}, `${type}#${nth}`);
+		})
+	});
+}
+/** `kindOutputCols` as Mono chips — or the plain sentence, for the one kind that emits nothing. */
+function OutputSchema({ kindId }) {
+	const cols = kindOutputCols(kindId);
+	if (cols.length === 0) return /* @__PURE__ */ jsx("span", {
+		className: "wwc:text-xs wwc:text-muted-foreground",
+		children: "produces no rows"
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "wwc:flex wwc:flex-wrap wwc:gap-1",
+		children: cols.map((col) => /* @__PURE__ */ jsx(Chip, { children: /* @__PURE__ */ jsx(Mono, { children: col }) }, col))
+	});
+}
+/** The mode toggle, identical in both tabs so they cannot drift apart. */
+function ModeToggle({ mode, onModeChange }) {
+	return /* @__PURE__ */ jsxs(ToggleGroup, {
+		type: "single",
+		value: mode,
+		onValueChange: (next) => {
+			if (next) onModeChange(next);
+		},
+		variant: "outline",
+		size: "sm",
+		children: [/* @__PURE__ */ jsx(ToggleGroupItem, {
+			value: "table",
+			"aria-label": "Table view",
+			title: "Table view",
+			children: /* @__PURE__ */ jsx(List, { className: "wwc:h-3.5 wwc:w-3.5" })
+		}), /* @__PURE__ */ jsx(ToggleGroupItem, {
+			value: "cards",
+			"aria-label": "Card view",
+			title: "Card view",
+			children: /* @__PURE__ */ jsx(LayoutGrid, { className: "wwc:h-3.5 wwc:w-3.5" })
+		})]
+	});
+}
+/** Shown by BOTH the table's `emptyMessage` and the grid callback, so the two modes cannot drift. */
+function FilteredEmpty({ noun, onClear }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "wwc:flex wwc:flex-col wwc:items-center wwc:gap-2 wwc:py-8 wwc:text-center",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "wwc:text-sm wwc:text-muted-foreground",
+			children: `No ${noun} matches the search and filter.`
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			size: "sm",
+			onClick: onClear,
+			children: "Clear the filter"
+		})]
+	});
+}
+/**
+* The four refusals, produced by CALLING {@link checkWire} on a throwaway pipeline built to trip
+* exactly one guard each — not by restating them.
+*
+* That matters: the strings are the shared module's single source of truth (they include the
+* prototype's ungrammatical "a Objects", kept verbatim by decision), and a rules panel that
+* paraphrased them would give the perspective two vocabularies for the same rule. This way the panel
+* physically cannot drift from the canvas banner.
+*
+* The mismatch example is Geometry → Objects into a Clash filter, which is the pair captured live in
+* the prototype.
+*/
+const ruleNode = (id, kind) => ({
+	id,
+	kind,
+	label: nodeKindLabel(kind),
+	x: 0,
+	y: 0,
+	params: {}
+});
+const RULES_PIPELINE = {
+	id: "pipe_rules_probe",
+	name: "",
+	icon: "pipeline",
+	dropRev: 1,
+	desc: "",
+	nodes: [
+		ruleNode("geo", "src_ifc"),
+		ruleNode("clash", "tx_clash"),
+		ruleNode("uni", "tx_uniclass"),
+		ruleNode("map", "bhom_map")
+	],
+	wires: [{
+		id: "w1",
+		from: "map:0",
+		to: "uni:0"
+	}],
+	runs: []
+};
+const ruleReason = (from, to) => {
+	const check = checkWire(RULES_PIPELINE, from, to);
+	return check.ok ? "" : check.reason;
+};
+const WIRING_RULES = [
+	{
+		title: "A node cannot feed itself",
+		reason: ruleReason("clash:0", "clash:0")
+	},
+	{
+		title: "Port types must match exactly",
+		reason: ruleReason("geo:0", "clash:0")
+	},
+	{
+		title: "One wire per input",
+		reason: ruleReason("clash:0", "uni:0")
+	},
+	{
+		title: "The graph stays acyclic",
+		reason: ruleReason("uni:0", "map:0")
+	}
+];
+function WiringRulesPanel() {
+	return /* @__PURE__ */ jsxs(Card, {
+		className: "wwc:flex wwc:flex-col wwc:gap-3 wwc:rounded-lg wwc:p-4",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:flex-wrap wwc:items-center wwc:justify-between wwc:gap-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "wwc:text-sm wwc:font-semibold",
+					children: "Wiring rules"
+				}), /* @__PURE__ */ jsx(PortLegend, {})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "wwc:text-xs wwc:text-muted-foreground",
+				children: "A wire is refused for exactly these four reasons, in this order. Type checking is plain equality — there is no subtyping and no coercion. An input takes exactly one wire; an output fans out without limit."
+			}),
+			/* @__PURE__ */ jsx("ol", {
+				className: "wwc:grid wwc:gap-2 wwc:sm:grid-cols-2",
+				children: WIRING_RULES.map((rule, i) => /* @__PURE__ */ jsxs("li", {
+					className: "wwc:flex wwc:gap-2 wwc:rounded-md wwc:bg-muted/40 wwc:p-2",
+					children: [/* @__PURE__ */ jsx(XCircle, { className: "wwc:mt-0.5 wwc:h-3.5 wwc:w-3.5 wwc:shrink-0 wwc:text-amber-600" }), /* @__PURE__ */ jsxs("span", {
+						className: "wwc:min-w-0",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "wwc:block wwc:text-xs wwc:font-medium",
+							children: `${i + 1}. ${rule.title}`
+						}), /* @__PURE__ */ jsx("span", {
+							className: "wwc:block wwc:text-[11px] wwc:text-muted-foreground",
+							children: rule.reason
+						})]
+					})]
+				}, rule.title))
+			})
+		]
+	});
+}
+/** Distinct port types a kind touches on EITHER side — what the "Port type" facet matches on. */
+const kindPortTypes = (kind) => [.../* @__PURE__ */ new Set([...kind.inPorts, ...kind.outPorts])];
+const kindSearchText = (row) => [
+	row.id,
+	row.kind.label,
+	row.kind.cat,
+	kindPortTypes(row.kind).join(" "),
+	kindOutputCols(row.id).join(" ")
+].join(" ");
+/** Category counts off the fixture — the palette is the catalogue of kinds, not of pipelines. */
+const CATEGORY_COUNTS = new Map(WC3_NODE_CATEGORIES.map((cat) => [cat, Object.values(WC3_NODE_KINDS).filter((k) => k.cat === cat).length]));
+const PORT_TYPE_COUNTS = new Map(WC3_PORT_TYPES.map((type) => [type, Object.values(WC3_NODE_KINDS).filter((k) => kindPortTypes(k).includes(type)).length]));
+function RefChips({ refs, onNavigate }) {
+	if (!refs || refs.length === 0) return /* @__PURE__ */ jsx("span", {
+		className: "wwc:text-muted-foreground",
+		children: "—"
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "wwc:flex wwc:flex-wrap wwc:gap-1",
+		children: refs.map((otId) => /* @__PURE__ */ jsx(Chip, {
+			title: `Open ${getObjectType(otId)?.displayName ?? otId} in the Ontology perspective`,
+			onClick: onNavigate ? () => onNavigate(lineageNav.objectType(otId)) : void 0,
+			children: /* @__PURE__ */ jsx(TypeGlyphLabel, { type: getObjectType(otId) })
+		}, otId))
+	});
+}
+function UsedInChips({ usedIn, onNavigate }) {
+	if (usedIn.length === 0) return /* @__PURE__ */ jsx("span", {
+		className: "wwc:text-xs wwc:text-muted-foreground",
+		children: "no pipeline"
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "wwc:flex wwc:flex-wrap wwc:gap-1",
+		children: usedIn.map((p) => /* @__PURE__ */ jsxs(Chip, {
+			title: `Open ${p.name}`,
+			onClick: onNavigate ? () => onNavigate(lineageNav.pipeline(p.id)) : void 0,
+			children: [/* @__PURE__ */ jsx(PipelineGlyph, {
+				pipeline: p,
+				className: "wwc:h-3 wwc:w-3 wwc:shrink-0"
+			}), p.name]
+		}, p.id))
+	});
+}
+function KindCard({ row, onNavigate }) {
+	const { kind } = row;
+	return /* @__PURE__ */ jsxs(Card, {
+		className: "wwc:flex wwc:flex-col wwc:gap-2 wwc:rounded-lg wwc:p-3",
+		"data-node-kind": row.id,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:items-start wwc:gap-2",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "wwc:flex wwc:h-7 wwc:w-7 wwc:shrink-0 wwc:items-center wwc:justify-center wwc:rounded-md wwc:border wwc:border-border wwc:bg-muted/50",
+						children: /* @__PURE__ */ jsx(NodeKindGlyph, { kindId: row.id })
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "wwc:min-w-0 wwc:flex-1",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "wwc:block wwc:truncate wwc:text-sm wwc:font-semibold",
+							children: kind.label
+						}), /* @__PURE__ */ jsx(Mono, { children: row.id })]
+					}),
+					/* @__PURE__ */ jsx(NodeKindBadge, { kindId: row.id })
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:flex-wrap wwc:items-center wwc:gap-x-2 wwc:gap-y-1 wwc:text-xs wwc:text-muted-foreground",
+				children: [
+					"in ",
+					/* @__PURE__ */ jsx(PortList, { types: kind.inPorts }),
+					/* @__PURE__ */ jsx("span", {
+						className: "wwc:text-border",
+						children: "→"
+					}),
+					"out ",
+					/* @__PURE__ */ jsx(PortList, { types: kind.outPorts })
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:flex-wrap wwc:items-center wwc:gap-1 wwc:text-xs wwc:text-muted-foreground",
+				children: ["emits ", /* @__PURE__ */ jsx(OutputSchema, { kindId: row.id })]
+			}),
+			kind.refs && kind.refs.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:flex-wrap wwc:items-center wwc:gap-1 wwc:text-xs wwc:text-muted-foreground",
+				children: ["references ", /* @__PURE__ */ jsx(RefChips, {
+					refs: kind.refs,
+					onNavigate
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:mt-auto wwc:flex wwc:flex-wrap wwc:items-center wwc:gap-1 wwc:pt-1 wwc:text-xs wwc:text-muted-foreground",
+				children: ["used in ", /* @__PURE__ */ jsx(UsedInChips, {
+					usedIn: row.usedIn,
+					onNavigate
+				})]
+			})
+		]
+	});
+}
+function PipelinePaletteView({ pipelines, onNavigate }) {
+	const [filters, setFilters] = useState({});
+	const [query, setQuery] = useState("");
+	const [mode, setMode] = usePersistentState("wc3.pipelines.palette.view", "cards");
+	const usage = useMemo(() => kindsUsedIn(pipelines), [pipelines]);
+	const rows = useMemo(() => Object.entries(WC3_NODE_KINDS).map(([id, kind]) => ({
+		id,
+		kind,
+		usedIn: usage.get(id) ?? []
+	})), [usage]);
+	const usedCount = useMemo(() => rows.filter((r) => r.usedIn.length > 0).length, [rows]);
+	const clearAll = useCallback(() => {
+		setFilters({});
+		setQuery("");
+	}, []);
+	const data = useMemo(() => {
+		const needle = query.trim().toLowerCase();
+		return rows.filter((row) => {
+			if (needle && !kindSearchText(row).toLowerCase().includes(needle)) return false;
+			const cats = filters.category;
+			if (cats && cats.length > 0 && !cats.includes(row.kind.cat)) return false;
+			const ports = filters.portType;
+			if (ports && ports.length > 0 && !ports.some((t) => kindPortTypes(row.kind).includes(t))) return false;
+			const usedFacet = filters.usage;
+			if (usedFacet && usedFacet.length > 0 && !usedFacet.includes(row.usedIn.length > 0 ? "used" : "unused")) return false;
+			return true;
+		});
+	}, [
+		filters,
+		query,
+		rows
+	]);
+	const columns = useMemo(() => [
+		{
+			id: "kind",
+			accessorFn: (row) => row.kind.label,
+			header: ({ column }) => /* @__PURE__ */ jsx(DataTableColumnHeader, {
+				column,
+				title: "Kind"
+			}),
+			enableHiding: false,
+			cell: ({ row }) => /* @__PURE__ */ jsxs("span", {
+				className: "wwc:flex wwc:items-center wwc:gap-2 wwc:whitespace-nowrap",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "wwc:flex wwc:h-6 wwc:w-6 wwc:shrink-0 wwc:items-center wwc:justify-center wwc:rounded-md wwc:border wwc:border-border wwc:bg-muted/50",
+					children: /* @__PURE__ */ jsx(NodeKindGlyph, { kindId: row.original.id })
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "wwc:min-w-0",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "wwc:block wwc:truncate wwc:font-medium",
+						children: row.original.kind.label
+					}), /* @__PURE__ */ jsx(Mono, { children: row.original.id })]
+				})]
+			})
+		},
+		{
+			id: "category",
+			accessorFn: (row) => row.kind.cat,
+			header: ({ column }) => /* @__PURE__ */ jsx(DataTableColumnHeader, {
+				column,
+				title: "Category"
+			}),
+			cell: ({ row }) => /* @__PURE__ */ jsx(NodeKindBadge, { kindId: row.original.id })
+		},
+		{
+			id: "in ports",
+			accessorFn: (row) => row.kind.inPorts.join(", "),
+			header: "In ports",
+			cell: ({ row }) => /* @__PURE__ */ jsx(PortList, { types: row.original.kind.inPorts })
+		},
+		{
+			id: "out ports",
+			accessorFn: (row) => row.kind.outPorts.join(", "),
+			header: "Out ports",
+			cell: ({ row }) => /* @__PURE__ */ jsx(PortList, { types: row.original.kind.outPorts })
+		},
+		{
+			id: "output schema",
+			accessorFn: (row) => kindOutputCols(row.id).join(", "),
+			header: "Output schema",
+			cell: ({ row }) => /* @__PURE__ */ jsx(OutputSchema, { kindId: row.original.id })
+		},
+		{
+			id: "used in",
+			accessorFn: (row) => row.usedIn.length,
+			header: ({ column }) => /* @__PURE__ */ jsx(DataTableColumnHeader, {
+				column,
+				title: "Used in"
+			}),
+			cell: ({ row }) => /* @__PURE__ */ jsx(UsedInChips, {
+				usedIn: row.original.usedIn,
+				onNavigate
+			})
+		},
+		{
+			id: "references",
+			accessorFn: (row) => (row.kind.refs ?? []).join(", "),
+			header: "References",
+			cell: ({ row }) => /* @__PURE__ */ jsx(RefChips, {
+				refs: row.original.kind.refs,
+				onNavigate
+			})
+		},
+		{
+			id: "connects to",
+			accessorFn: (row) => {
+				const { upstream, downstream } = kindConnectivity(row.id);
+				return upstream.length + downstream.length;
+			},
+			header: ({ column }) => /* @__PURE__ */ jsx(DataTableColumnHeader, {
+				column,
+				title: "Connects to"
+			}),
+			cell: ({ row }) => {
+				const { upstream, downstream } = kindConnectivity(row.original.id);
+				const list = (ids) => ids.length ? ids.map(nodeKindLabel).join(", ") : "nothing";
+				return /* @__PURE__ */ jsx(HoverTooltip, {
+					content: /* @__PURE__ */ jsxs("span", {
+						className: "wwc:flex wwc:flex-col wwc:gap-0.5",
+						children: [/* @__PURE__ */ jsx("span", { children: `upstream: ${list(upstream)}` }), /* @__PURE__ */ jsx("span", { children: `downstream: ${list(downstream)}` })]
+					}),
+					children: /* @__PURE__ */ jsx("span", {
+						className: "wwc:whitespace-nowrap wwc:tabular-nums",
+						children: `${upstream.length} up · ${downstream.length} down`
+					})
+				});
+			}
+		}
+	], [onNavigate]);
+	const renderGrid = useCallback((gridRows) => {
+		if (gridRows.length === 0) return /* @__PURE__ */ jsx(FilteredEmpty, {
+			noun: "node kind",
+			onClear: clearAll
+		});
+		const byCategory = /* @__PURE__ */ new Map();
+		for (const row of gridRows) {
+			const list = byCategory.get(row.original.kind.cat);
+			if (list) list.push(row);
+			else byCategory.set(row.original.kind.cat, [row]);
+		}
+		return /* @__PURE__ */ jsx("div", {
+			className: "wwc:flex wwc:flex-col wwc:gap-5",
+			"data-node-kind-palette": gridRows.length,
+			children: WC3_NODE_CATEGORIES.filter((cat) => byCategory.has(cat)).map((cat) => {
+				const group = byCategory.get(cat) ?? [];
+				return /* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:flex-col wwc:gap-2",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:items-center wwc:gap-2 wwc:text-xs wwc:font-semibold wwc:uppercase wwc:tracking-wide wwc:text-muted-foreground",
+						children: [cat, /* @__PURE__ */ jsx(Badge, {
+							variant: "neutralSoft",
+							children: group.length
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "wwc:grid wwc:gap-3 wwc:sm:grid-cols-2 wwc:xl:grid-cols-3",
+						children: group.map((row) => /* @__PURE__ */ jsx(KindCard, {
+							row: row.original,
+							onNavigate
+						}, row.id))
+					})]
+				}, cat);
+			})
+		});
+	}, [clearAll, onNavigate]);
+	return /* @__PURE__ */ jsxs(Pane, {
+		flush: true,
+		children: [
+			/* @__PURE__ */ jsxs("p", {
+				className: "wwc:pt-4 wwc:text-xs wwc:text-muted-foreground",
+				children: [
+					"The node kinds a pipeline can be built from — ",
+					Object.keys(WC3_NODE_KINDS).length,
+					" kinds across",
+					" ",
+					WC3_NODE_CATEGORIES.length,
+					" categories, with their typed ports, their output schema and the pipelines that use them. Reference only: nodes are added on a pipeline's own canvas, so exactly one surface edits a graph."
+				]
+			}),
+			/* @__PURE__ */ jsx(WiringRulesPanel, {}),
+			/* @__PURE__ */ jsx(Filter$1, {
+				value: filters,
+				onChange: setFilters,
+				children: /* @__PURE__ */ jsx(DataTable, {
+					columns,
+					data,
+					search: query,
+					onSearchChange: setQuery,
+					searchPlaceholder: "Filter node kinds…",
+					recordLabel: "node kind",
+					recordLabelPlural: "node kinds",
+					pageSize: 25,
+					flushToolbar: true,
+					getRowId: (row) => row.id,
+					showColumnToggle: mode === "table",
+					initialColumnVisibility: { "connects to": false },
+					renderGrid: mode === "cards" ? renderGrid : void 0,
+					emptyMessage: /* @__PURE__ */ jsx(FilteredEmpty, {
+						noun: "node kind",
+						onClear: clearAll
+					}),
+					filterChipLabel: (category, value) => {
+						if (category === "usage") return value === "used" ? "Used" : "Unused";
+						return value;
+					},
+					toolbarExtra: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						/* @__PURE__ */ jsx(ModeToggle, {
+							mode,
+							onModeChange: setMode
+						}),
+						/* @__PURE__ */ jsx(FilterTrigger, {}),
+						/* @__PURE__ */ jsxs(FilterContent, { children: [
+							/* @__PURE__ */ jsx(FilterCategory, {
+								value: "category",
+								label: "Category",
+								children: WC3_NODE_CATEGORIES.map((cat) => /* @__PURE__ */ jsx(FilterOption, {
+									value: cat,
+									children: `${cat} (${CATEGORY_COUNTS.get(cat) ?? 0})`
+								}, cat))
+							}),
+							/* @__PURE__ */ jsx(FilterCategory, {
+								value: "portType",
+								label: "Port type",
+								children: WC3_PORT_TYPES.map((type) => /* @__PURE__ */ jsx(FilterOption, {
+									value: type,
+									children: `${type} (${PORT_TYPE_COUNTS.get(type) ?? 0})`
+								}, type))
+							}),
+							/* @__PURE__ */ jsxs(FilterCategory, {
+								value: "usage",
+								label: "Usage",
+								children: [/* @__PURE__ */ jsx(FilterOption, {
+									value: "used",
+									children: `Used (${usedCount})`
+								}), /* @__PURE__ */ jsx(FilterOption, {
+									value: "unused",
+									children: `Unused (${rows.length - usedCount})`
+								})]
+							})
+						] })
+					] })
+				})
+			})
+		]
+	});
+}
+/**
+* Seconds-of-day for a `Wc3PipelineRun.at` label.
+*
+* `at` is `toLocaleTimeString()` — a wall clock and nothing else, with no date and no epoch anywhere
+* on the record. Every run in the log was made in this session, so the clock IS a total order; the
+* one case this gets wrong is a session spanning midnight, which is not worth widening the fixture's
+* run shape for. An unparseable label sorts last rather than throwing.
+*/
+function atSeconds(at) {
+	const m = /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s*(AM|PM)?/i.exec(at.trim());
+	if (!m) return -1;
+	let hours = Number(m[1]);
+	const meridiem = m[4]?.toUpperCase();
+	if (meridiem === "PM" && hours < 12) hours += 12;
+	if (meridiem === "AM" && hours === 12) hours = 0;
+	return hours * 3600 + Number(m[2]) * 60 + Number(m[3] ?? 0);
+}
+const runRows = (pipelines) => pipelines.flatMap((pipeline) => pipeline.runs.map((run, seq) => ({
+	key: `${pipeline.id}:${run.id}`,
+	pipeline,
+	run,
+	seq,
+	rows: Object.values(run.stats).reduce((total, n) => total + n, 0)
+}))).sort((a, b) => atSeconds(b.run.at) - atSeconds(a.run.at) || b.seq - a.seq);
+const runSearchText = (row) => [
+	row.pipeline.name,
+	row.pipeline.id,
+	row.run.id,
+	row.run.at,
+	`rev ${row.run.rev}`,
+	row.run.summary.join(" ")
+].join(" ");
+/** Lineage → Workflow, the prototype's own affordance on every run-log entry. */
+const LINEAGE_WORKFLOW = {
+	perspectiveId: "lineage",
+	tabId: "workflow"
+};
+function SummaryLines({ summary }) {
+	if (summary.length === 0) return /* @__PURE__ */ jsx("span", {
+		className: "wwc:text-xs wwc:text-muted-foreground",
+		children: "no sink effects"
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "wwc:flex wwc:flex-col wwc:gap-0.5",
+		children: summary.map((line) => /* @__PURE__ */ jsx("span", {
+			className: "wwc:text-xs wwc:text-foreground",
+			children: `· ${line}`
+		}, line))
+	});
+}
+/** The numbered topological order with each node's row count — the only place order + stats show. */
+function RunNodeList({ row }) {
+	const { pipeline, run } = row;
+	return /* @__PURE__ */ jsx("ol", {
+		className: "wwc:flex wwc:flex-col wwc:gap-1 wwc:p-4",
+		children: run.order.map((nodeId, i) => {
+			const node = pipeline.nodes.find((n) => n.id === nodeId);
+			return /* @__PURE__ */ jsxs("li", {
+				className: "wwc:flex wwc:items-center wwc:gap-2 wwc:text-xs",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "wwc:w-5 wwc:shrink-0 wwc:text-right wwc:tabular-nums wwc:text-muted-foreground",
+						children: i + 1
+					}),
+					node ? /* @__PURE__ */ jsx(NodeKindGlyph, { kindId: node.kind }) : null,
+					/* @__PURE__ */ jsx("span", {
+						className: "wwc:min-w-0 wwc:flex-1 wwc:truncate",
+						children: node?.label ?? nodeId
+					}),
+					node ? /* @__PURE__ */ jsx(Mono, { children: nodeKindLabel(node.kind) }) : /* @__PURE__ */ jsx(Mono, { children: "deleted" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "wwc:w-20 wwc:shrink-0 wwc:text-right wwc:tabular-nums",
+						children: `${run.stats[nodeId] ?? 0} rows`
+					})
+				]
+			}, nodeId);
+		})
+	});
+}
+function RunCard({ row, onNavigate }) {
+	const { pipeline, run } = row;
+	return /* @__PURE__ */ jsxs(Card, {
+		className: "wwc:flex wwc:flex-col wwc:gap-2 wwc:rounded-lg wwc:p-3",
+		"data-pipeline-run": row.key,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:items-start wwc:gap-2",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "wwc:flex wwc:h-7 wwc:w-7 wwc:shrink-0 wwc:items-center wwc:justify-center wwc:rounded-md wwc:border wwc:border-border wwc:bg-muted/50",
+						children: /* @__PURE__ */ jsx(PipelineGlyph, { pipeline })
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "wwc:min-w-0 wwc:flex-1",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "wwc:block wwc:truncate wwc:text-sm wwc:font-semibold",
+							children: pipeline.name
+						}), /* @__PURE__ */ jsx(Mono, { children: `${run.id} · ${run.at} · rev ${run.rev}` })]
+					}),
+					/* @__PURE__ */ jsx(Badge, {
+						variant: run.summary.length > 0 ? "successSoft" : "neutralSoft",
+						children: run.summary.length > 0 ? `${run.summary.length} sink effects` : "no sink effects"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "wwc:text-xs wwc:text-muted-foreground",
+				children: `${run.order.length} nodes · ${row.rows} rows produced`
+			}),
+			/* @__PURE__ */ jsx(SummaryLines, { summary: run.summary }),
+			onNavigate && /* @__PURE__ */ jsxs("div", {
+				className: "wwc:mt-auto wwc:flex wwc:items-center wwc:gap-1.5 wwc:pt-1",
+				children: [
+					/* @__PURE__ */ jsxs(Button, {
+						variant: "ghost",
+						size: "sm",
+						onClick: () => onNavigate(LINEAGE_WORKFLOW),
+						children: [/* @__PURE__ */ jsx(Workflow, {}), "lineage →"]
+					}),
+					/* @__PURE__ */ jsx("span", { className: "wwc:flex-1" }),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "sm",
+						onClick: () => onNavigate(lineageNav.pipeline(pipeline.id)),
+						children: "Open pipeline"
+					})
+				]
+			})
+		]
+	});
+}
+/**
+* First paint, and the honest one: all three seeded pipelines ship `runs: []`, so the fixture holds
+* ZERO pipeline runs. (WC3_ACTION_RUNS has two entries, but those are action-type runs and belong to
+* Lineage → Workflow, not here.)
+*
+* The copy deliberately does NOT repeat the prototype's promise that sinks "upsert instances that
+* immediately appear in the Twin and the Ontology tables". There is no instance store in this port —
+* a run produces a run record and nothing else — so that sentence would be a lie.
+*/
+function RunsEmptyState({ pipelines, onRun, onNavigate }) {
+	return /* @__PURE__ */ jsx(Empty, {
+		icon: /* @__PURE__ */ jsx(Play, { className: "wwc:h-8 wwc:w-8" }),
+		title: "No pipeline runs yet",
+		description: `None of the ${pipelines.length} pipelines has been run in this session, and the fixture ships no run history. Running one executes its nodes in topological order and records what each node produced — the results appear here and as row counts on the pipeline's canvas.`,
+		action: /* @__PURE__ */ jsxs("div", {
+			className: "wwc:flex wwc:flex-col wwc:items-center wwc:gap-2",
+			children: [/* @__PURE__ */ jsx(Combobox, {
+				options: pipelines.map((p) => ({
+					value: p.id,
+					label: p.name,
+					icon: /* @__PURE__ */ jsx(PipelineGlyph, { pipeline: p })
+				})),
+				value: "",
+				onValueChange: (id) => {
+					if (id) onRun(id);
+				},
+				placeholder: "Run a pipeline…",
+				searchPlaceholder: "Search pipelines…",
+				emptyMessage: "No pipeline to run.",
+				className: "wwc:w-[280px]",
+				popoverClassName: "wwc:w-[280px]"
+			}), onNavigate && /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				onClick: () => onNavigate({
+					perspectiveId: "pipelines",
+					tabId: "pipelines"
+				}),
+				children: "Back to the pipeline list"
+			})]
+		})
+	});
+}
+function PipelineRunsView({ pipelines, onPipelinesChange, onNavigate }) {
+	const [filters, setFilters] = useState({});
+	const [query, setQuery] = useState("");
+	const [mode, setMode] = usePersistentState("wc3.pipelines.runs.view", "table");
+	const all = useMemo(() => runRows(pipelines), [pipelines]);
+	const clearAll = useCallback(() => {
+		setFilters({});
+		setQuery("");
+	}, []);
+	const runOne = useCallback((pipelineId) => {
+		const target = pipelines.find((p) => p.id === pipelineId);
+		if (!target) return;
+		onPipelinesChange(replacePipeline(pipelines, runPipeline(target).pipeline));
+	}, [pipelines, onPipelinesChange]);
+	const data = useMemo(() => {
+		const needle = query.trim().toLowerCase();
+		return all.filter((row) => {
+			if (needle && !runSearchText(row).toLowerCase().includes(needle)) return false;
+			const pipes = filters.pipeline;
+			if (pipes && pipes.length > 0 && !pipes.includes(row.pipeline.id)) return false;
+			const outcome = filters.outcome;
+			if (outcome && outcome.length > 0 && !outcome.includes(row.run.summary.length > 0 ? "sinks" : "none")) return false;
+			const revs = filters.rev;
+			if (revs && revs.length > 0 && !revs.includes(String(row.run.rev))) return false;
+			return true;
+		});
+	}, [
+		all,
+		filters,
+		query
+	]);
+	const pipelineCounts = useMemo(() => {
+		const counts = /* @__PURE__ */ new Map();
+		for (const row of all) counts.set(row.pipeline.id, (counts.get(row.pipeline.id) ?? 0) + 1);
+		return counts;
+	}, [all]);
+	const sinkCount = useMemo(() => all.filter((row) => row.run.summary.length > 0).length, [all]);
+	const revs = useMemo(() => [...new Set(all.map((row) => row.run.rev))].sort((a, b) => a - b), [all]);
+	const columns = useMemo(() => [
+		{
+			id: "details",
+			header: "",
+			enableSorting: false,
+			enableHiding: false,
+			meta: { cellClassName: "wwc:w-px wwc:max-w-none wwc:whitespace-nowrap" },
+			cell: ({ row }) => /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				icon: true,
+				"aria-label": row.getIsExpanded() ? "Hide node order" : "Show node order",
+				tooltip: row.getIsExpanded() ? "Hide node order" : "Show node order",
+				onClick: row.getToggleExpandedHandler(),
+				children: row.getIsExpanded() ? /* @__PURE__ */ jsx(ChevronDown, {}) : /* @__PURE__ */ jsx(ChevronRight, {})
+			})
+		},
+		{
+			id: "pipeline",
+			accessorFn: (row) => row.pipeline.name,
+			header: ({ column }) => /* @__PURE__ */ jsx(DataTableColumnHeader, {
+				column,
+				title: "Pipeline"
+			}),
+			enableHiding: false,
+			cell: ({ row }) => /* @__PURE__ */ jsxs("span", {
+				className: "wwc:flex wwc:items-center wwc:gap-2 wwc:whitespace-nowrap",
+				children: [/* @__PURE__ */ jsx(PipelineGlyph, { pipeline: row.original.pipeline }), onNavigate ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => onNavigate(lineageNav.pipeline(row.original.pipeline.id)),
+					className: "wwc:min-w-0 wwc:truncate wwc:text-left wwc:font-medium wwc:underline wwc:underline-offset-2 wwc:transition-colors wwc:hover:text-primary",
+					children: row.original.pipeline.name
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "wwc:min-w-0 wwc:truncate wwc:font-medium",
+					children: row.original.pipeline.name
+				})]
+			})
+		},
+		{
+			id: "run id",
+			accessorFn: (row) => row.run.id,
+			header: "Run id",
+			cell: ({ row }) => /* @__PURE__ */ jsx(Mono, { children: row.original.run.id })
+		},
+		{
+			id: "at",
+			accessorFn: (row) => atSeconds(row.run.at),
+			header: ({ column }) => /* @__PURE__ */ jsx(DataTableColumnHeader, {
+				column,
+				title: "At"
+			}),
+			cell: ({ row }) => /* @__PURE__ */ jsx("span", {
+				className: "wwc:whitespace-nowrap",
+				children: row.original.run.at
+			})
+		},
+		{
+			id: "drop rev",
+			accessorFn: (row) => row.run.rev,
+			header: ({ column }) => /* @__PURE__ */ jsx(DataTableColumnHeader, {
+				column,
+				title: "Drop rev"
+			}),
+			cell: ({ row }) => /* @__PURE__ */ jsx(Mono, { children: `rev ${row.original.run.rev}` })
+		},
+		{
+			id: "nodes",
+			accessorFn: (row) => row.run.order.length,
+			header: ({ column }) => /* @__PURE__ */ jsx(DataTableColumnHeader, {
+				column,
+				title: "Nodes"
+			}),
+			meta: {
+				headerClassName: "wwc:text-right",
+				cellClassName: "wwc:text-right wwc:tabular-nums"
+			},
+			cell: ({ row }) => row.original.run.order.length
+		},
+		{
+			id: "rows",
+			accessorFn: (row) => row.rows,
+			header: ({ column }) => /* @__PURE__ */ jsx(DataTableColumnHeader, {
+				column,
+				title: "Rows"
+			}),
+			meta: {
+				headerClassName: "wwc:text-right",
+				cellClassName: "wwc:text-right wwc:tabular-nums"
+			},
+			cell: ({ row }) => row.original.rows
+		},
+		{
+			id: "sinks",
+			accessorFn: (row) => row.run.summary.length,
+			header: ({ column }) => /* @__PURE__ */ jsx(DataTableColumnHeader, {
+				column,
+				title: "Sinks"
+			}),
+			cell: ({ row }) => row.original.run.summary.length === 0 ? /* @__PURE__ */ jsx("span", {
+				className: "wwc:text-muted-foreground",
+				children: "no sink effects"
+			}) : /* @__PURE__ */ jsx(HoverTooltip, {
+				content: /* @__PURE__ */ jsx(SummaryLines, { summary: row.original.run.summary }),
+				children: /* @__PURE__ */ jsx("span", {
+					className: "wwc:tabular-nums",
+					children: row.original.run.summary.length
+				})
+			})
+		},
+		{
+			id: "actions",
+			header: "",
+			enableSorting: false,
+			enableHiding: false,
+			meta: { cellClassName: "wwc:w-px wwc:max-w-none wwc:whitespace-nowrap" },
+			cell: ({ row }) => onNavigate ? /* @__PURE__ */ jsxs("span", {
+				className: "wwc:flex wwc:items-center wwc:gap-1",
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					icon: true,
+					"aria-label": "Open the workflow lineage",
+					tooltip: "lineage →",
+					onClick: () => onNavigate(LINEAGE_WORKFLOW),
+					children: /* @__PURE__ */ jsx(Workflow, {})
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					icon: true,
+					"aria-label": `Open ${row.original.pipeline.name}`,
+					tooltip: "Open pipeline",
+					onClick: () => onNavigate(lineageNav.pipeline(row.original.pipeline.id)),
+					children: /* @__PURE__ */ jsx(Play, {})
+				})]
+			}) : null
+		}
+	], [onNavigate]);
+	const renderGrid = useCallback((gridRows) => {
+		if (gridRows.length === 0) return /* @__PURE__ */ jsx(FilteredEmpty, {
+			noun: "run",
+			onClear: clearAll
+		});
+		return /* @__PURE__ */ jsx("div", {
+			className: "wwc:grid wwc:gap-3 wwc:sm:grid-cols-2 wwc:xl:grid-cols-3",
+			"data-pipeline-runs": gridRows.length,
+			children: gridRows.map((row) => /* @__PURE__ */ jsx(RunCard, {
+				row: row.original,
+				onNavigate
+			}, row.id))
+		});
+	}, [clearAll, onNavigate]);
+	if (all.length === 0) return /* @__PURE__ */ jsx(Pane, { children: /* @__PURE__ */ jsx(RunsEmptyState, {
+		pipelines,
+		onRun: runOne,
+		onNavigate
+	}) });
+	return /* @__PURE__ */ jsxs(Pane, {
+		flush: true,
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "wwc:pt-4 wwc:text-xs wwc:text-muted-foreground",
+			children: "Every pipeline run made in this session, newest first. A run executes its nodes in topological order and records what each one produced; expand a row for that order and its per-node row counts. Runs are held on the pipeline record and capped at 12 each — nothing survives a reload."
+		}), /* @__PURE__ */ jsx(Filter$1, {
+			value: filters,
+			onChange: setFilters,
+			children: /* @__PURE__ */ jsx(DataTable, {
+				columns,
+				data,
+				search: query,
+				onSearchChange: setQuery,
+				searchPlaceholder: "Filter runs…",
+				recordLabel: "run",
+				recordLabelPlural: "runs",
+				pageSize: 25,
+				flushToolbar: true,
+				getRowId: (row) => row.key,
+				showColumnToggle: mode === "table",
+				getRowCanExpand: (row) => row.original.run.order.length > 0,
+				renderSubComponent: ({ row }) => /* @__PURE__ */ jsx(RunNodeList, { row: row.original }),
+				renderGrid: mode === "cards" ? renderGrid : void 0,
+				emptyMessage: /* @__PURE__ */ jsx(FilteredEmpty, {
+					noun: "run",
+					onClear: clearAll
+				}),
+				filterChipLabel: (category, value) => {
+					if (category === "pipeline") return pipelines.find((p) => p.id === value)?.name ?? value;
+					if (category === "outcome") return value === "sinks" ? "Has sink effects" : "No sink effects";
+					if (category === "rev") return `rev ${value}`;
+					return value;
+				},
+				toolbarExtra: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx(ModeToggle, {
+						mode,
+						onModeChange: setMode
+					}),
+					/* @__PURE__ */ jsx(FilterTrigger, {}),
+					/* @__PURE__ */ jsxs(FilterContent, { children: [
+						/* @__PURE__ */ jsx(FilterCategory, {
+							value: "pipeline",
+							label: "Pipeline",
+							children: pipelines.map((p) => /* @__PURE__ */ jsx(FilterOption, {
+								value: p.id,
+								children: `${p.name} (${pipelineCounts.get(p.id) ?? 0})`
+							}, p.id))
+						}),
+						/* @__PURE__ */ jsxs(FilterCategory, {
+							value: "outcome",
+							label: "Outcome",
+							children: [/* @__PURE__ */ jsx(FilterOption, {
+								value: "sinks",
+								children: `Has sink effects (${sinkCount})`
+							}), /* @__PURE__ */ jsx(FilterOption, {
+								value: "none",
+								children: `No sink effects (${all.length - sinkCount})`
+							})]
+						}),
+						/* @__PURE__ */ jsx(FilterCategory, {
+							value: "rev",
+							label: "Drop rev",
+							children: revs.map((rev) => /* @__PURE__ */ jsx(FilterOption, {
+								value: String(rev),
+								children: `rev ${rev} (${all.filter((row) => row.run.rev === rev).length})`
+							}, rev))
+						})
+					] })
+				] })
+			})
+		})]
+	});
+}
+//#endregion
+export { PipelinePaletteView, PipelineRunsView };
+
+//# sourceMappingURL=wc3-pipeline-side-views.mjs.map