react-panel-layout 0.2.0 → 0.3.0

package/dist/{GridLayout-CmzKfbPP.js → GridLayout-C0uqEj9E.js}

@@ -1,8 +1,8 @@
-import { jsxs as _, Fragment as O, jsx as w } from "react/jsx-runtime";
-import * as a from "react";
-import { o as xt, p as kt, q as Tt, r as It, s as Ht, t as At, u as _t, v as $t, G as W, w as y, C as Nt, a as Gt, b as Ot, R as ct, x as Wt, y as K } from "./styles-BnvLfp6e.js";
-import { createPortal as Ft } from "react-dom";
-const Bt = () => {
+import { jsxs as N, Fragment as $, jsx as h } from "react/jsx-runtime";
+import * as i from "react";
+import { C as Tt, F as It, e as Ht, D as At, a as Nt, f as $t, g as _t, h as Gt, b as Ft, i as Ot, G as O, j as y, k as Wt, l as Bt, m as Yt, R as ut, n as Xt, o as K } from "./FloatingPanelFrame-BkjBp0S5.js";
+import { createPortal as Ut } from "react-dom";
+const jt = () => {
   const t = /* @__PURE__ */ new Map();
   return (e) => {
     if (!e)
@@ -13,8 +13,8 @@ const Bt = () => {
     const o = t.size;
     return t.set(e, o), o;
   };
-}, Yt = Bt(), q = /* @__PURE__ */ new Map(), Xt = (t) => {
-  const e = `ovs-threshold:${t.threshold}-rootMargin:${t.rootMargin}-root:${Yt(t.root)}`;
+}, Vt = jt(), q = /* @__PURE__ */ new Map(), Zt = (t) => {
+  const e = `ovs-threshold:${t.threshold}-rootMargin:${t.rootMargin}-root:${Vt(t.root)}`;
   if (q.has(e))
     return q.get(e);
   const n = new class {
@@ -32,7 +32,7 @@ const Bt = () => {
     }
   }();
   return q.set(e, n), n;
-}, ut = Object.freeze({
+}, lt = Object.freeze({
   x: 0,
   y: 0,
   width: 0,
@@ -42,45 +42,42 @@ const Bt = () => {
   bottom: 0,
   left: 0
 });
-function Ut(t, { threshold: e = 0, rootMargin: n = "0px", root: o = null }) {
-  const [r, s] = a.useState(null);
-  return a.useEffect(() => {
+function Kt(t, { threshold: e = 0, rootMargin: n = "0px", root: o = null }) {
+  const [r, s] = i.useState(null);
+  return i.useEffect(() => {
     const c = t.current;
-    return c ? Xt({
+    return c ? Zt({
       threshold: e,
       rootMargin: n,
       root: o
-    }).observe(c, (i) => {
+    }).observe(c, (a) => {
       s({
-        isIntersecting: i.isIntersecting,
-        boundingClientRect: i.boundingClientRect,
-        intersectionRatio: i.intersectionRatio,
-        intersectionRect: i.intersectionRect,
-        rootBounds: i.rootBounds,
-        target: i.target,
-        time: i.time
+        isIntersecting: a.isIntersecting,
+        boundingClientRect: a.boundingClientRect,
+        intersectionRatio: a.intersectionRatio,
+        intersectionRect: a.intersectionRect,
+        rootBounds: a.rootBounds,
+        target: a.target,
+        time: a.time
       });
     }) : void 0;
-  }, [t, e, n, o]), a.useMemo(() => ({
+  }, [t, e, n, o]), i.useMemo(() => ({
     isIntersecting: r?.isIntersecting ?? !1,
-    boundingClientRect: r?.boundingClientRect ?? ut,
+    boundingClientRect: r?.boundingClientRect ?? lt,
     intersectionRatio: r?.intersectionRatio ?? 0,
-    intersectionRect: r?.intersectionRect ?? ut,
+    intersectionRect: r?.intersectionRect ?? lt,
     rootBounds: r?.rootBounds ?? null,
     target: r?.target ?? t.current,
     time: r?.time ?? 0
   }), [r, t]);
 }
-const jt = {
+const J = {
   position: "fixed",
   inset: 0,
-  background: "rgba(0, 0, 0, 0.5)"
-}, Zt = {
-  position: "fixed",
-  background: kt,
-  boxShadow: xt,
+  background: Tt
+}, qt = {
   willChange: "transform"
-}, Vt = {
+}, dt = {
   left: {
     top: 0,
     bottom: 0,
@@ -105,124 +102,129 @@ const jt = {
     right: 0,
     transform: "translateY(100%)"
   }
-}, Kt = {
-  display: "flex",
-  alignItems: "center",
-  padding: `${At} ${_t}`,
-  gap: Ht,
-  borderBottom: `1px solid ${It}`
-}, qt = {
-  fontWeight: 600
-}, Jt = {
+}, Jt = i.memo(({ style: t, dismissible: e, onClose: n }) => {
+  const o = e ? n : void 0, r = i.useMemo(() => ({ ...J, ...t }), [t]);
+  return /* @__PURE__ */ h("div", { style: r, onClick: o });
+}), Qt = (t, e) => t ? e : !1, te = {
   marginLeft: "auto",
   border: "none",
   background: "transparent",
   cursor: "pointer",
-  fontSize: $t
-}, Qt = {
-  padding: Tt
-}, te = a.memo(({ style: t, dismissible: e, onClose: n }) => {
-  const o = e ? n : void 0, r = a.useMemo(() => ({ ...jt, ...t }), [t]);
-  return /* @__PURE__ */ w("div", { style: r, onClick: o });
-}), ee = a.memo(({ header: t, dismissible: e, onClose: n }) => {
+  fontSize: Ot
+}, ee = ({ header: t, dismissible: e, onClose: n }) => {
   if (!t)
     return null;
-  const o = t.showCloseButton ?? !0, r = () => t.title ? /* @__PURE__ */ w("div", { style: qt, children: t.title }) : null, s = () => !o || !e ? null : /* @__PURE__ */ w("button", { style: Jt, onClick: n, "aria-label": "Close drawer", type: "button", children: "×" });
-  return /* @__PURE__ */ _("div", { style: Kt, children: [
-    r(),
-    s()
-  ] });
-}), ne = ({
+  const o = t.showCloseButton ?? !0, r = Qt(e, o);
+  return /* @__PURE__ */ h(i.Activity, { mode: t ? "visible" : "hidden", children: /* @__PURE__ */ N(
+    Nt,
+    {
+      style: { padding: `${_t} ${Gt}`, gap: $t },
+      children: [
+        /* @__PURE__ */ h(i.Activity, { mode: t ? "visible" : "hidden", children: /* @__PURE__ */ h(Ft, { children: t.title }) }),
+        /* @__PURE__ */ h(i.Activity, { mode: r ? "visible" : "hidden", children: /* @__PURE__ */ h("button", { style: te, onClick: n, "aria-label": "Close drawer", type: "button", children: "×" }) })
+      ]
+    }
+  ) });
+}, ne = ({ header: t, dismissible: e, onClose: n, chrome: o, children: r }) => o ? /* @__PURE__ */ N(It, { style: { height: "100%", borderRadius: 0 }, children: [
+  /* @__PURE__ */ h(ee, { header: t, dismissible: e, onClose: n }),
+  /* @__PURE__ */ h(
+    Ht,
+    {
+      style: { padding: At, flex: 1, display: "flex", flexDirection: "column" },
+      children: r
+    }
+  )
+] }) : /* @__PURE__ */ h($, { children: r }), re = ({
   id: t,
   config: e,
   isOpen: n,
   onClose: o,
   children: r,
-  className: s,
-  style: c,
-  zIndex: u,
-  width: i,
-  height: f,
-  position: d,
-  backdropStyle: p
+  zIndex: s,
+  width: c,
+  height: u,
+  position: a
 }) => {
-  const { dismissible: h = !0, header: v } = e, P = a.useCallback((z) => z ? z.left !== void 0 ? "left" : z.right !== void 0 ? "right" : z.top !== void 0 ? "top" : z.bottom !== void 0 ? "bottom" : "right" : "right", [])(d), M = a.useMemo(() => {
-    const z = {
-      ...Zt,
-      ...Vt[P],
-      ...c
+  const { dismissible: f = !0, header: d, chrome: p = !0, inline: m = !1 } = e, v = i.useCallback((S) => S ? S.left !== void 0 ? "left" : S.right !== void 0 ? "right" : S.top !== void 0 ? "top" : S.bottom !== void 0 ? "bottom" : "right" : "right", [])(a), P = {
+    left: "translateX(0)",
+    right: "translateX(0)",
+    top: "translateY(0)",
+    bottom: "translateY(0)"
+  }, M = i.useMemo(() => {
+    const S = {
+      ...qt,
+      ...m ? { position: "absolute" } : { position: "fixed" },
+      ...dt[v],
+      transform: n ? P[v] : dt[v].transform,
+      transition: "transform 220ms ease"
     };
-    return u !== void 0 && (z.zIndex = u), i !== void 0 && (z.width = typeof i == "number" ? `${i}px` : i), f !== void 0 && (z.height = typeof f == "number" ? `${f}px` : f), z;
-  }, [c, u, i, f, P]), x = v ? Qt : void 0, $ = () => v ? /* @__PURE__ */ w(ee, { header: v, dismissible: h, onClose: o }) : null;
-  return /* @__PURE__ */ _(O, { children: [
-    p ? /* @__PURE__ */ w(a.Activity, { mode: n ? "visible" : "hidden", children: /* @__PURE__ */ w(te, { style: p, dismissible: h, onClose: o }) }) : null,
-    /* @__PURE__ */ w(a.Activity, { mode: n ? "visible" : "hidden", children: /* @__PURE__ */ _(
+    return s !== void 0 && (S.zIndex = s), c !== void 0 && (S.width = typeof c == "number" ? `${c}px` : c), u !== void 0 && (S.height = typeof u == "number" ? `${u}px` : u), S;
+  }, [u, m, n, v, c, s]), x = d?.title ?? e.ariaLabel ?? "Drawer", _ = m ? { ...J, position: "absolute" } : J;
+  return /* @__PURE__ */ N($, { children: [
+    /* @__PURE__ */ h(i.Activity, { mode: n ? "visible" : "hidden", children: /* @__PURE__ */ h(Jt, { style: _, dismissible: f, onClose: o }) }),
+    /* @__PURE__ */ h(i.Activity, { mode: n ? "visible" : "hidden", children: /* @__PURE__ */ h(
       "div",
       {
-        className: s,
         "data-layer-id": t,
-        "data-placement": P,
+        "data-placement": v,
         style: M,
         role: "dialog",
-        "aria-modal": h ? !0 : void 0,
+        "aria-modal": f ? !0 : void 0,
         "aria-hidden": n ? void 0 : !0,
-        "aria-label": v?.title ?? "Drawer",
-        children: [
-          $(),
-          /* @__PURE__ */ w("div", { style: x, children: r })
-        ]
+        "aria-label": x,
+        children: /* @__PURE__ */ h(ne, { header: d, dismissible: f, onClose: o, chrome: p, children: r })
       }
     ) })
   ] });
 };
 function T(t) {
-  const e = a.useRef(t);
-  return e.current = t, a.useCallback((...n) => {
+  const e = i.useRef(t);
+  return e.current = t, i.useCallback((...n) => {
     const o = e.current;
     if (o)
       return o(...n);
   }, []);
 }
-const re = (t) => {
-  const [e, n] = a.useState(() => {
-    const i = {};
+const oe = (t) => {
+  const [e, n] = i.useState(() => {
+    const a = {};
     return t.forEach((f) => {
-      f.drawer && (i[f.id] = f.drawer.defaultOpen ?? !1);
-    }), i;
-  }), o = a.useMemo(() => {
-    const i = /* @__PURE__ */ new Map();
+      f.drawer && (a[f.id] = f.drawer.defaultOpen ?? !1);
+    }), a;
+  }), o = i.useMemo(() => {
+    const a = /* @__PURE__ */ new Map();
     return t.forEach((f) => {
-      i.set(f.id, f);
-    }), i;
-  }, [t]), r = T((i, f) => {
-    o.get(i)?.drawer?.onStateChange?.(f);
-  }), s = a.useCallback(
-    (i) => {
-      const f = o.get(i);
-      return f?.drawer ? f.drawer.open !== void 0 ? f.drawer.open : e[i] ?? !1 : !1;
+      a.set(f.id, f);
+    }), a;
+  }, [t]), r = T((a, f) => {
+    o.get(a)?.drawer?.onStateChange?.(f);
+  }), s = i.useCallback(
+    (a) => {
+      const f = o.get(a);
+      return f?.drawer ? f.drawer.open !== void 0 ? f.drawer.open : e[a] ?? !1 : !1;
     },
     [o, e]
-  ), c = a.useCallback(
-    (i) => {
-      const f = o.get(i);
+  ), c = i.useCallback(
+    (a) => {
+      const f = o.get(a);
       if (f?.drawer) {
         if (f.drawer.open !== void 0) {
-          r(i, !0);
+          r(a, !0);
           return;
         }
-        n((d) => d[i] ? d : (r(i, !0), { ...d, [i]: !0 }));
+        n((d) => d[a] ? d : (r(a, !0), { ...d, [a]: !0 }));
       }
     },
     [o, r]
-  ), u = a.useCallback(
-    (i) => {
-      const f = o.get(i);
+  ), u = i.useCallback(
+    (a) => {
+      const f = o.get(a);
       if (f?.drawer) {
         if (f.drawer.open !== void 0) {
-          r(i, !1);
+          r(a, !1);
           return;
         }
-        n((d) => d[i] ? (r(i, !1), { ...d, [i]: !1 }) : d);
+        n((d) => d[a] ? (r(a, !1), { ...d, [a]: !1 }) : d);
       }
     },
     [o, r]
@@ -232,52 +234,50 @@ const re = (t) => {
     open: c,
     close: u
   };
-}, oe = ({ layers: t }) => {
-  const e = re(t), n = a.useMemo(() => t.filter((r) => r.drawer), [t]), o = a.useMemo(() => {
+}, se = ({ layers: t }) => {
+  const e = oe(t), n = i.useMemo(() => t.filter((r) => r.drawer), [t]), o = i.useMemo(() => {
     const r = /* @__PURE__ */ new Map();
     return n.forEach((s) => {
       r.set(s.id, () => e.close(s.id));
     }), r;
   }, [n, e.close]);
-  return /* @__PURE__ */ w(O, { children: n.map((r) => {
+  return /* @__PURE__ */ h($, { children: n.map((r) => {
     if (!r.drawer)
       return null;
     const s = e.state(r.id), c = o.get(r.id);
-    return c ? /* @__PURE__ */ w(
-      ne,
+    return c ? /* @__PURE__ */ h(
+      re,
       {
         id: r.id,
         config: r.drawer,
         isOpen: s,
         onClose: c,
-        style: r.style,
         zIndex: r.zIndex,
         width: r.width,
         height: r.height,
         position: r.position,
-        backdropStyle: r.backdropStyle,
         children: r.component
       },
       r.id
     ) : null;
   }) });
-}, zt = a.createContext(null), se = ({ value: t, children: e }) => /* @__PURE__ */ w(zt.Provider, { value: t, children: e }), ie = () => {
-  const t = a.useContext(zt);
+}, Rt = i.createContext(null), ie = ({ value: t, children: e }) => /* @__PURE__ */ h(Rt.Provider, { value: t, children: e }), ae = () => {
+  const t = i.useContext(Rt);
   if (!t)
     throw new Error("useGridLayoutContext must be used within a GridLayoutProvider.");
   return t;
-}, Ct = a.createContext(null), ae = () => {
-  const t = a.useContext(Ct);
+}, Pt = i.createContext(null), ce = () => {
+  const t = i.useContext(Pt);
   if (!t)
     throw new Error("usePanelSystem must be used within a PanelSystemProvider.");
   return t;
-}, ce = ({ config: t, layers: e, style: n, children: o }) => {
-  const r = a.useMemo(() => {
+}, ue = ({ config: t, layers: e, style: n, children: o }) => {
+  const r = i.useMemo(() => {
     const c = /* @__PURE__ */ new Map();
     return e.forEach((u) => {
       c.set(u.id, u);
     }), c;
-  }, [e]), s = a.useMemo(
+  }, [e]), s = i.useMemo(
     () => ({
       config: t,
       style: n,
@@ -288,57 +288,57 @@ const re = (t) => {
     }),
     [t, n, e, r]
   );
-  return /* @__PURE__ */ w(Ct.Provider, { value: s, children: o });
-}, Rt = a.createContext(null), Pt = ({ layerId: t, children: e }) => {
-  const n = a.useMemo(() => ({ layerId: t }), [t]);
-  return /* @__PURE__ */ w(Rt.Provider, { value: n, children: e });
-}, Sn = () => {
-  const t = a.useContext(Rt);
+  return /* @__PURE__ */ h(Pt.Provider, { value: s, children: o });
+}, yt = i.createContext(null), Dt = ({ layerId: t, children: e }) => {
+  const n = i.useMemo(() => ({ layerId: t }), [t]);
+  return /* @__PURE__ */ h(yt.Provider, { value: n, children: e });
+}, Cn = () => {
+  const t = i.useContext(yt);
   if (!t)
     throw new Error("useLayerInstance must be used within a LayerInstanceProvider.");
   return t;
-}, lt = (t, e, n) => {
+}, ft = (t, e, n) => {
   if (typeof t == "number" && Number.isFinite(t))
     return t;
   throw new Error(`Popup layer "${n}" requires a numeric "${e}" value.`);
-}, yt = (t, e) => {
+}, Lt = (t, e) => {
   if (!t)
     throw new Error(`Popup layer "${e}" must define position (left/top).`);
   return {
-    left: lt(t.left, "left", e),
-    top: lt(t.top, "top", e)
+    left: ft(t.left, "left", e),
+    top: ft(t.top, "top", e)
   };
-}, F = (t) => `${Math.round(t)}`, A = (t) => {
+}, W = (t) => `${Math.round(t)}`, A = (t) => {
   if (t !== void 0)
     return t ? "yes" : "no";
-}, ue = (t, e, n, o, r) => {
-  const s = {}, c = yt(e, t);
+}, le = (t, e, n, o, r) => {
+  const s = {}, c = Lt(e, t);
   if (typeof n != "number" || typeof o != "number")
     throw new Error(`Popup layer "${t}" requires numeric width/height.`);
-  s.width = F(n), s.height = F(o), s.left = F(c.left), s.top = F(c.top);
+  s.width = W(n), s.height = W(o), s.left = W(c.left), s.top = W(c.top);
   const u = r?.features;
   if (u) {
-    const i = A(u.toolbar), f = A(u.menubar), d = A(u.location), p = A(u.status), h = A(u.resizable), v = A(u.scrollbars);
-    i !== void 0 && (s.toolbar = i), f !== void 0 && (s.menubar = f), d !== void 0 && (s.location = d), p !== void 0 && (s.status = p), h !== void 0 && (s.resizable = h), v !== void 0 && (s.scrollbars = v);
+    const a = A(u.toolbar), f = A(u.menubar), d = A(u.location), p = A(u.status), m = A(u.resizable), E = A(u.scrollbars);
+    a !== void 0 && (s.toolbar = a), f !== void 0 && (s.menubar = f), d !== void 0 && (s.location = d), p !== void 0 && (s.status = p), m !== void 0 && (s.resizable = m), E !== void 0 && (s.scrollbars = E);
   }
-  return Object.entries(s).map(([i, f]) => `${i}=${f}`).join(",");
-}, dt = (t, e, n, o, r) => {
-  const s = yt(n, e);
+  return Object.entries(s).map(([a, f]) => `${a}=${f}`).join(",");
+}, pt = (t, e, n, o, r) => {
+  const s = Lt(n, e);
   if (typeof o != "number" || typeof r != "number")
     throw new Error(`Popup layer "${e}" requires numeric width/height.`);
   t.moveTo(Math.round(s.left), Math.round(s.top)), t.resizeTo(Math.round(o), Math.round(r));
-}, le = ({ layer: t }) => {
+}, de = ({ layer: t }) => {
   const e = t.floating;
   if (!e)
     throw new Error(`Layer "${t.id}" is missing floating configuration required for popup mode.`);
   if ((e.mode ?? "embedded") !== "popup")
     throw new Error(`PopupLayerPortal received layer "${t.id}" that is not configured for popup mode.`);
-  const o = a.useRef(null), r = a.useRef(null), [s, c] = a.useState(!1);
-  return a.useEffect(() => {
+  const o = i.useRef(null), r = i.useRef(null), [s, c] = i.useState(!1);
+  return i.useEffect(() => {
     if (typeof window > "u")
       return;
-    const u = ue(t.id, t.position, t.width, t.height, e.popup), i = e.popup?.name ?? t.id, f = de(
-      i,
+    const u = le(t.id, t.position, t.width, t.height, e.popup), a = e.popup?.name ?? t.id, f = fe(
+      a,
       u,
       {
         position: t.position,
@@ -351,12 +351,12 @@ const re = (t) => {
     const d = f;
     r.current = d, e.popup?.focus !== !1 && d.focus(), d.document.title || (d.document.title = t.id), d.document.body.innerHTML = "";
     const p = d.document.createElement("div");
-    p.dataset.layerId = t.id, d.document.body.appendChild(p), o.current = p, c(!0), dt(d, t.id, t.position, t.width, t.height);
-    const h = () => {
+    p.dataset.layerId = t.id, d.document.body.appendChild(p), o.current = p, c(!0), pt(d, t.id, t.position, t.width, t.height);
+    const m = () => {
       r.current = null, o.current = null, c(!1);
     };
-    return d.addEventListener("beforeunload", h), () => {
-      d.removeEventListener("beforeunload", h), e.popup?.closeOnUnmount !== !1 && d.close(), r.current = null, o.current = null, c(!1);
+    return d.addEventListener("beforeunload", m), () => {
+      d.removeEventListener("beforeunload", m), e.popup?.closeOnUnmount !== !1 && d.close(), r.current = null, o.current = null, c(!1);
     };
   }, [
     e.popup?.closeOnUnmount,
@@ -369,28 +369,28 @@ const re = (t) => {
     e.popup?.focus,
     e.popup?.name,
     t.id
-  ]), a.useEffect(() => {
+  ]), i.useEffect(() => {
     const u = r.current;
-    u && dt(u, t.id, t.position, t.width, t.height);
-  }, [t.position?.left, t.position?.top, t.height, t.width, t.id]), !s || !o.current ? null : Ft(/* @__PURE__ */ w(Pt, { layerId: t.id, children: t.component }), o.current);
-}, de = (t, e, n, o) => {
+    u && pt(u, t.id, t.position, t.width, t.height);
+  }, [t.position?.left, t.position?.top, t.height, t.width, t.id]), !s || !o.current ? null : Ut(/* @__PURE__ */ h(Dt, { layerId: t.id, children: t.component }), o.current);
+}, fe = (t, e, n, o) => {
   const r = o?.createWindow;
   return r ? r({ name: t, features: e, bounds: n }) : window.open("", t, e);
-}, Dt = {
+}, Mt = {
   position: "absolute",
   pointerEvents: "auto",
   boxSizing: "border-box",
   background: "transparent",
   border: "none"
-}, fe = {
-  ...Dt,
+}, pe = {
+  ...Mt,
   width: y,
   height: y,
   zIndex: 2
-}, pe = {
-  ...Dt,
-  zIndex: 1
 }, ge = {
+  ...Mt,
+  zIndex: 1
+}, he = {
   "top-left": {
     top: 0,
     left: 0,
@@ -415,12 +415,12 @@ const re = (t) => {
     transform: "translate(50%, 50%)",
     cursor: "nwse-resize"
   }
-}, he = {
+}, me = {
   left: {
     top: y,
     bottom: y,
     left: 0,
-    width: W,
+    width: O,
     transform: "translateX(-50%)",
     cursor: "ew-resize"
   },
@@ -428,7 +428,7 @@ const re = (t) => {
     top: y,
     bottom: y,
     right: 0,
-    width: W,
+    width: O,
     transform: "translateX(50%)",
     cursor: "ew-resize"
   },
@@ -436,7 +436,7 @@ const re = (t) => {
     left: y,
     right: y,
     top: 0,
-    height: W,
+    height: O,
     transform: "translateY(-50%)",
     cursor: "ns-resize"
   },
@@ -444,11 +444,11 @@ const re = (t) => {
     left: y,
     right: y,
     bottom: 0,
-    height: W,
+    height: O,
     transform: "translateY(50%)",
     cursor: "ns-resize"
   }
-}, me = [
+}, be = [
   { key: "top-left", variant: "corner", horizontal: "left", vertical: "top" },
   { key: "top-right", variant: "corner", horizontal: "right", vertical: "top" },
   { key: "bottom-left", variant: "corner", horizontal: "left", vertical: "bottom" },
@@ -457,9 +457,9 @@ const re = (t) => {
   { key: "right", variant: "edge", horizontal: "right" },
   { key: "top", variant: "edge", vertical: "top" },
   { key: "bottom", variant: "edge", vertical: "bottom" }
-], we = ({ layerId: t, onPointerDown: e }) => /* @__PURE__ */ w(O, { children: me.map((n) => {
-  const o = n.variant === "corner" ? fe : pe, r = n.variant === "corner" ? ge[n.key] : he[n.key], s = { ...o, ...r }, c = n.variant === "corner" ? { "data-resize-corner": n.key } : { "data-resize-edge": n.key };
-  return /* @__PURE__ */ w(
+], we = ({ layerId: t, onPointerDown: e }) => /* @__PURE__ */ h($, { children: be.map((n) => {
+  const o = n.variant === "corner" ? pe : ge, r = n.variant === "corner" ? he[n.key] : me[n.key], s = { ...o, ...r }, c = n.variant === "corner" ? { "data-resize-corner": n.key } : { "data-resize-edge": n.key };
+  return /* @__PURE__ */ h(
     "div",
     {
       role: "presentation",
@@ -471,49 +471,49 @@ const re = (t) => {
     },
     n.key
   );
-}) }), be = ({ layers: t }) => {
-  const { handleLayerPointerDown: e, getLayerRenderState: n } = ie(), o = a.useCallback((r) => r.length === 0 ? null : r.map((s) => /* @__PURE__ */ w(we, { layerId: s.layerId, onPointerDown: s.onPointerDown }, s.layerId)), []);
-  return /* @__PURE__ */ w(O, { children: t.map((r) => {
+}) }), ve = ({ layers: t }) => {
+  const { handleLayerPointerDown: e, getLayerRenderState: n } = ae(), o = i.useCallback((r) => r.length === 0 ? null : r.map((s) => /* @__PURE__ */ h(we, { layerId: s.layerId, onPointerDown: s.onPointerDown }, s.layerId)), []);
+  return /* @__PURE__ */ h($, { children: t.map((r) => {
     const s = r.floating?.mode ?? "embedded";
     if (r.floating && s === "popup")
-      return /* @__PURE__ */ w(le, { layer: r }, r.id);
-    const { style: c, isResizable: u, isResizing: i, onResizeHandlePointerDown: f } = n(r), d = {};
+      return /* @__PURE__ */ h(de, { layer: r }, r.id);
+    const { style: c, isResizable: u, isResizing: a, onResizeHandlePointerDown: f } = n(r), d = {};
     r.gridArea && (d.gridArea = r.gridArea), r.gridRow && (d.gridRow = r.gridRow), r.gridColumn && (d.gridColumn = r.gridColumn);
-    const h = u ? { ...c, ...d, position: "relative" } : { ...c, ...d }, S = o(u ? [
+    const m = u ? { ...c, ...d, position: "relative" } : { ...c, ...d }, v = o(u ? [
       {
         layerId: r.id,
         onPointerDown: f
       }
     ] : []);
-    return /* @__PURE__ */ _(
+    return /* @__PURE__ */ N(
       "div",
       {
         "data-layer-id": r.id,
         "data-draggable": !!r.floating?.draggable,
         "data-resizable": u,
-        "data-resizing": i,
-        style: h,
+        "data-resizing": a,
+        style: m,
         onPointerDown: e,
         children: [
-          /* @__PURE__ */ w(Pt, { layerId: r.id, children: r.component }),
-          S
+          /* @__PURE__ */ h(Dt, { layerId: r.id, children: r.component }),
+          v
         ]
       },
       r.id
     );
   }) });
 };
-function J(t, e) {
+function Q(t, e) {
   const n = T(e.onMove), o = T(e.onUp), r = T(e.onCancel);
-  a.useEffect(() => {
+  i.useEffect(() => {
     if (t)
       return e.onMove && document.addEventListener("pointermove", n, { passive: !1 }), e.onUp && document.addEventListener("pointerup", o), e.onCancel && document.addEventListener("pointercancel", r), () => {
         e.onMove && document.removeEventListener("pointermove", n), e.onUp && document.removeEventListener("pointerup", o), e.onCancel && document.removeEventListener("pointercancel", r);
       };
   }, [t, e.onMove, e.onUp, e.onCancel, n, o, r]);
 }
-function ve(t, e, n) {
-  a.useEffect(() => {
+function Ee(t, e, n) {
+  i.useEffect(() => {
     const o = t.current;
     if (!(!e || !o || n === void 0))
       return o.setPointerCapture(n), () => {
@@ -521,8 +521,8 @@ function ve(t, e, n) {
       };
   }, [t, e, n]);
 }
-function Ee(t, e, n = ["pointerdown", "pointermove", "pointerup"]) {
-  a.useEffect(() => {
+function ze(t, e, n = ["pointerdown", "pointermove", "pointerup"]) {
+  i.useEffect(() => {
     const o = t.current;
     if (!e || !o)
       return;
@@ -538,31 +538,31 @@ function Ee(t, e, n = ["pointerdown", "pointermove", "pointerup"]) {
     };
   }, [t, e, n]);
 }
-function Se(t, e, n) {
-  const { onMove: o, onUp: r, onCancel: s, pointerId: c, capturePointer: u = !0, preventDefaults: i = !0 } = n;
-  J(e, { onMove: o, onUp: r, onCancel: s }), ve(t, e ? u : !1, c), Ee(t, e ? i : !1);
+function Ce(t, e, n) {
+  const { onMove: o, onUp: r, onCancel: s, pointerId: c, capturePointer: u = !0, preventDefaults: a = !0 } = n;
+  Q(e, { onMove: o, onUp: r, onCancel: s }), Ee(t, e ? u : !1, c), ze(t, e ? a : !1);
 }
-const ze = (t) => {
-  const e = a.useRef(null), n = a.useRef(null), o = a.useRef(0), [r, s] = a.useState(!1), c = T((p) => {
+const Se = (t) => {
+  const e = i.useRef(null), n = i.useRef(null), o = i.useRef(0), [r, s] = i.useState(!1), c = T((p) => {
     t.onResize?.(p);
-  }), u = a.useCallback(
+  }), u = i.useCallback(
     (p) => t.axis === "x" ? p.clientX : p.clientY,
     [t.axis]
-  ), i = a.useCallback(
+  ), a = i.useCallback(
     (p) => {
       p.preventDefault(), e.current = p.currentTarget, n.current = p.pointerId, o.current = u(p), s(!0);
     },
     [u]
-  ), f = a.useCallback(
+  ), f = i.useCallback(
     (p) => {
-      const h = u(p), v = h - o.current;
-      v !== 0 && (o.current = h, c(v));
+      const m = u(p), E = m - o.current;
+      E !== 0 && (o.current = m, c(E));
     },
     [u, c]
-  ), d = a.useCallback(() => {
+  ), d = i.useCallback(() => {
     s(!1), n.current = null;
   }, []);
-  return Se(e, r, {
+  return Ce(e, r, {
     onMove: f,
     onUp: d,
     pointerId: n.current ?? void 0,
@@ -570,71 +570,71 @@ const ze = (t) => {
     preventDefaults: !1
   }), {
     ref: e,
-    onPointerDown: i,
+    onPointerDown: a,
     isDragging: r
   };
-}, Ce = ({
+}, Re = ({
   element: t,
   component: e
-}) => a.forwardRef(({ children: n, ...o }, r) => t ? a.cloneElement(
+}) => i.forwardRef(({ children: n, ...o }, r) => t ? i.cloneElement(
   t,
   { ...o, ref: r },
   n ?? t.props.children
-) : e ? /* @__PURE__ */ w(e, { ...o, ref: r, children: n }) : /* @__PURE__ */ w("div", { ...o, ref: r, children: n }));
-function Re({
+) : e ? /* @__PURE__ */ h(e, { ...o, ref: r, children: n }) : /* @__PURE__ */ h("div", { ...o, ref: r, children: n }));
+function Pe({
   element: t,
   component: e
 }) {
-  return a.useMemo(
-    () => Ce({
+  return i.useMemo(
+    () => Re({
       element: t,
       component: e
     }),
     [e, t]
   );
 }
-const Pe = {
+const ye = {
   position: "absolute",
-  zIndex: Wt
-}, ye = {
+  zIndex: Xt
+}, De = {
   vertical: {
-    width: ct,
+    width: ut,
     height: "100%",
     top: 0,
     cursor: "col-resize"
   },
   horizontal: {
     width: "100%",
-    height: ct,
+    height: ut,
     left: 0,
     cursor: "row-resize"
   }
-}, De = {
-  idle: Ot,
-  hovered: Gt,
-  dragging: Nt
-}, Le = ({
+}, Le = {
+  idle: Yt,
+  hovered: Bt,
+  dragging: Wt
+}, Me = ({
   direction: t,
   onResize: e,
   component: n,
   element: o,
   children: r
 }) => {
-  const s = t === "vertical" ? "x" : "y", { ref: c, isDragging: u, onPointerDown: i } = ze({ axis: s, onResize: e }), [f, d] = a.useState(!1), p = a.useCallback(() => {
+  const s = t === "vertical" ? "x" : "y", { ref: c, isDragging: u, onPointerDown: a } = Se({ axis: s, onResize: e }), [f, d] = i.useState(!1), p = i.useCallback(() => {
     d(!0);
-  }, []), h = a.useCallback(() => {
+  }, []), m = i.useCallback(() => {
     d(!1);
-  }, []), v = Re({
+  }, []), E = Pe({
     element: o,
     component: n
-  }), S = a.useMemo(() => u ? "dragging" : f ? "hovered" : "idle", [u, f]), P = a.useMemo(() => ({
-    ...Pe,
-    ...ye[t],
-    backgroundColor: De[S],
+  }), v = i.useMemo(() => u ? "dragging" : f ? "hovered" : "idle", [u, f]), P = i.useMemo(() => ({
+    ...ye,
+    ...De[t],
+    backgroundColor: Le[v],
     touchAction: "none"
-  }), [t, S]);
-  return /* @__PURE__ */ w(
-    v,
+  }), [t, v]);
+  return /* @__PURE__ */ h(
+    E,
     {
       ref: c,
       style: P,
@@ -644,16 +644,16 @@ const Pe = {
       "data-resize-handle": "true",
       "data-direction": t,
       "data-is-dragging": u ? "true" : void 0,
-      onPointerDown: i,
+      onPointerDown: a,
       onPointerEnter: p,
-      onPointerLeave: h,
+      onPointerLeave: m,
       children: r
     }
   );
-}, ft = {
+}, gt = {
   position: "absolute",
   pointerEvents: "auto"
-}, pt = ({
+}, ht = ({
   direction: t,
   trackIndex: e,
   align: n,
@@ -661,28 +661,29 @@ const Pe = {
   span: r,
   onResize: s
 }) => {
-  const c = t === "col" ? "vertical" : "horizontal", u = a.useCallback(
+  const c = t === "col" ? "vertical" : "horizontal", u = i.useCallback(
     (d) => {
-      s(t, e, d);
+      const p = n === "start" ? -d : d;
+      s(t, e, p);
     },
-    [t, e, s]
-  ), i = a.useMemo(() => t === "col" ? {
+    [n, t, e, s]
+  ), a = i.useMemo(() => t === "col" ? {
     gridColumn: `${e + 1} / ${e + 2}`,
     gridRow: `${r.start} / ${r.end}`
   } : {
     gridRow: `${e + 1} / ${e + 2}`,
     gridColumn: `${r.start} / ${r.end}`
-  }, [t, e, r]), f = a.useMemo(() => {
+  }, [t, e, r]), f = i.useMemo(() => {
     const p = Math.max(0, o) / 2 + K / 2;
     return t === "col" ? {
-      ...ft,
+      ...gt,
       width: K,
       height: "100%",
       top: 0,
       bottom: 0,
       ...n === "start" ? { left: -p } : { right: -p }
     } : {
-      ...ft,
+      ...gt,
       width: "100%",
       height: K,
       left: 0,
@@ -690,8 +691,8 @@ const Pe = {
       ...n === "start" ? { top: -p } : { bottom: -p }
     };
   }, [n, t, o]);
-  return /* @__PURE__ */ w("div", { "data-resizable": "true", style: { ...i, position: "relative", pointerEvents: "none" }, children: /* @__PURE__ */ w("div", { "data-direction": c, "data-align": n, "data-handle": "true", style: f, children: /* @__PURE__ */ w(Le, { direction: c, onResize: u }) }) });
-}, Me = (t) => {
+  return /* @__PURE__ */ h("div", { "data-resizable": "true", style: { ...a, position: "relative", pointerEvents: "none" }, children: /* @__PURE__ */ h("div", { "data-direction": c, "data-align": n, "data-handle": "true", style: f, children: /* @__PURE__ */ h(Me, { direction: c, onResize: u }) }) });
+}, xe = (t) => {
   const e = /* @__PURE__ */ new Map();
   t.forEach((o, r) => {
     o.forEach((s, c) => {
@@ -708,25 +709,25 @@ const Pe = {
         e.set(s, f);
         return;
       }
-      const i = {
+      const a = {
         rowStart: r,
         rowEnd: r,
         colStart: c,
         colEnd: c
       };
-      e.set(s, i);
+      e.set(s, a);
     });
   });
   const n = /* @__PURE__ */ new Map();
   return e.forEach((o, r) => {
-    const s = o.rowStart + 1, c = o.rowEnd + 2, u = o.colStart + 1, i = o.colEnd + 2, f = {
+    const s = o.rowStart + 1, c = o.rowEnd + 2, u = o.colStart + 1, a = o.colEnd + 2, f = {
       gridArea: r,
       gridRow: `${s} / ${c}`,
-      gridColumn: `${u} / ${i}`
+      gridColumn: `${u} / ${a}`
     };
     n.set(r, f);
   }), n;
-}, xe = (t, e) => {
+}, ke = (t, e) => {
   if ((t.positionMode ?? "grid") !== "grid")
     return t;
   const o = t.gridArea ?? t.id, r = e.get(o);
@@ -739,17 +740,17 @@ const Pe = {
     gridRow: c ? r.gridRow : t.gridRow,
     gridColumn: u ? r.gridColumn : t.gridColumn
   };
-}, ke = (t, e) => {
-  const n = a.useMemo(() => Me(t.areas), [t.areas]), o = a.useMemo(() => e.map((u) => xe(u, n)), [e, n]), r = a.useMemo(
+}, Te = (t, e) => {
+  const n = i.useMemo(() => xe(t.areas), [t.areas]), o = i.useMemo(() => e.map((u) => ke(u, n)), [e, n]), r = i.useMemo(
     () => o.filter((u) => u.visible !== !1),
     [o]
-  ), s = a.useMemo(
+  ), s = i.useMemo(
     () => r.filter((u) => !u.drawer),
     [r]
-  ), c = a.useMemo(() => {
+  ), c = i.useMemo(() => {
     const u = /* @__PURE__ */ new Map();
-    return o.forEach((i) => {
-      u.set(i.id, i);
+    return o.forEach((a) => {
+      u.set(a.id, a);
     }), u;
   }, [o]);
   return {
@@ -758,42 +759,42 @@ const Pe = {
     regularLayers: s,
     layerById: c
   };
-}, Te = typeof window < "u" && typeof window.document < "u", Lt = Te ? a.useLayoutEffect : a.useEffect, U = (t, e) => `${t}-${e}`, Ie = (t, e, n, o) => {
+}, Ie = typeof window < "u" && typeof window.document < "u", xt = Ie ? i.useLayoutEffect : i.useEffect, U = (t, e) => `${t}-${e}`, He = (t, e, n, o) => {
   const r = U(n, o), s = e[r];
   return s !== void 0 ? `${s}px` : t.size;
-}, gt = (t, e, n) => t.map((o, r) => Ie(o, e, n, r)).join(" "), B = (t, e) => t.reduce((n, o, r) => (o.resizable && o.size.endsWith("px") && (n[U(e, r)] = parseInt(o.size, 10)), n), {}), He = (t, e, n) => {
+}, mt = (t, e, n) => t.map((o, r) => He(o, e, n, r)).join(" "), B = (t, e) => t.reduce((n, o, r) => (o.resizable && o.size.endsWith("px") && (n[U(e, r)] = parseInt(o.size, 10)), n), {}), Ae = (t, e, n) => {
   const o = e !== void 0 ? Math.max(t, e) : t;
   return n !== void 0 ? Math.min(o, n) : o;
-}, Ae = (t, e, n) => {
+}, Ne = (t, e, n) => {
   const o = t + e;
-  return He(o, n.minSize, n.maxSize);
-}, _e = (t, e, n, o, r) => {
+  return Ae(o, n.minSize, n.maxSize);
+}, $e = (t, e, n, o, r) => {
   const s = U(t, e);
   return (c) => {
-    const u = Ae(n, o, r);
+    const u = Ne(n, o, r);
     return { ...c, [s]: u };
   };
-}, ht = (t, e) => {
+}, bt = (t, e) => {
   const n = t.length, o = [];
   for (let c = 0; c < n; c++) {
-    const u = t[c], i = u[e], f = u[e + 1];
-    i !== f && o.push(c);
+    const u = t[c], a = u[e], f = u[e + 1];
+    a !== f && o.push(c);
   }
   if (o.length === 0)
     return { start: 1, end: n + 1 };
   const r = Math.min(...o), s = Math.max(...o);
   return { start: r + 1, end: s + 2 };
-}, mt = (t, e) => {
+}, wt = (t, e) => {
   const n = t[e], o = t[e + 1], r = n?.length ?? 0, s = [];
-  for (let i = 0; i < r; i++) {
-    const f = n?.[i], d = o?.[i];
-    f !== d && s.push(i);
+  for (let a = 0; a < r; a++) {
+    const f = n?.[a], d = o?.[a];
+    f !== d && s.push(a);
   }
   if (s.length === 0)
     return { start: 1, end: r + 1 };
   const c = Math.min(...s), u = Math.max(...s);
   return { start: c + 1, end: u + 2 };
-}, $e = (t, e) => {
+}, _e = (t, e) => {
   if (t.length === 0)
     return [];
   const n = e.length;
@@ -803,16 +804,16 @@ const Pe = {
   return Array.from({ length: t.length - 1 }, (s, c) => c).forEach((s) => {
     const c = t[s];
     if (t[s + 1]?.resizable) {
-      const i = ht(e, s);
-      o.push({ trackIndex: s + 1, align: "start", span: i });
+      const a = bt(e, s);
+      o.push({ trackIndex: s + 1, align: "start", span: a });
       return;
     }
     if (c?.resizable) {
-      const i = ht(e, s);
-      o.push({ trackIndex: s, align: "end", span: i });
+      const a = bt(e, s);
+      o.push({ trackIndex: s, align: "end", span: a });
     }
   }), o;
-}, Ne = (t, e) => {
+}, Ge = (t, e) => {
   if (t.length === 0)
     return [];
   const n = e[0]?.length ?? 0;
@@ -822,16 +823,16 @@ const Pe = {
   return Array.from({ length: t.length - 1 }, (s, c) => c).forEach((s) => {
     const c = t[s];
     if (t[s + 1]?.resizable) {
-      const i = mt(e, s);
-      o.push({ trackIndex: s + 1, align: "start", span: i });
+      const a = wt(e, s);
+      o.push({ trackIndex: s + 1, align: "start", span: a });
       return;
     }
     if (c?.resizable) {
-      const i = mt(e, s);
-      o.push({ trackIndex: s, align: "end", span: i });
+      const a = wt(e, s);
+      o.push({ trackIndex: s, align: "end", span: a });
     }
   }), o;
-}, Ge = (t) => {
+}, Fe = (t) => {
   if (!t)
     return { rowGap: 0, columnGap: 0 };
   const e = t.split(/\s+/).map((o) => o.trim()).filter(Boolean), n = (o) => {
@@ -849,41 +850,41 @@ const Pe = {
 }, Oe = (t) => t !== void 0 ? { gap: t } : {}, We = (t, e, n, o) => {
   const r = U(n, o), s = t[r];
   return s !== void 0 ? s : e.size.endsWith("px") ? Number.parseInt(e.size, 10) : 300;
-}, Fe = (t, e) => {
-  const [n, o] = a.useState(() => ({
+}, Be = (t, e) => {
+  const [n, o] = i.useState(() => ({
     ...B(t.columns, "col"),
     ...B(t.rows, "row")
   }));
-  Lt(() => {
+  xt(() => {
     const d = {
       ...B(t.columns, "col"),
       ...B(t.rows, "row")
     };
     o((p) => {
-      const h = /* @__PURE__ */ new Set([...Object.keys(p), ...Object.keys(d)]);
-      return Array.from(h).some((S) => p[S] !== d[S]) ? d : p;
+      const m = /* @__PURE__ */ new Set([...Object.keys(p), ...Object.keys(d)]);
+      return Array.from(m).some((v) => p[v] !== d[v]) ? d : p;
     });
   }, [t.columns, t.rows]);
-  const r = a.useMemo(() => t.areas.map((d) => `"${d.join(" ")}"`).join(" "), [t.areas]), s = a.useMemo(() => Ge(t.gap), [t.gap]), c = a.useMemo(
-    () => $e(t.columns, t.areas),
+  const r = i.useMemo(() => t.areas.map((d) => `"${d.join(" ")}"`).join(" "), [t.areas]), s = i.useMemo(() => Fe(t.gap), [t.gap]), c = i.useMemo(
+    () => _e(t.columns, t.areas),
     [t.columns, t.areas]
-  ), u = a.useMemo(
-    () => Ne(t.rows, t.areas),
+  ), u = i.useMemo(
+    () => Ge(t.rows, t.areas),
     [t.rows, t.areas]
-  ), i = a.useMemo(() => ({
+  ), a = i.useMemo(() => ({
     ...t.style,
     ...e,
     gridTemplateAreas: r,
-    gridTemplateRows: gt(t.rows, n, "row"),
-    gridTemplateColumns: gt(t.columns, n, "col"),
+    gridTemplateRows: mt(t.rows, n, "row"),
+    gridTemplateColumns: mt(t.columns, n, "col"),
     ...Oe(t.gap)
-  }), [r, t.columns, t.gap, t.rows, t.style, e, n]), f = a.useCallback(
-    (d, p, h) => {
-      const S = (d === "row" ? t.rows : t.columns)[p];
-      if (!S || !S.resizable)
+  }), [r, t.columns, t.gap, t.rows, t.style, e, n]), f = i.useCallback(
+    (d, p, m) => {
+      const v = (d === "row" ? t.rows : t.columns)[p];
+      if (!v || !v.resizable)
         return;
-      const P = We(n, S, d, p);
-      o(_e(d, p, P, h, S));
+      const P = We(n, v, d, p);
+      o($e(d, p, P, m, v));
     },
     [t.columns, t.rows, n]
   );
@@ -891,65 +892,65 @@ const Pe = {
     columnHandles: c,
     rowHandles: u,
     gapSizes: s,
-    gridStyle: i,
+    gridStyle: a,
     handleResize: f
   };
-}, Be = (t, e = Number.NEGATIVE_INFINITY, n = Number.POSITIVE_INFINITY) => Math.min(Math.max(t, e), n), zn = (t, e) => typeof t != "number" || !Number.isFinite(t) ? e : t, Ye = (t) => t.positionMode ? t.positionMode : t.floating ? (t.floating.mode ?? "embedded") === "embedded" ? "absolute" : "relative" : "grid", Xe = (t) => ({ position: t === "grid" ? "relative" : t }), Ue = (t, e) => e !== "grid" ? {} : {
+}, Ye = (t, e = Number.NEGATIVE_INFINITY, n = Number.POSITIVE_INFINITY) => Math.min(Math.max(t, e), n), Sn = (t, e) => typeof t != "number" || !Number.isFinite(t) ? e : t, Xe = (t) => t.positionMode ? t.positionMode : t.floating ? (t.floating.mode ?? "embedded") === "embedded" ? "absolute" : "relative" : "grid", Ue = (t) => ({ position: t === "grid" ? "relative" : t }), je = (t, e) => e !== "grid" ? {} : {
   gridArea: t.gridArea,
   gridRow: t.gridRow,
   gridColumn: t.gridColumn
-}, je = (t) => t ? {
+}, Ve = (t) => t ? {
   top: t.top,
   right: t.right,
   bottom: t.bottom,
   left: t.left
-} : {}, Ze = (t) => t !== void 0 ? { zIndex: t } : {}, Ve = (t, e) => ({
+} : {}, Ze = (t) => t !== void 0 ? { zIndex: t } : {}, Ke = (t, e) => ({
   width: t,
   height: e
-}), Ke = (t, e) => t.pointerEvents !== void 0 ? typeof t.pointerEvents == "boolean" ? { pointerEvents: t.pointerEvents ? "auto" : "none" } : { pointerEvents: t.pointerEvents } : e === "absolute" || e === "fixed" ? { pointerEvents: "auto" } : {}, qe = (t) => t.position, Je = (t) => ({
+}), qe = (t, e) => t.pointerEvents !== void 0 ? typeof t.pointerEvents == "boolean" ? { pointerEvents: t.pointerEvents ? "auto" : "none" } : { pointerEvents: t.pointerEvents } : e === "absolute" || e === "fixed" ? { pointerEvents: "auto" } : {}, Je = (t) => t.position, Qe = (t) => ({
   width: t.width,
   height: t.height
-}), Qe = (t) => t.zIndex, tn = (t) => {
-  const e = Ye(t), n = qe(t), o = Je(t), r = Qe(t);
+}), tn = (t) => t.zIndex, en = (t) => {
+  const e = Xe(t), n = Je(t), o = Qe(t), r = tn(t);
   return {
     ...t.style,
-    ...Xe(e),
-    ...Ue(t, e),
-    ...je(n),
+    ...Ue(e),
+    ...je(t, e),
+    ...Ve(n),
     ...Ze(r),
-    ...Ve(o.width, o.height),
-    ...Ke(t, e)
+    ...Ke(o.width, o.height),
+    ...qe(t, e)
   };
-}, en = (t) => {
+}, nn = (t) => {
   const e = t.floating;
   return e ? e.mode ?? "embedded" : null;
-}, I = (t) => en(t) !== "embedded" ? null : t.floating ?? null, wt = (t) => t instanceof HTMLElement ? ["INPUT", "TEXTAREA", "SELECT", "BUTTON"].includes(t.tagName) : !1, bt = (t, e, n) => {
+}, I = (t) => nn(t) !== "embedded" ? null : t.floating ?? null, vt = (t) => t instanceof HTMLElement ? ["INPUT", "TEXTAREA", "SELECT", "BUTTON"].includes(t.tagName) : !1, Et = (t, e, n) => {
   const o = e ?? Number.NEGATIVE_INFINITY, r = n ?? Number.POSITIVE_INFINITY;
-  return Be(t, o, r);
-}, vt = (t, e, n) => {
+  return Ye(t, o, r);
+}, zt = (t, e, n) => {
   if (typeof t == "number" && Number.isFinite(t))
     return t;
   throw new Error(
     `Floating layer "${n}" must provide a numeric "${e}" value when draggable mode is enabled.`
   );
-}, Et = (t) => {
+}, Ct = (t) => {
   if (!I(t))
     throw new Error(`Floating layer "${t.id}" is missing floating configuration required for dragging.`);
   const n = t.position;
   if (!n)
     throw new Error(`Floating layer "${t.id}" must define position with left and top values.`);
   return {
-    left: vt(n.left, "left", t.id),
-    top: vt(n.top, "top", t.id)
+    left: zt(n.left, "left", t.id),
+    top: zt(n.top, "top", t.id)
   };
-}, nn = (t) => {
+}, rn = (t) => {
   const e = I(t);
   return e ? e.constraints ?? {} : {};
-}, rn = (t, e, n) => t ? t === "left" ? e - n : e + n : e, on = (t, e, n) => t ? t === "top" ? e - n : e + n : e, sn = (t, e, n) => !t || t === "right" ? e : e + n, an = (t, e, n) => !t || t === "bottom" ? e : e + n, Q = (t, e) => t ? t.dataset.layerId === e ? t : Q(t.parentElement, e) : null, tt = (t, e, n) => !t || n?.(t) ? null : e(t) ? t : tt(t.parentElement, e, n), cn = (t) => t instanceof HTMLElement ? tt(
+}, on = (t, e, n) => t ? t === "left" ? e - n : e + n : e, sn = (t, e, n) => t ? t === "top" ? e - n : e + n : e, an = (t, e, n) => !t || t === "right" ? e : e + n, cn = (t, e, n) => !t || t === "bottom" ? e : e + n, tt = (t, e) => t ? t.dataset.layerId === e ? t : tt(t.parentElement, e) : null, et = (t, e, n) => !t || n?.(t) ? null : e(t) ? t : et(t.parentElement, e, n), un = (t) => t instanceof HTMLElement ? et(
   t,
   (e) => e.dataset.dragHandle === "true",
   (e) => e.dataset.dragIgnore === "true"
-) : null, St = (t) => t instanceof HTMLElement ? tt(
+) : null, St = (t) => t instanceof HTMLElement ? et(
   t,
   (e) => e.dataset.resizeCorner !== void 0 || e.dataset.resizeEdge !== void 0
 ) !== null : !1, Y = (t) => {
@@ -958,55 +959,55 @@ const Pe = {
 }, X = (t) => {
   if (!I(t))
     return null;
-  const n = dn(t);
+  const n = fn(t);
   if (!n)
     throw new Error(`Floating layer "${t.id}" must define width and height when resizable or draggable.`);
   return {
     width: n.width,
     height: n.height
   };
-}, un = (t, e, n) => {
-  const o = t.filter(Y).reduce((p, h) => {
-    if (n === h.id) {
-      const S = e[h.id];
-      if (S)
-        return p[h.id] = S, p;
+}, ln = (t, e, n) => {
+  const o = t.filter(Y).reduce((p, m) => {
+    if (n === m.id) {
+      const v = e[m.id];
+      if (v)
+        return p[m.id] = v, p;
     }
-    const v = X(h);
-    return v && (p[h.id] = v), p;
-  }, {}), r = Object.keys(e), s = Object.keys(o), c = r.length !== s.length, u = r.some((p) => !Object.prototype.hasOwnProperty.call(o, p)), i = c ? !0 : u, f = s.some((p) => {
-    const h = e[p], v = o[p];
-    return !h || !v ? !0 : h.width !== v.width || h.height !== v.height;
+    const E = X(m);
+    return E && (p[m.id] = E), p;
+  }, {}), r = Object.keys(e), s = Object.keys(o), c = r.length !== s.length, u = r.some((p) => !Object.prototype.hasOwnProperty.call(o, p)), a = c ? !0 : u, f = s.some((p) => {
+    const m = e[p], E = o[p];
+    return !m || !E ? !0 : m.width !== E.width || m.height !== E.height;
   });
   return {
     sizes: o,
-    changed: i ? !0 : f
+    changed: a ? !0 : f
   };
-}, ln = ({
+}, dn = ({
   layers: t,
   layerById: e
 }) => {
-  const [n, o] = a.useState(null), [r, s] = a.useState(null), [c, u] = a.useState({}), [i, f] = a.useState({}), d = a.useRef(null), p = a.useRef(null), h = T((g, l) => {
+  const [n, o] = i.useState(null), [r, s] = i.useState(null), [c, u] = i.useState({}), [a, f] = i.useState({}), d = i.useRef(null), p = i.useRef(null), m = T((g, l) => {
     e.get(g)?.floating?.onMove?.(l);
-  }), v = T((g, l) => {
+  }), E = T((g, l) => {
     e.get(g)?.floating?.onResize?.(l);
   });
-  Lt(() => {
-    const { sizes: g, changed: l } = un(t, i, r);
+  xt(() => {
+    const { sizes: g, changed: l } = ln(t, a, r);
     l && f(g);
   }, [t, r]);
-  const S = a.useCallback(
-    (g, l, m, b) => {
-      const E = Et(l), R = c[g] ?? { x: 0, y: 0 }, C = {
-        pointerStartX: b.clientX,
-        pointerStartY: b.clientY,
+  const v = i.useCallback(
+    (g, l, b, w) => {
+      const z = Ct(l), R = c[g] ?? { x: 0, y: 0 }, C = {
+        pointerStartX: w.clientX,
+        pointerStartY: w.clientY,
         initialTranslationX: R.x,
         initialTranslationY: R.y,
-        baseLeft: E.left,
-        baseTop: E.top,
+        baseLeft: z.left,
+        baseTop: z.top,
         layerId: g,
-        pointerId: b.pointerId,
-        target: m
+        pointerId: w.pointerId,
+        target: b
       };
       if (C.target.setPointerCapture)
         try {
@@ -1016,59 +1017,59 @@ const Pe = {
       d.current = C, o(g);
     },
     [c]
-  ), P = a.useCallback(
+  ), P = i.useCallback(
     (g) => {
-      const l = g.target, m = cn(l);
-      if (!m)
-        return;
-      const b = m.closest("[data-layer-id]")?.getAttribute("data-layer-id");
+      const l = g.target, b = un(l);
       if (!b)
         return;
-      const E = e.get(b);
-      if (!E)
+      const w = b.closest("[data-layer-id]")?.getAttribute("data-layer-id");
+      if (!w)
+        return;
+      const z = e.get(w);
+      if (!z)
         return;
-      const R = I(E);
-      if (!(!R || R.draggable !== !0) && !wt(g.target) && !St(g.target) && m) {
-        const C = Q(m, b);
+      const R = I(z);
+      if (!(!R || R.draggable !== !0) && !vt(g.target) && !St(g.target) && b) {
+        const C = tt(b, w);
         if (!C)
           return;
-        S(b, E, C, g);
+        v(w, z, C, g);
         return;
       }
     },
-    [S, e]
-  ), M = a.useCallback(
+    [v, e]
+  ), M = i.useCallback(
     (g, l) => {
-      const m = e.get(g), b = m ? I(m) : null;
-      if (!m || !b || b.draggable !== !0 || wt(l.target) || St(l.target))
+      const b = e.get(g), w = b ? I(b) : null;
+      if (!b || !w || w.draggable !== !0 || vt(l.target) || St(l.target))
         return;
-      const E = Q(l.currentTarget, g);
-      E && S(g, m, E, l);
+      const z = tt(l.currentTarget, g);
+      z && v(g, b, z, l);
     },
-    [S, e]
-  ), x = a.useCallback(
-    (g, l, m) => {
-      const b = e.get(g);
-      if (!b || !Y(b))
+    [v, e]
+  ), x = i.useCallback(
+    (g, l, b) => {
+      const w = e.get(g);
+      if (!w || !Y(w))
         return;
-      const E = i[g] ?? X(b);
-      if (!E)
+      const z = a[g] ?? X(w);
+      if (!z)
         return;
-      const R = Et(b), C = nn(b), D = c[g] ?? { x: 0, y: 0 };
-      if (m.stopPropagation(), m.preventDefault(), m.currentTarget.setPointerCapture)
+      const R = Ct(w), C = rn(w), D = c[g] ?? { x: 0, y: 0 };
+      if (b.stopPropagation(), b.preventDefault(), b.currentTarget.setPointerCapture)
         try {
-          m.currentTarget.setPointerCapture(m.pointerId);
+          b.currentTarget.setPointerCapture(b.pointerId);
         } catch {
         }
       p.current = {
         layerId: g,
-        pointerId: m.pointerId,
+        pointerId: b.pointerId,
         horizontalEdge: l.horizontal,
         verticalEdge: l.vertical,
-        startX: m.clientX,
-        startY: m.clientY,
-        startWidth: E.width,
-        startHeight: E.height,
+        startX: b.clientX,
+        startY: b.clientY,
+        startWidth: z.width,
+        startHeight: z.height,
         startPosition: D,
         baseLeft: R.left,
         baseTop: R.top,
@@ -1076,50 +1077,50 @@ const Pe = {
         maxWidth: C.maxWidth,
         minHeight: C.minHeight,
         maxHeight: C.maxHeight,
-        target: m.currentTarget
+        target: b.currentTarget
       }, s(g);
     },
-    [e, c, i]
-  ), $ = a.useCallback(
+    [e, c, a]
+  ), _ = i.useCallback(
     (g) => {
       const l = d.current;
       if (!l)
         return;
-      const m = g.clientX - l.pointerStartX, b = g.clientY - l.pointerStartY, E = {
-        x: l.initialTranslationX + m,
-        y: l.initialTranslationY + b
+      const b = g.clientX - l.pointerStartX, w = g.clientY - l.pointerStartY, z = {
+        x: l.initialTranslationX + b,
+        y: l.initialTranslationY + w
       };
-      u((R) => ({ ...R, [l.layerId]: E })), h(l.layerId, {
-        left: l.baseLeft + E.x,
-        top: l.baseTop + E.y
+      u((R) => ({ ...R, [l.layerId]: z })), m(l.layerId, {
+        left: l.baseLeft + z.x,
+        top: l.baseTop + z.y
       });
     },
-    [h]
-  ), L = a.useCallback(
+    [m]
+  ), S = i.useCallback(
     (g) => {
       const l = p.current;
       if (!l || l.pointerId !== g.pointerId || !e.get(l.layerId))
         return;
-      const b = g.clientX - l.startX, E = g.clientY - l.startY, R = rn(l.horizontalEdge, l.startWidth, b), C = on(l.verticalEdge, l.startHeight, E), D = bt(R, l.minWidth, l.maxWidth), k = bt(C, l.minHeight, l.maxHeight), N = l.startWidth - D, j = l.startHeight - k, st = sn(
+      const w = g.clientX - l.startX, z = g.clientY - l.startY, R = on(l.horizontalEdge, l.startWidth, w), C = sn(l.verticalEdge, l.startHeight, z), D = Et(R, l.minWidth, l.maxWidth), k = Et(C, l.minHeight, l.maxHeight), G = l.startWidth - D, j = l.startHeight - k, it = an(
         l.horizontalEdge,
         l.startPosition.x,
-        N
-      ), Mt = an(l.verticalEdge, l.startPosition.y, j), Z = i[l.layerId], it = { width: D, height: k };
-      (!Z || Z.width !== D || Z.height !== k) && (f((V) => ({
-        ...V,
-        [l.layerId]: it
-      })), v(l.layerId, it));
-      const at = c[l.layerId] ?? { x: 0, y: 0 }, G = { x: st, y: Mt };
-      (at.x !== G.x || at.y !== G.y) && (u((V) => ({
-        ...V,
-        [l.layerId]: G
-      })), h(l.layerId, {
-        left: l.baseLeft + G.x,
-        top: l.baseTop + G.y
+        G
+      ), kt = cn(l.verticalEdge, l.startPosition.y, j), V = a[l.layerId], at = { width: D, height: k };
+      (!V || V.width !== D || V.height !== k) && (f((Z) => ({
+        ...Z,
+        [l.layerId]: at
+      })), E(l.layerId, at));
+      const ct = c[l.layerId] ?? { x: 0, y: 0 }, F = { x: it, y: kt };
+      (ct.x !== F.x || ct.y !== F.y) && (u((Z) => ({
+        ...Z,
+        [l.layerId]: F
+      })), m(l.layerId, {
+        left: l.baseLeft + F.x,
+        top: l.baseTop + F.y
       }));
     },
-    [e, c, i, h, v]
-  ), z = a.useCallback((g) => {
+    [e, c, a, m, E]
+  ), L = i.useCallback((g) => {
     const l = d.current;
     if (l) {
       if (l.pointerId === g.pointerId && l.target.releasePointerCapture)
@@ -1130,7 +1131,7 @@ const Pe = {
       d.current = null;
     }
     o(null);
-  }, []), H = a.useCallback((g) => {
+  }, []), H = i.useCallback((g) => {
     const l = p.current;
     if (l) {
       if (l.pointerId === g.pointerId && l.target.releasePointerCapture)
@@ -1142,53 +1143,53 @@ const Pe = {
     }
     s(null);
   }, []);
-  J(n !== null, {
-    onMove: $,
-    onUp: z,
-    onCancel: z
-  }), J(r !== null, {
-    onMove: L,
+  Q(n !== null, {
+    onMove: _,
+    onUp: L,
+    onCancel: L
+  }), Q(r !== null, {
+    onMove: S,
     onUp: H,
     onCancel: H
   });
-  const et = a.useCallback(
+  const nt = i.useCallback(
     (g) => {
-      const l = tn(g), m = I(g);
-      if (!m || m.draggable !== !0)
+      const l = en(g), b = I(g);
+      if (!b || b.draggable !== !0)
         return l;
-      const b = c[g.id], E = n === g.id, R = r === g.id, C = b ? { transform: `translate(${b.x}px, ${b.y}px)` } : {}, D = i[g.id], k = Y(g) ? X(g) : null, N = D ?? k, j = N ? { width: `${N.width}px`, height: `${N.height}px` } : {};
+      const w = c[g.id], z = n === g.id, R = r === g.id, C = w ? { transform: `translate(${w.x}px, ${w.y}px)` } : {}, D = a[g.id], k = Y(g) ? X(g) : null, G = D ?? k, j = G ? { width: `${G.width}px`, height: `${G.height}px` } : {};
       return {
         ...l,
         ...j,
         ...C,
-        ...E || R ? { cursor: "grabbing" } : {}
+        ...z || R ? { cursor: "grabbing" } : {}
       };
     },
-    [n, c, i, r]
-  ), nt = a.useCallback(
+    [n, c, a, r]
+  ), rt = i.useCallback(
     (g) => {
       if (!Y(g))
         return { isResizable: !1 };
-      const m = i[g.id], b = X(g);
-      return (m ?? b) !== null ? { isResizable: !0, onPointerDown: (D, k) => {
+      const b = a[g.id], w = X(g);
+      return (b ?? w) !== null ? { isResizable: !0, onPointerDown: (D, k) => {
         x(g.id, D, k);
       } } : { isResizable: !1 };
     },
-    [x, i]
-  ), rt = a.useCallback(
+    [x, a]
+  ), ot = i.useCallback(
     (g) => {
-      const { isResizable: l, onPointerDown: m } = nt(g), b = et(g), E = r === g.id;
+      const { isResizable: l, onPointerDown: b } = rt(g), w = nt(g), z = r === g.id;
       return {
-        style: b,
+        style: w,
         isResizable: l,
-        isResizing: E,
+        isResizing: z,
         onResizeHandlePointerDown: (R, C) => {
-          m && m(R, C);
+          b && b(R, C);
         }
       };
     },
-    [et, nt, r]
-  ), ot = a.useCallback(
+    [nt, rt, r]
+  ), st = i.useCallback(
     (g) => ({
       "data-drag-handle": "true",
       role: "button",
@@ -1201,95 +1202,95 @@ const Pe = {
     [M]
   );
   return {
-    providerValue: a.useMemo(
+    providerValue: i.useMemo(
       () => ({
         handleLayerPointerDown: P,
-        getLayerRenderState: rt,
-        getLayerHandleProps: ot
+        getLayerRenderState: ot,
+        getLayerHandleProps: st
       }),
-      [ot, rt, P]
+      [st, ot, P]
     ),
     draggingLayerId: n,
     resizingLayerId: r
   };
-}, dn = (t) => {
+}, fn = (t) => {
   if (typeof t.width == "number" && typeof t.height == "number")
     return { width: t.width, height: t.height };
-}, fn = {
+}, pn = {
   display: "grid",
   width: "100%",
   height: "100%",
   overflow: "hidden"
-}, pn = {
+}, gn = {
   touchAction: "none",
   WebkitTouchCallout: "none",
   WebkitUserSelect: "none",
   userSelect: "none"
-}, Cn = ({ config: t, layers: e, style: n }) => {
-  const o = a.useRef(null), { isIntersecting: r } = Ut(o, { threshold: 0 });
-  return /* @__PURE__ */ w(ce, { config: t, layers: e, style: n, children: /* @__PURE__ */ w(gn, { gridRef: o, isIntersecting: r }) });
-}, gn = ({ gridRef: t, isIntersecting: e }) => {
-  const { config: n, style: o, layers: r } = ae(), { normalizedLayers: s, visibleLayers: c, regularLayers: u, layerById: i } = ke(n, r.defs), { columnHandles: f, rowHandles: d, gapSizes: p, gridStyle: h, handleResize: v } = Fe(n, o), { providerValue: S, draggingLayerId: P, resizingLayerId: M } = ln({
+}, Rn = ({ config: t, layers: e, style: n }) => {
+  const o = i.useRef(null), { isIntersecting: r } = Kt(o, { threshold: 0 });
+  return /* @__PURE__ */ h(ue, { config: t, layers: e, style: n, children: /* @__PURE__ */ h(hn, { gridRef: o, isIntersecting: r }) });
+}, hn = ({ gridRef: t, isIntersecting: e }) => {
+  const { config: n, style: o, layers: r } = ce(), { normalizedLayers: s, visibleLayers: c, regularLayers: u, layerById: a } = Te(n, r.defs), { columnHandles: f, rowHandles: d, gapSizes: p, gridStyle: m, handleResize: E } = Be(n, o), { providerValue: v, draggingLayerId: P, resizingLayerId: M } = dn({
     layers: s,
-    layerById: i
-  }), x = P ? !0 : !!M, $ = a.useMemo(() => ({
-    ...fn,
-    ...h,
-    ...x ? pn : {}
-  }), [h, x]);
-  return /* @__PURE__ */ _(O, { children: [
-    /* @__PURE__ */ _(
+    layerById: a
+  }), x = P ? !0 : !!M, _ = i.useMemo(() => ({
+    ...pn,
+    ...m,
+    ...x ? gn : {}
+  }), [m, x]);
+  return /* @__PURE__ */ N($, { children: [
+    /* @__PURE__ */ N(
       "div",
       {
         ref: t,
-        style: $,
+        style: _,
         "data-dragging": !!P,
         "data-resizing": !!M,
         "data-visible": e,
         children: [
-          /* @__PURE__ */ w(se, { value: S, children: /* @__PURE__ */ w(be, { layers: u }) }),
-          f.map(({ trackIndex: L, align: z, span: H }) => /* @__PURE__ */ w(
-            pt,
+          /* @__PURE__ */ h(ie, { value: v, children: /* @__PURE__ */ h(ve, { layers: u }) }),
+          f.map(({ trackIndex: S, align: L, span: H }) => /* @__PURE__ */ h(
+            ht,
             {
               direction: "col",
-              trackIndex: L,
-              align: z,
+              trackIndex: S,
+              align: L,
               gap: p.columnGap,
               span: H,
-              onResize: v
+              onResize: E
             },
-            `col-${L}:${z}`
+            `col-${S}:${L}`
           )),
-          d.map(({ trackIndex: L, align: z, span: H }) => /* @__PURE__ */ w(
-            pt,
+          d.map(({ trackIndex: S, align: L, span: H }) => /* @__PURE__ */ h(
+            ht,
             {
               direction: "row",
-              trackIndex: L,
-              align: z,
+              trackIndex: S,
+              align: L,
               gap: p.rowGap,
               span: H,
-              onResize: v
+              onResize: E
             },
-            `row-${L}:${z}`
+            `row-${S}:${L}`
           ))
         ]
       }
     ),
-    /* @__PURE__ */ w(oe, { layers: c })
+    /* @__PURE__ */ h(se, { layers: c })
   ] });
 };
 export {
-  ne as D,
-  Cn as G,
-  Le as R,
-  Sn as a,
-  ie as b,
+  re as D,
+  Rn as G,
+  Me as R,
+  Cn as a,
+  ae as b,
   T as c,
-  Re as d,
-  Be as e,
-  Lt as f,
-  oe as g,
-  zn as t,
-  ze as u
+  Pe as d,
+  Ye as e,
+  xt as f,
+  se as g,
+  Sn as t,
+  Se as u
 };
-//# sourceMappingURL=GridLayout-CmzKfbPP.js.map
+//# sourceMappingURL=GridLayout-C0uqEj9E.js.map