@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

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

@@ -3,53 +3,57 @@ 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 { Section as r } from "../common/Section.js";
+import "../common/index.js";
+import { useBigConsole as i } from "../../context/BigConsoleContext.js";
 import "../../context/index.js";
-import { getWidgetDefinition as i } from "../widgets/WidgetRegistry.js";
-import a from "../../hooks/useWidgetCatalog.js";
-import o from "../../hooks/useWidgetOperations.js";
-import s from "../../hooks/useDashboardImageExport.js";
-import { useInstalledWidgets as c } from "../../hooks/useInstalledWidgets.js";
-import l from "./DashboardGrid.js";
-import u from "./DashboardToolbar.js";
-import d from "./GlobalFiltersBar/GlobalFiltersBar.js";
+import { getWidgetDefinition as a } from "../widgets/WidgetRegistry.js";
+import o from "../../hooks/useWidgetCatalog.js";
+import s from "../../hooks/useWidgetOperations.js";
+import c from "../../hooks/useDashboardImageExport.js";
+import { useInstalledWidgets as l } from "../../hooks/useInstalledWidgets.js";
+import u from "./DashboardGrid.js";
+import d from "./DashboardToolbar.js";
+import ee from "./GlobalFiltersBar/GlobalFiltersBar.js";
 import "./GlobalFiltersBar/index.js";
-import ee from "./LiveBoardBanner.js";
-import te from "./TemplateSetupBanner.js";
-import ne from "./PageTabsManager/PageTabsManager.js";
+import te from "./LiveBoardBanner.js";
+import ne from "./TemplateSetupBanner.js";
+import re from "./PageTabsManager/PageTabsManager.js";
 import "./PageTabsManager/index.js";
-import re from "./ShareDialog/ShareDialog.js";
+import ie from "./ShareDialog/ShareDialog.js";
 import "./ShareDialog/index.js";
-import ie from "./WidgetPalette.js";
-import { WidgetInspector as ae } from "../builder/WidgetInspector.js";
+import ae from "./WidgetPalette.js";
+import { WidgetInspector as oe } from "../builder/WidgetInspector.js";
 import "../builder/index.js";
-import { calculatePositionFromDrop as oe, findNextAvailablePosition as se } from "../../utils/widgetPositioning.js";
-import { memo as f, useCallback as p, useEffect as ce, useMemo as le, useRef as m, useState as h } from "react";
-import { useI18n as ue } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { calculatePositionFromDrop as se, findNextAvailablePosition as ce } from "../../utils/widgetPositioning.js";
+import { memo as f, useCallback as p, useEffect as le, useMemo as ue, useRef as m, useState as h } from "react";
+import { Plus as de } from "lucide-react";
+import { useI18n as fe } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Button as g } from "@burdenoff/fe-libs/ui";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/bigconsole/components/dashboard/DashboardCanvas.tsx
-var v = f(function({ dashboardId: f, pageId: v, title: y, onPaste: de, onSave: fe, isSaving: pe = !1, onExport: me, onPublishTemplate: he, pages: b = [], activePageId: ge, onPageChange: _e, onPagesReorder: x, onPageAdd: ve, onPageRename: ye, onPageDuplicate: be, onPageDelete: xe, showFilters: Se = !0, showPageTabs: Ce = !0, enableCrossFilter: we = !0 }) {
-	let { t: S } = ue(), C = m(null), w = m(null), [T, Te] = h(1200), [Ee, E] = h(!1), [D, O] = h(null), [k, A] = h(!1), [De, j] = h(null), M = t((e) => e.viewMode === "edit"), { workspaceId: N, apiGatewayUrl: P, authToken: F } = r(), { installedWidgets: Oe, loading: ke } = c({
-		workspaceId: N,
-		apiGatewayUrl: P,
-		authToken: F,
-		enabled: M
-	}), { definitions: Ae } = a({
-		workspaceId: N,
-		apiGatewayUrl: P,
-		authToken: F,
-		enabled: M
-	}), I = t((e) => e.zoomLevel), L = t((e) => e.sidebarCollapsed), R = t((e) => e.toggleSidebar), z = !L, B = t((e) => e.setGlobalFilterValues), je = p((e) => {
-		B(e);
-	}, [B]), { createWidget: V } = o(v, f, { skipFetch: !0 }), H = e((e) => e.widgets), U = le(() => {
-		let e = Array.from(H.values());
-		return v ? e.filter((e) => e.pageId === v) : e;
-	}, [H, v]), Me = e((e) => e.selectedWidgetId), W = e((e) => e.selectWidget), G = e((e) => e.addWidget), K = e((e) => e.updateWidgetPosition), q = e((e) => e.configPanelOpen), Ne = e((e) => e.closeConfigPanel);
-	ce(() => {
-		let e = C.current;
+var y = f(function({ dashboardId: f, pageId: y, title: b, onPaste: pe, onSave: me, isSaving: he = !1, onExport: ge, onPublishTemplate: _e, pages: x = [], activePageId: ve, onPageChange: ye, onPagesReorder: S, onPageAdd: be, onPageRename: xe, onPageDuplicate: Se, onPageDelete: Ce, showFilters: we = !0, showPageTabs: Te = !0, enableCrossFilter: Ee = !0 }) {
+	let { t: C } = fe(), w = m(null), T = m(null), [E, De] = h(1200), [Oe, D] = h(!1), [O, k] = h(null), [A, j] = h(!1), [ke, M] = h(null), N = t((e) => e.viewMode === "edit"), { workspaceId: P, apiGatewayUrl: F, authToken: I } = i(), { installedWidgets: Ae, loading: je } = l({
+		workspaceId: P,
+		apiGatewayUrl: F,
+		authToken: I,
+		enabled: N
+	}), { definitions: Me } = o({
+		workspaceId: P,
+		apiGatewayUrl: F,
+		authToken: I,
+		enabled: N
+	}), L = t((e) => e.zoomLevel), R = t((e) => e.sidebarCollapsed), z = t((e) => e.toggleSidebar), B = !R, V = t((e) => e.setGlobalFilterValues), Ne = p((e) => {
+		V(e);
+	}, [V]), { createWidget: H } = s(y, f, { skipFetch: !0 }), U = e((e) => e.widgets), W = ue(() => {
+		let e = Array.from(U.values());
+		return y ? e.filter((e) => e.pageId === y) : e;
+	}, [U, y]), Pe = e((e) => e.selectedWidgetId), G = e((e) => e.selectWidget), K = e((e) => e.addWidget), q = e((e) => e.updateWidgetPosition), J = e((e) => e.configPanelOpen), Fe = e((e) => e.closeConfigPanel);
+	le(() => {
+		let e = w.current;
 		if (!e) return;
 		let t = () => {
-			Te(e.offsetWidth);
+			De(e.offsetWidth);
 		};
 		if (t(), typeof ResizeObserver < "u") {
 			let n = new ResizeObserver(t);
@@ -57,27 +61,27 @@ var v = f(function({ dashboardId: f, pageId: v, title: y, onPaste: de, onSave: f
 		}
 		return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
 	}, []);
-	let Pe = p((e) => {
+	let Ie = p((e) => {
 		e.forEach((e) => {
-			K(e.i, {
+			q(e.i, {
 				x: e.x,
 				y: e.y,
 				width: e.w,
 				height: e.h
 			});
 		});
-	}, [K]), Fe = p((e) => {
-		W(e);
-	}, [W]), J = p(async (e, t) => {
-		O(null);
-		let n = t?.definition || (e.type ? i(e.type) : null), r = {
+	}, [q]), Le = p((e) => {
+		G(e);
+	}, [G]), Y = p(async (e, t) => {
+		k(null);
+		let n = t?.definition || (e.type ? a(e.type) : null), r = {
 			width: n?.defaultSize?.width ?? 4,
 			height: n?.defaultSize?.height ?? 4
-		}, a;
-		if (t?.position) a = t.position;
+		}, i;
+		if (t?.position) i = t.position;
 		else {
-			let { x: e, y: t } = se(U, r, { cols: 12 });
-			a = {
+			let { x: e, y: t } = ce(W, r, { cols: 12 });
+			i = {
 				x: e,
 				y: t,
 				width: r.width,
@@ -85,93 +89,93 @@ var v = f(function({ dashboardId: f, pageId: v, title: y, onPaste: de, onSave: f
 			};
 		}
 		let o = e;
-		if (v) {
-			let t = await V({
-				pageId: v,
+		if (y) {
+			let t = await H({
+				pageId: y,
 				dashboardId: f,
 				type: e.type,
-				title: e.title || S("bigconsole.dashboards.canvas.untitledWidget", "Untitled Widget"),
+				title: e.title || C("bigconsole.dashboards.canvas.untitledWidget", "Untitled Widget"),
 				description: e.description,
 				renderer: e.renderer,
 				template: e.template,
 				config: e.config || {},
-				position: a,
+				position: i,
 				refreshInterval: e.refreshInterval ?? void 0,
 				dataSinkId: o.dataSinkId,
 				parserId: o.parserId
 			});
 			if (t) {
-				W(t.id);
+				G(t.id);
 				return;
 			}
-			O(S("bigconsole.dashboards.canvas.widgetCreateError", "Could not create the widget. Check the connection and try again."));
+			k(C("bigconsole.dashboards.canvas.widgetCreateError", "Could not create the widget. Check the connection and try again."));
 			return;
 		}
 		let s = {
 			id: crypto.randomUUID(),
 			dashboardId: f,
-			pageId: v || "local",
+			pageId: y || "local",
 			type: e.type,
-			title: e.title || S("bigconsole.dashboards.canvas.untitledWidget", "Untitled Widget"),
+			title: e.title || C("bigconsole.dashboards.canvas.untitledWidget", "Untitled Widget"),
 			description: e.description,
 			renderer: e.renderer,
 			template: e.template,
 			refreshInterval: e.refreshInterval,
 			config: e.config || {},
-			position: a,
-			positionX: a.x,
-			positionY: a.y,
-			positionWidth: a.width,
-			positionHeight: a.height,
+			position: i,
+			positionX: i.x,
+			positionY: i.y,
+			positionWidth: i.width,
+			positionHeight: i.height,
 			dataSinkId: o.dataSinkId,
 			parserId: o.parserId,
 			translations: [],
 			createdAt: (/* @__PURE__ */ new Date()).toISOString(),
 			updatedAt: (/* @__PURE__ */ new Date()).toISOString()
 		};
-		G(s), W(s.id);
+		K(s), G(s.id);
 	}, [
 		f,
-		v,
-		V,
+		y,
+		H,
+		K,
 		G,
 		W,
-		U,
-		S
-	]), Y = p((e) => {
-		A(!0), j(e);
-	}, []), Ie = p(() => {
-		A(!1), j(null);
-	}, []), Le = p((e) => {
-		e.preventDefault(), A(!1), j(null);
+		C
+	]), Re = p((e) => {
+		j(!0), M(e);
+	}, []), ze = p(() => {
+		j(!1), M(null);
+	}, []), Be = p((e) => {
+		e.preventDefault(), j(!1), M(null);
 		try {
 			let t = e.dataTransfer.getData("application/json");
 			if (!t) return;
 			let n = JSON.parse(t);
 			if (!n || typeof n != "object" || !("type" in n)) return;
-			let r = n, a = i(r.type), o = null;
+			let r = n, i = a(r.type), o = null;
 			r.defaultConfig && r.category && (o = {
-				...a,
-				name: r.name || a.name,
+				...i,
+				name: r.name || i.name,
 				category: r.category,
 				defaultConfig: r.defaultConfig,
-				defaultSize: r.defaultSize || a.defaultSize
+				defaultSize: r.defaultSize || i.defaultSize
 			});
-			let s = C.current?.getBoundingClientRect();
+			let s = w.current?.getBoundingClientRect();
 			if (!s) return;
 			let c = {
-				width: a.defaultSize.width,
-				height: a.defaultSize.height
-			}, { x: l, y: u } = oe(e.clientX, e.clientY, s, T, c, { cols: 12 }), d = {
+				width: i.defaultSize.width,
+				height: i.defaultSize.height
+			}, { x: l, y: u } = se(e.clientX, e.clientY, s, E, c, { cols: 12 }), d = {
 				x: l,
 				y: u,
 				width: c.width,
 				height: c.height
 			};
-			J({
+			Y({
 				type: r.type,
-				title: r.name || a.name,
-				config: r.defaultConfig || a.defaultConfig
+				title: r.name || i.name,
+				config: r.defaultConfig || i.defaultConfig
 			}, {
 				position: d,
 				definition: o
@@ -179,119 +183,127 @@ var v = f(function({ dashboardId: f, pageId: v, title: y, onPaste: de, onSave: f
 		} catch (e) {
 			console.error("Failed to handle widget drop:", e);
 		}
-	}, [T, J]), Re = p((e) => {
+	}, [E, Y]), Ve = p((e) => {
 		e.preventDefault(), e.dataTransfer.dropEffect = "copy";
-	}, []), ze = p((e, t) => {
-		let n = t || i(e);
-		J({
+	}, []), He = p((e, t) => {
+		let n = t || a(e);
+		Y({
 			type: e,
 			title: n.name,
 			config: n.defaultConfig
 		});
-	}, [J]), X = p(() => {
-		R();
-	}, [R]), Z = p(() => {
-		L && R(), window.requestAnimationFrame(() => {
-			let e = S("bigconsole.dashboards.widgetPalette.searchPlaceholder", "Search widgets...");
+	}, [Y]), X = p(() => {
+		z();
+	}, [z]), Z = p(() => {
+		R && z(), window.requestAnimationFrame(() => {
+			let e = C("bigconsole.dashboards.widgetPalette.searchPlaceholder", "Search widgets...");
 			document.querySelector(`input[placeholder="${e}"]`)?.focus();
 		});
 	}, [
-		L,
 		R,
-		S
-	]), { exportPNG: Q, exportPDF: $, isExporting: Be } = s({
-		containerRef: w,
-		name: y || "dashboard"
+		z,
+		C
+	]), { exportPNG: Q, exportPDF: $, isExporting: Ue } = c({
+		containerRef: T,
+		name: b || "dashboard"
 	});
-	return /* @__PURE__ */ _("div", {
+	return /* @__PURE__ */ v("div", {
 		className: "flex flex-col h-full min-w-0 overflow-hidden",
 		children: [
-			/* @__PURE__ */ g(u, {
+			/* @__PURE__ */ _(d, {
 				dashboardId: f,
-				title: y,
+				title: b,
 				onAddWidget: Z,
 				onTogglePalette: X,
-				isPaletteOpen: z,
-				onPaste: de,
-				onSave: fe,
-				isSaving: pe,
-				onExport: me,
-				onPublishTemplate: he,
+				isPaletteOpen: B,
+				onPaste: pe,
+				onSave: me,
+				isSaving: he,
+				onExport: ge,
+				onPublishTemplate: _e,
 				onExportImage: p(() => {
 					Q();
 				}, [Q]),
 				onExportPdf: p(() => {
 					$();
 				}, [$]),
-				isExportingImage: Be,
-				onShare: () => E(!0)
+				isExportingImage: Ue,
+				onShare: () => D(!0)
 			}),
-			D && /* @__PURE__ */ _("div", {
-				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",
+			O && /* @__PURE__ */ _("div", {
 				role: "alert",
-				children: [/* @__PURE__ */ g("span", { children: D }), /* @__PURE__ */ g("button", {
-					type: "button",
-					className: "font-medium underline underline-offset-2",
-					onClick: () => O(null),
-					children: S("bigconsole.dashboards.canvas.dismiss", "Dismiss")
-				})]
+				className: "mx-card-padding mt-control-gap flex-shrink-0",
+				children: /* @__PURE__ */ _(r, {
+					tone: "danger",
+					padding: "compact",
+					headingLevel: 3,
+					"data-testid": "widget-create-error",
+					title: "Widget not created",
+					description: O,
+					actions: /* @__PURE__ */ _(g, {
+						variant: "outline",
+						size: "sm",
+						onClick: () => k(null),
+						children: C("bigconsole.dashboards.canvas.dismiss", "Dismiss")
+					})
+				})
 			}),
-			/* @__PURE__ */ g(te, {
-				widgets: U,
-				isEditMode: M
+			/* @__PURE__ */ _(ne, {
+				widgets: W,
+				isEditMode: N
 			}),
-			/* @__PURE__ */ g(ee, {
-				widgets: U,
-				isEditMode: M
+			/* @__PURE__ */ _(te, {
+				widgets: W,
+				isEditMode: N
 			}),
-			Se && /* @__PURE__ */ g(d, {
+			we && /* @__PURE__ */ _(ee, {
 				dashboardId: f,
-				onFilterChange: je,
+				onFilterChange: Ne,
 				collapsible: !0
 			}),
-			Ce && (M || b.length > 0) && /* @__PURE__ */ g(ne, {
-				pages: b,
-				activePageId: ge || b[0]?.id,
-				editable: M,
-				onPageSelect: _e || (() => {}),
-				onPagesReorder: x ? (e) => {
-					x(e.map((e) => b.find((t) => t.id === e)).filter(Boolean));
+			Te && (N || x.length > 0) && /* @__PURE__ */ _(re, {
+				pages: x,
+				activePageId: ve || x[0]?.id,
+				editable: N,
+				onPageSelect: ye || (() => {}),
+				onPagesReorder: S ? (e) => {
+					S(e.map((e) => x.find((t) => t.id === e)).filter(Boolean));
 				} : void 0,
-				onPageCreate: ve,
-				onPageRename: ye,
-				onPageDuplicate: be,
-				onPageDelete: xe
+				onPageCreate: be,
+				onPageRename: xe,
+				onPageDuplicate: Se,
+				onPageDelete: Ce
 			}),
-			/* @__PURE__ */ _("div", {
-				className: "flex flex-1 min-w-0 overflow-hidden",
-				style: {
-					marginRight: q ? "var(--bc-inspector-width, 420px)" : void 0,
-					transition: "margin-right 0.2s ease"
-				},
-				children: [M && /* @__PURE__ */ g(ie, {
-					isOpen: z,
+			/* @__PURE__ */ v("div", {
+				"data-testid": "dashboard-canvas-panes",
+				className: `flex flex-1 min-w-0 overflow-hidden ${J ? "lg:mr-[var(--bc-inspector-width,420px)]" : ""}`,
+				children: [N && /* @__PURE__ */ _(ae, {
+					isOpen: B,
 					onClose: X,
-					onWidgetSelect: ze,
-					onDragStart: Y,
-					onDragEnd: Ie,
-					installedWidgets: Oe,
-					installedWidgetsLoading: ke,
-					definitions: Ae
-				}), /* @__PURE__ */ _("div", {
-					ref: C,
-					className: "flex-1 min-w-0 overflow-auto bg-bg-sunken",
-					onDrop: Le,
-					onDragOver: Re,
+					onWidgetSelect: He,
+					onDragStart: Re,
+					onDragEnd: ze,
+					installedWidgets: Ae,
+					installedWidgetsLoading: je,
+					definitions: Me
+				}), /* @__PURE__ */ v("div", {
+					ref: w,
+					role: "region",
+					"aria-label": "Dashboard board",
+					"data-section-emphasis": "primary",
+					"data-testid": "dashboard-board",
+					className: "relative min-w-0 flex-1 overflow-auto border-2 border-transparent bg-bg-sunken motion-safe:transition-[border-color,background-color]",
+					onDrop: Be,
+					onDragOver: Ve,
 					onClick: () => {
-						M && W(null);
-					},
-					style: {
-						position: "relative",
-						border: k ? "2px dashed var(--color-action-primary-bg)" : "none",
-						backgroundColor: k ? "var(--color-bg-hover)" : void 0,
-						transition: "border-color 0.2s, background-color 0.2s"
+						N && G(null);
 					},
-					children: [k && /* @__PURE__ */ g("div", {
+					style: A ? {
+						borderStyle: "dashed",
+						borderColor: "var(--color-action-primary-bg)",
+						backgroundColor: "var(--color-bg-accentSubtle)"
+					} : void 0,
+					children: [A && /* @__PURE__ */ _("div", {
 						style: {
 							position: "absolute",
 							top: "50%",
@@ -305,100 +317,70 @@ var v = f(function({ dashboardId: f, pageId: v, title: y, onPaste: de, onSave: f
 							pointerEvents: "none",
 							zIndex: 100
 						},
-						children: /* @__PURE__ */ _("p", {
+						children: /* @__PURE__ */ v("p", {
 							style: {
 								fontSize: "var(--font-size-body-md)",
 								color: "var(--color-text-primary)",
 								margin: 0
 							},
 							children: [
-								S("bigconsole.dashboards.canvas.dropToAddBefore", "Drop to add"),
+								C("bigconsole.dashboards.canvas.dropToAddBefore", "Drop to add"),
 								" ",
-								/* @__PURE__ */ g("strong", { children: De }),
+								/* @__PURE__ */ _("strong", { children: ke }),
 								" ",
-								S("bigconsole.dashboards.canvas.dropToAddAfter", "widget")
+								C("bigconsole.dashboards.canvas.dropToAddAfter", "widget")
 							]
 						})
-					}), /* @__PURE__ */ g("div", {
-						ref: w,
+					}), /* @__PURE__ */ _("div", {
+						ref: T,
 						className: "min-h-full origin-top-left transition-transform",
 						style: {
-							transform: `scale(${I / 100})`,
-							width: `${100 / (I / 100)}%`
+							transform: `scale(${L / 100})`,
+							width: `${100 / (L / 100)}%`
 						},
-						children: U.length > 0 ? /* @__PURE__ */ g(n, {
-							enabled: we,
+						children: W.length > 0 ? /* @__PURE__ */ _(n, {
+							enabled: Ee,
 							onCrossFilter: (e) => {},
-							children: /* @__PURE__ */ g(l, {
-								widgets: U,
-								isEditMode: M,
-								width: T,
-								onLayoutChange: Pe,
-								onWidgetSelect: Fe,
-								selectedWidgetId: Me
+							children: /* @__PURE__ */ _(u, {
+								widgets: W,
+								isEditMode: N,
+								width: E,
+								onLayoutChange: Ie,
+								onWidgetSelect: Le,
+								selectedWidgetId: Pe
 							})
 						}) : /* @__PURE__ */ _("div", {
-							className: "flex flex-col items-center justify-center min-h-[400px] p-8",
-							children: [
-								/* @__PURE__ */ g("div", {
-									className: "w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-bg-surface",
-									children: /* @__PURE__ */ g("svg", {
-										className: "w-8 h-8 text-text-secondary",
-										fill: "none",
-										stroke: "currentColor",
-										viewBox: "0 0 24 24",
-										children: /* @__PURE__ */ g("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__ */ g("h3", {
-									className: "text-lg font-medium text-text-primary mb-2",
-									children: S("bigconsole.dashboards.canvas.noWidgetsTitle", "No widgets yet")
-								}),
-								/* @__PURE__ */ g("p", {
-									className: "text-sm text-text-secondary mb-4 text-center max-w-[300px]",
-									children: S("bigconsole.dashboards.canvas.noWidgetsDescription", "Add widgets to build your dashboard. Click the \"Add Widget\" button to get started.")
-								}),
-								M && /* @__PURE__ */ _("button", {
-									type: "button",
+							className: "flex min-h-[min(400px,60vh)] items-center justify-center p-card-padding",
+							children: /* @__PURE__ */ _(r, {
+								headingLevel: 3,
+								className: "w-full max-w-md",
+								"data-testid": "dashboard-empty-board",
+								headerClassName: "mb-form-gap",
+								title: C("bigconsole.dashboards.canvas.noWidgetsTitle", "No widgets yet"),
+								description: C("bigconsole.dashboards.canvas.noWidgetsDescription", "Add widgets to build your dashboard. Click the \"Add Widget\" button to get started."),
+								children: N && /* @__PURE__ */ v(g, {
 									onClick: Z,
-									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__ */ g("svg", {
-										className: "w-4 h-4",
-										fill: "none",
-										stroke: "currentColor",
-										viewBox: "0 0 24 24",
-										children: /* @__PURE__ */ g("path", {
-											strokeLinecap: "round",
-											strokeLinejoin: "round",
-											strokeWidth: 2,
-											d: "M12 4v16m8-8H4"
-										})
-									}), S("bigconsole.dashboards.canvas.addWidget", "Add Widget")]
+									children: [/* @__PURE__ */ _(de, { className: "size-4" }), C("bigconsole.dashboards.canvas.addWidget", "Add Widget")]
 								})
-							]
+							})
 						})
 					})]
 				})]
 			}),
-			/* @__PURE__ */ g(ae, {
-				isOpen: q,
-				onClose: Ne
+			/* @__PURE__ */ _(oe, {
+				isOpen: J,
+				onClose: Fe
 			}),
-			/* @__PURE__ */ g(re, {
+			/* @__PURE__ */ _(ie, {
 				dashboardId: f,
-				dashboardName: y || S("bigconsole.dashboards.canvas.dashboardFallbackName", "Dashboard"),
-				isOpen: Ee,
-				onClose: () => E(!1)
+				dashboardName: b || C("bigconsole.dashboards.canvas.dashboardFallbackName", "Dashboard"),
+				isOpen: Oe,
+				onClose: () => D(!1)
 			})
 		]
 	});
 });
 //#endregion
-export { v as default };
+export { y as default };
 
 //# sourceMappingURL=DashboardCanvas.js.map