@burdenoff/microfe-bigconsole 2026.510.54

package/dist/bigconsole/pages/ParserBuilderPage.js

@@ -0,0 +1,727 @@
+import { useAppNavigate as e } from "../contexts/NavigationContext.js";
+import "../contexts/index.js";
+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 { 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 { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Button as f, Card as p, CardContent as m, CardHeader as h, CardTitle as g } from "@burdenoff/fe-libs/ui";
+//#region src/bigconsole/pages/ParserBuilderPage.tsx
+function he(e) {
+	return e.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "").substring(0, 64);
+}
+function ge(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 _ = {
+	jq: {
+		name: "JQ",
+		description: "Lightweight JSON processor - fast and efficient for simple transformations",
+		placeholder: ".data | map({name: .name, value: .count})",
+		example: ".data | map(.name) - Extract names from data array"
+	},
+	jsonata: {
+		name: "JSONata",
+		description: "Query and transformation language - supports complex queries and calculations",
+		placeholder: "$sum(data[*].value)",
+		example: "$sum(data.values) - Calculate sum of values"
+	}
+}, _e = "default", v = n(function() {
+	let { parserId: n, consoleId: v } = ie(), y = e(), [b, x] = a(_e), S = v || b || _e, C = n !== "new" && !!n, w = !v, [T, E] = a({
+		name: "",
+		outputKey: "",
+		description: "",
+		type: "jq",
+		expression: "",
+		inputSinkKey: "",
+		ttl: 900
+	}), [D, O] = a({}), [k, A] = a(!1), [j, M] = a(!1), [N, P] = a(null), [F, I] = a("{\n  \"data\": [\n    {\"name\": \"Item 1\", \"count\": 10},\n    {\"name\": \"Item 2\", \"count\": 20}\n  ]\n}"), [L, R] = a(""), [z, B] = a(null), [V, H] = a(!1), [U, W] = a(!1), [G, ve] = a(null), [ye, K] = a(!1), [q, J] = a(null), { loading: be, error: Y, parsers: xe, fetchParser: X, createParser: Se, updateParser: Ce, testParserExpression: we } = te({
+		consoleId: S || "",
+		skipFetch: !0
+	}), { dataSinks: Te, fetchDataSinks: Ee, getDataSinkData: Z } = ee({ skipFetch: !0 }), { dashboards: De, fetchDashboards: Oe, loading: ke } = t(), Q = C ? xe.find((e) => e.id === n) : null;
+	i(() => {
+		Ee(), C && n && X(n), w && Oe();
+	}, [
+		C,
+		n,
+		X,
+		Ee,
+		w,
+		Oe
+	]), i(() => {
+		Q && (E({
+			name: Q.name || "",
+			outputKey: Q.outputKey || "",
+			description: Q.description || "",
+			type: Q.type,
+			expression: Q.expression || "",
+			inputSinkKey: Q.inputSinkKey || "",
+			ttl: Q.ttl ?? null
+		}), A(!0), Q.consoleId && x(Q.consoleId));
+	}, [Q]);
+	let Ae = r((e) => {
+		let t = e.target.value;
+		E((e) => ({
+			...e,
+			name: t,
+			outputKey: k ? e.outputKey : he(t)
+		})), O((e) => ({
+			...e,
+			name: void 0
+		}));
+	}, [k]), je = r((e) => {
+		let t = e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, "");
+		E((e) => ({
+			...e,
+			outputKey: t
+		})), A(!0), O((e) => ({
+			...e,
+			outputKey: void 0
+		}));
+	}, []), Me = r((e) => {
+		E((t) => ({
+			...t,
+			description: e.target.value
+		}));
+	}, []), Ne = r((e) => {
+		E((t) => ({
+			...t,
+			type: e
+		})), R(""), B(null);
+	}, []), Pe = r((e) => {
+		E((t) => ({
+			...t,
+			expression: e.target.value
+		})), O((e) => ({
+			...e,
+			expression: void 0
+		}));
+	}, []), Fe = r((e) => {
+		E((t) => ({
+			...t,
+			inputSinkKey: e.target.value
+		})), O((e) => ({
+			...e,
+			inputSinkKey: void 0
+		}));
+	}, []), Ie = r((e) => {
+		E((t) => ({
+			...t,
+			ttl: e
+		})), O((e) => ({
+			...e,
+			ttl: void 0
+		}));
+	}, []), Le = r((e) => {
+		x(e.target.value);
+	}, []), Re = r(async () => {
+		if (T.inputSinkKey) try {
+			let e = await Z({ key: T.inputSinkKey });
+			e?.raw && I(JSON.stringify(e.raw, null, 2));
+		} catch {}
+	}, [T.inputSinkKey, Z]), ze = r(async () => {
+		if (U) {
+			W(!1);
+			return;
+		}
+		if (!T.inputSinkKey) {
+			J("Please select a source DataSink first");
+			return;
+		}
+		W(!0), K(!0), J(null);
+		try {
+			let e = await Z({ key: T.inputSinkKey });
+			e?.raw ? ve(e.raw) : J("No data available in selected DataSink");
+		} catch (e) {
+			J(e instanceof Error ? e.message : "Failed to load data");
+		} finally {
+			K(!1);
+		}
+	}, [
+		U,
+		T.inputSinkKey,
+		Z
+	]), Be = r(async () => {
+		if (!T.expression.trim()) {
+			B("Expression is required");
+			return;
+		}
+		H(!0), B(null), R("");
+		try {
+			let e = await we({
+				type: T.type,
+				expression: T.expression,
+				sampleData: JSON.parse(F)
+			});
+			e && (e.success ? R(JSON.stringify(e.output, null, 2)) : B(e.error || "Test failed"));
+		} catch (e) {
+			B(e instanceof Error ? e.message : "Test failed");
+		} finally {
+			H(!1);
+		}
+	}, [
+		T.type,
+		T.expression,
+		F,
+		we
+	]), Ve = r(() => {
+		y(v ? `/dashboards/${v}/parsers` : "/parsers");
+	}, [y, v]), He = r(async (e) => {
+		e.preventDefault(), P(null);
+		let t = ge(T);
+		if (Object.keys(t).length > 0) {
+			O(t);
+			return;
+		}
+		M(!0);
+		try {
+			if (C && Q) {
+				if (!await Ce(Q.id, {
+					name: T.name,
+					description: T.description || void 0,
+					expression: T.expression,
+					inputSinkKey: T.inputSinkKey,
+					outputKey: T.outputKey,
+					ttl: T.ttl
+				}, Q.version)) throw Error("Failed to update parser");
+			} else if (!await Se({
+				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");
+			y(v ? `/dashboards/${v}/parsers` : "/parsers");
+		} catch (e) {
+			P(e instanceof Error ? e.message : "Failed to save parser");
+		} finally {
+			M(!1);
+		}
+	}, [
+		T,
+		C,
+		Q,
+		Se,
+		Ce,
+		y,
+		S,
+		v
+	]), Ue = re(() => T.name.trim().length >= 2 && T.expression.trim().length > 0 && T.inputSinkKey.trim().length > 0 && T.outputKey.trim().length > 0, [
+		T.name,
+		T.expression,
+		T.inputSinkKey,
+		T.outputKey
+	]);
+	if (be && C) return /* @__PURE__ */ u("div", {
+		className: "flex items-center justify-center min-h-[400px]",
+		children: /* @__PURE__ */ u(s, { className: "w-8 h-8 text-text-secondary animate-spin" })
+	});
+	if (Y) return /* @__PURE__ */ u("div", {
+		className: "flex items-center justify-center min-h-[400px] p-card-padding",
+		children: /* @__PURE__ */ d("div", {
+			className: "text-center",
+			children: [
+				/* @__PURE__ */ u(o, { className: "w-12 h-12 text-state-error mx-auto mb-spacing-md" }),
+				/* @__PURE__ */ u("p", {
+					className: "text-state-error text-body-sm font-medium mb-spacing-sm",
+					children: "Failed to load Parser"
+				}),
+				/* @__PURE__ */ u("p", {
+					className: "text-text-tertiary text-body-xs",
+					children: Y.message
+				})
+			]
+		})
+	});
+	let $ = _[T.type];
+	return /* @__PURE__ */ u("div", {
+		className: "min-h-screen bg-bg-canvas",
+		children: /* @__PURE__ */ d("div", {
+			className: "max-w-7xl mx-auto p-card-padding",
+			children: [
+				/* @__PURE__ */ d("div", {
+					className: "mb-spacing-lg",
+					children: [
+						/* @__PURE__ */ d(f, {
+							onClick: Ve,
+							variant: "ghost",
+							size: "sm",
+							className: "mb-spacing-md",
+							children: [/* @__PURE__ */ u(ae, { className: "w-4 h-4 mr-2" }), "Back to Parsers"]
+						}),
+						/* @__PURE__ */ u("h1", {
+							className: "text-heading-h1 font-bold text-text-primary",
+							children: C ? "Edit Parser" : "Create Parser"
+						}),
+						/* @__PURE__ */ u("p", {
+							className: "text-body-sm text-text-secondary mt-spacing-xs",
+							children: C ? "Update the parser configuration and test your changes." : "Transform data using JQ or JSONata expressions."
+						})
+					]
+				}),
+				N && /* @__PURE__ */ d("div", {
+					className: "mb-spacing-lg p-4 bg-state-error/10 border border-state-error/30 rounded-lg flex items-start gap-3",
+					children: [/* @__PURE__ */ u(o, { className: "w-5 h-5 text-state-error flex-shrink-0 mt-0.5" }), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
+						className: "text-sm font-medium text-state-error",
+						children: "Failed to save Parser"
+					}), /* @__PURE__ */ u("p", {
+						className: "text-xs text-state-error/80 mt-1",
+						children: N
+					})] })]
+				}),
+				/* @__PURE__ */ d("form", {
+					onSubmit: He,
+					children: [/* @__PURE__ */ d("div", {
+						className: "grid gap-6 lg:grid-cols-3",
+						children: [
+							/* @__PURE__ */ u("div", {
+								className: "space-y-6",
+								children: /* @__PURE__ */ d(p, { children: [/* @__PURE__ */ u(h, {
+									className: "pb-4",
+									children: /* @__PURE__ */ d("div", {
+										className: "flex items-center gap-3",
+										children: [/* @__PURE__ */ u("div", {
+											className: "w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center",
+											children: /* @__PURE__ */ u(de, { className: "w-4 h-4 text-action-primary-bg" })
+										}), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u(g, {
+											className: "text-base",
+											children: "Basic Information"
+										}), /* @__PURE__ */ u("p", {
+											className: "text-xs text-text-secondary mt-0.5",
+											children: "Essential details for your parser"
+										})] })]
+									})
+								}), /* @__PURE__ */ d(m, {
+									className: "space-y-5",
+									children: [
+										/* @__PURE__ */ d("div", { children: [
+											/* @__PURE__ */ d("label", {
+												htmlFor: "name",
+												className: "block text-sm font-medium text-text-primary mb-2",
+												children: ["Name ", /* @__PURE__ */ u("span", {
+													className: "text-state-error",
+													children: "*"
+												})]
+											}),
+											/* @__PURE__ */ u("input", {
+												id: "name",
+												type: "text",
+												value: T.name,
+												onChange: Ae,
+												placeholder: "e.g., User Analytics Parser",
+												className: `
+                        w-full px-3 py-2.5
+                        text-sm text-text-primary
+                        bg-bg-surface
+                        border ${D.name ? "border-state-error" : "border-border-default"}
+                        rounded-md
+                        placeholder:text-text-tertiary
+                        focus:outline-none focus:ring-2 focus:ring-action-primary-bg
+                        transition-all
+                      `
+											}),
+											D.name && /* @__PURE__ */ u("p", {
+												className: "text-xs text-state-error mt-1.5",
+												children: D.name
+											})
+										] }),
+										/* @__PURE__ */ d("div", { children: [
+											/* @__PURE__ */ d("label", {
+												htmlFor: "outputKey",
+												className: "block text-sm font-medium text-text-primary mb-2",
+												children: ["Output Key ", /* @__PURE__ */ u("span", {
+													className: "text-state-error",
+													children: "*"
+												})]
+											}),
+											/* @__PURE__ */ u("input", {
+												id: "outputKey",
+												type: "text",
+												value: T.outputKey,
+												onChange: je,
+												placeholder: "user_analytics_parser",
+												disabled: C,
+												className: `
+                        w-full px-3 py-2.5
+                        text-sm text-text-primary font-mono
+                        bg-bg-surface
+                        border ${D.outputKey ? "border-state-error" : "border-border-default"}
+                        rounded-md
+                        placeholder:text-text-tertiary
+                        focus:outline-none focus:ring-2 focus:ring-action-primary-bg
+                        disabled:bg-bg-muted disabled:cursor-not-allowed disabled:opacity-60
+                        transition-all
+                      `
+											}),
+											D.outputKey && /* @__PURE__ */ u("p", {
+												className: "text-xs text-state-error mt-1.5",
+												children: D.outputKey
+											}),
+											!C && /* @__PURE__ */ u("p", {
+												className: "text-xs text-text-tertiary mt-1.5",
+												children: "Auto-generated from name. Customize if needed."
+											})
+										] }),
+										/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("label", {
+											htmlFor: "description",
+											className: "block text-sm font-medium text-text-primary mb-2",
+											children: "Description"
+										}), /* @__PURE__ */ u("textarea", {
+											id: "description",
+											value: T.description,
+											onChange: Me,
+											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                      "
+										})] }),
+										w && /* @__PURE__ */ d("div", { children: [
+											/* @__PURE__ */ u("label", {
+												htmlFor: "dashboard",
+												className: "block text-sm font-medium text-text-primary mb-2",
+												children: /* @__PURE__ */ d("div", {
+													className: "flex items-center gap-2",
+													children: [/* @__PURE__ */ u(fe, { className: "w-4 h-4" }), "Dashboard Scope"]
+												})
+											}),
+											/* @__PURE__ */ d("select", {
+												id: "dashboard",
+												value: b,
+												onChange: Le,
+												disabled: ke || C,
+												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-muted disabled:cursor-not-allowed disabled:opacity-60\n                          transition-all\n                        ",
+												children: [/* @__PURE__ */ u("option", {
+													value: "default",
+													children: "Global (available everywhere)"
+												}), De.map((e) => /* @__PURE__ */ u("option", {
+													value: e.id,
+													children: e.name
+												}, e.id))]
+											}),
+											/* @__PURE__ */ u("p", {
+												className: "text-xs text-text-tertiary mt-1.5",
+												children: C ? "Dashboard scope cannot be changed after creation." : b === "default" ? "Global parsers are available across all dashboards." : "This parser will only be available in the selected dashboard."
+											})
+										] })
+									]
+								})] })
+							}),
+							/* @__PURE__ */ u("div", {
+								className: "space-y-6",
+								children: /* @__PURE__ */ d(p, { children: [/* @__PURE__ */ u(h, {
+									className: "pb-4",
+									children: /* @__PURE__ */ d("div", {
+										className: "flex items-center gap-3",
+										children: [/* @__PURE__ */ u("div", {
+											className: "w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center",
+											children: /* @__PURE__ */ u(le, { className: "w-4 h-4 text-action-primary-bg" })
+										}), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u(g, {
+											className: "text-base",
+											children: "Parser Configuration"
+										}), /* @__PURE__ */ u("p", {
+											className: "text-xs text-text-secondary mt-0.5",
+											children: "Configure parser type and data source"
+										})] })]
+									})
+								}), /* @__PURE__ */ d(m, {
+									className: "space-y-5",
+									children: [
+										/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("label", {
+											className: "block text-sm font-medium text-text-primary mb-3",
+											children: ["Parser Type ", /* @__PURE__ */ u("span", {
+												className: "text-state-error",
+												children: "*"
+											})]
+										}), /* @__PURE__ */ u("div", {
+											className: "space-y-2",
+											children: Object.keys(_).map((e) => {
+												let t = _[e];
+												return /* @__PURE__ */ d("label", {
+													className: `
+                              flex items-start gap-3 p-3
+                              border rounded-md
+                              cursor-pointer
+                              ${T.type === e ? "border-action-primary-bg bg-action-primary-bg/5" : "border-border-default hover:bg-bg-muted"}
+                              transition-colors
+                            `,
+													children: [/* @__PURE__ */ u("input", {
+														type: "radio",
+														name: "parserType",
+														value: e,
+														checked: T.type === e,
+														onChange: () => Ne(e),
+														className: "mt-1 w-4 h-4 text-action-primary-bg"
+													}), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("span", {
+														className: "text-sm font-medium text-text-primary",
+														children: t.name
+													}), /* @__PURE__ */ u("p", {
+														className: "text-xs text-text-secondary mt-0.5",
+														children: t.description
+													})] })]
+												}, e);
+											})
+										})] }),
+										/* @__PURE__ */ d("div", { children: [
+											/* @__PURE__ */ d("label", {
+												htmlFor: "inputSinkKey",
+												className: "block text-sm font-medium text-text-primary mb-2",
+												children: ["Source DataSink ", /* @__PURE__ */ u("span", {
+													className: "text-state-error",
+													children: "*"
+												})]
+											}),
+											/* @__PURE__ */ d("div", {
+												className: "flex gap-2",
+												children: [/* @__PURE__ */ d("select", {
+													id: "inputSinkKey",
+													value: T.inputSinkKey,
+													onChange: Fe,
+													className: `
+                          flex-1 px-3 py-2.5
+                          text-sm text-text-primary
+                          bg-bg-surface
+                          border ${D.inputSinkKey ? "border-state-error" : "border-border-default"}
+                          rounded-md
+                          focus:outline-none focus:ring-2 focus:ring-action-primary-bg
+                          transition-all
+                        `,
+													children: [/* @__PURE__ */ u("option", {
+														value: "",
+														children: "Select a DataSink..."
+													}), Te.map((e) => /* @__PURE__ */ u("option", {
+														value: e.key,
+														children: e.name || e.key
+													}, e.id))]
+												}), T.inputSinkKey && /* @__PURE__ */ u("button", {
+													type: "button",
+													onClick: Re,
+													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"
+												})]
+											}),
+											D.inputSinkKey && /* @__PURE__ */ u("p", {
+												className: "text-xs text-state-error mt-1.5",
+												children: D.inputSinkKey
+											}),
+											/* @__PURE__ */ u("p", {
+												className: "text-xs text-text-tertiary mt-1.5",
+												children: "Select the data source for this parser to transform."
+											}),
+											T.inputSinkKey && /* @__PURE__ */ d("div", {
+												className: "mt-3",
+												children: [/* @__PURE__ */ d("button", {
+													type: "button",
+													onClick: ze,
+													className: "inline-flex items-center gap-2 text-sm text-action-primary-bg hover:text-action-primary-bgHover transition-colors",
+													children: [
+														u(U ? se : ce, { className: "w-4 h-4" }),
+														/* @__PURE__ */ u(ue, { className: "w-4 h-4" }),
+														"Show Data Preview"
+													]
+												}), U && /* @__PURE__ */ u("div", {
+													className: "mt-3 border border-border-default rounded-md overflow-hidden",
+													children: ye ? /* @__PURE__ */ d("div", {
+														className: "p-4 flex items-center justify-center",
+														children: [/* @__PURE__ */ u(s, { className: "w-5 h-5 text-text-secondary animate-spin" }), /* @__PURE__ */ u("span", {
+															className: "ml-2 text-sm text-text-secondary",
+															children: "Loading data..."
+														})]
+													}) : q ? /* @__PURE__ */ u("div", {
+														className: "p-4 bg-state-error/5",
+														children: /* @__PURE__ */ u("p", {
+															className: "text-sm text-state-error",
+															children: q
+														})
+													}) : G ? /* @__PURE__ */ u("pre", {
+														className: "p-3 text-xs font-mono bg-bg-muted text-text-primary overflow-auto max-h-48",
+														children: JSON.stringify(G, null, 2)
+													}) : /* @__PURE__ */ u("div", {
+														className: "p-4 text-sm text-text-secondary text-center",
+														children: "No data available"
+													})
+												})]
+											})
+										] }),
+										/* @__PURE__ */ d("div", { children: [
+											/* @__PURE__ */ d("label", {
+												htmlFor: "expression",
+												className: "block text-sm font-medium text-text-primary mb-2",
+												children: ["Expression ", /* @__PURE__ */ u("span", {
+													className: "text-state-error",
+													children: "*"
+												})]
+											}),
+											/* @__PURE__ */ u("textarea", {
+												id: "expression",
+												value: T.expression,
+												onChange: Pe,
+												placeholder: $.placeholder,
+												rows: 8,
+												className: `
+                        w-full px-3 py-2.5
+                        text-sm text-text-primary font-mono
+                        bg-bg-surface
+                        border ${D.expression ? "border-state-error" : "border-border-default"}
+                        rounded-md
+                        placeholder:text-text-tertiary
+                        focus:outline-none focus:ring-2 focus:ring-action-primary-bg
+                        resize-none
+                        transition-all
+                      `
+											}),
+											D.expression && /* @__PURE__ */ u("p", {
+												className: "text-xs text-state-error mt-1.5",
+												children: D.expression
+											}),
+											/* @__PURE__ */ d("p", {
+												className: "text-xs text-text-tertiary mt-1.5",
+												children: ["Example: ", $.example]
+											})
+										] })
+									]
+								})] })
+							}),
+							/* @__PURE__ */ d("div", {
+								className: "space-y-6",
+								children: [/* @__PURE__ */ d(p, { children: [/* @__PURE__ */ u(h, {
+									className: "pb-4",
+									children: /* @__PURE__ */ d("div", {
+										className: "flex items-center gap-3",
+										children: [/* @__PURE__ */ u("div", {
+											className: "w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center",
+											children: /* @__PURE__ */ u(c, { className: "w-4 h-4 text-action-primary-bg" })
+										}), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u(g, {
+											className: "text-base",
+											children: "Test Expression"
+										}), /* @__PURE__ */ u("p", {
+											className: "text-xs text-text-secondary mt-0.5",
+											children: "Test your parser with sample data"
+										})] })]
+									})
+								}), /* @__PURE__ */ d(m, {
+									className: "space-y-5",
+									children: [
+										/* @__PURE__ */ d("div", { children: [
+											/* @__PURE__ */ u("label", {
+												className: "block text-sm font-medium text-text-primary mb-2",
+												children: "Input JSON"
+											}),
+											/* @__PURE__ */ u("textarea", {
+												value: F,
+												onChange: (e) => I(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__ */ u("p", {
+												className: "text-xs text-text-tertiary mt-1.5",
+												children: "Paste test data or load from a DataSink above."
+											})
+										] }),
+										/* @__PURE__ */ u(f, {
+											type: "button",
+											onClick: Be,
+											disabled: V || !T.expression.trim(),
+											variant: "default",
+											className: "w-full",
+											children: V ? /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(s, { className: "w-4 h-4 mr-2 animate-spin" }), "Testing..."] }) : /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(c, { className: "w-4 h-4 mr-2" }), "Run Test"] })
+										}),
+										(L || z) && /* @__PURE__ */ d("div", {
+											className: "pt-4 border-t border-border-default",
+											children: [/* @__PURE__ */ d("div", {
+												className: "flex items-center justify-between mb-2",
+												children: [/* @__PURE__ */ u("label", {
+													className: "block text-sm font-medium text-text-primary",
+													children: z ? "Error Output" : "Success Output"
+												}), z ? /* @__PURE__ */ d("span", {
+													className: "text-xs px-2 py-1 bg-state-error/10 text-state-error rounded flex items-center gap-1",
+													children: [/* @__PURE__ */ u(o, { className: "w-3 h-3" }), " Failed"]
+												}) : /* @__PURE__ */ d("span", {
+													className: "text-xs px-2 py-1 bg-state-success/10 text-state-success rounded flex items-center gap-1",
+													children: [/* @__PURE__ */ u(oe, { className: "w-3 h-3" }), " Passed"]
+												})]
+											}), /* @__PURE__ */ u("pre", {
+												className: `
+                          w-full px-3 py-2.5
+                          text-xs font-mono leading-relaxed
+                          ${z ? "bg-state-error/5 text-state-error border-state-error/30" : "bg-state-success/5 text-text-primary border-state-success/30"}
+                          border
+                          rounded-md
+                          overflow-auto
+                          max-h-[150px]
+                        `,
+												children: z || L
+											})]
+										}),
+										!L && !z && /* @__PURE__ */ u("div", {
+											className: "p-3 bg-bg-muted rounded-md border border-border-default",
+											children: /* @__PURE__ */ d("p", {
+												className: "text-xs text-text-secondary leading-relaxed",
+												children: [/* @__PURE__ */ u("strong", { children: "Tip:" }), " Write your expression and click “Run Test” to see the transformation in real-time."]
+											})
+										})
+									]
+								})] }), /* @__PURE__ */ d(p, { children: [/* @__PURE__ */ u(h, {
+									className: "pb-4",
+									children: /* @__PURE__ */ d("div", {
+										className: "flex items-center gap-3",
+										children: [/* @__PURE__ */ u("div", {
+											className: "w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center",
+											children: /* @__PURE__ */ u(me, { className: "w-4 h-4 text-action-primary-bg" })
+										}), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u(g, {
+											className: "text-base",
+											children: "Advanced Settings"
+										}), /* @__PURE__ */ u("p", {
+											className: "text-xs text-text-secondary mt-0.5",
+											children: "Cache configuration"
+										})] })]
+									})
+								}), /* @__PURE__ */ u(m, {
+									className: "space-y-5",
+									children: /* @__PURE__ */ d("div", { children: [
+										/* @__PURE__ */ u("label", {
+											className: "block text-sm font-medium text-text-primary mb-3",
+											children: "Cache Duration"
+										}),
+										/* @__PURE__ */ u(ne, {
+											value: T.ttl,
+											onChange: Ie,
+											error: D.ttl
+										}),
+										/* @__PURE__ */ u("p", {
+											className: "text-xs text-text-tertiary mt-2",
+											children: "Select a preset or enter a custom duration (30-86400 seconds)."
+										})
+									] })
+								})] })]
+							})
+						]
+					}), /* @__PURE__ */ d("div", {
+						className: "flex items-center justify-end gap-spacing-md pt-spacing-lg mt-spacing-lg border-t border-border-default",
+						children: [/* @__PURE__ */ u(f, {
+							type: "button",
+							onClick: Ve,
+							variant: "secondary",
+							children: "Cancel"
+						}), /* @__PURE__ */ u(f, {
+							type: "submit",
+							disabled: !Ue || j,
+							variant: "default",
+							children: j ? /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(s, { className: "w-4 h-4 mr-2 animate-spin" }), "Saving..."] }) : /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(pe, { className: "w-4 h-4 mr-2" }), C ? "Save Changes" : "Create Parser"] })
+						})]
+					})]
+				})
+			]
+		})
+	});
+});
+//#endregion
+export { v as ParserBuilderPage, v as default };
+
+//# sourceMappingURL=ParserBuilderPage.js.map