@burdenoff/microfe-bigconsole 2026.624.1 → 2026.624.2

package/dist/bigconsole/BigConsoleRoutes.js

@@ -55,7 +55,7 @@ var K = o(function() {
 		}), /* @__PURE__ */ h("button", {
 			type: "button",
 			onClick: () => i("/workflows"),
-			className: "px-4 py-2 text-sm font-medium text-text-primary bg-bg-muted hover:bg-border-default rounded-md transition-colors",
+			className: "px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken hover:bg-border-default rounded-md transition-colors",
 			children: "Back to Workflows"
 		})]
 	}) : /* @__PURE__ */ h("div", {

package/dist/bigconsole/BigConsoleRoutes.js.map

@@ -1 +1 @@
-{"version":3,"file":"BigConsoleRoutes.js","names":[],"sources":["../../src/bigconsole/BigConsoleRoutes.tsx"],"sourcesContent":["import { lazy, Suspense, memo, useState, useMemo, useEffect, useRef } from 'react';\nimport { Route, Routes, Navigate, useParams } from 'react-router-dom';\nimport { type BigConsoleRootProps } from './types';\nimport { HomePage } from './pages/HomePage';\nimport { Spinner } from '@burdenoff/fe-libs/ui';\nimport { useAppNavigate } from './contexts';\nimport { useWorkflowOperations } from './hooks/useWorkflowOperations';\nimport { BOOTSTRAP_RETRY_DELAY_MS } from './constants';\n\n// Import FluidGrids SDK workflow components (EXACT same as microfe-workflows)\nimport {\n  WorkflowBuilderPage as SDKWorkflowBuilderPage,\n  ExecutionsListPage,\n  ExecutionDetailPage,\n  HistoryPage,\n  TemplatesPage,\n  NodesPage,\n  SettingsPage as WorkflowSettingsPage,\n} from '@burdenoff/fluidgrids-fe-sdk';\n\n// Lazy-loaded pages\nconst DashboardsPage = lazy(() => import('./pages/DashboardsPage'));\nconst DashboardViewPage = lazy(() => import('./pages/DashboardViewPage'));\nconst DashboardBuilderPage = lazy(() => import('./pages/DashboardBuilderPage'));\nconst DataSourcesPage = lazy(() => import('./pages/DataSourcesPage'));\nconst InsightsPage = lazy(() => import('./pages/InsightsPage'));\nconst SettingsPage = lazy(() => import('./pages/SettingsPage'));\nconst WidgetDemoPage = lazy(() => import('./pages/WidgetDemoPage'));\n// BigConsole-native workflow pages (query bigconsole-svc, not workflow-svc)\n// These use named exports (no default export), so we remap via .then()\nconst WorkflowsPage = lazy(() => import('./pages/WorkflowsPage').then((m) => ({ default: m.WorkflowsPage })));\nconst WorkflowViewPage = lazy(() => import('./pages/WorkflowViewPage').then((m) => ({ default: m.WorkflowViewPage })));\n// DataSink Pages\nconst DataSinksPage = lazy(() => import('./pages/DataSinksPage'));\nconst DataSinkViewPage = lazy(() => import('./pages/DataSinkViewPage'));\nconst DataSinkBuilderPage = lazy(() => import('./pages/DataSinkBuilderPage'));\n// Parser Pages\nconst DataParsersPage = lazy(() => import('./pages/DataParsersPage'));\nconst ParserViewPage = lazy(() => import('./pages/ParserViewPage'));\nconst ParserBuilderPage = lazy(() => import('./pages/ParserBuilderPage'));\n// Pipeline Pages\nconst PipelinesPage = lazy(() => import('./pages/PipelinesPage'));\nconst PipelineViewPage = lazy(() => import('./pages/PipelineViewPage'));\nconst PipelineBuilderPage = lazy(() => import('./pages/PipelineBuilderPage'));\n\n// Loading fallback component\nfunction PageLoader() {\n  return (\n    <div className=\"flex items-center justify-center min-h-[400px]\">\n      <Spinner className=\"h-8 w-8\" />\n    </div>\n  );\n}\n\n/** Generate a new workflow builder path with a fresh UUID key. */\nexport const newWorkflowPath = () => `/workflows/workflow/${crypto.randomUUID()}/v1`;\n\n/**\n * Redirect /workflows/new to a UUID-based URL.\n * Uses <Navigate> for synchronous redirect (no blank frame).\n */\nfunction WorkflowNewRedirect() {\n  const path = useMemo(() => newWorkflowPath(), []);\n  return <Navigate to={path} replace />;\n}\n\n/**\n * Bridge component: resolves a BigConsole workflow ID to its externalWorkflowId\n * and navigates to the SDK's visual builder route.\n *\n * Route: /workflows/:workflowId/edit\n * Redirects to: /workflows/workflow/{workflowKey}/v1\n */\nconst WorkflowEditBridge = memo(function WorkflowEditBridge() {\n  const { workflowId } = useParams<{ workflowId: string }>();\n  const navigate = useAppNavigate();\n  const { fetchWorkflow } = useWorkflowOperations({ skipFetch: true });\n  const [error, setError] = useState<string | null>(null);\n  const retryCount = useRef(0);\n\n  useEffect(() => {\n    if (!workflowId) {\n      setError('No workflow ID provided');\n      return;\n    }\n\n    // Reset retry budget and error when workflowId changes so a\n    // previous failed attempt doesn't consume the new workflow's retry.\n    retryCount.current = 0;\n    setError(null);\n    let cancelled = false;\n\n    const handleResult = (workflow: Awaited<ReturnType<typeof fetchWorkflow>>) => {\n      if (cancelled) return;\n\n      if (workflow?.key) {\n        // Navigate to the SDK builder route using the workflow key (e.g. \"github_user_profile\")\n        // and default version \"v1\". The FluidGrids SDK fetches the definition by workflowKey.\n        // Replace history so the bridge doesn't trap the back button.\n        navigate(`/workflows/workflow/${workflow.key}/v1`, { replace: true });\n      } else if (workflow) {\n        // Workflow exists but has no key — open SDK builder in create mode\n        navigate(`/workflows/builder`, { replace: true });\n      } else if (retryCount.current < 1) {\n        // On full-page loads the auth/workspace context may not be bootstrapped yet,\n        // causing a false null. Retry once after a short delay (same pattern as WorkflowViewPage).\n        retryCount.current += 1;\n        setTimeout(() => {\n          if (!cancelled) {\n            fetchWorkflow(workflowId)\n              .then(handleResult)\n              .catch((err) => {\n                if (!cancelled) setError(err?.message ?? 'Failed to load workflow');\n              });\n          }\n        }, BOOTSTRAP_RETRY_DELAY_MS);\n      } else {\n        setError('Workflow not found');\n      }\n    };\n\n    fetchWorkflow(workflowId)\n      .then(handleResult)\n      .catch((err) => {\n        if (!cancelled) setError(err?.message ?? 'Failed to load workflow');\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [workflowId, fetchWorkflow, navigate]);\n\n  if (error) {\n    return (\n      <div className=\"p-6 flex flex-col items-center justify-center min-h-[400px] text-center gap-4\">\n        <p className=\"text-sm text-text-secondary\">{error}</p>\n        <button\n          type=\"button\"\n          onClick={() => navigate('/workflows')}\n          className=\"px-4 py-2 text-sm font-medium text-text-primary bg-bg-muted hover:bg-border-default rounded-md transition-colors\"\n        >\n          Back to Workflows\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex items-center justify-center min-h-[400px]\">\n      <Spinner className=\"h-8 w-8\" />\n    </div>\n  );\n});\n\nexport function BigConsoleRoutes(_props: BigConsoleRootProps) {\n  return (\n    <Suspense fallback={<PageLoader />}>\n      <Routes>\n        <Route path=\"/\" element={<HomePage />} />\n        <Route path=\"/dashboards\" element={<DashboardsPage />} />\n        <Route path=\"/dashboards/:dashboardId\" element={<DashboardViewPage />} />\n        <Route path=\"/dashboards/:dashboardId/builder\" element={<DashboardBuilderPage />} />\n        <Route path=\"/datasources\" element={<DataSourcesPage />} />\n        <Route path=\"/insights\" element={<InsightsPage />} />\n        <Route path=\"/settings\" element={<SettingsPage />} />\n        <Route path=\"/widgets/demo\" element={<WidgetDemoPage />} />\n        {/* DataSink Routes */}\n        <Route path=\"/datasinks\" element={<DataSinksPage />} />\n        <Route path=\"/datasinks/new\" element={<DataSinkBuilderPage />} />\n        <Route path=\"/datasinks/:dataSinkId\" element={<DataSinkViewPage />} />\n        <Route path=\"/datasinks/:dataSinkId/edit\" element={<DataSinkBuilderPage />} />\n        {/* Parser Routes */}\n        <Route path=\"/parsers\" element={<DataParsersPage />} />\n        <Route path=\"/parsers/new\" element={<ParserBuilderPage />} />\n        <Route path=\"/parsers/:parserId\" element={<ParserViewPage />} />\n        <Route path=\"/parsers/:parserId/edit\" element={<ParserBuilderPage />} />\n        {/* Dashboard-scoped Parser Routes */}\n        <Route path=\"/dashboards/:consoleId/parsers\" element={<DataParsersPage />} />\n        <Route path=\"/dashboards/:consoleId/parsers/new\" element={<ParserBuilderPage />} />\n        <Route path=\"/dashboards/:consoleId/parsers/:parserId\" element={<ParserViewPage />} />\n        <Route path=\"/dashboards/:consoleId/parsers/:parserId/edit\" element={<ParserBuilderPage />} />\n        {/* Workflow Routes — list/view use BigConsole-native pages (query bigconsole-svc).\n            All static routes are grouped before the dynamic :workflowId catch-all.\n            React Router v6 prioritizes static segments regardless of declaration order,\n            but keeping them above the param routes makes intent unambiguous for maintainers. */}\n        <Route path=\"/workflows\" element={<WorkflowsPage />} />\n        <Route path=\"/workflows/list\" element={<WorkflowsPage />} />\n        {/* New workflow — redirect to UUID-based URL (matches FluidGrids pattern) */}\n        <Route path=\"/workflows/new\" element={<WorkflowNewRedirect />} />\n        {/* SDK visual workflow builder — design existing workflows */}\n        <Route path=\"/workflows/builder\" element={<SDKWorkflowBuilderPage />} />\n        <Route path=\"/workflows/builder/:id/:version\" element={<SDKWorkflowBuilderPage />} />\n        <Route path=\"/workflows/workflow/:id/:version\" element={<SDKWorkflowBuilderPage />} />\n        {/* SDK sub-pages (runs, history, templates, nodes, settings) */}\n        <Route path=\"/workflows/runs\" element={<ExecutionsListPage />} />\n        <Route path=\"/workflows/runs/:runId\" element={<ExecutionDetailPage />} />\n        <Route path=\"/workflows/history\" element={<HistoryPage />} />\n        <Route path=\"/workflows/templates\" element={<TemplatesPage />} />\n        <Route path=\"/workflows/nodes\" element={<NodesPage />} />\n        <Route path=\"/workflows/settings\" element={<WorkflowSettingsPage />} />\n        {/* Dynamic routes — :workflowId catch-all AFTER all static segments */}\n        <Route path=\"/workflows/:workflowId\" element={<WorkflowViewPage />} />\n        <Route path=\"/workflows/:workflowId/edit\" element={<WorkflowEditBridge />} />\n        {/* Support SDK's navigation pattern (without /workflows/ prefix) */}\n        <Route path=\"/workflow/:id/:version\" element={<SDKWorkflowBuilderPage />} />\n        {/* Redirect /list to /workflows/list (SDK uses relative navigation) */}\n        <Route path=\"/list\" element={<Navigate to=\"/bigconsole/workflows/list\" replace />} />\n        {/* Pipeline Routes */}\n        <Route path=\"/pipelines\" element={<PipelinesPage />} />\n        <Route path=\"/pipelines/new\" element={<PipelineBuilderPage />} />\n        <Route path=\"/pipelines/:pipelineId\" element={<PipelineViewPage />} />\n        <Route path=\"/pipelines/:pipelineId/edit\" element={<PipelineBuilderPage />} />\n      </Routes>\n    </Suspense>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"BigConsoleRoutes.js","names":[],"sources":["../../src/bigconsole/BigConsoleRoutes.tsx"],"sourcesContent":["import { lazy, Suspense, memo, useState, useMemo, useEffect, useRef } from 'react';\nimport { Route, Routes, Navigate, useParams } from 'react-router-dom';\nimport { type BigConsoleRootProps } from './types';\nimport { HomePage } from './pages/HomePage';\nimport { Spinner } from '@burdenoff/fe-libs/ui';\nimport { useAppNavigate } from './contexts';\nimport { useWorkflowOperations } from './hooks/useWorkflowOperations';\nimport { BOOTSTRAP_RETRY_DELAY_MS } from './constants';\n\n// Import FluidGrids SDK workflow components (EXACT same as microfe-workflows)\nimport {\n  WorkflowBuilderPage as SDKWorkflowBuilderPage,\n  ExecutionsListPage,\n  ExecutionDetailPage,\n  HistoryPage,\n  TemplatesPage,\n  NodesPage,\n  SettingsPage as WorkflowSettingsPage,\n} from '@burdenoff/fluidgrids-fe-sdk';\n\n// Lazy-loaded pages\nconst DashboardsPage = lazy(() => import('./pages/DashboardsPage'));\nconst DashboardViewPage = lazy(() => import('./pages/DashboardViewPage'));\nconst DashboardBuilderPage = lazy(() => import('./pages/DashboardBuilderPage'));\nconst DataSourcesPage = lazy(() => import('./pages/DataSourcesPage'));\nconst InsightsPage = lazy(() => import('./pages/InsightsPage'));\nconst SettingsPage = lazy(() => import('./pages/SettingsPage'));\nconst WidgetDemoPage = lazy(() => import('./pages/WidgetDemoPage'));\n// BigConsole-native workflow pages (query bigconsole-svc, not workflow-svc)\n// These use named exports (no default export), so we remap via .then()\nconst WorkflowsPage = lazy(() => import('./pages/WorkflowsPage').then((m) => ({ default: m.WorkflowsPage })));\nconst WorkflowViewPage = lazy(() => import('./pages/WorkflowViewPage').then((m) => ({ default: m.WorkflowViewPage })));\n// DataSink Pages\nconst DataSinksPage = lazy(() => import('./pages/DataSinksPage'));\nconst DataSinkViewPage = lazy(() => import('./pages/DataSinkViewPage'));\nconst DataSinkBuilderPage = lazy(() => import('./pages/DataSinkBuilderPage'));\n// Parser Pages\nconst DataParsersPage = lazy(() => import('./pages/DataParsersPage'));\nconst ParserViewPage = lazy(() => import('./pages/ParserViewPage'));\nconst ParserBuilderPage = lazy(() => import('./pages/ParserBuilderPage'));\n// Pipeline Pages\nconst PipelinesPage = lazy(() => import('./pages/PipelinesPage'));\nconst PipelineViewPage = lazy(() => import('./pages/PipelineViewPage'));\nconst PipelineBuilderPage = lazy(() => import('./pages/PipelineBuilderPage'));\n\n// Loading fallback component\nfunction PageLoader() {\n  return (\n    <div className=\"flex items-center justify-center min-h-[400px]\">\n      <Spinner className=\"h-8 w-8\" />\n    </div>\n  );\n}\n\n/** Generate a new workflow builder path with a fresh UUID key. */\nexport const newWorkflowPath = () => `/workflows/workflow/${crypto.randomUUID()}/v1`;\n\n/**\n * Redirect /workflows/new to a UUID-based URL.\n * Uses <Navigate> for synchronous redirect (no blank frame).\n */\nfunction WorkflowNewRedirect() {\n  const path = useMemo(() => newWorkflowPath(), []);\n  return <Navigate to={path} replace />;\n}\n\n/**\n * Bridge component: resolves a BigConsole workflow ID to its externalWorkflowId\n * and navigates to the SDK's visual builder route.\n *\n * Route: /workflows/:workflowId/edit\n * Redirects to: /workflows/workflow/{workflowKey}/v1\n */\nconst WorkflowEditBridge = memo(function WorkflowEditBridge() {\n  const { workflowId } = useParams<{ workflowId: string }>();\n  const navigate = useAppNavigate();\n  const { fetchWorkflow } = useWorkflowOperations({ skipFetch: true });\n  const [error, setError] = useState<string | null>(null);\n  const retryCount = useRef(0);\n\n  useEffect(() => {\n    if (!workflowId) {\n      setError('No workflow ID provided');\n      return;\n    }\n\n    // Reset retry budget and error when workflowId changes so a\n    // previous failed attempt doesn't consume the new workflow's retry.\n    retryCount.current = 0;\n    setError(null);\n    let cancelled = false;\n\n    const handleResult = (workflow: Awaited<ReturnType<typeof fetchWorkflow>>) => {\n      if (cancelled) return;\n\n      if (workflow?.key) {\n        // Navigate to the SDK builder route using the workflow key (e.g. \"github_user_profile\")\n        // and default version \"v1\". The FluidGrids SDK fetches the definition by workflowKey.\n        // Replace history so the bridge doesn't trap the back button.\n        navigate(`/workflows/workflow/${workflow.key}/v1`, { replace: true });\n      } else if (workflow) {\n        // Workflow exists but has no key — open SDK builder in create mode\n        navigate(`/workflows/builder`, { replace: true });\n      } else if (retryCount.current < 1) {\n        // On full-page loads the auth/workspace context may not be bootstrapped yet,\n        // causing a false null. Retry once after a short delay (same pattern as WorkflowViewPage).\n        retryCount.current += 1;\n        setTimeout(() => {\n          if (!cancelled) {\n            fetchWorkflow(workflowId)\n              .then(handleResult)\n              .catch((err) => {\n                if (!cancelled) setError(err?.message ?? 'Failed to load workflow');\n              });\n          }\n        }, BOOTSTRAP_RETRY_DELAY_MS);\n      } else {\n        setError('Workflow not found');\n      }\n    };\n\n    fetchWorkflow(workflowId)\n      .then(handleResult)\n      .catch((err) => {\n        if (!cancelled) setError(err?.message ?? 'Failed to load workflow');\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [workflowId, fetchWorkflow, navigate]);\n\n  if (error) {\n    return (\n      <div className=\"p-6 flex flex-col items-center justify-center min-h-[400px] text-center gap-4\">\n        <p className=\"text-sm text-text-secondary\">{error}</p>\n        <button\n          type=\"button\"\n          onClick={() => navigate('/workflows')}\n          className=\"px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken hover:bg-border-default rounded-md transition-colors\"\n        >\n          Back to Workflows\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex items-center justify-center min-h-[400px]\">\n      <Spinner className=\"h-8 w-8\" />\n    </div>\n  );\n});\n\nexport function BigConsoleRoutes(_props: BigConsoleRootProps) {\n  return (\n    <Suspense fallback={<PageLoader />}>\n      <Routes>\n        <Route path=\"/\" element={<HomePage />} />\n        <Route path=\"/dashboards\" element={<DashboardsPage />} />\n        <Route path=\"/dashboards/:dashboardId\" element={<DashboardViewPage />} />\n        <Route path=\"/dashboards/:dashboardId/builder\" element={<DashboardBuilderPage />} />\n        <Route path=\"/datasources\" element={<DataSourcesPage />} />\n        <Route path=\"/insights\" element={<InsightsPage />} />\n        <Route path=\"/settings\" element={<SettingsPage />} />\n        <Route path=\"/widgets/demo\" element={<WidgetDemoPage />} />\n        {/* DataSink Routes */}\n        <Route path=\"/datasinks\" element={<DataSinksPage />} />\n        <Route path=\"/datasinks/new\" element={<DataSinkBuilderPage />} />\n        <Route path=\"/datasinks/:dataSinkId\" element={<DataSinkViewPage />} />\n        <Route path=\"/datasinks/:dataSinkId/edit\" element={<DataSinkBuilderPage />} />\n        {/* Parser Routes */}\n        <Route path=\"/parsers\" element={<DataParsersPage />} />\n        <Route path=\"/parsers/new\" element={<ParserBuilderPage />} />\n        <Route path=\"/parsers/:parserId\" element={<ParserViewPage />} />\n        <Route path=\"/parsers/:parserId/edit\" element={<ParserBuilderPage />} />\n        {/* Dashboard-scoped Parser Routes */}\n        <Route path=\"/dashboards/:consoleId/parsers\" element={<DataParsersPage />} />\n        <Route path=\"/dashboards/:consoleId/parsers/new\" element={<ParserBuilderPage />} />\n        <Route path=\"/dashboards/:consoleId/parsers/:parserId\" element={<ParserViewPage />} />\n        <Route path=\"/dashboards/:consoleId/parsers/:parserId/edit\" element={<ParserBuilderPage />} />\n        {/* Workflow Routes — list/view use BigConsole-native pages (query bigconsole-svc).\n            All static routes are grouped before the dynamic :workflowId catch-all.\n            React Router v6 prioritizes static segments regardless of declaration order,\n            but keeping them above the param routes makes intent unambiguous for maintainers. */}\n        <Route path=\"/workflows\" element={<WorkflowsPage />} />\n        <Route path=\"/workflows/list\" element={<WorkflowsPage />} />\n        {/* New workflow — redirect to UUID-based URL (matches FluidGrids pattern) */}\n        <Route path=\"/workflows/new\" element={<WorkflowNewRedirect />} />\n        {/* SDK visual workflow builder — design existing workflows */}\n        <Route path=\"/workflows/builder\" element={<SDKWorkflowBuilderPage />} />\n        <Route path=\"/workflows/builder/:id/:version\" element={<SDKWorkflowBuilderPage />} />\n        <Route path=\"/workflows/workflow/:id/:version\" element={<SDKWorkflowBuilderPage />} />\n        {/* SDK sub-pages (runs, history, templates, nodes, settings) */}\n        <Route path=\"/workflows/runs\" element={<ExecutionsListPage />} />\n        <Route path=\"/workflows/runs/:runId\" element={<ExecutionDetailPage />} />\n        <Route path=\"/workflows/history\" element={<HistoryPage />} />\n        <Route path=\"/workflows/templates\" element={<TemplatesPage />} />\n        <Route path=\"/workflows/nodes\" element={<NodesPage />} />\n        <Route path=\"/workflows/settings\" element={<WorkflowSettingsPage />} />\n        {/* Dynamic routes — :workflowId catch-all AFTER all static segments */}\n        <Route path=\"/workflows/:workflowId\" element={<WorkflowViewPage />} />\n        <Route path=\"/workflows/:workflowId/edit\" element={<WorkflowEditBridge />} />\n        {/* Support SDK's navigation pattern (without /workflows/ prefix) */}\n        <Route path=\"/workflow/:id/:version\" element={<SDKWorkflowBuilderPage />} />\n        {/* Redirect /list to /workflows/list (SDK uses relative navigation) */}\n        <Route path=\"/list\" element={<Navigate to=\"/bigconsole/workflows/list\" replace />} />\n        {/* Pipeline Routes */}\n        <Route path=\"/pipelines\" element={<PipelinesPage />} />\n        <Route path=\"/pipelines/new\" element={<PipelineBuilderPage />} />\n        <Route path=\"/pipelines/:pipelineId\" element={<PipelineViewPage />} />\n        <Route path=\"/pipelines/:pipelineId/edit\" element={<PipelineBuilderPage />} />\n      </Routes>\n    </Suspense>\n  );\n}\n"],"mappings":"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"}

package/dist/bigconsole/components/DrilldownModal.js

@@ -29,14 +29,14 @@ var o = t(function({ renderDashboard: t, onClose: o }) {
 			onClick: (e) => e.stopPropagation(),
 			children: [
 				/* @__PURE__ */ a("div", {
-					className: "flex-shrink-0 flex items-center justify-between px-4 py-3 border-b border-border-default bg-bg-muted/50 rounded-t-xl",
+					className: "flex-shrink-0 flex items-center justify-between px-4 py-3 border-b border-border-default bg-bg-sunken/50 rounded-t-xl",
 					children: [/* @__PURE__ */ a("div", {
 						className: "flex items-center gap-3",
 						children: [
 							d.length > 0 && /* @__PURE__ */ i("button", {
 								type: "button",
 								onClick: h,
-								className: "p-1.5 rounded-md hover:bg-bg-muted transition-colors",
+								className: "p-1.5 rounded-md hover:bg-bg-sunken transition-colors",
 								title: "Go back",
 								children: /* @__PURE__ */ i("svg", {
 									className: "w-5 h-5 text-text-secondary",
@@ -70,7 +70,7 @@ var o = t(function({ renderDashboard: t, onClose: o }) {
 					}), /* @__PURE__ */ i("button", {
 						type: "button",
 						onClick: m,
-						className: "p-2 rounded-md hover:bg-bg-muted transition-colors",
+						className: "p-2 rounded-md hover:bg-bg-sunken transition-colors",
 						title: "Close (Esc)",
 						children: /* @__PURE__ */ i("svg", {
 							className: "w-5 h-5 text-text-secondary",
@@ -91,7 +91,7 @@ var o = t(function({ renderDashboard: t, onClose: o }) {
 					children: t ? t(l, u) : /* @__PURE__ */ i(s, {})
 				}),
 				/* @__PURE__ */ i("div", {
-					className: "flex-shrink-0 px-4 py-2 border-t border-border-default bg-bg-muted/30 rounded-b-xl",
+					className: "flex-shrink-0 px-4 py-2 border-t border-border-default bg-bg-sunken/30 rounded-b-xl",
 					children: /* @__PURE__ */ a("div", {
 						className: "flex items-center justify-between text-xs text-text-tertiary",
 						children: [/* @__PURE__ */ a("span", { children: [

package/dist/bigconsole/components/DrilldownModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrilldownModal.js","names":[],"sources":["../../../src/bigconsole/components/DrilldownModal.tsx"],"sourcesContent":["/**\n * DrilldownModal Component\n *\n * Modal overlay for displaying drilldown dashboards.\n * Supports nested drilldowns with back navigation.\n */\n\nimport { type FC, useEffect, useCallback, memo } from 'react';\nimport { useDrilldownStore } from '../store/drilldownStore';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DrilldownModalProps {\n  /** Custom content renderer for the dashboard */\n  renderDashboard?: (dashboardId: string, params: Record<string, unknown>) => React.ReactNode;\n  /** Called when modal closes */\n  onClose?: () => void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DrilldownModal: FC<DrilldownModalProps> = memo(function DrilldownModal({ renderDashboard, onClose }) {\n  const isOpen = useDrilldownStore((state) => state.isOpen);\n  const dashboardId = useDrilldownStore((state) => state.dashboardId);\n  const params = useDrilldownStore((state) => state.params);\n  const history = useDrilldownStore((state) => state.history);\n  const closeModal = useDrilldownStore((state) => state.closeModal);\n  const popDrilldown = useDrilldownStore((state) => state.popDrilldown);\n\n  // Define handlers before effects that use them\n  const handleClose = useCallback(() => {\n    closeModal();\n    onClose?.();\n  }, [closeModal, onClose]);\n\n  const handleBack = useCallback(() => {\n    popDrilldown();\n  }, [popDrilldown]);\n\n  const handleBackdropClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.target === e.currentTarget) {\n        handleClose();\n      }\n    },\n    [handleClose]\n  );\n\n  // Handle escape key\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && isOpen) {\n        handleClose();\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape);\n    return () => document.removeEventListener('keydown', handleEscape);\n  }, [isOpen, handleClose]);\n\n  // Prevent body scroll when modal is open\n  useEffect(() => {\n    if (isOpen) {\n      document.body.style.overflow = 'hidden';\n    } else {\n      document.body.style.overflow = '';\n    }\n    return () => {\n      document.body.style.overflow = '';\n    };\n  }, [isOpen]);\n\n  if (!isOpen || !dashboardId) {\n    return null;\n  }\n\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center p-4\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"drilldown-modal-title\"\n      onClick={handleBackdropClick}\n    >\n      {/* Backdrop */}\n      <div className=\"absolute inset-0 bg-black/60 backdrop-blur-sm\" />\n\n      {/* Modal Content - contained within viewport */}\n      <div\n        className=\"relative z-10 w-full max-w-5xl bg-bg-surface rounded-xl shadow-2xl flex flex-col\"\n        style={{ maxHeight: 'calc(100vh - 2rem)' }}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {/* Header */}\n        <div className=\"flex-shrink-0 flex items-center justify-between px-4 py-3 border-b border-border-default bg-bg-muted/50 rounded-t-xl\">\n          <div className=\"flex items-center gap-3\">\n            {/* Back button */}\n            {history.length > 0 && (\n              <button\n                type=\"button\"\n                onClick={handleBack}\n                className=\"p-1.5 rounded-md hover:bg-bg-muted transition-colors\"\n                title=\"Go back\"\n              >\n                <svg className=\"w-5 h-5 text-text-secondary\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M15 19l-7-7 7-7\" />\n                </svg>\n              </button>\n            )}\n\n            {/* Title */}\n            <h2 id=\"drilldown-modal-title\" className=\"text-sm font-medium text-text-primary\">\n              Drilldown View\n            </h2>\n\n            {/* Breadcrumb indicator */}\n            {history.length > 0 && (\n              <span className=\"text-xs text-text-tertiary\">\n                ({history.length + 1} level{history.length > 0 ? 's' : ''} deep)\n              </span>\n            )}\n          </div>\n\n          {/* Close button */}\n          <button\n            type=\"button\"\n            onClick={handleClose}\n            className=\"p-2 rounded-md hover:bg-bg-muted transition-colors\"\n            title=\"Close (Esc)\"\n          >\n            <svg className=\"w-5 h-5 text-text-secondary\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        </div>\n\n        {/* Dashboard Content - scrollable */}\n        <div className=\"flex-1 overflow-y-auto min-h-0 p-4\">\n          {renderDashboard ? renderDashboard(dashboardId, params) : <DrilldownFallback />}\n        </div>\n\n        {/* Footer */}\n        <div className=\"flex-shrink-0 px-4 py-2 border-t border-border-default bg-bg-muted/30 rounded-b-xl\">\n          <div className=\"flex items-center justify-between text-xs text-text-tertiary\">\n            <span>\n              Parameters:{' '}\n              {Object.keys(params).filter((k) => !k.startsWith('__')).length > 0\n                ? Object.keys(params)\n                    .filter((k) => !k.startsWith('__'))\n                    .join(', ')\n                : 'None'}\n            </span>\n            <span>Press Esc to close</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n});\n\n// Fallback when no renderDashboard prop is provided (should not happen in normal usage\n// since BigConsoleRoot always passes DrilldownDashboardRenderer).\nfunction DrilldownFallback() {\n  return (\n    <div className=\"flex items-center justify-center h-full text-sm text-text-secondary\">\n      Unable to load drilldown content. Please try again.\n    </div>\n  );\n}\n\nexport default DrilldownModal;\n"],"mappings":"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"}
+{"version":3,"file":"DrilldownModal.js","names":[],"sources":["../../../src/bigconsole/components/DrilldownModal.tsx"],"sourcesContent":["/**\n * DrilldownModal Component\n *\n * Modal overlay for displaying drilldown dashboards.\n * Supports nested drilldowns with back navigation.\n */\n\nimport { type FC, useEffect, useCallback, memo } from 'react';\nimport { useDrilldownStore } from '../store/drilldownStore';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DrilldownModalProps {\n  /** Custom content renderer for the dashboard */\n  renderDashboard?: (dashboardId: string, params: Record<string, unknown>) => React.ReactNode;\n  /** Called when modal closes */\n  onClose?: () => void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DrilldownModal: FC<DrilldownModalProps> = memo(function DrilldownModal({ renderDashboard, onClose }) {\n  const isOpen = useDrilldownStore((state) => state.isOpen);\n  const dashboardId = useDrilldownStore((state) => state.dashboardId);\n  const params = useDrilldownStore((state) => state.params);\n  const history = useDrilldownStore((state) => state.history);\n  const closeModal = useDrilldownStore((state) => state.closeModal);\n  const popDrilldown = useDrilldownStore((state) => state.popDrilldown);\n\n  // Define handlers before effects that use them\n  const handleClose = useCallback(() => {\n    closeModal();\n    onClose?.();\n  }, [closeModal, onClose]);\n\n  const handleBack = useCallback(() => {\n    popDrilldown();\n  }, [popDrilldown]);\n\n  const handleBackdropClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.target === e.currentTarget) {\n        handleClose();\n      }\n    },\n    [handleClose]\n  );\n\n  // Handle escape key\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && isOpen) {\n        handleClose();\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape);\n    return () => document.removeEventListener('keydown', handleEscape);\n  }, [isOpen, handleClose]);\n\n  // Prevent body scroll when modal is open\n  useEffect(() => {\n    if (isOpen) {\n      document.body.style.overflow = 'hidden';\n    } else {\n      document.body.style.overflow = '';\n    }\n    return () => {\n      document.body.style.overflow = '';\n    };\n  }, [isOpen]);\n\n  if (!isOpen || !dashboardId) {\n    return null;\n  }\n\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center p-4\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"drilldown-modal-title\"\n      onClick={handleBackdropClick}\n    >\n      {/* Backdrop */}\n      <div className=\"absolute inset-0 bg-black/60 backdrop-blur-sm\" />\n\n      {/* Modal Content - contained within viewport */}\n      <div\n        className=\"relative z-10 w-full max-w-5xl bg-bg-surface rounded-xl shadow-2xl flex flex-col\"\n        style={{ maxHeight: 'calc(100vh - 2rem)' }}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {/* Header */}\n        <div className=\"flex-shrink-0 flex items-center justify-between px-4 py-3 border-b border-border-default bg-bg-sunken/50 rounded-t-xl\">\n          <div className=\"flex items-center gap-3\">\n            {/* Back button */}\n            {history.length > 0 && (\n              <button\n                type=\"button\"\n                onClick={handleBack}\n                className=\"p-1.5 rounded-md hover:bg-bg-sunken transition-colors\"\n                title=\"Go back\"\n              >\n                <svg className=\"w-5 h-5 text-text-secondary\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M15 19l-7-7 7-7\" />\n                </svg>\n              </button>\n            )}\n\n            {/* Title */}\n            <h2 id=\"drilldown-modal-title\" className=\"text-sm font-medium text-text-primary\">\n              Drilldown View\n            </h2>\n\n            {/* Breadcrumb indicator */}\n            {history.length > 0 && (\n              <span className=\"text-xs text-text-tertiary\">\n                ({history.length + 1} level{history.length > 0 ? 's' : ''} deep)\n              </span>\n            )}\n          </div>\n\n          {/* Close button */}\n          <button\n            type=\"button\"\n            onClick={handleClose}\n            className=\"p-2 rounded-md hover:bg-bg-sunken transition-colors\"\n            title=\"Close (Esc)\"\n          >\n            <svg className=\"w-5 h-5 text-text-secondary\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        </div>\n\n        {/* Dashboard Content - scrollable */}\n        <div className=\"flex-1 overflow-y-auto min-h-0 p-4\">\n          {renderDashboard ? renderDashboard(dashboardId, params) : <DrilldownFallback />}\n        </div>\n\n        {/* Footer */}\n        <div className=\"flex-shrink-0 px-4 py-2 border-t border-border-default bg-bg-sunken/30 rounded-b-xl\">\n          <div className=\"flex items-center justify-between text-xs text-text-tertiary\">\n            <span>\n              Parameters:{' '}\n              {Object.keys(params).filter((k) => !k.startsWith('__')).length > 0\n                ? Object.keys(params)\n                    .filter((k) => !k.startsWith('__'))\n                    .join(', ')\n                : 'None'}\n            </span>\n            <span>Press Esc to close</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n});\n\n// Fallback when no renderDashboard prop is provided (should not happen in normal usage\n// since BigConsoleRoot always passes DrilldownDashboardRenderer).\nfunction DrilldownFallback() {\n  return (\n    <div className=\"flex items-center justify-center h-full text-sm text-text-secondary\">\n      Unable to load drilldown content. Please try again.\n    </div>\n  );\n}\n\nexport default DrilldownModal;\n"],"mappings":"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"}

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

@@ -232,7 +232,7 @@ var g = u(function({ dashboardId: u, pageId: g, title: _, onPaste: fe, onSave: p
 					definitions: Oe
 				}), /* @__PURE__ */ h("div", {
 					ref: S,
-					className: "flex-1 min-w-0 overflow-auto bg-bg-muted",
+					className: "flex-1 min-w-0 overflow-auto bg-bg-sunken",
 					onDrop: Le,
 					onDragOver: Re,
 					onClick: () => {

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardCanvas.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/DashboardCanvas.tsx"],"sourcesContent":["/**\n * DashboardCanvas Component\n *\n * Main canvas for dashboard with grid layout and widget rendering.\n * Phase 2: Added GlobalFiltersBar and PageTabsManager integration.\n * Phase 3: Added WidgetPalette sidebar for drag-and-drop widget creation.\n */\n\nimport { type FC, memo, useRef, useState, useCallback, useEffect, useMemo } from 'react';\nimport type { Layout } from 'react-grid-layout';\nimport type { Widget, WidgetType } from '../../types';\nimport { useDashboardStore, useWidgetStore } from '../../store';\nimport { useWidgetOperations } from '../../hooks/useWidgetOperations';\nimport { useInstalledWidgets } from '../../hooks/useInstalledWidgets';\nimport { useWidgetCatalog } from '../../hooks/useWidgetCatalog';\nimport { useDashboardImageExport } from '../../hooks/useDashboardImageExport';\nimport { useBigConsole } from '../../context';\nimport { DashboardGrid } from './DashboardGrid';\nimport { DashboardToolbar } from './DashboardToolbar';\nimport { GlobalFiltersBar } from './GlobalFiltersBar';\nimport { LiveBoardBanner } from './LiveBoardBanner';\nimport { PageTabsManager, type DashboardPageTab } from './PageTabsManager';\nimport { ShareDialog } from './ShareDialog';\nimport { WidgetPalette } from './WidgetPalette';\nimport { WidgetConfigDialog } from '../widgets/WidgetConfigDialog';\nimport { PropertiesPanel } from '../widgets/PropertiesPanel';\nimport { getWidgetDefinition, type WidgetDefinition } from '../widgets/WidgetRegistry';\n// Phase 2: Cross-filtering context\nimport { CrossFilterProvider } from '../../contexts';\n// Smart widget positioning\nimport { findNextAvailablePosition, calculatePositionFromDrop } from '../../utils/widgetPositioning';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DashboardCanvasProps {\n  /** Dashboard ID */\n  dashboardId: string;\n  /** Page ID (for loading widgets) */\n  pageId?: string;\n  /** Dashboard title */\n  title?: string;\n  /** Callback to paste widget */\n  onPaste?: () => void;\n  /** Callback when dashboard is saved */\n  onSave?: () => void;\n  /** Whether save is in progress */\n  isSaving?: boolean;\n  /** Callback to export dashboard */\n  onExport?: () => void;\n  /** Dashboard pages for PageTabsManager */\n  pages?: DashboardPageTab[];\n  /** Active page ID */\n  activePageId?: string;\n  /** Callback when page changes */\n  onPageChange?: (pageId: string) => void;\n  /** Callback when pages are reordered */\n  onPagesReorder?: (pages: DashboardPageTab[]) => void;\n  /** Callback when page is added */\n  onPageAdd?: () => void;\n  /** Callback when page is renamed */\n  onPageRename?: (pageId: string, newName: string) => void;\n  /** Callback when page is duplicated */\n  onPageDuplicate?: (pageId: string) => void;\n  /** Callback when page is deleted */\n  onPageDelete?: (pageId: string) => void;\n  /** Whether to show global filters bar */\n  showFilters?: boolean;\n  /** Whether to show page tabs */\n  showPageTabs?: boolean;\n  /** Whether to enable cross-filtering (widget clicks update filters) */\n  enableCrossFilter?: boolean;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DashboardCanvas: FC<DashboardCanvasProps> = memo(function DashboardCanvas({\n  dashboardId,\n  pageId,\n  title,\n  onPaste,\n  onSave,\n  isSaving = false,\n  onExport,\n  pages = [],\n  activePageId,\n  onPageChange,\n  onPagesReorder,\n  onPageAdd,\n  onPageRename,\n  onPageDuplicate,\n  onPageDelete,\n  showFilters = true,\n  showPageTabs = true,\n  enableCrossFilter = true,\n}) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  // Inner board element (the grid surface) — rasterized for PNG/PDF board-pack export.\n  const boardRef = useRef<HTMLDivElement>(null);\n  const [containerWidth, setContainerWidth] = useState(1200);\n  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);\n  const [isShareDialogOpen, setIsShareDialogOpen] = useState(false);\n  const [isPaletteOpen, setIsPaletteOpen] = useState(false);\n  const [isDraggingWidget, setIsDraggingWidget] = useState(false);\n  const [dragWidgetType, setDragWidgetType] = useState<WidgetType | null>(null);\n  // State for drag & drop widget creation (stores pending position and type)\n  const [pendingDropPosition, setPendingDropPosition] = useState<{\n    x: number;\n    y: number;\n    width: number;\n    height: number;\n  } | null>(null);\n  const [pendingDropType, setPendingDropType] = useState<WidgetType | null>(null);\n  // Stores the full WidgetDefinition for installed/store widgets dropped from the palette,\n  // so the config dialog can use the store metadata instead of the generic 'custom' definition.\n  const [pendingDropDefinition, setPendingDropDefinition] = useState<WidgetDefinition | null>(null);\n\n  // Store state\n  const isEditMode = useDashboardStore((state) => state.viewMode === 'edit');\n\n  // Fetch installed widgets only in edit mode — the palette and add-widget dialog\n  // are not usable in read-only view, so skip the request for viewer-only sessions.\n  const { workspaceId, apiGatewayUrl, authToken } = useBigConsole();\n  const { installedWidgets, loading: installedWidgetsLoading } = useInstalledWidgets({\n    workspaceId,\n    apiGatewayUrl,\n    authToken,\n    enabled: isEditMode,\n  });\n  // Built-in widget catalog from the backend (getWidgetTypes); falls back to the\n  // bundled registry while loading or if the supergraph hasn't adopted it yet.\n  const { definitions: widgetCatalog } = useWidgetCatalog({\n    workspaceId,\n    apiGatewayUrl,\n    authToken,\n    enabled: isEditMode,\n  });\n  const zoomLevel = useDashboardStore((state) => state.zoomLevel);\n  const setGlobalFilterValues = useDashboardStore((state) => state.setGlobalFilterValues);\n\n  // Handle filter changes - update store for widget access\n  const handleFilterChange = useCallback(\n    (filterValues: Record<string, unknown>) => {\n      // Update global filter values in dashboard store\n      setGlobalFilterValues(filterValues);\n\n      // Widgets can now access filter values via useGlobalFilterValues() hook\n      // When backend supports filter parameters, widget queries will include these values\n    },\n    [setGlobalFilterValues]\n  );\n\n  // Widget operations hook (connects to backend) - skipFetch since parent page fetches\n  const { createWidget: createWidgetApi } = useWidgetOperations(pageId, dashboardId, { skipFetch: true });\n\n  const widgetsMap = useWidgetStore((state) => state.widgets);\n  // Filter widgets to only show widgets for the current page\n  const widgetsArray = useMemo(() => {\n    const allWidgets = Array.from(widgetsMap.values());\n    if (!pageId) return allWidgets;\n    return allWidgets.filter((widget) => widget.pageId === pageId);\n  }, [widgetsMap, pageId]);\n  const selectedWidgetId = useWidgetStore((state) => state.selectedWidgetId);\n  const selectWidget = useWidgetStore((state) => state.selectWidget);\n  const addWidgetToStore = useWidgetStore((state) => state.addWidget);\n  const updateWidgetPosition = useWidgetStore((state) => state.updateWidgetPosition);\n  const configPanelOpen = useWidgetStore((state) => state.configPanelOpen);\n  const closeConfigPanel = useWidgetStore((state) => state.closeConfigPanel);\n\n  // Handle resize\n  useEffect(() => {\n    const updateWidth = () => {\n      if (containerRef.current) {\n        setContainerWidth(containerRef.current.offsetWidth);\n      }\n    };\n\n    updateWidth();\n    window.addEventListener('resize', updateWidth);\n    return () => window.removeEventListener('resize', updateWidth);\n  }, []);\n\n  // Handle layout change\n  const handleLayoutChange = useCallback(\n    (layout: Layout[]) => {\n      layout.forEach((item) => {\n        updateWidgetPosition(item.i, {\n          x: item.x,\n          y: item.y,\n          width: item.w,\n          height: item.h,\n        });\n      });\n    },\n    [updateWidgetPosition]\n  );\n\n  // Handle widget select\n  const handleWidgetSelect = useCallback(\n    (widgetId: string) => {\n      selectWidget(widgetId);\n    },\n    [selectWidget]\n  );\n\n  // Handle add widget - tries API first, falls back to local store\n  const handleAddWidget = useCallback(\n    async (widgetData: Partial<Widget>) => {\n      // Get widget definition for default size; prefer the pending drop definition\n      // which preserves installed/store widget metadata over the generic registry lookup.\n      const definition = pendingDropDefinition || (widgetData.type ? getWidgetDefinition(widgetData.type) : null);\n      const widgetSize = {\n        width: definition?.defaultSize?.width ?? 4,\n        height: definition?.defaultSize?.height ?? 4,\n      };\n\n      // Use pending drop position if available (from drag & drop), otherwise use smart placement\n      let position: { x: number; y: number; width: number; height: number };\n      if (pendingDropPosition) {\n        position = pendingDropPosition;\n      } else {\n        // Use smart placement algorithm - horizontal first, then next row\n        const { x, y } = findNextAvailablePosition(widgetsArray, widgetSize, { cols: 12 });\n        position = {\n          x,\n          y,\n          width: widgetSize.width,\n          height: widgetSize.height,\n        };\n      }\n\n      // Extract dataSinkId and parserId from widgetData (passed from WidgetConfigDialog)\n      const extendedData = widgetData as Partial<Widget> & { dataSinkId?: string; parserId?: string };\n\n      // Try to create via API first\n      if (pageId) {\n        const widget = await createWidgetApi({\n          pageId,\n          dashboardId,\n          type: widgetData.type!,\n          title: widgetData.title || 'Untitled Widget',\n          description: widgetData.description,\n          // v2.0: Renderer and template support\n          renderer: widgetData.renderer,\n          template: widgetData.template,\n          config: widgetData.config || {},\n          position,\n          refreshInterval: widgetData.refreshInterval ?? undefined,\n          // v2.0: Data source fields (DataSink → Parser → Widget)\n          dataSinkId: extendedData.dataSinkId,\n          parserId: extendedData.parserId,\n        });\n\n        if (widget) {\n          selectWidget(widget.id);\n          setIsAddDialogOpen(false);\n          // Clear pending drop state\n          setPendingDropPosition(null);\n          setPendingDropType(null);\n          setPendingDropDefinition(null);\n          return;\n        }\n      }\n\n      // Fallback to local store if API fails or no pageId\n      const newWidget: Widget = {\n        id: crypto.randomUUID(),\n        dashboardId,\n        pageId: pageId || 'local',\n        type: widgetData.type!,\n        title: widgetData.title || 'Untitled Widget',\n        description: widgetData.description,\n        // v2.0: Renderer and template support\n        renderer: widgetData.renderer,\n        template: widgetData.template,\n        refreshInterval: widgetData.refreshInterval,\n        config: widgetData.config || {},\n        position,\n        positionX: position.x,\n        positionY: position.y,\n        positionWidth: position.width,\n        positionHeight: position.height,\n        // v2.0: Data source fields (DataSink → Parser → Widget)\n        dataSinkId: extendedData.dataSinkId,\n        parserId: extendedData.parserId,\n        translations: [],\n        createdAt: new Date().toISOString(),\n        updatedAt: new Date().toISOString(),\n      };\n\n      addWidgetToStore(newWidget);\n      selectWidget(newWidget.id);\n      setIsAddDialogOpen(false);\n      // Clear pending drop state\n      setPendingDropPosition(null);\n      setPendingDropType(null);\n      setPendingDropDefinition(null);\n    },\n    [\n      dashboardId,\n      pageId,\n      createWidgetApi,\n      addWidgetToStore,\n      selectWidget,\n      widgetsArray,\n      pendingDropPosition,\n      pendingDropDefinition,\n    ]\n  );\n\n  // Handle drag start from palette\n  const handlePaletteDragStart = useCallback((type: WidgetType) => {\n    setIsDraggingWidget(true);\n    setDragWidgetType(type);\n  }, []);\n\n  // Handle drag end from palette\n  const handlePaletteDragEnd = useCallback(() => {\n    setIsDraggingWidget(false);\n    setDragWidgetType(null);\n  }, []);\n\n  // Handle drop on canvas - opens config dialog instead of creating widget directly\n  const handleCanvasDrop = useCallback(\n    (e: React.DragEvent) => {\n      e.preventDefault();\n      setIsDraggingWidget(false);\n      setDragWidgetType(null);\n\n      try {\n        const data = e.dataTransfer.getData('application/json');\n        if (!data) return;\n\n        const widgetData = JSON.parse(data);\n        const definition = getWidgetDefinition(widgetData.type);\n\n        // If the dropped data includes defaultConfig (from WidgetPalette drag serialization),\n        // reconstruct a full WidgetDefinition so installed/store widget identity is preserved.\n        let droppedDefinition: WidgetDefinition | null = null;\n        if (widgetData.defaultConfig && widgetData.category) {\n          droppedDefinition = {\n            ...definition,\n            name: widgetData.name || definition.name,\n            category: widgetData.category,\n            defaultConfig: widgetData.defaultConfig,\n            defaultSize: widgetData.defaultSize || definition.defaultSize,\n          };\n        }\n\n        // Calculate drop position relative to canvas\n        const canvasRect = containerRef.current?.getBoundingClientRect();\n        if (!canvasRect) return;\n\n        // Use utility to calculate grid position from drop coordinates\n        const widgetSize = {\n          width: definition.defaultSize.width,\n          height: definition.defaultSize.height,\n        };\n\n        const { x: gridX, y: gridY } = calculatePositionFromDrop(\n          e.clientX,\n          e.clientY,\n          canvasRect,\n          containerWidth,\n          widgetSize,\n          { cols: 12 }\n        );\n\n        const position = {\n          x: gridX,\n          y: gridY,\n          width: widgetSize.width,\n          height: widgetSize.height,\n        };\n\n        // Store the drop position, type, and full definition, then open the config dialog\n        setPendingDropPosition(position);\n        setPendingDropType(widgetData.type as WidgetType);\n        setPendingDropDefinition(droppedDefinition);\n        setIsAddDialogOpen(true);\n      } catch (error) {\n        console.error('Failed to handle widget drop:', error);\n      }\n    },\n    [containerWidth]\n  );\n\n  // Handle drag over to allow drop\n  const handleCanvasDragOver = useCallback((e: React.DragEvent) => {\n    e.preventDefault();\n    e.dataTransfer.dropEffect = 'copy';\n  }, []);\n\n  // Handle widget select from palette (quick add without drag)\n  const handlePaletteWidgetSelect = useCallback(\n    (type: WidgetType, paletteDefinition?: WidgetDefinition) => {\n      const definition = paletteDefinition || getWidgetDefinition(type);\n      handleAddWidget({\n        type,\n        title: definition.name,\n        config: definition.defaultConfig,\n      });\n      setIsPaletteOpen(false);\n    },\n    [handleAddWidget]\n  );\n\n  // Toggle palette\n  const togglePalette = useCallback(() => {\n    setIsPaletteOpen((prev) => !prev);\n  }, []);\n\n  // Board-pack export (PNG + PDF) — rasterizes the inner board element.\n  const {\n    exportPNG,\n    exportPDF,\n    isExporting: isExportingImage,\n  } = useDashboardImageExport({ containerRef: boardRef, name: title || 'dashboard' });\n  const handleExportImage = useCallback(() => {\n    void exportPNG();\n  }, [exportPNG]);\n  const handleExportPdf = useCallback(() => {\n    void exportPDF();\n  }, [exportPDF]);\n\n  return (\n    <div className=\"flex flex-col h-full min-w-0 overflow-hidden\">\n      {/* Toolbar */}\n      <DashboardToolbar\n        dashboardId={dashboardId}\n        title={title}\n        onAddWidget={() => setIsAddDialogOpen(true)}\n        onTogglePalette={togglePalette}\n        isPaletteOpen={isPaletteOpen}\n        onPaste={onPaste}\n        onSave={onSave}\n        isSaving={isSaving}\n        onExport={onExport}\n        onExportImage={handleExportImage}\n        onExportPdf={handleExportPdf}\n        isExportingImage={isExportingImage}\n        onShare={() => setIsShareDialogOpen(true)}\n      />\n\n      {/* Live wall-board freshness banner — renders only when the page has\n          auto-refreshing widgets (e.g. the Live Bed Board) and not in edit mode. */}\n      <LiveBoardBanner widgets={widgetsArray} isEditMode={isEditMode} />\n\n      {/* Global Filters Bar */}\n      {showFilters && <GlobalFiltersBar dashboardId={dashboardId} onFilterChange={handleFilterChange} collapsible />}\n\n      {/* Page Tabs - always show in edit mode so user can add first page */}\n      {showPageTabs && (isEditMode || pages.length > 0) && (\n        <PageTabsManager\n          pages={pages}\n          activePageId={activePageId || pages[0]?.id}\n          editable={isEditMode}\n          onPageSelect={onPageChange || (() => {})}\n          onPagesReorder={\n            onPagesReorder\n              ? (pageIds) => {\n                  // Convert string[] to DashboardPageTab[] for the callback\n                  const reorderedPages = pageIds.map((id) => pages.find((p) => p.id === id)!).filter(Boolean);\n                  onPagesReorder(reorderedPages);\n                }\n              : undefined\n          }\n          onPageCreate={onPageAdd}\n          onPageRename={onPageRename}\n          onPageDuplicate={onPageDuplicate}\n          onPageDelete={onPageDelete}\n        />\n      )}\n\n      {/* Main content area with palette and canvas */}\n      <div className=\"flex flex-1 min-w-0 overflow-hidden\">\n        {/* Widget Palette Sidebar */}\n        {isEditMode && (\n          <WidgetPalette\n            isOpen={isPaletteOpen}\n            onClose={() => setIsPaletteOpen(false)}\n            onWidgetSelect={handlePaletteWidgetSelect}\n            onDragStart={handlePaletteDragStart}\n            onDragEnd={handlePaletteDragEnd}\n            installedWidgets={installedWidgets}\n            installedWidgetsLoading={installedWidgetsLoading}\n            definitions={widgetCatalog}\n          />\n        )}\n\n        {/* Canvas area */}\n        <div\n          ref={containerRef}\n          className=\"flex-1 min-w-0 overflow-auto bg-bg-muted\"\n          onDrop={handleCanvasDrop}\n          onDragOver={handleCanvasDragOver}\n          onClick={() => {\n            if (isEditMode) {\n              selectWidget(null);\n            }\n          }}\n          style={{\n            position: 'relative',\n            border: isDraggingWidget ? '2px dashed var(--color-action-primary-bg)' : 'none',\n            backgroundColor: isDraggingWidget ? 'var(--color-bg-hover)' : undefined,\n            transition: 'border-color 0.2s, background-color 0.2s',\n          }}\n        >\n          {/* Drop zone indicator */}\n          {isDraggingWidget && (\n            <div\n              style={{\n                position: 'absolute',\n                top: '50%',\n                left: '50%',\n                transform: 'translate(-50%, -50%)',\n                padding: 'var(--space-pagePadding)',\n                backgroundColor: 'var(--color-bg-surface)',\n                borderRadius: 'var(--radius-card)',\n                boxShadow: 'var(--shadow-elevation-2)',\n                textAlign: 'center',\n                pointerEvents: 'none',\n                zIndex: 100,\n              }}\n            >\n              <p style={{ fontSize: 'var(--font-size-body-md)', color: 'var(--color-text-primary)', margin: 0 }}>\n                Drop to add <strong>{dragWidgetType}</strong> widget\n              </p>\n            </div>\n          )}\n\n          <div\n            ref={boardRef}\n            className=\"min-h-full origin-top-left transition-transform\"\n            style={{\n              transform: `scale(${zoomLevel / 100})`,\n              width: `${100 / (zoomLevel / 100)}%`,\n            }}\n          >\n            {widgetsArray.length > 0 ? (\n              <CrossFilterProvider\n                enabled={enableCrossFilter}\n                onCrossFilter={(_filters) => {\n                  // Cross-filter applied - widget queries can access filter values\n                }}\n              >\n                <DashboardGrid\n                  widgets={widgetsArray}\n                  isEditMode={isEditMode}\n                  width={containerWidth}\n                  onLayoutChange={handleLayoutChange}\n                  onWidgetSelect={handleWidgetSelect}\n                  selectedWidgetId={selectedWidgetId}\n                />\n              </CrossFilterProvider>\n            ) : (\n              <div className=\"flex flex-col items-center justify-center min-h-[400px] p-8\">\n                <div className=\"w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-bg-surface\">\n                  <svg className=\"w-8 h-8 text-text-secondary\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z\"\n                    />\n                  </svg>\n                </div>\n                <h3 className=\"text-lg font-medium text-text-primary mb-2\">No widgets yet</h3>\n                <p className=\"text-sm text-text-secondary mb-4 text-center max-w-[300px]\">\n                  Add widgets to build your dashboard. Click the &quot;Add Widget&quot; button to get started.\n                </p>\n                {isEditMode && (\n                  <button\n                    type=\"button\"\n                    onClick={() => setIsAddDialogOpen(true)}\n                    className=\"\n                      inline-flex items-center gap-2\n                      px-4 py-2\n                      text-sm font-medium\n                      text-action-primary-fg\n                      bg-action-primary-bg\n                      hover:bg-action-primary-bgHover\n                      rounded-md\n                      transition-colors\n                    \"\n                  >\n                    <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 4v16m8-8H4\" />\n                    </svg>\n                    Add Widget\n                  </button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n\n      {/* Properties Panel */}\n      <PropertiesPanel isOpen={configPanelOpen} onClose={closeConfigPanel} />\n\n      {/* Add Widget Dialog */}\n      <WidgetConfigDialog\n        isOpen={isAddDialogOpen}\n        onClose={() => {\n          setIsAddDialogOpen(false);\n          // Clear pending drop state when dialog is closed\n          setPendingDropPosition(null);\n          setPendingDropType(null);\n          setPendingDropDefinition(null);\n        }}\n        onSave={handleAddWidget}\n        preselectedType={pendingDropType || undefined}\n        preselectedDefinition={pendingDropDefinition || undefined}\n        dashboardId={dashboardId}\n        installedWidgets={installedWidgets}\n      />\n\n      {/* Share Dialog */}\n      <ShareDialog\n        dashboardId={dashboardId}\n        dashboardName={title || 'Dashboard'}\n        isOpen={isShareDialogOpen}\n        onClose={() => setIsShareDialogOpen(false)}\n      />\n    </div>\n  );\n});\n\nexport default DashboardCanvas;\n"],"mappings":"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"}
+{"version":3,"file":"DashboardCanvas.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/DashboardCanvas.tsx"],"sourcesContent":["/**\n * DashboardCanvas Component\n *\n * Main canvas for dashboard with grid layout and widget rendering.\n * Phase 2: Added GlobalFiltersBar and PageTabsManager integration.\n * Phase 3: Added WidgetPalette sidebar for drag-and-drop widget creation.\n */\n\nimport { type FC, memo, useRef, useState, useCallback, useEffect, useMemo } from 'react';\nimport type { Layout } from 'react-grid-layout';\nimport type { Widget, WidgetType } from '../../types';\nimport { useDashboardStore, useWidgetStore } from '../../store';\nimport { useWidgetOperations } from '../../hooks/useWidgetOperations';\nimport { useInstalledWidgets } from '../../hooks/useInstalledWidgets';\nimport { useWidgetCatalog } from '../../hooks/useWidgetCatalog';\nimport { useDashboardImageExport } from '../../hooks/useDashboardImageExport';\nimport { useBigConsole } from '../../context';\nimport { DashboardGrid } from './DashboardGrid';\nimport { DashboardToolbar } from './DashboardToolbar';\nimport { GlobalFiltersBar } from './GlobalFiltersBar';\nimport { LiveBoardBanner } from './LiveBoardBanner';\nimport { PageTabsManager, type DashboardPageTab } from './PageTabsManager';\nimport { ShareDialog } from './ShareDialog';\nimport { WidgetPalette } from './WidgetPalette';\nimport { WidgetConfigDialog } from '../widgets/WidgetConfigDialog';\nimport { PropertiesPanel } from '../widgets/PropertiesPanel';\nimport { getWidgetDefinition, type WidgetDefinition } from '../widgets/WidgetRegistry';\n// Phase 2: Cross-filtering context\nimport { CrossFilterProvider } from '../../contexts';\n// Smart widget positioning\nimport { findNextAvailablePosition, calculatePositionFromDrop } from '../../utils/widgetPositioning';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DashboardCanvasProps {\n  /** Dashboard ID */\n  dashboardId: string;\n  /** Page ID (for loading widgets) */\n  pageId?: string;\n  /** Dashboard title */\n  title?: string;\n  /** Callback to paste widget */\n  onPaste?: () => void;\n  /** Callback when dashboard is saved */\n  onSave?: () => void;\n  /** Whether save is in progress */\n  isSaving?: boolean;\n  /** Callback to export dashboard */\n  onExport?: () => void;\n  /** Dashboard pages for PageTabsManager */\n  pages?: DashboardPageTab[];\n  /** Active page ID */\n  activePageId?: string;\n  /** Callback when page changes */\n  onPageChange?: (pageId: string) => void;\n  /** Callback when pages are reordered */\n  onPagesReorder?: (pages: DashboardPageTab[]) => void;\n  /** Callback when page is added */\n  onPageAdd?: () => void;\n  /** Callback when page is renamed */\n  onPageRename?: (pageId: string, newName: string) => void;\n  /** Callback when page is duplicated */\n  onPageDuplicate?: (pageId: string) => void;\n  /** Callback when page is deleted */\n  onPageDelete?: (pageId: string) => void;\n  /** Whether to show global filters bar */\n  showFilters?: boolean;\n  /** Whether to show page tabs */\n  showPageTabs?: boolean;\n  /** Whether to enable cross-filtering (widget clicks update filters) */\n  enableCrossFilter?: boolean;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DashboardCanvas: FC<DashboardCanvasProps> = memo(function DashboardCanvas({\n  dashboardId,\n  pageId,\n  title,\n  onPaste,\n  onSave,\n  isSaving = false,\n  onExport,\n  pages = [],\n  activePageId,\n  onPageChange,\n  onPagesReorder,\n  onPageAdd,\n  onPageRename,\n  onPageDuplicate,\n  onPageDelete,\n  showFilters = true,\n  showPageTabs = true,\n  enableCrossFilter = true,\n}) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  // Inner board element (the grid surface) — rasterized for PNG/PDF board-pack export.\n  const boardRef = useRef<HTMLDivElement>(null);\n  const [containerWidth, setContainerWidth] = useState(1200);\n  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);\n  const [isShareDialogOpen, setIsShareDialogOpen] = useState(false);\n  const [isPaletteOpen, setIsPaletteOpen] = useState(false);\n  const [isDraggingWidget, setIsDraggingWidget] = useState(false);\n  const [dragWidgetType, setDragWidgetType] = useState<WidgetType | null>(null);\n  // State for drag & drop widget creation (stores pending position and type)\n  const [pendingDropPosition, setPendingDropPosition] = useState<{\n    x: number;\n    y: number;\n    width: number;\n    height: number;\n  } | null>(null);\n  const [pendingDropType, setPendingDropType] = useState<WidgetType | null>(null);\n  // Stores the full WidgetDefinition for installed/store widgets dropped from the palette,\n  // so the config dialog can use the store metadata instead of the generic 'custom' definition.\n  const [pendingDropDefinition, setPendingDropDefinition] = useState<WidgetDefinition | null>(null);\n\n  // Store state\n  const isEditMode = useDashboardStore((state) => state.viewMode === 'edit');\n\n  // Fetch installed widgets only in edit mode — the palette and add-widget dialog\n  // are not usable in read-only view, so skip the request for viewer-only sessions.\n  const { workspaceId, apiGatewayUrl, authToken } = useBigConsole();\n  const { installedWidgets, loading: installedWidgetsLoading } = useInstalledWidgets({\n    workspaceId,\n    apiGatewayUrl,\n    authToken,\n    enabled: isEditMode,\n  });\n  // Built-in widget catalog from the backend (getWidgetTypes); falls back to the\n  // bundled registry while loading or if the supergraph hasn't adopted it yet.\n  const { definitions: widgetCatalog } = useWidgetCatalog({\n    workspaceId,\n    apiGatewayUrl,\n    authToken,\n    enabled: isEditMode,\n  });\n  const zoomLevel = useDashboardStore((state) => state.zoomLevel);\n  const setGlobalFilterValues = useDashboardStore((state) => state.setGlobalFilterValues);\n\n  // Handle filter changes - update store for widget access\n  const handleFilterChange = useCallback(\n    (filterValues: Record<string, unknown>) => {\n      // Update global filter values in dashboard store\n      setGlobalFilterValues(filterValues);\n\n      // Widgets can now access filter values via useGlobalFilterValues() hook\n      // When backend supports filter parameters, widget queries will include these values\n    },\n    [setGlobalFilterValues]\n  );\n\n  // Widget operations hook (connects to backend) - skipFetch since parent page fetches\n  const { createWidget: createWidgetApi } = useWidgetOperations(pageId, dashboardId, { skipFetch: true });\n\n  const widgetsMap = useWidgetStore((state) => state.widgets);\n  // Filter widgets to only show widgets for the current page\n  const widgetsArray = useMemo(() => {\n    const allWidgets = Array.from(widgetsMap.values());\n    if (!pageId) return allWidgets;\n    return allWidgets.filter((widget) => widget.pageId === pageId);\n  }, [widgetsMap, pageId]);\n  const selectedWidgetId = useWidgetStore((state) => state.selectedWidgetId);\n  const selectWidget = useWidgetStore((state) => state.selectWidget);\n  const addWidgetToStore = useWidgetStore((state) => state.addWidget);\n  const updateWidgetPosition = useWidgetStore((state) => state.updateWidgetPosition);\n  const configPanelOpen = useWidgetStore((state) => state.configPanelOpen);\n  const closeConfigPanel = useWidgetStore((state) => state.closeConfigPanel);\n\n  // Handle resize\n  useEffect(() => {\n    const updateWidth = () => {\n      if (containerRef.current) {\n        setContainerWidth(containerRef.current.offsetWidth);\n      }\n    };\n\n    updateWidth();\n    window.addEventListener('resize', updateWidth);\n    return () => window.removeEventListener('resize', updateWidth);\n  }, []);\n\n  // Handle layout change\n  const handleLayoutChange = useCallback(\n    (layout: Layout[]) => {\n      layout.forEach((item) => {\n        updateWidgetPosition(item.i, {\n          x: item.x,\n          y: item.y,\n          width: item.w,\n          height: item.h,\n        });\n      });\n    },\n    [updateWidgetPosition]\n  );\n\n  // Handle widget select\n  const handleWidgetSelect = useCallback(\n    (widgetId: string) => {\n      selectWidget(widgetId);\n    },\n    [selectWidget]\n  );\n\n  // Handle add widget - tries API first, falls back to local store\n  const handleAddWidget = useCallback(\n    async (widgetData: Partial<Widget>) => {\n      // Get widget definition for default size; prefer the pending drop definition\n      // which preserves installed/store widget metadata over the generic registry lookup.\n      const definition = pendingDropDefinition || (widgetData.type ? getWidgetDefinition(widgetData.type) : null);\n      const widgetSize = {\n        width: definition?.defaultSize?.width ?? 4,\n        height: definition?.defaultSize?.height ?? 4,\n      };\n\n      // Use pending drop position if available (from drag & drop), otherwise use smart placement\n      let position: { x: number; y: number; width: number; height: number };\n      if (pendingDropPosition) {\n        position = pendingDropPosition;\n      } else {\n        // Use smart placement algorithm - horizontal first, then next row\n        const { x, y } = findNextAvailablePosition(widgetsArray, widgetSize, { cols: 12 });\n        position = {\n          x,\n          y,\n          width: widgetSize.width,\n          height: widgetSize.height,\n        };\n      }\n\n      // Extract dataSinkId and parserId from widgetData (passed from WidgetConfigDialog)\n      const extendedData = widgetData as Partial<Widget> & { dataSinkId?: string; parserId?: string };\n\n      // Try to create via API first\n      if (pageId) {\n        const widget = await createWidgetApi({\n          pageId,\n          dashboardId,\n          type: widgetData.type!,\n          title: widgetData.title || 'Untitled Widget',\n          description: widgetData.description,\n          // v2.0: Renderer and template support\n          renderer: widgetData.renderer,\n          template: widgetData.template,\n          config: widgetData.config || {},\n          position,\n          refreshInterval: widgetData.refreshInterval ?? undefined,\n          // v2.0: Data source fields (DataSink → Parser → Widget)\n          dataSinkId: extendedData.dataSinkId,\n          parserId: extendedData.parserId,\n        });\n\n        if (widget) {\n          selectWidget(widget.id);\n          setIsAddDialogOpen(false);\n          // Clear pending drop state\n          setPendingDropPosition(null);\n          setPendingDropType(null);\n          setPendingDropDefinition(null);\n          return;\n        }\n      }\n\n      // Fallback to local store if API fails or no pageId\n      const newWidget: Widget = {\n        id: crypto.randomUUID(),\n        dashboardId,\n        pageId: pageId || 'local',\n        type: widgetData.type!,\n        title: widgetData.title || 'Untitled Widget',\n        description: widgetData.description,\n        // v2.0: Renderer and template support\n        renderer: widgetData.renderer,\n        template: widgetData.template,\n        refreshInterval: widgetData.refreshInterval,\n        config: widgetData.config || {},\n        position,\n        positionX: position.x,\n        positionY: position.y,\n        positionWidth: position.width,\n        positionHeight: position.height,\n        // v2.0: Data source fields (DataSink → Parser → Widget)\n        dataSinkId: extendedData.dataSinkId,\n        parserId: extendedData.parserId,\n        translations: [],\n        createdAt: new Date().toISOString(),\n        updatedAt: new Date().toISOString(),\n      };\n\n      addWidgetToStore(newWidget);\n      selectWidget(newWidget.id);\n      setIsAddDialogOpen(false);\n      // Clear pending drop state\n      setPendingDropPosition(null);\n      setPendingDropType(null);\n      setPendingDropDefinition(null);\n    },\n    [\n      dashboardId,\n      pageId,\n      createWidgetApi,\n      addWidgetToStore,\n      selectWidget,\n      widgetsArray,\n      pendingDropPosition,\n      pendingDropDefinition,\n    ]\n  );\n\n  // Handle drag start from palette\n  const handlePaletteDragStart = useCallback((type: WidgetType) => {\n    setIsDraggingWidget(true);\n    setDragWidgetType(type);\n  }, []);\n\n  // Handle drag end from palette\n  const handlePaletteDragEnd = useCallback(() => {\n    setIsDraggingWidget(false);\n    setDragWidgetType(null);\n  }, []);\n\n  // Handle drop on canvas - opens config dialog instead of creating widget directly\n  const handleCanvasDrop = useCallback(\n    (e: React.DragEvent) => {\n      e.preventDefault();\n      setIsDraggingWidget(false);\n      setDragWidgetType(null);\n\n      try {\n        const data = e.dataTransfer.getData('application/json');\n        if (!data) return;\n\n        const widgetData = JSON.parse(data);\n        const definition = getWidgetDefinition(widgetData.type);\n\n        // If the dropped data includes defaultConfig (from WidgetPalette drag serialization),\n        // reconstruct a full WidgetDefinition so installed/store widget identity is preserved.\n        let droppedDefinition: WidgetDefinition | null = null;\n        if (widgetData.defaultConfig && widgetData.category) {\n          droppedDefinition = {\n            ...definition,\n            name: widgetData.name || definition.name,\n            category: widgetData.category,\n            defaultConfig: widgetData.defaultConfig,\n            defaultSize: widgetData.defaultSize || definition.defaultSize,\n          };\n        }\n\n        // Calculate drop position relative to canvas\n        const canvasRect = containerRef.current?.getBoundingClientRect();\n        if (!canvasRect) return;\n\n        // Use utility to calculate grid position from drop coordinates\n        const widgetSize = {\n          width: definition.defaultSize.width,\n          height: definition.defaultSize.height,\n        };\n\n        const { x: gridX, y: gridY } = calculatePositionFromDrop(\n          e.clientX,\n          e.clientY,\n          canvasRect,\n          containerWidth,\n          widgetSize,\n          { cols: 12 }\n        );\n\n        const position = {\n          x: gridX,\n          y: gridY,\n          width: widgetSize.width,\n          height: widgetSize.height,\n        };\n\n        // Store the drop position, type, and full definition, then open the config dialog\n        setPendingDropPosition(position);\n        setPendingDropType(widgetData.type as WidgetType);\n        setPendingDropDefinition(droppedDefinition);\n        setIsAddDialogOpen(true);\n      } catch (error) {\n        console.error('Failed to handle widget drop:', error);\n      }\n    },\n    [containerWidth]\n  );\n\n  // Handle drag over to allow drop\n  const handleCanvasDragOver = useCallback((e: React.DragEvent) => {\n    e.preventDefault();\n    e.dataTransfer.dropEffect = 'copy';\n  }, []);\n\n  // Handle widget select from palette (quick add without drag)\n  const handlePaletteWidgetSelect = useCallback(\n    (type: WidgetType, paletteDefinition?: WidgetDefinition) => {\n      const definition = paletteDefinition || getWidgetDefinition(type);\n      handleAddWidget({\n        type,\n        title: definition.name,\n        config: definition.defaultConfig,\n      });\n      setIsPaletteOpen(false);\n    },\n    [handleAddWidget]\n  );\n\n  // Toggle palette\n  const togglePalette = useCallback(() => {\n    setIsPaletteOpen((prev) => !prev);\n  }, []);\n\n  // Board-pack export (PNG + PDF) — rasterizes the inner board element.\n  const {\n    exportPNG,\n    exportPDF,\n    isExporting: isExportingImage,\n  } = useDashboardImageExport({ containerRef: boardRef, name: title || 'dashboard' });\n  const handleExportImage = useCallback(() => {\n    void exportPNG();\n  }, [exportPNG]);\n  const handleExportPdf = useCallback(() => {\n    void exportPDF();\n  }, [exportPDF]);\n\n  return (\n    <div className=\"flex flex-col h-full min-w-0 overflow-hidden\">\n      {/* Toolbar */}\n      <DashboardToolbar\n        dashboardId={dashboardId}\n        title={title}\n        onAddWidget={() => setIsAddDialogOpen(true)}\n        onTogglePalette={togglePalette}\n        isPaletteOpen={isPaletteOpen}\n        onPaste={onPaste}\n        onSave={onSave}\n        isSaving={isSaving}\n        onExport={onExport}\n        onExportImage={handleExportImage}\n        onExportPdf={handleExportPdf}\n        isExportingImage={isExportingImage}\n        onShare={() => setIsShareDialogOpen(true)}\n      />\n\n      {/* Live wall-board freshness banner — renders only when the page has\n          auto-refreshing widgets (e.g. the Live Bed Board) and not in edit mode. */}\n      <LiveBoardBanner widgets={widgetsArray} isEditMode={isEditMode} />\n\n      {/* Global Filters Bar */}\n      {showFilters && <GlobalFiltersBar dashboardId={dashboardId} onFilterChange={handleFilterChange} collapsible />}\n\n      {/* Page Tabs - always show in edit mode so user can add first page */}\n      {showPageTabs && (isEditMode || pages.length > 0) && (\n        <PageTabsManager\n          pages={pages}\n          activePageId={activePageId || pages[0]?.id}\n          editable={isEditMode}\n          onPageSelect={onPageChange || (() => {})}\n          onPagesReorder={\n            onPagesReorder\n              ? (pageIds) => {\n                  // Convert string[] to DashboardPageTab[] for the callback\n                  const reorderedPages = pageIds.map((id) => pages.find((p) => p.id === id)!).filter(Boolean);\n                  onPagesReorder(reorderedPages);\n                }\n              : undefined\n          }\n          onPageCreate={onPageAdd}\n          onPageRename={onPageRename}\n          onPageDuplicate={onPageDuplicate}\n          onPageDelete={onPageDelete}\n        />\n      )}\n\n      {/* Main content area with palette and canvas */}\n      <div className=\"flex flex-1 min-w-0 overflow-hidden\">\n        {/* Widget Palette Sidebar */}\n        {isEditMode && (\n          <WidgetPalette\n            isOpen={isPaletteOpen}\n            onClose={() => setIsPaletteOpen(false)}\n            onWidgetSelect={handlePaletteWidgetSelect}\n            onDragStart={handlePaletteDragStart}\n            onDragEnd={handlePaletteDragEnd}\n            installedWidgets={installedWidgets}\n            installedWidgetsLoading={installedWidgetsLoading}\n            definitions={widgetCatalog}\n          />\n        )}\n\n        {/* Canvas area */}\n        <div\n          ref={containerRef}\n          className=\"flex-1 min-w-0 overflow-auto bg-bg-sunken\"\n          onDrop={handleCanvasDrop}\n          onDragOver={handleCanvasDragOver}\n          onClick={() => {\n            if (isEditMode) {\n              selectWidget(null);\n            }\n          }}\n          style={{\n            position: 'relative',\n            border: isDraggingWidget ? '2px dashed var(--color-action-primary-bg)' : 'none',\n            backgroundColor: isDraggingWidget ? 'var(--color-bg-hover)' : undefined,\n            transition: 'border-color 0.2s, background-color 0.2s',\n          }}\n        >\n          {/* Drop zone indicator */}\n          {isDraggingWidget && (\n            <div\n              style={{\n                position: 'absolute',\n                top: '50%',\n                left: '50%',\n                transform: 'translate(-50%, -50%)',\n                padding: 'var(--space-pagePadding)',\n                backgroundColor: 'var(--color-bg-surface)',\n                borderRadius: 'var(--radius-card)',\n                boxShadow: 'var(--shadow-elevation-2)',\n                textAlign: 'center',\n                pointerEvents: 'none',\n                zIndex: 100,\n              }}\n            >\n              <p style={{ fontSize: 'var(--font-size-body-md)', color: 'var(--color-text-primary)', margin: 0 }}>\n                Drop to add <strong>{dragWidgetType}</strong> widget\n              </p>\n            </div>\n          )}\n\n          <div\n            ref={boardRef}\n            className=\"min-h-full origin-top-left transition-transform\"\n            style={{\n              transform: `scale(${zoomLevel / 100})`,\n              width: `${100 / (zoomLevel / 100)}%`,\n            }}\n          >\n            {widgetsArray.length > 0 ? (\n              <CrossFilterProvider\n                enabled={enableCrossFilter}\n                onCrossFilter={(_filters) => {\n                  // Cross-filter applied - widget queries can access filter values\n                }}\n              >\n                <DashboardGrid\n                  widgets={widgetsArray}\n                  isEditMode={isEditMode}\n                  width={containerWidth}\n                  onLayoutChange={handleLayoutChange}\n                  onWidgetSelect={handleWidgetSelect}\n                  selectedWidgetId={selectedWidgetId}\n                />\n              </CrossFilterProvider>\n            ) : (\n              <div className=\"flex flex-col items-center justify-center min-h-[400px] p-8\">\n                <div className=\"w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-bg-surface\">\n                  <svg className=\"w-8 h-8 text-text-secondary\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z\"\n                    />\n                  </svg>\n                </div>\n                <h3 className=\"text-lg font-medium text-text-primary mb-2\">No widgets yet</h3>\n                <p className=\"text-sm text-text-secondary mb-4 text-center max-w-[300px]\">\n                  Add widgets to build your dashboard. Click the &quot;Add Widget&quot; button to get started.\n                </p>\n                {isEditMode && (\n                  <button\n                    type=\"button\"\n                    onClick={() => setIsAddDialogOpen(true)}\n                    className=\"\n                      inline-flex items-center gap-2\n                      px-4 py-2\n                      text-sm font-medium\n                      text-action-primary-fg\n                      bg-action-primary-bg\n                      hover:bg-action-primary-bgHover\n                      rounded-md\n                      transition-colors\n                    \"\n                  >\n                    <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 4v16m8-8H4\" />\n                    </svg>\n                    Add Widget\n                  </button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n\n      {/* Properties Panel */}\n      <PropertiesPanel isOpen={configPanelOpen} onClose={closeConfigPanel} />\n\n      {/* Add Widget Dialog */}\n      <WidgetConfigDialog\n        isOpen={isAddDialogOpen}\n        onClose={() => {\n          setIsAddDialogOpen(false);\n          // Clear pending drop state when dialog is closed\n          setPendingDropPosition(null);\n          setPendingDropType(null);\n          setPendingDropDefinition(null);\n        }}\n        onSave={handleAddWidget}\n        preselectedType={pendingDropType || undefined}\n        preselectedDefinition={pendingDropDefinition || undefined}\n        dashboardId={dashboardId}\n        installedWidgets={installedWidgets}\n      />\n\n      {/* Share Dialog */}\n      <ShareDialog\n        dashboardId={dashboardId}\n        dashboardName={title || 'Dashboard'}\n        isOpen={isShareDialogOpen}\n        onClose={() => setIsShareDialogOpen(false)}\n      />\n    </div>\n  );\n});\n\nexport default DashboardCanvas;\n"],"mappings":"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"}

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

@@ -13,7 +13,7 @@ var D = r(function({ dashboardId: r, title: D, onAddWidget: O, onTogglePalette:
 		U && j && j();
 	}, [U, j]);
 	return /* @__PURE__ */ y(T, { children: /* @__PURE__ */ b("div", {
-		className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2 px-4 py-2 bg-background border-b",
+		className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2 px-4 py-2 bg-bg-surface border-b",
 		children: [
 			/* @__PURE__ */ b("div", {
 				className: "flex min-w-0 items-center gap-4",
@@ -37,7 +37,7 @@ var D = r(function({ dashboardId: r, title: D, onAddWidget: O, onTogglePalette:
 						})
 					}), /* @__PURE__ */ y(w, { children: "Zoom out" })] }),
 					/* @__PURE__ */ b("span", {
-						className: "text-sm text-muted-foreground w-12 text-center",
+						className: "text-sm text-text-secondary w-12 text-center",
 						children: [V, "%"]
 					}),
 					/* @__PURE__ */ b(C, { children: [/* @__PURE__ */ y(E, {

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/DashboardToolbar.tsx"],"sourcesContent":["/**\n * DashboardToolbar Component\n *\n * Toolbar for dashboard actions and controls.\n * Uses fe-libs shared components for consistent styling.\n * Phase 2: Added SavedViewsDropdown and Share button.\n */\n\nimport { type FC, memo, useCallback } from 'react';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@burdenoff/fe-libs/ui';\nimport { Spinner } from '@burdenoff/fe-libs/ui';\nimport {\n  Plus,\n  Clipboard,\n  Eye,\n  Pencil,\n  Save,\n  Download,\n  Minus,\n  RotateCcw,\n  Share2,\n  PanelLeftClose,\n  PanelLeft,\n  Image as ImageIcon,\n  FileText,\n} from 'lucide-react';\nimport { useDashboardStore, useWidgetStore } from '../../store';\nimport { SavedViewsDropdown } from './SavedViewsDropdown';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DashboardToolbarProps {\n  /** Dashboard ID for saved views */\n  dashboardId?: string;\n  /** Dashboard title */\n  title?: string;\n  /** Callback to add widget */\n  onAddWidget: () => void;\n  /** Callback to toggle widget palette */\n  onTogglePalette?: () => void;\n  /** Whether palette is open */\n  isPaletteOpen?: boolean;\n  /** Callback to paste widget */\n  onPaste?: () => void;\n  /** Callback to save dashboard */\n  onSave?: () => void;\n  /** Whether save is in progress */\n  isSaving?: boolean;\n  /** Callback to export dashboard (JSON console definition) */\n  onExport?: () => void;\n  /** Callback to export the board as a PNG image */\n  onExportImage?: () => void;\n  /** Callback to export the board as a PDF */\n  onExportPdf?: () => void;\n  /** Whether an image/PDF export is in progress */\n  isExportingImage?: boolean;\n  /** Callback to open share dialog */\n  onShare?: () => void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DashboardToolbar: FC<DashboardToolbarProps> = memo(function DashboardToolbar({\n  dashboardId,\n  title,\n  onAddWidget,\n  onTogglePalette,\n  isPaletteOpen = false,\n  onPaste,\n  onSave,\n  isSaving = false,\n  onExport,\n  onExportImage,\n  onExportPdf,\n  isExportingImage = false,\n  onShare,\n}) {\n  const isEditMode = useDashboardStore((state) => state.viewMode === 'edit');\n  const toggleViewMode = useDashboardStore((state) => state.toggleViewMode);\n  const zoomLevel = useDashboardStore((state) => state.zoomLevel);\n  const setZoomLevel = useDashboardStore((state) => state.setZoomLevel);\n\n  const clipboardWidgetId = useWidgetStore((state) => state.clipboardWidgetId);\n  const hasClipboard = !!clipboardWidgetId;\n\n  // Handle paste - use provided callback or fallback\n  const handlePaste = useCallback(() => {\n    if (hasClipboard && onPaste) {\n      onPaste();\n    }\n  }, [hasClipboard, onPaste]);\n\n  return (\n    <TooltipProvider>\n      <div className=\"flex flex-wrap items-center justify-between gap-x-4 gap-y-2 px-4 py-2 bg-background border-b\">\n        {/* Left section */}\n        <div className=\"flex min-w-0 items-center gap-4\">\n          {title && (\n            <h1 className=\"min-w-0 truncate text-lg font-semibold\" title={title}>\n              {title}\n            </h1>\n          )}\n          {/* Saved Views Dropdown */}\n          {dashboardId && <SavedViewsDropdown dashboardId={dashboardId} />}\n        </div>\n\n        {/* Center section - Zoom controls */}\n        <div className=\"flex flex-shrink-0 items-center gap-1\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                onClick={() => setZoomLevel(Math.max(50, zoomLevel - 10))}\n                disabled={zoomLevel <= 50}\n              >\n                <Minus className=\"size-4\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent>Zoom out</TooltipContent>\n          </Tooltip>\n\n          <span className=\"text-sm text-muted-foreground w-12 text-center\">{zoomLevel}%</span>\n\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                onClick={() => setZoomLevel(Math.min(200, zoomLevel + 10))}\n                disabled={zoomLevel >= 200}\n              >\n                <Plus className=\"size-4\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent>Zoom in</TooltipContent>\n          </Tooltip>\n\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button variant=\"ghost\" size=\"sm\" onClick={() => setZoomLevel(100)}>\n                <RotateCcw className=\"size-3.5 mr-1\" />\n                Reset\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent>Reset zoom to 100%</TooltipContent>\n          </Tooltip>\n        </div>\n\n        {/* Right section - Actions */}\n        <div className=\"flex flex-wrap items-center justify-end gap-2\">\n          {isEditMode && (\n            <>\n              {/* Widget Palette Toggle */}\n              {onTogglePalette && (\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button variant={isPaletteOpen ? 'secondary' : 'outline'} size=\"sm\" onClick={onTogglePalette}>\n                      {isPaletteOpen ? <PanelLeftClose className=\"size-4\" /> : <PanelLeft className=\"size-4\" />}\n                      Widgets\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent>\n                    {isPaletteOpen ? 'Hide widget palette' : 'Show widget palette for drag & drop'}\n                  </TooltipContent>\n                </Tooltip>\n              )}\n\n              {/* Paste */}\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <Button variant=\"ghost\" size=\"sm\" onClick={handlePaste} disabled={!hasClipboard}>\n                    <Clipboard className=\"size-4\" />\n                    Paste\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent>Paste widget from clipboard</TooltipContent>\n              </Tooltip>\n\n              {/* Add Widget (Dialog) */}\n              <Button size=\"sm\" onClick={onAddWidget}>\n                <Plus className=\"size-4\" />\n                Add Widget\n              </Button>\n            </>\n          )}\n\n          {/* Edit/View Mode Toggle */}\n          <Button variant={isEditMode ? 'secondary' : 'outline'} size=\"sm\" onClick={toggleViewMode}>\n            {isEditMode ? (\n              <>\n                <Eye className=\"size-4\" />\n                Preview\n              </>\n            ) : (\n              <>\n                <Pencil className=\"size-4\" />\n                Edit\n              </>\n            )}\n          </Button>\n\n          {/* Save */}\n          {onSave && (\n            <Button variant=\"outline\" size=\"sm\" onClick={onSave} disabled={isSaving}>\n              {isSaving ? (\n                <>\n                  <Spinner className=\"size-4\" />\n                  Saving...\n                </>\n              ) : (\n                <>\n                  <Save className=\"size-4\" />\n                  Save\n                </>\n              )}\n            </Button>\n          )}\n\n          {/* Share */}\n          {onShare && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"sm\" onClick={onShare}>\n                  <Share2 className=\"size-4\" />\n                  Share\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Share dashboard with others</TooltipContent>\n            </Tooltip>\n          )}\n\n          {/* Export — JSON definition */}\n          {onExport && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"sm\" onClick={onExport}>\n                  <Download className=\"size-4\" />\n                  Export\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Export dashboard to JSON</TooltipContent>\n            </Tooltip>\n          )}\n\n          {/* Export — board PNG */}\n          {onExportImage && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-sm\" onClick={onExportImage} disabled={isExportingImage}>\n                  {isExportingImage ? <Spinner className=\"size-4\" /> : <ImageIcon className=\"size-4\" />}\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Export board as PNG image</TooltipContent>\n            </Tooltip>\n          )}\n\n          {/* Export — board PDF */}\n          {onExportPdf && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-sm\" onClick={onExportPdf} disabled={isExportingImage}>\n                  <FileText className=\"size-4\" />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Export board as PDF</TooltipContent>\n            </Tooltip>\n          )}\n        </div>\n      </div>\n    </TooltipProvider>\n  );\n});\n\nexport default DashboardToolbar;\n"],"mappings":"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"}
+{"version":3,"file":"DashboardToolbar.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/DashboardToolbar.tsx"],"sourcesContent":["/**\n * DashboardToolbar Component\n *\n * Toolbar for dashboard actions and controls.\n * Uses fe-libs shared components for consistent styling.\n * Phase 2: Added SavedViewsDropdown and Share button.\n */\n\nimport { type FC, memo, useCallback } from 'react';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@burdenoff/fe-libs/ui';\nimport { Spinner } from '@burdenoff/fe-libs/ui';\nimport {\n  Plus,\n  Clipboard,\n  Eye,\n  Pencil,\n  Save,\n  Download,\n  Minus,\n  RotateCcw,\n  Share2,\n  PanelLeftClose,\n  PanelLeft,\n  Image as ImageIcon,\n  FileText,\n} from 'lucide-react';\nimport { useDashboardStore, useWidgetStore } from '../../store';\nimport { SavedViewsDropdown } from './SavedViewsDropdown';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DashboardToolbarProps {\n  /** Dashboard ID for saved views */\n  dashboardId?: string;\n  /** Dashboard title */\n  title?: string;\n  /** Callback to add widget */\n  onAddWidget: () => void;\n  /** Callback to toggle widget palette */\n  onTogglePalette?: () => void;\n  /** Whether palette is open */\n  isPaletteOpen?: boolean;\n  /** Callback to paste widget */\n  onPaste?: () => void;\n  /** Callback to save dashboard */\n  onSave?: () => void;\n  /** Whether save is in progress */\n  isSaving?: boolean;\n  /** Callback to export dashboard (JSON console definition) */\n  onExport?: () => void;\n  /** Callback to export the board as a PNG image */\n  onExportImage?: () => void;\n  /** Callback to export the board as a PDF */\n  onExportPdf?: () => void;\n  /** Whether an image/PDF export is in progress */\n  isExportingImage?: boolean;\n  /** Callback to open share dialog */\n  onShare?: () => void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DashboardToolbar: FC<DashboardToolbarProps> = memo(function DashboardToolbar({\n  dashboardId,\n  title,\n  onAddWidget,\n  onTogglePalette,\n  isPaletteOpen = false,\n  onPaste,\n  onSave,\n  isSaving = false,\n  onExport,\n  onExportImage,\n  onExportPdf,\n  isExportingImage = false,\n  onShare,\n}) {\n  const isEditMode = useDashboardStore((state) => state.viewMode === 'edit');\n  const toggleViewMode = useDashboardStore((state) => state.toggleViewMode);\n  const zoomLevel = useDashboardStore((state) => state.zoomLevel);\n  const setZoomLevel = useDashboardStore((state) => state.setZoomLevel);\n\n  const clipboardWidgetId = useWidgetStore((state) => state.clipboardWidgetId);\n  const hasClipboard = !!clipboardWidgetId;\n\n  // Handle paste - use provided callback or fallback\n  const handlePaste = useCallback(() => {\n    if (hasClipboard && onPaste) {\n      onPaste();\n    }\n  }, [hasClipboard, onPaste]);\n\n  return (\n    <TooltipProvider>\n      <div className=\"flex flex-wrap items-center justify-between gap-x-4 gap-y-2 px-4 py-2 bg-bg-surface border-b\">\n        {/* Left section */}\n        <div className=\"flex min-w-0 items-center gap-4\">\n          {title && (\n            <h1 className=\"min-w-0 truncate text-lg font-semibold\" title={title}>\n              {title}\n            </h1>\n          )}\n          {/* Saved Views Dropdown */}\n          {dashboardId && <SavedViewsDropdown dashboardId={dashboardId} />}\n        </div>\n\n        {/* Center section - Zoom controls */}\n        <div className=\"flex flex-shrink-0 items-center gap-1\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                onClick={() => setZoomLevel(Math.max(50, zoomLevel - 10))}\n                disabled={zoomLevel <= 50}\n              >\n                <Minus className=\"size-4\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent>Zoom out</TooltipContent>\n          </Tooltip>\n\n          <span className=\"text-sm text-text-secondary w-12 text-center\">{zoomLevel}%</span>\n\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                onClick={() => setZoomLevel(Math.min(200, zoomLevel + 10))}\n                disabled={zoomLevel >= 200}\n              >\n                <Plus className=\"size-4\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent>Zoom in</TooltipContent>\n          </Tooltip>\n\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button variant=\"ghost\" size=\"sm\" onClick={() => setZoomLevel(100)}>\n                <RotateCcw className=\"size-3.5 mr-1\" />\n                Reset\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent>Reset zoom to 100%</TooltipContent>\n          </Tooltip>\n        </div>\n\n        {/* Right section - Actions */}\n        <div className=\"flex flex-wrap items-center justify-end gap-2\">\n          {isEditMode && (\n            <>\n              {/* Widget Palette Toggle */}\n              {onTogglePalette && (\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button variant={isPaletteOpen ? 'secondary' : 'outline'} size=\"sm\" onClick={onTogglePalette}>\n                      {isPaletteOpen ? <PanelLeftClose className=\"size-4\" /> : <PanelLeft className=\"size-4\" />}\n                      Widgets\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent>\n                    {isPaletteOpen ? 'Hide widget palette' : 'Show widget palette for drag & drop'}\n                  </TooltipContent>\n                </Tooltip>\n              )}\n\n              {/* Paste */}\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <Button variant=\"ghost\" size=\"sm\" onClick={handlePaste} disabled={!hasClipboard}>\n                    <Clipboard className=\"size-4\" />\n                    Paste\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent>Paste widget from clipboard</TooltipContent>\n              </Tooltip>\n\n              {/* Add Widget (Dialog) */}\n              <Button size=\"sm\" onClick={onAddWidget}>\n                <Plus className=\"size-4\" />\n                Add Widget\n              </Button>\n            </>\n          )}\n\n          {/* Edit/View Mode Toggle */}\n          <Button variant={isEditMode ? 'secondary' : 'outline'} size=\"sm\" onClick={toggleViewMode}>\n            {isEditMode ? (\n              <>\n                <Eye className=\"size-4\" />\n                Preview\n              </>\n            ) : (\n              <>\n                <Pencil className=\"size-4\" />\n                Edit\n              </>\n            )}\n          </Button>\n\n          {/* Save */}\n          {onSave && (\n            <Button variant=\"outline\" size=\"sm\" onClick={onSave} disabled={isSaving}>\n              {isSaving ? (\n                <>\n                  <Spinner className=\"size-4\" />\n                  Saving...\n                </>\n              ) : (\n                <>\n                  <Save className=\"size-4\" />\n                  Save\n                </>\n              )}\n            </Button>\n          )}\n\n          {/* Share */}\n          {onShare && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"sm\" onClick={onShare}>\n                  <Share2 className=\"size-4\" />\n                  Share\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Share dashboard with others</TooltipContent>\n            </Tooltip>\n          )}\n\n          {/* Export — JSON definition */}\n          {onExport && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"sm\" onClick={onExport}>\n                  <Download className=\"size-4\" />\n                  Export\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Export dashboard to JSON</TooltipContent>\n            </Tooltip>\n          )}\n\n          {/* Export — board PNG */}\n          {onExportImage && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-sm\" onClick={onExportImage} disabled={isExportingImage}>\n                  {isExportingImage ? <Spinner className=\"size-4\" /> : <ImageIcon className=\"size-4\" />}\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Export board as PNG image</TooltipContent>\n            </Tooltip>\n          )}\n\n          {/* Export — board PDF */}\n          {onExportPdf && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-sm\" onClick={onExportPdf} disabled={isExportingImage}>\n                  <FileText className=\"size-4\" />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Export board as PDF</TooltipContent>\n            </Tooltip>\n          )}\n        </div>\n      </div>\n    </TooltipProvider>\n  );\n});\n\nexport default DashboardToolbar;\n"],"mappings":"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"}

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

@@ -95,7 +95,7 @@ var p = r(function({ className: r = "", currentDashboardId: p, currentDashboardN
 				children: m
 			}),
 			/* @__PURE__ */ f("span", {
-				className: "ml-auto text-xs text-text-tertiary bg-bg-muted px-2 py-0.5 rounded",
+				className: "ml-auto text-xs text-text-tertiary bg-bg-sunken px-2 py-0.5 rounded",
 				children: ["Level ", b]
 			})
 		]

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

@@ -1 +1 @@
-{"version":3,"file":"DrilldownBreadcrumb.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/DrilldownBreadcrumb.tsx"],"sourcesContent":["/**\n * DrilldownBreadcrumb Component\n *\n * Displays a breadcrumb trail showing the drilldown navigation path.\n * Allows users to navigate back up the drilldown hierarchy.\n *\n * URL Parameters Used:\n * - drilldown_depth: Current depth in drilldown hierarchy\n * - drilldown_parent: Parent dashboard ID\n * - drilldown_path: JSON array of dashboard IDs in the path\n */\n\nimport { memo, useCallback, useEffect, useState } from 'react';\nimport { useBigConsoleNavigate } from '../../context';\nimport { useFilterUrlSync } from '../../hooks/useFilterUrlSync';\nimport { useDashboardStore } from '../../store';\nimport { ChevronRight, Home, ArrowLeft } from 'lucide-react';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ninterface DrilldownBreadcrumbProps {\n  /** Additional CSS classes */\n  className?: string;\n  /** Current dashboard ID */\n  currentDashboardId?: string;\n  /** Current dashboard name */\n  currentDashboardName?: string;\n  /** Whether to show the home/root link */\n  showHome?: boolean;\n  /** Base path for dashboard URLs */\n  basePath?: string;\n}\n\ninterface BreadcrumbItem {\n  id: string;\n  name: string;\n  href: string;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DrilldownBreadcrumb = memo(function DrilldownBreadcrumb({\n  className = '',\n  currentDashboardId,\n  currentDashboardName,\n  showHome = true,\n  basePath = '/bigconsole/dashboards',\n}: DrilldownBreadcrumbProps) {\n  const navigate = useBigConsoleNavigate();\n  const { getDrilldownMetadata, isInDrilldown, drilldownDepth } = useFilterUrlSync();\n\n  // Get dashboards from store for name lookup\n  const dashboards = useDashboardStore((state) => state.dashboards);\n\n  const [breadcrumbs, setBreadcrumbs] = useState<BreadcrumbItem[]>([]);\n\n  // Build breadcrumb items from path\n  useEffect(() => {\n    if (!isInDrilldown) {\n      setBreadcrumbs([]);\n      return;\n    }\n\n    const metadata = getDrilldownMetadata();\n    const { path } = metadata;\n\n    if (path.length === 0) {\n      setBreadcrumbs([]);\n      return;\n    }\n\n    // Map path IDs to breadcrumb items\n    const items: BreadcrumbItem[] = path.map((dashboardId) => {\n      // Try to find dashboard name in store\n      const dashboard = dashboards.get(dashboardId);\n      const name = dashboard?.name || `Dashboard ${dashboardId.slice(0, 8)}...`;\n\n      return {\n        id: dashboardId,\n        name,\n        href: `${basePath}/${dashboardId}`,\n      };\n    });\n\n    setBreadcrumbs(items);\n  }, [isInDrilldown, getDrilldownMetadata, dashboards, basePath]);\n\n  // Handle navigation to a breadcrumb item\n  const handleNavigate = useCallback(\n    (item: BreadcrumbItem, index: number) => {\n      // Build URL preserving context up to this point\n      const metadata = getDrilldownMetadata();\n      const newPath = metadata.path.slice(0, index);\n      const newDepth = index;\n\n      // Build URL with updated drilldown params\n      const url = new URL(item.href, window.location.origin);\n      url.searchParams.set('drilldown_depth', String(newDepth));\n      if (newPath.length > 0) {\n        url.searchParams.set('drilldown_path', encodeURIComponent(JSON.stringify(newPath)));\n      }\n      if (index > 0 && newPath.length > 0) {\n        url.searchParams.set('drilldown_parent', newPath[newPath.length - 1]);\n      }\n\n      navigate(url.pathname + url.search);\n    },\n    [getDrilldownMetadata, navigate]\n  );\n\n  // Handle back button click\n  const handleBack = useCallback(() => {\n    const metadata = getDrilldownMetadata();\n\n    if (metadata.parent) {\n      // Navigate to parent dashboard\n      const newPath = metadata.path.slice(0, -1);\n      const newDepth = metadata.depth - 1;\n\n      const url = new URL(`${basePath}/${metadata.parent}`, window.location.origin);\n      url.searchParams.set('drilldown_depth', String(newDepth));\n      if (newPath.length > 0) {\n        url.searchParams.set('drilldown_path', encodeURIComponent(JSON.stringify(newPath)));\n        url.searchParams.set('drilldown_parent', newPath[newPath.length - 1]);\n      }\n\n      navigate(url.pathname + url.search);\n    } else if (breadcrumbs.length > 0) {\n      // Navigate to last breadcrumb\n      const lastBreadcrumb = breadcrumbs[breadcrumbs.length - 1];\n      handleNavigate(lastBreadcrumb, breadcrumbs.length - 1);\n    }\n  }, [getDrilldownMetadata, basePath, navigate, breadcrumbs, handleNavigate]);\n\n  // Handle home click\n  const handleHomeClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      navigate(basePath);\n    },\n    [navigate, basePath]\n  );\n\n  // Don't render if not in drilldown mode\n  if (!isInDrilldown) {\n    return null;\n  }\n\n  return (\n    <nav\n      className={`flex items-center gap-2 px-4 py-2 bg-bg-surface border-b border-border-default ${className}`}\n      aria-label=\"Drilldown breadcrumb\"\n    >\n      {/* Back button */}\n      <button\n        type=\"button\"\n        onClick={handleBack}\n        className=\"flex items-center gap-1 px-2 py-1 text-sm font-medium text-action-primary-bg hover:bg-action-primary-bg/10 rounded-md transition-colors\"\n        aria-label=\"Go back\"\n      >\n        <ArrowLeft className=\"w-4 h-4\" />\n        <span className=\"hidden sm:inline\">Back</span>\n      </button>\n\n      <span className=\"text-border-default\">|</span>\n\n      {/* Home link */}\n      {showHome && (\n        <>\n          <a\n            href={basePath}\n            onClick={handleHomeClick}\n            className=\"flex items-center gap-1 text-sm text-text-secondary hover:text-text-primary transition-colors\"\n            aria-label=\"Home\"\n          >\n            <Home className=\"w-4 h-4\" />\n            <span className=\"hidden sm:inline\">Dashboards</span>\n          </a>\n          <ChevronRight className=\"w-4 h-4 text-text-tertiary\" />\n        </>\n      )}\n\n      {/* Breadcrumb items */}\n      {breadcrumbs.map((item, index) => (\n        <div key={item.id} className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => handleNavigate(item, index)}\n            className=\"text-sm text-text-secondary hover:text-text-primary hover:underline transition-colors max-w-[150px] truncate\"\n            title={item.name}\n          >\n            {item.name}\n          </button>\n          <ChevronRight className=\"w-4 h-4 text-text-tertiary\" />\n        </div>\n      ))}\n\n      {/* Current dashboard (non-clickable) */}\n      {currentDashboardName && (\n        <span className=\"text-sm font-medium text-text-primary max-w-[200px] truncate\" title={currentDashboardName}>\n          {currentDashboardName}\n        </span>\n      )}\n\n      {/* Depth indicator */}\n      <span className=\"ml-auto text-xs text-text-tertiary bg-bg-muted px-2 py-0.5 rounded\">Level {drilldownDepth}</span>\n    </nav>\n  );\n});\n\nexport default DrilldownBreadcrumb;\n"],"mappings":"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"}
+{"version":3,"file":"DrilldownBreadcrumb.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/DrilldownBreadcrumb.tsx"],"sourcesContent":["/**\n * DrilldownBreadcrumb Component\n *\n * Displays a breadcrumb trail showing the drilldown navigation path.\n * Allows users to navigate back up the drilldown hierarchy.\n *\n * URL Parameters Used:\n * - drilldown_depth: Current depth in drilldown hierarchy\n * - drilldown_parent: Parent dashboard ID\n * - drilldown_path: JSON array of dashboard IDs in the path\n */\n\nimport { memo, useCallback, useEffect, useState } from 'react';\nimport { useBigConsoleNavigate } from '../../context';\nimport { useFilterUrlSync } from '../../hooks/useFilterUrlSync';\nimport { useDashboardStore } from '../../store';\nimport { ChevronRight, Home, ArrowLeft } from 'lucide-react';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ninterface DrilldownBreadcrumbProps {\n  /** Additional CSS classes */\n  className?: string;\n  /** Current dashboard ID */\n  currentDashboardId?: string;\n  /** Current dashboard name */\n  currentDashboardName?: string;\n  /** Whether to show the home/root link */\n  showHome?: boolean;\n  /** Base path for dashboard URLs */\n  basePath?: string;\n}\n\ninterface BreadcrumbItem {\n  id: string;\n  name: string;\n  href: string;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DrilldownBreadcrumb = memo(function DrilldownBreadcrumb({\n  className = '',\n  currentDashboardId,\n  currentDashboardName,\n  showHome = true,\n  basePath = '/bigconsole/dashboards',\n}: DrilldownBreadcrumbProps) {\n  const navigate = useBigConsoleNavigate();\n  const { getDrilldownMetadata, isInDrilldown, drilldownDepth } = useFilterUrlSync();\n\n  // Get dashboards from store for name lookup\n  const dashboards = useDashboardStore((state) => state.dashboards);\n\n  const [breadcrumbs, setBreadcrumbs] = useState<BreadcrumbItem[]>([]);\n\n  // Build breadcrumb items from path\n  useEffect(() => {\n    if (!isInDrilldown) {\n      setBreadcrumbs([]);\n      return;\n    }\n\n    const metadata = getDrilldownMetadata();\n    const { path } = metadata;\n\n    if (path.length === 0) {\n      setBreadcrumbs([]);\n      return;\n    }\n\n    // Map path IDs to breadcrumb items\n    const items: BreadcrumbItem[] = path.map((dashboardId) => {\n      // Try to find dashboard name in store\n      const dashboard = dashboards.get(dashboardId);\n      const name = dashboard?.name || `Dashboard ${dashboardId.slice(0, 8)}...`;\n\n      return {\n        id: dashboardId,\n        name,\n        href: `${basePath}/${dashboardId}`,\n      };\n    });\n\n    setBreadcrumbs(items);\n  }, [isInDrilldown, getDrilldownMetadata, dashboards, basePath]);\n\n  // Handle navigation to a breadcrumb item\n  const handleNavigate = useCallback(\n    (item: BreadcrumbItem, index: number) => {\n      // Build URL preserving context up to this point\n      const metadata = getDrilldownMetadata();\n      const newPath = metadata.path.slice(0, index);\n      const newDepth = index;\n\n      // Build URL with updated drilldown params\n      const url = new URL(item.href, window.location.origin);\n      url.searchParams.set('drilldown_depth', String(newDepth));\n      if (newPath.length > 0) {\n        url.searchParams.set('drilldown_path', encodeURIComponent(JSON.stringify(newPath)));\n      }\n      if (index > 0 && newPath.length > 0) {\n        url.searchParams.set('drilldown_parent', newPath[newPath.length - 1]);\n      }\n\n      navigate(url.pathname + url.search);\n    },\n    [getDrilldownMetadata, navigate]\n  );\n\n  // Handle back button click\n  const handleBack = useCallback(() => {\n    const metadata = getDrilldownMetadata();\n\n    if (metadata.parent) {\n      // Navigate to parent dashboard\n      const newPath = metadata.path.slice(0, -1);\n      const newDepth = metadata.depth - 1;\n\n      const url = new URL(`${basePath}/${metadata.parent}`, window.location.origin);\n      url.searchParams.set('drilldown_depth', String(newDepth));\n      if (newPath.length > 0) {\n        url.searchParams.set('drilldown_path', encodeURIComponent(JSON.stringify(newPath)));\n        url.searchParams.set('drilldown_parent', newPath[newPath.length - 1]);\n      }\n\n      navigate(url.pathname + url.search);\n    } else if (breadcrumbs.length > 0) {\n      // Navigate to last breadcrumb\n      const lastBreadcrumb = breadcrumbs[breadcrumbs.length - 1];\n      handleNavigate(lastBreadcrumb, breadcrumbs.length - 1);\n    }\n  }, [getDrilldownMetadata, basePath, navigate, breadcrumbs, handleNavigate]);\n\n  // Handle home click\n  const handleHomeClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      navigate(basePath);\n    },\n    [navigate, basePath]\n  );\n\n  // Don't render if not in drilldown mode\n  if (!isInDrilldown) {\n    return null;\n  }\n\n  return (\n    <nav\n      className={`flex items-center gap-2 px-4 py-2 bg-bg-surface border-b border-border-default ${className}`}\n      aria-label=\"Drilldown breadcrumb\"\n    >\n      {/* Back button */}\n      <button\n        type=\"button\"\n        onClick={handleBack}\n        className=\"flex items-center gap-1 px-2 py-1 text-sm font-medium text-action-primary-bg hover:bg-action-primary-bg/10 rounded-md transition-colors\"\n        aria-label=\"Go back\"\n      >\n        <ArrowLeft className=\"w-4 h-4\" />\n        <span className=\"hidden sm:inline\">Back</span>\n      </button>\n\n      <span className=\"text-border-default\">|</span>\n\n      {/* Home link */}\n      {showHome && (\n        <>\n          <a\n            href={basePath}\n            onClick={handleHomeClick}\n            className=\"flex items-center gap-1 text-sm text-text-secondary hover:text-text-primary transition-colors\"\n            aria-label=\"Home\"\n          >\n            <Home className=\"w-4 h-4\" />\n            <span className=\"hidden sm:inline\">Dashboards</span>\n          </a>\n          <ChevronRight className=\"w-4 h-4 text-text-tertiary\" />\n        </>\n      )}\n\n      {/* Breadcrumb items */}\n      {breadcrumbs.map((item, index) => (\n        <div key={item.id} className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => handleNavigate(item, index)}\n            className=\"text-sm text-text-secondary hover:text-text-primary hover:underline transition-colors max-w-[150px] truncate\"\n            title={item.name}\n          >\n            {item.name}\n          </button>\n          <ChevronRight className=\"w-4 h-4 text-text-tertiary\" />\n        </div>\n      ))}\n\n      {/* Current dashboard (non-clickable) */}\n      {currentDashboardName && (\n        <span className=\"text-sm font-medium text-text-primary max-w-[200px] truncate\" title={currentDashboardName}>\n          {currentDashboardName}\n        </span>\n      )}\n\n      {/* Depth indicator */}\n      <span className=\"ml-auto text-xs text-text-tertiary bg-bg-sunken px-2 py-0.5 rounded\">Level {drilldownDepth}</span>\n    </nav>\n  );\n});\n\nexport default DrilldownBreadcrumb;\n"],"mappings":"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"}