react-panel-layout 0.4.1 → 0.4.2

package/dist/{GridLayout-DZCV1X-3.js → GridLayout-CLvW8jID.js}

@@ -1,8 +1,10 @@
-import { jsxs as $, Fragment as G, jsx as m } from "react/jsx-runtime";
+import { jsxs as G, Fragment as N, jsx as h } from "react/jsx-runtime";
 import * as i from "react";
-import { C as xt, D as At, f as Ht, F as Nt, e as _t, g as $t, a as Gt, h as Ft, i as Ot, j as Wt, b as Bt, k as Yt, G as B, l as M, m as Xt, n as Vt, o as Ut, R as ct, p as jt, q as J } from "./FloatingPanelFrame-BeP9z8EI.js";
-import { createPortal as Zt } from "react-dom";
-const Kt = () => {
+import { F as _t, e as $t, a as Gt, b as Ft } from "./FloatingPanelFrame-SOrLGjZd.js";
+import { C as Ot, D as Wt, m as Bt, n as Yt, o as Xt, p as Vt, q as Ut, r as jt, G as B, s as D, t as Zt, u as Kt, v as qt, R as ct, w as Jt, x as J } from "./styles-w0ZixggV.js";
+import { createPortal as Qt } from "react-dom";
+import { u as te, a as Rt } from "./usePivot-z9gumDf-.js";
+const ee = () => {
   const t = /* @__PURE__ */ new Map();
   return (e) => {
     if (!e)
@@ -10,24 +12,24 @@ const Kt = () => {
     const n = t.get(e);
     if (n !== void 0)
       return n;
-    const o = t.size;
-    return t.set(e, o), o;
+    const r = t.size;
+    return t.set(e, r), r;
   };
-}, qt = Kt(), Q = /* @__PURE__ */ new Map(), Jt = (t) => {
-  const e = `ovs-threshold:${t.threshold}-rootMargin:${t.rootMargin}-root:${qt(t.root)}`;
+}, ne = ee(), Q = /* @__PURE__ */ new Map(), re = (t) => {
+  const e = `ovs-threshold:${t.threshold}-rootMargin:${t.rootMargin}-root:${ne(t.root)}`;
   if (Q.has(e))
     return Q.get(e);
   const n = new class {
     #t = /* @__PURE__ */ new Map();
-    #e = new IntersectionObserver((o) => {
-      o.forEach((r) => {
-        const s = this.#t.get(r.target);
-        s && s(r);
+    #e = new IntersectionObserver((r) => {
+      r.forEach((o) => {
+        const s = this.#t.get(o.target);
+        s && s(o);
       });
     }, t);
-    observe(o, r) {
-      return this.#t.set(o, r), this.#e.observe(o), () => {
-        this.#t.delete(o), this.#e.unobserve(o);
+    observe(r, o) {
+      return this.#t.set(r, o), this.#e.observe(r), () => {
+        this.#t.delete(r), this.#e.unobserve(r);
       };
     }
   }();
@@ -42,14 +44,14 @@ const Kt = () => {
   bottom: 0,
   left: 0
 });
-function Qt(t, { threshold: e = 0, rootMargin: n = "0px", root: o = null }) {
-  const [r, s] = i.useState(null);
+function oe(t, { threshold: e = 0, rootMargin: n = "0px", root: r = null }) {
+  const [o, s] = i.useState(null);
   return i.useEffect(() => {
     const c = t.current;
-    return c ? Jt({
+    return c ? re({
       threshold: e,
       rootMargin: n,
-      root: o
+      root: r
     }).observe(c, (a) => {
       s({
         isIntersecting: a.isIntersecting,
@@ -61,21 +63,21 @@ function Qt(t, { threshold: e = 0, rootMargin: n = "0px", root: o = null }) {
         time: a.time
       });
     }) : void 0;
-  }, [t, e, n, o]), i.useMemo(() => ({
-    isIntersecting: r?.isIntersecting ?? !1,
-    boundingClientRect: r?.boundingClientRect ?? ut,
-    intersectionRatio: r?.intersectionRatio ?? 0,
-    intersectionRect: r?.intersectionRect ?? ut,
-    rootBounds: r?.rootBounds ?? null,
-    target: r?.target ?? t.current,
-    time: r?.time ?? 0
-  }), [r, t]);
+  }, [t, e, n, r]), i.useMemo(() => ({
+    isIntersecting: o?.isIntersecting ?? !1,
+    boundingClientRect: o?.boundingClientRect ?? ut,
+    intersectionRatio: o?.intersectionRatio ?? 0,
+    intersectionRect: o?.intersectionRect ?? ut,
+    rootBounds: o?.rootBounds ?? null,
+    target: o?.target ?? t.current,
+    time: o?.time ?? 0
+  }), [o, t]);
 }
 const lt = {
   position: "fixed",
   inset: 0,
-  background: xt
-}, te = {
+  background: Ot
+}, se = {
   willChange: "transform"
 }, dt = {
   left: {
@@ -102,41 +104,41 @@ const lt = {
     right: 0,
     transform: "translateY(100%)"
   }
-}, ee = (t, e, n) => t === "none" ? void 0 : `transform ${e ?? At} ${n ?? Ht}`, ne = (t, e) => t ? e : !1, re = {
+}, ie = (t, e, n) => t === "none" ? void 0 : `transform ${e ?? Wt} ${n ?? Bt}`, ae = (t, e) => t ? e : !1, ce = {
   marginLeft: "auto",
   border: "none",
   background: "transparent",
   cursor: "pointer",
-  fontSize: Yt
-}, oe = ({ header: t, dismissible: e, onClose: n }) => {
+  fontSize: jt
+}, ue = ({ header: t, dismissible: e, onClose: n }) => {
   if (!t)
     return null;
-  const o = t.showCloseButton ?? !0, r = ne(e, o);
-  return /* @__PURE__ */ m(i.Activity, { mode: t ? "visible" : "hidden", children: /* @__PURE__ */ $(
+  const r = t.showCloseButton ?? !0, o = ae(e, r);
+  return /* @__PURE__ */ h(i.Activity, { mode: t ? "visible" : "hidden", children: /* @__PURE__ */ G(
     Gt,
     {
-      style: { padding: `${Ot} ${Wt}`, gap: Ft },
+      style: { padding: `${Vt} ${Ut}`, gap: Xt },
       children: [
-        /* @__PURE__ */ m(i.Activity, { mode: t ? "visible" : "hidden", children: /* @__PURE__ */ m(Bt, { children: t.title }) }),
-        /* @__PURE__ */ m(i.Activity, { mode: r ? "visible" : "hidden", children: /* @__PURE__ */ m("button", { style: re, onClick: n, "aria-label": "Close drawer", type: "button", children: "×" }) })
+        /* @__PURE__ */ h(i.Activity, { mode: t ? "visible" : "hidden", children: /* @__PURE__ */ h(Ft, { children: t.title }) }),
+        /* @__PURE__ */ h(i.Activity, { mode: o ? "visible" : "hidden", children: /* @__PURE__ */ h("button", { style: ce, onClick: n, "aria-label": "Close drawer", type: "button", children: "×" }) })
       ]
     }
   ) });
-}, se = ({ header: t, dismissible: e, onClose: n, chrome: o, children: r }) => o ? /* @__PURE__ */ $(Nt, { style: { height: "100%", borderRadius: 0 }, children: [
-  /* @__PURE__ */ m(oe, { header: t, dismissible: e, onClose: n }),
-  /* @__PURE__ */ m(
-    _t,
+}, le = ({ header: t, dismissible: e, onClose: n, chrome: r, children: o }) => r ? /* @__PURE__ */ G(_t, { style: { height: "100%", borderRadius: 0 }, children: [
+  /* @__PURE__ */ h(ue, { header: t, dismissible: e, onClose: n }),
+  /* @__PURE__ */ h(
+    $t,
     {
-      style: { padding: $t, flex: 1, display: "flex", flexDirection: "column" },
-      children: r
+      style: { padding: Yt, flex: 1, display: "flex", flexDirection: "column" },
+      children: o
     }
   )
-] }) : /* @__PURE__ */ m(G, { children: r }), ie = ({
+] }) : /* @__PURE__ */ h(N, { children: o }), de = ({
   id: t,
   config: e,
   isOpen: n,
-  onClose: o,
-  children: r,
+  onClose: r,
+  children: o,
   zIndex: s,
   width: c,
   height: u,
@@ -144,28 +146,28 @@ const lt = {
 }) => {
   const {
     dismissible: d = !0,
-    header: p,
+    header: g,
     chrome: f = !0,
-    inline: h = !1,
+    inline: m = !1,
     transitionMode: w = "css",
     transitionDuration: E,
     transitionEasing: z
-  } = e, D = i.useCallback((y) => y ? y.left !== void 0 ? "left" : y.right !== void 0 ? "right" : y.top !== void 0 ? "top" : y.bottom !== void 0 ? "bottom" : "right" : "right", [])(a), F = {
+  } = e, L = i.useCallback((y) => y ? y.left !== void 0 ? "left" : y.right !== void 0 ? "right" : y.top !== void 0 ? "top" : y.bottom !== void 0 ? "bottom" : "right" : "right", [])(a), F = {
     left: "translateX(0)",
     right: "translateX(0)",
     top: "translateY(0)",
     bottom: "translateY(0)"
   }, T = i.useMemo(() => {
-    const y = ee(w, E, z), I = {
-      ...te,
-      ...h ? { position: "absolute" } : { position: "fixed" },
-      ...dt[D],
-      transform: n ? F[D] : dt[D].transform,
+    const y = ie(w, E, z), I = {
+      ...se,
+      ...m ? { position: "absolute" } : { position: "fixed" },
+      ...dt[L],
+      transform: n ? F[L] : dt[L].transform,
       transition: y
     };
     return s !== void 0 && (I.zIndex = s), c !== void 0 && (I.width = typeof c == "number" ? `${c}px` : c), u !== void 0 && (I.height = typeof u == "number" ? `${u}px` : u), I;
-  }, [u, h, n, D, E, z, w, c, s]), L = p?.title ?? e.ariaLabel ?? "Drawer", x = i.useMemo(() => {
-    const y = h ? { ...lt, position: "absolute" } : lt, I = w === "none" ? void 0 : `opacity ${E ?? "220ms"} ease`;
+  }, [u, m, n, L, E, z, w, c, s]), M = g?.title ?? e.ariaLabel ?? "Drawer", k = i.useMemo(() => {
+    const y = m ? { ...lt, position: "absolute" } : lt, I = w === "none" ? void 0 : `opacity ${E ?? "220ms"} ease`;
     return {
       ...y,
       opacity: n ? 1 : 0,
@@ -173,139 +175,139 @@ const lt = {
       transition: I,
       zIndex: s !== void 0 ? s - 1 : void 0
     };
-  }, [h, n, E, w, s]);
-  return /* @__PURE__ */ $(G, { children: [
-    /* @__PURE__ */ m("div", { style: x, onClick: d ? o : void 0 }),
-    /* @__PURE__ */ m(
+  }, [m, n, E, w, s]);
+  return /* @__PURE__ */ G(N, { children: [
+    /* @__PURE__ */ h("div", { style: k, onClick: d ? r : void 0 }),
+    /* @__PURE__ */ h(
       "div",
       {
         "data-layer-id": t,
-        "data-placement": D,
+        "data-placement": L,
         style: T,
         role: "dialog",
         "aria-modal": d ? !0 : void 0,
         "aria-hidden": n ? void 0 : !0,
-        "aria-label": L,
-        children: /* @__PURE__ */ m(se, { header: p, dismissible: d, onClose: o, chrome: f, children: r })
+        "aria-label": M,
+        children: /* @__PURE__ */ h(le, { header: g, dismissible: d, onClose: r, chrome: f, children: o })
       }
     )
   ] });
-}, ae = (t, e) => new Promise((n) => {
-  let o = !1;
-  const r = () => {
-    o || (o = !0, t.removeEventListener("transitionend", s), n());
+}, fe = (t, e) => new Promise((n) => {
+  let r = !1;
+  const o = () => {
+    r || (r = !0, t.removeEventListener("transitionend", s), n());
   }, s = (c) => {
-    c.target === t && r();
+    c.target === t && o();
   };
-  t.addEventListener("transitionend", s), setTimeout(r, e + 50);
-}), Rt = async (t, e, n, o) => {
+  t.addEventListener("transitionend", s), setTimeout(o, e + 50);
+}), Pt = async (t, e, n, r) => {
   switch (e) {
     case "none":
       t();
       return;
     case "css":
-      t(), n && await ae(n, o);
+      t(), n && await fe(n, r);
       return;
   }
-}, Dn = (t) => {
-  const [e, n] = i.useState({}), o = i.useRef(t);
-  o.current = t;
-  const r = i.useCallback(
-    async (a, d, p) => {
-      const { mode: f = "none", element: h, duration: w = 300 } = p ?? {};
-      await Rt(() => {
+}, kn = (t) => {
+  const [e, n] = i.useState({}), r = i.useRef(t);
+  r.current = t;
+  const o = i.useCallback(
+    async (a, d, g) => {
+      const { mode: f = "none", element: m, duration: w = 300 } = g ?? {};
+      await Pt(() => {
         n((P) => P[a] === d ? P : { ...P, [a]: d });
-      }, f, h?.current, w);
-      const z = o.current;
+      }, f, m?.current, w);
+      const z = r.current;
       d ? z?.onOpen?.(a) : z?.onClose?.(a), z?.onTransitionEnd?.(a, d);
     },
     []
   ), s = i.useCallback((a) => e[a] ?? !1, [e]), c = i.useCallback(
-    (a, d) => r(a, !0, d),
-    [r]
+    (a, d) => o(a, !0, d),
+    [o]
   ), u = i.useCallback(
-    (a, d) => r(a, !1, d),
-    [r]
+    (a, d) => o(a, !1, d),
+    [o]
   );
   return { state: s, open: c, close: u };
-}, ce = (t) => {
+}, pe = (t) => {
   if (!t)
     return 300;
   const e = t.match(/(\d+)/);
   return e ? parseInt(e[1], 10) : 300;
-}, ue = (t) => {
+}, ge = (t) => {
   const [e, n] = i.useState(() => {
     const a = {};
     return t.forEach((d) => {
       d.drawer && (a[d.id] = d.drawer.defaultOpen ?? !1);
     }), a;
-  }), o = i.useMemo(() => {
+  }), r = i.useMemo(() => {
     const a = /* @__PURE__ */ new Map();
     return t.forEach((d) => a.set(d.id, d)), a;
-  }, [t]), r = i.useCallback(
-    async (a, d, p) => {
-      const f = o.get(a);
+  }, [t]), o = i.useCallback(
+    async (a, d, g) => {
+      const f = r.get(a);
       if (!f?.drawer)
         return;
-      const h = p?.mode ?? f.drawer.transitionMode ?? "css", w = p?.duration ?? ce(f.drawer.transitionDuration), E = p?.element?.current;
-      await Rt(() => {
+      const m = g?.mode ?? f.drawer.transitionMode ?? "css", w = g?.duration ?? pe(f.drawer.transitionDuration), E = g?.element?.current;
+      await Pt(() => {
         f.drawer?.open === void 0 && n((P) => P[a] === d ? P : { ...P, [a]: d }), f.drawer?.onStateChange?.(d);
-      }, h, E, w);
+      }, m, E, w);
     },
-    [o]
+    [r]
   ), s = i.useCallback(
     (a) => {
-      const d = o.get(a);
+      const d = r.get(a);
       return d?.drawer?.open !== void 0 ? d.drawer.open : e[a] ?? !1;
     },
-    [o, e]
+    [r, e]
   ), c = i.useCallback(
-    (a, d) => r(a, !0, d),
-    [r]
+    (a, d) => o(a, !0, d),
+    [o]
   ), u = i.useCallback(
-    (a, d) => r(a, !1, d),
-    [r]
+    (a, d) => o(a, !1, d),
+    [o]
   );
   return { state: s, open: c, close: u };
-}, le = ({ layers: t }) => {
-  const e = ue(t), n = i.useMemo(() => t.filter((r) => r.drawer), [t]), o = i.useMemo(() => {
-    const r = /* @__PURE__ */ new Map();
+}, he = ({ layers: t }) => {
+  const e = ge(t), n = i.useMemo(() => t.filter((o) => o.drawer), [t]), r = i.useMemo(() => {
+    const o = /* @__PURE__ */ new Map();
     return n.forEach((s) => {
-      r.set(s.id, () => e.close(s.id));
-    }), r;
+      o.set(s.id, () => e.close(s.id));
+    }), o;
   }, [n, e.close]);
-  return /* @__PURE__ */ m(G, { children: n.map((r) => {
-    if (!r.drawer)
+  return /* @__PURE__ */ h(N, { children: n.map((o) => {
+    if (!o.drawer)
       return null;
-    const s = e.state(r.id), c = o.get(r.id);
-    return c ? /* @__PURE__ */ m(
-      ie,
+    const s = e.state(o.id), c = r.get(o.id);
+    return c ? /* @__PURE__ */ h(
+      de,
       {
-        id: r.id,
-        config: r.drawer,
+        id: o.id,
+        config: o.drawer,
         isOpen: s,
         onClose: c,
-        zIndex: r.zIndex,
-        width: r.width,
-        height: r.height,
-        position: r.position,
-        children: r.component
+        zIndex: o.zIndex,
+        width: o.width,
+        height: o.height,
+        position: o.position,
+        children: o.component
       },
-      r.id
+      o.id
     ) : null;
   }) });
-}, Pt = i.createContext(null), de = ({ value: t, children: e }) => /* @__PURE__ */ m(Pt.Provider, { value: t, children: e }), fe = () => {
-  const t = i.useContext(Pt);
+}, yt = i.createContext(null), me = ({ value: t, children: e }) => /* @__PURE__ */ h(yt.Provider, { value: t, children: e }), Lt = () => {
+  const t = i.useContext(yt);
   if (!t)
     throw new Error("useGridLayoutContext must be used within a GridLayoutProvider.");
   return t;
-}, yt = i.createContext(null), pe = () => {
-  const t = i.useContext(yt);
+}, Mt = i.createContext(null), be = () => {
+  const t = i.useContext(Mt);
   if (!t)
     throw new Error("usePanelSystem must be used within a PanelSystemProvider.");
   return t;
-}, ge = ({ config: t, layers: e, style: n, children: o }) => {
-  const r = i.useMemo(() => {
+}, we = ({ config: t, layers: e, style: n, children: r }) => {
+  const o = i.useMemo(() => {
     const c = /* @__PURE__ */ new Map();
     return e.forEach((u) => {
       c.set(u.id, u);
@@ -316,16 +318,16 @@ const lt = {
       style: n,
       layers: {
         defs: e,
-        layerById: r
+        layerById: o
       }
     }),
-    [t, n, e, r]
+    [t, n, e, o]
   );
-  return /* @__PURE__ */ m(yt.Provider, { value: s, children: o });
-}, Dt = i.createContext(null), Lt = ({ layerId: t, children: e }) => {
+  return /* @__PURE__ */ h(Mt.Provider, { value: s, children: r });
+}, Dt = i.createContext(null), Tt = ({ layerId: t, children: e }) => {
   const n = i.useMemo(() => ({ layerId: t }), [t]);
-  return /* @__PURE__ */ m(Dt.Provider, { value: n, children: e });
-}, Ln = () => {
+  return /* @__PURE__ */ h(Dt.Provider, { value: n, children: e });
+}, An = () => {
   const t = i.useContext(Dt);
   if (!t)
     throw new Error("useLayerInstance must be used within a LayerInstanceProvider.");
@@ -334,43 +336,43 @@ const lt = {
   if (typeof t == "number" && Number.isFinite(t))
     return t;
   throw new Error(`Popup layer "${n}" requires a numeric "${e}" value.`);
-}, Mt = (t, e) => {
+}, It = (t, e) => {
   if (!t)
     throw new Error(`Popup layer "${e}" must define position (left/top).`);
   return {
     left: ft(t.left, "left", e),
     top: ft(t.top, "top", e)
   };
-}, Y = (t) => `${Math.round(t)}`, N = (t) => {
+}, Y = (t) => `${Math.round(t)}`, _ = (t) => {
   if (t !== void 0)
     return t ? "yes" : "no";
-}, he = (t, e, n, o, r) => {
-  const s = {}, c = Mt(e, t);
-  if (typeof n != "number" || typeof o != "number")
+}, ve = (t, e, n, r, o) => {
+  const s = {}, c = It(e, t);
+  if (typeof n != "number" || typeof r != "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;
+  s.width = Y(n), s.height = Y(r), s.left = Y(c.left), s.top = Y(c.top);
+  const u = o?.features;
   if (u) {
-    const a = N(u.toolbar), d = N(u.menubar), p = N(u.location), f = N(u.status), h = N(u.resizable), w = N(u.scrollbars);
-    a !== void 0 && (s.toolbar = a), d !== void 0 && (s.menubar = d), p !== void 0 && (s.location = p), f !== void 0 && (s.status = f), h !== void 0 && (s.resizable = h), w !== void 0 && (s.scrollbars = w);
+    const a = _(u.toolbar), d = _(u.menubar), g = _(u.location), f = _(u.status), m = _(u.resizable), w = _(u.scrollbars);
+    a !== void 0 && (s.toolbar = a), d !== void 0 && (s.menubar = d), 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, d]) => `${a}=${d}`).join(",");
-}, pt = (t, e, n, o, r) => {
-  const s = Mt(n, e);
-  if (typeof o != "number" || typeof r != "number")
+}, pt = (t, e, n, r, o) => {
+  const s = It(n, e);
+  if (typeof r != "number" || typeof o != "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));
-}, me = ({ layer: t }) => {
+  t.moveTo(Math.round(s.left), Math.round(s.top)), t.resizeTo(Math.round(r), Math.round(o));
+}, Ee = ({ 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 = i.useRef(null), r = i.useRef(null), [s, c] = i.useState(!1);
+  const r = i.useRef(null), o = i.useRef(null), [s, c] = i.useState(!1);
   return i.useEffect(() => {
     if (typeof window > "u")
       return;
-    const u = he(t.id, t.position, t.width, t.height, e.popup), a = e.popup?.name ?? t.id, d = be(
+    const u = ve(t.id, t.position, t.width, t.height, e.popup), a = e.popup?.name ?? t.id, d = Se(
       a,
       u,
       {
@@ -381,15 +383,15 @@ const lt = {
     );
     if (!d)
       throw new Error(`Failed to open popup window for layer "${t.id}".`);
-    const p = d;
-    r.current = p, e.popup?.focus !== !1 && p.focus(), p.document.title || (p.document.title = t.id), p.document.body.innerHTML = "";
-    const f = p.document.createElement("div");
-    f.dataset.layerId = t.id, p.document.body.appendChild(f), o.current = f, c(!0), pt(p, t.id, t.position, t.width, t.height);
-    const h = () => {
-      r.current = null, o.current = null, c(!1);
+    const g = d;
+    o.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), r.current = f, c(!0), pt(g, t.id, t.position, t.width, t.height);
+    const m = () => {
+      o.current = null, r.current = null, c(!1);
     };
-    return p.addEventListener("beforeunload", h), () => {
-      p.removeEventListener("beforeunload", h), e.popup?.closeOnUnmount !== !1 && p.close(), r.current = null, o.current = null, c(!1);
+    return g.addEventListener("beforeunload", m), () => {
+      g.removeEventListener("beforeunload", m), e.popup?.closeOnUnmount !== !1 && g.close(), o.current = null, r.current = null, c(!1);
     };
   }, [
     e.popup?.closeOnUnmount,
@@ -403,27 +405,27 @@ const lt = {
     e.popup?.name,
     t.id
   ]), i.useEffect(() => {
-    const u = r.current;
+    const u = o.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 : Zt(/* @__PURE__ */ m(Lt, { layerId: t.id, children: t.component }), o.current);
-}, be = (t, e, n, o) => {
-  const r = o?.createWindow;
-  return r ? r({ name: t, features: e, bounds: n }) : window.open("", t, e);
-}, Tt = {
+  }, [t.position?.left, t.position?.top, t.height, t.width, t.id]), !s || !r.current ? null : Qt(/* @__PURE__ */ h(Tt, { layerId: t.id, children: t.component }), r.current);
+}, Se = (t, e, n, r) => {
+  const o = r?.createWindow;
+  return o ? o({ name: t, features: e, bounds: n }) : window.open("", t, e);
+}, xt = {
   position: "absolute",
   pointerEvents: "auto",
   boxSizing: "border-box",
   background: "transparent",
   border: "none"
-}, we = {
-  ...Tt,
-  width: M,
-  height: M,
+}, Ce = {
+  ...xt,
+  width: D,
+  height: D,
   zIndex: 2
-}, ve = {
-  ...Tt,
+}, ze = {
+  ...xt,
   zIndex: 1
-}, Ee = {
+}, Re = {
   "top-left": {
     top: 0,
     left: 0,
@@ -448,40 +450,40 @@ const lt = {
     transform: "translate(50%, 50%)",
     cursor: "nwse-resize"
   }
-}, Se = {
+}, Pe = {
   left: {
-    top: M,
-    bottom: M,
+    top: D,
+    bottom: D,
     left: 0,
     width: B,
     transform: "translateX(-50%)",
     cursor: "ew-resize"
   },
   right: {
-    top: M,
-    bottom: M,
+    top: D,
+    bottom: D,
     right: 0,
     width: B,
     transform: "translateX(50%)",
     cursor: "ew-resize"
   },
   top: {
-    left: M,
-    right: M,
+    left: D,
+    right: D,
     top: 0,
     height: B,
     transform: "translateY(-50%)",
     cursor: "ns-resize"
   },
   bottom: {
-    left: M,
-    right: M,
+    left: D,
+    right: D,
     bottom: 0,
     height: B,
     transform: "translateY(50%)",
     cursor: "ns-resize"
   }
-}, Ce = [
+}, ye = [
   { 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" },
@@ -490,9 +492,9 @@ const lt = {
   { key: "right", variant: "edge", horizontal: "right" },
   { key: "top", variant: "edge", vertical: "top" },
   { key: "bottom", variant: "edge", vertical: "bottom" }
-], ze = ({ layerId: t, onPointerDown: e }) => /* @__PURE__ */ m(G, { children: Ce.map((n) => {
-  const o = n.variant === "corner" ? we : ve, r = n.variant === "corner" ? Ee[n.key] : Se[n.key], s = { ...o, ...r }, c = n.variant === "corner" ? { "data-resize-corner": n.key } : { "data-resize-edge": n.key };
-  return /* @__PURE__ */ m(
+], Le = ({ layerId: t, onPointerDown: e }) => /* @__PURE__ */ h(N, { children: ye.map((n) => {
+  const r = n.variant === "corner" ? Ce : ze, o = n.variant === "corner" ? Re[n.key] : Pe[n.key], s = { ...r, ...o }, c = n.variant === "corner" ? { "data-resize-corner": n.key } : { "data-resize-edge": n.key };
+  return /* @__PURE__ */ h(
     "div",
     {
       role: "presentation",
@@ -504,140 +506,153 @@ const lt = {
     },
     n.key
   );
-}) }), Re = ({ layers: t }) => {
-  const { handleLayerPointerDown: e, getLayerRenderState: n } = fe(), o = i.useCallback((r) => r.length === 0 ? null : r.map((s) => /* @__PURE__ */ m(ze, { layerId: s.layerId, onPointerDown: s.onPointerDown }, s.layerId)), []);
-  return /* @__PURE__ */ m(G, { children: t.map((r) => {
-    const s = r.floating?.mode ?? "embedded";
-    if (r.floating && s === "popup")
-      return /* @__PURE__ */ m(me, { layer: r }, r.id);
-    const { style: c, isResizable: u, isResizing: a, onResizeHandlePointerDown: d } = n(r), p = {};
-    r.gridArea && (p.gridArea = r.gridArea), r.gridRow && (p.gridRow = r.gridRow), r.gridColumn && (p.gridColumn = r.gridColumn);
-    const h = u ? { ...c, ...p, position: "relative" } : { ...c, ...p }, E = o(u ? [
-      {
-        layerId: r.id,
-        onPointerDown: d
-      }
-    ] : []);
-    return /* @__PURE__ */ $(
-      "div",
-      {
-        "data-layer-id": r.id,
-        "data-draggable": !!r.floating?.draggable,
-        "data-resizable": u,
-        "data-resizing": a,
-        style: h,
-        onPointerDown: e,
-        children: [
-          /* @__PURE__ */ m(Lt, { layerId: r.id, children: r.component }),
-          E
-        ]
-      },
-      r.id
-    );
+}) }), Me = ({ pivot: t }) => {
+  const { Outlet: e } = te({
+    items: t.items,
+    activeId: t.activeId,
+    defaultActiveId: t.defaultActiveId,
+    onActiveChange: t.onActiveChange,
+    transitionMode: t.transitionMode
+  });
+  return /* @__PURE__ */ h(e, {});
+}, kt = i.memo(({ layer: t }) => t.pivot ? /* @__PURE__ */ h(Me, { pivot: t.pivot }) : /* @__PURE__ */ h(N, { children: t.component }));
+kt.displayName = "LayerContent";
+const At = i.memo(({ layerId: t, isResizable: e, onPointerDown: n }) => e ? /* @__PURE__ */ h(Le, { layerId: t, onPointerDown: n }) : null);
+At.displayName = "LayerResizeHandles";
+const Ht = i.memo(({ layer: t, handleLayerPointerDown: e }) => {
+  const { getLayerRenderState: n } = Lt(), { style: r, isResizable: o, isResizing: s, onResizeHandlePointerDown: c } = n(t), u = i.useMemo(() => {
+    const d = {};
+    return t.gridArea && (d.gridArea = t.gridArea), t.gridRow && (d.gridRow = t.gridRow), t.gridColumn && (d.gridColumn = t.gridColumn), d;
+  }, [t.gridArea, t.gridRow, t.gridColumn]), a = i.useMemo(() => {
+    const d = { ...r, ...u };
+    return o ? { ...d, position: "relative" } : d;
+  }, [r, u, o]);
+  return /* @__PURE__ */ G(
+    "div",
+    {
+      "data-layer-id": t.id,
+      "data-draggable": !!t.floating?.draggable,
+      "data-resizable": o,
+      "data-resizing": s,
+      style: a,
+      onPointerDown: e,
+      children: [
+        /* @__PURE__ */ h(Tt, { layerId: t.id, children: /* @__PURE__ */ h(kt, { layer: t }) }),
+        /* @__PURE__ */ h(At, { layerId: t.id, isResizable: o, onPointerDown: c })
+      ]
+    }
+  );
+});
+Ht.displayName = "EmbeddedLayer";
+const De = ({ layers: t }) => {
+  const { handleLayerPointerDown: e } = Lt();
+  return /* @__PURE__ */ h(N, { children: t.map((n) => {
+    const r = n.floating?.mode ?? "embedded";
+    return n.floating && r === "popup" ? /* @__PURE__ */ h(Ee, { layer: n }, n.id) : /* @__PURE__ */ h(Ht, { layer: n, handleLayerPointerDown: e }, n.id);
   }) });
 };
-function _(t) {
+function $(t) {
   const e = i.useRef(t);
   return e.current = t, i.useCallback((...n) => {
-    const o = e.current;
-    if (o)
-      return o(...n);
+    const r = e.current;
+    if (r)
+      return r(...n);
   }, []);
 }
 function tt(t, e) {
-  const n = _(e.onMove), o = _(e.onUp), r = _(e.onCancel);
+  const n = $(e.onMove), r = $(e.onUp), o = $(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), () => {
-        e.onMove && document.removeEventListener("pointermove", n), e.onUp && document.removeEventListener("pointerup", o), e.onCancel && document.removeEventListener("pointercancel", r);
+      return e.onMove && document.addEventListener("pointermove", n, { passive: !1 }), e.onUp && document.addEventListener("pointerup", r), e.onCancel && document.addEventListener("pointercancel", o), () => {
+        e.onMove && document.removeEventListener("pointermove", n), e.onUp && document.removeEventListener("pointerup", r), e.onCancel && document.removeEventListener("pointercancel", o);
       };
-  }, [t, e.onMove, e.onUp, e.onCancel, n, o, r]);
+  }, [t, e.onMove, e.onUp, e.onCancel, n, r, o]);
 }
-function Pe(t, e, n) {
+function Te(t, e, n) {
   i.useEffect(() => {
-    const o = t.current;
-    if (!(!e || !o || n === void 0))
-      return o.setPointerCapture(n), () => {
-        o.hasPointerCapture && o.hasPointerCapture(n) && o.releasePointerCapture(n);
+    const r = t.current;
+    if (!(!e || !r || n === void 0))
+      return r.setPointerCapture(n), () => {
+        r.hasPointerCapture && r.hasPointerCapture(n) && r.releasePointerCapture(n);
       };
   }, [t, e, n]);
 }
-function ye(t, e, n = ["pointerdown", "pointermove", "pointerup"]) {
+function Ie(t, e, n = ["pointerdown", "pointermove", "pointerup"]) {
   i.useEffect(() => {
-    const o = t.current;
-    if (!e || !o)
+    const r = t.current;
+    if (!e || !r)
       return;
-    const r = (s) => {
+    const o = (s) => {
       s.preventDefault();
     };
     return n.forEach((s) => {
-      o.addEventListener(s, r, { passive: !1 });
+      r.addEventListener(s, o, { passive: !1 });
     }), () => {
       n.forEach((s) => {
-        o.removeEventListener(s, r);
+        r.removeEventListener(s, o);
       });
     };
   }, [t, e, n]);
 }
-function De(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 }), Pe(t, e ? u : !1, c), ye(t, e ? a : !1);
+function xe(t, e, n) {
+  const { onMove: r, onUp: o, onCancel: s, pointerId: c, capturePointer: u = !0, preventDefaults: a = !0 } = n;
+  tt(e, { onMove: r, onUp: o, onCancel: s }), Te(t, e ? u : !1, c), Ie(t, e ? a : !1);
 }
-const Le = (t) => {
-  const e = i.useRef(null), n = i.useRef(null), o = i.useRef(0), [r, s] = i.useState(!1), c = _((f) => {
+const ke = (t) => {
+  const e = i.useRef(null), n = i.useRef(null), r = i.useRef(0), [o, s] = i.useState(!1), c = $((f) => {
     t.onResize?.(f);
   }), u = 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, r.current = u(f), s(!0);
     },
     [u]
   ), d = i.useCallback(
     (f) => {
-      const h = u(f), w = h - o.current;
-      w !== 0 && (o.current = h, c(w));
+      const m = u(f), w = m - r.current;
+      w !== 0 && (r.current = m, c(w));
     },
     [u, c]
-  ), p = i.useCallback(() => {
+  ), g = i.useCallback(() => {
     s(!1), n.current = null;
   }, []);
-  return De(e, r, {
+  return xe(e, o, {
     onMove: d,
-    onUp: p,
+    onUp: g,
     pointerId: n.current ?? void 0,
     capturePointer: !0,
     preventDefaults: !1
   }), {
     ref: e,
     onPointerDown: a,
-    isDragging: r
+    isDragging: o
   };
-}, Me = ({
+}, Ae = ({
   element: t,
   component: e
-}) => i.forwardRef(({ children: n, ...o }, r) => t ? i.cloneElement(
+}) => i.forwardRef(({ children: n, ...r }, o) => t ? i.cloneElement(
   t,
-  { ...o, ref: r },
+  { ...r, ref: o },
   n ?? t.props.children
-) : e ? /* @__PURE__ */ m(e, { ...o, ref: r, children: n }) : /* @__PURE__ */ m("div", { ...o, ref: r, children: n }));
-function Te({
+) : e ? /* @__PURE__ */ h(e, { ...r, ref: o, children: n }) : /* @__PURE__ */ h("div", { ...r, ref: o, children: n }));
+function He({
   element: t,
   component: e
 }) {
   return i.useMemo(
-    () => Me({
+    () => Ae({
       element: t,
       component: e
     }),
     [e, t]
   );
 }
-const Ie = {
+const Ne = {
   position: "absolute",
-  zIndex: jt
-}, ke = {
+  zIndex: Jt
+}, _e = {
   vertical: {
     width: ct,
     height: "100%",
@@ -650,31 +665,31 @@ const Ie = {
     left: 0,
     cursor: "row-resize"
   }
-}, xe = {
-  idle: Ut,
-  hovered: Vt,
-  dragging: Xt
-}, Ae = ({
+}, $e = {
+  idle: qt,
+  hovered: Kt,
+  dragging: Zt
+}, Ge = ({
   direction: t,
   onResize: e,
   component: n,
-  element: o,
-  children: r
+  element: r,
+  children: o
 }) => {
-  const s = t === "vertical" ? "x" : "y", { ref: c, isDragging: u, onPointerDown: a } = Le({ axis: s, onResize: e }), [d, p] = i.useState(!1), f = i.useCallback(() => {
-    p(!0);
-  }, []), h = i.useCallback(() => {
-    p(!1);
-  }, []), w = Te({
-    element: o,
+  const s = t === "vertical" ? "x" : "y", { ref: c, isDragging: u, onPointerDown: a } = ke({ axis: s, onResize: e }), [d, g] = i.useState(!1), f = i.useCallback(() => {
+    g(!0);
+  }, []), m = i.useCallback(() => {
+    g(!1);
+  }, []), w = He({
+    element: r,
     component: n
   }), E = i.useMemo(() => u ? "dragging" : d ? "hovered" : "idle", [u, d]), z = i.useMemo(() => ({
-    ...Ie,
-    ...ke[t],
-    backgroundColor: xe[E],
+    ...Ne,
+    ..._e[t],
+    backgroundColor: $e[E],
     touchAction: "none"
   }), [t, E]);
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ h(
     w,
     {
       ref: c,
@@ -687,8 +702,8 @@ const Ie = {
       "data-is-dragging": u ? "true" : void 0,
       onPointerDown: a,
       onPointerEnter: f,
-      onPointerLeave: h,
-      children: r
+      onPointerLeave: m,
+      children: o
     }
   );
 }, gt = {
@@ -698,24 +713,24 @@ const Ie = {
   direction: t,
   trackIndex: e,
   align: n,
-  gap: o,
-  span: r,
+  gap: r,
+  span: o,
   onResize: s
 }) => {
   const c = t === "col" ? "vertical" : "horizontal", u = i.useCallback(
-    (p) => {
-      const f = n === "start" ? -p : p;
+    (g) => {
+      const f = n === "start" ? -g : g;
       s(t, e, f);
     },
     [n, t, e, s]
   ), a = i.useMemo(() => t === "col" ? {
     gridColumn: `${e + 1} / ${e + 2}`,
-    gridRow: `${r.start} / ${r.end}`
+    gridRow: `${o.start} / ${o.end}`
   } : {
     gridRow: `${e + 1} / ${e + 2}`,
-    gridColumn: `${r.start} / ${r.end}`
-  }, [t, e, r]), d = i.useMemo(() => {
-    const f = Math.max(0, o) / 2 + J / 2;
+    gridColumn: `${o.start} / ${o.end}`
+  }, [t, e, o]), d = i.useMemo(() => {
+    const f = Math.max(0, r) / 2 + J / 2;
     return t === "col" ? {
       ...gt,
       width: J,
@@ -731,19 +746,19 @@ const Ie = {
       right: 0,
       ...n === "start" ? { top: -f } : { bottom: -f }
     };
-  }, [n, t, o]);
-  return /* @__PURE__ */ m("div", { "data-resizable": "true", style: { ...a, position: "relative", pointerEvents: "none" }, children: /* @__PURE__ */ m("div", { "data-direction": c, "data-align": n, "data-handle": "true", style: d, children: /* @__PURE__ */ m(Ae, { direction: c, onResize: u }) }) });
-}, He = (t) => {
+  }, [n, t, r]);
+  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: d, children: /* @__PURE__ */ h(Ge, { direction: c, onResize: u }) }) });
+}, Fe = (t) => {
   const e = /* @__PURE__ */ new Map();
-  t.forEach((o, r) => {
-    o.forEach((s, c) => {
+  t.forEach((r, o) => {
+    r.forEach((s, c) => {
       if (!s || s === ".")
         return;
       const u = e.get(s);
       if (u) {
         const d = {
-          rowStart: Math.min(u.rowStart, r),
-          rowEnd: Math.max(u.rowEnd, r),
+          rowStart: Math.min(u.rowStart, o),
+          rowEnd: Math.max(u.rowEnd, o),
           colStart: Math.min(u.colStart, c),
           colEnd: Math.max(u.colEnd, c)
         };
@@ -751,8 +766,8 @@ const Ie = {
         return;
       }
       const a = {
-        rowStart: r,
-        rowEnd: r,
+        rowStart: o,
+        rowEnd: o,
         colStart: c,
         colEnd: c
       };
@@ -760,172 +775,172 @@ const Ie = {
     });
   });
   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, d = {
-      gridArea: r,
+  return e.forEach((r, o) => {
+    const s = r.rowStart + 1, c = r.rowEnd + 2, u = r.colStart + 1, a = r.colEnd + 2, d = {
+      gridArea: o,
       gridRow: `${s} / ${c}`,
       gridColumn: `${u} / ${a}`
     };
-    n.set(r, d);
+    n.set(o, d);
   }), n;
-}, Ne = (t, e) => {
+}, Oe = (t, e) => {
   if ((t.positionMode ?? "grid") !== "grid")
     return t;
-  const o = t.gridArea ?? t.id, r = e.get(o);
-  if (!r)
+  const r = t.gridArea ?? t.id, o = e.get(r);
+  if (!o)
     return t;
   const s = !t.gridArea, c = !t.gridRow, u = !t.gridColumn;
   return !s && !c && !u ? t : {
     ...t,
-    gridArea: s ? r.gridArea : t.gridArea,
-    gridRow: c ? r.gridRow : t.gridRow,
-    gridColumn: u ? r.gridColumn : t.gridColumn
+    gridArea: s ? o.gridArea : t.gridArea,
+    gridRow: c ? o.gridRow : t.gridRow,
+    gridColumn: u ? o.gridColumn : t.gridColumn
   };
-}, _e = (t, e) => {
-  const n = i.useMemo(() => He(t.areas), [t.areas]), o = i.useMemo(() => e.map((u) => Ne(u, n)), [e, n]), r = i.useMemo(
-    () => o.filter((u) => u.visible !== !1),
-    [o]
-  ), s = i.useMemo(
-    () => r.filter((u) => !u.drawer),
+}, We = (t, e) => {
+  const n = i.useMemo(() => Fe(t.areas), [t.areas]), r = i.useMemo(() => e.map((u) => Oe(u, n)), [e, n]), o = i.useMemo(
+    () => r.filter((u) => u.visible !== !1),
     [r]
+  ), s = i.useMemo(
+    () => o.filter((u) => !u.drawer),
+    [o]
   ), c = i.useMemo(() => {
     const u = /* @__PURE__ */ new Map();
-    return o.forEach((a) => {
+    return r.forEach((a) => {
       u.set(a.id, a);
     }), u;
-  }, [o]);
+  }, [r]);
   return {
-    normalizedLayers: o,
-    visibleLayers: r,
+    normalizedLayers: r,
+    visibleLayers: o,
     regularLayers: s,
     layerById: c
   };
-}, $e = typeof window < "u" && typeof window.document < "u", It = $e ? i.useLayoutEffect : i.useEffect, j = (t, e) => `${t}-${e}`, Ge = (t, e, n, o) => {
-  const r = j(n, o), s = e[r];
+}, j = (t, e) => `${t}-${e}`, Be = (t, e, n, r) => {
+  const o = j(n, r), s = e[o];
   return s !== void 0 ? `${s}px` : t.size;
-}, mt = (t, e, n) => t.map((o, r) => Ge(o, e, n, r)).join(" "), X = (t, e) => t.reduce((n, o, r) => (o.resizable && o.size.endsWith("px") && (n[j(e, r)] = parseInt(o.size, 10)), n), {}), Fe = (t, e, n) => {
-  const o = e !== void 0 ? Math.max(t, e) : t;
-  return n !== void 0 ? Math.min(o, n) : o;
-}, Oe = (t, e, n) => {
-  const o = t + e;
-  return Fe(o, n.minSize, n.maxSize);
-}, We = (t, e, n, o, r) => {
+}, mt = (t, e, n) => t.map((r, o) => Be(r, e, n, o)).join(" "), X = (t, e) => t.reduce((n, r, o) => (r.resizable && r.size.endsWith("px") && (n[j(e, o)] = parseInt(r.size, 10)), n), {}), Ye = (t, e, n) => {
+  const r = e !== void 0 ? Math.max(t, e) : t;
+  return n !== void 0 ? Math.min(r, n) : r;
+}, Xe = (t, e, n) => {
+  const r = t + e;
+  return Ye(r, n.minSize, n.maxSize);
+}, Ve = (t, e, n, r, o) => {
   const s = j(t, e);
   return (c) => {
-    const u = Oe(n, o, r);
+    const u = Xe(n, r, o);
     return { ...c, [s]: u };
   };
 }, bt = (t, e) => {
-  const n = t.length, o = [];
+  const n = t.length, r = [];
   for (let c = 0; c < n; c++) {
     const u = t[c], a = u[e], d = u[e + 1];
-    a !== d && o.push(c);
+    a !== d && r.push(c);
   }
-  if (o.length === 0)
+  if (r.length === 0)
     return { start: 1, end: n + 1 };
-  const r = Math.min(...o), s = Math.max(...o);
-  return { start: r + 1, end: s + 2 };
+  const o = Math.min(...r), s = Math.max(...r);
+  return { start: o + 1, end: s + 2 };
 }, wt = (t, e) => {
-  const n = t[e], o = t[e + 1], r = n?.length ?? 0, s = [];
-  for (let a = 0; a < r; a++) {
-    const d = n?.[a], p = o?.[a];
-    d !== p && s.push(a);
+  const n = t[e], r = t[e + 1], o = n?.length ?? 0, s = [];
+  for (let a = 0; a < o; a++) {
+    const d = n?.[a], g = r?.[a];
+    d !== g && s.push(a);
   }
   if (s.length === 0)
-    return { start: 1, end: r + 1 };
+    return { start: 1, end: o + 1 };
   const c = Math.min(...s), u = Math.max(...s);
   return { start: c + 1, end: u + 2 };
-}, Be = (t, e) => {
+}, Ue = (t, e) => {
   if (t.length === 0)
     return [];
   const n = e.length;
   if (t.length === 1)
     return t[0]?.resizable ? [{ trackIndex: 0, align: "end", span: { start: 1, end: n + 1 } }] : [];
-  const o = [];
+  const r = [];
   return Array.from({ length: t.length - 1 }, (s, c) => c).forEach((s) => {
     const c = t[s];
     if (t[s + 1]?.resizable) {
       const a = bt(e, s);
-      o.push({ trackIndex: s + 1, align: "start", span: a });
+      r.push({ trackIndex: s + 1, align: "start", span: a });
       return;
     }
     if (c?.resizable) {
       const a = bt(e, s);
-      o.push({ trackIndex: s, align: "end", span: a });
+      r.push({ trackIndex: s, align: "end", span: a });
     }
-  }), o;
-}, Ye = (t, e) => {
+  }), r;
+}, je = (t, e) => {
   if (t.length === 0)
     return [];
   const n = e[0]?.length ?? 0;
   if (t.length === 1)
     return t[0]?.resizable ? [{ trackIndex: 0, align: "end", span: { start: 1, end: n + 1 } }] : [];
-  const o = [];
+  const r = [];
   return Array.from({ length: t.length - 1 }, (s, c) => c).forEach((s) => {
     const c = t[s];
     if (t[s + 1]?.resizable) {
       const a = wt(e, s);
-      o.push({ trackIndex: s + 1, align: "start", span: a });
+      r.push({ trackIndex: s + 1, align: "start", span: a });
       return;
     }
     if (c?.resizable) {
       const a = wt(e, s);
-      o.push({ trackIndex: s, align: "end", span: a });
+      r.push({ trackIndex: s, align: "end", span: a });
     }
-  }), o;
-}, Xe = (t) => {
+  }), r;
+}, Ze = (t) => {
   if (!t)
     return { rowGap: 0, columnGap: 0 };
-  const e = t.split(/\s+/).map((o) => o.trim()).filter(Boolean), n = (o) => {
-    const r = o.match(/^(-?\d+(?:\.\d+)?)px$/);
-    return r ? Number.parseFloat(r[1]) : 0;
+  const e = t.split(/\s+/).map((r) => r.trim()).filter(Boolean), n = (r) => {
+    const o = r.match(/^(-?\d+(?:\.\d+)?)px$/);
+    return o ? Number.parseFloat(o[1]) : 0;
   };
   if (e.length === 1) {
-    const o = n(e[0]);
-    return { rowGap: o, columnGap: o };
+    const r = n(e[0]);
+    return { rowGap: r, columnGap: r };
   }
   return {
     rowGap: n(e[0]),
     columnGap: n(e[1])
   };
-}, Ve = (t) => t !== void 0 ? { gap: t } : {}, Ue = (t, e, n, o) => {
-  const r = j(n, o), s = t[r];
+}, Ke = (t) => t !== void 0 ? { gap: t } : {}, qe = (t, e, n, r) => {
+  const o = j(n, r), s = t[o];
   return s !== void 0 ? s : e.size.endsWith("px") ? Number.parseInt(e.size, 10) : 300;
-}, je = (t, e) => {
-  const [n, o] = i.useState(() => ({
+}, Je = (t, e) => {
+  const [n, r] = i.useState(() => ({
     ...X(t.columns, "col"),
     ...X(t.rows, "row")
   }));
-  It(() => {
-    const p = {
+  Rt(() => {
+    const g = {
       ...X(t.columns, "col"),
       ...X(t.rows, "row")
     };
-    o((f) => {
-      const h = /* @__PURE__ */ new Set([...Object.keys(f), ...Object.keys(p)]);
-      return Array.from(h).some((E) => f[E] !== p[E]) ? p : f;
+    r((f) => {
+      const m = /* @__PURE__ */ new Set([...Object.keys(f), ...Object.keys(g)]);
+      return Array.from(m).some((E) => f[E] !== g[E]) ? g : f;
     });
   }, [t.columns, t.rows]);
-  const r = i.useMemo(() => t.areas.map((p) => `"${p.join(" ")}"`).join(" "), [t.areas]), s = i.useMemo(() => Xe(t.gap), [t.gap]), c = i.useMemo(
-    () => Be(t.columns, t.areas),
+  const o = i.useMemo(() => t.areas.map((g) => `"${g.join(" ")}"`).join(" "), [t.areas]), s = i.useMemo(() => Ze(t.gap), [t.gap]), c = i.useMemo(
+    () => Ue(t.columns, t.areas),
     [t.columns, t.areas]
   ), u = i.useMemo(
-    () => Ye(t.rows, t.areas),
+    () => je(t.rows, t.areas),
     [t.rows, t.areas]
   ), a = i.useMemo(() => ({
     ...t.style,
     ...e,
-    gridTemplateAreas: r,
+    gridTemplateAreas: o,
     gridTemplateRows: mt(t.rows, n, "row"),
     gridTemplateColumns: mt(t.columns, n, "col"),
-    ...Ve(t.gap)
-  }), [r, t.columns, t.gap, t.rows, t.style, e, n]), d = i.useCallback(
-    (p, f, h) => {
-      const E = (p === "row" ? t.rows : t.columns)[f];
+    ...Ke(t.gap)
+  }), [o, t.columns, t.gap, t.rows, t.style, e, n]), d = i.useCallback(
+    (g, f, m) => {
+      const E = (g === "row" ? t.rows : t.columns)[f];
       if (!E || !E.resizable)
         return;
-      const z = Ue(n, E, p, f);
-      o(We(p, f, z, h, E));
+      const z = qe(n, E, g, f);
+      r(Ve(g, f, z, m, E));
     },
     [t.columns, t.rows, n]
   );
@@ -936,38 +951,38 @@ const Ie = {
     gridStyle: a,
     handleResize: d
   };
-}, Ze = (t, e = Number.NEGATIVE_INFINITY, n = Number.POSITIVE_INFINITY) => Math.min(Math.max(t, e), n), Mn = (t, e) => typeof t != "number" || !Number.isFinite(t) ? e : t, Ke = (t) => t.positionMode ? t.positionMode : t.floating ? (t.floating.mode ?? "embedded") === "embedded" ? "absolute" : "relative" : "grid", qe = (t) => ({ position: t === "grid" ? "relative" : t }), Je = (t, e) => e !== "grid" ? {} : {
+}, Qe = (t, e = Number.NEGATIVE_INFINITY, n = Number.POSITIVE_INFINITY) => Math.min(Math.max(t, e), n), Hn = (t, e) => typeof t != "number" || !Number.isFinite(t) ? e : t, tn = (t) => t.positionMode ? t.positionMode : t.floating ? (t.floating.mode ?? "embedded") === "embedded" ? "absolute" : "relative" : "grid", en = (t) => ({ position: t === "grid" ? "relative" : t }), nn = (t, e) => e !== "grid" ? {} : {
   gridArea: t.gridArea,
   gridRow: t.gridRow,
   gridColumn: t.gridColumn
-}, Qe = (t) => t ? {
+}, rn = (t) => t ? {
   top: t.top,
   right: t.right,
   bottom: t.bottom,
   left: t.left
-} : {}, tn = (t) => t !== void 0 ? { zIndex: t } : {}, en = (t, e) => ({
+} : {}, on = (t) => t !== void 0 ? { zIndex: t } : {}, sn = (t, e) => ({
   width: t,
   height: e
-}), nn = (t, e) => t.pointerEvents !== void 0 ? typeof t.pointerEvents == "boolean" ? { pointerEvents: t.pointerEvents ? "auto" : "none" } : { pointerEvents: t.pointerEvents } : e === "absolute" || e === "fixed" ? { pointerEvents: "auto" } : {}, rn = (t) => t.position, on = (t) => ({
+}), an = (t, e) => t.pointerEvents !== void 0 ? typeof t.pointerEvents == "boolean" ? { pointerEvents: t.pointerEvents ? "auto" : "none" } : { pointerEvents: t.pointerEvents } : e === "absolute" || e === "fixed" ? { pointerEvents: "auto" } : {}, cn = (t) => t.position, un = (t) => ({
   width: t.width,
   height: t.height
-}), sn = (t) => t.zIndex, an = (t) => {
-  const e = Ke(t), n = rn(t), o = on(t), r = sn(t);
+}), ln = (t) => t.zIndex, dn = (t) => {
+  const e = tn(t), n = cn(t), r = un(t), o = ln(t);
   return {
     ...t.style,
-    ...qe(e),
-    ...Je(t, e),
-    ...Qe(n),
-    ...tn(r),
-    ...en(o.width, o.height),
-    ...nn(t, e)
+    ...en(e),
+    ...nn(t, e),
+    ...rn(n),
+    ...on(o),
+    ...sn(r.width, r.height),
+    ...an(t, e)
   };
-}, cn = (t) => {
+}, fn = (t) => {
   const e = t.floating;
   return e ? e.mode ?? "embedded" : null;
-}, H = (t) => cn(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 Ze(t, o, r);
+}, H = (t) => fn(t) !== "embedded" ? null : t.floating ?? null, vt = (t) => t instanceof HTMLElement ? ["INPUT", "TEXTAREA", "SELECT", "BUTTON"].includes(t.tagName) : !1, Et = (t, e, n) => {
+  const r = e ?? Number.NEGATIVE_INFINITY, o = n ?? Number.POSITIVE_INFINITY;
+  return Qe(t, r, o);
 }, St = (t, e, n) => {
   if (typeof t == "number" && Number.isFinite(t))
     return t;
@@ -984,10 +999,10 @@ const Ie = {
     left: St(n.left, "left", t.id),
     top: St(n.top, "top", t.id)
   };
-}, un = (t) => {
+}, pn = (t) => {
   const e = H(t);
   return e ? e.constraints ?? {} : {};
-}, ln = (t, e, n) => t ? t === "left" ? e - n : e + n : e, dn = (t, e, n) => t ? t === "top" ? e - n : e + n : e, fn = (t, e, n) => !t || t === "right" ? e : e + n, pn = (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), gn = (t) => t instanceof HTMLElement ? nt(
+}, gn = (t, e, n) => t ? t === "left" ? e - n : e + n : e, hn = (t, e, n) => t ? t === "top" ? e - n : e + n : e, mn = (t, e, n) => !t || t === "right" ? e : e + n, bn = (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), wn = (t) => t instanceof HTMLElement ? nt(
   t,
   (e) => e.dataset.dragHandle === "true",
   (e) => e.dataset.dragIgnore === "true"
@@ -1000,53 +1015,53 @@ const Ie = {
 }, U = (t) => {
   if (!H(t))
     return null;
-  const n = bn(t);
+  const n = Sn(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
   };
-}, hn = (t, e, n) => {
-  const o = t.filter(V).reduce((f, h) => {
-    if (n === h.id) {
-      const E = e[h.id];
+}, vn = (t, e, n) => {
+  const r = t.filter(V).reduce((f, m) => {
+    if (n === m.id) {
+      const E = e[m.id];
       if (E)
-        return f[h.id] = E, f;
+        return f[m.id] = E, f;
     }
-    const w = U(h);
-    return w && (f[h.id] = w), 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, d = s.some((f) => {
-    const h = e[f], w = o[f];
-    return !h || !w ? !0 : h.width !== w.width || h.height !== w.height;
+    const w = U(m);
+    return w && (f[m.id] = w), f;
+  }, {}), o = Object.keys(e), s = Object.keys(r), c = o.length !== s.length, u = o.some((f) => !Object.prototype.hasOwnProperty.call(r, f)), a = c ? !0 : u, d = s.some((f) => {
+    const m = e[f], w = r[f];
+    return !m || !w ? !0 : m.width !== w.width || m.height !== w.height;
   });
   return {
-    sizes: o,
+    sizes: r,
     changed: a ? !0 : d
   };
-}, mn = ({
+}, En = ({
   layers: t,
   layerById: e
 }) => {
-  const [n, o] = i.useState(null), [r, s] = i.useState(null), [c, u] = i.useState({}), [a, d] = i.useState({}), p = i.useRef(null), f = i.useRef(null), h = _((g, l) => {
-    e.get(g)?.floating?.onMove?.(l);
-  }), w = _((g, l) => {
-    e.get(g)?.floating?.onResize?.(l);
+  const [n, r] = i.useState(null), [o, s] = i.useState(null), [c, u] = i.useState({}), [a, d] = i.useState({}), g = i.useRef(null), f = i.useRef(null), m = $((p, l) => {
+    e.get(p)?.floating?.onMove?.(l);
+  }), w = $((p, l) => {
+    e.get(p)?.floating?.onResize?.(l);
   });
-  It(() => {
-    const { sizes: g, changed: l } = hn(t, a, r);
-    l && d(g);
-  }, [t, r]);
+  Rt(() => {
+    const { sizes: p, changed: l } = vn(t, a, o);
+    l && d(p);
+  }, [t, o]);
   const E = i.useCallback(
-    (g, l, b, v) => {
-      const S = Ct(l), R = c[g] ?? { x: 0, y: 0 }, C = {
+    (p, l, b, v) => {
+      const S = Ct(l), R = c[p] ?? { x: 0, y: 0 }, C = {
         pointerStartX: v.clientX,
         pointerStartY: v.clientY,
         initialTranslationX: R.x,
         initialTranslationY: R.y,
         baseLeft: S.left,
         baseTop: S.top,
-        layerId: g,
+        layerId: p,
         pointerId: v.pointerId,
         target: b
       };
@@ -1055,12 +1070,12 @@ const Ie = {
           C.target.setPointerCapture(C.pointerId);
         } catch {
         }
-      p.current = C, o(g);
+      g.current = C, r(p);
     },
     [c]
   ), z = i.useCallback(
-    (g) => {
-      const l = g.target, b = gn(l);
+    (p) => {
+      const l = p.target, b = wn(l);
       if (!b)
         return;
       const v = b.closest("[data-layer-id]")?.getAttribute("data-layer-id");
@@ -1070,40 +1085,40 @@ const Ie = {
       if (!S)
         return;
       const R = H(S);
-      if (!(!R || R.draggable !== !0) && !vt(g.target) && !zt(g.target) && b) {
+      if (!(!R || R.draggable !== !0) && !vt(p.target) && !zt(p.target) && b) {
         const C = et(b, v);
         if (!C)
           return;
-        E(v, S, C, g);
+        E(v, S, C, p);
         return;
       }
     },
     [E, e]
   ), P = i.useCallback(
-    (g, l) => {
-      const b = e.get(g), v = b ? H(b) : null;
+    (p, l) => {
+      const b = e.get(p), v = b ? H(b) : null;
       if (!b || !v || v.draggable !== !0 || vt(l.target) || zt(l.target))
         return;
-      const S = et(l.currentTarget, g);
-      S && E(g, b, S, l);
+      const S = et(l.currentTarget, p);
+      S && E(p, b, S, l);
     },
     [E, e]
-  ), D = i.useCallback(
-    (g, l, b) => {
-      const v = e.get(g);
+  ), L = i.useCallback(
+    (p, l, b) => {
+      const v = e.get(p);
       if (!v || !V(v))
         return;
-      const S = a[g] ?? U(v);
+      const S = a[p] ?? U(v);
       if (!S)
         return;
-      const R = Ct(v), C = un(v), k = c[g] ?? { x: 0, y: 0 };
+      const R = Ct(v), C = pn(v), x = c[p] ?? { x: 0, y: 0 };
       if (b.stopPropagation(), b.preventDefault(), b.currentTarget.setPointerCapture)
         try {
           b.currentTarget.setPointerCapture(b.pointerId);
         } catch {
         }
       f.current = {
-        layerId: g,
+        layerId: p,
         pointerId: b.pointerId,
         horizontalEdge: l.horizontal,
         verticalEdge: l.vertical,
@@ -1111,7 +1126,7 @@ const Ie = {
         startY: b.clientY,
         startWidth: S.width,
         startHeight: S.height,
-        startPosition: k,
+        startPosition: x,
         baseLeft: R.left,
         baseTop: R.top,
         minWidth: C.minWidth,
@@ -1119,63 +1134,63 @@ const Ie = {
         minHeight: C.minHeight,
         maxHeight: C.maxHeight,
         target: b.currentTarget
-      }, s(g);
+      }, s(p);
     },
     [e, c, a]
   ), F = i.useCallback(
-    (g) => {
-      const l = p.current;
+    (p) => {
+      const l = g.current;
       if (!l)
         return;
-      const b = g.clientX - l.pointerStartX, v = g.clientY - l.pointerStartY, S = {
+      const b = p.clientX - l.pointerStartX, v = p.clientY - l.pointerStartY, S = {
         x: l.initialTranslationX + b,
         y: l.initialTranslationY + v
       };
-      u((R) => ({ ...R, [l.layerId]: S })), h(l.layerId, {
+      u((R) => ({ ...R, [l.layerId]: S })), m(l.layerId, {
         left: l.baseLeft + S.x,
         top: l.baseTop + S.y
       });
     },
-    [h]
+    [m]
   ), T = i.useCallback(
-    (g) => {
+    (p) => {
       const l = f.current;
-      if (!l || l.pointerId !== g.pointerId || !e.get(l.layerId))
+      if (!l || l.pointerId !== p.pointerId || !e.get(l.layerId))
         return;
-      const v = g.clientX - l.startX, S = g.clientY - l.startY, R = ln(l.horizontalEdge, l.startWidth, v), C = dn(l.verticalEdge, l.startHeight, S), k = Et(R, l.minWidth, l.maxWidth), A = Et(C, l.minHeight, l.maxHeight), O = l.startWidth - k, Z = l.startHeight - A, st = fn(
+      const v = p.clientX - l.startX, S = p.clientY - l.startY, R = gn(l.horizontalEdge, l.startWidth, v), C = hn(l.verticalEdge, l.startHeight, S), x = Et(R, l.minWidth, l.maxWidth), A = Et(C, l.minHeight, l.maxHeight), O = l.startWidth - x, Z = l.startHeight - A, st = mn(
         l.horizontalEdge,
         l.startPosition.x,
         O
-      ), kt = pn(l.verticalEdge, l.startPosition.y, Z), K = a[l.layerId], it = { width: k, height: A };
-      (!K || K.width !== k || K.height !== A) && (d((q) => ({
+      ), Nt = bn(l.verticalEdge, l.startPosition.y, Z), K = a[l.layerId], it = { width: x, height: A };
+      (!K || K.width !== x || K.height !== A) && (d((q) => ({
         ...q,
         [l.layerId]: it
       })), w(l.layerId, it));
-      const at = c[l.layerId] ?? { x: 0, y: 0 }, W = { x: st, y: kt };
+      const at = c[l.layerId] ?? { x: 0, y: 0 }, W = { x: st, y: Nt };
       (at.x !== W.x || at.y !== W.y) && (u((q) => ({
         ...q,
         [l.layerId]: W
-      })), h(l.layerId, {
+      })), m(l.layerId, {
         left: l.baseLeft + W.x,
         top: l.baseTop + W.y
       }));
     },
-    [e, c, a, h, w]
-  ), L = i.useCallback((g) => {
-    const l = p.current;
+    [e, c, a, m, w]
+  ), M = i.useCallback((p) => {
+    const l = g.current;
     if (l) {
-      if (l.pointerId === g.pointerId && l.target.releasePointerCapture)
+      if (l.pointerId === p.pointerId && l.target.releasePointerCapture)
         try {
           l.target.releasePointerCapture(l.pointerId);
         } catch {
         }
-      p.current = null;
+      g.current = null;
     }
-    o(null);
-  }, []), x = i.useCallback((g) => {
+    r(null);
+  }, []), k = i.useCallback((p) => {
     const l = f.current;
     if (l) {
-      if (l.pointerId === g.pointerId && l.target.releasePointerCapture)
+      if (l.pointerId === p.pointerId && l.target.releasePointerCapture)
         try {
           l.target.releasePointerCapture(l.pointerId);
         } catch {
@@ -1186,19 +1201,19 @@ const Ie = {
   }, []);
   tt(n !== null, {
     onMove: F,
-    onUp: L,
-    onCancel: L
-  }), tt(r !== null, {
+    onUp: M,
+    onCancel: M
+  }), tt(o !== null, {
     onMove: T,
-    onUp: x,
-    onCancel: x
+    onUp: k,
+    onCancel: k
   });
   const y = i.useCallback(
-    (g) => {
-      const l = an(g), b = H(g);
+    (p) => {
+      const l = dn(p), b = H(p);
       if (!b || b.draggable !== !0)
         return l;
-      const v = c[g.id], S = n === g.id, R = r === g.id, C = v ? { transform: `translate(${v.x}px, ${v.y}px)` } : {}, k = a[g.id], A = V(g) ? U(g) : null, O = k ?? A, Z = O ? { width: `${O.width}px`, height: `${O.height}px` } : {};
+      const v = c[p.id], S = n === p.id, R = o === p.id, C = v ? { transform: `translate(${v.x}px, ${v.y}px)` } : {}, x = a[p.id], A = V(p) ? U(p) : null, O = x ?? A, Z = O ? { width: `${O.width}px`, height: `${O.height}px` } : {};
       return {
         ...l,
         ...Z,
@@ -1206,20 +1221,20 @@ const Ie = {
         ...S || R ? { cursor: "grabbing" } : {}
       };
     },
-    [n, c, a, r]
+    [n, c, a, o]
   ), I = i.useCallback(
-    (g) => {
-      if (!V(g))
+    (p) => {
+      if (!V(p))
         return { isResizable: !1 };
-      const b = a[g.id], v = U(g);
-      return (b ?? v) !== null ? { isResizable: !0, onPointerDown: (k, A) => {
-        D(g.id, k, A);
+      const b = a[p.id], v = U(p);
+      return (b ?? v) !== null ? { isResizable: !0, onPointerDown: (x, A) => {
+        L(p.id, x, A);
       } } : { isResizable: !1 };
     },
-    [D, a]
+    [L, a]
   ), rt = i.useCallback(
-    (g) => {
-      const { isResizable: l, onPointerDown: b } = I(g), v = y(g), S = r === g.id;
+    (p) => {
+      const { isResizable: l, onPointerDown: b } = I(p), v = y(p), S = o === p.id;
       return {
         style: v,
         isResizable: l,
@@ -1229,15 +1244,15 @@ const Ie = {
         }
       };
     },
-    [y, I, r]
+    [y, I, o]
   ), ot = i.useCallback(
-    (g) => ({
+    (p) => ({
       "data-drag-handle": "true",
       role: "button",
       "aria-roledescription": "Drag handle",
       "aria-label": "Drag layer",
       onPointerDown: (l) => {
-        P(g, l);
+        P(p, l);
       }
     }),
     [P]
@@ -1252,34 +1267,34 @@ const Ie = {
       [ot, rt, z]
     ),
     draggingLayerId: n,
-    resizingLayerId: r
+    resizingLayerId: o
   };
-}, bn = (t) => {
+}, Sn = (t) => {
   if (typeof t.width == "number" && typeof t.height == "number")
     return { width: t.width, height: t.height };
-}, wn = {
+}, Cn = {
   display: "grid",
   width: "100%",
   height: "100%"
-}, vn = {
+}, zn = {
   touchAction: "none",
   WebkitTouchCallout: "none",
   WebkitUserSelect: "none",
   userSelect: "none"
-}, Tn = ({ config: t, layers: e, style: n }) => {
-  const o = i.useRef(null), { isIntersecting: r } = Qt(o, { threshold: 0 });
-  return /* @__PURE__ */ m(ge, { config: t, layers: e, style: n, children: /* @__PURE__ */ m(En, { gridRef: o, isIntersecting: r }) });
-}, En = ({ gridRef: t, isIntersecting: e }) => {
-  const { config: n, style: o, layers: r } = pe(), { normalizedLayers: s, visibleLayers: c, regularLayers: u, layerById: a } = _e(n, r.defs), { columnHandles: d, rowHandles: p, gapSizes: f, gridStyle: h, handleResize: w } = je(n, o), { providerValue: E, draggingLayerId: z, resizingLayerId: P } = mn({
+}, Nn = ({ config: t, layers: e, style: n }) => {
+  const r = i.useRef(null), { isIntersecting: o } = oe(r, { threshold: 0 });
+  return /* @__PURE__ */ h(we, { config: t, layers: e, style: n, children: /* @__PURE__ */ h(Rn, { gridRef: r, isIntersecting: o }) });
+}, Rn = ({ gridRef: t, isIntersecting: e }) => {
+  const { config: n, style: r, layers: o } = be(), { normalizedLayers: s, visibleLayers: c, regularLayers: u, layerById: a } = We(n, o.defs), { columnHandles: d, rowHandles: g, gapSizes: f, gridStyle: m, handleResize: w } = Je(n, r), { providerValue: E, draggingLayerId: z, resizingLayerId: P } = En({
     layers: s,
     layerById: a
-  }), D = z ? !0 : !!P, F = i.useMemo(() => ({
-    ...wn,
-    ...h,
-    ...D ? vn : {}
-  }), [h, D]);
-  return /* @__PURE__ */ $(G, { children: [
-    /* @__PURE__ */ $(
+  }), L = z ? !0 : !!P, F = i.useMemo(() => ({
+    ...Cn,
+    ...m,
+    ...L ? zn : {}
+  }), [m, L]);
+  return /* @__PURE__ */ G(N, { children: [
+    /* @__PURE__ */ G(
       "div",
       {
         ref: t,
@@ -1288,51 +1303,50 @@ const Ie = {
         "data-resizing": !!P,
         "data-visible": e,
         children: [
-          /* @__PURE__ */ m(de, { value: E, children: /* @__PURE__ */ m(Re, { layers: u }) }),
-          d.map(({ trackIndex: T, align: L, span: x }) => /* @__PURE__ */ m(
+          /* @__PURE__ */ h(me, { value: E, children: /* @__PURE__ */ h(De, { layers: u }) }),
+          d.map(({ trackIndex: T, align: M, span: k }) => /* @__PURE__ */ h(
             ht,
             {
               direction: "col",
               trackIndex: T,
-              align: L,
+              align: M,
               gap: f.columnGap,
-              span: x,
+              span: k,
               onResize: w
             },
-            `col-${T}:${L}`
+            `col-${T}:${M}`
           )),
-          p.map(({ trackIndex: T, align: L, span: x }) => /* @__PURE__ */ m(
+          g.map(({ trackIndex: T, align: M, span: k }) => /* @__PURE__ */ h(
             ht,
             {
               direction: "row",
               trackIndex: T,
-              align: L,
+              align: M,
               gap: f.rowGap,
-              span: x,
+              span: k,
               onResize: w
             },
-            `row-${T}:${L}`
+            `row-${T}:${M}`
           ))
         ]
       }
     ),
-    /* @__PURE__ */ m(le, { layers: c })
+    /* @__PURE__ */ h(he, { layers: c })
   ] });
 };
 export {
-  ie as D,
-  Tn as G,
-  Ae as R,
-  Ln as a,
-  fe as b,
-  _ as c,
-  Te as d,
-  Ze as e,
-  It as f,
-  le as g,
-  Dn as h,
-  Rt as r,
-  Mn as t,
-  Le as u
+  de as D,
+  Nn as G,
+  Ge as R,
+  An as a,
+  Lt as b,
+  $ as c,
+  He as d,
+  Qe as e,
+  he as f,
+  kn as g,
+  Pt as r,
+  Hn as t,
+  ke as u
 };
-//# sourceMappingURL=GridLayout-DZCV1X-3.js.map
+//# sourceMappingURL=GridLayout-CLvW8jID.js.map