@burdenoff/microfe-bigconsole 2026.624.2 → 2026.625.1

package/dist/bigconsole/pages/DataSinkBuilderPage.js

@@ -2,18 +2,18 @@ import { useAppNavigate as e } from "../contexts/NavigationContext.js";
 import "../contexts/index.js";
 import t from "../hooks/useDataSinkOperations.js";
 import { isNative as n, nativeCopyText as ee, nativeToast as te } from "../../utils/nativeBridge.js";
-import ne from "../components/datasink/CacheTTLSelector.js";
-import re from "../components/datasink/RefreshTypeSelector.js";
-import { memo as r, useCallback as i, useEffect as a, useMemo as ie, useState as o } from "react";
-import { useParams as ae } from "react-router-dom";
-import { AlertCircle as s, ArrowLeft as oe, Check as c, Copy as se, Database as l, Eye as u, Loader2 as d, Save as f, Settings as p } from "lucide-react";
-import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
-import { Button as _, Card as v, CardContent as y, CardHeader as b, CardTitle as x, Input as S, Label as C, Textarea as w } from "@burdenoff/fe-libs/ui";
+import r from "../components/datasink/CacheTTLSelector.js";
+import ne from "../components/datasink/RefreshTypeSelector.js";
+import { memo as i, useCallback as a, useEffect as o, useMemo as re, useState as s } from "react";
+import { useParams as ie } from "react-router-dom";
+import { AlertCircle as c, ArrowLeft as l, Check as ae, Copy as oe, Database as u, Eye as d, Loader2 as f, Save as se, Settings as ce } from "lucide-react";
+import { Button as p, Card as m, CardContent as h, CardHeader as g, CardTitle as _, GlassCard as le, IllustratedEmptyState as v, Input as y, Label as b, PagePurpose as ue, Textarea as x } from "@burdenoff/fe-libs/ui";
+import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
 //#region src/bigconsole/pages/DataSinkBuilderPage.tsx
-function T(e) {
+function de(e) {
 	return e.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "").substring(0, 64);
 }
-function ce(e) {
+function T(e) {
 	let t = {};
 	if (e.name.trim() ? e.name.length < 2 ? t.name = "Name must be at least 2 characters" : e.name.length > 100 && (t.name = "Name must be less than 100 characters") : t.name = "Name is required", e.key.trim() ? /^[a-z0-9_]+$/.test(e.key) ? e.key.length > 64 && (t.key = "Key must be less than 64 characters") : t.key = "Key can only contain lowercase letters, numbers, and underscores" : t.key = "Key is required", e.data && e.data.trim()) try {
 		JSON.parse(e.data);
@@ -22,62 +22,62 @@ function ce(e) {
 	}
 	return t;
 }
-var E = r(function() {
-	let { dataSinkId: r } = ae(), E = e(), D = r !== "new" && !!r, [O, k] = o({
+var E = i(function() {
+	let { dataSinkId: i } = ie(), E = e(), D = i !== "new" && !!i, [O, k] = s({
 		name: "",
 		key: "",
 		description: "",
 		ttl: 300,
 		refresh: { type: "manual" },
 		data: "{}"
-	}), [A, j] = o({}), [M, N] = o(!1), [P, F] = o(!1), [I, L] = o(null), [le, R] = o(!1), [z, B] = o(!1), [V, H] = o(null), [U, W] = o(null), { loading: ue, error: G, dataSinks: de, fetchDataSink: K, createDataSink: q, updateDataSink: J, getDataSinkData: Y } = t({ skipFetch: !0 }), X = D ? de.find((e) => e.id === r) : null;
-	a(() => {
-		D && r && !X && K(r);
+	}), [A, j] = s({}), [M, N] = s(!1), [P, F] = s(!1), [I, L] = s(null), [R, z] = s(!1), [B, V] = s(!1), [H, U] = s(null), [W, G] = s(null), { loading: fe, error: K, dataSinks: pe, fetchDataSink: q, createDataSink: J, updateDataSink: Y, getDataSinkData: X } = t({ skipFetch: !0 }), Z = D ? pe.find((e) => e.id === i) : null;
+	o(() => {
+		D && i && !Z && q(i);
 	}, [
 		D,
-		r,
-		X,
-		K
+		i,
+		Z,
+		q
 	]);
-	let [Z, fe] = o(!1);
-	a(() => {
-		if (X && !Z) {
+	let [Q, me] = s(!1);
+	o(() => {
+		if (Z && !Q) {
 			let e = "";
-			if (X.data) try {
-				if (typeof X.data == "string") {
-					let t = JSON.parse(X.data);
+			if (Z.data) try {
+				if (typeof Z.data == "string") {
+					let t = JSON.parse(Z.data);
 					e = JSON.stringify(t, null, 2);
-				} else e = JSON.stringify(X.data, null, 2);
+				} else e = JSON.stringify(Z.data, null, 2);
 			} catch {
-				e = typeof X.data == "string" ? X.data : "";
+				e = typeof Z.data == "string" ? Z.data : "";
 			}
 			k({
-				name: X.name || "",
-				key: X.key || "",
-				description: X.description || "",
-				ttl: X.ttl || 300,
-				refresh: X.refresh ? {
-					type: X.refresh.type === "scheduled" ? "scheduled" : "manual",
-					schedule: X.refresh.schedule ? {
-						cron: X.refresh.schedule.cron,
-						timezone: X.refresh.schedule.timezone
+				name: Z.name || "",
+				key: Z.key || "",
+				description: Z.description || "",
+				ttl: Z.ttl || 300,
+				refresh: Z.refresh ? {
+					type: Z.refresh.type === "scheduled" ? "scheduled" : "manual",
+					schedule: Z.refresh.schedule ? {
+						cron: Z.refresh.schedule.cron,
+						timezone: Z.refresh.schedule.timezone
 					} : void 0
 				} : { type: "manual" },
 				data: e
-			}), N(!0), fe(!0), j({});
+			}), N(!0), me(!0), j({});
 		}
-	}, [X, Z]);
-	let pe = i((e) => {
+	}, [Z, Q]);
+	let he = a((e) => {
 		let t = e.target.value;
 		k((e) => ({
 			...e,
 			name: t,
-			key: M ? e.key : T(t)
+			key: M ? e.key : de(t)
 		})), j((e) => ({
 			...e,
 			name: void 0
 		}));
-	}, [M]), me = i((e) => {
+	}, [M]), ge = a((e) => {
 		let t = e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, "");
 		k((e) => ({
 			...e,
@@ -86,22 +86,22 @@ var E = r(function() {
 			...e,
 			key: void 0
 		}));
-	}, []), he = i((e) => {
+	}, []), _e = a((e) => {
 		k((t) => ({
 			...t,
 			description: e.target.value
 		}));
-	}, []), ge = i((e) => {
+	}, []), ve = a((e) => {
 		k((t) => ({
 			...t,
 			ttl: e || 0
 		}));
-	}, []), Q = i((e) => {
+	}, []), ye = a((e) => {
 		k((t) => ({
 			...t,
 			refresh: e
 		}));
-	}, []), _e = i((e) => {
+	}, []), be = a((e) => {
 		k((t) => ({
 			...t,
 			data: e.target.value
@@ -109,7 +109,7 @@ var E = r(function() {
 			...e,
 			data: void 0
 		}));
-	}, []), ve = i(() => {
+	}, []), xe = a(() => {
 		try {
 			let e = JSON.parse(O.data);
 			k((t) => ({
@@ -125,29 +125,29 @@ var E = r(function() {
 				data: "Invalid JSON format"
 			}));
 		}
-	}, [O.data]), ye = i(async () => {
-		O.key && (await ee(O.key), R(!0), n() && te("Key copied"), setTimeout(() => R(!1), 2e3));
-	}, [O.key]), $ = i(() => {
+	}, [O.data]), Se = a(async () => {
+		O.key && (await ee(O.key), z(!0), n() && te("Key copied"), setTimeout(() => z(!1), 2e3));
+	}, [O.key]), $ = a(() => {
 		E("/datasinks");
-	}, [E]), be = i(async () => {
-		if (!(!D || !X)) {
-			B(!0), W(null);
+	}, [E]), Ce = a(async () => {
+		if (!(!D || !Z)) {
+			V(!0), G(null);
 			try {
-				let e = await Y({ key: X.key });
-				e?.raw ? H(Array.isArray(e.raw) ? e.raw.slice(0, 20) : [e.raw]) : H([]);
+				let e = await X({ key: Z.key });
+				e?.raw ? U(Array.isArray(e.raw) ? e.raw.slice(0, 20) : [e.raw]) : U([]);
 			} catch (e) {
-				W(e instanceof Error ? e.message : "Failed to load data");
+				G(e instanceof Error ? e.message : "Failed to load data");
 			} finally {
-				B(!1);
+				V(!1);
 			}
 		}
 	}, [
 		D,
-		X,
-		Y
-	]), xe = i(async (e) => {
+		Z,
+		X
+	]), we = a(async (e) => {
 		e.preventDefault(), L(null);
-		let t = ce(O);
+		let t = T(O);
 		if (Object.keys(t).length > 0) {
 			j(t);
 			return;
@@ -164,10 +164,10 @@ var E = r(function() {
 				})), F(!1);
 				return;
 			}
-			if (D && X) {
-				if (!await J({
-					id: X.id,
-					version: X.version,
+			if (D && Z) {
+				if (!await Y({
+					id: Z.id,
+					version: Z.version,
 					name: O.name,
 					description: O.description || void 0,
 					ttl: O.ttl,
@@ -177,7 +177,7 @@ var E = r(function() {
 					},
 					data: e
 				})) throw Error("Failed to update DataSink");
-			} else if (!await q({
+			} else if (!await J({
 				key: O.key,
 				name: O.name,
 				description: O.description || void 0,
@@ -197,11 +197,11 @@ var E = r(function() {
 	}, [
 		O,
 		D,
-		X,
-		q,
+		Z,
 		J,
+		Y,
 		E
-	]), Se = ie(() => {
+	]), Te = re(() => {
 		let e = O.name.trim().length >= 2, t = O.key.trim().length > 0, n = !0;
 		if (O.data && O.data.trim()) try {
 			JSON.parse(O.data);
@@ -214,315 +214,321 @@ var E = r(function() {
 		O.key,
 		O.data
 	]);
-	return ue && D ? /* @__PURE__ */ h("div", {
+	return fe && D ? /* @__PURE__ */ C("div", {
 		className: "flex items-center justify-center min-h-[400px]",
-		children: /* @__PURE__ */ h(d, { className: "w-8 h-8 text-text-secondary animate-spin" })
-	}) : G ? /* @__PURE__ */ h("div", {
+		children: /* @__PURE__ */ C(f, { className: "w-8 h-8 text-text-secondary animate-spin" })
+	}) : K ? /* @__PURE__ */ C("div", {
 		className: "flex items-center justify-center min-h-[400px] p-card-padding",
-		children: /* @__PURE__ */ g("div", {
+		children: /* @__PURE__ */ w("div", {
 			className: "text-center",
 			children: [
-				/* @__PURE__ */ h(s, { className: "w-12 h-12 text-state-error mx-auto mb-spacing-md" }),
-				/* @__PURE__ */ h("p", {
+				/* @__PURE__ */ C(c, { className: "w-12 h-12 text-state-error mx-auto mb-spacing-md" }),
+				/* @__PURE__ */ C("p", {
 					className: "text-state-error text-body-sm font-medium mb-spacing-sm",
 					children: "Failed to load DataSink"
 				}),
-				/* @__PURE__ */ h("p", {
+				/* @__PURE__ */ C("p", {
 					className: "text-text-tertiary text-body-xs",
-					children: G.message
+					children: K.message
 				})
 			]
 		})
-	}) : /* @__PURE__ */ h("div", {
+	}) : /* @__PURE__ */ C("div", {
 		className: "min-h-screen bg-bg-canvas",
-		children: /* @__PURE__ */ g("div", {
+		children: /* @__PURE__ */ w("div", {
 			className: "max-w-3xl mx-auto p-card-padding",
 			children: [
-				/* @__PURE__ */ g("div", {
+				/* @__PURE__ */ w("div", {
 					className: "mb-spacing-lg",
 					children: [
-						/* @__PURE__ */ g(_, {
+						/* @__PURE__ */ w(p, {
 							onClick: $,
 							variant: "ghost",
 							size: "sm",
 							className: "mb-spacing-md",
-							children: [/* @__PURE__ */ h(oe, { className: "w-4 h-4 mr-2" }), "Back to DataSinks"]
+							children: [/* @__PURE__ */ C(l, { className: "w-4 h-4 mr-2" }), "Back to DataSinks"]
 						}),
-						/* @__PURE__ */ h("h1", {
+						/* @__PURE__ */ C("h1", {
 							className: "text-heading-h1 font-bold text-text-primary",
 							children: D ? "Edit DataSink" : "Create DataSink"
 						}),
-						/* @__PURE__ */ h("p", {
+						/* @__PURE__ */ C("p", {
 							className: "text-body-sm text-text-secondary mt-spacing-xs",
 							children: D ? "Update the DataSink configuration." : "Create a new DataSink to store and cache data. Use the unique key to connect workflows."
 						})
 					]
 				}),
-				I && /* @__PURE__ */ g("div", {
+				I && /* @__PURE__ */ w("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__ */ h(s, { className: "w-5 h-5 text-state-error flex-shrink-0 mt-0.5" }), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("p", {
+					children: [/* @__PURE__ */ C(c, { className: "w-5 h-5 text-state-error flex-shrink-0 mt-0.5" }), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
 						className: "text-sm font-medium text-state-error",
 						children: "Failed to save DataSink"
-					}), /* @__PURE__ */ h("p", {
+					}), /* @__PURE__ */ C("p", {
 						className: "text-xs text-state-error/80 mt-1",
 						children: I
 					})] })]
 				}),
-				/* @__PURE__ */ g("form", {
-					onSubmit: xe,
+				/* @__PURE__ */ C(ue, {
+					className: "mb-spacing-lg",
+					children: "A data sink is the named, structured store your dashboards read from. Give it a unique key, configure how long data is cached and how it refreshes, then point a workflow at that key to push data in. Get the basics right here and everything downstream connects to it."
+				}),
+				/* @__PURE__ */ w("form", {
+					onSubmit: we,
 					className: "space-y-spacing-lg",
 					children: [
-						/* @__PURE__ */ g(v, { children: [/* @__PURE__ */ h(b, {
-							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(l, { className: "w-4 h-4 text-action-primary-bg" })
-								}), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h(x, {
-									className: "text-base",
-									children: "Basic Information"
-								}), /* @__PURE__ */ h("p", {
-									className: "text-xs text-text-secondary mt-0.5",
-									children: "Essential details for your DataSink"
-								})] })]
-							})
-						}), /* @__PURE__ */ g(y, {
-							className: "space-y-5",
-							children: [
-								/* @__PURE__ */ g("div", {
-									className: "space-y-spacing-sm",
-									children: [
-										/* @__PURE__ */ g(C, {
-											htmlFor: "name",
-											children: ["Name ", /* @__PURE__ */ h("span", {
-												className: "text-state-error",
-												children: "*"
-											})]
-										}),
-										/* @__PURE__ */ h(S, {
-											id: "name",
-											type: "text",
-											value: O.name,
-											onChange: pe,
-											placeholder: "e.g., Sales Metrics",
-											className: A.name ? "border-state-error" : ""
-										}),
-										A.name && /* @__PURE__ */ h("p", {
-											className: "text-body-xs text-state-error",
-											children: A.name
-										})
-									]
-								}),
-								/* @__PURE__ */ g("div", {
-									className: "space-y-spacing-sm",
-									children: [
-										/* @__PURE__ */ g(C, {
-											htmlFor: "key",
-											children: ["Unique Key ", /* @__PURE__ */ h("span", {
-												className: "text-state-error",
-												children: "*"
-											})]
-										}),
-										/* @__PURE__ */ g("div", {
-											className: "flex gap-2",
-											children: [/* @__PURE__ */ h(S, {
-												id: "key",
-												type: "text",
-												value: O.key,
-												onChange: me,
-												placeholder: "sales_metrics",
-												disabled: D,
-												className: `font-mono flex-1 ${A.key ? "border-state-error" : ""}`
-											}), O.key && /* @__PURE__ */ h(_, {
-												type: "button",
-												onClick: ye,
-												variant: "outline",
-												size: "sm",
-												className: "px-3",
-												children: le ? /* @__PURE__ */ h(c, { className: "w-4 h-4 text-state-success" }) : /* @__PURE__ */ h(se, { className: "w-4 h-4" })
-											})]
-										}),
-										A.key && /* @__PURE__ */ h("p", {
-											className: "text-body-xs text-state-error",
-											children: A.key
-										}),
-										/* @__PURE__ */ h("p", {
-											className: "text-body-xs text-text-tertiary",
-											children: D ? "Key cannot be changed. Use this key in your workflows to push data." : "Auto-generated from name. This key will be used by workflows to push data."
-										})
-									]
-								}),
-								/* @__PURE__ */ g("div", {
-									className: "space-y-spacing-sm",
-									children: [/* @__PURE__ */ h(C, {
-										htmlFor: "description",
-										children: "Description"
-									}), /* @__PURE__ */ h(w, {
-										id: "description",
-										value: O.description,
-										onChange: he,
-										placeholder: "Describe what data this sink stores...",
-										rows: 2,
-										className: "resize-none"
-									})]
+						/* @__PURE__ */ w(le, {
+							treatment: "glass",
+							glow: !0,
+							children: [/* @__PURE__ */ C(g, {
+								className: "pb-4",
+								children: /* @__PURE__ */ w("div", {
+									className: "flex items-center gap-3",
+									children: [/* @__PURE__ */ C("div", {
+										className: "w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center",
+										children: /* @__PURE__ */ C(u, { className: "w-4 h-4 text-action-primary-bg" })
+									}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C(_, {
+										className: "text-base",
+										children: "Basic Information"
+									}), /* @__PURE__ */ C("p", {
+										className: "text-xs text-text-secondary mt-0.5",
+										children: "Essential details for your DataSink"
+									})] })]
 								})
-							]
-						})] }),
-						/* @__PURE__ */ g(v, { children: [/* @__PURE__ */ h(b, {
+							}), /* @__PURE__ */ w(h, {
+								className: "space-y-5",
+								children: [
+									/* @__PURE__ */ w("div", {
+										className: "space-y-spacing-sm",
+										children: [
+											/* @__PURE__ */ w(b, {
+												htmlFor: "name",
+												children: ["Name ", /* @__PURE__ */ C("span", {
+													className: "text-state-error",
+													children: "*"
+												})]
+											}),
+											/* @__PURE__ */ C(y, {
+												id: "name",
+												type: "text",
+												value: O.name,
+												onChange: he,
+												placeholder: "e.g., Sales Metrics",
+												className: A.name ? "border-state-error" : ""
+											}),
+											A.name && /* @__PURE__ */ C("p", {
+												className: "text-body-xs text-state-error",
+												children: A.name
+											})
+										]
+									}),
+									/* @__PURE__ */ w("div", {
+										className: "space-y-spacing-sm",
+										children: [
+											/* @__PURE__ */ w(b, {
+												htmlFor: "key",
+												children: ["Unique Key ", /* @__PURE__ */ C("span", {
+													className: "text-state-error",
+													children: "*"
+												})]
+											}),
+											/* @__PURE__ */ w("div", {
+												className: "flex gap-2",
+												children: [/* @__PURE__ */ C(y, {
+													id: "key",
+													type: "text",
+													value: O.key,
+													onChange: ge,
+													placeholder: "sales_metrics",
+													disabled: D,
+													className: `font-mono flex-1 ${A.key ? "border-state-error" : ""}`
+												}), O.key && /* @__PURE__ */ C(p, {
+													type: "button",
+													onClick: Se,
+													variant: "outline",
+													size: "sm",
+													className: "px-3",
+													children: R ? /* @__PURE__ */ C(ae, { className: "w-4 h-4 text-state-success" }) : /* @__PURE__ */ C(oe, { className: "w-4 h-4" })
+												})]
+											}),
+											A.key && /* @__PURE__ */ C("p", {
+												className: "text-body-xs text-state-error",
+												children: A.key
+											}),
+											/* @__PURE__ */ C("p", {
+												className: "text-body-xs text-text-tertiary",
+												children: D ? "Key cannot be changed. Use this key in your workflows to push data." : "Auto-generated from name. This key will be used by workflows to push data."
+											})
+										]
+									}),
+									/* @__PURE__ */ w("div", {
+										className: "space-y-spacing-sm",
+										children: [/* @__PURE__ */ C(b, {
+											htmlFor: "description",
+											children: "Description"
+										}), /* @__PURE__ */ C(x, {
+											id: "description",
+											value: O.description,
+											onChange: _e,
+											placeholder: "Describe what data this sink stores...",
+											rows: 2,
+											className: "resize-none"
+										})]
+									})
+								]
+							})]
+						}),
+						/* @__PURE__ */ w(m, { children: [/* @__PURE__ */ C(g, {
 							className: "pb-4",
-							children: /* @__PURE__ */ g("div", {
+							children: /* @__PURE__ */ w("div", {
 								className: "flex items-center gap-3",
-								children: [/* @__PURE__ */ h("div", {
+								children: [/* @__PURE__ */ C("div", {
 									className: "w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center",
-									children: /* @__PURE__ */ h(p, { className: "w-4 h-4 text-action-primary-bg" })
-								}), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h(x, {
+									children: /* @__PURE__ */ C(ce, { className: "w-4 h-4 text-action-primary-bg" })
+								}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C(_, {
 									className: "text-base",
 									children: "Configuration"
-								}), /* @__PURE__ */ h("p", {
+								}), /* @__PURE__ */ C("p", {
 									className: "text-xs text-text-secondary mt-0.5",
 									children: "Cache and refresh settings"
 								})] })]
 							})
-						}), /* @__PURE__ */ g(y, {
+						}), /* @__PURE__ */ w(h, {
 							className: "space-y-5",
-							children: [/* @__PURE__ */ g("div", {
+							children: [/* @__PURE__ */ w("div", {
 								className: "space-y-spacing-sm",
 								children: [
-									/* @__PURE__ */ h(C, { children: "Cache Duration" }),
-									/* @__PURE__ */ h(ne, {
+									/* @__PURE__ */ C(b, { children: "Cache Duration" }),
+									/* @__PURE__ */ C(r, {
 										value: O.ttl,
-										onChange: ge
+										onChange: ve
 									}),
-									/* @__PURE__ */ h("p", {
+									/* @__PURE__ */ C("p", {
 										className: "text-body-xs text-text-tertiary",
 										children: "How long cached data remains valid before requiring refresh."
 									})
 								]
-							}), /* @__PURE__ */ h(re, {
+							}), /* @__PURE__ */ C(ne, {
 								value: O.refresh,
-								onChange: Q
+								onChange: ye
 							})]
 						})] }),
-						/* @__PURE__ */ g(v, { children: [/* @__PURE__ */ h(b, {
+						/* @__PURE__ */ w(m, { children: [/* @__PURE__ */ C(g, {
 							className: "pb-4",
-							children: /* @__PURE__ */ g("div", {
+							children: /* @__PURE__ */ w("div", {
 								className: "flex items-center justify-between",
-								children: [/* @__PURE__ */ g("div", {
+								children: [/* @__PURE__ */ w("div", {
 									className: "flex items-center gap-3",
-									children: [/* @__PURE__ */ h("div", {
+									children: [/* @__PURE__ */ C("div", {
 										className: "w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center",
-										children: /* @__PURE__ */ h(l, { className: "w-4 h-4 text-action-primary-bg" })
-									}), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h(x, {
+										children: /* @__PURE__ */ C(u, { className: "w-4 h-4 text-action-primary-bg" })
+									}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C(_, {
 										className: "text-base",
 										children: "Data Payload"
-									}), /* @__PURE__ */ h("p", {
+									}), /* @__PURE__ */ C("p", {
 										className: "text-xs text-text-secondary mt-0.5",
 										children: D ? "Edit the JSON data stored in this DataSink" : "Optional initial data (JSON format)"
 									})] })]
-								}), /* @__PURE__ */ h(_, {
+								}), /* @__PURE__ */ C(p, {
 									type: "button",
-									onClick: ve,
+									onClick: xe,
 									variant: "outline",
 									size: "sm",
 									children: "Format JSON"
 								})]
 							})
-						}), /* @__PURE__ */ h(y, { children: /* @__PURE__ */ g("div", {
+						}), /* @__PURE__ */ C(h, { children: /* @__PURE__ */ w("div", {
 							className: "space-y-spacing-sm",
 							children: [
-								/* @__PURE__ */ h(w, {
+								/* @__PURE__ */ C(x, {
 									value: O.data,
-									onChange: _e,
+									onChange: be,
 									placeholder: "{\"key\": \"value\"}",
 									rows: 10,
 									className: `font-mono text-xs resize-y ${A.data ? "border-state-error" : ""}`
 								}),
-								A.data && /* @__PURE__ */ h("p", {
+								A.data && /* @__PURE__ */ C("p", {
 									className: "text-body-xs text-state-error",
 									children: A.data
 								}),
-								/* @__PURE__ */ h("p", {
+								/* @__PURE__ */ C("p", {
 									className: "text-body-xs text-text-tertiary",
 									children: "Enter valid JSON data. This data will be stored and can be accessed by widgets via parsers."
 								})
 							]
 						}) })] }),
-						D && X && /* @__PURE__ */ g(v, { children: [/* @__PURE__ */ h(b, {
+						D && Z && /* @__PURE__ */ w(m, { children: [/* @__PURE__ */ C(g, {
 							className: "pb-4",
-							children: /* @__PURE__ */ g("div", {
+							children: /* @__PURE__ */ w("div", {
 								className: "flex items-center justify-between",
-								children: [/* @__PURE__ */ g("div", {
+								children: [/* @__PURE__ */ w("div", {
 									className: "flex items-center gap-3",
-									children: [/* @__PURE__ */ h("div", {
+									children: [/* @__PURE__ */ C("div", {
 										className: "w-8 h-8 rounded-full bg-action-primary-bg/10 flex items-center justify-center",
-										children: /* @__PURE__ */ h(u, { className: "w-4 h-4 text-action-primary-bg" })
-									}), /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h(x, {
+										children: /* @__PURE__ */ C(d, { className: "w-4 h-4 text-action-primary-bg" })
+									}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C(_, {
 										className: "text-base",
 										children: "Data Preview"
-									}), /* @__PURE__ */ h("p", {
+									}), /* @__PURE__ */ C("p", {
 										className: "text-xs text-text-secondary mt-0.5",
 										children: "Preview the first 20 records"
 									})] })]
-								}), /* @__PURE__ */ h(_, {
+								}), /* @__PURE__ */ C(p, {
 									type: "button",
-									onClick: be,
+									onClick: Ce,
 									variant: "outline",
 									size: "sm",
-									disabled: z,
-									children: z ? /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(d, { className: "w-4 h-4 mr-2 animate-spin" }), "Loading..."] }) : /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(u, { className: "w-4 h-4 mr-2" }), "Show Data"] })
+									disabled: B,
+									children: B ? /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(f, { className: "w-4 h-4 mr-2 animate-spin" }), "Loading..."] }) : /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(d, { className: "w-4 h-4 mr-2" }), "Show Data"] })
 								})]
 							})
-						}), (V || U) && /* @__PURE__ */ h(y, { children: U ? /* @__PURE__ */ h("div", {
+						}), (H || W) && /* @__PURE__ */ C(h, { children: W ? /* @__PURE__ */ C("div", {
 							className: "p-4 bg-state-error/10 border border-state-error/30 rounded-md",
-							children: /* @__PURE__ */ h("p", {
+							children: /* @__PURE__ */ C("p", {
 								className: "text-sm text-state-error",
-								children: U
+								children: W
 							})
-						}) : V && V.length > 0 ? /* @__PURE__ */ h("pre", {
+						}) : H && H.length > 0 ? /* @__PURE__ */ C("pre", {
 							className: "p-4 bg-bg-sunken rounded-md overflow-auto max-h-[300px] text-xs font-mono",
-							children: JSON.stringify(V, null, 2)
-						}) : /* @__PURE__ */ h("div", {
-							className: "p-4 bg-bg-sunken rounded-md text-center",
-							children: /* @__PURE__ */ h("p", {
-								className: "text-sm text-text-secondary",
-								children: "No data available yet. Connect a workflow to push data."
-							})
+							children: JSON.stringify(H, null, 2)
+						}) : /* @__PURE__ */ C(v, {
+							illustration: "empty-generic",
+							title: "No data available yet",
+							description: "Connect a workflow to this sink's key to start pushing data."
 						}) })] }),
-						/* @__PURE__ */ g("div", {
+						/* @__PURE__ */ w("div", {
 							className: "flex items-center justify-end gap-spacing-md pt-spacing-md",
-							children: [/* @__PURE__ */ h(_, {
+							children: [/* @__PURE__ */ C(p, {
 								type: "button",
 								onClick: $,
 								variant: "secondary",
 								children: "Cancel"
-							}), /* @__PURE__ */ h(_, {
+							}), /* @__PURE__ */ C(p, {
 								type: "submit",
-								disabled: !Se || P,
+								disabled: !Te || P,
 								variant: "default",
-								children: P ? /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(d, { className: "w-4 h-4 mr-2 animate-spin" }), "Saving..."] }) : /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(f, { className: "w-4 h-4 mr-2" }), D ? "Save Changes" : "Create DataSink"] })
+								children: P ? /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(f, { className: "w-4 h-4 mr-2 animate-spin" }), "Saving..."] }) : /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(se, { className: "w-4 h-4 mr-2" }), D ? "Save Changes" : "Create DataSink"] })
 							})]
 						})
 					]
 				}),
-				!D && /* @__PURE__ */ g("div", {
+				!D && /* @__PURE__ */ w("div", {
 					className: "mt-spacing-lg p-4 bg-bg-sunken rounded-lg border border-border-default",
-					children: [/* @__PURE__ */ h("h3", {
+					children: [/* @__PURE__ */ C("h3", {
 						className: "text-sm font-medium text-text-primary mb-2",
 						children: "What's Next?"
-					}), /* @__PURE__ */ g("ol", {
+					}), /* @__PURE__ */ w("ol", {
 						className: "list-decimal list-inside text-xs text-text-secondary space-y-1",
 						children: [
-							/* @__PURE__ */ h("li", { children: "Create this DataSink to get your unique key" }),
-							/* @__PURE__ */ g("li", { children: [
+							/* @__PURE__ */ C("li", { children: "Create this DataSink to get your unique key" }),
+							/* @__PURE__ */ w("li", { children: [
 								"Go to ",
-								/* @__PURE__ */ h("strong", { children: "Workflows" }),
+								/* @__PURE__ */ C("strong", { children: "Workflows" }),
 								" and create a FluidGrids workflow"
 							] }),
-							/* @__PURE__ */ h("li", { children: "Use the unique key in your workflow to push data to this DataSink" }),
-							/* @__PURE__ */ g("li", { children: [
+							/* @__PURE__ */ C("li", { children: "Use the unique key in your workflow to push data to this DataSink" }),
+							/* @__PURE__ */ w("li", { children: [
 								"Create ",
-								/* @__PURE__ */ h("strong", { children: "Parsers" }),
+								/* @__PURE__ */ C("strong", { children: "Parsers" }),
 								" to transform the data using JQ or JSONata"
 							] })
 						]