react-panel-layout 0.5.0 → 0.5.2

package/dist/{GridLayout-tpSM0iM-.js → GridLayout-CJTKq7Mp.js}

@@ -1,10 +1,11 @@
-import { jsxs as A, Fragment as H, jsx as h } from "react/jsx-runtime";
+import { jsxs as H, Fragment as _, jsx as h } from "react/jsx-runtime";
 import * as i from "react";
-import { F as Pt, e as yt, a as Lt, b as Mt, d as Vt } from "./FloatingPanelFrame-DDT6aING.js";
-import { C as Xt, D as Ut, m as jt, n as Zt, o as Kt, p as qt, q as Jt, r as Qt, G as B, s as I, t as te, u as ee, v as ne, R as ut, w as oe, x as J } from "./styles-w0ZixggV.js";
-import { createPortal as re } from "react-dom";
-import { u as se, a as Dt } from "./usePivot-z9gumDf-.js";
-const ie = () => {
+import { F as Pt, e as yt, a as Lt, b as Mt, f as Dt, d as Ut } from "./FloatingPanelFrame-lLg-Lpg7.js";
+import { C as jt, D as Kt, o as Zt, p as qt, q as Jt, r as Qt, s as te, G as Y, t as T, u as ee, v as ne, w as oe, R as ut, x as re, y as Q } from "./styles-CA2_zLZt.js";
+import { a as se, u as ie } from "./usePivot-CgQxB8rc.js";
+import { createPortal as ae } from "react-dom";
+import { u as It } from "./useIsomorphicLayoutEffect-DhmEnmZ_.js";
+const ce = () => {
   const t = /* @__PURE__ */ new Map();
   return (e) => {
     if (!e)
@@ -15,10 +16,10 @@ const ie = () => {
     const o = t.size;
     return t.set(e, o), o;
   };
-}, ae = ie(), Q = /* @__PURE__ */ new Map(), ce = (t) => {
-  const e = `ovs-threshold:${t.threshold}-rootMargin:${t.rootMargin}-root:${ae(t.root)}`;
-  if (Q.has(e))
-    return Q.get(e);
+}, ue = ce(), tt = /* @__PURE__ */ new Map(), le = (t) => {
+  const e = `ovs-threshold:${t.threshold}-rootMargin:${t.rootMargin}-root:${ue(t.root)}`;
+  if (tt.has(e))
+    return tt.get(e);
   const n = new class {
     #t = /* @__PURE__ */ new Map();
     #e = new IntersectionObserver((o) => {
@@ -33,7 +34,7 @@ const ie = () => {
       };
     }
   }();
-  return Q.set(e, n), n;
+  return tt.set(e, n), n;
 }, lt = Object.freeze({
   x: 0,
   y: 0,
@@ -44,15 +45,15 @@ const ie = () => {
   bottom: 0,
   left: 0
 });
-function ue(t, { threshold: e = 0, rootMargin: n = "0px", root: o = null }) {
+function de(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 ? ce({
+    const u = t.current;
+    return u ? le({
       threshold: e,
       rootMargin: n,
       root: o
-    }).observe(c, (a) => {
+    }).observe(u, (a) => {
       s({
         isIntersecting: a.isIntersecting,
         boundingClientRect: a.boundingClientRect,
@@ -76,8 +77,8 @@ function ue(t, { threshold: e = 0, rootMargin: n = "0px", root: o = null }) {
 const dt = {
   position: "fixed",
   inset: 0,
-  background: Xt
-}, le = {
+  background: jt
+}, fe = {
   willChange: "transform"
 }, ft = {
   left: {
@@ -104,44 +105,45 @@ const dt = {
     right: 0,
     transform: "translateY(100%)"
   }
-}, de = (t, e, n) => t === "none" ? void 0 : `transform ${e ?? Ut} ${n ?? jt}`, fe = (t, e) => t ? e : !1, ge = {
-  marginLeft: "auto",
-  border: "none",
-  background: "transparent",
-  cursor: "pointer",
-  fontSize: Qt
-}, pe = ({ header: t, dismissible: e, onClose: n }) => {
+}, ge = (t, e, n) => t === "none" ? void 0 : `transform ${e ?? Kt} ${n ?? Zt}`, pe = (t, e) => t ? e : !1, he = ({ chrome: t, frameStyle: e, header: n, dismissible: o, onClose: r, children: s }) => t ? /* @__PURE__ */ H(Pt, { style: e, children: [
+  /* @__PURE__ */ h(me, { header: n, dismissible: o, onClose: r }),
+  /* @__PURE__ */ h(
+    yt,
+    {
+      style: { padding: qt, flex: 1, display: "flex", flexDirection: "column" },
+      children: s
+    }
+  )
+] }) : /* @__PURE__ */ h(_, { children: s }), me = ({ header: t, dismissible: e, onClose: n }) => {
   if (!t)
     return null;
-  const o = t.showCloseButton ?? !0, r = fe(e, o);
-  return /* @__PURE__ */ h(i.Activity, { mode: t ? "visible" : "hidden", children: /* @__PURE__ */ A(
+  const o = t.showCloseButton ?? !0, r = pe(e, o);
+  return /* @__PURE__ */ h(i.Activity, { mode: t ? "visible" : "hidden", children: /* @__PURE__ */ H(
     Lt,
     {
-      style: { padding: `${qt} ${Jt}`, gap: Kt },
+      style: { padding: `${Qt} ${te}`, gap: Jt },
       children: [
         /* @__PURE__ */ h(i.Activity, { mode: t ? "visible" : "hidden", children: /* @__PURE__ */ h(Mt, { children: t.title }) }),
-        /* @__PURE__ */ h(i.Activity, { mode: r ? "visible" : "hidden", children: /* @__PURE__ */ h("button", { style: ge, onClick: n, "aria-label": "Close drawer", type: "button", children: "×" }) })
+        /* @__PURE__ */ h(i.Activity, { mode: r ? "visible" : "hidden", children: /* @__PURE__ */ h(
+          Dt,
+          {
+            onClick: n,
+            "aria-label": "Close drawer",
+            style: { marginLeft: "auto" }
+          }
+        ) })
       ]
     }
   ) });
-}, he = ({ header: t, dismissible: e, onClose: n, chrome: o, children: r }) => o ? /* @__PURE__ */ A(Pt, { style: { height: "100%", borderRadius: 0 }, children: [
-  /* @__PURE__ */ h(pe, { header: t, dismissible: e, onClose: n }),
-  /* @__PURE__ */ h(
-    yt,
-    {
-      style: { padding: Zt, flex: 1, display: "flex", flexDirection: "column" },
-      children: r
-    }
-  )
-] }) : /* @__PURE__ */ h(H, { children: r }), me = ({
+}, we = ({
   id: t,
   config: e,
   isOpen: n,
   onClose: o,
   children: r,
   zIndex: s,
-  width: c,
-  height: u,
+  width: u,
+  height: c,
   position: a
 }) => {
   const {
@@ -149,11 +151,11 @@ const dt = {
     header: g,
     chrome: f = !0,
     inline: m = !1,
-    transitionMode: b = "css",
-    transitionDuration: z,
-    transitionEasing: E
+    transitionMode: w = "css",
+    transitionDuration: C,
+    transitionEasing: z
   } = e, L = i.useCallback(
-    (M, y) => M || (y ? y.left !== void 0 ? "left" : y.right !== void 0 ? "right" : y.top !== void 0 ? "top" : y.bottom !== void 0 ? "bottom" : "right" : "right"),
+    (I, R) => I || (R ? R.left !== void 0 ? "left" : R.right !== void 0 ? "right" : R.top !== void 0 ? "top" : R.bottom !== void 0 ? "bottom" : "right" : "right"),
     []
   )(e.anchor, a), x = {
     left: "translateX(0)",
@@ -161,26 +163,29 @@ const dt = {
     top: "translateY(0)",
     bottom: "translateY(0)"
   }, N = i.useMemo(() => {
-    const M = de(b, z, E), y = {
-      ...le,
+    const I = ge(w, C, z), R = {
+      ...fe,
       ...m ? { position: "absolute" } : { position: "fixed" },
       ...ft[L],
       transform: n ? x[L] : ft[L].transform,
-      transition: M
+      transition: I
     };
-    return s !== void 0 && (y.zIndex = s), c !== void 0 && (y.width = typeof c == "number" ? `${c}px` : c), u !== void 0 && (y.height = typeof u == "number" ? `${u}px` : u), y;
-  }, [u, m, n, L, z, E, b, c, s]), D = g?.title ?? e.ariaLabel ?? "Drawer", T = i.useMemo(() => {
-    const M = m ? { ...dt, position: "absolute" } : dt, y = b === "none" ? void 0 : `opacity ${z ?? "220ms"} ease`;
+    return s !== void 0 && (R.zIndex = s), u !== void 0 && (R.width = typeof u == "number" ? `${u}px` : u), c !== void 0 && (R.height = typeof c == "number" ? `${c}px` : c), R;
+  }, [c, m, n, L, C, z, w, u, s]), M = g?.title ?? e.ariaLabel ?? "Drawer", D = i.useMemo(() => {
+    const I = m ? { ...dt, position: "absolute" } : dt, R = w === "none" ? void 0 : `opacity ${C ?? "220ms"} ease`;
     return {
-      ...M,
+      ...I,
       opacity: n ? 1 : 0,
       pointerEvents: n ? "auto" : "none",
-      transition: y,
+      transition: R,
       zIndex: s !== void 0 ? s - 1 : void 0
     };
-  }, [m, n, z, b, s]);
-  return /* @__PURE__ */ A(H, { children: [
-    /* @__PURE__ */ h("div", { style: T, onClick: l ? o : void 0 }),
+  }, [m, n, C, w, s]), A = i.useMemo(() => {
+    const I = L === "left" || L === "right", R = { borderRadius: 0 };
+    return I && (R.height = "100%"), R;
+  }, [L]);
+  return /* @__PURE__ */ H(_, { children: [
+    /* @__PURE__ */ h("div", { style: D, onClick: l ? o : void 0 }),
     /* @__PURE__ */ h(
       "div",
       {
@@ -190,8 +195,18 @@ const dt = {
         role: "dialog",
         "aria-modal": l ? !0 : void 0,
         "aria-hidden": n ? void 0 : !0,
-        "aria-label": D,
-        children: /* @__PURE__ */ h(he, { header: g, dismissible: l, onClose: o, chrome: f, children: r })
+        "aria-label": M,
+        children: /* @__PURE__ */ h(
+          he,
+          {
+            chrome: f,
+            frameStyle: A,
+            header: g,
+            dismissible: l,
+            onClose: o,
+            children: r
+          }
+        )
       }
     )
   ] });
@@ -199,8 +214,8 @@ const dt = {
   let o = !1;
   const r = () => {
     o || (o = !0, t.removeEventListener("transitionend", s), n());
-  }, s = (c) => {
-    c.target === t && r();
+  }, s = (u) => {
+    u.target === t && r();
   };
   t.addEventListener("transitionend", s), setTimeout(r, e + 50);
 }), Tt = async (t, e, n, o) => {
@@ -212,33 +227,33 @@ const dt = {
       t(), n && await be(n, o);
       return;
   }
-}, Vn = (t) => {
+}, Xn = (t) => {
   const [e, n] = i.useState({}), o = i.useRef(t);
   o.current = t;
   const r = i.useCallback(
     async (a, l, g) => {
-      const { mode: f = "none", element: m, duration: b = 300 } = g ?? {};
+      const { mode: f = "none", element: m, duration: w = 300 } = g ?? {};
       await Tt(() => {
-        n((P) => P[a] === l ? P : { ...P, [a]: l });
-      }, f, m?.current, b);
-      const E = o.current;
-      l ? E?.onOpen?.(a) : E?.onClose?.(a), E?.onTransitionEnd?.(a, l);
+        n((y) => y[a] === l ? y : { ...y, [a]: l });
+      }, f, m?.current, w);
+      const z = o.current;
+      l ? z?.onOpen?.(a) : z?.onClose?.(a), z?.onTransitionEnd?.(a, l);
     },
     []
-  ), s = i.useCallback((a) => e[a] ?? !1, [e]), c = i.useCallback(
+  ), s = i.useCallback((a) => e[a] ?? !1, [e]), u = i.useCallback(
     (a, l) => r(a, !0, l),
     [r]
-  ), u = i.useCallback(
+  ), c = i.useCallback(
     (a, l) => r(a, !1, l),
     [r]
   );
-  return { state: s, open: c, close: u };
-}, we = (t) => {
+  return { state: s, open: u, close: c };
+}, ve = (t) => {
   if (!t)
     return 300;
   const e = t.match(/(\d+)/);
   return e ? parseInt(e[1], 10) : 300;
-}, ve = (t) => {
+}, Se = (t) => {
   const [e, n] = i.useState(() => {
     const a = {};
     return t.forEach((l) => {
@@ -252,10 +267,10 @@ const dt = {
       const f = o.get(a);
       if (!f?.drawer)
         return;
-      const m = g?.mode ?? f.drawer.transitionMode ?? "css", b = g?.duration ?? we(f.drawer.transitionDuration), z = g?.element?.current;
+      const m = g?.mode ?? f.drawer.transitionMode ?? "css", w = g?.duration ?? ve(f.drawer.transitionDuration), C = g?.element?.current;
       await Tt(() => {
-        f.drawer?.open === void 0 && n((P) => P[a] === l ? P : { ...P, [a]: l }), f.drawer?.onStateChange?.(l);
-      }, m, z, b);
+        f.drawer?.open === void 0 && n((y) => y[a] === l ? y : { ...y, [a]: l }), f.drawer?.onStateChange?.(l);
+      }, m, C, w);
     },
     [o]
   ), s = i.useCallback(
@@ -264,32 +279,32 @@ const dt = {
       return l?.drawer?.open !== void 0 ? l.drawer.open : e[a] ?? !1;
     },
     [o, e]
-  ), c = i.useCallback(
+  ), u = i.useCallback(
     (a, l) => r(a, !0, l),
     [r]
-  ), u = i.useCallback(
+  ), c = i.useCallback(
     (a, l) => r(a, !1, l),
     [r]
   );
-  return { state: s, open: c, close: u };
-}, Se = ({ layers: t }) => {
-  const e = ve(t), n = i.useMemo(() => t.filter((r) => r.drawer), [t]), o = i.useMemo(() => {
+  return { state: s, open: u, close: c };
+}, Ce = ({ layers: t }) => {
+  const e = Se(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__ */ h(H, { 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__ */ h(
-      me,
+    const s = e.state(r.id), u = o.get(r.id);
+    return u ? /* @__PURE__ */ h(
+      we,
       {
         id: r.id,
         config: r.drawer,
         isOpen: s,
-        onClose: c,
+        onClose: u,
         zIndex: r.zIndex,
         width: r.width,
         height: r.height,
@@ -299,39 +314,46 @@ const dt = {
       r.id
     ) : null;
   }) });
-}, It = i.createContext(null), ze = ({ value: t, children: e }) => /* @__PURE__ */ h(It.Provider, { value: t, children: e }), xt = () => {
-  const t = i.useContext(It);
+}, xt = i.createContext(null), ze = ({ value: t, children: e }) => /* @__PURE__ */ h(xt.Provider, { value: t, children: e }), kt = () => {
+  const t = i.useContext(xt);
   if (!t)
     throw new Error("useGridLayoutContext must be used within a GridLayoutProvider.");
   return t;
-}, kt = i.createContext(null), Ee = () => {
-  const t = i.useContext(kt);
+}, At = i.createContext(null), Ht = () => {
+  const t = i.useContext(At);
   if (!t)
     throw new Error("usePanelSystem must be used within a PanelSystemProvider.");
   return t;
-}, Ce = ({ config: t, layers: e, style: n, children: o }) => {
+}, Ee = ({ 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 = i.useMemo(
+    const l = /* @__PURE__ */ new Map();
+    return e.forEach((g) => {
+      l.set(g.id, g);
+    }), l;
+  }, [e]), s = i.useCallback(
+    (l) => r.get(l)?.component ?? null,
+    [r]
+  ), u = i.useMemo(() => e.map((l) => l.id), [e]), { getCachedContent: c } = se({
+    resolveContent: s,
+    validIds: u
+  }), a = i.useMemo(
     () => ({
       config: t,
       style: n,
       layers: {
         defs: e,
         layerById: r
-      }
+      },
+      getCachedContent: c
     }),
-    [t, n, e, r]
+    [t, n, e, r, c]
   );
-  return /* @__PURE__ */ h(kt.Provider, { value: s, children: o });
-}, At = i.createContext(null), Ht = ({ layerId: t, children: e }) => {
+  return /* @__PURE__ */ h(At.Provider, { value: a, children: o });
+}, Nt = i.createContext(null), $t = ({ layerId: t, children: e }) => {
   const n = i.useMemo(() => ({ layerId: t }), [t]);
-  return /* @__PURE__ */ h(At.Provider, { value: n, children: e });
-}, Xn = () => {
-  const t = i.useContext(At);
+  return /* @__PURE__ */ h(Nt.Provider, { value: n, children: e });
+}, Un = () => {
+  const t = i.useContext(Nt);
   if (!t)
     throw new Error("useLayerInstance must be used within a LayerInstanceProvider.");
   return t;
@@ -339,29 +361,29 @@ const dt = {
   if (typeof t == "number" && Number.isFinite(t))
     return t;
   throw new Error(`Popup layer "${n}" requires a numeric "${e}" value.`);
-}, Nt = (t, e) => {
+}, Ft = (t, e) => {
   if (!t)
     throw new Error(`Popup layer "${e}" must define position (left/top).`);
   return {
     left: gt(t.left, "left", e),
     top: gt(t.top, "top", e)
   };
-}, Y = (t) => `${Math.round(t)}`, F = (t) => {
+}, V = (t) => `${Math.round(t)}`, G = (t) => {
   if (t !== void 0)
     return t ? "yes" : "no";
 }, Re = (t, e, n, o, r) => {
-  const s = {}, c = Nt(e, t);
+  const s = {}, u = Ft(e, t);
   if (typeof n != "number" || typeof o != "number")
     throw new Error(`Popup layer "${t}" requires numeric width/height.`);
-  s.width = Y(n), s.height = Y(o), s.left = Y(c.left), s.top = Y(c.top);
-  const u = r?.features;
-  if (u) {
-    const a = F(u.toolbar), l = F(u.menubar), g = F(u.location), f = F(u.status), m = F(u.resizable), b = F(u.scrollbars);
-    a !== void 0 && (s.toolbar = a), l !== void 0 && (s.menubar = l), g !== void 0 && (s.location = g), f !== void 0 && (s.status = f), m !== void 0 && (s.resizable = m), b !== void 0 && (s.scrollbars = b);
+  s.width = V(n), s.height = V(o), s.left = V(u.left), s.top = V(u.top);
+  const c = r?.features;
+  if (c) {
+    const a = G(c.toolbar), l = G(c.menubar), g = G(c.location), f = G(c.status), m = G(c.resizable), w = G(c.scrollbars);
+    a !== void 0 && (s.toolbar = a), l !== void 0 && (s.menubar = l), g !== void 0 && (s.location = g), f !== void 0 && (s.status = f), m !== void 0 && (s.resizable = m), w !== void 0 && (s.scrollbars = w);
   }
   return Object.entries(s).map(([a, l]) => `${a}=${l}`).join(",");
 }, pt = (t, e, n, o, r) => {
-  const s = Nt(n, e);
+  const s = Ft(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));
@@ -371,13 +393,13 @@ const dt = {
     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 = i.useRef(null), r = i.useRef(null), [s, c] = i.useState(!1);
+  const o = i.useRef(null), r = i.useRef(null), [s, u] = i.useState(!1);
   return i.useEffect(() => {
     if (typeof window > "u")
       return;
-    const u = Re(t.id, t.position, t.width, t.height, e.popup), a = e.popup?.name ?? t.id, l = ye(
+    const c = Re(t.id, t.position, t.width, t.height, e.popup), a = e.popup?.name ?? t.id, l = ye(
       a,
-      u,
+      c,
       {
         position: t.position,
         size: { width: t.width, height: t.height }
@@ -389,12 +411,12 @@ const dt = {
     const g = l;
     r.current = g, e.popup?.focus !== !1 && g.focus(), g.document.title || (g.document.title = t.id), g.document.body.innerHTML = "";
     const f = g.document.createElement("div");
-    f.dataset.layerId = t.id, g.document.body.appendChild(f), o.current = f, c(!0), pt(g, t.id, t.position, t.width, t.height);
+    f.dataset.layerId = t.id, g.document.body.appendChild(f), o.current = f, u(!0), pt(g, t.id, t.position, t.width, t.height);
     const m = () => {
-      r.current = null, o.current = null, c(!1);
+      r.current = null, o.current = null, u(!1);
     };
     return g.addEventListener("beforeunload", m), () => {
-      g.removeEventListener("beforeunload", m), e.popup?.closeOnUnmount !== !1 && g.close(), r.current = null, o.current = null, c(!1);
+      g.removeEventListener("beforeunload", m), e.popup?.closeOnUnmount !== !1 && g.close(), r.current = null, o.current = null, u(!1);
     };
   }, [
     e.popup?.closeOnUnmount,
@@ -408,61 +430,43 @@ const dt = {
     e.popup?.name,
     t.id
   ]), i.useEffect(() => {
-    const u = r.current;
-    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 : re(/* @__PURE__ */ h(Ht, { layerId: t.id, children: t.component }), o.current);
+    const c = r.current;
+    c && pt(c, t.id, t.position, t.width, t.height);
+  }, [t.position?.left, t.position?.top, t.height, t.width, t.id]), !s || !o.current ? null : ae(/* @__PURE__ */ h($t, { layerId: t.id, children: t.component }), o.current);
 }, ye = (t, e, n, o) => {
   const r = o?.createWindow;
   return r ? r({ name: t, features: e, bounds: n }) : window.open("", t, e);
-}, Le = {
-  marginLeft: "auto",
-  border: "none",
-  background: "transparent",
-  cursor: "pointer",
-  fontSize: "1.25rem",
-  padding: "0.25rem 0.5rem",
-  lineHeight: 1
-}, Me = ({ onClick: t }) => /* @__PURE__ */ h(Vt, { children: /* @__PURE__ */ h(
-  "button",
-  {
-    style: Le,
-    onClick: t,
-    "aria-label": "Close window",
-    type: "button",
-    "data-drag-ignore": "true",
-    children: "×"
-  }
-) }), De = ({ header: t, draggable: e, onClose: n }) => {
+}, Le = ({ onClick: t }) => /* @__PURE__ */ h(Ut, { children: /* @__PURE__ */ h(Dt, { onClick: t, "aria-label": "Close window", "data-drag-ignore": "true" }) }), Me = ({ header: t, draggable: e, onClose: n }) => {
   if (!t)
     return null;
   const o = t.showCloseButton ?? !1;
-  return /* @__PURE__ */ A(Lt, { ...e ? { "data-drag-handle": "true" } : {}, style: { cursor: e ? "grab" : void 0 }, children: [
+  return /* @__PURE__ */ H(Lt, { ...e ? { "data-drag-handle": "true" } : {}, style: { cursor: e ? "grab" : void 0 }, children: [
     t.title ? /* @__PURE__ */ h(Mt, { children: t.title }) : null,
-    o ? /* @__PURE__ */ h(Me, { onClick: n }) : null
+    o ? /* @__PURE__ */ h(Le, { onClick: n }) : null
   ] });
-}, Te = ({ header: t, draggable: e, chrome: n, onClose: o, children: r }) => n ? /* @__PURE__ */ A(Pt, { style: { height: "100%", width: "100%" }, children: [
-  /* @__PURE__ */ h(De, { header: t, draggable: e, onClose: o }),
+}, De = ({ header: t, draggable: e, chrome: n, onClose: o, children: r }) => n ? /* @__PURE__ */ H(Pt, { style: { height: "100%", width: "100%" }, children: [
+  /* @__PURE__ */ h(Me, { header: t, draggable: e, onClose: o }),
   /* @__PURE__ */ h(yt, { style: { flex: 1, display: "flex", flexDirection: "column" }, children: r })
-] }) : /* @__PURE__ */ h(H, { children: r }), _t = ({ id: t, config: e, onClose: n, children: o }) => {
-  const r = e.chrome ?? !1, s = e.draggable ?? !1, c = e.header?.title ?? e.ariaLabel ?? "Floating window";
-  return /* @__PURE__ */ h("div", { "data-floating-window": t, role: "dialog", "aria-label": c, style: { height: "100%", width: "100%" }, children: /* @__PURE__ */ h(Te, { header: e.header, draggable: s, chrome: r, onClose: n, children: o }) });
+] }) : /* @__PURE__ */ h(_, { children: r }), _t = ({ id: t, config: e, onClose: n, children: o }) => {
+  const r = e.chrome ?? !1, s = e.draggable ?? !1, u = e.header?.title ?? e.ariaLabel ?? "Floating window";
+  return /* @__PURE__ */ h("div", { "data-floating-window": t, role: "dialog", "aria-label": u, style: { height: "100%", width: "100%" }, children: /* @__PURE__ */ h(De, { header: e.header, draggable: s, chrome: r, onClose: n, children: o }) });
 };
 _t.displayName = "FloatingWindow";
-const $t = {
+const Gt = {
   position: "absolute",
   pointerEvents: "auto",
   boxSizing: "border-box",
   background: "transparent",
   border: "none"
 }, Ie = {
-  ...$t,
-  width: I,
-  height: I,
+  ...Gt,
+  width: T,
+  height: T,
   zIndex: 2
-}, xe = {
-  ...$t,
+}, Te = {
+  ...Gt,
   zIndex: 1
-}, ke = {
+}, xe = {
   "top-left": {
     top: 0,
     left: 0,
@@ -487,40 +491,40 @@ const $t = {
     transform: "translate(50%, 50%)",
     cursor: "nwse-resize"
   }
-}, Ae = {
+}, ke = {
   left: {
-    top: I,
-    bottom: I,
+    top: T,
+    bottom: T,
     left: 0,
-    width: B,
+    width: Y,
     transform: "translateX(-50%)",
     cursor: "ew-resize"
   },
   right: {
-    top: I,
-    bottom: I,
+    top: T,
+    bottom: T,
     right: 0,
-    width: B,
+    width: Y,
     transform: "translateX(50%)",
     cursor: "ew-resize"
   },
   top: {
-    left: I,
-    right: I,
+    left: T,
+    right: T,
     top: 0,
-    height: B,
+    height: Y,
     transform: "translateY(-50%)",
     cursor: "ns-resize"
   },
   bottom: {
-    left: I,
-    right: I,
+    left: T,
+    right: T,
     bottom: 0,
-    height: B,
+    height: Y,
     transform: "translateY(50%)",
     cursor: "ns-resize"
   }
-}, He = [
+}, Ae = [
   { 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" },
@@ -529,22 +533,22 @@ const $t = {
   { key: "right", variant: "edge", horizontal: "right" },
   { key: "top", variant: "edge", vertical: "top" },
   { key: "bottom", variant: "edge", vertical: "bottom" }
-], Ne = ({ layerId: t, onPointerDown: e }) => /* @__PURE__ */ h(H, { children: He.map((n) => {
-  const o = n.variant === "corner" ? Ie : xe, r = n.variant === "corner" ? ke[n.key] : Ae[n.key], s = { ...o, ...r }, c = n.variant === "corner" ? { "data-resize-corner": n.key } : { "data-resize-edge": n.key };
+], He = ({ layerId: t, onPointerDown: e }) => /* @__PURE__ */ h(_, { children: Ae.map((n) => {
+  const o = n.variant === "corner" ? Ie : Te, r = n.variant === "corner" ? xe[n.key] : ke[n.key], s = { ...o, ...r }, u = n.variant === "corner" ? { "data-resize-corner": n.key } : { "data-resize-edge": n.key };
   return /* @__PURE__ */ h(
     "div",
     {
       role: "presentation",
       "aria-hidden": "true",
       style: s,
-      ...c,
+      ...u,
       "data-layer-id": t,
-      onPointerDown: (u) => e(n, u)
+      onPointerDown: (c) => e(n, c)
     },
     n.key
   );
-}) }), _e = ({ pivot: t }) => {
-  const { Outlet: e } = se({
+}) }), Ne = ({ pivot: t }) => {
+  const { Outlet: e } = ie({
     items: t.items,
     activeId: t.activeId,
     defaultActiveId: t.defaultActiveId,
@@ -552,30 +556,30 @@ const $t = {
     transitionMode: t.transitionMode
   });
   return /* @__PURE__ */ h(e, {});
-}, Ft = i.memo(({ layer: t, onClose: e }) => {
-  const n = t.pivot ? /* @__PURE__ */ h(_e, { pivot: t.pivot }) : /* @__PURE__ */ h(H, { children: t.component });
-  return t.floating?.chrome ? /* @__PURE__ */ h(_t, { id: t.id, config: t.floating, onClose: e, children: n }) : n;
+}, $e = (t, e) => t.pivot ? /* @__PURE__ */ h(Ne, { pivot: t.pivot }) : t.cache ? e(t.id) : t.component, Wt = i.memo(({ layer: t, onClose: e }) => {
+  const { getCachedContent: n } = Ht(), o = $e(t, n);
+  return t.floating?.chrome ? /* @__PURE__ */ h(_t, { id: t.id, config: t.floating, onClose: e, children: o }) : o;
 });
-Ft.displayName = "LayerContentRenderer";
-const Gt = i.memo(({ layerId: t, isResizable: e, onPointerDown: n }) => e ? /* @__PURE__ */ h(Ne, { layerId: t, onPointerDown: n }) : null);
-Gt.displayName = "LayerResizeHandles";
-const $e = (t) => t ? "auto" : "hidden", Ot = i.memo(({ layer: t, handleLayerPointerDown: e }) => {
-  const { getLayerRenderState: n } = xt(), { style: o, isResizable: r, isResizing: s, onResizeHandlePointerDown: c } = n(t), u = i.useMemo(() => {
+Wt.displayName = "LayerContentRenderer";
+const Ot = i.memo(({ layerId: t, isResizable: e, onPointerDown: n }) => e ? /* @__PURE__ */ h(He, { layerId: t, onPointerDown: n }) : null);
+Ot.displayName = "LayerResizeHandles";
+const Fe = (t, e) => t ? "auto" : e ? "visible" : "hidden", Bt = i.memo(({ layer: t, handleLayerPointerDown: e }) => {
+  const { getLayerRenderState: n } = kt(), { style: o, isResizable: r, isResizing: s, onResizeHandlePointerDown: u } = n(t), c = i.useMemo(() => {
     const g = {};
     return t.gridArea && (g.gridArea = t.gridArea), t.gridRow && (g.gridRow = t.gridRow), t.gridColumn && (g.gridColumn = t.gridColumn), g;
   }, [t.gridArea, t.gridRow, t.gridColumn]), a = i.useMemo(() => {
-    const g = $e(t.scrollable), f = {
+    const g = !!t.floating, f = Fe(t.scrollable, g), m = {
       ...o,
-      ...u,
+      ...c,
       minWidth: 0,
       minHeight: 0,
-      overflow: g
+      overflow: f
     };
-    return r ? { ...f, position: "relative" } : f;
-  }, [o, u, r, t.scrollable]), l = i.useCallback(() => {
+    return r ? { ...m, position: "relative" } : m;
+  }, [o, c, r, t.scrollable, t.floating]), l = i.useCallback(() => {
     t.floating?.onClose?.();
   }, [t.floating]);
-  return /* @__PURE__ */ A(
+  return /* @__PURE__ */ H(
     "div",
     {
       "data-layer-id": t.id,
@@ -585,21 +589,21 @@ const $e = (t) => t ? "auto" : "hidden", Ot = i.memo(({ layer: t, handleLayerPoi
       style: a,
       onPointerDown: e,
       children: [
-        /* @__PURE__ */ h(Ht, { layerId: t.id, children: /* @__PURE__ */ h(Ft, { layer: t, onClose: l }) }),
-        /* @__PURE__ */ h(Gt, { layerId: t.id, isResizable: r, onPointerDown: c })
+        /* @__PURE__ */ h($t, { layerId: t.id, children: /* @__PURE__ */ h(Wt, { layer: t, onClose: l }) }),
+        /* @__PURE__ */ h(Ot, { layerId: t.id, isResizable: r, onPointerDown: u })
       ]
     }
   );
 });
-Ot.displayName = "EmbeddedLayer";
-const Fe = ({ layers: t }) => {
-  const { handleLayerPointerDown: e } = xt();
-  return /* @__PURE__ */ h(H, { children: t.map((n) => {
+Bt.displayName = "EmbeddedLayer";
+const _e = ({ layers: t }) => {
+  const { handleLayerPointerDown: e } = kt();
+  return /* @__PURE__ */ h(_, { children: t.map((n) => {
     const o = n.floating?.mode ?? "embedded";
-    return n.floating && o === "popup" ? /* @__PURE__ */ h(Pe, { layer: n }, n.id) : /* @__PURE__ */ h(Ot, { layer: n, handleLayerPointerDown: e }, n.id);
+    return n.floating && o === "popup" ? /* @__PURE__ */ h(Pe, { layer: n }, n.id) : /* @__PURE__ */ h(Bt, { layer: n, handleLayerPointerDown: e }, n.id);
   }) });
 };
-function G(t) {
+function W(t) {
   const e = i.useRef(t);
   return e.current = t, i.useCallback((...n) => {
     const o = e.current;
@@ -607,8 +611,8 @@ function G(t) {
       return o(...n);
   }, []);
 }
-function tt(t, e) {
-  const n = G(e.onMove), o = G(e.onUp), r = G(e.onCancel);
+function et(t, e) {
+  const n = W(e.onMove), o = W(e.onUp), r = W(e.onCancel);
   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), () => {
@@ -625,7 +629,7 @@ function Ge(t, e, n) {
       };
   }, [t, e, n]);
 }
-function Oe(t, e, n = ["pointerdown", "pointermove", "pointerup"]) {
+function We(t, e, n = ["pointerdown", "pointermove", "pointerup"]) {
   i.useEffect(() => {
     const o = t.current;
     if (!e || !o)
@@ -642,31 +646,31 @@ function Oe(t, e, n = ["pointerdown", "pointermove", "pointerup"]) {
     };
   }, [t, e, n]);
 }
-function We(t, e, n) {
-  const { onMove: o, onUp: r, onCancel: s, pointerId: c, capturePointer: u = !0, preventDefaults: a = !0 } = n;
-  tt(e, { onMove: o, onUp: r, onCancel: s }), Ge(t, e ? u : !1, c), Oe(t, e ? a : !1);
+function Oe(t, e, n) {
+  const { onMove: o, onUp: r, onCancel: s, pointerId: u, capturePointer: c = !0, preventDefaults: a = !0 } = n;
+  et(e, { onMove: o, onUp: r, onCancel: s }), Ge(t, e ? c : !1, u), We(t, e ? a : !1);
 }
 const Be = (t) => {
-  const e = i.useRef(null), n = i.useRef(null), o = i.useRef(0), [r, s] = i.useState(!1), c = G((f) => {
+  const e = i.useRef(null), n = i.useRef(null), o = i.useRef(0), [r, s] = i.useState(!1), u = W((f) => {
     t.onResize?.(f);
-  }), u = i.useCallback(
+  }), c = i.useCallback(
     (f) => t.axis === "x" ? f.clientX : f.clientY,
     [t.axis]
   ), a = i.useCallback(
     (f) => {
-      f.preventDefault(), e.current = f.currentTarget, n.current = f.pointerId, o.current = u(f), s(!0);
+      f.preventDefault(), e.current = f.currentTarget, n.current = f.pointerId, o.current = c(f), s(!0);
     },
-    [u]
+    [c]
   ), l = i.useCallback(
     (f) => {
-      const m = u(f), b = m - o.current;
-      b !== 0 && (o.current = m, c(b));
+      const m = c(f), w = m - o.current;
+      w !== 0 && (o.current = m, u(w));
     },
-    [u, c]
+    [c, u]
   ), g = i.useCallback(() => {
     s(!1), n.current = null;
   }, []);
-  return We(e, r, {
+  return Oe(e, r, {
     onMove: l,
     onUp: g,
     pointerId: n.current ?? void 0,
@@ -699,7 +703,7 @@ function Ve({
 }
 const Xe = {
   position: "absolute",
-  zIndex: oe
+  zIndex: re
 }, Ue = {
   vertical: {
     width: ut,
@@ -714,40 +718,40 @@ const Xe = {
     cursor: "row-resize"
   }
 }, je = {
-  idle: ne,
-  hovered: ee,
-  dragging: te
-}, Ze = ({
+  idle: oe,
+  hovered: ne,
+  dragging: ee
+}, Ke = ({
   direction: t,
   onResize: e,
   component: n,
   element: o,
   children: r
 }) => {
-  const s = t === "vertical" ? "x" : "y", { ref: c, isDragging: u, onPointerDown: a } = Be({ axis: s, onResize: e }), [l, g] = i.useState(!1), f = i.useCallback(() => {
+  const s = t === "vertical" ? "x" : "y", { ref: u, isDragging: c, onPointerDown: a } = Be({ axis: s, onResize: e }), [l, g] = i.useState(!1), f = i.useCallback(() => {
     g(!0);
   }, []), m = i.useCallback(() => {
     g(!1);
-  }, []), b = Ve({
+  }, []), w = Ve({
     element: o,
     component: n
-  }), z = i.useMemo(() => u ? "dragging" : l ? "hovered" : "idle", [u, l]), E = i.useMemo(() => ({
+  }), C = i.useMemo(() => c ? "dragging" : l ? "hovered" : "idle", [c, l]), z = i.useMemo(() => ({
     ...Xe,
     ...Ue[t],
-    backgroundColor: je[z],
+    backgroundColor: je[C],
     touchAction: "none"
-  }), [t, z]);
+  }), [t, C]);
   return /* @__PURE__ */ h(
-    b,
+    w,
     {
-      ref: c,
-      style: E,
+      ref: u,
+      style: z,
       role: "separator",
       "aria-orientation": t,
       "aria-hidden": void 0,
       "data-resize-handle": "true",
       "data-direction": t,
-      "data-is-dragging": u ? "true" : void 0,
+      "data-is-dragging": c ? "true" : void 0,
       onPointerDown: a,
       onPointerEnter: f,
       onPointerLeave: m,
@@ -765,7 +769,7 @@ const Xe = {
   span: r,
   onResize: s
 }) => {
-  const c = t === "col" ? "vertical" : "horizontal", u = i.useCallback(
+  const u = t === "col" ? "vertical" : "horizontal", c = i.useCallback(
     (g) => {
       const f = n === "start" ? -g : g;
       s(t, e, f);
@@ -778,10 +782,10 @@ const Xe = {
     gridRow: `${e + 1} / ${e + 2}`,
     gridColumn: `${r.start} / ${r.end}`
   }, [t, e, r]), l = i.useMemo(() => {
-    const f = Math.max(0, o) / 2 + J / 2;
+    const f = Math.max(0, o) / 2 + Q / 2;
     return t === "col" ? {
       ...ht,
-      width: J,
+      width: Q,
       height: "100%",
       top: 0,
       bottom: 0,
@@ -789,26 +793,26 @@ const Xe = {
     } : {
       ...ht,
       width: "100%",
-      height: J,
+      height: Q,
       left: 0,
       right: 0,
       ...n === "start" ? { top: -f } : { bottom: -f }
     };
   }, [n, t, o]);
-  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: l, children: /* @__PURE__ */ h(Ze, { direction: c, onResize: u }) }) });
-}, Ke = (t) => {
+  return /* @__PURE__ */ h("div", { "data-resizable": "true", style: { ...a, position: "relative", pointerEvents: "none" }, children: /* @__PURE__ */ h("div", { "data-direction": u, "data-align": n, "data-handle": "true", style: l, children: /* @__PURE__ */ h(Ke, { direction: u, onResize: c }) }) });
+}, Ze = (t) => {
   const e = /* @__PURE__ */ new Map();
   t.forEach((o, r) => {
-    o.forEach((s, c) => {
+    o.forEach((s, u) => {
       if (!s || s === ".")
         return;
-      const u = e.get(s);
-      if (u) {
+      const c = e.get(s);
+      if (c) {
         const l = {
-          rowStart: Math.min(u.rowStart, r),
-          rowEnd: Math.max(u.rowEnd, r),
-          colStart: Math.min(u.colStart, c),
-          colEnd: Math.max(u.colEnd, c)
+          rowStart: Math.min(c.rowStart, r),
+          rowEnd: Math.max(c.rowEnd, r),
+          colStart: Math.min(c.colStart, u),
+          colEnd: Math.max(c.colEnd, u)
         };
         e.set(s, l);
         return;
@@ -816,18 +820,18 @@ const Xe = {
       const a = {
         rowStart: r,
         rowEnd: r,
-        colStart: c,
-        colEnd: c
+        colStart: u,
+        colEnd: u
       };
       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, a = o.colEnd + 2, l = {
+    const s = o.rowStart + 1, u = o.rowEnd + 2, c = o.colStart + 1, a = o.colEnd + 2, l = {
       gridArea: r,
-      gridRow: `${s} / ${c}`,
-      gridColumn: `${u} / ${a}`
+      gridRow: `${s} / ${u}`,
+      gridColumn: `${c} / ${a}`
     };
     n.set(r, l);
   }), n;
@@ -837,31 +841,31 @@ const Xe = {
   const o = t.gridArea ?? t.id, r = e.get(o);
   if (!r)
     return t;
-  const s = !t.gridArea, c = !t.gridRow, u = !t.gridColumn;
-  return !s && !c && !u ? t : {
+  const s = !t.gridArea, u = !t.gridRow, c = !t.gridColumn;
+  return !s && !u && !c ? t : {
     ...t,
     gridArea: s ? r.gridArea : t.gridArea,
-    gridRow: c ? r.gridRow : t.gridRow,
-    gridColumn: u ? r.gridColumn : t.gridColumn
+    gridRow: u ? r.gridRow : t.gridRow,
+    gridColumn: c ? r.gridColumn : t.gridColumn
   };
 }, Je = (t, e) => {
-  const n = i.useMemo(() => Ke(t.areas), [t.areas]), o = i.useMemo(() => e.map((u) => qe(u, n)), [e, n]), r = i.useMemo(
-    () => o.filter((u) => u.visible !== !1),
+  const n = i.useMemo(() => Ze(t.areas), [t.areas]), o = i.useMemo(() => e.map((c) => qe(c, n)), [e, n]), r = i.useMemo(
+    () => o.filter((c) => c.visible !== !1),
     [o]
   ), s = i.useMemo(
-    () => r.filter((u) => !u.drawer),
+    () => r.filter((c) => !c.drawer),
     [r]
-  ), c = i.useMemo(() => {
-    const u = /* @__PURE__ */ new Map();
+  ), u = i.useMemo(() => {
+    const c = /* @__PURE__ */ new Map();
     return o.forEach((a) => {
-      u.set(a.id, a);
-    }), u;
+      c.set(a.id, a);
+    }), c;
   }, [o]);
   return {
     normalizedLayers: o,
     visibleLayers: r,
     regularLayers: s,
-    layerById: c
+    layerById: u
   };
 }, Qe = (t) => {
   if (!t)
@@ -883,19 +887,19 @@ const Xe = {
     return [];
   const n = getComputedStyle(t);
   return (e === "col" ? n.gridTemplateColumns : n.gridTemplateRows).split(/\s+/).map((r) => parseFloat(r)).filter((r) => !Number.isNaN(r));
-}, Wt = (t, e = Number.NEGATIVE_INFINITY, n = Number.POSITIVE_INFINITY) => Math.min(Math.max(t, e), n), Un = (t, e) => typeof t != "number" || !Number.isFinite(t) ? e : t, j = (t, e) => `${t}-${e}`, en = (t, e, n, o) => {
-  const r = j(n, o), s = e[r];
+}, Yt = (t, e = Number.NEGATIVE_INFINITY, n = Number.POSITIVE_INFINITY) => Math.min(Math.max(t, e), n), jn = (t, e) => typeof t != "number" || !Number.isFinite(t) ? e : t, K = (t, e) => `${t}-${e}`, en = (t, e, n, o) => {
+  const r = K(n, o), s = e[r];
   return s !== void 0 ? `minmax(${t.minSize ?? 0}px, ${s}px)` : t.size;
-}, bt = (t, e, n) => t.map((o, r) => en(o, e, n, r)).join(" "), V = (t, e) => t.reduce((n, o, r) => (o.resizable && o.size.endsWith("px") && (n[j(e, r)] = parseInt(o.size, 10)), n), {}), nn = ({
+}, wt = (t, e, n) => t.map((o, r) => en(o, e, n, r)).join(" "), X = (t, e) => t.reduce((n, o, r) => (o.resizable && o.size.endsWith("px") && (n[K(e, r)] = parseInt(o.size, 10)), n), {}), nn = ({
   trackSizes: t,
   track: e,
   direction: n,
   trackIndex: o,
   containerRef: r
 }) => {
-  const s = j(n, o), c = t[s];
-  if (c !== void 0)
-    return c;
+  const s = K(n, o), u = t[s];
+  if (u !== void 0)
+    return u;
   const a = tn(r?.current ?? null, n)[o];
   return a !== void 0 && a > 0 ? a : e.size.endsWith("px") ? Number.parseInt(e.size, 10) : 300;
 }, on = (t, e) => t.reduce((n, o, r) => r === e ? n : o.size.includes("fr") ? n + 100 : n + (o.minSize ?? 50), 0), rn = ({
@@ -908,13 +912,13 @@ const Xe = {
 }) => {
   if (!r?.current)
     return t.maxSize;
-  const c = o === "col" ? r.current.offsetWidth : r.current.offsetHeight, u = on(e, n), a = e.length - 1, l = o === "col" ? s.columnGap : s.rowGap, g = a * l, f = c - u - g;
+  const u = o === "col" ? r.current.offsetWidth : r.current.offsetHeight, c = on(e, n), a = e.length - 1, l = o === "col" ? s.columnGap : s.rowGap, g = a * l, f = u - c - g;
   return t.maxSize !== void 0 ? Math.min(t.maxSize, f) : f;
-}, sn = (t, e, n) => Wt(t, e ?? Number.NEGATIVE_INFINITY, n ?? Number.POSITIVE_INFINITY), wt = (t, e) => {
+}, sn = (t, e, n) => Yt(t, e ?? Number.NEGATIVE_INFINITY, n ?? Number.POSITIVE_INFINITY), bt = (t, e) => {
   const n = t.length, o = [];
-  for (let c = 0; c < n; c++) {
-    const u = t[c], a = u[e], l = u[e + 1];
-    a !== l && o.push(c);
+  for (let u = 0; u < n; u++) {
+    const c = t[u], a = c[e], l = c[e + 1];
+    a !== l && o.push(u);
   }
   if (o.length === 0)
     return { start: 1, end: n + 1 };
@@ -928,8 +932,8 @@ const Xe = {
   }
   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 };
+  const u = Math.min(...s), c = Math.max(...s);
+  return { start: u + 1, end: c + 2 };
 }, an = (t, e) => {
   if (t.length === 0)
     return [];
@@ -937,15 +941,15 @@ const Xe = {
   if (t.length === 1)
     return t[0]?.resizable ? [{ trackIndex: 0, align: "end", span: { start: 1, end: n + 1 } }] : [];
   const o = [];
-  return Array.from({ length: t.length - 1 }, (s, c) => c).forEach((s) => {
-    const c = t[s];
+  return Array.from({ length: t.length - 1 }, (s, u) => u).forEach((s) => {
+    const u = t[s];
     if (t[s + 1]?.resizable) {
-      const a = wt(e, s);
+      const a = bt(e, s);
       o.push({ trackIndex: s + 1, align: "start", span: a });
       return;
     }
-    if (c?.resizable) {
-      const a = wt(e, s);
+    if (u?.resizable) {
+      const a = bt(e, s);
       o.push({ trackIndex: s, align: "end", span: a });
     }
   }), o;
@@ -956,14 +960,14 @@ const Xe = {
   if (t.length === 1)
     return t[0]?.resizable ? [{ trackIndex: 0, align: "end", span: { start: 1, end: n + 1 } }] : [];
   const o = [];
-  return Array.from({ length: t.length - 1 }, (s, c) => c).forEach((s) => {
-    const c = t[s];
+  return Array.from({ length: t.length - 1 }, (s, u) => u).forEach((s) => {
+    const u = t[s];
     if (t[s + 1]?.resizable) {
       const a = vt(e, s);
       o.push({ trackIndex: s + 1, align: "start", span: a });
       return;
     }
-    if (c?.resizable) {
+    if (u?.resizable) {
       const a = vt(e, s);
       o.push({ trackIndex: s, align: "end", span: a });
     }
@@ -972,23 +976,23 @@ const Xe = {
   const n = Object.keys(e), o = {};
   for (const g of n)
     o[g] = t[g] ?? e[g];
-  const r = Object.keys(t), s = r.length !== n.length, c = r.some(
+  const r = Object.keys(t), s = r.length !== n.length, u = r.some(
     (g) => !Object.prototype.hasOwnProperty.call(o, g)
-  ), u = s ? !0 : c, a = n.some((g) => t[g] !== o[g]);
-  return (u ? !0 : a) ? o : null;
+  ), c = s ? !0 : u, a = n.some((g) => t[g] !== o[g]);
+  return (c ? !0 : a) ? o : null;
 }, dn = (t, e, n) => {
   const [o, r] = i.useState(() => ({
-    ...V(t.columns, "col"),
-    ...V(t.rows, "row")
+    ...X(t.columns, "col"),
+    ...X(t.rows, "row")
   }));
-  Dt(() => {
+  It(() => {
     const f = {
-      ...V(t.columns, "col"),
-      ...V(t.rows, "row")
+      ...X(t.columns, "col"),
+      ...X(t.rows, "row")
     };
     r((m) => ln(m, f) ?? m);
   }, [t.columns, t.rows]);
-  const s = i.useMemo(() => t.areas.map((f) => `"${f.join(" ")}"`).join(" "), [t.areas]), c = i.useMemo(() => Qe(t.gap), [t.gap]), u = i.useMemo(
+  const s = i.useMemo(() => t.areas.map((f) => `"${f.join(" ")}"`).join(" "), [t.areas]), u = i.useMemo(() => Qe(t.gap), [t.gap]), c = i.useMemo(
     () => an(t.columns, t.areas),
     [t.columns, t.areas]
   ), a = i.useMemo(
@@ -998,39 +1002,39 @@ const Xe = {
     ...t.style,
     ...e,
     gridTemplateAreas: s,
-    gridTemplateRows: bt(t.rows, o, "row"),
-    gridTemplateColumns: bt(t.columns, o, "col"),
+    gridTemplateRows: wt(t.rows, o, "row"),
+    gridTemplateColumns: wt(t.columns, o, "col"),
     ...un(t.gap)
   }), [s, t.columns, t.gap, t.rows, t.style, e, o]), g = i.useCallback(
-    (f, m, b) => {
-      const z = f === "row" ? t.rows : t.columns, E = z[m];
-      if (!E || !E.resizable)
+    (f, m, w) => {
+      const C = f === "row" ? t.rows : t.columns, z = C[m];
+      if (!z || !z.resizable)
         return;
-      const P = nn({
+      const y = nn({
         trackSizes: o,
-        track: E,
+        track: z,
         direction: f,
         trackIndex: m,
         containerRef: n
       }), L = rn({
-        track: E,
-        tracks: z,
+        track: z,
+        tracks: C,
         trackIndex: m,
         direction: f,
         containerRef: n,
-        gapSizes: c
-      }), x = j(f, m);
+        gapSizes: u
+      }), x = K(f, m);
       r((N) => {
-        const D = P + b, T = sn(D, E.minSize, L);
-        return { ...N, [x]: T };
+        const M = y + w, D = sn(M, z.minSize, L);
+        return { ...N, [x]: D };
       });
     },
-    [t.columns, t.rows, o, n, c]
+    [t.columns, t.rows, o, n, u]
   );
   return {
-    columnHandles: u,
+    columnHandles: c,
     rowHandles: a,
-    gapSizes: c,
+    gapSizes: u,
     gridStyle: l,
     handleResize: g
   };
@@ -1043,10 +1047,10 @@ const Xe = {
   right: t.right,
   bottom: t.bottom,
   left: t.left
-} : {}, mn = (t) => t !== void 0 ? { zIndex: t } : {}, bn = (t, e) => ({
+} : {}, mn = (t) => t !== void 0 ? { zIndex: t } : {}, wn = (t, e) => ({
   width: t,
   height: e
-}), wn = (t, e) => t.pointerEvents !== void 0 ? typeof t.pointerEvents == "boolean" ? { pointerEvents: t.pointerEvents ? "auto" : "none" } : { pointerEvents: t.pointerEvents } : e === "absolute" || e === "fixed" ? { pointerEvents: "auto" } : {}, vn = (t) => t.floating ? t.floating.position ?? t.floating.defaultPosition ?? t.position : t.position, Sn = (t) => {
+}), bn = (t, e) => t.pointerEvents !== void 0 ? typeof t.pointerEvents == "boolean" ? { pointerEvents: t.pointerEvents ? "auto" : "none" } : { pointerEvents: t.pointerEvents } : e === "absolute" || e === "fixed" ? { pointerEvents: "auto" } : {}, vn = (t) => t.floating ? t.floating.position ?? t.floating.defaultPosition ?? t.position : t.position, Sn = (t) => {
   if (t.floating) {
     const e = t.floating.size ?? t.floating.defaultSize;
     if (e)
@@ -1059,55 +1063,55 @@ const Xe = {
     width: t.width,
     height: t.height
   };
-}, zn = (t) => t.floating?.zIndex !== void 0 ? t.floating.zIndex : t.zIndex, En = (t) => {
-  const e = fn(t), n = vn(t), o = Sn(t), r = zn(t);
+}, Cn = (t) => t.floating?.zIndex !== void 0 ? t.floating.zIndex : t.zIndex, zn = (t) => {
+  const e = fn(t), n = vn(t), o = Sn(t), r = Cn(t);
   return {
     ...t.style,
     ...gn(e),
     ...pn(t, e),
     ...hn(n),
     ...mn(r),
-    ...bn(o.width, o.height),
-    ...wn(t, e)
+    ...wn(o.width, o.height),
+    ...bn(t, e)
   };
-}, Cn = (t) => {
+}, En = (t) => {
   const e = t.floating;
   return e ? e.mode ?? "embedded" : null;
-}, $ = (t) => Cn(t) !== "embedded" ? null : t.floating ?? null, St = (t) => t instanceof HTMLElement ? ["INPUT", "TEXTAREA", "SELECT", "BUTTON"].includes(t.tagName) : !1, zt = (t, e, n) => {
+}, F = (t) => En(t) !== "embedded" ? null : t.floating ?? null, St = (t) => t instanceof HTMLElement ? ["INPUT", "TEXTAREA", "SELECT", "BUTTON"].includes(t.tagName) : !1, Ct = (t, e, n) => {
   const o = e ?? Number.NEGATIVE_INFINITY, r = n ?? Number.POSITIVE_INFINITY;
-  return Wt(t, o, r);
-}, Et = (t, e, n) => {
+  return Yt(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.`
   );
-}, Ct = (t) => {
-  const e = $(t);
+}, Et = (t) => {
+  const e = F(t);
   if (!e)
     throw new Error(`Floating layer "${t.id}" is missing floating configuration required for dragging.`);
   const n = e.position ?? e.defaultPosition ?? t.position;
   if (!n)
     throw new Error(`Floating layer "${t.id}" must define position with left and top values.`);
   return {
-    left: Et(n.left, "left", t.id),
-    top: Et(n.top, "top", t.id)
+    left: zt(n.left, "left", t.id),
+    top: zt(n.top, "top", t.id)
   };
 }, Rn = (t) => {
-  const e = $(t);
+  const e = F(t);
   return e ? e.constraints ?? {} : {};
-}, Pn = (t, e, n) => t ? t === "left" ? e - n : e + n : e, yn = (t, e, n) => t ? t === "top" ? e - n : e + n : e, Ln = (t, e, n) => !t || t === "right" ? e : e + n, Mn = (t, e, n) => !t || t === "bottom" ? e : e + n, et = (t, e) => t ? t.dataset.layerId === e ? t : et(t.parentElement, e) : null, nt = (t, e, n) => !t || n?.(t) ? null : e(t) ? t : nt(t.parentElement, e, n), Dn = (t) => t instanceof HTMLElement ? nt(
+}, Pn = (t, e, n) => t ? t === "left" ? e - n : e + n : e, yn = (t, e, n) => t ? t === "top" ? e - n : e + n : e, Ln = (t, e, n) => !t || t === "right" ? e : e + n, Mn = (t, e, n) => !t || t === "bottom" ? e : e + n, nt = (t, e) => t ? t.dataset.layerId === e ? t : nt(t.parentElement, e) : null, ot = (t, e, n) => !t || n?.(t) ? null : e(t) ? t : ot(t.parentElement, e, n), Dn = (t) => t instanceof HTMLElement ? ot(
   t,
   (e) => e.dataset.dragHandle === "true",
   (e) => e.dataset.dragIgnore === "true"
-) : null, Rt = (t) => t instanceof HTMLElement ? nt(
+) : null, Rt = (t) => t instanceof HTMLElement ? ot(
   t,
   (e) => e.dataset.resizeCorner !== void 0 || e.dataset.resizeEdge !== void 0
-) !== null : !1, X = (t) => {
-  const e = $(t);
+) !== null : !1, U = (t) => {
+  const e = F(t);
   return e ? e.resizable === !0 : !1;
-}, U = (t) => {
-  if (!$(t))
+}, j = (t) => {
+  if (!F(t))
     return null;
   const n = xn(t);
   if (!n)
@@ -1116,162 +1120,162 @@ const Xe = {
     width: n.width,
     height: n.height
   };
-}, Tn = (t, e, n) => {
-  const o = t.filter(X).reduce((f, m) => {
+}, In = (t, e, n) => {
+  const o = t.filter(U).reduce((f, m) => {
     if (n === m.id) {
-      const z = e[m.id];
-      if (z)
-        return f[m.id] = z, f;
+      const C = e[m.id];
+      if (C)
+        return f[m.id] = C, f;
     }
-    const b = U(m);
-    return b && (f[m.id] = b), f;
-  }, {}), r = Object.keys(e), s = Object.keys(o), c = r.length !== s.length, u = r.some((f) => !Object.prototype.hasOwnProperty.call(o, f)), a = c ? !0 : u, l = s.some((f) => {
-    const m = e[f], b = o[f];
-    return !m || !b ? !0 : m.width !== b.width || m.height !== b.height;
+    const w = j(m);
+    return w && (f[m.id] = w), f;
+  }, {}), r = Object.keys(e), s = Object.keys(o), u = r.length !== s.length, c = r.some((f) => !Object.prototype.hasOwnProperty.call(o, f)), a = u ? !0 : c, l = s.some((f) => {
+    const m = e[f], w = o[f];
+    return !m || !w ? !0 : m.width !== w.width || m.height !== w.height;
   });
   return {
     sizes: o,
     changed: a ? !0 : l
   };
-}, In = ({
+}, Tn = ({
   layers: t,
   layerById: e,
   isRootLevel: n
 }) => {
-  const [o, r] = i.useState(null), [s, c] = i.useState(null), [u, a] = i.useState({}), [l, g] = i.useState({}), f = i.useRef(null), m = i.useRef(null), b = G((p, d) => {
+  const [o, r] = i.useState(null), [s, u] = i.useState(null), [c, a] = i.useState({}), [l, g] = i.useState({}), f = i.useRef(null), m = i.useRef(null), w = W((p, d) => {
     e.get(p)?.floating?.onMove?.(d);
-  }), z = G((p, d) => {
+  }), C = W((p, d) => {
     e.get(p)?.floating?.onResize?.(d);
   });
-  Dt(() => {
-    const { sizes: p, changed: d } = Tn(t, l, s);
+  It(() => {
+    const { sizes: p, changed: d } = In(t, l, s);
     d && g(p);
   }, [t, s]);
-  const E = i.useCallback(
-    (p, d, w, v) => {
-      const S = Ct(d), R = u[p] ?? { x: 0, y: 0 }, C = {
+  const z = i.useCallback(
+    (p, d, b, v) => {
+      const S = Et(d), P = c[p] ?? { x: 0, y: 0 }, E = {
         pointerStartX: v.clientX,
         pointerStartY: v.clientY,
-        initialTranslationX: R.x,
-        initialTranslationY: R.y,
+        initialTranslationX: P.x,
+        initialTranslationY: P.y,
         baseLeft: S.left,
         baseTop: S.top,
         layerId: p,
         pointerId: v.pointerId,
-        target: w
+        target: b
       };
-      if (C.target.setPointerCapture)
+      if (E.target.setPointerCapture)
         try {
-          C.target.setPointerCapture(C.pointerId);
+          E.target.setPointerCapture(E.pointerId);
         } catch {
         }
-      f.current = C, r(p);
+      f.current = E, r(p);
     },
-    [u]
-  ), P = i.useCallback(
+    [c]
+  ), y = i.useCallback(
     (p) => {
-      const d = p.target, w = Dn(d);
-      if (!w)
+      const d = p.target, b = Dn(d);
+      if (!b)
         return;
-      const v = w.closest("[data-layer-id]")?.getAttribute("data-layer-id");
+      const v = b.closest("[data-layer-id]")?.getAttribute("data-layer-id");
       if (!v)
         return;
       const S = e.get(v);
       if (!S)
         return;
-      const R = $(S);
-      if (!(!R || R.draggable !== !0) && !St(p.target) && !Rt(p.target) && w) {
-        const C = et(w, v);
-        if (!C)
+      const P = F(S);
+      if (!(!P || P.draggable !== !0) && !St(p.target) && !Rt(p.target) && b) {
+        const E = nt(b, v);
+        if (!E)
           return;
-        E(v, S, C, p);
+        z(v, S, E, p);
         return;
       }
     },
-    [E, e]
+    [z, e]
   ), L = i.useCallback(
     (p, d) => {
-      const w = e.get(p), v = w ? $(w) : null;
-      if (!w || !v || v.draggable !== !0 || St(d.target) || Rt(d.target))
+      const b = e.get(p), v = b ? F(b) : null;
+      if (!b || !v || v.draggable !== !0 || St(d.target) || Rt(d.target))
         return;
-      const S = et(d.currentTarget, p);
-      S && E(p, w, S, d);
+      const S = nt(d.currentTarget, p);
+      S && z(p, b, S, d);
     },
-    [E, e]
+    [z, e]
   ), x = i.useCallback(
-    (p, d, w) => {
+    (p, d, b) => {
       const v = e.get(p);
-      if (!v || !X(v))
+      if (!v || !U(v))
         return;
-      const S = l[p] ?? U(v);
+      const S = l[p] ?? j(v);
       if (!S)
         return;
-      const R = Ct(v), C = Rn(v), k = u[p] ?? { x: 0, y: 0 };
-      if (w.stopPropagation(), w.preventDefault(), w.currentTarget.setPointerCapture)
+      const P = Et(v), E = Rn(v), k = c[p] ?? { x: 0, y: 0 };
+      if (b.stopPropagation(), b.preventDefault(), b.currentTarget.setPointerCapture)
         try {
-          w.currentTarget.setPointerCapture(w.pointerId);
+          b.currentTarget.setPointerCapture(b.pointerId);
         } catch {
         }
       m.current = {
         layerId: p,
-        pointerId: w.pointerId,
+        pointerId: b.pointerId,
         horizontalEdge: d.horizontal,
         verticalEdge: d.vertical,
-        startX: w.clientX,
-        startY: w.clientY,
+        startX: b.clientX,
+        startY: b.clientY,
         startWidth: S.width,
         startHeight: S.height,
         startPosition: k,
-        baseLeft: R.left,
-        baseTop: R.top,
-        minWidth: C.minWidth,
-        maxWidth: C.maxWidth,
-        minHeight: C.minHeight,
-        maxHeight: C.maxHeight,
-        target: w.currentTarget
-      }, c(p);
+        baseLeft: P.left,
+        baseTop: P.top,
+        minWidth: E.minWidth,
+        maxWidth: E.maxWidth,
+        minHeight: E.minHeight,
+        maxHeight: E.maxHeight,
+        target: b.currentTarget
+      }, u(p);
     },
-    [e, u, l]
+    [e, c, l]
   ), N = i.useCallback(
     (p) => {
       const d = f.current;
       if (!d)
         return;
-      const w = p.clientX - d.pointerStartX, v = p.clientY - d.pointerStartY, S = {
-        x: d.initialTranslationX + w,
+      const b = p.clientX - d.pointerStartX, v = p.clientY - d.pointerStartY, S = {
+        x: d.initialTranslationX + b,
         y: d.initialTranslationY + v
       };
-      a((R) => ({ ...R, [d.layerId]: S })), b(d.layerId, {
+      a((P) => ({ ...P, [d.layerId]: S })), w(d.layerId, {
         left: d.baseLeft + S.x,
         top: d.baseTop + S.y
       });
     },
-    [b]
-  ), D = i.useCallback(
+    [w]
+  ), M = i.useCallback(
     (p) => {
       const d = m.current;
       if (!d || d.pointerId !== p.pointerId || !e.get(d.layerId))
         return;
-      const v = p.clientX - d.startX, S = p.clientY - d.startY, R = Pn(d.horizontalEdge, d.startWidth, v), C = yn(d.verticalEdge, d.startHeight, S), k = zt(R, d.minWidth, d.maxWidth), _ = zt(C, d.minHeight, d.maxHeight), O = d.startWidth - k, Z = d.startHeight - _, it = Ln(
+      const v = p.clientX - d.startX, S = p.clientY - d.startY, P = Pn(d.horizontalEdge, d.startWidth, v), E = yn(d.verticalEdge, d.startHeight, S), k = Ct(P, d.minWidth, d.maxWidth), $ = Ct(E, d.minHeight, d.maxHeight), O = d.startWidth - k, Z = d.startHeight - $, it = Ln(
         d.horizontalEdge,
         d.startPosition.x,
         O
-      ), Yt = Mn(d.verticalEdge, d.startPosition.y, Z), K = l[d.layerId], at = { width: k, height: _ };
-      (!K || K.width !== k || K.height !== _) && (g((q) => ({
-        ...q,
+      ), Xt = Mn(d.verticalEdge, d.startPosition.y, Z), q = l[d.layerId], at = { width: k, height: $ };
+      (!q || q.width !== k || q.height !== $) && (g((J) => ({
+        ...J,
         [d.layerId]: at
-      })), z(d.layerId, at));
-      const ct = u[d.layerId] ?? { x: 0, y: 0 }, W = { x: it, y: Yt };
-      (ct.x !== W.x || ct.y !== W.y) && (a((q) => ({
-        ...q,
-        [d.layerId]: W
-      })), b(d.layerId, {
-        left: d.baseLeft + W.x,
-        top: d.baseTop + W.y
+      })), C(d.layerId, at));
+      const ct = c[d.layerId] ?? { x: 0, y: 0 }, B = { x: it, y: Xt };
+      (ct.x !== B.x || ct.y !== B.y) && (a((J) => ({
+        ...J,
+        [d.layerId]: B
+      })), w(d.layerId, {
+        left: d.baseLeft + B.x,
+        top: d.baseTop + B.y
       }));
     },
-    [e, u, l, b, z]
-  ), T = i.useCallback((p) => {
+    [e, c, l, w, C]
+  ), D = i.useCallback((p) => {
     const d = f.current;
     if (d) {
       if (d.pointerId === p.pointerId && d.target.releasePointerCapture)
@@ -1282,7 +1286,7 @@ const Xe = {
       f.current = null;
     }
     r(null);
-  }, []), M = i.useCallback((p) => {
+  }, []), A = i.useCallback((p) => {
     const d = m.current;
     if (d) {
       if (d.pointerId === p.pointerId && d.target.releasePointerCapture)
@@ -1292,54 +1296,54 @@ const Xe = {
         }
       m.current = null;
     }
-    c(null);
+    u(null);
   }, []);
-  tt(o !== null, {
+  et(o !== null, {
     onMove: N,
-    onUp: T,
-    onCancel: T
-  }), tt(s !== null, {
-    onMove: D,
-    onUp: M,
-    onCancel: M
+    onUp: D,
+    onCancel: D
+  }), et(s !== null, {
+    onMove: M,
+    onUp: A,
+    onCancel: A
   });
-  const y = i.useCallback(
+  const I = i.useCallback(
     (p) => {
-      const d = En(p), w = $(p);
-      if (!w || w.draggable !== !0)
+      const d = zn(p), b = F(p);
+      if (!b || b.draggable !== !0)
         return d;
-      const v = u[p.id], S = o === p.id, R = s === p.id, C = v ? { transform: `translate(${v.x}px, ${v.y}px)` } : {}, k = l[p.id], _ = X(p) ? U(p) : null, O = k ?? _, Z = O ? { width: `${O.width}px`, height: `${O.height}px` } : {};
+      const v = c[p.id], S = o === p.id, P = s === p.id, E = v ? { transform: `translate(${v.x}px, ${v.y}px)` } : {}, k = l[p.id], $ = U(p) ? j(p) : null, O = k ?? $, Z = O ? { width: `${O.width}px`, height: `${O.height}px` } : {};
       return {
         ...d,
         ...Z,
-        ...C,
-        ...S || R ? { cursor: "grabbing" } : {}
+        ...E,
+        ...S || P ? { cursor: "grabbing" } : {}
       };
     },
-    [o, u, l, s]
-  ), ot = i.useCallback(
+    [o, c, l, s]
+  ), R = i.useCallback(
     (p) => {
-      if (!X(p))
+      if (!U(p))
         return { isResizable: !1 };
-      const w = l[p.id], v = U(p);
-      return (w ?? v) !== null ? { isResizable: !0, onPointerDown: (k, _) => {
-        x(p.id, k, _);
+      const b = l[p.id], v = j(p);
+      return (b ?? v) !== null ? { isResizable: !0, onPointerDown: (k, $) => {
+        x(p.id, k, $);
       } } : { isResizable: !1 };
     },
     [x, l]
   ), rt = i.useCallback(
     (p) => {
-      const { isResizable: d, onPointerDown: w } = ot(p), v = y(p), S = s === p.id;
+      const { isResizable: d, onPointerDown: b } = R(p), v = I(p), S = s === p.id;
       return {
         style: v,
         isResizable: d,
         isResizing: S,
-        onResizeHandlePointerDown: (R, C) => {
-          w && w(R, C);
+        onResizeHandlePointerDown: (P, E) => {
+          b && b(P, E);
         }
       };
     },
-    [y, ot, s]
+    [I, R, s]
   ), st = i.useCallback(
     (p) => ({
       "data-drag-handle": "true",
@@ -1355,12 +1359,12 @@ const Xe = {
   return {
     providerValue: i.useMemo(
       () => ({
-        handleLayerPointerDown: P,
+        handleLayerPointerDown: y,
         getLayerRenderState: rt,
         getLayerHandleProps: st,
         isRootLevel: n
       }),
-      [st, rt, P, n]
+      [st, rt, y, n]
     ),
     draggingLayerId: o,
     resizingLayerId: s
@@ -1373,7 +1377,7 @@ const Xe = {
   }
   if (typeof t.width == "number" && typeof t.height == "number")
     return { width: t.width, height: t.height };
-}, Bt = {
+}, Vt = {
   display: "grid",
   width: "100%",
   height: "100%",
@@ -1384,77 +1388,78 @@ const Xe = {
   WebkitUserSelect: "none",
   userSelect: "none"
 }, An = {
-  ...Bt,
+  ...Vt,
+  overflow: "visible",
   height: "auto",
   minHeight: "100%"
-}, Hn = (t) => t ? An : Bt, jn = ({ config: t, layers: e, style: n, root: o = !1 }) => {
-  const r = i.useRef(null), { isIntersecting: s } = ue(r, { threshold: 0 });
-  return /* @__PURE__ */ h(Ce, { config: t, layers: e, style: n, children: /* @__PURE__ */ h(Nn, { gridRef: r, isIntersecting: s, isRoot: o }) });
+}, Hn = (t) => t ? An : Vt, Kn = ({ config: t, layers: e, style: n, root: o = !1 }) => {
+  const r = i.useRef(null), { isIntersecting: s } = de(r, { threshold: 0 });
+  return /* @__PURE__ */ h(Ee, { config: t, layers: e, style: n, children: /* @__PURE__ */ h(Nn, { gridRef: r, isIntersecting: s, isRoot: o }) });
 }, Nn = ({ gridRef: t, isIntersecting: e, isRoot: n }) => {
-  const { config: o, style: r, layers: s } = Ee(), { normalizedLayers: c, visibleLayers: u, regularLayers: a, layerById: l } = Je(o, s.defs), { columnHandles: g, rowHandles: f, gapSizes: m, gridStyle: b, handleResize: z } = dn(o, r, t), { providerValue: E, draggingLayerId: P, resizingLayerId: L } = In({
-    layers: c,
+  const { config: o, style: r, layers: s } = Ht(), { normalizedLayers: u, visibleLayers: c, regularLayers: a, layerById: l } = Je(o, s.defs), { columnHandles: g, rowHandles: f, gapSizes: m, gridStyle: w, handleResize: C } = dn(o, r, t), { providerValue: z, draggingLayerId: y, resizingLayerId: L } = Tn({
+    layers: u,
     layerById: l,
     isRootLevel: n
-  }), x = P ? !0 : !!L, N = i.useMemo(() => ({
+  }), x = y ? !0 : !!L, N = i.useMemo(() => ({
     ...Hn(n),
-    ...b,
+    ...w,
     ...x ? kn : {}
-  }), [b, x, n]);
-  return /* @__PURE__ */ A(H, { children: [
-    /* @__PURE__ */ A(
+  }), [w, x, n]);
+  return /* @__PURE__ */ H(_, { children: [
+    /* @__PURE__ */ H(
       "div",
       {
         ref: t,
         style: N,
-        "data-dragging": !!P,
+        "data-dragging": !!y,
         "data-resizing": !!L,
         "data-visible": e,
         children: [
-          /* @__PURE__ */ h(ze, { value: E, children: /* @__PURE__ */ h(Fe, { layers: a }) }),
-          g.map(({ trackIndex: D, align: T, span: M }) => /* @__PURE__ */ h(
+          /* @__PURE__ */ h(ze, { value: z, children: /* @__PURE__ */ h(_e, { layers: a }) }),
+          g.map(({ trackIndex: M, align: D, span: A }) => /* @__PURE__ */ h(
             mt,
             {
               direction: "col",
-              trackIndex: D,
-              align: T,
+              trackIndex: M,
+              align: D,
               gap: m.columnGap,
-              span: M,
-              onResize: z
+              span: A,
+              onResize: C
             },
-            `col-${D}:${T}`
+            `col-${M}:${D}`
           )),
-          f.map(({ trackIndex: D, align: T, span: M }) => /* @__PURE__ */ h(
+          f.map(({ trackIndex: M, align: D, span: A }) => /* @__PURE__ */ h(
             mt,
             {
               direction: "row",
-              trackIndex: D,
-              align: T,
+              trackIndex: M,
+              align: D,
               gap: m.rowGap,
-              span: M,
-              onResize: z
+              span: A,
+              onResize: C
             },
-            `row-${D}:${T}`
+            `row-${M}:${D}`
           ))
         ]
       }
     ),
-    /* @__PURE__ */ h(Se, { layers: u })
+    /* @__PURE__ */ h(Ce, { layers: c })
   ] });
 };
 export {
-  me as D,
+  we as D,
   _t as F,
-  jn as G,
-  Ze as R,
-  Xn as a,
-  xt as b,
-  G as c,
+  Kn as G,
+  Ke as R,
+  Un as a,
+  kt as b,
+  W as c,
   Ve as d,
-  Wt as e,
-  Se as f,
-  Vn as g,
+  Yt as e,
+  Ce as f,
+  Xn as g,
   Tt as r,
-  Un as t,
+  jn as t,
   Be as u
 };
-//# sourceMappingURL=GridLayout-tpSM0iM-.js.map
+//# sourceMappingURL=GridLayout-CJTKq7Mp.js.map