@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/components/dashboard/ExportDashboardDialog.js

@@ -1,11 +1,13 @@
-import e from "../../hooks/useExportDashboard.js";
+import { Section as e, SectionStack as t } from "../common/Section.js";
+import "../common/index.js";
+import n from "../../hooks/useExportDashboard.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/dashboard/ExportDashboardDialog.tsx
-var g = {
+var v = {
 	dialogContent: {
 		maxWidth: "450px",
 		width: "95vw",
@@ -18,7 +20,7 @@ var g = {
 		alignItems: "center",
 		gap: "12px",
 		padding: "20px 24px",
-		borderBottom: "1px solid var(--color-border)",
+		borderBottom: "1px solid var(--color-border-subtle)",
 		backgroundColor: "var(--color-bg-sunken)"
 	},
 	iconWrapper: {
@@ -45,34 +47,6 @@ var g = {
 		margin: "4px 0 0 0"
 	},
 	content: { padding: "20px 24px" },
-	dashboardInfo: {
-		padding: "12px 16px",
-		backgroundColor: "var(--color-bg-muted)",
-		borderRadius: "8px",
-		marginBottom: "20px"
-	},
-	dashboardLabel: {
-		fontSize: "12px",
-		color: "var(--color-text-secondary)",
-		margin: 0
-	},
-	dashboardName: {
-		fontSize: "14px",
-		fontWeight: 500,
-		color: "var(--color-text-primary)",
-		margin: "4px 0 0 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",
@@ -81,7 +55,7 @@ var g = {
 		borderRadius: "8px",
 		marginBottom: "8px",
 		backgroundColor: "var(--color-bg-sunken)",
-		border: "1px solid var(--color-border)",
+		border: "1px solid var(--color-border-subtle)",
 		cursor: "pointer",
 		transition: "all 0.15s ease"
 	},
@@ -93,7 +67,7 @@ var g = {
 		width: "20px",
 		height: "20px",
 		borderRadius: "4px",
-		border: "2px solid var(--color-border)",
+		border: "2px solid var(--color-border-subtle)",
 		display: "flex",
 		alignItems: "center",
 		justifyContent: "center",
@@ -118,24 +92,12 @@ 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)",
-		margin: 0
-	},
 	footer: {
 		display: "flex",
 		justifyContent: "flex-end",
 		gap: "12px",
 		padding: "16px 24px",
-		borderTop: "1px solid var(--color-border)",
+		borderTop: "1px solid var(--color-border-subtle)",
 		backgroundColor: "var(--color-bg-sunken)"
 	},
 	cancelButton: {
@@ -143,7 +105,7 @@ var g = {
 		fontSize: "14px",
 		fontWeight: 500,
 		borderRadius: "8px",
-		border: "1px solid var(--color-border)",
+		border: "1px solid var(--color-border-subtle)",
 		backgroundColor: "var(--color-bg-surface)",
 		color: "var(--color-text-secondary)",
 		cursor: "pointer",
@@ -168,141 +130,145 @@ var g = {
 		opacity: .5,
 		cursor: "not-allowed"
 	}
-}, _ = t(function({ checked: e, onChange: t, disabled: n, label: r, description: i }) {
-	return /* @__PURE__ */ h("div", {
+}, y = r(function({ checked: e, onChange: t, disabled: n, label: r, description: i }) {
+	return /* @__PURE__ */ _("div", {
 		style: {
-			...g.optionItem,
-			...e ? g.optionItemActive : {},
+			...v.optionItem,
+			...e ? v.optionItemActive : {},
 			opacity: n ? .6 : 1,
 			cursor: n ? "not-allowed" : "pointer"
 		},
 		onClick: () => !n && t(!e),
-		children: [/* @__PURE__ */ m("div", {
+		children: [/* @__PURE__ */ g("div", {
 			style: {
-				...g.checkbox,
-				...e ? g.checkboxChecked : {}
+				...v.checkbox,
+				...e ? v.checkboxChecked : {}
 			},
-			children: e && /* @__PURE__ */ m(a, { style: {
+			children: e && /* @__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,
+		}), /* @__PURE__ */ _("div", {
+			style: v.optionText,
+			children: [/* @__PURE__ */ g("p", {
+				style: v.optionLabel,
 				children: r
-			}), /* @__PURE__ */ m("p", {
-				style: g.optionDescription,
+			}), /* @__PURE__ */ g("p", {
+				style: v.optionDescription,
 				children: i
 			})]
 		})]
 	});
-}), v = t(function({ isOpen: t, dashboardId: a, dashboardName: v, onClose: y, onSuccess: b }) {
-	let [x, S] = i(!0), [C, w] = i(!1), [T, E] = i(!0), { loading: D, error: O, downloadDashboard: k, clearError: A } = e();
-	r(() => {
-		t && (S(!0), w(!1), E(!0), A());
-	}, [t, A]);
-	let j = n(async () => {
-		a && await k(a, v, {
-			includeDataSourceRefs: x,
-			includeWebhookMappings: C,
-			prettyPrint: T
-		}) && (b?.(), y());
+}), b = r(function({ isOpen: r, dashboardId: s, dashboardName: b, onClose: x, onSuccess: S }) {
+	let [C, w] = o(!0), [T, E] = o(!1), [D, O] = o(!0), { loading: k, error: A, downloadDashboard: j, clearError: M } = n();
+	a(() => {
+		r && (w(!0), E(!1), O(!0), M());
+	}, [r, M]);
+	let N = i(async () => {
+		s && await j(s, b, {
+			includeDataSourceRefs: C,
+			includeWebhookMappings: T,
+			prettyPrint: D
+		}) && (S?.(), x());
 	}, [
-		a,
-		v,
-		x,
+		s,
+		b,
 		C,
 		T,
-		k,
-		b,
-		y
+		D,
+		j,
+		S,
+		x
 	]);
-	return a ? /* @__PURE__ */ m(c, {
-		open: t,
-		onOpenChange: (e) => !e && !D && y(),
-		children: /* @__PURE__ */ h(l, {
-			style: g.dialogContent,
+	return s ? /* @__PURE__ */ g(u, {
+		open: r,
+		onOpenChange: (e) => !e && !k && 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 Dashboard"
 							})
-						}), /* @__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 dashboard configuration to a JSON file."
 							})
 						})]
 					})]
 				}),
-				/* @__PURE__ */ h("div", {
-					style: g.content,
-					children: [
-						v && /* @__PURE__ */ h("div", {
-							style: g.dashboardInfo,
-							children: [/* @__PURE__ */ m("p", {
-								style: g.dashboardLabel,
-								children: "Exporting:"
-							}), /* @__PURE__ */ m("p", {
-								style: g.dashboardName,
-								children: v
-							})]
-						}),
-						/* @__PURE__ */ m("p", {
-							style: g.optionsTitle,
-							children: "Export Options"
+				/* @__PURE__ */ g("div", {
+					style: v.content,
+					children: /* @__PURE__ */ _(t, { children: [
+						b && /* @__PURE__ */ g(e, {
+							headingLevel: 3,
+							emphasis: "muted",
+							padding: "compact",
+							title: "Exporting",
+							description: b,
+							"data-testid": "export-target"
 						}),
-						/* @__PURE__ */ m(_, {
-							checked: x,
-							onChange: S,
-							disabled: D,
-							label: "Include Data Source References",
-							description: "Store data source names for reference (IDs are not transferred)"
+						/* @__PURE__ */ _(e, {
+							headingLevel: 3,
+							title: "Export options",
+							description: "What to include in the JSON file.",
+							"data-testid": "export-options",
+							bodyClassName: "flex flex-col gap-form-gap",
+							children: [
+								/* @__PURE__ */ g(y, {
+									checked: C,
+									onChange: w,
+									disabled: k,
+									label: "Include Data Source References",
+									description: "Store data source names for reference (IDs are not transferred)"
+								}),
+								/* @__PURE__ */ g(y, {
+									checked: T,
+									onChange: E,
+									disabled: k,
+									label: "Include Webhook Mappings",
+									description: "Export webhook configurations (URLs will need to be reconfigured)"
+								}),
+								/* @__PURE__ */ g(y, {
+									checked: D,
+									onChange: O,
+									disabled: k,
+									label: "Format JSON (Pretty Print)",
+									description: "Makes the export file human-readable (larger file size)"
+								})
+							]
 						}),
-						/* @__PURE__ */ m(_, {
-							checked: C,
-							onChange: w,
-							disabled: D,
-							label: "Include Webhook Mappings",
-							description: "Export webhook configurations (URLs will need to be reconfigured)"
-						}),
-						/* @__PURE__ */ m(_, {
-							checked: T,
-							onChange: E,
-							disabled: D,
-							label: "Format JSON (Pretty Print)",
-							description: "Makes the export file human-readable (larger file size)"
-						}),
-						O && /* @__PURE__ */ m("div", {
-							style: g.error,
-							children: /* @__PURE__ */ m("p", {
-								style: g.errorText,
-								children: O.message
-							})
+						A && /* @__PURE__ */ g(e, {
+							headingLevel: 3,
+							tone: "danger",
+							padding: "compact",
+							title: "Export failed",
+							description: A.message,
+							"data-testid": "export-error"
 						})
-					]
+					] })
 				}),
-				/* @__PURE__ */ h("div", {
-					style: g.footer,
-					children: [/* @__PURE__ */ m("button", {
-						style: g.cancelButton,
-						onClick: y,
-						disabled: D,
+				/* @__PURE__ */ _("div", {
+					style: v.footer,
+					children: [/* @__PURE__ */ g("button", {
+						style: v.cancelButton,
+						onClick: x,
+						disabled: k,
 						onMouseEnter: (e) => {
 							e.currentTarget.style.backgroundColor = "var(--color-bg-muted)";
 						},
@@ -310,23 +276,23 @@ var g = {
 							e.currentTarget.style.backgroundColor = "var(--color-bg-surface)";
 						},
 						children: "Cancel"
-					}), /* @__PURE__ */ m("button", {
+					}), /* @__PURE__ */ g("button", {
 						style: {
-							...g.exportButton,
-							...D ? g.exportButtonDisabled : {}
+							...v.exportButton,
+							...k ? v.exportButtonDisabled : {}
 						},
-						onClick: j,
-						disabled: D,
+						onClick: N,
+						disabled: k,
 						onMouseEnter: (e) => {
-							D || (e.currentTarget.style.opacity = "0.9");
+							k || (e.currentTarget.style.opacity = "0.9");
 						},
 						onMouseLeave: (e) => {
-							D || (e.currentTarget.style.opacity = "1");
+							k || (e.currentTarget.style.opacity = "1");
 						},
-						children: D ? /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(f, { style: {
+						children: k ? /* @__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"] })
@@ -337,6 +303,6 @@ var g = {
 	}) : null;
 });
 //#endregion
-export { v as default };
+export { b as default };
 
 //# sourceMappingURL=ExportDashboardDialog.js.map

package/dist/bigconsole/components/dashboard/ExportDashboardDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExportDashboardDialog.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/ExportDashboardDialog.tsx"],"sourcesContent":["/**\n * ExportDashboardDialog Component\n *\n * Modal dialog for exporting a dashboard to JSON.\n * Uses inline styles for consistent styling across environments.\n */\n\nimport { type FC, memo, useState, useCallback, useEffect } from 'react';\nimport { Dialog, DialogContent, DialogTitle, DialogDescription } from '@burdenoff/fe-libs/ui';\nimport { Spinner } from '@burdenoff/fe-libs/ui';\nimport { Download, FileJson, Check } from 'lucide-react';\nimport { useExportDashboard, type ExportDashboardOptions } from '../../hooks';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ExportDashboardDialogProps {\n  /** Whether dialog is open */\n  isOpen: boolean;\n  /** Dashboard ID to export */\n  dashboardId: string | null;\n  /** Dashboard name for filename */\n  dashboardName?: string;\n  /** Callback when dialog is closed */\n  onClose: () => void;\n  /** Callback when export succeeds */\n  onSuccess?: () => void;\n}\n\n// ============================================================================\n// Styles\n// ============================================================================\n\nconst styles = {\n  dialogContent: {\n    maxWidth: '450px',\n    width: '95vw',\n    padding: 0,\n    borderRadius: '12px',\n    overflow: 'hidden',\n  } as React.CSSProperties,\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '12px',\n    padding: '20px 24px',\n    borderBottom: '1px solid var(--color-border)',\n    backgroundColor: 'var(--color-bg-sunken)',\n  } as React.CSSProperties,\n  iconWrapper: {\n    width: '44px',\n    height: '44px',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: '10px',\n    backgroundColor: 'var(--color-action-primary-bg)',\n    color: 'var(--color-action-primary-text)',\n    flexShrink: 0,\n  } as React.CSSProperties,\n  headerText: {\n    flex: 1,\n  } as React.CSSProperties,\n  title: {\n    fontSize: '16px',\n    fontWeight: 600,\n    color: 'var(--color-text-primary)',\n    margin: 0,\n  } as React.CSSProperties,\n  description: {\n    fontSize: '13px',\n    color: 'var(--color-text-secondary)',\n    margin: '4px 0 0 0',\n  } as React.CSSProperties,\n  content: {\n    padding: '20px 24px',\n  } as React.CSSProperties,\n  dashboardInfo: {\n    padding: '12px 16px',\n    backgroundColor: 'var(--color-bg-muted)',\n    borderRadius: '8px',\n    marginBottom: '20px',\n  } as React.CSSProperties,\n  dashboardLabel: {\n    fontSize: '12px',\n    color: 'var(--color-text-secondary)',\n    margin: 0,\n  } as React.CSSProperties,\n  dashboardName: {\n    fontSize: '14px',\n    fontWeight: 500,\n    color: 'var(--color-text-primary)',\n    margin: '4px 0 0 0',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  } as React.CSSProperties,\n  optionsTitle: {\n    fontSize: '13px',\n    fontWeight: 600,\n    color: 'var(--color-text-secondary)',\n    marginBottom: '16px',\n    textTransform: 'uppercase',\n    letterSpacing: '0.05em',\n  } as React.CSSProperties,\n  optionItem: {\n    display: 'flex',\n    alignItems: 'flex-start',\n    gap: '12px',\n    padding: '12px',\n    borderRadius: '8px',\n    marginBottom: '8px',\n    backgroundColor: 'var(--color-bg-sunken)',\n    border: '1px solid var(--color-border)',\n    cursor: 'pointer',\n    transition: 'all 0.15s ease',\n  } as React.CSSProperties,\n  optionItemActive: {\n    backgroundColor: 'var(--color-action-primary-bg)',\n    borderColor: 'var(--color-action-primary-bg)',\n  } as React.CSSProperties,\n  checkbox: {\n    width: '20px',\n    height: '20px',\n    borderRadius: '4px',\n    border: '2px solid var(--color-border)',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n    marginTop: '2px',\n    transition: 'all 0.15s ease',\n    cursor: 'pointer',\n  } as React.CSSProperties,\n  checkboxChecked: {\n    backgroundColor: 'var(--color-action-primary-bg)',\n    borderColor: 'var(--color-action-primary-bg)',\n  } as React.CSSProperties,\n  optionText: {\n    flex: 1,\n  } as React.CSSProperties,\n  optionLabel: {\n    fontSize: '14px',\n    fontWeight: 500,\n    color: 'var(--color-text-primary)',\n    margin: 0,\n  } as React.CSSProperties,\n  optionDescription: {\n    fontSize: '12px',\n    color: 'var(--color-text-secondary)',\n    margin: '4px 0 0 0',\n  } as React.CSSProperties,\n  error: {\n    padding: '12px 16px',\n    backgroundColor: 'var(--color-status-error-bgSubtle)',\n    border: '1px solid var(--color-status-error-border)',\n    borderRadius: '8px',\n    marginTop: '16px',\n  } as React.CSSProperties,\n  errorText: {\n    fontSize: '13px',\n    color: 'var(--color-status-error-text)',\n    margin: 0,\n  } as React.CSSProperties,\n  footer: {\n    display: 'flex',\n    justifyContent: 'flex-end',\n    gap: '12px',\n    padding: '16px 24px',\n    borderTop: '1px solid var(--color-border)',\n    backgroundColor: 'var(--color-bg-sunken)',\n  } as React.CSSProperties,\n  cancelButton: {\n    padding: '10px 20px',\n    fontSize: '14px',\n    fontWeight: 500,\n    borderRadius: '8px',\n    border: '1px solid var(--color-border)',\n    backgroundColor: 'var(--color-bg-surface)',\n    color: 'var(--color-text-secondary)',\n    cursor: 'pointer',\n    transition: 'all 0.15s ease',\n  } as React.CSSProperties,\n  exportButton: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px',\n    padding: '10px 20px',\n    fontSize: '14px',\n    fontWeight: 500,\n    borderRadius: '8px',\n    border: 'none',\n    backgroundColor: 'var(--color-action-primary-bg)',\n    color: 'var(--color-action-primary-text)',\n    cursor: 'pointer',\n    transition: 'all 0.15s ease',\n  } as React.CSSProperties,\n  exportButtonDisabled: {\n    backgroundColor: 'var(--color-action-primary-bg)',\n    opacity: 0.5,\n    cursor: 'not-allowed',\n  } as React.CSSProperties,\n};\n\n// ============================================================================\n// Custom Checkbox Component\n// ============================================================================\n\ninterface CustomCheckboxProps {\n  checked: boolean;\n  onChange: (checked: boolean) => void;\n  disabled?: boolean;\n  label: string;\n  description: string;\n}\n\nconst CustomCheckbox: FC<CustomCheckboxProps> = memo(function CustomCheckbox({\n  checked,\n  onChange,\n  disabled,\n  label,\n  description,\n}) {\n  return (\n    <div\n      style={{\n        ...styles.optionItem,\n        ...(checked ? styles.optionItemActive : {}),\n        opacity: disabled ? 0.6 : 1,\n        cursor: disabled ? 'not-allowed' : 'pointer',\n      }}\n      onClick={() => !disabled && onChange(!checked)}\n    >\n      <div\n        style={{\n          ...styles.checkbox,\n          ...(checked ? styles.checkboxChecked : {}),\n        }}\n      >\n        {checked && <Check style={{ width: '14px', height: '14px', color: 'var(--color-action-primary-text)' }} />}\n      </div>\n      <div style={styles.optionText}>\n        <p style={styles.optionLabel}>{label}</p>\n        <p style={styles.optionDescription}>{description}</p>\n      </div>\n    </div>\n  );\n});\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const ExportDashboardDialog: FC<ExportDashboardDialogProps> = memo(function ExportDashboardDialog({\n  isOpen,\n  dashboardId,\n  dashboardName,\n  onClose,\n  onSuccess,\n}) {\n  const [includeDataSources, setIncludeDataSources] = useState(true);\n  const [includeWebhooks, setIncludeWebhooks] = useState(false);\n  const [prettyPrint, setPrettyPrint] = useState(true);\n\n  const { loading, error, downloadDashboard, clearError } = useExportDashboard();\n\n  // Reset state when dialog opens\n  useEffect(() => {\n    if (isOpen) {\n      setIncludeDataSources(true);\n      setIncludeWebhooks(false);\n      setPrettyPrint(true);\n      clearError();\n    }\n  }, [isOpen, clearError]);\n\n  // Handle export\n  const handleExport = useCallback(async () => {\n    if (!dashboardId) return;\n\n    const options: ExportDashboardOptions = {\n      includeDataSourceRefs: includeDataSources,\n      includeWebhookMappings: includeWebhooks,\n      prettyPrint,\n    };\n\n    const success = await downloadDashboard(dashboardId, dashboardName, options);\n\n    if (success) {\n      onSuccess?.();\n      onClose();\n    }\n  }, [\n    dashboardId,\n    dashboardName,\n    includeDataSources,\n    includeWebhooks,\n    prettyPrint,\n    downloadDashboard,\n    onSuccess,\n    onClose,\n  ]);\n\n  // Don't render if no dashboard\n  if (!dashboardId) return null;\n\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && !loading && onClose()}>\n      <DialogContent style={styles.dialogContent}>\n        {/* Header */}\n        <div style={styles.header}>\n          <div style={styles.iconWrapper}>\n            <FileJson style={{ width: '22px', height: '22px' }} />\n          </div>\n          <div style={styles.headerText}>\n            <DialogTitle asChild>\n              <h2 style={styles.title}>Export Dashboard</h2>\n            </DialogTitle>\n            <DialogDescription asChild>\n              <p style={styles.description}>Export your dashboard configuration to a JSON file.</p>\n            </DialogDescription>\n          </div>\n        </div>\n\n        {/* Content */}\n        <div style={styles.content}>\n          {/* Dashboard Info */}\n          {dashboardName && (\n            <div style={styles.dashboardInfo}>\n              <p style={styles.dashboardLabel}>Exporting:</p>\n              <p style={styles.dashboardName}>{dashboardName}</p>\n            </div>\n          )}\n\n          {/* Options */}\n          <p style={styles.optionsTitle}>Export Options</p>\n\n          <CustomCheckbox\n            checked={includeDataSources}\n            onChange={setIncludeDataSources}\n            disabled={loading}\n            label=\"Include Data Source References\"\n            description=\"Store data source names for reference (IDs are not transferred)\"\n          />\n\n          <CustomCheckbox\n            checked={includeWebhooks}\n            onChange={setIncludeWebhooks}\n            disabled={loading}\n            label=\"Include Webhook Mappings\"\n            description=\"Export webhook configurations (URLs will need to be reconfigured)\"\n          />\n\n          <CustomCheckbox\n            checked={prettyPrint}\n            onChange={setPrettyPrint}\n            disabled={loading}\n            label=\"Format JSON (Pretty Print)\"\n            description=\"Makes the export file human-readable (larger file size)\"\n          />\n\n          {/* Error */}\n          {error && (\n            <div style={styles.error}>\n              <p style={styles.errorText}>{error.message}</p>\n            </div>\n          )}\n        </div>\n\n        {/* Footer */}\n        <div style={styles.footer}>\n          <button\n            style={styles.cancelButton}\n            onClick={onClose}\n            disabled={loading}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.backgroundColor = 'var(--color-bg-muted)';\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.backgroundColor = 'var(--color-bg-surface)';\n            }}\n          >\n            Cancel\n          </button>\n          <button\n            style={{\n              ...styles.exportButton,\n              ...(loading ? styles.exportButtonDisabled : {}),\n            }}\n            onClick={handleExport}\n            disabled={loading}\n            onMouseEnter={(e) => {\n              if (!loading) e.currentTarget.style.opacity = '0.9';\n            }}\n            onMouseLeave={(e) => {\n              if (!loading) e.currentTarget.style.opacity = '1';\n            }}\n          >\n            {loading ? (\n              <>\n                <Spinner style={{ width: '16px', height: '16px' }} />\n                Exporting...\n              </>\n            ) : (\n              <>\n                <Download style={{ width: '16px', height: '16px' }} />\n                Download Export\n              </>\n            )}\n          </button>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n});\n\nexport default ExportDashboardDialog;\n"],"mappings":"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"}
+{"version":3,"file":"ExportDashboardDialog.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/ExportDashboardDialog.tsx"],"sourcesContent":["/**\n * ExportDashboardDialog Component\n *\n * Modal dialog for exporting a dashboard to JSON.\n * Uses inline styles for consistent styling across environments.\n */\n\nimport { type FC, memo, useState, useCallback, useEffect } from 'react';\nimport { Dialog, DialogContent, DialogTitle, DialogDescription } from '@burdenoff/fe-libs/ui';\nimport { Spinner } from '@burdenoff/fe-libs/ui';\nimport { Download, FileJson, Check } from 'lucide-react';\nimport { Section, SectionStack } from '../common';\nimport { useExportDashboard, type ExportDashboardOptions } from '../../hooks';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ExportDashboardDialogProps {\n  /** Whether dialog is open */\n  isOpen: boolean;\n  /** Dashboard ID to export */\n  dashboardId: string | null;\n  /** Dashboard name for filename */\n  dashboardName?: string;\n  /** Callback when dialog is closed */\n  onClose: () => void;\n  /** Callback when export succeeds */\n  onSuccess?: () => void;\n}\n\n// ============================================================================\n// Styles\n// ============================================================================\n\nconst styles = {\n  dialogContent: {\n    maxWidth: '450px',\n    width: '95vw',\n    padding: 0,\n    borderRadius: '12px',\n    overflow: 'hidden',\n  } as React.CSSProperties,\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '12px',\n    padding: '20px 24px',\n    borderBottom: '1px solid var(--color-border-subtle)',\n    backgroundColor: 'var(--color-bg-sunken)',\n  } as React.CSSProperties,\n  iconWrapper: {\n    width: '44px',\n    height: '44px',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: '10px',\n    backgroundColor: 'var(--color-action-primary-bg)',\n    color: 'var(--color-action-primary-text)',\n    flexShrink: 0,\n  } as React.CSSProperties,\n  headerText: {\n    flex: 1,\n  } as React.CSSProperties,\n  title: {\n    fontSize: '16px',\n    fontWeight: 600,\n    color: 'var(--color-text-primary)',\n    margin: 0,\n  } as React.CSSProperties,\n  description: {\n    fontSize: '13px',\n    color: 'var(--color-text-secondary)',\n    margin: '4px 0 0 0',\n  } as React.CSSProperties,\n  content: {\n    padding: '20px 24px',\n  } as React.CSSProperties,\n  optionItem: {\n    display: 'flex',\n    alignItems: 'flex-start',\n    gap: '12px',\n    padding: '12px',\n    borderRadius: '8px',\n    marginBottom: '8px',\n    backgroundColor: 'var(--color-bg-sunken)',\n    border: '1px solid var(--color-border-subtle)',\n    cursor: 'pointer',\n    transition: 'all 0.15s ease',\n  } as React.CSSProperties,\n  optionItemActive: {\n    backgroundColor: 'var(--color-action-primary-bg)',\n    borderColor: 'var(--color-action-primary-bg)',\n  } as React.CSSProperties,\n  checkbox: {\n    width: '20px',\n    height: '20px',\n    borderRadius: '4px',\n    border: '2px solid var(--color-border-subtle)',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n    marginTop: '2px',\n    transition: 'all 0.15s ease',\n    cursor: 'pointer',\n  } as React.CSSProperties,\n  checkboxChecked: {\n    backgroundColor: 'var(--color-action-primary-bg)',\n    borderColor: 'var(--color-action-primary-bg)',\n  } as React.CSSProperties,\n  optionText: {\n    flex: 1,\n  } as React.CSSProperties,\n  optionLabel: {\n    fontSize: '14px',\n    fontWeight: 500,\n    color: 'var(--color-text-primary)',\n    margin: 0,\n  } as React.CSSProperties,\n  optionDescription: {\n    fontSize: '12px',\n    color: 'var(--color-text-secondary)',\n    margin: '4px 0 0 0',\n  } as React.CSSProperties,\n  footer: {\n    display: 'flex',\n    justifyContent: 'flex-end',\n    gap: '12px',\n    padding: '16px 24px',\n    borderTop: '1px solid var(--color-border-subtle)',\n    backgroundColor: 'var(--color-bg-sunken)',\n  } as React.CSSProperties,\n  cancelButton: {\n    padding: '10px 20px',\n    fontSize: '14px',\n    fontWeight: 500,\n    borderRadius: '8px',\n    border: '1px solid var(--color-border-subtle)',\n    backgroundColor: 'var(--color-bg-surface)',\n    color: 'var(--color-text-secondary)',\n    cursor: 'pointer',\n    transition: 'all 0.15s ease',\n  } as React.CSSProperties,\n  exportButton: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px',\n    padding: '10px 20px',\n    fontSize: '14px',\n    fontWeight: 500,\n    borderRadius: '8px',\n    border: 'none',\n    backgroundColor: 'var(--color-action-primary-bg)',\n    color: 'var(--color-action-primary-text)',\n    cursor: 'pointer',\n    transition: 'all 0.15s ease',\n  } as React.CSSProperties,\n  exportButtonDisabled: {\n    backgroundColor: 'var(--color-action-primary-bg)',\n    opacity: 0.5,\n    cursor: 'not-allowed',\n  } as React.CSSProperties,\n};\n\n// ============================================================================\n// Custom Checkbox Component\n// ============================================================================\n\ninterface CustomCheckboxProps {\n  checked: boolean;\n  onChange: (checked: boolean) => void;\n  disabled?: boolean;\n  label: string;\n  description: string;\n}\n\nconst CustomCheckbox: FC<CustomCheckboxProps> = memo(function CustomCheckbox({\n  checked,\n  onChange,\n  disabled,\n  label,\n  description,\n}) {\n  return (\n    <div\n      style={{\n        ...styles.optionItem,\n        ...(checked ? styles.optionItemActive : {}),\n        opacity: disabled ? 0.6 : 1,\n        cursor: disabled ? 'not-allowed' : 'pointer',\n      }}\n      onClick={() => !disabled && onChange(!checked)}\n    >\n      <div\n        style={{\n          ...styles.checkbox,\n          ...(checked ? styles.checkboxChecked : {}),\n        }}\n      >\n        {checked && <Check style={{ width: '14px', height: '14px', color: 'var(--color-action-primary-text)' }} />}\n      </div>\n      <div style={styles.optionText}>\n        <p style={styles.optionLabel}>{label}</p>\n        <p style={styles.optionDescription}>{description}</p>\n      </div>\n    </div>\n  );\n});\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const ExportDashboardDialog: FC<ExportDashboardDialogProps> = memo(function ExportDashboardDialog({\n  isOpen,\n  dashboardId,\n  dashboardName,\n  onClose,\n  onSuccess,\n}) {\n  const [includeDataSources, setIncludeDataSources] = useState(true);\n  const [includeWebhooks, setIncludeWebhooks] = useState(false);\n  const [prettyPrint, setPrettyPrint] = useState(true);\n\n  const { loading, error, downloadDashboard, clearError } = useExportDashboard();\n\n  // Reset state when dialog opens\n  useEffect(() => {\n    if (isOpen) {\n      setIncludeDataSources(true);\n      setIncludeWebhooks(false);\n      setPrettyPrint(true);\n      clearError();\n    }\n  }, [isOpen, clearError]);\n\n  // Handle export\n  const handleExport = useCallback(async () => {\n    if (!dashboardId) return;\n\n    const options: ExportDashboardOptions = {\n      includeDataSourceRefs: includeDataSources,\n      includeWebhookMappings: includeWebhooks,\n      prettyPrint,\n    };\n\n    const success = await downloadDashboard(dashboardId, dashboardName, options);\n\n    if (success) {\n      onSuccess?.();\n      onClose();\n    }\n  }, [\n    dashboardId,\n    dashboardName,\n    includeDataSources,\n    includeWebhooks,\n    prettyPrint,\n    downloadDashboard,\n    onSuccess,\n    onClose,\n  ]);\n\n  // Don't render if no dashboard\n  if (!dashboardId) return null;\n\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && !loading && onClose()}>\n      <DialogContent style={styles.dialogContent}>\n        {/* Header */}\n        <div style={styles.header}>\n          <div style={styles.iconWrapper}>\n            <FileJson style={{ width: '22px', height: '22px' }} />\n          </div>\n          <div style={styles.headerText}>\n            <DialogTitle asChild>\n              <h2 style={styles.title}>Export Dashboard</h2>\n            </DialogTitle>\n            <DialogDescription asChild>\n              <p style={styles.description}>Export your dashboard configuration to a JSON file.</p>\n            </DialogDescription>\n          </div>\n        </div>\n\n        {/* Content */}\n        <div style={styles.content}>\n          <SectionStack>\n            {/* What is being exported — supporting context, recessed. */}\n            {dashboardName && (\n              <Section\n                headingLevel={3}\n                emphasis=\"muted\"\n                padding=\"compact\"\n                title=\"Exporting\"\n                description={dashboardName}\n                data-testid=\"export-target\"\n              />\n            )}\n\n            {/* The choices you actually make here — one bounded group instead of\n                a floating label above three unbounded rows. */}\n            <Section\n              headingLevel={3}\n              title=\"Export options\"\n              description=\"What to include in the JSON file.\"\n              data-testid=\"export-options\"\n              bodyClassName=\"flex flex-col gap-form-gap\"\n            >\n              <CustomCheckbox\n                checked={includeDataSources}\n                onChange={setIncludeDataSources}\n                disabled={loading}\n                label=\"Include Data Source References\"\n                description=\"Store data source names for reference (IDs are not transferred)\"\n              />\n\n              <CustomCheckbox\n                checked={includeWebhooks}\n                onChange={setIncludeWebhooks}\n                disabled={loading}\n                label=\"Include Webhook Mappings\"\n                description=\"Export webhook configurations (URLs will need to be reconfigured)\"\n              />\n\n              <CustomCheckbox\n                checked={prettyPrint}\n                onChange={setPrettyPrint}\n                disabled={loading}\n                label=\"Format JSON (Pretty Print)\"\n                description=\"Makes the export file human-readable (larger file size)\"\n              />\n            </Section>\n\n            {/* Error */}\n            {error && (\n              <Section\n                headingLevel={3}\n                tone=\"danger\"\n                padding=\"compact\"\n                title=\"Export failed\"\n                description={error.message}\n                data-testid=\"export-error\"\n              />\n            )}\n          </SectionStack>\n        </div>\n\n        {/* Footer */}\n        <div style={styles.footer}>\n          <button\n            style={styles.cancelButton}\n            onClick={onClose}\n            disabled={loading}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.backgroundColor = 'var(--color-bg-muted)';\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.backgroundColor = 'var(--color-bg-surface)';\n            }}\n          >\n            Cancel\n          </button>\n          <button\n            style={{\n              ...styles.exportButton,\n              ...(loading ? styles.exportButtonDisabled : {}),\n            }}\n            onClick={handleExport}\n            disabled={loading}\n            onMouseEnter={(e) => {\n              if (!loading) e.currentTarget.style.opacity = '0.9';\n            }}\n            onMouseLeave={(e) => {\n              if (!loading) e.currentTarget.style.opacity = '1';\n            }}\n          >\n            {loading ? (\n              <>\n                <Spinner style={{ width: '16px', height: '16px' }} />\n                Exporting...\n              </>\n            ) : (\n              <>\n                <Download style={{ width: '16px', height: '16px' }} />\n                Download Export\n              </>\n            )}\n          </button>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n});\n\nexport default ExportDashboardDialog;\n"],"mappings":"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"}

package/dist/bigconsole/components/dashboard/GlobalFiltersBar/FilterChip.js

@@ -76,37 +76,37 @@ function d({ filter: u, value: d, onChange: p, onEdit: m, onDelete: h }) {
 			position: "relative",
 			display: "inline-flex",
 			alignItems: "center",
-			gap: "8px",
-			padding: "8px 16px",
-			backgroundColor: w ? C.actionPrimaryBgSubtle : C.bgPrimary,
-			border: `2px solid ${w ? C.actionPrimaryBg : C.textTertiary}`,
-			borderRadius: "24px",
-			fontSize: "15px",
+			gap: "var(--space-iconGap)",
+			padding: "0 var(--space-controlGap)",
+			backgroundColor: w ? "var(--color-bg-accentSubtle)" : "var(--color-bg-surface)",
+			border: `1px solid ${w ? "var(--color-action-primary-border)" : "var(--color-border-subtle)"}`,
+			borderRadius: "var(--radius-pill)",
+			fontSize: "var(--font-size-body-sm)",
 			cursor: "pointer",
 			userSelect: "none",
-			boxShadow: "0 2px 6px rgba(0,0,0,0.12)",
-			transition: "all 0.2s ease",
-			minHeight: "36px"
+			transition: "background-color 0.15s ease, border-color 0.15s ease",
+			minHeight: "var(--size-controlHeight-md)",
+			maxWidth: "100%"
 		},
 		children: [
 			/* @__PURE__ */ o("span", {
 				style: {
-					fontWeight: 700,
-					color: w ? C.actionPrimaryText : C.textPrimary,
-					fontSize: "14px"
+					fontWeight: "var(--font-weight-semibold)",
+					color: "var(--color-text-primary)",
+					fontSize: "var(--font-size-body-sm)"
 				},
 				onClick: () => v(!_),
 				children: [u.name, ":"]
 			}),
 			/* @__PURE__ */ a("span", {
 				style: {
-					color: w ? C.actionPrimaryBg : C.textSecondary,
-					maxWidth: "200px",
+					color: w ? "var(--color-text-primary)" : "var(--color-text-secondary)",
+					maxWidth: "min(200px, 45vw)",
 					overflow: "hidden",
 					textOverflow: "ellipsis",
 					whiteSpace: "nowrap",
-					fontWeight: 600,
-					fontSize: "14px"
+					fontWeight: "var(--font-weight-medium)",
+					fontSize: "var(--font-size-body-sm)"
 				},
 				onClick: () => v(!_),
 				children: T
@@ -130,7 +130,7 @@ function d({ filter: u, value: d, onChange: p, onEdit: m, onDelete: h }) {
 					fontSize: "14px",
 					fontWeight: "bold",
 					marginLeft: "4px",
-					boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
+					boxShadow: "var(--shadow-elevation-1)"
 				},
 				title: g("bigconsole.filters.chip.action.clear", "Clear filter"),
 				children: "×"
@@ -154,7 +154,7 @@ function d({ filter: u, value: d, onChange: p, onEdit: m, onDelete: h }) {
 					fontSize: "16px",
 					fontWeight: "bold",
 					marginLeft: "4px",
-					boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
+					boxShadow: "var(--shadow-elevation-1)"
 				},
 				title: g("bigconsole.filters.chip.action.options", "Filter options"),
 				children: "⋮"
@@ -186,11 +186,12 @@ function d({ filter: u, value: d, onChange: p, onEdit: m, onDelete: h }) {
 					top: "100%",
 					right: 0,
 					marginTop: "8px",
-					minWidth: "150px",
+					minWidth: "min(150px, calc(100vw - 2rem))",
+					maxWidth: "calc(100vw - 2rem)",
 					backgroundColor: C.bgPrimary,
 					border: `1px solid ${C.borderDefault}`,
 					borderRadius: "8px",
-					boxShadow: "0 8px 24px rgba(0,0,0,0.2)",
+					boxShadow: "var(--shadow-elevation-3)",
 					zIndex: 99999,
 					overflow: "hidden"
 				},
@@ -256,12 +257,13 @@ function f({ filter: e, value: t, onChange: l, onClose: u }) {
 			top: "100%",
 			left: 0,
 			marginTop: "8px",
-			minWidth: "280px",
+			minWidth: "min(280px, calc(100vw - 2rem))",
+			maxWidth: "calc(100vw - 2rem)",
 			padding: "16px",
 			backgroundColor: m.bgPrimary,
 			border: `1px solid ${m.borderDefault}`,
 			borderRadius: "12px",
-			boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
+			boxShadow: "var(--shadow-elevation-3)",
 			zIndex: 99999
 		},
 		onClick: (e) => e.stopPropagation(),
@@ -436,7 +438,7 @@ function f({ filter: e, value: t, onChange: l, onClose: u }) {
 						borderRadius: "6px",
 						cursor: "pointer",
 						fontWeight: 500,
-						boxShadow: "0 2px 4px rgba(99, 102, 241, 0.3)"
+						boxShadow: "var(--shadow-elevation-1)"
 					},
 					children: d("bigconsole.filters.chip.editor.apply", "Apply")
 				})]