@ucdjs/pipelines-ui 0.0.1-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-PRESENT Lucas Nørgård
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,27 @@
+# @ucdjs/pipelines-ui
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![codecov][codecov-src]][codecov-href]
+
+> [!IMPORTANT]
+> This is an internal package. It may change without warning and is not subject to semantic versioning. Use at your own risk.
+
+A collection of core pipeline functionalities for the UCD project.
+
+## Installation
+
+```bash
+npm install @ucdjs/pipelines-ui
+```
+
+## 📄 License
+
+Published under [MIT License](./LICENSE).
+
+[npm-version-src]: https://img.shields.io/npm/v/@ucdjs/pipelines-ui?style=flat&colorA=18181B&colorB=4169E1
+[npm-version-href]: https://npmjs.com/package/@ucdjs/pipelines-ui
+[npm-downloads-src]: https://img.shields.io/npm/dm/@ucdjs/pipelines-ui?style=flat&colorA=18181B&colorB=4169E1
+[npm-downloads-href]: https://npmjs.com/package/@ucdjs/pipelines-ui
+[codecov-src]: https://img.shields.io/codecov/c/gh/ucdjs/ucd?style=flat&colorA=18181B&colorB=4169E1
+[codecov-href]: https://codecov.io/gh/ucdjs/ucd

package/dist/components/detail/execution-result.d.mts

@@ -0,0 +1,49 @@
+import { ExecuteResult } from "../../types.mjs";
+import * as react from "react";
+
+//#region src/components/detail/execution-result.d.ts
+interface ExecutionResultProps {
+  result: ExecuteResult;
+  className?: string;
+}
+declare function ExecutionResult({
+  result,
+  className
+}: ExecutionResultProps): react.JSX.Element;
+interface ExecutionSummaryProps {
+  totalFiles: number;
+  matchedFiles: number;
+  skippedFiles: number;
+  fallbackFiles: number;
+  totalOutputs: number;
+  durationMs: number;
+  className?: string;
+}
+/**
+ * Compact execution summary (without result wrapper)
+ */
+declare function ExecutionSummary({
+  totalFiles,
+  matchedFiles,
+  skippedFiles,
+  fallbackFiles,
+  totalOutputs,
+  durationMs,
+  className
+}: ExecutionSummaryProps): react.JSX.Element;
+interface ExecutionErrorsProps {
+  errors: Array<{
+    scope: string;
+    message: string;
+  }>;
+  className?: string;
+}
+/**
+ * List of execution errors
+ */
+declare function ExecutionErrors({
+  errors,
+  className
+}: ExecutionErrorsProps): react.JSX.Element | null;
+//#endregion
+export { ExecutionErrors, ExecutionErrorsProps, ExecutionResult, ExecutionResultProps, ExecutionSummary, ExecutionSummaryProps };

package/dist/components/detail/execution-result.mjs

@@ -0,0 +1,366 @@
+import { cn } from "../../lib/utils.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/detail/execution-result.tsx
+function ExecutionResult(t0) {
+	const $ = c(27);
+	const { result, className } = t0;
+	const isSuccess = result.success;
+	const t1 = isSuccess ? "bg-primary/10 border-primary/30" : "bg-destructive/10 border-destructive/40";
+	let t2;
+	if ($[0] !== className || $[1] !== t1) {
+		t2 = cn("rounded-lg border p-4", t1, className);
+		$[0] = className;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	const t3 = isSuccess ? "bg-primary" : "bg-destructive";
+	let t4;
+	if ($[3] !== t3) {
+		t4 = cn("w-2 h-2 rounded-full", t3);
+		$[3] = t3;
+		$[4] = t4;
+	} else t4 = $[4];
+	let t5;
+	if ($[5] !== t4) {
+		t5 = /* @__PURE__ */ jsx("div", { className: t4 });
+		$[5] = t4;
+		$[6] = t5;
+	} else t5 = $[6];
+	const t6 = isSuccess ? "text-primary" : "text-destructive";
+	let t7;
+	if ($[7] !== t6) {
+		t7 = cn("text-sm font-medium", t6);
+		$[7] = t6;
+		$[8] = t7;
+	} else t7 = $[8];
+	const t8 = isSuccess ? "Completed" : "Failed";
+	let t9;
+	if ($[9] !== t7 || $[10] !== t8) {
+		t9 = /* @__PURE__ */ jsx("span", {
+			className: t7,
+			children: t8
+		});
+		$[9] = t7;
+		$[10] = t8;
+		$[11] = t9;
+	} else t9 = $[11];
+	let t10;
+	if ($[12] !== t5 || $[13] !== t9) {
+		t10 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 mb-2",
+			children: [t5, t9]
+		});
+		$[12] = t5;
+		$[13] = t9;
+		$[14] = t10;
+	} else t10 = $[14];
+	let t11;
+	if ($[15] !== result.summary) {
+		t11 = result.summary && /* @__PURE__ */ jsxs("div", {
+			className: "grid grid-cols-2 gap-4 text-xs sm:grid-cols-3 lg:grid-cols-6",
+			children: [
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground block",
+					children: "Files"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-foreground",
+					children: result.summary.totalFiles
+				})] }),
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground block",
+					children: "Matched"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-primary",
+					children: result.summary.matchedFiles
+				})] }),
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground block",
+					children: "Skipped"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-foreground/80",
+					children: result.summary.skippedFiles
+				})] }),
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground block",
+					children: "Fallback"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-amber-400",
+					children: result.summary.fallbackFiles
+				})] }),
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground block",
+					children: "Outputs"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-foreground",
+					children: result.summary.totalOutputs
+				})] }),
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground block",
+					children: "Time"
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "text-foreground",
+					children: [Math.round(result.summary.durationMs), "ms"]
+				})] })
+			]
+		});
+		$[15] = result.summary;
+		$[16] = t11;
+	} else t11 = $[16];
+	let t12;
+	if ($[17] !== result.error) {
+		t12 = result.error && /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-destructive mt-2",
+			children: result.error
+		});
+		$[17] = result.error;
+		$[18] = t12;
+	} else t12 = $[18];
+	let t13;
+	if ($[19] !== result.errors) {
+		t13 = result.errors && result.errors.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "mt-3 space-y-1",
+			children: result.errors.map(_temp)
+		});
+		$[19] = result.errors;
+		$[20] = t13;
+	} else t13 = $[20];
+	let t14;
+	if ($[21] !== t10 || $[22] !== t11 || $[23] !== t12 || $[24] !== t13 || $[25] !== t2) {
+		t14 = /* @__PURE__ */ jsxs("div", {
+			className: t2,
+			children: [
+				t10,
+				t11,
+				t12,
+				t13
+			]
+		});
+		$[21] = t10;
+		$[22] = t11;
+		$[23] = t12;
+		$[24] = t13;
+		$[25] = t2;
+		$[26] = t14;
+	} else t14 = $[26];
+	return t14;
+}
+function _temp(err) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "text-xs",
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: "text-destructive",
+				children: [
+					"[",
+					err.scope,
+					"]"
+				]
+			}),
+			" ",
+			/* @__PURE__ */ jsx("span", {
+				className: "text-destructive/90",
+				children: err.message
+			})
+		]
+	}, `${err.scope}-${err.message}`);
+}
+/**
+* Compact execution summary (without result wrapper)
+*/
+function ExecutionSummary(t0) {
+	const $ = c(30);
+	const { totalFiles, matchedFiles, skippedFiles, fallbackFiles, totalOutputs, durationMs, className } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = cn("grid grid-cols-2 gap-4 text-xs sm:grid-cols-3 lg:grid-cols-6", className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground block",
+			children: "Files"
+		});
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== totalFiles) {
+		t3 = /* @__PURE__ */ jsxs("div", { children: [t2, /* @__PURE__ */ jsx("span", {
+			className: "text-foreground",
+			children: totalFiles
+		})] });
+		$[3] = totalFiles;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground block",
+			children: "Matched"
+		});
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== matchedFiles) {
+		t5 = /* @__PURE__ */ jsxs("div", { children: [t4, /* @__PURE__ */ jsx("span", {
+			className: "text-primary",
+			children: matchedFiles
+		})] });
+		$[6] = matchedFiles;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground block",
+			children: "Skipped"
+		});
+		$[8] = t6;
+	} else t6 = $[8];
+	let t7;
+	if ($[9] !== skippedFiles) {
+		t7 = /* @__PURE__ */ jsxs("div", { children: [t6, /* @__PURE__ */ jsx("span", {
+			className: "text-foreground/80",
+			children: skippedFiles
+		})] });
+		$[9] = skippedFiles;
+		$[10] = t7;
+	} else t7 = $[10];
+	let t8;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground block",
+			children: "Fallback"
+		});
+		$[11] = t8;
+	} else t8 = $[11];
+	let t9;
+	if ($[12] !== fallbackFiles) {
+		t9 = /* @__PURE__ */ jsxs("div", { children: [t8, /* @__PURE__ */ jsx("span", {
+			className: "text-amber-400",
+			children: fallbackFiles
+		})] });
+		$[12] = fallbackFiles;
+		$[13] = t9;
+	} else t9 = $[13];
+	let t10;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground block",
+			children: "Outputs"
+		});
+		$[14] = t10;
+	} else t10 = $[14];
+	let t11;
+	if ($[15] !== totalOutputs) {
+		t11 = /* @__PURE__ */ jsxs("div", { children: [t10, /* @__PURE__ */ jsx("span", {
+			className: "text-foreground",
+			children: totalOutputs
+		})] });
+		$[15] = totalOutputs;
+		$[16] = t11;
+	} else t11 = $[16];
+	let t12;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground block",
+			children: "Time"
+		});
+		$[17] = t12;
+	} else t12 = $[17];
+	let t13;
+	if ($[18] !== durationMs) {
+		t13 = Math.round(durationMs);
+		$[18] = durationMs;
+		$[19] = t13;
+	} else t13 = $[19];
+	let t14;
+	if ($[20] !== t13) {
+		t14 = /* @__PURE__ */ jsxs("div", { children: [t12, /* @__PURE__ */ jsxs("span", {
+			className: "text-foreground",
+			children: [t13, "ms"]
+		})] });
+		$[20] = t13;
+		$[21] = t14;
+	} else t14 = $[21];
+	let t15;
+	if ($[22] !== t1 || $[23] !== t11 || $[24] !== t14 || $[25] !== t3 || $[26] !== t5 || $[27] !== t7 || $[28] !== t9) {
+		t15 = /* @__PURE__ */ jsxs("div", {
+			className: t1,
+			children: [
+				t3,
+				t5,
+				t7,
+				t9,
+				t11,
+				t14
+			]
+		});
+		$[22] = t1;
+		$[23] = t11;
+		$[24] = t14;
+		$[25] = t3;
+		$[26] = t5;
+		$[27] = t7;
+		$[28] = t9;
+		$[29] = t15;
+	} else t15 = $[29];
+	return t15;
+}
+/**
+* List of execution errors
+*/
+function ExecutionErrors(t0) {
+	const $ = c(7);
+	const { errors, className } = t0;
+	if (errors.length === 0) return null;
+	let t1;
+	if ($[0] !== className) {
+		t1 = cn("space-y-1", className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== errors) {
+		t2 = errors.map(_temp2);
+		$[2] = errors;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t1 || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			children: t2
+		});
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+}
+function _temp2(err) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "text-xs",
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: "text-destructive",
+				children: [
+					"[",
+					err.scope,
+					"]"
+				]
+			}),
+			" ",
+			/* @__PURE__ */ jsx("span", {
+				className: "text-destructive/90",
+				children: err.message
+			})
+		]
+	}, `${err.scope}-${err.message}`);
+}
+
+//#endregion
+export { ExecutionErrors, ExecutionResult, ExecutionSummary };

package/dist/components/detail/version-selector.d.mts

@@ -0,0 +1,21 @@
+import * as react from "react";
+
+//#region src/components/detail/version-selector.d.ts
+interface VersionSelectorProps {
+  versions: string[];
+  selectedVersions: Set<string>;
+  onToggleVersion: (version: string) => void;
+  onSelectAll?: () => void;
+  onDeselectAll?: () => void;
+  className?: string;
+}
+declare function VersionSelector({
+  versions,
+  selectedVersions,
+  onToggleVersion,
+  onSelectAll,
+  onDeselectAll,
+  className
+}: VersionSelectorProps): react.JSX.Element;
+//#endregion
+export { VersionSelector, VersionSelectorProps };

package/dist/components/detail/version-selector.mjs

@@ -0,0 +1,132 @@
+import { cn } from "../../lib/utils.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/detail/version-selector.tsx
+function VersionSelector(t0) {
+	const $ = c(25);
+	const { versions, selectedVersions, onToggleVersion, onSelectAll, onDeselectAll, className } = t0;
+	let map;
+	if ($[0] !== onToggleVersion || $[1] !== versions) {
+		map = /* @__PURE__ */ new Map();
+		for (const v of versions) map.set(v, () => onToggleVersion(v));
+		$[0] = onToggleVersion;
+		$[1] = versions;
+		$[2] = map;
+	} else map = $[2];
+	const versionToggles = map;
+	let t1;
+	if ($[3] !== selectedVersions.size || $[4] !== versions.length) {
+		t1 = /* @__PURE__ */ jsxs("span", {
+			className: "text-xs text-muted-foreground uppercase tracking-wider",
+			children: [
+				"Versions (",
+				selectedVersions.size,
+				"/",
+				versions.length,
+				")"
+			]
+		});
+		$[3] = selectedVersions.size;
+		$[4] = versions.length;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== onDeselectAll || $[7] !== onSelectAll) {
+		t2 = (onSelectAll || onDeselectAll) && /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-2 text-xs",
+			children: [onSelectAll && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onSelectAll,
+				className: "text-muted-foreground hover:text-foreground",
+				children: "All"
+			}), onDeselectAll && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onDeselectAll,
+				className: "text-muted-foreground hover:text-foreground",
+				children: "None"
+			})]
+		});
+		$[6] = onDeselectAll;
+		$[7] = onSelectAll;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== t1 || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between mb-2",
+			children: [t1, t2]
+		});
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== selectedVersions || $[13] !== versionToggles || $[14] !== versions) {
+		let t5;
+		if ($[16] !== selectedVersions || $[17] !== versionToggles) {
+			t5 = (version) => /* @__PURE__ */ jsx(VersionTag, {
+				version,
+				selected: selectedVersions.has(version),
+				onToggle: versionToggles.get(version)
+			}, version);
+			$[16] = selectedVersions;
+			$[17] = versionToggles;
+			$[18] = t5;
+		} else t5 = $[18];
+		t4 = versions.map(t5);
+		$[12] = selectedVersions;
+		$[13] = versionToggles;
+		$[14] = versions;
+		$[15] = t4;
+	} else t4 = $[15];
+	let t5;
+	if ($[19] !== t4) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap gap-1.5",
+			children: t4
+		});
+		$[19] = t4;
+		$[20] = t5;
+	} else t5 = $[20];
+	let t6;
+	if ($[21] !== className || $[22] !== t3 || $[23] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", {
+			className,
+			children: [t3, t5]
+		});
+		$[21] = className;
+		$[22] = t3;
+		$[23] = t5;
+		$[24] = t6;
+	} else t6 = $[24];
+	return t6;
+}
+function VersionTag(t0) {
+	const $ = c(6);
+	const { version, selected, onToggle } = t0;
+	const t1 = selected ? "bg-primary text-primary-foreground" : "bg-secondary text-secondary-foreground hover:bg-secondary/80";
+	let t2;
+	if ($[0] !== t1) {
+		t2 = cn("px-2.5 py-1 text-xs rounded transition-colors", t1);
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== onToggle || $[3] !== t2 || $[4] !== version) {
+		t3 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: onToggle,
+			className: t2,
+			children: version
+		});
+		$[2] = onToggle;
+		$[3] = t2;
+		$[4] = version;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
+}
+
+//#endregion
+export { VersionSelector };

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

@@ -0,0 +1,14 @@
+import * as react from "react";
+import { PipelineGraphNode } from "@ucdjs/pipelines-core";
+
+//#region src/components/graph/details.d.ts
+interface PipelineGraphDetailsProps {
+  node: PipelineGraphNode | null;
+  onClose: () => void;
+}
+declare function PipelineGraphDetails({
+  node,
+  onClose
+}: PipelineGraphDetailsProps): react.JSX.Element | null;
+//#endregion
+export { PipelineGraphDetails, PipelineGraphDetailsProps };