@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/components/datasink/DataSinkStatusBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataSinkStatusBadge.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/DataSinkStatusBadge.tsx"],"sourcesContent":["/**\n * DataSink Status Badge\n *\n * Display badge showing DataSink status with icon and color coding.\n */\n\nimport { memo, type ReactNode } from 'react';\nimport type { DataSinkStatus } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface DataSinkStatusBadgeProps {\n  /** DataSink status */\n  status: DataSinkStatus;\n  /** Badge size */\n  size?: 'sm' | 'md' | 'lg';\n  /** Whether to show icon */\n  showIcon?: boolean;\n}\n\ninterface StatusConfig {\n  bg: string;\n  text: string;\n  icon: ReactNode;\n  label: string;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkStatusBadge = memo(function DataSinkStatusBadge({\n  status,\n  size = 'md',\n  showIcon = true,\n}: DataSinkStatusBadgeProps) {\n  const sizeClasses: Record<string, string> = {\n    sm: 'px-2 py-0.5 text-xs',\n    md: 'px-2.5 py-1 text-sm',\n    lg: 'px-3 py-1.5 text-base',\n  };\n\n  const iconSizes: Record<string, string> = {\n    sm: 'w-3 h-3',\n    md: 'w-4 h-4',\n    lg: 'w-5 h-5',\n  };\n\n  const statusConfigs: Record<DataSinkStatus, StatusConfig> = {\n    ready: {\n      bg: 'bg-status-success-bg/10',\n      text: 'text-status-success-text',\n      icon: (\n        <svg className={iconSizes[size]} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 13l4 4L19 7\" />\n        </svg>\n      ),\n      label: 'Ready',\n    },\n    error: {\n      bg: 'bg-status-error-bg/10',\n      text: 'text-status-error-text',\n      icon: (\n        <svg className={iconSizes[size]} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n          />\n        </svg>\n      ),\n      label: 'Error',\n    },\n    stale: {\n      bg: 'bg-status-warning-bg/10',\n      text: 'text-status-warning-text',\n      icon: (\n        <svg className={iconSizes[size]} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\n          />\n        </svg>\n      ),\n      label: 'Stale',\n    },\n    refreshing: {\n      bg: 'bg-action-primary-bg/10',\n      text: 'text-action-primary-bg',\n      icon: (\n        <svg className={`${iconSizes[size]} animate-spin`} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\n          />\n        </svg>\n      ),\n      label: 'Refreshing',\n    },\n  };\n\n  const config = statusConfigs[status];\n\n  if (!config) {\n    return null;\n  }\n\n  return (\n    <span\n      className={`\n        inline-flex items-center gap-1.5\n        ${sizeClasses[size]}\n        ${config.bg}\n        ${config.text}\n        rounded-full\n        font-medium\n      `}\n    >\n      {showIcon && config.icon}\n      <span>{config.label}</span>\n    </span>\n  );\n});\n\nexport default DataSinkStatusBadge;\n"],"mappings":";;;AAiCA,IAAa,IAAsB,EAAK,SAA6B,EACnE,WACA,UAAO,MACP,cAAW,MACgB;CAC3B,IAAM,IAAsC;EAC1C,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EAEK,IAAoC;EACxC,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EA4DK,IA1DsD;EAC1D,OAAO;GACL,IAAI;GACJ,MAAM;GACN,MACE,kBAAC,OAAD;IAAK,WAAW,EAAU;IAAO,MAAK;IAAO,QAAO;IAAe,SAAQ;cACzE,kBAAC,QAAD;KAAM,eAAc;KAAQ,gBAAe;KAAQ,aAAa;KAAG,GAAE;KAAmB,CAAA;IACpF,CAAA;GAER,OAAO;GACR;EACD,OAAO;GACL,IAAI;GACJ,MAAM;GACN,MACE,kBAAC,OAAD;IAAK,WAAW,EAAU;IAAO,MAAK;IAAO,QAAO;IAAe,SAAQ;cACzE,kBAAC,QAAD;KACE,eAAc;KACd,gBAAe;KACf,aAAa;KACb,GAAE;KACF,CAAA;IACE,CAAA;GAER,OAAO;GACR;EACD,OAAO;GACL,IAAI;GACJ,MAAM;GACN,MACE,kBAAC,OAAD;IAAK,WAAW,EAAU;IAAO,MAAK;IAAO,QAAO;IAAe,SAAQ;cACzE,kBAAC,QAAD;KACE,eAAc;KACd,gBAAe;KACf,aAAa;KACb,GAAE;KACF,CAAA;IACE,CAAA;GAER,OAAO;GACR;EACD,YAAY;GACV,IAAI;GACJ,MAAM;GACN,MACE,kBAAC,OAAD;IAAK,WAAW,GAAG,EAAU,GAAM;IAAgB,MAAK;IAAO,QAAO;IAAe,SAAQ;cAC3F,kBAAC,QAAD;KACE,eAAc;KACd,gBAAe;KACf,aAAa;KACb,GAAE;KACF,CAAA;IACE,CAAA;GAER,OAAO;GACR;EACF,CAE4B;AAM7B,QAJK,IAKH,kBAAC,QAAD;EACE,WAAW;;UAEP,EAAY,GAAM;UAClB,EAAO,GAAG;UACV,EAAO,KAAK;;;;YALlB,CAUG,KAAY,EAAO,MACpB,kBAAC,QAAD,EAAA,UAAO,EAAO,OAAa,CAAA,CACtB;MAhBA;EAkBT"}
+{"version":3,"file":"DataSinkStatusBadge.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/DataSinkStatusBadge.tsx"],"sourcesContent":["/**\n * DataSink Status Badge\n *\n * Display badge showing DataSink status with icon and color coding.\n */\n\nimport { memo, type ReactNode } from 'react';\nimport type { DataSinkStatus } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface DataSinkStatusBadgeProps {\n  /** DataSink status */\n  status: DataSinkStatus;\n  /** Badge size */\n  size?: 'sm' | 'md' | 'lg';\n  /** Whether to show icon */\n  showIcon?: boolean;\n}\n\ninterface StatusConfig {\n  bg: string;\n  text: string;\n  icon: ReactNode;\n  label: string;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkStatusBadge = memo(function DataSinkStatusBadge({\n  status,\n  size = 'md',\n  showIcon = true,\n}: DataSinkStatusBadgeProps) {\n  const sizeClasses: Record<string, string> = {\n    sm: 'px-2 py-0.5 text-xs',\n    md: 'px-2.5 py-1 text-sm',\n    lg: 'px-3 py-1.5 text-base',\n  };\n\n  const iconSizes: Record<string, string> = {\n    sm: 'w-3 h-3',\n    md: 'w-4 h-4',\n    lg: 'w-5 h-5',\n  };\n\n  const statusConfigs: Record<DataSinkStatus, StatusConfig> = {\n    ready: {\n      bg: 'bg-status-success-bg/10',\n      text: 'text-status-success-text',\n      icon: (\n        <svg className={iconSizes[size]} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 13l4 4L19 7\" />\n        </svg>\n      ),\n      label: 'Ready',\n    },\n    error: {\n      bg: 'bg-status-error-bg/10',\n      text: 'text-status-error-text',\n      icon: (\n        <svg className={iconSizes[size]} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n          />\n        </svg>\n      ),\n      label: 'Error',\n    },\n    stale: {\n      bg: 'bg-status-warning-bg/10',\n      text: 'text-[var(--color-status-warning-text)]',\n      icon: (\n        <svg className={iconSizes[size]} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\n          />\n        </svg>\n      ),\n      label: 'Stale',\n    },\n    refreshing: {\n      bg: 'bg-action-primary-bg/10',\n      text: 'text-action-primary-bg',\n      icon: (\n        <svg className={`${iconSizes[size]} animate-spin`} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\n          />\n        </svg>\n      ),\n      label: 'Refreshing',\n    },\n  };\n\n  const config = statusConfigs[status];\n\n  if (!config) {\n    return null;\n  }\n\n  return (\n    <span\n      className={`\n        inline-flex items-center gap-1.5\n        ${sizeClasses[size]}\n        ${config.bg}\n        ${config.text}\n        rounded-full\n        font-medium\n      `}\n    >\n      {showIcon && config.icon}\n      <span>{config.label}</span>\n    </span>\n  );\n});\n\nexport default DataSinkStatusBadge;\n"],"mappings":";;;AAiCA,IAAa,IAAsB,EAAK,SAA6B,EACnE,WACA,UAAO,MACP,cAAW,MACgB;CAC3B,IAAM,IAAsC;EAC1C,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EAEK,IAAoC;EACxC,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EA4DK,IA1DsD;EAC1D,OAAO;GACL,IAAI;GACJ,MAAM;GACN,MACE,kBAAC,OAAD;IAAK,WAAW,EAAU;IAAO,MAAK;IAAO,QAAO;IAAe,SAAQ;cACzE,kBAAC,QAAD;KAAM,eAAc;KAAQ,gBAAe;KAAQ,aAAa;KAAG,GAAE;KAAmB,CAAA;IACpF,CAAA;GAER,OAAO;GACR;EACD,OAAO;GACL,IAAI;GACJ,MAAM;GACN,MACE,kBAAC,OAAD;IAAK,WAAW,EAAU;IAAO,MAAK;IAAO,QAAO;IAAe,SAAQ;cACzE,kBAAC,QAAD;KACE,eAAc;KACd,gBAAe;KACf,aAAa;KACb,GAAE;KACF,CAAA;IACE,CAAA;GAER,OAAO;GACR;EACD,OAAO;GACL,IAAI;GACJ,MAAM;GACN,MACE,kBAAC,OAAD;IAAK,WAAW,EAAU;IAAO,MAAK;IAAO,QAAO;IAAe,SAAQ;cACzE,kBAAC,QAAD;KACE,eAAc;KACd,gBAAe;KACf,aAAa;KACb,GAAE;KACF,CAAA;IACE,CAAA;GAER,OAAO;GACR;EACD,YAAY;GACV,IAAI;GACJ,MAAM;GACN,MACE,kBAAC,OAAD;IAAK,WAAW,GAAG,EAAU,GAAM;IAAgB,MAAK;IAAO,QAAO;IAAe,SAAQ;cAC3F,kBAAC,QAAD;KACE,eAAc;KACd,gBAAe;KACf,aAAa;KACb,GAAE;KACF,CAAA;IACE,CAAA;GAER,OAAO;GACR;EACF,CAE4B;AAM7B,QAJK,IAKH,kBAAC,QAAD;EACE,WAAW;;UAEP,EAAY,GAAM;UAClB,EAAO,GAAG;UACV,EAAO,KAAK;;;;YALlB,CAUG,KAAY,EAAO,MACpB,kBAAC,QAAD,EAAA,UAAO,EAAO,OAAa,CAAA,CACtB;MAhBA;EAkBT"}

package/dist/bigconsole/components/datasink/DataSinkTableViewer.js

@@ -1,3 +1,5 @@
+import "../common/sectionStyles.js";
+import "../common/index.js";
 import { memo as e, useCallback as t, useMemo as n, useState as r } from "react";
 import { ChevronLeft as i, ChevronRight as a, ChevronsLeft as o, ChevronsRight as s, Settings2 as c, X as l } from "lucide-react";
 import { Button as u } from "@burdenoff/fe-libs/ui";
@@ -58,13 +60,13 @@ var w = e(function({ data: e, maxHeight: w = "400px" }) {
 		O(null), A(!1);
 	}, []);
 	return j.length === 0 ? /* @__PURE__ */ d("div", {
-		className: "flex items-center justify-center p-8 text-text-secondary text-body-sm",
+		className: "flex items-center justify-center p-8 text-center text-sm text-text-secondary",
 		children: "No tabular data available. Data must be an array of objects for table view."
 	}) : /* @__PURE__ */ f("div", {
-		className: "relative",
+		className: "relative min-w-0",
 		children: [
 			/* @__PURE__ */ f("div", {
-				className: "flex items-center justify-between p-3 bg-bg-sunken border-b border-border-default",
+				className: "mb-control-gap flex flex-wrap items-center justify-between gap-control-gap",
 				children: [/* @__PURE__ */ f("span", {
 					className: "text-xs text-text-secondary",
 					children: [
@@ -73,38 +75,37 @@ var w = e(function({ data: e, maxHeight: w = "400px" }) {
 						N.length,
 						" columns"
 					]
-				}), /* @__PURE__ */ d("div", {
-					className: "flex items-center gap-2",
-					children: /* @__PURE__ */ d(u, {
-						variant: "ghost",
-						size: "sm",
-						onClick: () => A((e) => !e),
-						children: /* @__PURE__ */ d(c, { className: "w-4 h-4" })
-					})
+				}), /* @__PURE__ */ d(u, {
+					variant: "ghost",
+					size: "sm",
+					onClick: () => A((e) => !e),
+					"aria-label": "Select columns",
+					children: /* @__PURE__ */ d(c, { className: "w-4 h-4" })
 				})]
 			}),
 			k && /* @__PURE__ */ f("div", {
-				className: "absolute right-0 top-10 z-10 bg-bg-surface border border-border-default rounded-md shadow-lg p-3 min-w-[200px] max-h-[300px] overflow-auto",
+				className: "absolute right-0 top-10 z-10 max-h-[300px] w-56 max-w-[calc(100vw-2rem)] overflow-auto rounded-card border border-[var(--color-border-subtle)] bg-bg-surface p-3 shadow-[var(--shadow-elevation-2)]",
 				children: [/* @__PURE__ */ f("div", {
-					className: "flex items-center justify-between mb-2",
+					className: "mb-2 flex items-center justify-between gap-control-gap",
 					children: [/* @__PURE__ */ d("span", {
 						className: "text-xs font-medium text-text-primary",
-						children: "Select Columns"
+						children: "Select columns"
 					}), /* @__PURE__ */ d(u, {
 						variant: "ghost",
 						size: "sm",
 						onClick: L,
+						"aria-label": "Reset columns",
 						children: /* @__PURE__ */ d(l, { className: "w-3 h-3" })
 					})]
 				}), /* @__PURE__ */ d("div", {
 					className: "space-y-1",
 					children: M.map((e) => /* @__PURE__ */ f("label", {
-						className: "flex items-center gap-2 text-xs text-text-secondary hover:text-text-primary cursor-pointer",
+						className: "flex min-h-[var(--size-controlHeight-md)] cursor-pointer items-center gap-2 text-xs text-text-secondary hover:text-text-primary",
 						children: [/* @__PURE__ */ d("input", {
 							type: "checkbox",
 							checked: !D || D.includes(e.key),
 							onChange: () => I(e.key),
-							className: "rounded border-border-default"
+							className: "rounded border-[var(--color-border-default)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface"
 						}), /* @__PURE__ */ d("span", {
 							className: "truncate",
 							title: e.key,
@@ -114,7 +115,7 @@ var w = e(function({ data: e, maxHeight: w = "400px" }) {
 				})]
 			}),
 			/* @__PURE__ */ d("div", {
-				className: "overflow-auto",
+				className: "min-w-0 overflow-auto rounded-input border border-[var(--color-border-subtle)]",
 				style: { maxHeight: w },
 				children: /* @__PURE__ */ f(p, { children: [/* @__PURE__ */ d(_, { children: /* @__PURE__ */ d(v, { children: N.map((e) => /* @__PURE__ */ d(g, {
 					title: e.path,
@@ -122,7 +123,7 @@ var w = e(function({ data: e, maxHeight: w = "400px" }) {
 				}, e.key)) }) }), /* @__PURE__ */ d(m, { children: P.map((e, t) => /* @__PURE__ */ d(v, { children: N.map((t) => /* @__PURE__ */ d(h, { children: C(S(e, t.path)) }, t.key)) }, t)) })] })
 			}),
 			F > 1 && /* @__PURE__ */ f("div", {
-				className: "flex items-center justify-between p-3 bg-bg-sunken border-t border-border-default",
+				className: "mt-control-gap flex flex-wrap items-center justify-between gap-control-gap",
 				children: [/* @__PURE__ */ f("span", {
 					className: "text-xs text-text-secondary",
 					children: [
@@ -132,7 +133,7 @@ var w = e(function({ data: e, maxHeight: w = "400px" }) {
 						F
 					]
 				}), /* @__PURE__ */ f("div", {
-					className: "flex items-center gap-1",
+					className: "flex flex-wrap items-center gap-1",
 					children: [
 						/* @__PURE__ */ d(u, {
 							variant: "ghost",

package/dist/bigconsole/components/datasink/DataSinkTableViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataSinkTableViewer.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/DataSinkTableViewer.tsx"],"sourcesContent":["/**\n * DataSink Table Viewer\n *\n * Component for viewing DataSink data in tabular format with support for\n * nested data, column selection, and multiple view modes.\n */\n\nimport { memo, useState, useMemo, useCallback } from 'react';\n\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@burdenoff/fe-libs/ui/table';\n\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Settings2, X } from 'lucide-react';\n\ninterface DataSinkTableViewerProps {\n  data: unknown;\n  maxHeight?: string;\n}\n\ninterface Column {\n  key: string;\n  label: string;\n  path: string;\n}\n\nfunction isObject(value: unknown): value is Record<string, unknown> {\n  return typeof value === 'object' && value !== null && !Array.isArray(value);\n}\n\nfunction isArrayOfObjects(value: unknown): boolean {\n  return Array.isArray(value) && value.length > 0 && isObject(value[0]);\n}\n\nfunction flattenObject(obj: Record<string, unknown>, prefix = ''): Record<string, unknown> {\n  const result: Record<string, unknown> = {};\n\n  for (const [key, value] of Object.entries(obj)) {\n    const newKey = prefix ? `${prefix}.${key}` : key;\n\n    if (isObject(value) && !Array.isArray(value)) {\n      Object.assign(result, flattenObject(value, newKey));\n    } else {\n      result[newKey] = value;\n    }\n  }\n\n  return result;\n}\n\nfunction getNestedValue(obj: Record<string, unknown>, path: string): unknown {\n  return path.split('.').reduce((acc: unknown, key) => {\n    if (acc && typeof acc === 'object' && key in acc) {\n      return (acc as Record<string, unknown>)[key];\n    }\n    return undefined;\n  }, obj);\n}\n\nfunction formatCellValue(value: unknown): string {\n  if (value === null || value === undefined) {\n    return '-';\n  }\n  if (typeof value === 'object') {\n    return JSON.stringify(value);\n  }\n  return String(value);\n}\n\nexport const DataSinkTableViewer = memo(function DataSinkTableViewer({\n  data,\n  maxHeight = '400px',\n}: DataSinkTableViewerProps) {\n  const [page, setPage] = useState(0);\n  const PAGE_SIZE = 50;\n  const [selectedColumns, setSelectedColumns] = useState<string[] | null>(null);\n  const [showColumnPicker, setShowColumnPicker] = useState(false);\n\n  const rows = useMemo(() => {\n    if (!data) return [];\n    if (Array.isArray(data) && isArrayOfObjects(data)) {\n      return data as Record<string, unknown>[];\n    }\n    if (isObject(data)) {\n      return [data];\n    }\n    return [];\n  }, [data]);\n\n  const allColumns = useMemo(() => {\n    if (rows.length === 0) return [];\n\n    const columnMap = new Map<string, Column>();\n\n    for (const row of rows) {\n      const flat = flattenObject(row);\n      for (const key of Object.keys(flat)) {\n        if (!columnMap.has(key)) {\n          const parts = key.split('.');\n          const label = parts[parts.length - 1];\n          columnMap.set(key, { key, label, path: key });\n        }\n      }\n    }\n\n    return Array.from(columnMap.values());\n  }, [rows]);\n\n  const displayColumns = useMemo(() => {\n    if (selectedColumns) {\n      return allColumns.filter((col) => selectedColumns.includes(col.key));\n    }\n    return allColumns.slice(0, 10);\n  }, [allColumns, selectedColumns]);\n\n  const paginatedRows = useMemo(() => {\n    const start = page * PAGE_SIZE;\n    return rows.slice(start, start + PAGE_SIZE);\n  }, [rows, page]);\n\n  const totalPages = Math.ceil(rows.length / PAGE_SIZE);\n\n  const handleColumnToggle = useCallback((columnKey: string) => {\n    setSelectedColumns((prev) => {\n      if (!prev) {\n        return [columnKey];\n      }\n      if (prev.includes(columnKey)) {\n        const next = prev.filter((k) => k !== columnKey);\n        return next.length > 0 ? next : null;\n      }\n      return [...prev, columnKey];\n    });\n  }, []);\n\n  const handleResetColumns = useCallback(() => {\n    setSelectedColumns(null);\n    setShowColumnPicker(false);\n  }, []);\n\n  if (rows.length === 0) {\n    return (\n      <div className=\"flex items-center justify-center p-8 text-text-secondary text-body-sm\">\n        No tabular data available. Data must be an array of objects for table view.\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"relative\">\n      <div className=\"flex items-center justify-between p-3 bg-bg-sunken border-b border-border-default\">\n        <span className=\"text-xs text-text-secondary\">\n          {rows.length} rows &middot; {displayColumns.length} columns\n        </span>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"ghost\" size=\"sm\" onClick={() => setShowColumnPicker((v) => !v)}>\n            <Settings2 className=\"w-4 h-4\" />\n          </Button>\n        </div>\n      </div>\n\n      {showColumnPicker && (\n        <div className=\"absolute right-0 top-10 z-10 bg-bg-surface border border-border-default rounded-md shadow-lg p-3 min-w-[200px] max-h-[300px] overflow-auto\">\n          <div className=\"flex items-center justify-between mb-2\">\n            <span className=\"text-xs font-medium text-text-primary\">Select Columns</span>\n            <Button variant=\"ghost\" size=\"sm\" onClick={handleResetColumns}>\n              <X className=\"w-3 h-3\" />\n            </Button>\n          </div>\n          <div className=\"space-y-1\">\n            {allColumns.map((col) => {\n              const isSelected = !selectedColumns || selectedColumns.includes(col.key);\n              return (\n                <label\n                  key={col.key}\n                  className=\"flex items-center gap-2 text-xs text-text-secondary hover:text-text-primary cursor-pointer\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    checked={isSelected}\n                    onChange={() => handleColumnToggle(col.key)}\n                    className=\"rounded border-border-default\"\n                  />\n                  <span className=\"truncate\" title={col.key}>\n                    {col.label}\n                  </span>\n                </label>\n              );\n            })}\n          </div>\n        </div>\n      )}\n\n      <div className=\"overflow-auto\" style={{ maxHeight }}>\n        <Table>\n          <TableHeader>\n            <TableRow>\n              {displayColumns.map((col) => (\n                <TableHead key={col.key} title={col.path}>\n                  {col.label}\n                </TableHead>\n              ))}\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {paginatedRows.map((row, rowIndex) => (\n              <TableRow key={rowIndex}>\n                {displayColumns.map((col) => (\n                  <TableCell key={col.key}>{formatCellValue(getNestedValue(row, col.path))}</TableCell>\n                ))}\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n\n      {totalPages > 1 && (\n        <div className=\"flex items-center justify-between p-3 bg-bg-sunken border-t border-border-default\">\n          <span className=\"text-xs text-text-secondary\">\n            Page {page + 1} of {totalPages}\n          </span>\n          <div className=\"flex items-center gap-1\">\n            <Button variant=\"ghost\" size=\"sm\" onClick={() => setPage(0)} disabled={page === 0}>\n              <ChevronsLeft className=\"w-4 h-4\" />\n            </Button>\n            <Button variant=\"ghost\" size=\"sm\" onClick={() => setPage((p) => Math.max(0, p - 1))} disabled={page === 0}>\n              <ChevronLeft className=\"w-4 h-4\" />\n            </Button>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}\n              disabled={page >= totalPages - 1}\n            >\n              <ChevronRight className=\"w-4 h-4\" />\n            </Button>\n            <Button variant=\"ghost\" size=\"sm\" onClick={() => setPage(totalPages - 1)} disabled={page >= totalPages - 1}>\n              <ChevronsRight className=\"w-4 h-4\" />\n            </Button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default DataSinkTableViewer;\n"],"mappings":"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"}
+{"version":3,"file":"DataSinkTableViewer.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/DataSinkTableViewer.tsx"],"sourcesContent":["/**\n * DataSink Table Viewer\n *\n * Component for viewing DataSink data in tabular format with support for\n * nested data, column selection, and multiple view modes.\n */\n\nimport { memo, useState, useMemo, useCallback } from 'react';\n\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@burdenoff/fe-libs/ui/table';\n\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Settings2, X } from 'lucide-react';\n\nimport { SECTION_FOCUS_RING } from '../common';\n\ninterface DataSinkTableViewerProps {\n  data: unknown;\n  maxHeight?: string;\n}\n\ninterface Column {\n  key: string;\n  label: string;\n  path: string;\n}\n\nfunction isObject(value: unknown): value is Record<string, unknown> {\n  return typeof value === 'object' && value !== null && !Array.isArray(value);\n}\n\nfunction isArrayOfObjects(value: unknown): boolean {\n  return Array.isArray(value) && value.length > 0 && isObject(value[0]);\n}\n\nfunction flattenObject(obj: Record<string, unknown>, prefix = ''): Record<string, unknown> {\n  const result: Record<string, unknown> = {};\n\n  for (const [key, value] of Object.entries(obj)) {\n    const newKey = prefix ? `${prefix}.${key}` : key;\n\n    if (isObject(value) && !Array.isArray(value)) {\n      Object.assign(result, flattenObject(value, newKey));\n    } else {\n      result[newKey] = value;\n    }\n  }\n\n  return result;\n}\n\nfunction getNestedValue(obj: Record<string, unknown>, path: string): unknown {\n  return path.split('.').reduce((acc: unknown, key) => {\n    if (acc && typeof acc === 'object' && key in acc) {\n      return (acc as Record<string, unknown>)[key];\n    }\n    return undefined;\n  }, obj);\n}\n\nfunction formatCellValue(value: unknown): string {\n  if (value === null || value === undefined) {\n    return '-';\n  }\n  if (typeof value === 'object') {\n    return JSON.stringify(value);\n  }\n  return String(value);\n}\n\nexport const DataSinkTableViewer = memo(function DataSinkTableViewer({\n  data,\n  maxHeight = '400px',\n}: DataSinkTableViewerProps) {\n  const [page, setPage] = useState(0);\n  const PAGE_SIZE = 50;\n  const [selectedColumns, setSelectedColumns] = useState<string[] | null>(null);\n  const [showColumnPicker, setShowColumnPicker] = useState(false);\n\n  const rows = useMemo(() => {\n    if (!data) return [];\n    if (Array.isArray(data) && isArrayOfObjects(data)) {\n      return data as Record<string, unknown>[];\n    }\n    if (isObject(data)) {\n      return [data];\n    }\n    return [];\n  }, [data]);\n\n  const allColumns = useMemo(() => {\n    if (rows.length === 0) return [];\n\n    const columnMap = new Map<string, Column>();\n\n    for (const row of rows) {\n      const flat = flattenObject(row);\n      for (const key of Object.keys(flat)) {\n        if (!columnMap.has(key)) {\n          const parts = key.split('.');\n          const label = parts[parts.length - 1];\n          columnMap.set(key, { key, label, path: key });\n        }\n      }\n    }\n\n    return Array.from(columnMap.values());\n  }, [rows]);\n\n  const displayColumns = useMemo(() => {\n    if (selectedColumns) {\n      return allColumns.filter((col) => selectedColumns.includes(col.key));\n    }\n    return allColumns.slice(0, 10);\n  }, [allColumns, selectedColumns]);\n\n  const paginatedRows = useMemo(() => {\n    const start = page * PAGE_SIZE;\n    return rows.slice(start, start + PAGE_SIZE);\n  }, [rows, page]);\n\n  const totalPages = Math.ceil(rows.length / PAGE_SIZE);\n\n  const handleColumnToggle = useCallback((columnKey: string) => {\n    setSelectedColumns((prev) => {\n      if (!prev) {\n        return [columnKey];\n      }\n      if (prev.includes(columnKey)) {\n        const next = prev.filter((k) => k !== columnKey);\n        return next.length > 0 ? next : null;\n      }\n      return [...prev, columnKey];\n    });\n  }, []);\n\n  const handleResetColumns = useCallback(() => {\n    setSelectedColumns(null);\n    setShowColumnPicker(false);\n  }, []);\n\n  if (rows.length === 0) {\n    return (\n      <div className=\"flex items-center justify-center p-8 text-center text-sm text-text-secondary\">\n        No tabular data available. Data must be an array of objects for table view.\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"relative min-w-0\">\n      {/* Toolbar. Deliberately surface-less: this viewer is rendered inside an\n          already-headed section, and a second sunken band stacked three bars\n          deep was the main reason the preview did not scan. */}\n      <div className=\"mb-control-gap flex flex-wrap items-center justify-between gap-control-gap\">\n        <span className=\"text-xs text-text-secondary\">\n          {rows.length} rows &middot; {displayColumns.length} columns\n        </span>\n        <Button variant=\"ghost\" size=\"sm\" onClick={() => setShowColumnPicker((v) => !v)} aria-label=\"Select columns\">\n          <Settings2 className=\"w-4 h-4\" />\n        </Button>\n      </div>\n\n      {showColumnPicker && (\n        <div className=\"absolute right-0 top-10 z-10 max-h-[300px] w-56 max-w-[calc(100vw-2rem)] overflow-auto rounded-card border border-[var(--color-border-subtle)] bg-bg-surface p-3 shadow-[var(--shadow-elevation-2)]\">\n          <div className=\"mb-2 flex items-center justify-between gap-control-gap\">\n            <span className=\"text-xs font-medium text-text-primary\">Select columns</span>\n            <Button variant=\"ghost\" size=\"sm\" onClick={handleResetColumns} aria-label=\"Reset columns\">\n              <X className=\"w-3 h-3\" />\n            </Button>\n          </div>\n          <div className=\"space-y-1\">\n            {allColumns.map((col) => {\n              const isSelected = !selectedColumns || selectedColumns.includes(col.key);\n              return (\n                <label\n                  key={col.key}\n                  className=\"flex min-h-[var(--size-controlHeight-md)] cursor-pointer items-center gap-2 text-xs text-text-secondary hover:text-text-primary\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    checked={isSelected}\n                    onChange={() => handleColumnToggle(col.key)}\n                    className={`rounded border-[var(--color-border-default)] ${SECTION_FOCUS_RING}`}\n                  />\n                  <span className=\"truncate\" title={col.key}>\n                    {col.label}\n                  </span>\n                </label>\n              );\n            })}\n          </div>\n        </div>\n      )}\n\n      <div\n        className=\"min-w-0 overflow-auto rounded-input border border-[var(--color-border-subtle)]\"\n        style={{ maxHeight }}\n      >\n        <Table>\n          <TableHeader>\n            <TableRow>\n              {displayColumns.map((col) => (\n                <TableHead key={col.key} title={col.path}>\n                  {col.label}\n                </TableHead>\n              ))}\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {paginatedRows.map((row, rowIndex) => (\n              <TableRow key={rowIndex}>\n                {displayColumns.map((col) => (\n                  <TableCell key={col.key}>{formatCellValue(getNestedValue(row, col.path))}</TableCell>\n                ))}\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n\n      {totalPages > 1 && (\n        <div className=\"mt-control-gap flex flex-wrap items-center justify-between gap-control-gap\">\n          <span className=\"text-xs text-text-secondary\">\n            Page {page + 1} of {totalPages}\n          </span>\n          <div className=\"flex flex-wrap items-center gap-1\">\n            <Button variant=\"ghost\" size=\"sm\" onClick={() => setPage(0)} disabled={page === 0}>\n              <ChevronsLeft className=\"w-4 h-4\" />\n            </Button>\n            <Button variant=\"ghost\" size=\"sm\" onClick={() => setPage((p) => Math.max(0, p - 1))} disabled={page === 0}>\n              <ChevronLeft className=\"w-4 h-4\" />\n            </Button>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}\n              disabled={page >= totalPages - 1}\n            >\n              <ChevronRight className=\"w-4 h-4\" />\n            </Button>\n            <Button variant=\"ghost\" size=\"sm\" onClick={() => setPage(totalPages - 1)} disabled={page >= totalPages - 1}>\n              <ChevronsRight className=\"w-4 h-4\" />\n            </Button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default DataSinkTableViewer;\n"],"mappings":";;;;;;;;AA2BA,SAAS,EAAS,GAAkD;AAClE,QAAO,OAAO,KAAU,cAAY,KAAkB,CAAC,MAAM,QAAQ,EAAM;;AAG7E,SAAS,EAAiB,GAAyB;AACjD,QAAO,MAAM,QAAQ,EAAM,IAAI,EAAM,SAAS,KAAK,EAAS,EAAM,GAAG;;AAGvE,SAAS,EAAc,GAA8B,IAAS,IAA6B;CACzF,IAAM,IAAkC,EAAE;AAE1C,MAAK,IAAM,CAAC,GAAK,MAAU,OAAO,QAAQ,EAAI,EAAE;EAC9C,IAAM,IAAS,IAAS,GAAG,EAAO,GAAG,MAAQ;AAE7C,EAAI,EAAS,EAAM,IAAI,CAAC,MAAM,QAAQ,EAAM,GAC1C,OAAO,OAAO,GAAQ,EAAc,GAAO,EAAO,CAAC,GAEnD,EAAO,KAAU;;AAIrB,QAAO;;AAGT,SAAS,EAAe,GAA8B,GAAuB;AAC3E,QAAO,EAAK,MAAM,IAAI,CAAC,QAAQ,GAAc,MAAQ;AACnD,MAAI,KAAO,OAAO,KAAQ,YAAY,KAAO,EAC3C,QAAQ,EAAgC;IAGzC,EAAI;;AAGT,SAAS,EAAgB,GAAwB;AAO/C,QANI,KAAU,OACL,MAEL,OAAO,KAAU,WACZ,KAAK,UAAU,EAAM,GAEvB,OAAO,EAAM;;AAGtB,IAAa,IAAsB,EAAK,SAA6B,EACnE,SACA,eAAY,WACe;CAC3B,IAAM,CAAC,GAAM,KAAW,EAAS,EAAE,EAE7B,CAAC,GAAiB,KAAsB,EAA0B,KAAK,EACvE,CAAC,GAAkB,KAAuB,EAAS,GAAM,EAEzD,IAAO,QACN,IACD,MAAM,QAAQ,EAAK,IAAI,EAAiB,EAAK,GACxC,IAEL,EAAS,EAAK,GACT,CAAC,EAAK,GAER,EAAE,GAPS,EAAE,EAQnB,CAAC,EAAK,CAAC,EAEJ,IAAa,QAAc;AAC/B,MAAI,EAAK,WAAW,EAAG,QAAO,EAAE;EAEhC,IAAM,oBAAY,IAAI,KAAqB;AAE3C,OAAK,IAAM,KAAO,GAAM;GACtB,IAAM,IAAO,EAAc,EAAI;AAC/B,QAAK,IAAM,KAAO,OAAO,KAAK,EAAK,CACjC,KAAI,CAAC,EAAU,IAAI,EAAI,EAAE;IACvB,IAAM,IAAQ,EAAI,MAAM,IAAI,EACtB,IAAQ,EAAM,EAAM,SAAS;AACnC,MAAU,IAAI,GAAK;KAAE;KAAK;KAAO,MAAM;KAAK,CAAC;;;AAKnD,SAAO,MAAM,KAAK,EAAU,QAAQ,CAAC;IACpC,CAAC,EAAK,CAAC,EAEJ,IAAiB,QACjB,IACK,EAAW,QAAQ,MAAQ,EAAgB,SAAS,EAAI,IAAI,CAAC,GAE/D,EAAW,MAAM,GAAG,GAAG,EAC7B,CAAC,GAAY,EAAgB,CAAC,EAE3B,IAAgB,QAAc;EAClC,IAAM,IAAQ,IAAO;AACrB,SAAO,EAAK,MAAM,GAAO,IAAQ,GAAU;IAC1C,CAAC,GAAM,EAAK,CAAC,EAEV,IAAa,KAAK,KAAK,EAAK,SAAS,GAAU,EAE/C,IAAqB,GAAa,MAAsB;AAC5D,KAAoB,MAAS;AAC3B,OAAI,CAAC,EACH,QAAO,CAAC,EAAU;AAEpB,OAAI,EAAK,SAAS,EAAU,EAAE;IAC5B,IAAM,IAAO,EAAK,QAAQ,MAAM,MAAM,EAAU;AAChD,WAAO,EAAK,SAAS,IAAI,IAAO;;AAElC,UAAO,CAAC,GAAG,GAAM,EAAU;IAC3B;IACD,EAAE,CAAC,EAEA,IAAqB,QAAkB;AAE3C,EADA,EAAmB,KAAK,EACxB,EAAoB,GAAM;IACzB,EAAE,CAAC;AAUN,QARI,EAAK,WAAW,IAEhB,kBAAC,OAAD;EAAK,WAAU;YAA+E;EAExF,CAAA,GAKR,kBAAC,OAAD;EAAK,WAAU;YAAf;GAIE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,EAAK;MAAO;MAAgB,EAAe;MAAO;MAC9C;QACP,kBAAC,GAAD;KAAQ,SAAQ;KAAQ,MAAK;KAAK,eAAe,GAAqB,MAAM,CAAC,EAAE;KAAE,cAAW;eAC1F,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA;KAC1B,CAAA,CACL;;GAEL,KACC,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD;MAAM,WAAU;gBAAwC;MAAqB,CAAA,EAC7E,kBAAC,GAAD;MAAQ,SAAQ;MAAQ,MAAK;MAAK,SAAS;MAAoB,cAAW;gBACxE,kBAAC,GAAD,EAAG,WAAU,WAAY,CAAA;MAClB,CAAA,CACL;QACN,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAW,KAAK,MAGb,kBAAC,SAAD;MAEE,WAAU;gBAFZ,CAIE,kBAAC,SAAD;OACE,MAAK;OACL,SARa,CAAC,KAAmB,EAAgB,SAAS,EAAI,IAAI;OASlE,gBAAgB,EAAmB,EAAI,IAAI;OAC3C,WAAW;OACX,CAAA,EACF,kBAAC,QAAD;OAAM,WAAU;OAAW,OAAO,EAAI;iBACnC,EAAI;OACA,CAAA,CACD;QAZD,EAAI,IAYH,CAEV;KACE,CAAA,CACF;;GAGR,kBAAC,OAAD;IACE,WAAU;IACV,OAAO,EAAE,cAAW;cAEpB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAA,UACG,EAAe,KAAK,MACnB,kBAAC,GAAD;KAAyB,OAAO,EAAI;eACjC,EAAI;KACK,EAFI,EAAI,IAER,CACZ,EACO,CAAA,EACC,CAAA,EACd,kBAAC,GAAD,EAAA,UACG,EAAc,KAAK,GAAK,MACvB,kBAAC,GAAD,EAAA,UACG,EAAe,KAAK,MACnB,kBAAC,GAAD,EAAA,UAA0B,EAAgB,EAAe,GAAK,EAAI,KAAK,CAAC,EAAa,EAArE,EAAI,IAAiE,CACrF,EACO,EAJI,EAIJ,CACX,EACQ,CAAA,CACN,EAAA,CAAA;IACJ,CAAA;GAEL,IAAa,KACZ,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eAAhB;MAA8C;MACtC,IAAO;MAAE;MAAK;MACf;QACP,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,GAAD;OAAQ,SAAQ;OAAQ,MAAK;OAAK,eAAe,EAAQ,EAAE;OAAE,UAAU,MAAS;iBAC9E,kBAAC,GAAD,EAAc,WAAU,WAAY,CAAA;OAC7B,CAAA;MACT,kBAAC,GAAD;OAAQ,SAAQ;OAAQ,MAAK;OAAK,eAAe,GAAS,MAAM,KAAK,IAAI,GAAG,IAAI,EAAE,CAAC;OAAE,UAAU,MAAS;iBACtG,kBAAC,GAAD,EAAa,WAAU,WAAY,CAAA;OAC5B,CAAA;MACT,kBAAC,GAAD;OACE,SAAQ;OACR,MAAK;OACL,eAAe,GAAS,MAAM,KAAK,IAAI,IAAa,GAAG,IAAI,EAAE,CAAC;OAC9D,UAAU,KAAQ,IAAa;iBAE/B,kBAAC,GAAD,EAAc,WAAU,WAAY,CAAA;OAC7B,CAAA;MACT,kBAAC,GAAD;OAAQ,SAAQ;OAAQ,MAAK;OAAK,eAAe,EAAQ,IAAa,EAAE;OAAE,UAAU,KAAQ,IAAa;iBACvG,kBAAC,GAAD,EAAe,WAAU,WAAY,CAAA;OAC9B,CAAA;MACL;OACF;;GAEJ;;EAER"}

package/dist/bigconsole/components/datasink/ExportDataSinkDialog.js

@@ -1,11 +1,14 @@
-import e from "../../hooks/useExportDataSink.js";
+import { SECTION_FOCUS_RING as e } from "../common/sectionStyles.js";
+import { Section as t } from "../common/Section.js";
+import "../common/index.js";
+import n from "../../hooks/useExportDataSink.js";
 import "../../hooks/index.js";
-import { memo as t, useCallback as n, useEffect as r, useState as i } from "react";
-import { Check as a, Download as o, FileJson as s } from "lucide-react";
-import { Dialog as c, DialogContent as l, DialogDescription as u, DialogTitle as d, Spinner as f } from "@burdenoff/fe-libs/ui";
-import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { memo as r, useCallback as i, useEffect as a, useState as o } from "react";
+import { Check as s, Download as c, FileJson as l } from "lucide-react";
+import { Dialog as u, DialogContent as d, DialogDescription as f, DialogTitle as p, Spinner as m } from "@burdenoff/fe-libs/ui";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/bigconsole/components/datasink/ExportDataSinkDialog.tsx
-var g = {
+var v = {
 	dialogContent: {
 		maxWidth: "450px",
 		width: "95vw",
@@ -45,48 +48,30 @@ var g = {
 		margin: "4px 0 0 0"
 	},
 	content: { padding: "20px 24px" },
-	dataSinkInfo: {
-		padding: "12px 16px",
-		backgroundColor: "var(--color-bg-muted)",
-		borderRadius: "8px",
-		marginBottom: "20px"
-	},
-	dataSinkLabel: {
-		fontSize: "12px",
-		color: "var(--color-text-secondary)",
-		margin: 0
-	},
 	dataSinkName: {
 		fontSize: "14px",
 		fontWeight: 500,
 		color: "var(--color-text-primary)",
-		margin: "4px 0 0 0",
+		margin: 0,
 		overflow: "hidden",
 		textOverflow: "ellipsis",
 		whiteSpace: "nowrap"
 	},
-	optionsTitle: {
-		fontSize: "13px",
-		fontWeight: 600,
-		color: "var(--color-text-secondary)",
-		marginBottom: "16px",
-		textTransform: "uppercase",
-		letterSpacing: "0.05em"
-	},
 	optionItem: {
 		display: "flex",
 		alignItems: "flex-start",
 		gap: "12px",
+		width: "100%",
+		textAlign: "left",
 		padding: "12px",
-		borderRadius: "8px",
+		borderRadius: "var(--radius-card)",
 		marginBottom: "8px",
 		backgroundColor: "var(--color-bg-sunken)",
 		border: "1px solid var(--color-border)",
-		cursor: "pointer",
-		transition: "all 0.15s ease"
+		cursor: "pointer"
 	},
 	optionItemActive: {
-		backgroundColor: "var(--color-action-primary-bg)",
+		backgroundColor: "var(--color-bg-accentSubtle)",
 		borderColor: "var(--color-action-primary-bg)"
 	},
 	checkbox: {
@@ -118,13 +103,6 @@ var g = {
 		color: "var(--color-text-secondary)",
 		margin: "4px 0 0 0"
 	},
-	error: {
-		padding: "12px 16px",
-		backgroundColor: "var(--color-status-error-bgSubtle)",
-		border: "1px solid var(--color-status-error-border)",
-		borderRadius: "8px",
-		marginTop: "16px"
-	},
 	errorText: {
 		fontSize: "13px",
 		color: "var(--color-status-error-text)",
@@ -132,184 +110,162 @@ var g = {
 	},
 	footer: {
 		display: "flex",
+		flexWrap: "wrap",
 		justifyContent: "flex-end",
 		gap: "12px",
 		padding: "16px 24px",
 		borderTop: "1px solid var(--color-border)",
 		backgroundColor: "var(--color-bg-sunken)"
-	},
-	cancelButton: {
-		padding: "10px 20px",
-		fontSize: "14px",
-		fontWeight: 500,
-		borderRadius: "8px",
-		border: "1px solid var(--color-border)",
-		backgroundColor: "var(--color-bg-surface)",
-		color: "var(--color-text-secondary)",
-		cursor: "pointer",
-		transition: "all 0.15s ease"
-	},
-	exportButton: {
-		display: "flex",
-		alignItems: "center",
-		gap: "8px",
-		padding: "10px 20px",
-		fontSize: "14px",
-		fontWeight: 500,
-		borderRadius: "8px",
-		border: "none",
-		backgroundColor: "var(--color-action-primary-bg)",
-		color: "var(--color-action-primary-text)",
-		cursor: "pointer",
-		transition: "all 0.15s ease"
-	},
-	exportButtonDisabled: {
-		backgroundColor: "var(--color-action-primary-bg)",
-		opacity: .5,
-		cursor: "not-allowed"
 	}
-}, _ = t(function({ checked: e, onChange: t, disabled: n, label: r, description: i }) {
-	return /* @__PURE__ */ h("div", {
+}, y = `inline-flex min-h-[var(--size-controlHeight-md)] items-center gap-2 rounded-button px-5 py-2 text-sm font-medium motion-safe:transition-colors ${e}`, b = r(function({ checked: t, onChange: n, disabled: r, label: i, description: a }) {
+	return /* @__PURE__ */ _("button", {
+		type: "button",
+		role: "checkbox",
+		"aria-checked": t,
+		disabled: r,
+		className: e,
 		style: {
-			...g.optionItem,
-			...e ? g.optionItemActive : {},
-			opacity: n ? .6 : 1,
-			cursor: n ? "not-allowed" : "pointer"
+			...v.optionItem,
+			...t ? v.optionItemActive : {},
+			opacity: r ? .6 : 1,
+			cursor: r ? "not-allowed" : "pointer"
 		},
-		onClick: () => !n && t(!e),
-		children: [/* @__PURE__ */ m("div", {
+		onClick: () => !r && n(!t),
+		children: [/* @__PURE__ */ g("span", {
+			"aria-hidden": "true",
 			style: {
-				...g.checkbox,
-				...e ? g.checkboxChecked : {}
+				...v.checkbox,
+				...t ? v.checkboxChecked : {}
 			},
-			children: e && /* @__PURE__ */ m(a, { style: {
+			children: t && /* @__PURE__ */ g(s, { style: {
 				width: "14px",
 				height: "14px",
 				color: "var(--color-action-primary-text)"
 			} })
-		}), /* @__PURE__ */ h("div", {
-			style: g.optionText,
-			children: [/* @__PURE__ */ m("p", {
-				style: g.optionLabel,
-				children: r
-			}), /* @__PURE__ */ m("p", {
-				style: g.optionDescription,
+		}), /* @__PURE__ */ _("span", {
+			style: v.optionText,
+			children: [/* @__PURE__ */ g("span", {
+				style: {
+					...v.optionLabel,
+					display: "block"
+				},
 				children: i
+			}), /* @__PURE__ */ g("span", {
+				style: {
+					...v.optionDescription,
+					display: "block"
+				},
+				children: a
 			})]
 		})]
 	});
-}), v = t(function({ isOpen: t, dataSinkId: a, dataSinkName: v, onClose: y, onSuccess: b }) {
-	let [x, S] = i(!0), { loading: C, error: w, downloadDataSink: T, clearError: E } = e();
-	r(() => {
-		t && (S(!0), E());
-	}, [t, E]);
-	let D = n(async () => {
-		a && await T(a, v, { prettyPrint: x }) && (b?.(), y());
+}), x = r(function({ isOpen: e, dataSinkId: r, dataSinkName: s, onClose: x, onSuccess: S }) {
+	let [C, w] = o(!0), { loading: T, error: E, downloadDataSink: D, clearError: O } = n();
+	a(() => {
+		e && (w(!0), O());
+	}, [e, O]);
+	let k = i(async () => {
+		r && await D(r, s, { prettyPrint: C }) && (S?.(), x());
 	}, [
-		a,
-		v,
-		x,
-		T,
-		b,
-		y
+		r,
+		s,
+		C,
+		D,
+		S,
+		x
 	]);
-	return a ? /* @__PURE__ */ m(c, {
-		open: t,
-		onOpenChange: (e) => !e && !C && y(),
-		children: /* @__PURE__ */ h(l, {
-			style: g.dialogContent,
+	return r ? /* @__PURE__ */ g(u, {
+		open: e,
+		onOpenChange: (e) => !e && !T && x(),
+		children: /* @__PURE__ */ _(d, {
+			style: v.dialogContent,
 			children: [
-				/* @__PURE__ */ h("div", {
-					style: g.header,
-					children: [/* @__PURE__ */ m("div", {
-						style: g.iconWrapper,
-						children: /* @__PURE__ */ m(s, { style: {
+				/* @__PURE__ */ _("div", {
+					style: v.header,
+					children: [/* @__PURE__ */ g("div", {
+						style: v.iconWrapper,
+						children: /* @__PURE__ */ g(l, { style: {
 							width: "22px",
 							height: "22px"
 						} })
-					}), /* @__PURE__ */ h("div", {
-						style: g.headerText,
-						children: [/* @__PURE__ */ m(d, {
+					}), /* @__PURE__ */ _("div", {
+						style: v.headerText,
+						children: [/* @__PURE__ */ g(p, {
 							asChild: !0,
-							children: /* @__PURE__ */ m("h2", {
-								style: g.title,
+							children: /* @__PURE__ */ g("h2", {
+								style: v.title,
 								children: "Export DataSink"
 							})
-						}), /* @__PURE__ */ m(u, {
+						}), /* @__PURE__ */ g(f, {
 							asChild: !0,
-							children: /* @__PURE__ */ m("p", {
-								style: g.description,
+							children: /* @__PURE__ */ g("p", {
+								style: v.description,
 								children: "Export your DataSink configuration to a JSON file."
 							})
 						})]
 					})]
 				}),
-				/* @__PURE__ */ h("div", {
-					style: g.content,
+				/* @__PURE__ */ _("div", {
+					style: v.content,
+					className: "space-y-form-gap",
 					children: [
-						v && /* @__PURE__ */ h("div", {
-							style: g.dataSinkInfo,
-							children: [/* @__PURE__ */ m("p", {
-								style: g.dataSinkLabel,
-								children: "Exporting:"
-							}), /* @__PURE__ */ m("p", {
-								style: g.dataSinkName,
-								children: v
-							})]
-						}),
-						/* @__PURE__ */ m("p", {
-							style: g.optionsTitle,
-							children: "Export Options"
+						s && /* @__PURE__ */ g(t, {
+							emphasis: "muted",
+							padding: "compact",
+							headingLevel: 3,
+							title: "Exporting",
+							headerClassName: "mb-control-gap",
+							children: /* @__PURE__ */ g("p", {
+								style: v.dataSinkName,
+								children: s
+							})
 						}),
-						/* @__PURE__ */ m(_, {
-							checked: x,
-							onChange: S,
-							disabled: C,
-							label: "Format JSON (Pretty Print)",
-							description: "Makes the export file human-readable (larger file size)"
+						/* @__PURE__ */ g(t, {
+							emphasis: "bare",
+							padding: "none",
+							headingLevel: 3,
+							title: "Export options",
+							headerClassName: "mb-control-gap",
+							children: /* @__PURE__ */ g(b, {
+								checked: C,
+								onChange: w,
+								disabled: T,
+								label: "Format JSON (pretty print)",
+								description: "Makes the export file human-readable (larger file size)"
+							})
 						}),
-						w && /* @__PURE__ */ m("div", {
-							style: g.error,
-							children: /* @__PURE__ */ m("p", {
-								style: g.errorText,
-								children: w.message
+						E && /* @__PURE__ */ g(t, {
+							tone: "danger",
+							padding: "compact",
+							headingLevel: 3,
+							title: "Export failed",
+							children: /* @__PURE__ */ g("p", {
+								style: v.errorText,
+								children: E.message
 							})
 						})
 					]
 				}),
-				/* @__PURE__ */ h("div", {
-					style: g.footer,
-					children: [/* @__PURE__ */ m("button", {
-						style: g.cancelButton,
-						onClick: y,
-						disabled: C,
-						onMouseEnter: (e) => {
-							e.currentTarget.style.backgroundColor = "var(--color-bg-muted)";
-						},
-						onMouseLeave: (e) => {
-							e.currentTarget.style.backgroundColor = "var(--color-bg-surface)";
-						},
+				/* @__PURE__ */ _("div", {
+					style: v.footer,
+					children: [/* @__PURE__ */ g("button", {
+						type: "button",
+						className: `${y} border border-[var(--color-border-default)] bg-bg-surface text-text-secondary hover:bg-bg-sunken`,
+						onClick: x,
+						disabled: T,
 						children: "Cancel"
-					}), /* @__PURE__ */ m("button", {
-						style: {
-							...g.exportButton,
-							...C ? g.exportButtonDisabled : {}
-						},
-						onClick: D,
-						disabled: C,
-						onMouseEnter: (e) => {
-							C || (e.currentTarget.style.opacity = "0.9");
-						},
-						onMouseLeave: (e) => {
-							C || (e.currentTarget.style.opacity = "1");
-						},
-						children: C ? /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(f, { style: {
+					}), /* @__PURE__ */ g("button", {
+						type: "button",
+						className: `${y} bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bgHover disabled:cursor-not-allowed disabled:opacity-50`,
+						onClick: k,
+						disabled: T,
+						children: T ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(m, { style: {
 							width: "16px",
 							height: "16px"
-						} }), "Exporting..."] }) : /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(o, { style: {
+						} }), "Exporting..."] }) : /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(c, { style: {
 							width: "16px",
 							height: "16px"
-						} }), "Download Export"] })
+						} }), "Download export"] })
 					})]
 				})
 			]
@@ -317,6 +273,6 @@ var g = {
 	}) : null;
 });
 //#endregion
-export { v as default };
+export { x as default };
 
 //# sourceMappingURL=ExportDataSinkDialog.js.map