@burdenoff/microfe-bigconsole 2026.712.1 → 2026.713.2

package/dist/bigconsole/pages/DashboardBuilderPage.js

@@ -1,174 +1,151 @@
 import { useWidgetStore as e } from "../store/widgetStore.js";
 import { useDashboardStore as t } from "../store/dashboardStore.js";
 import "../store/index.js";
-import { useBigConsole as n, useBigConsoleNavigate as r } from "../context/BigConsoleContext.js";
+import { useBigConsoleNavigate as n } from "../context/BigConsoleContext.js";
 import "../context/index.js";
-import { getWidgetDefinition as i } from "../components/widgets/WidgetRegistry.js";
-import a from "../hooks/useWidgetCatalog.js";
-import o from "../hooks/useWidgetOperations.js";
-import s from "../hooks/useDashboardOperations.js";
-import c from "../hooks/usePageOperations.js";
+import r from "../hooks/useWidgetOperations.js";
+import i from "../hooks/useDashboardOperations.js";
+import a from "../hooks/usePageOperations.js";
 import "../hooks/index.js";
-import l from "../components/widgets/WidgetTypeSelector.js";
-import { findNextAvailablePosition as u } from "../utils/widgetPositioning.js";
-import d from "../components/dashboard/DashboardCanvas.js";
-import f from "../components/dashboard/ExportDashboardDialog.js";
+import { BuilderCanvas as o } from "../components/builder/BuilderCanvas.js";
+import { BuilderTopbar as s } from "../components/builder/BuilderTopbar.js";
+import { DashboardEditorShell as c } from "../components/builder/DashboardEditorShell.js";
+import "../components/builder/index.js";
+import { findNextAvailablePosition as l } from "../utils/widgetPositioning.js";
+import u from "../components/dashboard/DashboardCanvas.js";
+import d from "../components/dashboard/ExportDashboardDialog.js";
 import "../components/dashboard/index.js";
-import { memo as p, useCallback as m, useEffect as h, useState as g } from "react";
-import { useParams as _ } from "react-router-dom";
-import { ArrowLeft as ee } from "lucide-react";
-import { Button as te } from "@burdenoff/fe-libs/ui";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { memo as f, useCallback as p, useEffect as m, useState as h } from "react";
+import { useParams as g } from "react-router-dom";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/bigconsole/pages/DashboardBuilderPage.tsx
-function b() {
+function y() {
 	try {
 		return window.__breadcrumbRegistry;
 	} catch {
 		return;
 	}
 }
-function x(e, t) {
-	let n = b();
+function b(e, t) {
+	let n = y();
 	n?.register && n.register(e, t);
 }
-function ne(e) {
-	let t = b();
+function x(e) {
+	let t = y();
 	t?.unregister && t.unregister(e);
 }
-var S = p(function() {
-	let { dashboardId: p } = _(), b = r(), { workspaceId: S, apiGatewayUrl: C, authToken: w } = n(), { definitions: T } = a({
-		workspaceId: S,
-		apiGatewayUrl: C,
-		authToken: w
-	}), [E, D] = g(!1), [re, O] = g(!1), [ie, k] = g(!1), [A, j] = g(null), { fetchDashboard: M, updateDashboard: N, loading: P, error: F } = s(), { createWidget: I, updateWidget: L, deleteWidget: R, duplicateWidget: z, batchUpdatePositions: B } = o(void 0, p), { createPage: V, updatePage: H, deletePage: U, reorderPages: W } = c(), G = t((e) => e.setCurrentDashboard), K = t((e) => e.currentDashboard), q = t((e) => e.setViewMode), J = e((e) => e.selectWidget), Y = e((e) => e.widgets), X = e((e) => e.clipboardWidgetId), Z = e((e) => e.clipboardAction), Q = e((e) => e.clearClipboard);
-	h(() => (q("edit"), () => q("view")), [q]), h(() => {
-		if (!p) {
-			b("/dashboards");
+var S = f(function() {
+	let { dashboardId: f } = g(), y = n(), [S, C] = h(!1), [w, T] = h(null), [E, D] = h(!1), [O, k] = h(null), { fetchDashboard: A, updateDashboard: j, loading: M, error: N } = i(), { createWidget: P, updateWidget: F, deleteWidget: I, duplicateWidget: L, batchUpdatePositions: R } = r(void 0, f), { createPage: z, updatePage: B, deletePage: V, reorderPages: H } = a(), U = t((e) => e.setCurrentDashboard), W = t((e) => e.currentDashboard), G = t((e) => e.setViewMode), K = e((e) => e.selectWidget), q = e((e) => e.widgets), J = e((e) => e.clipboardWidgetId), Y = e((e) => e.clipboardAction), X = e((e) => e.clearClipboard);
+	m(() => (G("edit"), () => G("view")), [G]), m(() => {
+		if (!f) {
+			y("/dashboards");
 			return;
 		}
-		return M(p).then((e) => {
-			e ? (G({
-				id: e.id,
+		return A(f).then((e) => {
+			e ? (U({
+				...e,
 				title: e.name,
-				description: e.description || "",
+				description: e.description ?? "",
 				pages: e.pages.map((e, t) => ({
+					...e,
 					id: e.id,
-					title: e.name || "",
+					title: e.name ?? "",
 					index: t,
-					layoutConfig: e.layoutConfig || {}
-				})),
-				createdAt: e.createdAt,
-				updatedAt: e.updatedAt
-			}), e.pages.length > 0 && !A && j(e.pages[0].id), e.name && x(p, e.name)) : b("/dashboards");
+					layoutConfig: e.layoutConfig ?? {}
+				}))
+			}), e.pages.length > 0 && !O && k(e.pages[0].id), e.name && b(f, e.name)) : y("/dashboards");
 		}), () => {
-			p && ne(p);
+			f && x(f);
 		};
 	}, [
-		p,
-		b,
-		G,
-		M,
-		A
+		f,
+		y,
+		U,
+		A,
+		O
 	]);
-	let ae = m(async () => {
-		if (!X || !p || !K?.pages?.[0]?.id) return;
-		let e = Y.get(X);
-		if (!e) {
-			Q();
+	let Z = p(async () => {
+		let e = O ?? W?.pages?.[0]?.id;
+		if (!J || !f || !e) return;
+		let t = q.get(J);
+		if (!t) {
+			X();
 			return;
 		}
-		let t = K.pages[0].id, n = Array.from(Y.values()), r = {
-			width: e.positionWidth ?? 4,
-			height: e.positionHeight ?? 4
-		}, { x: i, y: a } = u(n, r, { cols: 12 }), o = {
+		let n = Array.from(q.values()).filter((t) => t.pageId === e), r = {
+			width: t.positionWidth ?? 4,
+			height: t.positionHeight ?? 4
+		}, { x: i, y: a } = l(n, r, { cols: 12 }), o = {
 			x: i,
 			y: a,
 			width: r.width,
 			height: r.height
-		}, s = Z === "copy" ? `${e.title} (Copy)` : e.title, c = null;
-		try {
-			c = await z(X, o, s);
-		} catch {}
-		c ||= await I({
-			pageId: t,
-			dashboardId: p,
-			type: e.type,
+		}, s = Y === "copy" ? `${t.title} (Copy)` : t.title, c = await L(J, o, s).catch(() => null);
+		c ||= await P({
+			pageId: e,
+			dashboardId: f,
+			type: t.type,
 			title: s,
-			description: e.description,
-			dataSinkId: e.dataSinkId ?? void 0,
-			datasetId: e.datasetId ?? void 0,
-			parserId: e.parserId ?? void 0,
-			parserRules: e.parserRules ?? void 0,
-			config: e.config || {},
+			description: t.description,
+			dataSinkId: t.dataSinkId ?? void 0,
+			datasetId: t.datasetId ?? void 0,
+			parserId: t.parserId ?? void 0,
+			parserRules: t.parserRules ?? void 0,
+			config: t.config || {},
 			position: o,
-			refreshInterval: e.refreshInterval ?? void 0,
-			metadata: e.metadata
-		}), c && (J(c.id), Z === "cut" && await R(X)), Q();
+			refreshInterval: t.refreshInterval ?? void 0,
+			metadata: t.metadata
+		}), c && (K(c.id), Y === "cut" && await I(J)), X();
 	}, [
-		X,
-		Z,
-		p,
-		K,
+		J,
 		Y,
-		z,
+		f,
+		O,
+		W,
+		q,
+		L,
+		P,
 		I,
-		R,
-		J,
-		Q
-	]), oe = m(async (e) => {
-		if (!p || !K?.pages?.[0]?.id) return;
-		let t = K.pages[0].id, n = e.replace(/_/g, " ").toLowerCase().replace(/^\w/, (e) => e.toUpperCase()), r = Array.from(Y.values()), a = T.find((t) => t.type === e) ?? i(e), o = {
-			width: a?.defaultSize?.width ?? 4,
-			height: a?.defaultSize?.height ?? 4
-		}, { x: s, y: c } = u(r, o, { cols: 12 }), l = await I({
-			pageId: t,
-			dashboardId: p,
-			type: e,
-			title: n,
-			config: {},
-			position: {
-				x: s,
-				y: c,
-				width: o.width,
-				height: o.height
-			}
-		});
-		l && (J(l.id), D(!1));
-	}, [
-		p,
 		K,
-		I,
-		J,
-		Y,
-		T
-	]), se = m(() => {
-		b("/dashboards");
-	}, [b]), $ = m(async () => {
-		if (p) {
-			O(!0);
+		X
+	]);
+	m(() => {
+		let n = (n) => {
+			if (t.getState().viewMode !== "edit" || n.target?.closest("input, textarea, select, [contenteditable=\"true\"]") || document.querySelector("[data-slot=\"dialog-overlay\"]")) return;
+			let r = e.getState(), i = r.selectedWidgetId;
+			if (n.key === "Escape") {
+				r.selectWidget(null);
+				return;
+			}
+			if ((n.key === "Delete" || n.key === "Backspace") && i) {
+				n.preventDefault(), I(i), r.selectWidget(null);
+				return;
+			}
+			(n.metaKey || n.ctrlKey) && (n.key === "c" && i ? r.copyWidget(i) : n.key === "x" && i ? r.cutWidget(i) : n.key === "v" && (n.preventDefault(), Z()));
+		};
+		return document.addEventListener("keydown", n, !0), () => document.removeEventListener("keydown", n, !0);
+	}, [I, Z]);
+	let Q = p(() => {
+		y("/dashboards");
+	}, [y]), $ = p(async () => {
+		if (f) {
+			C(!0), T(null);
 			try {
 				let t = e.getState(), n = Array.from(t.widgets.values()), r = t.dirtyWidgetIds, i = n.filter((e) => r.has(e.id));
 				if (i.length > 0) {
-					let e = i.map(async (e) => {
-						let t = {
-							id: e.id,
-							title: e.title,
-							config: e.config,
-							refreshInterval: e.refreshInterval ?? void 0,
-							dataSinkId: e.dataSinkId ?? void 0,
-							datasetId: e.datasetId ?? void 0,
-							parserId: e.parserId ?? void 0,
-							parserRules: e.parserRules ?? void 0
-						};
-						try {
-							return await L(t);
-						} catch (e) {
-							throw e;
-						}
-					});
+					let e = i.map((e) => F({
+						id: e.id,
+						title: e.title,
+						config: e.config,
+						refreshInterval: e.refreshInterval ?? void 0,
+						dataSinkId: e.dataSinkId ?? void 0,
+						datasetId: e.datasetId ?? void 0,
+						parserId: e.parserId ?? void 0,
+						parserRules: e.parserRules ?? void 0
+					}));
 					await Promise.all(e), t.clearAllDirty();
 				}
-				n.length > 0 && await B(n.map((e) => ({
+				n.length > 0 && await R(n.map((e) => ({
 					id: e.id,
 					position: e.position || {
 						x: e.positionX ?? 0,
@@ -176,248 +153,176 @@ var S = p(function() {
 						width: e.positionWidth ?? 4,
 						height: e.positionHeight ?? 4
 					}
-				}))), K && await N({
-					id: p,
-					name: K.title,
-					description: K.description
+				}))), W && await j({
+					id: f,
+					name: W.title,
+					description: W.description
 				});
-			} catch {} finally {
-				O(!1);
+			} catch (e) {
+				T(e instanceof Error ? e.message : "Failed to save dashboard");
+			} finally {
+				C(!1);
 			}
 		}
 	}, [
-		p,
-		K,
-		L,
-		B,
-		N
-	]), ce = m(() => {
-		k(!0);
-	}, []), le = m(() => {
-		k(!1);
-	}, []), ue = m((e) => {
-		j(e);
-	}, []), de = m(async () => {
-		if (!K || !p) return;
-		let e = await V({
-			dashboardId: p,
-			name: `Page ${K.pages.length + 1}`
+		f,
+		W,
+		F,
+		R,
+		j
+	]), ee = p(() => {
+		D(!0);
+	}, []), te = p(() => {
+		D(!1);
+	}, []), ne = p((e) => {
+		k(e);
+	}, []), re = p(async () => {
+		if (!W || !f) return;
+		let e = await z({
+			dashboardId: f,
+			name: `Page ${W.pages.length + 1}`
 		});
-		e && (G({
-			...K,
-			pages: [...K.pages, {
+		e && (U({
+			...W,
+			pages: [...W.pages, {
 				id: e.id,
 				title: e.name,
 				index: e.order,
 				layoutConfig: e.layoutConfig || {}
 			}]
-		}), j(e.id));
+		}), k(e.id));
 	}, [
-		K,
-		p,
-		G,
-		V
-	]), fe = m(async (e, t) => {
-		K && await H({
+		W,
+		f,
+		U,
+		z
+	]), ie = p(async (e, t) => {
+		W && await B({
 			id: e,
 			name: t
-		}) && G({
-			...K,
-			pages: K.pages.map((n) => n.id === e ? {
+		}) && U({
+			...W,
+			pages: W.pages.map((n) => n.id === e ? {
 				...n,
 				title: t
 			} : n)
 		});
 	}, [
-		K,
-		G,
-		H
-	]), pe = m(async (e) => {
-		if (!K || !p) return;
-		let t = K.pages.find((t) => t.id === e);
+		W,
+		U,
+		B
+	]), ae = p(async (e) => {
+		if (!W || !f) return;
+		let t = W.pages.find((t) => t.id === e);
 		if (!t) return;
-		let n = await V({
-			dashboardId: p,
+		let n = await z({
+			dashboardId: f,
 			name: `${t.title} (Copy)`
 		});
-		n && (G({
-			...K,
-			pages: [...K.pages, {
+		n && (U({
+			...W,
+			pages: [...W.pages, {
 				id: n.id,
 				title: n.name,
 				index: n.order,
 				layoutConfig: n.layoutConfig || {}
 			}]
-		}), j(n.id));
+		}), k(n.id));
 	}, [
-		K,
-		p,
-		G,
-		V
-	]), me = m(async (e) => {
-		if (!(!K || K.pages.length <= 1) && await U(e)) {
-			let t = K.pages.filter((t) => t.id !== e).map((e, t) => ({
+		W,
+		f,
+		U,
+		z
+	]), oe = p(async (e) => {
+		if (!(!W || W.pages.length <= 1) && await V(e)) {
+			let t = W.pages.filter((t) => t.id !== e).map((e, t) => ({
 				...e,
 				index: t
 			}));
-			G({
-				...K,
+			U({
+				...W,
 				pages: t
-			}), A === e && j(t[0]?.id || null);
+			}), O === e && k(t[0]?.id || null);
 		}
 	}, [
-		K,
-		G,
-		A,
-		U
-	]), he = m(async (e) => {
-		!K || !p || (G({
-			...K,
+		W,
+		U,
+		O,
+		V
+	]), se = p(async (e) => {
+		!W || !f || (U({
+			...W,
 			pages: e.map((e, t) => ({
 				...e,
 				index: t
 			}))
-		}), await W(p, e.map((e) => e.id)));
+		}), await H(f, e.map((e) => e.id)));
 	}, [
-		K,
-		p,
-		G,
-		W
+		W,
+		f,
+		U,
+		H
 	]);
-	return P || !K ? /* @__PURE__ */ v("div", {
-		className: "flex items-center justify-center h-full",
-		children: /* @__PURE__ */ v("div", { className: "animate-spin w-8 h-8 border-4 border-action-primary-bg border-t-transparent rounded-full" })
-	}) : F ? /* @__PURE__ */ v("div", {
+	return N ? /* @__PURE__ */ _("div", {
 		className: "flex flex-col items-center justify-center h-full p-6",
-		children: /* @__PURE__ */ y("div", {
+		children: /* @__PURE__ */ v("div", {
 			className: "bg-status-error-bg border border-status-error-border rounded-lg p-4 max-w-md",
 			children: [
-				/* @__PURE__ */ v("h3", {
+				/* @__PURE__ */ _("h3", {
 					className: "text-sm font-medium text-status-error-text",
 					children: "Failed to load dashboard"
 				}),
-				/* @__PURE__ */ v("p", {
+				/* @__PURE__ */ _("p", {
 					className: "text-sm text-text-secondary mt-1",
-					children: F.message
+					children: N.message
 				}),
-				/* @__PURE__ */ v("button", {
+				/* @__PURE__ */ _("button", {
 					type: "button",
-					onClick: () => b("/dashboards"),
+					onClick: () => y("/dashboards"),
 					className: "mt-3 px-3 py-1.5 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md",
 					children: "Back to Dashboards"
 				})
 			]
 		})
-	}) : /* @__PURE__ */ y("div", {
-		className: "flex flex-col h-full",
-		children: [/* @__PURE__ */ y("div", {
-			className: "flex items-center gap-3 px-3 py-2 border-b border-border-default bg-bg-surface flex-shrink-0",
-			children: [/* @__PURE__ */ y(te, {
-				onClick: se,
-				variant: "ghost",
-				size: "sm",
-				title: "Back to Dashboards",
-				"aria-label": "Back to Dashboards",
-				children: [/* @__PURE__ */ v(ee, { className: "w-4 h-4 mr-2" }), "Back"]
-			}), /* @__PURE__ */ v("h2", {
-				className: "text-sm font-semibold text-text-primary truncate",
-				children: K.title
-			})]
-		}), /* @__PURE__ */ y("div", {
-			className: "flex flex-1 min-h-0 relative",
-			children: [
-				/* @__PURE__ */ v("div", {
-					className: `
-          ${E ? "w-72" : "w-0"}
-          flex-shrink-0
-          bg-bg-surface
-          border-r border-border-default
-          transition-all duration-300
-          overflow-hidden
-        `,
-					children: E && /* @__PURE__ */ y("div", {
-						className: "h-full flex flex-col",
-						children: [/* @__PURE__ */ y("div", {
-							className: "flex items-center justify-between p-3 border-b border-border-default",
-							children: [/* @__PURE__ */ v("h3", {
-								className: "text-sm font-semibold text-text-primary",
-								children: "Widgets"
-							}), /* @__PURE__ */ v("button", {
-								type: "button",
-								onClick: () => D(!1),
-								className: "\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-text-primary\n                  hover:bg-bg-sunken\n                ",
-								children: /* @__PURE__ */ v("svg", {
-									className: "w-4 h-4",
-									fill: "none",
-									stroke: "currentColor",
-									viewBox: "0 0 24 24",
-									children: /* @__PURE__ */ v("path", {
-										strokeLinecap: "round",
-										strokeLinejoin: "round",
-										strokeWidth: 2,
-										d: "M6 18L18 6M6 6l12 12"
-									})
-								})
-							})]
-						}), /* @__PURE__ */ v("div", {
-							className: "flex-1 overflow-auto",
-							children: /* @__PURE__ */ v(l, {
-								onSelect: oe,
-								definitions: T
-							})
-						})]
-					})
-				}),
-				!E && /* @__PURE__ */ v("button", {
-					type: "button",
-					onClick: () => D(!0),
-					className: "\n            absolute left-0 top-1/2 -translate-y-1/2 z-20\n            w-8 h-24\n            bg-bg-surface\n            border border-l-0 border-border-default\n            rounded-r-lg\n            flex items-center justify-center\n            text-text-secondary\n            hover:text-text-primary\n            hover:bg-bg-sunken\n            transition-colors\n          ",
-					title: "Open widget panel",
-					children: /* @__PURE__ */ v("svg", {
-						className: "w-4 h-4",
-						fill: "none",
-						stroke: "currentColor",
-						viewBox: "0 0 24 24",
-						children: /* @__PURE__ */ v("path", {
-							strokeLinecap: "round",
-							strokeLinejoin: "round",
-							strokeWidth: 2,
-							d: "M9 5l7 7-7 7"
-						})
-					})
-				}),
-				/* @__PURE__ */ v("div", {
-					className: "flex-1 relative",
-					children: /* @__PURE__ */ v(d, {
-						dashboardId: K.id,
-						pageId: A || K.pages?.[0]?.id,
-						title: K.title,
-						onPaste: ae,
-						onSave: $,
-						isSaving: re,
-						onExport: ce,
-						pages: K.pages.map((e) => ({
-							id: e.id,
-							name: e.title || `Page ${(e.index ?? 0) + 1}`,
-							order: e.index ?? 0
-						})),
-						activePageId: A || K.pages?.[0]?.id,
-						onPageChange: ue,
-						onPageAdd: de,
-						onPageRename: fe,
-						onPageDuplicate: pe,
-						onPageDelete: me,
-						onPagesReorder: he,
-						showPageTabs: !0
-					})
-				}),
-				/* @__PURE__ */ v(f, {
-					isOpen: ie,
-					dashboardId: K.id,
-					dashboardName: K.title,
-					onClose: le
-				})
-			]
+	}) : M || !W ? /* @__PURE__ */ _("div", {
+		className: "flex items-center justify-center h-full",
+		children: /* @__PURE__ */ _("div", { className: "animate-spin w-8 h-8 border-4 border-action-primary-bg border-t-transparent rounded-full" })
+	}) : /* @__PURE__ */ v(c, {
+		topbar: /* @__PURE__ */ _(s, {
+			title: W.title || "Untitled dashboard",
+			onBack: Q,
+			actions: w ? /* @__PURE__ */ _("span", {
+				className: "text-xs font-medium text-status-error-text",
+				role: "alert",
+				children: w
+			}) : void 0
+		}),
+		children: [/* @__PURE__ */ _(o, { canvas: /* @__PURE__ */ _(u, {
+			dashboardId: W.id,
+			pageId: O || W.pages?.[0]?.id,
+			title: W.title,
+			onPaste: Z,
+			onSave: $,
+			isSaving: S,
+			onExport: ee,
+			pages: W.pages.map((e) => ({
+				id: e.id,
+				name: e.title || `Page ${(e.index ?? 0) + 1}`,
+				order: e.index ?? 0
+			})),
+			activePageId: O || W.pages?.[0]?.id,
+			onPageChange: ne,
+			onPageAdd: re,
+			onPageRename: ie,
+			onPageDuplicate: ae,
+			onPageDelete: oe,
+			onPagesReorder: se,
+			showPageTabs: !0
+		}) }), /* @__PURE__ */ _(d, {
+			isOpen: E,
+			dashboardId: W.id,
+			dashboardName: W.title,
+			onClose: te
 		})]
 	});
 });