npm - @burdenoff/microfe-bigconsole - Versions diffs - 2026.805.3 → 2026.812.2 - Mend

@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (247) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DashboardCanvas.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/DashboardCanvas.tsx"],"sourcesContent":["/*\n DashboardCanvas Component\n \n Main canvas for dashboard with grid layout and widget rendering.\n * Phase 2: Added GlobalFiltersBar and PageTabsManager integration.\n * Phase 3: Added WidgetPalette sidebar for drag-and-drop widget creation.\n /\n\nimport { type FC, memo, useRef, useState, useCallback, useEffect, useMemo } from 'react';\nimport type { Layout } from 'react-grid-layout';\nimport type { Widget, WidgetType } from '../../types';\nimport { useDashboardStore, useWidgetStore } from '../../store';\nimport { useWidgetOperations } from '../../hooks/useWidgetOperations';\nimport { useInstalledWidgets } from '../../hooks/useInstalledWidgets';\nimport { useWidgetCatalog } from '../../hooks/useWidgetCatalog';\nimport { useDashboardImageExport } from '../../hooks/useDashboardImageExport';\nimport { useBigConsole } from '../../context';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { DashboardGrid } from './DashboardGrid';\nimport { DashboardToolbar } from './DashboardToolbar';\nimport { GlobalFiltersBar } from './GlobalFiltersBar';\nimport { LiveBoardBanner } from './LiveBoardBanner';\nimport { TemplateSetupBanner } from './TemplateSetupBanner';\nimport { PageTabsManager, type DashboardPageTab } from './PageTabsManager';\nimport { ShareDialog } from './ShareDialog';\nimport { WidgetPalette } from './WidgetPalette';\nimport { WidgetInspector } from '../builder';\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 onPublishTemplate?: () => 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\ninterface WidgetPlacement {\n position: { x: number; y: number; width: number; height: number };\n definition?: WidgetDefinition \| null;\n}\n\ninterface PaletteDropData {\n type: WidgetType;\n name?: string;\n category?: WidgetDefinition['category'];\n defaultConfig?: Record<string, unknown>;\n defaultSize?: WidgetDefinition['defaultSize'];\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 onPublishTemplate,\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 { t } = useI18n();\n const containerRef = useRef<HTMLDivElement>(null);\n // Inner board element (the grid surface) — rasterized for PNG/PDF board-pack export.\n const boardRef = useRef<HTMLDivElement>(null);\n const [containerWidth, setContainerWidth] = useState(1200);\n const [isShareDialogOpen, setIsShareDialogOpen] = useState(false);\n const [widgetCreateError, setWidgetCreateError] = useState<string \| null>(null);\n const [isDraggingWidget, setIsDraggingWidget] = useState(false);\n const [dragWidgetType, setDragWidgetType] = useState<WidgetType \| null>(null);\n\n // Store state\n const isEditMode = useDashboardStore((state) => state.viewMode === 'edit');\n\n // Fetch installed widgets only in edit mode — the palette and add-widget dialog\n // are not usable in read-only view, so skip the request for viewer-only sessions.\n const { workspaceId, apiGatewayUrl, authToken } = useBigConsole();\n const { installedWidgets, loading: installedWidgetsLoading } = useInstalledWidgets({\n workspaceId,\n apiGatewayUrl,\n authToken,\n enabled: isEditMode,\n });\n // Built-in widget catalog from the backend (getWidgetTypes); falls back to the\n // bundled registry while loading or if the supergraph hasn't adopted it yet.\n const { definitions: widgetCatalog } = useWidgetCatalog({\n workspaceId,\n apiGatewayUrl,\n authToken,\n enabled: isEditMode,\n });\n const zoomLevel = useDashboardStore((state) => state.zoomLevel);\n const sidebarCollapsed = useDashboardStore((state) => state.sidebarCollapsed);\n const toggleSidebar = useDashboardStore((state) => state.toggleSidebar);\n const isPaletteOpen = !sidebarCollapsed;\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 // Keep react-grid-layout's explicit width in sync with the actual canvas.\n // A ResizeObserver is required because opening the docked inspector or widget\n // palette resizes this element without resizing the browser window.\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n const updateWidth = () => {\n setContainerWidth(container.offsetWidth);\n };\n\n updateWidth();\n\n if (typeof ResizeObserver !== 'undefined') {\n const observer = new ResizeObserver(updateWidth);\n observer.observe(container);\n return () => observer.disconnect();\n }\n\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 // Create with defaults, select the result, then configure it in the inspector.\n const handleAddWidget = useCallback(\n async (widgetData: Partial<Widget>, placement?: WidgetPlacement) => {\n setWidgetCreateError(null);\n const definition = placement?.definition \|\| (widgetData.type ? getWidgetDefinition(widgetData.type) : null);\n const widgetSize = {\n width: definition?.defaultSize?.width ?? 4,\n height: definition?.defaultSize?.height ?? 4,\n };\n\n let position: { x: number; y: number; width: number; height: number };\n if (placement?.position) {\n position = placement.position;\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 // Preserve legacy binding fields when creating from imported/default data.\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 \|\| t('bigconsole.dashboards.canvas.untitledWidget', '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 return;\n }\n\n setWidgetCreateError(\n t(\n 'bigconsole.dashboards.canvas.widgetCreateError',\n 'Could not create the widget. Check the connection and try again.'\n )\n );\n return;\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 \|\| t('bigconsole.dashboards.canvas.untitledWidget', '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 },\n [dashboardId, pageId, createWidgetApi, addWidgetToStore, selectWidget, widgetsArray, t]\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 - create immediately with defaults.\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 parsedData: unknown = JSON.parse(data);\n if (!parsedData \|\| typeof parsedData !== 'object' \|\| !('type' in parsedData)) return;\n const widgetData = parsedData as PaletteDropData;\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 void handleAddWidget(\n {\n type: widgetData.type,\n title: widgetData.name \|\| definition.name,\n config: widgetData.defaultConfig \|\| definition.defaultConfig,\n },\n { position, definition: droppedDefinition }\n );\n } catch (error) {\n console.error('Failed to handle widget drop:', error);\n }\n },\n [containerWidth, handleAddWidget]\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 },\n [handleAddWidget]\n );\n\n // Toggle palette\n const togglePalette = useCallback(() => {\n toggleSidebar();\n }, [toggleSidebar]);\n\n const openWidgetPalette = useCallback(() => {\n if (sidebarCollapsed) toggleSidebar();\n window.requestAnimationFrame(() => {\n const searchPlaceholder = t('bigconsole.dashboards.widgetPalette.searchPlaceholder', 'Search widgets...');\n document.querySelector<HTMLInputElement>(`input[placeholder=\"${searchPlaceholder}\"]`)?.focus();\n });\n }, [sidebarCollapsed, toggleSidebar, t]);\n\n // Board-pack export (PNG + PDF) — rasterizes the inner board element.\n const {\n exportPNG,\n exportPDF,\n isExporting: isExportingImage,\n } = useDashboardImageExport({ containerRef: boardRef, name: title \|\| 'dashboard' });\n const handleExportImage = useCallback(() => {\n void exportPNG();\n }, [exportPNG]);\n const handleExportPdf = useCallback(() => {\n void exportPDF();\n }, [exportPDF]);\n\n return (\n <div className=\"flex flex-col h-full min-w-0 overflow-hidden\">\n {/ Toolbar /}\n <DashboardToolbar\n dashboardId={dashboardId}\n title={title}\n onAddWidget={openWidgetPalette}\n onTogglePalette={togglePalette}\n isPaletteOpen={isPaletteOpen}\n onPaste={onPaste}\n onSave={onSave}\n isSaving={isSaving}\n onExport={onExport}\n onPublishTemplate={onPublishTemplate}\n onExportImage={handleExportImage}\n onExportPdf={handleExportPdf}\n isExportingImage={isExportingImage}\n onShare={() => setIsShareDialogOpen(true)}\n />\n\n {widgetCreateError && (\n <div\n className=\"flex items-center justify-between gap-3 border-b border-status-error-border bg-status-error-bg px-4 py-2 text-sm text-status-error-text\"\n role=\"alert\"\n >\n <span>{widgetCreateError}</span>\n <button\n type=\"button\"\n className=\"font-medium underline underline-offset-2\"\n onClick={() => setWidgetCreateError(null)}\n >\n {t('bigconsole.dashboards.canvas.dismiss', 'Dismiss')}\n </button>\n </div>\n )}\n\n {/ Live wall-board freshness banner — renders only when the page has\n auto-refreshing widgets (e.g. the Live Bed Board) and not in edit mode. /}\n <TemplateSetupBanner widgets={widgetsArray} isEditMode={isEditMode} />\n <LiveBoardBanner widgets={widgetsArray} isEditMode={isEditMode} />\n\n {/ Global Filters Bar /}\n {showFilters && <GlobalFiltersBar dashboardId={dashboardId} onFilterChange={handleFilterChange} collapsible />}\n\n {/ Page Tabs - always show in edit mode so user can add first page /}\n {showPageTabs && (isEditMode \|\| pages.length > 0) && (\n <PageTabsManager\n pages={pages}\n activePageId={activePageId \|\| pages[0]?.id}\n editable={isEditMode}\n onPageSelect={onPageChange \|\| (() => {})}\n onPagesReorder={\n onPagesReorder\n ? (pageIds) => {\n // Convert string[] to DashboardPageTab[] for the callback\n const reorderedPages = pageIds.map((id) => pages.find((p) => p.id === id)!).filter(Boolean);\n onPagesReorder(reorderedPages);\n }\n : undefined\n }\n onPageCreate={onPageAdd}\n onPageRename={onPageRename}\n onPageDuplicate={onPageDuplicate}\n onPageDelete={onPageDelete}\n />\n )}\n\n {/ Main content area with palette and canvas.\n When the properties inspector is open we reserve equal space on the\n right so the (fixed, non-modal) panel docks beside the canvas instead\n of overlaying the selected widget. /}\n <div\n className=\"flex flex-1 min-w-0 overflow-hidden\"\n style={{\n marginRight: configPanelOpen ? 'var(--bc-inspector-width, 420px)' : undefined,\n transition: 'margin-right 0.2s ease',\n }}\n >\n {/ Widget Palette Sidebar /}\n {isEditMode && (\n <WidgetPalette\n isOpen={isPaletteOpen}\n onClose={togglePalette}\n onWidgetSelect={handlePaletteWidgetSelect}\n onDragStart={handlePaletteDragStart}\n onDragEnd={handlePaletteDragEnd}\n installedWidgets={installedWidgets}\n installedWidgetsLoading={installedWidgetsLoading}\n definitions={widgetCatalog}\n />\n )}\n\n {/ Canvas area /}\n <div\n ref={containerRef}\n className=\"flex-1 min-w-0 overflow-auto bg-bg-sunken\"\n onDrop={handleCanvasDrop}\n onDragOver={handleCanvasDragOver}\n onClick={() => {\n if (isEditMode) {\n selectWidget(null);\n }\n }}\n style={{\n position: 'relative',\n border: isDraggingWidget ? '2px dashed var(--color-action-primary-bg)' : 'none',\n backgroundColor: isDraggingWidget ? 'var(--color-bg-hover)' : undefined,\n transition: 'border-color 0.2s, background-color 0.2s',\n }}\n >\n {/ Drop zone indicator /}\n {isDraggingWidget && (\n <div\n style={{\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n padding: 'var(--space-pagePadding)',\n backgroundColor: 'var(--color-bg-surface)',\n borderRadius: 'var(--radius-card)',\n boxShadow: 'var(--shadow-elevation-2)',\n textAlign: 'center',\n pointerEvents: 'none',\n zIndex: 100,\n }}\n >\n <p style={{ fontSize: 'var(--font-size-body-md)', color: 'var(--color-text-primary)', margin: 0 }}>\n {t('bigconsole.dashboards.canvas.dropToAddBefore', 'Drop to add')} <strong>{dragWidgetType}</strong>{' '}\n {t('bigconsole.dashboards.canvas.dropToAddAfter', 'widget')}\n </p>\n </div>\n )}\n\n <div\n ref={boardRef}\n className=\"min-h-full origin-top-left transition-transform\"\n style={{\n transform: `scale(${zoomLevel / 100})`,\n width: `${100 / (zoomLevel / 100)}%`,\n }}\n >\n {widgetsArray.length > 0 ? (\n <CrossFilterProvider\n enabled={enableCrossFilter}\n onCrossFilter={(_filters) => {\n // Cross-filter applied - widget queries can access filter values\n }}\n >\n <DashboardGrid\n widgets={widgetsArray}\n isEditMode={isEditMode}\n width={containerWidth}\n onLayoutChange={handleLayoutChange}\n onWidgetSelect={handleWidgetSelect}\n selectedWidgetId={selectedWidgetId}\n />\n </CrossFilterProvider>\n ) : (\n <div className=\"flex flex-col items-center justify-center min-h-[400px] p-8\">\n <div className=\"w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-bg-surface\">\n <svg className=\"w-8 h-8 text-text-secondary\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z\"\n />\n </svg>\n </div>\n <h3 className=\"text-lg font-medium text-text-primary mb-2\">\n {t('bigconsole.dashboards.canvas.noWidgetsTitle', 'No widgets yet')}\n </h3>\n <p className=\"text-sm text-text-secondary mb-4 text-center max-w-[300px]\">\n {t(\n 'bigconsole.dashboards.canvas.noWidgetsDescription',\n 'Add widgets to build your dashboard. Click the \"Add Widget\" button to get started.'\n )}\n </p>\n {isEditMode && (\n <button\n type=\"button\"\n onClick={openWidgetPalette}\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 {t('bigconsole.dashboards.canvas.addWidget', 'Add Widget')}\n </button>\n )}\n </div>\n )}\n </div>\n </div>\n </div>\n\n {/ Properties Panel /}\n <WidgetInspector isOpen={configPanelOpen} onClose={closeConfigPanel} />\n\n {/ Share Dialog */}\n <ShareDialog\n dashboardId={dashboardId}\n dashboardName={title \|\| t('bigconsole.dashboards.canvas.dashboardFallbackName', 'Dashboard')}\n isOpen={isShareDialogOpen}\n onClose={() => setIsShareDialogOpen(false)}\n />\n </div>\n );\n});\n\nexport default DashboardCanvas;\n"],"mappings":"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"}
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 { Button } from '@burdenoff/fe-libs/ui';\nimport { Plus } from 'lucide-react';\nimport type { Layout } from 'react-grid-layout';\nimport type { Widget, WidgetType } from '../../types';\nimport { useDashboardStore, useWidgetStore } from '../../store';\nimport { useWidgetOperations } from '../../hooks/useWidgetOperations';\nimport { useInstalledWidgets } from '../../hooks/useInstalledWidgets';\nimport { useWidgetCatalog } from '../../hooks/useWidgetCatalog';\nimport { useDashboardImageExport } from '../../hooks/useDashboardImageExport';\nimport { useBigConsole } from '../../context';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { Section } from '../common';\nimport { DashboardGrid } from './DashboardGrid';\nimport { DashboardToolbar } from './DashboardToolbar';\nimport { GlobalFiltersBar } from './GlobalFiltersBar';\nimport { LiveBoardBanner } from './LiveBoardBanner';\nimport { TemplateSetupBanner } from './TemplateSetupBanner';\nimport { PageTabsManager, type DashboardPageTab } from './PageTabsManager';\nimport { ShareDialog } from './ShareDialog';\nimport { WidgetPalette } from './WidgetPalette';\nimport { WidgetInspector } from '../builder';\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 onPublishTemplate?: () => 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\ninterface WidgetPlacement {\n position: { x: number; y: number; width: number; height: number };\n definition?: WidgetDefinition \| null;\n}\n\ninterface PaletteDropData {\n type: WidgetType;\n name?: string;\n category?: WidgetDefinition['category'];\n defaultConfig?: Record<string, unknown>;\n defaultSize?: WidgetDefinition['defaultSize'];\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 onPublishTemplate,\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 { t } = useI18n();\n const containerRef = useRef<HTMLDivElement>(null);\n // Inner board element (the grid surface) — rasterized for PNG/PDF board-pack export.\n const boardRef = useRef<HTMLDivElement>(null);\n const [containerWidth, setContainerWidth] = useState(1200);\n const [isShareDialogOpen, setIsShareDialogOpen] = useState(false);\n const [widgetCreateError, setWidgetCreateError] = useState<string \| null>(null);\n const [isDraggingWidget, setIsDraggingWidget] = useState(false);\n const [dragWidgetType, setDragWidgetType] = useState<WidgetType \| null>(null);\n\n // Store state\n const isEditMode = useDashboardStore((state) => state.viewMode === 'edit');\n\n // Fetch installed widgets only in edit mode — the palette and add-widget dialog\n // are not usable in read-only view, so skip the request for viewer-only sessions.\n const { workspaceId, apiGatewayUrl, authToken } = useBigConsole();\n const { installedWidgets, loading: installedWidgetsLoading } = useInstalledWidgets({\n workspaceId,\n apiGatewayUrl,\n authToken,\n enabled: isEditMode,\n });\n // Built-in widget catalog from the backend (getWidgetTypes); falls back to the\n // bundled registry while loading or if the supergraph hasn't adopted it yet.\n const { definitions: widgetCatalog } = useWidgetCatalog({\n workspaceId,\n apiGatewayUrl,\n authToken,\n enabled: isEditMode,\n });\n const zoomLevel = useDashboardStore((state) => state.zoomLevel);\n const sidebarCollapsed = useDashboardStore((state) => state.sidebarCollapsed);\n const toggleSidebar = useDashboardStore((state) => state.toggleSidebar);\n const isPaletteOpen = !sidebarCollapsed;\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 // Keep react-grid-layout's explicit width in sync with the actual canvas.\n // A ResizeObserver is required because opening the docked inspector or widget\n // palette resizes this element without resizing the browser window.\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n const updateWidth = () => {\n setContainerWidth(container.offsetWidth);\n };\n\n updateWidth();\n\n if (typeof ResizeObserver !== 'undefined') {\n const observer = new ResizeObserver(updateWidth);\n observer.observe(container);\n return () => observer.disconnect();\n }\n\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 // Create with defaults, select the result, then configure it in the inspector.\n const handleAddWidget = useCallback(\n async (widgetData: Partial<Widget>, placement?: WidgetPlacement) => {\n setWidgetCreateError(null);\n const definition = placement?.definition \|\| (widgetData.type ? getWidgetDefinition(widgetData.type) : null);\n const widgetSize = {\n width: definition?.defaultSize?.width ?? 4,\n height: definition?.defaultSize?.height ?? 4,\n };\n\n let position: { x: number; y: number; width: number; height: number };\n if (placement?.position) {\n position = placement.position;\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 // Preserve legacy binding fields when creating from imported/default data.\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 \|\| t('bigconsole.dashboards.canvas.untitledWidget', '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 return;\n }\n\n setWidgetCreateError(\n t(\n 'bigconsole.dashboards.canvas.widgetCreateError',\n 'Could not create the widget. Check the connection and try again.'\n )\n );\n return;\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 \|\| t('bigconsole.dashboards.canvas.untitledWidget', '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 },\n [dashboardId, pageId, createWidgetApi, addWidgetToStore, selectWidget, widgetsArray, t]\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 - create immediately with defaults.\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 parsedData: unknown = JSON.parse(data);\n if (!parsedData \|\| typeof parsedData !== 'object' \|\| !('type' in parsedData)) return;\n const widgetData = parsedData as PaletteDropData;\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 void handleAddWidget(\n {\n type: widgetData.type,\n title: widgetData.name \|\| definition.name,\n config: widgetData.defaultConfig \|\| definition.defaultConfig,\n },\n { position, definition: droppedDefinition }\n );\n } catch (error) {\n console.error('Failed to handle widget drop:', error);\n }\n },\n [containerWidth, handleAddWidget]\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 },\n [handleAddWidget]\n );\n\n // Toggle palette\n const togglePalette = useCallback(() => {\n toggleSidebar();\n }, [toggleSidebar]);\n\n const openWidgetPalette = useCallback(() => {\n if (sidebarCollapsed) toggleSidebar();\n window.requestAnimationFrame(() => {\n const searchPlaceholder = t('bigconsole.dashboards.widgetPalette.searchPlaceholder', 'Search widgets...');\n document.querySelector<HTMLInputElement>(`input[placeholder=\"${searchPlaceholder}\"]`)?.focus();\n });\n }, [sidebarCollapsed, toggleSidebar, t]);\n\n // Board-pack export (PNG + PDF) — rasterizes the inner board element.\n const {\n exportPNG,\n exportPDF,\n isExporting: isExportingImage,\n } = useDashboardImageExport({ containerRef: boardRef, name: title \|\| 'dashboard' });\n const handleExportImage = useCallback(() => {\n void exportPNG();\n }, [exportPNG]);\n const handleExportPdf = useCallback(() => {\n void exportPDF();\n }, [exportPDF]);\n\n return (\n <div className=\"flex flex-col h-full min-w-0 overflow-hidden\">\n {/ Toolbar /}\n <DashboardToolbar\n dashboardId={dashboardId}\n title={title}\n onAddWidget={openWidgetPalette}\n onTogglePalette={togglePalette}\n isPaletteOpen={isPaletteOpen}\n onPaste={onPaste}\n onSave={onSave}\n isSaving={isSaving}\n onExport={onExport}\n onPublishTemplate={onPublishTemplate}\n onExportImage={handleExportImage}\n onExportPdf={handleExportPdf}\n isExportingImage={isExportingImage}\n onShare={() => setIsShareDialogOpen(true)}\n />\n\n {widgetCreateError && (\n <div role=\"alert\" className=\"mx-card-padding mt-control-gap flex-shrink-0\">\n {/ The section title has no catalog key — BOFF-6004 translated only the\n message and the Dismiss action — so it stays a literal until a key\n lands in src/translations/en.ts. /}\n <Section\n tone=\"danger\"\n padding=\"compact\"\n headingLevel={3}\n data-testid=\"widget-create-error\"\n title=\"Widget not created\"\n description={widgetCreateError}\n actions={\n <Button variant=\"outline\" size=\"sm\" onClick={() => setWidgetCreateError(null)}>\n {t('bigconsole.dashboards.canvas.dismiss', 'Dismiss')}\n </Button>\n }\n />\n </div>\n )}\n\n {/ Live wall-board freshness banner — renders only when the page has\n auto-refreshing widgets (e.g. the Live Bed Board) and not in edit mode. /}\n <TemplateSetupBanner widgets={widgetsArray} isEditMode={isEditMode} />\n <LiveBoardBanner widgets={widgetsArray} isEditMode={isEditMode} />\n\n {/ Global Filters Bar /}\n {showFilters && <GlobalFiltersBar dashboardId={dashboardId} onFilterChange={handleFilterChange} collapsible />}\n\n {/ Page Tabs - always show in edit mode so user can add first page /}\n {showPageTabs && (isEditMode \|\| pages.length > 0) && (\n <PageTabsManager\n pages={pages}\n activePageId={activePageId \|\| pages[0]?.id}\n editable={isEditMode}\n onPageSelect={onPageChange \|\| (() => {})}\n onPagesReorder={\n onPagesReorder\n ? (pageIds) => {\n // Convert string[] to DashboardPageTab[] for the callback\n const reorderedPages = pageIds.map((id) => pages.find((p) => p.id === id)!).filter(Boolean);\n onPagesReorder(reorderedPages);\n }\n : undefined\n }\n onPageCreate={onPageAdd}\n onPageRename={onPageRename}\n onPageDuplicate={onPageDuplicate}\n onPageDelete={onPageDelete}\n />\n )}\n\n {/ Main content area with palette and canvas.\n When the properties inspector is open we reserve equal space on the\n right so the (fixed, non-modal) panel docks beside the canvas instead\n of overlaying the selected widget. /}\n <div\n data-testid=\"dashboard-canvas-panes\"\n className={`flex flex-1 min-w-0 overflow-hidden ${\n // Only reserve the inspector gutter where there is room for both. The\n // panel is `min(420px, 100vw)` wide, so below `lg` it overlays the\n // board instead — reserving 420px there left the canvas a sliver.\n configPanelOpen ? 'lg:mr-[var(--bc-inspector-width,420px)]' : ''\n }`}\n >\n {/ Widget Palette Sidebar /}\n {isEditMode && (\n <WidgetPalette\n isOpen={isPaletteOpen}\n onClose={togglePalette}\n onWidgetSelect={handlePaletteWidgetSelect}\n onDragStart={handlePaletteDragStart}\n onDragEnd={handlePaletteDragEnd}\n installedWidgets={installedWidgets}\n installedWidgetsLoading={installedWidgetsLoading}\n definitions={widgetCatalog}\n />\n )}\n\n {/\n The board. This is the one `primary` region on the route — everything\n above it is bare chrome or a compact status strip, so the widgets are\n what the eye lands on. It keeps the recessed canvas surface on purpose:\n the widgets are the raised cards, the board is the well they sit in.\n The drop border is always 2px (transparent when idle) so drag-over\n highlights without nudging the whole board.\n /}\n <div\n ref={containerRef}\n role=\"region\"\n aria-label=\"Dashboard board\"\n data-section-emphasis=\"primary\"\n data-testid=\"dashboard-board\"\n className=\"relative min-w-0 flex-1 overflow-auto border-2 border-transparent bg-bg-sunken motion-safe:transition-[border-color,background-color]\"\n onDrop={handleCanvasDrop}\n onDragOver={handleCanvasDragOver}\n onClick={() => {\n if (isEditMode) {\n selectWidget(null);\n }\n }}\n style={\n isDraggingWidget\n ? {\n borderStyle: 'dashed',\n borderColor: 'var(--color-action-primary-bg)',\n backgroundColor: 'var(--color-bg-accentSubtle)',\n }\n : undefined\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 {t('bigconsole.dashboards.canvas.dropToAddBefore', 'Drop to add')} <strong>{dragWidgetType}</strong>{' '}\n {t('bigconsole.dashboards.canvas.dropToAddAfter', 'widget')}\n </p>\n </div>\n )}\n\n <div\n ref={boardRef}\n className=\"min-h-full origin-top-left transition-transform\"\n style={{\n transform: `scale(${zoomLevel / 100})`,\n width: `${100 / (zoomLevel / 100)}%`,\n }}\n >\n {widgetsArray.length > 0 ? (\n <CrossFilterProvider\n enabled={enableCrossFilter}\n onCrossFilter={(_filters) => {\n // Cross-filter applied - widget queries can access filter values\n }}\n >\n <DashboardGrid\n widgets={widgetsArray}\n isEditMode={isEditMode}\n width={containerWidth}\n onLayoutChange={handleLayoutChange}\n onWidgetSelect={handleWidgetSelect}\n selectedWidgetId={selectedWidgetId}\n />\n </CrossFilterProvider>\n ) : (\n <div className=\"flex min-h-[min(400px,60vh)] items-center justify-center p-card-padding\">\n <Section\n headingLevel={3}\n className=\"w-full max-w-md\"\n data-testid=\"dashboard-empty-board\"\n headerClassName=\"mb-form-gap\"\n title={t('bigconsole.dashboards.canvas.noWidgetsTitle', 'No widgets yet')}\n description={t(\n 'bigconsole.dashboards.canvas.noWidgetsDescription',\n 'Add widgets to build your dashboard. Click the \"Add Widget\" button to get started.'\n )}\n >\n {isEditMode && (\n <Button onClick={openWidgetPalette}>\n <Plus className=\"size-4\" />\n {t('bigconsole.dashboards.canvas.addWidget', 'Add Widget')}\n </Button>\n )}\n </Section>\n </div>\n )}\n </div>\n </div>\n </div>\n\n {/ Properties Panel /}\n <WidgetInspector isOpen={configPanelOpen} onClose={closeConfigPanel} />\n\n {/ Share Dialog */}\n <ShareDialog\n dashboardId={dashboardId}\n dashboardName={title \|\| t('bigconsole.dashboards.canvas.dashboardFallbackName', '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/DashboardGrid.js CHANGED Viewed

@@ -23,13 +23,13 @@ function c(e) {
 	};
 }
 var l = r(function({ widgets: r, isEditMode: l, width: u, cols: d = 12, rowHeight: f = 60, onLayoutChange: p, onWidgetSelect: m, selectedWidgetId: h }) {
-	let g = e(), { emitEvent: _ } = t({}), v = a(() => r.map(c), [r]), y = i((e, t) => {
+	let g = e(), { emitEvent: _ } = t({}), v = a(() => r.map(c), [r]), y = u < 480 ? 8 : 16, b = i((e, t) => {
 		l && m && m(e);
-	}, [m, l]), b = i((e) => {
+	}, [m, l]), x = i((e) => {
 		p && l && p(e);
-	}, [p, l]), x = i((e) => {
+	}, [p, l]), S = i((e) => {
 		p && l && p(e);
-	}, [p, l]), S = i(async (e, t) => {
+	}, [p, l]), C = i(async (e, t) => {
 		let n = typeof e?.name == "string" ? e.name : "unknown", r = `widget:${n.toLowerCase().replace(/\s+/g, "_")}:clicked`, i = await _({
 			widgetId: t.widgetId,
 			actionName: n,
@@ -50,32 +50,26 @@ var l = r(function({ widgets: r, isEditMode: l, width: u, cols: d = 12, rowHeigh
 		cols: d,
 		rowHeight: f,
 		width: u,
-		margin: [16, 16],
-		containerPadding: [16, 16],
+		margin: [y, y],
+		containerPadding: [y, y],
 		isDraggable: l,
 		isResizable: l,
 		draggableHandle: ".widget-drag-handle",
-		onDragStop: b,
-		onResizeStop: x,
+		onDragStop: x,
+		onResizeStop: S,
 		useCSSTransforms: !0,
 		compactType: null,
 		preventCollision: !1,
 		children: r.map((e) => {
 			let t = e.actions || [];
 			return /* @__PURE__ */ o("div", {
-				onClick: (t) => y(e.id, t),
-				className: `
-                overflow-visible h-full
-                ${h === e.id && l ? "ring-2 ring-action-primary-bg rounded-lg" : ""}
-              `,
-				style: {
-					display: "flex",
-					flexDirection: "column"
-				},
+				onClick: (t) => b(e.id, t),
+				"data-selected": h === e.id && l ? "true" : void 0,
+				className: `flex h-full min-w-0 flex-col overflow-visible ${h === e.id && l ? "rounded-card ring-2 ring-action-primary-bg ring-offset-2 ring-offset-bg-sunken" : ""}`,
 				children: /* @__PURE__ */ o(n, {
 					widget: e,
 					actions: t,
-					onAction: S,
+					onAction: C,
 					filterValues: g
 				})
 			}, e.id);

package/dist/bigconsole/components/dashboard/DashboardGrid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DashboardGrid.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/DashboardGrid.tsx"],"sourcesContent":["/*\n DashboardGrid Component\n \n Grid layout for widgets using react-grid-layout.\n * v2.0: Added widget event emission support\n /\n\nimport { type FC, memo, useMemo, useCallback } from 'react';\nimport GridLayout, { type Layout } from 'react-grid-layout';\nimport type { Widget } from '../../types';\nimport { WidgetWrapper } from '../widgets/WidgetWrapper';\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents';\nimport { useGlobalFilterValues } from '../../store';\nimport type { WidgetAction, ActionContext, ActionResult } from '../../renderers/types/renderer';\n\n// Import react-grid-layout styles\nimport 'react-grid-layout/css/styles.css';\nimport 'react-resizable/css/styles.css';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DashboardGridProps {\n /* Widgets to display /\n widgets: Widget[];\n /* Whether in edit mode /\n isEditMode: boolean;\n /* Container width /\n width: number;\n /* Number of columns /\n cols?: number;\n /* Row height in pixels /\n rowHeight?: number;\n /* Callback when layout changes /\n onLayoutChange?: (layout: Layout[]) => void;\n /* Callback when widget is selected /\n onWidgetSelect?: (widgetId: string) => void;\n /* Currently selected widget ID */\n selectedWidgetId?: string \| null;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction widgetToLayout(widget: Widget): Layout {\n const x = widget.position?.x ?? widget.positionX ?? 0;\n const y = widget.position?.y ?? widget.positionY ?? 0;\n const w = widget.position?.width ?? widget.positionWidth ?? 4;\n const h = widget.position?.height ?? widget.positionHeight ?? 4;\n\n return {\n i: widget.id,\n x,\n y,\n w,\n h,\n minW: 1,\n minH: 1,\n maxW: 12,\n maxH: 12,\n };\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DashboardGrid: FC<DashboardGridProps> = memo(function DashboardGrid({\n widgets,\n isEditMode,\n width,\n cols = 12,\n rowHeight = 60,\n onLayoutChange,\n onWidgetSelect,\n selectedWidgetId,\n}) {\n // Phase 2: Get global filter values\n const globalFilterValues = useGlobalFilterValues();\n\n // v2.0: Widget event emission hook\n const { emitEvent } = useWidgetEvents({});\n\n // Build layout from widgets\n const layout = useMemo(() => widgets.map(widgetToLayout), [widgets]);\n\n // Handle widget click - only select in edit mode\n const handleWidgetClick = useCallback(\n (widgetId: string, _event: React.MouseEvent) => {\n // Only select widget in edit mode\n // In view mode, let WidgetWrapper handle drilldown\n if (isEditMode && onWidgetSelect) {\n onWidgetSelect(widgetId);\n }\n },\n [onWidgetSelect, isEditMode]\n );\n\n // Handle drag/resize stop - only update when user finishes interaction\n const handleDragStop = useCallback(\n (layout: Layout[]) => {\n if (onLayoutChange && isEditMode) {\n onLayoutChange(layout);\n }\n },\n [onLayoutChange, isEditMode]\n );\n\n const handleResizeStop = useCallback(\n (layout: Layout[]) => {\n if (onLayoutChange && isEditMode) {\n onLayoutChange(layout);\n }\n },\n [onLayoutChange, isEditMode]\n );\n\n // v2.0: Handle widget action - emit event to backend\n const handleWidgetAction = useCallback(\n async (action: WidgetAction, context: ActionContext): Promise<ActionResult \| void> => {\n // Safety check: ensure action.name is a string\n const actionName = typeof action?.name === 'string' ? action.name : 'unknown';\n\n // Build event name from action name (e.g., \"Edit Profile\" -> \"widget:edit_profile:clicked\")\n const eventName = `widget:${actionName.toLowerCase().replace(/\\s+/g, '_')}:clicked`;\n\n // Emit event to backend (triggers webhook if configured)\n const eventLog = await emitEvent({\n widgetId: context.widgetId,\n actionName: actionName,\n event: eventName,\n payload: context.data \|\| {},\n });\n\n if (eventLog) {\n return {\n success: eventLog.status !== 'FAILED',\n message: eventLog.status === 'DELIVERED' ? 'Action completed' : `Event status: ${eventLog.status}`,\n };\n }\n\n return { success: false, message: 'Failed to emit event' };\n },\n [emitEvent]\n );\n\n return (\n <GridLayout\n className=\"dashboard-grid\"\n layout={layout}\n cols={cols}\n rowHeight={rowHeight}\n width={width}\n margin={[16, 16]}\n containerPadding={[16, 16]}\n isDraggable={isEditMode}\n isResizable={isEditMode}\n draggableHandle=\".widget-drag-handle\"\n onDragStop={handleDragStop}\n onResizeStop={handleResizeStop}\n useCSSTransforms\n compactType={null}\n preventCollision={false}\n >\n {widgets.map((widget) => {\n // v2.0: Extract actions from widget\n const widgetWithActions = widget as Widget & { actions?: WidgetAction[] };\n const widgetActions = widgetWithActions.actions \|\| [];\n\n return (\n <div\n key={widget.id}\n onClick={(e) => handleWidgetClick(widget.id, e)}\n className={~~`\n~~ overflow-visible ~~h-full~~\n ${selectedWidgetId === widget.id && isEditMode ? 'ring-2 ring-action-primary-bg ~~rounded~~-lg' : ''}\n ~~`}\n~~ ~~style={{ display: 'flex', flexDirection: 'column'~~ }}\n >\n <WidgetWrapper\n widget={widget}\n actions={widgetActions}\n onAction={handleWidgetAction}\n filterValues={globalFilterValues}\n />\n </div>\n );\n })}\n </GridLayout>\n );\n});\n\nexport default DashboardGrid;\n"],"mappings":";;;;;;;;;;AA8CA,SAAS,EAAe,GAAwB;CAC9C,IAAM,IAAI,EAAO,UAAU,KAAK,EAAO,aAAa,GAC9C,IAAI,EAAO,UAAU,KAAK,EAAO,aAAa,GAC9C,IAAI,EAAO,UAAU,SAAS,EAAO,iBAAiB,GACtD,IAAI,EAAO,UAAU,UAAU,EAAO,kBAAkB;AAE9D,QAAO;EACL,GAAG,EAAO;EACV;EACA;EACA;EACA;EACA,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACP;;AAOH,IAAa,IAAwC,EAAK,SAAuB,EAC/E,YACA,eACA,UACA,UAAO,IACP,eAAY,IACZ,mBACA,mBACA,uBACC;CAED,IAAM,IAAqB,GAAuB,EAG5C,EAAE,iBAAc,EAAgB,EAAE,CAAC,EAGnC,IAAS,QAAc,EAAQ,IAAI,EAAe,EAAE,CAAC,EAAQ,CAAC,~~EAG9D~~,IAAoB,GACvB,GAAkB,MAA6B;AAG9C,EAAI,KAAc,KAChB,EAAe,EAAS;IAG5B,CAAC,GAAgB,EAAW,CAC7B,EAGK,IAAiB,GACpB,MAAqB;AACpB,EAAI,KAAkB,KACpB,EAAe,EAAO;IAG1B,CAAC,GAAgB,EAAW,CAC7B,EAEK,IAAmB,GACtB,MAAqB;AACpB,EAAI,KAAkB,KACpB,EAAe,EAAO;IAG1B,CAAC,GAAgB,EAAW,CAC7B,EAGK,IAAqB,EACzB,OAAO,GAAsB,MAAyD;EAEpF,IAAM,IAAa,OAAO,GAAQ,QAAS,WAAW,EAAO,OAAO,WAG9D,IAAY,UAAU,EAAW,aAAa,CAAC,QAAQ,QAAQ,IAAI,CAAC,WAGpE,IAAW,MAAM,EAAU;GAC/B,UAAU,EAAQ;GACN;GACZ,OAAO;GACP,SAAS,EAAQ,QAAQ,EAAE;GAC5B,CAAC;AASF,SAPI,IACK;GACL,SAAS,EAAS,WAAW;GAC7B,SAAS,EAAS,WAAW,cAAc,qBAAqB,iBAAiB,EAAS;GAC3F,GAGI;GAAE,SAAS;GAAO,SAAS;GAAwB;IAE5D,CAAC,EAAU,CACZ;AAED,QACE,kBAAC,GAAD;EACE,WAAU;EACF;EACF;EACK;EACJ;EACP,QAAQ,CAAC,~~IAAI~~,~~GAAG~~;~~EAChB~~,kBAAkB,CAAC,~~IAAI~~,~~GAAG~~;~~EAC1B~~,aAAa;EACb,aAAa;EACb,iBAAgB;EAChB,YAAY;EACZ,cAAc;EACd,kBAAA;EACA,aAAa;EACb,kBAAkB;YAEjB,EAAQ,KAAK,MAAW;GAGvB,IAAM,IADoB,EACc,WAAW,EAAE;AAErD,UACE,kBAAC,OAAD;IAEE,UAAU,MAAM,EAAkB,EAAO,IAAI,EAAE;IAC/C,~~WAAW;;kBAEL~~,MAAqB,EAAO,MAAM,IAAa,~~6CAA6C~~,~~GAAG;;IAErG,OAAO~~;~~KAAE~~,~~SAAS;KAAQ~~,~~eAAe~~;~~KAAU;cAEnD~~,kBAAC,GAAD;KACU;KACR,SAAS;KACT,UAAU;KACV,cAAc;KACd,CAAA;IACE,~~EAdC~~,EAAO,~~GAcR~~;IAER;EACS,CAAA;EAEf"}
1	+ {"version":3,"file":"DashboardGrid.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/DashboardGrid.tsx"],"sourcesContent":["/*\n DashboardGrid Component\n \n Grid layout for widgets using react-grid-layout.\n * v2.0: Added widget event emission support\n /\n\nimport { type FC, memo, useMemo, useCallback } from 'react';\nimport GridLayout, { type Layout } from 'react-grid-layout';\nimport type { Widget } from '../../types';\nimport { WidgetWrapper } from '../widgets/WidgetWrapper';\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents';\nimport { useGlobalFilterValues } from '../../store';\nimport type { WidgetAction, ActionContext, ActionResult } from '../../renderers/types/renderer';\n\n// Import react-grid-layout styles\nimport 'react-grid-layout/css/styles.css';\nimport 'react-resizable/css/styles.css';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DashboardGridProps {\n /* Widgets to display /\n widgets: Widget[];\n /* Whether in edit mode /\n isEditMode: boolean;\n /* Container width /\n width: number;\n /* Number of columns /\n cols?: number;\n /* Row height in pixels /\n rowHeight?: number;\n /* Callback when layout changes /\n onLayoutChange?: (layout: Layout[]) => void;\n /* Callback when widget is selected /\n onWidgetSelect?: (widgetId: string) => void;\n /* Currently selected widget ID */\n selectedWidgetId?: string \| null;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction widgetToLayout(widget: Widget): Layout {\n const x = widget.position?.x ?? widget.positionX ?? 0;\n const y = widget.position?.y ?? widget.positionY ?? 0;\n const w = widget.position?.width ?? widget.positionWidth ?? 4;\n const h = widget.position?.height ?? widget.positionHeight ?? 4;\n\n return {\n i: widget.id,\n x,\n y,\n w,\n h,\n minW: 1,\n minH: 1,\n maxW: 12,\n maxH: 12,\n };\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DashboardGrid: FC<DashboardGridProps> = memo(function DashboardGrid({\n widgets,\n isEditMode,\n width,\n cols = 12,\n rowHeight = 60,\n onLayoutChange,\n onWidgetSelect,\n selectedWidgetId,\n}) {\n // Phase 2: Get global filter values\n const globalFilterValues = useGlobalFilterValues();\n\n // v2.0: Widget event emission hook\n const { emitEvent } = useWidgetEvents({});\n\n // Build layout from widgets\n const layout = useMemo(() => widgets.map(widgetToLayout), [widgets]);\n\n // Gutters are a fixed 16px in react-grid-layout, which on a 390px canvas spends\n // ~32px of the board on padding alone. Shrink them on narrow canvases — this is\n // purely visual and never touches the stored x/y/w/h.\n const gutter = width < 480 ? 8 : 16;\n\n // Handle widget click - only select in edit mode\n const handleWidgetClick = useCallback(\n (widgetId: string, _event: React.MouseEvent) => {\n // Only select widget in edit mode\n // In view mode, let WidgetWrapper handle drilldown\n if (isEditMode && onWidgetSelect) {\n onWidgetSelect(widgetId);\n }\n },\n [onWidgetSelect, isEditMode]\n );\n\n // Handle drag/resize stop - only update when user finishes interaction\n const handleDragStop = useCallback(\n (layout: Layout[]) => {\n if (onLayoutChange && isEditMode) {\n onLayoutChange(layout);\n }\n },\n [onLayoutChange, isEditMode]\n );\n\n const handleResizeStop = useCallback(\n (layout: Layout[]) => {\n if (onLayoutChange && isEditMode) {\n onLayoutChange(layout);\n }\n },\n [onLayoutChange, isEditMode]\n );\n\n // v2.0: Handle widget action - emit event to backend\n const handleWidgetAction = useCallback(\n async (action: WidgetAction, context: ActionContext): Promise<ActionResult \| void> => {\n // Safety check: ensure action.name is a string\n const actionName = typeof action?.name === 'string' ? action.name : 'unknown';\n\n // Build event name from action name (e.g., \"Edit Profile\" -> \"widget:edit_profile:clicked\")\n const eventName = `widget:${actionName.toLowerCase().replace(/\\s+/g, '_')}:clicked`;\n\n // Emit event to backend (triggers webhook if configured)\n const eventLog = await emitEvent({\n widgetId: context.widgetId,\n actionName: actionName,\n event: eventName,\n payload: context.data \|\| {},\n });\n\n if (eventLog) {\n return {\n success: eventLog.status !== 'FAILED',\n message: eventLog.status === 'DELIVERED' ? 'Action completed' : `Event status: ${eventLog.status}`,\n };\n }\n\n return { success: false, message: 'Failed to emit event' };\n },\n [emitEvent]\n );\n\n return (\n <GridLayout\n className=\"dashboard-grid\"\n layout={layout}\n cols={cols}\n rowHeight={rowHeight}\n width={width}\n margin={[gutter, gutter]}\n containerPadding={[gutter, gutter]}\n isDraggable={isEditMode}\n isResizable={isEditMode}\n draggableHandle=\".widget-drag-handle\"\n onDragStop={handleDragStop}\n onResizeStop={handleResizeStop}\n useCSSTransforms\n compactType={null}\n preventCollision={false}\n >\n {widgets.map((widget) => {\n // v2.0: Extract actions from widget\n const widgetWithActions = widget as Widget & { actions?: WidgetAction[] };\n const widgetActions = widgetWithActions.actions \|\| [];\n\n return (\n <div\n key={widget.id}\n onClick={(e) => handleWidgetClick(widget.id, e)}\n data-selected={selectedWidgetId === widget.id && isEditMode ? 'true' : undefined}\n className={`flex h-full min-w-0 flex-col overflow-visible ${\n selectedWidgetId === widget.id && isEditMode\n ? 'rounded-card ring-2 ring-action-primary-bg ring-offset-2 ring-offset-bg-sunken'\n : ''\n }`}\n >\n <WidgetWrapper\n widget={widget}\n actions={widgetActions}\n onAction={handleWidgetAction}\n filterValues={globalFilterValues}\n />\n </div>\n );\n })}\n </GridLayout>\n );\n});\n\nexport default DashboardGrid;\n"],"mappings":";;;;;;;;;;AA8CA,SAAS,EAAe,GAAwB;CAC9C,IAAM,IAAI,EAAO,UAAU,KAAK,EAAO,aAAa,GAC9C,IAAI,EAAO,UAAU,KAAK,EAAO,aAAa,GAC9C,IAAI,EAAO,UAAU,SAAS,EAAO,iBAAiB,GACtD,IAAI,EAAO,UAAU,UAAU,EAAO,kBAAkB;AAE9D,QAAO;EACL,GAAG,EAAO;EACV;EACA;EACA;EACA;EACA,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACP;;AAOH,IAAa,IAAwC,EAAK,SAAuB,EAC/E,YACA,eACA,UACA,UAAO,IACP,eAAY,IACZ,mBACA,mBACA,uBACC;CAED,IAAM,IAAqB,GAAuB,EAG5C,EAAE,iBAAc,EAAgB,EAAE,CAAC,EAGnC,IAAS,QAAc,EAAQ,IAAI,EAAe,EAAE,CAAC,EAAQ,CAAC,EAK9D,IAAS,IAAQ,MAAM,IAAI,IAG3B,IAAoB,GACvB,GAAkB,MAA6B;AAG9C,EAAI,KAAc,KAChB,EAAe,EAAS;IAG5B,CAAC,GAAgB,EAAW,CAC7B,EAGK,IAAiB,GACpB,MAAqB;AACpB,EAAI,KAAkB,KACpB,EAAe,EAAO;IAG1B,CAAC,GAAgB,EAAW,CAC7B,EAEK,IAAmB,GACtB,MAAqB;AACpB,EAAI,KAAkB,KACpB,EAAe,EAAO;IAG1B,CAAC,GAAgB,EAAW,CAC7B,EAGK,IAAqB,EACzB,OAAO,GAAsB,MAAyD;EAEpF,IAAM,IAAa,OAAO,GAAQ,QAAS,WAAW,EAAO,OAAO,WAG9D,IAAY,UAAU,EAAW,aAAa,CAAC,QAAQ,QAAQ,IAAI,CAAC,WAGpE,IAAW,MAAM,EAAU;GAC/B,UAAU,EAAQ;GACN;GACZ,OAAO;GACP,SAAS,EAAQ,QAAQ,EAAE;GAC5B,CAAC;AASF,SAPI,IACK;GACL,SAAS,EAAS,WAAW;GAC7B,SAAS,EAAS,WAAW,cAAc,qBAAqB,iBAAiB,EAAS;GAC3F,GAGI;GAAE,SAAS;GAAO,SAAS;GAAwB;IAE5D,CAAC,EAAU,CACZ;AAED,QACE,kBAAC,GAAD;EACE,WAAU;EACF;EACF;EACK;EACJ;EACP,QAAQ,CAAC,GAAQ,EAAO;EACxB,kBAAkB,CAAC,GAAQ,EAAO;EAClC,aAAa;EACb,aAAa;EACb,iBAAgB;EAChB,YAAY;EACZ,cAAc;EACd,kBAAA;EACA,aAAa;EACb,kBAAkB;YAEjB,EAAQ,KAAK,MAAW;GAGvB,IAAM,IADoB,EACc,WAAW,EAAE;AAErD,UACE,kBAAC,OAAD;IAEE,UAAU,MAAM,EAAkB,EAAO,IAAI,EAAE;IAC/C,iBAAe,MAAqB,EAAO,MAAM,IAAa,SAAS,KAAA;IACvE,WAAW,iDACT,MAAqB,EAAO,MAAM,IAC9B,mFACA;cAGN,kBAAC,GAAD;KACU;KACR,SAAS;KACT,UAAU;KACV,cAAc;KACd,CAAA;IACE,EAfC,EAAO,GAeR;IAER;EACS,CAAA;EAEf"}

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

@@ -1,180 +1,187 @@
 import { useWidgetStore as e } from "../../store/widgetStore.js";
 import { useDashboardStore as t } from "../../store/dashboardStore.js";
 import "../../store/index.js";
-import { BIGCONSOLE_PERMISSIONS as n } from "../../../constants/permissions.js";
-import r from "./SavedViewsDropdown/SavedViewsDropdown.js";
+import { Section as n } from "../common/Section.js";
+import "../common/index.js";
+import { BIGCONSOLE_PERMISSIONS as r } from "../../../constants/permissions.js";
+import i from "./SavedViewsDropdown/SavedViewsDropdown.js";
 import "./SavedViewsDropdown/index.js";
-import { memo as i, useCallback as a } from "react";
-import { PermissionButton as o } from "@burdenoff/fe-libs/shared/components";
-import { usePermissions as s } from "@burdenoff/fe-libs/shared/providers/shell";
-import { Clipboard as c, Download as l, Eye as u, FileText as d, Image as f, Minus as p, PanelLeft as m, PanelLeftClose as h, Pencil as g, Plus as _, RotateCcw as v, Save as y, Share2 as b, Store as x } from "lucide-react";
-import { useI18n as S } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Button as C, Spinner as w, Tooltip as T, TooltipContent as E, TooltipProvider as D, TooltipTrigger as O } from "@burdenoff/fe-libs/ui";
-import { Fragment as k, jsx as A, jsxs as j } from "react/jsx-runtime";
+import { memo as a, useCallback as o } from "react";
+import { PermissionButton as s } from "@burdenoff/fe-libs/shared/components";
+import { usePermissions as c } from "@burdenoff/fe-libs/shared/providers/shell";
+import { Clipboard as l, Download as u, Eye as d, FileText as f, Image as p, Minus as m, PanelLeft as h, PanelLeftClose as g, Pencil as _, Plus as v, RotateCcw as y, Save as b, Share2 as x, Store as S } from "lucide-react";
+import { useI18n as C } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Button as w, Spinner as T, Tooltip as E, TooltipContent as D, TooltipProvider as O, TooltipTrigger as k } from "@burdenoff/fe-libs/ui";
+import { Fragment as A, jsx as j, jsxs as M } from "react/jsx-runtime";
 //#region src/bigconsole/components/dashboard/DashboardToolbar.tsx
-var M = i(function({ dashboardId: i, title: M, onAddWidget: N, onTogglePalette: P, isPaletteOpen: F = !1, onPaste: I, onSave: L, isSaving: R = !1, onExport: z, onPublishTemplate: B, onExportImage: V, onExportPdf: H, isExportingImage: U = !1, onShare: W }) {
-	let { hasPermission: G } = s(), { t: K } = S(), q = t((e) => e.viewMode === "edit"), J = t((e) => e.toggleViewMode), Y = t((e) => e.zoomLevel), X = t((e) => e.setZoomLevel), Z = !!e((e) => e.clipboardWidgetId), Q = a(() => {
-		Z && I && I();
-	}, [Z, I]);
-	return /* @__PURE__ */ A(D, { children: /* @__PURE__ */ j("div", {
-		className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2 px-4 py-2 bg-bg-surface border-b",
+var N = a(function({ dashboardId: a, title: N, onAddWidget: P, onTogglePalette: F, isPaletteOpen: I = !1, onPaste: L, onSave: R, isSaving: z = !1, onExport: B, onPublishTemplate: V, onExportImage: H, onExportPdf: U, isExportingImage: W = !1, onShare: G }) {
+	let { hasPermission: K } = c(), { t: q } = C(), J = t((e) => e.viewMode === "edit"), Y = t((e) => e.toggleViewMode), X = t((e) => e.zoomLevel), Z = t((e) => e.setZoomLevel), Q = !!e((e) => e.clipboardWidgetId), $ = o(() => {
+		Q && L && L();
+	}, [Q, L]);
+	return /* @__PURE__ */ j(O, { children: /* @__PURE__ */ M(n, {
+		emphasis: "bare",
+		padding: "none",
+		"aria-label": N ? `Board toolbar — ${N}` : "Board toolbar",
+		"data-testid": "dashboard-toolbar",
+		className: "flex-shrink-0 border-b border-[var(--color-border-subtle)] bg-bg-surface px-4 py-2",
+		bodyClassName: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2",
 		children: [
 			/* @__PURE__ */ j("div", {
 				className: "flex min-w-0 items-center gap-4",
-				children: [M && /* @__PURE__ */ A("h1", {
-					className: "min-w-0 truncate text-lg font-semibold",
-					title: M,
-					children: M
-				}), i && /* @__PURE__ */ A(r, { dashboardId: i })]
+				children: a && /* @__PURE__ */ j(i, { dashboardId: a })
 			}),
-			/* @__PURE__ */ j("div", {
-				className: "flex flex-shrink-0 items-center gap-1",
+			/* @__PURE__ */ M("div", {
+				role: "group",
+				"aria-label": "Zoom",
+				className: "flex min-w-0 items-center gap-1 border-l border-[var(--color-border-subtle)] pl-4",
 				children: [
-					/* @__PURE__ */ j(T, { children: [/* @__PURE__ */ A(O, {
+					/* @__PURE__ */ M(E, { children: [/* @__PURE__ */ j(k, {
 						asChild: !0,
-						children: /* @__PURE__ */ A(C, {
+						children: /* @__PURE__ */ j(w, {
 							variant: "ghost",
 							size: "icon-sm",
-							onClick: () => X(Math.max(50, Y - 10)),
-							disabled: Y <= 50,
-							children: /* @__PURE__ */ A(p, { className: "size-4" })
+							onClick: () => Z(Math.max(50, X - 10)),
+							disabled: X <= 50,
+							children: /* @__PURE__ */ j(m, { className: "size-4" })
 						})
-					}), /* @__PURE__ */ A(E, { children: K("bigconsole.dashboards.toolbar.zoomOut", "Zoom out") })] }),
-					/* @__PURE__ */ j("span", {
+					}), /* @__PURE__ */ j(D, { children: q("bigconsole.dashboards.toolbar.zoomOut", "Zoom out") })] }),
+					/* @__PURE__ */ M("span", {
 						className: "text-sm text-text-secondary w-12 text-center",
-						children: [Y, "%"]
+						children: [X, "%"]
 					}),
-					/* @__PURE__ */ j(T, { children: [/* @__PURE__ */ A(O, {
+					/* @__PURE__ */ M(E, { children: [/* @__PURE__ */ j(k, {
 						asChild: !0,
-						children: /* @__PURE__ */ A(C, {
+						children: /* @__PURE__ */ j(w, {
 							variant: "ghost",
 							size: "icon-sm",
-							onClick: () => X(Math.min(200, Y + 10)),
-							disabled: Y >= 200,
-							children: /* @__PURE__ */ A(_, { className: "size-4" })
+							onClick: () => Z(Math.min(200, X + 10)),
+							disabled: X >= 200,
+							children: /* @__PURE__ */ j(v, { className: "size-4" })
 						})
-					}), /* @__PURE__ */ A(E, { children: K("bigconsole.dashboards.toolbar.zoomIn", "Zoom in") })] }),
-					/* @__PURE__ */ j(T, { children: [/* @__PURE__ */ A(O, {
+					}), /* @__PURE__ */ j(D, { children: q("bigconsole.dashboards.toolbar.zoomIn", "Zoom in") })] }),
+					/* @__PURE__ */ M(E, { children: [/* @__PURE__ */ j(k, {
 						asChild: !0,
-						children: /* @__PURE__ */ j(C, {
+						children: /* @__PURE__ */ M(w, {
 							variant: "ghost",
 							size: "sm",
-							onClick: () => X(100),
-							children: [/* @__PURE__ */ A(v, { className: "size-3.5 mr-1" }), K("bigconsole.dashboards.toolbar.reset", "Reset")]
+							onClick: () => Z(100),
+							children: [/* @__PURE__ */ j(y, { className: "size-3.5 mr-1" }), q("bigconsole.dashboards.toolbar.reset", "Reset")]
 						})
-					}), /* @__PURE__ */ A(E, { children: K("bigconsole.dashboards.toolbar.resetZoomTooltip", "Reset zoom to 100%") })] })
+					}), /* @__PURE__ */ j(D, { children: q("bigconsole.dashboards.toolbar.resetZoomTooltip", "Reset zoom to 100%") })] })
 				]
 			}),
-			/* @__PURE__ */ j("div", {
-				className: "flex flex-wrap items-center justify-end gap-2",
+			/* @__PURE__ */ M("div", {
+				role: "group",
+				"aria-label": "Board actions",
+				className: "flex min-w-0 flex-wrap items-center justify-end gap-2 border-l border-[var(--color-border-subtle)] pl-4",
 				children: [
-					q && /* @__PURE__ */ j(k, { children: [
-						P && /* @__PURE__ */ j(T, { children: [/* @__PURE__ */ A(O, {
+					J && /* @__PURE__ */ M(A, { children: [
+						F && /* @__PURE__ */ M(E, { children: [/* @__PURE__ */ j(k, {
 							asChild: !0,
-							children: /* @__PURE__ */ j(C, {
-								variant: F ? "secondary" : "outline",
+							children: /* @__PURE__ */ M(w, {
+								variant: I ? "secondary" : "outline",
 								size: "sm",
-								onClick: P,
-								children: [A(F ? h : m, { className: "size-4" }), K("bigconsole.dashboards.toolbar.widgets", "Widgets")]
+								onClick: F,
+								children: [j(I ? g : h, { className: "size-4" }), q("bigconsole.dashboards.toolbar.widgets", "Widgets")]
 							})
-						}), /* @__PURE__ */ A(E, { children: F ? K("bigconsole.dashboards.toolbar.hidePalette", "Hide widget palette") : K("bigconsole.dashboards.toolbar.showPalette", "Show widget palette for drag & drop") })] }),
-						/* @__PURE__ */ j(T, { children: [/* @__PURE__ */ A(O, {
+						}), /* @__PURE__ */ j(D, { children: I ? q("bigconsole.dashboards.toolbar.hidePalette", "Hide widget palette") : q("bigconsole.dashboards.toolbar.showPalette", "Show widget palette for drag & drop") })] }),
+						/* @__PURE__ */ M(E, { children: [/* @__PURE__ */ j(k, {
 							asChild: !0,
-							children: /* @__PURE__ */ j(C, {
+							children: /* @__PURE__ */ M(w, {
 								variant: "ghost",
 								size: "sm",
-								onClick: Q,
-								disabled: !Z,
-								children: [/* @__PURE__ */ A(c, { className: "size-4" }), K("bigconsole.dashboards.toolbar.paste", "Paste")]
+								onClick: $,
+								disabled: !Q,
+								children: [/* @__PURE__ */ j(l, { className: "size-4" }), q("bigconsole.dashboards.toolbar.paste", "Paste")]
 							})
-						}), /* @__PURE__ */ A(E, { children: K("bigconsole.dashboards.toolbar.pasteTooltip", "Paste widget from clipboard") })] }),
-						/* @__PURE__ */ A(o, {
-							permission: n.WIDGET_CREATE,
+						}), /* @__PURE__ */ j(D, { children: q("bigconsole.dashboards.toolbar.pasteTooltip", "Paste widget from clipboard") })] }),
+						/* @__PURE__ */ j(s, {
+							permission: r.WIDGET_CREATE,
 							deniedBehavior: "hide",
-							children: /* @__PURE__ */ j(C, {
+							children: /* @__PURE__ */ M(w, {
 								size: "sm",
-								onClick: N,
-								children: [/* @__PURE__ */ A(_, { className: "size-4" }), K("bigconsole.dashboards.toolbar.addWidget", "Add Widget")]
+								onClick: P,
+								children: [/* @__PURE__ */ j(v, { className: "size-4" }), q("bigconsole.dashboards.toolbar.addWidget", "Add Widget")]
 							})
 						})
 					] }),
-					/* @__PURE__ */ A(C, {
-						variant: q ? "secondary" : "outline",
+					/* @__PURE__ */ j(w, {
+						variant: J ? "secondary" : "outline",
 						size: "sm",
-						onClick: J,
-						children: q ? /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A(u, { className: "size-4" }), K("bigconsole.dashboards.toolbar.preview", "Preview")] }) : /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A(g, { className: "size-4" }), K("bigconsole.dashboards.toolbar.edit", "Edit")] })
+						onClick: Y,
+						children: J ? /* @__PURE__ */ M(A, { children: [/* @__PURE__ */ j(d, { className: "size-4" }), q("bigconsole.dashboards.toolbar.preview", "Preview")] }) : /* @__PURE__ */ M(A, { children: [/* @__PURE__ */ j(_, { className: "size-4" }), q("bigconsole.dashboards.toolbar.edit", "Edit")] })
 					}),
-					L && /* @__PURE__ */ A(C, {
+					R && /* @__PURE__ */ j(w, {
 						variant: "outline",
 						size: "sm",
-						onClick: L,
-						disabled: R,
-						children: R ? /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A(w, { className: "size-4" }), K("bigconsole.dashboards.toolbar.saving", "Saving...")] }) : /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A(y, { className: "size-4" }), K("bigconsole.dashboards.toolbar.save", "Save")] })
+						onClick: R,
+						disabled: z,
+						children: z ? /* @__PURE__ */ M(A, { children: [/* @__PURE__ */ j(T, { className: "size-4" }), q("bigconsole.dashboards.toolbar.saving", "Saving...")] }) : /* @__PURE__ */ M(A, { children: [/* @__PURE__ */ j(b, { className: "size-4" }), q("bigconsole.dashboards.toolbar.save", "Save")] })
 					}),
-					W && /* @__PURE__ */ A(o, {
-						permission: n.DASHBOARD_SHARE,
+					G && /* @__PURE__ */ j(s, {
+						permission: r.DASHBOARD_SHARE,
 						deniedBehavior: "hide",
-						children: /* @__PURE__ */ j(T, { children: [/* @__PURE__ */ A(O, {
+						children: /* @__PURE__ */ M(E, { children: [/* @__PURE__ */ j(k, {
 							asChild: !0,
-							children: /* @__PURE__ */ j(C, {
+							children: /* @__PURE__ */ M(w, {
 								variant: "outline",
 								size: "sm",
-								onClick: W,
-								children: [/* @__PURE__ */ A(b, { className: "size-4" }), K("bigconsole.dashboards.toolbar.share", "Share")]
+								onClick: G,
+								children: [/* @__PURE__ */ j(x, { className: "size-4" }), q("bigconsole.dashboards.toolbar.share", "Share")]
 							})
-						}), /* @__PURE__ */ A(E, { children: K("bigconsole.dashboards.toolbar.shareTooltip", "Share dashboard with others") })] })
+						}), /* @__PURE__ */ j(D, { children: q("bigconsole.dashboards.toolbar.shareTooltip", "Share dashboard with others") })] })
 					}),
-					B && /* @__PURE__ */ A(o, {
-						permission: n.DASHBOARD_PUBLISH,
+					V && /* @__PURE__ */ j(s, {
+						permission: r.DASHBOARD_PUBLISH,
 						deniedBehavior: "hide",
-						children: /* @__PURE__ */ j(T, { children: [/* @__PURE__ */ A(O, {
+						children: /* @__PURE__ */ M(E, { children: [/* @__PURE__ */ j(k, {
 							asChild: !0,
-							children: /* @__PURE__ */ j(C, {
+							children: /* @__PURE__ */ M(w, {
 								variant: "outline",
 								size: "sm",
-								onClick: B,
-								children: [/* @__PURE__ */ A(x, { className: "size-4" }), /* @__PURE__ */ A("span", {
+								onClick: V,
+								children: [/* @__PURE__ */ j(S, { className: "size-4" }), /* @__PURE__ */ j("span", {
 									className: "hidden sm:inline",
-									children: K("bigconsole.dashboards.toolbar.publish", "Publish")
+									children: q("bigconsole.dashboards.toolbar.publish", "Publish")
 								})]
 							})
-						}), /* @__PURE__ */ A(E, { children: K("bigconsole.dashboards.toolbar.publishTooltip", "Publish this dashboard as a reusable template") })] })
+						}), /* @__PURE__ */ j(D, { children: q("bigconsole.dashboards.toolbar.publishTooltip", "Publish this dashboard as a reusable template") })] })
 					}),
-					z && /* @__PURE__ */ j(T, { children: [/* @__PURE__ */ A(O, {
+					B && /* @__PURE__ */ M(E, { children: [/* @__PURE__ */ j(k, {
 						asChild: !0,
-						children: /* @__PURE__ */ j(C, {
+						children: /* @__PURE__ */ M(w, {
 							variant: "outline",
 							size: "sm",
-							onClick: z,
-							children: [/* @__PURE__ */ A(l, { className: "size-4" }), K("bigconsole.dashboards.toolbar.export", "Export")]
+							onClick: B,
+							children: [/* @__PURE__ */ j(u, { className: "size-4" }), q("bigconsole.dashboards.toolbar.export", "Export")]
 						})
-					}), /* @__PURE__ */ A(E, { children: K("bigconsole.dashboards.toolbar.exportTooltip", "Export dashboard to JSON") })] }),
-					V && /* @__PURE__ */ j(T, { children: [/* @__PURE__ */ A(O, {
+					}), /* @__PURE__ */ j(D, { children: q("bigconsole.dashboards.toolbar.exportTooltip", "Export dashboard to JSON") })] }),
+					H && /* @__PURE__ */ M(E, { children: [/* @__PURE__ */ j(k, {
 						asChild: !0,
-						children: /* @__PURE__ */ A(C, {
+						children: /* @__PURE__ */ j(w, {
 							variant: "outline",
 							size: "icon-sm",
-							onClick: V,
-							disabled: U,
-							children: A(U ? w : f, { className: "size-4" })
+							onClick: H,
+							disabled: W,
+							children: j(W ? T : p, { className: "size-4" })
 						})
-					}), /* @__PURE__ */ A(E, { children: K("bigconsole.dashboards.toolbar.exportPngTooltip", "Export board as PNG image") })] }),
-					H && /* @__PURE__ */ j(T, { children: [/* @__PURE__ */ A(O, {
+					}), /* @__PURE__ */ j(D, { children: q("bigconsole.dashboards.toolbar.exportPngTooltip", "Export board as PNG image") })] }),
+					U && /* @__PURE__ */ M(E, { children: [/* @__PURE__ */ j(k, {
 						asChild: !0,
-						children: /* @__PURE__ */ A(C, {
+						children: /* @__PURE__ */ j(w, {
 							variant: "outline",
 							size: "icon-sm",
-							onClick: H,
-							disabled: U,
-							children: /* @__PURE__ */ A(d, { className: "size-4" })
+							onClick: U,
+							disabled: W,
+							children: /* @__PURE__ */ j(f, { className: "size-4" })
 						})
-					}), /* @__PURE__ */ A(E, { children: K("bigconsole.dashboards.toolbar.exportPdfTooltip", "Export board as PDF") })] })
+					}), /* @__PURE__ */ j(D, { children: q("bigconsole.dashboards.toolbar.exportPdfTooltip", "Export board as PDF") })] })
 				]
 			})
 		]
 	}) });
 });
 //#endregion
-export { M as default };
+export { N as default };
 //# sourceMappingURL=DashboardToolbar.js.map