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

package/dist/pages/wc3-pipeline-detail.mjs

@@ -0,0 +1,818 @@
+import { Badge } from "../badge.mjs";
+import { HoverTooltip } from "../tooltip.mjs";
+import { Button } from "../button.mjs";
+import { Card, CardContent, CardHeader, CardTitle } from "../card.mjs";
+import { Empty } from "../empty.mjs";
+import { Label } from "../label.mjs";
+import { Input } from "../input.mjs";
+import { Textarea } from "../textarea.mjs";
+import { Combobox } from "../combobox.mjs";
+import { ConfirmDialog } from "../confirm-dialog.mjs";
+import { GraphCanvas } from "../graph-canvas.mjs";
+import { WC3_OBJECT_TYPES, getObjectType } from "./wc3-ontology-data.mjs";
+import { OntologyGlyph } from "./wc3-ontology-glyphs.mjs";
+import { LineageGlyph, Mono } from "./wc3-lineage-shared.mjs";
+import { WC3_NODE_KINDS } from "./wc3-lineage-data.mjs";
+import { NodeKindBadge, NodeKindGlyph, PipelineGlyph, PortDot, PortLegend, WC3_DROP_REV2_SUMMARY, WC3_NODE_CATEGORIES, WC3_PIPELINE_EDIT_INITIAL, WC3_PIPELINE_ICONS, addNode, addWire, canReceiveDrop, checkWire, deleteNode, deleteWire, moveNode, nodeKind, nodeOutput, parsePortRef, pipelineFacts, portColor, portRef, receiveDrop, runPipeline, updateNode, updatePipelineMeta } from "./wc3-pipeline-shared.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { ArrowLeft, ArrowRight, CheckCircle2, Download, Play, Trash2, TriangleAlert, XCircle } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Handle, Position, useEdgesState, useNodesState } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+//#region src/pages/wc3-pipeline-detail.tsx
+/**
+* The prototype's port geometry: y = 20 + index*18, with a single port nudged 8px down so it sits on
+* the body's centre line. Kept exactly, because it is what makes a two-port node's dots line up with
+* the label rather than the body edge.
+*/
+const portTop = (index, count) => 20 + index * 18 + (count === 1 ? 8 : 0);
+/** 18 chars then an ellipsis — pipe_tel's "presence_events topic" renders as "presence_events to…". */
+const shortLabel = (label) => label.length > 18 ? `${label.slice(0, 18)}…` : label;
+/**
+* A node on the canvas. Same visual language as the two read-only canvases (a plain div on Core
+* tokens, never React Flow chrome) with ONE deliberate difference: handles are VISIBLE and carry the
+* port's identity colour. Colour is the only type affordance a wiring UI has, so hiding the handles
+* the way wc3-graph-explorer-flow.tsx and wc3-lineage-data-view.tsx do would make typed ports
+* invisible. Every handle carries an explicit `id` — the "<nodeId>:<portIndex>" wire encoding only
+* round-trips if it does.
+*/
+function PipelineFlowNode({ data }) {
+	const { node, kind, picked, rows, runState, syncTarget } = data;
+	const inPorts = kind?.inPorts ?? [];
+	const outPorts = kind?.outPorts ?? [];
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("wwc:relative wwc:h-[56px] wwc:w-[170px] wwc:rounded-lg wwc:border wwc:bg-card wwc:px-2.5 wwc:py-1.5", picked ? "wwc:border-primary wwc:ring-1 wwc:ring-primary" : "wwc:border-border wwc:hover:border-primary/50", runState === "running" && "wwc:border-amber-500 wwc:ring-1 wwc:ring-amber-500", runState === "done" && "wwc:border-green-600"),
+		children: [
+			inPorts.map((type, index) => /* @__PURE__ */ jsx(Handle, {
+				id: String(index),
+				type: "target",
+				position: Position.Left,
+				title: `in: ${type}`,
+				style: {
+					top: portTop(index, inPorts.length),
+					width: 10,
+					height: 10,
+					background: portColor(type),
+					border: "1.5px solid var(--wwc-color-card)"
+				}
+			}, `in-${type}-${index}`)),
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:items-center wwc:gap-1.5",
+				children: [/* @__PURE__ */ jsx(NodeKindGlyph, {
+					kindId: node.kind,
+					className: "wwc:h-3.5 wwc:w-3.5 wwc:shrink-0 wwc:text-muted-foreground"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "wwc:truncate wwc:text-[11px] wwc:font-bold wwc:leading-tight",
+					children: shortLabel(node.label)
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:truncate wwc:text-[9px] wwc:leading-tight wwc:text-muted-foreground",
+				children: [kind?.cat ?? "unknown kind", syncTarget ? ` → ${syncTarget}` : ""]
+			}),
+			rows !== void 0 && /* @__PURE__ */ jsxs("div", {
+				className: "wwc:text-[9.5px] wwc:font-bold wwc:leading-tight wwc:text-green-600",
+				children: [rows, " rows"]
+			}),
+			outPorts.map((type, index) => /* @__PURE__ */ jsx(Handle, {
+				id: String(index),
+				type: "source",
+				position: Position.Right,
+				title: `out: ${type}`,
+				style: {
+					top: portTop(index, outPorts.length),
+					width: 10,
+					height: 10,
+					background: portColor(type),
+					border: "1.5px solid var(--wwc-color-card)"
+				}
+			}, `out-${type}-${index}`))
+		]
+	});
+}
+const NODE_TYPES = { pipe: PipelineFlowNode };
+/** One palette entry — a click adds the kind to the open pipeline, exactly as the prototype's rail. */
+function PaletteItem({ kindId, onAdd }) {
+	const kind = WC3_NODE_KINDS[kindId];
+	if (!kind) return null;
+	const ins = kind.inPorts.length ? kind.inPorts.join(", ") : "—";
+	const outs = kind.outPorts.length ? kind.outPorts.join(", ") : "—";
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: () => onAdd(kindId),
+		title: `in: ${ins} · out: ${outs}`,
+		className: "wwc:flex wwc:w-full wwc:items-center wwc:gap-1.5 wwc:rounded-md wwc:px-2 wwc:py-1 wwc:text-left wwc:text-xs wwc:hover:bg-accent wwc:hover:text-accent-foreground",
+		children: [
+			/* @__PURE__ */ jsx(NodeKindGlyph, {
+				kindId,
+				className: "wwc:h-3.5 wwc:w-3.5 wwc:shrink-0"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "wwc:min-w-0 wwc:flex-1 wwc:truncate",
+				children: kind.label
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "wwc:flex wwc:shrink-0 wwc:items-center wwc:gap-0.5",
+				children: [...kind.inPorts, ...kind.outPorts].map((type, index) => /* @__PURE__ */ jsx(PortDot, { type }, `${type}-${index}`))
+			})
+		]
+	});
+}
+/**
+* The node inspector. Mounted with `key={node.id}` so its uncontrolled inputs and its label error
+* reset when the selection moves — the same reason the product detail keys on its record.
+*/
+function NodeInspector({ pipeline, node, onChange, onDelete }) {
+	const [labelErr, setLabelErr] = useState(false);
+	const kind = nodeKind(node.kind);
+	const output = nodeOutput(pipeline, node);
+	const paramKeys = Object.keys(node.params);
+	const commitLabel = (value) => {
+		if (!value.trim()) {
+			setLabelErr(true);
+			return;
+		}
+		setLabelErr(false);
+		onChange(updateNode(pipeline, node.id, { label: value.trim() }));
+	};
+	const commitParam = (key, value) => {
+		onChange(updateNode(pipeline, node.id, { params: {
+			...node.params,
+			[key]: value
+		} }));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "wwc:space-y-3",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:flex-wrap wwc:items-center wwc:gap-1.5",
+				children: [
+					/* @__PURE__ */ jsx(NodeKindGlyph, {
+						kindId: node.kind,
+						className: "wwc:h-4 wwc:w-4 wwc:shrink-0"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "wwc:text-sm wwc:font-semibold",
+						children: node.label
+					}),
+					/* @__PURE__ */ jsx(NodeKindBadge, { kindId: node.kind })
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:text-[10.5px] wwc:text-muted-foreground",
+				children: [
+					"in: ",
+					kind?.inPorts.length ? kind.inPorts.join(", ") : "—",
+					" · out:",
+					" ",
+					kind?.outPorts.length ? kind.outPorts.join(", ") : "—"
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:space-y-1.5",
+				children: [
+					/* @__PURE__ */ jsx(Label, {
+						htmlFor: `pni-lbl-${node.id}`,
+						children: "Label"
+					}),
+					/* @__PURE__ */ jsx(Input, {
+						id: `pni-lbl-${node.id}`,
+						defaultValue: node.label,
+						"aria-invalid": labelErr,
+						className: cn(labelErr && "wwc:border-destructive"),
+						onBlur: (event) => commitLabel(event.target.value),
+						onKeyDown: (event) => {
+							if (event.key === "Enter") event.currentTarget.blur();
+						}
+					}),
+					labelErr && /* @__PURE__ */ jsx("p", {
+						className: "wwc:text-xs wwc:text-destructive",
+						children: "Label required."
+					})
+				]
+			}),
+			node.kind === "sink_sync" ? /* @__PURE__ */ jsxs("div", {
+				className: "wwc:space-y-1.5",
+				children: [/* @__PURE__ */ jsx(Label, { children: "Target object type" }), /* @__PURE__ */ jsx(Combobox, {
+					options: WC3_OBJECT_TYPES.map((ot) => ({
+						value: ot.id,
+						label: ot.displayName,
+						icon: /* @__PURE__ */ jsx(OntologyGlyph, {
+							name: ot.icon,
+							color: ot.color
+						})
+					})),
+					value: node.params.targetOt ?? "",
+					onValueChange: (value) => commitParam("targetOt", value),
+					placeholder: "Select object type…",
+					className: "wwc:w-full"
+				})]
+			}) : paramKeys.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "wwc:text-xs wwc:text-muted-foreground",
+				children: "This kind carries no parameters."
+			}) : paramKeys.map((key) => /* @__PURE__ */ jsxs("div", {
+				className: "wwc:space-y-1.5",
+				children: [/* @__PURE__ */ jsx(Label, {
+					htmlFor: `pni-${node.id}-${key}`,
+					className: "wwc:uppercase",
+					children: key
+				}), /* @__PURE__ */ jsx(Input, {
+					id: `pni-${node.id}-${key}`,
+					defaultValue: node.params[key],
+					onBlur: (event) => commitParam(key, event.target.value),
+					onKeyDown: (event) => {
+						if (event.key === "Enter") event.currentTarget.blur();
+					}
+				})]
+			}, key)),
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:space-y-1.5 wwc:rounded-md wwc:border wwc:border-border wwc:p-2.5",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "wwc:text-[10px] wwc:font-semibold wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground",
+						children: "Output schema"
+					}),
+					output.cols.length === 0 ? /* @__PURE__ */ jsx("p", {
+						className: "wwc:text-xs wwc:text-muted-foreground",
+						children: "Produces no rows — this kind emits nothing downstream."
+					}) : /* @__PURE__ */ jsx("div", {
+						className: "wwc:flex wwc:flex-wrap wwc:gap-1",
+						children: output.cols.map((col) => /* @__PURE__ */ jsx("span", {
+							className: "wwc:rounded wwc:bg-muted wwc:px-1.5 wwc:py-0.5",
+							children: /* @__PURE__ */ jsx(Mono, { children: col })
+						}, col))
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "wwc:text-xs wwc:text-muted-foreground",
+						children: [
+							output.rows,
+							" rows at drop rev ",
+							pipeline.dropRev || 1
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:items-center wwc:justify-between wwc:gap-2",
+				children: [/* @__PURE__ */ jsxs(Button, {
+					variant: "destructive",
+					size: "sm",
+					className: "wwc:gap-1.5",
+					onClick: onDelete,
+					children: [/* @__PURE__ */ jsx(Trash2, { className: "wwc:h-3.5 wwc:w-3.5" }), "Delete node…"]
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "wwc:text-[10.5px] wwc:text-muted-foreground",
+					children: [
+						"position x ",
+						node.x,
+						" · y ",
+						node.y
+					]
+				})]
+			})
+		]
+	});
+}
+/**
+* Name / description / icon, committed straight onto the record. Keyed on the pipeline id at the call
+* site so its uncontrolled fields re-read when a different pipeline is opened.
+*/
+function PipelineMetaCard({ pipeline, onChange }) {
+	const [nameErr, setNameErr] = useState(false);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "wwc:space-y-3",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:space-y-1.5",
+				children: [
+					/* @__PURE__ */ jsx(Label, {
+						htmlFor: `pipe-name-${pipeline.id}`,
+						children: "Name"
+					}),
+					/* @__PURE__ */ jsx(Input, {
+						id: `pipe-name-${pipeline.id}`,
+						defaultValue: pipeline.name,
+						"aria-invalid": nameErr,
+						className: cn(nameErr && "wwc:border-destructive"),
+						onBlur: (event) => {
+							const value = event.target.value.trim();
+							if (!value) {
+								setNameErr(true);
+								return;
+							}
+							setNameErr(false);
+							onChange(updatePipelineMeta(pipeline, { name: value }));
+						}
+					}),
+					nameErr && /* @__PURE__ */ jsx("p", {
+						className: "wwc:text-xs wwc:text-destructive",
+						children: "Name required."
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:space-y-1.5",
+				children: [/* @__PURE__ */ jsx(Label, {
+					htmlFor: `pipe-desc-${pipeline.id}`,
+					children: "Description"
+				}), /* @__PURE__ */ jsx(Textarea, {
+					id: `pipe-desc-${pipeline.id}`,
+					rows: 3,
+					defaultValue: pipeline.desc,
+					onBlur: (event) => onChange(updatePipelineMeta(pipeline, { desc: event.target.value }))
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:space-y-1.5",
+				children: [/* @__PURE__ */ jsx(Label, { children: "Icon" }), /* @__PURE__ */ jsx(Combobox, {
+					options: WC3_PIPELINE_ICONS.map((icon) => ({
+						value: icon,
+						label: icon,
+						icon: /* @__PURE__ */ jsx(LineageGlyph, { name: icon })
+					})),
+					value: pipeline.icon,
+					onValueChange: (value) => onChange(updatePipelineMeta(pipeline, { icon: value })),
+					placeholder: "Select icon…",
+					className: "wwc:w-full"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:text-[10.5px] wwc:text-muted-foreground",
+				children: [/* @__PURE__ */ jsx(Mono, { children: pipeline.id }), " · edits live for this session only — nothing about a pipeline is persisted."]
+			})
+		]
+	});
+}
+/** The run log, newest first. `order` and `stats` are surfaced by the Runs tab, not here. */
+function RunLog({ pipeline, onNavigate }) {
+	if (pipeline.runs.length === 0) return /* @__PURE__ */ jsx("p", {
+		className: "wwc:text-xs wwc:text-muted-foreground",
+		children: "Not run yet — press Run pipeline. A run executes every node in topological order and records what each one produced. It writes a run record and nothing else: no instances are created anywhere in the workspace."
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "wwc:space-y-2",
+		children: pipeline.runs.slice().reverse().map((run) => /* @__PURE__ */ jsxs("div", {
+			className: "wwc:space-y-1 wwc:rounded-md wwc:border wwc:border-border wwc:p-2.5",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:flex-wrap wwc:items-center wwc:gap-1.5",
+				children: [
+					/* @__PURE__ */ jsx(Badge, {
+						variant: "neutralSoft",
+						children: "run"
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "wwc:text-[11px] wwc:text-muted-foreground",
+						children: [
+							run.at,
+							" · drop rev ",
+							run.rev
+						]
+					}),
+					/* @__PURE__ */ jsxs(Button, {
+						variant: "ghost",
+						size: "sm",
+						className: "wwc:ml-auto wwc:h-6 wwc:gap-1 wwc:px-1.5 wwc:text-[11px]",
+						onClick: () => onNavigate?.({
+							perspectiveId: "lineage",
+							tabId: "workflow"
+						}),
+						children: ["lineage", /* @__PURE__ */ jsx(ArrowRight, { className: "wwc:h-3 wwc:w-3" })]
+					})
+				]
+			}), run.summary.length === 0 ? /* @__PURE__ */ jsx("div", {
+				className: "wwc:text-[11px] wwc:text-muted-foreground",
+				children: "no sink effects"
+			}) : run.summary.map((line) => /* @__PURE__ */ jsxs("div", {
+				className: "wwc:text-[11px]",
+				children: ["· ", line]
+			}, line))]
+		}, run.id))
+	});
+}
+/** A right-rail section. Three short ones stack full-width — no SideMenu, per the house note. */
+function RailCard({ title, count, children }) {
+	return /* @__PURE__ */ jsxs(Card, {
+		className: "wwc:shrink-0",
+		children: [/* @__PURE__ */ jsx(CardHeader, {
+			className: "wwc:p-3",
+			children: /* @__PURE__ */ jsxs(CardTitle, {
+				className: "wwc:text-sm",
+				children: [title, count !== void 0 ? /* @__PURE__ */ jsxs("span", {
+					className: "wwc:font-normal wwc:text-muted-foreground",
+					children: [
+						" (",
+						count,
+						")"
+					]
+				}) : null]
+			})
+		}), /* @__PURE__ */ jsx(CardContent, {
+			className: "wwc:p-3 wwc:pt-0",
+			children
+		})]
+	});
+}
+function PipelineDetail({ pipeline, onChange, onBack, onNavigate }) {
+	const [edit, setEdit] = useState(WC3_PIPELINE_EDIT_INITIAL);
+	const [pending, setPending] = useState(null);
+	useEffect(() => {
+		setEdit(WC3_PIPELINE_EDIT_INITIAL);
+		setPending(null);
+	}, [pipeline.id]);
+	const facts = useMemo(() => pipelineFacts(pipeline), [pipeline]);
+	const lastRun = facts.lastRun;
+	const selectedNode = edit.sel ? pipeline.nodes.find((n) => n.id === edit.sel) ?? null : null;
+	useEffect(() => {
+		if (!edit.anim) return;
+		const delay = edit.anim.step === 0 ? 120 : 260;
+		const timer = setTimeout(() => {
+			setEdit((state) => {
+				if (!state.anim) return state;
+				const step = state.anim.step + 1;
+				if (step > state.anim.order.length + 1) return {
+					...state,
+					anim: null
+				};
+				return {
+					...state,
+					anim: {
+						...state.anim,
+						step
+					}
+				};
+			});
+		}, delay);
+		return () => clearTimeout(timer);
+	}, [edit.anim]);
+	const flowNodes = useMemo(() => pipeline.nodes.map((node) => {
+		const index = edit.anim ? edit.anim.order.indexOf(node.id) : -1;
+		const step = edit.anim?.step ?? 0;
+		const runState = index < 0 || step === 0 ? "idle" : index === step - 1 ? "running" : index < step - 1 ? "done" : "idle";
+		return {
+			id: node.id,
+			type: "pipe",
+			position: {
+				x: node.x,
+				y: node.y
+			},
+			data: {
+				node,
+				kind: nodeKind(node.kind),
+				picked: edit.sel === node.id,
+				rows: lastRun?.stats[node.id],
+				runState,
+				syncTarget: node.kind === "sink_sync" ? getObjectType(node.params.targetOt ?? "")?.displayName ?? "missing" : null
+			}
+		};
+	}), [
+		pipeline.nodes,
+		edit.sel,
+		edit.anim,
+		lastRun
+	]);
+	const flowEdges = useMemo(() => {
+		const known = new Set(pipeline.nodes.map((n) => n.id));
+		const sweeping = edit.anim ? edit.anim.order[edit.anim.step - 1] : void 0;
+		return pipeline.wires.map((wire) => {
+			const from = parsePortRef(wire.from);
+			const to = parsePortRef(wire.to);
+			if (!known.has(from.nodeId) || !known.has(to.nodeId)) return null;
+			const pulsing = sweeping !== void 0 && sweeping === to.nodeId;
+			return {
+				id: wire.id,
+				source: from.nodeId,
+				target: to.nodeId,
+				sourceHandle: String(from.portIndex),
+				targetHandle: String(to.portIndex),
+				animated: pulsing,
+				style: {
+					stroke: pulsing ? "var(--wwc-color-primary)" : "var(--wwc-color-border)",
+					strokeWidth: pulsing ? 2 : 1.5
+				}
+			};
+		}).filter((edge) => edge !== null);
+	}, [
+		pipeline.nodes,
+		pipeline.wires,
+		edit.anim
+	]);
+	const [nodes, setNodes, onNodesChange] = useNodesState(flowNodes);
+	const [edges, setEdges, onEdgesChange] = useEdgesState(flowEdges);
+	useEffect(() => setNodes(flowNodes), [flowNodes, setNodes]);
+	useEffect(() => setEdges(flowEdges), [flowEdges, setEdges]);
+	const addFromPalette = useCallback((kindId) => {
+		const { pipeline: next, nodeId } = addNode(pipeline, kindId);
+		onChange(next);
+		setEdit((state) => ({
+			...state,
+			sel: nodeId,
+			wireFrom: null,
+			wireErr: null
+		}));
+	}, [pipeline, onChange]);
+	/** The four guards, run once and quoted verbatim. Both React Flow entry points call this. */
+	const validate = useCallback((connection) => {
+		const from = portRef(connection.source, Number(connection.sourceHandle ?? 0));
+		const to = portRef(connection.target, Number(connection.targetHandle ?? 0));
+		return {
+			from,
+			to,
+			check: checkWire(pipeline, from, to)
+		};
+	}, [pipeline]);
+	const onConnect = useCallback((connection) => {
+		const { from, to, check } = validate(connection);
+		if (!check.ok) {
+			setEdit((state) => ({
+				...state,
+				wireFrom: null,
+				wireErr: check.reason
+			}));
+			return;
+		}
+		onChange(addWire(pipeline, from, to));
+		setEdit((state) => ({
+			...state,
+			wireFrom: null,
+			wireErr: null
+		}));
+	}, [
+		pipeline,
+		onChange,
+		validate
+	]);
+	/**
+	* The refusal surface. `isValidConnection` blocks the drop, which means onConnect never fires for a
+	* refused wire and the reason would never be read — so the guards run again here, on the pair the
+	* drag actually ended on, and their message lands in the warn banner verbatim. Handles are resolved
+	* by TYPE, not by drag direction, so dragging input→output refuses for the same reason as
+	* output→input rather than for a spurious one.
+	*/
+	const onConnectEnd = useCallback((_event, state) => {
+		const { fromHandle, toHandle } = state;
+		if (!fromHandle || !toHandle) {
+			setEdit((edited) => ({
+				...edited,
+				wireFrom: null
+			}));
+			return;
+		}
+		const source = fromHandle.type === "source" ? fromHandle : toHandle;
+		const target = fromHandle.type === "source" ? toHandle : fromHandle;
+		const check = checkWire(pipeline, portRef(source.nodeId, Number(source.id ?? 0)), portRef(target.nodeId, Number(target.id ?? 0)));
+		setEdit((edited) => ({
+			...edited,
+			wireFrom: null,
+			wireErr: check.ok ? null : check.reason
+		}));
+	}, [pipeline]);
+	const confirmPending = () => {
+		if (!pending) return;
+		if (pending.kind === "node") {
+			onChange(deleteNode(pipeline, pending.id));
+			setEdit((state) => ({
+				...state,
+				sel: state.sel === pending.id ? null : state.sel,
+				wireFrom: null
+			}));
+		} else onChange(deleteWire(pipeline, pending.id));
+		setPending(null);
+	};
+	const runNow = () => {
+		const { pipeline: next, run } = runPipeline(pipeline);
+		onChange(next);
+		setEdit((state) => ({
+			...state,
+			wireErr: null,
+			anim: {
+				order: run.order,
+				step: 0
+			}
+		}));
+	};
+	const pendingNode = pending?.kind === "node" ? pipeline.nodes.find((n) => n.id === pending.id) : void 0;
+	const pendingWire = pending?.kind === "wire" ? pipeline.wires.find((w) => w.id === pending.id) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "wwc:flex wwc:min-h-0 wwc:flex-1 wwc:flex-col",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:min-h-12 wwc:shrink-0 wwc:items-center wwc:justify-between wwc:gap-3 wwc:border-b wwc:border-border wwc:bg-card wwc:px-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:min-w-0 wwc:items-center wwc:gap-2.5",
+					children: [
+						/* @__PURE__ */ jsxs(Button, {
+							variant: "ghost",
+							size: "sm",
+							className: "wwc:gap-1.5",
+							onClick: onBack,
+							children: [/* @__PURE__ */ jsx(ArrowLeft, { className: "wwc:h-4 wwc:w-4" }), "Back"]
+						}),
+						/* @__PURE__ */ jsx("div", { className: "wwc:h-5 wwc:w-px wwc:shrink-0 wwc:bg-border" }),
+						/* @__PURE__ */ jsx(PipelineGlyph, {
+							pipeline,
+							className: "wwc:h-4 wwc:w-4 wwc:shrink-0"
+						}),
+						/* @__PURE__ */ jsx("h1", {
+							className: "wwc:truncate wwc:text-sm wwc:font-semibold",
+							children: pipeline.name
+						}),
+						/* @__PURE__ */ jsxs(Badge, {
+							variant: "neutralSoft",
+							className: "wwc:font-normal",
+							children: ["rev ", pipeline.dropRev || 1]
+						}),
+						facts.healthNotes.length > 0 && /* @__PURE__ */ jsx(HoverTooltip, {
+							content: facts.healthNotes.join(" "),
+							children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs(Badge, {
+								variant: "warningSoft",
+								className: "wwc:gap-1 wwc:font-normal",
+								children: [
+									/* @__PURE__ */ jsx(TriangleAlert, { className: "wwc:h-3 wwc:w-3" }),
+									facts.healthNotes.length,
+									" hint",
+									facts.healthNotes.length === 1 ? "" : "s"
+								]
+							}) })
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "wwc:hidden wwc:truncate wwc:text-[11px] wwc:text-muted-foreground wwc:lg:inline",
+							children: [
+								facts.nodeCount,
+								" nodes · ",
+								facts.wireCount,
+								" wires · ",
+								facts.runCount,
+								" runs"
+							]
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:shrink-0 wwc:items-center wwc:gap-2",
+					children: [canReceiveDrop(pipeline) ? /* @__PURE__ */ jsxs(Button, {
+						variant: "outline",
+						size: "sm",
+						className: "wwc:gap-1.5",
+						onClick: () => onChange(receiveDrop(pipeline)),
+						children: [/* @__PURE__ */ jsx(Download, { className: "wwc:h-4 wwc:w-4" }), "Receive new IFC drop"]
+					}) : pipeline.dropRev >= 2 ? /* @__PURE__ */ jsx(HoverTooltip, {
+						content: WC3_DROP_REV2_SUMMARY,
+						children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs(Badge, {
+							variant: "successSoft",
+							className: "wwc:gap-1 wwc:font-normal",
+							children: [/* @__PURE__ */ jsx(CheckCircle2, { className: "wwc:h-3 wwc:w-3" }), "Drop rev 2 received"]
+						}) })
+					}) : null, /* @__PURE__ */ jsxs(Button, {
+						size: "sm",
+						className: "wwc:gap-1.5",
+						onClick: runNow,
+						disabled: pipeline.nodes.length === 0,
+						children: [/* @__PURE__ */ jsx(Play, { className: "wwc:h-4 wwc:w-4" }), "Run pipeline"]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:grid wwc:min-h-0 wwc:flex-1 wwc:gap-4 wwc:overflow-hidden wwc:px-6 wwc:pb-6 wwc:pt-4 wwc:lg:grid-cols-[minmax(0,1fr)_22rem]",
+				children: [/* @__PURE__ */ jsxs(Card, {
+					className: "wwc:flex wwc:min-h-0 wwc:overflow-hidden",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:w-[200px] wwc:shrink-0 wwc:flex-col wwc:gap-2 wwc:overflow-y-auto wwc:border-r wwc:border-border wwc:p-2",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "wwc:px-2 wwc:text-[10px] wwc:font-semibold wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground",
+							children: "Palette"
+						}), WC3_NODE_CATEGORIES.map((category) => /* @__PURE__ */ jsxs("div", {
+							className: "wwc:space-y-0.5",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "wwc:px-2 wwc:text-[10px] wwc:font-semibold wwc:text-muted-foreground",
+								children: category
+							}), Object.keys(WC3_NODE_KINDS).filter((kindId) => WC3_NODE_KINDS[kindId]?.cat === category).map((kindId) => /* @__PURE__ */ jsx(PaletteItem, {
+								kindId,
+								onAdd: addFromPalette
+							}, kindId))]
+						}, category))]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:min-w-0 wwc:min-h-0 wwc:flex-1 wwc:flex-col",
+						children: [
+							edit.wireErr && /* @__PURE__ */ jsxs("div", {
+								className: "wwc:flex wwc:shrink-0 wwc:items-start wwc:gap-2 wwc:border-b wwc:border-amber-600/30 wwc:bg-amber-500/5 wwc:p-3 wwc:text-sm",
+								children: [/* @__PURE__ */ jsx(XCircle, { className: "wwc:mt-0.5 wwc:h-4 wwc:w-4 wwc:shrink-0 wwc:text-amber-600" }), /* @__PURE__ */ jsxs("span", { children: [
+									/* @__PURE__ */ jsx("b", { children: "Wire refused:" }),
+									" ",
+									edit.wireErr
+								] })]
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "wwc:min-h-0 wwc:flex-1",
+								children: pipeline.nodes.length === 0 ? /* @__PURE__ */ jsx(Empty, {
+									title: "Empty canvas",
+									description: "This pipeline has no nodes yet. Pick a source from the palette on the left, then wire its output port to the input port of a transform or a sink."
+								}) : /* @__PURE__ */ jsx(GraphCanvas, {
+									nodes,
+									edges,
+									onNodesChange,
+									onEdgesChange,
+									nodeTypes: NODE_TYPES,
+									onConnect,
+									isValidConnection: (connection) => validate(connection).check.ok,
+									onConnectStart: (_, params) => {
+										const nodeId = params.nodeId;
+										if (params.handleType !== "source" || !nodeId) return;
+										setEdit((state) => ({
+											...state,
+											wireErr: null,
+											wireFrom: portRef(nodeId, Number(params.handleId ?? 0))
+										}));
+									},
+									onConnectEnd,
+									onNodeClick: (_, node) => setEdit((state) => ({
+										...state,
+										sel: state.sel === node.id ? null : node.id,
+										wireFrom: null
+									})),
+									onNodeDragStop: (_, node) => onChange(moveNode(pipeline, node.id, node.position.x, node.position.y)),
+									onEdgeClick: (_, edge) => setPending({
+										kind: "wire",
+										id: edge.id
+									}),
+									onPaneClick: () => setEdit((state) => ({
+										...state,
+										sel: null,
+										wireFrom: null,
+										wireErr: null
+									}))
+								})
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "wwc:flex wwc:shrink-0 wwc:flex-wrap wwc:items-center wwc:gap-x-4 wwc:gap-y-1 wwc:border-t wwc:border-border wwc:px-3 wwc:py-2",
+								children: [/* @__PURE__ */ jsx(PortLegend, {}), /* @__PURE__ */ jsx("span", {
+									className: "wwc:text-xs wwc:text-muted-foreground",
+									children: "Drag an output port to an input port to wire. Click a wire to delete it."
+								})]
+							})
+						]
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:min-h-0 wwc:flex-col wwc:gap-4 wwc:overflow-y-auto",
+					children: [
+						/* @__PURE__ */ jsx(RailCard, {
+							title: "Node inspector",
+							children: selectedNode ? /* @__PURE__ */ jsx(NodeInspector, {
+								pipeline,
+								node: selectedNode,
+								onChange,
+								onDelete: () => setPending({
+									kind: "node",
+									id: selectedNode.id
+								})
+							}, selectedNode.id) : /* @__PURE__ */ jsx("p", {
+								className: "wwc:text-xs wwc:text-muted-foreground",
+								children: "Select a node to edit its label and parameters, read the schema it outputs, or delete it. Drag an output port to an input port to wire two nodes."
+							})
+						}),
+						/* @__PURE__ */ jsx(RailCard, {
+							title: "Pipeline",
+							children: /* @__PURE__ */ jsx(PipelineMetaCard, {
+								pipeline,
+								onChange
+							}, pipeline.id)
+						}),
+						/* @__PURE__ */ jsx(RailCard, {
+							title: "Run log",
+							count: pipeline.runs.length,
+							children: /* @__PURE__ */ jsx(RunLog, {
+								pipeline,
+								onNavigate
+							})
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx(ConfirmDialog, {
+				open: pending?.kind === "node",
+				onOpenChange: (next) => {
+					if (!next) setPending(null);
+				},
+				title: "Delete node",
+				description: `Delete node “${pendingNode?.label ?? ""}” and its wires?`,
+				confirmLabel: "Delete",
+				destructive: true,
+				onConfirm: confirmPending
+			}),
+			/* @__PURE__ */ jsx(ConfirmDialog, {
+				open: pending?.kind === "wire",
+				onOpenChange: (next) => {
+					if (!next) setPending(null);
+				},
+				title: "Delete wire",
+				description: `Remove the wire ${pendingWire?.from ?? ""} → ${pendingWire?.to ?? ""}? You can re-draw it from the ports.`,
+				confirmLabel: "Delete wire",
+				destructive: true,
+				onConfirm: confirmPending
+			})
+		]
+	});
+}
+//#endregion
+export { PipelineDetail };
+
+//# sourceMappingURL=wc3-pipeline-detail.mjs.map