@burdenoff/microfe-bigconsole 2026.1004.3 → 2026.1004.5

package/dist/bigconsole/pages/DashboardBuilderPage.js

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