@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/pages/DataSinkBuilderPage.js

@@ -1,23 +1,25 @@
 import { useAppNavigate as e } from "../contexts/NavigationContext.js";
 import "../contexts/index.js";
-import t from "../hooks/useDataSinkOperations.js";
-import { BIGCONSOLE_PERMISSIONS as n } from "../../constants/permissions.js";
-import { isNative as ee, nativeCopyText as te, nativeToast as ne } from "../../utils/nativeBridge.js";
-import r from "../components/datasink/CacheTTLSelector.js";
-import re from "../components/datasink/RefreshTypeSelector.js";
-import { memo as i, useCallback as a, useEffect as o, useMemo as s, useState as c } from "react";
-import { useParams as l } from "react-router";
-import { AccessDenied as ie, PermissionButton as ae } from "@burdenoff/fe-libs/shared/components";
-import { usePermissions as oe } from "@burdenoff/fe-libs/shared/providers/shell";
-import { AlertCircle as u, ArrowLeft as se, Check as ce, Copy as le, Database as d, Eye as f, Loader2 as p, Save as ue, Settings as de } from "lucide-react";
-import { useI18n as fe } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Button as m, Card as h, CardContent as g, CardHeader as _, CardTitle as v, GlassCard as pe, IllustratedEmptyState as me, Input as y, Label as b, PagePurpose as he, Textarea as x } from "@burdenoff/fe-libs/ui";
+import { Section as t, SectionStack as n } from "../components/common/Section.js";
+import "../components/common/index.js";
+import ee from "../hooks/useDataSinkOperations.js";
+import { BIGCONSOLE_PERMISSIONS as r } from "../../constants/permissions.js";
+import { isNative as te, nativeCopyText as ne, nativeToast as i } from "../../utils/nativeBridge.js";
+import re from "../components/datasink/CacheTTLSelector.js";
+import ie from "../components/datasink/RefreshTypeSelector.js";
+import { memo as a, useCallback as o, useEffect as s, useMemo as ae, useState as c } from "react";
+import { useParams as oe } from "react-router";
+import { AccessDenied as se, PermissionButton as l } from "@burdenoff/fe-libs/shared/components";
+import { usePermissions as u } from "@burdenoff/fe-libs/shared/providers/shell";
+import { AlertCircle as d, ArrowLeft as f, Check as ce, Copy as le, Database as p, Eye as m, ListChecks as ue, Loader2 as h, Save as de, Settings as fe } from "lucide-react";
+import { useI18n as g } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Button as _, IllustratedEmptyState as v, Input as y, Label as b, PagePurpose as pe, 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 ge(e) {
+function me(e) {
 	return e.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "").substring(0, 64);
 }
-function _e(e, t) {
+function he(e, t) {
 	let n = {};
 	if (e.name.trim() ? e.name.length < 2 ? n.name = t("bigconsole.dataSinks.builder.validation.nameMinLength", "Name must be at least 2 characters") : e.name.length > 100 && (n.name = t("bigconsole.dataSinks.builder.validation.nameMaxLength", "Name must be less than 100 characters")) : n.name = t("bigconsole.dataSinks.builder.validation.nameRequired", "Name is required"), e.key.trim() ? /^[a-z0-9_]+$/.test(e.key) ? e.key.length > 64 && (n.key = t("bigconsole.dataSinks.builder.validation.keyMaxLength", "Key must be less than 64 characters")) : n.key = t("bigconsole.dataSinks.builder.validation.keyFormat", "Key can only contain lowercase letters, numbers, and underscores") : n.key = t("bigconsole.dataSinks.builder.validation.keyRequired", "Key is required"), e.data && e.data.trim()) try {
 		JSON.parse(e.data);
@@ -26,25 +28,25 @@ function _e(e, t) {
 	}
 	return n;
 }
-var T = i(function() {
-	let { dataSinkId: i } = l(), T = e(), { t: E } = fe(), D = i !== "new" && !!i, { hasPermission: ve, isLoading: ye } = oe(), be = ve(n.DATASINK_READ), xe = D ? n.DATASINK_UPDATE : n.DATASINK_CREATE, [O, k] = c({
+var T = a(function() {
+	let { dataSinkId: a } = oe(), T = e(), { t: E } = g(), D = a !== "new" && !!a, { hasPermission: ge, isLoading: _e } = u(), ve = ge(r.DATASINK_READ), ye = D ? r.DATASINK_UPDATE : r.DATASINK_CREATE, [O, k] = c({
 		name: "",
 		key: "",
 		description: "",
 		ttl: 300,
 		refresh: { type: "manual" },
 		data: "{}"
-	}), [A, j] = c({}), [M, N] = c(!1), [P, F] = c(!1), [I, L] = c(null), [Se, R] = c(!1), [z, B] = c(!1), [V, H] = c(null), [U, W] = c(null), { loading: Ce, error: G, dataSinks: we, fetchDataSink: K, createDataSink: q, updateDataSink: J, getDataSinkData: Y } = t({ skipFetch: !0 }), X = D ? we.find((e) => e.id === i) : null;
-	o(() => {
-		D && i && !X && K(i);
+	}), [A, j] = c({}), [M, N] = c(!1), [P, F] = c(!1), [I, L] = c(null), [be, R] = c(!1), [z, B] = c(!1), [V, H] = c(null), [U, W] = c(null), { loading: xe, error: G, dataSinks: Se, fetchDataSink: K, createDataSink: q, updateDataSink: J, getDataSinkData: Y } = ee({ skipFetch: !0 }), X = D ? Se.find((e) => e.id === a) : null;
+	s(() => {
+		D && a && !X && K(a);
 	}, [
 		D,
-		i,
+		a,
 		X,
 		K
 	]);
-	let [Z, Te] = c(!1);
-	o(() => {
+	let [Z, Ce] = c(!1);
+	s(() => {
 		if (X && !Z) {
 			let e = "";
 			if (X.data) try {
@@ -68,20 +70,20 @@ var T = i(function() {
 					} : void 0
 				} : { type: "manual" },
 				data: e
-			}), N(!0), Te(!0), j({});
+			}), N(!0), Ce(!0), j({});
 		}
 	}, [X, Z]);
-	let Ee = a((e) => {
+	let we = o((e) => {
 		let t = e.target.value;
 		k((e) => ({
 			...e,
 			name: t,
-			key: M ? e.key : ge(t)
+			key: M ? e.key : me(t)
 		})), j((e) => ({
 			...e,
 			name: void 0
 		}));
-	}, [M]), De = a((e) => {
+	}, [M]), Te = o((e) => {
 		let t = e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, "");
 		k((e) => ({
 			...e,
@@ -90,22 +92,22 @@ var T = i(function() {
 			...e,
 			key: void 0
 		}));
-	}, []), Oe = a((e) => {
+	}, []), Ee = o((e) => {
 		k((t) => ({
 			...t,
 			description: e.target.value
 		}));
-	}, []), Q = a((e) => {
+	}, []), De = o((e) => {
 		k((t) => ({
 			...t,
 			ttl: e || 0
 		}));
-	}, []), ke = a((e) => {
+	}, []), Oe = o((e) => {
 		k((t) => ({
 			...t,
 			refresh: e
 		}));
-	}, []), Ae = a((e) => {
+	}, []), Q = o((e) => {
 		k((t) => ({
 			...t,
 			data: e.target.value
@@ -113,7 +115,7 @@ var T = i(function() {
 			...e,
 			data: void 0
 		}));
-	}, []), je = a(() => {
+	}, []), ke = o(() => {
 		try {
 			let e = JSON.parse(O.data);
 			k((t) => ({
@@ -129,11 +131,11 @@ var T = i(function() {
 				data: E("bigconsole.dataSinks.builder.validation.invalidJson", "Invalid JSON format")
 			}));
 		}
-	}, [O.data, E]), Me = a(async () => {
-		O.key && (await te(O.key), R(!0), ee() && ne(E("bigconsole.dataSinks.builder.toolbar.keyCopied", "Key copied")), setTimeout(() => R(!1), 2e3));
-	}, [O.key, E]), $ = a(() => {
+	}, [O.data, E]), Ae = o(async () => {
+		O.key && (await ne(O.key), R(!0), te() && i(E("bigconsole.dataSinks.builder.toolbar.keyCopied", "Key copied")), setTimeout(() => R(!1), 2e3));
+	}, [O.key, E]), $ = o(() => {
 		T("/datasinks");
-	}, [T]), Ne = a(async () => {
+	}, [T]), je = o(async () => {
 		if (!(!D || !X)) {
 			B(!0), W(null);
 			try {
@@ -150,9 +152,9 @@ var T = i(function() {
 		X,
 		Y,
 		E
-	]), Pe = a(async (e) => {
+	]), Me = o(async (e) => {
 		e.preventDefault(), L(null);
-		let t = _e(O, E);
+		let t = he(O, E);
 		if (Object.keys(t).length > 0) {
 			j(t);
 			return;
@@ -207,7 +209,7 @@ var T = i(function() {
 		J,
 		T,
 		E
-	]), Fe = s(() => {
+	]), Ne = ae(() => {
 		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);
@@ -220,347 +222,305 @@ var T = i(function() {
 		O.key,
 		O.data
 	]);
-	return Ce && D ? /* @__PURE__ */ C("div", {
-		className: "flex items-center justify-center min-h-[400px]",
-		children: /* @__PURE__ */ C(p, { className: "w-8 h-8 text-text-secondary animate-spin" })
+	return xe && D ? /* @__PURE__ */ C("div", {
+		className: "flex min-h-[240px] items-center justify-center p-card-padding",
+		children: /* @__PURE__ */ C(h, { className: "h-icon-lg w-icon-lg animate-spin text-text-secondary" })
 	}) : G ? /* @__PURE__ */ C("div", {
-		className: "flex items-center justify-center min-h-[400px] p-card-padding",
-		children: /* @__PURE__ */ w("div", {
-			className: "text-center",
-			children: [
-				/* @__PURE__ */ C(u, { className: "w-12 h-12 text-status-error-text mx-auto mb-4" }),
-				/* @__PURE__ */ C("p", {
-					className: "text-status-error-text text-body-sm font-medium mb-2",
-					children: E("bigconsole.dataSinks.builder.errors.loadFailed", "Failed to load DataSink")
-				}),
-				/* @__PURE__ */ C("p", {
-					className: "text-text-tertiary text-body-xs",
-					children: G.message
-				})
-			]
+		className: "mx-auto w-full max-w-3xl p-card-padding",
+		children: /* @__PURE__ */ C(t, {
+			tone: "danger",
+			headingLevel: 2,
+			title: E("bigconsole.dataSinks.builder.errors.loadFailed", "Failed to load DataSink"),
+			description: G.message,
+			icon: /* @__PURE__ */ C(d, { className: "h-icon-sm w-icon-sm" }),
+			actions: /* @__PURE__ */ w(_, {
+				onClick: $,
+				variant: "secondary",
+				size: "sm",
+				children: [/* @__PURE__ */ C(f, { className: "w-4 h-4 mr-2" }), E("bigconsole.dataSinks.builder.header.backToDataSinks", "Back to DataSinks")]
+			})
 		})
-	}) : D && !ye && !be ? /* @__PURE__ */ C(ie, {
+	}) : D && !_e && !ve ? /* @__PURE__ */ C(se, {
 		title: E("bigconsole.dataSinks.builder.accessDenied.title", "Access Denied"),
 		description: E("bigconsole.dataSinks.builder.accessDenied.description", "You don't have permission to view this data sink.")
-	}) : /* @__PURE__ */ C("div", {
-		className: "min-h-screen bg-bg-canvas",
-		children: /* @__PURE__ */ w("div", {
-			className: "max-w-3xl mx-auto p-card-padding",
-			children: [
-				/* @__PURE__ */ w("div", {
-					className: "mb-6",
-					children: [
-						/* @__PURE__ */ w(m, {
-							onClick: $,
-							variant: "ghost",
-							size: "sm",
-							className: "mb-4",
-							children: [/* @__PURE__ */ C(se, { className: "w-4 h-4 mr-2" }), E("bigconsole.dataSinks.builder.header.backToDataSinks", "Back to DataSinks")]
-						}),
-						/* @__PURE__ */ C("h1", {
-							className: "text-heading-h1 font-bold text-text-primary",
-							children: D ? E("bigconsole.dataSinks.builder.header.editTitle", "Edit DataSink") : E("bigconsole.dataSinks.builder.header.createTitle", "Create DataSink")
-						}),
-						/* @__PURE__ */ C("p", {
-							className: "text-body-sm text-text-secondary mt-1",
-							children: D ? E("bigconsole.dataSinks.builder.header.editSubtitle", "Update the DataSink configuration.") : E("bigconsole.dataSinks.builder.header.createSubtitle", "Create a new DataSink to store and cache data. Use the unique key to connect workflows.")
-						})
-					]
-				}),
-				I && /* @__PURE__ */ w("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__ */ C(u, { className: "w-5 h-5 text-status-error-text flex-shrink-0 mt-0.5" }), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
-						className: "text-sm font-medium text-status-error-text",
-						children: E("bigconsole.dataSinks.builder.errors.saveFailed", "Failed to save DataSink")
-					}), /* @__PURE__ */ C("p", {
-						className: "text-xs text-status-error-text/80 mt-1",
-						children: I
-					})] })]
-				}),
-				/* @__PURE__ */ C(he, {
-					className: "mb-6",
-					children: E("bigconsole.dataSinks.builder.header.purpose", "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: Pe,
-					className: "space-y-6",
-					children: [
-						/* @__PURE__ */ w(pe, {
-							treatment: "glass",
-							glow: !0,
-							children: [/* @__PURE__ */ C(_, {
-								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(d, { className: "w-4 h-4 text-action-primary-bg" })
-									}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C(v, {
-										className: "text-base",
-										children: E("bigconsole.dataSinks.builder.basicInfo.title", "Basic Information")
-									}), /* @__PURE__ */ C("p", {
-										className: "text-xs text-text-secondary mt-0.5",
-										children: E("bigconsole.dataSinks.builder.basicInfo.subtitle", "Essential details for your DataSink")
-									})] })]
-								})
-							}), /* @__PURE__ */ w(g, {
-								className: "space-y-5",
+	}) : /* @__PURE__ */ w("div", {
+		className: "mx-auto w-full min-w-0 max-w-3xl p-card-padding",
+		children: [
+			/* @__PURE__ */ w("header", {
+				className: "mb-form-gap",
+				children: [
+					/* @__PURE__ */ w(_, {
+						onClick: $,
+						variant: "ghost",
+						size: "sm",
+						className: "mb-4",
+						children: [/* @__PURE__ */ C(f, { className: "w-4 h-4 mr-2" }), E("bigconsole.dataSinks.builder.header.backToDataSinks", "Back to DataSinks")]
+					}),
+					/* @__PURE__ */ C("h1", {
+						className: "text-2xl font-bold text-text-primary",
+						children: D ? E("bigconsole.dataSinks.builder.header.editTitle", "Edit DataSink") : E("bigconsole.dataSinks.builder.header.createTitle", "Create DataSink")
+					}),
+					/* @__PURE__ */ C("p", {
+						className: "mt-1 text-sm text-text-secondary",
+						children: D ? E("bigconsole.dataSinks.builder.header.editSubtitle", "Update the DataSink configuration.") : E("bigconsole.dataSinks.builder.header.createSubtitle", "Create a new DataSink to store and cache data. Use the unique key to connect workflows.")
+					})
+				]
+			}),
+			/* @__PURE__ */ C(pe, {
+				className: "mb-section-gap",
+				children: E("bigconsole.dataSinks.builder.header.purpose", "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.")
+			}),
+			I && /* @__PURE__ */ C(t, {
+				tone: "danger",
+				headingLevel: 2,
+				title: E("bigconsole.dataSinks.builder.errors.saveFailed", "Failed to save DataSink"),
+				description: I,
+				icon: /* @__PURE__ */ C(d, { className: "h-icon-sm w-icon-sm" }),
+				className: "mb-section-gap"
+			}),
+			/* @__PURE__ */ C("form", {
+				onSubmit: Me,
+				children: /* @__PURE__ */ w(n, { children: [
+					/* @__PURE__ */ C(t, {
+						emphasis: "primary",
+						headingLevel: 2,
+						title: E("bigconsole.dataSinks.builder.basicInfo.title", "Basic Information"),
+						description: E("bigconsole.dataSinks.builder.basicInfo.subtitle", "Essential details for your DataSink"),
+						icon: /* @__PURE__ */ C(p, { className: "h-icon-sm w-icon-sm" }),
+						bodyClassName: "space-y-form-gap",
+						children: /* @__PURE__ */ w(S, { children: [
+							/* @__PURE__ */ w("div", {
+								className: "space-y-2",
 								children: [
-									/* @__PURE__ */ w("div", {
-										className: "space-y-2",
+									/* @__PURE__ */ w(b, {
+										htmlFor: "name",
 										children: [
-											/* @__PURE__ */ w(b, {
-												htmlFor: "name",
-												children: [
-													E("bigconsole.dataSinks.builder.basicInfo.nameLabel", "Name"),
-													" ",
-													/* @__PURE__ */ C("span", {
-														className: "text-status-error-text",
-														children: "*"
-													})
-												]
-											}),
-											/* @__PURE__ */ C(y, {
-												id: "name",
-												type: "text",
-												value: O.name,
-												onChange: Ee,
-												placeholder: E("bigconsole.dataSinks.builder.basicInfo.namePlaceholder", "e.g., Sales Metrics"),
-												className: A.name ? "border-status-error-border" : ""
-											}),
-											A.name && /* @__PURE__ */ C("p", {
-												className: "text-body-xs text-status-error-text",
-												children: A.name
+											E("bigconsole.dataSinks.builder.basicInfo.nameLabel", "Name"),
+											" ",
+											/* @__PURE__ */ C("span", {
+												className: "text-status-error-text",
+												children: "*"
 											})
 										]
 									}),
-									/* @__PURE__ */ w("div", {
-										className: "space-y-2",
+									/* @__PURE__ */ C(y, {
+										id: "name",
+										type: "text",
+										value: O.name,
+										onChange: we,
+										placeholder: E("bigconsole.dataSinks.builder.basicInfo.namePlaceholder", "e.g., Sales Metrics"),
+										className: A.name ? "border-status-error-border" : ""
+									}),
+									A.name && /* @__PURE__ */ C("p", {
+										className: "text-xs text-status-error-text",
+										children: A.name
+									})
+								]
+							}),
+							/* @__PURE__ */ w("div", {
+								className: "space-y-2",
+								children: [
+									/* @__PURE__ */ w(b, {
+										htmlFor: "key",
 										children: [
-											/* @__PURE__ */ w(b, {
-												htmlFor: "key",
-												children: [
-													E("bigconsole.dataSinks.builder.basicInfo.keyLabel", "Unique Key"),
-													" ",
-													/* @__PURE__ */ C("span", {
-														className: "text-status-error-text",
-														children: "*"
-													})
-												]
-											}),
-											/* @__PURE__ */ w("div", {
-												className: "flex gap-2",
-												children: [/* @__PURE__ */ C(y, {
-													id: "key",
-													type: "text",
-													value: O.key,
-													onChange: De,
-													placeholder: E("bigconsole.dataSinks.builder.basicInfo.keyPlaceholder", "sales_metrics"),
-													disabled: D,
-													className: `font-mono flex-1 ${A.key ? "border-status-error-border" : ""}`
-												}), O.key && /* @__PURE__ */ C(m, {
-													type: "button",
-													onClick: Me,
-													variant: "outline",
-													size: "sm",
-													className: "px-3",
-													children: Se ? /* @__PURE__ */ C(ce, { className: "w-4 h-4 text-status-success-text" }) : /* @__PURE__ */ C(le, { className: "w-4 h-4" })
-												})]
-											}),
-											A.key && /* @__PURE__ */ C("p", {
-												className: "text-body-xs text-status-error-text",
-												children: A.key
-											}),
-											/* @__PURE__ */ C("p", {
-												className: "text-body-xs text-text-tertiary",
-												children: D ? E("bigconsole.dataSinks.builder.basicInfo.keyHelpEdit", "Key cannot be changed. Use this key in your workflows to push data.") : E("bigconsole.dataSinks.builder.basicInfo.keyHelpCreate", "Auto-generated from name. This key will be used by workflows to push data.")
+											E("bigconsole.dataSinks.builder.basicInfo.keyLabel", "Unique Key"),
+											" ",
+											/* @__PURE__ */ C("span", {
+												className: "text-status-error-text",
+												children: "*"
 											})
 										]
 									}),
 									/* @__PURE__ */ w("div", {
-										className: "space-y-2",
-										children: [/* @__PURE__ */ C(b, {
-											htmlFor: "description",
-											children: E("bigconsole.dataSinks.builder.basicInfo.descriptionLabel", "Description")
-										}), /* @__PURE__ */ C(x, {
-											id: "description",
-											value: O.description,
-											onChange: Oe,
-											placeholder: E("bigconsole.dataSinks.builder.basicInfo.descriptionPlaceholder", "Describe what data this sink stores..."),
-											rows: 2,
-											className: "resize-none"
+										className: "flex gap-2",
+										children: [/* @__PURE__ */ C(y, {
+											id: "key",
+											type: "text",
+											value: O.key,
+											onChange: Te,
+											placeholder: E("bigconsole.dataSinks.builder.basicInfo.keyPlaceholder", "sales_metrics"),
+											disabled: D,
+											className: `font-mono flex-1 ${A.key ? "border-status-error-border" : ""}`
+										}), O.key && /* @__PURE__ */ C(_, {
+											type: "button",
+											onClick: Ae,
+											variant: "outline",
+											size: "sm",
+											className: "px-3",
+											children: be ? /* @__PURE__ */ C(ce, { className: "w-4 h-4 text-status-success-text" }) : /* @__PURE__ */ C(le, { className: "w-4 h-4" })
 										})]
-									})
-								]
-							})]
-						}),
-						/* @__PURE__ */ w(h, { children: [/* @__PURE__ */ C(_, {
-							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(de, { className: "w-4 h-4 text-action-primary-bg" })
-								}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C(v, {
-									className: "text-base",
-									children: E("bigconsole.dataSinks.builder.config.title", "Configuration")
-								}), /* @__PURE__ */ C("p", {
-									className: "text-xs text-text-secondary mt-0.5",
-									children: E("bigconsole.dataSinks.builder.config.subtitle", "Cache and refresh settings")
-								})] })]
-							})
-						}), /* @__PURE__ */ w(g, {
-							className: "space-y-5",
-							children: [/* @__PURE__ */ w("div", {
-								className: "space-y-2",
-								children: [
-									/* @__PURE__ */ C(b, { children: E("bigconsole.dataSinks.builder.config.cacheDurationLabel", "Cache Duration") }),
-									/* @__PURE__ */ C(r, {
-										value: O.ttl,
-										onChange: Q
+									}),
+									A.key && /* @__PURE__ */ C("p", {
+										className: "text-xs text-status-error-text",
+										children: A.key
 									}),
 									/* @__PURE__ */ C("p", {
-										className: "text-body-xs text-text-tertiary",
-										children: E("bigconsole.dataSinks.builder.config.cacheDurationHelp", "How long cached data remains valid before requiring refresh.")
+										className: "text-xs text-text-muted",
+										children: D ? E("bigconsole.dataSinks.builder.basicInfo.keyHelpEdit", "Key cannot be changed. Use this key in your workflows to push data.") : E("bigconsole.dataSinks.builder.basicInfo.keyHelpCreate", "Auto-generated from name. This key will be used by workflows to push data.")
 									})
 								]
-							}), /* @__PURE__ */ C(re, {
-								value: O.refresh,
-								onChange: ke
-							})]
-						})] }),
-						/* @__PURE__ */ w(h, { children: [/* @__PURE__ */ C(_, {
-							className: "pb-4",
-							children: /* @__PURE__ */ w("div", {
-								className: "flex items-center justify-between",
-								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(d, { className: "w-4 h-4 text-action-primary-bg" })
-									}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C(v, {
-										className: "text-base",
-										children: E("bigconsole.dataSinks.builder.dataPayload.title", "Data Payload")
-									}), /* @__PURE__ */ C("p", {
-										className: "text-xs text-text-secondary mt-0.5",
-										children: D ? E("bigconsole.dataSinks.builder.dataPayload.subtitleEdit", "Edit the JSON data stored in this DataSink") : E("bigconsole.dataSinks.builder.dataPayload.subtitleCreate", "Optional initial data (JSON format)")
-									})] })]
-								}), /* @__PURE__ */ C(m, {
-									type: "button",
-									onClick: je,
-									variant: "outline",
-									size: "sm",
-									children: E("bigconsole.dataSinks.builder.dataPayload.formatJson", "Format JSON")
+							}),
+							/* @__PURE__ */ w("div", {
+								className: "space-y-2",
+								children: [/* @__PURE__ */ C(b, {
+									htmlFor: "description",
+									children: E("bigconsole.dataSinks.builder.basicInfo.descriptionLabel", "Description")
+								}), /* @__PURE__ */ C(x, {
+									id: "description",
+									value: O.description,
+									onChange: Ee,
+									placeholder: E("bigconsole.dataSinks.builder.basicInfo.descriptionPlaceholder", "Describe what data this sink stores..."),
+									rows: 2,
+									className: "resize-none"
 								})]
 							})
-						}), /* @__PURE__ */ C(g, { children: /* @__PURE__ */ w("div", {
+						] })
+					}),
+					/* @__PURE__ */ C(t, {
+						headingLevel: 2,
+						title: E("bigconsole.dataSinks.builder.config.title", "Configuration"),
+						description: E("bigconsole.dataSinks.builder.config.subtitle", "Cache and refresh settings"),
+						icon: /* @__PURE__ */ C(fe, { className: "h-icon-sm w-icon-sm" }),
+						bodyClassName: "space-y-form-gap",
+						children: /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ w("div", {
 							className: "space-y-2",
 							children: [
-								/* @__PURE__ */ C(x, {
-									value: O.data,
-									onChange: Ae,
-									placeholder: E("bigconsole.dataSinks.builder.dataPayload.dataPlaceholder", "{\"key\": \"value\"}"),
-									rows: 10,
-									className: `font-mono text-xs resize-y ${A.data ? "border-status-error-border" : ""}`
-								}),
-								A.data && /* @__PURE__ */ C("p", {
-									className: "text-body-xs text-status-error-text",
-									children: A.data
+								/* @__PURE__ */ C(b, { children: E("bigconsole.dataSinks.builder.config.cacheDurationLabel", "Cache Duration") }),
+								/* @__PURE__ */ C(re, {
+									value: O.ttl,
+									onChange: De,
+									hideLabel: !0
 								}),
 								/* @__PURE__ */ C("p", {
-									className: "text-body-xs text-text-tertiary",
-									children: E("bigconsole.dataSinks.builder.dataPayload.help", "Enter valid JSON data. This data will be stored and can be accessed by widgets via parsers.")
+									className: "text-xs text-text-muted",
+									children: E("bigconsole.dataSinks.builder.config.cacheDurationHelp", "How long cached data remains valid before requiring refresh.")
 								})
 							]
-						}) })] }),
-						D && X && /* @__PURE__ */ w(h, { children: [/* @__PURE__ */ C(_, {
-							className: "pb-4",
-							children: /* @__PURE__ */ w("div", {
-								className: "flex items-center justify-between",
-								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(f, { className: "w-4 h-4 text-action-primary-bg" })
-									}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C(v, {
-										className: "text-base",
-										children: E("bigconsole.dataSinks.builder.preview.title", "Data Preview")
-									}), /* @__PURE__ */ C("p", {
-										className: "text-xs text-text-secondary mt-0.5",
-										children: E("bigconsole.dataSinks.builder.preview.subtitle", "Preview the first 20 records")
-									})] })]
-								}), /* @__PURE__ */ C(m, {
-									type: "button",
-									onClick: Ne,
-									variant: "outline",
-									size: "sm",
-									disabled: z,
-									children: z ? /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(p, { className: "w-4 h-4 mr-2 animate-spin" }), E("bigconsole.dataSinks.builder.preview.loading", "Loading...")] }) : /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(f, { className: "w-4 h-4 mr-2" }), E("bigconsole.dataSinks.builder.preview.showData", "Show Data")] })
-								})]
+						}), /* @__PURE__ */ C(ie, {
+							value: O.refresh,
+							onChange: Oe
+						})] })
+					}),
+					/* @__PURE__ */ C(t, {
+						headingLevel: 2,
+						title: E("bigconsole.dataSinks.builder.dataPayload.title", "Data Payload"),
+						description: D ? E("bigconsole.dataSinks.builder.dataPayload.subtitleEdit", "Edit the JSON data stored in this DataSink") : E("bigconsole.dataSinks.builder.dataPayload.subtitleCreate", "Optional initial data (JSON format)"),
+						icon: /* @__PURE__ */ C(p, { className: "h-icon-sm w-icon-sm" }),
+						actions: /* @__PURE__ */ C(_, {
+							type: "button",
+							onClick: ke,
+							variant: "outline",
+							size: "sm",
+							children: E("bigconsole.dataSinks.builder.dataPayload.formatJson", "Format JSON")
+						}),
+						bodyClassName: "space-y-2",
+						children: /* @__PURE__ */ w(S, { children: [
+							/* @__PURE__ */ C(x, {
+								"aria-label": E("bigconsole.dataSinks.builder.dataPayload.title", "Data Payload"),
+								value: O.data,
+								onChange: Q,
+								placeholder: E("bigconsole.dataSinks.builder.dataPayload.dataPlaceholder", "{\"key\": \"value\"}"),
+								rows: 10,
+								className: `resize-y font-mono text-xs ${A.data ? "border-status-error-border" : ""}`
+							}),
+							A.data && /* @__PURE__ */ C("p", {
+								className: "text-xs text-status-error-text",
+								children: A.data
+							}),
+							/* @__PURE__ */ C("p", {
+								className: "text-xs text-text-muted",
+								children: E("bigconsole.dataSinks.builder.dataPayload.help", "Enter valid JSON data. This data will be stored and can be accessed by widgets via parsers.")
 							})
-						}), (V || U) && /* @__PURE__ */ C(g, { children: U ? /* @__PURE__ */ C("div", {
-							className: "p-4 bg-status-error-bg/10 border border-status-error-border/30 rounded-md",
+						] })
+					}),
+					D && X && /* @__PURE__ */ C(t, {
+						emphasis: "muted",
+						headingLevel: 2,
+						title: E("bigconsole.dataSinks.builder.preview.title", "Data Preview"),
+						description: E("bigconsole.dataSinks.builder.preview.subtitle", "Preview the first 20 records"),
+						icon: /* @__PURE__ */ C(m, { className: "h-icon-sm w-icon-sm" }),
+						actions: /* @__PURE__ */ C(_, {
+							type: "button",
+							onClick: je,
+							variant: "outline",
+							size: "sm",
+							disabled: z,
+							children: z ? /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(h, { className: "w-4 h-4 mr-2 animate-spin" }), E("bigconsole.dataSinks.builder.preview.loading", "Loading...")] }) : /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(m, { className: "w-4 h-4 mr-2" }), E("bigconsole.dataSinks.builder.preview.showData", "Show Data")] })
+						}),
+						children: U ? /* @__PURE__ */ C(t, {
+							tone: "danger",
+							padding: "compact",
+							headingLevel: 3,
+							title: "Could not load the preview",
 							children: /* @__PURE__ */ C("p", {
 								className: "text-sm text-status-error-text",
 								children: U
 							})
 						}) : V && V.length > 0 ? /* @__PURE__ */ C("pre", {
-							className: "p-4 bg-bg-sunken rounded-md overflow-auto max-h-[300px] text-xs font-mono",
+							className: "max-h-[300px] min-w-0 overflow-auto rounded-input bg-bg-surface p-3 font-mono text-xs",
 							children: JSON.stringify(V, null, 2)
-						}) : /* @__PURE__ */ C(me, {
+						}) : V ? /* @__PURE__ */ C(v, {
 							illustration: "empty-generic",
 							title: E("bigconsole.dataSinks.builder.preview.emptyTitle", "No data available yet"),
 							description: E("bigconsole.dataSinks.builder.preview.emptyDescription", "Connect a workflow to this sink's key to start pushing data.")
-						}) })] }),
-						/* @__PURE__ */ w("div", {
-							className: "flex items-center justify-end gap-4 pt-4",
-							children: [/* @__PURE__ */ C(m, {
-								type: "button",
-								onClick: $,
-								variant: "secondary",
-								children: E("bigconsole.dataSinks.builder.actions.cancel", "Cancel")
-							}), /* @__PURE__ */ C(ae, {
-								permission: xe,
-								deniedBehavior: "disable",
-								children: /* @__PURE__ */ C(m, {
-									type: "submit",
-									disabled: !Fe || P,
-									variant: "default",
-									children: P ? /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(p, { className: "w-4 h-4 mr-2 animate-spin" }), E("bigconsole.dataSinks.builder.actions.saving", "Saving...")] }) : /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(ue, { className: "w-4 h-4 mr-2" }), D ? E("bigconsole.dataSinks.builder.actions.saveChanges", "Save Changes") : E("bigconsole.dataSinks.builder.actions.create", "Create DataSink")] })
-								})
-							})]
+						}) : /* @__PURE__ */ C("p", {
+							className: "text-sm text-text-secondary",
+							children: "Select \"Show data\" to load the records this sink currently holds."
 						})
-					]
-				}),
-				!D && /* @__PURE__ */ w("div", {
-					className: "mt-6 p-4 bg-bg-sunken rounded-lg border border-border-default",
-					children: [/* @__PURE__ */ C("h3", {
-						className: "text-sm font-medium text-text-primary mb-2",
-						children: E("bigconsole.dataSinks.builder.whatsNext.title", "What's Next?")
-					}), /* @__PURE__ */ w("ol", {
-						className: "list-decimal list-inside text-xs text-text-secondary space-y-1",
-						children: [
-							/* @__PURE__ */ C("li", { children: E("bigconsole.dataSinks.builder.whatsNext.step1", "Create this DataSink to get your unique key") }),
-							/* @__PURE__ */ w("li", { children: [
-								E("bigconsole.dataSinks.builder.whatsNext.step2Prefix", "Go to"),
-								" ",
-								/* @__PURE__ */ C("strong", { children: E("bigconsole.dataSinks.builder.whatsNext.workflows", "Workflows") }),
-								" ",
-								E("bigconsole.dataSinks.builder.whatsNext.step2Suffix", "and create a FluidGrids workflow")
-							] }),
-							/* @__PURE__ */ C("li", { children: E("bigconsole.dataSinks.builder.whatsNext.step3", "Use the unique key in your workflow to push data to this DataSink") }),
-							/* @__PURE__ */ w("li", { children: [
-								E("bigconsole.dataSinks.builder.whatsNext.step4Prefix", "Create"),
-								" ",
-								/* @__PURE__ */ C("strong", { children: E("bigconsole.dataSinks.builder.whatsNext.parsers", "Parsers") }),
-								" ",
-								E("bigconsole.dataSinks.builder.whatsNext.step4Suffix", "to transform the data using JQ or JSONata")
-							] })
-						]
-					})]
-				})
-			]
-		})
+					}),
+					!D && /* @__PURE__ */ C(t, {
+						tone: "info",
+						emphasis: "muted",
+						headingLevel: 2,
+						title: E("bigconsole.dataSinks.builder.whatsNext.title", "What's Next?"),
+						icon: /* @__PURE__ */ C(ue, { className: "h-icon-sm w-icon-sm" }),
+						children: /* @__PURE__ */ w("ol", {
+							className: "list-inside list-decimal space-y-1 text-xs text-text-secondary",
+							children: [
+								/* @__PURE__ */ C("li", { children: E("bigconsole.dataSinks.builder.whatsNext.step1", "Create this DataSink to get your unique key") }),
+								/* @__PURE__ */ w("li", { children: [
+									E("bigconsole.dataSinks.builder.whatsNext.step2Prefix", "Go to"),
+									" ",
+									/* @__PURE__ */ C("strong", { children: E("bigconsole.dataSinks.builder.whatsNext.workflows", "Workflows") }),
+									" ",
+									E("bigconsole.dataSinks.builder.whatsNext.step2Suffix", "and create a FluidGrids workflow")
+								] }),
+								/* @__PURE__ */ C("li", { children: E("bigconsole.dataSinks.builder.whatsNext.step3", "Use the unique key in your workflow to push data to this DataSink") }),
+								/* @__PURE__ */ w("li", { children: [
+									E("bigconsole.dataSinks.builder.whatsNext.step4Prefix", "Create"),
+									" ",
+									/* @__PURE__ */ C("strong", { children: E("bigconsole.dataSinks.builder.whatsNext.parsers", "Parsers") }),
+									" ",
+									E("bigconsole.dataSinks.builder.whatsNext.step4Suffix", "to transform the data using JQ or JSONata")
+								] })
+							]
+						})
+					}),
+					/* @__PURE__ */ w(t, {
+						emphasis: "bare",
+						padding: "none",
+						"aria-label": "Save or discard this data sink",
+						className: "border-t border-[var(--color-border-subtle)] pt-form-gap",
+						bodyClassName: "flex flex-wrap items-center justify-end gap-control-gap",
+						children: [/* @__PURE__ */ C(_, {
+							type: "button",
+							onClick: $,
+							variant: "secondary",
+							children: E("bigconsole.dataSinks.builder.actions.cancel", "Cancel")
+						}), /* @__PURE__ */ C(l, {
+							permission: ye,
+							deniedBehavior: "disable",
+							children: /* @__PURE__ */ C(_, {
+								type: "submit",
+								disabled: !Ne || P,
+								variant: "default",
+								children: P ? /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(h, { className: "w-4 h-4 mr-2 animate-spin" }), E("bigconsole.dataSinks.builder.actions.saving", "Saving...")] }) : /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(de, { className: "w-4 h-4 mr-2" }), D ? E("bigconsole.dataSinks.builder.actions.saveChanges", "Save Changes") : E("bigconsole.dataSinks.builder.actions.create", "Create DataSink")] })
+							})
+						})]
+					})
+				] })
+			})
+		]
 	});
 });
 //#endregion