@burdenoff/microfe-bigconsole 2026.710.3 → 2026.711.2

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

@@ -26,17 +26,17 @@ import { calculatePositionFromDrop as ce, findNextAvailablePosition as le } from
 import { memo as u, useCallback as d, useEffect as ue, useMemo as de, useRef as f, useState as p } from "react";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/bigconsole/components/dashboard/DashboardCanvas.tsx
-var g = u(function({ dashboardId: u, pageId: g, title: _, onPaste: fe, onSave: pe, isSaving: me = !1, onExport: he, pages: v = [], activePageId: y, onPageChange: ge, onPagesReorder: b, onPageAdd: x, onPageRename: _e, onPageDuplicate: ve, onPageDelete: ye, showFilters: be = !0, showPageTabs: xe = !0, enableCrossFilter: Se = !0 }) {
-	let S = f(null), C = f(null), [w, Ce] = p(1200), [we, T] = p(!1), [Te, E] = p(!1), [D, O] = p(!1), [k, A] = p(!1), [Ee, j] = p(null), [M, N] = p(null), [P, F] = p(null), [I, L] = p(null), R = t((e) => e.viewMode === "edit"), { workspaceId: z, apiGatewayUrl: B, authToken: V } = r(), { installedWidgets: H, loading: De } = c({
-		workspaceId: z,
-		apiGatewayUrl: B,
-		authToken: V,
-		enabled: R
-	}), { definitions: Oe } = a({
-		workspaceId: z,
-		apiGatewayUrl: B,
-		authToken: V,
-		enabled: R
+var g = u(function({ dashboardId: u, pageId: g, title: _, onPaste: fe, onSave: pe, isSaving: me = !1, onExport: he, pages: v = [], activePageId: ge, onPageChange: _e, onPagesReorder: y, onPageAdd: b, onPageRename: ve, onPageDuplicate: ye, onPageDelete: be, showFilters: xe = !0, showPageTabs: Se = !0, enableCrossFilter: Ce = !0 }) {
+	let x = f(null), S = f(null), [C, we] = p(1200), [Te, w] = p(!1), [Ee, T] = p(!1), [E, D] = p(!1), [O, k] = p(!1), [De, A] = p(null), [j, M] = p(null), [N, P] = p(null), [F, I] = p(null), L = t((e) => e.viewMode === "edit"), { workspaceId: R, apiGatewayUrl: z, authToken: B } = r(), { installedWidgets: V, loading: Oe } = c({
+		workspaceId: R,
+		apiGatewayUrl: z,
+		authToken: B,
+		enabled: L
+	}), { definitions: H } = a({
+		workspaceId: R,
+		apiGatewayUrl: z,
+		authToken: B,
+		enabled: L
 	}), U = t((e) => e.zoomLevel), W = t((e) => e.setGlobalFilterValues), ke = d((e) => {
 		W(e);
 	}, [W]), { createWidget: G } = o(g, u, { skipFetch: !0 }), K = e((e) => e.widgets), q = de(() => {
@@ -45,7 +45,7 @@ var g = u(function({ dashboardId: u, pageId: g, title: _, onPaste: fe, onSave: p
 	}, [K, g]), Ae = e((e) => e.selectedWidgetId), J = e((e) => e.selectWidget), Y = e((e) => e.addWidget), X = e((e) => e.updateWidgetPosition), je = e((e) => e.configPanelOpen), Me = e((e) => e.closeConfigPanel);
 	ue(() => {
 		let e = () => {
-			S.current && Ce(S.current.offsetWidth);
+			x.current && we(x.current.offsetWidth);
 		};
 		return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
 	}, []);
@@ -61,11 +61,11 @@ var g = u(function({ dashboardId: u, pageId: g, title: _, onPaste: fe, onSave: p
 	}, [X]), Pe = d((e) => {
 		J(e);
 	}, [J]), Z = d(async (e) => {
-		let t = I || (e.type ? i(e.type) : null), n = {
+		let t = F || (e.type ? i(e.type) : null), n = {
 			width: t?.defaultSize?.width ?? 4,
 			height: t?.defaultSize?.height ?? 4
 		}, r;
-		if (M) r = M;
+		if (j) r = j;
 		else {
 			let { x: e, y: t } = le(q, n, { cols: 12 });
 			r = {
@@ -92,7 +92,7 @@ var g = u(function({ dashboardId: u, pageId: g, title: _, onPaste: fe, onSave: p
 				parserId: a.parserId
 			});
 			if (t) {
-				J(t.id), T(!1), N(null), F(null), L(null);
+				J(t.id), w(!1), M(null), P(null), I(null);
 				return;
 			}
 		}
@@ -118,7 +118,7 @@ var g = u(function({ dashboardId: u, pageId: g, title: _, onPaste: fe, onSave: p
 			createdAt: (/* @__PURE__ */ new Date()).toISOString(),
 			updatedAt: (/* @__PURE__ */ new Date()).toISOString()
 		};
-		Y(o), J(o.id), T(!1), N(null), F(null), L(null);
+		Y(o), J(o.id), w(!1), M(null), P(null), I(null);
 	}, [
 		u,
 		g,
@@ -126,14 +126,14 @@ var g = u(function({ dashboardId: u, pageId: g, title: _, onPaste: fe, onSave: p
 		Y,
 		J,
 		q,
-		M,
-		I
+		j,
+		F
 	]), Fe = d((e) => {
-		A(!0), j(e);
+		k(!0), A(e);
 	}, []), Ie = d(() => {
-		A(!1), j(null);
+		k(!1), A(null);
 	}, []), Le = d((e) => {
-		e.preventDefault(), A(!1), j(null);
+		e.preventDefault(), k(!1), A(null);
 		try {
 			let t = e.dataTransfer.getData("application/json");
 			if (!t) return;
@@ -145,22 +145,22 @@ var g = u(function({ dashboardId: u, pageId: g, title: _, onPaste: fe, onSave: p
 				defaultConfig: n.defaultConfig,
 				defaultSize: n.defaultSize || r.defaultSize
 			});
-			let o = S.current?.getBoundingClientRect();
+			let o = x.current?.getBoundingClientRect();
 			if (!o) return;
 			let s = {
 				width: r.defaultSize.width,
 				height: r.defaultSize.height
-			}, { x: c, y: l } = ce(e.clientX, e.clientY, o, w, s, { cols: 12 });
-			N({
+			}, { x: c, y: l } = ce(e.clientX, e.clientY, o, C, s, { cols: 12 });
+			M({
 				x: c,
 				y: l,
 				width: s.width,
 				height: s.height
-			}), F(n.type), L(a), T(!0);
+			}), P(n.type), I(a), w(!0);
 		} catch (e) {
 			console.error("Failed to handle widget drop:", e);
 		}
-	}, [w]), Re = d((e) => {
+	}, [C]), Re = d((e) => {
 		e.preventDefault(), e.dataTransfer.dropEffect = "copy";
 	}, []), ze = d((e, t) => {
 		let n = t || i(e);
@@ -168,11 +168,11 @@ var g = u(function({ dashboardId: u, pageId: g, title: _, onPaste: fe, onSave: p
 			type: e,
 			title: n.name,
 			config: n.defaultConfig
-		}), O(!1);
+		}), D(!1);
 	}, [Z]), Be = d(() => {
-		O((e) => !e);
+		D((e) => !e);
 	}, []), { exportPNG: Q, exportPDF: $, isExporting: Ve } = s({
-		containerRef: C,
+		containerRef: S,
 		name: _ || "dashboard"
 	});
 	return /* @__PURE__ */ h("div", {
@@ -181,9 +181,9 @@ var g = u(function({ dashboardId: u, pageId: g, title: _, onPaste: fe, onSave: p
 			/* @__PURE__ */ m(ee, {
 				dashboardId: u,
 				title: _,
-				onAddWidget: () => T(!0),
+				onAddWidget: () => w(!0),
 				onTogglePalette: Be,
-				isPaletteOpen: D,
+				isPaletteOpen: E,
 				onPaste: fe,
 				onSave: pe,
 				isSaving: me,
@@ -195,56 +195,56 @@ var g = u(function({ dashboardId: u, pageId: g, title: _, onPaste: fe, onSave: p
 					$();
 				}, [$]),
 				isExportingImage: Ve,
-				onShare: () => E(!0)
+				onShare: () => T(!0)
 			}),
 			/* @__PURE__ */ m(ne, {
 				widgets: q,
-				isEditMode: R
+				isEditMode: L
 			}),
-			be && /* @__PURE__ */ m(te, {
+			xe && /* @__PURE__ */ m(te, {
 				dashboardId: u,
 				onFilterChange: ke,
 				collapsible: !0
 			}),
-			xe && (R || v.length > 0) && /* @__PURE__ */ m(re, {
+			Se && (L || v.length > 0) && /* @__PURE__ */ m(re, {
 				pages: v,
-				activePageId: y || v[0]?.id,
-				editable: R,
-				onPageSelect: ge || (() => {}),
-				onPagesReorder: b ? (e) => {
-					b(e.map((e) => v.find((t) => t.id === e)).filter(Boolean));
+				activePageId: ge || v[0]?.id,
+				editable: L,
+				onPageSelect: _e || (() => {}),
+				onPagesReorder: y ? (e) => {
+					y(e.map((e) => v.find((t) => t.id === e)).filter(Boolean));
 				} : void 0,
-				onPageCreate: x,
-				onPageRename: _e,
-				onPageDuplicate: ve,
-				onPageDelete: ye
+				onPageCreate: b,
+				onPageRename: ve,
+				onPageDuplicate: ye,
+				onPageDelete: be
 			}),
 			/* @__PURE__ */ h("div", {
 				className: "flex flex-1 min-w-0 overflow-hidden",
-				children: [R && /* @__PURE__ */ m(ae, {
-					isOpen: D,
-					onClose: () => O(!1),
+				children: [L && /* @__PURE__ */ m(ae, {
+					isOpen: E,
+					onClose: () => D(!1),
 					onWidgetSelect: ze,
 					onDragStart: Fe,
 					onDragEnd: Ie,
-					installedWidgets: H,
-					installedWidgetsLoading: De,
-					definitions: Oe
+					installedWidgets: V,
+					installedWidgetsLoading: Oe,
+					definitions: H
 				}), /* @__PURE__ */ h("div", {
-					ref: S,
+					ref: x,
 					className: "flex-1 min-w-0 overflow-auto bg-bg-sunken",
 					onDrop: Le,
 					onDragOver: Re,
 					onClick: () => {
-						R && J(null);
+						L && J(null);
 					},
 					style: {
 						position: "relative",
-						border: k ? "2px dashed var(--color-action-primary-bg)" : "none",
-						backgroundColor: k ? "var(--color-bg-hover)" : void 0,
+						border: O ? "2px dashed var(--color-action-primary-bg)" : "none",
+						backgroundColor: O ? "var(--color-bg-hover)" : void 0,
 						transition: "border-color 0.2s, background-color 0.2s"
 					},
-					children: [k && /* @__PURE__ */ m("div", {
+					children: [O && /* @__PURE__ */ m("div", {
 						style: {
 							position: "absolute",
 							top: "50%",
@@ -266,24 +266,24 @@ var g = u(function({ dashboardId: u, pageId: g, title: _, onPaste: fe, onSave: p
 							},
 							children: [
 								"Drop to add ",
-								/* @__PURE__ */ m("strong", { children: Ee }),
+								/* @__PURE__ */ m("strong", { children: De }),
 								" widget"
 							]
 						})
 					}), /* @__PURE__ */ m("div", {
-						ref: C,
+						ref: S,
 						className: "min-h-full origin-top-left transition-transform",
 						style: {
 							transform: `scale(${U / 100})`,
 							width: `${100 / (U / 100)}%`
 						},
 						children: q.length > 0 ? /* @__PURE__ */ m(n, {
-							enabled: Se,
+							enabled: Ce,
 							onCrossFilter: (e) => {},
 							children: /* @__PURE__ */ m(l, {
 								widgets: q,
-								isEditMode: R,
-								width: w,
+								isEditMode: L,
+								width: C,
 								onLayoutChange: Ne,
 								onWidgetSelect: Pe,
 								selectedWidgetId: Ae
@@ -314,9 +314,9 @@ var g = u(function({ dashboardId: u, pageId: g, title: _, onPaste: fe, onSave: p
 									className: "text-sm text-text-secondary mb-4 text-center max-w-[300px]",
 									children: "Add widgets to build your dashboard. Click the \"Add Widget\" button to get started."
 								}),
-								R && /* @__PURE__ */ h("button", {
+								L && /* @__PURE__ */ h("button", {
 									type: "button",
-									onClick: () => T(!0),
+									onClick: () => w(!0),
 									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                    ",
 									children: [/* @__PURE__ */ m("svg", {
 										className: "w-4 h-4",
@@ -341,21 +341,22 @@ var g = u(function({ dashboardId: u, pageId: g, title: _, onPaste: fe, onSave: p
 				onClose: Me
 			}),
 			/* @__PURE__ */ m(oe, {
-				isOpen: we,
+				isOpen: Te,
 				onClose: () => {
-					T(!1), N(null), F(null), L(null);
+					w(!1), M(null), P(null), I(null);
 				},
 				onSave: Z,
-				preselectedType: P || void 0,
-				preselectedDefinition: I || void 0,
+				preselectedType: N || void 0,
+				preselectedDefinition: F || void 0,
 				dashboardId: u,
-				installedWidgets: H
+				installedWidgets: V,
+				definitions: H
 			}),
 			/* @__PURE__ */ m(ie, {
 				dashboardId: u,
 				dashboardName: _ || "Dashboard",
-				isOpen: Te,
-				onClose: () => E(!1)
+				isOpen: Ee,
+				onClose: () => T(!1)
 			})
 		]
 	});

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-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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"}
+{"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        definitions={widgetCatalog}\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/WidgetPalette.js

@@ -279,10 +279,27 @@ var F = {
 		category: t,
 		label: e[t],
 		widgets: h.filter((e) => e.category === t)
-	})) : t()).map((e) => e.category === "Installed" ? {
-		...e,
-		widgets: p
-	} : e).filter((e) => e.category !== "Installed" || e.widgets.length > 0), [p, h]), E = a(() => {
+	})) : t()).map((e) => {
+		if (e.category === "Installed") {
+			let t = /* @__PURE__ */ new Map();
+			for (let e of p) t.set(e.name.toLowerCase(), e);
+			for (let n of e.widgets) {
+				let e = n.name.toLowerCase(), r = t.get(e);
+				t.set(e, r ? {
+					...n,
+					defaultConfig: {
+						...r.defaultConfig,
+						...n.defaultConfig
+					}
+				} : n);
+			}
+			return {
+				...e,
+				widgets: Array.from(t.values())
+			};
+		}
+		return e;
+	}).filter((e) => e.category !== "Installed" || e.widgets.length > 0), [p, h]), E = a(() => {
 		if (!g.trim()) return w;
 		let e = g.toLowerCase();
 		return w.map((t) => ({

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

@@ -1 +1 @@
-{"version":3,"file":"WidgetPalette.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/WidgetPalette.tsx"],"sourcesContent":["/**\n * WidgetPalette Component\n *\n * Sidebar panel with draggable widget types for the dashboard builder.\n * Uses semantic tokens for consistent theming.\n * Features categorized widgets, search, and drag-and-drop support.\n */\n\nimport { type FC, memo, useState, useCallback, useMemo } from 'react';\nimport { Input } from '@burdenoff/fe-libs/ui';\nimport {\n  Search,\n  ChevronDown,\n  ChevronRight,\n  TrendingUp,\n  BarChart3,\n  Filter,\n  Table,\n  Grid3x3,\n  Gauge,\n  Activity,\n  List,\n  FileText,\n  Type,\n  ExternalLink,\n  MapPin,\n  Calendar,\n  Columns,\n  GitBranch,\n  Puzzle,\n  LayoutDashboard,\n  GripVertical,\n  X,\n  Layers,\n  type LucideIcon,\n} from 'lucide-react';\nimport {\n  getWidgetCategories,\n  getWidgetKey,\n  WIDGET_CATEGORY_LABELS,\n  type WidgetDefinition,\n} from '../widgets/WidgetRegistry';\nimport type { WidgetType, WidgetCategory } from '../../types';\n\n// ============================================================================\n// Icon Mapping\n// ============================================================================\n\nconst ICON_MAP: Record<string, LucideIcon> = {\n  TrendingUp,\n  BarChart3,\n  Filter,\n  Table,\n  Grid3x3,\n  Gauge,\n  Activity,\n  List,\n  FileText,\n  Type,\n  ExternalLink,\n  MapPin,\n  Calendar,\n  Columns,\n  GitBranch,\n  Puzzle,\n  LayoutDashboard,\n};\n\nfunction getIconComponent(iconName: string): LucideIcon {\n  return ICON_MAP[iconName] || Puzzle;\n}\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface WidgetPaletteProps {\n  /** Whether the palette is open */\n  isOpen: boolean;\n  /** Callback to close the palette */\n  onClose: () => void;\n  /** Callback when a widget is selected (for quick add without drag) */\n  onWidgetSelect?: (type: WidgetType, definition?: WidgetDefinition) => void;\n  /** Callback when drag starts */\n  onDragStart?: (type: WidgetType, definition: WidgetDefinition) => void;\n  /** Callback when drag ends */\n  onDragEnd?: () => void;\n  /** Installed widgets from the store (fetched by parent) */\n  installedWidgets?: WidgetDefinition[];\n  /** Whether installed widgets are still loading */\n  installedWidgetsLoading?: boolean;\n  /**\n   * Built-in widget catalog (from the backend `getWidgetTypes`, fetched by the\n   * parent via useWidgetCatalog). When omitted, falls back to the bundled\n   * static registry.\n   */\n  definitions?: WidgetDefinition[];\n}\n\n// ============================================================================\n// Styles using semantic tokens\n// ============================================================================\n\nconst styles = {\n  container: {\n    width: '300px',\n    height: '100%',\n    backgroundColor: 'var(--color-bg-surface)',\n    borderRight: '1px solid var(--color-border)',\n    display: 'flex',\n    flexDirection: 'column' as const,\n    flexShrink: 0,\n    overflow: 'hidden',\n    position: 'relative' as const,\n  },\n  header: {\n    padding: 'var(--space-formGap)',\n    borderBottom: '1px solid var(--color-border)',\n    backgroundColor: 'var(--color-bg-sunken)',\n    flexShrink: 0,\n  },\n  headerTop: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    marginBottom: 'var(--space-controlGap)',\n  },\n  headerTitle: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: 'var(--space-iconGap)',\n  },\n  headerIcon: {\n    width: '32px',\n    height: '32px',\n    borderRadius: 'var(--radius-button)',\n    backgroundColor: 'var(--color-action-primary-bg)',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  title: {\n    fontSize: 'var(--font-size-body-md)',\n    fontWeight: 'var(--font-weight-semibold)' as const,\n    color: 'var(--color-text-primary)',\n    margin: 0,\n  },\n  subtitle: {\n    fontSize: 'var(--font-size-body-xs)',\n    color: 'var(--color-text-muted)',\n    margin: '2px 0 0 0',\n  },\n  closeButton: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '28px',\n    height: '28px',\n    border: 'none',\n    background: 'transparent',\n    borderRadius: 'var(--radius-button)',\n    cursor: 'pointer',\n    color: 'var(--color-text-secondary)',\n    transition: 'background-color 0.15s',\n  },\n  searchContainer: {\n    position: 'relative' as const,\n  },\n  searchIcon: {\n    position: 'absolute' as const,\n    left: '10px',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    width: '16px',\n    height: '16px',\n    color: 'var(--color-text-muted)',\n    pointerEvents: 'none' as const,\n  },\n  searchInput: {\n    width: '100%',\n    paddingLeft: '36px',\n    height: 'var(--size-controlHeight-sm)',\n    fontSize: 'var(--font-size-body-sm)',\n  },\n  content: {\n    flex: '1 1 0',\n    minHeight: 0,\n    overflow: 'hidden',\n    position: 'relative' as const,\n  },\n  scrollArea: {\n    position: 'absolute' as const,\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    overflowY: 'auto' as const,\n    overflowX: 'hidden' as const,\n    padding: 'var(--space-controlGap)',\n  },\n  categoryContainer: {\n    marginBottom: 'var(--space-controlGap)',\n  },\n  categoryHeader: {\n    width: '100%',\n    display: 'flex',\n    alignItems: 'center',\n    gap: 'var(--space-iconGap)',\n    padding: 'var(--space-controlGap) var(--space-iconGap)',\n    border: 'none',\n    background: 'transparent',\n    cursor: 'pointer',\n    borderRadius: 'var(--radius-button)',\n    transition: 'background-color 0.15s',\n  },\n  categoryChevron: {\n    width: '16px',\n    height: '16px',\n    color: 'var(--color-text-muted)',\n    flexShrink: 0,\n  },\n  categoryLabel: {\n    flex: 1,\n    textAlign: 'left' as const,\n    fontSize: 'var(--font-size-body-xs)',\n    fontWeight: 'var(--font-weight-semibold)' as const,\n    color: 'var(--color-text-secondary)',\n    textTransform: 'uppercase' as const,\n    letterSpacing: '0.05em',\n  },\n  categoryCount: {\n    fontSize: 'var(--font-size-body-xs)',\n    color: 'var(--color-text-muted)',\n    backgroundColor: 'var(--color-bg-sunken)',\n    padding: '2px 8px',\n    borderRadius: 'var(--radius-full)',\n  },\n  widgetList: {\n    display: 'flex',\n    flexDirection: 'column' as const,\n    gap: '4px',\n    marginTop: 'var(--space-controlGap)',\n    paddingLeft: '4px',\n  },\n  widgetCard: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: 'var(--space-iconGap)',\n    padding: 'var(--space-controlGap)',\n    borderRadius: 'var(--radius-card)',\n    cursor: 'grab',\n    backgroundColor: 'var(--color-bg-surface)',\n    border: '1px solid var(--color-border)',\n    transition: 'all 0.15s ease',\n  },\n  widgetCardHover: {\n    backgroundColor: 'var(--color-bg-hover)',\n    borderColor: 'var(--color-action-primary-border)',\n    boxShadow: 'var(--shadow-elevation-1)',\n  },\n  dragHandle: {\n    width: '16px',\n    height: '16px',\n    color: 'var(--color-text-muted)',\n    opacity: 0.5,\n    flexShrink: 0,\n  },\n  widgetIcon: {\n    width: '36px',\n    height: '36px',\n    borderRadius: 'var(--radius-button)',\n    backgroundColor: 'var(--color-bg-sunken)',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n  },\n  widgetIconInner: {\n    width: '18px',\n    height: '18px',\n    color: 'var(--color-action-primary-bg)',\n  },\n  widgetText: {\n    flex: 1,\n    minWidth: 0,\n    overflow: 'hidden',\n  },\n  widgetName: {\n    fontSize: 'var(--font-size-body-sm)',\n    fontWeight: 'var(--font-weight-medium)' as const,\n    color: 'var(--color-text-primary)',\n    whiteSpace: 'nowrap' as const,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    marginBottom: '2px',\n  },\n  widgetDescription: {\n    fontSize: 'var(--font-size-body-xs)',\n    color: 'var(--color-text-muted)',\n    lineHeight: 1.3,\n    overflow: 'hidden',\n    display: '-webkit-box',\n    WebkitLineClamp: 2,\n    WebkitBoxOrient: 'vertical' as const,\n  },\n  emptyState: {\n    textAlign: 'center' as const,\n    padding: 'var(--space-pagePadding)',\n  },\n  emptyIcon: {\n    width: '48px',\n    height: '48px',\n    borderRadius: 'var(--radius-card)',\n    backgroundColor: 'var(--color-bg-sunken)',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    margin: '0 auto var(--space-formGap)',\n  },\n  emptyText: {\n    fontSize: 'var(--font-size-body-sm)',\n    color: 'var(--color-text-muted)',\n    margin: 0,\n  },\n  clearButton: {\n    marginTop: 'var(--space-controlGap)',\n    padding: 'var(--space-controlGap) var(--space-formGap)',\n    fontSize: 'var(--font-size-body-xs)',\n    fontWeight: 'var(--font-weight-medium)' as const,\n    color: 'var(--color-action-primary-text)',\n    backgroundColor: 'var(--color-action-primary-bg)',\n    border: 'none',\n    borderRadius: 'var(--radius-button)',\n    cursor: 'pointer',\n  },\n  footer: {\n    padding: 'var(--space-controlGap) var(--space-formGap)',\n    borderTop: '1px solid var(--color-border)',\n    backgroundColor: 'var(--color-bg-sunken)',\n    flexShrink: 0,\n  },\n  footerText: {\n    fontSize: 'var(--font-size-body-xs)',\n    color: 'var(--color-text-muted)',\n    margin: 0,\n    textAlign: 'center' as const,\n  },\n};\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const WidgetPalette: FC<WidgetPaletteProps> = memo(function WidgetPalette({\n  isOpen,\n  onClose,\n  onWidgetSelect,\n  onDragStart,\n  onDragEnd,\n  installedWidgets = [],\n  installedWidgetsLoading = false,\n  definitions,\n}) {\n  const [searchQuery, setSearchQuery] = useState('');\n  const [expandedCategories, setExpandedCategories] = useState<Set<WidgetCategory>>(\n    new Set(['KPI', 'Visualization', 'Data', 'Content', 'Temporal', 'Custom', 'Installed'])\n  );\n  const [hoveredWidget, setHoveredWidget] = useState<string | null>(null);\n\n  // Get categorized widgets, merging in installed widgets. When the parent\n  // supplies a backend-sourced catalog (`definitions`), group that by category;\n  // otherwise fall back to the bundled static registry.\n  const categories = useMemo(() => {\n    const baseCategories = definitions\n      ? (Object.keys(WIDGET_CATEGORY_LABELS) as WidgetCategory[]).map((category) => ({\n          category,\n          label: WIDGET_CATEGORY_LABELS[category],\n          widgets: definitions.filter((def) => def.category === category),\n        }))\n      : getWidgetCategories();\n\n    return baseCategories\n      .map((cat) => {\n        if (cat.category === 'Installed') {\n          return { ...cat, widgets: installedWidgets };\n        }\n        return cat;\n      })\n      .filter((cat) => cat.category !== 'Installed' || cat.widgets.length > 0);\n  }, [installedWidgets, definitions]);\n\n  // Filter widgets by search query\n  const filteredCategories = useMemo(() => {\n    if (!searchQuery.trim()) {\n      return categories;\n    }\n\n    const query = searchQuery.toLowerCase();\n    return categories\n      .map((cat) => ({\n        ...cat,\n        widgets: cat.widgets.filter(\n          (w) =>\n            w.name.toLowerCase().includes(query) ||\n            w.description.toLowerCase().includes(query) ||\n            w.tags.some((tag) => tag.includes(query))\n        ),\n      }))\n      .filter((cat) => cat.widgets.length > 0);\n  }, [categories, searchQuery]);\n\n  // Toggle category expansion\n  const toggleCategory = useCallback((category: WidgetCategory) => {\n    setExpandedCategories((prev) => {\n      const next = new Set(prev);\n      if (next.has(category)) {\n        next.delete(category);\n      } else {\n        next.add(category);\n      }\n      return next;\n    });\n  }, []);\n\n  // Handle drag start\n  const handleDragStart = useCallback(\n    (e: React.DragEvent, widget: WidgetDefinition) => {\n      e.dataTransfer.setData(\n        'application/json',\n        JSON.stringify({\n          type: widget.type,\n          name: widget.name,\n          defaultSize: widget.defaultSize,\n          defaultConfig: widget.defaultConfig,\n          category: widget.category,\n        })\n      );\n      e.dataTransfer.effectAllowed = 'copy';\n\n      // Create custom drag image\n      const dragImage = document.createElement('div');\n      dragImage.style.cssText = `\n        position: absolute;\n        top: -1000px;\n        left: -1000px;\n        padding: 8px 12px;\n        background: var(--color-bg-surface);\n        border: 2px solid var(--color-action-primary-bg);\n        border-radius: 8px;\n        font-size: 14px;\n        font-weight: 500;\n        color: var(--color-text-primary);\n        box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n      `;\n      dragImage.textContent = widget.name;\n      document.body.appendChild(dragImage);\n      e.dataTransfer.setDragImage(dragImage, 0, 0);\n\n      setTimeout(() => {\n        document.body.removeChild(dragImage);\n      }, 0);\n\n      onDragStart?.(widget.type, widget);\n    },\n    [onDragStart]\n  );\n\n  // Handle drag end\n  const handleDragEnd = useCallback(() => {\n    onDragEnd?.();\n  }, [onDragEnd]);\n\n  // Handle click to quick-add\n  const handleWidgetClick = useCallback(\n    (widget: WidgetDefinition) => {\n      onWidgetSelect?.(widget.type, widget);\n    },\n    [onWidgetSelect]\n  );\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <div style={styles.container}>\n      {/* Header */}\n      <div style={styles.header}>\n        <div style={styles.headerTop}>\n          <div style={styles.headerTitle}>\n            <div style={styles.headerIcon}>\n              <Layers style={{ width: '18px', height: '18px', color: 'var(--color-action-primary-text)' }} />\n            </div>\n            <div>\n              <h3 style={styles.title}>Widgets</h3>\n              <p style={styles.subtitle}>Drag or click to add</p>\n            </div>\n          </div>\n          <button\n            type=\"button\"\n            onClick={onClose}\n            style={styles.closeButton}\n            onMouseOver={(e) => (e.currentTarget.style.backgroundColor = 'var(--color-bg-hover)')}\n            onMouseOut={(e) => (e.currentTarget.style.backgroundColor = 'transparent')}\n          >\n            <X style={{ width: '16px', height: '16px' }} />\n          </button>\n        </div>\n\n        {/* Search */}\n        <div style={styles.searchContainer}>\n          <Search style={styles.searchIcon} />\n          <Input\n            type=\"text\"\n            placeholder=\"Search widgets...\"\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            style={styles.searchInput}\n          />\n        </div>\n      </div>\n\n      {/* Widget Categories */}\n      <div style={styles.content}>\n        <div style={styles.scrollArea}>\n          {filteredCategories.map((category) => (\n            <div key={category.category} style={styles.categoryContainer}>\n              {/* Category Header */}\n              <button\n                type=\"button\"\n                onClick={() => toggleCategory(category.category)}\n                style={styles.categoryHeader}\n                onMouseOver={(e) => (e.currentTarget.style.backgroundColor = 'var(--color-bg-hover)')}\n                onMouseOut={(e) => (e.currentTarget.style.backgroundColor = 'transparent')}\n              >\n                {expandedCategories.has(category.category) ? (\n                  <ChevronDown style={styles.categoryChevron} />\n                ) : (\n                  <ChevronRight style={styles.categoryChevron} />\n                )}\n                <span style={styles.categoryLabel}>{category.label}</span>\n                <span style={styles.categoryCount}>{category.widgets.length}</span>\n              </button>\n\n              {/* Widget Items */}\n              {expandedCategories.has(category.category) && (\n                <div style={styles.widgetList}>\n                  {installedWidgetsLoading && category.category === 'Installed' && (\n                    <div\n                      style={{\n                        fontSize: 'var(--font-size-body-xs)',\n                        color: 'var(--color-text-muted)',\n                        padding: 'var(--space-controlGap)',\n                      }}\n                    >\n                      Loading...\n                    </div>\n                  )}\n                  {category.widgets.map((widget) => {\n                    const IconComponent = getIconComponent(widget.icon);\n                    const widgetKey = getWidgetKey(widget);\n                    const isHovered = hoveredWidget === widgetKey;\n\n                    return (\n                      <div\n                        key={widgetKey}\n                        draggable\n                        onDragStart={(e) => handleDragStart(e, widget)}\n                        onDragEnd={handleDragEnd}\n                        onClick={() => handleWidgetClick(widget)}\n                        onMouseEnter={() => setHoveredWidget(widgetKey)}\n                        onMouseLeave={() => setHoveredWidget(null)}\n                        style={{\n                          ...styles.widgetCard,\n                          ...(isHovered ? styles.widgetCardHover : {}),\n                        }}\n                      >\n                        {/* Drag Handle */}\n                        <GripVertical style={styles.dragHandle} />\n\n                        {/* Icon */}\n                        <div style={styles.widgetIcon}>\n                          <IconComponent style={styles.widgetIconInner} />\n                        </div>\n\n                        {/* Text */}\n                        <div style={styles.widgetText}>\n                          <div style={styles.widgetName}>{widget.name}</div>\n                          <div style={styles.widgetDescription}>{widget.description}</div>\n                        </div>\n                      </div>\n                    );\n                  })}\n                </div>\n              )}\n            </div>\n          ))}\n\n          {filteredCategories.length === 0 && (\n            <div style={styles.emptyState}>\n              <div style={styles.emptyIcon}>\n                <Search style={{ width: '24px', height: '24px', color: 'var(--color-text-muted)' }} />\n              </div>\n              <p style={styles.emptyText}>\n                No widgets found for \"<strong>{searchQuery}</strong>\"\n              </p>\n              <button type=\"button\" onClick={() => setSearchQuery('')} style={styles.clearButton}>\n                Clear search\n              </button>\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Footer */}\n      <div style={styles.footer}>\n        <p style={styles.footerText}>Drag widgets to position them on the canvas</p>\n      </div>\n    </div>\n  );\n});\n\nexport default WidgetPalette;\n"],"mappings":"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"}
+{"version":3,"file":"WidgetPalette.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/WidgetPalette.tsx"],"sourcesContent":["/**\n * WidgetPalette Component\n *\n * Sidebar panel with draggable widget types for the dashboard builder.\n * Uses semantic tokens for consistent theming.\n * Features categorized widgets, search, and drag-and-drop support.\n */\n\nimport { type FC, memo, useState, useCallback, useMemo } from 'react';\nimport { Input } from '@burdenoff/fe-libs/ui';\nimport {\n  Search,\n  ChevronDown,\n  ChevronRight,\n  TrendingUp,\n  BarChart3,\n  Filter,\n  Table,\n  Grid3x3,\n  Gauge,\n  Activity,\n  List,\n  FileText,\n  Type,\n  ExternalLink,\n  MapPin,\n  Calendar,\n  Columns,\n  GitBranch,\n  Puzzle,\n  LayoutDashboard,\n  GripVertical,\n  X,\n  Layers,\n  type LucideIcon,\n} from 'lucide-react';\nimport {\n  getWidgetCategories,\n  getWidgetKey,\n  WIDGET_CATEGORY_LABELS,\n  type WidgetDefinition,\n} from '../widgets/WidgetRegistry';\nimport type { WidgetType, WidgetCategory } from '../../types';\n\n// ============================================================================\n// Icon Mapping\n// ============================================================================\n\nconst ICON_MAP: Record<string, LucideIcon> = {\n  TrendingUp,\n  BarChart3,\n  Filter,\n  Table,\n  Grid3x3,\n  Gauge,\n  Activity,\n  List,\n  FileText,\n  Type,\n  ExternalLink,\n  MapPin,\n  Calendar,\n  Columns,\n  GitBranch,\n  Puzzle,\n  LayoutDashboard,\n};\n\nfunction getIconComponent(iconName: string): LucideIcon {\n  return ICON_MAP[iconName] || Puzzle;\n}\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface WidgetPaletteProps {\n  /** Whether the palette is open */\n  isOpen: boolean;\n  /** Callback to close the palette */\n  onClose: () => void;\n  /** Callback when a widget is selected (for quick add without drag) */\n  onWidgetSelect?: (type: WidgetType, definition?: WidgetDefinition) => void;\n  /** Callback when drag starts */\n  onDragStart?: (type: WidgetType, definition: WidgetDefinition) => void;\n  /** Callback when drag ends */\n  onDragEnd?: () => void;\n  /** Installed widgets from the store (fetched by parent) */\n  installedWidgets?: WidgetDefinition[];\n  /** Whether installed widgets are still loading */\n  installedWidgetsLoading?: boolean;\n  /**\n   * Built-in widget catalog (from the backend `getWidgetTypes`, fetched by the\n   * parent via useWidgetCatalog). When omitted, falls back to the bundled\n   * static registry.\n   */\n  definitions?: WidgetDefinition[];\n}\n\n// ============================================================================\n// Styles using semantic tokens\n// ============================================================================\n\nconst styles = {\n  container: {\n    width: '300px',\n    height: '100%',\n    backgroundColor: 'var(--color-bg-surface)',\n    borderRight: '1px solid var(--color-border)',\n    display: 'flex',\n    flexDirection: 'column' as const,\n    flexShrink: 0,\n    overflow: 'hidden',\n    position: 'relative' as const,\n  },\n  header: {\n    padding: 'var(--space-formGap)',\n    borderBottom: '1px solid var(--color-border)',\n    backgroundColor: 'var(--color-bg-sunken)',\n    flexShrink: 0,\n  },\n  headerTop: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    marginBottom: 'var(--space-controlGap)',\n  },\n  headerTitle: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: 'var(--space-iconGap)',\n  },\n  headerIcon: {\n    width: '32px',\n    height: '32px',\n    borderRadius: 'var(--radius-button)',\n    backgroundColor: 'var(--color-action-primary-bg)',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  title: {\n    fontSize: 'var(--font-size-body-md)',\n    fontWeight: 'var(--font-weight-semibold)' as const,\n    color: 'var(--color-text-primary)',\n    margin: 0,\n  },\n  subtitle: {\n    fontSize: 'var(--font-size-body-xs)',\n    color: 'var(--color-text-muted)',\n    margin: '2px 0 0 0',\n  },\n  closeButton: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '28px',\n    height: '28px',\n    border: 'none',\n    background: 'transparent',\n    borderRadius: 'var(--radius-button)',\n    cursor: 'pointer',\n    color: 'var(--color-text-secondary)',\n    transition: 'background-color 0.15s',\n  },\n  searchContainer: {\n    position: 'relative' as const,\n  },\n  searchIcon: {\n    position: 'absolute' as const,\n    left: '10px',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    width: '16px',\n    height: '16px',\n    color: 'var(--color-text-muted)',\n    pointerEvents: 'none' as const,\n  },\n  searchInput: {\n    width: '100%',\n    paddingLeft: '36px',\n    height: 'var(--size-controlHeight-sm)',\n    fontSize: 'var(--font-size-body-sm)',\n  },\n  content: {\n    flex: '1 1 0',\n    minHeight: 0,\n    overflow: 'hidden',\n    position: 'relative' as const,\n  },\n  scrollArea: {\n    position: 'absolute' as const,\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    overflowY: 'auto' as const,\n    overflowX: 'hidden' as const,\n    padding: 'var(--space-controlGap)',\n  },\n  categoryContainer: {\n    marginBottom: 'var(--space-controlGap)',\n  },\n  categoryHeader: {\n    width: '100%',\n    display: 'flex',\n    alignItems: 'center',\n    gap: 'var(--space-iconGap)',\n    padding: 'var(--space-controlGap) var(--space-iconGap)',\n    border: 'none',\n    background: 'transparent',\n    cursor: 'pointer',\n    borderRadius: 'var(--radius-button)',\n    transition: 'background-color 0.15s',\n  },\n  categoryChevron: {\n    width: '16px',\n    height: '16px',\n    color: 'var(--color-text-muted)',\n    flexShrink: 0,\n  },\n  categoryLabel: {\n    flex: 1,\n    textAlign: 'left' as const,\n    fontSize: 'var(--font-size-body-xs)',\n    fontWeight: 'var(--font-weight-semibold)' as const,\n    color: 'var(--color-text-secondary)',\n    textTransform: 'uppercase' as const,\n    letterSpacing: '0.05em',\n  },\n  categoryCount: {\n    fontSize: 'var(--font-size-body-xs)',\n    color: 'var(--color-text-muted)',\n    backgroundColor: 'var(--color-bg-sunken)',\n    padding: '2px 8px',\n    borderRadius: 'var(--radius-full)',\n  },\n  widgetList: {\n    display: 'flex',\n    flexDirection: 'column' as const,\n    gap: '4px',\n    marginTop: 'var(--space-controlGap)',\n    paddingLeft: '4px',\n  },\n  widgetCard: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: 'var(--space-iconGap)',\n    padding: 'var(--space-controlGap)',\n    borderRadius: 'var(--radius-card)',\n    cursor: 'grab',\n    backgroundColor: 'var(--color-bg-surface)',\n    border: '1px solid var(--color-border)',\n    transition: 'all 0.15s ease',\n  },\n  widgetCardHover: {\n    backgroundColor: 'var(--color-bg-hover)',\n    borderColor: 'var(--color-action-primary-border)',\n    boxShadow: 'var(--shadow-elevation-1)',\n  },\n  dragHandle: {\n    width: '16px',\n    height: '16px',\n    color: 'var(--color-text-muted)',\n    opacity: 0.5,\n    flexShrink: 0,\n  },\n  widgetIcon: {\n    width: '36px',\n    height: '36px',\n    borderRadius: 'var(--radius-button)',\n    backgroundColor: 'var(--color-bg-sunken)',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n  },\n  widgetIconInner: {\n    width: '18px',\n    height: '18px',\n    color: 'var(--color-action-primary-bg)',\n  },\n  widgetText: {\n    flex: 1,\n    minWidth: 0,\n    overflow: 'hidden',\n  },\n  widgetName: {\n    fontSize: 'var(--font-size-body-sm)',\n    fontWeight: 'var(--font-weight-medium)' as const,\n    color: 'var(--color-text-primary)',\n    whiteSpace: 'nowrap' as const,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    marginBottom: '2px',\n  },\n  widgetDescription: {\n    fontSize: 'var(--font-size-body-xs)',\n    color: 'var(--color-text-muted)',\n    lineHeight: 1.3,\n    overflow: 'hidden',\n    display: '-webkit-box',\n    WebkitLineClamp: 2,\n    WebkitBoxOrient: 'vertical' as const,\n  },\n  emptyState: {\n    textAlign: 'center' as const,\n    padding: 'var(--space-pagePadding)',\n  },\n  emptyIcon: {\n    width: '48px',\n    height: '48px',\n    borderRadius: 'var(--radius-card)',\n    backgroundColor: 'var(--color-bg-sunken)',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    margin: '0 auto var(--space-formGap)',\n  },\n  emptyText: {\n    fontSize: 'var(--font-size-body-sm)',\n    color: 'var(--color-text-muted)',\n    margin: 0,\n  },\n  clearButton: {\n    marginTop: 'var(--space-controlGap)',\n    padding: 'var(--space-controlGap) var(--space-formGap)',\n    fontSize: 'var(--font-size-body-xs)',\n    fontWeight: 'var(--font-weight-medium)' as const,\n    color: 'var(--color-action-primary-text)',\n    backgroundColor: 'var(--color-action-primary-bg)',\n    border: 'none',\n    borderRadius: 'var(--radius-button)',\n    cursor: 'pointer',\n  },\n  footer: {\n    padding: 'var(--space-controlGap) var(--space-formGap)',\n    borderTop: '1px solid var(--color-border)',\n    backgroundColor: 'var(--color-bg-sunken)',\n    flexShrink: 0,\n  },\n  footerText: {\n    fontSize: 'var(--font-size-body-xs)',\n    color: 'var(--color-text-muted)',\n    margin: 0,\n    textAlign: 'center' as const,\n  },\n};\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const WidgetPalette: FC<WidgetPaletteProps> = memo(function WidgetPalette({\n  isOpen,\n  onClose,\n  onWidgetSelect,\n  onDragStart,\n  onDragEnd,\n  installedWidgets = [],\n  installedWidgetsLoading = false,\n  definitions,\n}) {\n  const [searchQuery, setSearchQuery] = useState('');\n  const [expandedCategories, setExpandedCategories] = useState<Set<WidgetCategory>>(\n    new Set(['KPI', 'Visualization', 'Data', 'Content', 'Temporal', 'Custom', 'Installed'])\n  );\n  const [hoveredWidget, setHoveredWidget] = useState<string | null>(null);\n\n  // Get categorized widgets, merging in installed widgets. When the parent\n  // supplies a backend-sourced catalog (`definitions`), group that by category;\n  // otherwise fall back to the bundled static registry.\n  const categories = useMemo(() => {\n    const baseCategories = definitions\n      ? (Object.keys(WIDGET_CATEGORY_LABELS) as WidgetCategory[]).map((category) => ({\n          category,\n          label: WIDGET_CATEGORY_LABELS[category],\n          widgets: definitions.filter((def) => def.category === category),\n        }))\n      : getWidgetCategories();\n\n    return baseCategories\n      .map((cat) => {\n        if (cat.category === 'Installed') {\n          // Two sources feed \"Installed from Store\": the registry-driven backend\n          // catalog (getWidgetTypes store types — rich metadata, install-gated,\n          // BOFF-2858) which arrives via `definitions` under this category, and\n          // the legacy workspaceInstalledApps listing passed as `installedWidgets`.\n          // Merge both, deduping by name (the catalog entry wins) so a widget\n          // present in both sources shows once with the richer definition, while\n          // legacy installs not yet in the registry are still preserved.\n          const byName = new Map<string, WidgetDefinition>();\n          for (const w of installedWidgets) byName.set(w.name.toLowerCase(), w);\n          for (const w of cat.widgets) {\n            const key = w.name.toLowerCase();\n            const legacy = byName.get(key);\n            // Catalog wins for metadata but MERGE defaultConfig so the legacy\n            // workspaceInstalledApps fields survive — notably `componentId`, which the\n            // current render path needs and the catalog store entry lacks until\n            // widgetTypeKey rendering is wired. Keeps overlapping store widgets renderable.\n            byName.set(key, legacy ? { ...w, defaultConfig: { ...legacy.defaultConfig, ...w.defaultConfig } } : w);\n          }\n          return { ...cat, widgets: Array.from(byName.values()) };\n        }\n        return cat;\n      })\n      .filter((cat) => cat.category !== 'Installed' || cat.widgets.length > 0);\n  }, [installedWidgets, definitions]);\n\n  // Filter widgets by search query\n  const filteredCategories = useMemo(() => {\n    if (!searchQuery.trim()) {\n      return categories;\n    }\n\n    const query = searchQuery.toLowerCase();\n    return categories\n      .map((cat) => ({\n        ...cat,\n        widgets: cat.widgets.filter(\n          (w) =>\n            w.name.toLowerCase().includes(query) ||\n            w.description.toLowerCase().includes(query) ||\n            w.tags.some((tag) => tag.includes(query))\n        ),\n      }))\n      .filter((cat) => cat.widgets.length > 0);\n  }, [categories, searchQuery]);\n\n  // Toggle category expansion\n  const toggleCategory = useCallback((category: WidgetCategory) => {\n    setExpandedCategories((prev) => {\n      const next = new Set(prev);\n      if (next.has(category)) {\n        next.delete(category);\n      } else {\n        next.add(category);\n      }\n      return next;\n    });\n  }, []);\n\n  // Handle drag start\n  const handleDragStart = useCallback(\n    (e: React.DragEvent, widget: WidgetDefinition) => {\n      e.dataTransfer.setData(\n        'application/json',\n        JSON.stringify({\n          type: widget.type,\n          name: widget.name,\n          defaultSize: widget.defaultSize,\n          defaultConfig: widget.defaultConfig,\n          category: widget.category,\n        })\n      );\n      e.dataTransfer.effectAllowed = 'copy';\n\n      // Create custom drag image\n      const dragImage = document.createElement('div');\n      dragImage.style.cssText = `\n        position: absolute;\n        top: -1000px;\n        left: -1000px;\n        padding: 8px 12px;\n        background: var(--color-bg-surface);\n        border: 2px solid var(--color-action-primary-bg);\n        border-radius: 8px;\n        font-size: 14px;\n        font-weight: 500;\n        color: var(--color-text-primary);\n        box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n      `;\n      dragImage.textContent = widget.name;\n      document.body.appendChild(dragImage);\n      e.dataTransfer.setDragImage(dragImage, 0, 0);\n\n      setTimeout(() => {\n        document.body.removeChild(dragImage);\n      }, 0);\n\n      onDragStart?.(widget.type, widget);\n    },\n    [onDragStart]\n  );\n\n  // Handle drag end\n  const handleDragEnd = useCallback(() => {\n    onDragEnd?.();\n  }, [onDragEnd]);\n\n  // Handle click to quick-add\n  const handleWidgetClick = useCallback(\n    (widget: WidgetDefinition) => {\n      onWidgetSelect?.(widget.type, widget);\n    },\n    [onWidgetSelect]\n  );\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <div style={styles.container}>\n      {/* Header */}\n      <div style={styles.header}>\n        <div style={styles.headerTop}>\n          <div style={styles.headerTitle}>\n            <div style={styles.headerIcon}>\n              <Layers style={{ width: '18px', height: '18px', color: 'var(--color-action-primary-text)' }} />\n            </div>\n            <div>\n              <h3 style={styles.title}>Widgets</h3>\n              <p style={styles.subtitle}>Drag or click to add</p>\n            </div>\n          </div>\n          <button\n            type=\"button\"\n            onClick={onClose}\n            style={styles.closeButton}\n            onMouseOver={(e) => (e.currentTarget.style.backgroundColor = 'var(--color-bg-hover)')}\n            onMouseOut={(e) => (e.currentTarget.style.backgroundColor = 'transparent')}\n          >\n            <X style={{ width: '16px', height: '16px' }} />\n          </button>\n        </div>\n\n        {/* Search */}\n        <div style={styles.searchContainer}>\n          <Search style={styles.searchIcon} />\n          <Input\n            type=\"text\"\n            placeholder=\"Search widgets...\"\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            style={styles.searchInput}\n          />\n        </div>\n      </div>\n\n      {/* Widget Categories */}\n      <div style={styles.content}>\n        <div style={styles.scrollArea}>\n          {filteredCategories.map((category) => (\n            <div key={category.category} style={styles.categoryContainer}>\n              {/* Category Header */}\n              <button\n                type=\"button\"\n                onClick={() => toggleCategory(category.category)}\n                style={styles.categoryHeader}\n                onMouseOver={(e) => (e.currentTarget.style.backgroundColor = 'var(--color-bg-hover)')}\n                onMouseOut={(e) => (e.currentTarget.style.backgroundColor = 'transparent')}\n              >\n                {expandedCategories.has(category.category) ? (\n                  <ChevronDown style={styles.categoryChevron} />\n                ) : (\n                  <ChevronRight style={styles.categoryChevron} />\n                )}\n                <span style={styles.categoryLabel}>{category.label}</span>\n                <span style={styles.categoryCount}>{category.widgets.length}</span>\n              </button>\n\n              {/* Widget Items */}\n              {expandedCategories.has(category.category) && (\n                <div style={styles.widgetList}>\n                  {installedWidgetsLoading && category.category === 'Installed' && (\n                    <div\n                      style={{\n                        fontSize: 'var(--font-size-body-xs)',\n                        color: 'var(--color-text-muted)',\n                        padding: 'var(--space-controlGap)',\n                      }}\n                    >\n                      Loading...\n                    </div>\n                  )}\n                  {category.widgets.map((widget) => {\n                    const IconComponent = getIconComponent(widget.icon);\n                    const widgetKey = getWidgetKey(widget);\n                    const isHovered = hoveredWidget === widgetKey;\n\n                    return (\n                      <div\n                        key={widgetKey}\n                        draggable\n                        onDragStart={(e) => handleDragStart(e, widget)}\n                        onDragEnd={handleDragEnd}\n                        onClick={() => handleWidgetClick(widget)}\n                        onMouseEnter={() => setHoveredWidget(widgetKey)}\n                        onMouseLeave={() => setHoveredWidget(null)}\n                        style={{\n                          ...styles.widgetCard,\n                          ...(isHovered ? styles.widgetCardHover : {}),\n                        }}\n                      >\n                        {/* Drag Handle */}\n                        <GripVertical style={styles.dragHandle} />\n\n                        {/* Icon */}\n                        <div style={styles.widgetIcon}>\n                          <IconComponent style={styles.widgetIconInner} />\n                        </div>\n\n                        {/* Text */}\n                        <div style={styles.widgetText}>\n                          <div style={styles.widgetName}>{widget.name}</div>\n                          <div style={styles.widgetDescription}>{widget.description}</div>\n                        </div>\n                      </div>\n                    );\n                  })}\n                </div>\n              )}\n            </div>\n          ))}\n\n          {filteredCategories.length === 0 && (\n            <div style={styles.emptyState}>\n              <div style={styles.emptyIcon}>\n                <Search style={{ width: '24px', height: '24px', color: 'var(--color-text-muted)' }} />\n              </div>\n              <p style={styles.emptyText}>\n                No widgets found for \"<strong>{searchQuery}</strong>\"\n              </p>\n              <button type=\"button\" onClick={() => setSearchQuery('')} style={styles.clearButton}>\n                Clear search\n              </button>\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Footer */}\n      <div style={styles.footer}>\n        <p style={styles.footerText}>Drag widgets to position them on the canvas</p>\n      </div>\n    </div>\n  );\n});\n\nexport default WidgetPalette;\n"],"mappings":"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"}