@burdenoff/microfe-bigconsole 2026.805.2 → 2026.812.1

package/dist/bigconsole/pages/DataSinkViewPage.js

@@ -1,61 +1,65 @@
 import { useDataSinkStore as e } from "../store/dataSinkStore.js";
 import { useAppNavigate as t } from "../contexts/NavigationContext.js";
 import "../contexts/index.js";
-import { newWorkflowPath as n } from "../BigConsoleRoutes.js";
-import ee from "../components/datasink/DataSinkTableViewer.js";
-import te from "../hooks/useDataSinkOperations.js";
+import "../components/common/sectionStyles.js";
+import { Section as n, SectionStack as ee } from "../components/common/Section.js";
+import "../components/common/index.js";
+import { newWorkflowPath as te } from "../BigConsoleRoutes.js";
+import ne from "../components/datasink/DataSinkTableViewer.js";
+import re from "../hooks/useDataSinkOperations.js";
 import { BIGCONSOLE_PERMISSIONS as r } from "../../constants/permissions.js";
 import i from "../components/datasink/DataSinkStatusBadge.js";
-import { isNative as a, nativeConfirm as ne, nativeImpact as re, nativeNotify as o } from "../../utils/nativeBridge.js";
-import ie from "../hooks/useDataSinkSubscription.js";
-import ae from "../components/datasink/DataSinkDataViewer.js";
-import oe from "../components/datasink/LinkedWorkflowsPanel.js";
-import se from "../components/datasink/LinkedParsersPanel.js";
-import ce from "../components/datasink/WorkflowStatusPanel.js";
-import le from "../components/datasink/ExportDataSinkDialog.js";
-import ue from "../components/datasink/ImportDataGuideDialog.js";
-import { memo as s, useCallback as c, useEffect as de, useState as l } from "react";
-import { useParams as u } from "react-router";
-import { AccessDenied as fe, PermissionButton as d } from "@burdenoff/fe-libs/shared/components";
-import { usePermissions as pe } from "@burdenoff/fe-libs/shared/providers/shell";
-import { AlertCircle as me, ArrowLeft as f, Code as he, Database as p, Download as ge, Edit as _e, Eye as ve, EyeOff as ye, Grid3X3 as be, Loader2 as m, RefreshCw as xe, Trash2 as Se, Upload as h } from "lucide-react";
-import { Button as g, Card as Ce, CardContent as _, CardHeader as v, CardTitle as y, GlassCard as we, IllustratedEmptyState as Te, NextSteps as Ee, PagePurpose as De } from "@burdenoff/fe-libs/ui";
-import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
-import { formatDistanceToNow as C } from "date-fns";
+import { isNative as a, nativeConfirm as ie, nativeImpact as ae, nativeNotify as o } from "../../utils/nativeBridge.js";
+import oe from "../hooks/useDataSinkSubscription.js";
+import se from "../components/datasink/DataSinkDataViewer.js";
+import ce from "../components/datasink/LinkedWorkflowsPanel.js";
+import s from "../components/datasink/LinkedParsersPanel.js";
+import le from "../components/datasink/WorkflowStatusPanel.js";
+import ue from "../components/datasink/ExportDataSinkDialog.js";
+import de from "../components/datasink/ImportDataGuideDialog.js";
+import { memo as c, useCallback as l, useEffect as fe, useState as u } from "react";
+import { useParams as pe } from "react-router";
+import { AccessDenied as me, PermissionButton as d } from "@burdenoff/fe-libs/shared/components";
+import { usePermissions as he } from "@burdenoff/fe-libs/shared/providers/shell";
+import { AlertCircle as ge, ArrowLeft as f, Code as _e, Database as p, Download as ve, Edit as ye, Eye as be, EyeOff as xe, Grid3X3 as Se, Loader2 as m, RefreshCw as Ce, Trash2 as we, Upload as h } from "lucide-react";
+import { useI18n as Te } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Button as g, IllustratedEmptyState as Ee, NextSteps as De, PagePurpose as Oe } from "@burdenoff/fe-libs/ui";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import { formatDistanceToNow as b } from "date-fns";
 //#region src/bigconsole/pages/DataSinkViewPage.tsx
-var w = s(function() {
-	let { dataSinkId: s } = u(), w = t(), { hasPermission: Oe, isLoading: ke } = pe(), Ae = Oe(r.DATASINK_READ), [T, E] = l(!1), [D, O] = l(!1), [k, A] = l(!1), [je, j] = l(!1), [Me, M] = l(!1), [N, Ne] = l(null), [P, F] = l(!1), [I, L] = l("table"), [R, Pe] = l(100), [z, Fe] = l(0), [B, Ie] = l(null), [Le, Re] = l(!1), V = e((e) => s ? e.dataSinks.get(s) : void 0), { loading: ze, error: H, fetchDataSink: U, getDataSinkData: W, refreshDataSink: G, updateDataSink: K, deleteDataSink: q } = te({ skipFetch: !0 });
-	ie({
-		dataSinkId: s,
-		enabled: !!s
-	}), de(() => {
-		s && U(s);
-	}, [s, U]);
-	let J = c(() => {
-		w("/datasinks");
-	}, [w]), Be = c(() => {
-		w(`/datasinks/${s}/edit`);
-	}, [w, s]), Y = c(async () => {
-		if (s) {
+var x = "focus-visible:ring-inset focus-visible:ring-offset-0", S = c(function() {
+	let { dataSinkId: c } = pe(), S = t(), { t: C } = Te(), { hasPermission: ke, isLoading: w } = he(), Ae = ke(r.DATASINK_READ), [T, E] = u(!1), [D, O] = u(!1), [k, A] = u(!1), [je, j] = u(!1), [Me, M] = u(!1), [N, Ne] = u(null), [P, F] = u(!1), [I, L] = u("table"), [R, Pe] = u(100), [z, Fe] = u(0), [B, Ie] = u(null), [Le, Re] = u(!1), V = e((e) => c ? e.dataSinks.get(c) : void 0), { loading: ze, error: H, fetchDataSink: U, getDataSinkData: W, refreshDataSink: G, updateDataSink: K, deleteDataSink: q } = re({ skipFetch: !0 });
+	oe({
+		dataSinkId: c,
+		enabled: !!c
+	}), fe(() => {
+		c && U(c);
+	}, [c, U]);
+	let J = l(() => {
+		S("/datasinks");
+	}, [S]), Be = l(() => {
+		S(`/datasinks/${c}/edit`);
+	}, [S, c]), Y = l(async () => {
+		if (c) {
 			O(!0);
 			try {
-				await G({ id: s });
+				await G({ id: c });
 			} catch {} finally {
 				O(!1);
 			}
 		}
-	}, [s, G]), Ve = c(async () => {
-		if (!s) return;
-		let e = await ne({
-			title: "Delete DataSink?",
-			message: "Are you sure you want to delete this DataSink?",
-			okButtonTitle: "Delete",
-			cancelButtonTitle: "Cancel"
+	}, [c, G]), Ve = l(async () => {
+		if (!c) return;
+		let e = await ie({
+			title: C("bigconsole.dataSinks.view.deleteConfirmTitle", "Delete DataSink?"),
+			message: C("bigconsole.dataSinks.view.deleteConfirmMessage", "Are you sure you want to delete this DataSink?"),
+			okButtonTitle: C("bigconsole.dataSinks.view.delete", "Delete"),
+			cancelButtonTitle: C("bigconsole.dataSinks.view.cancel", "Cancel")
 		});
-		if (e === null ? window.confirm("Are you sure you want to delete this DataSink?") : e) {
-			re("medium"), A(!0);
+		if (e === null ? window.confirm(C("bigconsole.dataSinks.view.deleteConfirmMessage", "Are you sure you want to delete this DataSink?")) : e) {
+			ae("medium"), A(!0);
 			try {
-				await q(s), a() && o("success"), w("/datasinks");
+				await q(c), a() && o("success"), S("/datasinks");
 			} catch {
 				a() && o("error");
 			} finally {
@@ -63,14 +67,15 @@ var w = s(function() {
 			}
 		}
 	}, [
-		s,
+		c,
 		q,
-		w
-	]), X = c(async (e, t) => {
-		if (s) {
+		S,
+		C
+	]), X = l(async (e, t) => {
+		if (c) {
 			F(!0);
 			try {
-				let n = await W({ id: s }, {
+				let n = await W({ id: c }, {
 					limit: t,
 					offset: e
 				});
@@ -79,8 +84,8 @@ var w = s(function() {
 				F(!1);
 			}
 		}
-	}, [s, W]), Z = c(async () => {
-		if (s) {
+	}, [c, W]), Z = l(async () => {
+		if (c) {
 			if (T) {
 				E(!1);
 				return;
@@ -88,23 +93,23 @@ var w = s(function() {
 			await X(0, R), E(!0);
 		}
 	}, [
-		s,
+		c,
 		T,
 		X,
 		R
-	]), He = c((e) => {
+	]), He = l((e) => {
 		Pe(e), X(0, e);
-	}, [X]), Q = c(() => {
+	}, [X]), Q = l(() => {
 		j(!0);
-	}, []), Ue = c(() => {
+	}, []), Ue = l(() => {
 		j(!1);
-	}, []), $ = c(() => {
+	}, []), $ = l(() => {
 		M(!0);
-	}, []), We = c(() => {
+	}, []), We = l(() => {
 		M(!1);
-	}, []), Ge = c(() => {
-		M(!1), w(n());
-	}, [w]), Ke = c(async (e) => {
+	}, []), Ge = l(() => {
+		M(!1), S(te());
+	}, [S]), Ke = l(async (e) => {
 		if (!V || !await K({
 			id: V.id,
 			version: V.version,
@@ -120,342 +125,350 @@ var w = s(function() {
 		X,
 		R
 	]);
-	return ze && !V ? /* @__PURE__ */ x("div", {
-		className: "flex items-center justify-center min-h-[400px]",
-		children: /* @__PURE__ */ x(m, { className: "w-8 h-8 text-text-secondary animate-spin" })
-	}) : H && !V ? /* @__PURE__ */ x("div", {
-		className: "flex items-center justify-center min-h-[400px] p-card-padding",
-		children: /* @__PURE__ */ S("div", {
-			className: "text-center",
-			children: [
-				/* @__PURE__ */ x(me, { className: "w-12 h-12 text-status-error-text mx-auto mb-4" }),
-				/* @__PURE__ */ x("p", {
-					className: "text-status-error-text text-body-sm font-medium mb-2",
-					children: "Failed to load DataSink"
-				}),
-				/* @__PURE__ */ x("p", {
-					className: "text-text-tertiary text-body-xs mb-6",
-					children: H.message
-				}),
-				/* @__PURE__ */ S(g, {
-					onClick: J,
-					variant: "ghost",
-					size: "sm",
-					children: [/* @__PURE__ */ x(f, { className: "w-4 h-4 mr-2" }), "Go back"]
-				})
-			]
+	return ze && !V ? /* @__PURE__ */ v("div", {
+		className: "flex min-h-[240px] items-center justify-center p-card-padding",
+		children: /* @__PURE__ */ v(m, { className: "h-icon-lg w-icon-lg animate-spin text-text-secondary" })
+	}) : H && !V ? /* @__PURE__ */ v("div", {
+		className: "p-card-padding",
+		children: /* @__PURE__ */ v(n, {
+			tone: "danger",
+			headingLevel: 2,
+			title: C("bigconsole.dataSinks.view.loadError", "Failed to load DataSink"),
+			description: H.message,
+			icon: /* @__PURE__ */ v(ge, { className: "h-icon-sm w-icon-sm" }),
+			actions: /* @__PURE__ */ y(g, {
+				onClick: J,
+				variant: "secondary",
+				size: "sm",
+				children: [/* @__PURE__ */ v(f, { className: "w-4 h-4 mr-2" }), C("bigconsole.dataSinks.view.goBack", "Go back")]
+			})
 		})
-	}) : !ke && !Ae ? /* @__PURE__ */ x(fe, {
-		title: "Access Denied",
-		description: "You don't have permission to view this data sink."
-	}) : V ? /* @__PURE__ */ S("div", {
-		className: "p-card-padding space-y-6",
+	}) : !w && !Ae ? /* @__PURE__ */ v(me, {
+		title: C("bigconsole.dataSinks.view.accessDeniedTitle", "Access Denied"),
+		description: C("bigconsole.dataSinks.view.accessDeniedDescription", "You don't have permission to view this data sink.")
+	}) : V ? /* @__PURE__ */ y("div", {
+		className: "min-w-0 p-card-padding",
 		children: [
-			/* @__PURE__ */ S("div", {
-				className: "flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4",
-				children: [/* @__PURE__ */ S("div", {
-					className: "flex-1",
+			/* @__PURE__ */ y("header", {
+				className: "mb-section-gap flex flex-col gap-form-gap sm:flex-row sm:items-start sm:justify-between",
+				children: [/* @__PURE__ */ y("div", {
+					className: "min-w-0 flex-1",
 					children: [
-						/* @__PURE__ */ S(g, {
+						/* @__PURE__ */ y(g, {
 							onClick: J,
 							variant: "ghost",
 							size: "sm",
 							className: "mb-4",
-							children: [/* @__PURE__ */ x(f, { className: "w-4 h-4 mr-2" }), "Back to DataSinks"]
+							children: [/* @__PURE__ */ v(f, { className: "w-4 h-4 mr-2" }), C("bigconsole.dataSinks.view.backToDataSinks", "Back to DataSinks")]
 						}),
-						/* @__PURE__ */ S("div", {
-							className: "flex items-center gap-2 flex-wrap",
-							children: [/* @__PURE__ */ x("h1", {
-								className: "text-heading-h1 font-bold text-text-primary",
-								children: V.name || "Untitled"
-							}), /* @__PURE__ */ x(i, { status: V.status })]
+						/* @__PURE__ */ y("div", {
+							className: "flex flex-wrap items-center gap-2",
+							children: [/* @__PURE__ */ v("h1", {
+								className: "text-2xl font-bold text-text-primary",
+								children: V.name || C("bigconsole.dataSinks.view.untitled", "Untitled")
+							}), /* @__PURE__ */ v(i, { status: V.status })]
 						}),
-						/* @__PURE__ */ x("p", {
-							className: "text-body-sm text-text-tertiary font-mono mt-1",
+						/* @__PURE__ */ v("p", {
+							className: "mt-1 break-all font-mono text-sm text-text-muted",
 							children: V.key
 						}),
-						V.description && /* @__PURE__ */ x("p", {
-							className: "text-body-sm text-text-secondary mt-2",
+						V.description && /* @__PURE__ */ v("p", {
+							className: "mt-2 text-sm text-text-secondary",
 							children: V.description
 						})
 					]
-				}), /* @__PURE__ */ S("div", {
-					className: "flex items-center gap-2 flex-wrap",
+				}), /* @__PURE__ */ y("div", {
+					className: "flex flex-wrap items-center gap-2",
 					children: [
-						/* @__PURE__ */ x(d, {
+						/* @__PURE__ */ v(d, {
 							permission: r.DATASINK_EXECUTE,
 							deniedBehavior: "disable",
-							children: /* @__PURE__ */ S(g, {
+							children: /* @__PURE__ */ y(g, {
 								onClick: Y,
 								disabled: D,
-								variant: "secondary",
+								variant: "default",
 								size: "default",
-								children: [/* @__PURE__ */ x(xe, { className: `w-4 h-4 mr-2 ${D ? "animate-spin" : ""}` }), D ? "Refreshing..." : "Refresh"]
+								children: [/* @__PURE__ */ v(Ce, { className: `w-4 h-4 mr-2 ${D ? "animate-spin" : ""}` }), D ? C("bigconsole.dataSinks.view.refreshing", "Refreshing...") : C("bigconsole.dataSinks.view.refresh", "Refresh")]
 							})
 						}),
-						/* @__PURE__ */ S(g, {
+						/* @__PURE__ */ y(g, {
 							onClick: $,
 							variant: "secondary",
 							size: "default",
-							children: [/* @__PURE__ */ x(h, { className: "w-4 h-4 mr-2" }), "Import Data"]
+							children: [/* @__PURE__ */ v(h, { className: "w-4 h-4 mr-2" }), C("bigconsole.dataSinks.view.importData", "Import Data")]
 						}),
-						/* @__PURE__ */ S(g, {
+						/* @__PURE__ */ y(g, {
 							onClick: Q,
 							variant: "secondary",
 							size: "default",
-							children: [/* @__PURE__ */ x(ge, { className: "w-4 h-4 mr-2" }), "Export"]
+							children: [/* @__PURE__ */ v(ve, { className: "w-4 h-4 mr-2" }), C("bigconsole.dataSinks.view.export", "Export")]
 						}),
-						/* @__PURE__ */ x(d, {
+						/* @__PURE__ */ v(d, {
 							permission: r.DATASINK_UPDATE,
 							deniedBehavior: "disable",
-							children: /* @__PURE__ */ S(g, {
+							children: /* @__PURE__ */ y(g, {
 								onClick: Be,
 								variant: "secondary",
 								size: "default",
-								children: [/* @__PURE__ */ x(_e, { className: "w-4 h-4 mr-2" }), "Edit"]
+								children: [/* @__PURE__ */ v(ye, { className: "w-4 h-4 mr-2" }), C("bigconsole.dataSinks.view.edit", "Edit")]
 							})
 						}),
-						/* @__PURE__ */ x(d, {
+						/* @__PURE__ */ v(d, {
 							permission: r.DATASINK_DELETE,
 							deniedBehavior: "hide",
-							children: /* @__PURE__ */ S(g, {
+							children: /* @__PURE__ */ y(g, {
 								onClick: Ve,
 								disabled: k,
 								variant: "destructive",
 								size: "default",
-								children: [/* @__PURE__ */ x(Se, { className: "w-4 h-4 mr-2" }), k ? "Deleting..." : "Delete"]
+								children: [/* @__PURE__ */ v(we, { className: "w-4 h-4 mr-2" }), k ? C("bigconsole.dataSinks.view.deleting", "Deleting...") : C("bigconsole.dataSinks.view.delete", "Delete")]
 							})
 						})
 					]
 				})]
 			}),
-			/* @__PURE__ */ x(De, { children: "A data sink is a structured store that holds your processed data and serves it to dashboards. From here you can inspect its schema and stats, preview the cached rows, refresh it from its linked workflow, or export it." }),
-			/* @__PURE__ */ x(Ee, {
+			/* @__PURE__ */ v(Oe, {
+				className: "mb-section-gap",
+				children: C("bigconsole.dataSinks.view.pagePurpose", "A data sink is a structured store that holds your processed data and serves it to dashboards. From here you can inspect its schema and stats, preview the cached rows, refresh it from its linked workflow, or export it.")
+			}),
+			/* @__PURE__ */ v(De, {
 				storageKey: "bigconsole-datasink-view",
 				steps: [
 					{
 						id: "preview",
-						label: "Preview the data",
-						description: "Open the cached rows to confirm the sink holds what you expect.",
+						label: C("bigconsole.dataSinks.view.nextSteps.previewLabel", "Preview the data"),
+						description: C("bigconsole.dataSinks.view.nextSteps.previewDescription", "Open the cached rows to confirm the sink holds what you expect."),
 						onClick: Z
 					},
 					{
 						id: "refresh",
-						label: "Refresh from source",
-						description: "Re-run the linked workflow to pull the latest data.",
+						label: C("bigconsole.dataSinks.view.nextSteps.refreshLabel", "Refresh from source"),
+						description: C("bigconsole.dataSinks.view.nextSteps.refreshDescription", "Re-run the linked workflow to pull the latest data."),
 						onClick: Y
 					},
 					{
 						id: "build-dashboard",
-						label: "Visualize it on a dashboard",
-						description: "Add widgets that query this sink to see your data live.",
-						onClick: () => w("/dashboards")
+						label: C("bigconsole.dataSinks.view.nextSteps.dashboardLabel", "Visualize it on a dashboard"),
+						description: C("bigconsole.dataSinks.view.nextSteps.dashboardDescription", "Add widgets that query this sink to see your data live."),
+						onClick: () => S("/dashboards")
 					},
 					{
 						id: "export",
-						label: "Export the data",
-						description: "Download the contents for use elsewhere.",
+						label: C("bigconsole.dataSinks.view.nextSteps.exportLabel", "Export the data"),
+						description: C("bigconsole.dataSinks.view.nextSteps.exportDescription", "Download the contents for use elsewhere."),
 						onClick: Q
 					}
 				]
 			}),
-			/* @__PURE__ */ S("div", {
-				className: "grid gap-6 md:grid-cols-2",
-				children: [
-					/* @__PURE__ */ S(we, {
-						treatment: "glass",
-						glow: !0,
-						children: [/* @__PURE__ */ x(v, { children: /* @__PURE__ */ x(y, { children: "Details" }) }), /* @__PURE__ */ x(_, { children: /* @__PURE__ */ S("dl", {
-							className: "space-y-4 text-body-sm",
+			/* @__PURE__ */ y(ee, {
+				className: "mt-section-gap",
+				children: [/* @__PURE__ */ y("div", {
+					className: "grid min-w-0 gap-section-gap md:grid-cols-2",
+					children: [
+						/* @__PURE__ */ v(n, {
+							headingLevel: 2,
+							title: C("bigconsole.dataSinks.view.details", "Details"),
+							description: "Cache, refresh and storage settings for this sink.",
+							children: /* @__PURE__ */ y("dl", {
+								className: "divide-y divide-[var(--color-border-subtle)] text-sm",
+								children: [
+									/* @__PURE__ */ y("div", {
+										className: "flex flex-wrap items-center justify-between gap-x-form-gap gap-y-1 py-2 first:pt-0",
+										children: [/* @__PURE__ */ v("dt", {
+											className: "min-w-0 text-text-secondary",
+											children: C("bigconsole.dataSinks.view.status", "Status")
+										}), /* @__PURE__ */ v("dd", { children: /* @__PURE__ */ v(i, {
+											status: V.status,
+											size: "sm"
+										}) })]
+									}),
+									/* @__PURE__ */ y("div", {
+										className: "flex flex-wrap items-center justify-between gap-x-form-gap gap-y-1 py-2",
+										children: [/* @__PURE__ */ v("dt", {
+											className: "min-w-0 text-text-secondary",
+											children: C("bigconsole.dataSinks.view.cacheTtl", "Cache TTL")
+										}), /* @__PURE__ */ v("dd", {
+											className: "font-medium text-text-primary",
+											children: V.ttl ? `${V.ttl}s` : C("bigconsole.dataSinks.view.none", "None")
+										})]
+									}),
+									/* @__PURE__ */ y("div", {
+										className: "flex flex-wrap items-center justify-between gap-x-form-gap gap-y-1 py-2",
+										children: [/* @__PURE__ */ v("dt", {
+											className: "min-w-0 text-text-secondary",
+											children: C("bigconsole.dataSinks.view.refreshType", "Refresh Type")
+										}), /* @__PURE__ */ v("dd", {
+											className: "font-medium capitalize text-text-primary",
+											children: V.refresh?.type || C("bigconsole.dataSinks.view.manual", "Manual")
+										})]
+									}),
+									/* @__PURE__ */ y("div", {
+										className: "flex flex-wrap items-center justify-between gap-x-form-gap gap-y-1 py-2",
+										children: [/* @__PURE__ */ v("dt", {
+											className: "min-w-0 text-text-secondary",
+											children: C("bigconsole.dataSinks.view.size", "Size")
+										}), /* @__PURE__ */ v("dd", {
+											className: "font-medium text-text-primary",
+											children: V.sizeBytes ? `${(V.sizeBytes / 1024).toFixed(2)} KB` : "0 KB"
+										})]
+									}),
+									/* @__PURE__ */ y("div", {
+										className: "flex flex-wrap items-center justify-between gap-x-form-gap gap-y-1 py-2",
+										children: [/* @__PURE__ */ v("dt", {
+											className: "min-w-0 text-text-secondary",
+											children: C("bigconsole.dataSinks.view.version", "Version")
+										}), /* @__PURE__ */ v("dd", {
+											className: "font-medium text-text-primary",
+											children: V.version || 1
+										})]
+									}),
+									/* @__PURE__ */ y("div", {
+										className: "flex flex-wrap items-center justify-between gap-x-form-gap gap-y-1 py-2",
+										children: [/* @__PURE__ */ v("dt", {
+											className: "min-w-0 text-text-secondary",
+											children: C("bigconsole.dataSinks.view.lastRefreshed", "Last Refreshed")
+										}), /* @__PURE__ */ v("dd", {
+											className: "font-medium text-text-primary",
+											children: V.lastRefreshedAt ? b(new Date(V.lastRefreshedAt), { addSuffix: !0 }) : C("bigconsole.dataSinks.view.never", "Never")
+										})]
+									}),
+									/* @__PURE__ */ y("div", {
+										className: "flex flex-wrap items-center justify-between gap-x-form-gap gap-y-1 py-2 last:pb-0",
+										children: [/* @__PURE__ */ v("dt", {
+											className: "min-w-0 text-text-secondary",
+											children: C("bigconsole.dataSinks.view.created", "Created")
+										}), /* @__PURE__ */ v("dd", {
+											className: "font-medium text-text-primary",
+											children: b(new Date(V.createdAt), { addSuffix: !0 })
+										})]
+									})
+								]
+							})
+						}),
+						V.fluidGridsWorkflowId && /* @__PURE__ */ v(le, {
+							workflowId: V.fluidGridsWorkflowId,
+							executionId: V.fluidGridsWorkflowExecutionId || void 0,
+							lastRefreshedAt: V.lastRefreshedAt || void 0,
+							setupState: V.setupState,
+							status: V.status,
+							onRerunWorkflow: Y,
+							disabled: D,
+							isRerunning: D
+						}),
+						/* @__PURE__ */ v(ce, { workflowLinks: V.workflowLinks }),
+						/* @__PURE__ */ v(s, { dataSinkKey: V.key })
+					]
+				}), /* @__PURE__ */ y(n, {
+					emphasis: "primary",
+					headingLevel: 2,
+					title: C("bigconsole.dataSinks.view.dataPreview", "Data Preview"),
+					description: "The rows this sink is currently serving to dashboards.",
+					icon: /* @__PURE__ */ v(p, { className: "h-icon-sm w-icon-sm" }),
+					actions: /* @__PURE__ */ y(_, { children: [T && /* @__PURE__ */ y("div", {
+						role: "group",
+						"aria-label": C("bigconsole.dataSinks.view.dataPreview", "Data Preview"),
+						className: "flex items-center overflow-hidden rounded-button border border-[var(--color-border-default)]",
+						children: [/* @__PURE__ */ v("button", {
+							type: "button",
+							onClick: () => L("table"),
+							"aria-pressed": I === "table",
+							className: `flex h-control-md w-[var(--size-controlHeight-md)] items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${x} ${I === "table" ? "bg-bg-sunken text-text-primary" : "text-text-secondary hover:text-text-primary"}`,
+							title: C("bigconsole.dataSinks.view.tableView", "Table view"),
+							children: /* @__PURE__ */ v(Se, { className: "w-4 h-4" })
+						}), /* @__PURE__ */ v("button", {
+							type: "button",
+							onClick: () => L("json"),
+							"aria-pressed": I === "json",
+							className: `flex h-control-md w-[var(--size-controlHeight-md)] items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface ${x} ${I === "json" ? "bg-bg-sunken text-text-primary" : "text-text-secondary hover:text-text-primary"}`,
+							title: C("bigconsole.dataSinks.view.jsonView", "JSON view"),
+							children: /* @__PURE__ */ v(_e, { className: "w-4 h-4" })
+						})]
+					}), /* @__PURE__ */ v(g, {
+						onClick: Z,
+						disabled: P,
+						variant: T ? "secondary" : "default",
+						size: "sm",
+						children: P ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(m, { className: "w-4 h-4 mr-2 animate-spin" }), C("bigconsole.dataSinks.view.loading", "Loading...")] }) : T ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(xe, { className: "w-4 h-4 mr-2" }), C("bigconsole.dataSinks.view.hideData", "Hide Data")] }) : /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(be, { className: "w-4 h-4 mr-2" }), C("bigconsole.dataSinks.view.showData", "Show Data")] })
+					})] }),
+					children: [T && N && /* @__PURE__ */ y(_, { children: [v(I === "table" ? ne : se, {
+						data: N,
+						maxHeight: "400px"
+					}), B !== null && /* @__PURE__ */ y("div", {
+						className: "mt-form-gap flex flex-wrap items-center justify-between gap-form-gap border-t border-[var(--color-border-subtle)] pt-form-gap",
+						children: [/* @__PURE__ */ y("label", {
+							className: "flex items-center gap-2 text-sm text-text-secondary",
+							children: [/* @__PURE__ */ v("span", { children: C("bigconsole.dataSinks.view.rowsPerPage", "Rows per page") }), /* @__PURE__ */ v("select", {
+								"aria-label": C("bigconsole.dataSinks.view.rowsPerPage", "Rows per page"),
+								className: "h-control-md rounded-input border border-[var(--color-border-default)] bg-bg-canvas px-2 text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+								value: R,
+								onChange: (e) => He(Number(e.target.value)),
+								children: [
+									100,
+									500,
+									1e3
+								].map((e) => /* @__PURE__ */ v("option", {
+									value: e,
+									children: e
+								}, e))
+							})]
+						}), /* @__PURE__ */ y("div", {
+							className: "flex flex-wrap items-center gap-control-gap text-sm text-text-secondary",
 							children: [
-								/* @__PURE__ */ S("div", {
-									className: "flex justify-between items-center",
-									children: [/* @__PURE__ */ x("dt", {
-										className: "text-text-secondary",
-										children: "Status"
-									}), /* @__PURE__ */ x("dd", { children: /* @__PURE__ */ x(i, { status: V.status }) })]
-								}),
-								/* @__PURE__ */ S("div", {
-									className: "flex justify-between items-center",
-									children: [/* @__PURE__ */ x("dt", {
-										className: "text-text-secondary",
-										children: "Cache TTL"
-									}), /* @__PURE__ */ x("dd", {
-										className: "text-text-primary font-medium",
-										children: V.ttl ? `${V.ttl}s` : "None"
-									})]
-								}),
-								/* @__PURE__ */ S("div", {
-									className: "flex justify-between items-center",
-									children: [/* @__PURE__ */ x("dt", {
-										className: "text-text-secondary",
-										children: "Refresh Type"
-									}), /* @__PURE__ */ x("dd", {
-										className: "text-text-primary font-medium capitalize",
-										children: V.refresh?.type || "Manual"
-									})]
+								/* @__PURE__ */ v("span", { children: B === 0 ? C("bigconsole.dataSinks.view.zeroRows", "0 rows") : C("bigconsole.dataSinks.view.rowRange", "{{start}}–{{end}} of {{total}}", {
+									start: z + 1,
+									end: Math.min(z + R, B),
+									total: B
+								}) }),
+								/* @__PURE__ */ v(g, {
+									variant: "secondary",
+									size: "sm",
+									disabled: z === 0 || P,
+									onClick: () => void X(Math.max(0, z - R), R),
+									children: C("bigconsole.dataSinks.view.previous", "Previous")
 								}),
-								/* @__PURE__ */ S("div", {
-									className: "flex justify-between items-center",
-									children: [/* @__PURE__ */ x("dt", {
-										className: "text-text-secondary",
-										children: "Size"
-									}), /* @__PURE__ */ x("dd", {
-										className: "text-text-primary font-medium",
-										children: V.sizeBytes ? `${(V.sizeBytes / 1024).toFixed(2)} KB` : "0 KB"
-									})]
-								}),
-								/* @__PURE__ */ S("div", {
-									className: "flex justify-between items-center",
-									children: [/* @__PURE__ */ x("dt", {
-										className: "text-text-secondary",
-										children: "Version"
-									}), /* @__PURE__ */ x("dd", {
-										className: "text-text-primary font-medium",
-										children: V.version || 1
-									})]
-								}),
-								/* @__PURE__ */ S("div", {
-									className: "flex justify-between items-center",
-									children: [/* @__PURE__ */ x("dt", {
-										className: "text-text-secondary",
-										children: "Last Refreshed"
-									}), /* @__PURE__ */ x("dd", {
-										className: "text-text-primary font-medium",
-										children: V.lastRefreshedAt ? C(new Date(V.lastRefreshedAt), { addSuffix: !0 }) : "Never"
-									})]
-								}),
-								/* @__PURE__ */ S("div", {
-									className: "flex justify-between items-center",
-									children: [/* @__PURE__ */ x("dt", {
-										className: "text-text-secondary",
-										children: "Created"
-									}), /* @__PURE__ */ x("dd", {
-										className: "text-text-primary font-medium",
-										children: C(new Date(V.createdAt), { addSuffix: !0 })
-									})]
+								/* @__PURE__ */ v(g, {
+									variant: "secondary",
+									size: "sm",
+									disabled: !Le || P,
+									onClick: () => void X(z + R, R),
+									children: C("bigconsole.dataSinks.view.next", "Next")
 								})
 							]
-						}) })]
-					}),
-					V.fluidGridsWorkflowId && /* @__PURE__ */ x(ce, {
-						workflowId: V.fluidGridsWorkflowId,
-						executionId: V.fluidGridsWorkflowExecutionId || void 0,
-						lastRefreshedAt: V.lastRefreshedAt || void 0,
-						setupState: V.setupState,
-						status: V.status,
-						onRerunWorkflow: Y,
-						disabled: D,
-						isRerunning: D
-					}),
-					/* @__PURE__ */ x(oe, { workflowLinks: V.workflowLinks }),
-					/* @__PURE__ */ x(se, { dataSinkKey: V.key })
-				]
-			}),
-			/* @__PURE__ */ S(Ce, { children: [
-				/* @__PURE__ */ S(v, {
-					className: "flex flex-row items-center justify-between space-y-0",
-					children: [/* @__PURE__ */ S(y, {
-						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ x(p, { className: "w-4 h-4 text-text-secondary" }), "Data Preview"]
-					}), /* @__PURE__ */ S("div", {
-						className: "flex items-center gap-2",
-						children: [T && /* @__PURE__ */ S("div", {
-							className: "flex items-center border border-border-default rounded-md overflow-hidden",
-							children: [/* @__PURE__ */ x("button", {
-								type: "button",
-								onClick: () => L("table"),
-								className: `p-1.5 ${I === "table" ? "bg-bg-sunken text-text-primary" : "text-text-secondary hover:text-text-primary"}`,
-								title: "Table view",
-								children: /* @__PURE__ */ x(be, { className: "w-4 h-4" })
-							}), /* @__PURE__ */ x("button", {
-								type: "button",
-								onClick: () => L("json"),
-								className: `p-1.5 ${I === "json" ? "bg-bg-sunken text-text-primary" : "text-text-secondary hover:text-text-primary"}`,
-								title: "JSON view",
-								children: /* @__PURE__ */ x(he, { className: "w-4 h-4" })
-							})]
-						}), /* @__PURE__ */ x(g, {
-							onClick: Z,
-							disabled: P,
-							variant: T ? "secondary" : "default",
-							size: "sm",
-							children: P ? /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x(m, { className: "w-4 h-4 mr-2 animate-spin" }), "Loading..."] }) : T ? /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x(ye, { className: "w-4 h-4 mr-2" }), "Hide Data"] }) : /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x(ve, { className: "w-4 h-4 mr-2" }), "Show Data"] })
-						})]
-					})]
-				}),
-				T && N && /* @__PURE__ */ S(_, { children: [x(I === "table" ? ee : ae, {
-					data: N,
-					maxHeight: "400px"
-				}), B !== null && /* @__PURE__ */ S("div", {
-					className: "flex items-center justify-between gap-4 mt-4 pt-4 border-t border-border-subtle",
-					children: [/* @__PURE__ */ S("div", {
-						className: "flex items-center gap-2 text-body-sm text-text-secondary",
-						children: [/* @__PURE__ */ x("span", { children: "Rows per page" }), /* @__PURE__ */ x("select", {
-							"aria-label": "Rows per page",
-							className: "bg-bg-canvas border border-border-default rounded px-2 py-0.5 text-text-primary",
-							value: R,
-							onChange: (e) => He(Number(e.target.value)),
-							children: [
-								100,
-								500,
-								1e3
-							].map((e) => /* @__PURE__ */ x("option", {
-								value: e,
-								children: e
-							}, e))
 						})]
-					}), /* @__PURE__ */ S("div", {
-						className: "flex items-center gap-4 text-body-sm text-text-secondary",
+					})] }), !T && (V.data && Object.keys(V.data).length > 0 ? /* @__PURE__ */ y("p", {
+						className: "flex items-center gap-icon-gap text-sm text-text-secondary",
+						children: [/* @__PURE__ */ v(p, {
+							"aria-hidden": "true",
+							className: "h-icon-sm w-icon-sm shrink-0 text-text-muted"
+						}), C("bigconsole.dataSinks.view.showDataHint", "Click \"Show Data\" to preview the cached data.")]
+					}) : /* @__PURE__ */ y("div", {
+						className: "flex flex-col items-center gap-form-gap py-form-gap text-center",
 						children: [
-							/* @__PURE__ */ x("span", { children: B === 0 ? "0 rows" : `${z + 1}–${Math.min(z + R, B)} of ${B}` }),
-							/* @__PURE__ */ x(g, {
-								variant: "secondary",
-								size: "sm",
-								disabled: z === 0 || P,
-								onClick: () => void X(Math.max(0, z - R), R),
-								children: "Previous"
+							/* @__PURE__ */ v(p, {
+								"aria-hidden": "true",
+								className: "h-icon-lg w-icon-lg text-text-muted"
 							}),
-							/* @__PURE__ */ x(g, {
-								variant: "secondary",
+							/* @__PURE__ */ v("p", {
+								className: "text-sm text-text-secondary",
+								children: C("bigconsole.dataSinks.view.noDataYet", "This data sink has no data yet. Upload a CSV or build a workflow to import data.")
+							}),
+							/* @__PURE__ */ y(g, {
+								onClick: $,
+								variant: "default",
 								size: "sm",
-								disabled: !Le || P,
-								onClick: () => void X(z + R, R),
-								children: "Next"
+								children: [/* @__PURE__ */ v(h, { className: "w-4 h-4 mr-2" }), C("bigconsole.dataSinks.view.importData", "Import Data")]
 							})
 						]
-					})]
-				})] }),
-				!T && (V.data && Object.keys(V.data).length > 0 ? /* @__PURE__ */ S(_, {
-					className: "text-center p-8",
-					children: [/* @__PURE__ */ x(p, { className: "w-10 h-10 text-text-tertiary mx-auto mb-4" }), /* @__PURE__ */ x("p", {
-						className: "text-body-sm text-text-secondary",
-						children: "Click \"Show Data\" to preview the cached data."
-					})]
-				}) : /* @__PURE__ */ S(_, {
-					className: "text-center p-8",
-					children: [
-						/* @__PURE__ */ x(p, { className: "w-10 h-10 text-text-tertiary mx-auto mb-4" }),
-						/* @__PURE__ */ x("p", {
-							className: "text-body-sm text-text-secondary mb-4",
-							children: "This data sink has no data yet. Upload a CSV or build a workflow to import data."
-						}),
-						/* @__PURE__ */ S(g, {
-							onClick: $,
-							variant: "default",
-							size: "sm",
-							children: [/* @__PURE__ */ x(h, { className: "w-4 h-4 mr-2" }), "Import Data"]
-						})
-					]
-				}))
-			] }),
-			/* @__PURE__ */ x(le, {
+					}))]
+				})]
+			}),
+			/* @__PURE__ */ v(ue, {
 				isOpen: je,
-				dataSinkId: s || null,
+				dataSinkId: c || null,
 				dataSinkName: V.name || V.key,
 				onClose: Ue
 			}),
-			/* @__PURE__ */ x(ue, {
+			/* @__PURE__ */ v(de, {
 				isOpen: Me,
 				dataSinkName: V.name || V.key,
 				hasExistingData: !!(V.data && Object.keys(V.data).length > 0),
@@ -464,22 +477,22 @@ var w = s(function() {
 				onImportCsv: Ke
 			})
 		]
-	}) : /* @__PURE__ */ x("div", {
-		className: "flex items-center justify-center min-h-[400px] p-card-padding",
-		children: /* @__PURE__ */ x(Te, {
+	}) : /* @__PURE__ */ v("div", {
+		className: "flex min-h-[240px] items-center justify-center p-card-padding",
+		children: /* @__PURE__ */ v(Ee, {
 			illustration: "empty-data",
-			title: "DataSink not found",
-			description: "The DataSink you're looking for doesn't exist or has been deleted.",
-			action: /* @__PURE__ */ S(g, {
+			title: C("bigconsole.dataSinks.view.notFoundTitle", "DataSink not found"),
+			description: C("bigconsole.dataSinks.view.notFoundDescription", "The DataSink you're looking for doesn't exist or has been deleted."),
+			action: /* @__PURE__ */ y(g, {
 				onClick: J,
 				variant: "default",
 				size: "default",
-				children: [/* @__PURE__ */ x(f, { className: "w-4 h-4 mr-2" }), "Go back to DataSinks"]
+				children: [/* @__PURE__ */ v(f, { className: "w-4 h-4 mr-2" }), C("bigconsole.dataSinks.view.goBackToDataSinks", "Go back to DataSinks")]
 			})
 		})
 	});
 });
 //#endregion
-export { w as DataSinkViewPage, w as default };
+export { S as DataSinkViewPage, S as default };
 
 //# sourceMappingURL=DataSinkViewPage.js.map