@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/pages/DashboardBuilderPage.js

@@ -1,54 +1,58 @@
 import { useWidgetStore as e } from "../store/widgetStore.js";
 import { useDashboardStore as t } from "../store/dashboardStore.js";
 import "../store/index.js";
-import { useBigConsoleNavigate as n } from "../context/BigConsoleContext.js";
+import { SECTION_FOCUS_RING as n } from "../components/common/sectionStyles.js";
+import { Section as r } from "../components/common/Section.js";
+import "../components/common/index.js";
+import { useBigConsoleNavigate as i } from "../context/BigConsoleContext.js";
 import "../context/index.js";
-import r from "../hooks/useWidgetOperations.js";
-import i from "../hooks/useDashboardOperations.js";
-import a from "../hooks/usePageOperations.js";
+import a from "../hooks/useWidgetOperations.js";
+import o from "../hooks/useDashboardOperations.js";
+import s from "../hooks/usePageOperations.js";
 import "../hooks/index.js";
-import { BIGCONSOLE_PERMISSIONS as o } from "../../constants/permissions.js";
-import { BuilderCanvas as s } from "../components/builder/BuilderCanvas.js";
-import { BuilderTopbar as c } from "../components/builder/BuilderTopbar.js";
-import { DashboardEditorShell as ee } from "../components/builder/DashboardEditorShell.js";
+import { BIGCONSOLE_PERMISSIONS as c } from "../../constants/permissions.js";
+import { BuilderCanvas as ee } from "../components/builder/BuilderCanvas.js";
+import { BuilderTopbar as te } from "../components/builder/BuilderTopbar.js";
+import { DashboardEditorShell as l } from "../components/builder/DashboardEditorShell.js";
 import "../components/builder/index.js";
-import { findNextAvailablePosition as te } from "../utils/widgetPositioning.js";
-import ne from "../components/dashboard/DashboardCanvas.js";
-import re from "../components/dashboard/ExportDashboardDialog.js";
+import { findNextAvailablePosition as ne } from "../utils/widgetPositioning.js";
+import re from "../components/dashboard/DashboardCanvas.js";
+import ie from "../components/dashboard/ExportDashboardDialog.js";
 import "../components/dashboard/index.js";
-import ie from "../customWidget/CustomWidgetBuilderSheet.js";
+import ae from "../customWidget/CustomWidgetBuilderSheet.js";
 import "../customWidget/index.js";
-import { memo as l, useCallback as u, useEffect as d, useState as f } from "react";
-import { useParams as p } from "react-router";
-import { AccessDenied as ae } from "@burdenoff/fe-libs/shared/components";
-import { usePermissions as m } from "@burdenoff/fe-libs/shared/providers/shell";
-import { useI18n as h } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { memo as u, useCallback as d, useEffect as f, useState as p } from "react";
+import { useParams as oe } from "react-router";
+import { AccessDenied as se } from "@burdenoff/fe-libs/shared/components";
+import { usePermissions as ce } from "@burdenoff/fe-libs/shared/providers/shell";
+import { useI18n as le } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Button as ue } from "@burdenoff/fe-libs/ui";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/bigconsole/pages/DashboardBuilderPage.tsx
-function v() {
+function g() {
 	try {
 		return window.__breadcrumbRegistry;
 	} catch {
 		return;
 	}
 }
-function oe(e, t) {
-	let n = v();
+function de(e, t) {
+	let n = g();
 	n?.register && n.register(e, t);
 }
-function se(e) {
-	let t = v();
+function fe(e) {
+	let t = g();
 	t?.unregister && t.unregister(e);
 }
-var y = l(function() {
-	let { dashboardId: l } = p(), v = n(), { t: y } = h(), { hasPermission: b, isLoading: ce } = m(), x = b(o.DASHBOARD_READ), S = b(o.DASHBOARD_UPDATE), C = b(o.DASHBOARD_EXPORT), le = b(o.WIDGET_CREATE), [w, T] = f(!1), [E, D] = f(null), [ue, O] = f(!1), [k, A] = f(!1), [j, M] = f(null), { fetchDashboard: N, updateDashboard: P, loading: de, error: F } = i(), { createWidget: I, updateWidget: L, deleteWidget: R, duplicateWidget: z, batchUpdatePositions: B } = r(void 0, l), { createPage: V, updatePage: H, deletePage: U, reorderPages: W } = a(), 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);
-	d(() => (q("edit"), () => q("view")), [q]), d(() => {
-		if (!l) {
-			v("/dashboards");
+var _ = u(function() {
+	let { dashboardId: u } = oe(), g = i(), { t: _ } = le(), { hasPermission: v, isLoading: y } = ce(), b = v(c.DASHBOARD_READ), x = v(c.DASHBOARD_UPDATE), pe = v(c.DASHBOARD_EXPORT), me = v(c.WIDGET_CREATE), [S, C] = p(!1), [w, T] = p(null), [E, D] = p(!1), [he, O] = p(!1), [k, A] = p(null), { fetchDashboard: j, updateDashboard: M, loading: N, error: P } = o(), { createWidget: F, updateWidget: I, deleteWidget: L, duplicateWidget: R, batchUpdatePositions: z } = a(void 0, u), { createPage: B, updatePage: V, deletePage: H, reorderPages: U } = s(), W = t((e) => e.setCurrentDashboard), G = t((e) => e.currentDashboard), K = t((e) => e.setViewMode), q = e((e) => e.selectWidget), J = e((e) => e.widgets), Y = e((e) => e.clipboardWidgetId), X = e((e) => e.clipboardAction), Z = e((e) => e.clearClipboard);
+	f(() => (K("edit"), () => K("view")), [K]), f(() => {
+		if (!u) {
+			g("/dashboards");
 			return;
 		}
-		return N(l).then((e) => {
-			e ? (G({
+		return j(u).then((e) => {
+			e ? (W({
 				...e,
 				title: e.name,
 				description: e.description ?? "",
@@ -59,37 +63,37 @@ var y = l(function() {
 					index: t,
 					layoutConfig: e.layoutConfig ?? {}
 				}))
-			}), e.pages.length > 0 && !j && M(e.pages[0].id), e.name && oe(l, e.name)) : v("/dashboards");
+			}), e.pages.length > 0 && !k && A(e.pages[0].id), e.name && de(u, e.name)) : g("/dashboards");
 		}), () => {
-			l && se(l);
+			u && fe(u);
 		};
 	}, [
-		l,
-		v,
-		G,
-		N,
-		j
+		u,
+		g,
+		W,
+		j,
+		k
 	]);
-	let $ = u(async () => {
-		let e = j ?? K?.pages?.[0]?.id;
-		if (!X || !l || !e) return;
-		let t = Y.get(X);
+	let Q = d(async () => {
+		let e = k ?? G?.pages?.[0]?.id;
+		if (!Y || !u || !e) return;
+		let t = J.get(Y);
 		if (!t) {
-			Q();
+			Z();
 			return;
 		}
-		let n = Array.from(Y.values()).filter((t) => t.pageId === e), r = {
+		let n = Array.from(J.values()).filter((t) => t.pageId === e), r = {
 			width: t.positionWidth ?? 4,
 			height: t.positionHeight ?? 4
-		}, { x: i, y: a } = te(n, r, { cols: 12 }), o = {
+		}, { x: i, y: a } = ne(n, r, { cols: 12 }), o = {
 			x: i,
 			y: a,
 			width: r.width,
 			height: r.height
-		}, s = Z === "copy" ? y("bigconsole.dashboards.builder.actions.copySuffix", "{{title}} (Copy)", { title: t.title }) : t.title, c = await z(X, o, s).catch(() => null);
-		c ||= await I({
+		}, s = X === "copy" ? _("bigconsole.dashboards.builder.actions.copySuffix", "{{title}} (Copy)", { title: t.title }) : t.title, c = await R(Y, o, s).catch(() => null);
+		c ||= await F({
 			pageId: e,
-			dashboardId: l,
+			dashboardId: u,
 			type: t.type,
 			title: s,
 			description: t.description,
@@ -101,22 +105,22 @@ var y = l(function() {
 			position: o,
 			refreshInterval: t.refreshInterval ?? void 0,
 			metadata: t.metadata
-		}), c && (J(c.id), Z === "cut" && await R(X)), Q();
+		}), c && (q(c.id), X === "cut" && await L(Y)), Z();
 	}, [
-		X,
-		Z,
-		l,
-		j,
-		K,
 		Y,
-		z,
-		I,
-		R,
+		X,
+		u,
+		k,
+		G,
 		J,
-		Q,
-		y
+		R,
+		F,
+		L,
+		q,
+		Z,
+		_
 	]);
-	d(() => {
+	f(() => {
 		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;
@@ -125,22 +129,22 @@ var y = l(function() {
 				return;
 			}
 			if ((n.key === "Delete" || n.key === "Backspace") && i) {
-				n.preventDefault(), R(i), r.selectWidget(null);
+				n.preventDefault(), L(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(), $()));
+			(n.metaKey || n.ctrlKey) && (n.key === "c" && i ? r.copyWidget(i) : n.key === "x" && i ? r.cutWidget(i) : n.key === "v" && (n.preventDefault(), Q()));
 		};
 		return document.addEventListener("keydown", n, !0), () => document.removeEventListener("keydown", n, !0);
-	}, [R, $]);
-	let fe = u(() => {
-		v("/dashboards");
-	}, [v]), pe = u(async () => {
-		if (l) {
-			T(!0), D(null);
+	}, [L, Q]);
+	let ge = d(() => {
+		g("/dashboards");
+	}, [g]), _e = d(async () => {
+		if (u) {
+			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((e) => L({
+					let e = i.map((e) => I({
 						id: e.id,
 						title: e.title,
 						config: e.config,
@@ -152,7 +156,7 @@ var y = l(function() {
 					}));
 					await Promise.all(e), t.clearAllDirty();
 				}
-				n.length > 0 && await B(n.map((e) => ({
+				n.length > 0 && await z(n.map((e) => ({
 					id: e.id,
 					position: e.position || {
 						x: e.positionX ?? 0,
@@ -160,207 +164,209 @@ var y = l(function() {
 						width: e.positionWidth ?? 4,
 						height: e.positionHeight ?? 4
 					}
-				}))), K && await P({
-					id: l,
-					name: K.title,
-					description: K.description
+				}))), G && await M({
+					id: u,
+					name: G.title,
+					description: G.description
 				});
 			} catch (e) {
-				D(e instanceof Error ? e.message : y("bigconsole.dashboards.builder.errors.saveFailed", "Failed to save dashboard"));
+				T(e instanceof Error ? e.message : _("bigconsole.dashboards.builder.errors.saveFailed", "Failed to save dashboard"));
 			} finally {
-				T(!1);
+				C(!1);
 			}
 		}
 	}, [
-		l,
-		K,
-		L,
-		B,
-		P,
-		y
-	]), me = u(() => {
-		O(!0);
-	}, []), he = u(() => {
-		O(!1);
-	}, []), ge = u((e) => {
-		M(e);
-	}, []), _e = u(async () => {
-		if (!K || !l) return;
-		let e = await V({
-			dashboardId: l,
-			name: y("bigconsole.dashboards.builder.actions.newPageName", "Page {{count}}", { count: K.pages.length + 1 })
+		u,
+		G,
+		I,
+		z,
+		M,
+		_
+	]), ve = d(() => {
+		D(!0);
+	}, []), $ = d(() => {
+		D(!1);
+	}, []), ye = d((e) => {
+		A(e);
+	}, []), be = d(async () => {
+		if (!G || !u) return;
+		let e = await B({
+			dashboardId: u,
+			name: _("bigconsole.dashboards.builder.actions.newPageName", "Page {{count}}", { count: G.pages.length + 1 })
 		});
-		e && (G({
-			...K,
-			pages: [...K.pages, {
+		e && (W({
+			...G,
+			pages: [...G.pages, {
 				id: e.id,
 				title: e.name,
 				index: e.order,
 				layoutConfig: e.layoutConfig || {}
 			}]
-		}), M(e.id));
+		}), A(e.id));
 	}, [
-		K,
-		l,
 		G,
-		V,
-		y
-	]), ve = u(async (e, t) => {
-		K && await H({
+		u,
+		W,
+		B,
+		_
+	]), xe = d(async (e, t) => {
+		G && await V({
 			id: e,
 			name: t
-		}) && G({
-			...K,
-			pages: K.pages.map((n) => n.id === e ? {
+		}) && W({
+			...G,
+			pages: G.pages.map((n) => n.id === e ? {
 				...n,
 				title: t
 			} : n)
 		});
 	}, [
-		K,
 		G,
-		H
-	]), ye = u(async (e) => {
-		if (!K || !l) return;
-		let t = K.pages.find((t) => t.id === e);
+		W,
+		V
+	]), Se = d(async (e) => {
+		if (!G || !u) return;
+		let t = G.pages.find((t) => t.id === e);
 		if (!t) return;
-		let n = await V({
-			dashboardId: l,
-			name: y("bigconsole.dashboards.builder.actions.copySuffix", "{{title}} (Copy)", { title: t.title ?? "" })
+		let n = await B({
+			dashboardId: u,
+			name: _("bigconsole.dashboards.builder.actions.copySuffix", "{{title}} (Copy)", { title: t.title ?? "" })
 		});
-		n && (G({
-			...K,
-			pages: [...K.pages, {
+		n && (W({
+			...G,
+			pages: [...G.pages, {
 				id: n.id,
 				title: n.name,
 				index: n.order,
 				layoutConfig: n.layoutConfig || {}
 			}]
-		}), M(n.id));
+		}), A(n.id));
 	}, [
-		K,
-		l,
 		G,
-		V,
-		y
-	]), be = u(async (e) => {
-		if (!(!K || K.pages.length <= 1) && await U(e)) {
-			let t = K.pages.filter((t) => t.id !== e).map((e, t) => ({
+		u,
+		W,
+		B,
+		_
+	]), Ce = d(async (e) => {
+		if (!(!G || G.pages.length <= 1) && await H(e)) {
+			let t = G.pages.filter((t) => t.id !== e).map((e, t) => ({
 				...e,
 				index: t
 			}));
-			G({
-				...K,
+			W({
+				...G,
 				pages: t
-			}), j === e && M(t[0]?.id || null);
+			}), k === e && A(t[0]?.id || null);
 		}
 	}, [
-		K,
 		G,
-		j,
-		U
-	]), xe = u(async (e) => {
-		!K || !l || (G({
-			...K,
+		W,
+		k,
+		H
+	]), we = d(async (e) => {
+		!G || !u || (W({
+			...G,
 			pages: e.map((e, t) => ({
 				...e,
 				index: t
 			}))
-		}), await W(l, e.map((e) => e.id)));
+		}), await U(u, e.map((e) => e.id)));
 	}, [
-		K,
-		l,
 		G,
-		W
+		u,
+		W,
+		U
 	]);
-	return ce ? /* @__PURE__ */ g("div", {
+	return y ? /* @__PURE__ */ m("div", {
 		className: "flex items-center justify-center h-full",
-		children: /* @__PURE__ */ g("div", { className: "animate-spin w-8 h-8 border-4 border-action-primary-bg border-t-transparent rounded-full" })
-	}) : x ? F ? /* @__PURE__ */ g("div", {
-		className: "flex flex-col items-center justify-center h-full p-6",
-		children: /* @__PURE__ */ _("div", {
-			className: "bg-status-error-bg border border-status-error-border rounded-lg p-4 max-w-md",
-			children: [
-				/* @__PURE__ */ g("h3", {
-					className: "text-sm font-medium text-status-error-text",
-					children: y("bigconsole.dashboards.builder.errors.loadFailed", "Failed to load dashboard")
-				}),
-				/* @__PURE__ */ g("p", {
-					className: "text-sm text-text-secondary mt-1",
-					children: F.message
-				}),
-				/* @__PURE__ */ g("button", {
-					type: "button",
-					onClick: () => v("/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: y("bigconsole.dashboards.builder.actions.backToDashboards", "Back to Dashboards")
-				})
-			]
+		children: /* @__PURE__ */ m("div", { className: "animate-spin w-8 h-8 border-4 border-action-primary-bg border-t-transparent rounded-full" })
+	}) : b ? P ? /* @__PURE__ */ m("div", {
+		className: "flex h-full flex-col items-center justify-center p-6",
+		children: /* @__PURE__ */ m(r, {
+			headingLevel: 2,
+			tone: "danger",
+			title: _("bigconsole.dashboards.builder.errors.loadFailed", "Failed to load dashboard"),
+			description: /* @__PURE__ */ m("span", {
+				className: "break-words",
+				children: P.message
+			}),
+			className: "w-full max-w-md",
+			"data-testid": "dashboard-builder-error",
+			actions: /* @__PURE__ */ m(ue, {
+				size: "sm",
+				onClick: () => g("/dashboards"),
+				children: _("bigconsole.dashboards.builder.actions.backToDashboards", "Back to Dashboards")
+			})
 		})
-	}) : de || !K ? /* @__PURE__ */ g("div", {
+	}) : N || !G ? /* @__PURE__ */ h("div", {
 		className: "flex items-center justify-center h-full",
-		children: /* @__PURE__ */ g("div", { className: "animate-spin w-8 h-8 border-4 border-action-primary-bg border-t-transparent rounded-full" })
-	}) : /* @__PURE__ */ _(ee, {
-		topbar: /* @__PURE__ */ g(c, {
-			title: K.title || y("bigconsole.dashboards.builder.header.untitledDashboard", "Untitled dashboard"),
-			onBack: fe,
-			actions: /* @__PURE__ */ _("div", {
+		role: "status",
+		"aria-live": "polite",
+		children: [/* @__PURE__ */ m("div", { className: "animate-spin w-8 h-8 border-4 border-action-primary-bg border-t-transparent rounded-full" }), /* @__PURE__ */ m("span", {
+			className: "sr-only",
+			children: "Loading dashboard…"
+		})]
+	}) : /* @__PURE__ */ h(l, {
+		topbar: /* @__PURE__ */ m(te, {
+			title: G.title || _("bigconsole.dashboards.builder.header.untitledDashboard", "Untitled dashboard"),
+			onBack: ge,
+			actions: /* @__PURE__ */ h("div", {
 				className: "flex items-center gap-2",
-				children: [E ? /* @__PURE__ */ g("span", {
+				children: [w ? /* @__PURE__ */ m("span", {
 					className: "text-xs font-medium text-status-error-text",
 					role: "alert",
-					children: E
-				}) : null, le ? /* @__PURE__ */ g("button", {
+					children: w
+				}) : null, me ? /* @__PURE__ */ m("button", {
 					type: "button",
 					"data-testid": "open-custom-widget-builder",
-					onClick: () => A(!0),
-					className: "rounded-md border border-border-default px-2 py-1 text-xs font-medium text-text-primary hover:bg-bg-sunken focus:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-bg",
-					children: y("bigconsole.dashboards.builder.toolbar.aiWidget", "AI widget")
+					onClick: () => O(!0),
+					className: `inline-flex min-h-control-md items-center rounded-button border border-[var(--color-border-subtle)] px-2 py-1 text-xs font-medium text-text-primary motion-safe:transition-colors hover:bg-bg-sunken ${n}`,
+					children: _("bigconsole.dashboards.builder.toolbar.aiWidget", "AI widget")
 				}) : null]
 			})
 		}),
 		children: [
-			/* @__PURE__ */ g(s, { canvas: /* @__PURE__ */ g(ne, {
-				dashboardId: K.id,
-				pageId: j || K.pages?.[0]?.id,
-				title: K.title,
-				onPaste: $,
-				onSave: S ? pe : void 0,
-				isSaving: w,
-				onExport: C ? me : void 0,
-				pages: K.pages.map((e) => ({
+			/* @__PURE__ */ m(ee, { canvas: /* @__PURE__ */ m(re, {
+				dashboardId: G.id,
+				pageId: k || G.pages?.[0]?.id,
+				title: G.title,
+				onPaste: Q,
+				onSave: x ? _e : void 0,
+				isSaving: S,
+				onExport: pe ? ve : void 0,
+				pages: G.pages.map((e) => ({
 					id: e.id,
-					name: e.title || y("bigconsole.dashboards.builder.actions.newPageName", "Page {{count}}", { count: (e.index ?? 0) + 1 }),
+					name: e.title || _("bigconsole.dashboards.builder.actions.newPageName", "Page {{count}}", { count: (e.index ?? 0) + 1 }),
 					order: e.index ?? 0
 				})),
-				activePageId: j || K.pages?.[0]?.id,
-				onPageChange: ge,
-				onPageAdd: _e,
-				onPageRename: ve,
-				onPageDuplicate: ye,
-				onPageDelete: be,
-				onPagesReorder: xe,
+				activePageId: k || G.pages?.[0]?.id,
+				onPageChange: ye,
+				onPageAdd: be,
+				onPageRename: xe,
+				onPageDuplicate: Se,
+				onPageDelete: Ce,
+				onPagesReorder: we,
 				showPageTabs: !0
 			}) }),
-			/* @__PURE__ */ g(re, {
-				isOpen: ue,
-				dashboardId: K.id,
-				dashboardName: K.title,
-				onClose: he
+			/* @__PURE__ */ m(ie, {
+				isOpen: E,
+				dashboardId: G.id,
+				dashboardName: G.title,
+				onClose: $
 			}),
-			/* @__PURE__ */ g(ie, {
-				isOpen: k,
-				onClose: () => A(!1),
-				dashboardId: K.id,
-				pageId: j || K.pages?.[0]?.id || ""
+			/* @__PURE__ */ m(ae, {
+				isOpen: he,
+				onClose: () => O(!1),
+				dashboardId: G.id,
+				pageId: k || G.pages?.[0]?.id || ""
 			})
 		]
-	}) : /* @__PURE__ */ g(ae, {
-		title: y("bigconsole.dashboards.builder.errors.accessDeniedTitle", "Access Denied"),
-		description: y("bigconsole.dashboards.builder.errors.accessDeniedDescription", "You don't have permission to view this dashboard.")
+	}) : /* @__PURE__ */ m(se, {
+		title: _("bigconsole.dashboards.builder.errors.accessDeniedTitle", "Access Denied"),
+		description: _("bigconsole.dashboards.builder.errors.accessDeniedDescription", "You don't have permission to view this dashboard.")
 	});
 });
 //#endregion
-export { y as DashboardBuilderPage, y as default };
+export { _ as DashboardBuilderPage, _ as default };
 
 //# sourceMappingURL=DashboardBuilderPage.js.map