@burdenoff/microfe-bigconsole 2026.825.1 → 2026.827.1

package/dist/bigconsole/components/builder/inspector/LayoutSection.js

@@ -0,0 +1,71 @@
+import { Section as e } from "../../common/Section.js";
+import "../../common/index.js";
+import { memo as t, useCallback as n } from "react";
+import { Input as r } from "@burdenoff/fe-libs/ui";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/bigconsole/components/builder/inspector/LayoutSection.tsx
+var o = {
+	x: "Column (X)",
+	y: "Row (Y)",
+	width: "Width",
+	height: "Height"
+}, s = t(function({ position: t, columns: s, onChange: c }) {
+	let l = n((e, n) => {
+		let r = Number.parseInt(n, 10);
+		if (Number.isNaN(r)) return;
+		let i = {
+			...t,
+			[e]: r
+		};
+		i.width = Math.min(Math.max(i.width, 1), s), i.x = Math.min(Math.max(i.x, 0), Math.max(s - i.width, 0)), i.height = Math.max(i.height, 1), i.y = Math.max(i.y, 0), !(i.x === t.x && i.y === t.y && i.width === t.width && i.height === t.height) && c(i);
+	}, [
+		s,
+		c,
+		t
+	]), u = [
+		{
+			field: "x",
+			min: 0,
+			max: Math.max(s - t.width, 0)
+		},
+		{
+			field: "y",
+			min: 0
+		},
+		{
+			field: "width",
+			min: 1,
+			max: s
+		},
+		{
+			field: "height",
+			min: 1
+		}
+	];
+	return /* @__PURE__ */ i(e, {
+		title: "Position & size",
+		description: `Grid placement on the ${s}-column board. Saved with the dashboard.`,
+		"data-testid": "widget-inspector-layout",
+		children: /* @__PURE__ */ i("div", {
+			className: "grid grid-cols-2 gap-form-gap",
+			children: u.map(({ field: e, min: n, max: s }) => /* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("label", {
+				htmlFor: `widget-inspector-position-${e}`,
+				className: "mb-1 block text-sm font-medium text-text-primary",
+				children: o[e]
+			}), /* @__PURE__ */ i(r, {
+				id: `widget-inspector-position-${e}`,
+				type: "number",
+				inputMode: "numeric",
+				value: t[e],
+				min: n,
+				max: s,
+				onChange: (t) => l(e, t.target.value),
+				className: "h-control-md text-sm"
+			})] }, e))
+		})
+	});
+});
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=LayoutSection.js.map

package/dist/bigconsole/components/builder/inspector/LayoutSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutSection.js","names":[],"sources":["../../../../../src/bigconsole/components/builder/inspector/LayoutSection.tsx"],"sourcesContent":["import { type FC, memo, useCallback } from 'react';\nimport { Input } from '@burdenoff/fe-libs/ui';\nimport { Section } from '../../common';\nimport type { WidgetPosition } from '../../../utils/widgetPositioning';\n\nexport interface LayoutSectionProps {\n  /** Current grid placement of the selected widget. */\n  position: WidgetPosition;\n  /** Columns in the board's grid — the ceiling for `x + width`. */\n  columns: number;\n  /** Commit a new placement. The caller persists it with the dashboard. */\n  onChange: (position: WidgetPosition) => void;\n}\n\n/** Which of the four numbers an input edits. */\ntype PositionField = keyof WidgetPosition;\n\nconst FIELD_LABELS: Record<PositionField, string> = {\n  x: 'Column (X)',\n  y: 'Row (Y)',\n  width: 'Width',\n  height: 'Height',\n};\n\n/**\n * Numeric grid placement for the selected widget.\n *\n * Drag-and-resize on the canvas is the only way a widget could be placed until\n * now, which makes precise alignment guesswork and leaves keyboard-only users\n * with no way to move a widget at all. The four numbers here are the SAME ones\n * the canvas writes (`Widget.position` / `positionX|Y|Width|Height`), committed\n * through the same store action, so the board and this panel can never disagree\n * and the dashboard's Save persists them exactly as a drag would.\n *\n * The mockup also shows Min W / Min H fields. Those are deliberately absent:\n * `WidgetPosition` on the service carries only x/y/width/height, so a minimum\n * would have nowhere to be stored and would silently reset on reload.\n */\nexport const LayoutSection: FC<LayoutSectionProps> = memo(function LayoutSection({ position, columns, onChange }) {\n  const labelClassName = 'mb-1 block text-sm font-medium text-text-primary';\n\n  const commit = useCallback(\n    (field: PositionField, raw: string) => {\n      const parsed = Number.parseInt(raw, 10);\n      if (Number.isNaN(parsed)) return;\n\n      const next: WidgetPosition = { ...position, [field]: parsed };\n\n      // Clamp to a placement the grid can actually hold. Letting a widget be\n      // 0 columns wide, or start past the last column, produces a widget that\n      // renders nowhere — an input that appears to work and then loses content.\n      next.width = Math.min(Math.max(next.width, 1), columns);\n      next.x = Math.min(Math.max(next.x, 0), Math.max(columns - next.width, 0));\n      next.height = Math.max(next.height, 1);\n      next.y = Math.max(next.y, 0);\n\n      if (\n        next.x === position.x &&\n        next.y === position.y &&\n        next.width === position.width &&\n        next.height === position.height\n      ) {\n        return;\n      }\n\n      onChange(next);\n    },\n    [columns, onChange, position]\n  );\n\n  const fields: Array<{ field: PositionField; min: number; max?: number }> = [\n    { field: 'x', min: 0, max: Math.max(columns - position.width, 0) },\n    { field: 'y', min: 0 },\n    { field: 'width', min: 1, max: columns },\n    { field: 'height', min: 1 },\n  ];\n\n  return (\n    <Section\n      title=\"Position & size\"\n      description={`Grid placement on the ${columns}-column board. Saved with the dashboard.`}\n      data-testid=\"widget-inspector-layout\"\n    >\n      <div className=\"grid grid-cols-2 gap-form-gap\">\n        {fields.map(({ field, min, max }) => (\n          <div key={field}>\n            <label htmlFor={`widget-inspector-position-${field}`} className={labelClassName}>\n              {FIELD_LABELS[field]}\n            </label>\n            <Input\n              id={`widget-inspector-position-${field}`}\n              type=\"number\"\n              inputMode=\"numeric\"\n              value={position[field]}\n              min={min}\n              max={max}\n              onChange={(event) => commit(field, event.target.value)}\n              className=\"h-control-md text-sm\"\n            />\n          </div>\n        ))}\n      </div>\n    </Section>\n  );\n});\n\nexport default LayoutSection;\n"],"mappings":";;;;;;AAiBA,IAAM,IAA8C;CAClD,GAAG;CACH,GAAG;CACH,OAAO;CACP,QAAQ;CACT,EAgBY,IAAwC,EAAK,SAAuB,EAAE,aAAU,YAAS,eAAY;CAChH,IAEM,IAAS,GACZ,GAAsB,MAAgB;EACrC,IAAM,IAAS,OAAO,SAAS,GAAK,GAAG;AACvC,MAAI,OAAO,MAAM,EAAO,CAAE;EAE1B,IAAM,IAAuB;GAAE,GAAG;IAAW,IAAQ;GAAQ;AAK7D,IAAK,QAAQ,KAAK,IAAI,KAAK,IAAI,EAAK,OAAO,EAAE,EAAE,EAAQ,EACvD,EAAK,IAAI,KAAK,IAAI,KAAK,IAAI,EAAK,GAAG,EAAE,EAAE,KAAK,IAAI,IAAU,EAAK,OAAO,EAAE,CAAC,EACzE,EAAK,SAAS,KAAK,IAAI,EAAK,QAAQ,EAAE,EACtC,EAAK,IAAI,KAAK,IAAI,EAAK,GAAG,EAAE,EAG1B,IAAK,MAAM,EAAS,KACpB,EAAK,MAAM,EAAS,KACpB,EAAK,UAAU,EAAS,SACxB,EAAK,WAAW,EAAS,WAK3B,EAAS,EAAK;IAEhB;EAAC;EAAS;EAAU;EAAS,CAC9B,EAEK,IAAqE;EACzE;GAAE,OAAO;GAAK,KAAK;GAAG,KAAK,KAAK,IAAI,IAAU,EAAS,OAAO,EAAE;GAAE;EAClE;GAAE,OAAO;GAAK,KAAK;GAAG;EACtB;GAAE,OAAO;GAAS,KAAK;GAAG,KAAK;GAAS;EACxC;GAAE,OAAO;GAAU,KAAK;GAAG;EAC5B;AAED,QACE,kBAAC,GAAD;EACE,OAAM;EACN,aAAa,yBAAyB,EAAQ;EAC9C,eAAY;YAEZ,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAO,KAAK,EAAE,UAAO,QAAK,aACzB,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;IAAO,SAAS,6BAA6B;IAAS,WAAW;cAC9D,EAAa;IACR,CAAA,EACR,kBAAC,GAAD;IACE,IAAI,6BAA6B;IACjC,MAAK;IACL,WAAU;IACV,OAAO,EAAS;IACX;IACA;IACL,WAAW,MAAU,EAAO,GAAO,EAAM,OAAO,MAAM;IACtD,WAAU;IACV,CAAA,CACE,EAAA,EAdI,EAcJ,CACN;GACE,CAAA;EACE,CAAA;EAEZ"}

package/dist/bigconsole/components/builder/inspector/index.js

@@ -2,3 +2,4 @@ import "./AdvancedSection.js";
 import "./AppearanceSection.js";
 import "./GeneralSection.js";
 import "./DataBindingSection.js";
+import "./LayoutSection.js";

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

@@ -10,50 +10,63 @@ import "../../context/index.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 c from "../../hooks/useDashboardOperations.js";
+import l from "../../hooks/useDashboardImageExport.js";
+import { BIGCONSOLE_PERMISSIONS as u } from "../../../constants/permissions.js";
+import { useInstalledWidgets as d } from "../../hooks/useInstalledWidgets.js";
+import ee from "./DashboardGrid.js";
+import te from "./DashboardToolbar.js";
+import ne from "./GlobalFiltersBar/GlobalFiltersBar.js";
 import "./GlobalFiltersBar/index.js";
-import te from "./LiveBoardBanner.js";
-import ne from "./TemplateSetupBanner.js";
-import re from "./PageTabsManager/PageTabsManager.js";
+import re from "./LiveBoardBanner.js";
+import ie from "./TemplateSetupBanner.js";
+import ae from "./PageTabsManager/PageTabsManager.js";
 import "./PageTabsManager/index.js";
-import ie from "./ShareDialog/ShareDialog.js";
+import oe from "./ShareDialog/ShareDialog.js";
 import "./ShareDialog/index.js";
-import ae from "./WidgetPalette.js";
-import { WidgetInspector as oe } from "../builder/WidgetInspector.js";
+import se from "./WidgetPalette.js";
+import { calculatePositionFromDrop as ce, findNextAvailablePosition as le } from "../../utils/widgetPositioning.js";
+import { WidgetInspector as ue } from "../builder/WidgetInspector.js";
 import "../builder/index.js";
-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 { memo as f, useCallback as p, useEffect as de, useMemo as fe, useRef as m, useState as h } from "react";
+import { usePermissions as pe } from "@burdenoff/fe-libs/shared/providers/shell";
+import { Plus as me } from "lucide-react";
+import { useI18n as he } 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 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());
+var y = f(function({ dashboardId: f, pageId: y, title: b, onPaste: ge, onSave: _e, isSaving: ve = !1, onExport: ye, onPublishTemplate: be, pages: x = [], activePageId: xe, onPageChange: Se, onPagesReorder: S, onPageAdd: Ce, onPageRename: we, onPageDuplicate: Te, onPageDelete: Ee, showFilters: De = !0, showPageTabs: Oe = !0, enableCrossFilter: ke = !0 }) {
+	let { t: C } = he(), w = m(null), T = m(null), [E, Ae] = h(1200), [je, D] = h(!1), [O, k] = h(null), [A, j] = h(!1), [Me, M] = h(null), [N, Ne] = h(null), P = t((e) => e.viewMode === "edit"), F = t((e) => e.currentDashboard), { updateDashboard: I } = c({ skipFetch: !0 }), { hasPermission: Pe } = pe(), Fe = Pe(u.DASHBOARD_UPDATE), Ie = N?.id === f ? N.value : F?.id === f ? F.visibility : void 0, Le = p(async (e) => {
+		let t = await I({
+			id: f,
+			visibility: e
+		});
+		if (!t) throw Error("The dashboard service did not accept the change.");
+		Ne({
+			id: f,
+			value: t.visibility ?? e
+		});
+	}, [f, I]), { workspaceId: L, apiGatewayUrl: R, authToken: z } = i(), { installedWidgets: Re, loading: ze } = d({
+		workspaceId: L,
+		apiGatewayUrl: R,
+		authToken: z,
+		enabled: P
+	}), { definitions: Be } = o({
+		workspaceId: L,
+		apiGatewayUrl: R,
+		authToken: z,
+		enabled: P
+	}), B = t((e) => e.zoomLevel), V = t((e) => e.sidebarCollapsed), H = t((e) => e.toggleSidebar), U = !V, W = t((e) => e.setGlobalFilterValues), Ve = p((e) => {
+		W(e);
+	}, [W]), { createWidget: G } = s(y, f, { skipFetch: !0 }), K = e((e) => e.widgets), q = fe(() => {
+		let e = Array.from(K.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(() => {
+	}, [K, y]), He = e((e) => e.selectedWidgetId), J = e((e) => e.selectWidget), Y = e((e) => e.addWidget), X = e((e) => e.updateWidgetPosition), Z = e((e) => e.configPanelOpen), Ue = e((e) => e.closeConfigPanel);
+	de(() => {
 		let e = w.current;
 		if (!e) return;
 		let t = () => {
-			De(e.offsetWidth);
+			Ae(e.offsetWidth);
 		};
 		if (t(), typeof ResizeObserver < "u") {
 			let n = new ResizeObserver(t);
@@ -61,18 +74,18 @@ var y = f(function({ dashboardId: f, pageId: y, title: b, onPaste: pe, onSave: m
 		}
 		return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
 	}, []);
-	let Ie = p((e) => {
+	let We = p((e) => {
 		e.forEach((e) => {
-			q(e.i, {
+			X(e.i, {
 				x: e.x,
 				y: e.y,
 				width: e.w,
 				height: e.h
 			});
 		});
-	}, [q]), Le = p((e) => {
-		G(e);
-	}, [G]), Y = p(async (e, t) => {
+	}, [X]), Ge = p((e) => {
+		J(e);
+	}, [J]), Q = p(async (e, t) => {
 		k(null);
 		let n = t?.definition || (e.type ? a(e.type) : null), r = {
 			width: n?.defaultSize?.width ?? 4,
@@ -80,7 +93,7 @@ var y = f(function({ dashboardId: f, pageId: y, title: b, onPaste: pe, onSave: m
 		}, i;
 		if (t?.position) i = t.position;
 		else {
-			let { x: e, y: t } = ce(W, r, { cols: 12 });
+			let { x: e, y: t } = le(q, r, { cols: 12 });
 			i = {
 				x: e,
 				y: t,
@@ -90,7 +103,7 @@ var y = f(function({ dashboardId: f, pageId: y, title: b, onPaste: pe, onSave: m
 		}
 		let o = e;
 		if (y) {
-			let t = await H({
+			let t = await G({
 				pageId: y,
 				dashboardId: f,
 				type: e.type,
@@ -105,7 +118,7 @@ var y = f(function({ dashboardId: f, pageId: y, title: b, onPaste: pe, onSave: m
 				parserId: o.parserId
 			});
 			if (t) {
-				G(t.id);
+				J(t.id);
 				return;
 			}
 			k(C("bigconsole.dashboards.canvas.widgetCreateError", "Could not create the widget. Check the connection and try again."));
@@ -133,20 +146,20 @@ var y = f(function({ dashboardId: f, pageId: y, title: b, onPaste: pe, onSave: m
 			createdAt: (/* @__PURE__ */ new Date()).toISOString(),
 			updatedAt: (/* @__PURE__ */ new Date()).toISOString()
 		};
-		K(s), G(s.id);
+		Y(s), J(s.id);
 	}, [
 		f,
 		y,
-		H,
-		K,
 		G,
-		W,
+		Y,
+		J,
+		q,
 		C
-	]), Re = p((e) => {
+	]), Ke = p((e) => {
 		j(!0), M(e);
-	}, []), ze = p(() => {
+	}, []), qe = p(() => {
 		j(!1), M(null);
-	}, []), Be = p((e) => {
+	}, []), Je = p((e) => {
 		e.preventDefault(), j(!1), M(null);
 		try {
 			let t = e.dataTransfer.getData("application/json");
@@ -166,13 +179,13 @@ var y = f(function({ dashboardId: f, pageId: y, title: b, onPaste: pe, onSave: m
 			let c = {
 				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 } = ce(e.clientX, e.clientY, s, E, c, { cols: 12 }), d = {
 				x: l,
 				y: u,
 				width: c.width,
 				height: c.height
 			};
-			Y({
+			Q({
 				type: r.type,
 				title: r.name || i.name,
 				config: r.defaultConfig || i.defaultConfig
@@ -183,51 +196,51 @@ var y = f(function({ dashboardId: f, pageId: y, title: b, onPaste: pe, onSave: m
 		} catch (e) {
 			console.error("Failed to handle widget drop:", e);
 		}
-	}, [E, Y]), Ve = p((e) => {
+	}, [E, Q]), Ye = p((e) => {
 		e.preventDefault(), e.dataTransfer.dropEffect = "copy";
-	}, []), He = p((e, t) => {
+	}, []), Xe = p((e, t) => {
 		let n = t || a(e);
-		Y({
+		Q({
 			type: e,
 			title: n.name,
 			config: n.defaultConfig
 		});
-	}, [Y]), X = p(() => {
-		z();
-	}, [z]), Z = p(() => {
-		R && z(), window.requestAnimationFrame(() => {
+	}, [Q]), Ze = p(() => {
+		H();
+	}, [H]), Qe = p(() => {
+		V && H(), window.requestAnimationFrame(() => {
 			let e = C("bigconsole.dashboards.widgetPalette.searchPlaceholder", "Search widgets...");
 			document.querySelector(`input[placeholder="${e}"]`)?.focus();
 		});
 	}, [
-		R,
-		z,
+		V,
+		H,
 		C
-	]), { exportPNG: Q, exportPDF: $, isExporting: Ue } = c({
+	]), { exportPNG: $e, exportPDF: $, isExporting: et } = l({
 		containerRef: T,
 		name: b || "dashboard"
 	});
 	return /* @__PURE__ */ v("div", {
 		className: "flex flex-col h-full min-w-0 overflow-hidden",
 		children: [
-			/* @__PURE__ */ _(d, {
+			/* @__PURE__ */ _(te, {
 				dashboardId: f,
 				title: b,
-				onAddWidget: Z,
-				onTogglePalette: X,
-				isPaletteOpen: B,
-				onPaste: pe,
-				onSave: me,
-				isSaving: he,
-				onExport: ge,
-				onPublishTemplate: _e,
+				onAddWidget: Qe,
+				onTogglePalette: Ze,
+				isPaletteOpen: U,
+				onPaste: ge,
+				onSave: _e,
+				isSaving: ve,
+				onExport: ye,
+				onPublishTemplate: be,
 				onExportImage: p(() => {
-					Q();
-				}, [Q]),
+					$e();
+				}, [$e]),
 				onExportPdf: p(() => {
 					$();
 				}, [$]),
-				isExportingImage: Ue,
+				isExportingImage: et,
 				onShare: () => D(!0)
 			}),
 			O && /* @__PURE__ */ _("div", {
@@ -248,44 +261,44 @@ var y = f(function({ dashboardId: f, pageId: y, title: b, onPaste: pe, onSave: m
 					})
 				})
 			}),
-			/* @__PURE__ */ _(ne, {
-				widgets: W,
-				isEditMode: N
+			/* @__PURE__ */ _(ie, {
+				widgets: q,
+				isEditMode: P
 			}),
-			/* @__PURE__ */ _(te, {
-				widgets: W,
-				isEditMode: N
+			/* @__PURE__ */ _(re, {
+				widgets: q,
+				isEditMode: P
 			}),
-			we && /* @__PURE__ */ _(ee, {
+			De && /* @__PURE__ */ _(ne, {
 				dashboardId: f,
-				onFilterChange: Ne,
+				onFilterChange: Ve,
 				collapsible: !0
 			}),
-			Te && (N || x.length > 0) && /* @__PURE__ */ _(re, {
+			Oe && (P || x.length > 0) && /* @__PURE__ */ _(ae, {
 				pages: x,
-				activePageId: ve || x[0]?.id,
-				editable: N,
-				onPageSelect: ye || (() => {}),
+				activePageId: xe || x[0]?.id,
+				editable: P,
+				onPageSelect: Se || (() => {}),
 				onPagesReorder: S ? (e) => {
 					S(e.map((e) => x.find((t) => t.id === e)).filter(Boolean));
 				} : void 0,
-				onPageCreate: be,
-				onPageRename: xe,
-				onPageDuplicate: Se,
-				onPageDelete: Ce
+				onPageCreate: Ce,
+				onPageRename: we,
+				onPageDuplicate: Te,
+				onPageDelete: Ee
 			}),
 			/* @__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: He,
-					onDragStart: Re,
-					onDragEnd: ze,
-					installedWidgets: Ae,
-					installedWidgetsLoading: je,
-					definitions: Me
+				className: `flex flex-1 min-w-0 overflow-hidden ${Z ? "lg:mr-[var(--bc-inspector-width,420px)]" : ""}`,
+				children: [P && /* @__PURE__ */ _(se, {
+					isOpen: U,
+					onClose: Ze,
+					onWidgetSelect: Xe,
+					onDragStart: Ke,
+					onDragEnd: qe,
+					installedWidgets: Re,
+					installedWidgetsLoading: ze,
+					definitions: Be
 				}), /* @__PURE__ */ v("div", {
 					ref: w,
 					role: "region",
@@ -293,10 +306,10 @@ var y = f(function({ dashboardId: f, pageId: y, title: b, onPaste: pe, onSave: m
 					"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,
+					onDrop: Je,
+					onDragOver: Ye,
 					onClick: () => {
-						N && G(null);
+						P && J(null);
 					},
 					style: A ? {
 						borderStyle: "dashed",
@@ -326,7 +339,7 @@ var y = f(function({ dashboardId: f, pageId: y, title: b, onPaste: pe, onSave: m
 							children: [
 								C("bigconsole.dashboards.canvas.dropToAddBefore", "Drop to add"),
 								" ",
-								/* @__PURE__ */ _("strong", { children: ke }),
+								/* @__PURE__ */ _("strong", { children: Me }),
 								" ",
 								C("bigconsole.dashboards.canvas.dropToAddAfter", "widget")
 							]
@@ -335,19 +348,19 @@ var y = f(function({ dashboardId: f, pageId: y, title: b, onPaste: pe, onSave: m
 						ref: T,
 						className: "min-h-full origin-top-left transition-transform",
 						style: {
-							transform: `scale(${L / 100})`,
-							width: `${100 / (L / 100)}%`
+							transform: `scale(${B / 100})`,
+							width: `${100 / (B / 100)}%`
 						},
-						children: W.length > 0 ? /* @__PURE__ */ _(n, {
-							enabled: Ee,
+						children: q.length > 0 ? /* @__PURE__ */ _(n, {
+							enabled: ke,
 							onCrossFilter: (e) => {},
-							children: /* @__PURE__ */ _(u, {
-								widgets: W,
-								isEditMode: N,
+							children: /* @__PURE__ */ _(ee, {
+								widgets: q,
+								isEditMode: P,
 								width: E,
-								onLayoutChange: Ie,
-								onWidgetSelect: Le,
-								selectedWidgetId: Pe
+								onLayoutChange: We,
+								onWidgetSelect: Ge,
+								selectedWidgetId: He
 							})
 						}) : /* @__PURE__ */ _("div", {
 							className: "flex min-h-[min(400px,60vh)] items-center justify-center p-card-padding",
@@ -358,24 +371,27 @@ var y = f(function({ dashboardId: f, pageId: y, title: b, onPaste: pe, onSave: m
 								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,
-									children: [/* @__PURE__ */ _(de, { className: "size-4" }), C("bigconsole.dashboards.canvas.addWidget", "Add Widget")]
+								children: P && /* @__PURE__ */ v(g, {
+									onClick: Qe,
+									children: [/* @__PURE__ */ _(me, { className: "size-4" }), C("bigconsole.dashboards.canvas.addWidget", "Add Widget")]
 								})
 							})
 						})
 					})]
 				})]
 			}),
-			/* @__PURE__ */ _(oe, {
-				isOpen: J,
-				onClose: Fe
+			/* @__PURE__ */ _(ue, {
+				isOpen: Z,
+				onClose: Ue
 			}),
-			/* @__PURE__ */ _(ie, {
+			/* @__PURE__ */ _(oe, {
 				dashboardId: f,
 				dashboardName: b || C("bigconsole.dashboards.canvas.dashboardFallbackName", "Dashboard"),
-				isOpen: Oe,
-				onClose: () => D(!1)
+				isOpen: je,
+				onClose: () => D(!1),
+				visibility: Ie,
+				onVisibilityChange: Le,
+				canChangeVisibility: Fe
 			})
 		]
 	});