@pasquelin/panels 0.3.1 → 0.3.2

package/CHANGELOG.md

@@ -5,6 +5,16 @@ 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

package/dist/index.cjs

@@ -1 +1 @@
-"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))}},l=()=>n,o={setState:s,getState:l,getInitialState:()=>c,subscribe:u=>(t.add(u),()=>t.delete(u))},c=n=e(s,l,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 F=140,ie=240,M=100,xe={left:320,right:260,top:180,bottomLeft:240,bottomRight:240},Se="bottomRight";function A(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(F,Math.round(n-t-ie));return we(Math.round(e),F,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[A(n)]??s(n):0}function Je(e,n,t,s,l){const r={...e.sizes},i={...e.splits};for(const c of O){const u=r[c];if(u!==void 0){const h=L(c)?t:n,m=ye(e,I[c],s,l);r[c]=ce(u,h,m)}const f=i[c];f!==void 0&&(i[c]=B(f,L(c)?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,l=e+n;if(l<=s)return[e,n];const r=u=>u===0?0:F,i=r(e)+r(n);if(s<=i)return[Math.min(e,r(e)),Math.min(n,r(n))];const o=s/l,c=Math.max(r(e),Math.round(e*o));return[c,Math.max(r(n),Math.round(s-c))]}function Z(e){return e.views[e.view]??{}}function K(e,n){const t={...n??{}};for(const s of O)for(const l of re)t[s]?.[l]===void 0&&Pe(e,s,l)!==void 0&&(t[s]={...t[s],[l]:null});return t}function Q(e,n){return Object.hasOwn(e.views,n)}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 l=E(e.registry,s[t]);return l?.zone===n&&l.slot===t?l: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 Ke(e,n,t,s){const{slot:l,id:r}=t,i=Z(e)[n]??{},o={...e.stashed};if(t.solo===!0&&l==="primary")return o[n]=i,[{[l]:r},o];if(s?.solo!==!0)return[{...i,[l]:r},e.stashed];const c=o[n];if(delete o[n],c)return[{...c,[l]:r},o];const u={...i,[l]:r};return l!==s.slot&&delete u[s.slot],[u,o]}function Xe(e,n,t){const s=Z(e)[n]??{},l=s[t],r=e.stashed[n];if(r&&l!==void 0&&E(e.registry,l)?.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 Qe(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,l)=>({...s.views,[s.view]:l});return $e()((s,l)=>({registry:[],view:e.view??Y,views:n?.views??{},lengths:n?.lengths??pe,focusedZone:null,stashed:{},available:{width:0,height:0},declare:r=>s({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:c}=o,u=N(i,c);if(u[o.slot]?.id===r)return{focusedZone:c};const[f,h]=Ke(i,c,o,u.primary);return{views:t(i,{...Z(i),[c]:f}),stashed:h,focusedZone:c}}),close:(r,i)=>s(o=>{const[c,u]=Xe(o,r,i),f=t(o,{...Z(o),[r]:c}),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=l(),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(c=>{const u=ye(c.lengths,I[r],m=>D(c,m),m=>V(m,N(c,m).primary)),f=ce(i,o,u),h=A(r);return f===c.lengths.sizes[h]?c:{lengths:{...c.lengths,sizes:{...c.lengths.sizes,[h]:f}}}}),resplit:(r,i,o)=>s(c=>{const u=B(i,o);return u===c.lengths.splits[r]?c:{lengths:{...c.lengths,splits:{...c.lengths.splits,[r]:u}}}}),resplitBand:(r,i)=>s(o=>{const c=B(r,i);return c===o.lengths.bandSplit?o:{lengths:{...o.lengths,bandSplit:c}}}),fit:(r,i)=>s(o=>{const c=Je(o.lengths,r,i,h=>D(o,h),h=>V(h,N(o,h).primary)),u=Qe(o.lengths,c)?o.lengths:c,{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 en=()=>{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 l of re){const r=s[l];r!==null&&typeof r!="string"||(n[t]={...n[t],[l]: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 nn(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,l]of Object.entries(e.views))P(l)&&(t[s]=me(l));return t}function _e(e,n,t=Y){const s=e.read(n);if(s===null)return;let l;try{l=JSON.parse(s)}catch{return}if(!P(l)||!P(l.lengths))return;const r=nn(l,t);if(!r)return;const i=l.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),tn=250;function Le({store:e,storageKey:n="panels:layout",storage:t,defaultOpen:s,view:l,children:r}){const[i]=d.useState(()=>t===null?null:t??Ee()),[o]=d.useState(()=>{const c=l??Y,u=i?_e(i,n,c):void 0;return e?(u&&e.setState(u),e):Ne({view:c,initial:u})});return Ie(()=>{const c=o.getState();l!==void 0&&c.setView(l),c.settle(s)}),d.useEffect(()=>{if(!i)return;let c,u,f;const h=()=>{f!==void 0&&clearTimeout(f),f=void 0,u&&(c=u,u=void 0,Ce(i,n,c))},m=o.subscribe(g=>{if(!Q(g,g.view))return;const S=u??c;S?.views===g.views&&S.lengths===g.lengths||(u={views:g.views,lengths:g.lengths},f??=setTimeout(h,tn))});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:l,resize:r,resplit:i,resplitBand:o,fit:c,reset:u}=e.getState();return{show:n,close:t,toggle:s,focus:l,resize:r,resplit:i,resplitBand:o,fit:c,reset:u}},[e])}function Ze({icon:e,label:n,active:t,accented:s,acts:l,className:r,children:i,ref:o,...c}){return a.jsxs("button",{type:"button",ref:o,"aria-label":n,"aria-pressed":l?void 0:t,className:b.cx("pnl-icon-button",t&&"pnl-icon-button--active",s&&"pnl-icon-button--accented",r),...c,children:[e!==void 0&&a.jsx("span",{className:"pnl-icon-button__glyph",children:e}),i]})}const ee={IconButton:Ze},Re=d.createContext(ee),sn=Re.Provider;function ae(){return d.useContext(Re)}function on(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 l=new ResizeObserver(s);return l.observe(t),()=>l.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 rn(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 cn(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:l,label:r,min:i,max:o,step:c=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??l?.()??0,Ye=p.key===C?1:-1;p.preventDefault(),s(k+c*Ye*(n?-1:1),w)},[n,m,l,s,g,t,c]);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??l?.()??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 Fe(e){const n=_(),t=v(o=>o.lengths.sizes[A(e)]),s=v(o=>o.lengths.sizes[A(I[e])]),l=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:c}=N(n,e),u=o!==void 0||c!==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:c,draws:u,size:r===0?m:je(m,g,r)[0],split:l,focused:i}},[n,t,s,r,l,i,e])}function Ae(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:l}){return a.jsxs("header",{className:b.cx("pnl-header",l),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 ln({panel:e,length:n,closeLabel:t,onFocus:s,ref:l}){const{close:r}=z(),{IconButton:i}=ae(),o=He(e.id);return a.jsxs(ue,{ref:l,"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(an,{})})]}),children:o?.actions}),a.jsx("div",{className:b.cx("pnl-body"),children:o?.content})]})}const te=d.memo(ln);function an(){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 un({zone:e,labels:n}){const t=Fe(e),{focus:s,resize:l,resplit:r}=z(),i=d.useRef(null),o=d.useRef(null),c=L(e),u=v(w=>c?w.available.height:w.available.width),f=d.useCallback(()=>s(e),[s,e]),h=d.useCallback(()=>c?i.current?.clientHeight??0:i.current?.clientWidth??0,[c]),m=d.useCallback(()=>c?o.current?.clientWidth??0:o.current?.clientHeight??0,[c]);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",c?"pnl-zone--row":"pnl-zone--col"),style:{[c?"height":"width"]:x},children:[g&&a.jsx(te,{panel:g,closeLabel:n.closePanel,onFocus:f}),g&&S&&a.jsx(W,{axis:c?"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:c?"vertical":"horizontal",invert:!X(e),size:x,min:F,measure:h,label:n.resizeZone,onSize:(w,k)=>l(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(un);function Ve({left:e,right:n,labels:t}){const s=v(c=>c.lengths.bandSplit),{resplitBand:l}=z(),r=d.useRef(null),i=d.useCallback((c,u)=>l(c,u),[l]),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:l}=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:l})]})}function oe({zone:e}){const n=Ae(e),t=Te(e),s=v(i=>i.focusedZone===e),{toggle:l}=z(),{IconButton:r}=ae();return n.length===0?null:a.jsx("div",{className:"pnl-rail__group",children:n.map(([i,o],c)=>a.jsxs(d.Fragment,{children:[c>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:()=>l(u.id),className:"pnl-rail__button"},u.id)})]},`${e}:${i}`))})}function dn(e){const n=[],t=new Map,s=[];let l=null;for(const r of d.Children.toArray(e)){if(!d.isValidElement(r)){s.push(r);continue}if(r.type===G){l=r;continue}if(r.type!==J){s.push(r);continue}const i=r.props,{actions:o,children:c,slot:u="primary",...f}=i;n.push({...f,slot:u}),t.set(f.id,{content:c,actions:o})}return{specs:n,content:t,centre:l,loose:s}}function de({header:e,footer:n,railHeader:t,labels:s,theme:l,className:r,components:i,children:o,...c}){return a.jsx(Le,{...c,children:a.jsx(fn,{header:e,footer:n,railHeader:t,labels:s,theme:l,className:r,components:i,children:o})})}function fn({header:e,footer:n,railHeader:t,labels:s,theme:l,className:r,components:i,children:o}){const c=T(),u=d.useRef(null);Oe(u);const[f]=d.useState(()=>on(i)),{specs:h,content:m,centre:g,loose:S}=d.useMemo(()=>dn(o),[o]),x=d.useMemo(()=>({...We,...s}),[s]);Ie(()=>{c.getState().declare(h)},[c,h]);const p=ze();return a.jsx(sn,{value:f,children:a.jsx(De,{value:m,children:a.jsxs("div",{"data-pnl-theme":l,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 hn(){const e=T(),n=_(),t=v(i=>i.focusedZone),s=z(),l=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:l,focusedZone:t,reset:s.reset}),[n,s.show,s.toggle,s.reset,r,l,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=F;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=en;exports.openOf=Z;exports.readLayout=_e;exports.sharedSizes=je;exports.shownIn=R;exports.shownSpecsIn=N;exports.sizeKeyOf=A;exports.specOf=E;exports.undraggedSizeOf=V;exports.useArrangement=_;exports.useBandHalves=ze;exports.useContainerFit=Oe;exports.usePanelContent=He;exports.usePanels=hn;exports.usePanelsActions=z;exports.usePanelsComponents=ae;exports.usePanelsState=v;exports.usePanelsStore=T;exports.usePointerDrag=ke;exports.useShownIn=Te;exports.useShownSpecsIn=rn;exports.useZone=Fe;exports.useZoneDraws=ne;exports.useZonePanels=Ae;exports.useZoneTakesRoom=cn;exports.writeLayout=Ce;exports.zoneDraws=H;exports.zoneTakesRoom=D;
+"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;

package/dist/index.js

@@ -9,7 +9,7 @@ const un = (n) => {
       const p = t;
       t = d ?? (typeof f != "object" || f === null) ? f : Object.assign({}, t, f), e.forEach((g) => g(t, p));
     }
-  }, l = () => t, r = { setState: o, getState: l, getInitialState: () => c, subscribe: (a) => (e.add(a), () => e.delete(a)) }, c = t = n(o, l, r);
+  }, c = () => t, r = { setState: o, getState: c, getInitialState: () => l, subscribe: (a) => (e.add(a), () => e.delete(a)) }, l = t = n(o, c, r);
   return r;
 }, jn = ((n) => n ? un(n) : un), Un = (n) => n;
 function Vn(n, t = Un) {
@@ -34,7 +34,7 @@ const X = {
 function dn(n) {
   return n === "left" || n === "top";
 }
-const U = 140, Nn = 240, z = 100, Yn = {
+const U = 140, Nn = 240, O = 100, Yn = {
   left: 320,
   right: 260,
   top: 180,
@@ -60,91 +60,97 @@ function En(n, t, e) {
   return In(Math.round(n), U, o);
 }
 function W(n, t) {
-  const e = Math.max(z, Math.round(t - z));
-  return In(Math.round(n), z, e);
+  const e = Math.max(O, Math.round(t - O));
+  return In(Math.round(n), O, e);
 }
-function xn(n, t, e, o) {
+function Ln(n, t, e, o) {
   return e(t) ? n.sizes[V(t)] ?? o(t) : 0;
 }
-function $n(n, t, e, o, l) {
+function $n(n, t, e, o, c) {
   const s = { ...n.sizes }, i = { ...n.splits };
-  for (const c of B) {
-    const a = s[c];
+  for (const l of B) {
+    const a = s[l];
     if (a !== void 0) {
-      const f = T(c) ? e : t, p = xn(n, C[c], o, l);
-      s[c] = En(a, f, p);
+      const f = T(l) ? e : t, p = Ln(n, C[l], o, c);
+      s[l] = En(a, f, p);
     }
-    const d = i[c];
-    d !== void 0 && (i[c] = W(d, T(c) ? t : e));
+    const d = i[l];
+    d !== void 0 && (i[l] = W(d, T(l) ? t : e));
   }
   const r = n.bandSplit === void 0 ? void 0 : W(n.bandSplit, t);
   return { sizes: s, splits: i, bandSplit: r };
 }
 function Gn(n, t, e) {
-  const o = e - Nn, l = n + t;
-  if (l <= o) return [n, t];
+  const o = e - Nn, c = n + t;
+  if (c <= o) return [n, t];
   const s = (a) => a === 0 ? 0 : U, i = s(n) + s(t);
   if (o <= i)
     return [Math.min(n, s(n)), Math.min(t, s(t))];
-  const r = o / l, c = Math.max(s(n), Math.round(n * r));
-  return [c, Math.max(s(t), Math.round(o - c))];
+  const r = o / c, l = Math.max(s(n), Math.round(n * r));
+  return [l, Math.max(s(t), Math.round(o - l))];
 }
-function F(n) {
+function A(n) {
   return n.views[n.view] ?? {};
 }
 function G(n, t) {
   const e = { ...t ?? {} };
   for (const o of B)
-    for (const l of Pn)
-      e[o]?.[l] === void 0 && Ln(n, o, l) !== void 0 && (e[o] = { ...e[o], [l]: null });
+    for (const c of Pn)
+      e[o]?.[c] === void 0 && xn(n, o, c) !== void 0 && (e[o] = { ...e[o], [c]: null });
   return e;
 }
 function K(n, t) {
   return Object.hasOwn(n.views, t);
 }
-function Ln(n, t, e) {
+function Jn(n, t) {
+  return n.length === t.length && n.every((e, o) => {
+    const c = t[o];
+    return c !== void 0 && e.id === c.id && e.zone === c.zone && e.slot === c.slot && e.title === c.title && e.opens === c.opens && e.solo === c.solo && e.fillActions === c.fillActions && e.icon === c.icon;
+  });
+}
+function xn(n, t, e) {
   return n.find((o) => o.zone === t && o.slot === e);
 }
 function M(n, t) {
   return t == null ? void 0 : n.find((e) => e.id === t);
 }
 function fn(n, t, e) {
-  const o = F(n)[t];
+  const o = A(n)[t];
   if (!o || !(e in o)) return;
-  const l = M(n.registry, o[e]);
-  return l?.zone === t && l.slot === e ? l : Ln(n.registry, t, e);
+  const c = M(n.registry, o[e]);
+  return c?.zone === t && c.slot === e ? c : xn(n.registry, t, e);
 }
-function x(n, t) {
+function L(n, t) {
   const e = fn(n, t, "primary");
   return e?.solo === !0 ? { primary: e } : { primary: e, secondary: fn(n, t, "secondary") };
 }
-function A(n, t) {
-  const { primary: e, secondary: o } = x(n, t);
+function F(n, t) {
+  const { primary: e, secondary: o } = L(n, t);
   return { primary: e?.id, secondary: o?.id };
 }
 function Y(n, t) {
   return sn(t) ? Wn.some((e) => $(n, e)) : $(n, t);
 }
 function $(n, t) {
-  const e = A(n, t);
+  const e = F(n, t);
   return e.primary !== void 0 || e.secondary !== void 0;
 }
 function q(n, t) {
   return Math.max(Yn[n], t?.opens ?? 0);
 }
-function Jn(n, t, e, o) {
-  const { slot: l, id: s } = e, i = F(n)[t] ?? {}, r = { ...n.stashed };
-  if (e.solo === !0 && l === "primary")
-    return r[t] = i, [{ [l]: s }, r];
-  if (o?.solo !== !0) return [{ ...i, [l]: s }, n.stashed];
-  const c = r[t];
-  if (delete r[t], c) return [{ ...c, [l]: s }, r];
-  const a = { ...i, [l]: s };
-  return l !== o.slot && delete a[o.slot], [a, r];
-}
-function Xn(n, t, e) {
-  const o = F(n)[t] ?? {}, l = o[e], s = n.stashed[t];
-  if (s && l !== void 0 && M(n.registry, l)?.solo === !0) {
+function Xn(n, t, e, o) {
+  const { slot: c, id: s } = e, i = A(n)[t] ?? {}, r = { ...n.stashed };
+  if (e.solo === !0 && c === "primary")
+    return r[t] = i, [{ [c]: s }, r];
+  if (o?.solo !== !0) return [{ ...i, [c]: s }, n.stashed];
+  const l = r[t];
+  if (delete r[t], l) return [{ ...l, [c]: s }, r];
+  const a = { ...i, [c]: s };
+  return c !== o.slot && delete a[o.slot], [a, r];
+}
+function Kn(n, t, e) {
+  const o = A(n)[t] ?? {}, c = o[e], s = n.stashed[t];
+  if (s && c !== void 0 && M(n.registry, c)?.solo === !0) {
     const r = { ...n.stashed };
     return delete r[t], [s, r];
   }
@@ -152,17 +158,17 @@ function Xn(n, t, e) {
   return delete i[e], [i, n.stashed];
 }
 const hn = { sizes: {}, splits: {} };
-function Kn(n, t) {
+function qn(n, t) {
   return n.bandSplit !== t.bandSplit ? !1 : B.every(
     (e) => n.sizes[e] === t.sizes[e] && n.splits[e] === t.splits[e]
   );
 }
-function qn(n = {}) {
-  const t = n.initial, e = (o, l) => ({
+function Qn(n = {}) {
+  const t = n.initial, e = (o, c) => ({
     ...o.views,
-    [o.view]: l
+    [o.view]: c
   });
-  return jn()((o, l) => ({
+  return jn()((o, c) => ({
     registry: [],
     view: n.view ?? rn,
     views: t?.views ?? {},
@@ -172,7 +178,11 @@ function qn(n = {}) {
     available: { width: 0, height: 0 },
     // 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 }),
+    //
+    // 🛑 Compared, not written: a project builds this list in its render, so the identity is new
+    // every time an unrelated prop moves. Written through, every rail, every zone and every
+    // frame re-rendered for a list identical to the one they already held.
+    declare: (s) => o((i) => Jn(i.registry, s) ? i : { 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.
     settle: (s) => o((i) => {
@@ -193,17 +203,17 @@ function qn(n = {}) {
     show: (s) => o((i) => {
       const r = M(i.registry, s);
       if (!r) return i;
-      const { zone: c } = r, a = x(i, c);
-      if (a[r.slot]?.id === s) return { focusedZone: c };
-      const [d, f] = Jn(i, c, r, a.primary);
+      const { zone: l } = r, a = L(i, l);
+      if (a[r.slot]?.id === s) return { focusedZone: l };
+      const [d, f] = Xn(i, l, r, a.primary);
       return {
-        views: e(i, { ...F(i), [c]: d }),
+        views: e(i, { ...A(i), [l]: d }),
         stashed: f,
-        focusedZone: c
+        focusedZone: l
       };
     }),
     close: (s, i) => o((r) => {
-      const [c, a] = Xn(r, s, i), d = e(r, { ...F(r), [s]: c }), f = $({ registry: r.registry, view: r.view, views: d }, s);
+      const [l, a] = Kn(r, s, i), d = e(r, { ...A(r), [s]: l }), f = $({ registry: r.registry, view: r.view, views: d }, s);
       return {
         views: d,
         stashed: a,
@@ -211,40 +221,40 @@ function qn(n = {}) {
       };
     }),
     toggle: (s) => {
-      const i = l(), r = M(i.registry, s);
-      r && (A(i, r.zone)[r.slot] === s ? i.close(r.zone, r.slot) : i.show(s));
+      const i = c(), r = M(i.registry, s);
+      r && (F(i, r.zone)[r.slot] === s ? i.close(r.zone, r.slot) : i.show(s));
     },
     focus: (s) => o((i) => i.focusedZone === s ? i : { focusedZone: s }),
     // Guarded: a drag past the ceiling clamps to the same number for as long as the pointer
     // keeps going, and every write notifies every subscriber.
-    resize: (s, i, r) => o((c) => {
-      const a = xn(
-        c.lengths,
+    resize: (s, i, r) => o((l) => {
+      const a = Ln(
+        l.lengths,
         C[s],
-        (p) => Y(c, p),
-        (p) => q(p, x(c, p).primary)
+        (p) => Y(l, p),
+        (p) => q(p, L(l, p).primary)
       ), d = En(i, r, a), f = V(s);
-      return d === c.lengths.sizes[f] ? c : { lengths: { ...c.lengths, sizes: { ...c.lengths.sizes, [f]: d } } };
+      return d === l.lengths.sizes[f] ? l : { lengths: { ...l.lengths, sizes: { ...l.lengths.sizes, [f]: d } } };
     }),
-    resplit: (s, i, r) => o((c) => {
+    resplit: (s, i, r) => o((l) => {
       const a = W(i, r);
-      return a === c.lengths.splits[s] ? c : { lengths: { ...c.lengths, splits: { ...c.lengths.splits, [s]: a } } };
+      return a === l.lengths.splits[s] ? l : { lengths: { ...l.lengths, splits: { ...l.lengths.splits, [s]: a } } };
     }),
     resplitBand: (s, i) => o((r) => {
-      const c = W(s, i);
-      return c === r.lengths.bandSplit ? r : { lengths: { ...r.lengths, bandSplit: c } };
+      const l = W(s, i);
+      return l === r.lengths.bandSplit ? r : { lengths: { ...r.lengths, bandSplit: l } };
     }),
     // Guarded like `resize`, and for a heavier reason: the observer fires on every frame of a
     // window resize, and the persistence subscriber compares `lengths` by reference. A fresh
     // object carrying the same numbers had each of those frames re-serialising the whole file.
     fit: (s, i) => o((r) => {
-      const c = $n(
+      const l = $n(
         r.lengths,
         s,
         i,
         (f) => Y(r, f),
-        (f) => q(f, x(r, f).primary)
-      ), a = Kn(r.lengths, c) ? r.lengths : c, { available: d } = r;
+        (f) => q(f, L(r, f).primary)
+      ), a = qn(r.lengths, l) ? r.lengths : l, { available: d } = r;
       return a === r.lengths && d.width === s && d.height === i ? r : { available: { width: s, height: i }, lengths: a };
     }),
     // Every view, not just the one in front: a reset the reader asked for must not leave the
@@ -275,7 +285,7 @@ const xt = () => {
       n.set(t, e);
     }
   };
-}, Qn = () => ({
+}, nt = () => ({
   read: (n) => {
     try {
       return globalThis.localStorage?.getItem(n) ?? null;
@@ -298,9 +308,9 @@ function pn(n) {
   for (const e of B) {
     const o = n[e];
     if (E(o))
-      for (const l of Pn) {
-        const s = o[l];
-        s !== null && typeof s != "string" || (t[e] = { ...t[e], [l]: s });
+      for (const c of Pn) {
+        const s = o[c];
+        s !== null && typeof s != "string" || (t[e] = { ...t[e], [c]: s });
       }
   }
   return t;
@@ -313,28 +323,28 @@ function gn(n) {
   }
   return t;
 }
-function nt(n, t) {
+function tt(n, t) {
   if (n.version === 1)
     return E(n.open) ? { [t]: pn(n.open) } : void 0;
   if (n.version !== Cn || !E(n.views)) return;
   const e = /* @__PURE__ */ Object.create(null);
-  for (const [o, l] of Object.entries(n.views))
-    E(l) && (e[o] = pn(l));
+  for (const [o, c] of Object.entries(n.views))
+    E(c) && (e[o] = pn(c));
   return e;
 }
-function tt(n, t, e = rn) {
+function et(n, t, e = rn) {
   const o = n.read(t);
   if (o === null) return;
-  let l;
+  let c;
   try {
-    l = JSON.parse(o);
+    c = JSON.parse(o);
   } catch {
     return;
   }
-  if (!E(l) || !E(l.lengths)) return;
-  const s = nt(l, e);
+  if (!E(c) || !E(c.lengths)) return;
+  const s = tt(c, e);
   if (!s) return;
-  const i = l.lengths;
+  const i = c.lengths;
   if (!E(i.sizes) || !E(i.splits)) return;
   const r = i.bandSplit;
   return {
@@ -346,7 +356,7 @@ function tt(n, t, e = rn) {
     }
   };
 }
-function et(n, t, e) {
+function ot(n, t, e) {
   const o = {
     version: Cn,
     views: e.views,
@@ -354,33 +364,33 @@ function et(n, t, e) {
   };
   n.write(t, JSON.stringify(o));
 }
-const Zn = typeof globalThis.document > "u" ? tn : Bn, Mn = on(null), ot = 250;
-function rt({
+const Zn = typeof globalThis.document > "u" ? tn : Bn, Mn = on(null), rt = 250;
+function st({
   store: n,
   storageKey: t = "panels:layout",
   storage: e,
   defaultOpen: o,
-  view: l,
+  view: c,
   children: s
 }) {
   const [i] = J(
-    () => e === null ? null : e ?? Qn()
+    () => e === null ? null : e ?? nt()
   ), [r] = J(() => {
-    const c = l ?? rn, a = i ? tt(i, t, c) : void 0;
-    return n ? (a && n.setState(a), n) : qn({ view: c, initial: a });
+    const l = c ?? rn, a = i ? et(i, t, l) : void 0;
+    return n ? (a && n.setState(a), n) : Qn({ view: l, initial: a });
   });
   return Zn(() => {
-    const c = r.getState();
-    l !== void 0 && c.setView(l), c.settle(o);
+    const l = r.getState();
+    c !== void 0 && l.setView(c), l.settle(o);
   }), tn(() => {
     if (!i) return;
-    let c, a, d;
+    let l, a, d;
     const f = () => {
-      d !== void 0 && clearTimeout(d), d = void 0, a && (c = a, a = void 0, et(i, t, c));
+      d !== void 0 && clearTimeout(d), d = void 0, a && (l = a, a = void 0, ot(i, t, l));
     }, p = r.subscribe((g) => {
       if (!K(g, g.view)) return;
-      const S = a ?? c;
-      S?.views === g.views && S.lengths === g.lengths || (a = { views: g.views, lengths: g.lengths }, d ??= setTimeout(f, ot));
+      const S = a ?? l;
+      S?.views === g.views && S.lengths === g.lengths || (a = { views: g.views, lengths: g.lengths }, d ??= setTimeout(f, rt));
     });
     return globalThis.addEventListener?.("pagehide", f), () => {
       p(), globalThis.removeEventListener?.("pagehide", f), f();
@@ -399,20 +409,20 @@ function v(n) {
 function D() {
   const n = k();
   return w(() => {
-    const { show: t, close: e, toggle: o, focus: l, resize: s, resplit: i, resplitBand: r, fit: c, reset: a } = n.getState();
-    return { show: t, close: e, toggle: o, focus: l, resize: s, resplit: i, resplitBand: r, fit: c, reset: a };
+    const { show: t, close: e, toggle: o, focus: c, resize: s, resplit: i, resplitBand: r, fit: l, reset: a } = n.getState();
+    return { show: t, close: e, toggle: o, focus: c, resize: s, resplit: i, resplitBand: r, fit: l, reset: a };
   }, [n]);
 }
-function st({
+function it({
   icon: n,
   label: t,
   active: e,
   accented: o,
-  acts: l,
+  acts: c,
   className: s,
   children: i,
   ref: r,
-  ...c
+  ...l
 }) {
   return /* @__PURE__ */ m(
     "button",
@@ -420,14 +430,14 @@ function st({
       type: "button",
       ref: r,
       "aria-label": t,
-      "aria-pressed": l ? void 0 : e,
+      "aria-pressed": c ? void 0 : e,
       className: b(
         "pnl-icon-button",
         e && "pnl-icon-button--active",
         o && "pnl-icon-button--accented",
         s
       ),
-      ...c,
+      ...l,
       children: [
         n !== void 0 && /* @__PURE__ */ u("span", { className: "pnl-icon-button__glyph", children: n }),
         i
@@ -435,14 +445,14 @@ function st({
     }
   );
 }
-const Q = { IconButton: st }, Rn = on(Q), it = Rn.Provider;
-function On() {
-  return en(Rn);
+const Q = { IconButton: it }, zn = on(Q), ct = zn.Provider;
+function Rn() {
+  return en(zn);
 }
-function ct(n) {
+function lt(n) {
   return n === void 0 ? Q : { ...Q, ...n };
 }
-function lt(n) {
+function at(n) {
   const t = k();
   tn(() => {
     const e = n.current;
@@ -452,40 +462,40 @@ function lt(n) {
       s === 0 || i === 0 || t.getState().fit(s, i);
     };
     if (o(), typeof ResizeObserver > "u") return;
-    const l = new ResizeObserver(o);
-    return l.observe(e), () => l.disconnect();
+    const c = new ResizeObserver(o);
+    return c.observe(e), () => c.disconnect();
   }, [n, t]);
 }
-function R() {
+function z() {
   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 at(n) {
-  const t = R();
-  return w(() => A(t, n), [t, n]);
+function ut(n) {
+  const t = z();
+  return w(() => F(t, n), [t, n]);
 }
-function Lt(n) {
-  const t = R();
-  return w(() => x(t, n), [t, n]);
+function Ct(n) {
+  const t = z();
+  return w(() => L(t, n), [t, n]);
 }
 function mn(n) {
-  const t = R();
+  const t = z();
   return w(() => $(t, n), [t, n]);
 }
-function Ct(n) {
-  const t = R();
+function Zt(n) {
+  const t = z();
   return w(() => Y(t, n), [t, n]);
 }
-function ut() {
+function dt() {
   return {
     left: mn(X.left.band),
     right: mn(X.right.band)
   };
 }
-function dt() {
+function ft() {
   const n = Z(null);
   return w(() => ({
     start: (e, o) => {
@@ -502,14 +512,14 @@ function nn({
   invert: t = !1,
   size: e,
   onSize: o,
-  measure: l,
+  measure: c,
   label: s,
   min: i,
   max: r,
-  step: c = 16,
+  step: l = 16,
   className: a
 }) {
-  const d = dt(), f = Z(null), p = n === "vertical", g = N(
+  const d = ft(), f = Z(null), p = n === "vertical", g = N(
     (h) => (p ? h?.clientHeight : h?.clientWidth) ?? 0,
     [p]
   ), S = N(
@@ -522,12 +532,12 @@ function nn({
     [d, t, p, o]
   ), y = N(
     (h) => {
-      const _ = p ? "ArrowUp" : "ArrowLeft", L = p ? "ArrowDown" : "ArrowRight";
-      if (h.key !== _ && h.key !== L) return;
-      const P = g(f.current?.parentElement), O = e ?? l?.() ?? 0, An = h.key === L ? 1 : -1;
-      h.preventDefault(), o(O + c * An * (t ? -1 : 1), P);
+      const _ = p ? "ArrowUp" : "ArrowLeft", x = p ? "ArrowDown" : "ArrowRight";
+      if (h.key !== _ && h.key !== x) return;
+      const P = g(f.current?.parentElement), R = e ?? c?.() ?? 0, Fn = h.key === x ? 1 : -1;
+      h.preventDefault(), o(R + l * Fn * (t ? -1 : 1), P);
     },
-    [t, p, l, o, g, e, c]
+    [t, p, c, o, g, e, l]
   );
   return /* @__PURE__ */ u(
     "div",
@@ -543,7 +553,7 @@ function nn({
       onPointerDown: (h) => {
         h.button !== 0 || !h.isPrimary || d.start(h, {
           position: p ? h.clientY : h.clientX,
-          size: e ?? l?.() ?? 0,
+          size: e ?? c?.() ?? 0,
           available: g(h.currentTarget.parentElement)
         });
       },
@@ -559,47 +569,47 @@ function nn({
 function vn(n, t, e, o) {
   return o ? t ?? q(e, n) : 0;
 }
-function ft(n) {
-  const t = R(), e = v(
+function ht(n) {
+  const t = z(), e = v(
     (r) => r.lengths.sizes[V(n)]
   ), o = v(
     (r) => r.lengths.sizes[V(C[n])]
-  ), l = v((r) => r.lengths.splits[n]), s = v(
+  ), c = v((r) => r.lengths.splits[n]), s = v(
     (r) => T(n) ? r.available.height : r.available.width
   ), i = v((r) => r.focusedZone === n);
   return w(() => {
-    const { primary: r, secondary: c } = x(t, n), a = r !== void 0 || c !== void 0, d = x(t, C[n]), f = Y(t, C[n]), p = vn(r, e, n, a), g = vn(d.primary, o, C[n], f);
+    const { primary: r, secondary: l } = L(t, n), a = r !== void 0 || l !== void 0, d = L(t, C[n]), f = Y(t, C[n]), p = vn(r, e, n, a), g = vn(d.primary, o, C[n], f);
     return {
       primary: r,
-      secondary: c,
+      secondary: l,
       draws: a,
       // Zero until the container has been measured: bounding against nothing would collapse
       // every zone to its floor on the very first paint.
       size: s === 0 ? p : Gn(p, g, s)[0],
-      split: l,
+      split: c,
       focused: i
     };
-  }, [t, e, o, s, l, i, n]);
+  }, [t, e, o, s, c, i, n]);
 }
-function ht(n) {
+function pt(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 zn = on(/* @__PURE__ */ new Map()), pt = zn.Provider;
-function gt(n) {
-  return en(zn).get(n);
+const On = on(/* @__PURE__ */ new Map()), gt = On.Provider;
+function mt(n) {
+  return en(On).get(n);
 }
-function mt({
+function vt({
   title: n,
   children: t,
   fillActions: e,
   trailing: o,
-  className: l
+  className: c
 }) {
-  return /* @__PURE__ */ m("header", { className: b("pnl-header", l), children: [
+  return /* @__PURE__ */ m("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 })
@@ -617,28 +627,28 @@ function cn({ orientation: n = "vertical", className: t }) {
 function Tn({ children: n, className: t, ...e }) {
   return /* @__PURE__ */ u("section", { className: b("pnl-surface", t), ...e, children: n });
 }
-function vt({
+function bt({
   panel: n,
   length: t,
   closeLabel: e,
   onFocus: o,
-  ref: l
+  ref: c
 }) {
-  const { close: s } = D(), { IconButton: i } = On(), r = gt(n.id);
+  const { close: s } = D(), { IconButton: i } = Rn(), r = mt(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(
       Tn,
       {
-        ref: l,
+        ref: c,
         "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__ */ u(
-            mt,
+            vt,
             {
               title: n.title,
               fillActions: n.fillActions ?? (r?.actions !== void 0 && T(n.zone)),
@@ -651,7 +661,7 @@ function vt({
                     acts: !0,
                     onClick: () => s(n.zone, n.slot),
                     className: "pnl-icon-button--header",
-                    icon: /* @__PURE__ */ u(bt, {})
+                    icon: /* @__PURE__ */ u(wt, {})
                   }
                 )
               ] }),
@@ -664,8 +674,8 @@ function vt({
     )
   );
 }
-const bn = Sn(vt);
-function bt() {
+const bn = Sn(bt);
+function wt() {
   return /* @__PURE__ */ u("svg", { viewBox: "0 0 24 24", width: "14", height: "14", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ u(
     "path",
     {
@@ -674,35 +684,35 @@ function bt() {
     }
   ) });
 }
-function wt({ zone: n, labels: t }) {
-  const e = ft(n), { focus: o, resize: l, resplit: s } = D(), i = Z(null), r = Z(null), c = T(n), a = v(
-    (P) => c ? P.available.height : P.available.width
+function yt({ zone: n, labels: t }) {
+  const e = ht(n), { focus: o, resize: c, resplit: s } = D(), i = Z(null), r = Z(null), l = T(n), a = v(
+    (P) => l ? P.available.height : P.available.width
   ), d = N(() => o(n), [o, n]), f = N(
-    () => c ? i.current?.clientHeight ?? 0 : i.current?.clientWidth ?? 0,
-    [c]
+    () => l ? i.current?.clientHeight ?? 0 : i.current?.clientWidth ?? 0,
+    [l]
   ), p = N(
-    () => c ? r.current?.clientWidth ?? 0 : r.current?.clientHeight ?? 0,
-    [c]
+    () => l ? r.current?.clientWidth ?? 0 : r.current?.clientHeight ?? 0,
+    [l]
   );
   if (!e.draws) return null;
   const { primary: g, secondary: S, size: y, split: h } = e, _ = /* @__PURE__ */ m(
     "div",
     {
       ref: i,
-      className: b("pnl-zone", c ? "pnl-zone--row" : "pnl-zone--col"),
-      style: { [c ? "height" : "width"]: y },
+      className: b("pnl-zone", l ? "pnl-zone--row" : "pnl-zone--col"),
+      style: { [l ? "height" : "width"]: y },
       children: [
         g && /* @__PURE__ */ u(bn, { panel: g, closeLabel: t.closePanel, onFocus: d }),
         g && S && /* @__PURE__ */ u(
           nn,
           {
-            axis: c ? "horizontal" : "vertical",
+            axis: l ? "horizontal" : "vertical",
             invert: !0,
             size: h,
-            min: z,
+            min: O,
             measure: p,
             label: t.resizeSplit,
-            onSize: (P, O) => s(n, P, O)
+            onSize: (P, R) => s(n, P, R)
           }
         ),
         S && /* @__PURE__ */ u(
@@ -717,31 +727,31 @@ function wt({ zone: n, labels: t }) {
         )
       ]
     }
-  ), L = /* @__PURE__ */ u(
+  ), x = /* @__PURE__ */ u(
     nn,
     {
-      axis: c ? "vertical" : "horizontal",
+      axis: l ? "vertical" : "horizontal",
       invert: !dn(n),
       size: y,
       min: U,
       measure: f,
       label: t.resizeZone,
-      onSize: (P, O) => l(n, P, a || O)
+      onSize: (P, R) => c(n, P, a || R)
     }
   );
   return dn(n) ? /* @__PURE__ */ m(j, { children: [
     _,
-    L
+    x
   ] }) : /* @__PURE__ */ m(j, { children: [
-    L,
+    x,
     _
   ] });
 }
-const I = Sn(wt);
-function yt({ left: n, right: t, labels: e }) {
-  const o = v((c) => c.lengths.bandSplit), { resplitBand: l } = D(), s = Z(null), i = N(
-    (c, a) => l(c, a),
-    [l]
+const I = Sn(yt);
+function St({ left: n, right: t, labels: e }) {
+  const o = v((l) => l.lengths.bandSplit), { resplitBand: c } = D(), s = Z(null), i = N(
+    (l, a) => c(l, a),
+    [c]
   ), r = N(() => s.current?.clientWidth ?? 0, []);
   return !n && !t ? null : !n || !t ? /* @__PURE__ */ u(I, { zone: n ? "bottomLeft" : "bottomRight", labels: e }) : /* @__PURE__ */ m("div", { className: "pnl-band", children: [
     /* @__PURE__ */ u(
@@ -758,7 +768,7 @@ function yt({ left: n, right: t, labels: e }) {
       {
         axis: "horizontal",
         size: o,
-        min: z,
+        min: O,
         measure: r,
         label: e.resizeBand,
         onSize: i
@@ -771,7 +781,7 @@ function ln(n) {
   return null;
 }
 ln.displayName = "Panels.Center";
-const St = {
+const Pt = {
   closePanel: "Close panel",
   resizeZone: "Resize panel area",
   resizeSplit: "Resize the two panels",
@@ -782,7 +792,7 @@ function an(n) {
 }
 an.displayName = "Panels.Panel";
 function wn({ side: n, header: t, className: e }) {
-  const { column: o, band: l } = X[n];
+  const { column: o, band: c } = X[n];
   return /* @__PURE__ */ m(
     "div",
     {
@@ -797,15 +807,15 @@ function wn({ side: n, header: t, className: e }) {
           ] }),
           o.map((s) => /* @__PURE__ */ u(yn, { zone: s }, s))
         ] }),
-        /* @__PURE__ */ u(yn, { zone: l })
+        /* @__PURE__ */ u(yn, { zone: c })
       ]
     }
   );
 }
 function yn({ zone: n }) {
-  const t = ht(n), e = at(n), o = v((i) => i.focusedZone === n), { toggle: l } = D(), { IconButton: s } = On();
-  return t.length === 0 ? null : /* @__PURE__ */ u("div", { className: "pnl-rail__group", children: t.map(([i, r], c) => /* @__PURE__ */ m(kn, { children: [
-    c > 0 && /* @__PURE__ */ u(cn, { orientation: "horizontal" }),
+  const t = pt(n), e = ut(n), o = v((i) => i.focusedZone === n), { toggle: c } = D(), { IconButton: s } = Rn();
+  return t.length === 0 ? null : /* @__PURE__ */ u("div", { className: "pnl-rail__group", children: t.map(([i, r], l) => /* @__PURE__ */ m(kn, { children: [
+    l > 0 && /* @__PURE__ */ u(cn, { orientation: "horizontal" }),
     r.map((a) => {
       const d = e[i] === a.id;
       return /* @__PURE__ */ u(
@@ -815,7 +825,7 @@ function yn({ zone: n }) {
           label: a.title,
           active: d,
           accented: d && o,
-          onClick: () => l(a.id),
+          onClick: () => c(a.id),
           className: "pnl-rail__button"
         },
         a.id
@@ -823,70 +833,70 @@ function yn({ zone: n }) {
     })
   ] }, `${n}:${i}`)) });
 }
-function Pt(n) {
+function Nt(n) {
   const t = [], e = /* @__PURE__ */ new Map(), o = [];
-  let l = null;
+  let c = null;
   for (const s of Dn.toArray(n)) {
     if (!Hn(s)) {
       o.push(s);
       continue;
     }
     if (s.type === ln) {
-      l = s;
+      c = s;
       continue;
     }
     if (s.type !== an) {
       o.push(s);
       continue;
     }
-    const i = s.props, { actions: r, children: c, slot: a = "primary", ...d } = i;
-    t.push({ ...d, slot: a }), e.set(d.id, { content: c, actions: r });
+    const i = s.props, { actions: r, children: l, slot: a = "primary", ...d } = i;
+    t.push({ ...d, slot: a }), e.set(d.id, { content: l, actions: r });
   }
-  return { specs: t, content: e, centre: l, loose: o };
+  return { specs: t, content: e, centre: c, loose: o };
 }
-function Fn({
+function An({
   header: n,
   footer: t,
   railHeader: e,
   labels: o,
-  theme: l,
+  theme: c,
   className: s,
   components: i,
   children: r,
-  ...c
+  ...l
 }) {
-  return /* @__PURE__ */ u(rt, { ...c, children: /* @__PURE__ */ u(
-    Nt,
+  return /* @__PURE__ */ u(st, { ...l, children: /* @__PURE__ */ u(
+    _t,
     {
       header: n,
       footer: t,
       railHeader: e,
       labels: o,
-      theme: l,
+      theme: c,
       className: s,
       components: i,
       children: r
     }
   ) });
 }
-function Nt({
+function _t({
   header: n,
   footer: t,
   railHeader: e,
   labels: o,
-  theme: l,
+  theme: c,
   className: s,
   components: i,
   children: r
 }) {
-  const c = k(), a = Z(null);
-  lt(a);
-  const [d] = J(() => ct(i)), { specs: f, content: p, centre: g, loose: S } = w(() => Pt(r), [r]), y = w(() => ({ ...St, ...o }), [o]);
+  const l = k(), a = Z(null);
+  at(a);
+  const [d] = J(() => lt(i)), { specs: f, content: p, centre: g, loose: S } = w(() => Nt(r), [r]), y = w(() => ({ ...Pt, ...o }), [o]);
   Zn(() => {
-    c.getState().declare(f);
-  }, [c, f]);
-  const h = ut();
-  return /* @__PURE__ */ u(it, { value: d, children: /* @__PURE__ */ u(pt, { value: p, children: /* @__PURE__ */ m("div", { "data-pnl-theme": l, className: b("pnl-root", s), children: [
+    l.getState().declare(f);
+  }, [l, f]);
+  const h = dt();
+  return /* @__PURE__ */ u(ct, { value: d, children: /* @__PURE__ */ u(gt, { value: p, children: /* @__PURE__ */ m("div", { "data-pnl-theme": c, className: b("pnl-root", s), children: [
     n,
     /* @__PURE__ */ m("div", { className: "pnl-middle", children: [
       /* @__PURE__ */ u(wn, { side: "left", header: e }),
@@ -900,7 +910,7 @@ function Nt({
               /* @__PURE__ */ u(Tn, { className: "pnl-centre", children: g?.props.children }),
               h.right && /* @__PURE__ */ u(I, { zone: "right", labels: y })
             ] }),
-            /* @__PURE__ */ u(yt, { left: h.left, right: h.right, labels: y })
+            /* @__PURE__ */ u(St, { left: h.left, right: h.right, labels: y })
           ] }),
           !h.right && /* @__PURE__ */ u(I, { zone: "right", labels: y })
         ] })
@@ -911,19 +921,19 @@ function Nt({
     S
   ] }) }) });
 }
-Fn.Panel = an;
-Fn.Center = ln;
-function Zt() {
-  const n = k(), t = R(), e = v((i) => i.focusedZone), o = D(), l = N(
+An.Panel = an;
+An.Center = ln;
+function Mt() {
+  const n = k(), t = z(), e = v((i) => i.focusedZone), o = D(), c = N(
     (i) => {
       const r = M(t.registry, i);
-      return r !== void 0 && A(t, r.zone)[r.slot] === i;
+      return r !== void 0 && F(t, r.zone)[r.slot] === i;
     },
     [t]
   ), s = N(
     (i) => {
       const r = M(t.registry, i);
-      !r || A(t, r.zone)[r.slot] !== i || n.getState().close(r.zone, r.slot);
+      !r || F(t, r.zone)[r.slot] !== i || n.getState().close(r.zone, r.slot);
     },
     [t, n]
   );
@@ -933,31 +943,31 @@ function Zt() {
       reveal: o.show,
       close: s,
       toggle: o.toggle,
-      isShown: l,
+      isShown: c,
       focusedZone: e,
       reset: o.reset
     }),
-    [t, o.show, o.toggle, o.reset, s, l, e]
+    [t, o.show, o.toggle, o.reset, s, c, e]
   );
 }
 export {
   Wn as BOTTOM_ZONES,
-  yt as Band,
+  St as Band,
   ln as Center,
-  pt as ContentProvider,
-  St as DEFAULT_LABELS,
+  gt as ContentProvider,
+  Pt as DEFAULT_LABELS,
   Yn as DEFAULT_SIZES,
   rn as DEFAULT_VIEW,
-  st as IconButton,
+  it as IconButton,
   Cn as LAYOUT_VERSION,
   Nn as MIN_CENTER,
   U as MIN_SIZE,
-  z as MIN_SPLIT,
+  O as MIN_SPLIT,
   an as Panel,
   bn as PanelFrame,
-  mt as PanelHeader,
-  Fn as Panels,
-  rt as PanelsProvider,
+  vt as PanelHeader,
+  An as Panels,
+  st as PanelsProvider,
   wn as Rail,
   yn as RailZone,
   nn as ResizeHandle,
@@ -967,8 +977,8 @@ export {
   B as ZONES,
   X as ZONES_BY_SIDE,
   I as ZoneEdge,
-  Qn as browserStorage,
-  qn as createPanelsStore,
+  nt as browserStorage,
+  Qn as createPanelsStore,
   b as cx,
   W as fitSplit,
   En as fitZoneSize,
@@ -976,31 +986,31 @@ export {
   T as isHorizontal,
   dn as isLeading,
   xt as memoryStorage,
-  F as openOf,
-  tt as readLayout,
+  A as openOf,
+  et as readLayout,
   Gn as sharedSizes,
-  A as shownIn,
-  x as shownSpecsIn,
+  F as shownIn,
+  L as shownSpecsIn,
   V as sizeKeyOf,
   M as specOf,
   q as undraggedSizeOf,
-  R as useArrangement,
-  ut as useBandHalves,
-  lt as useContainerFit,
-  gt as usePanelContent,
-  Zt as usePanels,
+  z as useArrangement,
+  dt as useBandHalves,
+  at as useContainerFit,
+  mt as usePanelContent,
+  Mt as usePanels,
   D as usePanelsActions,
-  On as usePanelsComponents,
+  Rn as usePanelsComponents,
   v as usePanelsState,
   k as usePanelsStore,
-  dt as usePointerDrag,
-  at as useShownIn,
-  Lt as useShownSpecsIn,
-  ft as useZone,
+  ft as usePointerDrag,
+  ut as useShownIn,
+  Ct as useShownSpecsIn,
+  ht as useZone,
   mn as useZoneDraws,
-  ht as useZonePanels,
-  Ct as useZoneTakesRoom,
-  et as writeLayout,
+  pt as useZonePanels,
+  Zt as useZoneTakesRoom,
+  ot as writeLayout,
   $ as zoneDraws,
   Y as zoneTakesRoom
 };

package/llms-full.txt

@@ -597,6 +597,12 @@ follows your declarations rather than freezing an answer.
 
 Focus and the solo stash are session state and are deliberately not written down.
 
+**When it is written:** at most once every 250 ms, then when the chassis unmounts and when the
+page is hidden. A drag changes the sizes on every frame, and `localStorage` is synchronous — so
+the writes are held rather than made, and one carries the latest state. A custom `write` is
+therefore called rarely, and reading the storage right after an action may find it not written
+yet.
+
 A custom store is two functions:
 
 ```ts
@@ -913,6 +919,8 @@ What the chassis does for you:
 - every panel is a `<section>` named by its title
 - every handle is a `role="separator"` with `aria-orientation`, `aria-valuenow` and its bounds,
   focusable and driven by the arrow keys
+- a handle takes the main button of the primary pointer and nothing else, and keeps the gesture
+  on touch rather than letting the page scroll
 - the focus ring is visible and `prefers-reduced-motion` is respected
 
 What is yours: the contrast of your palette, and the accessible names of whatever you put inside

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pasquelin/panels",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Châssis à panneaux React : rails d'icônes, zones redimensionnables, centre libre. Headless + composants par défaut, entièrement surchargeable.",
   "type": "module",
   "packageManager": "pnpm@11.16.0",