@ucdjs/pipelines-ui 0.0.1-beta.1

package/dist/components/graph/nodes.mjs

@@ -0,0 +1,264 @@
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { Handle, Position } from "@xyflow/react";
+
+//#region src/components/graph/nodes.tsx
+const nodeTypeStyles = {
+	source: {
+		bg: "#eef2ff",
+		border: "#a5b4fc",
+		iconBg: "#6366f1",
+		icon: "S"
+	},
+	file: {
+		bg: "#ecfdf5",
+		border: "#6ee7b7",
+		iconBg: "#10b981",
+		icon: "F"
+	},
+	route: {
+		bg: "#fffbeb",
+		border: "#fcd34d",
+		iconBg: "#f59e0b",
+		icon: "R"
+	},
+	artifact: {
+		bg: "#f5f3ff",
+		border: "#c4b5fd",
+		iconBg: "#8b5cf6",
+		icon: "A"
+	},
+	output: {
+		bg: "#f0f9ff",
+		border: "#7dd3fc",
+		iconBg: "#0ea5e9",
+		icon: "O"
+	}
+};
+const defaultStyle = {
+	bg: "#f9fafb",
+	border: "#d1d5db",
+	iconBg: "#6b7280",
+	icon: "?"
+};
+const flexCenterStyle = {
+	display: "flex",
+	alignItems: "center"
+};
+const labelContainerStyle = {
+	display: "flex",
+	flexDirection: "column",
+	overflow: "hidden",
+	marginLeft: "10px"
+};
+const typeStyle = {
+	fontSize: "10px",
+	textTransform: "uppercase",
+	letterSpacing: "0.05em",
+	color: "#6b7280",
+	marginBottom: "1px"
+};
+const labelStyle = {
+	fontSize: "13px",
+	fontWeight: 500,
+	color: "#111827",
+	whiteSpace: "nowrap",
+	overflow: "hidden",
+	textOverflow: "ellipsis"
+};
+const containerStyleCache = /* @__PURE__ */ new Map();
+const iconStyleCache = /* @__PURE__ */ new Map();
+const handleStyleCache = /* @__PURE__ */ new Map();
+function getContainerStyle(styles, selected) {
+	const key = `${styles.bg}-${styles.border}-${selected}`;
+	let cached = containerStyleCache.get(key);
+	if (!cached) {
+		cached = {
+			backgroundColor: styles.bg,
+			border: `2px solid ${styles.border}`,
+			borderRadius: "10px",
+			padding: "10px 14px",
+			minWidth: "150px",
+			maxWidth: "220px",
+			boxShadow: selected ? `0 0 0 2px #3b82f6, 0 1px 3px rgba(0,0,0,0.1)` : "0 1px 3px rgba(0,0,0,0.1)",
+			transition: "box-shadow 0.15s ease",
+			fontFamily: "system-ui, -apple-system, sans-serif"
+		};
+		containerStyleCache.set(key, cached);
+	}
+	return cached;
+}
+function getIconStyle(iconBg) {
+	let cached = iconStyleCache.get(iconBg);
+	if (!cached) {
+		cached = {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: "28px",
+			height: "28px",
+			borderRadius: "6px",
+			backgroundColor: iconBg,
+			color: "#ffffff",
+			fontSize: "12px",
+			fontWeight: 700,
+			flexShrink: 0
+		};
+		iconStyleCache.set(iconBg, cached);
+	}
+	return cached;
+}
+function getHandleStyle(border) {
+	let cached = handleStyleCache.get(border);
+	if (!cached) {
+		cached = {
+			width: "8px",
+			height: "8px",
+			backgroundColor: border,
+			border: "none"
+		};
+		handleStyleCache.set(border, cached);
+	}
+	return cached;
+}
+function BaseNode(t0) {
+	const $ = c(31);
+	const { data, selected: t1, type } = t0;
+	const selected = t1 === void 0 ? false : t1;
+	const styles = nodeTypeStyles[type] ?? defaultStyle;
+	let t2;
+	if ($[0] !== selected || $[1] !== styles) {
+		t2 = getContainerStyle(styles, selected);
+		$[0] = selected;
+		$[1] = styles;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== styles.border) {
+		t3 = getHandleStyle(styles.border);
+		$[3] = styles.border;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Handle, {
+			type: "target",
+			position: Position.Left,
+			style: t3
+		});
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== styles.iconBg) {
+		t5 = getIconStyle(styles.iconBg);
+		$[7] = styles.iconBg;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== styles.icon || $[10] !== t5) {
+		t6 = /* @__PURE__ */ jsx("span", {
+			style: t5,
+			children: styles.icon
+		});
+		$[9] = styles.icon;
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== type) {
+		t7 = /* @__PURE__ */ jsx("span", {
+			style: typeStyle,
+			children: type
+		});
+		$[12] = type;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== data.label) {
+		t8 = /* @__PURE__ */ jsx("span", {
+			style: labelStyle,
+			title: data.label,
+			children: data.label
+		});
+		$[14] = data.label;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t7 || $[17] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("div", {
+			style: labelContainerStyle,
+			children: [t7, t8]
+		});
+		$[16] = t7;
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t6 || $[20] !== t9) {
+		t10 = /* @__PURE__ */ jsxs("div", {
+			style: flexCenterStyle,
+			children: [t6, t9]
+		});
+		$[19] = t6;
+		$[20] = t9;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== styles.border) {
+		t11 = getHandleStyle(styles.border);
+		$[22] = styles.border;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Handle, {
+			type: "source",
+			position: Position.Right,
+			style: t11
+		});
+		$[24] = t11;
+		$[25] = t12;
+	} else t12 = $[25];
+	let t13;
+	if ($[26] !== t10 || $[27] !== t12 || $[28] !== t2 || $[29] !== t4) {
+		t13 = /* @__PURE__ */ jsxs("div", {
+			style: t2,
+			children: [
+				t4,
+				t10,
+				t12
+			]
+		});
+		$[26] = t10;
+		$[27] = t12;
+		$[28] = t2;
+		$[29] = t4;
+		$[30] = t13;
+	} else t13 = $[30];
+	return t13;
+}
+function createNodeComponent(type) {
+	return memo((props) => {
+		const $ = c(2);
+		let t0;
+		if ($[0] !== props) {
+			t0 = /* @__PURE__ */ jsx(BaseNode, {
+				...props,
+				type
+			});
+			$[0] = props;
+			$[1] = t0;
+		} else t0 = $[1];
+		return t0;
+	});
+}
+const SourceNode = createNodeComponent("source");
+const FileNode = createNodeComponent("file");
+const RouteNode = createNodeComponent("route");
+const ArtifactNode = createNodeComponent("artifact");
+const OutputNode = createNodeComponent("output");
+
+//#endregion
+export { ArtifactNode, FileNode, OutputNode, RouteNode, SourceNode };

package/dist/components/graph/pipeline-graph.d.mts

@@ -0,0 +1,15 @@
+import "@xyflow/react/dist/style.css";
+import { PipelineGraph, PipelineGraphNode } from "@ucdjs/pipelines-core";
+
+//#region src/components/graph/pipeline-graph.d.ts
+interface PipelineGraphProps {
+  graph: PipelineGraph;
+  onNodeSelect?: (node: PipelineGraphNode | null) => void;
+  showFilters?: boolean;
+  showDetails?: boolean;
+  showMinimap?: boolean;
+  className?: string;
+}
+declare const PipelineGraph$1: any;
+//#endregion
+export { PipelineGraph$1 as PipelineGraph, PipelineGraphProps };

package/dist/components/graph/pipeline-graph.mjs

@@ -0,0 +1,241 @@
+import { PipelineGraphDetails } from "./details.mjs";
+import { PipelineGraphFilters } from "./filters.mjs";
+import { nodeTypes } from "./node-types.mjs";
+import { filterNodesByType, pipelineGraphToFlow } from "../../lib/adapter.mjs";
+import { getNodeColor } from "../../lib/colors.mjs";
+import { applyLayout } from "../../lib/layout.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useState } from "react";
+import { Background, Controls, MiniMap, ReactFlow } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+
+//#region src/components/graph/pipeline-graph.tsx
+const defaultVisibleTypes = new Set([
+	"source",
+	"file",
+	"route",
+	"artifact",
+	"output"
+]);
+const containerStyle = {
+	display: "flex",
+	height: "100%",
+	width: "100%"
+};
+const graphContainerStyle = {
+	flex: 1,
+	display: "flex",
+	flexDirection: "column",
+	position: "relative"
+};
+const filtersContainerStyle = {
+	position: "absolute",
+	top: "12px",
+	left: "12px",
+	zIndex: 10
+};
+const fitViewOptions = { padding: .2 };
+const proOptions = { hideAttribution: true };
+const minimapMaskColor = "rgba(0, 0, 0, 0.1)";
+const PipelineGraph = memo((t0) => {
+	const $ = c(44);
+	const { graph, onNodeSelect, showFilters: t1, showDetails: t2, showMinimap: t3, className } = t0;
+	const showFilters = t1 === void 0 ? true : t1;
+	const showDetails = t2 === void 0 ? true : t2;
+	const showMinimap = t3 === void 0 ? true : t3;
+	let t4;
+	if ($[0] !== graph) {
+		t4 = pipelineGraphToFlow(graph);
+		$[0] = graph;
+		$[1] = t4;
+	} else t4 = $[1];
+	const { nodes, edges } = t4;
+	let t5;
+	if ($[2] !== edges || $[3] !== nodes) {
+		t5 = {
+			allNodes: nodes,
+			allEdges: edges
+		};
+		$[2] = edges;
+		$[3] = nodes;
+		$[4] = t5;
+	} else t5 = $[4];
+	const { allNodes, allEdges } = t5;
+	const [visibleTypes, setVisibleTypes] = useState(_temp);
+	const [selectedNode, setSelectedNode] = useState(null);
+	let filteredEdges;
+	let t6;
+	if ($[5] !== allEdges || $[6] !== allNodes || $[7] !== visibleTypes) {
+		const { nodes: filteredNodes, edges: t7 } = filterNodesByType(allNodes, allEdges, visibleTypes);
+		filteredEdges = t7;
+		t6 = applyLayout(filteredNodes, filteredEdges);
+		$[5] = allEdges;
+		$[6] = allNodes;
+		$[7] = visibleTypes;
+		$[8] = filteredEdges;
+		$[9] = t6;
+	} else {
+		filteredEdges = $[8];
+		t6 = $[9];
+	}
+	const positioned = t6;
+	let t7;
+	if ($[10] !== filteredEdges || $[11] !== positioned) {
+		t7 = {
+			layoutedNodes: positioned,
+			layoutedEdges: filteredEdges
+		};
+		$[10] = filteredEdges;
+		$[11] = positioned;
+		$[12] = t7;
+	} else t7 = $[12];
+	const { layoutedNodes, layoutedEdges } = t7;
+	const nodes_0 = layoutedNodes;
+	let t8;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = (type) => {
+			setVisibleTypes((prev) => {
+				const next = new Set(prev);
+				if (next.has(type)) {
+					if (next.size > 1) next.delete(type);
+				} else next.add(type);
+				return next;
+			});
+		};
+		$[13] = t8;
+	} else t8 = $[13];
+	const handleToggleType = t8;
+	let t9;
+	if ($[14] !== onNodeSelect) {
+		t9 = (_event, node) => {
+			const pipelineNode = node.data?.pipelineNode ?? null;
+			setSelectedNode(pipelineNode);
+			onNodeSelect?.(pipelineNode);
+		};
+		$[14] = onNodeSelect;
+		$[15] = t9;
+	} else t9 = $[15];
+	const handleNodeClick = t9;
+	let t10;
+	if ($[16] !== onNodeSelect) {
+		t10 = () => {
+			setSelectedNode(null);
+			onNodeSelect?.(null);
+		};
+		$[16] = onNodeSelect;
+		$[17] = t10;
+	} else t10 = $[17];
+	const handlePaneClick = t10;
+	let t11;
+	if ($[18] !== onNodeSelect) {
+		t11 = () => {
+			setSelectedNode(null);
+			onNodeSelect?.(null);
+		};
+		$[18] = onNodeSelect;
+		$[19] = t11;
+	} else t11 = $[19];
+	const handleCloseDetails = t11;
+	let t12;
+	if ($[20] !== showFilters || $[21] !== visibleTypes) {
+		t12 = showFilters && /* @__PURE__ */ jsx("div", {
+			style: filtersContainerStyle,
+			children: /* @__PURE__ */ jsx(PipelineGraphFilters, {
+				visibleTypes,
+				onToggleType: handleToggleType
+			})
+		});
+		$[20] = showFilters;
+		$[21] = visibleTypes;
+		$[22] = t12;
+	} else t12 = $[22];
+	let t13;
+	let t14;
+	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ jsx(Background, {});
+		t14 = /* @__PURE__ */ jsx(Controls, {});
+		$[23] = t13;
+		$[24] = t14;
+	} else {
+		t13 = $[23];
+		t14 = $[24];
+	}
+	let t15;
+	if ($[25] !== showMinimap) {
+		t15 = showMinimap && /* @__PURE__ */ jsx(MiniMap, {
+			nodeColor: getNodeColor,
+			maskColor: minimapMaskColor
+		});
+		$[25] = showMinimap;
+		$[26] = t15;
+	} else t15 = $[26];
+	let t16;
+	if ($[27] !== handleNodeClick || $[28] !== handlePaneClick || $[29] !== layoutedEdges || $[30] !== nodes_0 || $[31] !== t15) {
+		t16 = /* @__PURE__ */ jsxs(ReactFlow, {
+			nodes: nodes_0,
+			edges: layoutedEdges,
+			onNodeClick: handleNodeClick,
+			onPaneClick: handlePaneClick,
+			nodeTypes,
+			fitView: true,
+			fitViewOptions,
+			minZoom: .1,
+			maxZoom: 2,
+			proOptions,
+			nodesDraggable: false,
+			nodesConnectable: false,
+			children: [
+				t13,
+				t14,
+				t15
+			]
+		});
+		$[27] = handleNodeClick;
+		$[28] = handlePaneClick;
+		$[29] = layoutedEdges;
+		$[30] = nodes_0;
+		$[31] = t15;
+		$[32] = t16;
+	} else t16 = $[32];
+	let t17;
+	if ($[33] !== t12 || $[34] !== t16) {
+		t17 = /* @__PURE__ */ jsxs("div", {
+			style: graphContainerStyle,
+			children: [t12, t16]
+		});
+		$[33] = t12;
+		$[34] = t16;
+		$[35] = t17;
+	} else t17 = $[35];
+	let t18;
+	if ($[36] !== handleCloseDetails || $[37] !== selectedNode || $[38] !== showDetails) {
+		t18 = showDetails && selectedNode && /* @__PURE__ */ jsx(PipelineGraphDetails, {
+			node: selectedNode,
+			onClose: handleCloseDetails
+		});
+		$[36] = handleCloseDetails;
+		$[37] = selectedNode;
+		$[38] = showDetails;
+		$[39] = t18;
+	} else t18 = $[39];
+	let t19;
+	if ($[40] !== className || $[41] !== t17 || $[42] !== t18) {
+		t19 = /* @__PURE__ */ jsxs("div", {
+			style: containerStyle,
+			className,
+			children: [t17, t18]
+		});
+		$[40] = className;
+		$[41] = t17;
+		$[42] = t18;
+		$[43] = t19;
+	} else t19 = $[43];
+	return t19;
+});
+function _temp() {
+	return new Set(defaultVisibleTypes);
+}
+
+//#endregion
+export { PipelineGraph };

package/dist/components/logs/execution-log-payload.d.mts

@@ -0,0 +1,12 @@
+import { ExecutionLogItem } from "../../types.mjs";
+import * as react from "react";
+
+//#region src/components/logs/execution-log-payload.d.ts
+interface ExecutionLogPayloadPanelProps {
+  log: ExecutionLogItem | null;
+}
+declare function ExecutionLogPayloadPanel({
+  log
+}: ExecutionLogPayloadPanelProps): react.JSX.Element | null;
+//#endregion
+export { ExecutionLogPayloadPanel, ExecutionLogPayloadPanelProps };

package/dist/components/logs/execution-log-payload.mjs

@@ -0,0 +1,79 @@
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Badge } from "@ucdjs-internal/shared-ui/ui/badge";
+
+//#region src/components/logs/execution-log-payload.tsx
+function ExecutionLogPayloadPanel(t0) {
+	const $ = c(16);
+	const { log } = t0;
+	if (!log) return null;
+	let t1;
+	if ($[0] !== log.message || $[1] !== log.payload || $[2] !== log.stream) {
+		t1 = log.payload ?? {
+			message: log.message,
+			stream: log.stream
+		};
+		$[0] = log.message;
+		$[1] = log.payload;
+		$[2] = log.stream;
+		$[3] = t1;
+	} else t1 = $[3];
+	const payload = t1;
+	let t2;
+	if ($[4] !== payload) {
+		t2 = JSON.stringify(payload, null, 2);
+		$[4] = payload;
+		$[5] = t2;
+	} else t2 = $[5];
+	const jsonString = t2;
+	let t3;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			className: "text-sm font-medium",
+			children: "Payload"
+		});
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== payload.event) {
+		t4 = payload.event && /* @__PURE__ */ jsx(Badge, {
+			variant: "outline",
+			className: "text-xs",
+			children: payload.event.type
+		});
+		$[7] = payload.event;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between mb-3",
+			children: [t3, t4]
+		});
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== jsonString) {
+		t6 = /* @__PURE__ */ jsx("pre", {
+			className: "text-xs font-mono whitespace-pre-wrap break-words",
+			children: /* @__PURE__ */ jsx("code", { children: jsonString })
+		});
+		$[11] = jsonString;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t5 || $[14] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("div", {
+			className: "border border-border rounded-lg bg-background p-4",
+			children: [t5, t6]
+		});
+		$[13] = t5;
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	return t7;
+}
+
+//#endregion
+export { ExecutionLogPayloadPanel };

package/dist/components/logs/execution-log-table.d.mts

@@ -0,0 +1,16 @@
+import { ExecutionLogItem } from "../../types.mjs";
+import * as react from "react";
+
+//#region src/components/logs/execution-log-table.d.ts
+interface ExecutionLogTableProps {
+  logs: ExecutionLogItem[];
+  expandedLogId: string | null;
+  onToggle: (logId: string) => void;
+}
+declare function ExecutionLogTable({
+  logs,
+  expandedLogId,
+  onToggle
+}: ExecutionLogTableProps): react.JSX.Element;
+//#endregion
+export { ExecutionLogTable, ExecutionLogTableProps };