@burdenoff/microfe-bigconsole 2026.610.1 → 2026.612.2

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

@@ -163,7 +163,7 @@ var y = d(function({ dashboardId: d, pageId: y, title: b, onPaste: oe, onSave: s
 		}), N(!1);
 	}, [$]);
 	return /* @__PURE__ */ v("div", {
-		className: "flex flex-col h-full",
+		className: "flex flex-col h-full min-w-0 overflow-hidden",
 		children: [
 			/* @__PURE__ */ _(c, {
 				dashboardId: d,
@@ -198,7 +198,7 @@ var y = d(function({ dashboardId: d, pageId: y, title: b, onPaste: oe, onSave: s
 				onPageDelete: E
 			}),
 			/* @__PURE__ */ v("div", {
-				className: "flex flex-1 overflow-hidden",
+				className: "flex flex-1 min-w-0 overflow-hidden",
 				children: [U && /* @__PURE__ */ _(te, {
 					isOpen: M,
 					onClose: () => N(!1),
@@ -209,7 +209,7 @@ var y = d(function({ dashboardId: d, pageId: y, title: b, onPaste: oe, onSave: s
 					installedWidgetsLoading: xe
 				}), /* @__PURE__ */ v("div", {
 					ref: D,
-					className: "flex-1 overflow-auto bg-bg-muted",
+					className: "flex-1 min-w-0 overflow-auto bg-bg-muted",
 					onDrop: Ae,
 					onDragOver: je,
 					onClick: () => {

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardCanvas.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/DashboardCanvas.tsx"],"sourcesContent":["/**\n * DashboardCanvas Component\n *\n * Main canvas for dashboard with grid layout and widget rendering.\n * Phase 2: Added GlobalFiltersBar and PageTabsManager integration.\n * Phase 3: Added WidgetPalette sidebar for drag-and-drop widget creation.\n */\n\nimport { type FC, memo, useRef, useState, useCallback, useEffect, useMemo } from 'react';\nimport type { Layout } from 'react-grid-layout';\nimport type { Widget, WidgetType } from '../../types';\nimport { useDashboardStore, useWidgetStore } from '../../store';\nimport { useWidgetOperations } from '../../hooks/useWidgetOperations';\nimport { useInstalledWidgets } from '../../hooks/useInstalledWidgets';\nimport { useBigConsole } from '../../context';\nimport { DashboardGrid } from './DashboardGrid';\nimport { DashboardToolbar } from './DashboardToolbar';\nimport { GlobalFiltersBar } from './GlobalFiltersBar';\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  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  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  return (\n    <div className=\"flex flex-col h-full\">\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        onShare={() => setIsShareDialogOpen(true)}\n      />\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 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          />\n        )}\n\n        {/* Canvas area */}\n        <div\n          ref={containerRef}\n          className=\"flex-1 overflow-auto bg-bg-muted\"\n          onDrop={handleCanvasDrop}\n          onDragOver={handleCanvasDragOver}\n          onClick={() => {\n            if (isEditMode) {\n              selectWidget(null);\n            }\n          }}\n          style={{\n            position: 'relative',\n            border: isDraggingWidget ? '2px dashed var(--color-action-primary-bg)' : 'none',\n            backgroundColor: isDraggingWidget ? 'var(--color-bg-hover)' : undefined,\n            transition: 'border-color 0.2s, background-color 0.2s',\n          }}\n        >\n          {/* Drop zone indicator */}\n          {isDraggingWidget && (\n            <div\n              style={{\n                position: 'absolute',\n                top: '50%',\n                left: '50%',\n                transform: 'translate(-50%, -50%)',\n                padding: 'var(--space-pagePadding)',\n                backgroundColor: 'var(--color-bg-surface)',\n                borderRadius: 'var(--radius-card)',\n                boxShadow: 'var(--shadow-elevation-2)',\n                textAlign: 'center',\n                pointerEvents: 'none',\n                zIndex: 100,\n              }}\n            >\n              <p style={{ fontSize: 'var(--font-size-body-md)', color: 'var(--color-text-primary)', margin: 0 }}>\n                Drop to add <strong>{dragWidgetType}</strong> widget\n              </p>\n            </div>\n          )}\n\n          <div\n            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 { useBigConsole } from '../../context';\nimport { DashboardGrid } from './DashboardGrid';\nimport { DashboardToolbar } from './DashboardToolbar';\nimport { GlobalFiltersBar } from './GlobalFiltersBar';\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  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  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  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        onShare={() => setIsShareDialogOpen(true)}\n      />\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          />\n        )}\n\n        {/* Canvas area */}\n        <div\n          ref={containerRef}\n          className=\"flex-1 min-w-0 overflow-auto bg-bg-muted\"\n          onDrop={handleCanvasDrop}\n          onDragOver={handleCanvasDragOver}\n          onClick={() => {\n            if (isEditMode) {\n              selectWidget(null);\n            }\n          }}\n          style={{\n            position: 'relative',\n            border: isDraggingWidget ? '2px dashed var(--color-action-primary-bg)' : 'none',\n            backgroundColor: isDraggingWidget ? 'var(--color-bg-hover)' : undefined,\n            transition: 'border-color 0.2s, background-color 0.2s',\n          }}\n        >\n          {/* Drop zone indicator */}\n          {isDraggingWidget && (\n            <div\n              style={{\n                position: 'absolute',\n                top: '50%',\n                left: '50%',\n                transform: 'translate(-50%, -50%)',\n                padding: 'var(--space-pagePadding)',\n                backgroundColor: 'var(--color-bg-surface)',\n                borderRadius: 'var(--radius-card)',\n                boxShadow: 'var(--shadow-elevation-2)',\n                textAlign: 'center',\n                pointerEvents: 'none',\n                zIndex: 100,\n              }}\n            >\n              <p style={{ fontSize: 'var(--font-size-body-md)', color: 'var(--color-text-primary)', margin: 0 }}>\n                Drop to add <strong>{dragWidgetType}</strong> widget\n              </p>\n            </div>\n          )}\n\n          <div\n            className=\"min-h-full origin-top-left transition-transform\"\n            style={{\n              transform: `scale(${zoomLevel / 100})`,\n              width: `${100 / (zoomLevel / 100)}%`,\n            }}\n          >\n            {widgetsArray.length > 0 ? (\n              <CrossFilterProvider\n                enabled={enableCrossFilter}\n                onCrossFilter={(_filters) => {\n                  // Cross-filter applied - widget queries can access filter values\n                }}\n              >\n                <DashboardGrid\n                  widgets={widgetsArray}\n                  isEditMode={isEditMode}\n                  width={containerWidth}\n                  onLayoutChange={handleLayoutChange}\n                  onWidgetSelect={handleWidgetSelect}\n                  selectedWidgetId={selectedWidgetId}\n                />\n              </CrossFilterProvider>\n            ) : (\n              <div className=\"flex flex-col items-center justify-center min-h-[400px] p-8\">\n                <div className=\"w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-bg-surface\">\n                  <svg className=\"w-8 h-8 text-text-secondary\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z\"\n                    />\n                  </svg>\n                </div>\n                <h3 className=\"text-lg font-medium text-text-primary mb-2\">No widgets yet</h3>\n                <p className=\"text-sm text-text-secondary mb-4 text-center max-w-[300px]\">\n                  Add widgets to build your dashboard. Click the &quot;Add Widget&quot; button to get started.\n                </p>\n                {isEditMode && (\n                  <button\n                    type=\"button\"\n                    onClick={() => setIsAddDialogOpen(true)}\n                    className=\"\n                      inline-flex items-center gap-2\n                      px-4 py-2\n                      text-sm font-medium\n                      text-action-primary-fg\n                      bg-action-primary-bg\n                      hover:bg-action-primary-bgHover\n                      rounded-md\n                      transition-colors\n                    \"\n                  >\n                    <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 4v16m8-8H4\" />\n                    </svg>\n                    Add Widget\n                  </button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n\n      {/* Properties Panel */}\n      <PropertiesPanel isOpen={configPanelOpen} onClose={closeConfigPanel} />\n\n      {/* Add Widget Dialog */}\n      <WidgetConfigDialog\n        isOpen={isAddDialogOpen}\n        onClose={() => {\n          setIsAddDialogOpen(false);\n          // Clear pending drop state when dialog is closed\n          setPendingDropPosition(null);\n          setPendingDropType(null);\n          setPendingDropDefinition(null);\n        }}\n        onSave={handleAddWidget}\n        preselectedType={pendingDropType || undefined}\n        preselectedDefinition={pendingDropDefinition || undefined}\n        dashboardId={dashboardId}\n        installedWidgets={installedWidgets}\n      />\n\n      {/* Share Dialog */}\n      <ShareDialog\n        dashboardId={dashboardId}\n        dashboardName={title || 'Dashboard'}\n        isOpen={isShareDialogOpen}\n        onClose={() => setIsShareDialogOpen(false)}\n      />\n    </div>\n  );\n});\n\nexport default DashboardCanvas;\n"],"mappings":"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"}

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

@@ -13,17 +13,18 @@ var T = r(function({ dashboardId: r, title: T, onAddWidget: E, onTogglePalette:
 		R && k && k();
 	}, [R, k]);
 	return /* @__PURE__ */ _(C, { children: /* @__PURE__ */ v("div", {
-		className: "flex items-center justify-between px-4 py-2 bg-background border-b",
+		className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2 px-4 py-2 bg-background border-b",
 		children: [
 			/* @__PURE__ */ v("div", {
-				className: "flex items-center gap-4",
+				className: "flex min-w-0 items-center gap-4",
 				children: [T && /* @__PURE__ */ _("h1", {
-					className: "text-lg font-semibold",
+					className: "min-w-0 truncate text-lg font-semibold",
+					title: T,
 					children: T
 				}), r && /* @__PURE__ */ _(n, { dashboardId: r })]
 			}),
 			/* @__PURE__ */ v("div", {
-				className: "flex items-center gap-1",
+				className: "flex flex-shrink-0 items-center gap-1",
 				children: [
 					/* @__PURE__ */ v(x, { children: [/* @__PURE__ */ _(w, {
 						asChild: !0,
@@ -61,7 +62,7 @@ var T = r(function({ dashboardId: r, title: T, onAddWidget: E, onTogglePalette:
 				]
 			}),
 			/* @__PURE__ */ v("div", {
-				className: "flex items-center gap-2",
+				className: "flex flex-wrap items-center justify-end gap-2",
 				children: [
 					P && /* @__PURE__ */ v(g, { children: [
 						D && /* @__PURE__ */ v(x, { children: [/* @__PURE__ */ _(w, {

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

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

package/dist/bigconsole/components/widgets/WidgetRegistry.js

@@ -567,7 +567,8 @@ var e = {
 			xAxisField: "",
 			yAxisField: "",
 			valueField: "",
-			colorScale: ["#f0f9ff", "#0369a1"],
+			colorScale: [],
+			colorScheme: "blue",
 			showValues: !0
 		},
 		defaultSize: {

package/dist/bigconsole/components/widgets/WidgetRegistry.js.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetRegistry.js","names":[],"sources":["../../../../src/bigconsole/components/widgets/WidgetRegistry.ts"],"sourcesContent":["/**\n * Widget Registry\n *\n * Central registry mapping widget types to their components,\n * metadata, and configuration schemas.\n */\n\nimport type { ComponentType } from 'react';\nimport type { WidgetType, WidgetCategory, Widget } from '../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface WidgetComponentProps {\n  /** The widget data */\n  widget: Widget;\n  /** Widget data (processed) */\n  data: Record<string, unknown>;\n  /** Whether the widget is in edit mode */\n  isEditMode?: boolean;\n  /** Whether the widget is selected */\n  isSelected?: boolean;\n  /** Whether data is loading */\n  isLoading?: boolean;\n  /** Error message if any */\n  error?: string | null;\n  /** Callback when widget is clicked */\n  onClick?: () => void;\n  /** Callback for drilldown navigation */\n  onDrilldown?: (params: Record<string, unknown>) => void;\n}\n\nexport interface WidgetDefinition {\n  /** Widget type */\n  type: WidgetType;\n  /** Human-readable name */\n  name: string;\n  /** Description */\n  description: string;\n  /** Lucide icon name */\n  icon: string;\n  /** Category for grouping */\n  category: WidgetCategory;\n  /** Component to render. Null for all current widget types because the render path\n   *  uses WidgetRendererFactory + RendererRegistry instead of this field. */\n  component: ComponentType<WidgetComponentProps> | null;\n  /** Default configuration */\n  defaultConfig: Record<string, unknown>;\n  /** Default size (fixed grid) */\n  defaultSize: { width: number; height: number };\n  /** Default responsive position (v1.0 spec) */\n  defaultResponsive: { xs: number; sm: number; md: number; lg: number };\n  /** Minimum size constraints */\n  minSize: { width: number; height: number };\n  /** Maximum size constraints */\n  maxSize: { width: number; height: number };\n  /** Whether the widget supports data binding */\n  supportsDataBinding: boolean;\n  /** Whether the widget supports drilldown */\n  supportsDrilldown: boolean;\n  /** Whether the widget supports auto-refresh */\n  supportsAutoRefresh: boolean;\n  /** Tags for search/filter */\n  tags: string[];\n}\n\n// ============================================================================\n// Widget Definitions\n// ============================================================================\n\nexport const WIDGET_DEFINITIONS: Record<WidgetType, WidgetDefinition> = {\n  // ============================================================================\n  // Core Visualization (6 types)\n  // ============================================================================\n\n  kpi_card_comparison: {\n    type: 'kpi_card_comparison',\n    name: 'KPI Card Comparison',\n    description: 'Compare multiple KPIs side by side with trends',\n    icon: 'LayoutDashboard',\n    category: 'KPI',\n    component: null,\n    defaultConfig: {\n      comparisons: [],\n      showSparklines: true,\n      layout: 'horizontal',\n      format: 'number',\n    },\n    defaultSize: { width: 6, height: 3 },\n    defaultResponsive: { xs: 12, sm: 6, md: 6, lg: 4 },\n    minSize: { width: 4, height: 2 },\n    maxSize: { width: 12, height: 6 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['kpi', 'comparison', 'metrics', 'multi'],\n  },\n\n  metric_card: {\n    type: 'metric_card',\n    name: 'Metric Card',\n    description: 'Display a single KPI value with trend indicator',\n    icon: 'TrendingUp',\n    category: 'KPI',\n    component: null,\n    defaultConfig: {\n      format: 'number',\n      decimalPlaces: 0,\n      showTrend: true,\n      showSparkline: false,\n    },\n    defaultSize: { width: 3, height: 2 },\n    defaultResponsive: { xs: 12, sm: 6, md: 4, lg: 3 },\n    minSize: { width: 2, height: 2 },\n    maxSize: { width: 6, height: 4 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['kpi', 'metric', 'number', 'trend'],\n  },\n\n  chart: {\n    type: 'chart',\n    name: 'Chart',\n    description: 'Multi-type chart (Line, Bar, Area, Pie)',\n    icon: 'BarChart3',\n    category: 'Visualization',\n    component: null,\n    defaultConfig: {\n      chartType: 'line',\n      showLegend: true,\n      legendPosition: 'bottom',\n      showGrid: true,\n      showTooltip: true,\n    },\n    defaultSize: { width: 6, height: 4 },\n    defaultResponsive: { xs: 12, sm: 12, md: 6, lg: 6 },\n    minSize: { width: 3, height: 3 },\n    maxSize: { width: 12, height: 8 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['chart', 'graph', 'visualization', 'line', 'bar', 'area', 'pie'],\n  },\n\n  funnel_chart: {\n    type: 'funnel_chart',\n    name: 'Funnel Chart',\n    description: 'Visualize conversion or drop-off stages',\n    icon: 'Filter',\n    category: 'Visualization',\n    component: null,\n    defaultConfig: {\n      showLabels: true,\n      showValues: true,\n      showPercentages: true,\n      orientation: 'vertical',\n    },\n    defaultSize: { width: 4, height: 5 },\n    defaultResponsive: { xs: 12, sm: 6, md: 4, lg: 4 },\n    minSize: { width: 3, height: 4 },\n    maxSize: { width: 8, height: 10 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['funnel', 'conversion', 'stages', 'pipeline'],\n  },\n\n  table: {\n    type: 'table',\n    name: 'Data Table',\n    description: 'Display data in sortable, filterable rows and columns',\n    icon: 'Table',\n    category: 'Data',\n    component: null,\n    defaultConfig: {\n      pageSize: 10,\n      sortable: true,\n      filterable: true,\n      stickyHeader: true,\n      columns: [],\n    },\n    defaultSize: { width: 8, height: 5 },\n    defaultResponsive: { xs: 12, sm: 12, md: 8, lg: 8 },\n    minSize: { width: 4, height: 3 },\n    maxSize: { width: 12, height: 10 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['table', 'data', 'grid', 'rows'],\n  },\n\n  pivot_table: {\n    type: 'pivot_table',\n    name: 'Pivot Table',\n    description: 'Interactive pivot table for data analysis',\n    icon: 'Grid3x3',\n    category: 'Data',\n    component: null,\n    defaultConfig: {\n      rows: [],\n      columns: [],\n      values: [],\n      aggregation: 'sum',\n      showTotals: true,\n    },\n    defaultSize: { width: 10, height: 6 },\n    defaultResponsive: { xs: 12, sm: 12, md: 12, lg: 10 },\n    minSize: { width: 6, height: 4 },\n    maxSize: { width: 12, height: 10 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['pivot', 'table', 'analysis', 'aggregation'],\n  },\n\n  // ============================================================================\n  // Indicators (2 types)\n  // ============================================================================\n\n  gauge: {\n    type: 'gauge',\n    name: 'Gauge',\n    description: 'Display a value within a range',\n    icon: 'Gauge',\n    category: 'KPI',\n    component: null,\n    defaultConfig: {\n      variant: 'circular',\n      min: 0,\n      max: 100,\n      showValue: true,\n      showLabels: true,\n      thresholds: [\n        { value: 33, color: 'red' },\n        { value: 66, color: 'yellow' },\n        { value: 100, color: 'green' },\n      ],\n    },\n    defaultSize: { width: 3, height: 3 },\n    defaultResponsive: { xs: 6, sm: 4, md: 3, lg: 3 },\n    minSize: { width: 2, height: 2 },\n    maxSize: { width: 6, height: 6 },\n    supportsDataBinding: true,\n    supportsDrilldown: false,\n    supportsAutoRefresh: true,\n    tags: ['gauge', 'meter', 'dial', 'indicator'],\n  },\n\n  progress: {\n    type: 'progress',\n    name: 'Progress Bar',\n    description: 'Show progress towards a goal with milestones',\n    icon: 'Activity',\n    category: 'KPI',\n    component: null,\n    defaultConfig: {\n      showPercentage: true,\n      showValue: false,\n      target: null,\n      milestones: [],\n    },\n    defaultSize: { width: 4, height: 2 },\n    defaultResponsive: { xs: 12, sm: 6, md: 4, lg: 4 },\n    minSize: { width: 3, height: 2 },\n    maxSize: { width: 12, height: 3 },\n    supportsDataBinding: true,\n    supportsDrilldown: false,\n    supportsAutoRefresh: true,\n    tags: ['progress', 'bar', 'goal', 'completion'],\n  },\n\n  // ============================================================================\n  // Data Display (2 types)\n  // ============================================================================\n\n  list: {\n    type: 'list',\n    name: 'List',\n    description: 'Display items in a scrollable list',\n    icon: 'List',\n    category: 'Data',\n    component: null,\n    defaultConfig: {\n      showMetadata: true,\n      showActions: false,\n      showBadges: true,\n      maxItems: 10,\n      itemClickable: true,\n    },\n    defaultSize: { width: 4, height: 5 },\n    defaultResponsive: { xs: 12, sm: 6, md: 4, lg: 4 },\n    minSize: { width: 3, height: 3 },\n    maxSize: { width: 8, height: 10 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['list', 'items', 'scroll'],\n  },\n\n  form: {\n    type: 'form',\n    name: 'Form',\n    description: 'Interactive form widget for data input',\n    icon: 'FileText',\n    category: 'Data',\n    component: null,\n    defaultConfig: {\n      fields: [],\n      submitAction: null,\n      layout: 'vertical',\n      showLabels: true,\n    },\n    defaultSize: { width: 6, height: 5 },\n    defaultResponsive: { xs: 12, sm: 12, md: 6, lg: 6 },\n    minSize: { width: 4, height: 3 },\n    maxSize: { width: 12, height: 10 },\n    supportsDataBinding: true,\n    supportsDrilldown: false,\n    supportsAutoRefresh: false,\n    tags: ['form', 'input', 'submit', 'fields'],\n  },\n\n  // ============================================================================\n  // Content (2 types)\n  // ============================================================================\n\n  text: {\n    type: 'text',\n    name: 'Text',\n    description: 'Rich text or markdown content widget',\n    icon: 'Type',\n    category: 'Content',\n    component: null,\n    defaultConfig: {\n      content: '',\n      format: 'markdown',\n      alignment: 'left',\n    },\n    defaultSize: { width: 4, height: 3 },\n    defaultResponsive: { xs: 12, sm: 6, md: 4, lg: 4 },\n    minSize: { width: 2, height: 1 },\n    maxSize: { width: 12, height: 12 },\n    supportsDataBinding: false,\n    supportsDrilldown: false,\n    supportsAutoRefresh: false,\n    tags: ['text', 'markdown', 'content', 'rich text'],\n  },\n\n  iframe: {\n    type: 'iframe',\n    name: 'Iframe',\n    description: 'Embed external content via iframe',\n    icon: 'ExternalLink',\n    category: 'Content',\n    component: null,\n    defaultConfig: {\n      url: '',\n      sandbox: 'allow-scripts allow-same-origin',\n      allowFullscreen: false,\n    },\n    defaultSize: { width: 6, height: 4 },\n    defaultResponsive: { xs: 12, sm: 12, md: 6, lg: 6 },\n    minSize: { width: 3, height: 2 },\n    maxSize: { width: 12, height: 12 },\n    supportsDataBinding: false,\n    supportsDrilldown: false,\n    supportsAutoRefresh: false,\n    tags: ['iframe', 'embed', 'external', 'web'],\n  },\n\n  // ============================================================================\n  // Spatial & Temporal (5 types)\n  // ============================================================================\n\n  map: {\n    type: 'map',\n    name: 'Map',\n    description: 'Geographic map visualization with markers',\n    icon: 'MapPin',\n    category: 'Visualization',\n    component: null,\n    defaultConfig: {\n      provider: 'mapbox',\n      center: { lat: 0, lng: 0 },\n      zoom: 2,\n      showMarkers: true,\n      showRegions: false,\n    },\n    defaultSize: { width: 6, height: 5 },\n    defaultResponsive: { xs: 12, sm: 12, md: 6, lg: 6 },\n    minSize: { width: 4, height: 3 },\n    maxSize: { width: 12, height: 10 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['map', 'geo', 'location', 'markers'],\n  },\n\n  heatmap: {\n    type: 'heatmap',\n    name: 'Heatmap',\n    description: 'Display values in a color-coded grid',\n    icon: 'Grid3x3',\n    category: 'Visualization',\n    component: null,\n    defaultConfig: {\n      xAxisField: '',\n      yAxisField: '',\n      valueField: '',\n      colorScale: ['#f0f9ff', '#0369a1'],\n      showValues: true,\n    },\n    defaultSize: { width: 6, height: 5 },\n    defaultResponsive: { xs: 12, sm: 12, md: 6, lg: 6 },\n    minSize: { width: 4, height: 4 },\n    maxSize: { width: 12, height: 10 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['heatmap', 'grid', 'density', 'color'],\n  },\n\n  calendar: {\n    type: 'calendar',\n    name: 'Calendar',\n    description: 'Calendar view for events and schedules',\n    icon: 'Calendar',\n    category: 'Temporal',\n    component: null,\n    defaultConfig: {\n      view: 'month',\n      showWeekNumbers: false,\n      firstDayOfWeek: 0,\n      eventField: '',\n    },\n    defaultSize: { width: 8, height: 6 },\n    defaultResponsive: { xs: 12, sm: 12, md: 8, lg: 8 },\n    minSize: { width: 6, height: 4 },\n    maxSize: { width: 12, height: 10 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['calendar', 'events', 'schedule', 'dates'],\n  },\n\n  kanban: {\n    type: 'kanban',\n    name: 'Kanban Board',\n    description: 'Kanban board for task and workflow management',\n    icon: 'Columns',\n    category: 'Data',\n    component: null,\n    defaultConfig: {\n      columns: [],\n      cardTitleField: '',\n      cardDescriptionField: '',\n      columnField: '',\n      allowDragDrop: true,\n    },\n    defaultSize: { width: 12, height: 6 },\n    defaultResponsive: { xs: 12, sm: 12, md: 12, lg: 12 },\n    minSize: { width: 8, height: 4 },\n    maxSize: { width: 12, height: 10 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['kanban', 'board', 'tasks', 'workflow'],\n  },\n\n  timeline: {\n    type: 'timeline',\n    name: 'Timeline',\n    description: 'Timeline or Gantt chart for project scheduling',\n    icon: 'GitBranch',\n    category: 'Temporal',\n    component: null,\n    defaultConfig: {\n      startDateField: '',\n      endDateField: '',\n      titleField: '',\n      groupField: '',\n      showToday: true,\n    },\n    defaultSize: { width: 12, height: 5 },\n    defaultResponsive: { xs: 12, sm: 12, md: 12, lg: 12 },\n    minSize: { width: 8, height: 3 },\n    maxSize: { width: 12, height: 10 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['timeline', 'gantt', 'project', 'schedule'],\n  },\n\n  // ============================================================================\n  // Extensibility (1 type)\n  // ============================================================================\n\n  custom: {\n    type: 'custom',\n    name: 'Custom Widget',\n    description: 'Custom widget with user-defined rendering',\n    icon: 'Puzzle',\n    category: 'Custom',\n    component: null,\n    defaultConfig: {\n      componentId: '',\n      props: {},\n    },\n    defaultSize: { width: 4, height: 4 },\n    defaultResponsive: { xs: 12, sm: 6, md: 4, lg: 4 },\n    minSize: { width: 2, height: 2 },\n    maxSize: { width: 12, height: 12 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['custom', 'plugin', 'extension'],\n  },\n};\n\n// ============================================================================\n// Registry Functions\n// ============================================================================\n\n/**\n * Default widget definition for unknown types\n */\nconst DEFAULT_WIDGET_DEFINITION: WidgetDefinition = {\n  type: 'custom' as WidgetType,\n  name: 'Unknown Widget',\n  description: 'Unknown widget type',\n  icon: 'Puzzle',\n  category: 'Custom',\n  component: null,\n  defaultConfig: {},\n  defaultSize: { width: 4, height: 4 },\n  defaultResponsive: { xs: 12, sm: 6, md: 4, lg: 4 },\n  minSize: { width: 2, height: 2 },\n  maxSize: { width: 12, height: 12 },\n  supportsDataBinding: true,\n  supportsDrilldown: true,\n  supportsAutoRefresh: true,\n  tags: ['unknown'],\n};\n\n/**\n * Get widget definition by type\n * Handles both lowercase (frontend) and uppercase (backend) types\n */\nexport function getWidgetDefinition(type: WidgetType | string): WidgetDefinition {\n  // Try exact match first\n  if (WIDGET_DEFINITIONS[type as WidgetType]) {\n    return WIDGET_DEFINITIONS[type as WidgetType];\n  }\n\n  // Try lowercase version (backend returns uppercase for some types)\n  const lowerType = type.toLowerCase() as WidgetType;\n  if (WIDGET_DEFINITIONS[lowerType]) {\n    return WIDGET_DEFINITIONS[lowerType];\n  }\n\n  // Return default definition for unknown types\n  return { ...DEFAULT_WIDGET_DEFINITION, type: type as WidgetType };\n}\n\n/**\n * Get all widget definitions\n */\nexport function getAllWidgetDefinitions(): WidgetDefinition[] {\n  return Object.values(WIDGET_DEFINITIONS);\n}\n\n/**\n * Get widget definitions by category\n */\nexport function getWidgetsByCategory(category: WidgetCategory): WidgetDefinition[] {\n  return Object.values(WIDGET_DEFINITIONS).filter((def) => def.category === category);\n}\n\n/**\n * Search widget definitions by query\n */\nexport function searchWidgets(query: string): WidgetDefinition[] {\n  const lowerQuery = query.toLowerCase();\n  return Object.values(WIDGET_DEFINITIONS).filter(\n    (def) =>\n      def.name.toLowerCase().includes(lowerQuery) ||\n      def.description.toLowerCase().includes(lowerQuery) ||\n      def.tags.some((tag) => tag.includes(lowerQuery))\n  );\n}\n\n/**\n * Canonical mapping from widget category to human-readable label.\n * Shared across WidgetTypeSelector, WidgetPalette, and other UI.\n */\nexport const WIDGET_CATEGORY_LABELS: Record<WidgetCategory, string> = {\n  KPI: 'Metrics & KPIs',\n  Visualization: 'Charts & Visualization',\n  Data: 'Data Display',\n  Content: 'Content',\n  Temporal: 'Temporal & Scheduling',\n  Custom: 'Custom',\n  Installed: 'Installed from Store',\n};\n\n/**\n * Get widget categories with their definitions\n */\nexport function getWidgetCategories(): {\n  category: WidgetCategory;\n  label: string;\n  widgets: WidgetDefinition[];\n}[] {\n  const categories: WidgetCategory[] = ['KPI', 'Visualization', 'Data', 'Content', 'Temporal', 'Custom', 'Installed'];\n\n  return categories.map((category) => ({\n    category,\n    label: WIDGET_CATEGORY_LABELS[category],\n    widgets: getWidgetsByCategory(category),\n  }));\n}\n\n/**\n * Validate widget size constraints\n */\nexport function validateWidgetSize(\n  type: WidgetType,\n  width: number,\n  height: number\n): { valid: boolean; width: number; height: number } {\n  const def = WIDGET_DEFINITIONS[type];\n\n  const clampedWidth = Math.min(Math.max(width, def.minSize.width), def.maxSize.width);\n  const clampedHeight = Math.min(Math.max(height, def.minSize.height), def.maxSize.height);\n\n  return {\n    valid: width === clampedWidth && height === clampedHeight,\n    width: clampedWidth,\n    height: clampedHeight,\n  };\n}\n\n/**\n * Get a stable key for a widget definition (handles installed widgets with componentId)\n */\nexport function getWidgetKey(widget: WidgetDefinition): string {\n  if (widget.defaultConfig?.componentId) {\n    return `installed-${widget.defaultConfig.componentId}`;\n  }\n  if (widget.category === 'Installed') {\n    return `installed-${widget.name}`;\n  }\n  return widget.type;\n}\n\nexport default WIDGET_DEFINITIONS;\n"],"mappings":"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"}
+{"version":3,"file":"WidgetRegistry.js","names":[],"sources":["../../../../src/bigconsole/components/widgets/WidgetRegistry.ts"],"sourcesContent":["/**\n * Widget Registry\n *\n * Central registry mapping widget types to their components,\n * metadata, and configuration schemas.\n */\n\nimport type { ComponentType } from 'react';\nimport type { WidgetType, WidgetCategory, Widget } from '../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface WidgetComponentProps {\n  /** The widget data */\n  widget: Widget;\n  /** Widget data (processed) */\n  data: Record<string, unknown>;\n  /** Whether the widget is in edit mode */\n  isEditMode?: boolean;\n  /** Whether the widget is selected */\n  isSelected?: boolean;\n  /** Whether data is loading */\n  isLoading?: boolean;\n  /** Error message if any */\n  error?: string | null;\n  /** Callback when widget is clicked */\n  onClick?: () => void;\n  /** Callback for drilldown navigation */\n  onDrilldown?: (params: Record<string, unknown>) => void;\n}\n\nexport interface WidgetDefinition {\n  /** Widget type */\n  type: WidgetType;\n  /** Human-readable name */\n  name: string;\n  /** Description */\n  description: string;\n  /** Lucide icon name */\n  icon: string;\n  /** Category for grouping */\n  category: WidgetCategory;\n  /** Component to render. Null for all current widget types because the render path\n   *  uses WidgetRendererFactory + RendererRegistry instead of this field. */\n  component: ComponentType<WidgetComponentProps> | null;\n  /** Default configuration */\n  defaultConfig: Record<string, unknown>;\n  /** Default size (fixed grid) */\n  defaultSize: { width: number; height: number };\n  /** Default responsive position (v1.0 spec) */\n  defaultResponsive: { xs: number; sm: number; md: number; lg: number };\n  /** Minimum size constraints */\n  minSize: { width: number; height: number };\n  /** Maximum size constraints */\n  maxSize: { width: number; height: number };\n  /** Whether the widget supports data binding */\n  supportsDataBinding: boolean;\n  /** Whether the widget supports drilldown */\n  supportsDrilldown: boolean;\n  /** Whether the widget supports auto-refresh */\n  supportsAutoRefresh: boolean;\n  /** Tags for search/filter */\n  tags: string[];\n}\n\n// ============================================================================\n// Widget Definitions\n// ============================================================================\n\nexport const WIDGET_DEFINITIONS: Record<WidgetType, WidgetDefinition> = {\n  // ============================================================================\n  // Core Visualization (6 types)\n  // ============================================================================\n\n  kpi_card_comparison: {\n    type: 'kpi_card_comparison',\n    name: 'KPI Card Comparison',\n    description: 'Compare multiple KPIs side by side with trends',\n    icon: 'LayoutDashboard',\n    category: 'KPI',\n    component: null,\n    defaultConfig: {\n      comparisons: [],\n      showSparklines: true,\n      layout: 'horizontal',\n      format: 'number',\n    },\n    defaultSize: { width: 6, height: 3 },\n    defaultResponsive: { xs: 12, sm: 6, md: 6, lg: 4 },\n    minSize: { width: 4, height: 2 },\n    maxSize: { width: 12, height: 6 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['kpi', 'comparison', 'metrics', 'multi'],\n  },\n\n  metric_card: {\n    type: 'metric_card',\n    name: 'Metric Card',\n    description: 'Display a single KPI value with trend indicator',\n    icon: 'TrendingUp',\n    category: 'KPI',\n    component: null,\n    defaultConfig: {\n      format: 'number',\n      decimalPlaces: 0,\n      showTrend: true,\n      showSparkline: false,\n    },\n    defaultSize: { width: 3, height: 2 },\n    defaultResponsive: { xs: 12, sm: 6, md: 4, lg: 3 },\n    minSize: { width: 2, height: 2 },\n    maxSize: { width: 6, height: 4 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['kpi', 'metric', 'number', 'trend'],\n  },\n\n  chart: {\n    type: 'chart',\n    name: 'Chart',\n    description: 'Multi-type chart (Line, Bar, Area, Pie)',\n    icon: 'BarChart3',\n    category: 'Visualization',\n    component: null,\n    defaultConfig: {\n      chartType: 'line',\n      showLegend: true,\n      legendPosition: 'bottom',\n      showGrid: true,\n      showTooltip: true,\n    },\n    defaultSize: { width: 6, height: 4 },\n    defaultResponsive: { xs: 12, sm: 12, md: 6, lg: 6 },\n    minSize: { width: 3, height: 3 },\n    maxSize: { width: 12, height: 8 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['chart', 'graph', 'visualization', 'line', 'bar', 'area', 'pie'],\n  },\n\n  funnel_chart: {\n    type: 'funnel_chart',\n    name: 'Funnel Chart',\n    description: 'Visualize conversion or drop-off stages',\n    icon: 'Filter',\n    category: 'Visualization',\n    component: null,\n    defaultConfig: {\n      showLabels: true,\n      showValues: true,\n      showPercentages: true,\n      orientation: 'vertical',\n    },\n    defaultSize: { width: 4, height: 5 },\n    defaultResponsive: { xs: 12, sm: 6, md: 4, lg: 4 },\n    minSize: { width: 3, height: 4 },\n    maxSize: { width: 8, height: 10 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['funnel', 'conversion', 'stages', 'pipeline'],\n  },\n\n  table: {\n    type: 'table',\n    name: 'Data Table',\n    description: 'Display data in sortable, filterable rows and columns',\n    icon: 'Table',\n    category: 'Data',\n    component: null,\n    defaultConfig: {\n      pageSize: 10,\n      sortable: true,\n      filterable: true,\n      stickyHeader: true,\n      columns: [],\n    },\n    defaultSize: { width: 8, height: 5 },\n    defaultResponsive: { xs: 12, sm: 12, md: 8, lg: 8 },\n    minSize: { width: 4, height: 3 },\n    maxSize: { width: 12, height: 10 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['table', 'data', 'grid', 'rows'],\n  },\n\n  pivot_table: {\n    type: 'pivot_table',\n    name: 'Pivot Table',\n    description: 'Interactive pivot table for data analysis',\n    icon: 'Grid3x3',\n    category: 'Data',\n    component: null,\n    defaultConfig: {\n      rows: [],\n      columns: [],\n      values: [],\n      aggregation: 'sum',\n      showTotals: true,\n    },\n    defaultSize: { width: 10, height: 6 },\n    defaultResponsive: { xs: 12, sm: 12, md: 12, lg: 10 },\n    minSize: { width: 6, height: 4 },\n    maxSize: { width: 12, height: 10 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['pivot', 'table', 'analysis', 'aggregation'],\n  },\n\n  // ============================================================================\n  // Indicators (2 types)\n  // ============================================================================\n\n  gauge: {\n    type: 'gauge',\n    name: 'Gauge',\n    description: 'Display a value within a range',\n    icon: 'Gauge',\n    category: 'KPI',\n    component: null,\n    defaultConfig: {\n      variant: 'circular',\n      min: 0,\n      max: 100,\n      showValue: true,\n      showLabels: true,\n      thresholds: [\n        { value: 33, color: 'red' },\n        { value: 66, color: 'yellow' },\n        { value: 100, color: 'green' },\n      ],\n    },\n    defaultSize: { width: 3, height: 3 },\n    defaultResponsive: { xs: 6, sm: 4, md: 3, lg: 3 },\n    minSize: { width: 2, height: 2 },\n    maxSize: { width: 6, height: 6 },\n    supportsDataBinding: true,\n    supportsDrilldown: false,\n    supportsAutoRefresh: true,\n    tags: ['gauge', 'meter', 'dial', 'indicator'],\n  },\n\n  progress: {\n    type: 'progress',\n    name: 'Progress Bar',\n    description: 'Show progress towards a goal with milestones',\n    icon: 'Activity',\n    category: 'KPI',\n    component: null,\n    defaultConfig: {\n      showPercentage: true,\n      showValue: false,\n      target: null,\n      milestones: [],\n    },\n    defaultSize: { width: 4, height: 2 },\n    defaultResponsive: { xs: 12, sm: 6, md: 4, lg: 4 },\n    minSize: { width: 3, height: 2 },\n    maxSize: { width: 12, height: 3 },\n    supportsDataBinding: true,\n    supportsDrilldown: false,\n    supportsAutoRefresh: true,\n    tags: ['progress', 'bar', 'goal', 'completion'],\n  },\n\n  // ============================================================================\n  // Data Display (2 types)\n  // ============================================================================\n\n  list: {\n    type: 'list',\n    name: 'List',\n    description: 'Display items in a scrollable list',\n    icon: 'List',\n    category: 'Data',\n    component: null,\n    defaultConfig: {\n      showMetadata: true,\n      showActions: false,\n      showBadges: true,\n      maxItems: 10,\n      itemClickable: true,\n    },\n    defaultSize: { width: 4, height: 5 },\n    defaultResponsive: { xs: 12, sm: 6, md: 4, lg: 4 },\n    minSize: { width: 3, height: 3 },\n    maxSize: { width: 8, height: 10 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['list', 'items', 'scroll'],\n  },\n\n  form: {\n    type: 'form',\n    name: 'Form',\n    description: 'Interactive form widget for data input',\n    icon: 'FileText',\n    category: 'Data',\n    component: null,\n    defaultConfig: {\n      fields: [],\n      submitAction: null,\n      layout: 'vertical',\n      showLabels: true,\n    },\n    defaultSize: { width: 6, height: 5 },\n    defaultResponsive: { xs: 12, sm: 12, md: 6, lg: 6 },\n    minSize: { width: 4, height: 3 },\n    maxSize: { width: 12, height: 10 },\n    supportsDataBinding: true,\n    supportsDrilldown: false,\n    supportsAutoRefresh: false,\n    tags: ['form', 'input', 'submit', 'fields'],\n  },\n\n  // ============================================================================\n  // Content (2 types)\n  // ============================================================================\n\n  text: {\n    type: 'text',\n    name: 'Text',\n    description: 'Rich text or markdown content widget',\n    icon: 'Type',\n    category: 'Content',\n    component: null,\n    defaultConfig: {\n      content: '',\n      format: 'markdown',\n      alignment: 'left',\n    },\n    defaultSize: { width: 4, height: 3 },\n    defaultResponsive: { xs: 12, sm: 6, md: 4, lg: 4 },\n    minSize: { width: 2, height: 1 },\n    maxSize: { width: 12, height: 12 },\n    supportsDataBinding: false,\n    supportsDrilldown: false,\n    supportsAutoRefresh: false,\n    tags: ['text', 'markdown', 'content', 'rich text'],\n  },\n\n  iframe: {\n    type: 'iframe',\n    name: 'Iframe',\n    description: 'Embed external content via iframe',\n    icon: 'ExternalLink',\n    category: 'Content',\n    component: null,\n    defaultConfig: {\n      url: '',\n      sandbox: 'allow-scripts allow-same-origin',\n      allowFullscreen: false,\n    },\n    defaultSize: { width: 6, height: 4 },\n    defaultResponsive: { xs: 12, sm: 12, md: 6, lg: 6 },\n    minSize: { width: 3, height: 2 },\n    maxSize: { width: 12, height: 12 },\n    supportsDataBinding: false,\n    supportsDrilldown: false,\n    supportsAutoRefresh: false,\n    tags: ['iframe', 'embed', 'external', 'web'],\n  },\n\n  // ============================================================================\n  // Spatial & Temporal (5 types)\n  // ============================================================================\n\n  map: {\n    type: 'map',\n    name: 'Map',\n    description: 'Geographic map visualization with markers',\n    icon: 'MapPin',\n    category: 'Visualization',\n    component: null,\n    defaultConfig: {\n      provider: 'mapbox',\n      center: { lat: 0, lng: 0 },\n      zoom: 2,\n      showMarkers: true,\n      showRegions: false,\n    },\n    defaultSize: { width: 6, height: 5 },\n    defaultResponsive: { xs: 12, sm: 12, md: 6, lg: 6 },\n    minSize: { width: 4, height: 3 },\n    maxSize: { width: 12, height: 10 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['map', 'geo', 'location', 'markers'],\n  },\n\n  heatmap: {\n    type: 'heatmap',\n    name: 'Heatmap',\n    description: 'Display values in a color-coded grid',\n    icon: 'Grid3x3',\n    category: 'Visualization',\n    component: null,\n    defaultConfig: {\n      xAxisField: '',\n      yAxisField: '',\n      valueField: '',\n      // HeatmapWidget renders intensity from `colorScheme` (token-based Tailwind\n      // classes), not `colorScale`; keep the scale empty rather than seeding it\n      // with CSS var() strings that a data array can never resolve.\n      colorScale: [],\n      colorScheme: 'blue',\n      showValues: true,\n    },\n    defaultSize: { width: 6, height: 5 },\n    defaultResponsive: { xs: 12, sm: 12, md: 6, lg: 6 },\n    minSize: { width: 4, height: 4 },\n    maxSize: { width: 12, height: 10 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['heatmap', 'grid', 'density', 'color'],\n  },\n\n  calendar: {\n    type: 'calendar',\n    name: 'Calendar',\n    description: 'Calendar view for events and schedules',\n    icon: 'Calendar',\n    category: 'Temporal',\n    component: null,\n    defaultConfig: {\n      view: 'month',\n      showWeekNumbers: false,\n      firstDayOfWeek: 0,\n      eventField: '',\n    },\n    defaultSize: { width: 8, height: 6 },\n    defaultResponsive: { xs: 12, sm: 12, md: 8, lg: 8 },\n    minSize: { width: 6, height: 4 },\n    maxSize: { width: 12, height: 10 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['calendar', 'events', 'schedule', 'dates'],\n  },\n\n  kanban: {\n    type: 'kanban',\n    name: 'Kanban Board',\n    description: 'Kanban board for task and workflow management',\n    icon: 'Columns',\n    category: 'Data',\n    component: null,\n    defaultConfig: {\n      columns: [],\n      cardTitleField: '',\n      cardDescriptionField: '',\n      columnField: '',\n      allowDragDrop: true,\n    },\n    defaultSize: { width: 12, height: 6 },\n    defaultResponsive: { xs: 12, sm: 12, md: 12, lg: 12 },\n    minSize: { width: 8, height: 4 },\n    maxSize: { width: 12, height: 10 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['kanban', 'board', 'tasks', 'workflow'],\n  },\n\n  timeline: {\n    type: 'timeline',\n    name: 'Timeline',\n    description: 'Timeline or Gantt chart for project scheduling',\n    icon: 'GitBranch',\n    category: 'Temporal',\n    component: null,\n    defaultConfig: {\n      startDateField: '',\n      endDateField: '',\n      titleField: '',\n      groupField: '',\n      showToday: true,\n    },\n    defaultSize: { width: 12, height: 5 },\n    defaultResponsive: { xs: 12, sm: 12, md: 12, lg: 12 },\n    minSize: { width: 8, height: 3 },\n    maxSize: { width: 12, height: 10 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['timeline', 'gantt', 'project', 'schedule'],\n  },\n\n  // ============================================================================\n  // Extensibility (1 type)\n  // ============================================================================\n\n  custom: {\n    type: 'custom',\n    name: 'Custom Widget',\n    description: 'Custom widget with user-defined rendering',\n    icon: 'Puzzle',\n    category: 'Custom',\n    component: null,\n    defaultConfig: {\n      componentId: '',\n      props: {},\n    },\n    defaultSize: { width: 4, height: 4 },\n    defaultResponsive: { xs: 12, sm: 6, md: 4, lg: 4 },\n    minSize: { width: 2, height: 2 },\n    maxSize: { width: 12, height: 12 },\n    supportsDataBinding: true,\n    supportsDrilldown: true,\n    supportsAutoRefresh: true,\n    tags: ['custom', 'plugin', 'extension'],\n  },\n};\n\n// ============================================================================\n// Registry Functions\n// ============================================================================\n\n/**\n * Default widget definition for unknown types\n */\nconst DEFAULT_WIDGET_DEFINITION: WidgetDefinition = {\n  type: 'custom' as WidgetType,\n  name: 'Unknown Widget',\n  description: 'Unknown widget type',\n  icon: 'Puzzle',\n  category: 'Custom',\n  component: null,\n  defaultConfig: {},\n  defaultSize: { width: 4, height: 4 },\n  defaultResponsive: { xs: 12, sm: 6, md: 4, lg: 4 },\n  minSize: { width: 2, height: 2 },\n  maxSize: { width: 12, height: 12 },\n  supportsDataBinding: true,\n  supportsDrilldown: true,\n  supportsAutoRefresh: true,\n  tags: ['unknown'],\n};\n\n/**\n * Get widget definition by type\n * Handles both lowercase (frontend) and uppercase (backend) types\n */\nexport function getWidgetDefinition(type: WidgetType | string): WidgetDefinition {\n  // Try exact match first\n  if (WIDGET_DEFINITIONS[type as WidgetType]) {\n    return WIDGET_DEFINITIONS[type as WidgetType];\n  }\n\n  // Try lowercase version (backend returns uppercase for some types)\n  const lowerType = type.toLowerCase() as WidgetType;\n  if (WIDGET_DEFINITIONS[lowerType]) {\n    return WIDGET_DEFINITIONS[lowerType];\n  }\n\n  // Return default definition for unknown types\n  return { ...DEFAULT_WIDGET_DEFINITION, type: type as WidgetType };\n}\n\n/**\n * Get all widget definitions\n */\nexport function getAllWidgetDefinitions(): WidgetDefinition[] {\n  return Object.values(WIDGET_DEFINITIONS);\n}\n\n/**\n * Get widget definitions by category\n */\nexport function getWidgetsByCategory(category: WidgetCategory): WidgetDefinition[] {\n  return Object.values(WIDGET_DEFINITIONS).filter((def) => def.category === category);\n}\n\n/**\n * Search widget definitions by query\n */\nexport function searchWidgets(query: string): WidgetDefinition[] {\n  const lowerQuery = query.toLowerCase();\n  return Object.values(WIDGET_DEFINITIONS).filter(\n    (def) =>\n      def.name.toLowerCase().includes(lowerQuery) ||\n      def.description.toLowerCase().includes(lowerQuery) ||\n      def.tags.some((tag) => tag.includes(lowerQuery))\n  );\n}\n\n/**\n * Canonical mapping from widget category to human-readable label.\n * Shared across WidgetTypeSelector, WidgetPalette, and other UI.\n */\nexport const WIDGET_CATEGORY_LABELS: Record<WidgetCategory, string> = {\n  KPI: 'Metrics & KPIs',\n  Visualization: 'Charts & Visualization',\n  Data: 'Data Display',\n  Content: 'Content',\n  Temporal: 'Temporal & Scheduling',\n  Custom: 'Custom',\n  Installed: 'Installed from Store',\n};\n\n/**\n * Get widget categories with their definitions\n */\nexport function getWidgetCategories(): {\n  category: WidgetCategory;\n  label: string;\n  widgets: WidgetDefinition[];\n}[] {\n  const categories: WidgetCategory[] = ['KPI', 'Visualization', 'Data', 'Content', 'Temporal', 'Custom', 'Installed'];\n\n  return categories.map((category) => ({\n    category,\n    label: WIDGET_CATEGORY_LABELS[category],\n    widgets: getWidgetsByCategory(category),\n  }));\n}\n\n/**\n * Validate widget size constraints\n */\nexport function validateWidgetSize(\n  type: WidgetType,\n  width: number,\n  height: number\n): { valid: boolean; width: number; height: number } {\n  const def = WIDGET_DEFINITIONS[type];\n\n  const clampedWidth = Math.min(Math.max(width, def.minSize.width), def.maxSize.width);\n  const clampedHeight = Math.min(Math.max(height, def.minSize.height), def.maxSize.height);\n\n  return {\n    valid: width === clampedWidth && height === clampedHeight,\n    width: clampedWidth,\n    height: clampedHeight,\n  };\n}\n\n/**\n * Get a stable key for a widget definition (handles installed widgets with componentId)\n */\nexport function getWidgetKey(widget: WidgetDefinition): string {\n  if (widget.defaultConfig?.componentId) {\n    return `installed-${widget.defaultConfig.componentId}`;\n  }\n  if (widget.category === 'Installed') {\n    return `installed-${widget.name}`;\n  }\n  return widget.type;\n}\n\nexport default WIDGET_DEFINITIONS;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/event-logs/EventLogViewer.js

@@ -167,7 +167,7 @@ var f = i(function({ log: e, onRetry: i, retrying: a, expanded: o, onToggleExpan
 			}), e.actionName && /* @__PURE__ */ l("div", {
 				style: {
 					fontSize: "11px",
-					color: "#9ca3af"
+					color: "var(--color-text-placeholder)"
 				},
 				children: ["Action: ", e.actionName]
 			})]
@@ -184,13 +184,13 @@ var f = i(function({ log: e, onRetry: i, retrying: a, expanded: o, onToggleExpan
 			children: e.webhookUrl ? /* @__PURE__ */ c("span", {
 				style: {
 					fontSize: "12px",
-					color: "#6b7280"
+					color: "var(--color-text-muted)"
 				},
 				children: new URL(e.webhookUrl).hostname
 			}) : /* @__PURE__ */ c("span", {
 				style: {
 					fontSize: "12px",
-					color: "#d1d5db"
+					color: "var(--color-text-placeholder)"
 				},
 				children: "—"
 			})
@@ -218,7 +218,7 @@ var f = i(function({ log: e, onRetry: i, retrying: a, expanded: o, onToggleExpan
 					e.errorMessage && /* @__PURE__ */ l(s, { children: [
 						"\n\n",
 						/* @__PURE__ */ c("strong", {
-							style: { color: "#dc2626" },
+							style: { color: "var(--color-status-error-text)" },
 							children: "Error:"
 						}),
 						"\n",

package/dist/bigconsole/components/widgets/event-logs/EventLogViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"EventLogViewer.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/event-logs/EventLogViewer.tsx"],"sourcesContent":["/**\n * EventLogViewer Component (v2.0)\n *\n * Component for viewing event history and managing failed deliveries.\n * Shows event status, allows filtering, and supports retry functionality.\n */\n\nimport React, { memo, useState, useCallback } from 'react';\nimport {\n  useEventLogs,\n  getEventStatusColor,\n  getEventStatusLabel,\n  getEventStatusIcon,\n  type EventStatus,\n  type EventLog,\n} from '../../../hooks/useEventLogs';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface EventLogViewerProps {\n  /** Dashboard ID to filter logs */\n  dashboardId?: string;\n  /** Widget ID to filter logs */\n  widgetId?: string;\n  /** Maximum height of the viewer */\n  maxHeight?: string;\n  /** Callback when retry is successful */\n  onRetrySuccess?: (eventLog: EventLog) => void;\n}\n\n// ============================================================================\n// Styles\n// ============================================================================\n\nconst styles = {\n  container: {\n    padding: '16px',\n    backgroundColor: 'var(--color-bg-surface)',\n    borderRadius: '8px',\n  } as React.CSSProperties,\n  header: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    marginBottom: '16px',\n  } as React.CSSProperties,\n  title: {\n    fontSize: '16px',\n    fontWeight: 600,\n    color: 'var(--color-text-primary)',\n    margin: 0,\n  } as React.CSSProperties,\n  headerActions: {\n    display: 'flex',\n    gap: '8px',\n    alignItems: 'center',\n  } as React.CSSProperties,\n  filterSelect: {\n    padding: '6px 12px',\n    fontSize: '13px',\n    border: '1px solid var(--color-border)',\n    borderRadius: '6px',\n    backgroundColor: 'var(--color-bg-surface)',\n  } as React.CSSProperties,\n  refreshButton: {\n    padding: '6px 12px',\n    fontSize: '13px',\n    backgroundColor: 'var(--color-bg-muted)',\n    border: 'none',\n    borderRadius: '6px',\n    cursor: 'pointer',\n    transition: 'background-color 0.15s ease',\n  } as React.CSSProperties,\n  table: {\n    width: '100%',\n    borderCollapse: 'collapse',\n    fontSize: '13px',\n  } as React.CSSProperties,\n  tableHeader: {\n    backgroundColor: 'var(--color-bg-sunken)',\n    borderBottom: '1px solid var(--color-border)',\n  } as React.CSSProperties,\n  th: {\n    padding: '10px 12px',\n    textAlign: 'left',\n    fontWeight: 600,\n    color: 'var(--color-text-secondary)',\n  } as React.CSSProperties,\n  td: {\n    padding: '10px 12px',\n    borderBottom: '1px solid var(--color-border)',\n    color: 'var(--color-text-secondary)',\n  } as React.CSSProperties,\n  statusCell: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '6px',\n  } as React.CSSProperties,\n  statusBadge: {\n    padding: '2px 8px',\n    borderRadius: '12px',\n    fontSize: '11px',\n    fontWeight: 500,\n  } as React.CSSProperties,\n  eventName: {\n    fontFamily: 'monospace',\n    fontSize: '12px',\n    color: 'var(--color-text-secondary)',\n  } as React.CSSProperties,\n  timeAgo: {\n    fontSize: '12px',\n    color: 'var(--color-text-muted)',\n  } as React.CSSProperties,\n  retryButton: {\n    padding: '4px 8px',\n    fontSize: '11px',\n    backgroundColor: 'var(--color-action-primary-bg)',\n    color: 'var(--color-action-primary-text)',\n    border: 'none',\n    borderRadius: '4px',\n    cursor: 'pointer',\n    transition: 'opacity 0.15s ease',\n  } as React.CSSProperties,\n  emptyState: {\n    textAlign: 'center',\n    padding: '32px',\n    color: 'var(--color-text-muted)',\n  } as React.CSSProperties,\n  loadMoreButton: {\n    width: '100%',\n    padding: '10px',\n    marginTop: '12px',\n    backgroundColor: 'var(--color-bg-muted)',\n    border: 'none',\n    borderRadius: '6px',\n    fontSize: '13px',\n    color: 'var(--color-text-secondary)',\n    cursor: 'pointer',\n    transition: 'background-color 0.15s ease',\n  } as React.CSSProperties,\n  totalCount: {\n    fontSize: '12px',\n    color: 'var(--color-text-muted)',\n  } as React.CSSProperties,\n  tableContainer: {\n    overflowX: 'auto',\n  } as React.CSSProperties,\n  detailRow: {\n    backgroundColor: 'var(--color-bg-sunken)',\n  } as React.CSSProperties,\n  detailContent: {\n    padding: '12px',\n    fontSize: '12px',\n    fontFamily: 'monospace',\n    whiteSpace: 'pre-wrap',\n    wordBreak: 'break-all',\n    color: 'var(--color-text-secondary)',\n  } as React.CSSProperties,\n  expandButton: {\n    background: 'none',\n    border: 'none',\n    cursor: 'pointer',\n    padding: '4px',\n    fontSize: '14px',\n  } as React.CSSProperties,\n};\n\n// ============================================================================\n// Helper Functions\n// ============================================================================\n\nfunction formatTimeAgo(dateString: string): string {\n  const date = new Date(dateString);\n  const now = new Date();\n  const diffMs = now.getTime() - date.getTime();\n  const diffMins = Math.floor(diffMs / 60000);\n  const diffHours = Math.floor(diffMins / 60);\n  const diffDays = Math.floor(diffHours / 24);\n\n  if (diffMins < 1) return 'Just now';\n  if (diffMins < 60) return `${diffMins}m ago`;\n  if (diffHours < 24) return `${diffHours}h ago`;\n  if (diffDays < 7) return `${diffDays}d ago`;\n  return date.toLocaleDateString();\n}\n\n// ============================================================================\n// Event Log Row Component\n// ============================================================================\n\ninterface EventLogRowProps {\n  log: EventLog;\n  onRetry: () => void;\n  retrying?: boolean;\n  expanded?: boolean;\n  onToggleExpand: () => void;\n}\n\nconst EventLogRow: React.FC<EventLogRowProps> = memo(function EventLogRow({\n  log,\n  onRetry,\n  retrying,\n  expanded,\n  onToggleExpand,\n}) {\n  const canRetry = log.status === 'FAILED';\n\n  return (\n    <>\n      <tr>\n        <td style={styles.td}>\n          <button onClick={onToggleExpand} style={styles.expandButton}>\n            {expanded ? '▼' : '▶'}\n          </button>\n        </td>\n        <td style={styles.td}>\n          <div style={styles.statusCell}>\n            <span>{getEventStatusIcon(log.status)}</span>\n            <span\n              style={{\n                ...styles.statusBadge,\n                backgroundColor: `${getEventStatusColor(log.status)}20`,\n                color: getEventStatusColor(log.status),\n              }}\n            >\n              {getEventStatusLabel(log.status)}\n            </span>\n          </div>\n        </td>\n        <td style={styles.td}>\n          <div style={styles.eventName}>{log.eventName}</div>\n          {log.actionName && <div style={{ fontSize: '11px', color: '#9ca3af' }}>Action: {log.actionName}</div>}\n        </td>\n        <td style={styles.td}>\n          <div style={styles.timeAgo}>{formatTimeAgo(log.createdAt)}</div>\n        </td>\n        <td style={styles.td}>\n          {log.webhookUrl ? (\n            <span style={{ fontSize: '12px', color: '#6b7280' }}>{new URL(log.webhookUrl).hostname}</span>\n          ) : (\n            <span style={{ fontSize: '12px', color: '#d1d5db' }}>—</span>\n          )}\n        </td>\n        <td style={styles.td}>\n          {canRetry && (\n            <button onClick={onRetry} disabled={retrying} style={styles.retryButton}>\n              {retrying ? '...' : '🔄 Retry'}\n            </button>\n          )}\n        </td>\n      </tr>\n      {expanded && (\n        <tr style={styles.detailRow}>\n          <td colSpan={6} style={styles.td}>\n            <div style={styles.detailContent as React.CSSProperties}>\n              <strong>Payload:</strong>\n              {'\\n'}\n              {JSON.stringify(log.payload, null, 2)}\n              {log.errorMessage && (\n                <>\n                  {'\\n\\n'}\n                  <strong style={{ color: '#dc2626' }}>Error:</strong>\n                  {'\\n'}\n                  {log.errorMessage}\n                </>\n              )}\n              {log.responseCode && (\n                <>\n                  {'\\n\\n'}\n                  <strong>Response Code:</strong> {log.responseCode}\n                </>\n              )}\n              {'\\n\\n'}\n              <strong>Attempts:</strong> {log.attempts}\n            </div>\n          </td>\n        </tr>\n      )}\n    </>\n  );\n});\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\nexport const EventLogViewer: React.FC<EventLogViewerProps> = memo(function EventLogViewer({\n  dashboardId,\n  widgetId,\n  maxHeight = '400px',\n  onRetrySuccess,\n}) {\n  const [statusFilter, setStatusFilter] = useState<EventStatus | ''>('');\n  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());\n  const [retryingId, setRetryingId] = useState<string | null>(null);\n\n  const { logs, loading, totalCount, hasMore, loadMore, retryDelivery, refetch } = useEventLogs({\n    dashboardId,\n    widgetId,\n    status: statusFilter || undefined,\n  });\n\n  const handleRetry = useCallback(\n    async (log: EventLog) => {\n      setRetryingId(log.id);\n      const result = await retryDelivery(log.id);\n      setRetryingId(null);\n      if (result) {\n        onRetrySuccess?.(result);\n      }\n    },\n    [retryDelivery, onRetrySuccess]\n  );\n\n  const handleToggleExpand = useCallback((id: string) => {\n    setExpandedIds((prev) => {\n      const next = new Set(prev);\n      if (next.has(id)) {\n        next.delete(id);\n      } else {\n        next.add(id);\n      }\n      return next;\n    });\n  }, []);\n\n  return (\n    <div style={styles.container}>\n      <div style={styles.header}>\n        <div>\n          <h3 style={styles.title}>Event History</h3>\n          <span style={styles.totalCount}>{totalCount} events</span>\n        </div>\n        <div style={styles.headerActions}>\n          <select\n            value={statusFilter}\n            onChange={(e) => setStatusFilter(e.target.value as EventStatus | '')}\n            style={styles.filterSelect}\n          >\n            <option value=\"\">All Status</option>\n            <option value=\"DELIVERED\">Delivered</option>\n            <option value=\"FAILED\">Failed</option>\n            <option value=\"PENDING\">Pending</option>\n            <option value=\"PROCESSING\">Processing</option>\n            <option value=\"RETRYING\">Retrying</option>\n            <option value=\"IGNORED\">Ignored</option>\n          </select>\n          <button onClick={() => refetch()} style={styles.refreshButton}>\n            🔄 Refresh\n          </button>\n        </div>\n      </div>\n\n      {loading && logs.length === 0 ? (\n        <div style={styles.emptyState}>Loading...</div>\n      ) : logs.length === 0 ? (\n        <div style={styles.emptyState}>\n          <p>No events found</p>\n          <p style={{ fontSize: '13px', marginTop: '8px' }}>Events will appear here when actions are triggered.</p>\n        </div>\n      ) : (\n        <>\n          <div style={{ ...styles.tableContainer, maxHeight, overflowY: 'auto' }}>\n            <table style={styles.table}>\n              <thead style={styles.tableHeader}>\n                <tr>\n                  <th style={{ ...styles.th, width: '40px' }}></th>\n                  <th style={styles.th}>Status</th>\n                  <th style={styles.th}>Event</th>\n                  <th style={styles.th}>Time</th>\n                  <th style={styles.th}>Webhook</th>\n                  <th style={{ ...styles.th, width: '80px' }}>Action</th>\n                </tr>\n              </thead>\n              <tbody>\n                {logs.map((log) => (\n                  <EventLogRow\n                    key={log.id}\n                    log={log}\n                    onRetry={() => handleRetry(log)}\n                    retrying={retryingId === log.id}\n                    expanded={expandedIds.has(log.id)}\n                    onToggleExpand={() => handleToggleExpand(log.id)}\n                  />\n                ))}\n              </tbody>\n            </table>\n          </div>\n\n          {hasMore && (\n            <button onClick={loadMore} style={styles.loadMoreButton}>\n              Load More\n            </button>\n          )}\n        </>\n      )}\n    </div>\n  );\n});\n\nexport default EventLogViewer;\n"],"mappings":"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"}
+{"version":3,"file":"EventLogViewer.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/event-logs/EventLogViewer.tsx"],"sourcesContent":["/**\n * EventLogViewer Component (v2.0)\n *\n * Component for viewing event history and managing failed deliveries.\n * Shows event status, allows filtering, and supports retry functionality.\n */\n\nimport React, { memo, useState, useCallback } from 'react';\nimport {\n  useEventLogs,\n  getEventStatusColor,\n  getEventStatusLabel,\n  getEventStatusIcon,\n  type EventStatus,\n  type EventLog,\n} from '../../../hooks/useEventLogs';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface EventLogViewerProps {\n  /** Dashboard ID to filter logs */\n  dashboardId?: string;\n  /** Widget ID to filter logs */\n  widgetId?: string;\n  /** Maximum height of the viewer */\n  maxHeight?: string;\n  /** Callback when retry is successful */\n  onRetrySuccess?: (eventLog: EventLog) => void;\n}\n\n// ============================================================================\n// Styles\n// ============================================================================\n\nconst styles = {\n  container: {\n    padding: '16px',\n    backgroundColor: 'var(--color-bg-surface)',\n    borderRadius: '8px',\n  } as React.CSSProperties,\n  header: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    marginBottom: '16px',\n  } as React.CSSProperties,\n  title: {\n    fontSize: '16px',\n    fontWeight: 600,\n    color: 'var(--color-text-primary)',\n    margin: 0,\n  } as React.CSSProperties,\n  headerActions: {\n    display: 'flex',\n    gap: '8px',\n    alignItems: 'center',\n  } as React.CSSProperties,\n  filterSelect: {\n    padding: '6px 12px',\n    fontSize: '13px',\n    border: '1px solid var(--color-border)',\n    borderRadius: '6px',\n    backgroundColor: 'var(--color-bg-surface)',\n  } as React.CSSProperties,\n  refreshButton: {\n    padding: '6px 12px',\n    fontSize: '13px',\n    backgroundColor: 'var(--color-bg-muted)',\n    border: 'none',\n    borderRadius: '6px',\n    cursor: 'pointer',\n    transition: 'background-color 0.15s ease',\n  } as React.CSSProperties,\n  table: {\n    width: '100%',\n    borderCollapse: 'collapse',\n    fontSize: '13px',\n  } as React.CSSProperties,\n  tableHeader: {\n    backgroundColor: 'var(--color-bg-sunken)',\n    borderBottom: '1px solid var(--color-border)',\n  } as React.CSSProperties,\n  th: {\n    padding: '10px 12px',\n    textAlign: 'left',\n    fontWeight: 600,\n    color: 'var(--color-text-secondary)',\n  } as React.CSSProperties,\n  td: {\n    padding: '10px 12px',\n    borderBottom: '1px solid var(--color-border)',\n    color: 'var(--color-text-secondary)',\n  } as React.CSSProperties,\n  statusCell: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '6px',\n  } as React.CSSProperties,\n  statusBadge: {\n    padding: '2px 8px',\n    borderRadius: '12px',\n    fontSize: '11px',\n    fontWeight: 500,\n  } as React.CSSProperties,\n  eventName: {\n    fontFamily: 'monospace',\n    fontSize: '12px',\n    color: 'var(--color-text-secondary)',\n  } as React.CSSProperties,\n  timeAgo: {\n    fontSize: '12px',\n    color: 'var(--color-text-muted)',\n  } as React.CSSProperties,\n  retryButton: {\n    padding: '4px 8px',\n    fontSize: '11px',\n    backgroundColor: 'var(--color-action-primary-bg)',\n    color: 'var(--color-action-primary-text)',\n    border: 'none',\n    borderRadius: '4px',\n    cursor: 'pointer',\n    transition: 'opacity 0.15s ease',\n  } as React.CSSProperties,\n  emptyState: {\n    textAlign: 'center',\n    padding: '32px',\n    color: 'var(--color-text-muted)',\n  } as React.CSSProperties,\n  loadMoreButton: {\n    width: '100%',\n    padding: '10px',\n    marginTop: '12px',\n    backgroundColor: 'var(--color-bg-muted)',\n    border: 'none',\n    borderRadius: '6px',\n    fontSize: '13px',\n    color: 'var(--color-text-secondary)',\n    cursor: 'pointer',\n    transition: 'background-color 0.15s ease',\n  } as React.CSSProperties,\n  totalCount: {\n    fontSize: '12px',\n    color: 'var(--color-text-muted)',\n  } as React.CSSProperties,\n  tableContainer: {\n    overflowX: 'auto',\n  } as React.CSSProperties,\n  detailRow: {\n    backgroundColor: 'var(--color-bg-sunken)',\n  } as React.CSSProperties,\n  detailContent: {\n    padding: '12px',\n    fontSize: '12px',\n    fontFamily: 'monospace',\n    whiteSpace: 'pre-wrap',\n    wordBreak: 'break-all',\n    color: 'var(--color-text-secondary)',\n  } as React.CSSProperties,\n  expandButton: {\n    background: 'none',\n    border: 'none',\n    cursor: 'pointer',\n    padding: '4px',\n    fontSize: '14px',\n  } as React.CSSProperties,\n};\n\n// ============================================================================\n// Helper Functions\n// ============================================================================\n\nfunction formatTimeAgo(dateString: string): string {\n  const date = new Date(dateString);\n  const now = new Date();\n  const diffMs = now.getTime() - date.getTime();\n  const diffMins = Math.floor(diffMs / 60000);\n  const diffHours = Math.floor(diffMins / 60);\n  const diffDays = Math.floor(diffHours / 24);\n\n  if (diffMins < 1) return 'Just now';\n  if (diffMins < 60) return `${diffMins}m ago`;\n  if (diffHours < 24) return `${diffHours}h ago`;\n  if (diffDays < 7) return `${diffDays}d ago`;\n  return date.toLocaleDateString();\n}\n\n// ============================================================================\n// Event Log Row Component\n// ============================================================================\n\ninterface EventLogRowProps {\n  log: EventLog;\n  onRetry: () => void;\n  retrying?: boolean;\n  expanded?: boolean;\n  onToggleExpand: () => void;\n}\n\nconst EventLogRow: React.FC<EventLogRowProps> = memo(function EventLogRow({\n  log,\n  onRetry,\n  retrying,\n  expanded,\n  onToggleExpand,\n}) {\n  const canRetry = log.status === 'FAILED';\n\n  return (\n    <>\n      <tr>\n        <td style={styles.td}>\n          <button onClick={onToggleExpand} style={styles.expandButton}>\n            {expanded ? '▼' : '▶'}\n          </button>\n        </td>\n        <td style={styles.td}>\n          <div style={styles.statusCell}>\n            <span>{getEventStatusIcon(log.status)}</span>\n            <span\n              style={{\n                ...styles.statusBadge,\n                backgroundColor: `${getEventStatusColor(log.status)}20`,\n                color: getEventStatusColor(log.status),\n              }}\n            >\n              {getEventStatusLabel(log.status)}\n            </span>\n          </div>\n        </td>\n        <td style={styles.td}>\n          <div style={styles.eventName}>{log.eventName}</div>\n          {log.actionName && (\n            <div style={{ fontSize: '11px', color: 'var(--color-text-placeholder)' }}>Action: {log.actionName}</div>\n          )}\n        </td>\n        <td style={styles.td}>\n          <div style={styles.timeAgo}>{formatTimeAgo(log.createdAt)}</div>\n        </td>\n        <td style={styles.td}>\n          {log.webhookUrl ? (\n            <span style={{ fontSize: '12px', color: 'var(--color-text-muted)' }}>\n              {new URL(log.webhookUrl).hostname}\n            </span>\n          ) : (\n            <span style={{ fontSize: '12px', color: 'var(--color-text-placeholder)' }}>—</span>\n          )}\n        </td>\n        <td style={styles.td}>\n          {canRetry && (\n            <button onClick={onRetry} disabled={retrying} style={styles.retryButton}>\n              {retrying ? '...' : '🔄 Retry'}\n            </button>\n          )}\n        </td>\n      </tr>\n      {expanded && (\n        <tr style={styles.detailRow}>\n          <td colSpan={6} style={styles.td}>\n            <div style={styles.detailContent as React.CSSProperties}>\n              <strong>Payload:</strong>\n              {'\\n'}\n              {JSON.stringify(log.payload, null, 2)}\n              {log.errorMessage && (\n                <>\n                  {'\\n\\n'}\n                  <strong style={{ color: 'var(--color-status-error-text)' }}>Error:</strong>\n                  {'\\n'}\n                  {log.errorMessage}\n                </>\n              )}\n              {log.responseCode && (\n                <>\n                  {'\\n\\n'}\n                  <strong>Response Code:</strong> {log.responseCode}\n                </>\n              )}\n              {'\\n\\n'}\n              <strong>Attempts:</strong> {log.attempts}\n            </div>\n          </td>\n        </tr>\n      )}\n    </>\n  );\n});\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\nexport const EventLogViewer: React.FC<EventLogViewerProps> = memo(function EventLogViewer({\n  dashboardId,\n  widgetId,\n  maxHeight = '400px',\n  onRetrySuccess,\n}) {\n  const [statusFilter, setStatusFilter] = useState<EventStatus | ''>('');\n  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());\n  const [retryingId, setRetryingId] = useState<string | null>(null);\n\n  const { logs, loading, totalCount, hasMore, loadMore, retryDelivery, refetch } = useEventLogs({\n    dashboardId,\n    widgetId,\n    status: statusFilter || undefined,\n  });\n\n  const handleRetry = useCallback(\n    async (log: EventLog) => {\n      setRetryingId(log.id);\n      const result = await retryDelivery(log.id);\n      setRetryingId(null);\n      if (result) {\n        onRetrySuccess?.(result);\n      }\n    },\n    [retryDelivery, onRetrySuccess]\n  );\n\n  const handleToggleExpand = useCallback((id: string) => {\n    setExpandedIds((prev) => {\n      const next = new Set(prev);\n      if (next.has(id)) {\n        next.delete(id);\n      } else {\n        next.add(id);\n      }\n      return next;\n    });\n  }, []);\n\n  return (\n    <div style={styles.container}>\n      <div style={styles.header}>\n        <div>\n          <h3 style={styles.title}>Event History</h3>\n          <span style={styles.totalCount}>{totalCount} events</span>\n        </div>\n        <div style={styles.headerActions}>\n          <select\n            value={statusFilter}\n            onChange={(e) => setStatusFilter(e.target.value as EventStatus | '')}\n            style={styles.filterSelect}\n          >\n            <option value=\"\">All Status</option>\n            <option value=\"DELIVERED\">Delivered</option>\n            <option value=\"FAILED\">Failed</option>\n            <option value=\"PENDING\">Pending</option>\n            <option value=\"PROCESSING\">Processing</option>\n            <option value=\"RETRYING\">Retrying</option>\n            <option value=\"IGNORED\">Ignored</option>\n          </select>\n          <button onClick={() => refetch()} style={styles.refreshButton}>\n            🔄 Refresh\n          </button>\n        </div>\n      </div>\n\n      {loading && logs.length === 0 ? (\n        <div style={styles.emptyState}>Loading...</div>\n      ) : logs.length === 0 ? (\n        <div style={styles.emptyState}>\n          <p>No events found</p>\n          <p style={{ fontSize: '13px', marginTop: '8px' }}>Events will appear here when actions are triggered.</p>\n        </div>\n      ) : (\n        <>\n          <div style={{ ...styles.tableContainer, maxHeight, overflowY: 'auto' }}>\n            <table style={styles.table}>\n              <thead style={styles.tableHeader}>\n                <tr>\n                  <th style={{ ...styles.th, width: '40px' }}></th>\n                  <th style={styles.th}>Status</th>\n                  <th style={styles.th}>Event</th>\n                  <th style={styles.th}>Time</th>\n                  <th style={styles.th}>Webhook</th>\n                  <th style={{ ...styles.th, width: '80px' }}>Action</th>\n                </tr>\n              </thead>\n              <tbody>\n                {logs.map((log) => (\n                  <EventLogRow\n                    key={log.id}\n                    log={log}\n                    onRetry={() => handleRetry(log)}\n                    retrying={retryingId === log.id}\n                    expanded={expandedIds.has(log.id)}\n                    onToggleExpand={() => handleToggleExpand(log.id)}\n                  />\n                ))}\n              </tbody>\n            </table>\n          </div>\n\n          {hasMore && (\n            <button onClick={loadMore} style={styles.loadMoreButton}>\n              Load More\n            </button>\n          )}\n        </>\n      )}\n    </div>\n  );\n});\n\nexport default EventLogViewer;\n"],"mappings":"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"}