@pasquelin/panels 0.3.0 → 0.3.1

package/dist/index.js

@@ -1,50 +1,50 @@
-import { jsx as u, jsxs as g, Fragment as A } from "react/jsx-runtime";
-import F, { useEffect as nn, useLayoutEffect as kn, useState as W, useMemo as w, useContext as tn, createContext as en, useRef as H, useCallback as _, memo as Sn, Fragment as Dn, Children as jn, isValidElement as Hn } from "react";
+import { jsx as u, jsxs as m, Fragment as j } from "react/jsx-runtime";
+import H, { useEffect as tn, useLayoutEffect as Bn, useState as J, useMemo as w, useContext as en, createContext as on, useRef as Z, useCallback as N, memo as Sn, Fragment as kn, Children as Dn, isValidElement as Hn } from "react";
 import { c as b } from "./cx-CcykAxZN.js";
-const an = (n) => {
+const un = (n) => {
   let t;
   const e = /* @__PURE__ */ new Set(), o = (a, d) => {
     const f = typeof a == "function" ? a(t) : a;
     if (!Object.is(f, t)) {
-      const h = t;
-      t = d ?? (typeof f != "object" || f === null) ? f : Object.assign({}, t, f), e.forEach((m) => m(t, h));
+      const p = t;
+      t = d ?? (typeof f != "object" || f === null) ? f : Object.assign({}, t, f), e.forEach((g) => g(t, p));
     }
-  }, c = () => t, i = { setState: o, getState: c, getInitialState: () => l, subscribe: (a) => (e.add(a), () => e.delete(a)) }, l = t = n(o, c, i);
-  return i;
-}, Un = ((n) => n ? an(n) : an), Vn = (n) => n;
-function Yn(n, t = Vn) {
-  const e = F.useSyncExternalStore(
+  }, l = () => t, r = { setState: o, getState: l, getInitialState: () => c, subscribe: (a) => (e.add(a), () => e.delete(a)) }, c = t = n(o, l, r);
+  return r;
+}, jn = ((n) => n ? un(n) : un), Un = (n) => n;
+function Vn(n, t = Un) {
+  const e = H.useSyncExternalStore(
     n.subscribe,
-    F.useCallback(() => t(n.getState()), [n, t]),
-    F.useCallback(() => t(n.getInitialState()), [n, t])
+    H.useCallback(() => t(n.getState()), [n, t]),
+    H.useCallback(() => t(n.getInitialState()), [n, t])
   );
-  return F.useDebugValue(e), e;
+  return H.useDebugValue(e), e;
 }
-const U = ["left", "right", "top", "bottomLeft", "bottomRight"], Nn = ["primary", "secondary"], on = "default", $n = ["bottomLeft", "bottomRight"];
-function rn(n) {
+const B = ["left", "right", "top", "bottomLeft", "bottomRight"], Pn = ["primary", "secondary"], rn = "default", Wn = ["bottomLeft", "bottomRight"];
+function sn(n) {
   return n === "bottomLeft" || n === "bottomRight";
 }
-function M(n) {
-  return n === "top" || rn(n);
+function T(n) {
+  return n === "top" || sn(n);
 }
-const G = {
+const X = {
   left: { column: ["left", "top"], band: "bottomLeft" },
   right: { column: ["right"], band: "bottomRight" }
 };
-function un(n) {
+function dn(n) {
   return n === "left" || n === "top";
 }
-const B = 140, Pn = 240, Z = 100, Wn = {
+const U = 140, Nn = 240, z = 100, Yn = {
   left: 320,
   right: 260,
   top: 180,
   bottomLeft: 240,
   bottomRight: 240
 }, _n = "bottomRight";
-function k(n) {
-  return rn(n) ? _n : n;
+function V(n) {
+  return sn(n) ? _n : n;
 }
-const x = {
+const C = {
   left: "right",
   right: "left",
   // The band as a whole faces the top strip: either half of it takes the same height off.
@@ -55,113 +55,118 @@ const x = {
 function In(n, t, e) {
   return Math.min(Math.max(n, t), e);
 }
-function xn(n, t, e) {
-  const o = Math.max(B, Math.round(t - e - Pn));
-  return In(Math.round(n), B, o);
+function En(n, t, e) {
+  const o = Math.max(U, Math.round(t - e - Nn));
+  return In(Math.round(n), U, o);
 }
-function D(n, t) {
-  const e = Math.max(Z, Math.round(t - Z));
-  return In(Math.round(n), Z, e);
+function W(n, t) {
+  const e = Math.max(z, Math.round(t - z));
+  return In(Math.round(n), z, e);
 }
-function Cn(n, t, e, o) {
-  return e(t) ? n.sizes[k(t)] ?? o(t) : 0;
+function xn(n, t, e, o) {
+  return e(t) ? n.sizes[V(t)] ?? o(t) : 0;
 }
-function Gn(n, t, e, o, c) {
-  const s = { ...n.sizes }, r = { ...n.splits };
-  for (const l of U) {
-    const a = s[l];
+function $n(n, t, e, o, l) {
+  const s = { ...n.sizes }, i = { ...n.splits };
+  for (const c of B) {
+    const a = s[c];
     if (a !== void 0) {
-      const f = M(l) ? e : t, h = Cn(n, x[l], o, c);
-      s[l] = xn(a, f, h);
+      const f = T(c) ? e : t, p = xn(n, C[c], o, l);
+      s[c] = En(a, f, p);
     }
-    const d = r[l];
-    d !== void 0 && (r[l] = D(d, M(l) ? t : e));
+    const d = i[c];
+    d !== void 0 && (i[c] = W(d, T(c) ? t : e));
   }
-  const i = n.bandSplit === void 0 ? void 0 : D(n.bandSplit, t);
-  return { sizes: s, splits: r, bandSplit: i };
-}
-function Jn(n, t, e) {
-  const o = e - Pn, c = n + t;
-  if (c <= o) return [n, t];
-  const s = (a) => a === 0 ? 0 : B, r = s(n) + s(t);
-  if (o <= r)
+  const r = n.bandSplit === void 0 ? void 0 : W(n.bandSplit, t);
+  return { sizes: s, splits: i, bandSplit: r };
+}
+function Gn(n, t, e) {
+  const o = e - Nn, l = n + t;
+  if (l <= o) return [n, t];
+  const s = (a) => a === 0 ? 0 : U, i = s(n) + s(t);
+  if (o <= i)
     return [Math.min(n, s(n)), Math.min(t, s(t))];
-  const i = o / c, l = Math.max(s(n), Math.round(n * i));
-  return [l, Math.max(s(t), Math.round(o - l))];
+  const r = o / l, c = Math.max(s(n), Math.round(n * r));
+  return [c, Math.max(s(t), Math.round(o - c))];
 }
-function z(n) {
+function F(n) {
   return n.views[n.view] ?? {};
 }
-function $(n, t) {
+function G(n, t) {
   const e = { ...t ?? {} };
-  for (const o of U)
-    for (const c of Nn)
-      e[o]?.[c] === void 0 && Zn(n, o, c) !== void 0 && (e[o] = { ...e[o], [c]: null });
+  for (const o of B)
+    for (const l of Pn)
+      e[o]?.[l] === void 0 && Ln(n, o, l) !== void 0 && (e[o] = { ...e[o], [l]: null });
   return e;
 }
-function J(n, t) {
+function K(n, t) {
   return Object.hasOwn(n.views, t);
 }
-function Zn(n, t, e) {
+function Ln(n, t, e) {
   return n.find((o) => o.zone === t && o.slot === e);
 }
-function C(n, t) {
+function M(n, t) {
   return t == null ? void 0 : n.find((e) => e.id === t);
 }
-function dn(n, t, e) {
-  const o = z(n)[t];
+function fn(n, t, e) {
+  const o = F(n)[t];
   if (!o || !(e in o)) return;
-  const c = C(n.registry, o[e]);
-  return c?.zone === t && c.slot === e ? c : Zn(n.registry, t, e);
+  const l = M(n.registry, o[e]);
+  return l?.zone === t && l.slot === e ? l : Ln(n.registry, t, e);
 }
-function E(n, t) {
-  const e = dn(n, t, "primary");
-  return e?.solo === !0 ? { primary: e } : { primary: e, secondary: dn(n, t, "secondary") };
+function x(n, t) {
+  const e = fn(n, t, "primary");
+  return e?.solo === !0 ? { primary: e } : { primary: e, secondary: fn(n, t, "secondary") };
 }
-function L(n, t) {
-  const { primary: e, secondary: o } = E(n, t);
+function A(n, t) {
+  const { primary: e, secondary: o } = x(n, t);
   return { primary: e?.id, secondary: o?.id };
 }
-function X(n, t) {
-  return rn(t) ? $n.some((e) => j(n, e)) : j(n, t);
+function Y(n, t) {
+  return sn(t) ? Wn.some((e) => $(n, e)) : $(n, t);
 }
-function j(n, t) {
-  const e = L(n, t);
+function $(n, t) {
+  const e = A(n, t);
   return e.primary !== void 0 || e.secondary !== void 0;
 }
-function K(n, t) {
-  return Math.max(Wn[n], t?.opens ?? 0);
-}
-function Xn(n, t, e, o) {
-  const { slot: c, id: s } = e, r = z(n)[t] ?? {}, i = { ...n.stashed };
-  if (e.solo === !0 && c === "primary")
-    return i[t] = r, [{ [c]: s }, i];
-  if (o?.solo !== !0) return [{ ...r, [c]: s }, n.stashed];
-  const l = i[t];
-  if (delete i[t], l) return [{ ...l, [c]: s }, i];
-  const a = { ...r, [c]: s };
-  return c !== o.slot && delete a[o.slot], [a, i];
-}
-function Kn(n, t, e) {
-  const o = z(n)[t] ?? {}, c = o[e], s = n.stashed[t];
-  if (s && c !== void 0 && C(n.registry, c)?.solo === !0) {
-    const i = { ...n.stashed };
-    return delete i[t], [s, i];
+function q(n, t) {
+  return Math.max(Yn[n], t?.opens ?? 0);
+}
+function Jn(n, t, e, o) {
+  const { slot: l, id: s } = e, i = F(n)[t] ?? {}, r = { ...n.stashed };
+  if (e.solo === !0 && l === "primary")
+    return r[t] = i, [{ [l]: s }, r];
+  if (o?.solo !== !0) return [{ ...i, [l]: s }, n.stashed];
+  const c = r[t];
+  if (delete r[t], c) return [{ ...c, [l]: s }, r];
+  const a = { ...i, [l]: s };
+  return l !== o.slot && delete a[o.slot], [a, r];
+}
+function Xn(n, t, e) {
+  const o = F(n)[t] ?? {}, l = o[e], s = n.stashed[t];
+  if (s && l !== void 0 && M(n.registry, l)?.solo === !0) {
+    const r = { ...n.stashed };
+    return delete r[t], [s, r];
   }
-  const r = { ...o };
-  return delete r[e], [r, n.stashed];
+  const i = { ...o };
+  return delete i[e], [i, n.stashed];
+}
+const hn = { sizes: {}, splits: {} };
+function Kn(n, t) {
+  return n.bandSplit !== t.bandSplit ? !1 : B.every(
+    (e) => n.sizes[e] === t.sizes[e] && n.splits[e] === t.splits[e]
+  );
 }
-const fn = { sizes: {}, splits: {} };
 function qn(n = {}) {
-  const t = n.initial, e = (o, c) => ({
+  const t = n.initial, e = (o, l) => ({
     ...o.views,
-    [o.view]: c
+    [o.view]: l
   });
-  return Un()((o, c) => ({
+  return jn()((o, l) => ({
     registry: [],
-    view: n.view ?? on,
+    view: n.view ?? rn,
     views: t?.views ?? {},
-    lengths: t?.lengths ?? fn,
+    lengths: t?.lengths ?? hn,
     focusedZone: null,
     stashed: {},
     available: { width: 0, height: 0 },
@@ -170,77 +175,78 @@ function qn(n = {}) {
     declare: (s) => o({ registry: s }),
     // Having an entry in `views` IS the record of having been settled. No second field can then
     // disagree about which views have been opened, or fall out of step when a reset clears them.
-    // Having an entry in `views` IS the record of having been settled. No second field can then
-    // disagree about which views have been opened, or fall out of step when a reset clears them.
-    settle: (s) => o((r) => {
-      const i = s ?? r.defaults;
-      return J(r, r.view) ? i === r.defaults ? r : { defaults: i } : { views: e(r, $(r.registry, i)), defaults: i };
+    settle: (s) => o((i) => {
+      const r = s ?? i.defaults;
+      return K(i, i.view) ? r === i.defaults ? i : { defaults: r } : { views: e(i, G(i.registry, r)), defaults: r };
     }),
     // Settles the view it arrives at, rather than leaving that to the next render: a project
     // driving the chassis from outside React would otherwise land on an empty frame.
-    setView: (s) => o((r) => r.view === s ? r : {
+    setView: (s) => o((i) => i.view === s ? i : {
       view: s,
-      views: J(r, s) ? r.views : { ...r.views, [s]: $(r.registry, r.defaults) },
+      views: K(i, s) ? i.views : { ...i.views, [s]: G(i.registry, i.defaults) },
       // Session state, and it belongs to the view being left: a zone accented on arrival is
       // a zone nobody clicked, and a stash given back in another view would reopen a half
       // there.
       focusedZone: null,
       stashed: {}
     }),
-    show: (s) => o((r) => {
-      const i = C(r.registry, s);
-      if (!i) return r;
-      const { zone: l } = i, a = E(r, l);
-      if (a[i.slot]?.id === s) return { focusedZone: l };
-      const [d, f] = Xn(r, l, i, a.primary);
+    show: (s) => o((i) => {
+      const r = M(i.registry, s);
+      if (!r) return i;
+      const { zone: c } = r, a = x(i, c);
+      if (a[r.slot]?.id === s) return { focusedZone: c };
+      const [d, f] = Jn(i, c, r, a.primary);
       return {
-        views: e(r, { ...z(r), [l]: d }),
+        views: e(i, { ...F(i), [c]: d }),
         stashed: f,
-        focusedZone: l
+        focusedZone: c
       };
     }),
-    close: (s, r) => o((i) => {
-      const [l, a] = Kn(i, s, r), d = e(i, { ...z(i), [s]: l }), f = j({ registry: i.registry, view: i.view, views: d }, s);
+    close: (s, i) => o((r) => {
+      const [c, a] = Xn(r, s, i), d = e(r, { ...F(r), [s]: c }), f = $({ registry: r.registry, view: r.view, views: d }, s);
       return {
         views: d,
         stashed: a,
-        focusedZone: !f && i.focusedZone === s ? null : i.focusedZone
+        focusedZone: !f && r.focusedZone === s ? null : r.focusedZone
       };
     }),
     toggle: (s) => {
-      const r = c(), i = C(r.registry, s);
-      i && (L(r, i.zone)[i.slot] === s ? r.close(i.zone, i.slot) : r.show(s));
+      const i = l(), r = M(i.registry, s);
+      r && (A(i, r.zone)[r.slot] === s ? i.close(r.zone, r.slot) : i.show(s));
     },
-    focus: (s) => o((r) => r.focusedZone === s ? r : { focusedZone: s }),
+    focus: (s) => o((i) => i.focusedZone === s ? i : { focusedZone: s }),
     // Guarded: a drag past the ceiling clamps to the same number for as long as the pointer
     // keeps going, and every write notifies every subscriber.
-    resize: (s, r, i) => o((l) => {
-      const a = Cn(
-        l.lengths,
-        x[s],
-        (h) => X(l, h),
-        (h) => K(h, E(l, h).primary)
-      ), d = xn(r, i, a), f = k(s);
-      return d === l.lengths.sizes[f] ? l : { lengths: { ...l.lengths, sizes: { ...l.lengths.sizes, [f]: d } } };
+    resize: (s, i, r) => o((c) => {
+      const a = xn(
+        c.lengths,
+        C[s],
+        (p) => Y(c, p),
+        (p) => q(p, x(c, p).primary)
+      ), d = En(i, r, a), f = V(s);
+      return d === c.lengths.sizes[f] ? c : { lengths: { ...c.lengths, sizes: { ...c.lengths.sizes, [f]: d } } };
     }),
-    resplit: (s, r, i) => o((l) => {
-      const a = D(r, i);
-      return a === l.lengths.splits[s] ? l : { lengths: { ...l.lengths, splits: { ...l.lengths.splits, [s]: a } } };
+    resplit: (s, i, r) => o((c) => {
+      const a = W(i, r);
+      return a === c.lengths.splits[s] ? c : { lengths: { ...c.lengths, splits: { ...c.lengths.splits, [s]: a } } };
     }),
-    resplitBand: (s, r) => o((i) => {
-      const l = D(s, r);
-      return l === i.lengths.bandSplit ? i : { lengths: { ...i.lengths, bandSplit: l } };
+    resplitBand: (s, i) => o((r) => {
+      const c = W(s, i);
+      return c === r.lengths.bandSplit ? r : { lengths: { ...r.lengths, bandSplit: c } };
     }),
-    fit: (s, r) => o((i) => ({
-      available: { width: s, height: r },
-      lengths: Gn(
-        i.lengths,
+    // Guarded like `resize`, and for a heavier reason: the observer fires on every frame of a
+    // window resize, and the persistence subscriber compares `lengths` by reference. A fresh
+    // object carrying the same numbers had each of those frames re-serialising the whole file.
+    fit: (s, i) => o((r) => {
+      const c = $n(
+        r.lengths,
         s,
-        r,
-        (l) => X(i, l),
-        (l) => K(l, E(i, l).primary)
-      )
-    })),
+        i,
+        (f) => Y(r, f),
+        (f) => q(f, x(r, f).primary)
+      ), a = Kn(r.lengths, c) ? r.lengths : c, { available: d } = r;
+      return a === r.lengths && d.width === s && d.height === i ? r : { available: { width: s, height: i }, lengths: a };
+    }),
     // Every view, not just the one in front: a reset the reader asked for must not leave the
     // arrangement they were escaping waiting for them one click away.
     reset: () => o((s) => ({
@@ -251,8 +257,8 @@ function qn(n = {}) {
       // 🛑 Unless nothing is declared yet, and then it is left UNSETTLED: settled against an
       // empty registry it would be settled EMPTY, and having an entry is what stops anything
       // reopening it. Every half would stay shut for good.
-      views: s.registry.length === 0 ? {} : { [s.view]: $(s.registry, s.defaults) },
-      lengths: fn,
+      views: s.registry.length === 0 ? {} : { [s.view]: G(s.registry, s.defaults) },
+      lengths: hn,
       focusedZone: null,
       // Left behind, a solo panel closed after a reset would give back the zone the reset
       // had just cleared.
@@ -261,7 +267,7 @@ function qn(n = {}) {
     }))
   }));
 }
-const Ct = () => {
+const xt = () => {
   const n = /* @__PURE__ */ new Map();
   return {
     read: (t) => n.get(t) ?? null,
@@ -283,25 +289,25 @@ const Ct = () => {
     } catch {
     }
   }
-}), En = 2;
-function P(n) {
+}), Cn = 2;
+function E(n) {
   return typeof n == "object" && n !== null && !Array.isArray(n);
 }
-function hn(n) {
+function pn(n) {
   const t = {};
-  for (const e of U) {
+  for (const e of B) {
     const o = n[e];
-    if (P(o))
-      for (const c of Nn) {
-        const s = o[c];
-        s !== null && typeof s != "string" || (t[e] = { ...t[e], [c]: s });
+    if (E(o))
+      for (const l of Pn) {
+        const s = o[l];
+        s !== null && typeof s != "string" || (t[e] = { ...t[e], [l]: s });
       }
   }
   return t;
 }
-function pn(n) {
+function gn(n) {
   const t = {};
-  for (const e of U) {
+  for (const e of B) {
     const o = n[e];
     typeof o == "number" && Number.isFinite(o) && (t[e] = o);
   }
@@ -309,171 +315,178 @@ function pn(n) {
 }
 function nt(n, t) {
   if (n.version === 1)
-    return P(n.open) ? { [t]: hn(n.open) } : void 0;
-  if (n.version !== En || !P(n.views)) return;
+    return E(n.open) ? { [t]: pn(n.open) } : void 0;
+  if (n.version !== Cn || !E(n.views)) return;
   const e = /* @__PURE__ */ Object.create(null);
-  for (const [o, c] of Object.entries(n.views))
-    P(c) && (e[o] = hn(c));
+  for (const [o, l] of Object.entries(n.views))
+    E(l) && (e[o] = pn(l));
   return e;
 }
-function tt(n, t, e = on) {
+function tt(n, t, e = rn) {
   const o = n.read(t);
   if (o === null) return;
-  let c;
+  let l;
   try {
-    c = JSON.parse(o);
+    l = JSON.parse(o);
   } catch {
     return;
   }
-  if (!P(c) || !P(c.lengths)) return;
-  const s = nt(c, e);
+  if (!E(l) || !E(l.lengths)) return;
+  const s = nt(l, e);
   if (!s) return;
-  const r = c.lengths;
-  if (!P(r.sizes) || !P(r.splits)) return;
-  const i = r.bandSplit;
+  const i = l.lengths;
+  if (!E(i.sizes) || !E(i.splits)) return;
+  const r = i.bandSplit;
   return {
     views: s,
     lengths: {
-      sizes: pn(r.sizes),
-      splits: pn(r.splits),
-      bandSplit: typeof i == "number" && Number.isFinite(i) ? i : void 0
+      sizes: gn(i.sizes),
+      splits: gn(i.splits),
+      bandSplit: typeof r == "number" && Number.isFinite(r) ? r : void 0
     }
   };
 }
 function et(n, t, e) {
   const o = {
-    version: En,
+    version: Cn,
     views: e.views,
     lengths: e.lengths
   };
   n.write(t, JSON.stringify(o));
 }
-const Mn = typeof globalThis.document > "u" ? nn : kn, zn = en(null);
-function ot({
+const Zn = typeof globalThis.document > "u" ? tn : Bn, Mn = on(null), ot = 250;
+function rt({
   store: n,
   storageKey: t = "panels:layout",
   storage: e,
   defaultOpen: o,
-  view: c,
+  view: l,
   children: s
 }) {
-  const [r] = W(
+  const [i] = J(
     () => e === null ? null : e ?? Qn()
-  ), [i] = W(() => {
-    const l = c ?? on, a = r ? tt(r, t, l) : void 0;
-    return n ? (a && n.setState(a), n) : qn({ view: l, initial: a });
+  ), [r] = J(() => {
+    const c = l ?? rn, a = i ? tt(i, t, c) : void 0;
+    return n ? (a && n.setState(a), n) : qn({ view: c, initial: a });
   });
-  return Mn(() => {
-    const l = i.getState();
-    c !== void 0 && l.setView(c), l.settle(o);
-  }), nn(() => {
-    if (!r) return;
-    let l;
-    return i.subscribe((a) => {
-      J(a, a.view) && (l?.views === a.views && l.lengths === a.lengths || (l = { views: a.views, lengths: a.lengths }, et(r, t, a)));
+  return Zn(() => {
+    const c = r.getState();
+    l !== void 0 && c.setView(l), c.settle(o);
+  }), tn(() => {
+    if (!i) return;
+    let c, a, d;
+    const f = () => {
+      d !== void 0 && clearTimeout(d), d = void 0, a && (c = a, a = void 0, et(i, t, c));
+    }, p = r.subscribe((g) => {
+      if (!K(g, g.view)) return;
+      const S = a ?? c;
+      S?.views === g.views && S.lengths === g.lengths || (a = { views: g.views, lengths: g.lengths }, d ??= setTimeout(f, ot));
     });
-  }, [r, i, t]), /* @__PURE__ */ u(zn.Provider, { value: i, children: s });
+    return globalThis.addEventListener?.("pagehide", f), () => {
+      p(), globalThis.removeEventListener?.("pagehide", f), f();
+    };
+  }, [i, r, t]), /* @__PURE__ */ u(Mn.Provider, { value: r, children: s });
 }
-function O() {
-  const n = tn(zn);
+function k() {
+  const n = en(Mn);
   if (!n) throw new Error("usePanelsStore must be used inside a <Panels> or <PanelsProvider>");
   return n;
 }
 function v(n) {
-  const t = O();
-  return Yn(t, n);
+  const t = k();
+  return Vn(t, n);
 }
-function R() {
-  const n = O();
+function D() {
+  const n = k();
   return w(() => {
-    const { show: t, close: e, toggle: o, focus: c, resize: s, resplit: r, resplitBand: i, fit: l, reset: a } = n.getState();
-    return { show: t, close: e, toggle: o, focus: c, resize: s, resplit: r, resplitBand: i, fit: l, reset: a };
+    const { show: t, close: e, toggle: o, focus: l, resize: s, resplit: i, resplitBand: r, fit: c, reset: a } = n.getState();
+    return { show: t, close: e, toggle: o, focus: l, resize: s, resplit: i, resplitBand: r, fit: c, reset: a };
   }, [n]);
 }
-function rt({
+function st({
   icon: n,
   label: t,
   active: e,
   accented: o,
-  acts: c,
+  acts: l,
   className: s,
-  children: r,
-  ref: i,
-  ...l
+  children: i,
+  ref: r,
+  ...c
 }) {
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ m(
     "button",
     {
       type: "button",
-      ref: i,
+      ref: r,
       "aria-label": t,
-      "aria-pressed": c ? void 0 : e,
+      "aria-pressed": l ? void 0 : e,
       className: b(
         "pnl-icon-button",
         e && "pnl-icon-button--active",
         o && "pnl-icon-button--accented",
         s
       ),
-      ...l,
+      ...c,
       children: [
         n !== void 0 && /* @__PURE__ */ u("span", { className: "pnl-icon-button__glyph", children: n }),
-        r
+        i
       ]
     }
   );
 }
-const q = { IconButton: rt }, Ln = en(q), st = Ln.Provider;
+const Q = { IconButton: st }, Rn = on(Q), it = Rn.Provider;
 function On() {
-  return tn(Ln);
-}
-function it(n) {
-  return n === void 0 ? q : { ...q, ...n };
+  return en(Rn);
 }
 function ct(n) {
-  const t = O();
-  nn(() => {
+  return n === void 0 ? Q : { ...Q, ...n };
+}
+function lt(n) {
+  const t = k();
+  tn(() => {
     const e = n.current;
     if (!e) return;
     const o = () => {
-      const { clientWidth: s, clientHeight: r } = e;
-      s === 0 || r === 0 || t.getState().fit(s, r);
+      const { clientWidth: s, clientHeight: i } = e;
+      s === 0 || i === 0 || t.getState().fit(s, i);
     };
     if (o(), typeof ResizeObserver > "u") return;
-    const c = new ResizeObserver(o);
-    return c.observe(e), () => c.disconnect();
+    const l = new ResizeObserver(o);
+    return l.observe(e), () => l.disconnect();
   }, [n, t]);
 }
-function T() {
+function R() {
   const n = v((o) => o.registry), t = v((o) => o.view), e = v((o) => o.views[o.view]);
   return w(
     () => ({ registry: n, view: t, views: e === void 0 ? {} : { [t]: e } }),
     [n, t, e]
   );
 }
-function lt(n) {
-  const t = T();
-  return w(() => L(t, n), [t, n]);
+function at(n) {
+  const t = R();
+  return w(() => A(t, n), [t, n]);
 }
-function gn(n) {
-  const t = T();
-  return w(() => E(t, n), [t, n]);
+function Lt(n) {
+  const t = R();
+  return w(() => x(t, n), [t, n]);
 }
 function mn(n) {
-  const t = T();
-  return w(() => j(t, n), [t, n]);
+  const t = R();
+  return w(() => $(t, n), [t, n]);
 }
-function at(n) {
-  const t = T();
-  return w(() => X(t, n), [t, n]);
+function Ct(n) {
+  const t = R();
+  return w(() => Y(t, n), [t, n]);
 }
 function ut() {
   return {
-    left: mn(G.left.band),
-    right: mn(G.right.band)
+    left: mn(X.left.band),
+    right: mn(X.right.band)
   };
 }
 function dt() {
-  const n = H(null);
+  const n = Z(null);
   return w(() => ({
     start: (e, o) => {
       e.currentTarget.setPointerCapture(e.pointerId), n.current = { ...o, pointerId: e.pointerId };
@@ -484,37 +497,37 @@ function dt() {
     }
   }), []);
 }
-function Q({
+function nn({
   axis: n,
   invert: t = !1,
   size: e,
   onSize: o,
-  measure: c,
+  measure: l,
   label: s,
-  min: r,
-  max: i,
-  step: l = 16,
+  min: i,
+  max: r,
+  step: c = 16,
   className: a
 }) {
-  const d = dt(), f = H(null), h = n === "vertical", m = _(
-    (p) => (h ? p?.clientHeight : p?.clientWidth) ?? 0,
-    [h]
-  ), I = _(
-    (p) => {
-      const S = d.matching(p);
-      if (!S) return;
-      const Y = (h ? p.clientY : p.clientX) - S.position;
-      o(S.size + Y * (t ? -1 : 1), S.available);
+  const d = dt(), f = Z(null), p = n === "vertical", g = N(
+    (h) => (p ? h?.clientHeight : h?.clientWidth) ?? 0,
+    [p]
+  ), S = N(
+    (h) => {
+      const _ = d.matching(h);
+      if (!_) return;
+      const P = (p ? h.clientY : h.clientX) - _.position;
+      o(_.size + P * (t ? -1 : 1), _.available);
     },
-    [d, t, h, o]
-  ), y = _(
-    (p) => {
-      const S = h ? "ArrowUp" : "ArrowLeft", V = h ? "ArrowDown" : "ArrowRight";
-      if (p.key !== S && p.key !== V) return;
-      const Y = m(f.current?.parentElement), An = e ?? c?.() ?? 0, Bn = p.key === V ? 1 : -1;
-      p.preventDefault(), o(An + l * Bn * (t ? -1 : 1), Y);
+    [d, t, p, o]
+  ), y = N(
+    (h) => {
+      const _ = p ? "ArrowUp" : "ArrowLeft", L = p ? "ArrowDown" : "ArrowRight";
+      if (h.key !== _ && h.key !== L) return;
+      const P = g(f.current?.parentElement), O = e ?? l?.() ?? 0, An = h.key === L ? 1 : -1;
+      h.preventDefault(), o(O + c * An * (t ? -1 : 1), P);
     },
-    [t, h, c, o, m, e, l]
+    [t, p, l, o, g, e, c]
   );
   return /* @__PURE__ */ u(
     "div",
@@ -523,50 +536,50 @@ function Q({
       role: "separator",
       tabIndex: 0,
       "aria-label": s,
-      "aria-orientation": h ? "horizontal" : "vertical",
+      "aria-orientation": p ? "horizontal" : "vertical",
       "aria-valuenow": e === void 0 ? void 0 : Math.round(e),
-      "aria-valuemin": r,
-      "aria-valuemax": i,
-      onPointerDown: (p) => {
-        d.start(p, {
-          position: h ? p.clientY : p.clientX,
-          size: e ?? c?.() ?? 0,
-          available: m(p.currentTarget.parentElement)
+      "aria-valuemin": i,
+      "aria-valuemax": r,
+      onPointerDown: (h) => {
+        h.button !== 0 || !h.isPrimary || d.start(h, {
+          position: p ? h.clientY : h.clientX,
+          size: e ?? l?.() ?? 0,
+          available: g(h.currentTarget.parentElement)
         });
       },
-      onPointerMove: I,
+      onPointerMove: S,
       onPointerUp: d.cancel,
       onPointerCancel: d.cancel,
       onLostPointerCapture: d.cancel,
       onKeyDown: y,
-      className: b("pnl-handle", h ? "pnl-handle--row" : "pnl-handle--col", a)
+      className: b("pnl-handle", p ? "pnl-handle--row" : "pnl-handle--col", a)
     }
   );
 }
 function vn(n, t, e, o) {
-  return o ? t ?? K(e, n) : 0;
+  return o ? t ?? q(e, n) : 0;
 }
 function ft(n) {
-  const t = gn(n), e = gn(x[n]), o = at(x[n]), c = v(
-    (a) => a.lengths.sizes[k(n)]
-  ), s = v(
-    (a) => a.lengths.sizes[k(x[n])]
-  ), r = v((a) => a.lengths.splits[n]), i = v(
-    (a) => M(n) ? a.available.height : a.available.width
-  ), l = v((a) => a.focusedZone === n);
+  const t = R(), e = v(
+    (r) => r.lengths.sizes[V(n)]
+  ), o = v(
+    (r) => r.lengths.sizes[V(C[n])]
+  ), l = v((r) => r.lengths.splits[n]), s = v(
+    (r) => T(n) ? r.available.height : r.available.width
+  ), i = v((r) => r.focusedZone === n);
   return w(() => {
-    const { primary: a, secondary: d } = t, f = a !== void 0 || d !== void 0, h = vn(a, c, n, f), m = vn(e.primary, s, x[n], o);
+    const { primary: r, secondary: c } = x(t, n), a = r !== void 0 || c !== void 0, d = x(t, C[n]), f = Y(t, C[n]), p = vn(r, e, n, a), g = vn(d.primary, o, C[n], f);
     return {
-      primary: a,
-      secondary: d,
-      draws: f,
+      primary: r,
+      secondary: c,
+      draws: a,
       // Zero until the container has been measured: bounding against nothing would collapse
       // every zone to its floor on the very first paint.
-      size: i === 0 ? h : Jn(h, m, i)[0],
-      split: r,
-      focused: l
+      size: s === 0 ? p : Gn(p, g, s)[0],
+      split: l,
+      focused: i
     };
-  }, [t, e, o, c, s, i, r, l, n]);
+  }, [t, e, o, s, l, i, n]);
 }
 function ht(n) {
   const t = v((e) => e.registry);
@@ -575,24 +588,24 @@ function ht(n) {
     ["secondary", t.filter((o) => o.zone === n && o.slot === "secondary")]
   ].filter(([, o]) => o.length > 0), [t, n]);
 }
-const Rn = en(/* @__PURE__ */ new Map()), pt = Rn.Provider;
+const zn = on(/* @__PURE__ */ new Map()), pt = zn.Provider;
 function gt(n) {
-  return tn(Rn).get(n);
+  return en(zn).get(n);
 }
 function mt({
   title: n,
   children: t,
   fillActions: e,
   trailing: o,
-  className: c
+  className: l
 }) {
-  return /* @__PURE__ */ g("header", { className: b("pnl-header", c), children: [
+  return /* @__PURE__ */ m("header", { className: b("pnl-header", l), children: [
     /* @__PURE__ */ u("span", { className: b("pnl-header__title", e && "pnl-header__title--fixed"), children: n }),
     /* @__PURE__ */ u("span", { className: b("pnl-header__actions", e && "pnl-header__actions--fill"), children: t }),
     /* @__PURE__ */ u("span", { className: "pnl-header__trailing", children: o })
   ] });
 }
-function sn({ orientation: n = "vertical", className: t }) {
+function cn({ orientation: n = "vertical", className: t }) {
   return /* @__PURE__ */ u(
     "span",
     {
@@ -608,15 +621,17 @@ function vt({
   panel: n,
   length: t,
   closeLabel: e,
-  onFocus: o
+  onFocus: o,
+  ref: l
 }) {
-  const { close: c } = R(), { IconButton: s } = On(), r = gt(n.id);
+  const { close: s } = D(), { IconButton: i } = On(), r = gt(n.id);
   return (
     // The zone owns its length: a half given one keeps it, the other takes what is left. Both
     // sized here would make the pair overflow the zone the user dragged.
-    /* @__PURE__ */ g(
+    /* @__PURE__ */ m(
       Tn,
       {
+        ref: l,
         "aria-label": n.title,
         onPointerDownCapture: o,
         className: t === void 0 ? "pnl-surface--fill" : "pnl-surface--give",
@@ -626,15 +641,15 @@ function vt({
             mt,
             {
               title: n.title,
-              fillActions: n.fillActions ?? (r?.actions !== void 0 && M(n.zone)),
-              trailing: /* @__PURE__ */ g(A, { children: [
-                r?.actions !== void 0 && /* @__PURE__ */ u(sn, {}),
+              fillActions: n.fillActions ?? (r?.actions !== void 0 && T(n.zone)),
+              trailing: /* @__PURE__ */ m(j, { children: [
+                r?.actions !== void 0 && /* @__PURE__ */ u(cn, {}),
                 /* @__PURE__ */ u(
-                  s,
+                  i,
                   {
                     label: e,
                     acts: !0,
-                    onClick: () => c(n.zone, n.slot),
+                    onClick: () => s(n.zone, n.slot),
                     className: "pnl-icon-button--header",
                     icon: /* @__PURE__ */ u(bt, {})
                   }
@@ -660,130 +675,139 @@ function bt() {
   ) });
 }
 function wt({ zone: n, labels: t }) {
-  const e = ft(n), { focus: o, resize: c, resplit: s } = R(), r = H(null), i = _(() => o(n), [o, n]), l = M(n), a = _(
-    () => l ? r.current?.clientHeight ?? 0 : r.current?.clientWidth ?? 0,
-    [l]
+  const e = ft(n), { focus: o, resize: l, resplit: s } = D(), i = Z(null), r = Z(null), c = T(n), a = v(
+    (P) => c ? P.available.height : P.available.width
+  ), d = N(() => o(n), [o, n]), f = N(
+    () => c ? i.current?.clientHeight ?? 0 : i.current?.clientWidth ?? 0,
+    [c]
+  ), p = N(
+    () => c ? r.current?.clientWidth ?? 0 : r.current?.clientHeight ?? 0,
+    [c]
   );
   if (!e.draws) return null;
-  const { primary: d, secondary: f, size: h, split: m } = e, I = /* @__PURE__ */ g(
+  const { primary: g, secondary: S, size: y, split: h } = e, _ = /* @__PURE__ */ m(
     "div",
     {
-      ref: r,
-      className: b("pnl-zone", l ? "pnl-zone--row" : "pnl-zone--col"),
-      style: { [l ? "height" : "width"]: h },
+      ref: i,
+      className: b("pnl-zone", c ? "pnl-zone--row" : "pnl-zone--col"),
+      style: { [c ? "height" : "width"]: y },
       children: [
-        d && /* @__PURE__ */ u(bn, { panel: d, closeLabel: t.closePanel, onFocus: i }),
-        d && f && /* @__PURE__ */ u(
-          Q,
+        g && /* @__PURE__ */ u(bn, { panel: g, closeLabel: t.closePanel, onFocus: d }),
+        g && S && /* @__PURE__ */ u(
+          nn,
           {
-            axis: l ? "horizontal" : "vertical",
+            axis: c ? "horizontal" : "vertical",
             invert: !0,
-            size: m,
-            min: Z,
+            size: h,
+            min: z,
+            measure: p,
             label: t.resizeSplit,
-            onSize: (p, S) => s(n, p, S)
+            onSize: (P, O) => s(n, P, O)
           }
         ),
-        f && /* @__PURE__ */ u(
+        S && /* @__PURE__ */ u(
           bn,
           {
-            panel: f,
-            length: d && m !== void 0 ? m : void 0,
+            ref: r,
+            panel: S,
+            length: g && h !== void 0 ? h : void 0,
             closeLabel: t.closePanel,
-            onFocus: i
+            onFocus: d
           }
         )
       ]
     }
-  ), y = /* @__PURE__ */ u(
-    Q,
+  ), L = /* @__PURE__ */ u(
+    nn,
     {
-      axis: l ? "vertical" : "horizontal",
-      invert: !un(n),
-      size: h,
-      min: B,
-      measure: a,
+      axis: c ? "vertical" : "horizontal",
+      invert: !dn(n),
+      size: y,
+      min: U,
+      measure: f,
       label: t.resizeZone,
-      onSize: (p, S) => c(n, p, S)
+      onSize: (P, O) => l(n, P, a || O)
     }
   );
-  return un(n) ? /* @__PURE__ */ g(A, { children: [
-    I,
-    y
-  ] }) : /* @__PURE__ */ g(A, { children: [
-    y,
-    I
+  return dn(n) ? /* @__PURE__ */ m(j, { children: [
+    _,
+    L
+  ] }) : /* @__PURE__ */ m(j, { children: [
+    L,
+    _
   ] });
 }
-const N = Sn(wt);
+const I = Sn(wt);
 function yt({ left: n, right: t, labels: e }) {
-  const o = v((r) => r.lengths.bandSplit), { resplitBand: c } = R(), s = _(
-    (r, i) => c(r, i),
-    [c]
-  );
-  return !n && !t ? null : !n || !t ? /* @__PURE__ */ u(N, { zone: n ? "bottomLeft" : "bottomRight", labels: e }) : /* @__PURE__ */ g("div", { className: "pnl-band", children: [
+  const o = v((c) => c.lengths.bandSplit), { resplitBand: l } = D(), s = Z(null), i = N(
+    (c, a) => l(c, a),
+    [l]
+  ), r = N(() => s.current?.clientWidth ?? 0, []);
+  return !n && !t ? null : !n || !t ? /* @__PURE__ */ u(I, { zone: n ? "bottomLeft" : "bottomRight", labels: e }) : /* @__PURE__ */ m("div", { className: "pnl-band", children: [
     /* @__PURE__ */ u(
       "div",
       {
+        ref: s,
         className: b("pnl-band__half", o === void 0 && "pnl-band__half--even"),
         style: o === void 0 ? void 0 : { width: o },
-        children: /* @__PURE__ */ u(N, { zone: "bottomLeft", labels: e })
+        children: /* @__PURE__ */ u(I, { zone: "bottomLeft", labels: e })
       }
     ),
     /* @__PURE__ */ u(
-      Q,
+      nn,
       {
         axis: "horizontal",
         size: o,
-        min: Z,
+        min: z,
+        measure: r,
         label: e.resizeBand,
-        onSize: s
+        onSize: i
       }
     ),
-    /* @__PURE__ */ u("div", { className: "pnl-band__half pnl-band__half--rest", children: /* @__PURE__ */ u(N, { zone: "bottomRight", labels: e }) })
+    /* @__PURE__ */ u("div", { className: "pnl-band__half pnl-band__half--rest", children: /* @__PURE__ */ u(I, { zone: "bottomRight", labels: e }) })
   ] });
 }
-function cn(n) {
+function ln(n) {
   return null;
 }
-cn.displayName = "Panels.Center";
+ln.displayName = "Panels.Center";
 const St = {
   closePanel: "Close panel",
   resizeZone: "Resize panel area",
   resizeSplit: "Resize the two panels",
   resizeBand: "Resize the bottom panels"
 };
-function ln(n) {
+function an(n) {
   return null;
 }
-ln.displayName = "Panels.Panel";
+an.displayName = "Panels.Panel";
 function wn({ side: n, header: t, className: e }) {
-  const { column: o, band: c } = G[n];
-  return /* @__PURE__ */ g(
+  const { column: o, band: l } = X[n];
+  return /* @__PURE__ */ m(
     "div",
     {
       role: "toolbar",
       "aria-orientation": "vertical",
       className: b("pnl-rail", `pnl-rail--${n}`, e),
       children: [
-        /* @__PURE__ */ g("div", { className: "pnl-rail__group", children: [
-          t !== void 0 && /* @__PURE__ */ g(A, { children: [
+        /* @__PURE__ */ m("div", { className: "pnl-rail__group", children: [
+          t !== void 0 && /* @__PURE__ */ m(j, { children: [
             t,
-            /* @__PURE__ */ u(sn, { orientation: "horizontal" })
+            /* @__PURE__ */ u(cn, { orientation: "horizontal" })
           ] }),
           o.map((s) => /* @__PURE__ */ u(yn, { zone: s }, s))
         ] }),
-        /* @__PURE__ */ u(yn, { zone: c })
+        /* @__PURE__ */ u(yn, { zone: l })
       ]
     }
   );
 }
 function yn({ zone: n }) {
-  const t = ht(n), e = lt(n), o = v((r) => r.focusedZone === n), { toggle: c } = R(), { IconButton: s } = On();
-  return t.length === 0 ? null : /* @__PURE__ */ u("div", { className: "pnl-rail__group", children: t.map(([r, i], l) => /* @__PURE__ */ g(Dn, { children: [
-    l > 0 && /* @__PURE__ */ u(sn, { orientation: "horizontal" }),
-    i.map((a) => {
-      const d = e[r] === a.id;
+  const t = ht(n), e = at(n), o = v((i) => i.focusedZone === n), { toggle: l } = D(), { IconButton: s } = On();
+  return t.length === 0 ? null : /* @__PURE__ */ u("div", { className: "pnl-rail__group", children: t.map(([i, r], c) => /* @__PURE__ */ m(kn, { children: [
+    c > 0 && /* @__PURE__ */ u(cn, { orientation: "horizontal" }),
+    r.map((a) => {
+      const d = e[i] === a.id;
       return /* @__PURE__ */ u(
         s,
         {
@@ -791,115 +815,115 @@ function yn({ zone: n }) {
           label: a.title,
           active: d,
           accented: d && o,
-          onClick: () => c(a.id),
+          onClick: () => l(a.id),
           className: "pnl-rail__button"
         },
         a.id
       );
     })
-  ] }, `${n}:${r}`)) });
+  ] }, `${n}:${i}`)) });
 }
-function Nt(n) {
+function Pt(n) {
   const t = [], e = /* @__PURE__ */ new Map(), o = [];
-  let c = null;
-  for (const s of jn.toArray(n)) {
+  let l = null;
+  for (const s of Dn.toArray(n)) {
     if (!Hn(s)) {
       o.push(s);
       continue;
     }
-    if (s.type === cn) {
-      c = s;
+    if (s.type === ln) {
+      l = s;
       continue;
     }
-    if (s.type !== ln) {
+    if (s.type !== an) {
       o.push(s);
       continue;
     }
-    const r = s.props, { actions: i, children: l, slot: a = "primary", ...d } = r;
-    t.push({ ...d, slot: a }), e.set(d.id, { content: l, actions: i });
+    const i = s.props, { actions: r, children: c, slot: a = "primary", ...d } = i;
+    t.push({ ...d, slot: a }), e.set(d.id, { content: c, actions: r });
   }
-  return { specs: t, content: e, centre: c, loose: o };
+  return { specs: t, content: e, centre: l, loose: o };
 }
 function Fn({
   header: n,
   footer: t,
   railHeader: e,
   labels: o,
-  theme: c,
+  theme: l,
   className: s,
-  components: r,
-  children: i,
-  ...l
+  components: i,
+  children: r,
+  ...c
 }) {
-  return /* @__PURE__ */ u(ot, { ...l, children: /* @__PURE__ */ u(
-    Pt,
+  return /* @__PURE__ */ u(rt, { ...c, children: /* @__PURE__ */ u(
+    Nt,
     {
       header: n,
       footer: t,
       railHeader: e,
       labels: o,
-      theme: c,
+      theme: l,
       className: s,
-      components: r,
-      children: i
+      components: i,
+      children: r
     }
   ) });
 }
-function Pt({
+function Nt({
   header: n,
   footer: t,
   railHeader: e,
   labels: o,
-  theme: c,
+  theme: l,
   className: s,
-  components: r,
-  children: i
+  components: i,
+  children: r
 }) {
-  const l = O(), a = H(null);
-  ct(a);
-  const [d] = W(() => it(r)), { specs: f, content: h, centre: m, loose: I } = w(() => Nt(i), [i]), y = w(() => ({ ...St, ...o }), [o]);
-  Mn(() => {
-    l.getState().declare(f);
-  }, [l, f]);
-  const p = ut();
-  return /* @__PURE__ */ u(st, { value: d, children: /* @__PURE__ */ u(pt, { value: h, children: /* @__PURE__ */ g("div", { "data-pnl-theme": c, className: b("pnl-root", s), children: [
+  const c = k(), a = Z(null);
+  lt(a);
+  const [d] = J(() => ct(i)), { specs: f, content: p, centre: g, loose: S } = w(() => Pt(r), [r]), y = w(() => ({ ...St, ...o }), [o]);
+  Zn(() => {
+    c.getState().declare(f);
+  }, [c, f]);
+  const h = ut();
+  return /* @__PURE__ */ u(it, { value: d, children: /* @__PURE__ */ u(pt, { value: p, children: /* @__PURE__ */ m("div", { "data-pnl-theme": l, className: b("pnl-root", s), children: [
     n,
-    /* @__PURE__ */ g("div", { className: "pnl-middle", children: [
+    /* @__PURE__ */ m("div", { className: "pnl-middle", children: [
       /* @__PURE__ */ u(wn, { side: "left", header: e }),
-      /* @__PURE__ */ g("div", { ref: a, className: "pnl-columns", children: [
-        /* @__PURE__ */ u(N, { zone: "top", labels: y }),
-        /* @__PURE__ */ g("div", { className: "pnl-row", children: [
-          !p.left && /* @__PURE__ */ u(N, { zone: "left", labels: y }),
-          /* @__PURE__ */ g("div", { className: "pnl-stack", children: [
-            /* @__PURE__ */ g("div", { className: "pnl-row", children: [
-              p.left && /* @__PURE__ */ u(N, { zone: "left", labels: y }),
-              /* @__PURE__ */ u(Tn, { className: "pnl-centre", children: m?.props.children }),
-              p.right && /* @__PURE__ */ u(N, { zone: "right", labels: y })
+      /* @__PURE__ */ m("div", { ref: a, className: "pnl-columns", children: [
+        /* @__PURE__ */ u(I, { zone: "top", labels: y }),
+        /* @__PURE__ */ m("div", { className: "pnl-row", children: [
+          !h.left && /* @__PURE__ */ u(I, { zone: "left", labels: y }),
+          /* @__PURE__ */ m("div", { className: "pnl-stack", children: [
+            /* @__PURE__ */ m("div", { className: "pnl-row", children: [
+              h.left && /* @__PURE__ */ u(I, { zone: "left", labels: y }),
+              /* @__PURE__ */ u(Tn, { className: "pnl-centre", children: g?.props.children }),
+              h.right && /* @__PURE__ */ u(I, { zone: "right", labels: y })
             ] }),
-            /* @__PURE__ */ u(yt, { left: p.left, right: p.right, labels: y })
+            /* @__PURE__ */ u(yt, { left: h.left, right: h.right, labels: y })
           ] }),
-          !p.right && /* @__PURE__ */ u(N, { zone: "right", labels: y })
+          !h.right && /* @__PURE__ */ u(I, { zone: "right", labels: y })
         ] })
       ] }),
       /* @__PURE__ */ u(wn, { side: "right" })
     ] }),
     t,
-    I
+    S
   ] }) }) });
 }
-Fn.Panel = ln;
-Fn.Center = cn;
+Fn.Panel = an;
+Fn.Center = ln;
 function Zt() {
-  const n = O(), t = T(), e = v((r) => r.focusedZone), o = R(), c = _(
-    (r) => {
-      const i = C(t.registry, r);
-      return i !== void 0 && L(t, i.zone)[i.slot] === r;
+  const n = k(), t = R(), e = v((i) => i.focusedZone), o = D(), l = N(
+    (i) => {
+      const r = M(t.registry, i);
+      return r !== void 0 && A(t, r.zone)[r.slot] === i;
     },
     [t]
-  ), s = _(
-    (r) => {
-      const i = C(t.registry, r);
-      !i || L(t, i.zone)[i.slot] !== r || n.getState().close(i.zone, i.slot);
+  ), s = N(
+    (i) => {
+      const r = M(t.registry, i);
+      !r || A(t, r.zone)[r.slot] !== i || n.getState().close(r.zone, r.slot);
     },
     [t, n]
   );
@@ -909,74 +933,74 @@ function Zt() {
       reveal: o.show,
       close: s,
       toggle: o.toggle,
-      isShown: c,
+      isShown: l,
       focusedZone: e,
       reset: o.reset
     }),
-    [t, o.show, o.toggle, o.reset, s, c, e]
+    [t, o.show, o.toggle, o.reset, s, l, e]
   );
 }
 export {
-  $n as BOTTOM_ZONES,
+  Wn as BOTTOM_ZONES,
   yt as Band,
-  cn as Center,
+  ln as Center,
   pt as ContentProvider,
   St as DEFAULT_LABELS,
-  Wn as DEFAULT_SIZES,
-  on as DEFAULT_VIEW,
-  rt as IconButton,
-  En as LAYOUT_VERSION,
-  Pn as MIN_CENTER,
-  B as MIN_SIZE,
-  Z as MIN_SPLIT,
-  ln as Panel,
+  Yn as DEFAULT_SIZES,
+  rn as DEFAULT_VIEW,
+  st as IconButton,
+  Cn as LAYOUT_VERSION,
+  Nn as MIN_CENTER,
+  U as MIN_SIZE,
+  z as MIN_SPLIT,
+  an as Panel,
   bn as PanelFrame,
   mt as PanelHeader,
   Fn as Panels,
-  ot as PanelsProvider,
+  rt as PanelsProvider,
   wn as Rail,
   yn as RailZone,
-  Q as ResizeHandle,
-  Nn as SLOTS,
-  sn as Separator,
+  nn as ResizeHandle,
+  Pn as SLOTS,
+  cn as Separator,
   Tn as Surface,
-  U as ZONES,
-  G as ZONES_BY_SIDE,
-  N as ZoneEdge,
+  B as ZONES,
+  X as ZONES_BY_SIDE,
+  I as ZoneEdge,
   Qn as browserStorage,
   qn as createPanelsStore,
   b as cx,
-  D as fitSplit,
-  xn as fitZoneSize,
-  rn as isBottom,
-  M as isHorizontal,
-  un as isLeading,
-  Ct as memoryStorage,
-  z as openOf,
+  W as fitSplit,
+  En as fitZoneSize,
+  sn as isBottom,
+  T as isHorizontal,
+  dn as isLeading,
+  xt as memoryStorage,
+  F as openOf,
   tt as readLayout,
-  Jn as sharedSizes,
-  L as shownIn,
-  E as shownSpecsIn,
-  k as sizeKeyOf,
-  C as specOf,
-  K as undraggedSizeOf,
-  T as useArrangement,
+  Gn as sharedSizes,
+  A as shownIn,
+  x as shownSpecsIn,
+  V as sizeKeyOf,
+  M as specOf,
+  q as undraggedSizeOf,
+  R as useArrangement,
   ut as useBandHalves,
-  ct as useContainerFit,
+  lt as useContainerFit,
   gt as usePanelContent,
   Zt as usePanels,
-  R as usePanelsActions,
+  D as usePanelsActions,
   On as usePanelsComponents,
   v as usePanelsState,
-  O as usePanelsStore,
+  k as usePanelsStore,
   dt as usePointerDrag,
-  lt as useShownIn,
-  gn as useShownSpecsIn,
+  at as useShownIn,
+  Lt as useShownSpecsIn,
   ft as useZone,
   mn as useZoneDraws,
   ht as useZonePanels,
-  at as useZoneTakesRoom,
+  Ct as useZoneTakesRoom,
   et as writeLayout,
-  j as zoneDraws,
-  X as zoneTakesRoom
+  $ as zoneDraws,
+  Y as zoneTakesRoom
 };