@banzamel/mineralui 1.9.1 → 1.10.2

package/dist/layout-BgfQpVOU.js

@@ -0,0 +1,823 @@
+import { i as e, n as t, r as n } from "./theme-DAOU1aPs.js";
+import { $n as r, Gn as i, Ui as a, Zn as o, er as s, vr as c } from "./icons-DLP-Rs6z.js";
+import { t as l } from "./cn-YER3QsV1.js";
+import { n as u, t as d } from "./layoutProps-CE5-ghKw.js";
+import { n as f } from "./MSurface-B-sjyczH.js";
+import { t as p } from "./MLink-Bd8fLH1N.js";
+import { t as m } from "./MButton-C94fZ3l9.js";
+import { t as h } from "./MButtonGroup-BhGt-Yy1.js";
+import { t as g } from "./MSimpleGrid-Ds14eBrD.js";
+import { t as _ } from "./MTooltip-Cbj80F3o.js";
+import { i as v } from "./MDropdownMenu-CAwSTZ1h.js";
+import { Children as y, cloneElement as b, createContext as x, forwardRef as S, isValidElement as C, useCallback as w, useContext as T, useEffect as E, useId as D, useMemo as O, useRef as k, useState as A } from "react";
+import { jsx as j, jsxs as M } from "react/jsx-runtime";
+//#region src/components/layout/MContainer/MContainer.tsx
+function N({ size: e = "content", padded: t = !0, hidden: r, spacing: i, padding: a, fsize: o, mt: s, mb: c, ml: f, mr: p, mx: m, my: h, pt: g, pb: _, pl: v, pr: y, px: b, py: x, fullWidth: S, className: C, style: w, children: T, ...E }) {
+	let D = u({ fsize: o });
+	return /* @__PURE__ */ j("div", {
+		className: l("container", e, t && "padded", ...d({
+			spacing: i,
+			padding: a,
+			fsize: o,
+			mt: s,
+			mb: c,
+			ml: f,
+			mr: p,
+			mx: m,
+			my: h,
+			pt: g,
+			pb: _,
+			pl: v,
+			pr: y,
+			px: b,
+			py: x,
+			fullWidth: S
+		}), C),
+		style: {
+			...D,
+			...w
+		},
+		...n(r),
+		...E,
+		children: T
+	});
+}
+//#endregion
+//#region src/components/layout/MHeader/MHeader.tsx
+function P({ container: e = "wide", padded: t = !0, bordered: r = !0, sticky: i = !1, tone: a = "surface", layout: o = "split", hidden: s, className: c, children: u, ...d }) {
+	return /* @__PURE__ */ j("header", {
+		className: l("header", a, r && "bordered", i && "sticky", c),
+		...n(s),
+		...d,
+		children: /* @__PURE__ */ j(N, {
+			size: e,
+			padded: t,
+			className: l("inner", `layout-${o}`),
+			children: u
+		})
+	});
+}
+//#endregion
+//#region src/components/layout/MFooter/MFooter.tsx
+function F({ container: e = "wide", padded: t = !0, bordered: r = !0, tone: i = "surface", hidden: a, spacing: o, padding: s, fsize: c, mt: f, mb: p, ml: m, mr: h, mx: g, my: _, pt: v, pb: y, pl: b, pr: x, px: S, py: C, fullWidth: w, className: T, style: E, children: D, ...O }) {
+	let k = u({ fsize: c });
+	return /* @__PURE__ */ j("footer", {
+		className: l("footer", i, r && "bordered", ...d({
+			spacing: o,
+			padding: s,
+			fsize: c,
+			mt: f,
+			mb: p,
+			ml: m,
+			mr: h,
+			mx: g,
+			my: _,
+			pt: v,
+			pb: y,
+			pl: b,
+			pr: x,
+			px: S,
+			py: C,
+			fullWidth: w
+		}), T),
+		style: {
+			...k,
+			...E
+		},
+		...n(a),
+		...O,
+		children: /* @__PURE__ */ j(N, {
+			size: e,
+			padded: t,
+			className: "inner",
+			fullWidth: !0,
+			children: D
+		})
+	});
+}
+//#endregion
+//#region src/components/layout/MNavs/MNavs.tsx
+function I({ items: e, orientation: t = "horizontal", wrap: n = !1, className: r, children: i, ...a }) {
+	return /* @__PURE__ */ j("div", {
+		className: l("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__ */ M(p, {
+				component: e.component,
+				href: e.href,
+				to: e.to,
+				target: e.target,
+				rel: e.rel,
+				title: a,
+				current: e.current,
+				disabled: e.disabled,
+				className: l("link", n && "icon-only", e.className),
+				"aria-label": i,
+				children: [t ? /* @__PURE__ */ j("span", {
+					className: "icon",
+					"aria-hidden": !n || void 0,
+					children: /* @__PURE__ */ j(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 L(e, t = []) {
+	return y.forEach(e, (e) => {
+		if (!C(e)) return;
+		if (e.type === I) {
+			t.push(e);
+			return;
+		}
+		let n = e.props?.children;
+		n !== void 0 && L(n, t);
+	}), t;
+}
+function R({ container: r = "content", padded: i = !0, bordered: a = !0, sticky: s = !1, tone: c = "surface", justify: u = "between", wrap: d = !1, mobileMenu: p = "dropdown", mobileMenuContent: h, mobileMenuFooter: g, collapseActions: _ = !1, mobileMenuLabel: v = "Open navigation", mobileBreakpoint: x = t.compact, hidden: S, className: w, children: T, ...O }) {
+	let [P, F] = A(!1), I = k(null), R = D(), z = e(x), B = y.toArray(T), V = L(T).map((e, t) => b(e, {
+		key: `mnavbar-mobile-navs-${t}`,
+		orientation: "vertical"
+	})), H = /* @__PURE__ */ j(m, {
+		type: "button",
+		variant: "ghost",
+		size: "md",
+		shape: "circle",
+		iconOnly: !0,
+		className: "navbar-toggle",
+		"aria-label": v,
+		"aria-expanded": P,
+		"aria-controls": R,
+		onClick: J,
+		children: /* @__PURE__ */ j(o, {})
+	}, "mnavbar-toggle"), U = -1;
+	for (let e = B.length - 1; e >= 0; --e) {
+		let t = B[e];
+		if (C(t) && t.type === f) {
+			U = e;
+			break;
+		}
+	}
+	let W = _ && z && U !== -1, G = null, K = B, q = U;
+	if (W) {
+		G = B[U], K = B.filter((e, t) => t !== U), q = -1;
+		for (let e = K.length - 1; e >= 0; --e) {
+			let t = K[e];
+			if (C(t) && t.type === f) {
+				q = e;
+				break;
+			}
+		}
+	}
+	let ee = q === -1 ? [...K, H] : K.map((e, t) => {
+		if (t !== q) return e;
+		let n = e, r = y.toArray(n.props.children);
+		return b(n, {
+			key: n.key ?? `mnavbar-inline-${t}`,
+			children: [...r, H]
+		});
+	});
+	E(() => {
+		if (!P) return;
+		function e(e) {
+			let t = I.current;
+			t && (e.target instanceof Node && t.contains(e.target) || F(!1));
+		}
+		function t(e) {
+			e.key === "Escape" && F(!1);
+		}
+		return document.addEventListener("pointerdown", e), document.addEventListener("keydown", t), () => {
+			document.removeEventListener("pointerdown", e), document.removeEventListener("keydown", t);
+		};
+	}, [P]), E(() => {
+		z || F(!1);
+	}, [z]);
+	function J() {
+		F((e) => !e);
+	}
+	function Y(e) {
+		let t = e.target;
+		t && t.closest("a, [role=\"menuitem\"]") && F(!1);
+	}
+	return /* @__PURE__ */ M("nav", {
+		ref: I,
+		className: l("navbar", c, a && "bordered", s && "sticky", z && "mobile-view", P && "mobile-open", `mobile-${p}`, w),
+		...n(S),
+		...O,
+		children: [
+			/* @__PURE__ */ j(N, {
+				size: r,
+				padded: i,
+				className: "container",
+				children: /* @__PURE__ */ j("div", {
+					className: l("inner", u, d && "wrap"),
+					children: ee
+				})
+			}),
+			p === "drawer" && /* @__PURE__ */ j("div", {
+				className: l("mobile-backdrop", P && "visible"),
+				"aria-hidden": !0
+			}),
+			/* @__PURE__ */ M("div", {
+				id: R,
+				className: l("mobile-menu", p, P && "open"),
+				role: "menu",
+				"aria-hidden": !P || void 0,
+				onClick: Y,
+				children: [
+					V,
+					h,
+					G ? /* @__PURE__ */ j("div", {
+						className: "mobile-menu-footer",
+						children: b(G, { key: "mnavbar-collapsed-actions" })
+					}) : null,
+					g ? /* @__PURE__ */ j("div", {
+						className: "mobile-menu-footer",
+						children: g
+					}) : null
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/layout/MSection/MSection.tsx
+function z({ as: e = "section", spacing: t = "lg", tone: r = "default", hidden: i, className: a, style: o, children: s, ...c }) {
+	return /* @__PURE__ */ j(e, {
+		className: l("section", t, r, a),
+		style: o,
+		...n(i),
+		...c,
+		children: s
+	});
+}
+//#endregion
+//#region src/components/layout/MStatGrid/MStatGrid.tsx
+function B({ items: e, renderItem: t, children: n, columns: r = 4, minItemWidth: i = "15rem", ...a }) {
+	return /* @__PURE__ */ j(g, {
+		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 V({ orientation: e = "horizontal", variant: t = "solid", hidden: r, className: i, style: a, ...o }) {
+	return /* @__PURE__ */ j("div", {
+		role: "separator",
+		"aria-orientation": e,
+		className: l("divider", e, t, i),
+		style: a,
+		...n(r),
+		...o
+	});
+}
+//#endregion
+//#region src/components/layout/MSidebar/MSidebar.tsx
+var H = "mineralui-sidebar", U = x({
+	mode: "expanded",
+	mobile: !1,
+	mobileOpen: !1,
+	canToggle: !1,
+	toggleMode: () => {}
+});
+function W() {
+	return T(U);
+}
+function G({ mode: n = "auto", defaultMode: r = "expanded", onModeChange: i, persist: a = !1, side: s = "left", tone: c = "subtle", bordered: u = !0, mobileBreakpoint: d = t.mobile, compactBreakpoint: f = t.compact, className: p, style: m, children: h }) {
+	let g = Math.max(f, d), _ = e(d), v = e(g), y = !_ && v, [b, x] = A(!1), [S, C] = A(() => {
+		if (a) try {
+			let e = localStorage.getItem(H);
+			if (e === "expanded" || e === "collapsed") return e;
+		} catch {}
+		return r;
+	}), T = _ ? "expanded" : y ? "collapsed" : n === "auto" ? S : n === "collapsed" ? "collapsed" : "expanded", D = w(() => {
+		let e = T === "expanded" ? "collapsed" : "expanded";
+		if (C(e), i?.(e), a) try {
+			localStorage.setItem(H, e);
+		} catch {}
+	}, [
+		T,
+		i,
+		a
+	]), k = w(() => x(!1), []);
+	E(() => {
+		if (!b) return;
+		let e = (e) => {
+			e.key === "Escape" && x(!1);
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [b]), E(() => {
+		_ || x(!1);
+	}, [_]);
+	let N = !_ && !y && n === "auto", P = O(() => ({
+		mode: T,
+		mobile: _,
+		mobileOpen: b,
+		canToggle: N,
+		toggleMode: D
+	}), [
+		T,
+		_,
+		b,
+		N,
+		D
+	]), F = l("sidebar", c, s, !_ && T === "collapsed" && "collapsed", y && "compact", u && "bordered", _ && "mobile", _ && b && "mobile-open", p);
+	return /* @__PURE__ */ M(U.Provider, {
+		value: P,
+		children: [
+			_ && b && /* @__PURE__ */ j("div", {
+				className: "sidebar-backdrop",
+				onClick: k
+			}),
+			/* @__PURE__ */ j("aside", {
+				className: F,
+				style: m,
+				children: h
+			}),
+			_ && !b && /* @__PURE__ */ j("button", {
+				className: l("sidebar-hamburger", s),
+				onClick: () => x(!0),
+				"aria-label": "Open menu",
+				children: /* @__PURE__ */ j("span", {
+					className: "sidebar-hamburger-icon",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ j(o, {})
+				})
+			})
+		]
+	});
+}
+function K({ bordered: e = !1, className: t, children: n }) {
+	let { mode: r, mobile: i, canToggle: o, toggleMode: s } = W(), c = !i && r === "collapsed";
+	return /* @__PURE__ */ M("div", {
+		className: l("sidebar-header", e && "bordered", t),
+		children: [/* @__PURE__ */ j("div", {
+			className: "sidebar-header-content",
+			children: n
+		}), o && /* @__PURE__ */ j(m, {
+			variant: "outlined",
+			color: "neutral",
+			iconOnly: !0,
+			size: "sm",
+			onClick: s,
+			"aria-label": c ? "Expand sidebar" : "Collapse sidebar",
+			className: "sidebar-toggle",
+			children: /* @__PURE__ */ j("span", {
+				className: l("sidebar-chevron", c && "flipped"),
+				children: /* @__PURE__ */ j(a, {})
+			})
+		})]
+	});
+}
+function q({ className: e, children: t }) {
+	return /* @__PURE__ */ j("div", {
+		className: l("sidebar-body", e),
+		children: t
+	});
+}
+function ee({ className: e, children: t }) {
+	return /* @__PURE__ */ j("nav", {
+		className: l("sidebar-nav", e),
+		children: t
+	});
+}
+function J({ icon: e, label: t, description: n, href: r, to: i, onClick: a, active: o = !1, disabled: s = !1, badge: c, color: u, component: d, className: f }) {
+	let { mode: p, mobile: m } = W(), h = !m && p === "collapsed", g = n ?? t, v = typeof n == "string" ? n : typeof t == "string" ? t : void 0, y = d ?? (r || i ? "a" : "button"), b = d ? i ? { to: i } : r ? { href: r } : {} : r ? { href: r } : i ? { href: i } : {};
+	return /* @__PURE__ */ M(y, {
+		className: l("sidebar-item", o && "active", s && "disabled", u, f),
+		onClick: s ? void 0 : a,
+		"aria-disabled": s || void 0,
+		title: h ? v : void 0,
+		...b,
+		children: [
+			e && /* @__PURE__ */ j("span", {
+				className: "sidebar-item-icon",
+				children: e
+			}),
+			!h && /* @__PURE__ */ j(_, {
+				content: g,
+				placement: "top",
+				className: "sidebar-item-label-tooltip",
+				children: /* @__PURE__ */ j("span", {
+					className: "sidebar-item-label",
+					children: t
+				})
+			}),
+			!h && c && /* @__PURE__ */ j("span", {
+				className: "sidebar-item-badge",
+				children: c
+			})
+		]
+	});
+}
+function Y({ label: e, icon: t, active: n = !1, defaultOpen: r = !0, collapsible: i = !0, children: o, className: s }) {
+	let c = W(), { mode: u, mobile: d } = c, f = !d && u === "collapsed", [p, m] = A(r), h = O(() => ({
+		...c,
+		mode: "expanded"
+	}), [c]), g = () => {
+		i && m((e) => !e);
+	};
+	if (f) {
+		let r = /* @__PURE__ */ j("span", {
+			className: l("sidebar-group-icon collapsed", n && "active"),
+			title: e,
+			children: t
+		});
+		return /* @__PURE__ */ j("div", {
+			className: l("sidebar-group", s),
+			children: /* @__PURE__ */ j(v, {
+				trigger: r,
+				placement: "right-start",
+				closeOnSelect: !0,
+				openOn: "hover",
+				children: /* @__PURE__ */ j(U.Provider, {
+					value: h,
+					children: o
+				})
+			})
+		});
+	}
+	return /* @__PURE__ */ M("div", {
+		className: l("sidebar-group", s),
+		children: [/* @__PURE__ */ M("button", {
+			className: l("sidebar-group-header", n && "active"),
+			onClick: g,
+			"aria-expanded": p,
+			children: [
+				t && /* @__PURE__ */ j("span", {
+					className: "sidebar-group-icon",
+					children: t
+				}),
+				/* @__PURE__ */ j("span", {
+					className: "sidebar-group-label",
+					children: e
+				}),
+				i && /* @__PURE__ */ j("span", {
+					className: l("sidebar-group-arrow", p && "open"),
+					children: /* @__PURE__ */ j(a, {})
+				})
+			]
+		}), p && /* @__PURE__ */ j("div", {
+			className: "sidebar-group-items",
+			children: o
+		})]
+	});
+}
+function te({ bordered: e = !1, className: t, children: n }) {
+	return /* @__PURE__ */ j("div", {
+		className: l("sidebar-footer", e && "bordered", t),
+		children: n
+	});
+}
+function ne({ className: e, spacing: t = "md" }) {
+	return /* @__PURE__ */ j("hr", { className: l("sidebar-divider", t, e) });
+}
+//#endregion
+//#region src/components/layout/MBreadcrumb/MBreadcrumb.tsx
+function X({ items: e, separator: t = "/", maxItems: n, className: r, ...i }) {
+	let a = O(() => {
+		if (!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]);
+	return /* @__PURE__ */ j("nav", {
+		"aria-label": "breadcrumb",
+		className: l("breadcrumb", r),
+		...i,
+		children: /* @__PURE__ */ j("ol", {
+			className: "trail",
+			children: a.map((e, n) => {
+				if (e === null) return /* @__PURE__ */ M("li", {
+					className: "crumb dots",
+					children: [/* @__PURE__ */ j("span", {
+						className: "sep",
+						children: t
+					}), /* @__PURE__ */ j("span", { children: "…" })]
+				}, "ellipsis");
+				let r = n === a.length - 1;
+				return /* @__PURE__ */ M("li", {
+					className: l("crumb", r && "active"),
+					children: [n > 0 && /* @__PURE__ */ j("span", {
+						className: "sep",
+						children: t
+					}), e.href && !r ? /* @__PURE__ */ j("a", {
+						href: e.href,
+						className: "link",
+						onClick: e.onClick,
+						children: e.label
+					}) : e.onClick && !r ? /* @__PURE__ */ j("button", {
+						type: "button",
+						className: "link btn",
+						onClick: e.onClick,
+						children: e.label
+					}) : /* @__PURE__ */ j("span", {
+						className: "current",
+						"aria-current": r ? "page" : void 0,
+						children: e.label
+					})]
+				}, n);
+			})
+		})
+	});
+}
+//#endregion
+//#region src/components/layout/MAppShell/MAppShell.tsx
+var Z = S(function({ className: e, children: t, ...n }, r) {
+	let i = [], a = [];
+	return y.forEach(t, (e) => {
+		C(e) && e.type === G ? i.push(e) : a.push(e);
+	}), /* @__PURE__ */ M("div", {
+		ref: r,
+		className: l("app-shell", e),
+		...n,
+		children: [i, /* @__PURE__ */ j("div", {
+			className: "app-main",
+			children: a
+		})]
+	});
+}), Q = S(function({ className: e, children: t, ...n }, r) {
+	return /* @__PURE__ */ j("div", {
+		ref: r,
+		className: l("app-body", e),
+		...n,
+		children: t
+	});
+});
+//#endregion
+//#region src/components/layout/MCanvasGrid/ScaleToFit.tsx
+function re({ baseWidth: e = 480, children: t }) {
+	let n = k(null), r = k(null), [i, a] = A(1), [o, s] = A(e);
+	return E(() => {
+		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__ */ j("div", {
+		ref: n,
+		className: "canvas-grid-scale-wrapper",
+		children: /* @__PURE__ */ j("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 ie(e, t, n) {
+	return Math.max(t, Math.min(n, e));
+}
+function ae({ columns: n = 24, rows: a = 24, snap: o = 4, items: u, renderItem: d, minItemSize: f, maxItemSize: p, editable: g = !1, onItemMove: _, onItemResize: v, onItemRemove: y, onItemEdit: b, onItemExpand: x, guides: S = "always", compactBreakpoint: C = t.compact, mobileBreakpoint: T = t.mobile, height: D, fitContent: O = "scroll", fitContentBaseWidth: N = 480, className: P, style: F }, I) {
+	let L = k(null), [R, z] = A({
+		width: 0,
+		height: 0
+	}), [B, V] = A(null), [H, U] = A(null), [W, G] = A({}), K = k(0);
+	function q(e) {
+		K.current += 1, G((t) => ({
+			...t,
+			[e]: K.current
+		}));
+	}
+	function ee() {
+		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 J = e(T), Y = e(C) && !J, te = n * o, ne = a * o, X = Y ? Math.max(1, Math.round(te / 2)) : te, Z = Y ? Math.max(1, Math.round(ne / 2)) : ne, Q = Y ? Math.max(1, Math.round(n / 2)) : n, ae = Y ? Math.max(1, Math.round(a / 2)) : a, $ = g && !J;
+	E(() => {
+		let e = L.current;
+		if (!e || typeof ResizeObserver > "u") return;
+		let t = () => z({
+			width: e.clientWidth,
+			height: e.clientHeight
+		});
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, []);
+	let oe = w((e) => {
+		L.current = e, typeof I == "function" ? I(e) : I && (I.current = e);
+	}, [I]);
+	function se(e) {
+		let t = f?.(e);
+		return t ? {
+			w: Math.max(o, t.w * o),
+			h: Math.max(o, t.h * o)
+		} : {
+			w: o,
+			h: o
+		};
+	}
+	function ce(e, t) {
+		$ && (e.stopPropagation(), e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), q(t.id), V({
+			itemId: t.id,
+			mode: "resize",
+			startClientX: e.clientX,
+			startClientY: e.clientY,
+			original: { ...t.position }
+		}), U({ ...t.position }));
+	}
+	function le(e, t) {
+		$ && (e.target.closest("button, [role=\"button\"]") || (e.stopPropagation(), e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), q(t.id), V({
+			itemId: t.id,
+			mode: "drag",
+			startClientX: e.clientX,
+			startClientY: e.clientY,
+			original: { ...t.position }
+		}), U({ ...t.position })));
+	}
+	function ue(e) {
+		if (!B || R.width === 0 || R.height === 0) return;
+		let t = R.width / X, n = R.height / Z, r = Math.round((e.clientX - B.startClientX) / t), i = Math.round((e.clientY - B.startClientY) / n), a = B.original, s = u.find((e) => e.id === B.itemId), c = s ? se(s) : {
+			w: o,
+			h: o
+		};
+		if (B.mode === "drag") U({
+			x: ie(a.x + r, 0, X - a.w),
+			y: ie(a.y + i, 0, Z - a.h),
+			w: a.w,
+			h: a.h
+		});
+		else {
+			let e = ie(a.w + r, c.w, X - a.x), t = ie(a.h + i, c.h, Z - a.y);
+			U({
+				x: a.x,
+				y: a.y,
+				w: e,
+				h: t
+			});
+		}
+	}
+	function de(e) {
+		if (B) {
+			try {
+				e.currentTarget.releasePointerCapture(e.pointerId);
+			} catch {}
+			H && (B.mode === "drag" ? _?.(B.itemId, H) : v?.(B.itemId, H)), V(null), U(null);
+		}
+	}
+	function fe(e) {
+		B && (ee(), de(e));
+	}
+	let pe = S === "always" || S === "on-edit" && $ || S === "on-drag" && B !== null, me = D === void 0 ? void 0 : { height: typeof D == "number" ? `${D}px` : D };
+	if (J) {
+		let e = [...u].sort((e, t) => e.position.y - t.position.y);
+		return /* @__PURE__ */ j("div", {
+			ref: oe,
+			className: l("canvas-grid", "mobile", P),
+			"data-guides": "off",
+			style: {
+				...me,
+				...F
+			},
+			children: e.map((e) => /* @__PURE__ */ j("div", {
+				className: "canvas-grid-item",
+				children: d(e)
+			}, e.id))
+		});
+	}
+	let he = {
+		...me,
+		...F,
+		gridTemplateColumns: `repeat(${X}, 1fr)`,
+		gridTemplateRows: `repeat(${Z}, 1fr)`,
+		"--canvas-grid-cells": String(Q),
+		"--canvas-grid-row-cells": String(ae)
+	}, ge = Q * ae;
+	return /* @__PURE__ */ M("div", {
+		ref: oe,
+		className: l("canvas-grid", Y && "compact", $ && "editable", P),
+		"data-guides": pe ? "on" : "off",
+		style: he,
+		children: [/* @__PURE__ */ j("div", {
+			className: "canvas-grid-overlay",
+			"aria-hidden": !0,
+			children: Array.from({ length: ge }, (e, t) => {
+				let n = (t + 1) % Q === 0, r = t >= ge - Q;
+				return /* @__PURE__ */ j("div", { className: l("canvas-grid-cell", n && "no-right", r && "no-bottom") }, t);
+			})
+		}), u.map((e) => {
+			let t = B?.itemId === e.id, n = t && H ? H : e.position, a = Y ? Math.round(n.x / 2) : n.x, o = Y ? Math.round(n.y / 2) : n.y, u = Math.max(1, Y ? Math.round(n.w / 2) : n.w), f = Math.max(1, Y ? Math.round(n.h / 2) : n.h), p = 1 + (W[e.id] ?? 0), g = {
+				gridColumn: `${a + 1} / span ${u}`,
+				gridRow: `${o + 1} / span ${f}`,
+				zIndex: t ? p + 100 : p
+			};
+			return /* @__PURE__ */ M("div", {
+				className: l("canvas-grid-item", t && "dragging"),
+				style: g,
+				children: [
+					/* @__PURE__ */ j("div", {
+						className: "canvas-grid-item-header",
+						onPointerDown: (t) => le(t, e),
+						onPointerMove: ue,
+						onPointerUp: fe,
+						onPointerCancel: de,
+						children: /* @__PURE__ */ M(h, {
+							variant: "ghost",
+							size: "xs",
+							children: [
+								$ && b && /* @__PURE__ */ j(m, {
+									color: "primary",
+									iconOnly: !0,
+									"aria-label": "Edit tile",
+									startIcon: /* @__PURE__ */ j(i, {}),
+									onPointerDown: (e) => e.stopPropagation(),
+									onClick: (t) => {
+										t.stopPropagation(), b(e.id);
+									}
+								}),
+								x && /* @__PURE__ */ j(m, {
+									color: "primary",
+									iconOnly: !0,
+									"aria-label": "Expand tile",
+									startIcon: /* @__PURE__ */ j(r, {}),
+									onPointerDown: (e) => e.stopPropagation(),
+									onClick: (t) => {
+										t.stopPropagation(), x(e.id);
+									}
+								}),
+								$ && y && /* @__PURE__ */ j(m, {
+									color: "error",
+									iconOnly: !0,
+									"aria-label": "Remove tile",
+									startIcon: /* @__PURE__ */ j(s, {}),
+									onPointerDown: (e) => e.stopPropagation(),
+									onClick: (t) => {
+										t.stopPropagation(), y(e.id);
+									}
+								})
+							]
+						})
+					}),
+					/* @__PURE__ */ j("div", {
+						className: "canvas-grid-item-body",
+						children: O === "scale" ? /* @__PURE__ */ j(re, {
+							baseWidth: N,
+							children: d(e)
+						}) : d(e)
+					}),
+					!$ && x && /* @__PURE__ */ j(m, {
+						className: "canvas-grid-view-expand-handle",
+						variant: "filled",
+						shape: "circle",
+						size: "sm",
+						color: "primary",
+						iconOnly: !0,
+						"aria-label": "Expand tile",
+						startIcon: /* @__PURE__ */ j(r, {}),
+						onClick: (t) => {
+							t.stopPropagation(), x(e.id);
+						}
+					}),
+					$ && t && /* @__PURE__ */ j("div", {
+						className: "canvas-grid-item-glass",
+						"aria-hidden": !0,
+						children: /* @__PURE__ */ j(c, { size: 28 })
+					}),
+					$ && /* @__PURE__ */ j("div", {
+						className: "canvas-grid-resize-handle",
+						"aria-hidden": !0,
+						onPointerDown: (t) => ce(t, e),
+						onPointerMove: ue,
+						onPointerUp: (e) => {
+							B && ee(), de(e);
+						},
+						onPointerCancel: de
+					})
+				]
+			}, e.id);
+		})]
+	});
+}
+var $ = S(ae);
+//#endregion
+export { I as _, G as a, N as b, te as c, J as d, ee as f, R as g, z as h, X as i, Y as l, B as m, Z as n, q as o, V as p, Q as r, ne as s, $ as t, K as u, F as v, P as y };
+
+//# sourceMappingURL=layout-BgfQpVOU.js.map