@burdenoff/microfe-bigconsole 2026.510.54

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

@@ -0,0 +1,342 @@
+import { useWidgetStore as e } from "../../store/widgetStore.js";
+import { useDashboardStore as t } from "../../store/dashboardStore.js";
+import "../../store/index.js";
+import { CrossFilterProvider as n } from "../../contexts/CrossFilterContext.js";
+import "../../contexts/index.js";
+import { useBigConsole as r } from "../../context/BigConsoleContext.js";
+import "../../context/index.js";
+import i from "../../hooks/useWidgetOperations.js";
+import { getWidgetDefinition as a } from "../widgets/WidgetRegistry.js";
+import { useInstalledWidgets as o } from "../../hooks/useInstalledWidgets.js";
+import s from "./DashboardGrid.js";
+import c from "./DashboardToolbar.js";
+import l from "./GlobalFiltersBar/GlobalFiltersBar.js";
+import "./GlobalFiltersBar/index.js";
+import ee from "./PageTabsManager/PageTabsManager.js";
+import "./PageTabsManager/index.js";
+import u from "./ShareDialog/ShareDialog.js";
+import "./ShareDialog/index.js";
+import te from "./WidgetPalette.js";
+import ne from "../widgets/WidgetConfigDialog.js";
+import re from "../widgets/PropertiesPanel.js";
+import { calculatePositionFromDrop as ie, findNextAvailablePosition as ae } from "../../utils/widgetPositioning.js";
+import { memo as d, useCallback as f, useEffect as p, useMemo as m, useRef as h, useState as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/bigconsole/components/dashboard/DashboardCanvas.tsx
+var y = d(function({ dashboardId: d, pageId: y, title: b, onPaste: oe, onSave: se, isSaving: ce = !1, onExport: le, pages: x = [], activePageId: ue, onPageChange: de, onPagesReorder: S, onPageAdd: C, onPageRename: w, onPageDuplicate: T, onPageDelete: E, showFilters: fe = !0, showPageTabs: pe = !0, enableCrossFilter: me = !0 }) {
+	let D = h(null), [O, he] = g(1200), [ge, k] = g(!1), [A, j] = g(!1), [M, N] = g(!1), [P, F] = g(!1), [I, L] = g(null), [R, z] = g(null), [_e, B] = g(null), [V, H] = g(null), U = t((e) => e.viewMode === "edit"), { workspaceId: ve, apiGatewayUrl: ye, authToken: be } = r(), { installedWidgets: W, loading: xe } = o({
+		workspaceId: ve,
+		apiGatewayUrl: ye,
+		authToken: be,
+		enabled: U
+	}), G = t((e) => e.zoomLevel), K = t((e) => e.setGlobalFilterValues), Se = f((e) => {
+		K(e);
+	}, [K]), { createWidget: q } = i(y, d, { skipFetch: !0 }), J = e((e) => e.widgets), Y = m(() => {
+		let e = Array.from(J.values());
+		return y ? e.filter((e) => e.pageId === y) : e;
+	}, [J, y]), Ce = e((e) => e.selectedWidgetId), X = e((e) => e.selectWidget), Z = e((e) => e.addWidget), Q = e((e) => e.updateWidgetPosition), we = e((e) => e.configPanelOpen), Te = e((e) => e.closeConfigPanel);
+	p(() => {
+		let e = () => {
+			D.current && he(D.current.offsetWidth);
+		};
+		return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+	}, []);
+	let Ee = f((e) => {
+		e.forEach((e) => {
+			Q(e.i, {
+				x: e.x,
+				y: e.y,
+				width: e.w,
+				height: e.h
+			});
+		});
+	}, [Q]), De = f((e) => {
+		X(e);
+	}, [X]), $ = f(async (e) => {
+		let t = V || (e.type ? a(e.type) : null), n = {
+			width: t?.defaultSize?.width ?? 4,
+			height: t?.defaultSize?.height ?? 4
+		}, r;
+		if (R) r = R;
+		else {
+			let { x: e, y: t } = ae(Y, n, { cols: 12 });
+			r = {
+				x: e,
+				y: t,
+				width: n.width,
+				height: n.height
+			};
+		}
+		let i = e;
+		if (y) {
+			let t = await q({
+				pageId: y,
+				dashboardId: d,
+				type: e.type,
+				title: e.title || "Untitled Widget",
+				description: e.description,
+				renderer: e.renderer,
+				template: e.template,
+				config: e.config || {},
+				position: r,
+				refreshInterval: e.refreshInterval ?? void 0,
+				dataSinkId: i.dataSinkId,
+				parserId: i.parserId
+			});
+			if (t) {
+				X(t.id), k(!1), z(null), B(null), H(null);
+				return;
+			}
+		}
+		let o = {
+			id: crypto.randomUUID(),
+			dashboardId: d,
+			pageId: y || "local",
+			type: e.type,
+			title: e.title || "Untitled Widget",
+			description: e.description,
+			renderer: e.renderer,
+			template: e.template,
+			refreshInterval: e.refreshInterval,
+			config: e.config || {},
+			position: r,
+			positionX: r.x,
+			positionY: r.y,
+			positionWidth: r.width,
+			positionHeight: r.height,
+			dataSinkId: i.dataSinkId,
+			parserId: i.parserId,
+			translations: [],
+			createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+			updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+		};
+		Z(o), X(o.id), k(!1), z(null), B(null), H(null);
+	}, [
+		d,
+		y,
+		q,
+		Z,
+		X,
+		Y,
+		R,
+		V
+	]), Oe = f((e) => {
+		F(!0), L(e);
+	}, []), ke = f(() => {
+		F(!1), L(null);
+	}, []), Ae = f((e) => {
+		e.preventDefault(), F(!1), L(null);
+		try {
+			let t = e.dataTransfer.getData("application/json");
+			if (!t) return;
+			let n = JSON.parse(t), r = a(n.type), i = null;
+			n.defaultConfig && n.category && (i = {
+				...r,
+				name: n.name || r.name,
+				category: n.category,
+				defaultConfig: n.defaultConfig,
+				defaultSize: n.defaultSize || r.defaultSize
+			});
+			let o = D.current?.getBoundingClientRect();
+			if (!o) return;
+			let s = {
+				width: r.defaultSize.width,
+				height: r.defaultSize.height
+			}, { x: c, y: l } = ie(e.clientX, e.clientY, o, O, s, { cols: 12 });
+			z({
+				x: c,
+				y: l,
+				width: s.width,
+				height: s.height
+			}), B(n.type), H(i), k(!0);
+		} catch (e) {
+			console.error("Failed to handle widget drop:", e);
+		}
+	}, [O]), je = f((e) => {
+		e.preventDefault(), e.dataTransfer.dropEffect = "copy";
+	}, []), Me = f((e, t) => {
+		let n = t || a(e);
+		$({
+			type: e,
+			title: n.name,
+			config: n.defaultConfig
+		}), N(!1);
+	}, [$]);
+	return /* @__PURE__ */ v("div", {
+		className: "flex flex-col h-full",
+		children: [
+			/* @__PURE__ */ _(c, {
+				dashboardId: d,
+				title: b,
+				onAddWidget: () => k(!0),
+				onTogglePalette: f(() => {
+					N((e) => !e);
+				}, []),
+				isPaletteOpen: M,
+				onPaste: oe,
+				onSave: se,
+				isSaving: ce,
+				onExport: le,
+				onShare: () => j(!0)
+			}),
+			fe && /* @__PURE__ */ _(l, {
+				dashboardId: d,
+				onFilterChange: Se,
+				collapsible: !0
+			}),
+			pe && (U || x.length > 0) && /* @__PURE__ */ _(ee, {
+				pages: x,
+				activePageId: ue || x[0]?.id,
+				editable: U,
+				onPageSelect: de || (() => {}),
+				onPagesReorder: S ? (e) => {
+					S(e.map((e) => x.find((t) => t.id === e)).filter(Boolean));
+				} : void 0,
+				onPageCreate: C,
+				onPageRename: w,
+				onPageDuplicate: T,
+				onPageDelete: E
+			}),
+			/* @__PURE__ */ v("div", {
+				className: "flex flex-1 overflow-hidden",
+				children: [U && /* @__PURE__ */ _(te, {
+					isOpen: M,
+					onClose: () => N(!1),
+					onWidgetSelect: Me,
+					onDragStart: Oe,
+					onDragEnd: ke,
+					installedWidgets: W,
+					installedWidgetsLoading: xe
+				}), /* @__PURE__ */ v("div", {
+					ref: D,
+					className: "flex-1 overflow-auto bg-bg-muted",
+					onDrop: Ae,
+					onDragOver: je,
+					onClick: () => {
+						U && X(null);
+					},
+					style: {
+						position: "relative",
+						border: P ? "2px dashed var(--color-action-primary-bg)" : "none",
+						backgroundColor: P ? "var(--color-bg-hover)" : void 0,
+						transition: "border-color 0.2s, background-color 0.2s"
+					},
+					children: [P && /* @__PURE__ */ _("div", {
+						style: {
+							position: "absolute",
+							top: "50%",
+							left: "50%",
+							transform: "translate(-50%, -50%)",
+							padding: "var(--space-pagePadding)",
+							backgroundColor: "var(--color-bg-surface)",
+							borderRadius: "var(--radius-card)",
+							boxShadow: "var(--shadow-elevation-2)",
+							textAlign: "center",
+							pointerEvents: "none",
+							zIndex: 100
+						},
+						children: /* @__PURE__ */ v("p", {
+							style: {
+								fontSize: "var(--font-size-body-md)",
+								color: "var(--color-text-primary)",
+								margin: 0
+							},
+							children: [
+								"Drop to add ",
+								/* @__PURE__ */ _("strong", { children: I }),
+								" widget"
+							]
+						})
+					}), /* @__PURE__ */ _("div", {
+						className: "min-h-full origin-top-left transition-transform",
+						style: {
+							transform: `scale(${G / 100})`,
+							width: `${100 / (G / 100)}%`
+						},
+						children: Y.length > 0 ? /* @__PURE__ */ _(n, {
+							enabled: me,
+							onCrossFilter: (e) => {},
+							children: /* @__PURE__ */ _(s, {
+								widgets: Y,
+								isEditMode: U,
+								width: O,
+								onLayoutChange: Ee,
+								onWidgetSelect: De,
+								selectedWidgetId: Ce
+							})
+						}) : /* @__PURE__ */ v("div", {
+							className: "flex flex-col items-center justify-center min-h-[400px] p-8",
+							children: [
+								/* @__PURE__ */ _("div", {
+									className: "w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-bg-surface",
+									children: /* @__PURE__ */ _("svg", {
+										className: "w-8 h-8 text-text-secondary",
+										fill: "none",
+										stroke: "currentColor",
+										viewBox: "0 0 24 24",
+										children: /* @__PURE__ */ _("path", {
+											strokeLinecap: "round",
+											strokeLinejoin: "round",
+											strokeWidth: 2,
+											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"
+										})
+									})
+								}),
+								/* @__PURE__ */ _("h3", {
+									className: "text-lg font-medium text-text-primary mb-2",
+									children: "No widgets yet"
+								}),
+								/* @__PURE__ */ _("p", {
+									className: "text-sm text-text-secondary mb-4 text-center max-w-[300px]",
+									children: "Add widgets to build your dashboard. Click the \"Add Widget\" button to get started."
+								}),
+								U && /* @__PURE__ */ v("button", {
+									type: "button",
+									onClick: () => k(!0),
+									className: "\n                      inline-flex items-center gap-2\n                      px-4 py-2\n                      text-sm font-medium\n                      text-action-primary-fg\n                      bg-action-primary-bg\n                      hover:bg-action-primary-bgHover\n                      rounded-md\n                      transition-colors\n                    ",
+									children: [/* @__PURE__ */ _("svg", {
+										className: "w-4 h-4",
+										fill: "none",
+										stroke: "currentColor",
+										viewBox: "0 0 24 24",
+										children: /* @__PURE__ */ _("path", {
+											strokeLinecap: "round",
+											strokeLinejoin: "round",
+											strokeWidth: 2,
+											d: "M12 4v16m8-8H4"
+										})
+									}), "Add Widget"]
+								})
+							]
+						})
+					})]
+				})]
+			}),
+			/* @__PURE__ */ _(re, {
+				isOpen: we,
+				onClose: Te
+			}),
+			/* @__PURE__ */ _(ne, {
+				isOpen: ge,
+				onClose: () => {
+					k(!1), z(null), B(null), H(null);
+				},
+				onSave: $,
+				preselectedType: _e || void 0,
+				preselectedDefinition: V || void 0,
+				dashboardId: d,
+				installedWidgets: W
+			}),
+			/* @__PURE__ */ _(u, {
+				dashboardId: d,
+				dashboardName: b || "Dashboard",
+				isOpen: A,
+				onClose: () => j(!1)
+			})
+		]
+	});
+});
+//#endregion
+export { y as default };
+
+//# sourceMappingURL=DashboardCanvas.js.map

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

@@ -0,0 +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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"}

package/dist/bigconsole/components/dashboard/DashboardGrid.d.ts

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+import { Layout } from 'react-grid-layout';
+import { Widget } from '../../types';
+
+export interface DashboardGridProps {
+    /** Widgets to display */
+    widgets: Widget[];
+    /** Whether in edit mode */
+    isEditMode: boolean;
+    /** Container width */
+    width: number;
+    /** Number of columns */
+    cols?: number;
+    /** Row height in pixels */
+    rowHeight?: number;
+    /** Callback when layout changes */
+    onLayoutChange?: (layout: Layout[]) => void;
+    /** Callback when widget is selected */
+    onWidgetSelect?: (widgetId: string) => void;
+    /** Currently selected widget ID */
+    selectedWidgetId?: string | null;
+}
+export declare const DashboardGrid: FC<DashboardGridProps>;
+export default DashboardGrid;
+//# sourceMappingURL=DashboardGrid.d.ts.map

package/dist/bigconsole/components/dashboard/DashboardGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardGrid.d.ts","sourceRoot":"","sources":["../../../../src/bigconsole/components/dashboard/DashboardGrid.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,KAAK,EAAE,EAA8B,MAAM,OAAO,CAAC;AAC5D,OAAmB,EAAE,KAAK,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAO1C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AAMxC,MAAM,WAAW,kBAAkB;IACjC,yBAAyB;IACzB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,2BAA2B;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,uCAAuC;IACvC,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAClC;AA6BD,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA2H/C,CAAC;AAEH,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,88 @@
+import { useGlobalFilterValues as e } from "../../store/dashboardStore.js";
+import "../../store/index.js";
+import t from "../../hooks/useWidgetEvents.js";
+import n from "../widgets/WidgetWrapper.js";
+/* empty css                                               */
+import { memo as r, useCallback as i, useMemo as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+import s from "react-grid-layout";
+import "react-grid-layout/css/styles.css";
+//#region src/bigconsole/components/dashboard/DashboardGrid.tsx
+function c(e) {
+	let t = e.position?.x ?? e.positionX ?? 0, n = e.position?.y ?? e.positionY ?? 0, r = e.position?.width ?? e.positionWidth ?? 4, i = e.position?.height ?? e.positionHeight ?? 4;
+	return {
+		i: e.id,
+		x: t,
+		y: n,
+		w: r,
+		h: i,
+		minW: 1,
+		minH: 1,
+		maxW: 12,
+		maxH: 12
+	};
+}
+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) => {
+		l && m && m(e);
+	}, [m, l]), b = i((e) => {
+		p && l && p(e);
+	}, [p, l]), x = i((e) => {
+		p && l && p(e);
+	}, [p, l]), S = 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,
+			event: r,
+			payload: t.data || {}
+		});
+		return i ? {
+			success: i.status !== "FAILED",
+			message: i.status === "DELIVERED" ? "Action completed" : `Event status: ${i.status}`
+		} : {
+			success: !1,
+			message: "Failed to emit event"
+		};
+	}, [_]);
+	return /* @__PURE__ */ o(s, {
+		className: "dashboard-grid",
+		layout: v,
+		cols: d,
+		rowHeight: f,
+		width: u,
+		margin: [16, 16],
+		containerPadding: [16, 16],
+		isDraggable: l,
+		isResizable: l,
+		draggableHandle: ".widget-drag-handle",
+		onDragStop: b,
+		onResizeStop: x,
+		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"
+				},
+				children: /* @__PURE__ */ o(n, {
+					widget: e,
+					actions: t,
+					onAction: S,
+					filterValues: g
+				})
+			}, e.id);
+		})
+	});
+});
+//#endregion
+export { l as default };
+
+//# sourceMappingURL=DashboardGrid.js.map

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

@@ -0,0 +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"}

package/dist/bigconsole/components/dashboard/DashboardToolbar.d.ts

@@ -0,0 +1,27 @@
+import { FC } from 'react';
+
+export interface DashboardToolbarProps {
+    /** Dashboard ID for saved views */
+    dashboardId?: string;
+    /** Dashboard title */
+    title?: string;
+    /** Callback to add widget */
+    onAddWidget: () => void;
+    /** Callback to toggle widget palette */
+    onTogglePalette?: () => void;
+    /** Whether palette is open */
+    isPaletteOpen?: boolean;
+    /** Callback to paste widget */
+    onPaste?: () => void;
+    /** Callback to save dashboard */
+    onSave?: () => void;
+    /** Whether save is in progress */
+    isSaving?: boolean;
+    /** Callback to export dashboard */
+    onExport?: () => void;
+    /** Callback to open share dialog */
+    onShare?: () => void;
+}
+export declare const DashboardToolbar: FC<DashboardToolbarProps>;
+export default DashboardToolbar;
+//# sourceMappingURL=DashboardToolbar.d.ts.map

package/dist/bigconsole/components/dashboard/DashboardToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../../src/bigconsole/components/dashboard/DashboardToolbar.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAqB,MAAM,OAAO,CAAC;AAyBnD,MAAM,WAAW,qBAAqB;IACpC,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,wCAAwC;IACxC,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,8BAA8B;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAMD,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAmLrD,CAAC;AAEH,eAAe,gBAAgB,CAAC"}