@pasquelin/panels 0.1.0

package/dist/index.js

@@ -0,0 +1,935 @@
+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) => {
+  let t;
+  const e = /* @__PURE__ */ new Set(), o = (u, a) => {
+    const f = typeof u == "function" ? u(t) : u;
+    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));
+    }
+  }, 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(
+    n.subscribe,
+    k.useCallback(() => t(n.getState()), [n, t]),
+    k.useCallback(() => t(n.getInitialState()), [n, t])
+  );
+  return k.useDebugValue(e), e;
+}
+const C = ["left", "right", "top", "bottomLeft", "bottomRight"], $ = ["primary", "secondary"], kn = ["bottomLeft", "bottomRight"];
+function U(n) {
+  return n === "bottomLeft" || n === "bottomRight";
+}
+function E(n) {
+  return n === "top" || U(n);
+}
+const V = {
+  left: { column: ["left", "top"], band: "bottomLeft" },
+  right: { column: ["right"], band: "bottomRight" }
+};
+function on(n) {
+  return n === "left" || n === "top";
+}
+const F = 140, gn = 240, R = 100, Bn = {
+  left: 320,
+  right: 260,
+  top: 180,
+  bottomLeft: 240,
+  bottomRight: 240
+}, mn = "bottomRight";
+function A(n) {
+  return U(n) ? mn : n;
+}
+const M = {
+  left: "right",
+  right: "left",
+  // The band as a whole faces the top strip: either half of it takes the same height off.
+  top: mn,
+  bottomLeft: "top",
+  bottomRight: "top"
+};
+function bn(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 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 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))];
+}
+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);
+  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];
+  }
+  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) => ({
+    registry: [],
+    open: t?.open ?? {},
+    lengths: t?.lengths ?? rn,
+    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 };
+    }),
+    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 };
+    }),
+    show: (s) => e((r) => {
+      const i = N(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 };
+    }),
+    close: (s, r) => e((i) => {
+      const [c, l] = Yn(i, s, r), u = { ...i.open, [s]: c };
+      return {
+        open: u,
+        stashed: l,
+        focusedZone: !H(u, s) && 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);
+    },
+    focus: (s) => e((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 } } };
+    }),
+    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 } } };
+    }),
+    resplitBand: (s, r) => e((i) => {
+      const c = D(s, r);
+      return c === i.lengths.bandSplit ? i : { lengths: { ...i.lengths, bandSplit: c } };
+    }),
+    fit: (s, r) => e((i) => ({
+      available: { width: s, height: r },
+      lengths: An(
+        i.lengths,
+        i.open,
+        s,
+        r,
+        (c) => G(i.registry, c, Z(i, c).primary)
+      )
+    })),
+    reset: () => e((s) => ({
+      open: {},
+      lengths: rn,
+      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 n = /* @__PURE__ */ new Map();
+  return {
+    read: (t) => n.get(t) ?? null,
+    write: (t, e) => {
+      n.set(t, e);
+    }
+  };
+}, Vn = () => ({
+  read: (n) => {
+    try {
+      return globalThis.localStorage?.getItem(n) ?? null;
+    } catch {
+      return null;
+    }
+  },
+  write: (n, t) => {
+    try {
+      globalThis.localStorage?.setItem(n, t);
+    } catch {
+    }
+  }
+}), Sn = 1;
+function I(n) {
+  return typeof n == "object" && n !== null && !Array.isArray(n);
+}
+function Wn(n) {
+  const t = {};
+  for (const e of C) {
+    const o = n[e];
+    if (I(o))
+      for (const s of $) {
+        const r = o[s];
+        typeof r == "string" && (t[e] = { ...t[e], [s]: r });
+      }
+  }
+  return t;
+}
+function sn(n) {
+  const t = {};
+  for (const e of C) {
+    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;
+  try {
+    o = JSON.parse(e);
+  } 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;
+  return {
+    open: Wn(o.open),
+    lengths: {
+      sizes: sn(s.sizes),
+      splits: sn(s.splits),
+      bandSplit: typeof r == "number" && Number.isFinite(r) ? r : void 0
+    }
+  };
+}
+function Jn(n, t, e) {
+  const o = { version: Sn, ...e };
+  n.write(t, JSON.stringify(o));
+}
+const wn = typeof globalThis.document > "u" ? K : Mn, Nn = pn(null);
+function Xn({
+  store: n,
+  storageKey: t = "panels:layout",
+  storage: e,
+  defaultOpen: o,
+  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);
+  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 O() {
+  const n = L();
+  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 };
+  }, [n]);
+}
+function Kn(n) {
+  const t = L();
+  K(() => {
+    const e = n.current;
+    if (!e) return;
+    const o = () => {
+      const { clientWidth: r, clientHeight: i } = e;
+      r === 0 || i === 0 || t.getState().fit(r, i);
+    };
+    if (o(), typeof ResizeObserver > "u") return;
+    const s = new ResizeObserver(o);
+    return s.observe(e), () => s.disconnect();
+  }, [n, t]);
+}
+function T() {
+  const n = S((e) => e.registry), t = S((e) => e.open);
+  return w(() => ({ registry: n, open: t }), [n, t]);
+}
+function J(n) {
+  const t = T();
+  return w(() => Z(t, n), [t, n]);
+}
+function cn(n) {
+  const t = T();
+  return w(() => W(t, n), [t, n]);
+}
+function qn(n) {
+  const t = T();
+  return w(() => jn(t, n), [t, n]);
+}
+function Qn() {
+  return {
+    left: cn(V.left.band),
+    right: cn(V.right.band)
+  };
+}
+function nt() {
+  const n = j(null);
+  return w(() => ({
+    start: (e, o) => {
+      e.currentTarget.setPointerCapture(e.pointerId), n.current = { ...o, pointerId: e.pointerId };
+    },
+    matching: (e) => n.current?.pointerId === e.pointerId ? n.current : null,
+    cancel: () => {
+      n.current = null;
+    }
+  }), []);
+}
+function X({
+  axis: n,
+  invert: t = !1,
+  size: e,
+  onSize: o,
+  measure: s,
+  label: r,
+  min: i,
+  max: c,
+  step: l = 16,
+  className: u
+}) {
+  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);
+    },
+    [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);
+    },
+    [t, p, s, o, g, e, l]
+  );
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      ref: f,
+      role: "separator",
+      tabIndex: 0,
+      "aria-label": r,
+      "aria-orientation": p ? "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)
+        });
+      },
+      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)
+    }
+  );
+}
+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);
+  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
+    );
+    return {
+      primary: f,
+      secondary: p,
+      draws: g,
+      // 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
+    };
+  }, [
+    t,
+    e,
+    o,
+    s,
+    r,
+    i,
+    l,
+    c,
+    u,
+    n
+  ]);
+}
+function et(n) {
+  const t = S((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);
+}
+function st({
+  title: n,
+  children: t,
+  fillActions: e,
+  trailing: o,
+  className: s
+}) {
+  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 })
+  ] });
+}
+function q({ orientation: n = "vertical", className: t }) {
+  return /* @__PURE__ */ d(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: v("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 it({
+  panel: n,
+  length: t,
+  closeLabel: e,
+  onFocus: o
+}) {
+  const { close: s } = O(), r = rt(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,
+      {
+        "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,
+            {
+              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,
+                  {
+                    label: e,
+                    acts: !0,
+                    onClick: () => s(n.zone, n.slot),
+                    className: "pnl-icon-button--header",
+                    icon: /* @__PURE__ */ d(ct, {})
+                  }
+                )
+              ] }),
+              children: r?.actions
+            }
+          ),
+          /* @__PURE__ */ d("div", { className: v("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(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+    }
+  ) });
+}
+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,
+    [l]
+  );
+  if (!e.draws) return null;
+  const { primary: a, secondary: f, size: p, split: g } = e, b = /* @__PURE__ */ m(
+    "div",
+    {
+      ref: i,
+      className: v("pnl-zone", l ? "pnl-zone--row" : "pnl-zone--col"),
+      style: { [l ? "height" : "width"]: p },
+      children: [
+        a && /* @__PURE__ */ d(an, { panel: a, closeLabel: t.closePanel, onFocus: c }),
+        a && f && /* @__PURE__ */ d(
+          X,
+          {
+            axis: l ? "horizontal" : "vertical",
+            invert: !0,
+            size: g,
+            min: R,
+            label: t.resizeSplit,
+            onSize: (h, y) => r(n, h, y)
+          }
+        ),
+        f && /* @__PURE__ */ d(
+          an,
+          {
+            panel: f,
+            length: a && g !== void 0 ? g : void 0,
+            closeLabel: t.closePanel,
+            onFocus: c
+          }
+        )
+      ]
+    }
+  ), P = /* @__PURE__ */ d(
+    X,
+    {
+      axis: l ? "vertical" : "horizontal",
+      invert: !on(n),
+      size: p,
+      min: F,
+      measure: u,
+      label: t.resizeZone,
+      onSize: (h, y) => s(n, h, y)
+    }
+  );
+  return on(n) ? /* @__PURE__ */ m(B, { children: [
+    b,
+    P
+  ] }) : /* @__PURE__ */ m(B, { children: [
+    P,
+    b
+  ] });
+}
+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]
+  );
+  return !n && !t ? null : !n || !t ? /* @__PURE__ */ d(x, { zone: n ? "bottomLeft" : "bottomRight", labels: e }) : /* @__PURE__ */ m("div", { className: "pnl-band", children: [
+    /* @__PURE__ */ d(
+      "div",
+      {
+        className: v("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 })
+      }
+    ),
+    /* @__PURE__ */ d(
+      X,
+      {
+        axis: "horizontal",
+        size: o,
+        min: R,
+        label: e.resizeBand,
+        onSize: r
+      }
+    ),
+    /* @__PURE__ */ d("div", { className: "pnl-band__half pnl-band__half--rest", children: /* @__PURE__ */ d(x, { zone: "bottomRight", labels: e }) })
+  ] });
+}
+function Q(n) {
+  return null;
+}
+Q.displayName = "Panels.Center";
+const ut = {
+  closePanel: "Close panel",
+  resizeZone: "Resize panel area",
+  resizeSplit: "Resize the two panels",
+  resizeBand: "Resize the bottom panels"
+};
+function nn(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(
+    "div",
+    {
+      role: "toolbar",
+      "aria-orientation": "vertical",
+      className: v("pnl-rail", `pnl-rail--${n}`, e),
+      children: [
+        /* @__PURE__ */ m("div", { className: "pnl-rail__group", children: [
+          t !== void 0 && /* @__PURE__ */ m(B, { children: [
+            t,
+            /* @__PURE__ */ d(q, { orientation: "horizontal" })
+          ] }),
+          o.map((r) => /* @__PURE__ */ d(dn, { zone: r }, r))
+        ] }),
+        /* @__PURE__ */ d(dn, { zone: s })
+      ]
+    }
+  );
+}
+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,
+        {
+          icon: l.icon,
+          label: l.title,
+          active: u,
+          accented: u && o,
+          onClick: () => s(l.id),
+          className: "pnl-rail__button"
+        },
+        l.id
+      );
+    })
+  ] }, `${n}:${r}`)) });
+}
+function dt(n) {
+  const t = [], e = /* @__PURE__ */ new Map(), o = [];
+  let s = null;
+  for (const r of Cn.toArray(n)) {
+    if (!En(r)) {
+      o.push(r);
+      continue;
+    }
+    if (r.type === Q) {
+      s = r;
+      continue;
+    }
+    if (r.type !== nn) {
+      o.push(r);
+      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 });
+  }
+  return { specs: t, content: e, centre: s, loose: o };
+}
+function zn({
+  header: n,
+  footer: t,
+  railHeader: e,
+  labels: o,
+  theme: s,
+  className: r,
+  children: i,
+  ...c
+}) {
+  return /* @__PURE__ */ d(Xn, { ...c, children: /* @__PURE__ */ d(
+    ft,
+    {
+      header: n,
+      footer: t,
+      railHeader: e,
+      labels: o,
+      theme: s,
+      className: r,
+      children: i
+    }
+  ) });
+}
+function ft({
+  header: n,
+  footer: t,
+  railHeader: e,
+  labels: o,
+  theme: s,
+  className: 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: [
+    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__ */ d(at, { left: b.left, right: b.right, labels: g })
+          ] }),
+          !b.right && /* @__PURE__ */ d(x, { zone: "right", labels: g })
+        ] })
+      ] }),
+      /* @__PURE__ */ d(un, { 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;
+    },
+    [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);
+    },
+    [t, n]
+  );
+  return w(
+    () => ({
+      panels: t.registry,
+      reveal: o.show,
+      close: r,
+      toggle: o.toggle,
+      isShown: s,
+      focusedZone: e,
+      reset: o.reset
+    }),
+    [t, o.show, o.toggle, o.reset, r, s, 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,
+  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,
+  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
+};