import { h as e } from "./chunk.BlbRoQQ3.js";
import { e as t, f as n, g as r, k as i, p as a, u as o, v as s, w as c } from "./use-editor.C-_8sOOa.js";
import { T as l, h as u, v as d, z as f } from "./use-page-data.Cb2SuuwJ.js";
import { c as p } from "./twind.BiM9xcCd.js";
import { ac as m, ad as h, ag as g, ai as _, aj as v, am as y, ap as b, c as ee, d as te, e as ne, f as re, g as ie, h as ae, i as oe, j as se, k as ce, l as le } from "./system.DbMQd1I1.js";
import { b as x } from "./jsx-runtime.DF4K5VCp.js";
import { b as S, c as C, q as w } from "./theme.HtT_2QlC.js";
import { A as ue, B as T, D as de, E, F as D, b as O, c as k, d as A, e as fe, f as pe, l as j, m as me, n as he, o as ge, p as M, q as _e, r as N, s as ve, t as ye, u as be, v as xe, w as Se, x as Ce, y as we, z as P } from "./base-menu.props.BWy5Ub-q.js";
import { d as Te } from "./text.CvSXsyI-.js";
import { b as Ee } from "./tooltip.D4rQGwev.js";
import { C as De, D as F, F as I, G as Oe, K as ke, L as Ae, c as je, s as Me, x as Ne } from "./react.BZZIbN3T.js";
import { b as Pe, c as Fe, d as Ie, e as Le } from "./io.Bu1sIxQU.js";
import { n as Re } from "./md.Dru5DXQh.js";
import { e as ze } from "./menubar-styles.CdETFVyL.js";
import { c as Be } from "./use-brick-style.DDPl-_C1.js";
import { b as Ve } from "./BrickComponent.CO6zRNkx.js";
import { b as L } from "./use-brick-manifest.Iv9SG-7-.js";
import { b as He } from "./sortable.CwZ2HUCK.js";
import { range as Ue } from "lodash-es";
import * as R from "react";
import { forwardRef as We, startTransition as z, useCallback as Ge, useEffect as Ke, useRef as B, useState as V } from "react";
var H = /* @__PURE__ */ e(x(), 1), U = "ContextMenu", [qe, Je] = _(U, [T]), W = T(), [Ye, Xe] = qe(U), Ze = (e) => {
	let { __scopeContextMenu: t, children: n, onOpenChange: r, dir: i, modal: a = !0 } = e, [o, s] = R.useState(!1), c = W(t), l = h(r), u = R.useCallback((e) => {
		s(e), l(e);
	}, [l]);
	return /* @__PURE__ */ (0, H.jsx)(Ye, {
		scope: t,
		open: o,
		onOpenChange: u,
		modal: a,
		children: /* @__PURE__ */ (0, H.jsx)(Se, {
			...c,
			dir: i,
			open: o,
			onOpenChange: u,
			modal: a,
			children: n
		})
	});
};
Ze.displayName = U;
var Qe = "ContextMenuTrigger", $e = R.forwardRef((e, t) => {
	let { __scopeContextMenu: n, disabled: r = !1,...i } = e, a = Xe(Qe, n), o = W(n), s = R.useRef({
		x: 0,
		y: 0
	}), c = R.useRef({ getBoundingClientRect: () => DOMRect.fromRect({
		width: 0,
		height: 0,
		...s.current
	}) }), l = R.useRef(0), u = R.useCallback(() => window.clearTimeout(l.current), []), d = (e) => {
		s.current = {
			x: e.clientX,
			y: e.clientY
		}, a.onOpenChange(!0);
	};
	return R.useEffect(() => u, [u]), R.useEffect(() => void (r && u()), [r, u]), /* @__PURE__ */ (0, H.jsxs)(H.Fragment, { children: [/* @__PURE__ */ (0, H.jsx)(j, {
		...o,
		virtualRef: c
	}), /* @__PURE__ */ (0, H.jsx)(y.span, {
		"data-state": a.open ? "open" : "closed",
		"data-disabled": r ? "" : void 0,
		...i,
		ref: t,
		style: {
			WebkitTouchCallout: "none",
			...e.style
		},
		onContextMenu: r ? e.onContextMenu : g(e.onContextMenu, (e) => {
			u(), d(e), e.preventDefault();
		}),
		onPointerDown: r ? e.onPointerDown : g(e.onPointerDown, G((e) => {
			u(), l.current = window.setTimeout(() => d(e), 700);
		})),
		onPointerMove: r ? e.onPointerMove : g(e.onPointerMove, G(u)),
		onPointerCancel: r ? e.onPointerCancel : g(e.onPointerCancel, G(u)),
		onPointerUp: r ? e.onPointerUp : g(e.onPointerUp, G(u))
	})] });
});
$e.displayName = Qe;
var et = "ContextMenuPortal", tt = (e) => {
	let { __scopeContextMenu: t,...n } = e, r = W(t);
	return /* @__PURE__ */ (0, H.jsx)(ye, {
		...r,
		...n
	});
};
tt.displayName = et;
var nt = "ContextMenuContent", rt = R.forwardRef((e, t) => {
	let { __scopeContextMenu: n,...r } = e, i = Xe(nt, n), a = W(n), o = R.useRef(!1);
	return /* @__PURE__ */ (0, H.jsx)(ge, {
		...a,
		...r,
		ref: t,
		side: "right",
		sideOffset: 2,
		align: "start",
		onCloseAutoFocus: (t) => {
			e.onCloseAutoFocus?.(t), !t.defaultPrevented && o.current && t.preventDefault(), o.current = !1;
		},
		onInteractOutside: (t) => {
			e.onInteractOutside?.(t), !t.defaultPrevented && !i.modal && (o.current = !0);
		},
		style: {
			...e.style,
			"--radix-context-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
			"--radix-context-menu-content-available-width": "var(--radix-popper-available-width)",
			"--radix-context-menu-content-available-height": "var(--radix-popper-available-height)",
			"--radix-context-menu-trigger-width": "var(--radix-popper-anchor-width)",
			"--radix-context-menu-trigger-height": "var(--radix-popper-anchor-height)"
		}
	});
});
rt.displayName = nt;
var it = "ContextMenuGroup", at = R.forwardRef((e, t) => {
	let { __scopeContextMenu: n,...r } = e, i = W(n);
	return /* @__PURE__ */ (0, H.jsx)(M, {
		...i,
		...r,
		ref: t
	});
});
at.displayName = it;
var ot = "ContextMenuLabel", st = R.forwardRef((e, t) => {
	let { __scopeContextMenu: n,...r } = e, i = W(n);
	return /* @__PURE__ */ (0, H.jsx)(ve, {
		...i,
		...r,
		ref: t
	});
});
st.displayName = ot;
var ct = "ContextMenuItem", lt = R.forwardRef((e, t) => {
	let { __scopeContextMenu: n,...r } = e, i = W(n);
	return /* @__PURE__ */ (0, H.jsx)(_e, {
		...i,
		...r,
		ref: t
	});
});
lt.displayName = ct;
var ut = "ContextMenuCheckboxItem", dt = R.forwardRef((e, t) => {
	let { __scopeContextMenu: n,...r } = e, i = W(n);
	return /* @__PURE__ */ (0, H.jsx)(he, {
		...i,
		...r,
		ref: t
	});
});
dt.displayName = ut;
var ft = "ContextMenuRadioGroup", pt = R.forwardRef((e, t) => {
	let { __scopeContextMenu: n,...r } = e, i = W(n);
	return /* @__PURE__ */ (0, H.jsx)(be, {
		...i,
		...r,
		ref: t
	});
});
pt.displayName = ft;
var mt = "ContextMenuRadioItem", ht = R.forwardRef((e, t) => {
	let { __scopeContextMenu: n,...r } = e, i = W(n);
	return /* @__PURE__ */ (0, H.jsx)(xe, {
		...i,
		...r,
		ref: t
	});
});
ht.displayName = mt;
var gt = "ContextMenuItemIndicator", _t = R.forwardRef((e, t) => {
	let { __scopeContextMenu: n,...r } = e, i = W(n);
	return /* @__PURE__ */ (0, H.jsx)(N, {
		...i,
		...r,
		ref: t
	});
});
_t.displayName = gt;
var vt = "ContextMenuSeparator", yt = R.forwardRef((e, t) => {
	let { __scopeContextMenu: n,...r } = e, i = W(n);
	return /* @__PURE__ */ (0, H.jsx)(Ce, {
		...i,
		...r,
		ref: t
	});
});
yt.displayName = vt;
var bt = "ContextMenuArrow", xt = R.forwardRef((e, t) => {
	let { __scopeContextMenu: n,...r } = e, i = W(n);
	return /* @__PURE__ */ (0, H.jsx)(me, {
		...i,
		...r,
		ref: t
	});
});
xt.displayName = bt;
var St = "ContextMenuSub", Ct = (e) => {
	let { __scopeContextMenu: t, children: n, onOpenChange: r, open: i, defaultOpen: a } = e, o = W(t), [s, c] = m({
		prop: i,
		defaultProp: a,
		onChange: r
	});
	return /* @__PURE__ */ (0, H.jsx)(we, {
		...o,
		open: s,
		onOpenChange: c,
		children: n
	});
};
Ct.displayName = St;
var wt = "ContextMenuSubTrigger", Tt = R.forwardRef((e, t) => {
	let { __scopeContextMenu: n,...r } = e, i = W(n);
	return /* @__PURE__ */ (0, H.jsx)(ue, {
		...i,
		...r,
		ref: t
	});
});
Tt.displayName = wt;
var Et = "ContextMenuSubContent", Dt = R.forwardRef((e, t) => {
	let { __scopeContextMenu: n,...r } = e, i = W(n);
	return /* @__PURE__ */ (0, H.jsx)(P, {
		...i,
		...r,
		ref: t,
		style: {
			...e.style,
			"--radix-context-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
			"--radix-context-menu-content-available-width": "var(--radix-popper-available-width)",
			"--radix-context-menu-content-available-height": "var(--radix-popper-available-height)",
			"--radix-context-menu-trigger-width": "var(--radix-popper-anchor-width)",
			"--radix-context-menu-trigger-height": "var(--radix-popper-anchor-height)"
		}
	});
});
Dt.displayName = Et;
function G(e) {
	return (t) => t.pointerType === "mouse" ? void 0 : e(t);
}
var Ot = Ze, kt = $e, At = tt, jt = rt, Mt = at, Nt = st, Pt = lt, Ft = dt, It = pt, Lt = ht, Rt = _t, zt = yt, Bt = Ct, Vt = Tt, Ht = Dt, K = /* @__PURE__ */ e(v());
const q = (e) => R.createElement(Ot, { ...e });
q.displayName = "ContextMenu.Root";
const J = R.forwardRef(({ children: e,...t }, n) => R.createElement(kt, {
	...t,
	ref: n,
	asChild: !0
}, D(e)));
J.displayName = "ContextMenu.Trigger";
const Ut = R.createContext({}), Y = R.forwardRef((e, t) => {
	let n = S(), { size: r = A.size.default, variant: i = A.variant.default, highContrast: a = A.highContrast.default } = e, { className: o, children: s, color: c, container: l, forceMount: u,...d } = Te(e, A), f = c || n.accentColor;
	return R.createElement(At, {
		container: l,
		forceMount: u
	}, R.createElement(C, { asChild: !0 }, R.createElement(jt, {
		"data-accent-color": f,
		alignOffset: -Number(r) * 4,
		collisionPadding: 10,
		...d,
		asChild: !1,
		ref: t,
		className: (0, K.default)("rt-PopperContent", "rt-BaseMenuContent", "rt-ContextMenuContent", o)
	}, R.createElement(pe, { type: "auto" }, R.createElement("div", { className: (0, K.default)("rt-BaseMenuViewport", "rt-ContextMenuViewport") }, R.createElement(Ut.Provider, { value: R.useMemo(() => ({
		size: r,
		variant: i,
		color: f,
		highContrast: a
	}), [
		r,
		i,
		f,
		a
	]) }, s))))));
});
Y.displayName = "ContextMenu.Content";
const Wt = R.forwardRef(({ className: e,...t }, n) => R.createElement(Nt, {
	...t,
	asChild: !1,
	ref: n,
	className: (0, K.default)("rt-BaseMenuLabel", "rt-ContextMenuLabel", e)
}));
Wt.displayName = "ContextMenu.Label";
const X = R.forwardRef((e, t) => {
	let { className: n, children: r, color: i = O.color.default, shortcut: a,...o } = e;
	return R.createElement(Pt, {
		"data-accent-color": i,
		...o,
		ref: t,
		className: (0, K.default)("rt-reset", "rt-BaseMenuItem", "rt-ContextMenuItem", n)
	}, R.createElement(b, null, r), a && R.createElement("div", { className: "rt-BaseMenuShortcut rt-ContextMenuShortcut" }, a));
});
X.displayName = "ContextMenu.Item";
const Gt = R.forwardRef(({ className: e,...t }, n) => R.createElement(Mt, {
	...t,
	asChild: !1,
	ref: n,
	className: (0, K.default)("rt-BaseMenuGroup", "rt-ContextMenuGroup", e)
}));
Gt.displayName = "ContextMenu.Group";
const Kt = R.forwardRef(({ className: e,...t }, n) => R.createElement(It, {
	...t,
	asChild: !1,
	ref: n,
	className: (0, K.default)("rt-BaseMenuRadioGroup", "rt-ContextMenuRadioGroup", e)
}));
Kt.displayName = "ContextMenu.RadioGroup";
const qt = R.forwardRef((e, t) => {
	let { children: n, className: r, color: i = fe.color.default,...a } = e;
	return R.createElement(Lt, {
		...a,
		asChild: !1,
		ref: t,
		"data-accent-color": i,
		className: (0, K.default)("rt-BaseMenuItem", "rt-BaseMenuRadioItem", "rt-ContextMenuItem", "rt-ContextMenuRadioItem", r)
	}, R.createElement(b, null, n), R.createElement(Rt, { className: "rt-BaseMenuItemIndicator rt-ContextMenuItemIndicator" }, R.createElement(E, { className: "rt-BaseMenuItemIndicatorIcon rt-ContextMenuItemIndicatorIcon" })));
});
qt.displayName = "ContextMenu.RadioItem";
const Jt = R.forwardRef((e, t) => {
	let { children: n, className: r, shortcut: i, color: a = k.color.default,...o } = e;
	return R.createElement(Ft, {
		...o,
		asChild: !1,
		ref: t,
		"data-accent-color": a,
		className: (0, K.default)("rt-BaseMenuItem", "rt-BaseMenuCheckboxItem", "rt-ContextMenuItem", "rt-ContextMenuCheckboxItem", r)
	}, R.createElement(b, null, n), R.createElement(Rt, { className: "rt-BaseMenuItemIndicator rt-ContextMenuItemIndicator" }, R.createElement(E, { className: "rt-BaseMenuItemIndicatorIcon rt-ContextMenuItemIndicatorIcon" })), i && R.createElement("div", { className: "rt-BaseMenuShortcut rt-ContextMenuShortcut" }, i));
});
Jt.displayName = "ContextMenu.CheckboxItem";
const Yt = (e) => R.createElement(Bt, { ...e });
Yt.displayName = "ContextMenu.Sub";
const Xt = R.forwardRef((e, t) => {
	let { className: n, children: r,...i } = e;
	return R.createElement(Vt, {
		...i,
		asChild: !1,
		ref: t,
		className: (0, K.default)("rt-BaseMenuItem", "rt-BaseMenuSubTrigger", "rt-ContextMenuItem", "rt-ContextMenuSubTrigger", n)
	}, r, R.createElement("div", { className: "rt-BaseMenuShortcut rt-ContextMenuShortcut" }, R.createElement(de, { className: "rt-BaseMenuSubTriggerIcon rt-ContextMenuSubTriggerIcon" })));
});
Xt.displayName = "ContextMenu.SubTrigger";
const Z = R.forwardRef((e, t) => {
	let { size: n, variant: r, color: i, highContrast: a } = R.useContext(Ut), { className: o, children: s, container: c, forceMount: l,...u } = Te({
		size: n,
		variant: r,
		color: i,
		highContrast: a,
		...e
	}, A);
	return R.createElement(At, {
		container: c,
		forceMount: l
	}, R.createElement(C, { asChild: !0 }, R.createElement(Ht, {
		"data-accent-color": i,
		alignOffset: -Number(n) * 4,
		sideOffset: 1,
		collisionPadding: 10,
		...u,
		asChild: !1,
		ref: t,
		className: (0, K.default)("rt-PopperContent", "rt-BaseMenuContent", "rt-BaseMenuSubContent", "rt-ContextMenuContent", "rt-ContextMenuSubContent", o)
	}, R.createElement(pe, { type: "auto" }, R.createElement("div", { className: (0, K.default)("rt-BaseMenuViewport", "rt-ContextMenuViewport") }, s)))));
});
Z.displayName = "ContextMenu.SubContent";
const Q = R.forwardRef(({ className: e,...t }, n) => R.createElement(zt, {
	...t,
	asChild: !1,
	ref: n,
	className: (0, K.default)("rt-BaseMenuSeparator", "rt-ContextMenuSeparator", e)
}));
Q.displayName = "ContextMenu.Separator";
function $({ direction: e, show: t, manifest: n }) {
	let r = s();
	if (r === "mobile" && e !== "s" && e !== "n") return null;
	let i = n.isContainer ? 8 : 6;
	return /* @__PURE__ */ (0, H.jsx)("button", {
		type: "button",
		className: p("resizable-handle absolute focus:outline-none", "overflow-visible z-[9999]", `resizable-handle-${e}`, {
			"-bottom-[2px] left-0 right-0 h-[6px] cursor-row-resize": e === "s",
			"-top-[2px] left-0 right-0 h-[6px] cursor-row-resize": e === "n",
			"top-0 -left-[2px] bottom-0 w-[6px] cursor-col-resize": e === "w",
			"top-0 -right-[2px] bottom-0 w-[6px] cursor-col-resize": e === "e",
			"-bottom-[2px] -left-[2px] w-[6px] h-[6px] cursor-nesw-resize": e === "sw",
			"-top-[2px] -left-[2px] w-[6px] h-[6px] cursor-nwse-resize": e === "nw",
			"-bottom-[2px] -right-[2px] w-[6px] h-[6px] cursor-nwse-resize": e === "se",
			"-top-[2px] -right-[2px] w-[6px] h-[6px] cursor-nesw-resize": e === "ne"
		}),
		children: /* @__PURE__ */ (0, H.jsx)("div", { className: p("z-[9999] absolute w-[10px] h-[10px] bg-white border-2 rounded-full shadow-md resizable-handle-dot", n.isContainer ? "border-orange-500" : "border-upstart-500", t && "opacity-100", {
			[`top-1/2 -translate-y-1/2 -left-[${i}px]`]: e === "w",
			[`top-1/2 -translate-y-1/2 -right-[${i}px]`]: e === "e",
			[`left-1/2 -translate-x-1/2 -top-[${i}px]`]: e === "n",
			[`left-1/2 -translate-x-1/2 -bottom-[${i}px]`]: e === "s",
			[`-bottom-[${i}px] -left-[${i}px]`]: e === "sw",
			[`-top-[${i}px] -left-[${i}px]`]: e === "nw",
			[`-bottom-[${i}px] -right-[${i}px]`]: e === "se",
			[`-top-[${i}px] -right-[${i}px]`]: e === "ne"
		}) })
	});
}
function Zt(e) {
	let { resizable: t } = e;
	return {
		canGrowVertical: t === !0 || t === "vertical",
		canGrowHorizontal: t === !0 || t === "horizontal",
		canShrinkVertical: t === !0 || t === "vertical",
		canShrinkHorizontal: t === !0 || t === "horizontal"
	};
}
function Qt(e = {}) {
	let { tolerance: t = 0, deepCheck: n = !1 } = e, r = B(null), [i, a] = V(!1);
	return Ke(() => {
		let e = r.current;
		if (!e) return;
		let i = (r) => {
			let i = e.getBoundingClientRect(), { clientX: o, clientY: s } = r, c = o >= i.left - t && o <= i.right + t && s >= i.top - t && s <= i.bottom + t;
			if (!c) {
				z(() => {
					a(!1);
				});
				return;
			}
			if (n) {
				let t = document.elementFromPoint(o, s), n = t === e || e.contains(t);
				z(() => {
					a(n);
				});
			} else z(() => {
				a(!0);
			});
		}, o = () => {
			z(() => {
				a(!1);
			});
		}, s = new AbortController();
		return document.addEventListener("mousemove", i, { signal: s.signal }), e.addEventListener("mouseleave", o, { signal: s.signal }), () => {
			s.abort();
		};
	}, [t, n]), {
		ref: r,
		isHovered: i
	};
}
var $t = Object.defineProperty, en = Object.defineProperties, tn = Object.getOwnPropertyDescriptors, nn = Object.getOwnPropertySymbols, rn = Object.prototype.hasOwnProperty, an = Object.prototype.propertyIsEnumerable, on = (e, t, n) => t in e ? $t(e, t, {
	enumerable: !0,
	configurable: !0,
	writable: !0,
	value: n
}) : e[t] = n, sn = (e, t) => {
	for (var n in t ||= {}) rn.call(t, n) && on(e, n, t[n]);
	if (nn) for (var n of nn(t)) an.call(t, n) && on(e, n, t[n]);
	return e;
}, cn = (e, t) => en(e, tn(t)), ln = class extends F {
	apply({ transform: e }) {
		if (!this.options) return e;
		let { axis: t, value: n } = this.options;
		return cn(sn({}, e), { [t]: n });
	}
};
ln.configure = I(ln);
var un = ln;
un.configure({
	axis: "x",
	value: 0
}), un.configure({
	axis: "y",
	value: 0
});
function dn(e, t, n) {
	let r = sn({}, t);
	return e.boundingRectangle.top + t.y <= n.top ? r.y = n.top - e.boundingRectangle.top : e.boundingRectangle.bottom + t.y >= n.top + n.height && (r.y = n.top + n.height - e.boundingRectangle.bottom), e.boundingRectangle.left + t.x <= n.left ? r.x = n.left - e.boundingRectangle.left : e.boundingRectangle.right + t.x >= n.left + n.width && (r.x = n.left + n.width - e.boundingRectangle.right), r;
}
var fn = class extends F {
	apply({ transform: e }) {
		var t;
		let { size: n = 20 } = (t = this.options) ?? {}, r = typeof n == "number" ? n : n.x, i = typeof n == "number" ? n : n.y;
		return cn(sn({}, e), {
			x: Math.ceil(e.x / r) * r,
			y: Math.ceil(e.y / i) * i
		});
	}
};
fn.configure = I(fn);
var pn = class extends F {
	constructor(e, t) {
		super(e, t), this.boundingRectangle = Ae(null), this.destroy = ke(() => {
			if (!this.options) return;
			let { dragOperation: t } = e, { status: n } = t;
			if (n.initialized) {
				let { element: e } = this.options, n = typeof e == "function" ? e(t) : e;
				if (!n) return;
				let r = () => {
					this.boundingRectangle.value = Ne(n);
				}, i = () => {
					setTimeout(() => {
						r();
					}, 25);
				}, a = new ResizeObserver(r);
				return a.observe(n), document.addEventListener("scroll", i, {
					passive: !0,
					capture: !0
				}), () => {
					document.removeEventListener("scroll", i, { capture: !0 }), a.disconnect(), this.boundingRectangle.value = null;
				};
			}
		});
	}
	apply(e) {
		let { shape: t, transform: n } = e;
		if (!t) return n;
		let r = this.boundingRectangle.value;
		if (!r) return n;
		let { initial: i, current: a } = t, { height: o, width: s } = a.boundingRectangle, c = i.center.x - s / 2, l = i.center.y - o / 2, u = dn(new Oe(c, l, s, o), n, r);
		return u;
	}
};
pn.configure = I(pn);
var mn = pn;
function hn(e) {
	let [t, n] = V(!1);
	return Ke(() => {
		let t = (t) => {
			(t.key === e || e === "Meta" && (t.metaKey || t.ctrlKey)) && n(!0);
		}, r = (t) => {
			(t.key === e || e === "Meta" && !t.metaKey && !t.ctrlKey) && n(!1);
		}, i = () => {
			n(!1);
		};
		return window.addEventListener("keydown", t), window.addEventListener("keyup", r), window.addEventListener("blur", i), () => {
			window.removeEventListener("keydown", t), window.removeEventListener("keyup", r), window.removeEventListener("blur", i);
		};
	}, [e]), t;
}
function gn() {
	return hn("Meta");
}
function _n({ brick: e }) {
	let t = u(), n = L(e.type), r = t.canMoveTo(e.id, "previous"), i = t.canMoveTo(e.id, "next"), a = t.getParentBrick(e.id), o = !!a, s = a ? document.getElementById(a.id) : null, c = s && getComputedStyle(s).flexDirection || "row", l = o && r && c === "row" || !o && r, d = o && i && c === "row" || !o && i, f = o && r && c === "column", m = o && i && c === "column", h = n.isContainer ? 9 : 7, g = "absolute z-[9999] flex items-center justify-center h-5 w-5 rounded-full border border-white text-white bg-upstart-500 shadow-lg hover:(bg-upstart-700)";
	return /* @__PURE__ */ (0, H.jsxs)(H.Fragment, { children: [
		l && /* @__PURE__ */ (0, H.jsx)("button", {
			type: "button",
			className: p(g, `top-1/2 -left-${h} transform -translate-y-1/2`),
			onClick: (n) => {
				n.stopPropagation(), t.moveBrick(e.id, "previous");
			},
			children: /* @__PURE__ */ (0, H.jsx)(Pe, { className: "w-3 h-3" })
		}),
		f && /* @__PURE__ */ (0, H.jsx)("button", {
			type: "button",
			className: p(g, `-top-${h} left-1/2 transform -translate-x-1/2`),
			onClick: (n) => {
				n.stopPropagation(), t.moveBrick(e.id, "previous");
			},
			children: /* @__PURE__ */ (0, H.jsx)(Le, { className: "w-3 h-3" })
		}),
		d && /* @__PURE__ */ (0, H.jsx)("button", {
			type: "button",
			className: p(g, `top-1/2 -right-${h} transform -translate-y-1/2`),
			onClick: (n) => {
				n.stopPropagation(), t.moveBrick(e.id, "next");
			},
			children: /* @__PURE__ */ (0, H.jsx)(Ie, { className: "w-3 h-3" })
		}),
		m && /* @__PURE__ */ (0, H.jsx)("button", {
			type: "button",
			className: p(g, `-bottom-${h} left-1/2 transform -translate-x-1/2`),
			onClick: (n) => {
				n.stopPropagation(), t.moveBrick(e.id, "next");
			},
			children: /* @__PURE__ */ (0, H.jsx)(Fe, { className: "w-3 h-3" })
		})
	] });
}
const vn = We(({ brick: e, isContainerChild: t, children: r }, a) => {
	let o = u(), s = i(), c = n(), l = L(e.type), d = o.canMoveTo(e.id, "previous"), f = o.canMoveTo(e.id, "next"), p = o.getParentBrick(e.id), m = p ? document.getElementById(p.id) : null, h = m && getComputedStyle(m).flexDirection || "row";
	return /* @__PURE__ */ (0, H.jsxs)(q, {
		modal: !1,
		onOpenChange: (e) => {
			s.setContextMenuVisible(e);
		},
		children: [/* @__PURE__ */ (0, H.jsx)(J, {
			disabled: c,
			ref: a,
			children: r
		}), /* @__PURE__ */ (0, H.jsx)(w, { children: /* @__PURE__ */ (0, H.jsxs)(Y, {
			className: "nodrag",
			size: "2",
			children: [
				/* @__PURE__ */ (0, H.jsxs)(Wt, {
					className: "!text-sm",
					children: [l.name, " (brick)"]
				}),
				l.duplicatable && /* @__PURE__ */ (0, H.jsx)(X, {
					shortcut: "⌘D",
					onClick: (t) => {
						t.stopPropagation(), o.duplicateBrick(e.id);
					},
					children: "Duplicate"
				}),
				/* @__PURE__ */ (0, H.jsx)(X, {
					onClick: (t) => {
						t.stopPropagation(), navigator.clipboard.writeText(JSON.stringify(e)), ee(`Brick "${l.name}" copied to clipboard. You can paste it on this page or another page.`, { className: "min-w-fit" });
					},
					children: "Copy brick"
				}),
				d && /* @__PURE__ */ (0, H.jsx)(X, {
					shortcut: t ? "⌘↑" : "⌘←",
					onClick: (t) => {
						t.stopPropagation(), o.moveBrick(e.id, "previous");
					},
					children: t && h === "column" ? "Move up" : "Move left"
				}),
				f && /* @__PURE__ */ (0, H.jsx)(X, {
					shortcut: t ? "⌘↓" : "⌘→",
					onClick: (t) => {
						t.stopPropagation(), o.moveBrick(e.id, "next");
					},
					children: t && h === "column" ? "Move down" : "Move right"
				}),
				/* @__PURE__ */ (0, H.jsxs)(Yt, { children: [/* @__PURE__ */ (0, H.jsx)(Xt, { children: "Visible on" }), /* @__PURE__ */ (0, H.jsxs)(Z, { children: [/* @__PURE__ */ (0, H.jsx)(Jt, {
					checked: !e.props.hidden?.mobile,
					onClick: (e) => e.stopPropagation(),
					onCheckedChange: () => o.toggleBrickVisibilityPerBreakpoint(e.id, "mobile"),
					children: "Mobile"
				}), /* @__PURE__ */ (0, H.jsx)(Jt, {
					checked: !e.props.hidden?.desktop,
					onClick: (e) => e.stopPropagation(),
					onCheckedChange: () => o.toggleBrickVisibilityPerBreakpoint(e.id, "desktop"),
					children: "Desktop"
				})] })] }),
				p && /* @__PURE__ */ (0, H.jsxs)(H.Fragment, { children: [
					/* @__PURE__ */ (0, H.jsx)(Q, {}),
					/* @__PURE__ */ (0, H.jsxs)(Yt, { children: [/* @__PURE__ */ (0, H.jsx)(Xt, { children: "Parent container" }), /* @__PURE__ */ (0, H.jsxs)(Z, { children: [
						/* @__PURE__ */ (0, H.jsx)(X, {
							onClick: (e) => {
								e.stopPropagation(), o.duplicateBrick(p.id);
							},
							children: "Duplicate container"
						}),
						/* @__PURE__ */ (0, H.jsx)(X, {
							onClick: (e) => {
								e.stopPropagation(), s.setSelectedBrickId(p.id), s.setPanel("inspector");
							},
							children: "Edit container"
						}),
						/* @__PURE__ */ (0, H.jsx)(Q, {}),
						/* @__PURE__ */ (0, H.jsx)(X, {
							shortcut: "⌫",
							color: "red",
							onClick: (e) => {
								e.stopPropagation(), o.deleteBrick(p.id), s.deselectBrick(p.id), s.hidePanel("inspector");
							},
							children: "Delete container"
						})
					] })] }),
					/* @__PURE__ */ (0, H.jsx)(X, {
						onClick: (t) => {
							t.stopPropagation(), o.detachBrickFromContainer(e.id);
						},
						children: "Detach from parent"
					})
				] }),
				l.deletable && /* @__PURE__ */ (0, H.jsxs)(H.Fragment, { children: [/* @__PURE__ */ (0, H.jsx)(Q, {}), /* @__PURE__ */ (0, H.jsx)(X, {
					shortcut: "⌫",
					color: "red",
					onClick: (t) => {
						t.stopPropagation(), o.deleteBrick(e.id), s.deselectBrick(e.id), s.hidePanel("inspector");
					},
					children: "Delete"
				})] })
			]
		}) })]
	});
});
function yn({ brick: e }) {
	return /* @__PURE__ */ (0, H.jsx)("div", {
		id: `text-editor-menu-${e.id}`,
		className: p("contents", ze, "!empty:hidden")
	});
}
const bn = We(({ brick: e, style: n, isContainerChild: r, show: i,...a }, o) => {
	let s = c(), l = L(e.type), u = t(), d = i && l.isContainer && !s || i && !l.isContainer && !r || s === e.id;
	return !d || u ? null : /* @__PURE__ */ (0, H.jsx)("div", {
		ref: o,
		"data-ui": !0,
		"data-ui-menu-bars-container": !0,
		role: "navigation",
		className: p("z-[99999] isolate text-base items-center gap-1", "transition-opacity duration-150 border rounded-lg", d ? "opacity-100 flex" : "opacity-0 hidden", l.isContainer ? "border-orange-300" : "border-transparent"),
		style: n,
		...a,
		children: /* @__PURE__ */ (0, H.jsx)(yn, { brick: e })
	});
});
function xn(e) {
	return ["bottom", "top"];
}
function Sn({ brick: e, index: t, level: n = 0, isDynamicPreview: d, iterationIndex: m }) {
	let h = B(!1), g = c(), _ = s(), { panelPosition: v } = o(), y = i(), { getParentBrick: b, updateBrickProps: ee } = u(), x = f(e.id), S = L(e.type), C = b(e.id), [w, ue] = V(!1), T = xn(e), de = r(), E = a(), D = B(null), O = !!C, k = gn(), [A, fe] = V(!1), pe = !!d || E || !S.movable || O || !!e.props.ghost || _ === "mobile";
	je({
		onBeforeDragStart(e) {
			fe(!0);
		},
		onDragEnd(e) {
			setTimeout(() => {
				fe(!1);
			}, 200);
		}
	});
	let { isDragging: j, isDropping: me, isDropTarget: he, isDragSource: ge } = He({
		id: e.id,
		index: t,
		element: D,
		disabled: pe,
		collisionPriority: De.Normal,
		collisionDetector: k ? Me : void 0,
		type: "brick",
		accept: (e) => e.type === "brick" || e.type === "library",
		group: x?.id,
		data: {
			brick: e,
			parentBrick: C,
			section: x,
			manifest: S
		},
		transition: {
			duration: 250,
			easing: "cubic-bezier(0.25, 1, 0.5, 1)",
			idle: !0
		},
		modifiers: [mn.configure({ element: (e) => O ? D.current?.parentElement : document.querySelector("#page-container") })]
	}), { refs: M, floatingStyles: _e, update: N, context: ve } = re({
		open: w,
		onOpenChange: ue,
		whileElementsMounted: le,
		transform: !0,
		middleware: [ce(S.isContainer ? {
			mainAxis: 8,
			crossAxis: 0
		} : {
			mainAxis: 6,
			crossAxis: 0
		}), se({ allowedPlacements: T })]
	}), ye = ie(ve, {
		handleClose: ne(),
		enabled: !d,
		delay: {
			open: 50,
			close: 200
		}
	}), { getReferenceProps: be, getFloatingProps: xe } = ae([ye]);
	Ke(() => {
		if (M.reference.current) {
			let e = () => {
				h.current = !0;
			}, t = () => {
				h.current = !1;
			}, n = () => {
				N(), setTimeout(() => {
					h.current = !1;
				}, 200);
			}, r = M.reference.current;
			return r.addEventListener("mousedown", t), r.addEventListener("mouseup", n), r.addEventListener("mousemove", e), () => {
				r.removeEventListener("mousedown", t), r.removeEventListener("mouseup", n), r.removeEventListener("mousemove", e);
			};
		}
	}, [M.reference, N]);
	let Se = Ge((t) => {
		console.debug("EditableBrickWrapper: Click on brick", t, e);
		let n = t.target, r = t.currentTarget;
		if (h.current || !r?.matches("[data-element-kind='brick']") && !n?.matches("[data-element-kind='brick']") || t.defaultPrevented && !n.closest("[data-prevented-by-editor=\"true\"]")) {
			console.debug("EditableBrickWrapper: Click ignored due to mouse movement or default prevented", n, t);
			return;
		}
		let i = e, a = "brick";
		t.shiftKey ? C && (console.log("Selecting parent brick", C), i = C) : (t.ctrlKey || t.metaKey) && x && (a = "section", i = x), y.hidePanel(), (v === "left" && t.clientX < window.innerWidth * .25 || v === "right" && t.clientX > window.innerWidth * .75) && y.togglePanelPosition(), z(() => {
			a === "section" ? y.setSelectedSectionId(i.id) : (console.log("Selecting brick", i), y.setSelectedBrickId(i.id)), y.setPanel("inspector");
		}), h.current = !1, t.stopPropagation();
	}, [v]), Ce = Ge((t) => {
		console.log("EditableBrickWrapper: Double click on brick"), t.stopPropagation(), ee(e.id, {
			lastTouched: Date.now(),
			grow: !e.props.grow
		});
	}, [e.props]), { ref: we, isHovered: P } = Qt({
		tolerance: 6,
		deepCheck: !0
	}), Te = Be({
		brick: e,
		editable: !0,
		selected: g === e.id,
		isContainerChild: O
	}), F = oe([
		M.setReference,
		D,
		we
	]), I = Zt(l[e.type]);
	return /* @__PURE__ */ (0, H.jsx)(vn, {
		brick: e,
		isContainerChild: O,
		children: /* @__PURE__ */ (0, H.jsxs)("div", {
			ref: F,
			...be(),
			id: e.id,
			"data-element-kind": "brick",
			"data-brick-id": e.id,
			"data-brick-type": e.type,
			"data-last-touched": e.props.lastTouched ?? "0",
			"data-is-container": S.isContainer,
			"data-is-container-child": O,
			"data-dragging": j,
			"data-level": n,
			"data-index": t,
			"data-brick-width": e.props.width,
			"data-brick-height": e.props.height,
			"data-brick-max-width": JSON.stringify(S.maxWidth),
			"data-brick-min-width": JSON.stringify(S.minWidth),
			className: p(Te, d && "hover:(opacity-40 grayscale) group-hover/section:(opacity-40 grayscale pointer-events-none)", j ? "!z-[9999] !shadow-2xl overflow-hidden !cursor-grabbing" : "hover:cursor-auto", d && A && "scale-0", !!e.props.ghost && "opacity-50 pointer-events-none grayscale bg-white"),
			onClick: Se,
			onDoubleClickCapture: Ce,
			children: [
				/* @__PURE__ */ (0, H.jsx)(Ve, {
					brick: e,
					iterationIndex: m,
					isDynamicPreview: d,
					editable: !0
				}),
				/* @__PURE__ */ (0, H.jsx)(te, { children: /* @__PURE__ */ (0, H.jsx)(bn, {
					ref: M.setFloating,
					brick: e,
					isContainerChild: O,
					style: _e,
					show: w,
					...xe()
				}) }),
				l[e.type]?.resizable && !de && !j && !d && g === e.id && /* @__PURE__ */ (0, H.jsxs)(H.Fragment, { children: [
					(I.canGrowVertical || I.canShrinkVertical) && /* @__PURE__ */ (0, H.jsxs)(H.Fragment, { children: [/* @__PURE__ */ (0, H.jsx)($, {
						direction: "s",
						show: P,
						manifest: S
					}), /* @__PURE__ */ (0, H.jsx)($, {
						direction: "n",
						show: P,
						manifest: S
					})] }),
					(I.canGrowHorizontal || I.canShrinkHorizontal) && /* @__PURE__ */ (0, H.jsxs)(H.Fragment, { children: [/* @__PURE__ */ (0, H.jsx)($, {
						direction: "w",
						show: P,
						manifest: S
					}), /* @__PURE__ */ (0, H.jsx)($, {
						direction: "e",
						show: P,
						manifest: S
					})] }),
					(I.canGrowVertical && I.canGrowHorizontal || I.canShrinkVertical && I.canShrinkHorizontal) && /* @__PURE__ */ (0, H.jsxs)(H.Fragment, { children: [
						/* @__PURE__ */ (0, H.jsx)($, {
							direction: "se",
							show: P,
							manifest: S
						}),
						/* @__PURE__ */ (0, H.jsx)($, {
							direction: "sw",
							show: P,
							manifest: S
						}),
						/* @__PURE__ */ (0, H.jsx)($, {
							direction: "ne",
							show: P,
							manifest: S
						}),
						/* @__PURE__ */ (0, H.jsx)($, {
							direction: "nw",
							show: P,
							manifest: S
						})
					] })
				] }),
				_ === "desktop" && !d && e.id === g && /* @__PURE__ */ (0, H.jsx)(_n, { brick: e }),
				e.props.loop !== void 0 && !d && /* @__PURE__ */ (0, H.jsx)(Ee, {
					content: "This brick will be repeated for each item in the query result",
					children: /* @__PURE__ */ (0, H.jsx)("div", {
						className: p("group-hover/brick:opacity-100 absolute cursor-help -top-[12px] -right-[12px] z-[99999] w-5 h-5 rounded-full\n            flex items-center justify-center text-upstart-500 group/dyn-helper bg-white/90 shadow border border-upstart-500", e.id === g ? "opacity-100" : "opacity-0"),
						children: /* @__PURE__ */ (0, H.jsx)(Re, { className: "w-3 h-3" })
					})
				}),
				S.isContainer && !j && he && k && !ge && /* @__PURE__ */ (0, H.jsx)("div", {
					className: p("absolute inset-0 z-auto flex items-center justify-center bg-black/30 font-bold text-white rounded"),
					children: /* @__PURE__ */ (0, H.jsx)("span", {
						className: "inline-flex rounded-full px-4 py-2 bg-black/50",
						children: "Drop in box"
					})
				})
			]
		})
	});
}
function Cn(e) {
	let { brick: { props: t, type: n } } = e, r = d(), i = L(n), a = t.loop;
	if (!a?.over || i.consumesMultipleQueryRows) return /* @__PURE__ */ (0, H.jsx)(Sn, { ...e });
	let o = r.find((e) => e.alias === a?.over), s = Math.min(a.overrideLimit ?? Infinity, o?.queryInfo.limit ?? 1, 3), { brick: c,...l } = e;
	return /* @__PURE__ */ (0, H.jsx)(H.Fragment, { children: Ue(0, s).map((e, t) => /* @__PURE__ */ (0, H.jsx)(Sn, {
		...l,
		iterationIndex: t,
		isDynamicPreview: t > 0,
		brick: {
			...c,
			id: t > 0 ? `${c.id}-${t}` : c.id
		}
	}, e)) });
}
export { Cn as b, Gt as c, X as d, Wt as e, Q as f, J as g, q as h, Y as i };

//# sourceMappingURL=EditableBrick.Cqure0Lk.js.map