@ucdjs/pipelines-ui 0.0.1-beta.1

package/dist/components/graph/details.mjs

@@ -0,0 +1,369 @@
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/graph/details.tsx
+const containerStyle = {
+	width: "280px",
+	backgroundColor: "#ffffff",
+	borderLeft: "1px solid #e5e7eb",
+	display: "flex",
+	flexDirection: "column",
+	height: "100%",
+	boxShadow: "-2px 0 8px rgba(0,0,0,0.05)",
+	fontFamily: "system-ui, -apple-system, sans-serif"
+};
+const headerStyle = {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	padding: "12px",
+	borderBottom: "1px solid #e5e7eb"
+};
+const closeButtonStyle = {
+	padding: "4px",
+	color: "#9ca3af",
+	background: "none",
+	border: "none",
+	borderRadius: "4px",
+	cursor: "pointer",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center"
+};
+const contentStyle = {
+	flex: 1,
+	padding: "12px",
+	overflowY: "auto"
+};
+const detailsContainerStyle = {
+	display: "flex",
+	flexDirection: "column",
+	gap: "12px"
+};
+const detailRowStyle = {
+	display: "flex",
+	flexDirection: "column",
+	gap: "2px"
+};
+const detailLabelStyle = {
+	fontSize: "11px",
+	fontWeight: 500,
+	color: "#6b7280",
+	textTransform: "uppercase",
+	letterSpacing: "0.025em"
+};
+const detailValueStyle = {
+	fontSize: "13px",
+	color: "#111827",
+	fontFamily: "ui-monospace, monospace",
+	wordBreak: "break-all"
+};
+const badgeStyleCache = /* @__PURE__ */ new Map();
+function getBadgeStyle(type) {
+	let cached = badgeStyleCache.get(type);
+	if (!cached) {
+		const c = {
+			source: {
+				bg: "#eef2ff",
+				color: "#4f46e5"
+			},
+			file: {
+				bg: "#ecfdf5",
+				color: "#059669"
+			},
+			route: {
+				bg: "#fffbeb",
+				color: "#d97706"
+			},
+			artifact: {
+				bg: "#f5f3ff",
+				color: "#7c3aed"
+			},
+			output: {
+				bg: "#f0f9ff",
+				color: "#0284c7"
+			}
+		}[type] ?? {
+			bg: "#f3f4f6",
+			color: "#6b7280"
+		};
+		cached = {
+			padding: "2px 8px",
+			fontSize: "11px",
+			fontWeight: 600,
+			borderRadius: "4px",
+			textTransform: "uppercase",
+			letterSpacing: "0.025em",
+			backgroundColor: c.bg,
+			color: c.color
+		};
+		badgeStyleCache.set(type, cached);
+	}
+	return cached;
+}
+function DetailRow(t0) {
+	const $ = c(7);
+	const { label, value } = t0;
+	let t1;
+	if ($[0] !== label) {
+		t1 = /* @__PURE__ */ jsx("span", {
+			style: detailLabelStyle,
+			children: label
+		});
+		$[0] = label;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== value) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			style: detailValueStyle,
+			children: value
+		});
+		$[2] = value;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t1 || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsxs("div", {
+			style: detailRowStyle,
+			children: [t1, t2]
+		});
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+}
+function NodeDetails(t0) {
+	const $ = c(29);
+	const { node } = t0;
+	switch (node.type) {
+		case "source": {
+			let t1;
+			if ($[0] !== node.version) {
+				t1 = /* @__PURE__ */ jsx(DetailRow, {
+					label: "Version",
+					value: node.version
+				});
+				$[0] = node.version;
+				$[1] = t1;
+			} else t1 = $[1];
+			return t1;
+		}
+		case "file": {
+			let t1;
+			if ($[2] !== node.file.name) {
+				t1 = /* @__PURE__ */ jsx(DetailRow, {
+					label: "Name",
+					value: node.file.name
+				});
+				$[2] = node.file.name;
+				$[3] = t1;
+			} else t1 = $[3];
+			let t2;
+			if ($[4] !== node.file.path) {
+				t2 = /* @__PURE__ */ jsx(DetailRow, {
+					label: "Path",
+					value: node.file.path
+				});
+				$[4] = node.file.path;
+				$[5] = t2;
+			} else t2 = $[5];
+			let t3;
+			if ($[6] !== node.file.dir) {
+				t3 = /* @__PURE__ */ jsx(DetailRow, {
+					label: "Directory",
+					value: node.file.dir
+				});
+				$[6] = node.file.dir;
+				$[7] = t3;
+			} else t3 = $[7];
+			let t4;
+			if ($[8] !== node.file.ext) {
+				t4 = /* @__PURE__ */ jsx(DetailRow, {
+					label: "Extension",
+					value: node.file.ext
+				});
+				$[8] = node.file.ext;
+				$[9] = t4;
+			} else t4 = $[9];
+			let t5;
+			if ($[10] !== node.file.version) {
+				t5 = /* @__PURE__ */ jsx(DetailRow, {
+					label: "Version",
+					value: node.file.version
+				});
+				$[10] = node.file.version;
+				$[11] = t5;
+			} else t5 = $[11];
+			let t6;
+			if ($[12] !== t1 || $[13] !== t2 || $[14] !== t3 || $[15] !== t4 || $[16] !== t5) {
+				t6 = /* @__PURE__ */ jsxs(Fragment, { children: [
+					t1,
+					t2,
+					t3,
+					t4,
+					t5
+				] });
+				$[12] = t1;
+				$[13] = t2;
+				$[14] = t3;
+				$[15] = t4;
+				$[16] = t5;
+				$[17] = t6;
+			} else t6 = $[17];
+			return t6;
+		}
+		case "route": {
+			let t1;
+			if ($[18] !== node.routeId) {
+				t1 = /* @__PURE__ */ jsx(DetailRow, {
+					label: "Route ID",
+					value: node.routeId
+				});
+				$[18] = node.routeId;
+				$[19] = t1;
+			} else t1 = $[19];
+			return t1;
+		}
+		case "artifact": {
+			let t1;
+			if ($[20] !== node.artifactId) {
+				t1 = /* @__PURE__ */ jsx(DetailRow, {
+					label: "Artifact ID",
+					value: node.artifactId
+				});
+				$[20] = node.artifactId;
+				$[21] = t1;
+			} else t1 = $[21];
+			return t1;
+		}
+		case "output": {
+			const t1 = String(node.outputIndex);
+			let t2;
+			if ($[22] !== t1) {
+				t2 = /* @__PURE__ */ jsx(DetailRow, {
+					label: "Output Index",
+					value: t1
+				});
+				$[22] = t1;
+				$[23] = t2;
+			} else t2 = $[23];
+			let t3;
+			if ($[24] !== node.property) {
+				t3 = node.property && /* @__PURE__ */ jsx(DetailRow, {
+					label: "Property",
+					value: node.property
+				});
+				$[24] = node.property;
+				$[25] = t3;
+			} else t3 = $[25];
+			let t4;
+			if ($[26] !== t2 || $[27] !== t3) {
+				t4 = /* @__PURE__ */ jsxs(Fragment, { children: [t2, t3] });
+				$[26] = t2;
+				$[27] = t3;
+				$[28] = t4;
+			} else t4 = $[28];
+			return t4;
+		}
+	}
+}
+const closeIcon = /* @__PURE__ */ jsx("svg", {
+	width: "16",
+	height: "16",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	stroke: "currentColor",
+	children: /* @__PURE__ */ jsx("path", {
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: 2,
+		d: "M6 18L18 6M6 6l12 12"
+	})
+});
+function PipelineGraphDetails(t0) {
+	const $ = c(20);
+	const { node, onClose } = t0;
+	if (!node) return null;
+	let t1;
+	if ($[0] !== node.type) {
+		t1 = getBadgeStyle(node.type);
+		$[0] = node.type;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== node.type || $[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			style: t1,
+			children: node.type
+		});
+		$[2] = node.type;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== onClose) {
+		t3 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: onClose,
+			style: closeButtonStyle,
+			"aria-label": "Close details",
+			children: closeIcon
+		});
+		$[5] = onClose;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t2 || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsxs("div", {
+			style: headerStyle,
+			children: [t2, t3]
+		});
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== node.id) {
+		t5 = /* @__PURE__ */ jsx(DetailRow, {
+			label: "Node ID",
+			value: node.id
+		});
+		$[10] = node.id;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== node) {
+		t6 = /* @__PURE__ */ jsx(NodeDetails, { node });
+		$[12] = node;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t5 || $[15] !== t6) {
+		t7 = /* @__PURE__ */ jsx("div", {
+			style: contentStyle,
+			children: /* @__PURE__ */ jsxs("div", {
+				style: detailsContainerStyle,
+				children: [t5, t6]
+			})
+		});
+		$[14] = t5;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t4 || $[18] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			style: containerStyle,
+			children: [t4, t7]
+		});
+		$[17] = t4;
+		$[18] = t7;
+		$[19] = t8;
+	} else t8 = $[19];
+	return t8;
+}
+
+//#endregion
+export { PipelineGraphDetails };

package/dist/components/graph/filters.d.mts

@@ -0,0 +1,14 @@
+import * as react from "react";
+import { PipelineGraphNodeType } from "@ucdjs/pipelines-core";
+
+//#region src/components/graph/filters.d.ts
+interface PipelineGraphFiltersProps {
+  visibleTypes: Set<PipelineGraphNodeType>;
+  onToggleType: (type: PipelineGraphNodeType) => void;
+}
+declare function PipelineGraphFilters({
+  visibleTypes,
+  onToggleType
+}: PipelineGraphFiltersProps): react.JSX.Element;
+//#endregion
+export { PipelineGraphFilters, PipelineGraphFiltersProps };

package/dist/components/graph/filters.mjs

@@ -0,0 +1,183 @@
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+
+//#region src/components/graph/filters.tsx
+const nodeTypeLabels = {
+	source: {
+		label: "Source",
+		color: "#6366f1"
+	},
+	file: {
+		label: "File",
+		color: "#10b981"
+	},
+	route: {
+		label: "Route",
+		color: "#f59e0b"
+	},
+	artifact: {
+		label: "Artifact",
+		color: "#8b5cf6"
+	},
+	output: {
+		label: "Output",
+		color: "#0ea5e9"
+	}
+};
+const allNodeTypes = [
+	"source",
+	"file",
+	"route",
+	"artifact",
+	"output"
+];
+const containerStyle = {
+	display: "flex",
+	alignItems: "center",
+	gap: "6px",
+	padding: "8px 12px",
+	backgroundColor: "#ffffff",
+	borderRadius: "10px",
+	boxShadow: "0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06)",
+	fontFamily: "system-ui, -apple-system, sans-serif",
+	border: "1px solid #e5e7eb"
+};
+const labelStyle = {
+	fontSize: "11px",
+	fontWeight: 500,
+	color: "#6b7280",
+	marginRight: "4px",
+	textTransform: "uppercase",
+	letterSpacing: "0.05em"
+};
+const buttonStyleCache = /* @__PURE__ */ new Map();
+const dotStyleCache = /* @__PURE__ */ new Map();
+function getButtonStyle(color, isVisible) {
+	const key = `${color}-${isVisible}`;
+	let cached = buttonStyleCache.get(key);
+	if (!cached) {
+		cached = {
+			display: "flex",
+			alignItems: "center",
+			gap: "6px",
+			padding: "4px 10px",
+			fontSize: "12px",
+			fontWeight: 500,
+			borderRadius: "6px",
+			border: "none",
+			cursor: "pointer",
+			transition: "all 0.15s ease",
+			backgroundColor: isVisible ? `${color}15` : "#f3f4f6",
+			color: isVisible ? color : "#9ca3af",
+			opacity: isVisible ? 1 : .6
+		};
+		buttonStyleCache.set(key, cached);
+	}
+	return cached;
+}
+function getDotStyle(color, isVisible) {
+	const key = `${color}-${isVisible}`;
+	let cached = dotStyleCache.get(key);
+	if (!cached) {
+		cached = {
+			width: "8px",
+			height: "8px",
+			borderRadius: "50%",
+			backgroundColor: color,
+			opacity: isVisible ? 1 : .3,
+			transition: "opacity 0.15s ease"
+		};
+		dotStyleCache.set(key, cached);
+	}
+	return cached;
+}
+const FilterButton = memo((t0) => {
+	const $ = c(17);
+	const { type, config, isVisible, onToggle } = t0;
+	let t1;
+	if ($[0] !== onToggle || $[1] !== type) {
+		t1 = () => {
+			onToggle(type);
+		};
+		$[0] = onToggle;
+		$[1] = type;
+		$[2] = t1;
+	} else t1 = $[2];
+	const handleClick = t1;
+	let t2;
+	if ($[3] !== config.color || $[4] !== isVisible) {
+		t2 = getButtonStyle(config.color, isVisible);
+		$[3] = config.color;
+		$[4] = isVisible;
+		$[5] = t2;
+	} else t2 = $[5];
+	const t3 = isVisible ? `Hide ${config.label} nodes` : `Show ${config.label} nodes`;
+	let t4;
+	if ($[6] !== config.color || $[7] !== isVisible) {
+		t4 = getDotStyle(config.color, isVisible);
+		$[6] = config.color;
+		$[7] = isVisible;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx("span", { style: t4 });
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== config.label || $[12] !== handleClick || $[13] !== t2 || $[14] !== t3 || $[15] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: handleClick,
+			style: t2,
+			title: t3,
+			children: [t5, config.label]
+		});
+		$[11] = config.label;
+		$[12] = handleClick;
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = t5;
+		$[16] = t6;
+	} else t6 = $[16];
+	return t6;
+});
+function PipelineGraphFilters(t0) {
+	const $ = c(6);
+	const { visibleTypes, onToggleType } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx("span", {
+			style: labelStyle,
+			children: "Show:"
+		});
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== onToggleType || $[2] !== visibleTypes) {
+		t2 = allNodeTypes.map((type) => /* @__PURE__ */ jsx(FilterButton, {
+			type,
+			config: nodeTypeLabels[type],
+			isVisible: visibleTypes.has(type),
+			onToggle: onToggleType
+		}, type));
+		$[1] = onToggleType;
+		$[2] = visibleTypes;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t2) {
+		t3 = /* @__PURE__ */ jsxs("div", {
+			style: containerStyle,
+			children: [t1, t2]
+		});
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
+}
+
+//#endregion
+export { PipelineGraphFilters };

package/dist/components/graph/node-types.d.mts

@@ -0,0 +1,10 @@
+//#region src/components/graph/node-types.d.ts
+declare const nodeTypes: {
+  readonly source: any;
+  readonly file: any;
+  readonly route: any;
+  readonly artifact: any;
+  readonly output: any;
+};
+//#endregion
+export { nodeTypes };

package/dist/components/graph/node-types.mjs

@@ -0,0 +1,13 @@
+import { ArtifactNode, FileNode, OutputNode, RouteNode, SourceNode } from "./nodes.mjs";
+
+//#region src/components/graph/node-types.ts
+const nodeTypes = {
+	source: SourceNode,
+	file: FileNode,
+	route: RouteNode,
+	artifact: ArtifactNode,
+	output: OutputNode
+};
+
+//#endregion
+export { nodeTypes };

package/dist/components/graph/nodes.d.mts

@@ -0,0 +1,14 @@
+import { PipelineGraphNode } from "@ucdjs/pipelines-core";
+
+//#region src/components/graph/nodes.d.ts
+interface PipelineNodeData {
+  pipelineNode: PipelineGraphNode;
+  label: string;
+}
+declare const SourceNode: any;
+declare const FileNode: any;
+declare const RouteNode: any;
+declare const ArtifactNode: any;
+declare const OutputNode: any;
+//#endregion
+export { ArtifactNode, FileNode, OutputNode, PipelineNodeData, RouteNode, SourceNode };