@burdenoff/microfe-bigconsole 2026.804.2 → 2026.805.2

package/dist/bigconsole/pages/PipelineBuilderPage.js

@@ -2,79 +2,82 @@ import { useAppNavigate as e } from "../contexts/NavigationContext.js";
 import "../contexts/index.js";
 import t from "../hooks/useParserOperations.js";
 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 { BIGCONSOLE_PERMISSIONS as r } from "../../constants/permissions.js";
+import i from "../components/pipeline/PipelineStatusBadge.js";
+import { memo as a, useCallback as o, useEffect as s, useMemo as ee, useState as c } from "react";
 import { useParams as l } from "react-router";
-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";
+import { AccessDenied as te } from "@burdenoff/fe-libs/shared/components";
+import { usePermissions as u } from "@burdenoff/fe-libs/shared/providers/shell";
+import { GlassCard as d, IllustratedEmptyState as f, PagePurpose as p } from "@burdenoff/fe-libs/ui";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/bigconsole/pages/PipelineBuilderPage.tsx
-var h = ({ className: e }) => /* @__PURE__ */ p("svg", {
+var g = ({ className: e }) => /* @__PURE__ */ m("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ p("path", {
+	children: /* @__PURE__ */ m("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M10 19l-7-7m0 0l7-7m-7 7h18"
 	})
-}), g = ({ className: e }) => /* @__PURE__ */ p("svg", {
+}), _ = ({ className: e }) => /* @__PURE__ */ m("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ p("path", {
+	children: /* @__PURE__ */ m("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M12 4v16m8-8H4"
 	})
-}), _ = ({ className: e }) => /* @__PURE__ */ p("svg", {
+}), ne = ({ className: e }) => /* @__PURE__ */ m("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ p("path", {
+	children: /* @__PURE__ */ m("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"
 	})
-}), v = ({ className: e }) => /* @__PURE__ */ p("svg", {
+}), re = ({ className: e }) => /* @__PURE__ */ m("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ p("path", {
+	children: /* @__PURE__ */ m("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M5 15l7-7 7 7"
 	})
-}), y = ({ className: e }) => /* @__PURE__ */ p("svg", {
+}), ie = ({ className: e }) => /* @__PURE__ */ m("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ p("path", {
+	children: /* @__PURE__ */ m("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M19 9l-7 7-7-7"
 	})
-}), b = ({ className: e }) => /* @__PURE__ */ p("svg", {
+}), ae = ({ className: e }) => /* @__PURE__ */ m("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ p("path", {
+	children: /* @__PURE__ */ m("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
 	})
-}), x = [
+}), oe = [
 	{
 		value: "draft",
 		label: "Draft"
@@ -87,7 +90,7 @@ var h = ({ className: e }) => /* @__PURE__ */ p("svg", {
 		value: "inactive",
 		label: "Inactive"
 	}
-], S = [
+], v = [
 	{
 		value: "fail",
 		label: "Fail",
@@ -103,7 +106,7 @@ var h = ({ className: e }) => /* @__PURE__ */ p("svg", {
 		label: "Fallback",
 		description: "Use fallback value on error"
 	}
-], C = {
+], y = {
 	parserId: "",
 	parserName: "",
 	parserType: null,
@@ -113,14 +116,14 @@ var h = ({ className: e }) => /* @__PURE__ */ p("svg", {
 	onError: "fail",
 	fallbackValue: "",
 	description: ""
-}, 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,
+}, b = a(function() {
+	let { pipelineId: a } = l(), b = e(), x = !!a && a !== "new", S = "default", { hasPermission: C, isLoading: w } = u(), T = C(r.PIPELINE_READ), E = C(r.PIPELINE_CREATE), D = C(r.PIPELINE_UPDATE), O = x ? D : E, [k, A] = c(""), [j, M] = c(""), [N, P] = c("draft"), [F, I] = c([]), [L, R] = c(1), [z, B] = c(!1), [V, H] = c(null), { loading: U, error: W, fetchPipeline: G, createPipeline: K, updatePipeline: q } = n({
+		consoleId: S,
 		skipFetch: !0
-	}), { parsers: K } = t({ consoleId: E });
-	o(() => {
-		T && i && U(i).then((e) => {
-			e && (O(e.name), A(e.description || ""), M(e.status), I(e.version), P((e.stages || []).map((e) => ({
+	}), { parsers: J } = t({ consoleId: S });
+	s(() => {
+		x && a && G(a).then((e) => {
+			e && (A(e.name), M(e.description || ""), P(e.status), R(e.version), I((e.stages || []).map((e) => ({
 				id: e.id,
 				parserId: e.parserId,
 				parserName: e.parserName || "",
@@ -134,38 +137,38 @@ var h = ({ className: e }) => /* @__PURE__ */ p("svg", {
 			}))));
 		});
 	}, [
-		T,
-		i,
-		U
+		x,
+		a,
+		G
 	]);
-	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 Y = ee(() => !k.trim() || F.length === 0 ? !1 : F.every((e) => e.parserId && e.inputKey && e.outputKey), [k, F]), X = o(() => {
+		b("/pipelines");
+	}, [b]), Z = o(() => {
+		I((e) => [...e, { ...y }]);
+	}, []), se = o((e) => {
+		I((t) => t.filter((t, n) => n !== e));
+	}, []), Q = o((e, t) => {
+		I((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);
 		});
-	}, []), Q = a((e, t) => {
-		P((n) => n.map((n, r) => r === e ? {
+	}, []), $ = o((e, t) => {
+		I((n) => n.map((n, r) => r === e ? {
 			...n,
 			...t
 		} : n));
-	}, []), $ = a((e, t) => {
-		let n = K.find((e) => e.id === t);
-		n && Q(e, {
+	}, []), ce = o((e, t) => {
+		let n = J.find((e) => e.id === t);
+		n && $(e, {
 			parserId: n.id,
 			parserName: n.name,
 			parserType: n.type
 		});
-	}, [K, Q]), ee = a(async () => {
-		if (q) {
-			R(!0), B(null);
+	}, [J, $]), le = o(async () => {
+		if (!(!Y || !O)) {
+			B(!0), H(null);
 			try {
-				let e = N.map((e) => ({
+				let e = F.map((e) => ({
 					parserId: e.parserId,
 					parserName: e.parserName,
 					parserType: e.parserType || void 0,
@@ -176,274 +179,279 @@ var h = ({ className: e }) => /* @__PURE__ */ p("svg", {
 					fallbackValue: e.fallbackValue ? JSON.parse(e.fallbackValue) : void 0,
 					description: e.description || void 0
 				}));
-				if (T && i) await G(i, {
-					name: D,
-					description: k || void 0,
-					status: j
-				}, F) && w(`/pipelines/${i}`);
+				if (x && a) await q(a, {
+					name: k,
+					description: j || void 0,
+					status: N
+				}, L) && b(`/pipelines/${a}`);
 				else {
-					let t = await W({
-						consoleId: E,
-						name: D,
-						description: k || void 0,
-						status: j,
+					let t = await K({
+						consoleId: S,
+						name: k,
+						description: j || void 0,
+						status: N,
 						stages: e
 					});
-					t && w(`/pipelines/${t.id}`);
+					t && b(`/pipelines/${t.id}`);
 				}
 			} catch (e) {
-				B(e instanceof Error ? e.message : "Failed to save pipeline");
+				H(e instanceof Error ? e.message : "Failed to save pipeline");
 			} finally {
-				R(!1);
+				B(!1);
 			}
 		}
 	}, [
-		q,
-		E,
-		T,
-		i,
-		D,
+		Y,
+		S,
+		O,
+		x,
+		a,
 		k,
 		j,
 		N,
 		F,
-		W,
-		G,
-		w
+		L,
+		K,
+		q,
+		b
 	]);
-	return V && T ? /* @__PURE__ */ p("div", {
+	return U && x ? /* @__PURE__ */ m("div", {
 		className: "p-6",
-		children: /* @__PURE__ */ m("div", {
+		children: /* @__PURE__ */ h("div", {
 			className: "flex flex-col items-center justify-center py-16",
-			children: [/* @__PURE__ */ m("svg", {
+			children: [/* @__PURE__ */ h("svg", {
 				className: "w-8 h-8 text-action-primary-bg animate-spin mb-4",
 				fill: "none",
 				viewBox: "0 0 24 24",
-				children: [/* @__PURE__ */ p("circle", {
+				children: [/* @__PURE__ */ m("circle", {
 					className: "opacity-25",
 					cx: "12",
 					cy: "12",
 					r: "10",
 					stroke: "currentColor",
 					strokeWidth: "4"
-				}), /* @__PURE__ */ p("path", {
+				}), /* @__PURE__ */ m("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__ */ p("p", {
+			}), /* @__PURE__ */ m("p", {
 				className: "text-sm text-text-secondary",
 				children: "Loading Pipeline..."
 			})]
 		})
-	}) : H ? /* @__PURE__ */ p("div", {
+	}) : x && !w && !T ? /* @__PURE__ */ m(te, {
+		title: "Access Denied",
+		description: "You don't have permission to view this pipeline."
+	}) : W ? /* @__PURE__ */ m("div", {
 		className: "p-6",
-		children: /* @__PURE__ */ m("div", {
+		children: /* @__PURE__ */ h("div", {
 			className: "flex flex-col items-center justify-center py-16 text-center",
 			children: [
-				/* @__PURE__ */ p("div", {
+				/* @__PURE__ */ m("div", {
 					className: "p-3 rounded-full bg-status-error-bg/10 mb-4",
-					children: /* @__PURE__ */ p(b, { className: "w-8 h-8 text-status-error-text" })
+					children: /* @__PURE__ */ m(ae, { className: "w-8 h-8 text-status-error-text" })
 				}),
-				/* @__PURE__ */ p("h3", {
+				/* @__PURE__ */ m("h3", {
 					className: "text-lg font-medium text-text-primary mb-2",
 					children: "Failed to load Pipeline"
 				}),
-				/* @__PURE__ */ p("p", {
+				/* @__PURE__ */ m("p", {
 					className: "text-sm text-text-secondary mb-4",
-					children: H.message
+					children: W.message
 				}),
-				/* @__PURE__ */ p("button", {
+				/* @__PURE__ */ m("button", {
 					type: "button",
-					onClick: J,
+					onClick: X,
 					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__ */ m("div", {
+	}) : /* @__PURE__ */ h("div", {
 		className: "p-6",
 		children: [
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ h("div", {
 				className: "flex items-center justify-between mb-6",
-				children: [/* @__PURE__ */ m("div", {
+				children: [/* @__PURE__ */ h("div", {
 					className: "flex items-center gap-4",
-					children: [/* @__PURE__ */ p("button", {
+					children: [/* @__PURE__ */ m("button", {
 						type: "button",
-						onClick: J,
+						onClick: X,
 						className: "p-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors",
-						children: /* @__PURE__ */ p(h, { className: "w-5 h-5" })
-					}), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("h1", {
+						children: /* @__PURE__ */ m(g, { className: "w-5 h-5" })
+					}), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h1", {
 						className: "text-2xl font-bold text-text-primary",
-						children: T ? "Edit Pipeline" : "Create Pipeline"
-					}), /* @__PURE__ */ p("p", {
+						children: x ? "Edit Pipeline" : "Create Pipeline"
+					}), /* @__PURE__ */ m("p", {
 						className: "text-sm text-text-secondary mt-1",
-						children: T ? "Update pipeline settings and stages" : "Create a new data transformation pipeline"
+						children: x ? "Update pipeline settings and stages" : "Create a new data transformation pipeline"
 					})] })]
-				}), /* @__PURE__ */ m("div", {
+				}), /* @__PURE__ */ h("div", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ p("button", {
+					children: [/* @__PURE__ */ m("button", {
 						type: "button",
-						onClick: J,
+						onClick: X,
 						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__ */ p("button", {
+					}), /* @__PURE__ */ m("button", {
 						type: "button",
-						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: L ? "Saving..." : T ? "Save Changes" : "Create Pipeline"
+						onClick: le,
+						disabled: !Y || z || !O,
+						title: O ? void 0 : `You don't have permission to ${x ? "update" : "create"} pipelines.`,
+						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 disabled:cursor-not-allowed",
+						children: z ? "Saving..." : x ? "Save Changes" : "Create Pipeline"
 					})]
 				})]
 			}),
-			/* @__PURE__ */ p(f, {
+			/* @__PURE__ */ m(p, {
 				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", {
+			V && /* @__PURE__ */ m("div", {
 				className: "mb-6 p-4 bg-status-error-bg/10 border border-status-error-border/20 rounded-md",
-				children: /* @__PURE__ */ p("p", {
+				children: /* @__PURE__ */ m("p", {
 					className: "text-sm text-status-error-text",
-					children: z
+					children: V
 				})
 			}),
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ h("div", {
 				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-				children: [/* @__PURE__ */ m("div", {
+				children: [/* @__PURE__ */ h("div", {
 					className: "lg:col-span-2 space-y-6",
-					children: [/* @__PURE__ */ m("div", {
+					children: [/* @__PURE__ */ h("div", {
 						className: "bg-bg-surface border border-border-default rounded-lg p-6",
-						children: [/* @__PURE__ */ p("h2", {
+						children: [/* @__PURE__ */ m("h2", {
 							className: "text-lg font-semibold text-text-primary mb-4",
 							children: "Basic Information"
-						}), /* @__PURE__ */ m("div", {
+						}), /* @__PURE__ */ h("div", {
 							className: "space-y-4",
 							children: [
-								/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ m("label", {
+								/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ h("label", {
 									className: "block text-sm font-medium text-text-primary mb-2",
-									children: ["Name ", /* @__PURE__ */ p("span", {
+									children: ["Name ", /* @__PURE__ */ m("span", {
 										className: "text-status-error-text",
 										children: "*"
 									})]
-								}), /* @__PURE__ */ p("input", {
+								}), /* @__PURE__ */ m("input", {
 									type: "text",
-									value: D,
-									onChange: (e) => O(e.target.value),
+									value: k,
+									onChange: (e) => A(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__ */ m("div", { children: [/* @__PURE__ */ p("label", {
+								/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
 									className: "block text-sm font-medium text-text-primary mb-2",
 									children: "Description"
-								}), /* @__PURE__ */ p("textarea", {
-									value: k,
-									onChange: (e) => A(e.target.value),
+								}), /* @__PURE__ */ m("textarea", {
+									value: j,
+									onChange: (e) => M(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__ */ m("div", { children: [/* @__PURE__ */ p("label", {
+								/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
 									className: "block text-sm font-medium text-text-primary mb-2",
 									children: "Status"
-								}), /* @__PURE__ */ p("select", {
-									value: j,
-									onChange: (e) => M(e.target.value),
+								}), /* @__PURE__ */ m("select", {
+									value: N,
+									onChange: (e) => P(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: x.map((e) => /* @__PURE__ */ p("option", {
+									children: oe.map((e) => /* @__PURE__ */ m("option", {
 										value: e.value,
 										children: e.label
 									}, e.value))
 								})] })
 							]
 						})]
-					}), /* @__PURE__ */ m(u, {
+					}), /* @__PURE__ */ h(d, {
 						treatment: "glass",
 						glow: !0,
 						className: "p-6",
-						children: [/* @__PURE__ */ m("div", {
+						children: [/* @__PURE__ */ h("div", {
 							className: "flex items-center justify-between mb-4",
-							children: [/* @__PURE__ */ m("h2", {
+							children: [/* @__PURE__ */ h("h2", {
 								className: "text-lg font-semibold text-text-primary",
 								children: [
 									"Stages (",
-									N.length,
+									F.length,
 									")"
 								]
-							}), /* @__PURE__ */ m("button", {
+							}), /* @__PURE__ */ h("button", {
 								type: "button",
-								onClick: Y,
+								onClick: Z,
 								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__ */ p(g, { className: "w-4 h-4" }), "Add Stage"]
+								children: [/* @__PURE__ */ m(_, { className: "w-4 h-4" }), "Add Stage"]
 							})]
-						}), N.length === 0 ? /* @__PURE__ */ p(d, {
+						}), F.length === 0 ? /* @__PURE__ */ m(f, {
 							illustration: "empty-generic",
 							title: "No stages yet",
 							description: "Add a stage to start building your pipeline.",
-							action: /* @__PURE__ */ m("button", {
+							action: /* @__PURE__ */ h("button", {
 								type: "button",
-								onClick: Y,
+								onClick: Z,
 								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__ */ p(g, { className: "w-4 h-4" }), "Add First Stage"]
+								children: [/* @__PURE__ */ m(_, { className: "w-4 h-4" }), "Add First Stage"]
 							})
-						}) : /* @__PURE__ */ p("div", {
+						}) : /* @__PURE__ */ m("div", {
 							className: "space-y-4",
-							children: N.map((e, t) => /* @__PURE__ */ m("div", {
+							children: F.map((e, t) => /* @__PURE__ */ h("div", {
 								className: "p-4 bg-bg-sunken border border-border-default rounded-lg",
-								children: [/* @__PURE__ */ m("div", {
+								children: [/* @__PURE__ */ h("div", {
 									className: "flex items-center justify-between mb-4",
-									children: [/* @__PURE__ */ m("div", {
+									children: [/* @__PURE__ */ h("div", {
 										className: "flex items-center gap-2",
-										children: [/* @__PURE__ */ p("span", {
+										children: [/* @__PURE__ */ m("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__ */ p("span", {
+										}), /* @__PURE__ */ m("span", {
 											className: "font-medium text-text-primary",
 											children: e.parserName || `Stage ${t + 1}`
 										})]
-									}), /* @__PURE__ */ m("div", {
+									}), /* @__PURE__ */ h("div", {
 										className: "flex items-center gap-1",
 										children: [
-											/* @__PURE__ */ p("button", {
+											/* @__PURE__ */ m("button", {
 												type: "button",
-												onClick: () => Z(t, "up"),
+												onClick: () => Q(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__ */ p(v, { className: "w-4 h-4" })
+												children: /* @__PURE__ */ m(re, { className: "w-4 h-4" })
 											}),
-											/* @__PURE__ */ p("button", {
+											/* @__PURE__ */ m("button", {
 												type: "button",
-												onClick: () => Z(t, "down"),
-												disabled: t === N.length - 1,
+												onClick: () => Q(t, "down"),
+												disabled: t === F.length - 1,
 												className: "p-1 text-text-secondary hover:text-text-primary hover:bg-bg-surface rounded disabled:opacity-30",
-												children: /* @__PURE__ */ p(y, { className: "w-4 h-4" })
+												children: /* @__PURE__ */ m(ie, { className: "w-4 h-4" })
 											}),
-											/* @__PURE__ */ p("button", {
+											/* @__PURE__ */ m("button", {
 												type: "button",
-												onClick: () => X(t),
+												onClick: () => se(t),
 												className: "p-1 text-text-secondary hover:text-status-error-text hover:bg-status-error-bg/10 rounded",
-												children: /* @__PURE__ */ p(_, { className: "w-4 h-4" })
+												children: /* @__PURE__ */ m(ne, { className: "w-4 h-4" })
 											})
 										]
 									})]
-								}), /* @__PURE__ */ m("div", {
+								}), /* @__PURE__ */ h("div", {
 									className: "grid grid-cols-2 gap-4",
 									children: [
-										/* @__PURE__ */ m("div", {
+										/* @__PURE__ */ h("div", {
 											className: "col-span-2",
-											children: [/* @__PURE__ */ m("label", {
+											children: [/* @__PURE__ */ h("label", {
 												className: "block text-xs font-medium text-text-secondary mb-1",
-												children: ["Parser ", /* @__PURE__ */ p("span", {
+												children: ["Parser ", /* @__PURE__ */ m("span", {
 													className: "text-status-error-text",
 													children: "*"
 												})]
-											}), /* @__PURE__ */ m("select", {
+											}), /* @__PURE__ */ h("select", {
 												value: e.parserId,
-												onChange: (e) => $(t, e.target.value),
+												onChange: (e) => ce(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__ */ p("option", {
+												children: [/* @__PURE__ */ m("option", {
 													value: "",
 													children: "Select a parser..."
-												}), K.map((e) => /* @__PURE__ */ m("option", {
+												}), J.map((e) => /* @__PURE__ */ h("option", {
 													value: e.id,
 													children: [
 														e.name,
@@ -454,68 +462,68 @@ var h = ({ className: e }) => /* @__PURE__ */ p("svg", {
 												}, e.id))]
 											})]
 										}),
-										/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ m("label", {
+										/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ h("label", {
 											className: "block text-xs font-medium text-text-secondary mb-1",
-											children: ["Input Key ", /* @__PURE__ */ p("span", {
+											children: ["Input Key ", /* @__PURE__ */ m("span", {
 												className: "text-status-error-text",
 												children: "*"
 											})]
-										}), /* @__PURE__ */ p("input", {
+										}), /* @__PURE__ */ m("input", {
 											type: "text",
 											value: e.inputKey,
-											onChange: (e) => Q(t, { inputKey: e.target.value }),
+											onChange: (e) => $(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__ */ m("div", { children: [/* @__PURE__ */ m("label", {
+										/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ h("label", {
 											className: "block text-xs font-medium text-text-secondary mb-1",
-											children: ["Output Key ", /* @__PURE__ */ p("span", {
+											children: ["Output Key ", /* @__PURE__ */ m("span", {
 												className: "text-status-error-text",
 												children: "*"
 											})]
-										}), /* @__PURE__ */ p("input", {
+										}), /* @__PURE__ */ m("input", {
 											type: "text",
 											value: e.outputKey,
-											onChange: (e) => Q(t, { outputKey: e.target.value }),
+											onChange: (e) => $(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__ */ m("div", { children: [/* @__PURE__ */ p("label", {
+										/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
 											className: "block text-xs font-medium text-text-secondary mb-1",
 											children: "On Error"
-										}), /* @__PURE__ */ p("select", {
+										}), /* @__PURE__ */ m("select", {
 											value: e.onError,
-											onChange: (e) => Q(t, { onError: e.target.value }),
+											onChange: (e) => $(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: S.map((e) => /* @__PURE__ */ p("option", {
+											children: v.map((e) => /* @__PURE__ */ m("option", {
 												value: e.value,
 												children: e.label
 											}, e.value))
 										})] }),
-										/* @__PURE__ */ p("div", {
+										/* @__PURE__ */ m("div", {
 											className: "flex items-center",
-											children: /* @__PURE__ */ m("label", {
+											children: /* @__PURE__ */ h("label", {
 												className: "flex items-center gap-2 cursor-pointer",
-												children: [/* @__PURE__ */ p("input", {
+												children: [/* @__PURE__ */ m("input", {
 													type: "checkbox",
 													checked: e.enabled,
-													onChange: (e) => Q(t, { enabled: e.target.checked }),
+													onChange: (e) => $(t, { enabled: e.target.checked }),
 													className: "w-4 h-4 rounded border-border-default text-action-primary-bg focus:ring-action-primary-bg"
-												}), /* @__PURE__ */ p("span", {
+												}), /* @__PURE__ */ m("span", {
 													className: "text-sm text-text-primary",
 													children: "Enabled"
 												})]
 											})
 										}),
-										e.onError === "fallback" && /* @__PURE__ */ m("div", {
+										e.onError === "fallback" && /* @__PURE__ */ h("div", {
 											className: "col-span-2",
-											children: [/* @__PURE__ */ p("label", {
+											children: [/* @__PURE__ */ m("label", {
 												className: "block text-xs font-medium text-text-secondary mb-1",
 												children: "Fallback Value (JSON)"
-											}), /* @__PURE__ */ p("input", {
+											}), /* @__PURE__ */ m("input", {
 												type: "text",
 												value: e.fallbackValue,
-												onChange: (e) => Q(t, { fallbackValue: e.target.value }),
+												onChange: (e) => $(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"
 											})]
@@ -525,58 +533,58 @@ var h = ({ className: e }) => /* @__PURE__ */ p("svg", {
 							}, t))
 						})]
 					})]
-				}), /* @__PURE__ */ m("div", {
+				}), /* @__PURE__ */ h("div", {
 					className: "space-y-6",
-					children: [/* @__PURE__ */ m("div", {
+					children: [/* @__PURE__ */ h("div", {
 						className: "bg-bg-surface border border-border-default rounded-lg p-6",
-						children: [/* @__PURE__ */ p("h2", {
+						children: [/* @__PURE__ */ m("h2", {
 							className: "text-lg font-semibold text-text-primary mb-4",
 							children: "Preview"
-						}), /* @__PURE__ */ m("div", {
+						}), /* @__PURE__ */ h("div", {
 							className: "space-y-3",
 							children: [
-								/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("span", {
+								/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("span", {
 									className: "text-xs text-text-secondary",
 									children: "Name"
-								}), /* @__PURE__ */ p("p", {
+								}), /* @__PURE__ */ m("p", {
 									className: "text-sm text-text-primary",
-									children: D || "Untitled"
+									children: k || "Untitled"
 								})] }),
-								/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("span", {
+								/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("span", {
 									className: "text-xs text-text-secondary",
 									children: "Status"
-								}), /* @__PURE__ */ p("div", {
+								}), /* @__PURE__ */ m("div", {
 									className: "mt-1",
-									children: /* @__PURE__ */ p(r, { status: j })
+									children: /* @__PURE__ */ m(i, { status: N })
 								})] }),
-								/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("span", {
+								/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("span", {
 									className: "text-xs text-text-secondary",
 									children: "Stages"
-								}), /* @__PURE__ */ p("p", {
+								}), /* @__PURE__ */ m("p", {
 									className: "text-sm text-text-primary",
-									children: N.length
+									children: F.length
 								})] }),
-								N.length > 0 && /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("span", {
+								F.length > 0 && /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("span", {
 									className: "text-xs text-text-secondary",
 									children: "Data Flow"
-								}), /* @__PURE__ */ m("div", {
+								}), /* @__PURE__ */ h("div", {
 									className: "mt-1 text-xs font-mono text-text-secondary",
-									children: [N.map((e, t) => /* @__PURE__ */ m("span", { children: [e.inputKey, t < N.length - 1 && " → "] }, t)), N.length > 0 && ` → ${N[N.length - 1].outputKey}`]
+									children: [F.map((e, t) => /* @__PURE__ */ h("span", { children: [e.inputKey, t < F.length - 1 && " → "] }, t)), F.length > 0 && ` → ${F[F.length - 1].outputKey}`]
 								})] })
 							]
 						})]
-					}), /* @__PURE__ */ m("div", {
+					}), /* @__PURE__ */ h("div", {
 						className: "bg-bg-sunken border border-border-default rounded-lg p-6",
-						children: [/* @__PURE__ */ p("h3", {
+						children: [/* @__PURE__ */ m("h3", {
 							className: "text-sm font-semibold text-text-primary mb-2",
 							children: "Tips"
-						}), /* @__PURE__ */ m("ul", {
+						}), /* @__PURE__ */ h("ul", {
 							className: "text-xs text-text-secondary space-y-2",
 							children: [
-								/* @__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" })
+								/* @__PURE__ */ m("li", { children: "• Each stage processes the output of the previous stage" }),
+								/* @__PURE__ */ m("li", { children: "• Use consistent input/output keys to chain data" }),
+								/* @__PURE__ */ m("li", { children: "• Set error handling per stage for robustness" }),
+								/* @__PURE__ */ m("li", { children: "• Disable stages to skip them during execution" })
 							]
 						})]
 					})]
@@ -586,6 +594,6 @@ var h = ({ className: e }) => /* @__PURE__ */ p("svg", {
 	});
 });
 //#endregion
-export { w as PipelineBuilderPage, w as default };
+export { b as PipelineBuilderPage, b as default };
 
 //# sourceMappingURL=PipelineBuilderPage.js.map