@banzamel/mineralui 2.4.3 → 2.5.2

package/dist/layout-BSFqGXLZ.js

@@ -0,0 +1,1101 @@
+import { i as e, n as t, r as n } from "./theme-B_juOenJ.js";
+import { m as r, s as i, t as a } from "./frameworkTexts-o43FqY1A.js";
+import { $n as o, Gn as s, Sr as c, Zn as l, er as u, qi as d } from "./icons-IqEBmGh3.js";
+import { t as f } from "./cn-CUSXNnjF.js";
+import { r as p } from "./useModalLayer-CpOPSDbf.js";
+import { t as m } from "./MPopover-CBDbUOW6.js";
+import { n as h, t as g } from "./layoutProps-CE5-ghKw.js";
+import { n as _ } from "./MSurface-B_QnRLr5.js";
+import { t as v } from "./MLink-ixg0xFFI.js";
+import { t as y } from "./MButton-KELyyBw1.js";
+import { t as b } from "./MButtonGroup-DDnn8Wfy.js";
+import { n as x } from "./radioGroupKeys-Bm-Qeh8G.js";
+import { t as S } from "./MSimpleGrid-C_QvLmck.js";
+import { t as C } from "./MTooltip-BRSPJ3RY.js";
+import { Children as w, cloneElement as T, createContext as E, forwardRef as D, isValidElement as O, useCallback as ee, useContext as k, useEffect as A, useId as te, useImperativeHandle as j, useMemo as M, useRef as N, useState as P } from "react";
+import { Fragment as ne, jsx as F, jsxs as I } from "react/jsx-runtime";
+//#region src/components/layout/MContainer/MContainer.tsx
+function L({ size: e = "content", padded: t = !0, hidden: r, hiddenAbove: i, spacing: a, padding: o, fsize: s, mt: c, mb: l, ml: u, mr: d, mx: p, my: m, pt: _, pb: v, pl: y, pr: b, px: x, py: S, fullWidth: C, className: w, style: T, children: E, ...D }) {
+	let O = h({ fsize: s });
+	return /* @__PURE__ */ F("div", {
+		className: f("container", e, t && "padded", ...g({
+			spacing: a,
+			padding: o,
+			fsize: s,
+			mt: c,
+			mb: l,
+			ml: u,
+			mr: d,
+			mx: p,
+			my: m,
+			pt: _,
+			pb: v,
+			pl: y,
+			pr: b,
+			px: x,
+			py: S,
+			fullWidth: C
+		}), w),
+		style: {
+			...O,
+			...T
+		},
+		...n(r, i),
+		...D,
+		children: E
+	});
+}
+//#endregion
+//#region src/components/layout/MHeader/MHeader.tsx
+function R({ container: e = "wide", padded: t = !0, bordered: r = !0, sticky: i = !1, tone: a = "surface", layout: o = "split", hidden: s, hiddenAbove: c, className: l, children: u, ...d }) {
+	return /* @__PURE__ */ F("header", {
+		className: f("header", a, r && "bordered", i && "sticky", l),
+		...n(s, c),
+		...d,
+		children: /* @__PURE__ */ F(L, {
+			size: e,
+			padded: t,
+			className: f("inner", `layout-${o}`),
+			children: u
+		})
+	});
+}
+//#endregion
+//#region src/components/layout/MFooter/MFooter.tsx
+function z({ container: e = "wide", padded: t = !0, bordered: r = !0, tone: i = "surface", hidden: a, hiddenAbove: o, spacing: s, padding: c, fsize: l, mt: u, mb: d, ml: p, mr: m, mx: _, my: v, pt: y, pb: b, pl: x, pr: S, px: C, py: w, fullWidth: T, className: E, style: D, children: O, ...ee }) {
+	let k = h({ fsize: l });
+	return /* @__PURE__ */ F("footer", {
+		className: f("footer", i, r && "bordered", ...g({
+			spacing: s,
+			padding: c,
+			fsize: l,
+			mt: u,
+			mb: d,
+			ml: p,
+			mr: m,
+			mx: _,
+			my: v,
+			pt: y,
+			pb: b,
+			pl: x,
+			pr: S,
+			px: C,
+			py: w,
+			fullWidth: T
+		}), E),
+		style: {
+			...k,
+			...D
+		},
+		...n(a, o),
+		...ee,
+		children: /* @__PURE__ */ F(L, {
+			size: e,
+			padded: t,
+			className: "inner",
+			fullWidth: !0,
+			children: O
+		})
+	});
+}
+//#endregion
+//#region src/components/layout/MNavs/MNavs.tsx
+function B({ items: e, orientation: t = "horizontal", wrap: n = !1, className: r, children: i, ...a }) {
+	return /* @__PURE__ */ F("div", {
+		className: f("navs", t, n && "wrap", r),
+		...a,
+		children: e ? e.map((e) => {
+			let t = e.icon, n = e.iconOnly === !0 && t != null, r = typeof e.label == "string" ? e.label : void 0, i = n ? r : void 0, a = e.title ?? (n ? r : void 0);
+			return /* @__PURE__ */ I(v, {
+				component: e.component,
+				href: e.href,
+				to: e.to,
+				target: e.target,
+				rel: e.rel,
+				title: a,
+				current: e.current,
+				disabled: e.disabled,
+				className: f("link", n && "icon-only", e.className),
+				"aria-label": i,
+				children: [t ? /* @__PURE__ */ F("span", {
+					className: "icon",
+					"aria-hidden": !n || void 0,
+					children: /* @__PURE__ */ F(t, { size: e.iconSize })
+				}) : null, n ? null : e.label]
+			}, e.key ?? e.href ?? e.title?.toString() ?? r ?? "");
+		}) : i
+	});
+}
+//#endregion
+//#region src/components/layout/MNavbar/MNavbar.tsx
+function re(e, t = []) {
+	return w.forEach(e, (e) => {
+		if (!O(e)) return;
+		if (e.type === B) {
+			t.push(e);
+			return;
+		}
+		let n = e.props?.children;
+		n !== void 0 && re(n, t);
+	}), t;
+}
+function V({ container: i = "content", padded: a = !0, bordered: o = !0, sticky: s = !1, tone: c = "surface", justify: u = "between", wrap: d = !1, mobileMenu: p = "dropdown", mobileMenuContent: m, mobileMenuFooter: h, collapseActions: g = !1, mobileMenuLabel: v, mobileBreakpoint: b = t.compact, hidden: x, hiddenAbove: S, className: C, children: E, ...D }) {
+	let ee = r(), [k, j] = P(!1), M = N(null), ne = te(), R = e(b), z = w.toArray(E), B = re(E).map((e, t) => T(e, {
+		key: `mnavbar-mobile-navs-${t}`,
+		orientation: "vertical"
+	})), V = /* @__PURE__ */ F(y, {
+		type: "button",
+		variant: "ghost",
+		size: "md",
+		shape: "circle",
+		iconOnly: !0,
+		className: "navbar-toggle",
+		"aria-label": v ?? ee.navbarMenu,
+		"aria-expanded": k,
+		"aria-controls": R ? ne : void 0,
+		onClick: ie,
+		children: /* @__PURE__ */ F(l, {})
+	}, "mnavbar-toggle"), H = -1;
+	for (let e = z.length - 1; e >= 0; --e) {
+		let t = z[e];
+		if (O(t) && t.type === _) {
+			H = e;
+			break;
+		}
+	}
+	let U = g && R && H !== -1, W = null, G = z, K = H;
+	if (U) {
+		W = z[H], G = z.filter((e, t) => t !== H), K = -1;
+		for (let e = G.length - 1; e >= 0; --e) {
+			let t = G[e];
+			if (O(t) && t.type === _) {
+				K = e;
+				break;
+			}
+		}
+	}
+	let q = K === -1 ? [...G, V] : G.map((e, t) => {
+		if (t !== K) return e;
+		let n = e, r = w.toArray(n.props.children);
+		return T(n, {
+			key: n.key ?? `mnavbar-inline-${t}`,
+			children: [...r, V]
+		});
+	});
+	A(() => {
+		if (!k) return;
+		function e(e) {
+			let t = M.current;
+			t && (e.target instanceof Node && t.contains(e.target) || j(!1));
+		}
+		function t(e) {
+			if (e.key !== "Escape") return;
+			j(!1);
+			let t = M.current, n = document.activeElement;
+			t && n instanceof Node && t.contains(n) && t.querySelector(".navbar-toggle")?.focus();
+		}
+		return document.addEventListener("pointerdown", e), document.addEventListener("keydown", t), () => {
+			document.removeEventListener("pointerdown", e), document.removeEventListener("keydown", t);
+		};
+	}, [k]), A(() => {
+		R || j(!1);
+	}, [R]);
+	function ie() {
+		j((e) => !e);
+	}
+	function ae(e) {
+		let t = e.target;
+		t && t.closest("a, [role=\"menuitem\"]") && j(!1);
+	}
+	return /* @__PURE__ */ I("nav", {
+		ref: M,
+		className: f("navbar", c, o && "bordered", s && "sticky", R && "mobile-view", k && "mobile-open", `mobile-${p}`, C),
+		...n(x, S),
+		...D,
+		children: [
+			/* @__PURE__ */ F(L, {
+				size: i,
+				padded: a,
+				className: "container",
+				children: /* @__PURE__ */ F("div", {
+					className: f("inner", u, d && "wrap"),
+					children: q
+				})
+			}),
+			p === "drawer" && /* @__PURE__ */ F("div", {
+				className: f("mobile-backdrop", k && "visible"),
+				"aria-hidden": !0,
+				onClick: () => j(!1)
+			}),
+			/* @__PURE__ */ I("div", {
+				id: ne,
+				className: f("mobile-menu", p, k && "open"),
+				"aria-hidden": !k || void 0,
+				inert: !k,
+				onClick: ae,
+				children: [
+					B,
+					m,
+					W ? /* @__PURE__ */ F("div", {
+						className: "mobile-menu-footer",
+						children: T(W, { key: "mnavbar-collapsed-actions" })
+					}) : null,
+					h ? /* @__PURE__ */ F("div", {
+						className: "mobile-menu-footer",
+						children: h
+					}) : null
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/layout/MSection/MSection.tsx
+function H({ as: e = "section", spacing: t = "lg", tone: r = "default", hidden: i, hiddenAbove: a, className: o, style: s, children: c, ...l }) {
+	return /* @__PURE__ */ F(e, {
+		className: f("section", t, r, o),
+		style: s,
+		...n(i, a),
+		...l,
+		children: c
+	});
+}
+//#endregion
+//#region src/components/layout/MStatGrid/MStatGrid.tsx
+function U({ items: e, renderItem: t, children: n, columns: r = 4, minItemWidth: i = "15rem", ...a }) {
+	return /* @__PURE__ */ F(S, {
+		columns: r,
+		minItemWidth: i,
+		...a,
+		children: e && t ? e.map((e, n) => t(e, n)) : n
+	});
+}
+//#endregion
+//#region src/components/layout/MDivider/MDivider.tsx
+function W({ orientation: e = "horizontal", variant: t = "solid", hidden: r, hiddenAbove: i, spacing: a, padding: o, fsize: s, mt: c, mb: l, ml: u, mr: d, mx: p, my: m, pt: _, pb: v, pl: y, pr: b, px: x, py: S, fullWidth: C, className: w, style: T, ...E }) {
+	let D = h({ fsize: s });
+	return /* @__PURE__ */ F("div", {
+		role: "separator",
+		"aria-orientation": e,
+		className: f("divider", e, t, ...g({
+			spacing: a,
+			padding: o,
+			fsize: s,
+			mt: c,
+			mb: l,
+			ml: u,
+			mr: d,
+			mx: p,
+			my: m,
+			pt: _,
+			pb: v,
+			pl: y,
+			pr: b,
+			px: x,
+			py: S,
+			fullWidth: C
+		}), w),
+		style: {
+			...D,
+			...T
+		},
+		...n(r, i),
+		...E
+	});
+}
+//#endregion
+//#region src/components/layout/MSidebar/MSidebar.tsx
+var G = "mineralui-sidebar", K = E({
+	mode: "expanded",
+	mobile: !1,
+	mobileOpen: !1,
+	canToggle: !1,
+	toggleMode: () => {}
+});
+function q() {
+	return k(K);
+}
+function ie({ mode: n = "auto", defaultMode: a = "expanded", onModeChange: o, persist: s = !1, side: c = "left", tone: u = "subtle", bordered: d = !0, mobileBreakpoint: m = t.mobile, compactBreakpoint: h = t.compact, className: g, style: _, children: v }) {
+	let y = i(), b = Math.max(h, m), x = e(m), S = e(b), C = !x && S, [w, T] = P(!1), [E, D] = P(() => {
+		if (s) try {
+			let e = localStorage.getItem(G);
+			if (e === "expanded" || e === "collapsed") return e;
+		} catch {}
+		return a;
+	}), O = x ? "expanded" : C ? "collapsed" : n === "auto" ? E : n === "collapsed" ? "collapsed" : "expanded", k = ee(() => {
+		let e = O === "expanded" ? "collapsed" : "expanded";
+		if (D(e), o?.(e), s) try {
+			localStorage.setItem(G, e);
+		} catch {}
+	}, [
+		O,
+		o,
+		s
+	]), te = ee(() => T(!1), []), j = N(null), ne = r(), L = x && w;
+	p({
+		active: L,
+		containerRef: j,
+		onEscape: te
+	}), A(() => {
+		x || T(!1);
+	}, [x]);
+	let R = !x && !C && n === "auto", z = M(() => ({
+		mode: O,
+		mobile: x,
+		mobileOpen: w,
+		canToggle: R,
+		toggleMode: k
+	}), [
+		O,
+		x,
+		w,
+		R,
+		k
+	]), B = f("sidebar", u, c, !x && O === "collapsed" && "collapsed", C && "compact", d && "bordered", x && "mobile", x && w && "mobile-open", g);
+	return /* @__PURE__ */ I(K.Provider, {
+		value: z,
+		children: [
+			L && /* @__PURE__ */ F("div", {
+				className: "sidebar-backdrop",
+				"aria-hidden": "true",
+				onClick: te
+			}),
+			/* @__PURE__ */ F("aside", {
+				ref: j,
+				className: B,
+				style: _,
+				...L ? {
+					role: "dialog",
+					"aria-modal": !0,
+					"aria-label": ne.sidebarDialogLabel
+				} : {},
+				inert: x && !w ? !0 : void 0,
+				children: v
+			}),
+			x && /* @__PURE__ */ F("button", {
+				type: "button",
+				className: f("sidebar-hamburger", c),
+				onClick: () => T(!0),
+				"aria-label": y.openMenu,
+				"aria-haspopup": "dialog",
+				hidden: w,
+				children: /* @__PURE__ */ F("span", {
+					className: "sidebar-hamburger-icon",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ F(l, {})
+				})
+			})
+		]
+	});
+}
+function ae({ bordered: e = !1, className: t, children: n }) {
+	let { mode: i, mobile: a, canToggle: o, toggleMode: s } = q(), c = !a && i === "collapsed", l = r();
+	return /* @__PURE__ */ I("div", {
+		className: f("sidebar-header", e && "bordered", t),
+		children: [/* @__PURE__ */ F("div", {
+			className: "sidebar-header-content",
+			children: n
+		}), o && /* @__PURE__ */ F(y, {
+			variant: "outlined",
+			color: "neutral",
+			iconOnly: !0,
+			size: "sm",
+			onClick: s,
+			"aria-label": c ? l.sidebarExpand : l.sidebarCollapse,
+			className: "sidebar-toggle",
+			children: /* @__PURE__ */ F("span", {
+				className: f("sidebar-chevron", c && "flipped"),
+				children: /* @__PURE__ */ F(d, {})
+			})
+		})]
+	});
+}
+function J({ className: e, children: t }) {
+	return /* @__PURE__ */ F("div", {
+		className: f("sidebar-body", e),
+		children: t
+	});
+}
+function Y({ className: e, children: t }) {
+	return /* @__PURE__ */ F("nav", {
+		className: f("sidebar-nav", e),
+		children: t
+	});
+}
+function oe({ icon: e, label: t, description: n, href: r, to: i, onClick: a, active: o = !1, disabled: s = !1, badge: c, color: l, component: u, className: d }) {
+	let { mode: p, mobile: m } = q(), h = !m && p === "collapsed", g = n ?? t, _ = typeof n == "string" ? n : typeof t == "string" ? t : void 0, v = u ?? (r || i ? "a" : "button"), y = u ? i ? { to: i } : r ? { href: r } : {} : r ? { href: r } : i ? { href: i } : {};
+	return /* @__PURE__ */ I(v, {
+		className: f("sidebar-item", o && "active", s && "disabled", l, d),
+		onClick: s ? void 0 : a,
+		"aria-disabled": s || void 0,
+		title: h ? _ : void 0,
+		...y,
+		children: [
+			e && /* @__PURE__ */ F("span", {
+				className: "sidebar-item-icon",
+				children: e
+			}),
+			h ? /* @__PURE__ */ F("span", {
+				className: "sidebar-item-label-hidden",
+				children: t
+			}) : /* @__PURE__ */ F(C, {
+				content: g,
+				placement: "top",
+				className: "sidebar-item-label-tooltip",
+				children: /* @__PURE__ */ F("span", {
+					className: "sidebar-item-label",
+					children: t
+				})
+			}),
+			!h && c && /* @__PURE__ */ F("span", {
+				className: "sidebar-item-badge",
+				children: c
+			})
+		]
+	});
+}
+function se({ label: e, icon: t, active: n, className: r, ctx: i, children: a }) {
+	let [o, s] = P(!1), [c, l] = P(!1), u = N(null), d = N(null), p = te(), h = `${p}-title`;
+	A(() => () => {
+		d.current && clearTimeout(d.current);
+	}, []);
+	let g = (e) => {
+		d.current && clearTimeout(d.current), l(e), s(!0);
+	}, _ = {
+		onMouseEnter: () => {
+			o ? d.current && clearTimeout(d.current) : g(!1);
+		},
+		onMouseLeave: () => {
+			d.current = setTimeout(() => {
+				let e = document.getElementById(p);
+				e && e.contains(document.activeElement) || s(!1);
+			}, 150);
+		}
+	};
+	return /* @__PURE__ */ I("div", {
+		className: f("sidebar-group", r),
+		..._,
+		children: [/* @__PURE__ */ F("button", {
+			ref: u,
+			type: "button",
+			className: f("sidebar-group-icon collapsed", n && "active", o && "open"),
+			title: e,
+			"aria-label": e,
+			"aria-expanded": o,
+			"aria-controls": o ? p : void 0,
+			onClick: (e) => {
+				if (o) {
+					s(!1);
+					return;
+				}
+				g(e.detail === 0);
+			},
+			onKeyDown: (e) => {
+				if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+					let t = x(e.currentTarget) ? "ArrowLeft" : "ArrowRight";
+					if (e.key !== t) return;
+					e.preventDefault(), g(!0);
+				}
+			},
+			children: t
+		}), /* @__PURE__ */ F(m, {
+			open: o,
+			anchorRef: u,
+			onClose: () => s(!1),
+			placement: "right-start",
+			className: "dropdown menu popover sidebar-flyout",
+			role: "group",
+			id: p,
+			"aria-labelledby": h,
+			initialFocus: c ? "first" : void 0,
+			closeOnTabOut: !0,
+			children: /* @__PURE__ */ I("div", {
+				className: "dropdown menu list sidebar-flyout-list",
+				..._,
+				onClick: (e) => {
+					e.target.closest("a, button") && s(!1);
+				},
+				children: [/* @__PURE__ */ F("div", {
+					id: h,
+					className: "sidebar-flyout-title",
+					children: e
+				}), /* @__PURE__ */ F(K.Provider, {
+					value: i,
+					children: a
+				})]
+			})
+		})]
+	});
+}
+function ce({ label: e, icon: t, active: n = !1, defaultOpen: r = !0, collapsible: i = !0, children: a, className: o }) {
+	let s = q(), { mode: c, mobile: l } = s, u = !l && c === "collapsed", [p, m] = P(r), h = M(() => ({
+		...s,
+		mode: "expanded"
+	}), [s]);
+	return u ? /* @__PURE__ */ F(se, {
+		label: e,
+		icon: t,
+		active: n,
+		className: o,
+		ctx: h,
+		children: a
+	}) : /* @__PURE__ */ I("div", {
+		className: f("sidebar-group", o),
+		children: [/* @__PURE__ */ I("button", {
+			type: "button",
+			className: f("sidebar-group-header", n && "active"),
+			onClick: () => {
+				i && m((e) => !e);
+			},
+			"aria-expanded": i ? p : void 0,
+			children: [
+				t && /* @__PURE__ */ F("span", {
+					className: "sidebar-group-icon",
+					children: t
+				}),
+				/* @__PURE__ */ F("span", {
+					className: "sidebar-group-label",
+					children: e
+				}),
+				i && /* @__PURE__ */ F("span", {
+					className: f("sidebar-group-arrow", p && "open"),
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ F(d, {})
+				})
+			]
+		}), p && /* @__PURE__ */ F("div", {
+			className: "sidebar-group-items",
+			children: a
+		})]
+	});
+}
+function le({ bordered: e = !1, className: t, children: n }) {
+	return /* @__PURE__ */ F("div", {
+		className: f("sidebar-footer", e && "bordered", t),
+		children: n
+	});
+}
+function ue({ className: e, spacing: t = "md" }) {
+	return /* @__PURE__ */ F("hr", { className: f("sidebar-divider", t, e) });
+}
+//#endregion
+//#region src/components/layout/MBreadcrumb/MBreadcrumb.tsx
+function de({ items: e, separator: t = "/", maxItems: n, className: i, ...o }) {
+	let s = r(), [c, l] = P(!1), u = N(!1), d = N(null);
+	A(() => {
+		l(!1);
+	}, [e.length, n]);
+	let p = M(() => {
+		if (c || !n || n >= e.length) return e;
+		if (n < 2) return [e[e.length - 1]];
+		let t = e.slice(0, 1), r = e.slice(-(n - 1));
+		return [
+			...t,
+			null,
+			...r
+		];
+	}, [
+		e,
+		n,
+		c
+	]), m = p.includes(null) ? e.length - (p.length - 1) : 0, h = n && n >= 2 ? 1 : -1;
+	return A(() => {
+		if (!c || !u.current) return;
+		u.current = !1;
+		let e = d.current;
+		if (!e) return;
+		let t = e.querySelector("a[href], button:not([disabled])");
+		t ? t.focus() : (e.tabIndex = -1, e.focus());
+	}, [c]), /* @__PURE__ */ F("nav", {
+		"aria-label": s.breadcrumbLabel,
+		className: f("breadcrumb", i),
+		...o,
+		children: /* @__PURE__ */ F("ol", {
+			className: f("trail", c && "expanded"),
+			children: p.map((e, n) => {
+				if (e === null) return /* @__PURE__ */ I("li", {
+					className: "crumb dots",
+					children: [/* @__PURE__ */ F("span", {
+						className: "sep",
+						"aria-hidden": "true",
+						children: t
+					}), /* @__PURE__ */ F("button", {
+						type: "button",
+						className: "link btn dots-toggle",
+						"aria-expanded": !1,
+						"aria-label": a(s.breadcrumbShowHidden, { count: m }),
+						onClick: () => {
+							u.current = !0, l(!0);
+						},
+						children: /* @__PURE__ */ F("span", {
+							"aria-hidden": "true",
+							children: "…"
+						})
+					})]
+				}, "ellipsis");
+				let r = n === p.length - 1;
+				return /* @__PURE__ */ I("li", {
+					ref: c && n === h ? d : void 0,
+					className: f("crumb", r && "active"),
+					children: [n > 0 && /* @__PURE__ */ F("span", {
+						className: "sep",
+						"aria-hidden": "true",
+						children: t
+					}), e.href && !r ? /* @__PURE__ */ F("a", {
+						href: e.href,
+						className: "link",
+						onClick: e.onClick,
+						children: e.label
+					}) : e.onClick && !r ? /* @__PURE__ */ F("button", {
+						type: "button",
+						className: "link btn",
+						onClick: e.onClick,
+						children: e.label
+					}) : /* @__PURE__ */ F("span", {
+						className: "current",
+						"aria-current": r ? "page" : void 0,
+						children: e.label
+					})]
+				}, n);
+			})
+		})
+	});
+}
+//#endregion
+//#region src/components/layout/MAppShell/MAppShell.tsx
+var fe = D(function({ className: e, children: t, ...n }, r) {
+	let i = [], a = [];
+	return w.forEach(t, (e) => {
+		O(e) && e.type === ie ? i.push(e) : a.push(e);
+	}), /* @__PURE__ */ I("div", {
+		ref: r,
+		className: f("app-shell", e),
+		...n,
+		children: [i, /* @__PURE__ */ F("div", {
+			className: "app-main",
+			children: a
+		})]
+	});
+}), pe = D(function({ className: e, children: t, ...n }, r) {
+	return /* @__PURE__ */ F("div", {
+		ref: r,
+		className: f("app-body", e),
+		...n,
+		children: t
+	});
+});
+//#endregion
+//#region src/components/layout/MCanvasGrid/ScaleToFit.tsx
+function me({ baseWidth: e = 480, children: t }) {
+	let n = N(null), r = N(null), [i, a] = P(1), [o, s] = P(e);
+	return A(() => {
+		let t = n.current, i = r.current;
+		if (!t || !i) return;
+		let o = 0, c = () => {
+			cancelAnimationFrame(o), o = requestAnimationFrame(() => {
+				let n = t.clientWidth, r = t.clientHeight;
+				if (n === 0 || r === 0) return;
+				let o = Math.max(e, n), c = i.offsetHeight;
+				if (o === 0 || c === 0) return;
+				let l = n / o, u = r / c, d = Math.min(l, u, 1);
+				d > 0 && Number.isFinite(d) && (s(o), a(d));
+			});
+		}, l = new ResizeObserver(c);
+		return l.observe(t), l.observe(i), c(), () => {
+			cancelAnimationFrame(o), l.disconnect();
+		};
+	}, [e]), /* @__PURE__ */ F("div", {
+		ref: n,
+		className: "canvas-grid-scale-wrapper",
+		children: /* @__PURE__ */ F("div", {
+			ref: r,
+			className: "canvas-grid-scale-content",
+			style: {
+				width: `${o}px`,
+				transform: `scale(${i})`
+			},
+			children: t
+		})
+	});
+}
+//#endregion
+//#region src/components/layout/MCanvasGrid/MCanvasGrid.tsx
+function X(e, t, n) {
+	return Math.max(t, Math.min(n, e));
+}
+function Z({ columns: n = 24, rows: i = 24, snap: l = 4, items: d, renderItem: p, getItemLabel: m, minItemSize: h, maxItemSize: g, editable: _ = !1, onItemMove: v, onItemResize: x, onItemRemove: S, onItemEdit: C, onItemExpand: w, guides: T = "always", compactBreakpoint: E = t.compact, mobileBreakpoint: D = t.mobile, height: O, fitContent: k = "scroll", fitContentBaseWidth: j = 480, className: M, style: L }, R) {
+	let z = r(), B = `${te()}-canvas-grid-instructions`, re = N(null), [V, H] = P({
+		width: 0,
+		height: 0
+	}), [U, W] = P(null), [G, K] = P(null), [q, ie] = P({}), ae = N(0), [J, Y] = P(null), [oe, se] = P("");
+	function ce(e) {
+		ae.current += 1, ie((t) => ({
+			...t,
+			[e]: ae.current
+		}));
+	}
+	function le() {
+		let e = !0, t = (n) => {
+			e && (e = !1, n.stopPropagation(), n.preventDefault(), window.removeEventListener("click", t, !0));
+		};
+		window.addEventListener("click", t, !0), window.setTimeout(() => {
+			e && (e = !1, window.removeEventListener("click", t, !0));
+		}, 60);
+	}
+	let ue = e(D), de = e(E) && !ue, fe = n * l, pe = i * l, Z = fe, Q = pe, he = de ? Math.max(1, Math.round(n / 2)) : n, ge = de ? Math.max(1, Math.round(i / 2)) : i, $ = _ && !ue;
+	A(() => {
+		let e = re.current;
+		if (!e || typeof ResizeObserver > "u") return;
+		let t = () => H({
+			width: e.clientWidth,
+			height: e.clientHeight
+		});
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, []);
+	let _e = ee((e) => {
+		re.current = e, typeof R == "function" ? R(e) : R && (R.current = e);
+	}, [R]);
+	function ve(e) {
+		let t = h?.(e);
+		return t ? {
+			w: Math.max(l, t.w * l),
+			h: Math.max(l, t.h * l)
+		} : {
+			w: l,
+			h: l
+		};
+	}
+	function ye(e, t) {
+		$ && (e.stopPropagation(), e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), ce(t.id), Y(null), W({
+			itemId: t.id,
+			mode: "resize",
+			startClientX: e.clientX,
+			startClientY: e.clientY,
+			original: { ...t.position }
+		}), K({ ...t.position }));
+	}
+	function be(e, t) {
+		$ && (e.target.closest("button, [role=\"button\"]") || (e.stopPropagation(), e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), ce(t.id), Y(null), W({
+			itemId: t.id,
+			mode: "drag",
+			startClientX: e.clientX,
+			startClientY: e.clientY,
+			original: { ...t.position }
+		}), K({ ...t.position })));
+	}
+	function xe(e) {
+		if (!U || V.width === 0 || V.height === 0) return;
+		let t = V.width / Z, n = V.height / Q, r = Math.round((e.clientX - U.startClientX) / t), i = Math.round((e.clientY - U.startClientY) / n), a = U.original, o = d.find((e) => e.id === U.itemId), s = o ? ve(o) : {
+			w: l,
+			h: l
+		};
+		if (U.mode === "drag") K({
+			x: X(a.x + r, 0, Z - a.w),
+			y: X(a.y + i, 0, Q - a.h),
+			w: a.w,
+			h: a.h
+		});
+		else {
+			let e = X(a.w + r, s.w, Z - a.x), t = X(a.h + i, s.h, Q - a.y);
+			K({
+				x: a.x,
+				y: a.y,
+				w: e,
+				h: t
+			});
+		}
+	}
+	function Se(e) {
+		if (U) {
+			try {
+				e.currentTarget.releasePointerCapture(e.pointerId);
+			} catch {}
+			G && (U.mode === "drag" ? v?.(U.itemId, G) : x?.(U.itemId, G)), W(null), K(null);
+		}
+	}
+	function Ce(e) {
+		if (U) {
+			if (e) try {
+				e.currentTarget.releasePointerCapture(e.pointerId);
+			} catch {}
+			W(null), K(null);
+		}
+	}
+	A(() => {
+		if (!U) return;
+		let e = (e) => {
+			e.key === "Escape" && (e.preventDefault(), W(null), K(null));
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [U]);
+	function we(e) {
+		U && (le(), Se(e));
+	}
+	function Te(e) {
+		return m?.(e) || a(z.canvasGridTile, { number: d.indexOf(e) + 1 });
+	}
+	function Ee(e, t, n) {
+		return a(e, {
+			label: t,
+			column: n.x + 1,
+			row: n.y + 1,
+			width: n.w,
+			height: n.h
+		});
+	}
+	function De(e) {
+		if (!$) return;
+		let t = Te(e);
+		if (J?.itemId === e.id) {
+			let n = G ?? e.position, r = J.original;
+			(n.x !== r.x || n.y !== r.y) && v?.(e.id, n), (n.w !== r.w || n.h !== r.h) && x?.(e.id, n), Y(null), K(null), se(Ee(z.canvasGridDropped, t, n));
+			return;
+		}
+		W(null), ce(e.id), Y({
+			itemId: e.id,
+			original: { ...e.position }
+		}), K({ ...e.position }), se(Ee(z.canvasGridGrabbed, t, e.position));
+	}
+	function Oe(e, t) {
+		J?.itemId === e.id && (Y(null), K(null), t && se(a(z.canvasGridCancelled, { label: Te(e) })));
+	}
+	function ke(e, t) {
+		if (J?.itemId !== t.id) return;
+		if (e.key === "Escape") {
+			e.preventDefault(), e.stopPropagation(), Oe(t, !0);
+			return;
+		}
+		let n = {
+			ArrowLeft: [-1, 0],
+			ArrowRight: [1, 0],
+			ArrowUp: [0, -1],
+			ArrowDown: [0, 1]
+		}[e.key];
+		if (!n || e.altKey || e.ctrlKey || e.metaKey) return;
+		e.preventDefault();
+		let r = G ?? t.position, i;
+		if (e.shiftKey) {
+			if (!x) return;
+			let e = ve(t);
+			i = {
+				...r,
+				w: X(r.w + n[0], e.w, Z - r.x),
+				h: X(r.h + n[1], e.h, Q - r.y)
+			};
+		} else {
+			if (!v) return;
+			i = {
+				...r,
+				x: X(r.x + n[0], 0, Z - r.w),
+				y: X(r.y + n[1], 0, Q - r.h)
+			};
+		}
+		K(i), se(Ee(z.canvasGridPosition, Te(t), i));
+	}
+	let Ae = T === "always" || T === "on-edit" && $ || T === "on-drag" && (U !== null || J !== null), je = O === void 0 ? void 0 : { height: typeof O == "number" ? `${O}px` : O };
+	if (ue) {
+		let e = [...d].sort((e, t) => e.position.y - t.position.y);
+		return /* @__PURE__ */ F("div", {
+			ref: _e,
+			className: f("canvas-grid", "mobile", M),
+			"data-guides": "off",
+			style: {
+				...je,
+				...L
+			},
+			children: e.map((e) => /* @__PURE__ */ F("div", {
+				className: "canvas-grid-item",
+				children: p(e)
+			}, e.id))
+		});
+	}
+	let Me = {
+		...je,
+		...L,
+		gridTemplateColumns: `repeat(${Z}, 1fr)`,
+		gridTemplateRows: `repeat(${Q}, 1fr)`,
+		"--canvas-grid-cells": String(he),
+		"--canvas-grid-row-cells": String(ge)
+	}, Ne = he * ge;
+	return /* @__PURE__ */ I("div", {
+		ref: _e,
+		className: f("canvas-grid", de && "compact", $ && "editable", M),
+		"data-guides": Ae ? "on" : "off",
+		style: Me,
+		children: [
+			/* @__PURE__ */ F("div", {
+				className: "canvas-grid-overlay",
+				"aria-hidden": !0,
+				children: Array.from({ length: Ne }, (e, t) => {
+					let n = (t + 1) % he === 0, r = t >= Ne - he;
+					return /* @__PURE__ */ F("div", { className: f("canvas-grid-cell", n && "no-right", r && "no-bottom") }, t);
+				})
+			}),
+			$ && /* @__PURE__ */ I(ne, { children: [/* @__PURE__ */ F("span", {
+				id: B,
+				className: "canvas-grid-sr-only",
+				children: z.canvasGridInstructions
+			}), /* @__PURE__ */ F("div", {
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				className: "canvas-grid-sr-only",
+				children: oe
+			})] }),
+			d.map((e) => {
+				let t = U?.itemId === e.id, n = $ && J?.itemId === e.id, r = Te(e), i = (t || n) && G ? G : e.position, l = i.x, d = i.y, m = Math.max(1, i.w), h = Math.max(1, i.h), g = 1 + (q[e.id] ?? 0), _ = {
+					gridColumn: `${l + 1} / span ${m}`,
+					gridRow: `${d + 1} / span ${h}`,
+					zIndex: t || n ? g + 100 : g
+				}, T = $ && (v !== void 0 || x !== void 0);
+				return /* @__PURE__ */ I("div", {
+					className: f("canvas-grid-item", t && "dragging", n && "keyboard-moving"),
+					style: _,
+					children: [
+						/* @__PURE__ */ F("div", {
+							className: "canvas-grid-item-header",
+							onPointerDown: (t) => be(t, e),
+							onPointerMove: xe,
+							onPointerUp: we,
+							onPointerCancel: Ce,
+							children: /* @__PURE__ */ I(b, {
+								variant: "ghost",
+								size: "xs",
+								children: [
+									T && /* @__PURE__ */ F(y, {
+										className: "canvas-grid-move-handle",
+										color: "primary",
+										iconOnly: !0,
+										"aria-label": a(z.canvasGridHandle, { label: r }),
+										"aria-describedby": B,
+										"aria-pressed": n,
+										startIcon: /* @__PURE__ */ F(c, {}),
+										onPointerDown: (e) => e.stopPropagation(),
+										onClick: (t) => {
+											t.stopPropagation(), De(e);
+										},
+										onKeyDown: (t) => ke(t, e),
+										onBlur: () => Oe(e, !0)
+									}),
+									$ && C && /* @__PURE__ */ F(y, {
+										color: "primary",
+										iconOnly: !0,
+										"aria-label": a(z.canvasGridEdit, { label: r }),
+										startIcon: /* @__PURE__ */ F(s, {}),
+										onPointerDown: (e) => e.stopPropagation(),
+										onClick: (t) => {
+											t.stopPropagation(), C(e.id);
+										}
+									}),
+									w && /* @__PURE__ */ F(y, {
+										color: "primary",
+										iconOnly: !0,
+										"aria-label": a(z.canvasGridExpand, { label: r }),
+										startIcon: /* @__PURE__ */ F(o, {}),
+										onPointerDown: (e) => e.stopPropagation(),
+										onClick: (t) => {
+											t.stopPropagation(), w(e.id);
+										}
+									}),
+									$ && S && /* @__PURE__ */ F(y, {
+										color: "error",
+										iconOnly: !0,
+										"aria-label": a(z.canvasGridRemove, { label: r }),
+										startIcon: /* @__PURE__ */ F(u, {}),
+										onPointerDown: (e) => e.stopPropagation(),
+										onClick: (t) => {
+											t.stopPropagation(), S(e.id);
+										}
+									})
+								]
+							})
+						}),
+						/* @__PURE__ */ F("div", {
+							className: "canvas-grid-item-body",
+							children: k === "scale" ? /* @__PURE__ */ F(me, {
+								baseWidth: j,
+								children: p(e)
+							}) : p(e)
+						}),
+						!$ && w && /* @__PURE__ */ F(y, {
+							className: "canvas-grid-view-expand-handle",
+							variant: "filled",
+							shape: "circle",
+							size: "sm",
+							color: "primary",
+							iconOnly: !0,
+							"aria-label": a(z.canvasGridExpand, { label: r }),
+							startIcon: /* @__PURE__ */ F(o, {}),
+							onClick: (t) => {
+								t.stopPropagation(), w(e.id);
+							}
+						}),
+						$ && t && /* @__PURE__ */ F("div", {
+							className: "canvas-grid-item-glass",
+							"aria-hidden": !0,
+							children: /* @__PURE__ */ F(c, { size: 28 })
+						}),
+						$ && /* @__PURE__ */ F("div", {
+							className: "canvas-grid-resize-handle",
+							"aria-hidden": !0,
+							onPointerDown: (t) => ye(t, e),
+							onPointerMove: xe,
+							onPointerUp: (e) => {
+								U && le(), Se(e);
+							},
+							onPointerCancel: Ce
+						})
+					]
+				}, e.id);
+			})
+		]
+	});
+}
+var Q = D(Z), he = "button, a, [role=\"button\"]", ge = D(function({ children: e, top: t = 16, bottomGap: n = 16, hideScrollbar: r = !0, draggable: i = !0, label: a, className: o, style: s, ...c }, l) {
+	let u = N(null);
+	j(l, () => u.current);
+	let d = N(null), [p, m] = P(!1);
+	A(() => {
+		if (!i) return;
+		let e = (e) => {
+			let t = d.current, n = u.current;
+			!t || !n || (n.scrollTop = t.startScrollTop - (e.clientY - t.startY));
+		}, t = () => {
+			d.current && (d.current = null, m(!1));
+		};
+		return window.addEventListener("mousemove", e), window.addEventListener("mouseup", t), () => {
+			window.removeEventListener("mousemove", e), window.removeEventListener("mouseup", t);
+		};
+	}, [i]);
+	let h = (e) => {
+		if (!i) return;
+		let t = e.target;
+		if (t && t.closest(he)) return;
+		let n = u.current;
+		n && (d.current = {
+			startY: e.clientY,
+			startScrollTop: n.scrollTop
+		}, m(!0), e.preventDefault());
+	}, g = {
+		top: t,
+		height: `calc(100vh - ${t + n}px)`,
+		...s
+	};
+	return /* @__PURE__ */ F("div", {
+		ref: u,
+		className: f("m-sticky-panel", i && "draggable", p && "is-dragging", r && "hide-scrollbar", o),
+		style: g,
+		tabIndex: 0,
+		role: a ? "region" : void 0,
+		"aria-label": a,
+		onMouseDown: h,
+		...c,
+		children: e
+	});
+});
+//#endregion
+export { V as _, de as a, R as b, ue as c, ae as d, oe as f, H as g, U as h, pe as i, le as l, W as m, Q as n, ie as o, Y as p, fe as r, J as s, ge as t, ce as u, B as v, L as x, z as y };
+
+//# sourceMappingURL=layout-BSFqGXLZ.js.map