@burdenoff/microfe-bigconsole 2026.730.7 → 2026.731.2

package/dist/bigconsole/pages/ParserBuilderPage.js

@@ -4,20 +4,47 @@ import t from "../hooks/useDashboardOperations.js";
 import ee from "../hooks/useDataSinkOperations.js";
 import te from "../hooks/useParserOperations.js";
 import ne from "../components/datasink/CacheTTLSelector.js";
-import { memo as n, useCallback as r, useEffect as i, useMemo as re, useState as a } from "react";
+import { memo as n, useCallback as r, useEffect as i, useMemo as a, useRef as re, useState as o } from "react";
 import { useParams as ie } from "react-router-dom";
-import { AlertCircle as o, ArrowLeft as ae, CheckCircle2 as oe, ChevronDown as se, ChevronRight as ce, Code as le, Eye as ue, FileCode2 as de, LayoutDashboard as fe, Loader2 as s, Play as c, Save as pe, Settings as me } from "lucide-react";
-import { Button as l, Card as u, CardContent as d, CardHeader as f, CardTitle as p, GlassCard as he, PagePurpose as ge } from "@burdenoff/fe-libs/ui";
-import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { AlertCircle as s, ArrowLeft as ae, CheckCircle2 as oe, ChevronDown as se, ChevronRight as ce, Code as le, Download as ue, Eye as de, FileCode2 as fe, LayoutDashboard as pe, Loader2 as c, Play as l, Save as me, Settings as he, X as ge } from "lucide-react";
+import { Button as u, CardContent as _e, CardHeader as ve, CardTitle as ye, GlassCard as be, PagePurpose as xe, Stepper as Se } from "@burdenoff/fe-libs/ui";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/bigconsole/pages/ParserBuilderPage.tsx
-function _e(e) {
+var m = 25, Ce = "default", we = [
+	"details",
+	"source",
+	"expression",
+	"review"
+], h = [
+	{
+		key: "details",
+		label: "Details",
+		description: "Name & scope"
+	},
+	{
+		key: "source",
+		label: "Source & Type",
+		description: "Engine & data"
+	},
+	{
+		key: "expression",
+		label: "Expression & Test",
+		description: "Transform & verify"
+	},
+	{
+		key: "review",
+		label: "Cache & Review",
+		description: "Finish up"
+	}
+];
+function Te(e) {
 	return e.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "").substring(0, 64);
 }
-function ve(e) {
+function Ee(e) {
 	let t = {};
 	return e.name.trim() ? e.name.length < 2 && (t.name = "Name must be at least 2 characters") : t.name = "Name is required", e.outputKey.trim() ? /^[a-z0-9_]+$/.test(e.outputKey) || (t.outputKey = "Output key can only contain lowercase letters, numbers, and underscores") : t.outputKey = "Output key is required", e.expression.trim() || (t.expression = "Expression is required"), e.inputSinkKey.trim() || (t.inputSinkKey = "Source DataSink is required"), e.ttl != null && e.ttl > 0 && (e.ttl < 30 || e.ttl > 86400) && (t.ttl = "Cache duration must be between 30 and 86400 seconds"), t;
 }
-var _ = {
+var g = {
 	jq: {
 		name: "JQ",
 		description: "Lightweight JSON processor - fast and efficient for simple transformations",
@@ -30,8 +57,8 @@ var _ = {
 		placeholder: "$sum(data[*].value)",
 		example: "$sum(data.values) - Calculate sum of values"
 	}
-}, v = "default", y = n(function() {
-	let { parserId: n, consoleId: y } = ie(), b = e(), [x, S] = a(v), C = y || x || v, w = n !== "new" && !!n, T = !y, [E, D] = a({
+}, _ = "w-full px-3 py-2.5 text-sm text-text-primary bg-bg-surface border rounded-md placeholder:text-text-tertiary focus:outline-none focus:ring-2 focus:ring-action-primary-bg transition-all", v = n(function() {
+	let { parserId: n, consoleId: v } = ie(), De = e(), [y, b] = o(0), [x, Oe] = o(Ce), S = v || x || Ce, C = n !== "new" && !!n, w = !v, [T, E] = o({
 		name: "",
 		outputKey: "",
 		description: "",
@@ -39,690 +66,752 @@ var _ = {
 		expression: "",
 		inputSinkKey: "",
 		ttl: 900
-	}), [O, k] = a({}), [A, j] = a(!1), [M, N] = a(!1), [P, F] = a(null), [I, L] = a("{\n  \"data\": [\n    {\"name\": \"Item 1\", \"count\": 10},\n    {\"name\": \"Item 2\", \"count\": 20}\n  ]\n}"), [R, z] = a(""), [B, V] = a(null), [H, U] = a(!1), [W, G] = a(!1), [K, ye] = a(null), [be, q] = a(!1), [J, Y] = a(null), { loading: xe, error: Se, parsers: Ce, fetchParser: X, createParser: Z, updateParser: we, testParserExpression: Te } = te({
-		consoleId: C || "",
+	}), [D, O] = o({}), [k, ke] = o(!1), [Ae, je] = o(!1), [Me, Ne] = o(null), [A, j] = o("{\n  \"data\": [\n    {\"name\": \"Item 1\", \"count\": 10},\n    {\"name\": \"Item 2\", \"count\": 20}\n  ]\n}"), [M, N] = o(""), [P, F] = o(null), [Pe, Fe] = o(!1), [I, L] = o(null), [R, z] = o(!1), [B, V] = o(null), [Ie, Le] = o(!1), H = re(T.inputSinkKey);
+	i(() => {
+		H.current = T.inputSinkKey;
+	}, [T.inputSinkKey]);
+	let [U, W] = o(!1), [Re, ze] = o(null), [Be, Ve] = o(!1), [He, G] = o(null), [K, Ue] = o(null), { loading: We, error: Ge, parsers: Ke, fetchParser: qe, createParser: Je, updateParser: Ye, testParserExpression: Xe } = te({
+		consoleId: S || "",
 		skipFetch: !0
-	}), { dataSinks: Ee, fetchDataSinks: De, getDataSinkData: Q } = ee({ skipFetch: !0 }), { dashboards: Oe, fetchDashboards: ke, loading: Ae } = t(), $ = w ? Ce.find((e) => e.id === n) : null;
+	}), { dataSinks: q, fetchDataSinks: Ze, getDataSinkData: J } = ee({ skipFetch: !0 }), { dashboards: Qe, fetchDashboards: $e, loading: et } = t(), Y = C ? Ke.find((e) => e.id === n) : null;
 	i(() => {
-		De(), w && n && X(n), T && ke();
+		Ze(), C && n && qe(n), w && $e();
 	}, [
-		w,
+		C,
 		n,
-		X,
-		De,
-		T,
-		ke
+		qe,
+		Ze,
+		w,
+		$e
 	]), i(() => {
-		$ && (D({
-			name: $.name || "",
-			outputKey: $.outputKey || "",
-			description: $.description || "",
-			type: $.type,
-			expression: $.expression || "",
-			inputSinkKey: $.inputSinkKey || "",
-			ttl: $.ttl ?? null
-		}), j(!0), $.consoleId && S($.consoleId));
-	}, [$]);
-	let je = r((e) => {
+		Y && (E({
+			name: Y.name || "",
+			outputKey: Y.outputKey || "",
+			description: Y.description || "",
+			type: Y.type,
+			expression: Y.expression || "",
+			inputSinkKey: Y.inputSinkKey || "",
+			ttl: Y.ttl ?? null
+		}), ke(!0), Y.consoleId && Oe(Y.consoleId));
+	}, [Y]);
+	let X = a(() => q.find((e) => e.key === T.inputSinkKey)?.name || T.inputSinkKey, [q, T.inputSinkKey]), tt = r((e) => {
 		let t = e.target.value;
-		D((e) => ({
+		E((e) => ({
 			...e,
 			name: t,
-			outputKey: A ? e.outputKey : _e(t)
-		})), k((e) => ({
+			outputKey: k ? e.outputKey : Te(t)
+		})), O((e) => ({
 			...e,
 			name: void 0
 		}));
-	}, [A]), Me = r((e) => {
+	}, [k]), nt = r((e) => {
 		let t = e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, "");
-		D((e) => ({
+		E((e) => ({
 			...e,
 			outputKey: t
-		})), j(!0), k((e) => ({
+		})), ke(!0), O((e) => ({
 			...e,
 			outputKey: void 0
 		}));
-	}, []), Ne = r((e) => {
-		D((t) => ({
+	}, []), rt = r((e) => {
+		E((t) => ({
 			...t,
 			description: e.target.value
 		}));
-	}, []), Pe = r((e) => {
-		D((t) => ({
+	}, []), it = r((e) => {
+		E((t) => ({
 			...t,
 			type: e
-		})), z(""), V(null);
-	}, []), Fe = r((e) => {
-		D((t) => ({
+		})), N(""), F(null);
+	}, []), at = r((e) => {
+		E((t) => ({
 			...t,
 			expression: e.target.value
-		})), k((e) => ({
+		})), O((e) => ({
 			...e,
 			expression: void 0
 		}));
-	}, []), Ie = r((e) => {
-		D((t) => ({
+	}, []), ot = r((e) => {
+		E((t) => ({
 			...t,
 			inputSinkKey: e.target.value
-		})), k((e) => ({
+		})), O((e) => ({
 			...e,
 			inputSinkKey: void 0
-		}));
-	}, []), Le = r((e) => {
-		D((t) => ({
+		})), W(!1), ze(null), Ue(null), G(null), R && (j(""), z(!1)), V(null), N(""), F(null), L(null);
+	}, [R]), st = r((e) => {
+		E((t) => ({
 			...t,
 			ttl: e
-		})), k((e) => ({
+		})), O((e) => ({
 			...e,
 			ttl: void 0
 		}));
-	}, []), Re = r((e) => {
-		S(e.target.value);
-	}, []), ze = r(async () => {
-		if (E.inputSinkKey) try {
-			let e = await Q({ key: E.inputSinkKey });
-			e?.raw && L(JSON.stringify(e.raw, null, 2));
-		} catch {}
-	}, [E.inputSinkKey, Q]), Be = r(async () => {
-		if (W) {
-			G(!1);
+	}, []), ct = r((e) => {
+		Oe(e.target.value);
+	}, []), lt = r((e) => {
+		j(e.target.value);
+	}, []), ut = r(async () => {
+		let e = T.inputSinkKey;
+		if (e) {
+			Le(!0);
+			try {
+				let t = await J({ key: e }, { limit: m });
+				if (H.current !== e) return;
+				t?.raw !== void 0 && t?.raw !== null ? (j(JSON.stringify(t.raw, null, 2)), z(!0), V({
+					total: t.totalCount ?? null,
+					hasMore: t.hasMore ?? null,
+					sinkName: X
+				}), N(""), F(null), L(null)) : F("Could not load a sample from the selected DataSink.");
+			} catch (t) {
+				if (H.current !== e) return;
+				F(t instanceof Error ? t.message : "Failed to load sample data");
+			} finally {
+				Le(!1);
+			}
+		}
+	}, [
+		T.inputSinkKey,
+		J,
+		X
+	]), dt = r(() => {
+		j(""), z(!1), V(null), L(null), N(""), F(null);
+	}, []), ft = r(async () => {
+		if (U) {
+			W(!1);
 			return;
 		}
-		if (!E.inputSinkKey) {
-			Y("Please select a source DataSink first");
+		if (!T.inputSinkKey) {
+			G("Please select a source DataSink first");
 			return;
 		}
-		G(!0), q(!0), Y(null);
+		W(!0), Ve(!0), G(null);
+		let e = T.inputSinkKey;
 		try {
-			let e = await Q({ key: E.inputSinkKey });
-			e?.raw ? ye(e.raw) : Y("No data available in selected DataSink");
-		} catch (e) {
-			Y(e instanceof Error ? e.message : "Failed to load data");
+			let t = await J({ key: e }, { limit: m });
+			if (H.current !== e) return;
+			t?.raw !== void 0 && t?.raw !== null ? (ze(t.raw), Ue({
+				total: t.totalCount ?? null,
+				hasMore: t.hasMore ?? null,
+				sinkName: X
+			})) : G("No data available in selected DataSink");
+		} catch (t) {
+			if (H.current !== e) return;
+			G(t instanceof Error ? t.message : "Failed to load data");
 		} finally {
-			q(!1);
+			Ve(!1);
 		}
 	}, [
-		W,
-		E.inputSinkKey,
-		Q
-	]), Ve = r(async () => {
-		if (!E.expression.trim()) {
-			V("Expression is required");
+		U,
+		T.inputSinkKey,
+		J,
+		X
+	]), pt = r(async () => {
+		if (!T.expression.trim()) {
+			F("Expression is required");
 			return;
 		}
-		U(!0), V(null), z("");
+		let e;
+		if (R) e = {
+			type: T.type,
+			expression: T.expression,
+			dataSinkKey: T.inputSinkKey,
+			sampleLimit: m
+		};
+		else {
+			let t;
+			try {
+				t = JSON.parse(A);
+			} catch {
+				F("Input JSON is not valid JSON");
+				return;
+			}
+			e = {
+				type: T.type,
+				expression: T.expression,
+				sampleData: t
+			};
+		}
+		Fe(!0), F(null), N(""), L(null);
 		try {
-			let e = await Te({
-				type: E.type,
-				expression: E.expression,
-				sampleData: JSON.parse(I)
-			});
-			e && (e.success ? z(JSON.stringify(e.output, null, 2)) : V(e.error || "Test failed"));
+			let t = await Xe(e);
+			t ? t.success ? (N(JSON.stringify(t.output, null, 2)), t.sampled && L({
+				sampledRows: t.sampledRows ?? null,
+				totalRows: t.totalRows ?? null
+			})) : F(t.error || "Test failed") : F("Test request failed — please try again.");
 		} catch (e) {
-			V(e instanceof Error ? e.message : "Test failed");
+			F(e instanceof Error ? e.message : "Test failed");
 		} finally {
-			U(!1);
+			Fe(!1);
 		}
 	}, [
-		E.type,
-		E.expression,
-		I,
-		Te
-	]), He = r(() => {
-		b(y ? `/dashboards/${y}/parsers` : "/parsers");
-	}, [b, y]), Ue = r(async (e) => {
-		e.preventDefault(), F(null);
-		let t = ve(E);
-		if (Object.keys(t).length > 0) {
-			k(t);
+		T.type,
+		T.expression,
+		T.inputSinkKey,
+		A,
+		R,
+		Xe
+	]), Z = r(() => {
+		De(v ? `/dashboards/${v}/parsers` : "/parsers");
+	}, [De, v]), mt = r(async () => {
+		Ne(null);
+		let e = Ee(T);
+		if (Object.keys(e).length > 0) {
+			O(e), e.name || e.outputKey ? b(0) : e.inputSinkKey ? b(1) : e.expression && b(2);
 			return;
 		}
-		N(!0);
+		je(!0);
 		try {
-			if (w && $) {
-				if (!await we($.id, {
-					name: E.name,
-					description: E.description || void 0,
-					expression: E.expression,
-					inputSinkKey: E.inputSinkKey,
-					outputKey: E.outputKey,
-					ttl: E.ttl
-				}, $.version)) throw Error("Failed to update parser");
-			} else if (!await Z({
-				consoleId: C || "",
-				name: E.name,
-				type: E.type,
-				expression: E.expression,
-				inputSinkKey: E.inputSinkKey,
-				outputKey: E.outputKey,
-				description: E.description || void 0,
-				ttl: E.ttl || void 0
+			if (C && Y) {
+				if (!await Ye(Y.id, {
+					name: T.name,
+					description: T.description || void 0,
+					expression: T.expression,
+					inputSinkKey: T.inputSinkKey,
+					outputKey: T.outputKey,
+					ttl: T.ttl
+				}, Y.version)) throw Error("Failed to update parser");
+			} else if (!await Je({
+				consoleId: S || "",
+				name: T.name,
+				type: T.type,
+				expression: T.expression,
+				inputSinkKey: T.inputSinkKey,
+				outputKey: T.outputKey,
+				description: T.description || void 0,
+				ttl: T.ttl ?? void 0
 			})) throw Error("Failed to create parser");
-			b(y ? `/dashboards/${y}/parsers` : "/parsers");
+			Z();
 		} catch (e) {
-			F(e instanceof Error ? e.message : "Failed to save parser");
+			Ne(e instanceof Error ? e.message : "Failed to save parser");
 		} finally {
-			N(!1);
+			je(!1);
 		}
 	}, [
-		E,
-		w,
-		$,
-		Z,
-		we,
-		b,
+		T,
 		C,
-		y
-	]), We = re(() => E.name.trim().length >= 2 && E.expression.trim().length > 0 && E.inputSinkKey.trim().length > 0 && E.outputKey.trim().length > 0, [
-		E.name,
-		E.expression,
-		E.inputSinkKey,
-		E.outputKey
-	]);
-	if (xe && w) return /* @__PURE__ */ h("div", {
+		Y,
+		Je,
+		Ye,
+		S,
+		Z
+	]), ht = a(() => T.name.trim().length >= 2 && T.expression.trim().length > 0 && T.inputSinkKey.trim().length > 0 && T.outputKey.trim().length > 0 && /^[a-z0-9_]+$/.test(T.outputKey), [
+		T.name,
+		T.expression,
+		T.inputSinkKey,
+		T.outputKey
+	]), Q = r((e) => {
+		switch (we[e]) {
+			case "details": return T.name.trim().length >= 2 && T.outputKey.trim().length > 0 && /^[a-z0-9_]+$/.test(T.outputKey);
+			case "source": return T.inputSinkKey.trim().length > 0;
+			case "expression": return T.expression.trim().length > 0;
+			default: return !0;
+		}
+	}, [
+		T.name,
+		T.outputKey,
+		T.inputSinkKey,
+		T.expression
+	]), gt = r((e) => {
+		let t = Math.max(0, Math.min(e, h.length - 1));
+		if (t > y) {
+			for (let e = y; e < t; e++) if (!Q(e)) return;
+		}
+		b(t);
+	}, [y, Q]), _t = r(() => {
+		b((e) => Math.min(e + 1, h.length - 1));
+	}, []), vt = r(() => {
+		b((e) => Math.max(e - 1, 0));
+	}, []);
+	if (We && C) return /* @__PURE__ */ f("div", {
 		className: "flex items-center justify-center min-h-[400px]",
-		children: /* @__PURE__ */ h(s, { className: "w-8 h-8 text-text-secondary animate-spin" })
+		children: /* @__PURE__ */ f(c, { className: "w-8 h-8 text-text-secondary animate-spin" })
 	});
-	if (Se) return /* @__PURE__ */ h("div", {
+	if (Ge) return /* @__PURE__ */ f("div", {
 		className: "flex items-center justify-center min-h-[400px] p-card-padding",
-		children: /* @__PURE__ */ g("div", {
+		children: /* @__PURE__ */ p("div", {
 			className: "text-center",
 			children: [
-				/* @__PURE__ */ h(o, { className: "w-12 h-12 text-status-error-text mx-auto mb-4" }),
-				/* @__PURE__ */ h("p", {
+				/* @__PURE__ */ f(s, { className: "w-12 h-12 text-status-error-text mx-auto mb-4" }),
+				/* @__PURE__ */ f("p", {
 					className: "text-status-error-text text-body-sm font-medium mb-2",
 					children: "Failed to load Parser"
 				}),
-				/* @__PURE__ */ h("p", {
+				/* @__PURE__ */ f("p", {
 					className: "text-text-tertiary text-body-xs",
-					children: Se.message
+					children: Ge.message
 				})
 			]
 		})
 	});
-	let Ge = _[E.type];
-	return /* @__PURE__ */ h("div", {
+	let $ = g[T.type], yt = y === h.length - 1;
+	return /* @__PURE__ */ f("div", {
 		className: "min-h-screen bg-bg-canvas",
-		children: /* @__PURE__ */ g("div", {
-			className: "max-w-7xl mx-auto p-card-padding",
+		children: /* @__PURE__ */ p("div", {
+			className: "max-w-4xl mx-auto p-card-padding pb-10",
 			children: [
-				/* @__PURE__ */ g("div", {
+				/* @__PURE__ */ p("div", {
 					className: "mb-6",
 					children: [
-						/* @__PURE__ */ g(l, {
-							onClick: He,
+						/* @__PURE__ */ p(u, {
+							onClick: Z,
 							variant: "ghost",
 							size: "sm",
 							className: "mb-4",
-							children: [/* @__PURE__ */ h(ae, { className: "w-4 h-4 mr-2" }), "Back to Parsers"]
+							children: [/* @__PURE__ */ f(ae, { className: "w-4 h-4 mr-2" }), "Back to Parsers"]
 						}),
-						/* @__PURE__ */ h("h1", {
+						/* @__PURE__ */ f("h1", {
 							className: "text-heading-h1 font-bold text-text-primary",
-							children: w ? "Edit Parser" : "Create Parser"
+							children: C ? "Edit Parser" : "Create Parser"
 						}),
-						/* @__PURE__ */ h("p", {
+						/* @__PURE__ */ f("p", {
 							className: "text-body-sm text-text-secondary mt-1",
-							children: w ? "Update the parser configuration and test your changes." : "Transform data using JQ or JSONata expressions."
+							children: "Transform data using JQ or JSONata expressions."
 						})
 					]
 				}),
-				/* @__PURE__ */ h(ge, {
+				/* @__PURE__ */ f(xe, {
 					className: "mb-6",
-					children: "A parser maps raw input into structured fields using a JQ or JSONata expression. Write the expression here, run it against a sample to confirm the output, and save it once it produces the shape you need — then reuse it across pipelines to normalise any source."
+					children: "A parser maps raw input into structured fields using a JQ or JSONata expression. Write the expression, run it against a sample to confirm the output, and save it once it produces the shape you need — then reuse it across pipelines to normalise any source."
 				}),
-				P && /* @__PURE__ */ g("div", {
+				/* @__PURE__ */ f("div", {
+					className: "mb-6",
+					children: /* @__PURE__ */ f(Se, {
+						steps: h,
+						active: y,
+						onStepClick: gt
+					})
+				}),
+				Me && /* @__PURE__ */ p("div", {
 					className: "mb-6 p-4 bg-status-error-bg/10 border border-status-error-border/30 rounded-lg flex items-start gap-3",
-					children: [/* @__PURE__ */ h(o, { className: "w-5 h-5 text-status-error-text flex-shrink-0 mt-0.5" }), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("p", {
+					children: [/* @__PURE__ */ f(s, { className: "w-5 h-5 text-status-error-text flex-shrink-0 mt-0.5" }), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("p", {
 						className: "text-sm font-medium text-status-error-text",
 						children: "Failed to save Parser"
-					}), /* @__PURE__ */ h("p", {
+					}), /* @__PURE__ */ f("p", {
 						className: "text-xs text-status-error-text/80 mt-1",
-						children: P
+						children: Me
 					})] })]
 				}),
-				/* @__PURE__ */ g("form", {
-					onSubmit: Ue,
-					children: [/* @__PURE__ */ g("div", {
-						className: "grid gap-6 lg:grid-cols-3",
+				/* @__PURE__ */ p(be, {
+					treatment: "glass",
+					glow: !0,
+					children: [/* @__PURE__ */ f(ve, {
+						className: "pb-4",
+						children: /* @__PURE__ */ p("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ p("div", {
+								className: "w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center",
+								children: [
+									y === 0 && /* @__PURE__ */ f(fe, { className: "w-4 h-4 text-action-primary-bg" }),
+									y === 1 && /* @__PURE__ */ f(le, { className: "w-4 h-4 text-action-primary-bg" }),
+									y === 2 && /* @__PURE__ */ f(l, { className: "w-4 h-4 text-action-primary-bg" }),
+									y === 3 && /* @__PURE__ */ f(he, { className: "w-4 h-4 text-action-primary-bg" })
+								]
+							}), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ p("p", {
+								className: "text-xs text-text-tertiary",
+								children: [
+									"Step ",
+									y + 1,
+									" of ",
+									h.length
+								]
+							}), /* @__PURE__ */ f(ye, {
+								className: "text-base",
+								children: h[y].label
+							})] })]
+						})
+					}), /* @__PURE__ */ p(_e, {
+						className: "space-y-5",
 						children: [
-							/* @__PURE__ */ h("div", {
-								className: "space-y-6",
-								children: /* @__PURE__ */ g(u, { children: [/* @__PURE__ */ h(f, {
-									className: "pb-4",
-									children: /* @__PURE__ */ g("div", {
-										className: "flex items-center gap-3",
-										children: [/* @__PURE__ */ h("div", {
-											className: "w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center",
-											children: /* @__PURE__ */ h(de, { className: "w-4 h-4 text-action-primary-bg" })
-										}), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h(p, {
-											className: "text-base",
-											children: "Basic Information"
-										}), /* @__PURE__ */ h("p", {
-											className: "text-xs text-text-secondary mt-0.5",
-											children: "Essential details for your parser"
-										})] })]
-									})
-								}), /* @__PURE__ */ g(d, {
-									className: "space-y-5",
-									children: [
-										/* @__PURE__ */ g("div", { children: [
-											/* @__PURE__ */ g("label", {
+							y === 0 && /* @__PURE__ */ p("div", {
+								className: "space-y-5",
+								children: [
+									/* @__PURE__ */ p("div", {
+										className: "grid gap-5 sm:grid-cols-2",
+										children: [/* @__PURE__ */ p("div", { children: [
+											/* @__PURE__ */ p("label", {
 												htmlFor: "name",
 												className: "block text-sm font-medium text-text-primary mb-2",
-												children: ["Name ", /* @__PURE__ */ h("span", {
+												children: ["Name ", /* @__PURE__ */ f("span", {
 													className: "text-status-error-text",
 													children: "*"
 												})]
 											}),
-											/* @__PURE__ */ h("input", {
+											/* @__PURE__ */ f("input", {
 												id: "name",
 												type: "text",
-												value: E.name,
-												onChange: je,
+												value: T.name,
+												onChange: tt,
 												placeholder: "e.g., User Analytics Parser",
-												className: `
-                        w-full px-3 py-2.5
-                        text-sm text-text-primary
-                        bg-bg-surface
-                        border ${O.name ? "border-status-error-border" : "border-border-default"}
-                        rounded-md
-                        placeholder:text-text-tertiary
-                        focus:outline-none focus:ring-2 focus:ring-action-primary-bg
-                        transition-all
-                      `
+												className: `${_} ${D.name ? "border-status-error-border" : "border-border-default"}`
 											}),
-											O.name && /* @__PURE__ */ h("p", {
+											D.name && /* @__PURE__ */ f("p", {
 												className: "text-xs text-status-error-text mt-1.5",
-												children: O.name
+												children: D.name
 											})
-										] }),
-										/* @__PURE__ */ g("div", { children: [
-											/* @__PURE__ */ g("label", {
+										] }), /* @__PURE__ */ p("div", { children: [
+											/* @__PURE__ */ p("label", {
 												htmlFor: "outputKey",
 												className: "block text-sm font-medium text-text-primary mb-2",
-												children: ["Output Key ", /* @__PURE__ */ h("span", {
+												children: ["Output Key ", /* @__PURE__ */ f("span", {
 													className: "text-status-error-text",
 													children: "*"
 												})]
 											}),
-											/* @__PURE__ */ h("input", {
+											/* @__PURE__ */ f("input", {
 												id: "outputKey",
 												type: "text",
-												value: E.outputKey,
-												onChange: Me,
+												value: T.outputKey,
+												onChange: nt,
 												placeholder: "user_analytics_parser",
-												disabled: w,
-												className: `
-                        w-full px-3 py-2.5
-                        text-sm text-text-primary font-mono
-                        bg-bg-surface
-                        border ${O.outputKey ? "border-status-error-border" : "border-border-default"}
-                        rounded-md
-                        placeholder:text-text-tertiary
-                        focus:outline-none focus:ring-2 focus:ring-action-primary-bg
-                        disabled:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-60
-                        transition-all
-                      `
+												disabled: C,
+												className: `${_} font-mono ${D.outputKey ? "border-status-error-border" : "border-border-default"} disabled:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-60`
 											}),
-											O.outputKey && /* @__PURE__ */ h("p", {
+											D.outputKey && /* @__PURE__ */ f("p", {
 												className: "text-xs text-status-error-text mt-1.5",
-												children: O.outputKey
+												children: D.outputKey
 											}),
-											!w && /* @__PURE__ */ h("p", {
+											!C && /* @__PURE__ */ f("p", {
 												className: "text-xs text-text-tertiary mt-1.5",
 												children: "Auto-generated from name. Customize if needed."
 											})
-										] }),
-										/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("label", {
-											htmlFor: "description",
+										] })]
+									}),
+									/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+										htmlFor: "description",
+										className: "block text-sm font-medium text-text-primary mb-2",
+										children: "Description"
+									}), /* @__PURE__ */ f("textarea", {
+										id: "description",
+										value: T.description,
+										onChange: rt,
+										placeholder: "Describe what this parser does...",
+										rows: 2,
+										className: `${_} border-border-default resize-y`
+									})] }),
+									w && /* @__PURE__ */ p("div", { children: [
+										/* @__PURE__ */ f("label", {
+											htmlFor: "dashboard",
 											className: "block text-sm font-medium text-text-primary mb-2",
-											children: "Description"
-										}), /* @__PURE__ */ h("textarea", {
-											id: "description",
-											value: E.description,
-											onChange: Ne,
-											placeholder: "Describe what this parser does...",
-											rows: 3,
-											className: "\n                        w-full px-3 py-2.5\n                        text-sm text-text-primary\n                        bg-bg-surface\n                        border border-border-default\n                        rounded-md\n                        placeholder:text-text-tertiary\n                        focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n                        resize-none\n                        transition-all\n                      "
-										})] }),
-										T && /* @__PURE__ */ g("div", { children: [
-											/* @__PURE__ */ h("label", {
-												htmlFor: "dashboard",
-												className: "block text-sm font-medium text-text-primary mb-2",
-												children: /* @__PURE__ */ g("div", {
-													className: "flex items-center gap-2",
-													children: [/* @__PURE__ */ h(fe, { className: "w-4 h-4" }), "Dashboard Scope"]
-												})
-											}),
-											/* @__PURE__ */ g("select", {
-												id: "dashboard",
-												value: x,
-												onChange: Re,
-												disabled: Ae || w,
-												className: "\n                          w-full px-3 py-2.5\n                          text-sm text-text-primary\n                          bg-bg-surface\n                          border border-border-default\n                          rounded-md\n                          focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n                          disabled:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-60\n                          transition-all\n                        ",
-												children: [/* @__PURE__ */ h("option", {
-													value: "default",
-													children: "Global (available everywhere)"
-												}), Oe.map((e) => /* @__PURE__ */ h("option", {
-													value: e.id,
-													children: e.name
-												}, e.id))]
-											}),
-											/* @__PURE__ */ h("p", {
-												className: "text-xs text-text-tertiary mt-1.5",
-												children: w ? "Dashboard scope cannot be changed after creation." : x === "default" ? "Global parsers are available across all dashboards." : "This parser will only be available in the selected dashboard."
+											children: /* @__PURE__ */ p("span", {
+												className: "flex items-center gap-2",
+												children: [/* @__PURE__ */ f(pe, { className: "w-4 h-4" }), "Dashboard Scope"]
 											})
-										] })
-									]
-								})] })
+										}),
+										/* @__PURE__ */ p("select", {
+											id: "dashboard",
+											value: x,
+											onChange: ct,
+											disabled: et || C,
+											className: `${_} border-border-default disabled:bg-bg-sunken disabled:cursor-not-allowed disabled:opacity-60`,
+											children: [/* @__PURE__ */ f("option", {
+												value: "default",
+												children: "Global (available everywhere)"
+											}), Qe.map((e) => /* @__PURE__ */ f("option", {
+												value: e.id,
+												children: e.name
+											}, e.id))]
+										}),
+										/* @__PURE__ */ f("p", {
+											className: "text-xs text-text-tertiary mt-1.5",
+											children: C ? "Dashboard scope cannot be changed after creation." : x === "default" ? "Global parsers are available across all dashboards." : "This parser will only be available in the selected dashboard."
+										})
+									] })
+								]
 							}),
-							/* @__PURE__ */ h("div", {
-								className: "space-y-6",
-								children: /* @__PURE__ */ g(he, {
-									treatment: "glass",
-									glow: !0,
-									children: [/* @__PURE__ */ h(f, {
-										className: "pb-4",
-										children: /* @__PURE__ */ g("div", {
-											className: "flex items-center gap-3",
-											children: [/* @__PURE__ */ h("div", {
-												className: "w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center",
-												children: /* @__PURE__ */ h(le, { className: "w-4 h-4 text-action-primary-bg" })
-											}), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h(p, {
-												className: "text-base",
-												children: "Parser Configuration"
-											}), /* @__PURE__ */ h("p", {
+							y === 1 && /* @__PURE__ */ p("div", {
+								className: "space-y-5",
+								children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ p("label", {
+									className: "block text-sm font-medium text-text-primary mb-3",
+									children: ["Parser Type ", /* @__PURE__ */ f("span", {
+										className: "text-status-error-text",
+										children: "*"
+									})]
+								}), /* @__PURE__ */ f("div", {
+									className: "grid gap-2 sm:grid-cols-2",
+									children: Object.keys(g).map((e) => {
+										let t = g[e];
+										return /* @__PURE__ */ p("label", {
+											className: `flex items-start gap-3 p-3 border rounded-md cursor-pointer transition-colors ${T.type === e ? "border-action-primary-bg bg-action-primary-bg/5" : "border-border-default hover:bg-bg-sunken"}`,
+											children: [/* @__PURE__ */ f("input", {
+												type: "radio",
+												name: "parserType",
+												value: e,
+												checked: T.type === e,
+												onChange: () => it(e),
+												className: "mt-1 w-4 h-4 text-action-primary-bg"
+											}), /* @__PURE__ */ p("span", { children: [/* @__PURE__ */ f("span", {
+												className: "text-sm font-medium text-text-primary",
+												children: t.name
+											}), /* @__PURE__ */ f("p", {
 												className: "text-xs text-text-secondary mt-0.5",
-												children: "Configure parser type and data source"
+												children: t.description
 											})] })]
-										})
-									}), /* @__PURE__ */ g(d, {
-										className: "space-y-5",
-										children: [
-											/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ g("label", {
-												className: "block text-sm font-medium text-text-primary mb-3",
-												children: ["Parser Type ", /* @__PURE__ */ h("span", {
-													className: "text-status-error-text",
-													children: "*"
+										}, e);
+									})
+								})] }), /* @__PURE__ */ p("div", { children: [
+									/* @__PURE__ */ p("label", {
+										htmlFor: "inputSinkKey",
+										className: "block text-sm font-medium text-text-primary mb-2",
+										children: ["Source DataSink ", /* @__PURE__ */ f("span", {
+											className: "text-status-error-text",
+											children: "*"
+										})]
+									}),
+									/* @__PURE__ */ p("select", {
+										id: "inputSinkKey",
+										value: T.inputSinkKey,
+										onChange: ot,
+										className: `${_} ${D.inputSinkKey ? "border-status-error-border" : "border-border-default"}`,
+										children: [/* @__PURE__ */ f("option", {
+											value: "",
+											children: "Select a DataSink..."
+										}), q.map((e) => /* @__PURE__ */ f("option", {
+											value: e.key,
+											children: e.name || e.key
+										}, e.id))]
+									}),
+									D.inputSinkKey && /* @__PURE__ */ f("p", {
+										className: "text-xs text-status-error-text mt-1.5",
+										children: D.inputSinkKey
+									}),
+									q.length === 0 && /* @__PURE__ */ f("p", {
+										className: "text-xs text-text-tertiary mt-1.5",
+										children: "No DataSinks yet — create one first, then return here to build a parser for it."
+									}),
+									T.inputSinkKey && /* @__PURE__ */ p("div", {
+										className: "mt-3",
+										children: [/* @__PURE__ */ p("button", {
+											type: "button",
+											onClick: ft,
+											className: "inline-flex items-center gap-2 text-sm text-action-primary-bg hover:text-action-primary-bgHover transition-colors",
+											children: [
+												f(U ? se : ce, { className: "w-4 h-4" }),
+												/* @__PURE__ */ f(de, { className: "w-4 h-4" }),
+												"Show Data Preview"
+											]
+										}), U && /* @__PURE__ */ f("div", {
+											className: "mt-3 border border-border-default rounded-md overflow-hidden",
+											children: Be ? /* @__PURE__ */ p("div", {
+												className: "p-4 flex items-center justify-center",
+												children: [/* @__PURE__ */ f(c, { className: "w-5 h-5 text-text-secondary animate-spin" }), /* @__PURE__ */ f("span", {
+													className: "ml-2 text-sm text-text-secondary",
+													children: "Loading sample…"
 												})]
-											}), /* @__PURE__ */ h("div", {
-												className: "space-y-2",
-												children: Object.keys(_).map((e) => {
-													let t = _[e];
-													return /* @__PURE__ */ g("label", {
-														className: `
-                              flex items-start gap-3 p-3
-                              border rounded-md
-                              cursor-pointer
-                              ${E.type === e ? "border-action-primary-bg bg-action-primary-bg/5" : "border-border-default hover:bg-bg-sunken"}
-                              transition-colors
-                            `,
-														children: [/* @__PURE__ */ h("input", {
-															type: "radio",
-															name: "parserType",
-															value: e,
-															checked: E.type === e,
-															onChange: () => Pe(e),
-															className: "mt-1 w-4 h-4 text-action-primary-bg"
-														}), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("span", {
-															className: "text-sm font-medium text-text-primary",
-															children: t.name
-														}), /* @__PURE__ */ h("p", {
-															className: "text-xs text-text-secondary mt-0.5",
-															children: t.description
-														})] })]
-													}, e);
+											}) : He ? /* @__PURE__ */ f("div", {
+												className: "p-4 bg-status-error-bg/5",
+												children: /* @__PURE__ */ f("p", {
+													className: "text-sm text-status-error-text",
+													children: He
 												})
-											})] }),
-											/* @__PURE__ */ g("div", { children: [
-												/* @__PURE__ */ g("label", {
-													htmlFor: "inputSinkKey",
-													className: "block text-sm font-medium text-text-primary mb-2",
-													children: ["Source DataSink ", /* @__PURE__ */ h("span", {
-														className: "text-status-error-text",
-														children: "*"
+											}) : Re ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("pre", {
+												className: "p-3 text-xs font-mono bg-bg-sunken text-text-primary overflow-auto max-h-48",
+												children: JSON.stringify(Re, null, 2)
+											}), K && /* @__PURE__ */ p("p", {
+												className: "px-3 py-2 text-xs text-text-tertiary border-t border-border-default",
+												children: [
+													"Previewing a sample",
+													K.total == null ? "" : ` (first ${Math.min(m, K.total)} of ${K.total} rows)`,
+													" · ",
+													K.sinkName
+												]
+											})] }) : /* @__PURE__ */ f("div", {
+												className: "p-4 text-sm text-text-secondary text-center",
+												children: "No data available"
+											})
+										})]
+									})
+								] })]
+							}),
+							y === 2 && /* @__PURE__ */ p("div", {
+								className: "space-y-5",
+								children: [
+									/* @__PURE__ */ p("div", { children: [
+										/* @__PURE__ */ p("label", {
+											htmlFor: "expression",
+											className: "block text-sm font-medium text-text-primary mb-2",
+											children: ["Expression ", /* @__PURE__ */ f("span", {
+												className: "text-status-error-text",
+												children: "*"
+											})]
+										}),
+										/* @__PURE__ */ f("textarea", {
+											id: "expression",
+											value: T.expression,
+											onChange: at,
+											placeholder: $.placeholder,
+											rows: 8,
+											className: `${_} font-mono resize-y ${D.expression ? "border-status-error-border" : "border-border-default"}`
+										}),
+										D.expression && /* @__PURE__ */ f("p", {
+											className: "text-xs text-status-error-text mt-1.5",
+											children: D.expression
+										}),
+										/* @__PURE__ */ p("p", {
+											className: "text-xs text-text-tertiary mt-1.5",
+											children: ["Example: ", $.example]
+										})
+									] }),
+									/* @__PURE__ */ f(u, {
+										type: "button",
+										onClick: pt,
+										disabled: Pe || !T.expression.trim(),
+										variant: "default",
+										className: "w-full",
+										children: Pe ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(c, { className: "w-4 h-4 mr-2 animate-spin" }), "Testing..."] }) : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(l, { className: "w-4 h-4 mr-2" }), "Run Test"] })
+									}),
+									/* @__PURE__ */ p("div", {
+										className: "grid gap-4 md:grid-cols-2",
+										children: [/* @__PURE__ */ p("div", { children: [
+											/* @__PURE__ */ p("div", {
+												className: "flex items-center justify-between mb-2",
+												children: [/* @__PURE__ */ p("label", {
+													className: "text-sm font-medium text-text-primary",
+													children: ["Input JSON", /* @__PURE__ */ f("span", {
+														className: `ml-2 text-[10px] font-semibold uppercase tracking-wide px-2 py-0.5 rounded border align-middle ${R ? "text-action-primary-bg bg-action-primary-bg/10 border-action-primary-bg/30" : "text-text-secondary bg-bg-sunken border-border-default"}`,
+														children: R ? "Reference mode" : "Sample mode"
 													})]
-												}),
-												/* @__PURE__ */ g("div", {
-													className: "flex gap-2",
-													children: [/* @__PURE__ */ g("select", {
-														id: "inputSinkKey",
-														value: E.inputSinkKey,
-														onChange: Ie,
-														className: `
-                          flex-1 px-3 py-2.5
-                          text-sm text-text-primary
-                          bg-bg-surface
-                          border ${O.inputSinkKey ? "border-status-error-border" : "border-border-default"}
-                          rounded-md
-                          focus:outline-none focus:ring-2 focus:ring-action-primary-bg
-                          transition-all
-                        `,
-														children: [/* @__PURE__ */ h("option", {
-															value: "",
-															children: "Select a DataSink..."
-														}), Ee.map((e) => /* @__PURE__ */ h("option", {
-															value: e.key,
-															children: e.name || e.key
-														}, e.id))]
-													}), E.inputSinkKey && /* @__PURE__ */ h("button", {
+												}), /* @__PURE__ */ p("div", {
+													className: "flex items-center gap-2",
+													children: [T.inputSinkKey && !R && /* @__PURE__ */ p("button", {
 														type: "button",
-														onClick: ze,
-														className: "px-3 py-2.5 text-sm font-medium text-action-primary-bg border border-action-primary-bg rounded-md hover:bg-action-primary-bg/10 transition-colors whitespace-nowrap",
-														children: "Load Sample"
-													})]
-												}),
-												O.inputSinkKey && /* @__PURE__ */ h("p", {
-													className: "text-xs text-status-error-text mt-1.5",
-													children: O.inputSinkKey
-												}),
-												/* @__PURE__ */ h("p", {
-													className: "text-xs text-text-tertiary mt-1.5",
-													children: "Select the data source for this parser to transform."
-												}),
-												E.inputSinkKey && /* @__PURE__ */ g("div", {
-													className: "mt-3",
-													children: [/* @__PURE__ */ g("button", {
+														onClick: ut,
+														disabled: Ie,
+														className: "inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-semibold text-action-primary-bg border border-action-primary-bg rounded-md hover:bg-action-primary-bg/10 transition-colors disabled:opacity-50",
+														children: [Ie ? /* @__PURE__ */ f(c, { className: "w-3.5 h-3.5 animate-spin" }) : /* @__PURE__ */ f(ue, { className: "w-3.5 h-3.5" }), "Load Sample"]
+													}), R && /* @__PURE__ */ p("button", {
 														type: "button",
-														onClick: Be,
-														className: "inline-flex items-center gap-2 text-sm text-action-primary-bg hover:text-action-primary-bgHover transition-colors",
-														children: [
-															h(W ? se : ce, { className: "w-4 h-4" }),
-															/* @__PURE__ */ h(ue, { className: "w-4 h-4" }),
-															"Show Data Preview"
-														]
-													}), W && /* @__PURE__ */ h("div", {
-														className: "mt-3 border border-border-default rounded-md overflow-hidden",
-														children: be ? /* @__PURE__ */ g("div", {
-															className: "p-4 flex items-center justify-center",
-															children: [/* @__PURE__ */ h(s, { className: "w-5 h-5 text-text-secondary animate-spin" }), /* @__PURE__ */ h("span", {
-																className: "ml-2 text-sm text-text-secondary",
-																children: "Loading data..."
-															})]
-														}) : J ? /* @__PURE__ */ h("div", {
-															className: "p-4 bg-status-error-bg/5",
-															children: /* @__PURE__ */ h("p", {
-																className: "text-sm text-status-error-text",
-																children: J
-															})
-														}) : K ? /* @__PURE__ */ h("pre", {
-															className: "p-3 text-xs font-mono bg-bg-sunken text-text-primary overflow-auto max-h-48",
-															children: JSON.stringify(K, null, 2)
-														}) : /* @__PURE__ */ h("div", {
-															className: "p-4 text-sm text-text-secondary text-center",
-															children: "No data available"
-														})
+														onClick: dt,
+														className: "inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-semibold text-text-primary border border-border-default rounded-md hover:bg-bg-sunken transition-colors",
+														children: [/* @__PURE__ */ f(ge, { className: "w-3.5 h-3.5" }), "Clear"]
 													})]
-												})
-											] }),
-											/* @__PURE__ */ g("div", { children: [
-												/* @__PURE__ */ g("label", {
-													htmlFor: "expression",
-													className: "block text-sm font-medium text-text-primary mb-2",
-													children: ["Expression ", /* @__PURE__ */ h("span", {
-														className: "text-status-error-text",
-														children: "*"
-													})]
-												}),
-												/* @__PURE__ */ h("textarea", {
-													id: "expression",
-													value: E.expression,
-													onChange: Fe,
-													placeholder: Ge.placeholder,
-													rows: 8,
-													className: `
-                        w-full px-3 py-2.5
-                        text-sm text-text-primary font-mono
-                        bg-bg-surface
-                        border ${O.expression ? "border-status-error-border" : "border-border-default"}
-                        rounded-md
-                        placeholder:text-text-tertiary
-                        focus:outline-none focus:ring-2 focus:ring-action-primary-bg
-                        resize-none
-                        transition-all
-                      `
-												}),
-												O.expression && /* @__PURE__ */ h("p", {
-													className: "text-xs text-status-error-text mt-1.5",
-													children: O.expression
-												}),
-												/* @__PURE__ */ g("p", {
-													className: "text-xs text-text-tertiary mt-1.5",
-													children: ["Example: ", Ge.example]
-												})
-											] })
-										]
-									})]
-								})
-							}),
-							/* @__PURE__ */ g("div", {
-								className: "space-y-6",
-								children: [/* @__PURE__ */ g(u, { children: [/* @__PURE__ */ h(f, {
-									className: "pb-4",
-									children: /* @__PURE__ */ g("div", {
-										className: "flex items-center gap-3",
-										children: [/* @__PURE__ */ h("div", {
-											className: "w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center",
-											children: /* @__PURE__ */ h(c, { className: "w-4 h-4 text-action-primary-bg" })
-										}), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h(p, {
-											className: "text-base",
-											children: "Test Expression"
-										}), /* @__PURE__ */ h("p", {
-											className: "text-xs text-text-secondary mt-0.5",
-											children: "Test your parser with sample data"
-										})] })]
-									})
-								}), /* @__PURE__ */ g(d, {
-									className: "space-y-5",
-									children: [
-										/* @__PURE__ */ g("div", { children: [
-											/* @__PURE__ */ h("label", {
-												className: "block text-sm font-medium text-text-primary mb-2",
-												children: "Input JSON"
+												})]
 											}),
-											/* @__PURE__ */ h("textarea", {
-												value: I,
-												onChange: (e) => L(e.target.value),
-												placeholder: "{\"data\": [{\"name\": \"test\", \"value\": 123}]}",
-												rows: 6,
-												className: "\n                        w-full px-3 py-2.5\n                        text-xs text-text-primary font-mono leading-relaxed\n                        bg-bg-surface\n                        border border-border-default\n                        rounded-md\n                        placeholder:text-text-tertiary\n                        focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n                        resize-none\n                        transition-all\n                      "
+											/* @__PURE__ */ f("textarea", {
+												value: A,
+												onChange: lt,
+												readOnly: R,
+												placeholder: "Type sample JSON to test against it — or Load a sample from the source…",
+												rows: 8,
+												className: `${_} text-xs font-mono leading-relaxed resize-y border-border-default ${R ? "bg-bg-sunken opacity-80 cursor-not-allowed" : ""}`
 											}),
-											/* @__PURE__ */ h("p", {
+											R && B ? /* @__PURE__ */ p("p", {
 												className: "text-xs text-text-tertiary mt-1.5",
-												children: "Paste test data or load from a DataSink above."
+												children: [
+													"Loaded a small sample",
+													B.total == null ? "" : ` (first ${Math.min(m, B.total)} of ${B.total} rows)`,
+													" ",
+													"from ",
+													B.sinkName,
+													" · locked — press Clear to edit."
+												]
+											}) : /* @__PURE__ */ f("p", {
+												className: "text-xs text-text-tertiary mt-1.5",
+												children: "Type sample JSON to test against it, or Load a sample from the source."
 											})
-										] }),
-										/* @__PURE__ */ h(l, {
-											type: "button",
-											onClick: Ve,
-											disabled: H || !E.expression.trim(),
-											variant: "default",
-											className: "w-full",
-											children: H ? /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(s, { className: "w-4 h-4 mr-2 animate-spin" }), "Testing..."] }) : /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(c, { className: "w-4 h-4 mr-2" }), "Run Test"] })
-										}),
-										(R || B) && /* @__PURE__ */ g("div", {
-											className: "pt-4 border-t border-border-default",
-											children: [/* @__PURE__ */ g("div", {
+										] }), /* @__PURE__ */ p("div", { children: [
+											/* @__PURE__ */ p("div", {
 												className: "flex items-center justify-between mb-2",
-												children: [/* @__PURE__ */ h("label", {
-													className: "block text-sm font-medium text-text-primary",
-													children: B ? "Error Output" : "Success Output"
-												}), B ? /* @__PURE__ */ g("span", {
+												children: [/* @__PURE__ */ f("label", {
+													className: "text-sm font-medium text-text-primary",
+													children: P ? "Error Output" : "Output"
+												}), (M || P) && (P ? /* @__PURE__ */ p("span", {
 													className: "text-xs px-2 py-1 bg-status-error-bg/10 text-status-error-text rounded flex items-center gap-1",
-													children: [/* @__PURE__ */ h(o, { className: "w-3 h-3" }), " Failed"]
-												}) : /* @__PURE__ */ g("span", {
+													children: [/* @__PURE__ */ f(s, { className: "w-3 h-3" }), " Failed"]
+												}) : /* @__PURE__ */ p("span", {
 													className: "text-xs px-2 py-1 bg-status-success-bg/10 text-status-success-text rounded flex items-center gap-1",
-													children: [/* @__PURE__ */ h(oe, { className: "w-3 h-3" }), " Passed"]
-												})]
-											}), /* @__PURE__ */ h("pre", {
-												className: `
-                          w-full px-3 py-2.5
-                          text-xs font-mono leading-relaxed
-                          ${B ? "bg-status-error-bg/5 text-status-error-text border-status-error-border/30" : "bg-status-success-bg/5 text-text-primary border-status-success-border/30"}
-                          border
-                          rounded-md
-                          overflow-auto
-                          max-h-[150px]
-                        `,
-												children: B || R
-											})]
-										}),
-										!R && !B && /* @__PURE__ */ h("div", {
-											className: "p-3 bg-bg-sunken rounded-md border border-border-default",
-											children: /* @__PURE__ */ g("p", {
-												className: "text-xs text-text-secondary leading-relaxed",
-												children: [/* @__PURE__ */ h("strong", { children: "Tip:" }), " Write your expression and click “Run Test” to see the transformation in real-time."]
+													children: [/* @__PURE__ */ f(oe, { className: "w-3 h-3" }), " Passed"]
+												}))]
+											}),
+											M || P ? /* @__PURE__ */ f("pre", {
+												className: `w-full px-3 py-2.5 text-xs font-mono leading-relaxed border rounded-md overflow-auto max-h-[220px] resize-y ${P ? "bg-status-error-bg/5 text-status-error-text border-status-error-border/30" : "bg-status-success-bg/5 text-text-primary border-status-success-border/30"}`,
+												children: P || M
+											}) : /* @__PURE__ */ f("div", {
+												className: "p-3 bg-bg-sunken rounded-md border border-border-default",
+												children: /* @__PURE__ */ p("p", {
+													className: "text-xs text-text-secondary leading-relaxed",
+													children: [/* @__PURE__ */ f("strong", { children: "Tip:" }), " write your expression and click “Run Test” to see the transformation."]
+												})
+											}),
+											I && !P && /* @__PURE__ */ p("p", {
+												className: "text-xs text-text-tertiary mt-1.5",
+												children: [
+													"Tested a sample",
+													I.sampledRows != null && I.totalRows != null ? ` (first ${I.sampledRows} of ${I.totalRows} rows)` : "",
+													"— a saved parser runs over the full source, so results may differ."
+												]
 											})
-										})
-									]
-								})] }), /* @__PURE__ */ g(u, { children: [/* @__PURE__ */ h(f, {
-									className: "pb-4",
-									children: /* @__PURE__ */ g("div", {
-										className: "flex items-center gap-3",
-										children: [/* @__PURE__ */ h("div", {
-											className: "w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center",
-											children: /* @__PURE__ */ h(me, { className: "w-4 h-4 text-action-primary-bg" })
-										}), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h(p, {
-											className: "text-base",
-											children: "Advanced Settings"
-										}), /* @__PURE__ */ h("p", {
-											className: "text-xs text-text-secondary mt-0.5",
-											children: "Cache configuration"
-										})] })]
+										] })]
 									})
-								}), /* @__PURE__ */ h(d, {
-									className: "space-y-5",
-									children: /* @__PURE__ */ g("div", { children: [
-										/* @__PURE__ */ h("label", {
-											className: "block text-sm font-medium text-text-primary mb-3",
-											children: "Cache Duration"
-										}),
-										/* @__PURE__ */ h(ne, {
-											value: E.ttl,
-											onChange: Le,
-											error: O.ttl
-										}),
-										/* @__PURE__ */ h("p", {
-											className: "text-xs text-text-tertiary mt-2",
-											children: "Select a preset or enter a custom duration (30-86400 seconds)."
-										})
-									] })
+								]
+							}),
+							y === 3 && /* @__PURE__ */ p("div", {
+								className: "space-y-6",
+								children: [/* @__PURE__ */ p("div", { children: [
+									/* @__PURE__ */ f("label", {
+										className: "block text-sm font-medium text-text-primary mb-1",
+										children: "Cache Duration"
+									}),
+									/* @__PURE__ */ f("p", {
+										className: "text-xs text-text-tertiary mb-3",
+										children: "How long should data be cached before refreshing?"
+									}),
+									/* @__PURE__ */ f(ne, {
+										value: T.ttl,
+										onChange: st,
+										error: D.ttl,
+										hideLabel: !0
+									})
+								] }), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
+									className: "block text-sm font-medium text-text-primary mb-2",
+									children: "Review"
+								}), /* @__PURE__ */ f("div", {
+									className: "border border-border-default rounded-lg overflow-hidden",
+									children: [
+										["Name", T.name || "—"],
+										["Output Key", T.outputKey || "—"],
+										["Scope", w ? x === "default" ? "Global" : Qe.find((e) => e.id === x)?.name || x : "Dashboard"],
+										["Type", g[T.type].name],
+										["Source", X || "—"]
+									].map(([e, t]) => /* @__PURE__ */ p("div", {
+										className: "flex items-center justify-between gap-3 px-4 py-2.5 text-sm border-b border-border-default last:border-b-0",
+										children: [/* @__PURE__ */ f("span", {
+											className: "text-text-secondary",
+											children: e
+										}), /* @__PURE__ */ f("span", {
+											className: "font-medium text-text-primary text-right break-words",
+											children: t
+										})]
+									}, e))
 								})] })]
 							})
 						]
-					}), /* @__PURE__ */ g("div", {
-						className: "flex items-center justify-end gap-4 pt-6 mt-6 border-t border-border-default",
-						children: [/* @__PURE__ */ h(l, {
-							type: "button",
-							onClick: He,
-							variant: "secondary",
-							children: "Cancel"
-						}), /* @__PURE__ */ h(l, {
-							type: "submit",
-							disabled: !We || M,
-							variant: "default",
-							children: M ? /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(s, { className: "w-4 h-4 mr-2 animate-spin" }), "Saving..."] }) : /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(pe, { className: "w-4 h-4 mr-2" }), w ? "Save Changes" : "Create Parser"] })
-						})]
+					})]
+				}),
+				/* @__PURE__ */ p("div", {
+					className: "flex items-center justify-between gap-4 pt-6 mt-6 border-t border-border-default",
+					children: [y === 0 ? /* @__PURE__ */ f(u, {
+						type: "button",
+						onClick: Z,
+						variant: "secondary",
+						children: "Cancel"
+					}) : /* @__PURE__ */ p(u, {
+						type: "button",
+						onClick: vt,
+						variant: "secondary",
+						children: [/* @__PURE__ */ f(ae, { className: "w-4 h-4 mr-2" }), "Back"]
+					}), yt ? /* @__PURE__ */ f(u, {
+						type: "button",
+						onClick: mt,
+						disabled: !ht || Ae,
+						variant: "default",
+						children: Ae ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(c, { className: "w-4 h-4 mr-2 animate-spin" }), "Saving..."] }) : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(me, { className: "w-4 h-4 mr-2" }), C ? "Save Changes" : "Create Parser"] })
+					}) : /* @__PURE__ */ p(u, {
+						type: "button",
+						onClick: _t,
+						disabled: !Q(y),
+						variant: "default",
+						children: ["Next", /* @__PURE__ */ f(ce, { className: "w-4 h-4 ml-2" })]
 					})]
 				})
 			]
@@ -730,6 +819,6 @@ var _ = {
 	});
 });
 //#endregion
-export { y as ParserBuilderPage, y as default };
+export { v as ParserBuilderPage, v as default };
 
 //# sourceMappingURL=ParserBuilderPage.js.map