@burdenoff/microfe-bigconsole 2026.624.2 → 2026.626.1

package/dist/bigconsole/pages/PipelineBuilderPage.js

@@ -5,75 +5,76 @@ import n from "../hooks/usePipelineOperations.js";
 import r from "../components/pipeline/PipelineStatusBadge.js";
 import { memo as i, useCallback as a, useEffect as o, useMemo as s, useState as c } from "react";
 import { useParams as l } from "react-router-dom";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { GlassCard as u, IllustratedEmptyState as d, PagePurpose as f } from "@burdenoff/fe-libs/ui";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/bigconsole/pages/PipelineBuilderPage.tsx
-var f = ({ className: e }) => /* @__PURE__ */ u("svg", {
+var h = ({ className: e }) => /* @__PURE__ */ p("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ u("path", {
+	children: /* @__PURE__ */ p("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M10 19l-7-7m0 0l7-7m-7 7h18"
 	})
-}), p = ({ className: e }) => /* @__PURE__ */ u("svg", {
+}), g = ({ className: e }) => /* @__PURE__ */ p("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ u("path", {
+	children: /* @__PURE__ */ p("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M12 4v16m8-8H4"
 	})
-}), m = ({ className: e }) => /* @__PURE__ */ u("svg", {
+}), _ = ({ className: e }) => /* @__PURE__ */ p("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ u("path", {
+	children: /* @__PURE__ */ p("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
 	})
-}), h = ({ className: e }) => /* @__PURE__ */ u("svg", {
+}), v = ({ className: e }) => /* @__PURE__ */ p("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ u("path", {
+	children: /* @__PURE__ */ p("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M5 15l7-7 7 7"
 	})
-}), g = ({ className: e }) => /* @__PURE__ */ u("svg", {
+}), y = ({ className: e }) => /* @__PURE__ */ p("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ u("path", {
+	children: /* @__PURE__ */ p("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M19 9l-7 7-7-7"
 	})
-}), _ = ({ className: e }) => /* @__PURE__ */ u("svg", {
+}), b = ({ className: e }) => /* @__PURE__ */ p("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ u("path", {
+	children: /* @__PURE__ */ p("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
 	})
-}), v = [
+}), x = [
 	{
 		value: "draft",
 		label: "Draft"
@@ -86,7 +87,7 @@ var f = ({ className: e }) => /* @__PURE__ */ u("svg", {
 		value: "inactive",
 		label: "Inactive"
 	}
-], y = [
+], S = [
 	{
 		value: "fail",
 		label: "Fail",
@@ -102,7 +103,7 @@ var f = ({ className: e }) => /* @__PURE__ */ u("svg", {
 		label: "Fallback",
 		description: "Use fallback value on error"
 	}
-], b = {
+], C = {
 	parserId: "",
 	parserName: "",
 	parserType: null,
@@ -112,14 +113,14 @@ var f = ({ className: e }) => /* @__PURE__ */ u("svg", {
 	onError: "fail",
 	fallbackValue: "",
 	description: ""
-}, x = i(function() {
-	let { pipelineId: i } = l(), x = e(), S = !!i && i !== "new", C = "default", [w, T] = c(""), [E, D] = c(""), [O, k] = c("draft"), [A, j] = c([]), [M, N] = c(1), [P, F] = c(!1), [I, L] = c(null), { loading: R, error: z, fetchPipeline: B, createPipeline: V, updatePipeline: H } = n({
-		consoleId: C,
+}, w = i(function() {
+	let { pipelineId: i } = l(), w = e(), T = !!i && i !== "new", E = "default", [D, O] = c(""), [k, A] = c(""), [j, M] = c("draft"), [N, P] = c([]), [F, I] = c(1), [L, R] = c(!1), [z, B] = c(null), { loading: V, error: H, fetchPipeline: U, createPipeline: W, updatePipeline: G } = n({
+		consoleId: E,
 		skipFetch: !0
-	}), { parsers: U } = t({ consoleId: C });
+	}), { parsers: K } = t({ consoleId: E });
 	o(() => {
-		S && i && B(i).then((e) => {
-			e && (T(e.name), D(e.description || ""), k(e.status), N(e.version), j((e.stages || []).map((e) => ({
+		T && i && U(i).then((e) => {
+			e && (O(e.name), A(e.description || ""), M(e.status), I(e.version), P((e.stages || []).map((e) => ({
 				id: e.id,
 				parserId: e.parserId,
 				parserName: e.parserName || "",
@@ -133,38 +134,38 @@ var f = ({ className: e }) => /* @__PURE__ */ u("svg", {
 			}))));
 		});
 	}, [
-		S,
+		T,
 		i,
-		B
+		U
 	]);
-	let W = s(() => !w.trim() || A.length === 0 ? !1 : A.every((e) => e.parserId && e.inputKey && e.outputKey), [w, A]), G = a(() => {
-		x("/pipelines");
-	}, [x]), K = a(() => {
-		j((e) => [...e, { ...b }]);
-	}, []), q = a((e) => {
-		j((t) => t.filter((t, n) => n !== e));
-	}, []), J = a((e, t) => {
-		j((n) => {
+	let q = s(() => !D.trim() || N.length === 0 ? !1 : N.every((e) => e.parserId && e.inputKey && e.outputKey), [D, N]), J = a(() => {
+		w("/pipelines");
+	}, [w]), Y = a(() => {
+		P((e) => [...e, { ...C }]);
+	}, []), X = a((e) => {
+		P((t) => t.filter((t, n) => n !== e));
+	}, []), Z = a((e, t) => {
+		P((n) => {
 			let r = [...n], i = t === "up" ? e - 1 : e + 1;
 			return i < 0 || i >= r.length ? n : ([r[e], r[i]] = [r[i], r[e]], r);
 		});
-	}, []), Y = a((e, t) => {
-		j((n) => n.map((n, r) => r === e ? {
+	}, []), Q = a((e, t) => {
+		P((n) => n.map((n, r) => r === e ? {
 			...n,
 			...t
 		} : n));
-	}, []), X = a((e, t) => {
-		let n = U.find((e) => e.id === t);
-		n && Y(e, {
+	}, []), $ = a((e, t) => {
+		let n = K.find((e) => e.id === t);
+		n && Q(e, {
 			parserId: n.id,
 			parserName: n.name,
 			parserType: n.type
 		});
-	}, [U, Y]), Z = a(async () => {
-		if (W) {
-			F(!0), L(null);
+	}, [K, Q]), ee = a(async () => {
+		if (q) {
+			R(!0), B(null);
 			try {
-				let e = A.map((e) => ({
+				let e = N.map((e) => ({
 					parserId: e.parserId,
 					parserName: e.parserName,
 					parserType: e.parserType || void 0,
@@ -175,269 +176,274 @@ var f = ({ className: e }) => /* @__PURE__ */ u("svg", {
 					fallbackValue: e.fallbackValue ? JSON.parse(e.fallbackValue) : void 0,
 					description: e.description || void 0
 				}));
-				if (S && i) await H(i, {
-					name: w,
-					description: E || void 0,
-					status: O
-				}, M) && x(`/pipelines/${i}`);
+				if (T && i) await G(i, {
+					name: D,
+					description: k || void 0,
+					status: j
+				}, F) && w(`/pipelines/${i}`);
 				else {
-					let t = await V({
-						consoleId: C,
-						name: w,
-						description: E || void 0,
-						status: O,
+					let t = await W({
+						consoleId: E,
+						name: D,
+						description: k || void 0,
+						status: j,
 						stages: e
 					});
-					t && x(`/pipelines/${t.id}`);
+					t && w(`/pipelines/${t.id}`);
 				}
 			} catch (e) {
-				L(e instanceof Error ? e.message : "Failed to save pipeline");
+				B(e instanceof Error ? e.message : "Failed to save pipeline");
 			} finally {
-				F(!1);
+				R(!1);
 			}
 		}
 	}, [
-		W,
-		C,
-		S,
-		i,
-		w,
+		q,
 		E,
-		O,
-		A,
-		M,
-		V,
-		H,
-		x
+		T,
+		i,
+		D,
+		k,
+		j,
+		N,
+		F,
+		W,
+		G,
+		w
 	]);
-	return R && S ? /* @__PURE__ */ u("div", {
+	return V && T ? /* @__PURE__ */ p("div", {
 		className: "p-6",
-		children: /* @__PURE__ */ d("div", {
+		children: /* @__PURE__ */ m("div", {
 			className: "flex flex-col items-center justify-center py-16",
-			children: [/* @__PURE__ */ d("svg", {
+			children: [/* @__PURE__ */ m("svg", {
 				className: "w-8 h-8 text-action-primary-bg animate-spin mb-4",
 				fill: "none",
 				viewBox: "0 0 24 24",
-				children: [/* @__PURE__ */ u("circle", {
+				children: [/* @__PURE__ */ p("circle", {
 					className: "opacity-25",
 					cx: "12",
 					cy: "12",
 					r: "10",
 					stroke: "currentColor",
 					strokeWidth: "4"
-				}), /* @__PURE__ */ u("path", {
+				}), /* @__PURE__ */ p("path", {
 					className: "opacity-75",
 					fill: "currentColor",
 					d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
 				})]
-			}), /* @__PURE__ */ u("p", {
+			}), /* @__PURE__ */ p("p", {
 				className: "text-sm text-text-secondary",
 				children: "Loading Pipeline..."
 			})]
 		})
-	}) : z ? /* @__PURE__ */ u("div", {
+	}) : H ? /* @__PURE__ */ p("div", {
 		className: "p-6",
-		children: /* @__PURE__ */ d("div", {
+		children: /* @__PURE__ */ m("div", {
 			className: "flex flex-col items-center justify-center py-16 text-center",
 			children: [
-				/* @__PURE__ */ u("div", {
+				/* @__PURE__ */ p("div", {
 					className: "p-3 rounded-full bg-state-error/10 mb-4",
-					children: /* @__PURE__ */ u(_, { className: "w-8 h-8 text-state-error" })
+					children: /* @__PURE__ */ p(b, { className: "w-8 h-8 text-state-error" })
 				}),
-				/* @__PURE__ */ u("h3", {
+				/* @__PURE__ */ p("h3", {
 					className: "text-lg font-medium text-text-primary mb-2",
 					children: "Failed to load Pipeline"
 				}),
-				/* @__PURE__ */ u("p", {
+				/* @__PURE__ */ p("p", {
 					className: "text-sm text-text-secondary mb-4",
-					children: z.message
+					children: H.message
 				}),
-				/* @__PURE__ */ u("button", {
+				/* @__PURE__ */ p("button", {
 					type: "button",
-					onClick: G,
+					onClick: J,
 					className: "px-4 py-2 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md transition-colors",
 					children: "Back to Pipelines"
 				})
 			]
 		})
-	}) : /* @__PURE__ */ d("div", {
+	}) : /* @__PURE__ */ m("div", {
 		className: "p-6",
 		children: [
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ m("div", {
 				className: "flex items-center justify-between mb-6",
-				children: [/* @__PURE__ */ d("div", {
+				children: [/* @__PURE__ */ m("div", {
 					className: "flex items-center gap-4",
-					children: [/* @__PURE__ */ u("button", {
+					children: [/* @__PURE__ */ p("button", {
 						type: "button",
-						onClick: G,
+						onClick: J,
 						className: "p-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors",
-						children: /* @__PURE__ */ u(f, { className: "w-5 h-5" })
-					}), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("h1", {
+						children: /* @__PURE__ */ p(h, { className: "w-5 h-5" })
+					}), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("h1", {
 						className: "text-2xl font-bold text-text-primary",
-						children: S ? "Edit Pipeline" : "Create Pipeline"
-					}), /* @__PURE__ */ u("p", {
+						children: T ? "Edit Pipeline" : "Create Pipeline"
+					}), /* @__PURE__ */ p("p", {
 						className: "text-sm text-text-secondary mt-1",
-						children: S ? "Update pipeline settings and stages" : "Create a new data transformation pipeline"
+						children: T ? "Update pipeline settings and stages" : "Create a new data transformation pipeline"
 					})] })]
-				}), /* @__PURE__ */ d("div", {
+				}), /* @__PURE__ */ m("div", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ u("button", {
+					children: [/* @__PURE__ */ p("button", {
 						type: "button",
-						onClick: G,
+						onClick: J,
 						className: "px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken hover:bg-border-default rounded-md transition-colors",
 						children: "Cancel"
-					}), /* @__PURE__ */ u("button", {
+					}), /* @__PURE__ */ p("button", {
 						type: "button",
-						onClick: Z,
-						disabled: !W || P,
+						onClick: ee,
+						disabled: !q || L,
 						className: "px-4 py-2 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md transition-colors disabled:opacity-50",
-						children: P ? "Saving..." : S ? "Save Changes" : "Create Pipeline"
+						children: L ? "Saving..." : T ? "Save Changes" : "Create Pipeline"
 					})]
 				})]
 			}),
-			I && /* @__PURE__ */ u("div", {
+			/* @__PURE__ */ p(f, {
+				className: "mb-6",
+				children: "Build a pipeline by chaining parser stages — each stage reads an input key, runs a parser, and writes a structured output key that the next stage (or a data sink) can use. Name it, add your stages in order, then test it before saving so your data flows end to end."
+			}),
+			z && /* @__PURE__ */ p("div", {
 				className: "mb-6 p-4 bg-state-error/10 border border-state-error/20 rounded-md",
-				children: /* @__PURE__ */ u("p", {
+				children: /* @__PURE__ */ p("p", {
 					className: "text-sm text-state-error",
-					children: I
+					children: z
 				})
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ m("div", {
 				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-				children: [/* @__PURE__ */ d("div", {
+				children: [/* @__PURE__ */ m("div", {
 					className: "lg:col-span-2 space-y-6",
-					children: [/* @__PURE__ */ d("div", {
+					children: [/* @__PURE__ */ m("div", {
 						className: "bg-bg-surface border border-border-default rounded-lg p-6",
-						children: [/* @__PURE__ */ u("h2", {
+						children: [/* @__PURE__ */ p("h2", {
 							className: "text-lg font-semibold text-text-primary mb-4",
 							children: "Basic Information"
-						}), /* @__PURE__ */ d("div", {
+						}), /* @__PURE__ */ m("div", {
 							className: "space-y-4",
 							children: [
-								/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
+								/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ m("label", {
 									className: "block text-sm font-medium text-text-primary mb-2",
-									children: ["Name ", /* @__PURE__ */ u("span", {
+									children: ["Name ", /* @__PURE__ */ p("span", {
 										className: "text-state-error",
 										children: "*"
 									})]
-								}), /* @__PURE__ */ u("input", {
+								}), /* @__PURE__ */ p("input", {
 									type: "text",
-									value: w,
-									onChange: (e) => T(e.target.value),
+									value: D,
+									onChange: (e) => O(e.target.value),
 									placeholder: "My Pipeline",
 									className: "w-full px-3 py-2 text-sm text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg"
 								})] }),
-								/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("label", {
+								/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
 									className: "block text-sm font-medium text-text-primary mb-2",
 									children: "Description"
-								}), /* @__PURE__ */ u("textarea", {
-									value: E,
-									onChange: (e) => D(e.target.value),
+								}), /* @__PURE__ */ p("textarea", {
+									value: k,
+									onChange: (e) => A(e.target.value),
 									placeholder: "What does this pipeline do?",
 									rows: 3,
 									className: "w-full px-3 py-2 text-sm text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg resize-none"
 								})] }),
-								/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("label", {
+								/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
 									className: "block text-sm font-medium text-text-primary mb-2",
 									children: "Status"
-								}), /* @__PURE__ */ u("select", {
-									value: O,
-									onChange: (e) => k(e.target.value),
+								}), /* @__PURE__ */ p("select", {
+									value: j,
+									onChange: (e) => M(e.target.value),
 									className: "w-full px-3 py-2 text-sm text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
-									children: v.map((e) => /* @__PURE__ */ u("option", {
+									children: x.map((e) => /* @__PURE__ */ p("option", {
 										value: e.value,
 										children: e.label
 									}, e.value))
 								})] })
 							]
 						})]
-					}), /* @__PURE__ */ d("div", {
-						className: "bg-bg-surface border border-border-default rounded-lg p-6",
-						children: [/* @__PURE__ */ d("div", {
+					}), /* @__PURE__ */ m(u, {
+						treatment: "glass",
+						glow: !0,
+						className: "p-6",
+						children: [/* @__PURE__ */ m("div", {
 							className: "flex items-center justify-between mb-4",
-							children: [/* @__PURE__ */ d("h2", {
+							children: [/* @__PURE__ */ m("h2", {
 								className: "text-lg font-semibold text-text-primary",
 								children: [
 									"Stages (",
-									A.length,
+									N.length,
 									")"
 								]
-							}), /* @__PURE__ */ d("button", {
+							}), /* @__PURE__ */ m("button", {
 								type: "button",
-								onClick: K,
+								onClick: Y,
 								className: "inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md transition-colors",
-								children: [/* @__PURE__ */ u(p, { className: "w-4 h-4" }), "Add Stage"]
+								children: [/* @__PURE__ */ p(g, { className: "w-4 h-4" }), "Add Stage"]
 							})]
-						}), A.length === 0 ? /* @__PURE__ */ d("div", {
-							className: "py-8 text-center",
-							children: [/* @__PURE__ */ u("p", {
-								className: "text-sm text-text-secondary mb-4",
-								children: "No stages yet. Add a stage to start building your pipeline."
-							}), /* @__PURE__ */ d("button", {
+						}), N.length === 0 ? /* @__PURE__ */ p(d, {
+							illustration: "empty-generic",
+							title: "No stages yet",
+							description: "Add a stage to start building your pipeline.",
+							action: /* @__PURE__ */ m("button", {
 								type: "button",
-								onClick: K,
+								onClick: Y,
 								className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md transition-colors",
-								children: [/* @__PURE__ */ u(p, { className: "w-4 h-4" }), "Add First Stage"]
-							})]
-						}) : /* @__PURE__ */ u("div", {
+								children: [/* @__PURE__ */ p(g, { className: "w-4 h-4" }), "Add First Stage"]
+							})
+						}) : /* @__PURE__ */ p("div", {
 							className: "space-y-4",
-							children: A.map((e, t) => /* @__PURE__ */ d("div", {
+							children: N.map((e, t) => /* @__PURE__ */ m("div", {
 								className: "p-4 bg-bg-sunken border border-border-default rounded-lg",
-								children: [/* @__PURE__ */ d("div", {
+								children: [/* @__PURE__ */ m("div", {
 									className: "flex items-center justify-between mb-4",
-									children: [/* @__PURE__ */ d("div", {
+									children: [/* @__PURE__ */ m("div", {
 										className: "flex items-center gap-2",
-										children: [/* @__PURE__ */ u("span", {
+										children: [/* @__PURE__ */ p("span", {
 											className: "w-6 h-6 flex items-center justify-center text-xs font-medium bg-action-primary-bg/10 text-action-primary-bg rounded-full",
 											children: t + 1
-										}), /* @__PURE__ */ u("span", {
+										}), /* @__PURE__ */ p("span", {
 											className: "font-medium text-text-primary",
 											children: e.parserName || `Stage ${t + 1}`
 										})]
-									}), /* @__PURE__ */ d("div", {
+									}), /* @__PURE__ */ m("div", {
 										className: "flex items-center gap-1",
 										children: [
-											/* @__PURE__ */ u("button", {
+											/* @__PURE__ */ p("button", {
 												type: "button",
-												onClick: () => J(t, "up"),
+												onClick: () => Z(t, "up"),
 												disabled: t === 0,
 												className: "p-1 text-text-secondary hover:text-text-primary hover:bg-bg-surface rounded disabled:opacity-30",
-												children: /* @__PURE__ */ u(h, { className: "w-4 h-4" })
+												children: /* @__PURE__ */ p(v, { className: "w-4 h-4" })
 											}),
-											/* @__PURE__ */ u("button", {
+											/* @__PURE__ */ p("button", {
 												type: "button",
-												onClick: () => J(t, "down"),
-												disabled: t === A.length - 1,
+												onClick: () => Z(t, "down"),
+												disabled: t === N.length - 1,
 												className: "p-1 text-text-secondary hover:text-text-primary hover:bg-bg-surface rounded disabled:opacity-30",
-												children: /* @__PURE__ */ u(g, { className: "w-4 h-4" })
+												children: /* @__PURE__ */ p(y, { className: "w-4 h-4" })
 											}),
-											/* @__PURE__ */ u("button", {
+											/* @__PURE__ */ p("button", {
 												type: "button",
-												onClick: () => q(t),
+												onClick: () => X(t),
 												className: "p-1 text-text-secondary hover:text-state-error hover:bg-state-error/10 rounded",
-												children: /* @__PURE__ */ u(m, { className: "w-4 h-4" })
+												children: /* @__PURE__ */ p(_, { className: "w-4 h-4" })
 											})
 										]
 									})]
-								}), /* @__PURE__ */ d("div", {
+								}), /* @__PURE__ */ m("div", {
 									className: "grid grid-cols-2 gap-4",
 									children: [
-										/* @__PURE__ */ d("div", {
+										/* @__PURE__ */ m("div", {
 											className: "col-span-2",
-											children: [/* @__PURE__ */ d("label", {
+											children: [/* @__PURE__ */ m("label", {
 												className: "block text-xs font-medium text-text-secondary mb-1",
-												children: ["Parser ", /* @__PURE__ */ u("span", {
+												children: ["Parser ", /* @__PURE__ */ p("span", {
 													className: "text-state-error",
 													children: "*"
 												})]
-											}), /* @__PURE__ */ d("select", {
+											}), /* @__PURE__ */ m("select", {
 												value: e.parserId,
-												onChange: (e) => X(t, e.target.value),
+												onChange: (e) => $(t, e.target.value),
 												className: "w-full px-3 py-2 text-sm text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
-												children: [/* @__PURE__ */ u("option", {
+												children: [/* @__PURE__ */ p("option", {
 													value: "",
 													children: "Select a parser..."
-												}), U.map((e) => /* @__PURE__ */ d("option", {
+												}), K.map((e) => /* @__PURE__ */ m("option", {
 													value: e.id,
 													children: [
 														e.name,
@@ -448,68 +454,68 @@ var f = ({ className: e }) => /* @__PURE__ */ u("svg", {
 												}, e.id))]
 											})]
 										}),
-										/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
+										/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ m("label", {
 											className: "block text-xs font-medium text-text-secondary mb-1",
-											children: ["Input Key ", /* @__PURE__ */ u("span", {
+											children: ["Input Key ", /* @__PURE__ */ p("span", {
 												className: "text-state-error",
 												children: "*"
 											})]
-										}), /* @__PURE__ */ u("input", {
+										}), /* @__PURE__ */ p("input", {
 											type: "text",
 											value: e.inputKey,
-											onChange: (e) => Y(t, { inputKey: e.target.value }),
+											onChange: (e) => Q(t, { inputKey: e.target.value }),
 											placeholder: "data",
 											className: "w-full px-3 py-2 text-sm font-mono text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg"
 										})] }),
-										/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
+										/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ m("label", {
 											className: "block text-xs font-medium text-text-secondary mb-1",
-											children: ["Output Key ", /* @__PURE__ */ u("span", {
+											children: ["Output Key ", /* @__PURE__ */ p("span", {
 												className: "text-state-error",
 												children: "*"
 											})]
-										}), /* @__PURE__ */ u("input", {
+										}), /* @__PURE__ */ p("input", {
 											type: "text",
 											value: e.outputKey,
-											onChange: (e) => Y(t, { outputKey: e.target.value }),
+											onChange: (e) => Q(t, { outputKey: e.target.value }),
 											placeholder: "result",
 											className: "w-full px-3 py-2 text-sm font-mono text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg"
 										})] }),
-										/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("label", {
+										/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
 											className: "block text-xs font-medium text-text-secondary mb-1",
 											children: "On Error"
-										}), /* @__PURE__ */ u("select", {
+										}), /* @__PURE__ */ p("select", {
 											value: e.onError,
-											onChange: (e) => Y(t, { onError: e.target.value }),
+											onChange: (e) => Q(t, { onError: e.target.value }),
 											className: "w-full px-3 py-2 text-sm text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
-											children: y.map((e) => /* @__PURE__ */ u("option", {
+											children: S.map((e) => /* @__PURE__ */ p("option", {
 												value: e.value,
 												children: e.label
 											}, e.value))
 										})] }),
-										/* @__PURE__ */ u("div", {
+										/* @__PURE__ */ p("div", {
 											className: "flex items-center",
-											children: /* @__PURE__ */ d("label", {
+											children: /* @__PURE__ */ m("label", {
 												className: "flex items-center gap-2 cursor-pointer",
-												children: [/* @__PURE__ */ u("input", {
+												children: [/* @__PURE__ */ p("input", {
 													type: "checkbox",
 													checked: e.enabled,
-													onChange: (e) => Y(t, { enabled: e.target.checked }),
+													onChange: (e) => Q(t, { enabled: e.target.checked }),
 													className: "w-4 h-4 rounded border-border-default text-action-primary-bg focus:ring-action-primary-bg"
-												}), /* @__PURE__ */ u("span", {
+												}), /* @__PURE__ */ p("span", {
 													className: "text-sm text-text-primary",
 													children: "Enabled"
 												})]
 											})
 										}),
-										e.onError === "fallback" && /* @__PURE__ */ d("div", {
+										e.onError === "fallback" && /* @__PURE__ */ m("div", {
 											className: "col-span-2",
-											children: [/* @__PURE__ */ u("label", {
+											children: [/* @__PURE__ */ p("label", {
 												className: "block text-xs font-medium text-text-secondary mb-1",
 												children: "Fallback Value (JSON)"
-											}), /* @__PURE__ */ u("input", {
+											}), /* @__PURE__ */ p("input", {
 												type: "text",
 												value: e.fallbackValue,
-												onChange: (e) => Y(t, { fallbackValue: e.target.value }),
+												onChange: (e) => Q(t, { fallbackValue: e.target.value }),
 												placeholder: "{\"default\": true}",
 												className: "w-full px-3 py-2 text-sm font-mono text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg"
 											})]
@@ -519,58 +525,58 @@ var f = ({ className: e }) => /* @__PURE__ */ u("svg", {
 							}, t))
 						})]
 					})]
-				}), /* @__PURE__ */ d("div", {
+				}), /* @__PURE__ */ m("div", {
 					className: "space-y-6",
-					children: [/* @__PURE__ */ d("div", {
+					children: [/* @__PURE__ */ m("div", {
 						className: "bg-bg-surface border border-border-default rounded-lg p-6",
-						children: [/* @__PURE__ */ u("h2", {
+						children: [/* @__PURE__ */ p("h2", {
 							className: "text-lg font-semibold text-text-primary mb-4",
 							children: "Preview"
-						}), /* @__PURE__ */ d("div", {
+						}), /* @__PURE__ */ m("div", {
 							className: "space-y-3",
 							children: [
-								/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("span", {
+								/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("span", {
 									className: "text-xs text-text-secondary",
 									children: "Name"
-								}), /* @__PURE__ */ u("p", {
+								}), /* @__PURE__ */ p("p", {
 									className: "text-sm text-text-primary",
-									children: w || "Untitled"
+									children: D || "Untitled"
 								})] }),
-								/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("span", {
+								/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("span", {
 									className: "text-xs text-text-secondary",
 									children: "Status"
-								}), /* @__PURE__ */ u("div", {
+								}), /* @__PURE__ */ p("div", {
 									className: "mt-1",
-									children: /* @__PURE__ */ u(r, { status: O })
+									children: /* @__PURE__ */ p(r, { status: j })
 								})] }),
-								/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("span", {
+								/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("span", {
 									className: "text-xs text-text-secondary",
 									children: "Stages"
-								}), /* @__PURE__ */ u("p", {
+								}), /* @__PURE__ */ p("p", {
 									className: "text-sm text-text-primary",
-									children: A.length
+									children: N.length
 								})] }),
-								A.length > 0 && /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("span", {
+								N.length > 0 && /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("span", {
 									className: "text-xs text-text-secondary",
 									children: "Data Flow"
-								}), /* @__PURE__ */ d("div", {
+								}), /* @__PURE__ */ m("div", {
 									className: "mt-1 text-xs font-mono text-text-secondary",
-									children: [A.map((e, t) => /* @__PURE__ */ d("span", { children: [e.inputKey, t < A.length - 1 && " → "] }, t)), A.length > 0 && ` → ${A[A.length - 1].outputKey}`]
+									children: [N.map((e, t) => /* @__PURE__ */ m("span", { children: [e.inputKey, t < N.length - 1 && " → "] }, t)), N.length > 0 && ` → ${N[N.length - 1].outputKey}`]
 								})] })
 							]
 						})]
-					}), /* @__PURE__ */ d("div", {
+					}), /* @__PURE__ */ m("div", {
 						className: "bg-bg-sunken border border-border-default rounded-lg p-6",
-						children: [/* @__PURE__ */ u("h3", {
+						children: [/* @__PURE__ */ p("h3", {
 							className: "text-sm font-semibold text-text-primary mb-2",
 							children: "Tips"
-						}), /* @__PURE__ */ d("ul", {
+						}), /* @__PURE__ */ m("ul", {
 							className: "text-xs text-text-secondary space-y-2",
 							children: [
-								/* @__PURE__ */ u("li", { children: "• Each stage processes the output of the previous stage" }),
-								/* @__PURE__ */ u("li", { children: "• Use consistent input/output keys to chain data" }),
-								/* @__PURE__ */ u("li", { children: "• Set error handling per stage for robustness" }),
-								/* @__PURE__ */ u("li", { children: "• Disable stages to skip them during execution" })
+								/* @__PURE__ */ p("li", { children: "• Each stage processes the output of the previous stage" }),
+								/* @__PURE__ */ p("li", { children: "• Use consistent input/output keys to chain data" }),
+								/* @__PURE__ */ p("li", { children: "• Set error handling per stage for robustness" }),
+								/* @__PURE__ */ p("li", { children: "• Disable stages to skip them during execution" })
 							]
 						})]
 					})]
@@ -580,6 +586,6 @@ var f = ({ className: e }) => /* @__PURE__ */ u("svg", {
 	});
 });
 //#endregion
-export { x as PipelineBuilderPage, x as default };
+export { w as PipelineBuilderPage, w as default };
 
 //# sourceMappingURL=PipelineBuilderPage.js.map