@pasquelin/panels 0.1.1 → 0.3.0

package/dist/index.js

@@ -1,238 +1,267 @@
-import { jsx as d, jsxs as m, Fragment as B } from "react/jsx-runtime";
-import k, { useEffect as K, useLayoutEffect as Mn, useState as tn, useMemo as w, useContext as fn, createContext as pn, useRef as j, useCallback as z, memo as hn, Fragment as Rn, Children as Cn, isValidElement as En } from "react";
-import { c as v } from "./cx-CcykAxZN.js";
-const en = (n) => {
+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 { c as b } from "./cx-CcykAxZN.js";
+const an = (n) => {
   let t;
-  const e = /* @__PURE__ */ new Set(), o = (u, a) => {
-    const f = typeof u == "function" ? u(t) : u;
+  const e = /* @__PURE__ */ new Set(), o = (a, d) => {
+    const f = typeof a == "function" ? a(t) : a;
     if (!Object.is(f, t)) {
-      const p = t;
-      t = a ?? (typeof f != "object" || f === null) ? f : Object.assign({}, t, f), e.forEach((g) => g(t, p));
+      const h = t;
+      t = d ?? (typeof f != "object" || f === null) ? f : Object.assign({}, t, f), e.forEach((m) => m(t, h));
     }
-  }, s = () => t, c = { setState: o, getState: s, getInitialState: () => l, subscribe: (u) => (e.add(u), () => e.delete(u)) }, l = t = n(o, s, c);
-  return c;
-}, Ln = ((n) => n ? en(n) : en), On = (n) => n;
-function Tn(n, t = On) {
-  const e = k.useSyncExternalStore(
+  }, 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(
     n.subscribe,
-    k.useCallback(() => t(n.getState()), [n, t]),
-    k.useCallback(() => t(n.getInitialState()), [n, t])
+    F.useCallback(() => t(n.getState()), [n, t]),
+    F.useCallback(() => t(n.getInitialState()), [n, t])
   );
-  return k.useDebugValue(e), e;
+  return F.useDebugValue(e), e;
 }
-const C = ["left", "right", "top", "bottomLeft", "bottomRight"], $ = ["primary", "secondary"], kn = ["bottomLeft", "bottomRight"];
-function U(n) {
+const U = ["left", "right", "top", "bottomLeft", "bottomRight"], Nn = ["primary", "secondary"], on = "default", $n = ["bottomLeft", "bottomRight"];
+function rn(n) {
   return n === "bottomLeft" || n === "bottomRight";
 }
-function E(n) {
-  return n === "top" || U(n);
+function M(n) {
+  return n === "top" || rn(n);
 }
-const V = {
+const G = {
   left: { column: ["left", "top"], band: "bottomLeft" },
   right: { column: ["right"], band: "bottomRight" }
 };
-function on(n) {
+function un(n) {
   return n === "left" || n === "top";
 }
-const F = 140, gn = 240, R = 100, Bn = {
+const B = 140, Pn = 240, Z = 100, Wn = {
   left: 320,
   right: 260,
   top: 180,
   bottomLeft: 240,
   bottomRight: 240
-}, mn = "bottomRight";
-function A(n) {
-  return U(n) ? mn : n;
+}, _n = "bottomRight";
+function k(n) {
+  return rn(n) ? _n : n;
 }
-const M = {
+const x = {
   left: "right",
   right: "left",
   // The band as a whole faces the top strip: either half of it takes the same height off.
-  top: mn,
+  top: _n,
   bottomLeft: "top",
   bottomRight: "top"
 };
-function bn(n, t, e) {
+function In(n, t, e) {
   return Math.min(Math.max(n, t), e);
 }
-function yn(n, t, e) {
-  const o = Math.max(F, Math.round(t - e - gn));
-  return bn(Math.round(n), F, o);
+function xn(n, t, e) {
+  const o = Math.max(B, Math.round(t - e - Pn));
+  return In(Math.round(n), B, o);
 }
 function D(n, t) {
-  const e = Math.max(R, Math.round(t - R));
-  return bn(Math.round(n), R, e);
-}
-function H(n, t) {
-  const e = n[t];
-  return e !== void 0 && (e.primary !== void 0 || e.secondary !== void 0);
-}
-function Fn(n) {
-  return H(n, "bottomLeft") || H(n, "bottomRight");
-}
-function vn(n, t, e, o) {
-  return (U(e) ? Fn(t) : H(t, e)) ? n.sizes[A(e)] ?? o(e) : 0;
-}
-function An(n, t, e, o, s) {
-  const r = { ...n.sizes }, i = { ...n.splits };
-  for (const l of C) {
-    const u = r[l];
-    if (u === void 0) continue;
-    const a = E(l) ? o : e;
-    r[l] = yn(u, a, vn(n, t, M[l], s));
-    const f = i[l];
-    f !== void 0 && (i[l] = D(f, E(l) ? e : o));
+  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 Gn(n, t, e, o, c) {
+  const s = { ...n.sizes }, r = { ...n.splits };
+  for (const l of U) {
+    const a = s[l];
+    if (a !== void 0) {
+      const f = M(l) ? e : t, h = Cn(n, x[l], o, c);
+      s[l] = xn(a, f, h);
+    }
+    const d = r[l];
+    d !== void 0 && (r[l] = D(d, M(l) ? t : e));
   }
-  const c = n.bandSplit === void 0 ? void 0 : D(n.bandSplit, e);
-  return { sizes: r, splits: i, bandSplit: c };
-}
-function Dn(n, t, e) {
-  const o = e - gn, s = n + t;
-  if (s <= o) return [n, t];
-  const r = (u) => u === 0 ? 0 : F, i = r(n) + r(t);
-  if (o <= i)
-    return [Math.min(n, r(n)), Math.min(t, r(t))];
-  const c = o / s, l = Math.max(r(n), Math.round(n * c));
-  return [l, Math.max(r(t), Math.round(o - l))];
+  const i = n.bandSplit === void 0 ? void 0 : D(n.bandSplit, t);
+  return { sizes: s, splits: r, bandSplit: i };
 }
-function Hn(n, t, e) {
-  return n.find((o) => o.zone === t && o.slot === e)?.id;
-}
-function N(n, t) {
-  return t === void 0 ? void 0 : n.find((e) => e.id === t);
-}
-function Z(n, t) {
-  const e = n.open[t], o = e?.primary;
-  return o !== void 0 && N(n.registry, o)?.solo === !0 ? { primary: o } : { primary: o, secondary: e?.secondary };
-}
-function jn(n, t) {
-  return U(t) ? kn.some((e) => W(n, e)) : W(n, t);
-}
-function W(n, t) {
-  const e = Z(n, t);
+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)
+    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))];
+}
+function z(n) {
+  return n.views[n.view] ?? {};
+}
+function $(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 });
+  return e;
+}
+function J(n, t) {
+  return Object.hasOwn(n.views, t);
+}
+function Zn(n, t, e) {
+  return n.find((o) => o.zone === t && o.slot === e);
+}
+function C(n, t) {
+  return t == null ? void 0 : n.find((e) => e.id === t);
+}
+function dn(n, t, e) {
+  const o = z(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);
+}
+function E(n, t) {
+  const e = dn(n, t, "primary");
+  return e?.solo === !0 ? { primary: e } : { primary: e, secondary: dn(n, t, "secondary") };
+}
+function L(n, t) {
+  const { primary: e, secondary: o } = E(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 j(n, t) {
+  const e = L(n, t);
   return e.primary !== void 0 || e.secondary !== void 0;
 }
-function G(n, t, e) {
-  return Math.max(Bn[t], N(n, e)?.opens ?? 0);
-}
-function Un(n, t, e, o) {
-  const s = n.open[t] ?? {}, r = { ...n.stashed };
-  if (N(n.registry, o)?.solo === !0)
-    return r[t] = s, [{ [e]: o }, r];
-  const i = s.primary;
-  if (!(i !== void 0 && N(n.registry, i)?.solo === !0)) return [{ ...s, [e]: o }, n.stashed];
-  const l = r[t] ?? {};
-  return delete r[t], [{ ...l, [e]: o }, r];
-}
-function Yn(n, t, e) {
-  const o = n.open[t] ?? {}, s = o[e], r = n.stashed[t];
-  if (r && s !== void 0 && N(n.registry, s)?.solo === !0) {
-    const c = { ...n.stashed };
-    return delete c[t], [r, c];
+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];
   }
-  const i = { ...o };
-  return delete i[e], [i, n.stashed];
-}
-const rn = { sizes: {}, splits: {} };
-function $n(n = {}) {
-  const t = n.initial;
-  return Ln()((e, o) => ({
+  const r = { ...o };
+  return delete r[e], [r, n.stashed];
+}
+const fn = { sizes: {}, splits: {} };
+function qn(n = {}) {
+  const t = n.initial, e = (o, c) => ({
+    ...o.views,
+    [o.view]: c
+  });
+  return Un()((o, c) => ({
     registry: [],
-    open: t?.open ?? {},
-    lengths: t?.lengths ?? rn,
+    view: n.view ?? on,
+    views: t?.views ?? {},
+    lengths: t?.lengths ?? fn,
     focusedZone: null,
     stashed: {},
-    settled: t?.open !== void 0,
     available: { width: 0, height: 0 },
-    register: (s) => e((r) => ({ registry: [...r.registry.filter((c) => c.id !== s.id), s] })),
-    unregister: (s) => e((r) => {
-      const i = { ...r.open };
-      for (const c of C) {
-        const l = i[c];
-        if (l)
-          for (const u of $) {
-            if (l[u] !== s) continue;
-            const a = { ...l };
-            delete a[u], i[c] = a;
-          }
-      }
-      return { registry: r.registry.filter((c) => c.id !== s), open: i };
+    // The arrangement is left ALONE by a panel leaving the list: the half naming it falls back
+    // to what is still declared — see `resolve` — and names it again the day it comes back.
+    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) => e((r) => {
-      if (r.settled) return r;
-      const i = { ...s ?? {} };
-      for (const c of C)
-        for (const l of $) {
-          if (i[c]?.[l] !== void 0) continue;
-          const u = Hn(r.registry, c, l);
-          u !== void 0 && (i[c] = { ...i[c] ?? {}, [l]: u });
-        }
-      return { open: i, settled: !0 };
+    // 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 : {
+      view: s,
+      views: J(r, s) ? r.views : { ...r.views, [s]: $(r.registry, r.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) => e((r) => {
-      const i = N(r.registry, s);
+    show: (s) => o((r) => {
+      const i = C(r.registry, s);
       if (!i) return r;
-      const { zone: c, slot: l } = i;
-      if (r.open[c]?.[l] === s) return { focusedZone: c };
-      const [u, a] = Un(r, c, l, s);
-      return { open: { ...r.open, [c]: u }, stashed: a, focusedZone: c };
+      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);
+      return {
+        views: e(r, { ...z(r), [l]: d }),
+        stashed: f,
+        focusedZone: l
+      };
     }),
-    close: (s, r) => e((i) => {
-      const [c, l] = Yn(i, s, r), u = { ...i.open, [s]: 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);
       return {
-        open: u,
-        stashed: l,
-        focusedZone: !H(u, s) && i.focusedZone === s ? null : i.focusedZone
+        views: d,
+        stashed: a,
+        focusedZone: !f && i.focusedZone === s ? null : i.focusedZone
       };
     }),
     toggle: (s) => {
-      const r = o(), i = N(r.registry, s);
-      if (!i) return;
-      Z(r, i.zone)[i.slot] === s ? r.close(i.zone, i.slot) : r.show(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));
     },
-    focus: (s) => e((r) => r.focusedZone === s ? r : { focusedZone: s }),
+    focus: (s) => o((r) => r.focusedZone === s ? r : { 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) => e((c) => {
-      const l = vn(
-        c.lengths,
-        c.open,
-        M[s],
-        (f) => G(c.registry, f, Z(c, f).primary)
-      ), u = yn(r, i, l), a = A(s);
-      return u === c.lengths.sizes[a] ? c : { lengths: { ...c.lengths, sizes: { ...c.lengths.sizes, [a]: u } } };
+    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 } } };
     }),
-    resplit: (s, r, i) => e((c) => {
-      const l = D(r, i);
-      return l === c.lengths.splits[s] ? c : { lengths: { ...c.lengths, splits: { ...c.lengths.splits, [s]: l } } };
+    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 } } };
     }),
-    resplitBand: (s, r) => e((i) => {
-      const c = D(s, r);
-      return c === i.lengths.bandSplit ? i : { lengths: { ...i.lengths, bandSplit: c } };
+    resplitBand: (s, r) => o((i) => {
+      const l = D(s, r);
+      return l === i.lengths.bandSplit ? i : { lengths: { ...i.lengths, bandSplit: l } };
     }),
-    fit: (s, r) => e((i) => ({
+    fit: (s, r) => o((i) => ({
       available: { width: s, height: r },
-      lengths: An(
+      lengths: Gn(
         i.lengths,
-        i.open,
         s,
         r,
-        (c) => G(i.registry, c, Z(i, c).primary)
+        (l) => X(i, l),
+        (l) => K(l, E(i, l).primary)
       )
     })),
-    reset: () => e((s) => ({
-      open: {},
-      lengths: rn,
+    // 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) => ({
+      // The view in front is settled on the spot, not left for the next render: nothing
+      // re-renders the provider when a button inside the chassis is what asked for the reset,
+      // so the frame stayed blank — and the arrangement being escaped stayed on disk.
+      //
+      // 🛑 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,
       focusedZone: null,
       // Left behind, a solo panel closed after a reset would give back the zone the reset
       // had just cleared.
       stashed: {},
-      settled: !1,
       registry: s.registry
     }))
   }));
 }
-const mt = () => {
+const Ct = () => {
   const n = /* @__PURE__ */ new Map();
   return {
     read: (t) => n.get(t) ?? null,
@@ -240,7 +269,7 @@ const mt = () => {
       n.set(t, e);
     }
   };
-}, Vn = () => ({
+}, Qn = () => ({
   read: (n) => {
     try {
       return globalThis.localStorage?.getItem(n) ?? null;
@@ -254,134 +283,197 @@ const mt = () => {
     } catch {
     }
   }
-}), Sn = 1;
-function I(n) {
+}), En = 2;
+function P(n) {
   return typeof n == "object" && n !== null && !Array.isArray(n);
 }
-function Wn(n) {
+function hn(n) {
   const t = {};
-  for (const e of C) {
+  for (const e of U) {
     const o = n[e];
-    if (I(o))
-      for (const s of $) {
-        const r = o[s];
-        typeof r == "string" && (t[e] = { ...t[e], [s]: r });
+    if (P(o))
+      for (const c of Nn) {
+        const s = o[c];
+        s !== null && typeof s != "string" || (t[e] = { ...t[e], [c]: s });
       }
   }
   return t;
 }
-function sn(n) {
+function pn(n) {
   const t = {};
-  for (const e of C) {
+  for (const e of U) {
     const o = n[e];
     typeof o == "number" && Number.isFinite(o) && (t[e] = o);
   }
   return t;
 }
-function Gn(n, t) {
-  const e = n.read(t);
-  if (e === null) return;
-  let o;
+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;
+  const e = /* @__PURE__ */ Object.create(null);
+  for (const [o, c] of Object.entries(n.views))
+    P(c) && (e[o] = hn(c));
+  return e;
+}
+function tt(n, t, e = on) {
+  const o = n.read(t);
+  if (o === null) return;
+  let c;
   try {
-    o = JSON.parse(e);
+    c = JSON.parse(o);
   } catch {
     return;
   }
-  if (!I(o) || o.version !== Sn || !I(o.open) || !I(o.lengths)) return;
-  const s = o.lengths;
-  if (!I(s.sizes) || !I(s.splits)) return;
-  const r = s.bandSplit;
+  if (!P(c) || !P(c.lengths)) return;
+  const s = nt(c, e);
+  if (!s) return;
+  const r = c.lengths;
+  if (!P(r.sizes) || !P(r.splits)) return;
+  const i = r.bandSplit;
   return {
-    open: Wn(o.open),
+    views: s,
     lengths: {
-      sizes: sn(s.sizes),
-      splits: sn(s.splits),
-      bandSplit: typeof r == "number" && Number.isFinite(r) ? r : void 0
+      sizes: pn(r.sizes),
+      splits: pn(r.splits),
+      bandSplit: typeof i == "number" && Number.isFinite(i) ? i : void 0
     }
   };
 }
-function Jn(n, t, e) {
-  const o = { version: Sn, ...e };
+function et(n, t, e) {
+  const o = {
+    version: En,
+    views: e.views,
+    lengths: e.lengths
+  };
   n.write(t, JSON.stringify(o));
 }
-const wn = typeof globalThis.document > "u" ? K : Mn, Nn = pn(null);
-function Xn({
+const Mn = typeof globalThis.document > "u" ? nn : kn, zn = en(null);
+function ot({
   store: n,
   storageKey: t = "panels:layout",
   storage: e,
   defaultOpen: o,
+  view: c,
   children: s
 }) {
-  const [r] = tn(
-    () => e === null ? null : e ?? Vn()
-  ), [i] = tn(
-    () => n ?? $n({
-      initial: r ? Gn(r, t) : void 0
-    })
-  );
-  return wn(() => {
-    i.getState().settle(o);
-  }, [i, o]), K(() => {
-    if (r)
-      return i.subscribe((c) => {
-        c.settled && Jn(r, t, { open: c.open, lengths: c.lengths });
-      });
-  }, [r, i, t]), /* @__PURE__ */ d(Nn.Provider, { value: i, children: s });
-}
-function L() {
-  const n = fn(Nn);
+  const [r] = W(
+    () => 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 });
+  });
+  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)));
+    });
+  }, [r, i, t]), /* @__PURE__ */ u(zn.Provider, { value: i, children: s });
+}
+function O() {
+  const n = tn(zn);
   if (!n) throw new Error("usePanelsStore must be used inside a <Panels> or <PanelsProvider>");
   return n;
 }
-function S(n) {
-  const t = L();
-  return Tn(t, n);
+function v(n) {
+  const t = O();
+  return Yn(t, n);
 }
-function O() {
-  const n = L();
+function R() {
+  const n = O();
   return w(() => {
-    const { show: t, close: e, toggle: o, focus: s, resize: r, resplit: i, resplitBand: c, fit: l, reset: u } = n.getState();
-    return { show: t, close: e, toggle: o, focus: s, resize: r, resplit: i, resplitBand: c, fit: l, reset: u };
+    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 };
   }, [n]);
 }
-function Kn(n) {
-  const t = L();
-  K(() => {
+function rt({
+  icon: n,
+  label: t,
+  active: e,
+  accented: o,
+  acts: c,
+  className: s,
+  children: r,
+  ref: i,
+  ...l
+}) {
+  return /* @__PURE__ */ g(
+    "button",
+    {
+      type: "button",
+      ref: i,
+      "aria-label": t,
+      "aria-pressed": c ? void 0 : e,
+      className: b(
+        "pnl-icon-button",
+        e && "pnl-icon-button--active",
+        o && "pnl-icon-button--accented",
+        s
+      ),
+      ...l,
+      children: [
+        n !== void 0 && /* @__PURE__ */ u("span", { className: "pnl-icon-button__glyph", children: n }),
+        r
+      ]
+    }
+  );
+}
+const q = { IconButton: rt }, Ln = en(q), st = Ln.Provider;
+function On() {
+  return tn(Ln);
+}
+function it(n) {
+  return n === void 0 ? q : { ...q, ...n };
+}
+function ct(n) {
+  const t = O();
+  nn(() => {
     const e = n.current;
     if (!e) return;
     const o = () => {
-      const { clientWidth: r, clientHeight: i } = e;
-      r === 0 || i === 0 || t.getState().fit(r, i);
+      const { clientWidth: s, clientHeight: r } = e;
+      s === 0 || r === 0 || t.getState().fit(s, r);
     };
     if (o(), typeof ResizeObserver > "u") return;
-    const s = new ResizeObserver(o);
-    return s.observe(e), () => s.disconnect();
+    const c = new ResizeObserver(o);
+    return c.observe(e), () => c.disconnect();
   }, [n, t]);
 }
 function T() {
-  const n = S((e) => e.registry), t = S((e) => e.open);
-  return w(() => ({ registry: n, open: t }), [n, t]);
+  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 J(n) {
+function lt(n) {
   const t = T();
-  return w(() => Z(t, n), [t, n]);
+  return w(() => L(t, n), [t, n]);
 }
-function cn(n) {
+function gn(n) {
   const t = T();
-  return w(() => W(t, n), [t, n]);
+  return w(() => E(t, n), [t, n]);
 }
-function qn(n) {
+function mn(n) {
   const t = T();
-  return w(() => jn(t, n), [t, n]);
+  return w(() => j(t, n), [t, n]);
 }
-function Qn() {
+function at(n) {
+  const t = T();
+  return w(() => X(t, n), [t, n]);
+}
+function ut() {
   return {
-    left: cn(V.left.band),
-    right: cn(V.right.band)
+    left: mn(G.left.band),
+    right: mn(G.right.band)
   };
 }
-function nt() {
-  const n = j(null);
+function dt() {
+  const n = H(null);
   return w(() => ({
     start: (e, o) => {
       e.currentTarget.setPointerCapture(e.pointerId), n.current = { ...o, pointerId: e.pointerId };
@@ -392,223 +484,174 @@ function nt() {
     }
   }), []);
 }
-function X({
+function Q({
   axis: n,
   invert: t = !1,
   size: e,
   onSize: o,
-  measure: s,
-  label: r,
-  min: i,
-  max: c,
+  measure: c,
+  label: s,
+  min: r,
+  max: i,
   step: l = 16,
-  className: u
+  className: a
 }) {
-  const a = nt(), f = j(null), p = n === "vertical", g = z(
-    (h) => (p ? h?.clientHeight : h?.clientWidth) ?? 0,
-    [p]
-  ), b = z(
-    (h) => {
-      const y = a.matching(h);
-      if (!y) return;
-      const Y = (p ? h.clientY : h.clientX) - y.position;
-      o(y.size + Y * (t ? -1 : 1), y.available);
+  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);
     },
-    [a, t, p, o]
-  ), P = z(
-    (h) => {
-      const y = p ? "ArrowUp" : "ArrowLeft", _ = p ? "ArrowDown" : "ArrowRight";
-      if (h.key !== y && h.key !== _) return;
-      const Y = g(f.current?.parentElement), Zn = e ?? s?.() ?? 0, In = h.key === _ ? 1 : -1;
-      h.preventDefault(), o(Zn + l * In * (t ? -1 : 1), Y);
+    [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);
     },
-    [t, p, s, o, g, e, l]
+    [t, h, c, o, m, e, l]
   );
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ u(
     "div",
     {
       ref: f,
       role: "separator",
       tabIndex: 0,
-      "aria-label": r,
-      "aria-orientation": p ? "horizontal" : "vertical",
+      "aria-label": s,
+      "aria-orientation": h ? "horizontal" : "vertical",
       "aria-valuenow": e === void 0 ? void 0 : Math.round(e),
-      "aria-valuemin": i,
-      "aria-valuemax": c,
-      onPointerDown: (h) => {
-        a.start(h, {
-          position: p ? h.clientY : h.clientX,
-          size: e ?? s?.() ?? 0,
-          available: g(h.currentTarget.parentElement)
+      "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)
         });
       },
-      onPointerMove: b,
-      onPointerUp: a.cancel,
-      onPointerCancel: a.cancel,
-      onLostPointerCapture: a.cancel,
-      onKeyDown: P,
-      className: v("pnl-handle", p ? "pnl-handle--row" : "pnl-handle--col", u)
+      onPointerMove: I,
+      onPointerUp: d.cancel,
+      onPointerCancel: d.cancel,
+      onLostPointerCapture: d.cancel,
+      onKeyDown: y,
+      className: b("pnl-handle", h ? "pnl-handle--row" : "pnl-handle--col", a)
     }
   );
 }
-function ln(n, t, e, o, s) {
-  return s ? e ?? G(n, o, t) : 0;
-}
-function tt(n) {
-  const t = T(), e = J(n), o = J(M[n]), s = qn(M[n]), r = S(
-    (a) => a.lengths.sizes[A(n)]
-  ), i = S(
-    (a) => a.lengths.sizes[A(M[n])]
-  ), c = S((a) => a.lengths.splits[n]), l = S(
-    (a) => E(n) ? a.available.height : a.available.width
-  ), u = S((a) => a.focusedZone === n);
+function vn(n, t, e, o) {
+  return o ? t ?? K(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);
   return w(() => {
-    const { registry: a } = t, f = N(a, e.primary), p = N(a, e.secondary), g = f !== void 0 || p !== void 0, b = ln(a, e.primary, r, n, g), P = ln(
-      a,
-      o.primary,
-      i,
-      M[n],
-      s
-    );
+    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);
     return {
-      primary: f,
-      secondary: p,
-      draws: g,
+      primary: a,
+      secondary: d,
+      draws: f,
       // Zero until the container has been measured: bounding against nothing would collapse
       // every zone to its floor on the very first paint.
-      size: l === 0 ? b : Dn(b, P, l)[0],
-      split: c,
-      focused: u
+      size: i === 0 ? h : Jn(h, m, i)[0],
+      split: r,
+      focused: l
     };
-  }, [
-    t,
-    e,
-    o,
-    s,
-    r,
-    i,
-    l,
-    c,
-    u,
-    n
-  ]);
-}
-function et(n) {
-  const t = S((e) => e.registry);
+  }, [t, e, o, c, s, i, r, l, n]);
+}
+function ht(n) {
+  const t = v((e) => e.registry);
   return w(() => [
     ["primary", t.filter((o) => o.zone === n && o.slot === "primary")],
     ["secondary", t.filter((o) => o.zone === n && o.slot === "secondary")]
   ].filter(([, o]) => o.length > 0), [t, n]);
 }
-const Pn = pn(/* @__PURE__ */ new Map()), ot = Pn.Provider;
-function rt(n) {
-  return fn(Pn).get(n);
+const Rn = en(/* @__PURE__ */ new Map()), pt = Rn.Provider;
+function gt(n) {
+  return tn(Rn).get(n);
 }
-function st({
+function mt({
   title: n,
   children: t,
   fillActions: e,
   trailing: o,
-  className: s
+  className: c
 }) {
-  return /* @__PURE__ */ m("header", { className: v("pnl-header", s), children: [
-    /* @__PURE__ */ d("span", { className: v("pnl-header__title", e && "pnl-header__title--fixed"), children: n }),
-    /* @__PURE__ */ d("span", { className: v("pnl-header__actions", e && "pnl-header__actions--fill"), children: t }),
-    /* @__PURE__ */ d("span", { className: "pnl-header__trailing", children: o })
+  return /* @__PURE__ */ g("header", { className: b("pnl-header", c), 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 q({ orientation: n = "vertical", className: t }) {
-  return /* @__PURE__ */ d(
+function sn({ orientation: n = "vertical", className: t }) {
+  return /* @__PURE__ */ u(
     "span",
     {
       "aria-hidden": "true",
-      className: v("pnl-separator", `pnl-separator--${n}`, t)
+      className: b("pnl-separator", `pnl-separator--${n}`, t)
     }
   );
 }
-function _n({ children: n, className: t, ...e }) {
-  return /* @__PURE__ */ d("section", { className: v("pnl-surface", t), ...e, children: n });
-}
-function xn({
-  icon: n,
-  label: t,
-  active: e,
-  accented: o,
-  acts: s,
-  className: r,
-  children: i,
-  ref: c,
-  ...l
-}) {
-  return /* @__PURE__ */ m(
-    "button",
-    {
-      type: "button",
-      ref: c,
-      "aria-label": t,
-      "aria-pressed": s ? void 0 : e,
-      className: v(
-        "pnl-icon-button",
-        e && "pnl-icon-button--active",
-        o && "pnl-icon-button--accented",
-        r
-      ),
-      ...l,
-      children: [
-        n !== void 0 && /* @__PURE__ */ d("span", { className: "pnl-icon-button__glyph", children: n }),
-        i
-      ]
-    }
-  );
+function Tn({ children: n, className: t, ...e }) {
+  return /* @__PURE__ */ u("section", { className: b("pnl-surface", t), ...e, children: n });
 }
-function it({
+function vt({
   panel: n,
   length: t,
   closeLabel: e,
   onFocus: o
 }) {
-  const { close: s } = O(), r = rt(n.id);
+  const { close: c } = R(), { IconButton: s } = 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__ */ m(
-      _n,
+    /* @__PURE__ */ g(
+      Tn,
       {
         "aria-label": n.title,
         onPointerDownCapture: o,
         className: t === void 0 ? "pnl-surface--fill" : "pnl-surface--give",
         style: t === void 0 ? void 0 : { flexBasis: t },
         children: [
-          /* @__PURE__ */ d(
-            st,
+          /* @__PURE__ */ u(
+            mt,
             {
               title: n.title,
-              fillActions: r?.actions !== void 0 && E(n.zone),
-              trailing: /* @__PURE__ */ m(B, { children: [
-                r?.actions !== void 0 && /* @__PURE__ */ d(q, {}),
-                /* @__PURE__ */ d(
-                  xn,
+              fillActions: n.fillActions ?? (r?.actions !== void 0 && M(n.zone)),
+              trailing: /* @__PURE__ */ g(A, { children: [
+                r?.actions !== void 0 && /* @__PURE__ */ u(sn, {}),
+                /* @__PURE__ */ u(
+                  s,
                   {
                     label: e,
                     acts: !0,
-                    onClick: () => s(n.zone, n.slot),
+                    onClick: () => c(n.zone, n.slot),
                     className: "pnl-icon-button--header",
-                    icon: /* @__PURE__ */ d(ct, {})
+                    icon: /* @__PURE__ */ u(bt, {})
                   }
                 )
               ] }),
               children: r?.actions
             }
           ),
-          /* @__PURE__ */ d("div", { className: v("pnl-body"), children: r?.content })
+          /* @__PURE__ */ u("div", { className: b("pnl-body"), children: r?.content })
         ]
       }
     )
   );
 }
-const an = hn(it);
-function ct() {
-  return /* @__PURE__ */ d("svg", { viewBox: "0 0 24 24", width: "14", height: "14", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ d(
+const bn = Sn(vt);
+function bt() {
+  return /* @__PURE__ */ u("svg", { viewBox: "0 0 24 24", width: "14", height: "14", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ u(
     "path",
     {
       fill: "currentColor",
@@ -616,248 +659,247 @@ function ct() {
     }
   ) });
 }
-function lt({ zone: n, labels: t }) {
-  const e = tt(n), { focus: o, resize: s, resplit: r } = O(), i = j(null), c = z(() => o(n), [o, n]), l = E(n), u = z(
-    () => l ? i.current?.clientHeight ?? 0 : i.current?.clientWidth ?? 0,
+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]
   );
   if (!e.draws) return null;
-  const { primary: a, secondary: f, size: p, split: g } = e, b = /* @__PURE__ */ m(
+  const { primary: d, secondary: f, size: h, split: m } = e, I = /* @__PURE__ */ g(
     "div",
     {
-      ref: i,
-      className: v("pnl-zone", l ? "pnl-zone--row" : "pnl-zone--col"),
-      style: { [l ? "height" : "width"]: p },
+      ref: r,
+      className: b("pnl-zone", l ? "pnl-zone--row" : "pnl-zone--col"),
+      style: { [l ? "height" : "width"]: h },
       children: [
-        a && /* @__PURE__ */ d(an, { panel: a, closeLabel: t.closePanel, onFocus: c }),
-        a && f && /* @__PURE__ */ d(
-          X,
+        d && /* @__PURE__ */ u(bn, { panel: d, closeLabel: t.closePanel, onFocus: i }),
+        d && f && /* @__PURE__ */ u(
+          Q,
           {
             axis: l ? "horizontal" : "vertical",
             invert: !0,
-            size: g,
-            min: R,
+            size: m,
+            min: Z,
             label: t.resizeSplit,
-            onSize: (h, y) => r(n, h, y)
+            onSize: (p, S) => s(n, p, S)
           }
         ),
-        f && /* @__PURE__ */ d(
-          an,
+        f && /* @__PURE__ */ u(
+          bn,
           {
             panel: f,
-            length: a && g !== void 0 ? g : void 0,
+            length: d && m !== void 0 ? m : void 0,
             closeLabel: t.closePanel,
-            onFocus: c
+            onFocus: i
           }
         )
       ]
     }
-  ), P = /* @__PURE__ */ d(
-    X,
+  ), y = /* @__PURE__ */ u(
+    Q,
     {
       axis: l ? "vertical" : "horizontal",
-      invert: !on(n),
-      size: p,
-      min: F,
-      measure: u,
+      invert: !un(n),
+      size: h,
+      min: B,
+      measure: a,
       label: t.resizeZone,
-      onSize: (h, y) => s(n, h, y)
+      onSize: (p, S) => c(n, p, S)
     }
   );
-  return on(n) ? /* @__PURE__ */ m(B, { children: [
-    b,
-    P
-  ] }) : /* @__PURE__ */ m(B, { children: [
-    P,
-    b
+  return un(n) ? /* @__PURE__ */ g(A, { children: [
+    I,
+    y
+  ] }) : /* @__PURE__ */ g(A, { children: [
+    y,
+    I
   ] });
 }
-const x = hn(lt);
-function at({ left: n, right: t, labels: e }) {
-  const o = S((i) => i.lengths.bandSplit), { resplitBand: s } = O(), r = z(
-    (i, c) => s(i, c),
-    [s]
+const N = 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__ */ d(x, { zone: n ? "bottomLeft" : "bottomRight", labels: e }) : /* @__PURE__ */ m("div", { className: "pnl-band", children: [
-    /* @__PURE__ */ d(
+  return !n && !t ? null : !n || !t ? /* @__PURE__ */ u(N, { zone: n ? "bottomLeft" : "bottomRight", labels: e }) : /* @__PURE__ */ g("div", { className: "pnl-band", children: [
+    /* @__PURE__ */ u(
       "div",
       {
-        className: v("pnl-band__half", o === void 0 && "pnl-band__half--even"),
+        className: b("pnl-band__half", o === void 0 && "pnl-band__half--even"),
         style: o === void 0 ? void 0 : { width: o },
-        children: /* @__PURE__ */ d(x, { zone: "bottomLeft", labels: e })
+        children: /* @__PURE__ */ u(N, { zone: "bottomLeft", labels: e })
       }
     ),
-    /* @__PURE__ */ d(
-      X,
+    /* @__PURE__ */ u(
+      Q,
       {
         axis: "horizontal",
         size: o,
-        min: R,
+        min: Z,
         label: e.resizeBand,
-        onSize: r
+        onSize: s
       }
     ),
-    /* @__PURE__ */ d("div", { className: "pnl-band__half pnl-band__half--rest", children: /* @__PURE__ */ d(x, { zone: "bottomRight", labels: e }) })
+    /* @__PURE__ */ u("div", { className: "pnl-band__half pnl-band__half--rest", children: /* @__PURE__ */ u(N, { zone: "bottomRight", labels: e }) })
   ] });
 }
-function Q(n) {
+function cn(n) {
   return null;
 }
-Q.displayName = "Panels.Center";
-const ut = {
+cn.displayName = "Panels.Center";
+const St = {
   closePanel: "Close panel",
   resizeZone: "Resize panel area",
   resizeSplit: "Resize the two panels",
   resizeBand: "Resize the bottom panels"
 };
-function nn(n) {
+function ln(n) {
   return null;
 }
-nn.displayName = "Panels.Panel";
-function un({ side: n, header: t, className: e }) {
-  const { column: o, band: s } = V[n];
-  return /* @__PURE__ */ m(
+ln.displayName = "Panels.Panel";
+function wn({ side: n, header: t, className: e }) {
+  const { column: o, band: c } = G[n];
+  return /* @__PURE__ */ g(
     "div",
     {
       role: "toolbar",
       "aria-orientation": "vertical",
-      className: v("pnl-rail", `pnl-rail--${n}`, e),
+      className: b("pnl-rail", `pnl-rail--${n}`, e),
       children: [
-        /* @__PURE__ */ m("div", { className: "pnl-rail__group", children: [
-          t !== void 0 && /* @__PURE__ */ m(B, { children: [
+        /* @__PURE__ */ g("div", { className: "pnl-rail__group", children: [
+          t !== void 0 && /* @__PURE__ */ g(A, { children: [
             t,
-            /* @__PURE__ */ d(q, { orientation: "horizontal" })
+            /* @__PURE__ */ u(sn, { orientation: "horizontal" })
           ] }),
-          o.map((r) => /* @__PURE__ */ d(dn, { zone: r }, r))
+          o.map((s) => /* @__PURE__ */ u(yn, { zone: s }, s))
         ] }),
-        /* @__PURE__ */ d(dn, { zone: s })
+        /* @__PURE__ */ u(yn, { zone: c })
       ]
     }
   );
 }
-function dn({ zone: n }) {
-  const t = et(n), e = J(n), o = S((r) => r.focusedZone === n), { toggle: s } = O();
-  return t.length === 0 ? null : /* @__PURE__ */ d("div", { className: "pnl-rail__group", children: t.map(([r, i], c) => /* @__PURE__ */ m(Rn, { children: [
-    c > 0 && /* @__PURE__ */ d(q, { orientation: "horizontal" }),
-    i.map((l) => {
-      const u = e[r] === l.id;
-      return /* @__PURE__ */ d(
-        xn,
+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;
+      return /* @__PURE__ */ u(
+        s,
         {
-          icon: l.icon,
-          label: l.title,
-          active: u,
-          accented: u && o,
-          onClick: () => s(l.id),
+          icon: a.icon,
+          label: a.title,
+          active: d,
+          accented: d && o,
+          onClick: () => c(a.id),
           className: "pnl-rail__button"
         },
-        l.id
+        a.id
       );
     })
   ] }, `${n}:${r}`)) });
 }
-function dt(n) {
+function Nt(n) {
   const t = [], e = /* @__PURE__ */ new Map(), o = [];
-  let s = null;
-  for (const r of Cn.toArray(n)) {
-    if (!En(r)) {
-      o.push(r);
+  let c = null;
+  for (const s of jn.toArray(n)) {
+    if (!Hn(s)) {
+      o.push(s);
       continue;
     }
-    if (r.type === Q) {
-      s = r;
+    if (s.type === cn) {
+      c = s;
       continue;
     }
-    if (r.type !== nn) {
-      o.push(r);
+    if (s.type !== ln) {
+      o.push(s);
       continue;
     }
-    const i = r.props, { id: c, zone: l, slot: u = "primary", title: a, icon: f, opens: p, solo: g, actions: b, children: P } = i;
-    t.push({ id: c, zone: l, slot: u, title: a, icon: f, opens: p, solo: g }), e.set(c, { content: P, actions: b });
+    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 });
   }
-  return { specs: t, content: e, centre: s, loose: o };
+  return { specs: t, content: e, centre: c, loose: o };
 }
-function zn({
+function Fn({
   header: n,
   footer: t,
   railHeader: e,
   labels: o,
-  theme: s,
-  className: r,
+  theme: c,
+  className: s,
+  components: r,
   children: i,
-  ...c
+  ...l
 }) {
-  return /* @__PURE__ */ d(Xn, { ...c, children: /* @__PURE__ */ d(
-    ft,
+  return /* @__PURE__ */ u(ot, { ...l, children: /* @__PURE__ */ u(
+    Pt,
     {
       header: n,
       footer: t,
       railHeader: e,
       labels: o,
-      theme: s,
-      className: r,
+      theme: c,
+      className: s,
+      components: r,
       children: i
     }
   ) });
 }
-function ft({
+function Pt({
   header: n,
   footer: t,
   railHeader: e,
   labels: o,
-  theme: s,
-  className: r,
+  theme: c,
+  className: s,
+  components: r,
   children: i
 }) {
-  const c = L(), l = j(null);
-  Kn(l);
-  const { specs: u, content: a, centre: f, loose: p } = w(() => dt(i), [i]), g = w(() => ({ ...ut, ...o }), [o]);
-  wn(() => {
-    const { register: P, unregister: h } = c.getState();
-    for (const _ of u) P(_);
-    const y = new Set(u.map((_) => _.id));
-    for (const _ of c.getState().registry)
-      y.has(_.id) || h(_.id);
-  }, [c, u]);
-  const b = Qn();
-  return /* @__PURE__ */ d(ot, { value: a, children: /* @__PURE__ */ m("div", { "data-pnl-theme": s, className: v("pnl-root", r), children: [
+  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: [
     n,
-    /* @__PURE__ */ m("div", { className: "pnl-middle", children: [
-      /* @__PURE__ */ d(un, { side: "left", header: e }),
-      /* @__PURE__ */ m("div", { ref: l, className: "pnl-columns", children: [
-        /* @__PURE__ */ d(x, { zone: "top", labels: g }),
-        /* @__PURE__ */ m("div", { className: "pnl-row", children: [
-          !b.left && /* @__PURE__ */ d(x, { zone: "left", labels: g }),
-          /* @__PURE__ */ m("div", { className: "pnl-stack", children: [
-            /* @__PURE__ */ m("div", { className: "pnl-row", children: [
-              b.left && /* @__PURE__ */ d(x, { zone: "left", labels: g }),
-              /* @__PURE__ */ d(_n, { className: "pnl-centre", children: f?.props.children }),
-              b.right && /* @__PURE__ */ d(x, { zone: "right", labels: g })
+    /* @__PURE__ */ g("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__ */ d(at, { left: b.left, right: b.right, labels: g })
+            /* @__PURE__ */ u(yt, { left: p.left, right: p.right, labels: y })
           ] }),
-          !b.right && /* @__PURE__ */ d(x, { zone: "right", labels: g })
+          !p.right && /* @__PURE__ */ u(N, { zone: "right", labels: y })
         ] })
       ] }),
-      /* @__PURE__ */ d(un, { side: "right" })
+      /* @__PURE__ */ u(wn, { side: "right" })
     ] }),
     t,
-    p
-  ] }) });
-}
-zn.Panel = nn;
-zn.Center = Q;
-function bt() {
-  const n = L(), t = T(), e = S((i) => i.focusedZone), o = O(), s = z(
-    (i) => {
-      const c = N(t.registry, i);
-      return c !== void 0 && Z(t, c.zone)[c.slot] === i;
+    I
+  ] }) }) });
+}
+Fn.Panel = ln;
+Fn.Center = cn;
+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;
     },
     [t]
-  ), r = z(
-    (i) => {
-      const c = N(t.registry, i);
-      !c || Z(t, c.zone)[c.slot] !== i || n.getState().close(c.zone, c.slot);
+  ), s = _(
+    (r) => {
+      const i = C(t.registry, r);
+      !i || L(t, i.zone)[i.slot] !== r || n.getState().close(i.zone, i.slot);
     },
     [t, n]
   );
@@ -865,71 +907,76 @@ function bt() {
     () => ({
       panels: t.registry,
       reveal: o.show,
-      close: r,
+      close: s,
       toggle: o.toggle,
-      isShown: s,
+      isShown: c,
       focusedZone: e,
       reset: o.reset
     }),
-    [t, o.show, o.toggle, o.reset, r, s, e]
+    [t, o.show, o.toggle, o.reset, s, c, e]
   );
 }
 export {
-  kn as BOTTOM_ZONES,
-  at as Band,
-  Q as Center,
-  ot as ContentProvider,
-  ut as DEFAULT_LABELS,
-  Bn as DEFAULT_SIZES,
-  xn as IconButton,
-  Sn as LAYOUT_VERSION,
-  gn as MIN_CENTER,
-  F as MIN_SIZE,
-  R as MIN_SPLIT,
-  nn as Panel,
-  an as PanelFrame,
-  st as PanelHeader,
-  zn as Panels,
-  Xn as PanelsProvider,
-  un as Rail,
-  dn as RailZone,
-  X as ResizeHandle,
-  $ as SLOTS,
-  q as Separator,
-  _n as Surface,
-  C as ZONES,
-  V as ZONES_BY_SIDE,
-  x as ZoneEdge,
-  Vn as browserStorage,
-  $n as createPanelsStore,
-  v as cx,
+  $n as BOTTOM_ZONES,
+  yt as Band,
+  cn 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,
+  bn as PanelFrame,
+  mt as PanelHeader,
+  Fn as Panels,
+  ot as PanelsProvider,
+  wn as Rail,
+  yn as RailZone,
+  Q as ResizeHandle,
+  Nn as SLOTS,
+  sn as Separator,
+  Tn as Surface,
+  U as ZONES,
+  G as ZONES_BY_SIDE,
+  N as ZoneEdge,
+  Qn as browserStorage,
+  qn as createPanelsStore,
+  b as cx,
   D as fitSplit,
-  yn as fitZoneSize,
-  U as isBottom,
-  E as isHorizontal,
-  on as isLeading,
-  mt as memoryStorage,
-  Gn as readLayout,
-  Dn as sharedSizes,
-  Z as shownIn,
-  A as sizeKeyOf,
-  N as specOf,
-  G as undraggedSizeOf,
+  xn as fitZoneSize,
+  rn as isBottom,
+  M as isHorizontal,
+  un as isLeading,
+  Ct as memoryStorage,
+  z 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,
-  Qn as useBandHalves,
-  Kn as useContainerFit,
-  rt as usePanelContent,
-  bt as usePanels,
-  O as usePanelsActions,
-  S as usePanelsState,
-  L as usePanelsStore,
-  nt as usePointerDrag,
-  J as useShownIn,
-  tt as useZone,
-  cn as useZoneDraws,
-  et as useZonePanels,
-  qn as useZoneTakesRoom,
-  Jn as writeLayout,
-  W as zoneDraws,
-  jn as zoneTakesRoom
+  ut as useBandHalves,
+  ct as useContainerFit,
+  gt as usePanelContent,
+  Zt as usePanels,
+  R as usePanelsActions,
+  On as usePanelsComponents,
+  v as usePanelsState,
+  O as usePanelsStore,
+  dt as usePointerDrag,
+  lt as useShownIn,
+  gn as useShownSpecsIn,
+  ft as useZone,
+  mn as useZoneDraws,
+  ht as useZonePanels,
+  at as useZoneTakesRoom,
+  et as writeLayout,
+  j as zoneDraws,
+  X as zoneTakesRoom
 };