@burdenoff/microfe-bigconsole 2026.712.1 → 2026.713.2

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

@@ -11,95 +11,104 @@ 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 ee from "./DashboardToolbar.js";
-import te from "./GlobalFiltersBar/GlobalFiltersBar.js";
+import u from "./DashboardToolbar.js";
+import d from "./GlobalFiltersBar/GlobalFiltersBar.js";
 import "./GlobalFiltersBar/index.js";
-import ne from "./LiveBoardBanner.js";
-import re from "./PageTabsManager/PageTabsManager.js";
+import ee from "./LiveBoardBanner.js";
+import te from "./PageTabsManager/PageTabsManager.js";
 import "./PageTabsManager/index.js";
-import ie from "./ShareDialog/ShareDialog.js";
+import ne from "./ShareDialog/ShareDialog.js";
 import "./ShareDialog/index.js";
-import ae from "./WidgetPalette.js";
-import oe from "../widgets/WidgetConfigDialog.js";
-import se from "../widgets/PropertiesPanel.js";
-import { calculatePositionFromDrop as ce, findNextAvailablePosition as le } from "../../utils/widgetPositioning.js";
-import { memo as u, useCallback as d, useEffect as ue, useMemo as de, useRef as f, useState as p } from "react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import re from "./WidgetPalette.js";
+import { WidgetInspector as ie } from "../builder/WidgetInspector.js";
+import "../builder/index.js";
+import { calculatePositionFromDrop as ae, findNextAvailablePosition as oe } from "../../utils/widgetPositioning.js";
+import { memo as f, useCallback as p, useEffect as se, useMemo as ce, useRef as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/bigconsole/components/dashboard/DashboardCanvas.tsx
-var g = u(function({ dashboardId: u, pageId: g, title: _, onPaste: fe, onSave: pe, isSaving: me = !1, onExport: he, pages: v = [], activePageId: ge, onPageChange: _e, onPagesReorder: y, onPageAdd: b, onPageRename: ve, onPageDuplicate: ye, onPageDelete: be, showFilters: xe = !0, showPageTabs: Se = !0, enableCrossFilter: Ce = !0 }) {
-	let x = f(null), S = f(null), [C, we] = p(1200), [Te, w] = p(!1), [Ee, T] = p(!1), [E, D] = p(!1), [O, k] = p(!1), [De, A] = p(null), [j, M] = p(null), [N, P] = p(null), [F, I] = p(null), L = t((e) => e.viewMode === "edit"), { workspaceId: R, apiGatewayUrl: z, authToken: B } = r(), { installedWidgets: V, loading: Oe } = c({
-		workspaceId: R,
-		apiGatewayUrl: z,
-		authToken: B,
-		enabled: L
-	}), { definitions: H } = a({
-		workspaceId: R,
-		apiGatewayUrl: z,
-		authToken: B,
-		enabled: L
-	}), U = t((e) => e.zoomLevel), W = t((e) => e.setGlobalFilterValues), ke = d((e) => {
-		W(e);
-	}, [W]), { createWidget: G } = o(g, u, { skipFetch: !0 }), K = e((e) => e.widgets), q = de(() => {
-		let e = Array.from(K.values());
-		return g ? e.filter((e) => e.pageId === g) : e;
-	}, [K, g]), Ae = e((e) => e.selectedWidgetId), J = e((e) => e.selectWidget), Y = e((e) => e.addWidget), X = e((e) => e.updateWidgetPosition), je = e((e) => e.configPanelOpen), Me = e((e) => e.closeConfigPanel);
-	ue(() => {
-		let e = () => {
-			x.current && we(x.current.offsetWidth);
+var v = f(function({ dashboardId: f, pageId: v, title: y, onPaste: le, onSave: ue, isSaving: de = !1, onExport: fe, pages: b = [], activePageId: pe, onPageChange: me, onPagesReorder: x, onPageAdd: he, onPageRename: ge, onPageDuplicate: _e, onPageDelete: ve, showFilters: ye = !0, showPageTabs: be = !0, enableCrossFilter: xe = !0 }) {
+	let S = m(null), C = m(null), [w, Se] = h(1200), [Ce, T] = h(!1), [E, D] = h(null), [O, k] = h(!1), [A, j] = h(null), M = t((e) => e.viewMode === "edit"), { workspaceId: N, apiGatewayUrl: P, authToken: F } = r(), { installedWidgets: we, loading: Te } = c({
+		workspaceId: N,
+		apiGatewayUrl: P,
+		authToken: F,
+		enabled: M
+	}), { definitions: Ee } = 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), De = p((e) => {
+		B(e);
+	}, [B]), { createWidget: V } = o(v, f, { skipFetch: !0 }), H = e((e) => e.widgets), U = ce(() => {
+		let e = Array.from(H.values());
+		return v ? e.filter((e) => e.pageId === v) : e;
+	}, [H, v]), Oe = e((e) => e.selectedWidgetId), W = e((e) => e.selectWidget), G = e((e) => e.addWidget), K = e((e) => e.updateWidgetPosition), q = e((e) => e.configPanelOpen), ke = e((e) => e.closeConfigPanel);
+	se(() => {
+		let e = S.current;
+		if (!e) return;
+		let t = () => {
+			Se(e.offsetWidth);
 		};
-		return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+		if (t(), typeof ResizeObserver < "u") {
+			let n = new ResizeObserver(t);
+			return n.observe(e), () => n.disconnect();
+		}
+		return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
 	}, []);
-	let Ne = d((e) => {
+	let Ae = p((e) => {
 		e.forEach((e) => {
-			X(e.i, {
+			K(e.i, {
 				x: e.x,
 				y: e.y,
 				width: e.w,
 				height: e.h
 			});
 		});
-	}, [X]), Pe = d((e) => {
-		J(e);
-	}, [J]), Z = d(async (e) => {
-		let t = F || (e.type ? i(e.type) : null), n = {
-			width: t?.defaultSize?.width ?? 4,
-			height: t?.defaultSize?.height ?? 4
-		}, r;
-		if (j) r = j;
+	}, [K]), J = p((e) => {
+		W(e);
+	}, [W]), Y = p(async (e, t) => {
+		D(null);
+		let n = t?.definition || (e.type ? i(e.type) : null), r = {
+			width: n?.defaultSize?.width ?? 4,
+			height: n?.defaultSize?.height ?? 4
+		}, a;
+		if (t?.position) a = t.position;
 		else {
-			let { x: e, y: t } = le(q, n, { cols: 12 });
-			r = {
+			let { x: e, y: t } = oe(U, r, { cols: 12 });
+			a = {
 				x: e,
 				y: t,
-				width: n.width,
-				height: n.height
+				width: r.width,
+				height: r.height
 			};
 		}
-		let a = e;
-		if (g) {
-			let t = await G({
-				pageId: g,
-				dashboardId: u,
+		let o = e;
+		if (v) {
+			let t = await V({
+				pageId: v,
+				dashboardId: f,
 				type: e.type,
 				title: e.title || "Untitled Widget",
 				description: e.description,
 				renderer: e.renderer,
 				template: e.template,
 				config: e.config || {},
-				position: r,
+				position: a,
 				refreshInterval: e.refreshInterval ?? void 0,
-				dataSinkId: a.dataSinkId,
-				parserId: a.parserId
+				dataSinkId: o.dataSinkId,
+				parserId: o.parserId
 			});
 			if (t) {
-				J(t.id), w(!1), M(null), P(null), I(null);
+				W(t.id);
 				return;
 			}
+			D("Could not create the widget. Check the connection and try again.");
+			return;
 		}
-		let o = {
+		let s = {
 			id: crypto.randomUUID(),
-			dashboardId: u,
-			pageId: g || "local",
+			dashboardId: f,
+			pageId: v || "local",
 			type: e.type,
 			title: e.title || "Untitled Widget",
 			description: e.description,
@@ -107,136 +116,161 @@ var g = u(function({ dashboardId: u, pageId: g, title: _, onPaste: fe, onSave: p
 			template: e.template,
 			refreshInterval: e.refreshInterval,
 			config: e.config || {},
-			position: r,
-			positionX: r.x,
-			positionY: r.y,
-			positionWidth: r.width,
-			positionHeight: r.height,
-			dataSinkId: a.dataSinkId,
-			parserId: a.parserId,
+			position: a,
+			positionX: a.x,
+			positionY: a.y,
+			positionWidth: a.width,
+			positionHeight: a.height,
+			dataSinkId: o.dataSinkId,
+			parserId: o.parserId,
 			translations: [],
 			createdAt: (/* @__PURE__ */ new Date()).toISOString(),
 			updatedAt: (/* @__PURE__ */ new Date()).toISOString()
 		};
-		Y(o), J(o.id), w(!1), M(null), P(null), I(null);
+		G(s), W(s.id);
 	}, [
-		u,
-		g,
+		f,
+		v,
+		V,
 		G,
-		Y,
-		J,
-		q,
-		j,
-		F
-	]), Fe = d((e) => {
-		k(!0), A(e);
-	}, []), Ie = d(() => {
-		k(!1), A(null);
-	}, []), Le = d((e) => {
-		e.preventDefault(), k(!1), A(null);
+		W,
+		U
+	]), je = p((e) => {
+		k(!0), j(e);
+	}, []), Me = p(() => {
+		k(!1), j(null);
+	}, []), Ne = p((e) => {
+		e.preventDefault(), k(!1), j(null);
 		try {
 			let t = e.dataTransfer.getData("application/json");
 			if (!t) return;
-			let n = JSON.parse(t), r = i(n.type), a = null;
-			n.defaultConfig && n.category && (a = {
-				...r,
-				name: n.name || r.name,
-				category: n.category,
-				defaultConfig: n.defaultConfig,
-				defaultSize: n.defaultSize || r.defaultSize
+			let n = JSON.parse(t);
+			if (!n || typeof n != "object" || !("type" in n)) return;
+			let r = n, a = i(r.type), o = null;
+			r.defaultConfig && r.category && (o = {
+				...a,
+				name: r.name || a.name,
+				category: r.category,
+				defaultConfig: r.defaultConfig,
+				defaultSize: r.defaultSize || a.defaultSize
+			});
+			let s = S.current?.getBoundingClientRect();
+			if (!s) return;
+			let c = {
+				width: a.defaultSize.width,
+				height: a.defaultSize.height
+			}, { x: l, y: u } = ae(e.clientX, e.clientY, s, w, c, { cols: 12 }), d = {
+				x: l,
+				y: u,
+				width: c.width,
+				height: c.height
+			};
+			Y({
+				type: r.type,
+				title: r.name || a.name,
+				config: r.defaultConfig || a.defaultConfig
+			}, {
+				position: d,
+				definition: o
 			});
-			let o = x.current?.getBoundingClientRect();
-			if (!o) return;
-			let s = {
-				width: r.defaultSize.width,
-				height: r.defaultSize.height
-			}, { x: c, y: l } = ce(e.clientX, e.clientY, o, C, s, { cols: 12 });
-			M({
-				x: c,
-				y: l,
-				width: s.width,
-				height: s.height
-			}), P(n.type), I(a), w(!0);
 		} catch (e) {
 			console.error("Failed to handle widget drop:", e);
 		}
-	}, [C]), Re = d((e) => {
+	}, [w, Y]), Pe = p((e) => {
 		e.preventDefault(), e.dataTransfer.dropEffect = "copy";
-	}, []), ze = d((e, t) => {
+	}, []), Fe = p((e, t) => {
 		let n = t || i(e);
-		Z({
+		Y({
 			type: e,
 			title: n.name,
 			config: n.defaultConfig
-		}), D(!1);
-	}, [Z]), Be = d(() => {
-		D((e) => !e);
-	}, []), { exportPNG: Q, exportPDF: $, isExporting: Ve } = s({
-		containerRef: S,
-		name: _ || "dashboard"
+		});
+	}, [Y]), X = p(() => {
+		R();
+	}, [R]), Z = p(() => {
+		L && R(), window.requestAnimationFrame(() => {
+			document.querySelector("input[placeholder=\"Search widgets...\"]")?.focus();
+		});
+	}, [L, R]), { exportPNG: Q, exportPDF: $, isExporting: Ie } = s({
+		containerRef: C,
+		name: y || "dashboard"
 	});
-	return /* @__PURE__ */ h("div", {
+	return /* @__PURE__ */ _("div", {
 		className: "flex flex-col h-full min-w-0 overflow-hidden",
 		children: [
-			/* @__PURE__ */ m(ee, {
-				dashboardId: u,
-				title: _,
-				onAddWidget: () => w(!0),
-				onTogglePalette: Be,
-				isPaletteOpen: E,
-				onPaste: fe,
-				onSave: pe,
-				isSaving: me,
-				onExport: he,
-				onExportImage: d(() => {
+			/* @__PURE__ */ g(u, {
+				dashboardId: f,
+				title: y,
+				onAddWidget: Z,
+				onTogglePalette: X,
+				isPaletteOpen: z,
+				onPaste: le,
+				onSave: ue,
+				isSaving: de,
+				onExport: fe,
+				onExportImage: p(() => {
 					Q();
 				}, [Q]),
-				onExportPdf: d(() => {
+				onExportPdf: p(() => {
 					$();
 				}, [$]),
-				isExportingImage: Ve,
+				isExportingImage: Ie,
 				onShare: () => T(!0)
 			}),
-			/* @__PURE__ */ m(ne, {
-				widgets: q,
-				isEditMode: L
+			E && /* @__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",
+				role: "alert",
+				children: [/* @__PURE__ */ g("span", { children: E }), /* @__PURE__ */ g("button", {
+					type: "button",
+					className: "font-medium underline underline-offset-2",
+					onClick: () => D(null),
+					children: "Dismiss"
+				})]
+			}),
+			/* @__PURE__ */ g(ee, {
+				widgets: U,
+				isEditMode: M
 			}),
-			xe && /* @__PURE__ */ m(te, {
-				dashboardId: u,
-				onFilterChange: ke,
+			ye && /* @__PURE__ */ g(d, {
+				dashboardId: f,
+				onFilterChange: De,
 				collapsible: !0
 			}),
-			Se && (L || v.length > 0) && /* @__PURE__ */ m(re, {
-				pages: v,
-				activePageId: ge || v[0]?.id,
-				editable: L,
-				onPageSelect: _e || (() => {}),
-				onPagesReorder: y ? (e) => {
-					y(e.map((e) => v.find((t) => t.id === e)).filter(Boolean));
+			be && (M || b.length > 0) && /* @__PURE__ */ g(te, {
+				pages: b,
+				activePageId: pe || b[0]?.id,
+				editable: M,
+				onPageSelect: me || (() => {}),
+				onPagesReorder: x ? (e) => {
+					x(e.map((e) => b.find((t) => t.id === e)).filter(Boolean));
 				} : void 0,
-				onPageCreate: b,
-				onPageRename: ve,
-				onPageDuplicate: ye,
-				onPageDelete: be
+				onPageCreate: he,
+				onPageRename: ge,
+				onPageDuplicate: _e,
+				onPageDelete: ve
 			}),
-			/* @__PURE__ */ h("div", {
+			/* @__PURE__ */ _("div", {
 				className: "flex flex-1 min-w-0 overflow-hidden",
-				children: [L && /* @__PURE__ */ m(ae, {
-					isOpen: E,
-					onClose: () => D(!1),
-					onWidgetSelect: ze,
-					onDragStart: Fe,
-					onDragEnd: Ie,
-					installedWidgets: V,
-					installedWidgetsLoading: Oe,
-					definitions: H
-				}), /* @__PURE__ */ h("div", {
-					ref: x,
+				style: {
+					marginRight: q ? "var(--bc-inspector-width, 420px)" : void 0,
+					transition: "margin-right 0.2s ease"
+				},
+				children: [M && /* @__PURE__ */ g(re, {
+					isOpen: z,
+					onClose: X,
+					onWidgetSelect: Fe,
+					onDragStart: je,
+					onDragEnd: Me,
+					installedWidgets: we,
+					installedWidgetsLoading: Te,
+					definitions: Ee
+				}), /* @__PURE__ */ _("div", {
+					ref: S,
 					className: "flex-1 min-w-0 overflow-auto bg-bg-sunken",
-					onDrop: Le,
-					onDragOver: Re,
+					onDrop: Ne,
+					onDragOver: Pe,
 					onClick: () => {
-						L && J(null);
+						M && W(null);
 					},
 					style: {
 						position: "relative",
@@ -244,7 +278,7 @@ var g = u(function({ dashboardId: u, pageId: g, title: _, onPaste: fe, onSave: p
 						backgroundColor: O ? "var(--color-bg-hover)" : void 0,
 						transition: "border-color 0.2s, background-color 0.2s"
 					},
-					children: [O && /* @__PURE__ */ m("div", {
+					children: [O && /* @__PURE__ */ g("div", {
 						style: {
 							position: "absolute",
 							top: "50%",
@@ -258,7 +292,7 @@ var g = u(function({ dashboardId: u, pageId: g, title: _, onPaste: fe, onSave: p
 							pointerEvents: "none",
 							zIndex: 100
 						},
-						children: /* @__PURE__ */ h("p", {
+						children: /* @__PURE__ */ _("p", {
 							style: {
 								fontSize: "var(--font-size-body-md)",
 								color: "var(--color-text-primary)",
@@ -266,39 +300,39 @@ var g = u(function({ dashboardId: u, pageId: g, title: _, onPaste: fe, onSave: p
 							},
 							children: [
 								"Drop to add ",
-								/* @__PURE__ */ m("strong", { children: De }),
+								/* @__PURE__ */ g("strong", { children: A }),
 								" widget"
 							]
 						})
-					}), /* @__PURE__ */ m("div", {
-						ref: S,
+					}), /* @__PURE__ */ g("div", {
+						ref: C,
 						className: "min-h-full origin-top-left transition-transform",
 						style: {
-							transform: `scale(${U / 100})`,
-							width: `${100 / (U / 100)}%`
+							transform: `scale(${I / 100})`,
+							width: `${100 / (I / 100)}%`
 						},
-						children: q.length > 0 ? /* @__PURE__ */ m(n, {
-							enabled: Ce,
+						children: U.length > 0 ? /* @__PURE__ */ g(n, {
+							enabled: xe,
 							onCrossFilter: (e) => {},
-							children: /* @__PURE__ */ m(l, {
-								widgets: q,
-								isEditMode: L,
-								width: C,
-								onLayoutChange: Ne,
-								onWidgetSelect: Pe,
-								selectedWidgetId: Ae
+							children: /* @__PURE__ */ g(l, {
+								widgets: U,
+								isEditMode: M,
+								width: w,
+								onLayoutChange: Ae,
+								onWidgetSelect: J,
+								selectedWidgetId: Oe
 							})
-						}) : /* @__PURE__ */ h("div", {
+						}) : /* @__PURE__ */ _("div", {
 							className: "flex flex-col items-center justify-center min-h-[400px] p-8",
 							children: [
-								/* @__PURE__ */ m("div", {
+								/* @__PURE__ */ g("div", {
 									className: "w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-bg-surface",
-									children: /* @__PURE__ */ m("svg", {
+									children: /* @__PURE__ */ g("svg", {
 										className: "w-8 h-8 text-text-secondary",
 										fill: "none",
 										stroke: "currentColor",
 										viewBox: "0 0 24 24",
-										children: /* @__PURE__ */ m("path", {
+										children: /* @__PURE__ */ g("path", {
 											strokeLinecap: "round",
 											strokeLinejoin: "round",
 											strokeWidth: 2,
@@ -306,24 +340,24 @@ var g = u(function({ dashboardId: u, pageId: g, title: _, onPaste: fe, onSave: p
 										})
 									})
 								}),
-								/* @__PURE__ */ m("h3", {
+								/* @__PURE__ */ g("h3", {
 									className: "text-lg font-medium text-text-primary mb-2",
 									children: "No widgets yet"
 								}),
-								/* @__PURE__ */ m("p", {
+								/* @__PURE__ */ g("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."
 								}),
-								L && /* @__PURE__ */ h("button", {
+								M && /* @__PURE__ */ _("button", {
 									type: "button",
-									onClick: () => w(!0),
+									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__ */ m("svg", {
+									children: [/* @__PURE__ */ g("svg", {
 										className: "w-4 h-4",
 										fill: "none",
 										stroke: "currentColor",
 										viewBox: "0 0 24 24",
-										children: /* @__PURE__ */ m("path", {
+										children: /* @__PURE__ */ g("path", {
 											strokeLinecap: "round",
 											strokeLinejoin: "round",
 											strokeWidth: 2,
@@ -336,32 +370,20 @@ var g = u(function({ dashboardId: u, pageId: g, title: _, onPaste: fe, onSave: p
 					})]
 				})]
 			}),
-			/* @__PURE__ */ m(se, {
-				isOpen: je,
-				onClose: Me
-			}),
-			/* @__PURE__ */ m(oe, {
-				isOpen: Te,
-				onClose: () => {
-					w(!1), M(null), P(null), I(null);
-				},
-				onSave: Z,
-				preselectedType: N || void 0,
-				preselectedDefinition: F || void 0,
-				dashboardId: u,
-				installedWidgets: V,
-				definitions: H
+			/* @__PURE__ */ g(ie, {
+				isOpen: q,
+				onClose: ke
 			}),
-			/* @__PURE__ */ m(ie, {
-				dashboardId: u,
-				dashboardName: _ || "Dashboard",
-				isOpen: Ee,
+			/* @__PURE__ */ g(ne, {
+				dashboardId: f,
+				dashboardName: y || "Dashboard",
+				isOpen: Ce,
 				onClose: () => T(!1)
 			})
 		]
 	});
 });
 //#endregion
-export { g as default };
+export { v as default };
 
 //# sourceMappingURL=DashboardCanvas.js.map