@burdenoff/microfe-bigconsole 2026.624.2 → 2026.626.1

package/dist/bigconsole/pages/DataSinksPage.js

@@ -11,21 +11,21 @@ import ie from "../components/datasink/DataSinkRefreshDialog.js";
 import ae from "../components/datasink/ImportDataSinkDialog.js";
 import oe from "../components/datasink/SetupStateBadge.js";
 import { memo as a, useCallback as o, useMemo as s, useState as c } from "react";
-import { AlertCircle as se, Container as ce, Download as le, Eye as ue, FolderOpen as de, LayoutGrid as fe, Pencil as pe, Plus as l, RefreshCw as me, Search as he, Table2 as ge, Trash2 as _e, Upload as ve, X as ye } from "lucide-react";
-import { useI18n as be } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { getProfileScopedKey as u } from "@burdenoff/fe-libs/shared/utils";
-import { Fragment as xe, jsx as d, jsxs as f } from "react/jsx-runtime";
-import { Badge as Se, Button as p, Card as m, CardContent as h, Input as Ce, Select as g, SelectContent as _, SelectItem as v, SelectTrigger as y, SelectValue as b, Spinner as we } from "@burdenoff/fe-libs/ui";
+import { AlertCircle as se, Container as ce, Download as le, Eye as ue, LayoutGrid as de, Pencil as fe, Plus as l, RefreshCw as pe, Search as me, Table2 as he, Trash2 as ge, Upload as _e, X as ve } from "lucide-react";
+import { useI18n as ye } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { AuroraBackground as be, Badge as xe, Button as u, CTAOverflowMenu as Se, Card as Ce, CardContent as we, GlassCard as d, GradientText as Te, IllustratedEmptyState as f, Input as Ee, PagePurpose as De, Select as p, SelectContent as m, SelectItem as h, SelectTrigger as g, SelectValue as _, Spinner as Oe } from "@burdenoff/fe-libs/ui";
+import { getProfileScopedKey as v } from "@burdenoff/fe-libs/shared/utils";
+import { Fragment as ke, jsx as y, jsxs as b } from "react/jsx-runtime";
 //#region src/bigconsole/pages/DataSinksPage.tsx
-var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "completed" || e.ttl !== null && e.ttl !== void 0 && e.ttl > 0 || e.fluidGridsWorkflowId && e.data && Object.keys(e.data).length > 0 ? "completed" : e.fluidGridsWorkflowId ? "workflow_running" : "workflow_pending", S = a(function() {
-	let a = t(), { t: S } = be(), C = o((e, t) => {
+var x = "bigconsole-datasinks-view-mode", Ae = (e) => e.setupState === "completed" || e.ttl !== null && e.ttl !== void 0 && e.ttl > 0 || e.fluidGridsWorkflowId && e.data && Object.keys(e.data).length > 0 ? "completed" : e.fluidGridsWorkflowId ? "workflow_running" : "workflow_pending", S = a(function() {
+	let a = t(), { t: S } = ye(), C = o((e, t) => {
 		let n = S(e);
 		return n === e ? t : n;
-	}, [S]), [w, T] = c("all"), [Ee, E] = c(!1), [D, De] = c(() => localStorage.getItem(u(x)) || "grid"), O = o((e) => {
-		De(e), localStorage.setItem(u(x), e);
-	}, []), k = e((e) => e.statusFilter), A = e((e) => e.activeFilter), j = e((e) => e.searchQuery), M = e((e) => e.setStatusFilter), N = e((e) => e.setActiveFilter), P = e((e) => e.setSearchQuery), Oe = e((e) => e.deleteDialogOpen), ke = e((e) => e.refreshDialogOpen), F = e((e) => e.currentDataSink), I = e((e) => e.openDeleteDialog), L = e((e) => e.closeDeleteDialog), R = e((e) => e.openRefreshDialog), z = e((e) => e.closeRefreshDialog), { loading: B, error: V, dataSinks: H, deleteDataSink: U, refreshDataSink: W, refetch: G } = n(), { downloadDataSink: K } = ee(), q = s(() => H.map((e) => ({
+	}, [S]), [w, T] = c("all"), [je, E] = c(!1), [D, Me] = c(() => localStorage.getItem(v(x)) || "grid"), O = o((e) => {
+		Me(e), localStorage.setItem(v(x), e);
+	}, []), k = e((e) => e.statusFilter), A = e((e) => e.activeFilter), j = e((e) => e.searchQuery), M = e((e) => e.setStatusFilter), N = e((e) => e.setActiveFilter), P = e((e) => e.setSearchQuery), Ne = e((e) => e.deleteDialogOpen), Pe = e((e) => e.refreshDialogOpen), F = e((e) => e.currentDataSink), I = e((e) => e.openDeleteDialog), L = e((e) => e.closeDeleteDialog), R = e((e) => e.openRefreshDialog), z = e((e) => e.closeRefreshDialog), { loading: B, error: V, dataSinks: H, deleteDataSink: U, refreshDataSink: W, refetch: G } = n(), { downloadDataSink: K } = ee(), q = s(() => H.map((e) => ({
 		dataSink: e,
-		setupState: Te(e)
+		setupState: Ae(e)
 	})), [H]), J = s(() => {
 		let e = [...q];
 		if (w === "in_progress" ? e = e.filter((e) => e.setupState !== "completed") : w === "completed" && (e = e.filter((e) => e.setupState === "completed")), k !== null && (e = e.filter((e) => e.dataSink.status === k)), A !== null && (e = e.filter((e) => e.dataSink.isActive === A)), j.trim()) {
@@ -48,7 +48,7 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 	}, [a]), Q = o((e) => {
 		let t = H.find((t) => t.id === e);
 		t && R(t);
-	}, [H, R]), Ae = o(async (e) => {
+	}, [H, R]), Fe = o(async (e) => {
 		F && (await W({
 			id: F.id,
 			forceRefresh: e
@@ -60,7 +60,7 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 	]), $ = o((e) => {
 		let t = H.find((t) => t.id === e);
 		t && I(t);
-	}, [H, I]), je = o(async () => {
+	}, [H, I]), Ie = o(async () => {
 		if (F) {
 			try {
 				await U(F.id), r() && i("success");
@@ -73,25 +73,25 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 		F,
 		U,
 		L
-	]), Me = o(async (e) => {
+	]), Le = o(async (e) => {
 		let t = H.find((t) => t.id === e);
 		t && await K(e, t.name || t.key);
-	}, [H, K]), Ne = o(() => {
+	}, [H, K]), Re = o(() => {
 		E(!0);
-	}, []), Pe = o((e, t, n) => {
+	}, []), ze = o((e, t, n) => {
 		G();
-	}, [G]), Fe = s(() => w !== "all" || k !== null || A !== null || j.trim() !== "", [
+	}, [G]), Be = s(() => w !== "all" || k !== null || A !== null || j.trim() !== "", [
 		w,
 		k,
 		A,
 		j
-	]), Ie = o(() => {
+	]), Ve = o(() => {
 		T("all"), M(null), N(null), P("");
 	}, [
 		M,
 		N,
 		P
-	]), Le = [
+	]), He = [
 		{
 			value: "all",
 			label: C("bigconsole.dataSinks.filters.setupState.all", "All")
@@ -105,16 +105,16 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 			label: C("bigconsole.dataSinks.filters.setupState.completed", "Completed")
 		}
 	];
-	return V ? /* @__PURE__ */ d("div", {
+	return V ? /* @__PURE__ */ y("div", {
 		style: { padding: "var(--space-pagePadding)" },
-		children: /* @__PURE__ */ d(m, {
+		children: /* @__PURE__ */ y(Ce, {
 			style: {
 				borderColor: "var(--color-status-error-border)",
 				backgroundColor: "var(--color-status-error-bgSubtle)"
 			},
-			children: /* @__PURE__ */ d(h, {
+			children: /* @__PURE__ */ y(we, {
 				style: { padding: "var(--space-pagePadding)" },
-				children: /* @__PURE__ */ f("div", {
+				children: /* @__PURE__ */ b("div", {
 					style: {
 						display: "flex",
 						flexDirection: "column",
@@ -122,20 +122,20 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 						textAlign: "center"
 					},
 					children: [
-						/* @__PURE__ */ d("div", {
+						/* @__PURE__ */ y("div", {
 							style: {
 								padding: "var(--space-controlGap)",
 								borderRadius: "50%",
 								backgroundColor: "var(--color-status-error-bgSubtle)",
 								marginBottom: "var(--space-formGap)"
 							},
-							children: /* @__PURE__ */ d(se, { style: {
+							children: /* @__PURE__ */ y(se, { style: {
 								height: "var(--size-icon-xl)",
 								width: "var(--size-icon-xl)",
 								color: "var(--color-status-error-text)"
 							} })
 						}),
-						/* @__PURE__ */ d("h3", {
+						/* @__PURE__ */ y("h3", {
 							style: {
 								fontSize: "var(--font-size-body-lg)",
 								fontWeight: "var(--font-weight-medium)",
@@ -144,7 +144,7 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 							},
 							children: C("bigconsole.dataSinks.error.title", "Failed to load Data Sinks")
 						}),
-						/* @__PURE__ */ d("p", {
+						/* @__PURE__ */ y("p", {
 							style: {
 								fontSize: "var(--font-size-body-sm)",
 								color: "var(--color-text-secondary)",
@@ -152,7 +152,7 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 							},
 							children: V.message
 						}),
-						/* @__PURE__ */ d(p, {
+						/* @__PURE__ */ y(u, {
 							size: "sm",
 							onClick: () => G(),
 							children: C("bigconsole.dataSinks.error.retry", "Try Again")
@@ -161,32 +161,29 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 				})
 			})
 		})
-	}) : /* @__PURE__ */ f("div", {
+	}) : /* @__PURE__ */ b("div", {
 		style: {
 			minHeight: "100vh",
 			backgroundColor: "var(--color-bg-canvas)"
 		},
 		children: [
-			/* @__PURE__ */ d("div", {
-				style: {
-					borderBottom: "1px solid var(--color-border)",
-					backgroundColor: "var(--color-bg-surface)"
-				},
-				children: /* @__PURE__ */ d("div", {
+			/* @__PURE__ */ b("div", {
+				className: "relative overflow-hidden border-b border-border-seam bg-gloss-card",
+				children: [/* @__PURE__ */ y(be, { intensity: "subtle" }), /* @__PURE__ */ y("div", {
 					style: { padding: "var(--space-pagePadding)" },
-					children: /* @__PURE__ */ f("div", {
+					children: /* @__PURE__ */ b("div", {
 						style: {
 							display: "flex",
 							alignItems: "center",
 							justifyContent: "space-between"
 						},
-						children: [/* @__PURE__ */ f("div", {
+						children: [/* @__PURE__ */ b("div", {
 							style: {
 								display: "flex",
 								alignItems: "center",
 								gap: "var(--space-formGap)"
 							},
-							children: [/* @__PURE__ */ d("div", {
+							children: [/* @__PURE__ */ y("div", {
 								style: {
 									display: "flex",
 									height: "var(--size-controlHeight-lg)",
@@ -196,20 +193,20 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 									borderRadius: "var(--radius-card)",
 									backgroundColor: "var(--color-action-primary-bg)"
 								},
-								children: /* @__PURE__ */ d(ce, { style: {
+								children: /* @__PURE__ */ y(ce, { style: {
 									height: "var(--size-icon-lg)",
 									width: "var(--size-icon-lg)",
 									color: "var(--color-action-primary-text)"
 								} })
-							}), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("h1", {
+							}), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("h1", {
 								style: {
 									fontSize: "var(--font-size-heading-h4)",
 									fontWeight: "var(--font-weight-bold)",
 									margin: 0,
 									color: "var(--color-text-primary)"
 								},
-								children: C("bigconsole.dataSinks.title", "Data Sinks")
-							}), /* @__PURE__ */ d("p", {
+								children: /* @__PURE__ */ y(Te, { children: C("bigconsole.dataSinks.title", "Data Sinks") })
+							}), /* @__PURE__ */ y("p", {
 								style: {
 									fontSize: "var(--font-size-body-sm)",
 									color: "var(--color-text-secondary)",
@@ -217,37 +214,38 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 								},
 								children: C("bigconsole.dataSinks.subtitle", "Manage pre-processed data from FluidGrids workflows")
 							})] })]
-						}), /* @__PURE__ */ f("div", {
-							style: {
-								display: "flex",
-								gap: "var(--space-controlGap)"
-							},
-							children: [/* @__PURE__ */ f(p, {
-								variant: "outline",
-								onClick: Ne,
-								children: [/* @__PURE__ */ d(ve, { style: {
+						}), /* @__PURE__ */ y(Se, {
+							primary: {
+								label: C("bigconsole.dataSinks.actions.create", "Create Data Sink"),
+								onSelect: Y,
+								icon: /* @__PURE__ */ y(l, { style: {
 									marginRight: "var(--space-iconGap)",
 									height: "var(--size-icon-sm)",
 									width: "var(--size-icon-sm)"
-								} }), C("bigconsole.dataSinks.actions.import", "Import")]
-							}), /* @__PURE__ */ f(p, {
-								onClick: Y,
-								children: [/* @__PURE__ */ d(l, { style: {
-									marginRight: "var(--space-iconGap)",
+								} })
+							},
+							actions: [{
+								label: C("bigconsole.dataSinks.actions.import", "Import"),
+								onSelect: Re,
+								icon: /* @__PURE__ */ y(_e, { style: {
 									height: "var(--size-icon-sm)",
 									width: "var(--size-icon-sm)"
-								} }), C("bigconsole.dataSinks.actions.create", "Create Data Sink")]
-							})]
+								} })
+							}]
 						})]
 					})
-				})
+				})]
 			}),
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ b("div", {
 				style: { padding: "var(--space-pagePadding)" },
 				children: [
-					/* @__PURE__ */ d("div", {
+					/* @__PURE__ */ y(De, {
+						className: "mb-[var(--space-sectionGap)]",
+						children: "Data sinks are the structured destinations that hold your processed data — define a schema once and every pipeline, parser, and workflow can write into it. Dashboards then query sinks directly, so a sink is where your data lives and where your charts read from."
+					}),
+					/* @__PURE__ */ y("div", {
 						style: { marginBottom: "var(--space-formGap)" },
-						children: /* @__PURE__ */ d("div", {
+						children: /* @__PURE__ */ y("div", {
 							style: {
 								display: "flex",
 								alignItems: "center",
@@ -257,7 +255,7 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 								borderRadius: "var(--radius-card)",
 								width: "fit-content"
 							},
-							children: Le.map((e) => /* @__PURE__ */ d("button", {
+							children: He.map((e) => /* @__PURE__ */ y("button", {
 								type: "button",
 								onClick: () => T(e.value),
 								style: {
@@ -276,7 +274,7 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 							}, e.value))
 						})
 					}),
-					/* @__PURE__ */ f("div", {
+					/* @__PURE__ */ b("div", {
 						style: {
 							display: "flex",
 							alignItems: "center",
@@ -285,13 +283,13 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 							flexWrap: "wrap"
 						},
 						children: [
-							/* @__PURE__ */ f("div", {
+							/* @__PURE__ */ b("div", {
 								style: {
 									position: "relative",
 									maxWidth: "400px",
 									flex: 1
 								},
-								children: [/* @__PURE__ */ d(he, { style: {
+								children: [/* @__PURE__ */ y(me, { style: {
 									position: "absolute",
 									left: "var(--space-controlGap)",
 									top: "50%",
@@ -299,7 +297,7 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 									height: "var(--size-icon-sm)",
 									width: "var(--size-icon-sm)",
 									color: "var(--color-text-muted)"
-								} }), /* @__PURE__ */ d(Ce, {
+								} }), /* @__PURE__ */ y(Ee, {
 									type: "text",
 									placeholder: C("bigconsole.dataSinks.search.placeholder", "Search data sinks..."),
 									value: j,
@@ -310,88 +308,88 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 									}
 								})]
 							}),
-							/* @__PURE__ */ f(g, {
+							/* @__PURE__ */ b(p, {
 								value: k || "all",
 								onValueChange: (e) => M(e === "all" ? null : e),
-								children: [/* @__PURE__ */ d(y, {
+								children: [/* @__PURE__ */ y(g, {
 									style: { width: "150px" },
-									children: /* @__PURE__ */ d(b, { placeholder: C("bigconsole.dataSinks.filters.status.placeholder", "All Statuses") })
-								}), /* @__PURE__ */ f(_, { children: [
-									/* @__PURE__ */ d(v, {
+									children: /* @__PURE__ */ y(_, { placeholder: C("bigconsole.dataSinks.filters.status.placeholder", "All Statuses") })
+								}), /* @__PURE__ */ b(m, { children: [
+									/* @__PURE__ */ y(h, {
 										value: "all",
 										children: C("bigconsole.dataSinks.filters.status.all", "All Statuses")
 									}),
-									/* @__PURE__ */ d(v, {
+									/* @__PURE__ */ y(h, {
 										value: "ready",
 										children: C("bigconsole.dataSinks.filters.status.ready", "Ready")
 									}),
-									/* @__PURE__ */ d(v, {
+									/* @__PURE__ */ y(h, {
 										value: "error",
 										children: C("bigconsole.dataSinks.filters.status.error", "Error")
 									}),
-									/* @__PURE__ */ d(v, {
+									/* @__PURE__ */ y(h, {
 										value: "stale",
 										children: C("bigconsole.dataSinks.filters.status.stale", "Stale")
 									}),
-									/* @__PURE__ */ d(v, {
+									/* @__PURE__ */ y(h, {
 										value: "refreshing",
 										children: C("bigconsole.dataSinks.filters.status.refreshing", "Refreshing")
 									})
 								] })]
 							}),
-							/* @__PURE__ */ f(g, {
+							/* @__PURE__ */ b(p, {
 								value: A === null ? "all" : A ? "true" : "false",
 								onValueChange: (e) => N(e === "all" ? null : e === "true"),
-								children: [/* @__PURE__ */ d(y, {
+								children: [/* @__PURE__ */ y(g, {
 									style: { width: "130px" },
-									children: /* @__PURE__ */ d(b, { placeholder: C("bigconsole.dataSinks.filters.active.placeholder", "All") })
-								}), /* @__PURE__ */ f(_, { children: [
-									/* @__PURE__ */ d(v, {
+									children: /* @__PURE__ */ y(_, { placeholder: C("bigconsole.dataSinks.filters.active.placeholder", "All") })
+								}), /* @__PURE__ */ b(m, { children: [
+									/* @__PURE__ */ y(h, {
 										value: "all",
 										children: C("bigconsole.dataSinks.filters.active.all", "All")
 									}),
-									/* @__PURE__ */ d(v, {
+									/* @__PURE__ */ y(h, {
 										value: "true",
 										children: C("bigconsole.dataSinks.filters.active.active", "Active")
 									}),
-									/* @__PURE__ */ d(v, {
+									/* @__PURE__ */ y(h, {
 										value: "false",
 										children: C("bigconsole.dataSinks.filters.active.inactive", "Inactive")
 									})
 								] })]
 							}),
-							Fe && /* @__PURE__ */ f(p, {
+							Be && /* @__PURE__ */ b(u, {
 								variant: "ghost",
 								size: "sm",
-								onClick: Ie,
-								children: [/* @__PURE__ */ d(ye, { style: {
+								onClick: Ve,
+								children: [/* @__PURE__ */ y(ve, { style: {
 									marginRight: "var(--space-iconGap)",
 									height: "var(--size-icon-sm)",
 									width: "var(--size-icon-sm)"
 								} }), C("bigconsole.dataSinks.filters.clear", "Clear Filters")]
 							}),
-							/* @__PURE__ */ f("div", {
+							/* @__PURE__ */ b("div", {
 								style: {
 									marginLeft: "auto",
 									display: "flex",
 									alignItems: "center",
 									gap: "var(--space-controlGap)"
 								},
-								children: [/* @__PURE__ */ f(Se, {
+								children: [/* @__PURE__ */ b(xe, {
 									variant: "secondary",
 									children: [
 										J.length,
 										" ",
 										J.length === 1 ? C("bigconsole.dataSinks.count.single", "Data Sink") : C("bigconsole.dataSinks.count.plural", "Data Sinks")
 									]
-								}), /* @__PURE__ */ f("div", {
+								}), /* @__PURE__ */ b("div", {
 									style: {
 										display: "flex",
 										borderRadius: "var(--radius-button)",
 										border: "1px solid var(--color-border)",
 										overflow: "hidden"
 									},
-									children: [/* @__PURE__ */ d("button", {
+									children: [/* @__PURE__ */ y("button", {
 										type: "button",
 										onClick: () => O("grid"),
 										title: C("bigconsole.dataSinks.view.grid", "Grid view"),
@@ -402,8 +400,8 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 											backgroundColor: D === "grid" ? "var(--color-bg-sunken)" : "transparent",
 											color: D === "grid" ? "var(--color-text-primary)" : "var(--color-text-muted)"
 										},
-										children: /* @__PURE__ */ d(fe, { size: 16 })
-									}), /* @__PURE__ */ d("button", {
+										children: /* @__PURE__ */ y(de, { size: 16 })
+									}), /* @__PURE__ */ y("button", {
 										type: "button",
 										onClick: () => O("table"),
 										title: C("bigconsole.dataSinks.view.table", "Table view"),
@@ -415,26 +413,26 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 											backgroundColor: D === "table" ? "var(--color-bg-sunken)" : "transparent",
 											color: D === "table" ? "var(--color-text-primary)" : "var(--color-text-muted)"
 										},
-										children: /* @__PURE__ */ d(ge, { size: 16 })
+										children: /* @__PURE__ */ y(he, { size: 16 })
 									})]
 								})]
 							})
 						]
 					}),
-					B && H.length === 0 && /* @__PURE__ */ d("div", {
+					B && H.length === 0 && /* @__PURE__ */ y("div", {
 						style: {
 							display: "flex",
 							alignItems: "center",
 							justifyContent: "center",
 							padding: "80px 0"
 						},
-						children: /* @__PURE__ */ f("div", {
+						children: /* @__PURE__ */ b("div", {
 							style: { textAlign: "center" },
-							children: [/* @__PURE__ */ d(we, { style: {
+							children: [/* @__PURE__ */ y(Oe, { style: {
 								height: "var(--size-icon-xl)",
 								width: "var(--size-icon-xl)",
 								margin: "0 auto var(--space-formGap)"
-							} }), /* @__PURE__ */ d("p", {
+							} }), /* @__PURE__ */ y("p", {
 								style: {
 									fontSize: "var(--font-size-body-sm)",
 									color: "var(--color-text-muted)"
@@ -443,119 +441,75 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 							})]
 						})
 					}),
-					!B && H.length === 0 && /* @__PURE__ */ d(m, {
-						className: "border-dashed",
-						children: /* @__PURE__ */ f(h, {
-							style: {
-								display: "flex",
-								flexDirection: "column",
-								alignItems: "center",
-								justifyContent: "center",
-								padding: "64px var(--space-pagePadding)"
-							},
-							children: [
-								/* @__PURE__ */ d("div", {
-									style: {
-										display: "flex",
-										height: "80px",
-										width: "80px",
-										alignItems: "center",
-										justifyContent: "center",
-										borderRadius: "50%",
-										backgroundColor: "var(--color-bg-sunken)",
-										marginBottom: "var(--space-sectionGap)"
-									},
-									children: /* @__PURE__ */ d(de, { style: {
-										height: "var(--size-icon-xl)",
-										width: "var(--size-icon-xl)",
-										color: "var(--color-text-muted)"
-									} })
-								}),
-								/* @__PURE__ */ d("h3", {
-									style: {
-										fontSize: "var(--font-size-heading-h4)",
-										fontWeight: "var(--font-weight-semibold)",
-										marginBottom: "var(--space-controlGap)"
-									},
-									children: C("bigconsole.dataSinks.empty.title", "No Data Sinks yet")
-								}),
-								/* @__PURE__ */ d("p", {
-									style: {
-										fontSize: "var(--font-size-body-sm)",
-										color: "var(--color-text-muted)",
-										marginBottom: "var(--space-sectionGap)",
-										textAlign: "center",
-										maxWidth: "400px"
-									},
-									children: C("bigconsole.dataSinks.empty.description", "Data Sinks store pre-processed data from FluidGrids workflows for fast access in widgets.")
-								}),
-								/* @__PURE__ */ f(p, {
-									onClick: Y,
-									children: [/* @__PURE__ */ d(l, { style: {
-										marginRight: "var(--space-iconGap)",
-										height: "var(--size-icon-sm)",
-										width: "var(--size-icon-sm)"
-									} }), C("bigconsole.dataSinks.actions.create", "Create Data Sink")]
-								})
-							]
+					!B && H.length === 0 && /* @__PURE__ */ y(d, {
+						treatment: "insight",
+						className: "border-border-seam",
+						children: /* @__PURE__ */ y(f, {
+							illustration: "empty-data",
+							title: C("bigconsole.dataSinks.empty.title", "No Data Sinks yet"),
+							description: C("bigconsole.dataSinks.empty.description", "Data Sinks store pre-processed data from FluidGrids workflows for fast access in widgets."),
+							action: /* @__PURE__ */ b(u, {
+								onClick: Y,
+								children: [/* @__PURE__ */ y(l, { style: {
+									marginRight: "var(--space-iconGap)",
+									height: "var(--size-icon-sm)",
+									width: "var(--size-icon-sm)"
+								} }), C("bigconsole.dataSinks.actions.create", "Create Data Sink")]
+							})
 						})
 					}),
-					!B && J.length === 0 && H.length > 0 && /* @__PURE__ */ f("div", {
-						style: {
-							padding: "64px 0",
-							textAlign: "center"
-						},
-						children: [/* @__PURE__ */ d("p", {
-							style: {
-								fontSize: "var(--font-size-body-sm)",
-								color: "var(--color-text-muted)"
-							},
-							children: C("bigconsole.dataSinks.empty.filtered", "No data sinks match your filters")
-						}), /* @__PURE__ */ d(p, {
-							variant: "ghost",
-							size: "sm",
-							onClick: Ie,
-							style: { marginTop: "var(--space-formGap)" },
-							children: C("bigconsole.dataSinks.filters.clear", "Clear Filters")
-						})]
+					!B && J.length === 0 && H.length > 0 && /* @__PURE__ */ y(d, {
+						treatment: "insight",
+						className: "border-border-seam",
+						children: /* @__PURE__ */ y(f, {
+							illustration: "empty-search",
+							title: C("bigconsole.dataSinks.empty.filteredTitle", "No matching data sinks"),
+							description: C("bigconsole.dataSinks.empty.filtered", "No data sinks match your filters"),
+							action: /* @__PURE__ */ y(u, {
+								variant: "ghost",
+								size: "sm",
+								onClick: Ve,
+								children: C("bigconsole.dataSinks.filters.clear", "Clear Filters")
+							})
+						})
 					}),
-					J.length > 0 && D === "grid" && /* @__PURE__ */ d("div", {
+					J.length > 0 && D === "grid" && /* @__PURE__ */ y("div", {
 						style: {
 							display: "grid",
 							gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
 							gap: "var(--space-formGap)"
 						},
-						children: J.map((e) => /* @__PURE__ */ d(ne, {
+						children: J.map((e) => /* @__PURE__ */ y(ne, {
 							dataSink: e.dataSink,
 							setupState: e.setupState,
 							onView: X,
 							onEdit: Z,
 							onRefresh: Q,
-							onExport: Me,
+							onExport: Le,
 							onDelete: $
 						}, e.dataSink.id))
 					}),
-					J.length > 0 && D === "table" && /* @__PURE__ */ d("div", {
+					J.length > 0 && D === "table" && /* @__PURE__ */ y("div", {
 						style: {
 							border: "1px solid var(--color-border)",
 							borderRadius: "var(--radius-card)",
 							overflow: "hidden"
 						},
-						children: /* @__PURE__ */ d("div", {
+						children: /* @__PURE__ */ y("div", {
 							style: { overflowX: "auto" },
-							children: /* @__PURE__ */ f("table", {
+							children: /* @__PURE__ */ b("table", {
 								style: {
 									width: "100%",
 									borderCollapse: "collapse",
 									fontSize: "var(--font-size-body-sm)"
 								},
-								children: [/* @__PURE__ */ d("thead", { children: /* @__PURE__ */ f("tr", {
+								children: [/* @__PURE__ */ y("thead", { children: /* @__PURE__ */ b("tr", {
 									style: {
 										backgroundColor: "var(--color-bg-sunken)",
 										borderBottom: "1px solid var(--color-border)"
 									},
 									children: [
-										/* @__PURE__ */ d("th", {
+										/* @__PURE__ */ y("th", {
 											style: {
 												padding: "10px 12px",
 												textAlign: "left",
@@ -565,7 +519,7 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 											},
 											children: C("bigconsole.dataSinks.table.name", "Name")
 										}),
-										/* @__PURE__ */ d("th", {
+										/* @__PURE__ */ y("th", {
 											style: {
 												padding: "10px 12px",
 												textAlign: "left",
@@ -575,7 +529,7 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 											},
 											children: C("bigconsole.dataSinks.table.key", "Key")
 										}),
-										/* @__PURE__ */ d("th", {
+										/* @__PURE__ */ y("th", {
 											style: {
 												padding: "10px 12px",
 												textAlign: "left",
@@ -585,7 +539,7 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 											},
 											children: C("bigconsole.dataSinks.table.status", "Status")
 										}),
-										/* @__PURE__ */ d("th", {
+										/* @__PURE__ */ y("th", {
 											style: {
 												padding: "10px 12px",
 												textAlign: "left",
@@ -595,7 +549,7 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 											},
 											children: C("bigconsole.dataSinks.table.setup", "Setup")
 										}),
-										/* @__PURE__ */ d("th", {
+										/* @__PURE__ */ y("th", {
 											style: {
 												padding: "10px 12px",
 												textAlign: "center",
@@ -605,7 +559,7 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 											},
 											children: C("bigconsole.dataSinks.table.active", "Active")
 										}),
-										/* @__PURE__ */ d("th", {
+										/* @__PURE__ */ y("th", {
 											style: {
 												padding: "10px 12px",
 												textAlign: "left",
@@ -615,7 +569,7 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 											},
 											children: C("bigconsole.dataSinks.table.version", "Version")
 										}),
-										/* @__PURE__ */ d("th", {
+										/* @__PURE__ */ y("th", {
 											style: {
 												padding: "10px 12px",
 												textAlign: "left",
@@ -625,7 +579,7 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 											},
 											children: C("bigconsole.dataSinks.table.updated", "Updated")
 										}),
-										/* @__PURE__ */ d("th", {
+										/* @__PURE__ */ y("th", {
 											style: {
 												padding: "10px 12px",
 												textAlign: "right",
@@ -636,9 +590,9 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 											children: C("bigconsole.dataSinks.table.actions", "Actions")
 										})
 									]
-								}) }), /* @__PURE__ */ d("tbody", { children: J.map((e) => {
+								}) }), /* @__PURE__ */ y("tbody", { children: J.map((e) => {
 									let t = e.dataSink;
-									return /* @__PURE__ */ f("tr", {
+									return /* @__PURE__ */ b("tr", {
 										onClick: () => X(t.id),
 										style: {
 											borderBottom: "1px solid var(--color-border)",
@@ -652,7 +606,7 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 											e.currentTarget.style.backgroundColor = "transparent";
 										},
 										children: [
-											/* @__PURE__ */ d("td", {
+											/* @__PURE__ */ y("td", {
 												style: {
 													padding: "10px 12px",
 													fontWeight: "var(--font-weight-medium)",
@@ -664,7 +618,7 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 												},
 												children: t.name || t.key
 											}),
-											/* @__PURE__ */ d("td", {
+											/* @__PURE__ */ y("td", {
 												style: {
 													padding: "10px 12px",
 													color: "var(--color-text-muted)",
@@ -677,20 +631,20 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 												},
 												children: t.key
 											}),
-											/* @__PURE__ */ d("td", {
+											/* @__PURE__ */ y("td", {
 												style: { padding: "10px 12px" },
-												children: /* @__PURE__ */ d(te, { status: t.status })
+												children: /* @__PURE__ */ y(te, { status: t.status })
 											}),
-											/* @__PURE__ */ d("td", {
+											/* @__PURE__ */ y("td", {
 												style: { padding: "10px 12px" },
-												children: /* @__PURE__ */ d(oe, { state: e.setupState })
+												children: /* @__PURE__ */ y(oe, { state: e.setupState })
 											}),
-											/* @__PURE__ */ d("td", {
+											/* @__PURE__ */ y("td", {
 												style: {
 													padding: "10px 12px",
 													textAlign: "center"
 												},
-												children: /* @__PURE__ */ d("span", {
+												children: /* @__PURE__ */ y("span", {
 													style: {
 														display: "inline-block",
 														width: 8,
@@ -701,14 +655,14 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 													title: t.isActive ? C("bigconsole.dataSinks.badges.active", "Active") : C("bigconsole.dataSinks.badges.inactive", "Inactive")
 												})
 											}),
-											/* @__PURE__ */ f("td", {
+											/* @__PURE__ */ b("td", {
 												style: {
 													padding: "10px 12px",
 													color: "var(--color-text-muted)"
 												},
 												children: ["v", t.version ?? 0]
 											}),
-											/* @__PURE__ */ d("td", {
+											/* @__PURE__ */ y("td", {
 												style: {
 													padding: "10px 12px",
 													color: "var(--color-text-muted)",
@@ -716,12 +670,12 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 												},
 												children: new Date(t.updatedAt).toLocaleDateString()
 											}),
-											/* @__PURE__ */ d("td", {
+											/* @__PURE__ */ y("td", {
 												style: {
 													padding: "10px 12px",
 													textAlign: "right"
 												},
-												children: /* @__PURE__ */ f("div", {
+												children: /* @__PURE__ */ b("div", {
 													style: {
 														display: "flex",
 														gap: 4,
@@ -729,7 +683,7 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 													},
 													onClick: (e) => e.stopPropagation(),
 													children: [
-														/* @__PURE__ */ d("button", {
+														/* @__PURE__ */ y("button", {
 															type: "button",
 															title: C("bigconsole.dataSinks.actions.view", "View"),
 															onClick: () => X(t.id),
@@ -741,9 +695,9 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 																color: "var(--color-text-muted)",
 																borderRadius: 4
 															},
-															children: /* @__PURE__ */ d(ue, { size: 14 })
+															children: /* @__PURE__ */ y(ue, { size: 14 })
 														}),
-														/* @__PURE__ */ d("button", {
+														/* @__PURE__ */ y("button", {
 															type: "button",
 															title: C("bigconsole.dataSinks.actions.edit", "Edit"),
 															onClick: () => Z(t.id),
@@ -755,9 +709,9 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 																color: "var(--color-text-muted)",
 																borderRadius: 4
 															},
-															children: /* @__PURE__ */ d(pe, { size: 14 })
+															children: /* @__PURE__ */ y(fe, { size: 14 })
 														}),
-														/* @__PURE__ */ d("button", {
+														/* @__PURE__ */ y("button", {
 															type: "button",
 															title: C("bigconsole.dataSinks.actions.refresh", "Refresh"),
 															onClick: () => Q(t.id),
@@ -769,12 +723,12 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 																color: "var(--color-text-muted)",
 																borderRadius: 4
 															},
-															children: /* @__PURE__ */ d(me, { size: 14 })
+															children: /* @__PURE__ */ y(pe, { size: 14 })
 														}),
-														/* @__PURE__ */ d("button", {
+														/* @__PURE__ */ y("button", {
 															type: "button",
 															title: C("bigconsole.dataSinks.actions.export", "Export"),
-															onClick: () => Me(t.id),
+															onClick: () => Le(t.id),
 															style: {
 																padding: 4,
 																border: "none",
@@ -783,9 +737,9 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 																color: "var(--color-text-muted)",
 																borderRadius: 4
 															},
-															children: /* @__PURE__ */ d(le, { size: 14 })
+															children: /* @__PURE__ */ y(le, { size: 14 })
 														}),
-														/* @__PURE__ */ d("button", {
+														/* @__PURE__ */ y("button", {
 															type: "button",
 															title: C("bigconsole.dataSinks.actions.delete", "Delete"),
 															onClick: () => $(t.id),
@@ -797,7 +751,7 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 																color: "var(--color-text-muted)",
 																borderRadius: 4
 															},
-															children: /* @__PURE__ */ d(_e, { size: 14 })
+															children: /* @__PURE__ */ y(ge, { size: 14 })
 														})
 													]
 												})
@@ -810,21 +764,21 @@ var x = "bigconsole-datasinks-view-mode", Te = (e) => e.setupState === "complete
 					})
 				]
 			}),
-			F && /* @__PURE__ */ f(xe, { children: [/* @__PURE__ */ d(re, {
+			F && /* @__PURE__ */ b(ke, { children: [/* @__PURE__ */ y(re, {
 				dataSink: F,
-				isOpen: Oe,
+				isOpen: Ne,
 				onClose: L,
-				onConfirm: je
-			}), /* @__PURE__ */ d(ie, {
+				onConfirm: Ie
+			}), /* @__PURE__ */ y(ie, {
 				dataSink: F,
-				isOpen: ke,
+				isOpen: Pe,
 				onClose: z,
-				onConfirm: Ae
+				onConfirm: Fe
 			})] }),
-			/* @__PURE__ */ d(ae, {
-				isOpen: Ee,
+			/* @__PURE__ */ y(ae, {
+				isOpen: je,
 				onClose: () => E(!1),
-				onSuccess: Pe
+				onSuccess: ze
 			})
 		]
 	});