@pasquelin/panels 0.3.0 → 0.3.2

package/CHANGELOG.md

@@ -5,6 +5,51 @@ All notable changes to `@pasquelin/panels`.
 The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project
 adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.3.2] — 2026-09-02
+
+### Fixed
+
+- **A declaration that says the same thing writes nothing.** A project builds its panel list in
+  its render, so the list arrives rebuilt whenever anything else in that component moves — and
+  `declare` wrote it through, notifying every rail, every zone and every frame for a list
+  identical to the one they already held. Measured in a real application: five rewrites for five
+  renders that had nothing to do with the panels. The specs are now compared field by field.
+
+## [0.3.1] — 2026-09-02
+
+### Fixed
+
+- **A zone's divider no longer jumps to 100 px on its first drag.** Until a split was stored, CSS
+  parted the zone in two and the handle had nothing to start from, so it started from zero and
+  the clamp floored the first pixel of the drag to `MIN_SPLIT` — a half of 390 px snapped to 100.
+  The handle now measures the half it moves. The band's divider had the same defect, and the same
+  cure.
+- **A column is bounded against the columns box, not against the row the band left it in.** With
+  one half of the band drawing, the opposite column runs to the foot and this one sits in an
+  inner row that already lacks that column — and `resize` took it off a second time. The right
+  column stopped at 418 px with the centre still 554 wide; it now reaches 744, the centre at its
+  floor.
+- **`fit` writes nothing when nothing had to move.** It rebuilt `lengths` on every frame of a
+  window resize, and the persistence subscriber — which compares by reference — re-serialised
+  the whole layout for each of them.
+- **A right click, or a second finger, no longer starts a drag.** The handle captured any
+  pointer; it now takes the main button of the primary pointer and nothing else.
+- **The handles keep the gesture on touch.** `touch-action: none` and `user-select: none`, so a
+  finger on a handle resizes the zone rather than scrolling the page, and a mouse leaving the
+  handle mid-drag selects no title on its way.
+- **`<DockviewCenter>` reads `onLayout` when a change lands, not when Dockview became ready.**
+  `onReady` fires once, and the callback it captured was the first render's.
+
+### Changed
+
+- **The layout is written at most every 250 ms, and flushed on unmount and `pagehide`.** A drag
+  wrote to `localStorage` on every `pointermove` — sixty synchronous serialisations a second, on
+  the thread that draws the drag. A project reading the storage right after an action may find
+  it not written yet; unmounting the chassis, or the page being hidden, writes what is pending.
+- **`useZone` subscribes once to the arrangement rather than three times.** Fourteen selectors
+  per zone, rerun on every write to the store, are now eight.
+- **`<PanelFrame>` takes a `ref`, which reaches its surface.**
+
 ## [0.3.0] — 2026-09-01
 
 ### Added
@@ -175,6 +220,7 @@ First release.
 - Optional `@pasquelin/panels/dockview` entry point for document tabs.
 - No runtime dependencies.
 
+[0.3.1]: https://github.com/pasquelin/panels/releases/tag/v0.3.1
 [0.3.0]: https://github.com/pasquelin/panels/releases/tag/v0.3.0
 [0.2.0]: https://github.com/pasquelin/panels/releases/tag/v0.2.0
 [0.1.1]: https://github.com/pasquelin/panels/releases/tag/v0.1.1

package/dist/components/PanelFrame.d.ts

@@ -1,3 +1,4 @@
+import { type Ref } from 'react';
 import { type PanelSpec } from '../core/types';
 export type PanelFrameProps<Id extends string> = {
     panel: PanelSpec<Id>;
@@ -6,6 +7,8 @@ export type PanelFrameProps<Id extends string> = {
     /** Text of the close button, already translated. */
     closeLabel: string;
     onFocus: () => void;
+    /** The surface itself, for a parent that has to measure this half. */
+    ref?: Ref<HTMLElement>;
 };
 /**
  * One panel on screen: its surface, its title row, its content.
@@ -13,7 +16,7 @@ export type PanelFrameProps<Id extends string> = {
  * Closing is the only way out, on purpose. A collapsed panel is a third state between open and
  * closed that looks like neither, and the rail already reopens a panel in one click.
  */
-declare function PanelFrameInner<Id extends string>({ panel, length, closeLabel, onFocus, }: PanelFrameProps<Id>): import("react").JSX.Element;
+declare function PanelFrameInner<Id extends string>({ panel, length, closeLabel, onFocus, ref, }: PanelFrameProps<Id>): import("react").JSX.Element;
 /**
  * Memoised: a zone drag writes a new size on every `pointermove`, and without this each frame
  * re-renders both halves and everything the project put in them. `onFocus` must stay stable for

package/dist/components/Rail.d.ts

@@ -1,9 +1,10 @@
+import { type ReactNode } from 'react';
 import { type Side, type Zone } from '../core/types';
 export type RailProps = {
     /** Edge the rail sticks to. Each rail also carries the band's half on its own side. */
     side: Side;
     /** Rendered above the panel icons — a "new" button, a logo, anything the project pins there. */
-    header?: React.ReactNode;
+    header?: ReactNode;
     className?: string;
 };
 /**

package/dist/components/Surface.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'react';
+import type { ComponentProps } from 'react';
 /**
  * The rounded box a panel is drawn on, laid over the chassis gutter.
  *
@@ -6,4 +6,4 @@ import type { HTMLAttributes } from 'react';
  * "panels on a frame" rather than as a web page. A project that inverts it back only has to
  * repaint two tokens.
  */
-export declare function Surface({ children, className, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+export declare function Surface({ children, className, ...rest }: ComponentProps<'section'>): import("react").JSX.Element;

package/dist/dockview.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),p=require("dockview-react"),o=require("react"),f=require("./cx-YyuC5RtB.cjs");function k({documents:n,layout:c,onLayout:e,onReady:i,empty:s,className:a}){const t=o.useRef(!1),u=o.useCallback(r=>{if(c!==void 0&&!t.current){t.current=!0;try{r.api.fromJSON(c)}catch{e?.(void 0)}}i?.(r.api),e&&r.api.onDidLayoutChange(()=>e(r.api.toJSON()))},[c,e,i]);return d.jsx(p.DockviewReact,{className:f.cx("pnl-dockview",a),components:n,watermarkComponent:s,onReady:u})}exports.DockviewCenter=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),p=require("dockview-react"),c=require("react"),k=require("./cx-YyuC5RtB.cjs");function l({documents:o,layout:t,onLayout:e,onReady:i,empty:a,className:u}){const n=c.useRef(!1),s=c.useRef(e);c.useEffect(()=>{s.current=e},[e]);const d=c.useCallback(r=>{if(t!==void 0&&!n.current){n.current=!0;try{r.api.fromJSON(t)}catch{e?.(void 0)}}i?.(r.api),r.api.onDidLayoutChange(()=>s.current?.(r.api.toJSON()))},[t,e,i]);return f.jsx(p.DockviewReact,{className:k.cx("pnl-dockview",u),components:o,watermarkComponent:a,onReady:d})}exports.DockviewCenter=l;

package/dist/dockview.js

@@ -1,39 +1,43 @@
-import { jsx as s } from "react/jsx-runtime";
-import { DockviewReact as f } from "dockview-react";
-import { useRef as n, useCallback as d } from "react";
-import { c as k } from "./cx-CcykAxZN.js";
-function x({
-  documents: t,
-  layout: e,
+import { jsx as f } from "react/jsx-runtime";
+import { DockviewReact as d } from "dockview-react";
+import { useRef as a, useEffect as u, useCallback as k } from "react";
+import { c as C } from "./cx-CcykAxZN.js";
+function D({
+  documents: m,
+  layout: c,
   onLayout: r,
-  onReady: i,
-  empty: m,
-  className: a
+  onReady: o,
+  empty: s,
+  className: n
 }) {
-  const c = n(!1), p = d(
-    (o) => {
-      if (e !== void 0 && !c.current) {
-        c.current = !0;
+  const t = a(!1), i = a(r);
+  u(() => {
+    i.current = r;
+  }, [r]);
+  const p = k(
+    (e) => {
+      if (c !== void 0 && !t.current) {
+        t.current = !0;
         try {
-          o.api.fromJSON(e);
+          e.api.fromJSON(c);
         } catch {
           r?.(void 0);
         }
       }
-      i?.(o.api), r && o.api.onDidLayoutChange(() => r(o.api.toJSON()));
+      o?.(e.api), e.api.onDidLayoutChange(() => i.current?.(e.api.toJSON()));
     },
-    [e, r, i]
+    [c, r, o]
   );
-  return /* @__PURE__ */ s(
-    f,
+  return /* @__PURE__ */ f(
+    d,
     {
-      className: k("pnl-dockview", a),
-      components: t,
-      watermarkComponent: m,
+      className: C("pnl-dockview", n),
+      components: m,
+      watermarkComponent: s,
       onReady: p
     }
   );
 }
 export {
-  x as DockviewCenter
+  D as DockviewCenter
 };

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),d=require("react"),b=require("./cx-YyuC5RtB.cjs"),fe=e=>{let n;const t=new Set,s=(a,f)=>{const h=typeof a=="function"?a(n):a;if(!Object.is(h,n)){const p=n;n=f??(typeof h!="object"||h===null)?h:Object.assign({},n,h),t.forEach(g=>g(n,p))}},c=()=>n,i={setState:s,getState:c,getInitialState:()=>l,subscribe:a=>(t.add(a),()=>t.delete(a))},l=n=e(s,c,i);return i},Ge=(e=>e?fe(e):fe),Je=e=>e;function Ke(e,n=Je){const t=d.useSyncExternalStore(e.subscribe,d.useCallback(()=>n(e.getState()),[e,n]),d.useCallback(()=>n(e.getInitialState()),[e,n]));return d.useDebugValue(t),t}const k=["left","right","top","bottomLeft","bottomRight"],re=["primary","secondary"],U="default",be=["bottomLeft","bottomRight"];function V(e){return e==="bottomLeft"||e==="bottomRight"}function C(e){return e==="top"||V(e)}const A={left:{column:["left","top"],band:"bottomLeft"},right:{column:["right"],band:"bottomRight"}};function K(e){return e==="left"||e==="top"}const R=140,ie=240,_=100,xe={left:320,right:260,top:180,bottomLeft:240,bottomRight:240},we="bottomRight";function z(e){return V(e)?we:e}const N={left:"right",right:"left",top:we,bottomLeft:"top",bottomRight:"top"};function Se(e,n,t){return Math.min(Math.max(e,n),t)}function ce(e,n,t){const s=Math.max(R,Math.round(n-t-ie));return Se(Math.round(e),R,s)}function T(e,n){const t=Math.max(_,Math.round(n-_));return Se(Math.round(e),_,t)}function ye(e,n,t,s){return t(n)?e.sizes[z(n)]??s(n):0}function Xe(e,n,t,s,c){const r={...e.sizes},o={...e.splits};for(const l of k){const a=r[l];if(a!==void 0){const h=C(l)?t:n,p=ye(e,N[l],s,c);r[l]=ce(a,h,p)}const f=o[l];f!==void 0&&(o[l]=T(f,C(l)?n:t))}const i=e.bandSplit===void 0?void 0:T(e.bandSplit,n);return{sizes:r,splits:o,bandSplit:i}}function je(e,n,t){const s=t-ie,c=e+n;if(c<=s)return[e,n];const r=a=>a===0?0:R,o=r(e)+r(n);if(s<=o)return[Math.min(e,r(e)),Math.min(n,r(n))];const i=s/c,l=Math.max(r(e),Math.round(e*i));return[l,Math.max(r(n),Math.round(s-l))]}function E(e){return e.views[e.view]??{}}function J(e,n){const t={...n??{}};for(const s of k)for(const c of re)t[s]?.[c]===void 0&&Pe(e,s,c)!==void 0&&(t[s]={...t[s],[c]:null});return t}function X(e,n){return Object.hasOwn(e.views,n)}function Pe(e,n,t){return e.find(s=>s.zone===n&&s.slot===t)}function j(e,n){return n==null?void 0:e.find(t=>t.id===n)}function he(e,n,t){const s=E(e)[n];if(!s||!(t in s))return;const c=j(e.registry,s[t]);return c?.zone===n&&c.slot===t?c:Pe(e.registry,n,t)}function I(e,n){const t=he(e,n,"primary");return t?.solo===!0?{primary:t}:{primary:t,secondary:he(e,n,"secondary")}}function M(e,n){const{primary:t,secondary:s}=I(e,n);return{primary:t?.id,secondary:s?.id}}function B(e,n){return V(n)?be.some(t=>F(e,t)):F(e,n)}function F(e,n){const t=M(e,n);return t.primary!==void 0||t.secondary!==void 0}function D(e,n){return Math.max(xe[e],n?.opens??0)}function Qe(e,n,t,s){const{slot:c,id:r}=t,o=E(e)[n]??{},i={...e.stashed};if(t.solo===!0&&c==="primary")return i[n]=o,[{[c]:r},i];if(s?.solo!==!0)return[{...o,[c]:r},e.stashed];const l=i[n];if(delete i[n],l)return[{...l,[c]:r},i];const a={...o,[c]:r};return c!==s.slot&&delete a[s.slot],[a,i]}function en(e,n,t){const s=E(e)[n]??{},c=s[t],r=e.stashed[n];if(r&&c!==void 0&&j(e.registry,c)?.solo===!0){const i={...e.stashed};return delete i[n],[r,i]}const o={...s};return delete o[t],[o,e.stashed]}const pe={sizes:{},splits:{}};function Ne(e={}){const n=e.initial,t=(s,c)=>({...s.views,[s.view]:c});return Ge()((s,c)=>({registry:[],view:e.view??U,views:n?.views??{},lengths:n?.lengths??pe,focusedZone:null,stashed:{},available:{width:0,height:0},declare:r=>s({registry:r}),settle:r=>s(o=>{const i=r??o.defaults;return X(o,o.view)?i===o.defaults?o:{defaults:i}:{views:t(o,J(o.registry,i)),defaults:i}}),setView:r=>s(o=>o.view===r?o:{view:r,views:X(o,r)?o.views:{...o.views,[r]:J(o.registry,o.defaults)},focusedZone:null,stashed:{}}),show:r=>s(o=>{const i=j(o.registry,r);if(!i)return o;const{zone:l}=i,a=I(o,l);if(a[i.slot]?.id===r)return{focusedZone:l};const[f,h]=Qe(o,l,i,a.primary);return{views:t(o,{...E(o),[l]:f}),stashed:h,focusedZone:l}}),close:(r,o)=>s(i=>{const[l,a]=en(i,r,o),f=t(i,{...E(i),[r]:l}),h=F({registry:i.registry,view:i.view,views:f},r);return{views:f,stashed:a,focusedZone:!h&&i.focusedZone===r?null:i.focusedZone}}),toggle:r=>{const o=c(),i=j(o.registry,r);i&&(M(o,i.zone)[i.slot]===r?o.close(i.zone,i.slot):o.show(r))},focus:r=>s(o=>o.focusedZone===r?o:{focusedZone:r}),resize:(r,o,i)=>s(l=>{const a=ye(l.lengths,N[r],p=>B(l,p),p=>D(p,I(l,p).primary)),f=ce(o,i,a),h=z(r);return f===l.lengths.sizes[h]?l:{lengths:{...l.lengths,sizes:{...l.lengths.sizes,[h]:f}}}}),resplit:(r,o,i)=>s(l=>{const a=T(o,i);return a===l.lengths.splits[r]?l:{lengths:{...l.lengths,splits:{...l.lengths.splits,[r]:a}}}}),resplitBand:(r,o)=>s(i=>{const l=T(r,o);return l===i.lengths.bandSplit?i:{lengths:{...i.lengths,bandSplit:l}}}),fit:(r,o)=>s(i=>({available:{width:r,height:o},lengths:Xe(i.lengths,r,o,l=>B(i,l),l=>D(l,I(i,l).primary))})),reset:()=>s(r=>({views:r.registry.length===0?{}:{[r.view]:J(r.registry,r.defaults)},lengths:pe,focusedZone:null,stashed:{},registry:r.registry}))}))}const nn=()=>{const e=new Map;return{read:n=>e.get(n)??null,write:(n,t)=>{e.set(n,t)}}},_e=()=>({read:e=>{try{return globalThis.localStorage?.getItem(e)??null}catch{return null}},write:(e,n)=>{try{globalThis.localStorage?.setItem(e,n)}catch{}}}),le=2;function y(e){return typeof e=="object"&&e!==null&&!Array.isArray(e)}function me(e){const n={};for(const t of k){const s=e[t];if(y(s))for(const c of re){const r=s[c];r!==null&&typeof r!="string"||(n[t]={...n[t],[c]:r})}}return n}function ge(e){const n={};for(const t of k){const s=e[t];typeof s=="number"&&Number.isFinite(s)&&(n[t]=s)}return n}function tn(e,n){if(e.version===1)return y(e.open)?{[n]:me(e.open)}:void 0;if(e.version!==le||!y(e.views))return;const t=Object.create(null);for(const[s,c]of Object.entries(e.views))y(c)&&(t[s]=me(c));return t}function Ie(e,n,t=U){const s=e.read(n);if(s===null)return;let c;try{c=JSON.parse(s)}catch{return}if(!y(c)||!y(c.lengths))return;const r=tn(c,t);if(!r)return;const o=c.lengths;if(!y(o.sizes)||!y(o.splits))return;const i=o.bandSplit;return{views:r,lengths:{sizes:ge(o.sizes),splits:ge(o.splits),bandSplit:typeof i=="number"&&Number.isFinite(i)?i:void 0}}}function Ce(e,n,t){const s={version:le,views:t.views,lengths:t.lengths};e.write(n,JSON.stringify(s))}const Ee=typeof globalThis.document>"u"?d.useEffect:d.useLayoutEffect,Me=d.createContext(null);function Ze({store:e,storageKey:n="panels:layout",storage:t,defaultOpen:s,view:c,children:r}){const[o]=d.useState(()=>t===null?null:t??_e()),[i]=d.useState(()=>{const l=c??U,a=o?Ie(o,n,l):void 0;return e?(a&&e.setState(a),e):Ne({view:l,initial:a})});return Ee(()=>{const l=i.getState();c!==void 0&&l.setView(c),l.settle(s)}),d.useEffect(()=>{if(!o)return;let l;return i.subscribe(a=>{X(a,a.view)&&(l?.views===a.views&&l.lengths===a.lengths||(l={views:a.views,lengths:a.lengths},Ce(o,n,a)))})},[o,i,n]),u.jsx(Me.Provider,{value:i,children:r})}function Z(){const e=d.useContext(Me);if(!e)throw new Error("usePanelsStore must be used inside a <Panels> or <PanelsProvider>");return e}function v(e){const n=Z();return Ke(n,e)}function O(){const e=Z();return d.useMemo(()=>{const{show:n,close:t,toggle:s,focus:c,resize:r,resplit:o,resplitBand:i,fit:l,reset:a}=e.getState();return{show:n,close:t,toggle:s,focus:c,resize:r,resplit:o,resplitBand:i,fit:l,reset:a}},[e])}function Oe({icon:e,label:n,active:t,accented:s,acts:c,className:r,children:o,ref:i,...l}){return u.jsxs("button",{type:"button",ref:i,"aria-label":n,"aria-pressed":c?void 0:t,className:b.cx("pnl-icon-button",t&&"pnl-icon-button--active",s&&"pnl-icon-button--accented",r),...l,children:[e!==void 0&&u.jsx("span",{className:"pnl-icon-button__glyph",children:e}),o]})}const Q={IconButton:Oe},Le=d.createContext(Q),sn=Le.Provider;function ae(){return d.useContext(Le)}function on(e){return e===void 0?Q:{...Q,...e}}function Re(e){const n=Z();d.useEffect(()=>{const t=e.current;if(!t)return;const s=()=>{const{clientWidth:r,clientHeight:o}=t;r===0||o===0||n.getState().fit(r,o)};if(s(),typeof ResizeObserver>"u")return;const c=new ResizeObserver(s);return c.observe(t),()=>c.disconnect()},[e,n])}function L(){const e=v(s=>s.registry),n=v(s=>s.view),t=v(s=>s.views[s.view]);return d.useMemo(()=>({registry:e,view:n,views:t===void 0?{}:{[n]:t}}),[e,n,t])}function ze(e){const n=L();return d.useMemo(()=>M(n,e),[n,e])}function ee(e){const n=L();return d.useMemo(()=>I(n,e),[n,e])}function ne(e){const n=L();return d.useMemo(()=>F(n,e),[n,e])}function Te(e){const n=L();return d.useMemo(()=>B(n,e),[n,e])}function Fe(){return{left:ne(A.left.band),right:ne(A.right.band)}}function ke(){const e=d.useRef(null);return d.useMemo(()=>({start:(t,s)=>{t.currentTarget.setPointerCapture(t.pointerId),e.current={...s,pointerId:t.pointerId}},matching:t=>e.current?.pointerId===t.pointerId?e.current:null,cancel:()=>{e.current=null}}),[])}function H({axis:e,invert:n=!1,size:t,onSize:s,measure:c,label:r,min:o,max:i,step:l=16,className:a}){const f=ke(),h=d.useRef(null),p=e==="vertical",g=d.useCallback(m=>(p?m?.clientHeight:m?.clientWidth)??0,[p]),P=d.useCallback(m=>{const w=f.matching(m);if(!w)return;const G=(p?m.clientY:m.clientX)-w.position;s(w.size+G*(n?-1:1),w.available)},[f,n,p,s]),x=d.useCallback(m=>{const w=p?"ArrowUp":"ArrowLeft",q=p?"ArrowDown":"ArrowRight";if(m.key!==w&&m.key!==q)return;const G=g(h.current?.parentElement),$e=t??c?.()??0,qe=m.key===q?1:-1;m.preventDefault(),s($e+l*qe*(n?-1:1),G)},[n,p,c,s,g,t,l]);return u.jsx("div",{ref:h,role:"separator",tabIndex:0,"aria-label":r,"aria-orientation":p?"horizontal":"vertical","aria-valuenow":t===void 0?void 0:Math.round(t),"aria-valuemin":o,"aria-valuemax":i,onPointerDown:m=>{f.start(m,{position:p?m.clientY:m.clientX,size:t??c?.()??0,available:g(m.currentTarget.parentElement)})},onPointerMove:P,onPointerUp:f.cancel,onPointerCancel:f.cancel,onLostPointerCapture:f.cancel,onKeyDown:x,className:b.cx("pnl-handle",p?"pnl-handle--row":"pnl-handle--col",a)})}function ve(e,n,t,s){return s?n??D(t,e):0}function Ae(e){const n=ee(e),t=ee(N[e]),s=Te(N[e]),c=v(a=>a.lengths.sizes[z(e)]),r=v(a=>a.lengths.sizes[z(N[e])]),o=v(a=>a.lengths.splits[e]),i=v(a=>C(e)?a.available.height:a.available.width),l=v(a=>a.focusedZone===e);return d.useMemo(()=>{const{primary:a,secondary:f}=n,h=a!==void 0||f!==void 0,p=ve(a,c,e,h),g=ve(t.primary,r,N[e],s);return{primary:a,secondary:f,draws:h,size:i===0?p:je(p,g,i)[0],split:o,focused:l}},[n,t,s,c,r,i,o,l,e])}function Be(e){const n=v(t=>t.registry);return d.useMemo(()=>[["primary",n.filter(s=>s.zone===e&&s.slot==="primary")],["secondary",n.filter(s=>s.zone===e&&s.slot==="secondary")]].filter(([,s])=>s.length>0),[n,e])}const De=d.createContext(new Map),He=De.Provider;function Ue(e){return d.useContext(De).get(e)}function Ve({title:e,children:n,fillActions:t,trailing:s,className:c}){return u.jsxs("header",{className:b.cx("pnl-header",c),children:[u.jsx("span",{className:b.cx("pnl-header__title",t&&"pnl-header__title--fixed"),children:e}),u.jsx("span",{className:b.cx("pnl-header__actions",t&&"pnl-header__actions--fill"),children:n}),u.jsx("span",{className:"pnl-header__trailing",children:s})]})}function Y({orientation:e="vertical",className:n}){return u.jsx("span",{"aria-hidden":"true",className:b.cx("pnl-separator",`pnl-separator--${e}`,n)})}function ue({children:e,className:n,...t}){return u.jsx("section",{className:b.cx("pnl-surface",n),...t,children:e})}function rn({panel:e,length:n,closeLabel:t,onFocus:s}){const{close:c}=O(),{IconButton:r}=ae(),o=Ue(e.id);return u.jsxs(ue,{"aria-label":e.title,onPointerDownCapture:s,className:n===void 0?"pnl-surface--fill":"pnl-surface--give",style:n===void 0?void 0:{flexBasis:n},children:[u.jsx(Ve,{title:e.title,fillActions:e.fillActions??(o?.actions!==void 0&&C(e.zone)),trailing:u.jsxs(u.Fragment,{children:[o?.actions!==void 0&&u.jsx(Y,{}),u.jsx(r,{label:t,acts:!0,onClick:()=>c(e.zone,e.slot),className:"pnl-icon-button--header",icon:u.jsx(cn,{})})]}),children:o?.actions}),u.jsx("div",{className:b.cx("pnl-body"),children:o?.content})]})}const te=d.memo(rn);function cn(){return u.jsx("svg",{viewBox:"0 0 24 24",width:"14",height:"14","aria-hidden":"true",focusable:"false",children:u.jsx("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 ln({zone:e,labels:n}){const t=Ae(e),{focus:s,resize:c,resplit:r}=O(),o=d.useRef(null),i=d.useCallback(()=>s(e),[s,e]),l=C(e),a=d.useCallback(()=>l?o.current?.clientHeight??0:o.current?.clientWidth??0,[l]);if(!t.draws)return null;const{primary:f,secondary:h,size:p,split:g}=t,P=u.jsxs("div",{ref:o,className:b.cx("pnl-zone",l?"pnl-zone--row":"pnl-zone--col"),style:{[l?"height":"width"]:p},children:[f&&u.jsx(te,{panel:f,closeLabel:n.closePanel,onFocus:i}),f&&h&&u.jsx(H,{axis:l?"horizontal":"vertical",invert:!0,size:g,min:_,label:n.resizeSplit,onSize:(m,w)=>r(e,m,w)}),h&&u.jsx(te,{panel:h,length:f&&g!==void 0?g:void 0,closeLabel:n.closePanel,onFocus:i})]}),x=u.jsx(H,{axis:l?"vertical":"horizontal",invert:!K(e),size:p,min:R,measure:a,label:n.resizeZone,onSize:(m,w)=>c(e,m,w)});return K(e)?u.jsxs(u.Fragment,{children:[P,x]}):u.jsxs(u.Fragment,{children:[x,P]})}const S=d.memo(ln);function Ye({left:e,right:n,labels:t}){const s=v(o=>o.lengths.bandSplit),{resplitBand:c}=O(),r=d.useCallback((o,i)=>c(o,i),[c]);return!e&&!n?null:!e||!n?u.jsx(S,{zone:e?"bottomLeft":"bottomRight",labels:t}):u.jsxs("div",{className:"pnl-band",children:[u.jsx("div",{className:b.cx("pnl-band__half",s===void 0&&"pnl-band__half--even"),style:s===void 0?void 0:{width:s},children:u.jsx(S,{zone:"bottomLeft",labels:t})}),u.jsx(H,{axis:"horizontal",size:s,min:_,label:t.resizeBand,onSize:r}),u.jsx("div",{className:"pnl-band__half pnl-band__half--rest",children:u.jsx(S,{zone:"bottomRight",labels:t})})]})}function W(e){return null}W.displayName="Panels.Center";const We={closePanel:"Close panel",resizeZone:"Resize panel area",resizeSplit:"Resize the two panels",resizeBand:"Resize the bottom panels"};function $(e){return null}$.displayName="Panels.Panel";function se({side:e,header:n,className:t}){const{column:s,band:c}=A[e];return u.jsxs("div",{role:"toolbar","aria-orientation":"vertical",className:b.cx("pnl-rail",`pnl-rail--${e}`,t),children:[u.jsxs("div",{className:"pnl-rail__group",children:[n!==void 0&&u.jsxs(u.Fragment,{children:[n,u.jsx(Y,{orientation:"horizontal"})]}),s.map(r=>u.jsx(oe,{zone:r},r))]}),u.jsx(oe,{zone:c})]})}function oe({zone:e}){const n=Be(e),t=ze(e),s=v(o=>o.focusedZone===e),{toggle:c}=O(),{IconButton:r}=ae();return n.length===0?null:u.jsx("div",{className:"pnl-rail__group",children:n.map(([o,i],l)=>u.jsxs(d.Fragment,{children:[l>0&&u.jsx(Y,{orientation:"horizontal"}),i.map(a=>{const f=t[o]===a.id;return u.jsx(r,{icon:a.icon,label:a.title,active:f,accented:f&&s,onClick:()=>c(a.id),className:"pnl-rail__button"},a.id)})]},`${e}:${o}`))})}function an(e){const n=[],t=new Map,s=[];let c=null;for(const r of d.Children.toArray(e)){if(!d.isValidElement(r)){s.push(r);continue}if(r.type===W){c=r;continue}if(r.type!==$){s.push(r);continue}const o=r.props,{actions:i,children:l,slot:a="primary",...f}=o;n.push({...f,slot:a}),t.set(f.id,{content:l,actions:i})}return{specs:n,content:t,centre:c,loose:s}}function de({header:e,footer:n,railHeader:t,labels:s,theme:c,className:r,components:o,children:i,...l}){return u.jsx(Ze,{...l,children:u.jsx(un,{header:e,footer:n,railHeader:t,labels:s,theme:c,className:r,components:o,children:i})})}function un({header:e,footer:n,railHeader:t,labels:s,theme:c,className:r,components:o,children:i}){const l=Z(),a=d.useRef(null);Re(a);const[f]=d.useState(()=>on(o)),{specs:h,content:p,centre:g,loose:P}=d.useMemo(()=>an(i),[i]),x=d.useMemo(()=>({...We,...s}),[s]);Ee(()=>{l.getState().declare(h)},[l,h]);const m=Fe();return u.jsx(sn,{value:f,children:u.jsx(He,{value:p,children:u.jsxs("div",{"data-pnl-theme":c,className:b.cx("pnl-root",r),children:[e,u.jsxs("div",{className:"pnl-middle",children:[u.jsx(se,{side:"left",header:t}),u.jsxs("div",{ref:a,className:"pnl-columns",children:[u.jsx(S,{zone:"top",labels:x}),u.jsxs("div",{className:"pnl-row",children:[!m.left&&u.jsx(S,{zone:"left",labels:x}),u.jsxs("div",{className:"pnl-stack",children:[u.jsxs("div",{className:"pnl-row",children:[m.left&&u.jsx(S,{zone:"left",labels:x}),u.jsx(ue,{className:"pnl-centre",children:g?.props.children}),m.right&&u.jsx(S,{zone:"right",labels:x})]}),u.jsx(Ye,{left:m.left,right:m.right,labels:x})]}),!m.right&&u.jsx(S,{zone:"right",labels:x})]})]}),u.jsx(se,{side:"right"})]}),n,P]})})})}de.Panel=$;de.Center=W;function dn(){const e=Z(),n=L(),t=v(o=>o.focusedZone),s=O(),c=d.useCallback(o=>{const i=j(n.registry,o);return i!==void 0&&M(n,i.zone)[i.slot]===o},[n]),r=d.useCallback(o=>{const i=j(n.registry,o);!i||M(n,i.zone)[i.slot]!==o||e.getState().close(i.zone,i.slot)},[n,e]);return d.useMemo(()=>({panels:n.registry,reveal:s.show,close:r,toggle:s.toggle,isShown:c,focusedZone:t,reset:s.reset}),[n,s.show,s.toggle,s.reset,r,c,t])}exports.cx=b.cx;exports.BOTTOM_ZONES=be;exports.Band=Ye;exports.Center=W;exports.ContentProvider=He;exports.DEFAULT_LABELS=We;exports.DEFAULT_SIZES=xe;exports.DEFAULT_VIEW=U;exports.IconButton=Oe;exports.LAYOUT_VERSION=le;exports.MIN_CENTER=ie;exports.MIN_SIZE=R;exports.MIN_SPLIT=_;exports.Panel=$;exports.PanelFrame=te;exports.PanelHeader=Ve;exports.Panels=de;exports.PanelsProvider=Ze;exports.Rail=se;exports.RailZone=oe;exports.ResizeHandle=H;exports.SLOTS=re;exports.Separator=Y;exports.Surface=ue;exports.ZONES=k;exports.ZONES_BY_SIDE=A;exports.ZoneEdge=S;exports.browserStorage=_e;exports.createPanelsStore=Ne;exports.fitSplit=T;exports.fitZoneSize=ce;exports.isBottom=V;exports.isHorizontal=C;exports.isLeading=K;exports.memoryStorage=nn;exports.openOf=E;exports.readLayout=Ie;exports.sharedSizes=je;exports.shownIn=M;exports.shownSpecsIn=I;exports.sizeKeyOf=z;exports.specOf=j;exports.undraggedSizeOf=D;exports.useArrangement=L;exports.useBandHalves=Fe;exports.useContainerFit=Re;exports.usePanelContent=Ue;exports.usePanels=dn;exports.usePanelsActions=O;exports.usePanelsComponents=ae;exports.usePanelsState=v;exports.usePanelsStore=Z;exports.usePointerDrag=ke;exports.useShownIn=ze;exports.useShownSpecsIn=ee;exports.useZone=Ae;exports.useZoneDraws=ne;exports.useZonePanels=Be;exports.useZoneTakesRoom=Te;exports.writeLayout=Ce;exports.zoneDraws=F;exports.zoneTakesRoom=B;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),d=require("react"),b=require("./cx-YyuC5RtB.cjs"),fe=e=>{let n;const t=new Set,s=(u,f)=>{const h=typeof u=="function"?u(n):u;if(!Object.is(h,n)){const m=n;n=f??(typeof h!="object"||h===null)?h:Object.assign({},n,h),t.forEach(g=>g(n,m))}},c=()=>n,o={setState:s,getState:c,getInitialState:()=>l,subscribe:u=>(t.add(u),()=>t.delete(u))},l=n=e(s,c,o);return o},$e=(e=>e?fe(e):fe),qe=e=>e;function Ge(e,n=qe){const t=d.useSyncExternalStore(e.subscribe,d.useCallback(()=>n(e.getState()),[e,n]),d.useCallback(()=>n(e.getInitialState()),[e,n]));return d.useDebugValue(t),t}const O=["left","right","top","bottomLeft","bottomRight"],re=["primary","secondary"],Y="default",be=["bottomLeft","bottomRight"];function $(e){return e==="bottomLeft"||e==="bottomRight"}function L(e){return e==="top"||$(e)}const U={left:{column:["left","top"],band:"bottomLeft"},right:{column:["right"],band:"bottomRight"}};function X(e){return e==="left"||e==="top"}const A=140,ie=240,M=100,xe={left:320,right:260,top:180,bottomLeft:240,bottomRight:240},Se="bottomRight";function F(e){return $(e)?Se:e}const I={left:"right",right:"left",top:Se,bottomLeft:"top",bottomRight:"top"};function we(e,n,t){return Math.min(Math.max(e,n),t)}function ce(e,n,t){const s=Math.max(A,Math.round(n-t-ie));return we(Math.round(e),A,s)}function B(e,n){const t=Math.max(M,Math.round(n-M));return we(Math.round(e),M,t)}function ye(e,n,t,s){return t(n)?e.sizes[F(n)]??s(n):0}function Je(e,n,t,s,c){const r={...e.sizes},i={...e.splits};for(const l of O){const u=r[l];if(u!==void 0){const h=L(l)?t:n,m=ye(e,I[l],s,c);r[l]=ce(u,h,m)}const f=i[l];f!==void 0&&(i[l]=B(f,L(l)?n:t))}const o=e.bandSplit===void 0?void 0:B(e.bandSplit,n);return{sizes:r,splits:i,bandSplit:o}}function je(e,n,t){const s=t-ie,c=e+n;if(c<=s)return[e,n];const r=u=>u===0?0:A,i=r(e)+r(n);if(s<=i)return[Math.min(e,r(e)),Math.min(n,r(n))];const o=s/c,l=Math.max(r(e),Math.round(e*o));return[l,Math.max(r(n),Math.round(s-l))]}function Z(e){return e.views[e.view]??{}}function K(e,n){const t={...n??{}};for(const s of O)for(const c of re)t[s]?.[c]===void 0&&Pe(e,s,c)!==void 0&&(t[s]={...t[s],[c]:null});return t}function Q(e,n){return Object.hasOwn(e.views,n)}function Ke(e,n){return e.length===n.length&&e.every((t,s)=>{const c=n[s];return c!==void 0&&t.id===c.id&&t.zone===c.zone&&t.slot===c.slot&&t.title===c.title&&t.opens===c.opens&&t.solo===c.solo&&t.fillActions===c.fillActions&&t.icon===c.icon})}function Pe(e,n,t){return e.find(s=>s.zone===n&&s.slot===t)}function E(e,n){return n==null?void 0:e.find(t=>t.id===n)}function he(e,n,t){const s=Z(e)[n];if(!s||!(t in s))return;const c=E(e.registry,s[t]);return c?.zone===n&&c.slot===t?c:Pe(e.registry,n,t)}function N(e,n){const t=he(e,n,"primary");return t?.solo===!0?{primary:t}:{primary:t,secondary:he(e,n,"secondary")}}function R(e,n){const{primary:t,secondary:s}=N(e,n);return{primary:t?.id,secondary:s?.id}}function D(e,n){return $(n)?be.some(t=>H(e,t)):H(e,n)}function H(e,n){const t=R(e,n);return t.primary!==void 0||t.secondary!==void 0}function V(e,n){return Math.max(xe[e],n?.opens??0)}function Xe(e,n,t,s){const{slot:c,id:r}=t,i=Z(e)[n]??{},o={...e.stashed};if(t.solo===!0&&c==="primary")return o[n]=i,[{[c]:r},o];if(s?.solo!==!0)return[{...i,[c]:r},e.stashed];const l=o[n];if(delete o[n],l)return[{...l,[c]:r},o];const u={...i,[c]:r};return c!==s.slot&&delete u[s.slot],[u,o]}function Qe(e,n,t){const s=Z(e)[n]??{},c=s[t],r=e.stashed[n];if(r&&c!==void 0&&E(e.registry,c)?.solo===!0){const o={...e.stashed};return delete o[n],[r,o]}const i={...s};return delete i[t],[i,e.stashed]}const pe={sizes:{},splits:{}};function en(e,n){return e.bandSplit!==n.bandSplit?!1:O.every(t=>e.sizes[t]===n.sizes[t]&&e.splits[t]===n.splits[t])}function Ne(e={}){const n=e.initial,t=(s,c)=>({...s.views,[s.view]:c});return $e()((s,c)=>({registry:[],view:e.view??Y,views:n?.views??{},lengths:n?.lengths??pe,focusedZone:null,stashed:{},available:{width:0,height:0},declare:r=>s(i=>Ke(i.registry,r)?i:{registry:r}),settle:r=>s(i=>{const o=r??i.defaults;return Q(i,i.view)?o===i.defaults?i:{defaults:o}:{views:t(i,K(i.registry,o)),defaults:o}}),setView:r=>s(i=>i.view===r?i:{view:r,views:Q(i,r)?i.views:{...i.views,[r]:K(i.registry,i.defaults)},focusedZone:null,stashed:{}}),show:r=>s(i=>{const o=E(i.registry,r);if(!o)return i;const{zone:l}=o,u=N(i,l);if(u[o.slot]?.id===r)return{focusedZone:l};const[f,h]=Xe(i,l,o,u.primary);return{views:t(i,{...Z(i),[l]:f}),stashed:h,focusedZone:l}}),close:(r,i)=>s(o=>{const[l,u]=Qe(o,r,i),f=t(o,{...Z(o),[r]:l}),h=H({registry:o.registry,view:o.view,views:f},r);return{views:f,stashed:u,focusedZone:!h&&o.focusedZone===r?null:o.focusedZone}}),toggle:r=>{const i=c(),o=E(i.registry,r);o&&(R(i,o.zone)[o.slot]===r?i.close(o.zone,o.slot):i.show(r))},focus:r=>s(i=>i.focusedZone===r?i:{focusedZone:r}),resize:(r,i,o)=>s(l=>{const u=ye(l.lengths,I[r],m=>D(l,m),m=>V(m,N(l,m).primary)),f=ce(i,o,u),h=F(r);return f===l.lengths.sizes[h]?l:{lengths:{...l.lengths,sizes:{...l.lengths.sizes,[h]:f}}}}),resplit:(r,i,o)=>s(l=>{const u=B(i,o);return u===l.lengths.splits[r]?l:{lengths:{...l.lengths,splits:{...l.lengths.splits,[r]:u}}}}),resplitBand:(r,i)=>s(o=>{const l=B(r,i);return l===o.lengths.bandSplit?o:{lengths:{...o.lengths,bandSplit:l}}}),fit:(r,i)=>s(o=>{const l=Je(o.lengths,r,i,h=>D(o,h),h=>V(h,N(o,h).primary)),u=en(o.lengths,l)?o.lengths:l,{available:f}=o;return u===o.lengths&&f.width===r&&f.height===i?o:{available:{width:r,height:i},lengths:u}}),reset:()=>s(r=>({views:r.registry.length===0?{}:{[r.view]:K(r.registry,r.defaults)},lengths:pe,focusedZone:null,stashed:{},registry:r.registry}))}))}const nn=()=>{const e=new Map;return{read:n=>e.get(n)??null,write:(n,t)=>{e.set(n,t)}}},Ee=()=>({read:e=>{try{return globalThis.localStorage?.getItem(e)??null}catch{return null}},write:(e,n)=>{try{globalThis.localStorage?.setItem(e,n)}catch{}}}),le=2;function P(e){return typeof e=="object"&&e!==null&&!Array.isArray(e)}function me(e){const n={};for(const t of O){const s=e[t];if(P(s))for(const c of re){const r=s[c];r!==null&&typeof r!="string"||(n[t]={...n[t],[c]:r})}}return n}function ge(e){const n={};for(const t of O){const s=e[t];typeof s=="number"&&Number.isFinite(s)&&(n[t]=s)}return n}function tn(e,n){if(e.version===1)return P(e.open)?{[n]:me(e.open)}:void 0;if(e.version!==le||!P(e.views))return;const t=Object.create(null);for(const[s,c]of Object.entries(e.views))P(c)&&(t[s]=me(c));return t}function _e(e,n,t=Y){const s=e.read(n);if(s===null)return;let c;try{c=JSON.parse(s)}catch{return}if(!P(c)||!P(c.lengths))return;const r=tn(c,t);if(!r)return;const i=c.lengths;if(!P(i.sizes)||!P(i.splits))return;const o=i.bandSplit;return{views:r,lengths:{sizes:ge(i.sizes),splits:ge(i.splits),bandSplit:typeof o=="number"&&Number.isFinite(o)?o:void 0}}}function Ce(e,n,t){const s={version:le,views:t.views,lengths:t.lengths};e.write(n,JSON.stringify(s))}const Ie=typeof globalThis.document>"u"?d.useEffect:d.useLayoutEffect,Me=d.createContext(null),sn=250;function Le({store:e,storageKey:n="panels:layout",storage:t,defaultOpen:s,view:c,children:r}){const[i]=d.useState(()=>t===null?null:t??Ee()),[o]=d.useState(()=>{const l=c??Y,u=i?_e(i,n,l):void 0;return e?(u&&e.setState(u),e):Ne({view:l,initial:u})});return Ie(()=>{const l=o.getState();c!==void 0&&l.setView(c),l.settle(s)}),d.useEffect(()=>{if(!i)return;let l,u,f;const h=()=>{f!==void 0&&clearTimeout(f),f=void 0,u&&(l=u,u=void 0,Ce(i,n,l))},m=o.subscribe(g=>{if(!Q(g,g.view))return;const S=u??l;S?.views===g.views&&S.lengths===g.lengths||(u={views:g.views,lengths:g.lengths},f??=setTimeout(h,sn))});return globalThis.addEventListener?.("pagehide",h),()=>{m(),globalThis.removeEventListener?.("pagehide",h),h()}},[i,o,n]),a.jsx(Me.Provider,{value:o,children:r})}function T(){const e=d.useContext(Me);if(!e)throw new Error("usePanelsStore must be used inside a <Panels> or <PanelsProvider>");return e}function v(e){const n=T();return Ge(n,e)}function z(){const e=T();return d.useMemo(()=>{const{show:n,close:t,toggle:s,focus:c,resize:r,resplit:i,resplitBand:o,fit:l,reset:u}=e.getState();return{show:n,close:t,toggle:s,focus:c,resize:r,resplit:i,resplitBand:o,fit:l,reset:u}},[e])}function Ze({icon:e,label:n,active:t,accented:s,acts:c,className:r,children:i,ref:o,...l}){return a.jsxs("button",{type:"button",ref:o,"aria-label":n,"aria-pressed":c?void 0:t,className:b.cx("pnl-icon-button",t&&"pnl-icon-button--active",s&&"pnl-icon-button--accented",r),...l,children:[e!==void 0&&a.jsx("span",{className:"pnl-icon-button__glyph",children:e}),i]})}const ee={IconButton:Ze},Re=d.createContext(ee),on=Re.Provider;function ae(){return d.useContext(Re)}function rn(e){return e===void 0?ee:{...ee,...e}}function Oe(e){const n=T();d.useEffect(()=>{const t=e.current;if(!t)return;const s=()=>{const{clientWidth:r,clientHeight:i}=t;r===0||i===0||n.getState().fit(r,i)};if(s(),typeof ResizeObserver>"u")return;const c=new ResizeObserver(s);return c.observe(t),()=>c.disconnect()},[e,n])}function _(){const e=v(s=>s.registry),n=v(s=>s.view),t=v(s=>s.views[s.view]);return d.useMemo(()=>({registry:e,view:n,views:t===void 0?{}:{[n]:t}}),[e,n,t])}function Te(e){const n=_();return d.useMemo(()=>R(n,e),[n,e])}function cn(e){const n=_();return d.useMemo(()=>N(n,e),[n,e])}function ne(e){const n=_();return d.useMemo(()=>H(n,e),[n,e])}function ln(e){const n=_();return d.useMemo(()=>D(n,e),[n,e])}function ze(){return{left:ne(U.left.band),right:ne(U.right.band)}}function ke(){const e=d.useRef(null);return d.useMemo(()=>({start:(t,s)=>{t.currentTarget.setPointerCapture(t.pointerId),e.current={...s,pointerId:t.pointerId}},matching:t=>e.current?.pointerId===t.pointerId?e.current:null,cancel:()=>{e.current=null}}),[])}function W({axis:e,invert:n=!1,size:t,onSize:s,measure:c,label:r,min:i,max:o,step:l=16,className:u}){const f=ke(),h=d.useRef(null),m=e==="vertical",g=d.useCallback(p=>(m?p?.clientHeight:p?.clientWidth)??0,[m]),S=d.useCallback(p=>{const y=f.matching(p);if(!y)return;const w=(m?p.clientY:p.clientX)-y.position;s(y.size+w*(n?-1:1),y.available)},[f,n,m,s]),x=d.useCallback(p=>{const y=m?"ArrowUp":"ArrowLeft",C=m?"ArrowDown":"ArrowRight";if(p.key!==y&&p.key!==C)return;const w=g(h.current?.parentElement),k=t??c?.()??0,Ye=p.key===C?1:-1;p.preventDefault(),s(k+l*Ye*(n?-1:1),w)},[n,m,c,s,g,t,l]);return a.jsx("div",{ref:h,role:"separator",tabIndex:0,"aria-label":r,"aria-orientation":m?"horizontal":"vertical","aria-valuenow":t===void 0?void 0:Math.round(t),"aria-valuemin":i,"aria-valuemax":o,onPointerDown:p=>{p.button!==0||!p.isPrimary||f.start(p,{position:m?p.clientY:p.clientX,size:t??c?.()??0,available:g(p.currentTarget.parentElement)})},onPointerMove:S,onPointerUp:f.cancel,onPointerCancel:f.cancel,onLostPointerCapture:f.cancel,onKeyDown:x,className:b.cx("pnl-handle",m?"pnl-handle--row":"pnl-handle--col",u)})}function ve(e,n,t,s){return s?n??V(t,e):0}function Ae(e){const n=_(),t=v(o=>o.lengths.sizes[F(e)]),s=v(o=>o.lengths.sizes[F(I[e])]),c=v(o=>o.lengths.splits[e]),r=v(o=>L(e)?o.available.height:o.available.width),i=v(o=>o.focusedZone===e);return d.useMemo(()=>{const{primary:o,secondary:l}=N(n,e),u=o!==void 0||l!==void 0,f=N(n,I[e]),h=D(n,I[e]),m=ve(o,t,e,u),g=ve(f.primary,s,I[e],h);return{primary:o,secondary:l,draws:u,size:r===0?m:je(m,g,r)[0],split:c,focused:i}},[n,t,s,r,c,i,e])}function Fe(e){const n=v(t=>t.registry);return d.useMemo(()=>[["primary",n.filter(s=>s.zone===e&&s.slot==="primary")],["secondary",n.filter(s=>s.zone===e&&s.slot==="secondary")]].filter(([,s])=>s.length>0),[n,e])}const Be=d.createContext(new Map),De=Be.Provider;function He(e){return d.useContext(Be).get(e)}function Ue({title:e,children:n,fillActions:t,trailing:s,className:c}){return a.jsxs("header",{className:b.cx("pnl-header",c),children:[a.jsx("span",{className:b.cx("pnl-header__title",t&&"pnl-header__title--fixed"),children:e}),a.jsx("span",{className:b.cx("pnl-header__actions",t&&"pnl-header__actions--fill"),children:n}),a.jsx("span",{className:"pnl-header__trailing",children:s})]})}function q({orientation:e="vertical",className:n}){return a.jsx("span",{"aria-hidden":"true",className:b.cx("pnl-separator",`pnl-separator--${e}`,n)})}function ue({children:e,className:n,...t}){return a.jsx("section",{className:b.cx("pnl-surface",n),...t,children:e})}function an({panel:e,length:n,closeLabel:t,onFocus:s,ref:c}){const{close:r}=z(),{IconButton:i}=ae(),o=He(e.id);return a.jsxs(ue,{ref:c,"aria-label":e.title,onPointerDownCapture:s,className:n===void 0?"pnl-surface--fill":"pnl-surface--give",style:n===void 0?void 0:{flexBasis:n},children:[a.jsx(Ue,{title:e.title,fillActions:e.fillActions??(o?.actions!==void 0&&L(e.zone)),trailing:a.jsxs(a.Fragment,{children:[o?.actions!==void 0&&a.jsx(q,{}),a.jsx(i,{label:t,acts:!0,onClick:()=>r(e.zone,e.slot),className:"pnl-icon-button--header",icon:a.jsx(un,{})})]}),children:o?.actions}),a.jsx("div",{className:b.cx("pnl-body"),children:o?.content})]})}const te=d.memo(an);function un(){return a.jsx("svg",{viewBox:"0 0 24 24",width:"14",height:"14","aria-hidden":"true",focusable:"false",children:a.jsx("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 dn({zone:e,labels:n}){const t=Ae(e),{focus:s,resize:c,resplit:r}=z(),i=d.useRef(null),o=d.useRef(null),l=L(e),u=v(w=>l?w.available.height:w.available.width),f=d.useCallback(()=>s(e),[s,e]),h=d.useCallback(()=>l?i.current?.clientHeight??0:i.current?.clientWidth??0,[l]),m=d.useCallback(()=>l?o.current?.clientWidth??0:o.current?.clientHeight??0,[l]);if(!t.draws)return null;const{primary:g,secondary:S,size:x,split:p}=t,y=a.jsxs("div",{ref:i,className:b.cx("pnl-zone",l?"pnl-zone--row":"pnl-zone--col"),style:{[l?"height":"width"]:x},children:[g&&a.jsx(te,{panel:g,closeLabel:n.closePanel,onFocus:f}),g&&S&&a.jsx(W,{axis:l?"horizontal":"vertical",invert:!0,size:p,min:M,measure:m,label:n.resizeSplit,onSize:(w,k)=>r(e,w,k)}),S&&a.jsx(te,{ref:o,panel:S,length:g&&p!==void 0?p:void 0,closeLabel:n.closePanel,onFocus:f})]}),C=a.jsx(W,{axis:l?"vertical":"horizontal",invert:!X(e),size:x,min:A,measure:h,label:n.resizeZone,onSize:(w,k)=>c(e,w,u||k)});return X(e)?a.jsxs(a.Fragment,{children:[y,C]}):a.jsxs(a.Fragment,{children:[C,y]})}const j=d.memo(dn);function Ve({left:e,right:n,labels:t}){const s=v(l=>l.lengths.bandSplit),{resplitBand:c}=z(),r=d.useRef(null),i=d.useCallback((l,u)=>c(l,u),[c]),o=d.useCallback(()=>r.current?.clientWidth??0,[]);return!e&&!n?null:!e||!n?a.jsx(j,{zone:e?"bottomLeft":"bottomRight",labels:t}):a.jsxs("div",{className:"pnl-band",children:[a.jsx("div",{ref:r,className:b.cx("pnl-band__half",s===void 0&&"pnl-band__half--even"),style:s===void 0?void 0:{width:s},children:a.jsx(j,{zone:"bottomLeft",labels:t})}),a.jsx(W,{axis:"horizontal",size:s,min:M,measure:o,label:t.resizeBand,onSize:i}),a.jsx("div",{className:"pnl-band__half pnl-band__half--rest",children:a.jsx(j,{zone:"bottomRight",labels:t})})]})}function G(e){return null}G.displayName="Panels.Center";const We={closePanel:"Close panel",resizeZone:"Resize panel area",resizeSplit:"Resize the two panels",resizeBand:"Resize the bottom panels"};function J(e){return null}J.displayName="Panels.Panel";function se({side:e,header:n,className:t}){const{column:s,band:c}=U[e];return a.jsxs("div",{role:"toolbar","aria-orientation":"vertical",className:b.cx("pnl-rail",`pnl-rail--${e}`,t),children:[a.jsxs("div",{className:"pnl-rail__group",children:[n!==void 0&&a.jsxs(a.Fragment,{children:[n,a.jsx(q,{orientation:"horizontal"})]}),s.map(r=>a.jsx(oe,{zone:r},r))]}),a.jsx(oe,{zone:c})]})}function oe({zone:e}){const n=Fe(e),t=Te(e),s=v(i=>i.focusedZone===e),{toggle:c}=z(),{IconButton:r}=ae();return n.length===0?null:a.jsx("div",{className:"pnl-rail__group",children:n.map(([i,o],l)=>a.jsxs(d.Fragment,{children:[l>0&&a.jsx(q,{orientation:"horizontal"}),o.map(u=>{const f=t[i]===u.id;return a.jsx(r,{icon:u.icon,label:u.title,active:f,accented:f&&s,onClick:()=>c(u.id),className:"pnl-rail__button"},u.id)})]},`${e}:${i}`))})}function fn(e){const n=[],t=new Map,s=[];let c=null;for(const r of d.Children.toArray(e)){if(!d.isValidElement(r)){s.push(r);continue}if(r.type===G){c=r;continue}if(r.type!==J){s.push(r);continue}const i=r.props,{actions:o,children:l,slot:u="primary",...f}=i;n.push({...f,slot:u}),t.set(f.id,{content:l,actions:o})}return{specs:n,content:t,centre:c,loose:s}}function de({header:e,footer:n,railHeader:t,labels:s,theme:c,className:r,components:i,children:o,...l}){return a.jsx(Le,{...l,children:a.jsx(hn,{header:e,footer:n,railHeader:t,labels:s,theme:c,className:r,components:i,children:o})})}function hn({header:e,footer:n,railHeader:t,labels:s,theme:c,className:r,components:i,children:o}){const l=T(),u=d.useRef(null);Oe(u);const[f]=d.useState(()=>rn(i)),{specs:h,content:m,centre:g,loose:S}=d.useMemo(()=>fn(o),[o]),x=d.useMemo(()=>({...We,...s}),[s]);Ie(()=>{l.getState().declare(h)},[l,h]);const p=ze();return a.jsx(on,{value:f,children:a.jsx(De,{value:m,children:a.jsxs("div",{"data-pnl-theme":c,className:b.cx("pnl-root",r),children:[e,a.jsxs("div",{className:"pnl-middle",children:[a.jsx(se,{side:"left",header:t}),a.jsxs("div",{ref:u,className:"pnl-columns",children:[a.jsx(j,{zone:"top",labels:x}),a.jsxs("div",{className:"pnl-row",children:[!p.left&&a.jsx(j,{zone:"left",labels:x}),a.jsxs("div",{className:"pnl-stack",children:[a.jsxs("div",{className:"pnl-row",children:[p.left&&a.jsx(j,{zone:"left",labels:x}),a.jsx(ue,{className:"pnl-centre",children:g?.props.children}),p.right&&a.jsx(j,{zone:"right",labels:x})]}),a.jsx(Ve,{left:p.left,right:p.right,labels:x})]}),!p.right&&a.jsx(j,{zone:"right",labels:x})]})]}),a.jsx(se,{side:"right"})]}),n,S]})})})}de.Panel=J;de.Center=G;function pn(){const e=T(),n=_(),t=v(i=>i.focusedZone),s=z(),c=d.useCallback(i=>{const o=E(n.registry,i);return o!==void 0&&R(n,o.zone)[o.slot]===i},[n]),r=d.useCallback(i=>{const o=E(n.registry,i);!o||R(n,o.zone)[o.slot]!==i||e.getState().close(o.zone,o.slot)},[n,e]);return d.useMemo(()=>({panels:n.registry,reveal:s.show,close:r,toggle:s.toggle,isShown:c,focusedZone:t,reset:s.reset}),[n,s.show,s.toggle,s.reset,r,c,t])}exports.cx=b.cx;exports.BOTTOM_ZONES=be;exports.Band=Ve;exports.Center=G;exports.ContentProvider=De;exports.DEFAULT_LABELS=We;exports.DEFAULT_SIZES=xe;exports.DEFAULT_VIEW=Y;exports.IconButton=Ze;exports.LAYOUT_VERSION=le;exports.MIN_CENTER=ie;exports.MIN_SIZE=A;exports.MIN_SPLIT=M;exports.Panel=J;exports.PanelFrame=te;exports.PanelHeader=Ue;exports.Panels=de;exports.PanelsProvider=Le;exports.Rail=se;exports.RailZone=oe;exports.ResizeHandle=W;exports.SLOTS=re;exports.Separator=q;exports.Surface=ue;exports.ZONES=O;exports.ZONES_BY_SIDE=U;exports.ZoneEdge=j;exports.browserStorage=Ee;exports.createPanelsStore=Ne;exports.fitSplit=B;exports.fitZoneSize=ce;exports.isBottom=$;exports.isHorizontal=L;exports.isLeading=X;exports.memoryStorage=nn;exports.openOf=Z;exports.readLayout=_e;exports.sharedSizes=je;exports.shownIn=R;exports.shownSpecsIn=N;exports.sizeKeyOf=F;exports.specOf=E;exports.undraggedSizeOf=V;exports.useArrangement=_;exports.useBandHalves=ze;exports.useContainerFit=Oe;exports.usePanelContent=He;exports.usePanels=pn;exports.usePanelsActions=z;exports.usePanelsComponents=ae;exports.usePanelsState=v;exports.usePanelsStore=T;exports.usePointerDrag=ke;exports.useShownIn=Te;exports.useShownSpecsIn=cn;exports.useZone=Ae;exports.useZoneDraws=ne;exports.useZonePanels=Fe;exports.useZoneTakesRoom=ln;exports.writeLayout=Ce;exports.zoneDraws=H;exports.zoneTakesRoom=D;